fix:照明系统设备点阵实现 / 电梯系统悬浮框样式修改

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

@@ -3,14 +3,18 @@
     <div class="lighting-img-box" :class="{ lightingImgBox1: thisFloor == '2' }">
       <!-- 左上角，区域切换 -->
       <div class="btn-box">
-        <button
+        <a-popconfirm
           v-for="(item, index) in floorData"
           :key="index"
-          class="btn-item"
-          :class="{ btnActive: item.dataCode == thisFloor }"
-          @click="changeFloor(item.childList, item.dataCode)"
-          >{{ item.name }}</button
-        >
+          title="切换楼层将取消当前的所有修改项"
+          ok-text="确定"
+          cancel-text="取消"
+          placement="bottomLeft"
+          @confirm="changeFloor(item.childList, item.dataCode)">
+          <button class="btn-item" :class="{ btnActive: item.dataCode == thisFloor }">{{
+            item.name
+          }}</button>
+        </a-popconfirm>
       </div>
       <!-- 楼层区域 -->
       <div class="area">
@@ -28,12 +32,7 @@
       </div>
       <!-- 照明设备 -->
       <div class="lights">
-        <light
-          v-for="(item, index) in bulbs"
-          :key="index"
-          :styleObject="item.styleText"
-          :type="item.type"
-          :visible="item.visible" />
+        <light v-for="(blub, index) in bulbs" :key="index" :blub="blub" />
       </div>
     </div>
     <!-- 右侧抽屉 -->
@@ -73,7 +72,7 @@
 
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
-  import { lightPosition } from './lightPosition';
+  import { lightPosition, lightPosition1 } from './lightPosition';
   // 组件
   import light from './light.vue';
   import tabs1 from './tabs1.vue';
@@ -109,8 +108,15 @@
   const thisFloor = ref('1');
   // 左上角分层切换
   const changeFloor = (area: any, floor: string) => {
+    if (floor == thisFloor.value) {
+      return;
+    }
+    // 切换前还原修改内容
+    tabs1Ref.value.refresh(false);
+    // 清空设备点阵
+    bulbs.value = [];
     thisFloor.value = floor;
-    console.log(thisFloor.value, 'vvvvvvvvvv');
+    getBulbs();
     // 重置数据
     reset();
     // 重置视图
@@ -129,56 +135,7 @@
   // 当前选中的分区序列 - 用于样式渲染
   const area = ref(['1']);
   // 线路内小灯泡 - 此处位置需前端写死
-  const bulbs = ref([
-    {
-      styleText: { left: '180px', bottom: '200px' },
-      area: 1,
-      type: 1,
-      visible: true,
-    },
-    {
-      styleText: { left: '230px', bottom: '125px' },
-      area: 1,
-      type: 2,
-      visible: true,
-    },
-    {
-      styleText: { left: '320px', bottom: '140px' },
-      area: 1,
-      type: 3,
-      visible: true,
-    },
-    {
-      styleText: { left: '245px', bottom: '230px' },
-      area: 1,
-      type: 3,
-      visible: true,
-    },
-    {
-      styleText: { left: '405px', bottom: '230px' },
-      area: 2,
-      type: 3,
-      visible: true,
-    },
-    {
-      styleText: { left: '460px', bottom: '180px' },
-      area: 2,
-      type: 3,
-      visible: true,
-    },
-    {
-      styleText: { left: '360px', bottom: '275px' },
-      area: 2,
-      type: 3,
-      visible: true,
-    },
-    {
-      styleText: { left: '715px', bottom: '320px' },
-      area: 3,
-      type: 1,
-      visible: true,
-    },
-  ]);
+  const bulbs = ref([]);
   // 由子组件控制的分区与线路切换
   const changeArea = (result: any) => {
     console.log(result, 'changeArea');
@@ -280,19 +237,25 @@
   // 设备业务 小灯泡 ==============================================
 
   const getBulbs = () => {
+    const floor = thisFloor.value;
+    let arr: Array<Object> = [];
+    if (floor == '1') {
+      arr = lightPosition;
+    } else if (floor == '2') {
+      arr = lightPosition1;
+    }
     http
       .get(lightingManage.getBulbs, {
-        floor: thisFloor.value,
+        floor,
         projectId: state.projectId,
         siteId: state.siteId,
       })
       .then((res) => {
         const data = res.data;
         data.forEach((item: any, index: number) => {
-          item.styleText = lightPosition[index];
+          item.styleText = arr[index];
         });
-        console.log(res.data);
-        // bulbs.value = data;
+        bulbs.value = data;
       });
   };