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

<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" />
      </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';

  // 初始化 =======================================================

  onMounted(() => {
    // 获得分区与线路的结构
    getAllArea();
  });

  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
  const preload = ref(false);

  // 分层业务 =====================================================

  // 所有楼层的数据
  const floorData = ref([]);
  // 左上角分层切换
  const changeFloor = (area: any) => {
    // 重置数据
    reset();
    // 重置视图
    changeArea(['1']);
    // 切换楼层数据
    treeData.value = area;
    // 默认选择第一项
    treeData.value[0].selected = true;
  };

  // 分区业务 =====================================================

  // 分区结构树
  const treeData = ref([]);
  // 当前选中的分区序列 - 用于样式渲染
  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 changeArea = (result: any) => {
    console.log(result, 'changeArea');
    // 数组
    if (Array.isArray(result)) {
      area.value = result;
      // 不是数组
    } else {
      area.value.length = 0;
      area.value[0] = String(result);
    }
  };
  // 由当前组件控制的分区切换
  const changeThisArea = (result: any) => {
    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) {
        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 = () => {
    treeData.value.forEach((item: any) => {
      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}`;
    } else {
      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;
    });
  };

  // 抽屉业务 =====================================================

  // 抽屉 - 当前选择的tab
  let activeKey = ref('1');
  // 抽屉 - 打开状态
  let visible = ref(false);
  // 抽屉 - 开关事件
  const toggleDrawer = () => {
    visible.value = !visible.value;
  };
  // 抽屉tab1组件的引用
  const tabs1Ref = ref();
</script>
<style lang="less" scoped>
  @import './index.less';

  // 当前选中分区的样式
  .isActive {
    border: 3px solid white !important;
  }

  // 抽屉顶部tab按钮样式
  :deep(.ant-tabs-tab-btn) {
    color: white;
  }
</style>