From d3088aec39da8b114c8840c9197b20ac865ac998 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Thu, 11 Dec 2025 16:20:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0oee=E5=92=8C=E8=83=BD=E8=80=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/board1/index.vue  |  178 ++-
 src/views/board/board2/index.vue  |   85 +-
 src/views/board/board3/index.vue  | 2346 +++++++++++++++++++++++++++++
 src/views/board/board3/index2.vue | 1042 +++++++++++++
 src/views/board/week2/index.vue   | 1412 +++++++++++++++++
 5 files changed, 5016 insertions(+), 47 deletions(-)
 create mode 100644 src/views/board/board3/index.vue
 create mode 100644 src/views/board/board3/index2.vue
 create mode 100644 src/views/board/week2/index.vue

diff --git a/src/views/board/board1/index.vue b/src/views/board/board1/index.vue
index fe6aa01..403c4d9 100644
--- a/src/views/board/board1/index.vue
+++ b/src/views/board/board1/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
     <div class="headTitle">注塑车间设备运行监控平台</div>
+    <div class="subTitle" style="top: 20%;left: 88%;">设备OEE</div>
+    <div class="subTitle" style="top: 60%;left: 88%;">设备能耗</div>
     <div class="topNum deviceNum">
       <span class="text">设备数量</span>
       <span>：</span>
@@ -70,19 +72,164 @@
         <div class="itemText">待机时长</div>
       </div>
     </div>
+    <div class="oee">
+      <Chart ref="chart1"></Chart>
+    </div>
+    <div class="energy">
+      <Chart ref="chart2"></Chart>
+    </div>
   </div>
 </template>
 
 <script>
 
+import Chart from "@/components/board/Chart.vue";
+import * as echarts from "echarts";
+
 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
-  components: {},
+  components: {
+    Chart
+  },
   name: "Liner",
   data() {
     return {}
   },
   mounted() {
+    this.$refs.chart1.setData({
+      title: [
+        {
+          text: "75%",
+          x: "center",
+          y: "center",
+          textStyle: {
+            fontSize: 2 * vw,
+            color: "#FFFFFF",
+            fontFamily: "DINAlternate-Bold, DINAlternate",
+            foontWeight: "600",
+          },
+        },
+      ],
+      polar: {
+        radius: ["58%", "68%"],
+        center: ["50%", "50%"],
+      },
+      angleAxis: {
+        max: 133,
+        // startAngle: 225,
+        // endAngle: -180,
+        clockwise: true,
+        show: false
+      },
+      radiusAxis: {
+        type: "category",
+        show: true,
+        axisLabel: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: "",
+          type: "bar",
+          roundCap: false,
+          barWidth: 30,
+          showBackground: true,
+          backgroundStyle: {
+            color: "rgba(66, 66, 66, .3)",
+          },
+          data: [100],
+          coordinateSystem: "polar",
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: "#16CEB9",
+                },
+                {
+                  offset: 1,
+                  color: "#6648FF",
+                },
+              ]),
+            },
+          },
+        },
+      ],
+    })
+    this.$refs.chart2.setData({
+      title: [
+        {
+          text: "75%",
+          x: "center",
+          y: "center",
+          textStyle: {
+            fontSize: 2 * vw,
+            color: "#FFFFFF",
+            fontFamily: "DINAlternate-Bold, DINAlternate",
+            fontWeight: "600",
+          },
+        },
+      ],
+      polar: {
+        radius: ["58%", "68%"],
+        center: ["50%", "50%"],
+      },
+      angleAxis: {
+        max: 133,
+        // startAngle: 225,
+        // endAngle: -180,
+        clockwise: true,
+        show: false
+      },
+      radiusAxis: {
+        type: "category",
+        show: true,
+        axisLabel: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          name: "",
+          type: "bar",
+          roundCap: false,
+          barWidth: 30,
+          showBackground: true,
+          backgroundStyle: {
+            color: "rgba(66, 66, 66, .3)",
+          },
+          data: [100],
+          coordinateSystem: "polar",
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: "#16CEB9",
+                },
+                {
+                  offset: 1,
+                  color: "#6648FF",
+                },
+              ]),
+            },
+          },
+        },
+      ],
+    })
   },
   methods: {},
   computed: {
@@ -98,7 +245,7 @@ export default {
   }
 };
 </script>
-<style scoped>
+<style scoped lang="less">
 .app-container {
   background-image: url("../../../assets/board/boardBg1.jpg");
   background-repeat: no-repeat;
@@ -110,6 +257,13 @@ export default {
   left: 0;
 }
 
+.subTitle {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-size: 1.2vw;
+  color: #d6eaed;
+  letter-spacing: 0.1vw;
+}
 .headTitle {
   position: absolute;
   top: 5%;
@@ -226,7 +380,7 @@ export default {
   position: absolute;
   top: 17%;
   left: 3.3%;
-  width: 93.4%;
+  width: 74.8%;
   height: 78%;
   overflow: auto;
 
@@ -236,7 +390,7 @@ export default {
 
   .item {
     display: inline-block;
-    width: calc(25% - 1vw);
+    width: calc(33% - 1vw);
     height: 13.91vw;
     margin: 0.5vw;
     position: relative;
@@ -334,4 +488,20 @@ export default {
   }
 }
 
+.oee {
+  position: absolute;
+  top: 23%;
+  left: 78%;
+  width: 20%;
+  height: 30%;
+}
+
+.energy {
+  position: absolute;
+  top: 63%;
+  left: 78%;
+  width: 20%;
+  height: 30%;
+}
+
 </style>
diff --git a/src/views/board/board2/index.vue b/src/views/board/board2/index.vue
index 5407242..fd3411e 100644
--- a/src/views/board/board2/index.vue
+++ b/src/views/board/board2/index.vue
@@ -3,23 +3,24 @@
     <div class="headTitle">注塑车间设备效率监控平台</div>
     <div class="chart1">
       <Chart ref="chart1"></Chart>
-      <div class="text">当前在线数量：9</div>
+      <div class="numText">当前在线数量：9</div>
     </div>
     <div class="chart2">
       <Chart ref="chart2"></Chart>
-      <div class="text">当前在线数量：9</div>
+      <div class="numText">当前关机数量：9</div>
     </div>
     <div class="chart3">
       <Chart ref="chart3"></Chart>
-      <div class="text">当前在线数量：9</div>
+      <div class="numText">当前故障数量：9</div>
     </div>
     <div class="chart4">
       <Chart ref="chart4"></Chart>
-      <div class="text">当前在线数量：9</div>
+      <div class="numText">当前待机数量：9</div>
     </div>
     <div class="subTitle" style="top: 41.1%;left: 5.5%;">设备信息</div>
     <div class="subTitle" style="top: 11.5%;left: 68.5%;">生产统计</div>
-    <div class="subTitle" style="top: 41.1%;left: 68.5%;">稼动率/OEE</div>
+    <!--    <div class="subTitle" style="top: 41.1%;left: 68.5%;">稼动率/OEE</div>-->
+    <div class="subTitle" style="top: 41.1%;left: 68.5%;">OEE</div>
     <div class="subTitle" style="top: 70.5%;left: 68.5%;">故障设备排名</div>
 
     <div class="scrollTable">
@@ -118,19 +119,19 @@
     </div>
     <div class="fault1">
       <div class="faultText1" style="top: 79%;left: 71.9%;">01</div>
-      <div class="faultText1" style="top: 82%;left: 71.9%;">焊接设备001</div>
+      <div class="faultText1" style="top: 82%;left: 71.9%;">注塑设备001</div>
       <div class="faultText2" style="top: 86%;left: 71.9%;">故障率：46% 故障次数：10</div>
       <div class="faultText2" style="top: 88%;left: 71.9%;">故障总时长：9min</div>
     </div>
     <div class="fault2">
       <div class="faultText1" style="top: 79%;left: 81.7%;">02</div>
-      <div class="faultText1" style="top: 82%;left: 81.7%;">焊接设备002</div>
+      <div class="faultText1" style="top: 82%;left: 81.7%;">注塑设备002</div>
       <div class="faultText2" style="top: 86%;left: 81.7%;">故障率：46% 故障次数：10</div>
       <div class="faultText2" style="top: 88%;left: 81.7%;">故障总时长：9min</div>
     </div>
     <div class="fault3">
       <div class="faultText1" style="top: 79%;left: 91.4%;">03</div>
-      <div class="faultText1" style="top: 82%;left: 91.4%;">焊接设备003</div>
+      <div class="faultText1" style="top: 82%;left: 91.4%;">注塑设备003</div>
       <div class="faultText2" style="top: 86%;left: 91.4%;">故障率：46% 故障次数：10</div>
       <div class="faultText2" style="top: 88%;left: 91.4%;">故障总时长：9min</div>
     </div>
@@ -655,36 +656,36 @@ export default {
         },
       ],
       series: [
-        {
-          name: "稼动率",
-          type: "line",
-          showAllSymbol: true,
-          symbol: "circle",
-          symbolSize: 5,
-          lineStyle: {
-            normal: {
-              color: "#2FCCE9",
-              shadowColor: "rgba(0, 0, 0, .3)",
-              shadowBlur: 0,
-              shadowOffsetY: 5,
-              shadowOffsetX: 5,
-            },
-          },
-
-          itemStyle: {
-            color: "#2FCCE9",
-            borderColor: "#2FCCE9",
-            borderWidth: 3,
-            shadowColor: "rgba(0, 0, 0, .3)",
-            shadowBlur: 0,
-            shadowOffsetY: 2,
-            shadowOffsetX: 2,
-          },
-          tooltip: {
-            show: false,
-          },
-          data: [17, 27, 38, 19, 28],
-        },
+        // {
+        //   name: "稼动率",
+        //   type: "line",
+        //   showAllSymbol: true,
+        //   symbol: "circle",
+        //   symbolSize: 5,
+        //   lineStyle: {
+        //     normal: {
+        //       color: "#2FCCE9",
+        //       shadowColor: "rgba(0, 0, 0, .3)",
+        //       shadowBlur: 0,
+        //       shadowOffsetY: 5,
+        //       shadowOffsetX: 5,
+        //     },
+        //   },
+        //
+        //   itemStyle: {
+        //     color: "#2FCCE9",
+        //     borderColor: "#2FCCE9",
+        //     borderWidth: 3,
+        //     shadowColor: "rgba(0, 0, 0, .3)",
+        //     shadowBlur: 0,
+        //     shadowOffsetY: 2,
+        //     shadowOffsetX: 2,
+        //   },
+        //   tooltip: {
+        //     show: false,
+        //   },
+        //   data: [17, 27, 38, 19, 28],
+        // },
         {
           name: "OEE",
           type: "line",
@@ -724,8 +725,8 @@ export default {
       return Array(222).fill(0).map(i => {
         return {
           value1: 'PRES001',
-          value2: '焊接设备001',
-          value3: '自动焊接机',
+          value2: '注塑设备001',
+          value3: '伊之密注塑机',
           value4: '98.76%',
           value5: '87.65%',
           value6: '0%',
@@ -770,8 +771,7 @@ export default {
   letter-spacing: 0.1vw;
 }
 
-.chart1, .chart2, .chart3, .chart4 {
-  .text {
+.numText {
     position: absolute;
     top: 80%;
     left: 50%;
@@ -779,7 +779,6 @@ export default {
     font-size: 0.8vw;
     color: #fff;
     white-space: nowrap;
-  }
 }
 
 .chart1 {
diff --git a/src/views/board/board3/index.vue b/src/views/board/board3/index.vue
new file mode 100644
index 0000000..821312e
--- /dev/null
+++ b/src/views/board/board3/index.vue
@@ -0,0 +1,2346 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">注塑生产数据监控平台</div>
+    <div class="topNum planNum">{{
+        (['0', '0', '0', '0']).concat(planNum.toString().split('')).slice(-4).join('')
+      }}
+    </div>
+    <div class="topNum practicalNum">
+      {{
+        (['0', '0', '0', '0']).concat(practicalNum.toString().split('')).slice(-4).join('')
+      }}
+    </div>
+    <div class="topNum differenceValue">
+      {{
+        (['0', '0', '0', '0']).concat(differenceNum.toString().split('')).slice(-4).join('')
+      }}
+    </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 class="info1">-->
+    <!--      A：-->
+    <!--    </div>-->
+    <!--    <div class="status1"-->
+    <!--         :style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'A1')&&statusArr.find(e=>e.X_VALUE === 'A1').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>-->
+    <!--    <div class="info2">-->
+    <!--      B：-->
+    <!--    </div>-->
+    <!--    <div class="status2"-->
+    <!--         :style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'B1')&&statusArr.find(e=>e.X_VALUE === 'B1').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>-->
+    <!--    <div class="info3">-->
+    <!--      C：-->
+    <!--    </div>-->
+    <!--    <div class="status3"-->
+    <!--         :style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'A2')&&statusArr.find(e=>e.X_VALUE === 'A2').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>-->
+    <!--    <div class="info4">-->
+    <!--      D：-->
+    <!--    </div>-->
+    <!--    <div class="status4"-->
+    <!--         :style="'background-color:'+(statusArr.find(e=>e.X_VALUE === 'B2')&&statusArr.find(e=>e.X_VALUE === 'B2').Y_VALUE >0 ? '#00ff00':'#ff0000')"></div>-->
+
+    <div class="foamingMachine"></div>
+    <!--    <div class="left1">-->
+    <!--      <span>A</span>-->
+    <!--    </div>-->
+    <!--    <div class="left2">-->
+    <!--      <span>B</span>-->
+    <!--    </div>-->
+    <!--    <div class="right1">-->
+    <!--      <span>C</span>-->
+    <!--    </div>-->
+    <!--    <div class="right2">-->
+    <!--      <span>D</span>-->
+    <!--    </div>-->
+
+    <div class="chartSpan1" v-if="$route.query.id === '1' || id === '1'">东线</div>
+    <div class="chartSpan2" v-if="$route.query.id === '1' || id === '1'">西线</div>
+
+    <!--    <div class="supplementInfo">注射压力标准范围：10.0-15.0Mpa A、B组份枪头压力差≤2Mpa</div>-->
+    <!--    <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>-->
+
+    <div class="scrollTable">
+      <div style="background-color: #094170">
+        <div class="scrollTableItem" style="font-weight: bold;width: 20%">
+          型号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 20%">
+          计划数
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 20%">
+          完成数
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 20%">
+          差异数
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 20%">
+          执行进度
+        </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: 20%">
+              {{ item.COLUMN_A }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 20%">
+              {{ item.COLUMN_B }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 20%">
+              {{ item.COLUMN_C }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 20%">
+              {{ item.COLUMN_D }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 20%">
+              {{ item.COLUMN_E }}
+            </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>
+    <transition name="table1" v-for="(i,k) in Math.ceil(scrollTableData1.length)">
+      <div class="scrollTable1" v-if="show === k">
+        <div style="background-color: #094170; height: calc(25vh/7)">
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            工位
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+            型号
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            状态
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            目标
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            计划
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            累计
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 7%">
+            达成率
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[0] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[1] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[2] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[3] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[4] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[5] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[6] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[7] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[8] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[9] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[10] }}
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+            {{ hourArr[11] }}
+          </div>
+        </div>
+        <!--      <vue-seamless-scroll-->
+        <!--        :class-option="scrollTableOption"-->
+        <!--        :data="scrollTableData1"-->
+        <!--        class="case-item"-->
+        <!--        style="height: 84%;overflow: hidden;"-->
+        <!--      >-->
+        <div
+            v-for="(item, index) in scrollTableData1.slice(k*6,(k+1)*6)"
+            :key="index"
+            style="height: calc(25vh/7)"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value1 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 8%">
+              {{ item.value2 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value3 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value4 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value5 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value6 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 7%">
+              {{ item.value7 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value8 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value9 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value10 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value11 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value12 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value13 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value14 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value15 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value16 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value17 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value18 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 5%">
+              {{ item.value19 }}
+            </div>
+          </div>
+        </div>
+        <!--      </vue-seamless-scroll>-->
+      </div>
+    </transition>
+    <div class="total">
+      <div style="background-color: #094170">
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+          合计
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value1 }}%
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value2 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value3 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 7%">
+          {{ total.value4 }}%
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value5 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value6 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value7 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value8 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value9 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value10 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value11 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value12 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value13 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value14 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value15 }}
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 5%">
+          {{ total.value16 }}
+        </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, getFoamingData, getCurrentTeamTimeList} from "@/api/board/getData";
+import {mixData} from "@/api/board/mixData";
+
+let intervalFun = null
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  name: "Liner",
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      show: 0,
+      planNum: '',
+      practicalNum: '',
+      differenceNum: '',
+      total: {},
+      title: [
+        '生产计划',
+        '生产统计',
+        '生产统计数据',
+        '压力监控',
+        '温度监控',
+        '产量统计',
+      ],
+      statusArr: [],
+      hourArr: [
+        "08:30",
+        "09:00",
+        "10:00",
+        "11:00",
+        "12:00",
+        "13:00",
+        "14:00",
+        "15:00",
+        "16:00",
+        "17:00",
+        "18:00",
+        "19:00"],
+      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
+        },
+      ],
+      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: [],
+      scrollTableData1: Array(100).fill(0).map((_, i) => {
+        return {
+          value1: i + 1,
+          value2: i + 2,
+          value3: '生产中',
+          value4: Math.ceil(Math.random() * 10),
+          value5: Math.ceil(Math.random() * 100),
+          value6: Math.ceil(Math.random() * 50),
+          value7: (Math.random() * 100).toFixed(2) + '%',
+          value8: Math.ceil(Math.random() * 10),
+          value9: Math.ceil(Math.random() * 10),
+          value10: Math.ceil(Math.random() * 10),
+          value11: Math.ceil(Math.random() * 10),
+          value12: Math.ceil(Math.random() * 10),
+          value13: Math.ceil(Math.random() * 10),
+          value14: Math.ceil(Math.random() * 10),
+          value15: Math.ceil(Math.random() * 10),
+          value16: Math.ceil(Math.random() * 10),
+          value17: Math.ceil(Math.random() * 10),
+          value18: Math.ceil(Math.random() * 10),
+          value19: Math.ceil(Math.random() * 10),
+        }
+      }),
+
+      RequestDataSet: [
+        {
+          e: 'fp-1-01',
+          i: "scada_fp_cy_01('CX_01')",
+          f: (e) => {
+            this.planNum = e[0].X_VALUE
+            this.practicalNum = e[0].Y_VALUE_ONE
+            this.differenceNum = e[0].Y_VALUE_TWO
+          }
+        },
+        {
+          e: 'fp-1-03',
+          i: "scada_fp_plan_01('CX_01')",
+          f: (e) => {
+            this.scrollTableData = e
+          }
+        },
+        {
+          e: 'fp-1-04',
+          i: "scada_fp_pro_tj_01('CX_01')",
+          f: (e) => {
+            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.map(val => val.X_VALUE),
+                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: [
+                {
+                  barMaxWidth: 40,
+                  name: '数量',
+                  type: "bar",
+                  barWidth: "40%",
+                  label: {
+                    show: true,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-1-05',
+          i: "SCADA_INV_STATS_01('')",
+          t: 2,
+          f: (e) => {
+            let table = e.map(val => {
+              return {
+                value1: val.EQUIPMENT_CODE,
+                value2: val.FIXTUREBOXTYPE,
+                value3: val.FIXTURESTATUS,
+                value4: val.TARGET,
+                value5: val.TARGET * 11,
+                value6: val.PRO_SUM,
+                value7: (val.TARGET === 0 ? 0 : ((val.PRO_SUM / (val.TARGET * 11)) * 100).toFixed(2)) + '%',
+                value8: val.ANHOUR,
+                value9: val.TWOHOUR,
+                value10: val.THREEHOUR,
+                value11: val.FOURHOUR,
+                value12: val.FIVEHOUR,
+                value13: val.SIXHOUR,
+                value14: val.SEVENHOUR,
+                value15: val.EIGHTHOUR,
+                value16: val.NINEHOUR,
+                value17: val.TENHOUR,
+                value18: val.ELEVENHOUR,
+                value19: val.TWELVEHOUR,
+              }
+            })
+            // this.scrollTableData1 = table
+            let totalArr = table.slice(this.show * 6, (this.show + 1) * 6)
+            this.total = {
+              value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
+              value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
+              value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
+              value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
+              value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
+              value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
+              value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
+              value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
+              value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
+              value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
+              value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
+              value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
+              value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
+              value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
+              value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
+              value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
+            }
+          }
+        },
+        {
+          e: 'fp-1-06',
+          i: "scada_fp_yl_01('CX_01')",
+          f: (e) => {
+            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: e.map(val => val.X_VALUE),
+                axisLine: {
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                axisLabel: {
+                  // interval: 0,
+                  // rotate: 40,
+                  textStyle: {
+                    fontFamily: "Microsoft YaHei",
+                  },
+                },
+              },
+
+              yAxis: {
+                type: "value",
+                min: 10,
+                max: 14,
+                axisLine: {
+                  show: false,
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisLabel: {},
+              },
+              series: [
+                {
+                  name: 'POL压力',
+                  type: "bar",
+                  barWidth: "30%",
+                  label: {
+                    show: true,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => {
+                    if (val.Y_VALUE_ONE === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_ONE
+                    }
+                  }),
+                },
+                {
+                  name: 'ISO压力',
+                  type: "bar",
+                  barWidth: "30%",
+                  barGap: '40%',
+                  label: {
+                    show: true,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => {
+                    if (val.Y_VALUE_TWO === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_TWO
+                    }
+                  }),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-1-07',
+          i: "scada_fp_temp_01('CX_01')",
+          f: (e) => {
+            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: "30%",
+                // containLabel: true
+              },
+              xAxis: [
+                {
+                  show: true,
+                  type: "category",
+                  axisLine: {
+                    show: false,
+                  },
+                  splitArea: {
+                    // show: true,
+                    color: "#f00",
+                    lineStyle: {
+                      color: "#f00",
+                    },
+                  },
+                  axisLabel: {
+                    color: "#fff",
+                    interval: 0,
+                    rotate: -30,
+                  },
+                  splitLine: {
+                    show: false,
+                  },
+                  boundaryGap: false,
+                  data: e.map(val => val.X_VALUE),
+                },
+              ],
+
+              yAxis: [
+                {
+                  type: "value",
+                  min: 18,
+                  max: 24,
+                  splitNumber: 4,
+                  splitLine: {
+                    show: true,
+                    lineStyle: {
+                      color: ['#c20f0f', "rgba(255,255,255,0.1)", "rgba(255,255,255,0.1)", '#c20f0f'],
+                    },
+                  },
+                  axisLine: {
+                    show: true,
+                  },
+                  axisLabel: {
+                    show: true,
+                    margin: 20,
+                    textStyle: {
+                      color: (e) => {
+                        if (e === '18' || e === '24') {
+                          return '#c20f0f'
+                        } else {
+                          return '#d1e6eb'
+                        }
+                      }
+                    },
+                  },
+                  axisTick: {
+                    show: true,
+                  },
+                },
+              ],
+              series: [
+                {
+                  name: 'POL温度',
+                  type: "line",
+                  showAllSymbol: true,
+                  symbol: "circle",
+                  symbolSize: 5,
+                  lineStyle: {
+                    normal: {
+                      color: "#49d9ff",
+                    },
+                  },
+                  label: {
+                    show: true,
+                    position: "top",
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE_ONE === 0 ? null : val.Y_VALUE_ONE),
+                },
+                {
+                  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",
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE_TWO === 0 ? null : val.Y_VALUE_TWO),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-1-08',
+          i: "scada_inv_stats_02('CX_01')",
+          f: (e) => {
+            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.map(val => val.X_VALUE),
+                axisLine: {
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                axisLabel: {
+                  interval: 0,
+                  // rotate: 40,
+                  textStyle: {
+                    fontFamily: "Microsoft YaHei",
+                  },
+                },
+              },
+
+              yAxis: {
+                interval: 0,
+                type: "value",
+                axisLine: {
+                  show: false,
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisLabel: {},
+              },
+              series: [
+                {
+                  name: '数量',
+                  type: "bar",
+                  barWidth: "33%",
+                  label: {
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-1-09',
+          i: "scada_fp_zt_01('CX_01')",
+          f: (e) => {
+            this.statusArr = e
+          }
+        },
+      ],
+      RequestDataSet1: [
+        {
+          e: 'fp-2-01',
+          i: "scada_fp_cy_01('CX_02')",
+          f: (e) => {
+            this.planNum = e[0].X_VALUE
+            this.practicalNum = e[0].Y_VALUE_ONE
+            this.differenceNum = e[0].Y_VALUE_TWO
+          }
+        },
+        {
+          e: 'fp-2-03',
+          i: "scada_fp_plan_01('CX_02')",
+          f: (e) => {
+            this.scrollTableData = e
+          }
+        },
+        {
+          e: 'fp-2-04',
+          i: "scada_fp_pro_tj_01('CX_02')",
+          f: (e) => {
+            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.map(val => val.X_VALUE),
+                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%",
+                  barMaxWidth: 40,
+                  label: {
+                    show: true,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-2-05',
+          i: "SCADA_INV_STATS_02('')",
+          t: 3,
+          f: (e) => {
+            let table = e.map(val => {
+              return {
+                value1: val.EQUIPMENT_CODE,
+                value2: val.FIXTUREBOXTYPE,
+                value3: val.FIXTURESTATUS,
+                value4: val.TARGET,
+                value5: val.PLAN_SUM,
+                value6: val.PRO_SUM,
+                value7: (val.TARGET === 0 ? 0 : ((val.PRO_SUM / (val.TARGET * 11)) * 100).toFixed(2)) + '%',
+                value8: val.ANHOUR,
+                value9: val.TWOHOUR,
+                value10: val.THREEHOUR,
+                value11: val.FOURHOUR,
+                value12: val.FIVEHOUR,
+                value13: val.SIXHOUR,
+                value14: val.SEVENHOUR,
+                value15: val.EIGHTHOUR,
+                value16: val.NINEHOUR,
+                value17: val.TENHOUR,
+                value18: val.ELEVENHOUR,
+                value19: val.TWELVEHOUR,
+              }
+            })
+            // this.scrollTableData1 = table
+            let totalArr = table.slice(this.show * 6, (this.show + 1) * 6)
+            this.total = {
+              value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
+              value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
+              value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
+              value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
+              value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
+              value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
+              value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
+              value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
+              value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
+              value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
+              value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
+              value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
+              value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
+              value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
+              value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
+              value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
+            }
+          }
+        },
+        {
+          e: 'fp-2-06',
+          i: "scada_fp_yl_01('CX_02')",
+          f: (e) => {
+            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: e.map(val => val.X_VALUE),
+                axisLine: {
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                axisLabel: {
+                  // interval: 0,
+                  // rotate: 40,
+                  textStyle: {
+                    fontFamily: "Microsoft YaHei",
+                  },
+                },
+              },
+
+              yAxis: {
+                type: "value",
+                min: 10,
+                max: 14,
+                axisLine: {
+                  show: false,
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisLabel: {},
+              },
+              series: [
+                {
+                  name: 'POL压力',
+                  type: "bar",
+                  barWidth: "30%",
+                  label: {
+                    show: true,
+                    position: "top",
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => {
+                    if (val.Y_VALUE_ONE === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_ONE
+                    }
+                  }),
+                },
+                {
+                  name: 'ISO压力',
+                  type: "bar",
+                  barWidth: "30%",
+                  barGap: '40%',
+                  label: {
+                    show: true,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => {
+                    if (val.Y_VALUE_TWO === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_TWO
+                    }
+                  }),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-2-07',
+          i: "scada_fp_temp_01('CX_02')",
+          f: (e) => {
+            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: [
+                {
+                  show: true,
+                  type: "category",
+                  axisLine: {
+                    show: false,
+                  },
+                  splitArea: {
+                    // show: true,
+                    color: "#f00",
+                    lineStyle: {
+                      color: "#f00",
+                    },
+                  },
+                  axisLabel: {
+                    color: "#fff",
+                    interval: 0,
+                    rotate: -30,
+                  },
+                  splitLine: {
+                    show: false,
+                  },
+                  boundaryGap: false,
+                  data: e.map(val => val.X_VALUE),
+                },
+              ],
+
+              yAxis: [
+                {
+                  type: "value",
+                  min: 18,
+                  max: 24,
+                  splitNumber: 4,
+                  splitLine: {
+                    show: true,
+                    lineStyle: {
+                      color: ['#c20f0f', "rgba(255,255,255,0.1)", "rgba(255,255,255,0.1)", '#c20f0f'],
+                    },
+                  },
+                  axisLine: {
+                    show: true,
+                  },
+                  axisLabel: {
+                    show: true,
+                    margin: 20,
+                    textStyle: {
+                      color: (e) => {
+                        if (e === '18' || e === '24') {
+                          return '#c20f0f'
+                        } else {
+                          return '#d1e6eb'
+                        }
+                      }
+                    },
+                  },
+                  axisTick: {
+                    show: true,
+                  },
+                },
+              ],
+              series: [
+                {
+                  name: 'POL温度',
+                  type: "line",
+                  showAllSymbol: true,
+                  symbol: "circle",
+                  symbolSize: 5,
+                  lineStyle: {
+                    normal: {
+                      color: "#49d9ff",
+                    },
+                  },
+                  label: {
+                    show: true,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE_ONE === 0 ? null : val.Y_VALUE_ONE),
+                },
+                {
+                  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,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE_TWO === 0 ? null : val.Y_VALUE_TWO),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-2-08',
+          i: "scada_inv_stats_02('CX_02')",
+          f: (e) => {
+            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.map(val => val.X_VALUE),
+                axisLine: {
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                axisLabel: {
+                  interval: 0,
+                  // rotate: 40,
+                  textStyle: {
+                    fontFamily: "Microsoft YaHei",
+                  },
+                },
+              },
+
+              yAxis: {
+                type: "value",
+                interval: 0,
+                axisLine: {
+                  show: false,
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisLabel: {},
+              },
+              series: [
+                {
+                  name: '数量',
+                  type: "bar",
+                  barWidth: "33%",
+                  label: {
+                    show: true,
+                    formatter: (e) => {
+                      if (e.data === 0) {
+                        return ''
+                      } else {
+                      }
+                      return e.data
+                    },
+                    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.map(val => val.Y_VALUE),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'fp-2-09',
+          i: "scada_fp_zt_01('CX_02')",
+          f: (e) => {
+            this.statusArr = e
+          }
+        },
+      ],
+    }
+  },
+  mounted() {
+    this.$refs.chart4.setData({
+      grid: {
+        top: "20%",
+        left: "1%",
+        right: "5%",
+        bottom: "1%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {
+        right: '0',
+        data: ['计划产量', '实际产量'],
+        textStyle: {
+          fontSize: 0.75 * vw,
+          color: "#F1F1F3",
+        },
+      },
+      xAxis: [
+        {
+          type: 'category',
+          axisTick: {show: false},
+          axisLabel: {
+            // rotate: -20,
+            margin: 5,
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          data: ['2025/10/11', '2025/10/12', '2025/10/13', '2025/10/14'],
+        }
+      ],
+      yAxis: [
+        {
+          axisLabel: {
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          type: 'value'
+        }
+      ],
+      series: [
+        {
+          name: '计划产量',
+          type: 'bar',
+          barGap: 0,
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 从上(0)到下(1)
+                  [
+                    {offset: 0, color: '#F9D842',}, // 顶部颜色
+                    {offset: 1, color: '#C44B25'}    // 底部颜色
+                  ]
+              )
+            },
+          },
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          data: [700, 830, 790, 700],
+        },
+        {
+          name: '实际产量',
+          type: 'bar',
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          barGap: '40%',
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 从上(0)到下(1)
+                  [
+                    {offset: 0, color: '#1AE7AD'},   // 顶部颜色
+                    {offset: 1, color: '#00EF59'}    // 底部颜色
+                  ]
+              )
+            },
+          },
+          data: [900, 750, 900, 1000],
+        },
+      ]
+    })
+
+    let num1 = Math.ceil(this.scrollTableData1.length / 6)
+    let num = this.show
+    num += 1
+    num = num % num1
+    this.show = num
+
+    let totalArr = this.scrollTableData1.slice(num * 6, (num + 1) * 6)
+    this.total = {
+      value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
+      value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
+      value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
+      value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
+      value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
+      value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
+      value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
+      value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
+      value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
+      value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
+      value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
+      value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
+      value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
+      value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
+      value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
+      value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
+    }
+    getCurrentTeamTimeList({'a': 'a'}).then(e => {
+      this.hourArr = e?.data.map(val => val.HOUR_TIME)
+    })
+    let timeInter = setInterval(() => {
+      let num1 = Math.ceil(this.scrollTableData1.length / 6)
+      let num = this.show
+      num += 1
+      num = num % num1
+      this.show = num
+
+      let totalArr = this.scrollTableData1.slice(num * 6, (num + 1) * 6)
+      this.total = {
+        value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
+        value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
+        value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
+        value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
+        value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
+        value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
+        value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
+        value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
+        value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
+        value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
+        value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
+        value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
+        value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
+        value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
+        value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
+        value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
+      }
+
+    }, 30 * 1000)
+    if (this.$route.query.id === '1' || this.id === '1') {
+      this.RequestDataSet.forEach(val => {
+        mixData(val)
+      })
+    } else if (this.$route.query.id === '2' || this.id === '2') {
+      this.RequestDataSet1.forEach(val => {
+        mixData(val)
+      })
+    } else {
+      this.RequestDataSet.forEach(val => {
+        mixData(val)
+      })
+    }
+
+    intervalFun = setInterval(() => {
+      if (this.$route.query.id === '1' || this.id === '1') {
+        this.RequestDataSet.forEach(val => {
+          mixData(val)
+        })
+      } else if (this.$route.query.id === '2' || this.id === '2') {
+        this.RequestDataSet1.forEach(val => {
+          mixData(val)
+        })
+      } else {
+        this.RequestDataSet.forEach(val => {
+          mixData(val)
+        })
+      }
+    }, 1000 * 10)
+
+
+  },
+  methods: {},
+  beforeDestroy() {
+    if (intervalFun) {
+      clearInterval(intervalFun)
+      intervalFun = null
+    }
+  }
+};
+</script>
+<style scoped lang="less">
+.title {
+  position: absolute;
+  transform: translateY(-50%);
+  color: #dddddd;
+  font-size: 1vw;
+  letter-spacing: 2px;
+}
+
+.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: 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%;
+}
+
+.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;
+}
+
+.info1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 31%;
+  font-size: 1vw;
+  color: #fff;
+}
+
+.status1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 33%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+.info2 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 35.5%;
+  font-size: 1vw;
+  color: #fff;
+}
+
+.status2 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 37.5%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+.info3 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 40%;
+  font-size: 1vw;
+  color: #fff;
+}
+
+.status3 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 42%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+.info4 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 44.5%;
+  font-size: 1vw;
+  color: #fff;
+}
+
+.status4 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 28%;
+  left: 46.5%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+.info5 {
+  position: absolute;
+  transform: translateY(-50%);
+  top: 28%;
+  left: 55%;
+  font-size: 1vw;
+  color: #fff;
+}
+
+.status5 {
+  position: absolute;
+  transform: translateY(-50%);
+  top: 28%;
+  left: 59.5%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+.info6 {
+  position: absolute;
+  transform: translateY(-50%);
+  top: 28%;
+  left: 62%;
+  font-size: 1vw;
+  color: #fff;
+}
+
+.status6 {
+  position: absolute;
+  transform: translateY(-50%);
+  top: 28%;
+  left: 66.5%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+.left1 {
+  background-image: url("../../../assets/board/left.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 38%;
+  left: 32%;
+  width: 5vw;
+  height: 4.05vw;
+
+  span {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 28%;
+    left: 43%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+
+.left2 {
+  background-image: url("../../../assets/board/right.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 49%;
+  left: 55%;
+  width: 5vw;
+  height: 2.86vw;
+
+  span {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 37%;
+    left: 57%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+
+.right1 {
+  background-image: url("../../../assets/board/right.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 36%;
+  left: 57%;
+  width: 5vw;
+  height: 2.86vw;
+
+  span {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 37%;
+    left: 57%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+
+.right2 {
+  background-image: url("../../../assets/board/right.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 39%;
+  left: 68%;
+  width: 5vw;
+  height: 2.86vw;
+
+  span {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 37%;
+    left: 57%;
+    font-size: 1vw;
+    color: #fff;
+  }
+}
+
+.chartSpan1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 94.3%;
+  left: 73%;
+  font-size: 0.8vw;
+  color: #fff;
+}
+
+.chartSpan1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 94.3%;
+  left: 73%;
+  font-size: 0.8vw;
+  color: #fff;
+}
+
+.chartSpan2 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 94.3%;
+  left: 96%;
+  font-size: 0.8vw;
+  color: #fff;
+}
+</style>
diff --git a/src/views/board/board3/index2.vue b/src/views/board/board3/index2.vue
new file mode 100644
index 0000000..8b08335
--- /dev/null
+++ b/src/views/board/board3/index2.vue
@@ -0,0 +1,1042 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">箱、门匹配生产数据监控平台</div>
+    <div class="topNum planNum">{{
+        (['0', '0', '0', '0']).concat(planNum.toString().split('')).slice(-4).join('')
+      }}
+    </div>
+    <div class="topNum practicalNum">
+      {{
+        (['0', '0', '0', '0']).concat(practicalNum.toString().split('')).slice(-4).join('')
+      }}
+    </div>
+    <div class="topNum differenceValue">
+      {{ (['0', '0', '0', '0']).concat(differenceNum.toString().split('')).slice(-4).join('') }}
+    </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;transform: translateY(-50%);top: 24.4%;left: 31%;color: #fff;font-size: 0.8vw;">设备状态：</div>
+    <div style="position: absolute;transform: translateY(-50%);top: 27.4%;left: 31%;color: #fff;font-size: 0.8vw;">发泡线状态：</div>
+    <div style="position: absolute;transform: translateY(-50%);top: 32.2%;left: 31%;color: #fff;font-size: 0.8vw;">发泡机状态：</div>
+    <div class="status1"
+         :style="'background-color:'+(status1 === '1' ? '#00ff00':'ff0000')"></div>
+    <div class="status2"
+         :style="'background-color:'+(status2 === '1' ? '#00ff00':'ff0000')"></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圈 <span style="margin-left: 10px">{{ '  ' + meter1 }}</span>s</div>
+      <div>台车1位 <span style="margin-left: 10px">{{ '  ' + meter2 }}</span>s</div>
+    </div>
+    <div class="foamingMachine"></div>
+
+    <div class="supplementInfo">注射压力标准范围：7.0-12.0Mpa A、B组份枪头压力差≤2Mpa</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 style="position: absolute;top: 62%; left: 20%;color:#FFF">
+      门体发泡总产量：{{ total }}
+    </div>
+
+    <div class="scrollTable">
+      <div style="background-color: #094170">
+        <div class="scrollTableItem" style="font-weight: bold;width: 10%;padding:4px 0; ">
+          序号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 45%;padding:4px 0; ">
+          型号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 45%;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: 10%;padding:4px 0 ">
+              {{ item.COLUMN_A }}
+            </div>
+            <div class="scrollTableItem" style="width: 45%;padding:4px 0 ">
+              {{ item.COLUMN_B }}
+            </div>
+            <div class="scrollTableItem" style="width: 45%;padding:4px 0 ">
+              {{ item.COLUMN_C }}
+            </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 bottomTableData.slice(0,10)"
+           :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ setColor(i.COLUMN_D,i.COLUMN_E)+';text-align: center;background-color:#053460'">
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_A }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_B }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_C }}</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 bottomTableData.slice(10,20)"
+           :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.COLUMN_D,i.COLUMN_E)+';text-align: center;background-color:#053460'">
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_A }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_B }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_C }}</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 bottomTableData.slice(20,30)"
+           :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.COLUMN_D,i.COLUMN_E)+';text-align: center;background-color:#053460'">
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_A }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_B }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_C }}</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 bottomTableData.slice(30,40)"
+           :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.COLUMN_D,i.COLUMN_E)+';text-align: center;background-color:#053460'">
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_A }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_B }}</div>
+        <div style="width: 33%;display: inline-block">{{ i.COLUMN_C }}</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";
+import {mixData} from "@/api/board/mixData";
+
+let intervalFun = null
+export default {
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  name: "Liner",
+  data() {
+    return {
+      total:'',
+      title: [
+        '箱体队列',
+        '箱体队列统计',
+        '生产统计数据',
+        '发泡注射压力监控',
+        '发泡料温度监控',
+        '门体发泡生产统计',
+      ],
+      status1: 0,
+      status2: 0,
+      meter1: 0,
+      meter2: 0,
+      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: 0,
+      practicalNum: 0,
+      differenceNum:0,
+      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: [],
+      bottomTableData: [],
+      RequestDataSet: [
+        {
+          e: 'xm-01',
+          i: "scada_pp_xt_queue_01('')",
+          f: (e) => {
+            this.scrollTableData = e
+          }
+        },
+        {
+          e: 'xm-02',
+          i: "scada_pp_xt_tj_01('')",
+          f: (e) => {
+            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.map(val => val.X_VALUE),
+                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",
+                  barMaxWidth: 60,
+                  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.map(val => val.Y_VALUE),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'xm-03',
+          i: "scada_pp_fp_zt_01('')",
+          f: (e) => {
+            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: e.map(val => val.X_VALUE),
+                axisLine: {
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                axisLabel: {
+                  // interval: 0,
+                  // rotate: 40,
+                  textStyle: {
+                    fontFamily: "Microsoft YaHei",
+                  },
+                },
+              },
+
+              yAxis: {
+                type: "value",
+                min: 10,
+                max: 14,
+                axisLine: {
+                  show: false,
+                  lineStyle: {
+                    color: "white",
+                  },
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisLabel: {},
+              },
+              series: [
+                {
+                  name: 'POL压力',
+                  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.map(val => {
+                    if (val.Y_VALUE_ONE === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_ONE
+                    }
+                  }),
+                },
+                {
+                  name: 'ISO压力',
+                  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.map(val => {
+                    if (val.Y_VALUE_TWO === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_TWO
+                    }
+                  }),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'xm-04',
+          i: "scada_pp_fp_temp_01('')",
+          f: (e) => {
+            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: [
+                {
+                  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.map(val => val.X_VALUE),
+                },
+              ],
+
+              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: 'POL温度',
+                  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.map(val => {
+                    if (val.Y_VALUE_ONE === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_ONE
+                    }
+                  }),
+                },
+                {
+                  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: e.map(val => {
+                    if (val.Y_VALUE_TWO === 0) {
+                      return null
+                    } else {
+                      return val.Y_VALUE_TWO
+                    }
+                  }),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'xm-05',
+          i: "scada_pp_fp_tj_01('')",
+          f: (e) => {
+            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.map(val => val.X_VALUE),
+                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: "33%",
+                  barMaxWidth: 60,
+                  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.map(val => val.Y_VALUE),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'xm-06',
+          i: "scada_pp_pro_stat_01('')",
+          f: (e) => {
+            this.bottomTableData = e
+            let a = 0
+            let b = 0
+            e.forEach(v=>{
+              a += parseFloat(v.COLUMN_C.split('-')[0])
+              b += parseFloat(v.COLUMN_C.split('-')[1])
+            })
+            this.total = a+' - '+b
+          }
+        },
+        {
+          e: 'xm-07',
+          i: "scada_fp_cy_01('CX_02')",
+          f: (e) => {
+            console.log(e)
+            this.planNum = e[0]?.X_VALUE || 0
+            this.practicalNum = e[0]?.Y_VALUE_ONE || 0
+            this.differenceNum = e[0]?.Y_VALUE_TWO || 0
+          }
+        },
+        {
+          e: 'xm-08',
+          i: "scada_pp_zt_jp_01('')",
+          f: (e) => {
+            this.status1 = e[0]?.X_VALUE
+            this.status2 = e[0]?.X_VALUE
+            this.meter1 = e[0]?.Y_VALUE_ONE
+            this.meter2 = e[0]?.Y_VALUE_TWO
+          }
+        },
+      ]
+    }
+  },
+  mounted() {
+    let timeInter = setInterval(() => {
+      this.show = (this.show + 1) % 4
+    }, 10 * 1000)
+
+    this.RequestDataSet.forEach(val => {
+      mixData(val)
+    })
+    intervalFun = setInterval(() => {
+      this.RequestDataSet.forEach(val => {
+        mixData(val)
+      })
+    }, 1000 * 10)
+  },
+  beforeDestroy() {
+    if(intervalFun){
+      clearInterval(intervalFun)
+      intervalFun = null
+    }
+  },
+  methods: {
+    setColor: (e, i) => {
+      if (e === '1') {
+        if (i === '1') {
+          return '#ffb769'
+        } else if (i === '3') {
+          return '#ff5959'
+        } else {
+          return '#1be409'
+        }
+      } else {
+        return '#bed4ce'
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+.foamingMachine {
+  background-image: url("../../../assets/board/foamingMachine1.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translateX(-50%);
+  top: 23%;
+  left: 50%;
+  width: 46vw;
+  height: 23vw;
+}
+
+.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%;
+}
+
+.status1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 27.4%;
+  left: 37.5%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+.status2 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 32.2%;
+  left: 37.5%;
+  width: 1.5vw;
+  height: 1.5vw;
+  background: #00ff00;
+  border-radius: 50%;
+}
+
+
+.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>
diff --git a/src/views/board/week2/index.vue b/src/views/board/week2/index.vue
new file mode 100644
index 0000000..6fdf5c1
--- /dev/null
+++ b/src/views/board/week2/index.vue
@@ -0,0 +1,1412 @@
+<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="manpowerAttendance" id="manpowerAttendance">
+      <Chart ref="manpowerAttendance"></Chart>
+    </div>
+
+    <!--IQC-->
+    <div class="IQC" id="IQC">
+      <div style="background-color: #09417088">
+        <div class="scrollTableItem" style="font-weight: bold; width: 8%;">
+          序号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold; width:20%;">
+          订单编号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 37%">
+          产品型号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold; width: 12%;">
+          订单数量
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold; width: 12%;">
+          完成数量
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold; width: 11%;">
+          差异数
+        </div>
+      </div>
+      <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: calc(100% - 35px);overflow: hidden;"
+      >
+        <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#05346088":"#032d5788")+";line-height:1.8vw"'>
+            <div
+                class="scrollTableItem" style=" width: 8%;">
+              {{ item.COLUMN_A }}
+            </div>
+            <div
+                class="scrollTableItem" style=" width:20%;">
+              {{ item.COLUMN_B }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 37%">
+              {{ item.COLUMN_C }}
+            </div>
+            <div
+                class="scrollTableItem" style=" width: 12%;">
+              {{ item.COLUMN_D }}
+            </div>
+            <div
+                class="scrollTableItem" style=" width: 12%;">
+              {{ item.COLUMN_E }}
+            </div>
+            <div
+                class="scrollTableItem" style=" width: 11%;">
+              {{ item.COLUMN_F }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+
+    <!--生产效率-->
+    <div class="productionEfficiency" id="productionEfficiency">
+      <Chart ref="productionEfficiency"></Chart>
+    </div>
+
+
+    <!--周质量分析-->
+    <div class="equipmentPowerOne" id="equipmentPowerOne">
+      <Chart ref="equipmentPowerOne"></Chart>
+    </div>
+    <div class="equipmentPowerTwo" id="equipmentPowerTwo">
+      <Chart ref="equipmentPowerTwo"></Chart>
+    </div>
+    <div class="equipmentPowerThree" id="equipmentPowerThree">
+      <Chart ref="equipmentPowerThree"></Chart>
+    </div>
+    <div class="equipmentPowerFour" id="equipmentPowerFour">
+      <Chart ref="equipmentPowerFour"></Chart>
+    </div>
+    <div class="equipmentPowerFive" id="equipmentPowerFive">
+      <Chart ref="equipmentPowerFive"></Chart>
+    </div>
+    <div class="equipmentPowerSix" id="equipmentPowerSix">
+      <Chart ref="equipmentPowerSix"></Chart>
+    </div>
+
+    <!--不良品监控-->
+    <div class="defectiveProducts" id="defectiveProducts">
+      <Chart ref="defectiveProducts"></Chart>
+    </div>
+
+    <div class="topLeft" id="topLeft">
+      <Chart ref="topLeft"></Chart>
+    </div>
+
+    <div v-html="safeDayHtml"></div>
+    <div class="totalNum">合计：{{ totalNum }}台</div>
+    <div class="info1">订单数量:{{ info1.ddsl }} 完成数量:{{ info1.wcsl }} 清单率:{{
+        info1.wcsl === 0 ? 0 : ((info1.wcsl / info1.ddsl) * 100).toFixed(2)
+      }}%
+    </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";
+import {mixData} from "@/api/board/mixData";
+
+let intervalFun = null
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  components: {
+    vueSeamlessScroll,
+    Chart
+  },
+  name: "Liner",
+  data() {
+    return {
+      nowLine: 2,
+      nowWeek: "",
+      info1: {
+        "ddsl": 1000,
+        "wcsl": 1000
+      },
+      title: [
+        '产量统计',
+        '三日订单执行情况',
+        'OEE',
+        '周生产型号统计',
+        '机台完成情况',
+        '不良品监控',
+      ],
+      totalNum: 0,
+      titlePosition: [
+        {
+          top: 11.5,
+          left: 5.5
+        },
+        {
+          top: 11.5,
+          left: 32
+        },
+        {
+          top: 11.5,
+          left: 73.5
+        },
+        {
+          top: 55.4,
+          left: 5.5
+        },
+        {
+          top: 55.4,
+          left: 32
+        },
+        {
+          top: 55.4,
+          left: 73.6
+        },
+      ],
+      scrollTableOption: {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 10, // 开始无缝滚动的数据量 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: [],
+      safeDayHtml: null,
+      RequestDataSet: [
+        {
+          e: 'zh-1-01',
+          i: "scada_aq_pro_tj_02('CX_01')",
+          f: (e) => {
+            this.totalNum = e.reduce((v1, v2) => v1 + v2.Y_VALUE_TWO, 0)
+            this.$refs.topLeft.setData({
+              grid: {
+                top: "20%",
+                left: "1%",
+                right: "5%",
+                bottom: "1%",
+                containLabel: true,
+              },
+              tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                  type: 'shadow'
+                }
+              },
+              legend: {
+                right: '0',
+                data: ['计划产量', '实际产量'],
+                textStyle: {
+                  fontSize: 0.75 * vw,
+                  color: "#F1F1F3",
+                },
+              },
+              xAxis: [
+                {
+                  type: 'category',
+                  axisTick: {show: false},
+                  axisLabel: {
+                    rotate: -20,
+                    margin: 20,
+                    textStyle: {
+                      fontSize: 0.75 * vw,
+                      color: "#F1F1F3",
+                    },
+                  },
+                  data: e.map(e => e.X_VALUE),
+                }
+              ],
+              yAxis: [
+                {
+                  axisLabel: {
+                    textStyle: {
+                      fontSize: 0.75 * vw,
+                      color: "#F1F1F3",
+                    },
+                  },
+                  splitLine: {
+                    lineStyle: {
+                      color: "rgba(255,255,255,0.1)",
+                    },
+                  },
+                  type: 'value'
+                }
+              ],
+              series: [
+                {
+                  name: '计划产量',
+                  type: 'bar',
+                  barGap: 0,
+                  emphasis: {
+                    focus: 'series'
+                  },
+                  barWidth: '30%',
+                  barMaxWidth: '50px',
+                  itemStyle: {
+                    //图形样式
+                    normal: {
+                      color: true ? '#db8151' : "#64BCEC",
+                    },
+                  },
+                  label: {
+                    show: true,
+                    position: "top",
+                    formatter: `{c}${''}`,
+                    textStyle: {
+                      color: "rgba(255,255,255,0.5)",
+                      fontSize: 0.75 * vw
+                    },
+                  },
+                  data: e.map(e => e.Y_VALUE_ONE),
+                },
+                {
+                  name: '实际产量',
+                  type: 'bar',
+                  emphasis: {
+                    focus: 'series'
+                  },
+                  barWidth: '30%',
+                  barMaxWidth: '50px',
+                  barGap: '40%',
+                  label: {
+                    show: true,
+                    position: "top",
+                    formatter: `{c}${''}`,
+                    textStyle: {
+                      color: "rgba(255,255,255,0.5)",
+                      fontSize: 0.75 * vw
+                    },
+                  },
+                  itemStyle: {
+                    //图形样式
+                    normal: {
+                      color: true ? '#9ce375' : "#4FD3B9",
+                    },
+                  },
+                  data: e.map(e => e.Y_VALUE_TWO),
+                },
+              ]
+            })
+          }
+        },
+        {
+          e: 'zh-1-03',
+          i: "scada_aq_pro_three_02('CX_01')",
+          f: (e) => {
+            this.info1 = {
+              ddsl: e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_D) || 0, 0),
+              wcsl: e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_E) || 0, 0)
+            }
+            this.scrollTableData = e
+          }
+        },
+        {
+          e: 'zh-1-05',
+          i: "",
+          f: (e) => {
+            this.$refs.manpowerAttendance.setData({
+              color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
+              grid: {
+                top: "20%",
+                bottom: "15%",
+                right: "5%"
+              },
+              dataZoom: [],
+              xAxis: {
+                margin: 10,
+                nameTextStyle: {
+                  color: '#c0c3cd',
+                  padding: [0, 0, -10, 0],
+                  fontSize: 14,
+                },
+                axisLabel: {
+                  color: '#c0c3cd', //X轴文字
+                  fontSize: 14,
+                  interval: 0,
+                  margin: 20,
+                  rotate: -20,
+                },
+                axisTick: {
+                  lineStyle: {
+                    color: '#0B1535',
+                    width: 1,
+                  },
+                  show: false,
+                },
+                splitLine: {
+                  show: false,
+                },
+                axisLine: {
+                  lineStyle: {
+                    color: '#384267',
+                    width: 1,
+                    type: 'dashed',
+                  },
+                  show: true,
+                },
+                data: e.x,
+                type: 'category',
+              },
+              yAxis: {
+                type: 'value',
+                nameTextStyle: {
+                  color: '#c0c3cd',
+                  padding: [0, 0, -10, 0],
+                  fontSize: 14,
+                },
+                axisLabel: {
+                  color: '#c0c3cd', //Y轴文字
+                  fontSize: 14,
+                },
+                axisTick: {
+                  lineStyle: {
+                    color: '#384267',
+                    width: 1,
+                  },
+                  show: true,
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#384267',
+                    type: 'line',
+                  },
+                },
+                axisLine: {
+                  lineStyle: {
+                    color: '#fff',
+                    width: 1,
+                    type: 'line',
+                  },
+                  show: false,
+                },
+              },
+              series: [
+                {
+                  data: e.y,
+                  type: 'pictorialBar',
+                  barMaxWidth: 'auto',
+                  barWidth: 1.5 * vw,
+                  symbol: 'rect',
+                  itemStyle: {
+                    color: function (val) {
+                      if (e.y.length - val.dataIndex === 1) {
+                        return 'red'
+                      } else if (e.y.length - val.dataIndex === 2) {
+                        return 'yellow'
+
+                      } else {
+                        return '#35AAFE'
+                      }
+                    }
+                  },
+                  label: {
+                    normal: {
+                      show: true,
+                      position: "top",
+                      textStyle: {
+                        color: "#a8aab0",
+                        fontStyle: "normal",
+                        fontFamily: "微软雅黑",
+                        fontSize: 0.75 * vw,
+                      },
+                    },
+                  }
+                },
+                {
+                  data: e.y,
+                  type: 'pictorialBar',
+                  barWidth: 1.5 * vw,
+                  symbolPosition: 'end',
+                  symbol: 'diamond',
+                  itemStyle: {
+                    color: function (val) {
+                      if (e.y.length - val.dataIndex === 1) {
+                        return 'red'
+                      } else if (e.y.length - val.dataIndex === 2) {
+                        return 'yellow'
+                      } else {
+                        return '#66c8ff'
+                      }
+                    }
+                  },
+                  symbolOffset: ['0%', '-50%'],
+                  symbolSize: [1.5 * vw, 10],
+                  zlevel: 4,
+                },
+                {
+                  data: e.y.map(val => 1),
+                  type: 'pictorialBar',
+                  barWidth: 1.5 * vw,
+                  symbolPosition: 'end',
+                  symbol: 'diamond',
+                  itemStyle: {
+                    color: function (val) {
+                      if (e.y.length - val.dataIndex === 1) {
+                        return 'red'
+                      } else if (e.y.length - val.dataIndex === 2) {
+                        return 'yellow'
+
+                      } else {
+                        return '#66c8ff'
+                      }
+                    }
+                  },
+                  symbolOffset: ['0%', '-20%'],
+                  symbolSize: [1.5 * vw, 10],
+                  zlevel: 4,
+                },
+                // {
+                //   type: 'pictorialBar',
+                //   name: 'pictorial element',
+                //   symbol: function (val, index) {
+                //     // return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
+                //   },
+                //   symbolSize: [40, 40],
+                //   z: 10,
+                //   data: e.y.map(val => {
+                //     return {
+                //       value: val,
+                //       symbolPosition: 'end',
+                //       symbolOffset: [0, '-190%']
+                //     }
+                //   })
+                // },
+              ]
+            })
+          }
+        },
+        {
+          e: 'zh-1-06',
+          i: "scada_aq_pro_xh_02('CX_01')",
+          f: (e) => {
+            this.$refs.productionEfficiency.setData({
+              grid: {
+                top: "10%",
+                left: '10%',
+                right: "5%",
+                bottom: '15%',
+                // containLabel: true
+              },
+              dataZoom: [],
+              xAxis: {
+                data: e.map(e => e.X_VALUE),
+                axisLine: {
+                  lineStyle: {
+                    color: "#0177d4",
+                  },
+                },
+                axisLabel: {
+                  color: "#fff",
+                  fontSize: 0.5 * vw,
+                  interval: 0,
+                  rotate: -20,
+                },
+              },
+              yAxis: {
+                nameTextStyle: {
+                  color: "#fff",
+                  fontSize: 16,
+                },
+                axisLine: {
+                  lineStyle: {
+                    color: "#0177d4",
+                  },
+                },
+                axisLabel: {
+                  color: "#fff",
+                  fontSize: 16,
+                },
+                splitLine: {
+                  show: false,
+                  lineStyle: {
+                    color: "#0177d4",
+                  },
+                },
+              },
+              series: [
+                {
+                  type: "bar",
+                  barWidth: 1 * vw,
+                  itemStyle: {
+                    normal: {
+                      color: new echarts.graphic.LinearGradient(
+                          0,
+                          0,
+                          0,
+                          1,
+                          [
+                            {
+                              offset: 0,
+                              color: "#00b0ff",
+                            },
+                            {
+                              offset: 0.8,
+                              color: "#7052f4",
+                            },
+                          ],
+                          false
+                      ),
+                    },
+                  },
+                  label: {
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                      color: "#fff",
+                      fontSize: 0.75 * vw
+                    },
+                  },
+                  data: e.map(e => e.Y_VALUE),
+                },
+              ],
+            })
+          }
+        },
+        {
+          e: 'zh-1-07',
+          i: "scada_aq_zj_gx_01('CX_01')",
+          f: (e) => {
+            let data = e[0] || {}
+            this.$refs.equipmentPowerOne.setData({
+              series: [
+                {
+                  type: "pie",
+                  clockWise: false,
+                  radius: ['60%', '75%'],
+                  itemStyle: {
+                    normal: {
+                      label: {
+                        show: false,
+                      },
+                      labelLine: {
+                        show: false,
+                      },
+                      shadowBlur: 0,
+                      shadowColor: "#389af4",
+                    },
+                  },
+                  hoverAnimation: false,
+                  center: ["50%", "50%"],
+                  data: [
+                    {
+                      value: parseFloat(data.COLUMN_A),
+                      label: {
+                        normal: {
+                          rich: {
+                            a: {
+                              color: "#389af4",
+                              align: "center",
+                              fontSize: 1.1 * vw,
+                              fontWeight: "bold",
+                            },
+                            b: {
+                              color: "#fff",
+                              align: "center",
+                              fontSize: 0.9 * vw,
+                            },
+                          },
+                          formatter: function (params) {
+                            return (
+                                "{a|" +
+                                parseFloat(data.COLUMN_A) +
+                                "%}" +
+                                "\n{b|内胆检漏}"
+                            );
+                          },
+                          position: "center",
+                          show: true,
+                          textStyle: {
+                            fontSize: "14",
+                            fontWeight: "normal",
+                            color: "#fff",
+                          },
+                        },
+                      },
+                      itemStyle: {
+                        normal: {
+                          color: "#389af4",
+                          shadowColor: "#389af4",
+                          shadowBlur: 0,
+                        },
+                      },
+                    },
+                    {
+                      value: 100 - parseFloat(data.COLUMN_A),
+                      name: "invisible",
+                      itemStyle: {
+                        normal: {
+                          color: "#412a4e",
+                        },
+                        emphasis: {
+                          color: "#412a4e",
+                        },
+                      },
+                    },
+                  ],
+                },
+              ],
+            })
+          }
+        },
+      ],
+    }
+  },
+  mounted() {
+
+    // this.RequestDataSet.forEach(val => {
+    //   mixData(val)
+    // })
+    //
+    // intervalFun = setInterval(() => {
+    //   this.RequestDataSet.forEach(val => {
+    //     mixData(val)
+    //   })
+    // }, 1000 * 10)
+
+    this.$refs.topLeft.setData({
+      grid: {
+        top: "20%",
+        left: "1%",
+        right: "5%",
+        bottom: "1%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {
+        right: '0',
+        data: ['计划产量', '实际产量'],
+        textStyle: {
+          fontSize: 0.75 * vw,
+          color: "#F1F1F3",
+        },
+      },
+      xAxis: [
+        {
+          type: 'category',
+          axisTick: {show: false},
+          axisLabel: {
+            // rotate: -20,
+            margin: 5,
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          data: ['2025/10/11', '2025/10/12', '2025/10/13', '2025/10/14'],
+        }
+      ],
+      yAxis: [
+        {
+          axisLabel: {
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          type: 'value'
+        }
+      ],
+      series: [
+        {
+          name: '计划产量',
+          type: 'bar',
+          barGap: 0,
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 从上(0)到下(1)
+                  [
+                    {offset: 0, color: '#F9D842',}, // 顶部颜色
+                    {offset: 1, color: '#C44B25'}    // 底部颜色
+                  ]
+              )
+            },
+          },
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          data: [700, 830, 790, 700],
+        },
+        {
+          name: '实际产量',
+          type: 'bar',
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          barGap: '40%',
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 从上(0)到下(1)
+                  [
+                    {offset: 0, color: '#1AE7AD'},   // 顶部颜色
+                    {offset: 1, color: '#00EF59'}    // 底部颜色
+                  ]
+              )
+            },
+          },
+          data: [900, 750, 900, 1000],
+        },
+      ]
+    })
+
+    this.scrollTableData = [
+      {COLUMN_A: '01', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
+      {COLUMN_A: '02', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
+      {COLUMN_A: '03', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
+      {COLUMN_A: '04', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
+      {COLUMN_A: '05', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
+      {COLUMN_A: '06', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
+    ]
+
+    this.$refs.manpowerAttendance.setData({
+      color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
+      grid: {
+        top: "10%",
+        bottom: "15%",
+        right: "5%"
+      },
+      dataZoom: [],
+      xAxis: {
+        margin: 10,
+        nameTextStyle: {
+          color: '#c0c3cd',
+          padding: [0, 0, -10, 0],
+          fontSize: 14,
+        },
+        axisLabel: {
+          color: '#c0c3cd', //X轴文字
+          fontSize: 14,
+          interval: 0,
+          margin: 5,
+          // rotate: -20,
+        },
+        axisTick: {
+          lineStyle: {
+            color: '#0B1535',
+            width: 1,
+          },
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#384267',
+            width: 1,
+            type: 'dashed',
+          },
+          show: true,
+        },
+        data: [1, 2, 3, 4, 5, 6],
+        type: 'category',
+      },
+      yAxis: {
+        type: 'value',
+        nameTextStyle: {
+          color: '#c0c3cd',
+          padding: [0, 0, -10, 0],
+          fontSize: 14,
+        },
+        axisLabel: {
+          color: '#c0c3cd', //Y轴文字
+          fontSize: 14,
+        },
+        axisTick: {
+          lineStyle: {
+            color: '#384267',
+            width: 1,
+          },
+          show: true,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#384267',
+            type: 'line',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#fff',
+            width: 1,
+            type: 'line',
+          },
+          show: false,
+        },
+      },
+      series: [
+        {
+          data: [95, 95, 95, 95, 95, 95],
+          type: 'pictorialBar',
+          barMaxWidth: '20px',
+          barWidth: 1.5 * vw,
+          symbol: 'rect',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(
+                0, 0, 0, 1, // 从上(0)到下(1)
+                [
+                  {offset: 0, color: '#31D4F9',}, // 顶部颜色
+                  {offset: 1, color: '#2A41CF'}    // 底部颜色
+                ]
+            )
+          },
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          }
+        },
+      ]
+    })
+
+    this.$refs.productionEfficiency.setData({
+      grid: {
+        top: "10%",
+        left: '15%',
+        right: "5%",
+        bottom: '15%',
+        // containLabel: true
+      },
+      dataZoom: [],
+      xAxis: {
+        data: ['BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H'],
+        axisLine: {
+          lineStyle: {
+            color: "#0177d4",
+          },
+        },
+        axisLabel: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          interval: 0,
+          rotate: -20,
+        },
+      },
+      yAxis: {
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 16,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#0177d4",
+          },
+        },
+        axisLabel: {
+          color: "#fff",
+          fontSize: 11,
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "#0177d4",
+          },
+        },
+      },
+      series: [
+        {
+          type: "bar",
+          barWidth: 1 * vw,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#00b0ff",
+                    },
+                    {
+                      offset: 0.8,
+                      color: "#7052f4",
+                    },
+                  ],
+                  false
+              ),
+            },
+          },
+          label: {
+            show: true,
+            position: "top",
+            textStyle: {
+              color: "#fff",
+              fontSize: 0.75 * vw
+            },
+          },
+          data: [471, 577, 950, 86, 153, 364],
+        },
+      ],
+    })
+
+    this.$refs.equipmentPowerOne.setData({
+      grid: {
+        top: "20%",
+        left: "1%",
+        right: "5%",
+        bottom: "1%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {
+        right: '0',
+        data: ['计划产量', '实际产量'],
+        textStyle: {
+          fontSize: 0.75 * vw,
+          color: "#F1F1F3",
+        },
+      },
+      xAxis: [
+        {
+          type: 'category',
+          axisTick: {show: false},
+          axisLabel: {
+            // rotate: -20,
+            margin: 5,
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          data: [1, 2, 3, 4, 5, 6],
+        }
+      ],
+      yAxis: [
+        {
+          axisLabel: {
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          type: 'value'
+        }
+      ],
+      series: [
+        {
+          name: '计划产量',
+          type: 'bar',
+          barGap: 0,
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 从上(0)到下(1)
+                  [
+                    {offset: 0, color: '#F9D842',}, // 顶部颜色
+                    {offset: 1, color: '#C44B25'}    // 底部颜色
+                  ]
+              )
+            },
+          },
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          data: [75, 50, 82, 55, 55, 40],
+        },
+        {
+          name: '实际产量',
+          type: 'bar',
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          barGap: '40%',
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 从上(0)到下(1)
+                  [
+                    {offset: 0, color: '#1AE7AD'},   // 顶部颜色
+                    {offset: 1, color: '#00EF59'}    // 底部颜色
+                  ]
+              )
+            },
+          },
+          data: [65, 39, 75, 42, 65, 65],
+        },
+      ]
+    })
+
+    this.$refs.defectiveProducts.setData({
+      grid: {
+        top: "20%",
+        left: "1%",
+        right: "5%",
+        bottom: "1%",
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {
+        right: '0',
+        textStyle: {
+          fontSize: 0.75 * vw,
+          color: "#F1F1F3",
+        },
+      },
+      xAxis: [
+        {
+          type: 'category',
+          axisTick: {show: false},
+          axisLabel: {
+            // rotate: -20,
+            margin: 5,
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          data: ['08:00','09:00','10:00','11:00','12:00','13:00','1400','15:00','16:00',],
+        }
+      ],
+      yAxis: [
+        {
+          axisLabel: {
+            textStyle: {
+              fontSize: 0.75 * vw,
+              color: "#F1F1F3",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          type: 'value'
+        }
+      ],
+      series: [
+        {
+          name: '不良数',
+          type: 'line',
+          barGap: 0,
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: '#62C2FA'
+            },
+          },
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          data: [0,0,0,0,0,0,0,0,0],
+        },
+        {
+          name: '目标',
+          type: 'line',
+          emphasis: {
+            focus: 'series'
+          },
+          barWidth: '30%',
+          barMaxWidth: '20px',
+          barGap: '40%',
+          label: {
+            show: true,
+            position: "top",
+            formatter: `{c}${''}`,
+            textStyle: {
+              color: "rgba(255,255,255,0.5)",
+              fontSize: 0.75 * vw
+            },
+          },
+          itemStyle: {
+            //图形样式
+            normal: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 从上(0)到下(1)
+                  [
+                    {offset: 0, color: '#1AE7AD'},   // 顶部颜色
+                    {offset: 1, color: '#00EF59'}    // 底部颜色
+                  ]
+              )
+            },
+          },
+          data: [1,1,1,1,1,1,1,1,1],
+        },
+      ]
+    })
+  },
+  methods: {},
+  beforeDestroy() {
+    if (intervalFun) {
+      clearInterval(intervalFun)
+      intervalFun = null
+    }
+  }
+}
+</script>
+<style scoped>
+.app-container {
+  background-image: url("../../../assets/board/week.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;
+}
+
+.manpowerAttendance {
+  position: absolute;
+  width: 25%;
+  height: 35%;
+  top: 15%;
+  left: 71.5%;
+}
+
+.IQC {
+  position: absolute;
+  width: 40%;
+  height: 35%;
+  top: 15%;
+  left: 30%;
+}
+
+.productionEfficiency {
+  position: absolute;
+  width: 25%;
+  height: 35%;
+  top: 60%;
+  left: 3%;
+}
+
+.topLeft {
+  position: absolute;
+  width: 25%;
+  height: 34%;
+  top: 15.5%;
+  left: 3.5%;
+}
+
+.equipmentPowerOne {
+  position: absolute;
+  width: 39%;
+  height: 34%;
+  top: 60%;
+  left: 30.5%;
+}
+
+.equipmentPowerTwo {
+  position: absolute;
+  width: 13%;
+  height: 16%;
+  top: 60%;
+  left: 43.5%;
+}
+
+.equipmentPowerThree {
+  position: absolute;
+  width: 13%;
+  height: 16%;
+  top: 60%;
+  left: 56.5%;
+}
+
+.equipmentPowerFour {
+  position: absolute;
+  width: 13%;
+  height: 16%;
+  top: 76%;
+  left: 30.5%;
+}
+
+.equipmentPowerFive {
+  position: absolute;
+  width: 13%;
+  height: 16%;
+  top: 76%;
+  left: 43.5%;
+}
+
+.equipmentPowerSix {
+  position: absolute;
+  width: 13%;
+  height: 16%;
+  top: 76%;
+  left: 56.5%;
+}
+
+.defectiveProducts {
+  position: absolute;
+  width: 25%;
+  height: 35%;
+  top: 59%;
+  left: 71.5%;
+}
+
+.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: calc(100% / 6);
+}
+
+.totalNum {
+  position: absolute;
+  top: 11.3%;
+  left: 18%;
+  transform: translateY(-50%);
+  color: #fff;
+  font-size: 0.9vw;
+}
+
+.info1 {
+  position: absolute;
+  top: 11.3%;
+  left: 44.5%;
+  transform: translateY(-50%);
+  color: #fff;
+  font-size: 1vw;
+}
+
+.classSelect {
+  position: absolute;
+  top: 6.5%;
+  left: 4%;
+}
+
+.el-radio {
+  color: #fff !important;
+}
+
+.el-button {
+  background: #00000000 !important;
+  color: #fff !important;
+}
+
+.clickLine {
+  color: #1890ff !important;
+}
+</style>