add:照明系统交互
This commit is contained in:
chenpingsen
@@ -3,25 +3,31 @@
|
||||
<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>
|
||||
<button class="btn-item" @click=changeFloor(1)>1F</button>
|
||||
<button class="btn-item" @click=changeFloor(2)>2F</button>
|
||||
</div>
|
||||
<!-- 楼层区域 -->
|
||||
<div class="area">
|
||||
<div
|
||||
v-for="(item, index) in treeData"
|
||||
:class="computedClass(String(item.id))"
|
||||
@click="getArea(item)"
|
||||
:class="computedClass(item.id)"
|
||||
@click="changeThisArea([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 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>
|
||||
<light v-for="(item, index) in bulbs"
|
||||
:key="index"
|
||||
:styleObject="item.styleText"
|
||||
:type="item.type"
|
||||
:visible="item.visible">
|
||||
</light>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧抽屉的触发按钮 -->
|
||||
@@ -44,7 +50,7 @@
|
||||
: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>
|
||||
<tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||||
<tabs2></tabs2>
|
||||
@@ -59,94 +65,170 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import { ref } from 'vue';
|
||||
import { treeData } from './treeData'
|
||||
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';
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
// 分区 - 当前选择的分区序号 - 默认选择一区
|
||||
// 类声明 =======================================================
|
||||
|
||||
interface items {
|
||||
id: string,
|
||||
|
||||
}
|
||||
|
||||
// 初始化 =======================================================
|
||||
|
||||
onMounted(() => {
|
||||
http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => {
|
||||
const data = res.data
|
||||
/** 由前端创建的，只在前端使用的变量
|
||||
* @param id 用于判断样式和层级的前端属性
|
||||
* @param selected 用于表示是否选中的前端属性
|
||||
*/
|
||||
data.forEach((item, index) => {
|
||||
if (index == 0) {
|
||||
item.selected = true
|
||||
} else {
|
||||
item.selected = false
|
||||
}
|
||||
item.id = String(index + 1)
|
||||
item.children = []
|
||||
// deviceGroup后端返回了对象，此处转化为数组
|
||||
let i = 1;
|
||||
for (let obj in item.deviceGroup) {
|
||||
item.deviceGroup[obj].selected = false
|
||||
item.deviceGroup[obj].id = String((index + 1) + '-' + i++)
|
||||
item.children.push(item.deviceGroup[obj])
|
||||
}
|
||||
})
|
||||
treeData.value = data
|
||||
})
|
||||
})
|
||||
|
||||
// 分层业务 =====================================================
|
||||
|
||||
// 左上角分层切换
|
||||
const changeFloor = (area: number) => {
|
||||
if (area == 1) {
|
||||
console.log('1F')
|
||||
} else if (area == 2) {
|
||||
console.log('2F')
|
||||
}
|
||||
}
|
||||
|
||||
// 分区业务 =====================================================
|
||||
|
||||
// 分区结构树
|
||||
const treeData = ref([])
|
||||
// 当前选中的分区id
|
||||
const nowArea = ref('1')
|
||||
// 当前选中的分区序号 - 用于样式渲染
|
||||
const area = ref(['1'])
|
||||
// 分区 - 分区小灯泡 - 此处位置需前端写死
|
||||
// 线路内小灯泡 - 此处位置需前端写死
|
||||
const bulbs = ref([
|
||||
{
|
||||
styleText: { left: '190px', bottom: '200px' },
|
||||
styleText: { left: '180px', bottom: '200px' },
|
||||
area: 1,
|
||||
type: 1,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '245px', bottom: '125px' },
|
||||
styleText: { left: '230px', bottom: '125px' },
|
||||
area: 1,
|
||||
type: 2,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '355px', bottom: '160px' },
|
||||
styleText: { left: '320px', bottom: '140px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '295px', bottom: '230px' },
|
||||
styleText: { left: '245px', bottom: '230px' },
|
||||
area: 1,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '425px', bottom: '230px' },
|
||||
styleText: { left: '405px', bottom: '230px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '470px', bottom: '190px' },
|
||||
styleText: { left: '460px', bottom: '180px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '380px', bottom: '275px' },
|
||||
styleText: { left: '360px', bottom: '275px' },
|
||||
area: 2,
|
||||
type: 3,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
styleText: { left: '700px', bottom: '320px' },
|
||||
styleText: { left: '715px', 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) => {
|
||||
// 如果传入的值是数组
|
||||
// 由子组件控制的分区与线路切换
|
||||
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)
|
||||
} 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)
|
||||
}
|
||||
nowArea.value = level1.id
|
||||
}
|
||||
// 重置分区树所有当前选项
|
||||
const reset = () => {
|
||||
treeData.value.forEach(item => {
|
||||
item.selected = false
|
||||
item.children.forEach(i => {
|
||||
i.selected = false
|
||||
})
|
||||
})
|
||||
}
|
||||
// 俯视图分区选中计算函数
|
||||
const computedClass = (string: string) => {
|
||||
if (area.value.indexOf(string) != -1) {
|
||||
return `isActive area-item area${string}`
|
||||
@@ -154,6 +236,9 @@ const computedClass = (string: string) => {
|
||||
return `area-item area${string}`
|
||||
}
|
||||
}
|
||||
|
||||
// 抽屉业务 =====================================================
|
||||
|
||||
// 抽屉 - 当前选择的tab
|
||||
let activeKey = ref('1');
|
||||
// 抽屉 - 打开状态
|
||||
@@ -166,9 +251,11 @@ const toggleDrawer = () => {
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./index.less";
|
||||
// 当前选中分区的样式
|
||||
.isActive {
|
||||
border: 3px solid white !important;
|
||||
}
|
||||
// 抽屉顶部tab按钮样式
|
||||
:deep(.ant-tabs-tab-btn) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user