From 5667c74ea1841ec862b22887fa82425374963031 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E7=90=B3?= <1911390090@qq.com>
Date: Fri, 8 Nov 2024 10:04:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=AD=E9=9F=B3=E5=B9=BF=E6=92=AD=EF=BC=8C?=
 =?UTF-8?q?=E6=83=85=E6=8A=A5=E6=9D=BF=E3=80=82=E6=96=B0=E5=A2=9E=E5=85=A8?=
 =?UTF-8?q?=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/service/board/index.vue             | 35 ++++++++-
 .../pages/service/broadcast/index.vue         | 76 +++++++++++++------
 2 files changed, 85 insertions(+), 26 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
index 49c3d9b7..ef075a2c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -63,6 +63,15 @@
               <el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key">
                 <div v-if="item.list.length > 0">
                   <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
+
+                    <!-- 全选按钮 -->
+                    <el-checkbox
+                      :indeterminate="isIndeterminate"
+                      v-model="checkAll"
+                      @change="handleCheckAllChange"
+                    >
+                      全选
+                    </el-checkbox>
                     <el-checkbox v-for="(itm, index) in item.list" :label="itm.iotDeviceId" :key="index"
                       :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)">
                       <el-tooltip content="设备未接入" placement="top"
@@ -174,7 +183,7 @@
                 {{ item.dictLabel }}
                 <span :class="item.fold?'el-icon-arrow-down':'el-icon-arrow-up'"></span>
               </div>
-              
+
               <div v-if="item.fold" v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
                 <!-- 模板内容 -->
                 <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
@@ -197,7 +206,7 @@
                   </el-tooltip>
                 </div>
               </div>
-            
+
             </div>
           </draggable>
           </vuescroll>
@@ -331,6 +340,7 @@ export default {
         this.editDialog.tpl = null;
       }
     },
+
     // boardSizeDic: function (newVal, oldVal) {
     //   console.log(newVal, 'selectedSize')
     //   if (newVal.length == 0) {
@@ -398,6 +408,25 @@ export default {
     },
   },
   methods: {
+    handleCheckAllChange(val) {
+      this.checkedDeviceIds = val ? this.getAllDeviceIds() : [];
+
+      this.isIndeterminate = false;
+    },
+    getAllDeviceIds() {
+      // 使用 Object.values 遍历对象
+      return Object.values(this.boardSizeDic).reduce((acc, item) => {
+        acc.push(...item.list.filter(itm => itm.iotDeviceId && !itm.iotDeviceId.includes('null') && !(itm.deviceState === 0 || itm.deviceState === null)).map(itm => itm.iotDeviceId));
+        return acc;
+      }, []);
+    },
+    updateCheckAllStatus() {
+      const allDeviceIds = this.getAllDeviceIds();
+      const checkedCount = this.checkedDeviceIds.length;
+      this.checkAll = checkedCount === allDeviceIds.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < allDeviceIds.length;
+    },
+
     ____boardTxtStyle() {
       return {
         color: "#F00",
@@ -1304,7 +1333,7 @@ export default {
 // }
 
 ::v-deep .sortable-chosen:not(th) {
-  
+
   //background-color: rgba(5, 175, 227, 0.1) !important;
 }
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue
index aece3769..37dbe875 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue
@@ -60,7 +60,16 @@
         <div style="flex:1; height: 0; padding:0 10px 10px">
           <vuescroll :ops="scrollOptions">
             <template v-if="deviceList.length> 0">
+
               <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
+                <!-- 全选按钮 -->
+                <el-checkbox
+                  :indeterminate="isIndeterminate"
+                  v-model="checkAll"
+                  @change="handleCheckAllChange"
+                >
+                  全选
+                </el-checkbox>
                 <el-checkbox v-for="(itm, index) in deviceList" :label="itm.iotDeviceId" :key="index"
                   :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null">
                   <el-tooltip content="设备未接入" placement="top"
@@ -261,6 +270,18 @@ export default {
         this.editDialog.tpl = null;
       }
     },
+    checkedDeviceIds: {
+      handler(val) {
+        const allDeviceIds = this.deviceList
+          .filter(itm => !(!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null))
+          .map(itm => itm.iotDeviceId);
+
+        const checkedCount = val.length;
+        this.checkAll = checkedCount === allDeviceIds.length;
+        this.isIndeterminate = checkedCount > 0 && checkedCount < allDeviceIds.length;
+      },
+      deep: true
+    },
     // boardSizeDic: function (newVal, oldVal) {
     //   console.log(newVal, 'selectedSize')
     //   if (newVal.length == 0) {
@@ -290,6 +311,14 @@ export default {
     ...mapState(["menu"]),
   },
   methods: {
+    handleCheckAllChange(val) {
+      const allDeviceIds = this.deviceList
+        .filter(itm => !(!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null))
+        .map(itm => itm.iotDeviceId);
+
+      this.checkedDeviceIds = val ? allDeviceIds : [];
+      this.isIndeterminate = false;
+    },
     ____boardTxtStyle() {
       return {
         color: "#F00",
@@ -372,7 +401,7 @@ export default {
             // }
           });
         });
-      
+
     },
     ____forkDeviceInfo(deviceFrom) {
       //从目标设备取得信息
@@ -530,7 +559,7 @@ export default {
         type: "warning",
       })
         .then(() => {
-          
+
           const param = {
           "devices": deviceList,
           "functions": [
@@ -614,7 +643,7 @@ export default {
           //           message: "发布失败，"+cbMsg[res.retCode],
           //         });
           //       }
-                
+
           //       // !isMultiControl && this.____getDeviceInfo();
           //     })
           //     .catch((err) => {})
@@ -635,6 +664,7 @@ export default {
 
     // 多选
     ____onSelectDevices(arr) {
+      this.updateCheckAllStatus();
 
       this.selectedDevices = [];
       if (this.checkedDeviceIds.length == 0) {
@@ -905,26 +935,26 @@ export default {
               transition: all linear 0.3s;
               opacity: 1;
               transform: translateX(0);
-      
+
               &.hide {
                 transform: translateX(20px);
                 opacity: 0;
                 transition: all linear 0.3s;
               }
-      
+
               .tplItem {
                 margin-right: 14px;
                 display: flex;
                 align-items: stretch;
                 padding-bottom: 10px;
-      
+
                 .boardPreview {
                   border: 2px solid #004c64;
                   // width: 560px;
                   // height:80px;
                   flex: 1;
                 }
-      
+
                 .infoBtnBox {
                   width: 160px;
                   height: 50px;
@@ -936,26 +966,26 @@ export default {
                   display: flex;
                   justify-content: space-around;
                   align-items: center;
-      
+
                   .btn {
                     background-repeat: no-repeat;
                     background-size: 100% 100%;
                     width: 40px;
                     height: 40px;
-      
+
                     &.btnApply {
                       background-image: url(~@/assets/jihe/images/button/toLeft.svg);
                     }
-      
+
                     &.btnEdit {
                       background-image: url(~@/assets/jihe/images/button/edit.svg);
                     }
-      
+
                     &.btnDelete {
                       background-image: url(~@/assets/jihe/images/button/delete.svg);
                     }
                   }
-      
+
                   i {
                     font-size: 24px;
                     color: #666;
@@ -964,11 +994,11 @@ export default {
                     caret-color: rgba(0, 0, 0, 0);
                     user-select: none;
                   }
-      
+
                   i:hover {
                     color: #05afe3;
                   }
-      
+
                   .disabledClass {
                     pointer-events: none;
                     cursor: auto !important;
@@ -976,31 +1006,31 @@ export default {
                   }
                 }
               }
-      
+
               .tplItem.ghost_class {
-      
+
                 .boardPreview,
                 .infoBtnBox {
                   border-color: #F00;
                 }
               }
-      
+
               .tplItem.chosen_class {
-      
+
                 .boardPreview,
                 .infoBtnBox {
                   border-color: #0A0;
                 }
               }
-      
+
               .tplItem.drag_class {
-      
+
                 .boardPreview,
                 .infoBtnBox {
                   border-color: #FF0;
                 }
               }
-      
+
               .el-collapse {
                 max-height: 100% !important;
                 overflow: auto;
@@ -1015,10 +1045,10 @@ export default {
     .tpl_box {
       display: flex;
       flex-direction: column;
-  
+
       .tpl_title {
       }
-  
+
       .tpl_list {
         flex: 1;
         height: 0;