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

<template>
  <div class="app-container">
    <div class="headTitle">一线成品入库数据监控平台</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 class="loss">{{loss}}</div>
    <div class="meter">{{meter}}</div>
    <span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 1vw;">目标：1000&nbsp;&nbsp;进度目标：1000&nbsp;&nbsp;实际：1000&nbsp;&nbsp;差异：0&nbsp;&nbsp;达成率：100% </span>
    <span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 1vw">目标：3% &nbsp;&nbsp;&nbsp;实际：1% &nbsp;&nbsp;&nbsp;累计不良数：1</span>
    <span style="position: absolute;top: 54.3%;left: 66.7%;color: #CFD2D0;font-size: 1.0vw">合计：111</span>

    <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.value1 }}
            </div>
            <div
              class="scrollTableItem">
              AA-001
            </div>
            <div
              class="scrollTableItem">
              {{ item.value3 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value4 }}
            </div>
            <div
              class="scrollTableItem">
              {{ item.value6 }}
            </div>
            <div
              class="scrollTableItem">
             2023-01-01 00:00:00
            </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>
</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 {
      loss:100,
      meter:30,
      title: [
        '成品产量',
        '终检一次不合格率',
        'LOSS(分钟)',
        '入库标准节拍(秒)',
        'LOSS分类',
        '当班入库执行订单',
      ],
      titlePosition: [
        {
          top: 11.5,
          left: 5.5
        },
        {
          top: 55.4,
          left: 5.5
        },
        {
          top: 11.5,
          left: 52.7
        },
        {
          top: 11.5,
          left: 76.5
        },
        {
          top: 26.2,
          left: 52.7
        },
        {
          top: 55.4,
          left: 52.7
        },
      ],
      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: [],

    }
  },
  mounted() {
    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
    getData().then(e => {
      this.scrollTableData = e.table8
      this.$refs.chart1.setData({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            crossStyle: {
              color: '#999',
            },
          },
        },
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          show: true,
          itemGap: 50,
          data: e.chart11.y.map(val => val.name),
          textStyle: {
            color: "#f9f9f9",
            borderColor: "#fff",
            fontSize: 16
          },
        },
        dataZoom: [],
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                opacity: 0.3,
              },
            },
            axisLabel: {
              interval: 0,
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
                fontSize: 16
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#777777',
                opacity: 0.3,
              },
            },
            data: e.chart11.x,
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#777777',
                opacity: 0.3,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
                opacity: 0.3,
              },
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
                fontSize: 16
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: e.chart11.y[0].name,
            type: "bar",
            barWidth: '70%',
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 16
              },
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: function (val) {
                  console.log()
                  if (e.chart11.y[0].data[val.dataIndex] >= e.chart11.y[1].data[val.dataIndex]) {
                    return '#30e391'
                  } else {
                    return '#FE70A6'
                  }
                  // return "#0D81ED"
                },
              },
            },
            data: e.chart11.y[0].data,
          },
          {
            name: e.chart11.y[1].name,
            type: "line",
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                width: 3,
                color: '#fff',
              },
              borderColor: "#f0f",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: 16
              },
            },
            itemStyle: {
              color: '#F2D770',
              border: 0,
            },
            // tooltip: {
            //     show: false
            // },
            data: e.chart11.y[1].data,
          },
        ],
      })
      this.$refs.chart2.setData({
        grid: {
          top: "15%",
          left: "1%",
          right: "1%",
          bottom: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          itemWidth: 3 * vw,
          data: e.chart12.y.map(val => val.name),
          textStyle: {
            color: "#d1e6eb",
            margin: 15,
            fontSize: 0.75 * vw
          },
        },
        xAxis: [
          {
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
                fontSize: 0.75 * vw
              },
            },
            type: 'category',
            data: e.chart12.x,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
                fontSize: 0.75 * vw
              },
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            splitLine: {
              show: false,
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
                fontSize: 0.75 * vw
              },
              formatter: '{value}% '
            }
          }
        ],
        series: [
          {
            name: e.chart12.y[0].name,
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (val) {
                  console.log()
                  if (e.chart12.y[1].data[val.dataIndex] < e.chart12.y[2].data[val.dataIndex]) {
                    return '#30e391'
                  } else {
                    return '#FE70A6'
                  }
                  // return "#0D81ED"
                },
              },
            },
            data: e.chart12.y[0].data,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: "rgba(255,255,255,0.5)",
                fontSize: 0.75 * vw
              },
            },
          },
          {
            name: e.chart12.y[1].name,
            type: 'line',
            yAxisIndex: 1,
            data: e.chart12.y[1].data,
            itemStyle: {
              normal: {
                color: '#F9A25B',
              },
            },
          },
          {
            name: e.chart12.y[2].name,
            type: 'line',
            yAxisIndex: 1,
            data: e.chart12.y[2].data,
            itemStyle: {
              normal: {
                color: '#0DB99D',
              },
            },
          }
        ]
      })
      this.$refs.chart3.setData({
        tooltip: {
          textStyle: {
            fontSize: 0.8 * vw
          }
        },
        grid: {
          top: "10%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: {
          data: e.chart13.x,
          axisLine: {
            lineStyle: {
              color: "#0177d4",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 0.8 * vw,
            interval: 0,
          },
        },
        yAxis: {
          nameTextStyle: {
            color: "#fff",
            fontSize: 0.8 * vw,
          },
          axisLine: {
            lineStyle: {
              color: "#0177d4",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 0.8 * vw,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#0177d4",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 2 * vw,
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 0.8 * vw,
                color: '#fff'
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#00b0ff",
                    },
                    {
                      offset: 0.8,
                      color: "#7052f4",
                    },
                  ],
                  false
                ),
              },
            },
            data: e.chart13.y.data,
          },
        ],
      })
    })
  },
  methods: {}
};
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/scanDown.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.loss{
  position: absolute;
  transform: translate(-50%,-50%);
  top: 18.1%;
  left: 62%;
  font-size: 1.5vw;
  letter-spacing: 2px;
  color: #cccccc;
}
.meter{
  position: absolute;
  transform: translate(-50%,-50%);
  top: 18.1%;
  left: 85.6%;
  font-size: 1.5vw;
  letter-spacing: 2px;
  color: #cccccc;
}
.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}


.scrollTable {
  position: absolute;
  top: 59%;
  left: 51%;
  width: 45%;
  height: 36%;
}


.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: 15%;
  left: 3.6%;
  width: 45.5%;
  height: 35%;
}

.chart2 {
  position: absolute;
  top: 59%;
  left: 3.5%;
  width: 45.5%;
  height: 35%;
}

.chart3 {
  position: absolute;
  top: 29%;
  left: 51%;
  width: 45.5%;
  height: 22%;
}
</style>