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

4 months ago · ab29f9152d
3 changed files with 157 additions and 102 deletions
--- a/hx-ai-intelligent/src/api/IlluminationInfo.ts
+++ b/hx-ai-intelligent/src/api/IlluminationInfo.ts
@ -9,6 +9,13 @@ export enum lightingManage {
  // 修改线路的可用/禁用状态
  setDisable = '/carbon-smart/IlluminationInfo/revisePanel',

+  // 控制面板tab页 ================================================
+
+  // 获取当前修改的内容对比数据
+  getChangeList = '/carbon-smart/IlluminationInfo/getLightSceneChangeInfo',
+  // 提交当前修改
+  submitChangeList = '/carbon-smart/IlluminationInfo/changeLightScene',
+
  // 计划列表tab页 ================================================

  // 获得计划列表tab页的表格数据
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/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>
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
@ -13,7 +13,7 @@
      <div class="area">
        <template v-if="!showAllButtonsArea">
          <button v-for="(button, index) in limitedButtons1" :key="index"
-            :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
+            :class="{ btn: true, selected: button.selected }" @click="changeArea(button)">
            {{ button.name }}
          </button>
          <div style="margin-top: 10px">
@ -22,7 +22,7 @@
        </template>
        <template v-else>
          <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
-            @click="selectButton(button)">
+            @click="changeArea(button)">
            {{ button.name }}
          </button>
          <div style="margin-top: 10px">
@ -53,7 +53,7 @@
      <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)">
+            :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
            <stop-outlined v-if="button.ctrlStatus" />
            {{ button.name }}
          </button>
@ -63,7 +63,7 @@
        </template>
        <template v-else>
          <button v-for="(button, index) in buttons2" :key="index" 
-          :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
+          :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
            <stop-outlined v-if="button.ctrlStatus" />
            {{ button.name }}
          </button>
@ -91,14 +91,14 @@
    </div>
    <!-- 控制场景部分 -->
    <div>
-      <div class="control-scene-area" v-show="thisButton2.mode.value == '3'">
+      <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="thisButton2.mode.value == '3'">
+      <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)">
+          :class="{ btn: true, selected: thisButton2.scene.value == button4.value }" @click="selectButton4(button4)">
          {{ button4.label }}
        </button>
      </div>
@ -186,7 +186,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import {
  DownOutlined,
  UpOutlined,
@ -201,47 +201,25 @@ import { getAllEnum } from '/@/api/index'
 // 初始化  =========================================================================

 onMounted(() => {
-  // 设置分区
-  setArea(0)
+  // 默认选项
+  setArea()
  // 获得枚举
  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 = (isHandle: number) => {
-  const data = props.treeData.find((item: any) => {
-    return item.id == props.nowArea
-  })
-  // 默认选中第一个分区
-  data.selected = true
-  // 修改当前选中的分区
-  selectedButton.value = props.nowArea
-  // 设置当前显示的回路
+// 以 1-1 作为默认线路
+const setArea = () => {
+  const data = props.treeData[0]
  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()
-    }
-  }
 }

 // 与父组件的交互  ===================================================================
@ -251,10 +229,6 @@ const props = defineProps({
  treeData: {
    type: Array,
    default: []
-  },
-  // 父组件选中的分区ID
-  nowArea: {
-    type: String,
  }
 });
 // 向上传递修改选择样式
@ -263,12 +237,6 @@ const props = defineProps({
 * @method reset 用于重置按钮区
 */
 const emit = defineEmits(['changeArea','reset']);
-// 监听父组件选中的分区，并实时修改分区
-watch(() => props.nowArea, () => {
-  setArea(1)
-  // 分区产生了切换， 线路的选中状态置空
-  handleButton.value = ''
-})

 // 照明区域业务 =======================================================================

@ -283,15 +251,22 @@ const togglePlan = () => {
 const showAllButtonsArea = ref(false);
 // 被选中的分区  默认为1
 const selectedButton = ref<string | undefined>('1');
-// 区域切换（按钮点击-单选）事件
-const selectButton = (button: any) => {
+
+// 分区切换
+const changeArea = (button: any) => {
  // 当前选中按钮
  selectedButton.value = button.id;
-  initMenu(1)
-  button.selected = true
+  // 设置当前选中的线路
  buttons2.value = button.childList
+  // 重置按钮状态
+  emit('reset')
+  // 设置选中按钮状态
+  button.selected = true
+  // 改变俯视图样式
  emit('changeArea', button.id);
+  // 当前选中线路 - 置空
  resetMode()
+  // 最近交互过的按钮 - 置空
  handleButton.value = ''
 };
 // 默认最多展示8个按钮
@ -335,7 +310,9 @@ const selectAll = () => {
    button.selected = false;
  });
  singleSelection.value = !singleSelection.value;
+  // 当前选中线路 - 置空
  resetMode()
+  // 改变俯视图样式
  emit('changeArea', [selectedButton.value])
 };

@ -346,7 +323,11 @@ const toggleAllSelection = () => {
  let arr = [selectedButton.value]
  // 全选
  if (selectAllCheckbox.value) {
-    buttons2.value.forEach((item) => {
+    buttons2.value.forEach((item, index) => {
+      // 全选时，默认展示第一条线路的模式-场景按钮
+      if (index == 0) {
+        thisButton2.value = item
+      }
      item.selected = true;
      arr.push(item.id)
    });
@ -355,12 +336,24 @@ const toggleAllSelection = () => {
    buttons2.value.forEach((item) => {
      item.selected = false;
    });
+    // 全不选时，隐藏模式-场景按钮
+    resetMode()
  }
  emit('changeArea', arr)
 };

+// 储存当前选中的线路
+const thisButton2 = ref({
+  code: '',
+  mode: {
+    value: -1
+  },
+  scene: {
+    value: -1
+  }
+})
 // 照明回路的按钮切换
-const toggleSelection = (button: any) => {
+const changeLine = (button: any) => {
  // 存储一次按钮ID，用于禁用/启用交互
  handleButton.value = button.id
  // 根据按钮状态，展示禁用/启用按钮文本
@ -373,13 +366,13 @@ const toggleSelection = (button: any) => {
  // 选择时反控俯视图
  let level1 = selectedButton.value
  let level2 = button.id
-  // 单选模式，需将所有按钮设为false
+  // 单选模式，需将所有其他按钮设为false
  if (singleSelection.value) {
    buttons2.value.forEach(item => {
      item.selected = false;
    });
-    emit('changeArea', [level1, level2])
    button.selected = !button.selected;
+    emit('changeArea', [level1, level2])
  } else {
    // 多选模式传值
    button.selected = !button.selected;
@ -396,7 +389,7 @@ const toggleSelection = (button: any) => {
    // 发生了选中事件
    thisButton2.value = button
  } else {
-    // 未发生选中 或 多选被取消
+    // 未发生选中 或 多选的其中一个按钮被取消
    resetMode()
  }
  console.log(thisButton2,'button')
@ -411,28 +404,17 @@ const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));

 // 控制模式业务 ====================================================================

-const thisButton2 = ref({
-  code: '',
-  mode: {
-    value: '0'
-  }
-})
 // 控制模式 - 按钮切换
 const selectButton3 = (button3) => {
  let checked = thisButton2.value.mode
  console.log(button3.value,'---', checked.value)
-  // 如果点击了相同的按钮，未作出修改
+  // 如果点击了相同的按钮，则未作出修改
  if (checked.value === button3.value) {
    return
  }
  checked.value = button3.value
-  selectedButton4.value = null; // 清空选中的控制场景按钮
 };

-const diff = () => {
-  console.log(thisButton2)
-} 
-
 // 控制场景业务 =====================================================================

 // 控制模式枚举
@ -443,13 +425,63 @@ const controlScene = ref([])
 const selectedButton4 = ref(null);
 // 控制场景 - 按钮切换
 const selectButton4 = (button4) => {
-  selectedButton4.value = button4.label;
+  // 当前选中的线路数据
+  const data = thisButton2.value
+  // 修改前的数据
+  let before = data.scene.value
+  // 修改后的数据
+  let after = button4.value
+  // 如果没有产生实质性的修改（修改前后相同，则跳出）
+  if (before === after) {
+    return
+  // 产生了修改
+  } else {
+    thisButton2.value.scene.value = after
+    // 查询之前是否修改过
+    const result = changeList.value.find((item, index) => {
+      item.index = index
+      return item.deviceGroup == data.code
+    })
+    // 如果已产生过修改
+    if (result) {
+      // 改回了原有的值，则从数组中移除
+      if (after == result.before) {
+        changeList.value.splice(result.index, 1)
+      // 修改为新值，则只修改after
+      } else {
+        result.scene = after
+        // 临时flag，用后移除
+        delete result.index
+      }
+    // 如果未产生过修改
+    } else {
+      changeList.value.push({
+        // 线路
+        deviceGroup: data.code,
+        deviceGroupName: data.name,
+        // 分区
+        region: data.pcode,
+        regionName: '',
+        // 修改前
+        before: before,
+        // 修改后
+        scene: after
+      })
+    }
+    console.log(changeList.value, 'changeList')
+  }
+  
+  thisButton2.value.scene.value = after
+  console.log(thisButton2,'222222')
+  console.log(button4,'44444')
 };

 // 内侧弹窗 ========================================================================

+// 需要修改的内容
+const changeList: any = ref([])
 // 需要向后端提交的修改内容
-const submitArray = ref([])
+const submitList = ref([])
 const cxList = ref([
  {
    id: '1',
@ -489,7 +521,7 @@ const cxList = ref([
  },
 ]);
 //撤销
-const delBtn = (id: any) => {
+const delBtn = () => {
  cxList.value.pop();
  console.log(cxList.value.length);

@ -501,19 +533,6 @@ const delBtn = (id: any) => {
 // 其他业务 ========================================================================

 const isLoading = ref(false)
-
-// 用于初始化5级联动的菜单
-const initMenu = (tier: number) => {
-  // 1 = 照明区域 - 切换时，重置以下所有菜单
-  if (tier == 1) {
-    emit('reset')
-    // 灯具参数 隐藏
-    selectedButton4.value = null;
-  } else if (tier == 2) {
-    // 灯具参数 隐藏
-    selectedButton4.value = null;
-  }
-}
 // 刷新
 const refresh = () => {
  // 关闭执行弹窗
@ -532,7 +551,16 @@ const refresh = () => {
 // 执行确认
 const executeVisible = ref<boolean>(false);
 const showModal = () => {
+  http.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }).then(res => {
+    if (res.msg === 'success') {
+      isLoading.value = true
+      console.log(res)
+    } else {
+      isLoading.value = false
+    }
+  })
  executeVisible.value = true;
+
 };

 // 确定
@ -549,13 +577,20 @@ const resetMode = () => {
  thisButton2.value = {
    code: '',
    mode: {
-      value: '0'
+      value: -1
+    },
+    scene: {
+      value: -1
    }
  }
 } 

+// 暴露
 defineExpose({
-  changeCancel
+  // 分区切换
+  changeArea,
+  // 线路切换
+  changeLine
 });

 </script>