zs_aucma-mes-ui/src/views/board/foaming/index.vue

<template>
  <div class="app-container">
    <div class="headTitle">箱壳后板成型线可视化平台</div>
    <div class="topNum planNum">{{ planNum }}</div>
    <div class="topNum practicalNum">{{ practicalNum }}</div>
    <div class="topNum differenceValue">{{ differenceValue }}</div>

    <div class="scrollTable">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="font-weight: bold;">
          编号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          生产工单
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          计划数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          实际数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          差异值
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          完成率
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTableItem">
              {{ item.name }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="chart1">
      <Chart ref="chart1"></Chart>
    </div>
    <div class="chart2">
      <Chart ref="chart2"></Chart>
    </div>
    <div class="chart3">
      <Chart ref="chart3"></Chart>
    </div>
    <div class="chart4">
      <Chart ref="chart4"></Chart>
    </div>
    <div class="scrollTable1">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="font-weight: bold;">
          编号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          生产工单
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          计划数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          实际数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          差异值
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          完成率
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="scrollTableOption"
        :data="scrollTableData"
        class="case-item"
        style="height: 84%;overflow: hidden;"
      >
        <div
          v-for="(item, index) in scrollTableData"
          :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTableItem">
              {{ item.name }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value2 }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <div class="total">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="font-weight: bold;">
          合计
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          12
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          13
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          14
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          15
        </div>
        <div class="scrollTableItem" style="font-weight: bold;">
          16
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts'

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      planNum: 1000,
      practicalNum: 1000,
      differenceValue: 1000,
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0,
      },
      scrollTableData: [
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
        {
          value: 1,
          value2: 1,
          name: '1',
        },
      ],
    }
  },
  mounted() {
    this.$refs.chart1.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "0",
        right: "4%",
        bottom: "0",
        top: 35,
        containLabel: true,
      },
      legend: {
        data: ["POL压力", "ISO压力"],
        right: 'center',
        top: 0,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      xAxis: {
        type: "category",
        data: ["9-1", "9-2", "9-3", "9-4", "9-5", "9-6", "9-7", "9-8"],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },

      yAxis: {
        type: "value",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {},
      },
      series: [
        {
          name: "POL压力",
          type: "bar",
          barWidth: "33%",
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#49d9ff",
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#39ffff",
                },
                {
                  offset: 1,
                  color: "#f5804d",
                },
              ]),
              borderRadius: 2,
            },
          },
          data: [400, 400, 300, 300, 300, 400, 400, 400],
        },
        {
          name: "ISO压力",
          type: "bar",
          barWidth: "33%",
          barGap: '50%',
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#49d9ff",
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#47cbfd",
                },
                {
                  offset: 1,
                  color: "#3e8aff",
                },
              ]),
              borderRadius: 2,
            },
          },
          data: [400, 500, 500, 500, 500, 400, 400, 500],
        },
      ],
    })
    this.$refs.chart2.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "0",
        right: "4%",
        bottom: 0,
        top: 20,
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: ["A-01", "A-02", "A-03", "A-04", "A-05", "A-06", "A-07", "A-08"],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },

      yAxis: {
        type: "value",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {},
      },
      series: [
        {
          name: "产量",
          type: "bar",
          barWidth: "40%",
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#49d9ff",
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#47cbfd",
                },
                {
                  offset: 1,
                  color: "#3e8aff",
                },
              ]),
              borderRadius: 3,
            },
          },
          data: [400, 500, 500, 500, 500, 400, 400, 500],
        },
      ],
    })
    this.$refs.chart3.setData({
      legend: {
        data: ["POL温度", "ISO温度"],
        right: 'center',
        top: 0,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0, 255, 233,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 255, 255,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 233,0)",
                },
              ],
              global: false,
            },
          },
        },
      },
      grid: {
        top: "15%",
        left: 40,
        right: "5%",
        bottom: "15%",
        // containLabel: true
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            show: true,
          },
          splitArea: {
            // show: true,
            color: "#f00",
            lineStyle: {
              color: "#f00",
            },
          },
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false,
          data: ["A", "B", "C", "D", "E", "F"],
        },
      ],

      yAxis: [
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: true,
          },
        },
      ],
      series: [
        {
          name: "POL温度",
          type: "line",
          // smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: "#49d9ff",
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#49d9ff",
            },
          },
          itemStyle: {
            color: "#49d9ff",
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(108,80,243,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(108,80,243,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(108,80,243, 0.9)",
              shadowBlur: 20,
            },
          },
          data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
        },
        {
          name: "ISO温度",
          type: "line",
          // smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: "#668e84",
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#668e84",
            },
          },

          itemStyle: {
            color: "#00ca95",
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0,202,149,0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,202,149,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0,202,149, 0.9)",
              shadowBlur: 20,
            },
          },
          data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
        },
      ],
    })
    this.$refs.chart4.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "0",
        right: "4%",
        bottom: "0",
        top: "10%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        data: ["9-1", "9-2", "9-3", "9-4", "9-5", "9-6", "9-7", "9-8"],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },

      yAxis: {
        type: "value",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {},
      },
      series: [
        {
          name: "POL压力",
          type: "bar",
          barWidth: "33%",
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#49d9ff",
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#39ffff",
                },
                {
                  offset: 1,
                  color: "#f5804d",
                },
              ]),
              borderRadius: 2,
            },
          },
          data: [400, 400, 300, 300, 300, 400, 400, 400],
        },
      ],
    })
  },
  methods: {}
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/foaming.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}


.topNum {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #5db9e8;
  top: 17.1%;
  letter-spacing: 2vw;
}

.planNum {
  font-size: 1.7vw;
  left: 36.5%;
}

.practicalNum {
  left: 50.9%;
  font-size: 1.7vw;
  color: #97febd;
}

.differenceValue {
  font-size: 1.7vw;
  left: 65.4%;
  color: #b15462;
}

.scrollTable {
  position: absolute;
  top: 15%;
  left: 4%;
  width: 23%;
  height: 20%;
}

.scrollTableItem {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: 16.6%;
}

.chart1 {
  position: absolute;
  top: 14.5%;
  left: 73%;
  width: 23.5%;
  height: 21%;
}

.chart2 {
  position: absolute;
  top: 43%;
  left: 3.6%;
  width: 23.3%;
  height: 15.5%;
}

.chart3 {
  position: absolute;
  top: 42%;
  left: 73%;
  width: 23.5%;
  height: 18.5%;
}

.chart4 {
  position: absolute;
  top: 66.2%;
  left: 73%;
  width: 23.5%;
  height: 28.5%;
}

.scrollTable1 {
  position: absolute;
  top: 66%;
  left: 3.5%;
  width: 68%;
  height: 25%;
}

.total {
  position: absolute;
  top: 91%;
  left: 3.5%;
  width: 68%;
  height: 3%;
}
</style>