From 8b742b893651d871f8e5bd486b2cef0eb7352966 Mon Sep 17 00:00:00 2001
From: Yangwl <1726150332@qq.com>
Date: Wed, 28 May 2025 11:14:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BB=91=E8=9A=8A=E9=A6=99=E8=BD=A6=E9=97=B4?=
 =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=9B=91=E6=8E=A7=E7=9C=8B=E6=9D=BF2F?=
 =?UTF-8?q?=E7=BA=BF=E4=BD=93=E5=BC=80=E5=B7=A5=E5=B1=95=E7=A4=BA=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Yangwl <1726150332@qq.com>
---
 src/views/cs/index.vue | 117 ++++++++++++++++++++++++-----------------
 1 file changed, 70 insertions(+), 47 deletions(-)

diff --git a/src/views/cs/index.vue b/src/views/cs/index.vue
index c0e6b48..703b6ae 100644
--- a/src/views/cs/index.vue
+++ b/src/views/cs/index.vue
@@ -22,40 +22,9 @@
         <div :class="i.isRight?'equipmentName1':'equipmentName'"><span>设备名称</span></div>
       </div>
 
-      <div class="arrows" v-for="i in arrowData" v-if="false">
-        <div class="oneAnR" :style="`left:${i.left-3}%`">
-          <div class="oneAn">
-            <div class="wx" :style="`top: -1%;left:49.5%`"></div>
-            <div class="arrow" :style="`top: 7%;left:49.5%`"></div>
-            <div class="wx" :style="`top: 29%;left:49.5%`"></div>
-            <div class="arrow" :style="`top: 37%;left:49.5%`"></div>
-            <div class="wx" :style="`top: 59%;left:49.5%`"></div>
-            <div class="arrow" :style="`top: 67%;left:49.5%`"></div>
-            <div class="wx" :style="`top: 89%;left:49.5%`"></div>
-          </div>
-        </div>
-        <div class="twoAnR" :style="`left:${i.left-3}%`">
-          <div class="twoAn">
-            <div class="wxh" :style="`top: -0.9%;left:49%`"></div>
-            <div class="arrow" :style="`top: 6%;left:49%`"></div>
-            <div class="wxh" :style="`top: 15.2%;left:49%`"></div>
-            <div class="arrow" :style="`top: 22.1%;left:49%`"></div>
-            <div class="wxh" :style="`top: 31.3%;left:49%`"></div>
-            <div class="arrow" :style="`top:38.2%;left:49%`"></div>
-            <div class="wxh" :style="`top: 47.4%;left:49%`"></div>
-            <div class="arrow" :style="`top: 54.3%;left:49%`"></div>
-            <div class="wxh" :style="`top: 63.5%;left:49%`"></div>
-            <div class="arrow" :style="`top: 70.4%;left:49%`"></div>
-            <div class="wxh" :style="`top: 79.6%;left:49%`"></div>
-            <div class="arrow" :style="`top: 86.5%;left:49%`"></div>
-            <div class="wxh" :style="`top: 95.7%;left:49%`"></div>
-          </div>
-        </div>
-        <div class="box" :style="`top: 74.5%;left:${i.left}%`"></div>
-        <div class="box" :style="`top: 78.8%;left:${i.left}%`"></div>
-      </div>
 
-      <div class="arrows1" v-if="isRun.includes(1)">
+
+      <div class="arrows1" v-if="isRun.includes('XL01')">
         <div class="arrow" :style="`top: 38.5%;left: 35.2%;transform: rotate(0)`"></div>
         <div class="arrow" :style="`top: 42%;left: 35%;transform: rotate(0deg)`"></div>
         <div class="arrow" :style="`top: 48%;left: 34.5%;transform: rotate(0)`"></div>
@@ -65,7 +34,7 @@
         <div class="arrow" :style="`top: 66%;left: 33.1%;transform: rotate(0deg);`"></div>
       </div>
 
-      <div class="arrows1" v-if="isRun.includes(2)">
+      <div class="arrows1" v-if="isRun.includes('XL02')">
         <div class="arrow" :style="`top: 38.5%;left: 39.2%;transform: rotate(0deg);`"></div>
         <div class="arrow" :style="`top: 42%;left: 39%;transform: rotate(0deg);`"></div>
         <div class="arrow" :style="`top: 48%;left: 39.2%;transform: rotate(0deg);`"></div>
@@ -75,7 +44,7 @@
         <div class="arrow" :style="`top: 66%;left: 39%;transform: rotate(0deg);`"></div>
       </div>
 
-      <div class="arrows1" v-if="isRun.includes(3)">
+      <div class="arrows1" v-if="isRun.includes('XL03')">
         <div class="arrow" :style="`top: 38.5%;left: 46.2%;transform: rotate(0deg);`"></div>
         <div class="arrow" :style="`top: 42%;left: 46.3%;transform: rotate(0deg);`"></div>
         <div class="arrow" :style="`top: 48%;left: 46.2%;transform: rotate(0deg);`"></div>
@@ -85,7 +54,7 @@
         <div class="arrow" :style="`top: 66%;left: 45.4%;transform: rotate(0deg);`"></div>
       </div>
 
-      <div class="arrows1" v-if="isRun.includes(4)">
+      <div class="arrows1" v-if="isRun.includes('XL04')">
         <div class="arrow" :style="`top: 38.5%;left: 50.5%;transform: rotate(0deg);`"></div>
         <div class="arrow" :style="`top: 42%;left: 50.5%;transform: rotate(0deg);`"></div>
         <div class="arrow" :style="`top: 48%;left: 50.9%;transform: rotate(0deg);`"></div>
@@ -95,7 +64,7 @@
         <div class="arrow" :style="`top: 66%;left: 51.7%;transform: rotate(0deg);`"></div>
       </div>
 
-      <div class="arrows1" v-if="isRun.includes(5)">
+      <div class="arrows1" v-if="isRun.includes('XL05')">
         <div class="arrow" :style="`top: 38.5%;left: 57.2%;transform: rotate(358deg);`"></div>
         <div class="arrow" :style="`top: 42%;left: 57.5%;transform: rotate(358deg);`"></div>
         <div class="arrow" :style="`top: 48%;left: 57.5%;transform: rotate(358deg);`"></div>
@@ -105,7 +74,7 @@
         <div class="arrow" :style="`top: 66%;left: 57.7%;transform: rotate(358deg);`"></div>
       </div>
 
-      <div class="arrows1" v-if="isRun.includes(6)">
+      <div class="arrows1" v-if="isRun.includes('XL06')">
         <div class="arrow" :style="`top: 38.5%;left: 61.2%;transform: rotate(355deg);`"></div>
         <div class="arrow" :style="`top: 42%;left: 61.5%;transform: rotate(355deg);`"></div>
         <div class="arrow" :style="`top: 48%;left: 62.2%;transform: rotate(355deg);`"></div>
@@ -115,7 +84,7 @@
         <div class="arrow" :style="`top: 66%;left: 63.9%;transform: rotate(355deg);`"></div>
       </div>
 
-      <div class="arrows1" v-if="isRun.includes(7)">
+      <div class="arrows1" v-if="isRun.includes('XL07')">
         <div class="arrow" :style="`top: 38.5%;l;left: 68%;transform: rotate(350deg);`"></div>
         <div class="arrow" :style="`top: 42%;left: 68.5%;transform: rotate(350deg);`"></div>
         <div class="arrow" :style="`top: 48%;left: 68.8%;transform: rotate(350deg);`"></div>
@@ -125,7 +94,7 @@
         <div class="arrow" :style="`top: 66%;left: 70%;transform: rotate(350deg);`"></div>
       </div>
 
-      <div class="arrows1" v-if="isRun.includes(8)">
+      <div class="arrows1" v-if="isRun.includes('XL08')">
         <div class="arrow" :style="`top: 38.5%;left: 72.2%;transform: rotate(345deg);`"></div>
         <div class="arrow" :style="`top: 42%;left: 72.7%;transform: rotate(345deg);`"></div>
         <div class="arrow" :style="`top: 48%;left: 73.5%;transform: rotate(345deg);`"></div>
@@ -135,19 +104,45 @@
         <div class="arrow" :style="`top: 66%;left: 76.1%;transform: rotate(345deg);`"></div>
       </div>
 
+      <div class="arrows1" v-if="isRun.includes('XL09')">
+        <div class="arrow" :style="`top: 38.5%;left: 26.0%;transform: rotate(10deg);`"></div>
+        <div class="arrow" :style="`top: 42%;left: 25.7%;transform: rotate(10deg);`"></div>
+        <div class="arrow" :style="`top: 48%;left: 25.3%;transform: rotate(10deg);`"></div>
+        <div class="arrow" :style="`top: 52%;left: 25.1%;transform: rotate(10deg);`"></div>
+        <div class="arrow" :style="`top: 57%;left: 24.8%;transform: rotate(10deg);`"></div>
+        <div class="arrow" :style="`top: 62%;left: 24.2%;transform: rotate(10deg);`"></div>
+        <div class="arrow" :style="`top: 66%;left: 23.8%;transform: rotate(10deg);`"></div>
+      </div>
 
+      <div class="arrows1" v-if="isRun.includes('XL10')">
+        <div class="arrow" :style="`top: 38.5%;left: 22.5%;transform: rotate(12deg);`"></div>
+        <div class="arrow" :style="`top: 42%;left: 22.2%;transform: rotate(12deg);`"></div>
+        <div class="arrow" :style="`top: 48%;left: 21.5%;transform: rotate(12deg);`"></div>
+        <div class="arrow" :style="`top: 52%;left: 21%;transform: rotate(12deg);`"></div>
+        <div class="arrow" :style="`top: 57%;left: 20.5%;transform: rotate(12deg);`"></div>
+        <div class="arrow" :style="`top: 62%;left: 19.8%;transform: rotate(12deg);`"></div>
+
+      </div>
+
+      <div class="arrows1" v-if="isRun.includes('XL11')">
+        <div class="arrow" :style="`top: 38.5%;left: 15.6%;transform: rotate(13deg);`"></div>
+        <div class="arrow" :style="`top: 42%;left: 15.1%;transform: rotate(13deg);`"></div>
+        <div class="arrow" :style="`top: 48%;left: 14.5%;transform: rotate(13deg);`"></div>
+        <div class="arrow" :style="`top: 52%;left: 14.0%;transform: rotate(13deg);`"></div>
+        <div class="arrow" :style="`top: 57%;left: 13.5%;transform: rotate(13deg);`"></div>
+        <div class="arrow" :style="`top: 62%;left: 12.8%;transform: rotate(13deg);`"></div>
+        <div class="arrow" :style="`top: 66%;left: 12.5%;transform: rotate(13deg);`"></div>
+      </div>
       <div class="bottomArrows" v-for="(i,k) in 9">
         <div class="arrow" :style="`top: 72.5%;left: ${31.9 + 5.2*k}%;`"></div>
       </div>
       <div class="bottomArrows" v-for="(i,k) in 5">
         <div class="arrow" :style="`top: 73.7%;left: ${50.5 - 5.2*k}%;`"></div>
       </div>
-<!--      <div class="fixed-table-container">-->
-<!--        <el-table ref="autoScrollTable" :data="tableData" style="width: 80%" height="200" class="transparent-table">-->
-<!--          <el-table-column prop="time" label="时间" width="120"></el-table-column>-->
-<!--          <el-table-column prop="device" label="设备" width="120"></el-table-column>-->
-<!--        </el-table>-->
-<!--      </div>-->
+
+      <div class="bottomArrowsLeft" v-for="(i,k) in 3">
+        <div class="arrow" :style="`top: 72.5%;left: ${13 + 5.2*k}%;`"></div>
+      </div>
 
       <div v-for="i in infoData " class="info"
            :style="`width: ${i.width}%; height: ${i.height}%;top: ${i.top}%;left: ${i.left}%;transform: rotate(${i.rotate}deg);
@@ -217,7 +212,7 @@ export default {
         factoryCode: null
       },
       scrollInterval: null,
-      isRun: [1, 2, 3, 4, 5, 6, 7, 8,9],
+      isRun: [],
       infoData: [
         {
           top: 31,
@@ -443,6 +438,7 @@ export default {
       getDailyReportNew(this.queryParams).then(e => {
           // 假设接口返回的数据在 e.rows 中，且为数组格式
         if (e.rows && Array.isArray(e.rows)) {
+          this.isRun = e.rows.map(row => row.equipmentCode).filter(code => code); // 过滤掉undefined/null值
           // 创建以 equipmentName 为键的映射表
           const rowMap = e.rows.reduce((map, row) => {
             map[row.equipmentName] = row; // 假设 equipmentName 唯一
@@ -977,6 +973,33 @@ export default {
     }
   }
 }
+
+.bottomArrowsLeft {
+  .arrow {
+    position: absolute;
+    width: 0.5vw;
+    height: 2.5vh;
+    overflow: hidden;
+    transform: rotate(270deg);
+
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-image: url("~@/assets/board/箭头 下2.png");
+      animation-name: arrowAn1;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+  }
+}
+
 /* 新增样式 */
 .scroll-title-container {
   top:10%;