add:照明系统 抽屉功能tab2分页功能完善

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

@@ -17,4 +17,8 @@ export enum lightingManage {
   getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan',
   // 提交穿梭框被选择的数据
   submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan',
+  // 删除表格中的计划
+  deletePlan = '/carbon-smart/IlluminationPlan/deletePlan',
+  // 重启表格计划
+  restartPlan = '/carbon-smart/IlluminationPlan/enable',
 }

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

@@ -1,6 +1,8 @@
 // 页面容器
 .lighting-box {
     position: relative;
+    width: 100%;
+    height: 100%;
     // background: linear-gradient(#badaff, #8cabeb, #7095de);
     // 照明设备功能总容器
     .lighting-img-box {
@@ -47,19 +49,19 @@
             display: flex;
             gap: 5px;  
             .area1 {
-                width: 70px;
+                width: 65px;
                 background: rgba(0, 251, 91, 0.3);
                 border: 2px solid rgb(0, 251, 91);
                 display: flex;
             }   
             .area2 {
-                width: 200px;
+                width: 100px;
                 background: rgba(255, 165, 0, 0.3);
                 border: 2px solid rgb(255, 165, 0);
                 display: flex;
             } 
             .area3 {
-                width: 120px;
+                width: 220px;
                 background: rgba(255, 0, 0, 0.3);
                 border: 2px solid rgb(255, 0, 0);
                 display: flex;
@@ -71,7 +73,7 @@
                 display: flex;
             } 
             .area5 {
-                flex: 1;
+                flex: 210px;
                 background: rgba(0, 251, 91, 0.3);
                 border: 2px solid rgb(0, 251, 91);
                 display: flex;

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

@@ -3,8 +3,7 @@
         <div class="lighting-img-box">
             <!-- 左上角，区域切换 -->
             <div class="btn-box">
-                <button class="btn-item" @click=changeFloor(1)>1F</button>
+                <button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
-                <button class="btn-item" @click=changeFloor(2)>2F</button>
             </div>
             <!-- 楼层区域 -->
             <div class="area">
@@ -13,7 +12,7 @@
                 :class="computedClass(item.id)"
                 @click="changeThisArea([item])"
                 :key="index">
-                    <div v-for="(v, i) in item.children" :key="i" class="light-group">
+                    <div v-for="(v, i) in item.childList" :key="i" class="light-group">
                         <div class="group-shadow" @click.stop="changeThisArea([item, v])">
                             <div :class="computedClass(v.id)" class="shadow-box"></div>
                         </div>
@@ -50,7 +49,7 @@
         :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
             <a-tabs v-model:activeKey="activeKey">
                 <a-tab-pane key="1" tab="控制面板">
-                    <tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1>
+                    <tabs1 @changeArea="changeArea" @reset="reset" :treeData="treeData" :nowArea="nowArea"></tabs1>
                 </a-tab-pane>
                 <a-tab-pane key="2" tab="计划列表" force-render>
                     <tabs2></tabs2>
@@ -80,55 +79,53 @@ import {
     DoubleRightOutlined
 } from '@ant-design/icons-vue';
 
-// 类声明 =======================================================
-
-interface items {
-    id: string,
-
-}
 
 // 初始化 =======================================================
 
 onMounted(() => {
-    http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => {
+    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
         const data = res.data
-        /** 由前端创建的，只在前端使用的变量
+        floorData.value = data
+        /** 只在前端使用的变量
          * @param id 用于判断样式和层级的前端属性
          * @param selected 用于表示是否选中的前端属性
          */
-        data.forEach((item, index) => {
+        data.forEach(floor => {
+            floor.childList.forEach((item, index) => {
                 if (index == 0) {
                     item.selected = true
                 } else {
                     item.selected = false
                 }
                 item.id = String(index + 1)
-            item.children = []
+                item.childList.forEach((v, i) => {
-            // deviceGroup后端返回了对象，此处转化为数组
+                    v.selected = false
-            let i = 1;
+                    v.id = (index + 1) + '-' + (i + 1)
-            for (let obj in item.deviceGroup) {
-                item.deviceGroup[obj].selected = false
-                item.deviceGroup[obj].id = String((index + 1) + '-' + i++)
-                item.children.push(item.deviceGroup[obj])
-            }
                 })
-        treeData.value = data
+            })
+        })
+        treeData.value = data[0].childList
     })
 })
 
 // 分层业务 =====================================================
 
 // 左上角分层切换
-const changeFloor = (area: number) => {
+const changeFloor = (area: any) => {
-    if (area == 1) {
+    // 重置数据
-        console.log('1F')
+    reset()
-    } else if (area == 2) {
+    // 重置视图
-        console.log('2F')
+    changeArea(['1'])
-    } 
+    // 切换楼层数据
+    treeData.value = area
+    // 默认选择第一项
+    treeData.value[0].selected = true
 }
 
 // 分区业务 =====================================================
 
+// 所有楼层的数据
+const floorData = ref([])
 // 分区结构树
 const treeData = ref([])
 // 当前选中的分区id
@@ -223,7 +220,7 @@ const changeThisArea = (result: any) => {
 const reset = () => {
     treeData.value.forEach(item => {
         item.selected = false
-        item.children.forEach(i => {
+        item.childList.forEach(i => {
             i.selected = false
         })
     })

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

@@ -44,8 +44,7 @@
     display: inline-block;
     justify-content: center;
   }
-
+  .plan {
-  .plan.enabled {
     border: none;
     font-size: 14px;
     font-weight: 400;
@@ -54,28 +53,20 @@
     margin-left: 235px;
     width: 88px;
     height: 32px;
-    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
     color: white;
+    cursor: pointer;
+  }
+  .plan.enabled {
+    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
   }
-
   .plan.disabled {
-    border: none;
-    font-size: 14px;
-    font-weight: 400;
-    border-radius: 5px;
-    color: white;
-    vertical-align: top;
-    margin-left: 235px;
-    width: 88px;
-    height: 32px;
     background-color: red;
   }
-
   .plan:disabled {
     cursor: not-allowed;
   }
-
+  .openPlan {
-  .openPlan.enabled2 {
+    cursor: pointer;
     border: none;
     font-size: 14px;
     font-weight: 400;
@@ -84,19 +75,12 @@
     vertical-align: top;
     width: 88px;
     height: 32px;
+  }
+  .openPlan.enabled2 {
     background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
-    color: white;
   }
 
   .openPlan.disabled2 {
-    border: none;
-    font-size: 14px;
-    font-weight: 400;
-    border-radius: 5px;
-    color: white;
-    vertical-align: top;
-    width: 88px;
-    height: 32px;
     background-color: red;
   }
 
@@ -135,6 +119,7 @@
     color: white;
     border: none;
     border-radius: 5px;
+    cursor: pointer;
   }
 
   .btn2 {

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

@@ -14,7 +14,7 @@
         <template v-if="!showAllButtonsArea">
           <button v-for="(button, index) in limitedButtons1" :key="index"
             :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
-            {{ button.regionName }}
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
@@ -23,7 +23,7 @@
         <template v-else>
           <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
             @click="selectButton(button)">
-            {{ button.regionName }}
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
@@ -33,7 +33,7 @@
     </div>
     <!-- 照明回路部分 -->
     <div>
-      <div class="circuit-area" v-if="selectedButton">
+      <div class="circuit-area">
         <div class="circuit-tab"></div>
         <span class="circuit-text">照明回路</span>
         <div class="btn2">
@@ -50,12 +50,12 @@
           </button>
         </div>
       </div>
-      <div class="btnArea" v-if="selectedButton">
+      <div class="btnArea">
         <template v-if="!showAllButtons">
           <button v-for="(button, index) in limitedButtons2" :key="index"
             :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
-            <stop-outlined v-if="button.panel" />
+            <stop-outlined v-if="button.ctrlStatus" />
-            {{ button.deviceName }}
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
@@ -64,8 +64,8 @@
         <template v-else>
           <button v-for="(button, index) in buttons2" :key="index" 
           :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
-            <stop-outlined v-if="button.panel" />
+            <stop-outlined v-if="button.ctrlStatus" />
-            {{ button.deviceName }}
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
@@ -218,6 +218,7 @@ import {
   UpOutlined,
   StopOutlined,
 } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
 // 请求
 import { http } from '/nerv-lib/util/http';
 import { lightingManage } from '/@/api/IlluminationInfo';
@@ -237,7 +238,7 @@ const setArea = () => {
   // 修改当前选中的分区
   selectedButton.value = props.nowArea
   // 设置当前显示的回路
-  buttons2.value = data.children
+  buttons2.value = data.childList
 }
 
 // 与父组件的交互  ===================================================================
@@ -254,13 +255,19 @@ const props = defineProps({
   }
 });
 // 向上传递修改选择样式
-const emit = defineEmits(['changeArea']);
+/** 
+ * @method changeArea 用于控制俯视图的选中状态
+ * @method reset 用于重置按钮区
+ */
+const emit = defineEmits(['changeArea','reset']);
 // 监听父组件选中的分区，并实时修改分区
 watch(() => props.nowArea, () => {
   setArea()
+  // 分区产生了切换， 线路的选中状态置空
+  handleButton.value = ''
 })
 
-// 照明区域 ==========================================================================
+// 照明区域业务 =======================================================================
 
 // 计划启用状态
 const isPlanEnabled = ref(false);
@@ -278,33 +285,36 @@ const selectButton = (button: any) => {
   console.log(button,'button')
   // 当前选中按钮
   selectedButton.value = button.id;
-  // 重置
   initMenu(1)
   button.selected = true
-  buttons2.value = button.children
+  buttons2.value = button.childList
-  // 反选area
   emit('changeArea', button.id);
+  handleButton.value = ''
 };
 // 默认最多展示8个按钮
 const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
 
-// 照明回路 ==========================================================================
+// 照明回路业务 ======================================================================
 
-// 最近交互过的按钮，用于禁用和启用
+// 最近交互过的按钮id，用于禁用和启用
 const handleButton = ref('');
 
 // 面板启用/禁用状态
 const isPlanEnabled2 = ref(true);
 // 面板启用/禁用切换事件
 const togglePlan2 = () => {
-  // 获取最近交互的按钮
+  // 如果未交互任何按钮
+  if (handleButton.value == '') {
+    return message.info('请选择照明回路');
+  }
+  // 获取最近交互过的按钮
   const btn = buttons2.value.find((button) => button.id === handleButton.value)
-  let panel = +(!btn.panel)
+  let panel = +(!btn.ctrlStatus)
   isLoading.value = true
-  http.get(lightingManage.setDisable, { deviceGroup: btn.deviceGroup, panel }).then(res => {
+  http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => {
     if (res.msg === 'success') {
       isPlanEnabled2.value = !isPlanEnabled2.value;
-      btn.panel = panel
+      btn.ctrlStatus = panel
       isLoading.value = false
     } else {
       isLoading.value = false
@@ -316,13 +326,14 @@ const togglePlan2 = () => {
 let singleSelection = ref(true);
 // 多选与单选切换事件
 const selectAll = () => {
-  emit('changeArea', [selectedButton.value])
   selectAllCheckbox.value = false
   buttons2.value.forEach((button) => {
     button.selected = false;
   });
   singleSelection.value = !singleSelection.value;
+  // 线路按钮被重置，
   showControlMode.value = false
+  emit('changeArea', [selectedButton.value])
 };
 
 // 全选状态
@@ -351,11 +362,12 @@ const toggleSelection = (button: any) => {
   // 存储一次按钮ID，用于禁用/启用交互
   handleButton.value = button.id
   // 根据按钮状态，展示禁用/启用按钮文本
-  if (button.panel) {
+  if (button.ctrlStatus) {
     isPlanEnabled2.value = true
   } else {
     isPlanEnabled2.value = false
   }
+
   // 选择时反控俯视图
   let level1 = selectedButton.value
   let level2 = button.id
@@ -401,7 +413,7 @@ const showAllButtons = ref(false);
 // 默认最多展示8个按钮
 const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
 
-// 控制模式 =======================================================================
+// 控制模式业务 ====================================================================
 
 // 决定该区域是否显示
 const showControlMode = ref(false);
@@ -413,7 +425,7 @@ const selectButton3 = (button3) => {
   selectedButton4.value = null; // 清空选中的控制场景按钮
 };
 
-// 控制场景 =======================================================================
+// 控制场景业务 =====================================================================
 
 // 决定该区域是否显示
 const showControlScene = ref(false);
@@ -431,7 +443,7 @@ const selectButton4 = (button4) => {
   selectedButton4.value = button4.label;
 };
 
-// 灯具参数 ========================================================================
+// 灯具参数表格 =====================================================================
 
 // 灯具参数 - 表格数据
 const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
@@ -493,6 +505,7 @@ const delBtn = (id: any) => {
     executeVisible.value = false;
   }
 };
+
 // 其他业务 ========================================================================
 
 const isLoading = ref(false)
@@ -502,13 +515,14 @@ const initMenu = (tier: number) => {
   // 1 = 照明区域 - 切换时，重置以下所有菜单
   if (tier == 1) {
     // 切换前，清除照明回路的选中状态
-    buttons2.value.forEach(item => {
+    // buttons2.value.forEach(item => {
-      item.selected = false
+    //   item.selected = false
-    })
+    // })
-    // 切换后，清空所有选中状态
+    // // 切换后，清空所有选中状态
-    props.treeData.forEach(item => {
+    // props.treeData.forEach(item => {
-      item.selected = false
+    //   item.selected = false
-    })
+    // })
+    emit('reset')
     // 控制模式 隐藏
     showControlMode.value = false;
     // 控制场景 隐藏
@@ -524,9 +538,17 @@ const initMenu = (tier: number) => {
 }
 // 刷新
 const refresh = () => {
+  // 关闭执行弹窗
   executeVisible.value = false
+  // 设置当前选中的序列
   selectedButton.value = '1';
   emit('changeArea', ['1']);
+  emit('reset')
+  let data = props.treeData[0]
+  // 默认选中
+  data.selected = true
+  buttons2.value = data.childList
+
   showControlMode.value = false;
   showControlScene.value = false;
   selectedButton4.value = null;

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

@@ -40,8 +40,8 @@
           </button>
         </td>
         <td>
-          <button class="tabReboot" @click="handleRefClick1">重启</button>
+          <div class="tabReboot" @click="restartPlan(row.id)">重启</div>
-          <button class="tabDelete">删除</button>
+          <div class="tabDelete" @click="deletePlan(row.id)">删除</div>
         </td>
       </tr>
     </tbody>
@@ -54,7 +54,7 @@
     <div style="margin-top: 20px">
       <a-transfer
         v-model:target-keys="targetKeys"
-        :data-source="mockData"
+        :data-source="transferData"
         show-search
         :filter-option="filterOption"
         :render="(item) => item.title"
@@ -66,7 +66,7 @@
     <div style="width: 100%; height: 60px;"></div>
     <div class="button-box">
       <button class="cancel" @click="addVisible = false">取消</button>
-      <button class="execute">确定</button>
+      <button class="execute" @click="sendPlan">确定</button>
     </div>
   </div>
 </template>
@@ -76,11 +76,14 @@ import { ref, onMounted } from 'vue';
 // 请求
 import { http } from '/nerv-lib/util/http';
 import { lightingManage } from '/@/api/IlluminationInfo';
+import { message } from 'ant-design-vue';
 
 // 初始化 ===========================================================
 
 onMounted(() => {
+  // 计划表格
   getTable()
+  // 穿梭框原始数据
   getLeftPlan()
 })
 
@@ -94,6 +97,20 @@ const getTable = () => {
     dataSource.value = res.data
   })
 }
+// 删除表格中的计划
+const deletePlan = (id: String) => {
+  http.delete(lightingManage.deletePlan, [id]).then(res => {
+    message.success('操作成功')
+    getTable()
+  })
+}
+// 重启表格中的计划
+const restartPlan = (id: String) => {
+  http.post(lightingManage.restartPlan, { planId: id }).then(res => {
+    message.success('操作成功')
+    getTable()
+  })
+}
 
 // tab页弹窗部分 ====================================================
 
@@ -107,49 +124,43 @@ const addModal = () => {
 // 穿梭框部分 =======================================================
 
 // 穿梭框数据
-const transferData = ref([])
+const transferData = ref([]) as any;
 // 获得穿梭框原始数据
 const getLeftPlan = () => {
   http.get(lightingManage.getLeftPlan, {}).then(res => {
-    console.log(res)
+    let arr = []
+    res.data.forEach(item => {
+      arr.push({
+        key: item.id,
+        title: item.planName
+      })
+    })
+    transferData.value = arr
   })
 }
 
-// 操作日志
-const handleRefClick1 = () => {
-  alert(111)
-};
-
 const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
   console.log(keys, direction, moveKeys);
 };
 const handleSearch = (dir: string, value: string) => {
   console.log('search:', dir, value);
 };
-
+// 穿梭框选中数据
-// 穿梭框 相关业务
-interface MockData {
-  key: string;
-  title: string;
-  description: string;
-  chosen: boolean;
-}
-const mockData = ref([
-  {
-    key: '1',
-    title: '计划再开',
-  },
-  {
-    key: '2',
-    title: '检修模式',
-  },
-  {
-    key: '3',
-    title: '设备变更',
-  },
-]);
 const targetKeys = ref<string[]>([]);
-const filterOption = (inputValue: string, option: MockData) => {
+// 将穿梭框选中的计划提交
+const sendPlan = () => {
+  if (targetKeys.value.length < 1) {
+    return message.info('没有选择任何计划');
+  }
+  http.post(lightingManage.submitLeftPlan, targetKeys.value).then(res => {
+    message.success('添加成功')
+    // 如果发送成功，则刷新表格
+    getTable()
+    getLeftPlan()
+  })
+}
+
+const filterOption = (inputValue: string, option: any) => {
   return option.description.indexOf(inputValue) > -1;
 };
 
@@ -178,6 +189,7 @@ const filterOption = (inputValue: string, option: MockData) => {
     font-size: 14px;
     font-weight: 400;
     color: rgba(255, 255, 255, 1);
+    cursor: pointer;
   }
 }
 // 表格
@@ -204,6 +216,7 @@ const filterOption = (inputValue: string, option: MockData) => {
   .tabReboot,
   .tabDelete {
     border: none;
+    display: inline-block;
     background-color: rgba(0, 0, 0, 0);
     font-size: 14px;
     font-weight: 400;
@@ -215,6 +228,12 @@ const filterOption = (inputValue: string, option: MockData) => {
   .tabReboot {
     margin-right: 8px;
   }
+  .tabReboot::active {
+    color: white !important;
+  }
+  .tabDelete::active {
+    color: white;
+  }
 }
 ::v-deep(.ant-transfer) {
   // 屏蔽自带的hover效果