add:照明系统接口与逻辑补充

hx-ai-intelligent/src/api/index.ts

@@ -40,7 +40,7 @@ export const dict = async ({
 };
 
 /**
- * 获取所有枚举(无需传参)
+ * 获取所有枚举(参数为数组，可以不传参)
  */
 export const getAllEnum = async ({
   api = `${BASE_URL}/operation/enum/getAllEnum`,

hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less

@@ -3,7 +3,7 @@
   right: 496px;
   width: 500px;
   height: 100%;
-  z-index: 99;
+  z-index: 0;
   top: 0;
   bottom: 0;
   margin: auto;
@@ -44,6 +44,9 @@
         border-radius: 12px;
         border: 2px solid transparent;
         border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
+        .title-img {
+          padding-top: 6px;
+        }
       }
       .imgText {
         display: flex;
@@ -68,6 +71,7 @@
             rgba(255, 112, 3, 1) 91.21%,
             rgba(255, 129, 3, 1) 100%
           );
+          cursor: pointer;
         }
       }
       .btn-box {
@@ -97,6 +101,9 @@
             width: 140px;
             height: 35px;
             line-height: 35px;
+            :first-child {
+              color: white;
+            }
             span {
               vertical-align: middle;
             }

hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

@@ -121,6 +121,9 @@
       <div class="control-scene-area" v-show="thisButton2.mode.value == 3">
         <div class="control-scene-tab"></div>
         <span class="control-scene-text"> 控制场景 </span>
+        <div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
+          >多选模式下会修改当前选中的所有回路</div
+        >
       </div>
       <!-- 控制场景按钮部分 -->
       <div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3">
@@ -135,15 +138,20 @@
     </div>
     <!-- 底部按钮区 -->
     <div class="bottom">
-      <a-popconfirm
+      <a-badge :offset="[-10, 2]" :count="changeList.length">
-        title="刷新将会取消已作出的修改"
+        <a-popconfirm
-        ok-text="确定"
+          title="刷新将会取消已作出的修改"
-        cancel-text="取消"
+          ok-text="确定"
-        @confirm="changeConfirm"
+          cancel-text="取消"
-        @cancel="changeCancel">
+          @confirm="refresh"
-        <button class="flushed">刷新</button>
+          @cancel="changeCancel">
-      </a-popconfirm>
+          <button class="flushed">刷新</button>
-      <button class="execute" @click="showModal">执行</button>
+        </a-popconfirm>
+      </a-badge>
+
+      <a-spin :spinning="buttonLoading">
+        <button class="execute" @click="showModal">执行</button>
+      </a-spin>
     </div>
 
     <!-- 点击执行时的弹出框 -->
@@ -153,7 +161,7 @@
           <div class="div-operation"></div>
           <span class="text-operation">变更内容 </span>
         </div>
-        <div class="j-box" v-for="item in cxList" :key="item.id">
+        <div class="j-box" v-for="(item, index) in diffList" :key="item.id">
           <div class="journal" style="margin-top: 20px">
             <div class="imgText">
               <div class="zjzm">
@@ -161,10 +169,17 @@
                 <span
                   class="title-text"
                   style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                  >{{ item.name }}</span
+                  >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
                 >
               </div>
-              <button class="cxbtn" @click="delBtn(item.id)">撤销</button>
+              <a-popconfirm
+                title="此操作将会撤销修改"
+                ok-text="确定"
+                cancel-text="取消"
+                @confirm="delBtn(item)"
+                @cancel="changeCancel">
+                <button class="cxbtn">撤销</button>
+              </a-popconfirm>
             </div>
             <div class="btn-box">
               <div class="btn-item">
@@ -178,25 +193,38 @@
               <div class="btn-item">
                 <div class="left"> 亮度 </div>
                 <div class="right">
-                  <span>100lux</span>
+                  <!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
+                  <span>{{
+                    item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
+                  }}</span>
                   <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>30lux</span>
+                  <span>{{
+                    item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
+                  }}</span>
                 </div>
               </div>
               <div class="btn-item">
                 <div class="left"> 控制场景 </div>
                 <div class="right">
-                  <span>手动</span>
+                  <span>{{
+                    item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
+                  }}</span>
                   <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>自动</span>
+                  <span>{{
+                    item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
+                  }}</span>
                 </div>
               </div>
               <div class="btn-item">
                 <div class="left"> 色温 </div>
                 <div class="right">
-                  <span>4000k</span>
+                  <span>{{
+                    item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
+                  }}</span>
                   <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>3800k</span>
+                  <span>
+                    {{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
+                  </span>
                 </div>
               </div>
             </div>
@@ -206,7 +234,7 @@
       <div style="width: 100%; height: 60px"></div>
       <div class="button-box">
         <button class="cancel" @click="executeVisible = false">取消</button>
-        <button class="execute">执行</button>
+        <button class="execute" @click="submitChangeList">执行</button>
       </div>
     </div>
   </a-spin>
@@ -239,7 +267,7 @@
       controlScene.value = data.IlluminationScene;
     });
   };
-  // 以 1-1 作为默认线路
+  // 以 1-1 作为默认回路
   const setArea = () => {
     const data = props.treeData[0];
     buttons2.value = data.childList;
@@ -272,14 +300,14 @@
 
   // 按钮区展开与收起状态
   const showAllButtonsArea = ref(false);
-  // 被选中的分区  默认为1
+  // 被选中的分区  默认为1 用于选中样式渲染
   const selectedButton = ref<string | undefined>('1');
 
   // 分区切换
   const changeArea = (button: any) => {
     // 当前选中按钮
     selectedButton.value = button.id;
-    // 设置当前选中的线路
+    // 设置当前选中的回路
     buttons2.value = button.childList;
     // 重置按钮状态
     emit('reset');
@@ -287,7 +315,7 @@
     button.selected = true;
     // 改变俯视图样式
     emit('changeArea', button.id);
-    // 当前选中线路 - 置空
+    // 当前选中回路 - 置空
     resetMode();
     // 最近交互过的按钮 - 置空
     handleButton.value = '';
@@ -299,7 +327,6 @@
 
   // 最近交互过的按钮id，用于禁用和启用
   const handleButton = ref('');
-
   // 面板启用/禁用状态
   const isPlanEnabled2 = ref(true);
   // 面板启用/禁用切换事件
@@ -309,7 +336,7 @@
       return message.info('请选择照明回路');
     }
     // 获取最近交互过的按钮
-    const btn: any = buttons2.value.find((button) => button.id === handleButton.value);
+    const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
     let panel = +!btn.ctrlStatus;
     isLoading.value = true;
     http
@@ -334,11 +361,12 @@
   // 多选与单选切换事件
   const selectAll = () => {
     selectAllCheckbox.value = false;
-    buttons2.value.forEach((button) => {
+    // 切换时清空当前所有选项
+    buttons2.value.forEach((button: any) => {
       button.selected = false;
     });
     singleSelection.value = !singleSelection.value;
-    // 当前选中线路 - 置空
+    // 当前选中回路 - 置空
     resetMode();
     // 改变俯视图样式
     emit('changeArea', [selectedButton.value]);
@@ -351,8 +379,8 @@
     let arr = [selectedButton.value];
     // 全选
     if (selectAllCheckbox.value) {
-      buttons2.value.forEach((item, index) => {
+      buttons2.value.forEach((item: any, index: number) => {
-        // 全选时，默认展示第一条线路的模式-场景按钮
+        // 全选时，默认展示第一条回路的模式-场景按钮
         if (index == 0) {
           thisButton2.value = item;
         }
@@ -361,7 +389,7 @@
       });
       // 全不选
     } else {
-      buttons2.value.forEach((item) => {
+      buttons2.value.forEach((item: any) => {
         item.selected = false;
       });
       // 全不选时，隐藏模式-场景按钮
@@ -370,9 +398,11 @@
     emit('changeArea', arr);
   };
 
-  // 储存当前选中的线路
+  // 储存当前选中的回路
   const thisButton2 = ref({
     code: '',
+    name: '',
+    pcode: '',
     mode: {
       value: -1,
     },
@@ -390,13 +420,12 @@
     } else {
       isPlanEnabled2.value = false;
     }
-
     // 选择时反控俯视图
     let level1 = selectedButton.value;
     let level2 = button.id;
     // 单选模式，需将所有其他按钮设为false
     if (singleSelection.value) {
-      buttons2.value.forEach((item) => {
+      buttons2.value.forEach((item: any) => {
         item.selected = false;
       });
       button.selected = !button.selected;
@@ -405,7 +434,7 @@
       // 多选模式传值
       button.selected = !button.selected;
       const arr = [level1];
-      buttons2.value.forEach((item) => {
+      buttons2.value.forEach((item: any) => {
         if (item.selected) {
           arr.push(item.id);
         }
@@ -433,7 +462,7 @@
   // 控制模式业务 ====================================================================
 
   // 控制模式 - 按钮切换
-  const selectButton3 = (button3) => {
+  const selectButton3 = (button3: any) => {
     let checked = thisButton2.value.mode;
     console.log(button3.value, '---', checked.value);
     // 如果点击了相同的按钮，则未作出修改
@@ -449,11 +478,9 @@
   const controlMode = ref([]);
   // 场景枚举
   const controlScene = ref([]);
-  // 控制场景 - 当前选择按钮
-  const selectedButton4 = ref(null);
   // 控制场景 - 按钮切换
   const selectButton4 = (button4) => {
-    // 当前选中的线路数据
+    // 当前选中的回路数据
     const data = thisButton2.value;
     // 修改前的数据
     let before = data.scene.value;
@@ -461,12 +488,12 @@
     let after = button4.value;
     // 如果没有产生实质性的修改（修改前后相同，则跳出）
     if (before === after) {
-      return;
+      return message.info('未产生实际修改');
       // 产生了修改
     } else {
       thisButton2.value.scene.value = after;
       // 查询之前是否修改过
-      const result = changeList.value.find((item, index) => {
+      const result = changeList.value.find((item: any, index: number) => {
         item.index = index;
         return item.deviceGroup == data.code;
       });
@@ -484,7 +511,7 @@
         // 如果未产生过修改
       } else {
         changeList.value.push({
-          // 线路
+          // 回路
           deviceGroup: data.code,
           deviceGroupName: data.name,
           // 分区
@@ -498,112 +525,100 @@
       }
       console.log(changeList.value, 'changeList');
     }
-
     thisButton2.value.scene.value = after;
-    console.log(thisButton2, '222222');
-    console.log(button4, '44444');
   };
 
-  // 内侧弹窗 ========================================================================
+  // 底部按钮区 ======================================================================
-
-  // 需要修改的内容
-  const changeList: any = ref([]);
-  // 需要向后端提交的修改内容
-  const submitList = ref([]);
-  const cxList = ref([
-    {
-      id: '1',
-      name: '站厅照明  1区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-    {
-      id: '2',
-      name: '站厅照明  2区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-    {
-      id: '3',
-      name: '站厅照明  3区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-  ]);
-  //撤销
-  const delBtn = () => {
-    cxList.value.pop();
-    console.log(cxList.value.length);
-
-    if (cxList.value.length === 0) {
-      executeVisible.value = false;
-    }
-  };
-
-  // 其他业务 ========================================================================
 
   const isLoading = ref(false);
+  // 执行按钮loading
+  const buttonLoading = ref(false);
   // 刷新
   const refresh = () => {
     // 关闭执行弹窗
     executeVisible.value = false;
     // 设置当前选中的序列
     selectedButton.value = '1';
+    // 重置选中样式 和 按钮选中状态
     emit('changeArea', ['1']);
     emit('reset');
+    // 默认选择第一个楼层
     let data = props.treeData[0];
+    // 清空保存的修改
+    changeList.value = [];
     // 默认选中
     data.selected = true;
+    // 默认选中 1-1 分区 回路
     buttons2.value = data.childList;
-    selectedButton4.value = null;
     resetMode();
   };
-  // 执行确认
+  // 右下角的执行事件
-  const executeVisible = ref<boolean>(false);
   const showModal = () => {
+    if (!changeList.value.length) {
+      return message.info('未产生任何修改');
+    }
+    buttonLoading.value = true;
     http
       .post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' })
       .then((res) => {
         if (res.msg === 'success') {
-          isLoading.value = true;
+          diffList.value = res.data;
-          console.log(res);
+          executeVisible.value = true;
         } else {
-          isLoading.value = false;
+          message.warning('获取修改内容失败');
         }
+        buttonLoading.value = false;
+      })
+      .catch(() => {
+        buttonLoading.value = false;
       });
-    executeVisible.value = true;
   };
+  // 通用取消
+  const changeCancel = () => {};
+
+  // 内侧弹窗 ========================================================================
 
-  // 确定
+  // 内侧弹窗显隐
-  const changeConfirm = () => {
+  const executeVisible = ref<boolean>(false);
-    refresh();
+  // 修改模式 需要向后端提交的内容
+  const changeList: any = ref([]);
+  // 展示修改前后差异的内容
+  const diffList = ref([]);
+  //撤销
+  const delBtn = (obj: any) => {
+    console.log(obj, '当前选择的修改内容');
+    // 将treeData对应回路的数据改回，数据以后端为准
+    const area = props.treeData.find((item: any) => {
+      return item.code == obj.region;
+    });
+    const line = area.childList.find((item: any) => {
+      return item.code == obj.deviceGroup;
+    });
+    line.scene.value = obj.stateBefore.scene.value;
+    // 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
+    changeList.value = changeList.value.filter((item: any) => {
+      return item.deviceGroup !== obj.deviceGroup;
+    });
+    diffList.value = diffList.value.filter((item: any) => {
+      return item.deviceGroup !== obj.deviceGroup;
+    });
+    console.log(changeList, 'changeList');
+    console.log(diffList, 'diffList');
+    // 如果移除后不再有修改内容，则隐藏弹出框
+    if (changeList.value.length == 0) {
+      executeVisible.value = false;
+    }
   };
+  const submitChangeList = () => {};
 
-  // 取消
+  // 其他业务 ========================================================================
-  const changeCancel = () => {};
 
-  // 将当前选择的线路置空
+  // 将当前选择的回路置空
   const resetMode = () => {
     thisButton2.value = {
       code: '',
+      name: '',
+      pcode: '',
       mode: {
         value: -1,
       },
@@ -613,11 +628,11 @@
     };
   };
 
-  // 暴露
+  // 向外暴露方法
   defineExpose({
     // 分区切换
     changeArea,
-    // 线路切换
+    // 回路切换
     changeLine,
   });
 </script>