From 790c8a3962cadd1588d500717f2d1e1725e28c81 Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Tue, 13 Aug 2024 14:41:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=85=A7=E6=98=8E=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=82=B9=E9=98=B5=E5=AE=9E=E7=8E=B0=20/=20?=
 =?UTF-8?q?=E7=94=B5=E6=A2=AF=E7=B3=BB=E7=BB=9F=E6=82=AC=E6=B5=AE=E6=A1=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/equipmentControl/liftSystem/liftInfo.vue  | 16 ++--
 .../equipmentControl/lightingManage/indexs.vue     | 99 +++++++---------------
 .../view/equipmentControl/lightingManage/light.vue | 64 +++++++-------
 .../lightingManage/lightPosition.ts                | 61 ++++++++++++-
 .../view/equipmentControl/lightingManage/tabs1.vue | 15 +++-
 5 files changed, 141 insertions(+), 114 deletions(-)

diff --git a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
index e14bf23..15b303f 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
@@ -174,20 +174,20 @@
       .info-box {
         // 字体颜色变量
         --text: rgb(20, 255, 255);
-        width: 224.54px;
-        height: 110px;
+        width: 180px;
+        height: 95px;
         display: flex;
-        gap: 5px;
         flex-direction: column;
         background: rgb(17, 44, 86, 0.9);
         border-radius: 8px;
         box-sizing: border-box;
-        padding: 8px;
+        padding: 4px 6px;
         border: 2px solid var(--text);
         transform: translateY(-50%);
         cursor: pointer;
         // 面板标题
         .box-title {
+          font-size: 14px;
           height: auto;
           color: var(--text);
           // 标题前小方块
@@ -222,12 +222,12 @@
               justify-content: center;
               // border: 1px solid red;
               .icon {
-                width: 45px;
-                height: 45px;
+                width: 40px;
+                height: 40px;
                 background-image: url(../image/box.svg);
                 background-size: 130% 130%;
                 background-repeat: no-repeat;
-                background-position: left -6.5px top -3px;
+                background-position: left -5px top -2px;
                 // border: 1px solid red;
                 position: relative;
                 .icon-item {
@@ -247,7 +247,7 @@
               }
             }
             .item-text {
-              margin-top: 2px;
+              margin-top: 0px;
               height: 20px;
               text-align: center;
               font-size: 12px;
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index 24ca8bc..019af83 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/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;
       });
   };
 
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
index 1f941b4..b56265f 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
@@ -5,71 +5,65 @@
         <div class="light-tag-tit">
           <div>
             <img src="/asset/image//bulbLogo/21962.png" alt="" />
-            <span class="tag-text">{{ result.name }}</span>
+            <span class="tag-text">{{ blub.regionName + ' > ' + blub.deviceGroupName }}</span>
           </div>
-          <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
+          <button class="right-button">{{ blub.scene.label }}</button>
         </div>
         <div class="light-tag-box">
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
             <span class="title">控制模式</span>
-            <span class="result">自动</span>
+            <span class="result">{{ blub.mode.label }}</span>
           </div>
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
             <span class="title">亮度</span>
-            <span class="result">{{ result.brightness }}</span>
+            <span class="result">{{ record.brightness + record.brightnessUnit }}</span>
           </div>
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
             <span class="title">控制场景</span>
-            <span class="result">{{ result.automatic2 }}</span>
+            <span class="result">{{ blub.scene.label }}</span>
           </div>
           <div class="tag-box-item">
             <img src="/asset/image//bulbLogo/22496.png" alt="" />
             <span class="title">色温</span>
-            <span class="result">{{ result.brightness3 }}</span>
+            <span class="result">{{ record.LwctemC + record.LwctemCUnit }}</span>
           </div>
         </div>
       </div>
     </template>
-    <div class="icon-box" :style="styleObject" v-show="visible">
-      <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="" />
-      <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="" />
-      <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="" />
+    <div class="icon-box" :style="props.blub.styleText">
+      <img
+        v-if="blub.mode.value == 1"
+        class="icon-item"
+        src="/asset/image/bulbLogo/22394.png"
+        alt="" />
+      <img
+        v-if="blub.mode.value == 2"
+        class="icon-item"
+        src="/asset/image/bulbLogo/22396.png"
+        alt="" />
+      <img
+        v-if="blub.mode.value == 3"
+        class="icon-item"
+        src="/asset/image/bulbLogo/22400.png"
+        alt="" />
     </div>
   </a-popover>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-
-  defineProps({
-    styleObject: Object,
-    type: Number,
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  });
-
-  const result = ref({
-    id: '1',
-    name: '站厅照明  1区',
-    manual: '手动',
-    automatic: '自动',
-    brightness: '100lux',
-    brightness2: '30lux',
-    manual2: '手动',
-    automatic2: '舒适',
-    brightness3: '4000k',
-    brightness4: '3800k',
+  const props = defineProps({
+    blub: Object,
   });
+  const blub = props.blub;
+  const record = props.blub.record;
 </script>
 <style lang="less" scoped>
   .icon-box {
-    width: 25px;
-    height: 25px;
+    width: 28px;
+    height: 40px;
     position: absolute;
 
     .icon-item {
@@ -140,7 +134,7 @@
 
       .result {
         line-height: 50px;
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 700;
         color: white;
       }
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
index d94b570..bc860b7 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
@@ -1,6 +1,63 @@
 // 此文件只定义light（即俯视图小灯泡）的位置信息
 // 与显示状态和分组信息无关
 export const lightPosition = [
-  { left: '180px', bottom: '200px' },
-  { left: '180px', bottom: '230px' },
+  // 安检区A
+  { left: '160px', bottom: '270px' },
+  { left: '185px', bottom: '230px' },
+  { left: '220px', bottom: '180px' },
+  { left: '250px', bottom: '130px' },
+  // 站厅区B 1组
+  { left: '240px', bottom: '290px' },
+  { left: '260px', bottom: '260px' },
+  { left: '280px', bottom: '230px' },
+  { left: '310px', bottom: '190px' },
+  { left: '330px', bottom: '160px' },
+  // 站厅区B 2组
+  { left: '300px', bottom: '305px' },
+  { left: '325px', bottom: '275px' },
+  { left: '350px', bottom: '245px' },
+  { left: '375px', bottom: '215px' },
+  { left: '400px', bottom: '180px' },
+  // 站台区A 1组
+  { left: '370px', bottom: '320px' },
+  { left: '470px', bottom: '210px' },
+  // 站台区A 2组
+  { left: '425px', bottom: '335px' },
+  { left: '530px', bottom: '230px' },
+  // 站台区A 3组
+  { left: '475px', bottom: '350px' },
+  { left: '590px', bottom: '250px' },
+  // 站台区A 4组
+  { left: '530px', bottom: '365px' },
+  { left: '640px', bottom: '270px' },
+  // 一楼办公区
+  { left: '570px', bottom: '390px' },
+  { left: '605px', bottom: '365px' },
+  { left: '640px', bottom: '340px' },
+  { left: '675px', bottom: '315px' },
+  { left: '710px', bottom: '290px' },
+  // 安保区 4 分组
+  { left: '670px', bottom: '370px' },
+  { left: '720px', bottom: '385px' },
+  { left: '770px', bottom: '400px' },
+  { left: '820px', bottom: '415px' },
+  // 一楼男厕A
+  { left: '810px', bottom: '455px' },
+  { left: '970px', bottom: '370px' },
+  { left: '850px', bottom: '465px' },
+  { left: '1010px', bottom: '385px' },
+];
+
+export const lightPosition1 = [
+  // 二楼办公区
+  { left: '200px', bottom: '380px' },
+  { left: '220px', bottom: '350px' },
+  { left: '240px', bottom: '320px' },
+  { left: '260px', bottom: '290px' },
+  { left: '280px', bottom: '260px' },
+  //
+  { left: '940px', bottom: '550px' },
+  { left: '1110px', bottom: '480px' },
+  { left: '990px', bottom: '560px' },
+  { left: '1170px', bottom: '490px' },
 ];
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
index 3c1cbbc..2f08647 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
@@ -171,6 +171,7 @@
               title="此操作将会撤销修改"
               ok-text="确定"
               cancel-text="取消"
+              placement="bottomRight"
               @confirm="delBtn(item)"
               @cancel="changeCancel">
               <button class="cxbtn">撤销</button>
@@ -788,7 +789,15 @@
         projectId: state.projectId,
         siteId: state.siteId,
       })
-      .then(() => {
+      .then((res) => {
+        let data = res.data;
+        // 所有修改均生效
+        if (data.allSucceed) {
+          message.success('修改完成');
+          // allSucceed不为true，则至少有一条数据修改失败
+        } else {
+          message.info(`${data.successList.length}条修改成功，${data.failList.length}条修改失败`);
+        }
         emit('reload');
         refresh(true);
       })
@@ -813,6 +822,10 @@
     changeArea,
     // 回路切换
     changeLine,
+    // 重置当前选择
+    refresh,
+    resetLockList,
+    resetChangeList,
   });
 </script>
 <style lang="less" scoped>