From a5772364f60d03a5ea488a0a66fda6676345f339 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Mon, 23 Oct 2023 18:00:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{6扫描下线看板.jpg => scanDown.jpg} | Bin
 src/views/board/door/index2.vue               | 152 +++--
 src/views/board/finalAssembly/index.vue       | 592 +++++++++++++++++
 src/views/board/scanDown/index.vue            | 598 ++++++++++++++++++
 4 files changed, 1290 insertions(+), 52 deletions(-)
 rename src/assets/board/{6扫描下线看板.jpg => scanDown.jpg} (100%)
 create mode 100644 src/views/board/finalAssembly/index.vue
 create mode 100644 src/views/board/scanDown/index.vue

diff --git a/src/assets/board/6扫描下线看板.jpg b/src/assets/board/scanDown.jpg
similarity index 100%
rename from src/assets/board/6扫描下线看板.jpg
rename to src/assets/board/scanDown.jpg
diff --git a/src/views/board/door/index2.vue b/src/views/board/door/index2.vue
index 78e2c8d..c7996f0 100644
--- a/src/views/board/door/index2.vue
+++ b/src/views/board/door/index2.vue
@@ -129,6 +129,68 @@
         </div>
       </vue-seamless-scroll>
     </div>
+
+    <div class="scrollTable3">
+      <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>
@@ -155,31 +217,36 @@ export default {
   data() {
     return {
       title: [
-        '工单计划',
-        '门体匹配统计',
+        '灌注',
+        '测温性能检测',
+        '安全检测',
+        '小时统计',
+        '小时统计',
         '小时统计',
-        '型号统计',
-        '泡前库统计',
       ],
       titlePosition: [
         {
-          top: 19.8,
+          top: 11.5,
           left: 5.5
         },
         {
-          top: 46.6,
+          top: 41.1,
           left: 5.5
         },
         {
-          top: 73.3,
+          top: 70.5,
           left: 5.5
         },
         {
-          top: 73.3,
-          left: 37
+          top: 11.5,
+          left: 68.5
+        },
+        {
+          top: 41.1,
+          left: 68.5
         },
         {
-          top: 73.3,
+          top: 70.5,
           left: 68.5
         },
       ],
@@ -611,48 +678,29 @@ export default {
   letter-spacing: 2px;
 }
 
-.topNum {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  color: #5db9e8;
-  top: 11.7%;
-  letter-spacing: 0.5vw;
-}
-
-.team {
-  font-size: 1.5vw;
-  left: 16.8%;
-}
-
-.planNum {
-  font-size: 1.7vw;
-  left: 41.2%;
-}
-
-.practicalNum {
-  left: 66.2%;
-  font-size: 1.7vw;
-}
-
-.differenceValue {
-  font-size: 1.7vw;
-  left: 90.7%;
-}
 
 .scrollTable {
   position: absolute;
-  top: 23%;
+  top: 15%;
   left: 4%;
-  width: 45%;
-  height: 18%;
+  width: 61%;
+  height: 20%;
 }
 
 .scrollTable2 {
   position: absolute;
-  top: 49.5%;
+  top: 44.5%;
+  left: 4%;
+  width: 61%;
+  height: 20%;
+}
+
+.scrollTable3 {
+  position: absolute;
+  top: 74%;
   left: 4%;
-  width: 45%;
-  height: 18%;
+  width: 61%;
+  height: 20%;
 }
 
 
@@ -670,25 +718,25 @@ export default {
 
 .chart1 {
   position: absolute;
-  top: 76%;
-  left: 3.6%;
-  width: 29.5%;
-  height: 19.5%;
+  top: 15%;
+  left: 66.6%;
+  width: 30%;
+  height: 21%;
 }
 
 .chart2 {
   position: absolute;
-  top: 76%;
-  left: 35%;
+  top: 44.5%;
+  left: 66.5%;
   width: 30%;
-  height: 19.5%;
+  height: 21%;
 }
 
 .chart3 {
   position: absolute;
-  top: 76%;
+  top: 74%;
   left: 66.5%;
   width: 30%;
-  height: 19.5%;
+  height: 21%;
 }
 </style>
diff --git a/src/views/board/finalAssembly/index.vue b/src/views/board/finalAssembly/index.vue
new file mode 100644
index 0000000..ab37cdc
--- /dev/null
+++ b/src/views/board/finalAssembly/index.vue
@@ -0,0 +1,592 @@
+<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="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>
+</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 {
+      title: [
+        '工单计划',
+        '泡后库存',
+        '小时产量',
+        '出入库统计',
+      ],
+      titlePosition: [
+        {
+          top: 11.5,
+          left: 5.5
+        },
+        {
+          top: 55.4,
+          left: 5.5
+        },
+        {
+          top: 11.5,
+          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: [
+        {
+          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({
+      grid: {
+        left: "0",
+        right: "4%",
+        bottom: '2%',
+        top: "10%",
+        containLabel: true,
+      },
+      xAxis: {
+        data: [
+          "1时",
+          "2时",
+          "3时",
+          "4时",
+          "5时",
+          "7时",
+          "8时",
+        ],
+        axisLine: {
+          lineStyle: {
+            color: "#3d5269",
+          },
+        },
+        axisLabel: {
+          interval: 0,
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+      yAxis: {
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 16,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#3d5269",
+          },
+        },
+        axisLabel: {
+          color: "#fff",
+          fontSize: 10,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "#2d3d53",
+          },
+        },
+        interval: 500,
+      },
+      series: [
+        {
+          type: "bar",
+          barWidth: '40%',
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "#5ef3ff",
+                  },
+                  {
+                    offset: 1,
+                    color: "#06a4f4",
+                  },
+                ],
+                false
+              ),
+            },
+          },
+          label: {
+            normal: {
+              show: true,
+              fontSize: 12,
+              fontWeight: "bold",
+              color: "#ffffff",
+              position: "top",
+            },
+          },
+          data: [254, 3254, 1654, 2454, 2757, 2011, 1211],
+        },
+      ],
+    })
+    this.$refs.chart2.setData({
+      grid: {
+        left: "0",
+        right: "4%",
+        bottom: '2%',
+        top: "10%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      xAxis: {
+        data: ["A-01", "A-02", "A-03"],
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          margin: 30,
+          textStyle: {
+            color: "#f0f0f0",
+          },
+        },
+      },
+      yAxis: {
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: "上底",
+          type: "pictorialBar",
+          symbolSize: [30, 16],
+          symbolOffset: [0, -8],
+          z: 12,
+          itemStyle: {
+            normal: {
+              color: "#14b1eb",
+            },
+          },
+          tooltip: {
+            show: false
+          },
+          data: [
+            {
+              value: 100,
+              symbolPosition: "end",
+            },
+            {
+              value: 50,
+              symbolPosition: "end",
+            },
+            {
+              value: 20,
+              symbolPosition: "end",
+            },
+          ],
+        },
+        {
+          name: "下底",
+          type: "pictorialBar",
+          symbolSize: [30, 16],
+          symbolOffset: [0, 8],
+          z: 12,
+          itemStyle: {
+            normal: {
+              color: "#14b1eb",
+            },
+          },
+          tooltip: {
+            show: false
+          },
+          data: [100, 50, 20],
+        },
+        {
+          name: "内环",
+          type: "pictorialBar",
+          symbolSize: [40, 20],
+          symbolOffset: [0, 10],
+          z: 11,
+          tooltip: {
+            show: false
+          },
+          itemStyle: {
+            normal: {
+              color: "transparent",
+              borderColor: "#14b1eb",
+              borderWidth: 5,
+            },
+          },
+          data: [100, 50, 20],
+        },
+        {
+          tooltip: {
+            show: false
+          },
+          name: "外环",
+          type: "pictorialBar",
+          symbolSize: [55, 26],
+          symbolOffset: [0, 13],
+          z: 10,
+          itemStyle: {
+            normal: {
+              color: "transparent",
+              borderColor: "#14b1eb",
+              borderType: "dashed",
+              borderWidth: 5,
+            },
+          },
+          data: [100, 50, 20],
+        },
+        {
+          name: "数量",
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#14b1eb",
+              opacity: 0.7,
+            },
+          },
+          silent: true,
+          barWidth: 30,
+          barGap: "-100%", // Make series be overlap
+          data: [100, 50, 20],
+        },
+      ],
+    })
+    this.$refs.chart3.setData({
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+        },
+      },
+      grid: {
+        top: "10%",
+        right: "0%",
+        left: "5%",
+        bottom: 20,
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: [
+            "A1库",
+            "A2库",
+            "A3库",
+            "A4库",
+            "A5库",
+            "A6库",
+            "A7库",
+            "A8库",
+            "A9库",
+            "A10库",
+            "A11库",
+            "A12库",
+          ],
+          axisLine: {
+            lineStyle: {
+              color: "rgba(66, 192, 255, .3)",
+            },
+          },
+          axisLabel: {
+            interval: 0,
+            margin: 10,
+            color: "#05D5FF",
+            textStyle: {
+              fontSize: 11,
+            },
+          },
+          axisTick: {
+            //刻度
+            show: false,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          axisLabel: {
+            padding: [3, 0, 0, 0],
+            formatter: "{value}",
+            color: "rgba(95, 187, 235, 1)",
+            textStyle: {
+              fontSize: 11,
+            },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(66, 192, 255, .3)",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0)",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: '库存',
+          type: "bar",
+          data: [
+            20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15
+          ],
+          barWidth: "30%",
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.98,
+                    color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
+                  },
+                ],
+                false
+              ),
+              shadowColor: "rgba(5, 213, 255, 1)",
+              shadowBlur: 4,
+            },
+          },
+          label: {
+            normal: {
+              show: true,
+              lineHeight: 10,
+              formatter: "{c}",
+              position: "top",
+              textStyle: {
+                color: "#fff",
+                fontSize: 10,
+              },
+            },
+          },
+        },
+      ],
+    })
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+.app-container {
+  background-image: url("../../../assets/board/pourInto.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;
+}
+
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+
+.scrollTable {
+  position: absolute;
+  top: 15%;
+  left: 4%;
+  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: 58.5%;
+  left: 3.6%;
+  width: 45.5%;
+  height: 35%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 15%;
+  left: 51%;
+  width: 45.5%;
+  height: 35%;
+}
+
+.chart3 {
+  position: absolute;
+  top: 58.5%;
+  left: 51%;
+  width: 45.5%;
+  height: 35%;
+}
+</style>
diff --git a/src/views/board/scanDown/index.vue b/src/views/board/scanDown/index.vue
new file mode 100644
index 0000000..6b1717a
--- /dev/null
+++ b/src/views/board/scanDown/index.vue
@@ -0,0 +1,598 @@
+<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="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>
+</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 {
+      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: [
+        {
+          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() {
+    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+    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: ['目标产量', '实际产量'],
+        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: ['1时','2时','3时','4时','5时','6时','7时','8时'],
+        },
+      ],
+      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: '实际产量',
+          type: "bar",
+          barWidth: '70%',
+          label: {
+            show: true,
+            position: "top",
+            textStyle: {
+              color: "#fff",
+              fontSize:16
+            },
+          },
+          itemStyle: {
+            normal: {
+              barBorderRadius: 5,
+            },
+          },
+          data:[1,2,3,4,5,67,8],
+        },
+        {
+          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: [3,3,3,3,3,3,3,3],
+        },
+      ],
+    })
+    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: ['不良数', '一次不合格率', '目标'],
+        textStyle: {
+          color: "#d1e6eb",
+          margin: 15,
+          fontSize: 0.75 * vw
+        },
+      },
+      xAxis: [
+        {
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#d1e6eb",
+              margin: 15,
+              fontSize: 0.75 * vw
+            },
+          },
+          type: 'category',
+          data: ['1时','2时','3时','4时','5时','6时','7时','8时'],
+          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: '不良数',
+          type: 'bar',
+          data: [1,2,3,4,5,6,7,8],
+          label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+        },
+        {
+          name: '一次不合格率',
+          type: 'line',
+          yAxisIndex: 1,
+          data: [1,2,3,4,5,6,7,8],
+          itemStyle: {
+            normal: {
+              color: '#F9A25B',
+            },
+          },
+        },
+        {
+          name: '目标',
+          type: 'line',
+          yAxisIndex: 1,
+          data: [1,1,1,1,1,1,1,1],
+          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:["0-3分钟", "3-10分钟", ">10分钟"],
+        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: [254, 3254, 1654],
+        },
+      ],
+    })
+  },
+  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;
+}
+
+.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>