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">1F</button>
                <button class="btn-item">2F</button>
                <button class="btn-item">站台</button>
            </div>
            <!-- 楼层区域 -->
            <div class="area">
                <div class="area-item area1" :class="{ 'isActive': area === 1 }" @click="getArea(1)">
                    <div class="light-group">
                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
                    </div>
                    <div class="light-group">
                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
                    </div>
                </div>
                <div class="area-item area2" @click="getArea(2)">
                    <div class="light-group">
                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.1)"></div>
                    </div>
                    <div class="light-group">
                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.2)"></div>
                    </div>
                </div>
                <div class="area-item area3" @click="getArea(3)">
                    <div class="light-group">
                        <div class="group-shadow group-shadow3" @click.stop="getArea(3.1)"></div>
                    </div>
                </div>
                <div class="area-item area4" @click="getArea(4)">
                    <div class="light-group">
                        <div class="group-shadow group-shadow4" @click.stop="getArea(4.1)"></div>
                    </div>
                </div>
            </div>
            <!-- 照明设备 -->
            <div class="lights">
                <light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
                <light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
                <light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
                <light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light> 
                <light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light> 
                <light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light> 
                <light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light> 
            </div>
        </div>
        <!-- 右侧抽屉的触发按钮 -->
        <div class="drawer-box" v-if="!visible">
            <double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
        </div>
    </div>
    
</template>
  
<script setup lang="ts">

import { ref } from 'vue';
import light from './light.vue';
import {
    DoubleLeftOutlined,
    DoubleRightOutlined
  } from '@ant-design/icons-vue';

let area = ref(1)
let visible = ref(false)


const getArea = (number: any) => {
    alert(number)
};
</script>
<style lang="less" scoped>
@import "./indexs.less";
.isActive {
    border: 2px solid white !important;
}
</style>