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 class="btn-item" @click=changeArea(1)>1F</button>
                <button class="btn-item" @click=changeArea(2)>2F</button>
                <button class="btn-item" @click=changeArea(3)>站台</button>
            </div>
            <!-- 楼层区域 -->
            <div class="area">
                <div 
                v-for="(item, index) in treeData" 
                :class="computedClass(String(item.id))"
                @click="getArea(item)"
                :key="index">
                    <div v-for="(v, i) in item.children" :key="i" class="light-group">
                        <div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v)"></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>
        </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"
        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 @changeArea="getArea" :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>
</template>
  
<script setup lang="ts">

import { ref } from 'vue';
import { treeData } from './treeData'
import light from './light.vue';
import tabs1 from './tabs1.vue'
import tabs2 from './tabs2.vue'
import tabs3 from './tabs3.vue'
// ICON
import {
    DoubleLeftOutlined,
    DoubleRightOutlined
  } from '@ant-design/icons-vue';

// 分区 - 当前选择的分区序号 - 默认选择一区
const area = ref(['1'])
// 分区 - 分区小灯泡 - 此处位置需前端写死
const bulbs = ref([
    {
        styleText: { left: '190px', bottom: '200px' },
        area: 1,
        type: 1,
        visible: true
    },
    {
        styleText: { left: '245px', bottom: '125px' },
        area: 1,
        type: 2,
        visible: true
    },
    {
        styleText: { left: '355px', bottom: '160px' },
        area: 1,
        type: 3,
        visible: true
    },
    {
        styleText: { left: '295px', bottom: '230px' },
        area: 1,
        type: 3,
        visible: true
    },
    {
        styleText: { left: '425px', bottom: '230px' },
        area: 2,
        type: 3,
        visible: true
    },
    {
        styleText: { left: '470px', bottom: '190px' },
        area: 2,
        type: 3,
        visible: true
    },
    {
        styleText: { left: '380px', bottom: '275px' },
        area: 2,
        type: 3,
        visible: true
    },
    {
        styleText: { left: '700px', bottom: '320px' },
        area: 3,
        type: 1,
        visible: true
    },
])

// 分区 - 左上角分区切换
const changeArea = (area: number) => {
    if (area == 1) {
        console.log('1F')
    } else if (area == 2) {
        console.log('2F')
    } else if (area == 3) {
        console.log('站台')
    }
}
// 分区 - 单个分区切换
const getArea = (result: any) => {
    // 如果传入的值是数组
    if (Array.isArray(result)) {
        area.value = result
    // 如果不是数组
    } else {
        area.value.length = 0
        area.value[0] = String(result)
    } 
}
// 分区 - 样式函数
const computedClass = (string: string) => {
    if (area.value.indexOf(string) != -1) {
        return `isActive area-item area${string}`
    } else {
        return `area-item area${string}`
    }
}
// 抽屉 - 当前选择的tab
let activeKey = ref('1');
// 抽屉 - 打开状态
let visible = ref(false);
// 抽屉 - 开关事件
const toggleDrawer = () => {
    visible.value = !visible.value;
};

</script>
<style lang="less" scoped>
@import "./index.less";
.isActive {
    border: 3px solid white !important;
}
:deep(.ant-tabs-tab-btn) {
    color: white;
}
</style>