zs_aucma-mes-ui/src/views/board/foaming/index2.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="title" v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
      {{ i }}
    </div>
    <div style="position: absolute; top: 23%;left: 30%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
      <div>设备状态：</div>
      <div>门体发泡线状态：</div>
      <div>门体发泡机状态：</div>
    </div>
    <div style="position: absolute; top: 23%;left: 60%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
      <div>生产节拍：</div>
      <div>线体1圈 1s</div>
      <div>台车1位 1s</div>
    </div>
    <div class="foamingMachine"></div>

    <div class="supplementInfo">注射压力标准范围：10.0-14.0Mpa A、B组份枪头压力差＜1Mpa</div>
    <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
    <div style="position: absolute;top: 62%; left: 40%;color:#FFF">
      <div style="width: 12px;height: 12px;background-color:  #1be409;display: inline-block;margin: 0 8px;"></div> 启用
      <div style="width: 12px;height: 12px;background-color:  #8a8e96;display: inline-block;margin: 0 8px;"></div>停用
      <div style="width: 12px;height: 12px;background-color:  #ff0000;display: inline-block;margin: 0 8px;"></div> 注料位
      <div style="width: 12px;height: 12px;background-color:  #ff8000;display: inline-block;margin: 0 8px;"></div>出模位
    </div>

    <div class="scrollTable">
      <div style="background-color: #094170">
        <div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
          序号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
          型号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 ">
          扫描时间
        </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" style="width: 33%;padding:4px 0 ">
              {{ item.value1 }}
            </div>
            <div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
              {{ item.value2 }}
            </div>
            <div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
              {{ item.value3 }}
            </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="tableOne">
      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2decc ">
        <div style="width: 33%;display: inline-block">台车号</div>
        <div style="width: 33%;display: inline-block">型号</div>
        <div style="width: 33%;display: inline-block">产量</div>
      </div>
      <div v-for="i in 10"
        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
        <div style="width: 33%;display: inline-block">{{ i }}</div>
        <div style="width: 33%;display: inline-block">487JFY</div>
        <div style="width: 33%;display: inline-block">15-15</div>
      </div>
    </div>
    <div class="tableTwo">
      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2decc">
        <div style="width: 33%;display: inline-block">台车号</div>
        <div style="width: 33%;display: inline-block">型号</div>
        <div style="width: 33%;display: inline-block">产量</div>
      </div>
      <div v-for="i in 10"
        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ff5959' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
        <div style="width: 33%;display: inline-block">{{ i }}</div>
        <div style="width: 33%;display: inline-block">487JFY</div>
        <div style="width: 33%;display: inline-block">15-15</div>
      </div>
    </div>
    <div class="tableThree">
      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2decc">
        <div style="width: 33%;display: inline-block">台车号</div>
        <div style="width: 33%;display: inline-block">型号</div>
        <div style="width: 33%;display: inline-block">产量</div>
      </div>
      <div v-for="i in 10"
        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ffb769' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
        <div style="width: 33%;display: inline-block">{{ i }}</div>
        <div style="width: 33%;display: inline-block">487JFY</div>
        <div style="width: 33%;display: inline-block">15-15</div>
      </div>
    </div>
    <div class="tableFour">
      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2decc">
        <div style="width: 33%;display: inline-block">台车号</div>
        <div style="width: 33%;display: inline-block">型号</div>
        <div style="width: 33%;display: inline-block">产量</div>
      </div>
      <div v-for="i in 10"
        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
        <div style="width: 33%;display: inline-block">{{ i }}</div>
        <div style="width: 33%;display: inline-block">487JFY</div>
        <div style="width: 33%;display: inline-block">15-15</div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      title: [
        '箱体队列',
        '箱体队列统计',
        '生产统计数据',
        '发泡注射压力监控',
        '发泡料温度监控',
        '门体发泡生产统计',
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 5.5
        },
        {
          top: 39.2,
          left: 5.5
        },
        {
          top: 62.8,
          left: 5.5
        },
        {
          top: 11.5,
          left: 75
        },
        {
          top: 39.3,
          left: 75
        },
        {
          top: 62.9,
          left: 75
        },
      ],
      show: 0,
      planNum: 1000,
      practicalNum: 1000,
      differenceValue: 1000,
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 9999999999, // 开始无缝滚动的数据量 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: [],
    }
  },
  mounted() {
    let timeInter = setInterval(() => {
      this.show = (this.show + 1) % 4
    }, 10 * 1000)
    getData().then(e => {
      this.scrollTableData = e.table33
      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: e.chart5.y.map(val => val.name),
          right: 'center',
          top: 0,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: e.chart5.x,
          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: e.chart5.y[0].name,
            type: "bar",
            barWidth: "30%",
            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: e.chart5.y[0].data,
          },
          {
            name: e.chart5.y[1].name,
            type: "bar",
            barWidth: "30%",
            barGap: '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: 2,
              },
            },
            data: e.chart5.y[1].data,
          },
        ],
      })
      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: e.chart3.x,
          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: e.chart3.y.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: e.chart3.y.data,
          },
        ],
      })
      this.$refs.chart3.setData({
        legend: {
          data: e.chart6.y.map(val => val.name),
          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: [
          {
            show: false,
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              color: "#fff",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: e.chart6.x,
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 18,
            max: 24,
            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: e.chart6.y[0].name,
            type: "line",
            showAllSymbol: true,
            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: e.chart6.y[0].data,
          },
          {
            name: e.chart6.y[1].name,
            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: e.chart6.y[1].data,
          },
        ],
      })
      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: e.chart3.x,
          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: e.chart3.y.name,
            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: e.chart3.y.data,
          },
        ],
      })
    })
  },
  methods: {}
};
</script>
<style scoped>
.foamingMachine{
  background-image: url("../../../assets/board/foamingMachine.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  transform: translateX(-50%);
  top: 35%;
  left: 50%;
  width: 36vw;
  height: 12vw;
}
.app-container {
  background-image: url("../../../assets/board/foaming1.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: 0 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%;
}

.table1-enter-active {
  animation: table-in .5s;
}

.table1-leave-active {
  animation: table-in .5s reverse;
}

@keyframes table-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.supplementInfo {
  position: absolute;
  top: 35.5%;
  left: 73.6%;
  font-size: 0.7vw;
  color: #fff;
}

.supplementInfo1 {
  position: absolute;
  top: 59%;
  left: 73.6%;
  font-size: 0.7vw;
  color: #fff;
}

.tableOne {
  position: absolute;
  top: 66%;
  left: 3.5%;
  width: 17%;
  height: 29%;
}

.tableTwo {
  position: absolute;
  top: 66%;
  left: 20.7%;
  width: 16.8%;
  height: 29%;
}

.tableThree {
  position: absolute;
  top: 66%;
  left: 37.7%;
  width: 16.8%;
  height: 29%;
}

.tableFour {
  position: absolute;
  top: 66%;
  left: 54.7%;
  width: 16.8%;
  height: 29%;
}
.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}
</style>