添加看板

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register','/liner','/caseShell2','/foaming','/foaming2','/pourInto','/finalAssembly','/scanDown','/week','/model']
+const whiteList = ['/login', '/board1', '/board2', '/register', '/liner', '/caseShell2', '/foaming', '/foaming2', '/pourInto', '/finalAssembly', '/scanDown', '/week', '/model']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -99,7 +99,17 @@ export const constantRoutes = [
       title: "看板管理",
       icon: "chart",
     },
-    children: [
+    children: [{
+      path: 'board1',
+      component: () => import('@/views/board/board1/index'),
+      name: 'Board1',
+      meta: {title: '车间监控', icon: '404',}
+    }, {
+      path: 'board2',
+      component: () => import('@/views/board/board2/index'),
+      name: 'Board2',
+      meta: {title: '效率监控', icon: '404',}
+    },
       {
         path: 'liner',
         component: () => import('@/views/board/liner/index'),

src/views/board/board1/index.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">注塑车间设备运行监控平台</div>
+    <div class="topNum deviceNum">
+      <span class="text">设备数量</span>
+      <span>：</span>
+      <span class="num">16</span>
+      <span class="unit">台</span>
+    </div>
+    <div class="topNum bootRate">
+      <span class="text">开机率</span>
+      <span>：</span>
+      <span class="num">80</span>
+      <span class="unit">%</span>
+    </div>
+    <div class="topNum runNum">
+      <span class="text">运行</span>
+      <span>：</span>
+      <span class="num">11</span>
+      <span class="unit">台</span>
+    </div>
+    <div class="topNum shutdownNum">
+      <span class="text">停机</span>
+      <span>：</span>
+      <span class="num">02</span>
+      <span class="unit">台</span>
+    </div>
+    <div class="topNum standbyNum">
+      <span class="text">待机</span>
+      <span>：</span>
+      <span class="num">01</span>
+      <span class="unit">台</span>
+    </div>
+    <div class="topNum waitMaterials">
+      <span class="text">待料</span>
+      <span>：</span>
+      <span class="num">01</span>
+      <span class="unit">台</span>
+    </div>
+    <div class="topNum unactivatedNum">
+      <span class="text">未开机</span>
+      <span>：</span>
+      <span class="num">01</span>
+      <span class="unit">台</span>
+    </div>
+    <div class="centerContent">
+      <div class="item" v-for="i in list">
+        <div class="itemTitle">AE-MD-S10</div>
+        <div class="itemImg"></div>
+        <div class="itemType itemType0" v-if="i.type===0">停机</div>
+        <div class="itemType itemType1" v-if="i.type===1">待机</div>
+        <div class="itemType itemType2" v-if="i.type===2">正常运行</div>
+        <div class="itemType itemType3" v-if="i.type===3">待料</div>
+        <div class="itemTime itemTime0" v-if="i.type===0">
+          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
+          <span>min</span>
+        </div>
+        <div class="itemTime itemTime1" v-if="i.type===1">
+          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
+          <span>min</span>
+        </div>
+        <div class="itemTime itemTime2" v-if="i.type===2">
+          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
+          <span>min</span>
+        </div>
+        <div class="itemTime itemTime3" v-if="i.type===3">
+          <span style="font-size: 1.5vw;margin-right: 0.2vw;;font-weight: 700">6</span>
+          <span>min</span>
+        </div>
+        <div class="itemText">待机时长</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  components: {},
+  name: "Liner",
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {},
+  computed: {
+    list() {
+      return Array(222).fill(0).map(i => {
+        return {
+          type: Math.floor(Math.random() * 4)
+        }
+      })
+    }
+  },
+  beforeDestroy() {
+  }
+};
+</script>
+<style scoped>
+.app-container {
+  background-image: url("../../../assets/board/boardBg1.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: 0.3vw;
+}
+
+.topNum {
+  position: absolute;
+  top: 11.7%;
+  transform: translateY(-50%);
+  font-size: 1.3vw;
+  vertical-align: middle;
+
+  .text {
+    color: #51A1D0;
+    display: inline-block;
+    width: 6vw;
+    white-space: nowrap;
+  }
+
+  .num {
+    letter-spacing: 0.2vw;
+  }
+}
+
+.deviceNum {
+  left: 4.5%;
+  color: #DCDFDF;
+
+  .text {
+    letter-spacing: 0.3vw;
+  }
+}
+
+.bootRate {
+  left: 18%;
+  color: #DCDFDF;
+
+  .text {
+    letter-spacing: 1vw;
+  }
+}
+
+.runNum {
+  left: 31.5%;
+  color: #DCDFDF;
+
+  .text {
+    width: 5vw;
+    letter-spacing: 2vw;
+  }
+
+  .num {
+    color: #01F437;
+  }
+}
+
+.shutdownNum {
+  left: 45%;
+  color: #DCDFDF;
+
+  .text {
+    width: 5vw;
+    letter-spacing: 2vw;
+  }
+
+  .num {
+    color: #D8070D;
+  }
+}
+
+.standbyNum {
+  left: 58.5%;
+  color: #DCDFDF;
+
+  .text {
+    width: 5vw;
+    letter-spacing: 2vw;
+  }
+
+  .num {
+    color: #E1B00D;
+  }
+}
+
+.waitMaterials {
+  left: 72%;
+  color: #DCDFDF;
+
+  .text {
+    width: 5vw;
+    letter-spacing: 2vw;
+  }
+
+  .num {
+    color: #E1B00D;
+  }
+}
+
+.unactivatedNum {
+  left: 85.5%;
+  color: #DCDFDF;
+
+  .text {
+    letter-spacing: 1vw;
+  }
+}
+
+.centerContent {
+  position: absolute;
+  top: 17%;
+  left: 3.3%;
+  width: 93.4%;
+  height: 78%;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .item {
+    display: inline-block;
+    width: calc(25% - 1vw);
+    height: 13.91vw;
+    margin: 0.5vw;
+    position: relative;
+    background-image: url("../../../assets/board/boardItemBg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    .itemTitle {
+      position: absolute;
+      color: #DCDFDF;
+      left: 10%;
+      top: 11%;
+      transform: translateY(-50%);
+      font-size: 1.3vw;
+    }
+
+    .itemType {
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      left: 78%;
+      top: 40%;
+      width: 8vw;
+      height: 2.22vw;
+      line-height: 2.22vw;
+      text-align: center;
+      transform: translate(-50%, -50%);
+      font-size: 1.2vw;
+      color: #DCDFDF;
+    }
+
+    .itemType0 {
+      background-image: url("../../../assets/board/boardDeviceStatus0.png");
+      letter-spacing: 0.5vw;
+    }
+
+    .itemType1 {
+      background-image: url("../../../assets/board/boardDeviceStatus1.png");
+      letter-spacing: 0.5vw;
+    }
+
+    .itemType2 {
+      background-image: url("../../../assets/board/boardDeviceStatus2.png");
+    }
+
+    .itemType3 {
+      background-image: url("../../../assets/board/boardDeviceStatus3.png");
+      letter-spacing: 0.5vw;
+    }
+
+    .itemImg {
+      position: absolute;
+      left: 4%;
+      top: 28%;
+      width: 51%;
+      height: 65%;
+      background-image: url("../../../assets/board/boardDevice.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .itemTime {
+      position: absolute;
+      left: 78%;
+      top: 65%;
+      transform: translate(-50%, -50%);
+      font-size: 1.2vw;
+      color: #DCDFDF;
+    }
+
+    .itemTime0 {
+      color: #FB0102;
+    }
+
+    .itemTime1 {
+      color: #FC7F03;
+    }
+
+    .itemTime2 {
+      color: #02FD56;
+    }
+
+    .itemTime3 {
+      color: #68CBFD;
+    }
+
+    .itemText {
+      position: absolute;
+      left: 78%;
+      top: 80%;
+      transform: translate(-50%, -50%);
+      font-size: 0.8vw;
+      color: #DCDFDF;
+    }
+  }
+}
+
+</style>

src/views/board/board2/index.vue

@@ -0,0 +1,872 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">注塑车间设备效率监控平台</div>
+    <div class="chart1">
+      <Chart ref="chart1"></Chart>
+      <div class="text">当前在线数量：9</div>
+    </div>
+    <div class="chart2">
+      <Chart ref="chart2"></Chart>
+      <div class="text">当前在线数量：9</div>
+    </div>
+    <div class="chart3">
+      <Chart ref="chart3"></Chart>
+      <div class="text">当前在线数量：9</div>
+    </div>
+    <div class="chart4">
+      <Chart ref="chart4"></Chart>
+      <div class="text">当前在线数量：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: 70.5%;left: 68.5%;">故障设备排名</div>
+
+    <div class="scrollTable">
+      <div style="background-color: #094170">
+        <div class="scrollTableItem" style="font-weight: bold;width: 14%">
+          设备标识
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 14%">
+          设备名称
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 14%">
+          设备类型
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+          稼动率
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+          作业率
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+          待机率
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+          故障率
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+          关机率
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 8%">
+          离线率
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;">
+          操作
+        </div>
+      </div>
+      <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: 84%;overflow: hidden;"
+      >
+        <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
+            <div
+                class="scrollTableItem" style="width: 14%">
+              {{ item.value1 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 14%">
+              {{ item.value2 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 14%">
+              {{ item.value3 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 8%">
+              {{ item.value4 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 8%">
+              {{ item.value5 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 8%">
+              {{ item.value6 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 8%">
+              {{ item.value7 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 8%">
+              {{ item.value8 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 8%">
+              {{ item.value9 }}
+            </div>
+            <div
+                class="scrollTableItem">
+              操作
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+    <div class="chart5">
+      <Chart ref="chart5"></Chart>
+    </div>
+    <div class="chart6">
+      <Chart ref="chart6"></Chart>
+    </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="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="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="faultText2" style="top: 86%;left: 91.4%;">故障率：46% 故障次数：10</div>
+      <div class="faultText2" style="top: 88%;left: 91.4%;">故障总时长：9min</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import vueSeamlessScroll from "vue-seamless-scroll";
+import Chart from "@/components/board/Chart.vue";
+import * as echarts from "echarts";
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  components: {
+    vueSeamlessScroll, Chart
+  },
+  name: "Liner",
+  data() {
+    return {
+      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,
+      },
+    }
+  },
+  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",
+                },
+              ]),
+            },
+          },
+        },
+      ],
+    })
+    this.$refs.chart3.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.chart4.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.chart5.setData({
+      grid: {
+        top: "15%",
+        left: "10%",
+        right: "5%",
+        bottom: "15%",
+      },
+      legend: {
+        top: 0,
+        x: 'center',
+        textStyle: {
+          color: "#ffffff"
+        }
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: true,
+          axisLine: {
+            show: true,
+          },
+          splitArea: {
+            color: "#f00",
+            lineStyle: {
+              color: "#f00",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 0.8 * vw,
+            interval: 0,
+          },
+          splitLine: {
+            show: false,
+          },
+          data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"],
+        },
+      ],
+
+      yAxis: [
+        {
+          boundaryGap: true,
+          type: "value",
+          min: 0,
+          splitNumber: 4,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          axisLine: {
+            show: true,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#d1e6eb",
+            },
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "计划生产数量",
+          type: "line",
+          showAllSymbol: true,
+          symbol: "circle",
+          symbolSize: 5,
+          lineStyle: {
+            normal: {
+              color: "#E3A731",
+              shadowColor: "rgba(0, 0, 0, .3)",
+              shadowBlur: 0,
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+            },
+          },
+          itemStyle: {
+            color: "#E3A731",
+            borderColor: "#E3A731",
+            borderWidth: 3,
+            shadowColor: "rgba(0, 0, 0, .3)",
+            shadowBlur: 0,
+            shadowOffsetY: 2,
+            shadowOffsetX: 2,
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [28, 28, 18, 39, 19],
+        },
+        {
+          name: "实际生产数量",
+          type: "line",
+          showAllSymbol: true,
+          symbol: "circle",
+          symbolSize: 5,
+          lineStyle: {
+            normal: {
+              color: "#E3A731",
+              shadowColor: "rgba(0, 0, 0, .3)",
+              shadowBlur: 0,
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+            },
+          },
+
+          itemStyle: {
+            color: "#E3A731",
+            borderColor: "#E3A731",
+            borderWidth: 3,
+            shadowColor: "rgba(0, 0, 0, .3)",
+            shadowBlur: 0,
+            shadowOffsetY: 2,
+            shadowOffsetX: 2,
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [27, 31, 20, 31, 10],
+        },
+        {
+          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],
+        },
+      ],
+    })
+    this.$refs.chart6.setData({
+      grid: {
+        top: "15%",
+        left: "10%",
+        right: "5%",
+        bottom: "15%",
+      },
+      legend: {
+        top: 0,
+        x: 'center',
+        textStyle: {
+          color: "#ffffff"
+        }
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: true,
+          axisLine: {
+            show: true,
+          },
+          splitArea: {
+            color: "#f00",
+            lineStyle: {
+              color: "#f00",
+            },
+          },
+          axisLabel: {
+            color: "#fff",
+            fontSize: 0.8 * vw,
+            interval: 0,
+          },
+          splitLine: {
+            show: false,
+          },
+          data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"],
+        },
+      ],
+
+      yAxis: [
+        {
+          boundaryGap: true,
+          type: "value",
+          min: 0,
+          splitNumber: 4,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          axisLine: {
+            show: true,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#d1e6eb",
+            },
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+      ],
+      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: "OEE",
+          type: "line",
+          showAllSymbol: true,
+          symbol: "circle",
+          symbolSize: 5,
+          lineStyle: {
+            normal: {
+              color: "#E3A731",
+              shadowColor: "rgba(0, 0, 0, .3)",
+              shadowBlur: 0,
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+            },
+          },
+
+          itemStyle: {
+            color: "#E3A731",
+            borderColor: "#E3A731",
+            borderWidth: 3,
+            shadowColor: "rgba(0, 0, 0, .3)",
+            shadowBlur: 0,
+            shadowOffsetY: 2,
+            shadowOffsetX: 2,
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [27, 31, 20, 31, 10],
+        },
+      ],
+    })
+  },
+  methods: {},
+  computed: {
+    scrollTableData() {
+      return Array(222).fill(0).map(i => {
+        return {
+          value1: 'PRES001',
+          value2: '焊接设备001',
+          value3: '自动焊接机',
+          value4: '98.76%',
+          value5: '87.65%',
+          value6: '0%',
+          value7: '5.55%',
+          value8: '0%',
+          value9: '0%',
+        }
+      })
+    }
+  },
+  beforeDestroy() {
+  }
+};
+</script>
+<style scoped>
+.app-container {
+  background-image: url("../../../assets/board/boardBg2.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: 0.3vw;
+}
+
+.subTitle {
+  position: absolute;
+  transform: translateY(-50%);
+  font-size: 1.2vw;
+  color: #d6eaed;
+  letter-spacing: 0.1vw;
+}
+
+.chart1, .chart2, .chart3, .chart4 {
+  .text {
+    position: absolute;
+    top: 80%;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 0.8vw;
+    color: #fff;
+    white-space: nowrap;
+  }
+}
+
+.chart1 {
+  position: absolute;
+  top: 22.8%;
+  left: 11.7%;
+  width: 12vw;
+  height: 12vw;
+  transform: translate(-50%, -50%);
+}
+
+.chart2 {
+  position: absolute;
+  top: 22.8%;
+  left: 26.7%;
+  width: 12vw;
+  height: 12vw;
+  transform: translate(-50%, -50%);
+}
+
+.chart3 {
+  position: absolute;
+  top: 22.8%;
+  left: 41.7%;
+  width: 12vw;
+  height: 12vw;
+  transform: translate(-50%, -50%);
+}
+
+.chart4 {
+  position: absolute;
+  top: 22.8%;
+  left: 56.7%;
+  width: 12vw;
+  height: 12vw;
+  transform: translate(-50%, -50%);
+}
+
+.scrollTable {
+  position: absolute;
+  top: 44%;
+  left: 4%;
+  width: 61%;
+  height: 51%;
+}
+
+
+.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: 10%;
+  font-size: 1vw;
+}
+
+.chart5 {
+  position: absolute;
+  top: 15%;
+  left: 66.7%;
+  width: 30%;
+  height: 22%;
+}
+
+.chart6 {
+  position: absolute;
+  top: 44.5%;
+  left: 66.7%;
+  width: 30%;
+  height: 22%;
+}
+
+.faultText1 {
+  position: absolute;
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: 1.1vw;
+}
+
+.faultText2 {
+  position: absolute;
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: 0.5vw;
+}
+</style>

src/views/board/caseShell/index2.vue

@@ -184,7 +184,7 @@ export default {
                 containLabel: true,
               },
               legend: {
-                data:['前板数量','后板数量'],
+                data: ['前板数量', '后板数量'],
                 right: 'center',
                 top: 0,
                 textStyle: {
@@ -196,7 +196,7 @@ export default {
               },
               xAxis: {
                 type: "category",
-                data: e.map(val=>val.X_VALUE),
+                data: e.map(val => val.X_VALUE),
                 axisLine: {
                   lineStyle: {
                     color: "white",
@@ -234,10 +234,11 @@ export default {
                     normal: {
                       show: true,
                       position: "top",
-                      formatter:(e)=>{
-                        if(e.data === 0){
+                      formatter: (e) => {
+                        if (e.data === 0) {
                           return ''
-                        }else{}
+                        } else {
+                        }
                         return e.data
                       },
                       textStyle: {
@@ -262,10 +263,10 @@ export default {
                       ]),
                     },
                   },
-                  data: e.map(val=>val.Y_VALUE_ONE),
+                  data: e.map(val => val.Y_VALUE_ONE),
                 },
                 {
-                  name:'后板数量',
+                  name: '后板数量',
                   type: "bar",
                   barWidth: "30%",
                   barMaxWidth: 50,
@@ -273,10 +274,11 @@ export default {
                     normal: {
                       show: true,
                       position: "top",
-                      formatter:(e)=>{
-                        if(e.data === 0){
+                      formatter: (e) => {
+                        if (e.data === 0) {
                           return ''
-                        }else{}
+                        } else {
+                        }
                         return e.data
                       },
                       textStyle: {
@@ -301,7 +303,7 @@ export default {
                       ]),
                     },
                   },
-                  data: e.map(val=>val.Y_VALUE_TWO),
+                  data: e.map(val => val.Y_VALUE_TWO),
                 },
               ],
             })
@@ -334,7 +336,7 @@ export default {
                 containLabel: true,
               },
               legend: {
-                data: ['内胆','箱壳'],
+                data: ['内胆', '箱壳'],
                 right: 'center',
                 top: 0,
                 textStyle: {
@@ -346,7 +348,7 @@ export default {
               },
               xAxis: {
                 type: "category",
-                data: e.map(val=>val.X_VALUE),
+                data: e.map(val => val.X_VALUE),
                 axisLine: {
                   lineStyle: {
                     color: "white",
@@ -383,10 +385,11 @@ export default {
                   label: {
                     normal: {
                       show: true,
-                      formatter:(e)=>{
-                        if(e.data === 0){
+                      formatter: (e) => {
+                        if (e.data === 0) {
                           return ''
-                        }else{}
+                        } else {
+                        }
                         return e.data
                       },
                       position: "top",
@@ -412,7 +415,7 @@ export default {
                       ]),
                     },
                   },
-                  data: e.map(val=>val.Y_VALUE_ONE),
+                  data: e.map(val => val.Y_VALUE_ONE),
                 },
                 {
                   name: '箱壳',
@@ -422,10 +425,11 @@ export default {
                   label: {
                     normal: {
                       show: true,
-                      formatter:(e)=>{
-                        if(e.data === 0){
+                      formatter: (e) => {
+                        if (e.data === 0) {
                           return ''
-                        }else{}
+                        } else {
+                        }
                         return e.data
                       },
                       position: "top",
@@ -451,7 +455,7 @@ export default {
                       ]),
                     },
                   },
-                  data: e.map(val=>val.Y_VALUE_TWO),
+                  data: e.map(val => val.Y_VALUE_TWO),
                 },
               ],
             })
@@ -469,8 +473,8 @@ export default {
           e: 'xkqhb-10',
           i: "scada_xk_pro_xh_01('')",
           f: (e) => {
-            this.frontNum = e.map(val=>val.Y_VALUE_ONE).reduce((a,b)=>a+b)
-            this.laterNum = e.map(val=>val.Y_VALUE_TWO).reduce((a,b)=>a+b)
+            this.frontNum = e.map(val => val.Y_VALUE_ONE).reduce((a, b) => a + b)
+            this.laterNum = e.map(val => val.Y_VALUE_TWO).reduce((a, b) => a + b)
             this.$refs.chart3.setData({
               tooltip: {
                 trigger: "axis",
@@ -487,7 +491,7 @@ export default {
                 containLabel: true,
               },
               legend: {
-                data: ['前板','后板'],
+                data: ['前板', '后板'],
                 right: 'center',
                 top: 0,
                 textStyle: {
@@ -499,7 +503,7 @@ export default {
               },
               xAxis: {
                 type: "category",
-                data: e.map(val=>val.X_VALUE),
+                data: e.map(val => val.X_VALUE),
                 axisLine: {
                   lineStyle: {
                     color: "white",
@@ -536,10 +540,11 @@ export default {
                   label: {
                     normal: {
                       show: true,
-                      formatter:(e)=>{
-                        if(e.data === 0){
+                      formatter: (e) => {
+                        if (e.data === 0) {
                           return ''
-                        }else{}
+                        } else {
+                        }
                         return e.data
                       },
                       position: "top",
@@ -565,7 +570,7 @@ export default {
                       ]),
                     },
                   },
-                  data: e.map(val=>val.Y_VALUE_ONE),
+                  data: e.map(val => val.Y_VALUE_ONE),
                 },
                 {
                   name: '后板',
@@ -575,10 +580,11 @@ export default {
                   label: {
                     normal: {
                       show: true,
-                      formatter:(e)=>{
-                        if(e.data === 0){
+                      formatter: (e) => {
+                        if (e.data === 0) {
                           return ''
-                        }else{}
+                        } else {
+                        }
                         return e.data
                       },
                       position: "top",
@@ -604,7 +610,7 @@ export default {
                       ]),
                     },
                   },
-                  data: e.map(val=>val.Y_VALUE_TWO),
+                  data: e.map(val => val.Y_VALUE_TWO),
                 },
               ],
             })
@@ -642,7 +648,7 @@ export default {
               },
               xAxis: {
                 type: "category",
-                data: e.map(val=>val.X_VALUE),
+                data: e.map(val => val.X_VALUE),
                 axisLine: {
                   lineStyle: {
                     color: "white",
@@ -680,10 +686,11 @@ export default {
                     normal: {
                       show: true,
                       position: "top",
-                      formatter:(e)=>{
-                        if(e.data === 0){
+                      formatter: (e) => {
+                        if (e.data === 0) {
                           return ''
-                        }else{}
+                        } else {
+                        }
                         return e.data
                       },
                       textStyle: {
@@ -708,7 +715,7 @@ export default {
                       ]),
                     },
                   },
-                  data: e.map(val=>val.Y_VALUE),
+                  data: e.map(val => val.Y_VALUE),
                 }
               ]
             })
@@ -730,7 +737,7 @@ export default {
   },
   methods: {},
   beforeDestroy() {
-    if(intervalFun){
+    if (intervalFun) {
       clearInterval(intervalFun)
       intervalFun = null
     }