修改4F页面

package.json

@@ -6,6 +6,7 @@
   "license": "MIT",
   "scripts": {
     "###": "高版本node请使用如下配置启动 SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "run": "vue-cli-service serve",
     "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build:prod": "vue-cli-service build",
     "build:stage": "vue-cli-service build --mode staging",
@@ -35,9 +36,10 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
+    "@tweenjs/tween.js": "23.1.3",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
-    "core-js": "3.25.3",
+    "core-js": "^3.38.1",
     "echarts": "5.4.0",
     "echarts-gl": "^2.0.9",
     "element-ui": "2.15.12",
@@ -46,12 +48,14 @@
     "highlight.js": "9.18.5",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
+    "jsbarcode": "^3.11.6",
     "jsencrypt": "3.0.0-rc.1",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
     "print-js": "^1.6.0",
+    "qrcode": "^1.5.4",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
@@ -62,6 +66,7 @@
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xlsx": "^0.17.0"

src/api/board/cs2.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询产量
+export function getHourProductionList(query) {
+  return request({
+    url: '/mes/reportWork/getHourProductionList',
+    method: 'get',
+    params: query
+  });
+}

src/views/cs/index2.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <div class="bg">
+      <div class="bg1"></div>
       <div class="title1">白坯车间生产监控看板</div>
       <div class="subTitle" style="left: 27%">成型区</div>
       <div class="subTitle" style="left: 48.9%;">烘房区</div>
@@ -14,6 +15,7 @@
       <div v-if="isRun.includes(1)">
         <div class="arrow" style="top: 34%;left: 22.1%;transform: rotate(15deg);"></div>
         <div class="arrow" style="top: 39.6%;left: 21.3%;transform: rotate(15deg);"></div>
+        <div class="arrow" style="top: 33.6%;left: 15%;transform: rotate(15deg)"></div>
         <div class="arrow" style="top: 39.6%;left: 14.1%;transform: rotate(15deg);"></div>
       </div>
       <div v-if="isRun.includes(2)">
@@ -24,9 +26,9 @@
       </div>
       <div v-if="isRun.includes(3)">
         <div class="arrow" style="top: 36.3%;left: 68.2%;transform: rotate(348deg);"></div>
-        <div class="arrow" style="top: 36.6%;left: 74.2%;transform: rotate(348deg);"></div>
+        <div class="arrow" style="top: 36.6%;left: 74.5%;transform: rotate(348deg);"></div>
         <div class="arrow1" style="top: 42%;left: 68.7%;transform: rotate(348deg);"></div>
-        <div class="arrow1" style="top: 41.7%;left: 74.8%;transform: rotate(348deg);"></div>
+        <div class="arrow1" style="top: 41.7%;left: 75%;transform: rotate(348deg);"></div>
       </div>
       <div v-if="isRun.includes(4)">
         <div class="arrow" style="top: 54.9%;left: 70.1%;transform: rotate(348deg);"></div>
@@ -64,8 +66,12 @@
       <div class="box" style="top: 64.3%;left: 85.3%;"></div>
       <div class="box" style="top: 70.6%;left: 85.3%;"></div>
 
-      <div v-for="(i,k) in hfData" :class="i.isProd? 'hf1':'hf'" :style="`top: ${i.top}%;`">烘房{{ k + 1 }} （产量：10车）
-        <div v-if="i.isProd" class="inProd">
+      <div v-for="(i,k) in hfData" :class="hfLocation[k].isProd? 'hf1':'hf'"
+           :style="`top: ${hfLocation[k].top}%;`">
+        <span>
+          烘房{{ k + 1 }} （产量：{{ i.quantity }}车）
+        </span>
+        <div v-if="hfLocation[k].isProd" class="inProd">
           <svg t="1723106843182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="1501">
             <path
@@ -75,27 +81,40 @@
           </svg>
           生产中
         </div>
-        <div class="infoModel">
-          <div class="title">设备名称</div>
+        <div class="infoModel" :style="`display:${loopIndex === k?'inline-block':''}`">
+          <div class="title">{{ i.equName }}</div>
           <div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> 10</div>
           <div class="equipmentInfo"><span style="color: #fff9">设备信息:</span> 10</div>
         </div>
       </div>
 
-      <div class="equipment" v-for="i in equipmentData" :style="`top: ${i.top}%;left: ${i.left}%;`">
-        <div :class="i.isRight?`equipmentName1`:`equipmentName`"><span>设备名称</span></div>
+      <div class="equipment" v-for="(i,k) in equipmentData"
+           :style="`top: ${equipmentLocation[k].top}%;left: ${equipmentLocation[k].left}%;`">
+        <div :class="equipmentLocation[k].isRight?`equipmentName1`:`equipmentName`"
+             :style="`display:${loopIndex === 18+k?'inline-block':''}`">
+          <div class="title">{{ i.equName }}</div>
+          <div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> 10</div>
+          <div class="equipmentInfo"><span style="color: #fff9">设备信息:</span> 10</div>
+        </div>
       </div>
+      <div :class="i.isRun ? 'ring':'ring1'" :style="`top:${i.top}%;left:${i.left}%`" v-for="i in ringLocation"></div>
 
 
+      <div :class="`${i.isGoods? 'agv2':'agv1'}`" v-for="i in agvData"
+           :style="`${getLocation(i.x,i.y)}transform: rotate(45deg);`"></div>
     </div>
   </div>
 </template>
 <script>
 
+import * as TWEEN from '@tweenjs/tween.js'
+import {getHourProductionList} from "../../api/board/cs2";
+
 export default {
   data() {
     return {
-      hfData: [
+      loopIndex: 0,
+      hfLocation: [
         {
           top: 27.5,
           isProd: false
@@ -129,11 +148,11 @@ export default {
           isProd: false
         },
         {
-          top: 45.3,
+          top: 45.5,
           isProd: true
         },
         {
-          top: 48.9,
+          top: 49.1,
           isProd: true
         },
         {
@@ -149,51 +168,246 @@ export default {
           isProd: false
         },
         {
-          top: 60.7,
+          top: 60.8,
           isProd: false
         },
         {
-          top: 62.7,
+          top: 62.9,
+          isProd: false
+        },
+        {
+          top: 65,
           isProd: false
         },
         {
           top: 67.1,
           isProd: false
         },
+        {
+          top: 69.4,
+          isProd: false
+        },
+      ],
+      ringLocation: [
+        {
+          top: 72,
+          left: 9.9,
+          isRun: true
+        },
+        {
+          top: 62.5,
+          left: 11.5,
+          isRun: true
+        },
+        {
+          top: 44.5,
+          left: 14.7,
+          isRun: false
+        },
+        {
+          top: 37.5,
+          left: 16,
+          isRun: false
+        },
+        {
+          top: 71.5,
+          left: 18,
+          isRun: true
+        },
+        {
+          top: 62.5,
+          left: 19.5,
+          isRun: true
+        },
+        {
+          top: 44.5,
+          left: 22,
+          isRun: true
+        },
+        {
+          top: 37.5,
+          left: 23,
+          isRun: true
+        },
       ],
       isRun: [1, 2, 3, 4],
-      equipmentData: [
+      equipmentLocation: [
         {
-          top: 25.5,
-          left: 8.4,
+          top: 63.5,
+          left: 6.4,
           isRight: true
         },
         {
-          top: 50,
-          left: 5.5,
+          top: 54,
+          left: 8,
           isRight: true
         },
         {
-          top: 29,
-          left: 62.5,
+          top: 36,
+          left: 11,
           isRight: false
         },
         {
-          top: 49,
-          left: 64,
+          top: 29,
+          left: 12,
           isRight: false
         },
+        {
+          top: 63,
+          left: 14.5,
+          isRight: true
+        },
+        {
+          top: 54,
+          left: 16,
+          isRight: true
+        },
+        {
+          top: 36,
+          left: 18,
+          isRight: true
+        },
+        {
+          top: 29,
+          left: 19,
+          isRight: true
+        },
+      ],
+      hfData: [],
+      equipmentData: [],
+      agvData: [
+        {
+          x: 0,
+          y: 0,
+          isGoods: false,
+        },
+        {
+          x: 0,
+          y: 1,
+          isGoods: true,
+        },
+        {
+          x: 1,
+          y: 0,
+          isGoods: false,
+        },
+        {
+          x: 1,
+          y: 1,
+          isGoods: true,
+        }
       ]
     }
   },
-  methods: {},
+  methods: {
+    getLocation(x, y) {
+      let a = (66 + (90 - 66) * y) * x
+      let b = 12 * y
+      let xLocation = 16 - b + a
+      let yLocation = 22 + (84 - 22) * y
+      return ` left: ${xLocation}%;top: ${yLocation}%;`
+    },
+    getData() {
+      getHourProductionList().then(e => {
+        let hfArr = []
+        let equipmentArr = []
+        for (let i = 0; i < 18; i++) {
+          hfArr.push(e.filter(v => v.equName.includes('烘房')).filter(v => v.equCode === `H${i + 1}`)?.[0])
+        }
+        for (let i = 0; i < 8; i++) {
+          equipmentArr.push(e.filter(v => v.equName.includes('成型机')).filter(v => v.equCode === `C${i + 1}`)?.[0])
+        }
+        this.hfData = hfArr
+        this.equipmentData = equipmentArr
+        console.log(equipmentArr)
+      })
+    }
+  },
   mounted() {
+    this.getData()
+    setInterval(() => {
+      this.loopIndex = (this.loopIndex + 1) % 26
+    }, 1000 * 5)
+    let agv = [
+      {
+        top: 22,
+        left: 16
+      },
+      {
+        top: 22,
+        left: 82
+      },
+      {
+        top: 84,
+        left: 4
+      },
+      {
+        top: 84,
+        left: 94
+      },
+      {
+        width: 12,
+        height: 62
+      },
+      {
+        width1: 66,
+        width2: 90
+      }
+    ]
+    let cs = [
+      [0, 0],
+      [10, 10],
+      [20, 20],
+      [30, 30],
+      [40, 40],
+      [50, 50],
+      [60, 60],
+      [70, 70],
+      [80, 80],
+      [90, 90],
+      [100, 100],
+    ]
+    let time = 10 * 1000
+    setInterval(() => {
+      this.agvData.forEach(e => {
+        new TWEEN.Tween(e).to({x: Math.random(), y: Math.random()}, time).start()
+      })
+    }, time)
+
+    function animate() {
+      requestAnimationFrame(animate)
+      TWEEN.update()
+    }
+
+    animate()
   }
 }
 </script>
 <style scoped lang="less">
+.agv1, .agv2 {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: absolute;
+  width: 2vw;
+  height: 1.24vw;
+}
+
+.agv1 {
+  background-image: url("~@/assets/board/agv1.png");
+  top: 30%;
+  left: 30%;
+}
+
+.agv2 {
+  background-image: url("~@/assets/board/agv2.png");
+  top: 40%;
+  left: 40%;
+}
+
 .bg {
-  background-image: url("~@/assets/board/车间监控系统 - 04.jpg");
+  overflow: hidden;
+  background-image: url("~@/assets/board/bg.jpg");
+  //background-image: url("~@/assets/board/车间监控系统 - 04-2.jpg");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   position: absolute;
@@ -201,6 +415,17 @@ export default {
   height: 100%;
 }
 
+.bg1 {
+  background-image: url("~@/assets/board/车间监控系统 - 04.png");
+  background-size: 101.9% 102.2%;
+  background-repeat: no-repeat;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 9.3%;
+  left: -0.8%;
+}
+
 .title1 {
   position: absolute;
   top: 1%;
@@ -330,9 +555,9 @@ export default {
   line-height: 1vh;
 
 
-  &:hover .infoModel {
-    display: inline-block;
-  }
+  //&:hover .infoModel {
+  //  display: inline-block;
+  //}
 
   .infoModel {
     position: absolute;
@@ -357,7 +582,7 @@ export default {
 
     .title {
       position: absolute;
-      top: 7%;
+      top: 10%;
       left: 7%;
       font-size: 1vw;
       letter-spacing: 3px;
@@ -413,22 +638,39 @@ export default {
 
 .equipment {
   position: absolute;
-  width: 25%;
-  height: 35%;
+  width: 9%;
+  height: 10%;
 
-  &:hover .equipmentName, &:hover .equipmentName1 {
-    display: inline-block;
-  }
+  //&:hover .equipmentName, &:hover .equipmentName1 {
+  //  display: inline-block;
+  //}
 
   .equipmentName, .equipmentName1 {
     position: absolute;
-    width: 12.7vw;
-    height: 4.4vh;
+    width: 14.1vw;
+    height: 14.7vh;
     display: none;
 
-    span {
+    .equipmentOutput {
+      color: #fff;
+      position: absolute;
+      top: 45%;
+      font-size: 0.9vw;
+      letter-spacing: 3px;
+      white-space: nowrap;
+    }
+
+    .equipmentInfo {
+      color: #fff;
+      position: absolute;
+      top: 70%;
+      font-size: 0.9vw;
+      letter-spacing: 3px;
+      white-space: nowrap;
+    }
+
+    .title {
       position: absolute;
-      left: 5%;
       line-height: 4.4vh;
       color: #fff;
       font-size: 0.9vw;
@@ -442,7 +684,7 @@ export default {
       left: 0;
       width: 100%;
       height: 100%;
-      background-image: url("~@/assets/board/弹窗2-名称.png");
+      background-image: url("~@/assets/board/弹窗1-设备信息.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
@@ -450,14 +692,38 @@ export default {
 
   .equipmentName {
     top: 4%;
-    left: -37%;
+    left: -92%;
+
+    .equipmentOutput {
+      left: 7%;
+    }
+
+    .equipmentInfo {
+      left: 7%;
+    }
+
+    .title {
+      left: 5%;
+    }
   }
 
   .equipmentName1 {
     top: 9%;
     left: 73%;
 
-    span {
+
+    .equipmentOutput {
+      text-align: right;
+      left: 25%;
+    }
+
+    .equipmentInfo {
+      text-align: right;
+      left: 25%;
+    }
+
+
+    .title {
       text-align: right;
       right: 5%;
     }
@@ -468,5 +734,32 @@ export default {
     }
   }
 }
+.ring, .ring1 {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%; /* 使边框形成一个圆形 */
+  box-sizing: border-box; /* 防止宽度和高度包含边框 */
 
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    height: 50%;
+    background: #fff0; /* 背景色为白色，形成内部空心的效果 */
+    border-radius: 50%;
+  }
+}
+
+.ring{
+  border: 1px solid #90EE90; /* 设置边框为黑色，宽度为5px */
+  box-shadow: 0 0 3px 3px #90EE9099;
+}
+.ring1{
+  border: 1px solid #ff603b; /* 设置边框为黑色，宽度为5px */
+  box-shadow: 0 0 3px 3px #ff603b99;
+}
 </style>