fix:电梯系统/照明系统 代码规范

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

@@ -1,286 +1,276 @@
 <template>
-    <div class="lighting-box">
-        <div class="lighting-img-box">
-            <!-- 左上角，区域切换 -->
-            <div class="btn-box">
-                <button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
-            </div>
-            <!-- 楼层区域 -->
-            <div class="area">
-                <div 
-                v-for="(item, index) in treeData" 
-                :class="computedClass(item.id)"
-                @click="changeThisArea([item])"
-                :key="index">
-                    <div v-for="(v, i) in item.childList" :key="i" class="light-group">
-                        <div class="group-shadow" @click.stop="changeThisArea([item, v])">
-                            <div :class="computedClass(v.id)" class="shadow-box"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- 照明设备 -->
-            <div class="lights">
-                <light v-for="(item, index) in bulbs" 
-                :key="index" 
-                :styleObject="item.styleText" 
-                :type="item.type" 
-                :visible="item.visible">
-                </light>
+  <div class="lighting-box">
+    <div class="lighting-img-box">
+      <!-- 左上角，区域切换 -->
+      <div class="btn-box">
+        <button v-for="item in floorData" class="btn-item" @click="changeFloor(item.childList)">{{
+          item.name
+        }}</button>
+      </div>
+      <!-- 楼层区域 -->
+      <div class="area">
+        <div
+          v-for="(item, index) in treeData"
+          :class="computedClass(item.id)"
+          @click="changeThisArea([item])"
+          :key="index">
+          <div v-for="(v, i) in item.childList" :key="i" class="light-group">
+            <div class="group-shadow" @click.stop="changeThisArea([item, v])">
+              <div :class="computedClass(v.id)" class="shadow-box"></div>
             </div>
+          </div>
         </div>
-        <!-- 右侧抽屉的触发按钮 -->
-        <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
-            <double-left-outlined class="drawer-icon" style="color: white" />
-        </div>
-        <!-- 左侧抽屉的关闭按钮 -->
-        <div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
-            <double-right-outlined class="drawer-icon" style="color: white;" />
-        </div>
-        <!-- 右侧抽屉 -->
-        <a-drawer
-        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"
-        id="drawer"
-        :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
-            <a-tabs v-model:activeKey="activeKey">
-                <a-tab-pane key="1" tab="控制面板">
-                    <tabs1 
-                    ref="tabs1Ref"
-                    @changeArea="changeArea" 
-                    @reset="reset" 
-                    :treeData="treeData" 
-                    ></tabs1>
-                </a-tab-pane>
-                <a-tab-pane key="2" tab="计划列表" force-render>
-                    <tabs2></tabs2>
-                </a-tab-pane>
-                <a-tab-pane key="3" tab="日志">
-                    <tabs3></tabs3>
-                </a-tab-pane>
-            </a-tabs>
-        </a-drawer>
+      </div>
+      <!-- 照明设备 -->
+      <div class="lights">
+        <light
+          v-for="(item, index) in bulbs"
+          :key="index"
+          :styleObject="item.styleText"
+          :type="item.type"
+          :visible="item.visible" />
+      </div>
     </div>
+    <!-- 右侧抽屉的触发按钮 -->
+    <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
+      <double-left-outlined class="drawer-icon" style="color: white" />
+    </div>
+    <!-- 左侧抽屉的关闭按钮 -->
+    <div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
+      <double-right-outlined class="drawer-icon" style="color: white" />
+    </div>
+    <!-- 右侧抽屉 -->
+    <a-drawer
+      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"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板">
+          <tabs1 ref="tabs1Ref" @changeArea="changeArea" @reset="reset" :treeData="treeData" />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render>
+          <tabs2 />
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="日志">
+          <tabs3 />
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+  </div>
 </template>
-  
+
 <script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  // 组件
+  import light from './light.vue';
+  import tabs1 from './tabs1.vue';
+  import tabs2 from './tabs2.vue';
+  import tabs3 from './tabs3.vue';
+  // 请求
+  import { http } from '/nerv-lib/util/http';
+  import { lightingManage } from '/@/api/IlluminationInfo';
+  // ICON
+  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 
-import { ref, onMounted } from 'vue';
-// 组件
-import light from './light.vue';
-import tabs1 from './tabs1.vue'
-import tabs2 from './tabs2.vue'
-import tabs3 from './tabs3.vue'
-// 请求
-import { http } from '/nerv-lib/util/http';
-import { lightingManage } from '/@/api/IlluminationInfo';
-// ICON
-import {
-    DoubleLeftOutlined,
-    DoubleRightOutlined
-} from '@ant-design/icons-vue';
+  // 初始化 =======================================================
 
-
-// 初始化 =======================================================
-
-onMounted(() => {
+  onMounted(() => {
     // 获得分区与线路的结构
-    getAllArea()
-})
+    getAllArea();
+  });
 
-// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
-const preload = ref(false)
+  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
+  const preload = ref(false);
 
+  // 分层业务 =====================================================
 
-// 分层业务 =====================================================
-
-// 所有楼层的数据
-const floorData = ref([])
-// 左上角分层切换
-const changeFloor = (area: any) => {
+  // 所有楼层的数据
+  const floorData = ref([]);
+  // 左上角分层切换
+  const changeFloor = (area: any) => {
     // 重置数据
-    reset()
+    reset();
     // 重置视图
-    changeArea(['1'])
+    changeArea(['1']);
     // 切换楼层数据
-    treeData.value = area
+    treeData.value = area;
     // 默认选择第一项
-    treeData.value[0].selected = true
-}
+    treeData.value[0].selected = true;
+  };
 
+  // 分区业务 =====================================================
 
-// 分区业务 =====================================================
-
-// 分区结构树
-const treeData = ref([])
-// 当前选中的分区序列 - 用于样式渲染
-const area = ref(['1'])
-// 线路内小灯泡 - 此处位置需前端写死
-const bulbs = ref([
+  // 分区结构树
+  const treeData = ref([]);
+  // 当前选中的分区序列 - 用于样式渲染
+  const area = ref(['1']);
+  // 线路内小灯泡 - 此处位置需前端写死
+  const bulbs = ref([
     {
-        styleText: { left: '180px', bottom: '200px' },
-        area: 1,
-        type: 1,
-        visible: true
+      styleText: { left: '180px', bottom: '200px' },
+      area: 1,
+      type: 1,
+      visible: true,
     },
     {
-        styleText: { left: '230px', bottom: '125px' },
-        area: 1,
-        type: 2,
-        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: '320px', bottom: '140px' },
+      area: 1,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '245px', bottom: '230px' },
-        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: '405px', bottom: '230px' },
+      area: 2,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '460px', bottom: '180px' },
-        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: '360px', bottom: '275px' },
+      area: 2,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '715px', bottom: '320px' },
-        area: 3,
-        type: 1,
-        visible: true
+      styleText: { left: '715px', bottom: '320px' },
+      area: 3,
+      type: 1,
+      visible: true,
     },
-])
-// 由子组件控制的分区与线路切换
-const changeArea = (result: any) => {
-    console.log(result,'changeArea')
+  ]);
+  // 由子组件控制的分区与线路切换
+  const changeArea = (result: any) => {
+    console.log(result, 'changeArea');
     // 数组
     if (Array.isArray(result)) {
-        area.value = result
-    // 不是数组
+      area.value = result;
+      // 不是数组
     } else {
-        area.value.length = 0
-        area.value[0] = String(result)
-    } 
-}
-// 由当前组件控制的分区切换
-const changeThisArea = (result: any) => {
-    console.log(result, 'changeThisArea')
+      area.value.length = 0;
+      area.value[0] = String(result);
+    }
+  };
+  // 由当前组件控制的分区切换
+  const changeThisArea = (result: any) => {
+    console.log(result, 'changeThisArea');
     // 修改前，将所有选项置空
-    reset()
+    reset();
     let level1 = result[0];
-    area.value.length = 0
+    area.value.length = 0;
     // 只选择了分区
     if (result.length === 1) {
-        result[0].selected = true
-        area.value.push(result[0].id)
-        // 控制子组件按钮区
-        tabs1Ref.value.changeArea(result[0])
-    // 选择了分区 + 线路
+      result[0].selected = true;
+      area.value.push(result[0].id);
+      // 控制子组件按钮区
+      tabs1Ref.value.changeArea(result[0]);
+      // 选择了分区 + 线路
     } else if (result.length === 2) {
-        // 如果没有分区，默认选择第一个
-        if (!level1) {
-            level1 = treeData.value[0]
-        }
-        // 选中状态都设为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])
+      // 如果没有分区，默认选择第一个
+      if (!level1) {
+        level1 = treeData.value[0];
+      }
+      // 选中状态都设为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]);
     }
-}
-// 重置分区树所有当前选项
-const reset = () => {
+  };
+  // 重置分区树所有当前选项
+  const reset = () => {
     treeData.value.forEach((item: any) => {
-        item.selected = false
-        item.childList.forEach((i: any) => {
-            i.selected = false
-        })
-    })
-}
-// 俯视图分区选中计算函数
-const computedClass = (string: string) => {
+      item.selected = false;
+      item.childList.forEach((i: any) => {
+        i.selected = false;
+      });
+    });
+  };
+  // 俯视图分区选中计算函数
+  const computedClass = (string: string) => {
     if (area.value.indexOf(string) != -1) {
-        return `isActive area-item area${string}`
+      return `isActive area-item area${string}`;
     } else {
-        return `area-item area${string}`
+      return `area-item area${string}`;
     }
-}
+  };
 
-// 获得所有分区
-const getAllArea = () => {
-    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
-        const data = res.data
-        floorData.value = data
-        /** 只在前端使用的变量
-         * @param id 用于判断样式和层级的前端属性
-         * @param selected 用于表示是否选中的前端属性
-         */
-        data.forEach((floor: any) => {
-            floor.childList.forEach((item: any, index: number) => {
-                if (index == 0) {
-                    item.selected = true
-                } else {
-                    item.selected = false
-                }
-                item.id = String(index + 1)
-                item.childList.forEach((v: any, i: number) => {
-                    v.selected = false
-                    v.id = (index + 1) + '-' + (i + 1)
-                })
-            })
-        })
-        // 默认展示 线路 1-1
-        treeData.value = data[0].childList
-        // 开始预加载
-        preload.value = true
-    })
-}
+  // 获得所有分区
+  const getAllArea = () => {
+    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then((res) => {
+      const data = res.data;
+      floorData.value = data;
+      /** 只在前端使用的变量
+       * @param id 用于判断样式和层级的前端属性
+       * @param selected 用于表示是否选中的前端属性
+       */
+      data.forEach((floor: any) => {
+        floor.childList.forEach((item: any, index: number) => {
+          if (index == 0) {
+            item.selected = true;
+          } else {
+            item.selected = false;
+          }
+          item.id = String(index + 1);
+          item.childList.forEach((v: any, i: number) => {
+            v.selected = false;
+            v.id = index + 1 + '-' + (i + 1);
+          });
+        });
+      });
+      // 默认展示 线路 1-1
+      treeData.value = data[0].childList;
+      // 开始预加载
+      preload.value = true;
+    });
+  };
 
-// 抽屉业务 =====================================================
+  // 抽屉业务 =====================================================
 
-// 抽屉 - 当前选择的tab
-let activeKey = ref('1');
-// 抽屉 - 打开状态
-let visible = ref(false);
-// 抽屉 - 开关事件
-const toggleDrawer = () => {
+  // 抽屉 - 当前选择的tab
+  let activeKey = ref('1');
+  // 抽屉 - 打开状态
+  let visible = ref(false);
+  // 抽屉 - 开关事件
+  const toggleDrawer = () => {
     visible.value = !visible.value;
-};
-// 抽屉tab1组件的引用
-const tabs1Ref = ref()
-
+  };
+  // 抽屉tab1组件的引用
+  const tabs1Ref = ref();
 </script>
 <style lang="less" scoped>
-@import "./index.less";
-// 当前选中分区的样式
-.isActive {
+  @import './index.less';
+
+  // 当前选中分区的样式
+  .isActive {
     border: 3px solid white !important;
-}
-// 抽屉顶部tab按钮样式
-:deep(.ant-tabs-tab-btn) {
+  }
+
+  // 抽屉顶部tab按钮样式
+  :deep(.ant-tabs-tab-btn) {
     color: white;
-}
+  }
 </style>
-