add:照明系统 提交数据功能

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

@@ -42,6 +42,7 @@
         v-model:visible="visible"
         class="drawer-item"
         width="496"
+        :forceRender="preload"
         placement="right"
         :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
         :closable="false"
@@ -54,7 +55,6 @@
                     @changeArea="changeArea" 
                     @reset="reset" 
                     :treeData="treeData" 
-                    :nowArea="nowArea"
                     ></tabs1>
                 </a-tab-pane>
                 <a-tab-pane key="2" tab="计划列表" force-render>
@@ -93,6 +93,10 @@ onMounted(() => {
     getAllArea()
 })
 
+// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
+const preload = ref(false)
+
+
 // 分层业务 =====================================================
 
 // 所有楼层的数据
@@ -109,13 +113,12 @@ const changeFloor = (area: any) => {
     treeData.value[0].selected = true
 }
 
+
 // 分区业务 =====================================================
 
 // 分区结构树
 const treeData = ref([])
-// 当前选中的分区id
-const nowArea = ref('1')
-// 当前选中的分区序号 - 用于样式渲染
+// 当前选中的分区序列 - 用于样式渲染
 const area = ref(['1'])
 // 线路内小灯泡 - 此处位置需前端写死
 const bulbs = ref([
@@ -182,15 +185,18 @@ const changeArea = (result: any) => {
 }
 // 由当前组件控制的分区切换
 const changeThisArea = (result: any) => {
-    tabs1Ref.value.changeCancel()
     console.log(result, 'changeThisArea')
     // 修改前，将所有选项置空
     reset()
     let level1 = result[0];
     area.value.length = 0
+    // 只选择了分区
     if (result.length === 1) {
         result[0].selected = true
         area.value.push(result[0].id)
+        // 控制子组件按钮区
+        tabs1Ref.value.changeArea(result[0])
+    // 选择了分区 + 线路
     } else if (result.length === 2) {
         // 如果没有分区，默认选择第一个
         if (!level1) {
@@ -199,8 +205,10 @@ const changeThisArea = (result: any) => {
         // 选中状态都设为true
         level1.selected = result[1].selected  = true
         area.value.splice(0, 0, level1.id, result[1].id)
+        // 控制子组件按钮区
+        tabs1Ref.value.changeArea(result[0])
+        tabs1Ref.value.changeLine(result[1])
     }
-    nowArea.value = level1.id
 }
 // 重置分区树所有当前选项
 const reset = () => {
@@ -220,6 +228,7 @@ const computedClass = (string: string) => {
     }
 }
 
+// 获得所有分区
 const getAllArea = () => {
     http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
         const data = res.data
@@ -242,7 +251,10 @@ const getAllArea = () => {
                 })
             })
         })
+        // 默认展示 线路 1-1
         treeData.value = data[0].childList
+        // 开始预加载
+        preload.value = true
     })
 }
 
@@ -256,6 +268,7 @@ let visible = ref(false);
 const toggleDrawer = () => {
     visible.value = !visible.value;
 };
+// 抽屉tab1组件的引用
 const tabs1Ref = ref()
 
 </script>