添加新的看板

src/permission.js

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

src/router/index.js

@@ -119,6 +119,16 @@ export const constantRoutes = [
       component: () => import('@/views/board/board3/index'),
       name: 'Board4',
       meta: {title: '生产进度监控', icon: '404',}
+    }, {
+      path: 'board5',
+      component: () => import('@/views/board/board4/index'),
+      name: 'Board4',
+      meta: {title: '数字化注塑车间管控中心', icon: '404',}
+    }, {
+      path: 'board6',
+      component: () => import('@/views/board/board5/index'),
+      name: 'Board4',
+      meta: {title: '数字化注塑车间管控中心', icon: '404',}
     },
       {
         path: 'liner',

src/views/board/board4/index.vue

@@ -0,0 +1,644 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">数字化注塑车间管控中心</div>
+    <div class="centerDevice"></div>
+    <div class="text1" style="top: 14.7%;left: 5.5%;">今日计划数: 432</div>
+    <div class="text1" style="top: 14.7%;left: 16.8%;">今日完成数: 432</div>
+    <div class="text1" style="top: 24%;left: 5.5%;">今日差异数: 432</div>
+    <div class="text1" style="top: 24%;left: 16.8%;">今日完成率: 98%</div>
+    <div class="text1" style="top: 12%;left: 29%;">今日用水(t):</div>
+    <div class="text1" style="top: 12%;left: 44%;">今日用电(kwh):</div>
+    <div class="text1" style="top: 12%;left: 59%;">今日用气(m³):</div>
+    <div class="text1" style="top: 19.1%;left: 75%;">正常: 300</div>
+    <div class="text1" style="top: 19.1%;left: 82.4%;">告警: 01</div>
+    <div class="text1" style="top: 19.1%;left: 89.8%;">停机: 01</div>
+    <div class="num1" style="color:#63CDFA;top: 17%;left: 30.05%;">1</div>
+    <div class="num1" style="color:#63CDFA;top: 17%;left: 32.55%;">2</div>
+    <div class="num1" style="color:#63CDFA;top: 17%;left: 35.05%;">3</div>
+    <div class="num1" style="color:#63CDFA;top: 17%;left: 37.55%;">4</div>
+    <div class="num1" style="color:#63CDFA;top: 17%;left: 40.05%;">5</div>
+    <div class="num1" style="color:#69FD80;top: 17%;left: 45.05%;">6</div>
+    <div class="num1" style="color:#69FD80;top: 17%;left: 47.55%;">7</div>
+    <div class="num1" style="color:#69FD80;top: 17%;left: 50.05%;">8</div>
+    <div class="num1" style="color:#69FD80;top: 17%;left: 52.55%;">9</div>
+    <div class="num1" style="color:#69FD80;top: 17%;left: 55.05%;">0</div>
+    <div class="num1" style="color:#FEF26A;top: 17%;left: 60.05%;">1</div>
+    <div class="num1" style="color:#FEF26A;top: 17%;left: 62.55%;">2</div>
+    <div class="num1" style="color:#FEF26A;top: 17%;left: 65.05%;">3</div>
+    <div class="num1" style="color:#FEF26A;top: 17%;left: 67.55%;">4</div>
+    <div class="num1" style="color:#FEF26A;top: 17%;left: 70.05%;">5</div>
+    <div class="text2" style="top: 12.7%;left: 84.7%;">设备总数:320</div>
+    <div class="text2" style="top: 41%;left: 84.7%;">总维修次数:320</div>
+    <div class="text3" style="top: 35.15%;left: 5.5%;">工单进度</div>
+    <div class="text3" style="top: 35.15%;left: 75%;">维修分析</div>
+    <div class="text3" style="top: 63.05%;left: 5.5%;">质量追溯</div>
+    <div class="text3" style="top: 63.05%;left: 30.2%;">设备分析</div>
+    <div class="text3" style="top: 63.05%;left: 75%;">告警趋势</div>
+    <div class="deviceError">
+      <div class="icon"></div>
+      <div class="text" style="left: 18%">设备1#</div>
+      <div class="text" style="left: 42%;color: #F42223">产品未顶出</div>
+      <div class="text" style="left: 75%">66:66:66</div>
+    </div>
+
+    <div class="scrollTable">
+      <div style="background-color: #05346044">
+        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
+          型号
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
+          计划数
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
+          完成数
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 16.66%">
+          差异数
+        </div>
+        <div class="scrollTableItem" style="font-weight: bold;width: 25%">
+          执行进度
+        </div>
+      </div>
+      <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: calc(100% - 20px - 1vw - 0.4vw);overflow: hidden;"
+      >
+        <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+        >
+          <div :style='"background-color:" + ((index % 2 === 0)? "#05346022":"#05346044") '>
+            <div
+                class="scrollTableItem" style="width: 25%">
+              {{ item.value1 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 16.66%">
+              {{ item.value2 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 16.66%">
+              {{ item.value3 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 16.66%">
+              {{ item.value4 }}
+            </div>
+            <div
+                class="scrollTableItem" style="width: 25%">
+              {{ item.value5 }}
+            </div>
+          </div>
+        </div>
+      </vue-seamless-scroll>
+    </div>
+    <div class="repairTimes">
+      <div class="item" v-for="i in 3">
+        <div class="num">{{ i }}</div>
+        <div class="deviceName">SC-228NE</div>
+        <div class="schedule">
+          <div class="progressBar" :style="{width: 100 - ((i-1) * 10) + '%'}"></div>
+        </div>
+        <div class="times">{{ 10 - i + 1 }}次</div>
+      </div>
+    </div>
+    <div class="chart1">
+      <Chart ref="chart1"></Chart>
+    </div>
+    <div class="chart2">
+      <Chart ref="chart2"></Chart>
+    </div>
+    <div class="chart3">
+      <Chart ref="chart3"></Chart>
+    </div>
+  </div>
+</template>
+<script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+import Chart from "@/components/board/Chart.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() {
+    const dataMap = {
+      '合格数': 100,
+      '不合格数': 100
+    }
+    this.$refs.chart1.setData({
+      title: {
+        y: 'center',
+        left: '60%',
+        text: `{dot1|●} {name|合格数} ：{value|1000}\n\n\n{dot2|●} {name|不合格数} ：{value|100}`,
+        textStyle: {
+          color: '#ffffff',
+          rich: {
+            dot1: {
+              fontSize: 16,
+              color: '#ffffff',
+            },
+            dot2: {
+              fontSize: 16,
+              color: '#4E97FF',
+            },
+            name: {
+              color: '#fff',
+              fontSize: 18,
+            },
+            value: {
+              color: '#fff',
+              fontSize: 22,
+              fontWeight: '800',
+            }
+          }
+        }
+      },
+      series: [
+        {
+          type: "pie",
+          center: ["30%", "50%"],
+          radius: ['57%', '63%'],
+          itemStyle: {
+            color: '#6666'
+          },
+          labelLine: {
+            show: false
+          },
+          data: [1]
+        },
+        {
+          type: "pie",
+          label: {
+            show: false,
+          },
+          center: ["30%", "50%"],
+          radius: ['54%', '66%'],
+          clockwise: false,
+          labelLine: {
+            show: false
+          },
+          itemStyle: {
+            color: '#4E97FF'
+          },
+          data: [
+            {
+              value: 20,
+              name: '不合格数',
+              itemStyle: {
+                color: '#4E97FF'
+              },
+            },
+            {
+              value: 80,
+              name: '合格数',
+              itemStyle: {
+                color: '#0000'
+              },
+            },
+          ]
+        },
+      ]
+    })
+    this.$refs.chart2.setData({
+      grid: {
+        top: "15%",
+        left: "10%",
+        right: "5%",
+        bottom: "15%",
+      },
+      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: "OEE",
+          type: "bar",
+
+          itemStyle: {
+            color: "#0C2CD8",
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [27, 31, 20, 31, 10],
+        },
+      ],
+    })
+    this.$refs.chart3.setData({
+      grid: {
+        top: "15%",
+        left: "10%",
+        right: "5%",
+        bottom: "15%",
+      },
+      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: Math.ceil(Math.floor(Math.random() * 100)) + 'WD',
+          value2: Math.ceil(Math.floor(Math.random() * 100)),
+          value3: Math.ceil(Math.floor(Math.random() * 100)),
+          value4: Math.ceil(Math.floor(Math.random() * 100)),
+          value5: Math.ceil(Math.floor(Math.random() * 100)) + '%',
+        }
+      })
+    }
+  },
+  beforeDestroy() {
+  }
+};
+
+</script>
+<style scoped lang="less">
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 0.3vw;
+}
+
+.app-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-image: url("../../../assets/board/boardBg3.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
+
+.text1 {
+  position: absolute;
+  transform: translateY(-50%);
+  letter-spacing: 0.1vw;
+  font-size: 0.9vw;
+  color: #fff;
+}
+
+.text2 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  letter-spacing: 0.1vw;
+  font-size: 1.1vw;
+  color: #fff;
+}
+
+.text3 {
+  position: absolute;
+  transform: translateY(-50%);
+  letter-spacing: 0.1vw;
+  font-size: 1.1vw;
+  color: #fff;
+}
+
+.num1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  letter-spacing: 0.1vw;
+  font-size: 1.3vw;
+  color: #eee;
+}
+
+.centerDevice {
+  position: absolute;
+  top: 22%;
+  left: 28.6%;
+  width: 42.9%;
+  height: 36.4%;
+  background-image: url("../../../assets/board/device.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.deviceError {
+  position: absolute;
+  top: 24.5%;
+  left: 74%;
+  width: 21.5vw;
+  height: 2.275vw;
+  background-image: url("../../../assets/board/errorBg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    left: 9%;
+    transform: translate(-50%, -50%);
+    width: 1.32vw;
+    height: 1.2vw;
+    background-image: url("../../../assets/board/errorIcon.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .text {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    letter-spacing: 0.1vw;
+    font-size: 0.8vw;
+    color: #fff;
+  }
+}
+
+.scrollTable {
+  position: absolute;
+  top: 38%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 20%;
+}
+
+.scrollTableItem {
+  color: #65CDF9;
+  margin: auto 0px;
+  padding: 10px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+  display: inline-block;
+  width: 10%;
+  font-size: 1vw;
+}
+
+.repairTimes {
+  position: absolute;
+  top: 44%;
+  left: 72.8%;
+  width: 23.8%;
+  height: 14.3%;
+
+  .item {
+    width: 100%;
+    height: 33.33%;
+    position: relative;
+
+    .num {
+      position: absolute;
+      top: 50%;
+      left: 8%;
+      width: 1vw;
+      height: 1vw;
+      font-size: 0.8vw;
+      text-align: center;
+      transform: translate(-50%, -50%);
+      line-height: calc(1vw - 2px);
+      color: #1B61D8;
+      background-color: #092C52;
+      border: 1px solid #0D598F;
+    }
+
+    .deviceName {
+      position: absolute;
+      top: 50%;
+      left: 15%;
+      font-size: 0.8vw;
+      transform: translateY(-50%);
+      color: #fff;
+    }
+
+    .schedule {
+      position: absolute;
+      top: 50%;
+      left: 35%;
+      transform: translateY(-50%);
+      width: 50%;
+      height: 8px;
+      border-radius: 4px;
+      background-color: #172B47;
+      overflow: hidden;
+
+      .progressBar {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background: linear-gradient(to right, #1068E4, #4E99FF);
+      }
+    }
+
+    .times {
+      position: absolute;
+      top: 50%;
+      left: 87%;
+      font-size: 0.8vw;
+      transform: translateY(-50%);
+      color: #60BAEA;
+    }
+  }
+}
+
+.chart1 {
+  position: absolute;
+  top: 66%;
+  left: 3.3%;
+  width: 23.8%;
+  height: 29%;
+}
+
+.chart2 {
+  position: absolute;
+  top: 66%;
+  left: 28%;
+  width: 44%;
+  height: 29%;
+}
+
+.chart3 {
+  position: absolute;
+  top: 66%;
+  left: 72.8%;
+  width: 23.8%;
+  height: 29%;
+}
+</style>