add:照明系统修改

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

@@ -50,6 +50,7 @@
             <a-tabs v-model:activeKey="activeKey">
                 <a-tab-pane key="1" tab="控制面板">
                     <tabs1 
+                    ref="tabs1Ref"
                     @changeArea="changeArea" 
                     @reset="reset" 
                     :treeData="treeData" 
@@ -89,33 +90,13 @@ import {
 
 onMounted(() => {
     // 获得分区与线路的结构
-    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
-        const data = res.data
-        floorData.value = data
-        /** 只在前端使用的变量
-         * @param id 用于判断样式和层级的前端属性
-         * @param selected 用于表示是否选中的前端属性
-         */
-        data.forEach(floor => {
-            floor.childList.forEach((item, index) => {
-                if (index == 0) {
-                    item.selected = true
-                } else {
-                    item.selected = false
-                }
-                item.id = String(index + 1)
-                item.childList.forEach((v, i) => {
-                    v.selected = false
-                    v.id = (index + 1) + '-' + (i + 1)
-                })
-            })
-        })
-        treeData.value = data[0].childList
-    })
+    getAllArea()
 })
 
 // 分层业务 =====================================================
 
+// 所有楼层的数据
+const floorData = ref([])
 // 左上角分层切换
 const changeFloor = (area: any) => {
     // 重置数据
@@ -130,8 +111,6 @@ const changeFloor = (area: any) => {
 
 // 分区业务 =====================================================
 
-// 所有楼层的数据
-const floorData = ref([])
 // 分区结构树
 const treeData = ref([])
 // 当前选中的分区id
@@ -203,6 +182,7 @@ const changeArea = (result: any) => {
 }
 // 由当前组件控制的分区切换
 const changeThisArea = (result: any) => {
+    tabs1Ref.value.changeCancel()
     console.log(result, 'changeThisArea')
     // 修改前，将所有选项置空
     reset()
@@ -224,9 +204,9 @@ const changeThisArea = (result: any) => {
 }
 // 重置分区树所有当前选项
 const reset = () => {
-    treeData.value.forEach(item => {
+    treeData.value.forEach((item: any) => {
         item.selected = false
-        item.childList.forEach(i => {
+        item.childList.forEach((i: any) => {
             i.selected = false
         })
     })
@@ -240,6 +220,32 @@ const computedClass = (string: string) => {
     }
 }
 
+const getAllArea = () => {
+    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
+        const data = res.data
+        floorData.value = data
+        /** 只在前端使用的变量
+         * @param id 用于判断样式和层级的前端属性
+         * @param selected 用于表示是否选中的前端属性
+         */
+        data.forEach((floor: any) => {
+            floor.childList.forEach((item: any, index: number) => {
+                if (index == 0) {
+                    item.selected = true
+                } else {
+                    item.selected = false
+                }
+                item.id = String(index + 1)
+                item.childList.forEach((v: any, i: number) => {
+                    v.selected = false
+                    v.id = (index + 1) + '-' + (i + 1)
+                })
+            })
+        })
+        treeData.value = data[0].childList
+    })
+}
+
 // 抽屉业务 =====================================================
 
 // 抽屉 - 当前选择的tab
@@ -250,6 +256,7 @@ let visible = ref(false);
 const toggleDrawer = () => {
     visible.value = !visible.value;
 };
+const tabs1Ref = ref()
 
 </script>
 <style lang="less" scoped>

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

@@ -75,60 +75,34 @@
     </div>
     <!-- 控制模式部分 -->
     <div>
-      <div class="control-area" v-show="showControlMode">
+      <div class="control-area" v-show="thisButton2.code">
         <div class="control-tab"></div>
         <span class="control-text"> 控制模式 </span>
       </div>
       <!-- 控制模式按钮部分 -->
-      <div class="control-mode-btn-area" v-show="showControlMode">
+      <div class="control-mode-btn-area" v-show="thisButton2.code">
         <button v-for="(button3, index) in controlMode" :key="index"
         class="btn"
-        :class="{ selected: thisButton.mode.value == button3.value }" @click="selectButton3(button3)">
+        :disabled="button3.value!= 3"
+        :class="{ selected: thisButton2.mode.value == button3.value }" @click="selectButton3(button3)">
           {{ button3.label }}
         </button>
       </div>
     </div>
     <!-- 控制场景部分 -->
     <div>
-      <div class="control-scene-area" v-show="showControlScene">
+      <div class="control-scene-area" v-show="thisButton2.mode.value == '3'">
         <div class="control-scene-tab"></div>
         <span class="control-scene-text"> 控制场景 </span>
       </div>
       <!-- 控制场景按钮部分 -->
-      <div class="control-scene-btn-area" v-show="showControlScene">
-        <button v-for="(button4, index) in controlSceneButtons" :key="index"
-          :class="{ btn: true, selected: button4.label === selectedButton4 }" @click="selectButton4(button4)">
+      <div class="control-scene-btn-area" v-show="thisButton2.mode.value == '3'">
+        <button v-for="(button4, index) in controlScene" :key="index"
+          :class="{ btn: true, selected: thisButton2.mode.value == button4.value }" @click="selectButton4(button4)">
           {{ button4.label }}
         </button>
       </div>
     </div>
-    <!-- 灯具参数部分（表格） -->
-    <div>
-      <div class="light-parameters-area" v-if="selectedButton4">
-        <div class="light-parameters-tab"></div>
-        <span class="light-parameters-text"> 灯具参数 </span>
-      </div>
-      <div class="light-parameters-textarea" v-if="selectedButton4">
-        <table class="custom-table table1">
-          <thead>
-            <tr :style="{ background: 'rgba(35,45,69)' }">
-              <th>开启数量</th>
-              <th>亮度(lux)</th>
-              <th>色温</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(row, index) in lightSource" :key="index" @click="handleRowClick(row.num)"
-              :style="{ height: '50px' }">
-              <td>{{ row.num }}</td>
-              <td>{{ row.light }}</td>
-              <td>{{ row.temperature }}</td>
-            </tr>
-          </tbody>
-        </table>
-        <div style="margin-bottom: 60px;"></div>
-      </div>
-    </div>
     <!-- 底部按钮区 -->
     <div class="bottom">
         <a-popconfirm
@@ -228,13 +202,22 @@ import { getAllEnum } from '/@/api/index'
 
 onMounted(() => {
   // 设置分区
-  setArea()
+  setArea(0)
   // 获得枚举
   getEnum(['IlluminationMode', 'IlluminationScene'])
 })
+
+// 获得枚举，初始化
+const getEnum = (arr: any) => {
+  getAllEnum({ params: arr }).then(res => {
+      const data = res.data
+      controlMode.value = data.IlluminationMode
+      controlScene.value = data.IlluminationScene
+  })
+}
 // 父组件点击俯视图切换分区时，子组件切换线路
-const setArea = () => {
-  const data = props.treeData.find(item => {
+const setArea = (isHandle: number) => {
+  const data = props.treeData.find((item: any) => {
     return item.id == props.nowArea
   })
   // 默认选中第一个分区
@@ -243,6 +226,22 @@ const setArea = () => {
   selectedButton.value = props.nowArea
   // 设置当前显示的回路
   buttons2.value = data.childList
+
+  // 如果非初始化触发（点击俯视图）
+  if (isHandle) {
+    // 如果选中了线路则children中的某个selected为true
+    const button2 = data.childList.find((item: any) => {
+      return item.selected == true
+    })
+    // 如果选中了线路
+    if (button2) {
+      thisButton2.value = button2;
+      console.log(button2,'2222222222')
+
+    } else {
+      resetMode()
+    }
+  }
 }
 
 // 与父组件的交互  ===================================================================
@@ -266,7 +265,7 @@ const props = defineProps({
 const emit = defineEmits(['changeArea','reset']);
 // 监听父组件选中的分区，并实时修改分区
 watch(() => props.nowArea, () => {
-  setArea()
+  setArea(1)
   // 分区产生了切换， 线路的选中状态置空
   handleButton.value = ''
 })
@@ -283,16 +282,16 @@ const togglePlan = () => {
 // 按钮区展开与收起状态
 const showAllButtonsArea = ref(false);
 // 被选中的分区  默认为1
-const selectedButton = ref('1');
+const selectedButton = ref<string | undefined>('1');
 // 区域切换（按钮点击-单选）事件
 const selectButton = (button: any) => {
-  console.log(button,'button')
   // 当前选中按钮
   selectedButton.value = button.id;
   initMenu(1)
   button.selected = true
   buttons2.value = button.childList
   emit('changeArea', button.id);
+  resetMode()
   handleButton.value = ''
 };
 // 默认最多展示8个按钮
@@ -312,11 +311,12 @@ const togglePlan2 = () => {
     return message.info('请选择照明回路');
   }
   // 获取最近交互过的按钮
-  const btn = buttons2.value.find((button) => button.id === handleButton.value)
+  const btn: any = buttons2.value.find((button) => button.id === handleButton.value)
   let panel = +(!btn.ctrlStatus)
   isLoading.value = true
   http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => {
     if (res.msg === 'success') {
+      // 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
       isPlanEnabled2.value = !isPlanEnabled2.value;
       btn.ctrlStatus = panel
       isLoading.value = false
@@ -335,8 +335,7 @@ const selectAll = () => {
     button.selected = false;
   });
   singleSelection.value = !singleSelection.value;
-  // 线路按钮被重置，
-  showControlMode.value = false
+  resetMode()
   emit('changeArea', [selectedButton.value])
 };
 
@@ -351,12 +350,11 @@ const toggleAllSelection = () => {
       item.selected = true;
       arr.push(item.id)
     });
-    // 全不选
+  // 全不选
   } else {
     buttons2.value.forEach((item) => {
       item.selected = false;
     });
-    showControlMode.value = false
   }
   emit('changeArea', arr)
 };
@@ -396,23 +394,12 @@ const toggleSelection = (button: any) => {
   // 用于展示控制模式
   if (button.selected) {
     // 发生了选中事件
-    showControlMode.value = true
-    thisButton.value = button
-    if (button.type == 3) {
-      showControlScene.value = true
-    } else {
-      showControlScene.value = false
-    }
+    thisButton2.value = button
   } else {
     // 未发生选中 或 多选被取消
-    showControlMode.value = false
-    thisButton.value = {
-      mode: {
-        value: '0'
-      }
-    }
+    resetMode()
   }
-  console.log(thisButton,'button')
+  console.log(thisButton2,'button')
 };
 
 // 照明回路所有按钮
@@ -424,42 +411,34 @@ const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
 
 // 控制模式业务 ====================================================================
 
-// 决定该区域是否显示
-const showControlMode = ref(false);
-const thisButton = ref({
+const thisButton2 = ref({
+  code: '',
   mode: {
     value: '0'
   }
 })
 // 控制模式 - 按钮切换
 const selectButton3 = (button3) => {
-  let checked = thisButton.value.mode.value
-  console.log(button3.value,'---', checked)
+  let checked = thisButton2.value.mode
+  console.log(button3.value,'---', checked.value)
   // 如果点击了相同的按钮，未作出修改
-  if (checked === button3.value) {
+  if (checked.value === button3.value) {
     return
   }
-  checked = button3.value
-  // 如果当前选项是手动模式
-  showControlScene.value = button3.label === '手动模式';
+  checked.value = button3.value
   selectedButton4.value = null; // 清空选中的控制场景按钮
 };
 
+const diff = () => {
+  console.log(thisButton2)
+} 
+
 // 控制场景业务 =====================================================================
 
 // 控制模式枚举
 const controlMode = ref([])
 // 场景枚举
 const controlScene = ref([])
-// 决定该区域是否显示
-const showControlScene = ref(false);
-// 控制场景 - 所有按钮
-const controlSceneButtons = ref([
-  { label: '检修', selected: false },
-  { label: '午休', selected: false },
-  { label: '疏散', selected: false },
-  { label: '客流高峰', selected: false },
-]);
 // 控制场景 - 当前选择按钮
 const selectedButton4 = ref(null);
 // 控制场景 - 按钮切换
@@ -467,19 +446,6 @@ const selectButton4 = (button4) => {
   selectedButton4.value = button4.label;
 };
 
-// 灯具参数表格 =====================================================================
-
-// 灯具参数 - 表格数据
-const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
-
-let trIndex = ref('-1');
-const handleRowClick = (index: any) => {
-  trIndex.value = index;
-  if (index === trIndex.value) {
-    console.log('tri');
-  }
-};
-
 // 内侧弹窗 ========================================================================
 
 // 需要向后端提交的修改内容
@@ -541,15 +507,9 @@ const initMenu = (tier: number) => {
   // 1 = 照明区域 - 切换时，重置以下所有菜单
   if (tier == 1) {
     emit('reset')
-    // 控制模式 隐藏
-    showControlMode.value = false;
-    // 控制场景 隐藏
-    showControlScene.value = false;
     // 灯具参数 隐藏
     selectedButton4.value = null;
   } else if (tier == 2) {
-    // 控制场景 隐藏
-    showControlScene.value = false;
     // 灯具参数 隐藏
     selectedButton4.value = null;
   }
@@ -566,10 +526,8 @@ const refresh = () => {
   // 默认选中
   data.selected = true
   buttons2.value = data.childList
-
-  showControlMode.value = false;
-  showControlScene.value = false;
   selectedButton4.value = null;
+  resetMode()
 };
 // 执行确认
 const executeVisible = ref<boolean>(false);
@@ -584,18 +542,22 @@ const changeConfirm = () => {
 
 // 取消
 const changeCancel = () => {
-
 }
-// 获得枚举，初始化
-const getEnum = (arr: any) => {
-    getAllEnum({ params: arr }).then(res => {
-        const data = res.data
-        controlMode.value = data.IlluminationMode
-        controlScene.value = data.IlluminationScene
-    })
-    console.log(controlMode, controlScene, '001')
+
+// 将当前选择的线路置空
+const resetMode = () => {
+  thisButton2.value = {
+    code: '',
+    mode: {
+      value: '0'
+    }
+  }
 } 
 
+defineExpose({
+  changeCancel
+});
+
 </script>
 <style lang="less" scoped>
 @import "./dialogStyle.less";

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

@@ -64,7 +64,7 @@
         :data-source="transferData"
         show-search
         :filter-option="filterOption"
-        :render="(item) => item.title"
+        :render="(item: any) => item.title"
         @change="handleChange"
         :style="{ color: 'rgba(255,255,255,1)' }"
         @search="handleSearch"
@@ -106,14 +106,14 @@ const getTable = () => {
 }
 // 删除表格中的计划
 const deletePlan = (id: String) => {
-  http.delete(lightingManage.deletePlan, [id]).then(res => {
+  http.delete(lightingManage.deletePlan, [id]).then(() => {
     message.success('操作成功')
     getTable()
   })
 }
 // 重启表格中的计划
 const restartPlan = (id: String) => {
-  http.post(lightingManage.restartPlan, { planId: id }).then(res => {
+  http.post(lightingManage.restartPlan, { planId: id }).then(() => {
     message.success('操作成功')
     getTable()
   })
@@ -128,7 +128,6 @@ const addModal = () => {
   addVisible.value = true;
 };
 
-
 // 穿梭框部分 =======================================================
 
 // 穿梭框数据
@@ -137,7 +136,7 @@ const transferData = ref([]) as any;
 const getLeftPlan = () => {
   http.get(lightingManage.getLeftPlan, {}).then(res => {
     let arr = []
-    res.data.forEach(item => {
+    res.data.forEach((item: any) => {
       arr.push({
         key: item.id,
         title: item.planName
@@ -160,7 +159,7 @@ const sendPlan = () => {
   if (targetKeys.value.length < 1) {
     return message.info('没有选择任何计划');
   }
-  http.post(lightingManage.submitLeftPlan, targetKeys.value).then(res => {
+  http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
     message.success('添加成功')
     // 如果发送成功，则刷新表格
     getTable()

hx-ai-intelligent/src/view/equipmentControl/lightingManage/treeData.ts

@@ -1,88 +0,0 @@
-import { ref } from 'vue';
-export const treeData = ref([
-  {
-    label: '站厅',
-    id: '1',
-    // 前端遍历后添加，属前端属性
-    selected: false,
-    children: [{
-      label: '站厅1区',
-      id: '1-1',
-      // 前端属性
-      selected: false,
-      // 后端属性（表示禁用了一个设备）
-      stop: false,
-      // 当前的控制模式
-      type: 3
-    },{
-      label: '站厅2区',
-      id: '1-2',
-      selected: false,
-      stop: false,
-      type: 1
-    }]
-  },
-  {
-    label: '站台',
-    id: '2',
-    selected: false,
-    children: [{
-      label: '站台1区',
-      id: '2-1',
-      selected: false,
-      stop: false,
-      type: 1
-    },{
-      label: '站台2区',
-      id: '2-2',
-      selected: false,
-      stop: false,
-      type: 2
-    },{
-      label: '站台3区',
-      id: '2-3',
-      selected: false,
-      stop: false,
-      type: 3
-    },{
-      label: '站台4区',
-      id: '2-4',
-      selected: false,
-      stop: false,
-      type: 1
-    }]
-  },{
-    label: '办公室',
-    id: '3',
-    selected: false,
-    children: [{
-      label: '办公室1区',
-      id: '3-1',
-      selected: false,
-      stop: false,
-      type: 2
-    }]
-  },{
-    label: '楼道',
-    id: '4',
-    selected: false,
-    children: [{
-      label: '楼道1区',
-      id: '4-1',
-      selected: false,
-      stop: false,
-      type: 3
-    }]
-  },
-]);
-
-export const controlType = ref([{
-  name: '托管',
-  type: 1,
-},{
-  name: 'AI',
-  type: 2,
-},{
-  name: '手动',
-  type: 3,
-}])