2F监控界面修改

src/views/cs/index.vue

@@ -150,7 +150,8 @@
 <!--      </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); background: #CB4C4C${i.alpha};border-radius: ${i.radius}%;`">
+           :style="`width: ${i.width}%; height: ${i.height}%;top: ${i.top}%;left: ${i.left}%;transform: rotate(${i.rotate}deg);
+            background: ${i.alpha};border-radius: ${i.radius}%; `">
         <div :class="i.isRight?'infoModel':'infoModel'" :style="`transform: rotate(${360 -i.rotate}deg);`">
           <div class="title">{{ i.equipmentName }}</div>
           <div style="color: #fff;
@@ -213,28 +214,6 @@ export default {
         workCenter: null,
         factoryCode: null
       },
-      tableData: [
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-        { time: '08:30', device: '设备A', status: '运行中', output: '1200' },
-        { time: '09:15', device: '设备B', status: '待机', output: '800' },
-
-        // 更多数据...
-      ],
       scrollInterval: null,
       isRun: [1, 2, 3, 4, 5, 6, 7, 8,9],
       infoData: [
@@ -244,7 +223,6 @@ export default {
           rotate: 14,
           width: 2,
           height:40,
-          alpha: '80',
           radius:20,
           isRight: false,
           equipmentName: "包装线11"
@@ -255,7 +233,6 @@ export default {
           rotate: 14,
           width: 2,
           height:40,
-          alpha: '80',
           radius:20,
           isRight: false,
           equipmentName: "包装线10"
@@ -266,7 +243,6 @@ export default {
           rotate: 10,
           width: 2,
           height:40,
-          alpha: '80',
           radius:20,
           isRight: false,
           equipmentName: "包装线09"
@@ -277,7 +253,6 @@ export default {
           rotate: 7,
           width: 2,
           height:40,
-          alpha: '80',
           radius:20,
           isRight: false,
           equipmentName: "包装线08"
@@ -351,47 +326,47 @@ export default {
       outputData: [
         {
           left: 13.6,
-          no:"11"
+          no:"XL11"
         },
         {
           left: 20.3,
-          no:"10"
+          no:"XL10"
         },
         {
           left: 25.3,
-          no:"09"
+          no:"XL09"
         },
         {
           left: 33.3,
-          no:"08"
+          no:"XL08"
         },
         {
           left: 37.7,
-          no:"07"
+          no:"XL07"
         },
         {
           left: 43.9,
-          no:"06"
+          no:"XL06"
         },
         {
           left: 48.5,
-          no:"05"
+          no:"XL05"
         },
         {
           left: 54.5,
-          no:"04"
+          no:"XL04"
         },
         {
           left: 59,
-          no:"03"
+          no:"XL03"
         },
         {
           left: 65,
-          no:"02"
+          no:"XL02"
         },
         {
           left: 69.5,
-          no:"01"
+          no:"XL01"
         },
       ],
       arrowData: [
@@ -512,6 +487,31 @@ export default {
             this.repairOrders = receivedData.map(item => ({
               ...item,
             }))
+            const descList = receivedData.map(item =>
+              `${item.params?.equipmentName || '未知'} ${item.orderDesc || '无故障描述'} 维修人：${item.orderRepairmanName}`
+            );
+            this.scrollText = descList.join('★★★★★★★★'); // 用两个全角空格分隔
+
+          // 提取所有有效的设备名称
+            const activeEquipmentNames = new Set(
+              receivedData
+                .map(item => item.params?.equipmentName)
+                .filter(name => name)
+            );
+
+            // 更新infoData的高亮状态
+            this.infoData.forEach((item, index) => {
+              if (activeEquipmentNames.has(item.equipmentName)) {
+                // 响应式设置alpha
+                this.$set(this.infoData[index], 'alpha', '#CB4C4C80');
+              } else {
+                // 移除alpha属性
+                if (this.infoData[index].hasOwnProperty('alpha')) {
+                  this.$delete(this.infoData[index], 'alpha');
+                }
+              }
+            });
+
           } else {
             console.warn('收到非数组格式数据:', receivedData)
           }
@@ -519,7 +519,7 @@ export default {
           console.error("JSON parsing failed:", error)
           this.$notify.error({ title: '数据错误', message: '接收数据格式异常' })
         }
-      };
+      }.bind(this);;
       this.ws.onclose = function (event) {
         self.text_content = self.text_content + "已经关闭连接!" + "\n";
       };