add:增加照明系统前端交互

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

@@ -12,7 +12,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, index)">
+          :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
           {{ button.label }}
         </button>
         <div style="margin-top: 10px">
@@ -20,8 +20,8 @@
         </div>
       </template>
       <template v-else>
-        <button v-for="(button, index) in props.treeData" :key="index"
-          :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
+        <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
+          @click="selectButton(button)">
           {{ button.label }}
         </button>
         <div style="margin-top: 10px">
@@ -36,7 +36,7 @@
       <div class="circuit-tab"></div>
       <span class="circuit-text">照明回路</span>
       <div class="btn2">
-        <button class="openplan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
+        <button class="openPlan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
           {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
         </button>
         <a-switch v-model:checked="selectAllCheckbox" :disabled="singleSelection" :class="{
@@ -49,7 +49,7 @@
         </button>
       </div>
     </div>
-    <div class="btnarea" v-if="selectedButton">
+    <div class="btnArea" v-if="selectedButton">
       <template v-if="!showAllButtons">
         <button v-for="(button2, index) in limitedButtons2" :key="index"
           :class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
@@ -80,7 +80,7 @@
     <!-- 控制模式按钮部分 -->
     <div class="control-mode-btn-area" v-show="showControlMode">
       <button v-for="(button3, index) in controlType" :key="index"
-        :class="{ btn: true, selected: button3.type === thisButtonType }" @click="selectButton3(button3)">
+        :class="{ btn: true, selected: button3.type == thisButton.type }" @click="selectButton3(button3)">
         {{ button3.name }}
       </button>
     </div>
@@ -119,7 +119,7 @@
             :style="{ height: '50px' }">
             <td>{{ row.num }}</td>
             <td>{{ row.light }}</td>
-            <td>{{ row.tempruter }}</td>
+            <td>{{ row.temperature }}</td>
           </tr>
         </tbody>
       </table>
@@ -130,170 +130,71 @@
     <button class="flushed" @click="refresh">刷新</button>
     <button class="execute" @click="showModal">执行</button>
   </div>
-  <!-- <a-modal :v-if="cxlist.length === 0" v-model:visible="executevisible" width="500px" height="792px" okText="执行"
-    :closable="false" @ok="handleOk2" :mask="false" :bodyStyle="{
-        opacity: 1,
-        background: ' rgba(0,0,0)',
-        color: 'rgba(255,83,0)',
-        boxSizing: 'borderBox',
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'fixed',
-        right: '496px',
-        top: '0',
-      }">
-    <div :v-if="cxlist.length === 0" style="height: 792px">
+
+  <div class="out-dialog" v-if="executeVisible">
+    <div class="content" v-if="executeVisible">
       <div>
         <div class="div-operation"></div>
         <span class="text-operation">变更内容 </span>
       </div>
-      <div class="jbox" v-for="item in cxlist" :key="item.id">
+      <div class="j-box" v-for="item in cxList" :key="item.id">
         <div class="journal" style="margin-top: 20px">
           <div class="imgText">
             <div class="zjzm">
-              <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-              <span class="titletext" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
-        item.name }}</span>
+              <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+              <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
             </div>
-            <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
+            <button class="cxbtn" @click="delBtn(item.id)">撤销</button>
           </div>
-          <div class="control-btn">
-            <button style="
-                width: 96px;
-                height: 40px;
-                border-radius: 4px;
-                background: linear-gradient(
-                  180deg,
-                  rgba(1, 206, 255, 1) 0%,
-                  rgba(0, 150, 229, 1) 100%
-                );
-
-                border: 1px solid rgba(95, 154, 251, 1);
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-              ">
-              控制模式
-            </button>
-            <span style="
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 12px;
-                margin-right: 8px;
-              ">手动</span>
-            <img src="/asset/image/bulbLogo/22406.png" alt="" />
-            <span style="
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 8px;
-                margin-right: 40px;
-              ">自动</span>
-          </div>
-          <div class="light-btn">
-            <button style="
-                width: 68px;
-                height: 40px;
-                border-radius: 4px;
-                background: linear-gradient(
-                  180deg,
-                  rgba(1, 206, 255, 1) 0%,
-                  rgba(0, 150, 229, 1) 100%
-                );
-
-                border: 1px solid rgba(95, 154, 251, 1);
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-              ">
-              亮度
-            </button>
-            <span style="
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 12px;
-                margin-right: 8px;
-              ">100lux</span>
-            <img src="/asset/image/bulbLogo/22406.png" alt="" />
-            <span style="
-                color: rgba(243, 97, 99, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 8px;
-              ">30lux</span>
-          </div>
-          <div class="control-area-btn">
-            <button style="
-                width: 96px;
-                height: 40px;
-                border-radius: 4px;
-                background: linear-gradient(
-                  180deg,
-                  rgba(1, 206, 255, 1) 0%,
-                  rgba(0, 150, 229, 1) 100%
-                );
-
-                border: 1px solid rgba(95, 154, 251, 1);
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-              ">
-              控制场景
-            </button>
-            <span style="
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 12px;
-                margin-right: 8px;
-              ">手动</span>
-            <img src="/asset/image/bulbLogo/22406.png" alt="" />
-            <span style="
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 8px;
-                margin-right: 40px;
-              ">自动</span>
-          </div>
-          <div class="temp-btn">
-            <button style="
-                width: 68px;
-                height: 40px;
-                border-radius: 4px;
-                background: linear-gradient(
-                  180deg,
-                  rgba(1, 206, 255, 1) 0%,
-                  rgba(0, 150, 229, 1) 100%
-                );
-                border: 1px solid rgba(95, 154, 251, 1);
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-              ">
-              色温
-            </button>
-            <span style="
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 12px;
-                margin-right: 8px;
-              ">4000k</span>
-            <img src="/asset/image/bulbLogo/22406.png" alt="" />
-            <span style="
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 8px;
-              ">3800k</span>
+          <div class="btn-box">
+            <div class="btn-item">
+              <div class="left">控制模式</div>
+              <div class="right">
+                <span>手动</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>自动</span>
+              </div>
+            </div>
+            <div class="btn-item">
+              <div class="left">
+                亮度
+              </div>
+              <div class="right">
+                <span>100lux</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>30lux</span>
+              </div>
+            </div>
+            <div class="btn-item">
+              <div class="left">
+                控制场景
+              </div>
+              <div class="right">
+                <span>手动</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>自动</span>
+              </div>
+            </div>
+            <div class="btn-item">
+              <div class="left">
+                色温
+              </div>
+              <div class="right">
+                <span>4000k</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>3800k</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </a-modal> -->
+    <div style="width: 100%; height: 60px;"></div>
+    <div class="button-box">
+      <button class="cancel" @click="executeVisible = false">取消</button>
+      <button class="execute">执行</button>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -307,19 +208,23 @@ import {
 
 // 初始化
 onMounted(() => {
-  const tree = props.treeData
+  const data = props.treeData[0]
   // 默认选中第一个分区
-  tree[0].selected = true
+  data.selected = true
   // 默认展示第一个分区的回路
-  buttons2.value = tree[0].children
+  buttons2.value = data.children
 })
 
 // 与父组件的交互  ===================================================================
 const props = defineProps({
   // 分区结构（照明区域 > 照明回路）
   treeData: {
-    type: Array
+    type: Array,
+    default: []
   },
+  line: {
+    type: Array
+  }
 });
 const emit = defineEmits(['changeArea']);
 
@@ -336,20 +241,13 @@ const togglePlan = () => {
 const showAllButtonsArea = ref(false);
 // 照明区域 - 分区 - 被选中的按钮  默认为1
 const selectedButton = ref('1');
-// 照明区域 - 区域切换（按钮点击）事件
-const selectButton = (button: any, index: number) => {
+// 照明区域 - 区域切换（按钮点击-单选）事件
+const selectButton = (button: any) => {
   // 当前选中按钮
   selectedButton.value = button;
-  // 分区只能单选
-  props.treeData.forEach(item => {
-    item.selected = false
-  })
+  // 重置
+  initMenu(1)
   button.selected = true
-  // 切换1级分区时，重置二级分区
-  buttons2.value.forEach(item => {
-    item.selected = false
-  })
-  showControlMode.value = false
   buttons2.value = button.children
   // 反选area
   emit('changeArea', []);
@@ -375,17 +273,8 @@ const togglePlan2 = () => {
   isPlanEnabled2.value = !isPlanEnabled2.value;
   // 禁用 - 则取消选中，增加禁止图标
   if (isPlanEnabled2.value) {
-    item.selected = false;
     item.stop = true
-    let level1 = String(selectedButton.value.id)
-    let arr = [level1]
-    buttons2.value.forEach(item => {
-      if (item.selected) {
-        arr.push(item.id)
-      }
-    })
-    emit('changeArea', arr)
-  // 启用 - 去除禁止图标
+    // 启用 - 去除禁止图标
   } else {
     item.stop = false
   }
@@ -410,12 +299,10 @@ const toggleAllSelection = () => {
   // 全选
   if (selectAllCheckbox.value) {
     buttons2.value.forEach((item) => {
-      if (!item.stop) {
-        item.selected = true;
-        arr.push(item.id)
-      } 
+      item.selected = true;
+      arr.push(item.id)
     });
-  // 全不选
+    // 全不选
   } else {
     buttons2.value.forEach((item) => {
       item.selected = false;
@@ -431,7 +318,7 @@ const toggleSelection = (button: any) => {
   zmhlid.value = button.id
   // 如果已被锁定，则展示禁用/启用状态跳出
   if (button.stop) {
-    return isPlanEnabled2.value = true
+    isPlanEnabled2.value = true
   } else {
     isPlanEnabled2.value = false
   }
@@ -455,19 +342,24 @@ const toggleSelection = (button: any) => {
         arr.push(item.id)
       }
     });
-    console.log(arr)
     emit('changeArea', arr)
   }
   // 用于展示控制模式
   if (button.selected) {
+    // 发生了选中事件
     showControlMode.value = true
-    thisButtonType.value = button.type
     thisButton.value = button
+    if (button.type == 3) {
+      showControlScene.value = true
+    } else {
+      showControlScene.value = false
+    }
   } else {
+    // 未发生选中 或 多选被取消
     showControlMode.value = false
-    thisButton.value = null
+    thisButton.value = { type: '0' }
   }
-  
+
 };
 // 照明回路 - 按钮区展开与收起状态
 const showAllButtons = ref(false);
@@ -479,16 +371,12 @@ const buttons2 = ref([]);
 // 控制模式 =======================================================================
 // 控制模式 - 决定该区域是否显示
 const showControlMode = ref(false);
-const thisButtonType = ref(null)
-const thisButton = ref(null)
-// 控制模式 - 当前选择按钮
-const selectedButton3 = ref('');
+const thisButton = ref({ type: '0' })
 // 控制模式 - 按钮切换
 const selectButton3 = (button3) => {
   thisButton.value.type = button3.type
-  thisButtonType.value = button3.type
   showControlScene.value = button3.name === '手动';
-  selectedButton4.value = ''; // 清空选中的控制场景按钮
+  selectedButton4.value = null; // 清空选中的控制场景按钮
 };
 
 // 控制场景 =======================================================================
@@ -502,7 +390,7 @@ const controlSceneButtons = ref([
   { label: '客流高峰', selected: false },
 ]);
 // 控制场景 - 当前选择按钮
-const selectedButton4 = ref('');
+const selectedButton4 = ref(null);
 // 控制场景 - 按钮切换
 const selectButton4 = (button4) => {
   selectedButton4.value = button4.label;
@@ -510,33 +398,112 @@ const selectButton4 = (button4) => {
 
 // 灯具参数 ========================================================================
 // 灯具参数 - 表格数据
-const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
+const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
 
+let trIndex = ref('-1');
 const handleRowClick = (index: any) => {
-    trindex.value = index;
-    if (index === trindex.value) {
-      console.log('tri');
-    }
-    // 显示模态框
-    logModalVisible.value = true;
-  };
+  trIndex.value = index;
+  if (index === trIndex.value) {
+    console.log('tri');
+  }
+};
 
-// 底部表格 ========================================================================
+// 内侧弹窗 ========================================================================
+const cxList = ref([
+  {
+    id: '1',
+    name: '站厅照明  1区',
+    manual: '手动',
+    automatic: '自动',
+    brightness: '100lux',
+    brightness2: '30lux',
+    manual2: '手动',
+    automatic2: '自动',
+    brightness3: '4000k',
+    brightness4: '3800k',
+  },
+  {
+    id: '2',
+    name: '站厅照明  2区',
+    manual: '手动',
+    automatic: '自动',
+    brightness: '100lux',
+    brightness2: '30lux',
+    manual2: '手动',
+    automatic2: '自动',
+    brightness3: '4000k',
+    brightness4: '3800k',
+  },
+  {
+    id: '3',
+    name: '站厅照明  3区',
+    manual: '手动',
+    automatic: '自动',
+    brightness: '100lux',
+    brightness2: '30lux',
+    manual2: '手动',
+    automatic2: '自动',
+    brightness3: '4000k',
+    brightness4: '3800k',
+  },
+]);
+// const cxList = cxList.value.concat(cxList.value)
+//撤销
+const delBtn = (id: any) => {
+  console.log(id);
+  cxList.value.pop(id);
+  console.log(cxList.value.length);
 
-const refresh = () => {
-    selectedButton.value = {};
+  if (cxList.value.length === 0) {
+    executeVisible.value = false;
+  }
+};
+// 其他业务 ========================================================================
+
+// 用于初始化5级联动的菜单
+const initMenu = (tier: number) => {
+  // 1 = 照明区域 - 切换时，重置以下所有菜单
+  if (tier == 1) {
+    // 切换前，清除照明回路的选中状态
+    buttons2.value.forEach(item => {
+      item.selected = false
+    })
+    // 切换后，清空所有选中状态
+    props.treeData.forEach(item => {
+      item.selected = false
+    })
+    // 控制模式 隐藏
     showControlMode.value = false;
+    // 控制场景 隐藏
     showControlScene.value = false;
-    selectedButton3.value = null;
+    // 灯具参数 隐藏
     selectedButton4.value = null;
+  } else if (tier == 2) {
+    // 控制场景 隐藏
+    showControlScene.value = false;
+    // 灯具参数 隐藏
+    selectedButton4.value = null;
+  }
+}
+// 刷新
+const refresh = () => {
+  executeVisible.value = false
+  selectedButton.value = '1';
+  emit('changeArea', []);
+  emit('changeArea', [1]);
+  showControlMode.value = false;
+  showControlScene.value = false;
+  selectedButton4.value = null;
 };
 // 执行确认
-const executevisible = ref<boolean>(false);
-  const showModal = () => {
-    executevisible.value = true;
-  };
+const executeVisible = ref<boolean>(false);
+const showModal = () => {
+  executeVisible.value = true;
+};
 </script>
 <style lang="less" scoped>
+@import "./dialogStyle.less";
+
 // 抽屉
 .drawer-item {
 
@@ -614,7 +581,7 @@ const executevisible = ref<boolean>(false);
     cursor: not-allowed;
   }
 
-  .openplan.enabled2 {
+  .openPlan.enabled2 {
     border: none;
     font-size: 14px;
     font-weight: 400;
@@ -627,7 +594,7 @@ const executevisible = ref<boolean>(false);
     color: white;
   }
 
-  .openplan.disabled2 {
+  .openPlan.disabled2 {
     border: none;
     font-size: 14px;
     font-weight: 400;
@@ -639,7 +606,7 @@ const executevisible = ref<boolean>(false);
     background-color: red;
   }
 
-  .openplan:disabled {
+  .openPlan:disabled {
     cursor: not-allowed;
   }
 
@@ -714,7 +681,7 @@ const executevisible = ref<boolean>(false);
   }
 
   .area,
-  .btnarea,
+  .btnArea,
   .control-mode-btn-area,
   .control-scene-btn-area {
     margin-left: -17px;
@@ -828,7 +795,6 @@ const executevisible = ref<boolean>(false);
     position: fixed;
     bottom: 0;
     right: 0;
-    margin-bottom: 10px;
   }
 
   .execute {
@@ -836,6 +802,7 @@ const executevisible = ref<boolean>(false);
     width: 74px;
     height: 40px;
     opacity: 1;
+    cursor: pointer;
     border-radius: 4px;
     background: rgba(67, 136, 251, 1);
     font-size: 14px;
@@ -848,6 +815,7 @@ const executevisible = ref<boolean>(false);
   .flushed {
     width: 74px;
     height: 40px;
+    cursor: pointer;
     opacity: 1;
     border-radius: 4px;
     font-size: 14px;
@@ -857,50 +825,6 @@ const executevisible = ref<boolean>(false);
     border: 1px solid rgba(193, 197, 204, 1);
   }
 
-  .tabreboot,
-  .tabdelete {
-    border: none;
-    background-color: rgba(0, 0, 0, 0);
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: 20px;
-    color: rgba(67, 136, 251, 1);
-  }
-
-  .tabreboot {
-    margin-right: 8px;
-  }
-
-  .add {
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    border-radius: 4px;
-    background: rgba(67, 136, 251, 1);
-    border: rgba(67, 136, 251, 1);
-    font-size: 14px;
-    font-weight: 400;
-    color: white;
-  }
-
-  .divadd {
-    width: 100%;
-    height: 64px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    margin-bottom: 10px;
-    margin-right: 20px;
-  }
-
-  .atable {
-    margin-top: 20px;
-  }
-
   :deep(.ant-table-pagination) {
     visibility: hidden;
   }
@@ -1006,9 +930,12 @@ const executevisible = ref<boolean>(false);
     display: flex;
     align-items: center;
   }
+
   .zmhlbtn {
     position: relative;
   }
+
+  // 禁用图标
   .anticon-stop {
     position: absolute;
     right: 3px;