164 lines
4.6 KiB
Vue
164 lines
4.6 KiB
Vue
<template>
|
||
<div class="lighting-box">
|
||
<div class="lighting-img-box">
|
||
<!-- 左上角，区域切换 -->
|
||
<div class="btn-box">
|
||
<button class="btn-item">1F</button>
|
||
<button class="btn-item">2F</button>
|
||
<button class="btn-item">站台</button>
|
||
</div>
|
||
<!-- 楼层区域 -->
|
||
<div class="area">
|
||
<div
|
||
v-for="(item, index) in treeData"
|
||
:class="computedClass(item.id)"
|
||
@click="getArea(item.id)"
|
||
: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.id)"></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="Odrawer"
|
||
: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>
|
||
|
||
</a-tab-pane>
|
||
<a-tab-pane key="3" tab="日志"></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'
|
||
// ICON
|
||
import {
|
||
DoubleLeftOutlined,
|
||
DoubleRightOutlined
|
||
} from '@ant-design/icons-vue';
|
||
|
||
// 分区 - 当前选择的分区 - 默认选择一区
|
||
let 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 getArea = (result: any) => {
|
||
// 如果传入的值是数组
|
||
if (Array.isArray(result)) {
|
||
area.value = result
|
||
// 如果不是数组
|
||
} else {
|
||
area.value.length = 0
|
||
area.value[0] = String(result)
|
||
}
|
||
}
|
||
// 分区 - 多个分区切换，只有照明回路能够触发多个分区
|
||
// 分区 - 样式函数
|
||
const computedClass = (number: number) => {
|
||
if (area.value.indexOf(number) != -1) {
|
||
return `isActive area-item area${number}`
|
||
} else {
|
||
return `area-item area${number}`
|
||
}
|
||
}
|
||
|
||
// 抽屉 - 当前选择的tab
|
||
let activeKey = ref('1');
|
||
// 抽屉 - 打开状态
|
||
let visible = ref(false);
|
||
// 抽屉 - 开关事件
|
||
const toggleDrawer = () => {
|
||
visible.value = !visible.value;
|
||
};
|
||
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import "./indexs.less";
|
||
.isActive {
|
||
border: 3px solid white !important;
|
||
}
|
||
:deep(.ant-tabs-tab-btn) {
|
||
color: white;
|
||
}
|
||
</style>
|
||
|