chenpingsen
4 months ago
7 changed files with 1242 additions and 1236 deletions
@ -1,53 +1,47 @@ |
|||||
<template> |
<template> |
||||
<div class="map-box"> |
<div class="map-box"> |
||||
<div class="map"> |
<div class="map"> |
||||
<liftInfo></liftInfo> |
<liftInfo /> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { ref, onMounted } from 'vue'; |
import { ref, onMounted } from 'vue'; |
||||
import liftInfo from './liftInfo.vue' |
import liftInfo from './liftInfo.vue'; |
||||
// 请求 |
// 请求 |
||||
import { message } from 'ant-design-vue'; |
|
||||
|
|
||||
// 初始化 =========================================================== |
// 初始化 =========================================================== |
||||
|
|
||||
onMounted(() => { |
onMounted(() => {}); |
||||
|
|
||||
}) |
|
||||
|
|
||||
// tab页部分 ======================================================== |
|
||||
|
|
||||
// 表格数据 |
|
||||
const dataSource = ref([]); |
|
||||
|
|
||||
|
// tab页部分 ======================================================== |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource = ref([]); |
||||
</script> |
</script> |
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
.map-box { |
.map-box { |
||||
// 颜色变量，用于区别颜色 |
// 颜色变量，用于区别颜色 |
||||
|
|
||||
// 正常 - 开启 - 上行 -下行 |
// 正常 - 开启 - 上行 -下行 |
||||
--on: #0DFFA4; |
--on: #0dffa4; |
||||
// 关闭 |
// 关闭 |
||||
--off: #BFCDE2; |
--off: #bfcde2; |
||||
// 暂停 - 维修 |
// 暂停 - 维修 |
||||
--pause: #FFBC46; |
--pause: #ffbc46; |
||||
// 告警 - 急停 |
// 告警 - 急停 |
||||
--stop: #F36163; |
--stop: #f36163; |
||||
// 故障 |
// 故障 |
||||
--fault: #FF7636; |
--fault: #ff7636; |
||||
// 未知 |
// 未知 |
||||
--unknown: #A742FF; |
--unknown: #a742ff; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
.map { |
.map { |
||||
width: 1280px; |
width: 1280px; |
||||
height: 720px; |
height: 720px; |
||||
background-image: url(../image/bg.jpg); |
background-image: url(../image/bg.jpg); |
||||
|
} |
||||
} |
} |
||||
} |
|
||||
|
|
||||
</style> |
</style> |
||||
|
|||||
@ -1,286 +1,276 @@ |
|||||
<template> |
<template> |
||||
<div class="lighting-box"> |
<div class="lighting-box"> |
||||
<div class="lighting-img-box"> |
<div class="lighting-img-box"> |
||||
<!-- 左上角，区域切换 --> |
<!-- 左上角，区域切换 --> |
||||
<div class="btn-box"> |
<div class="btn-box"> |
||||
<button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button> |
<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 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"> |
|
||||
</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> |
</div> |
||||
<!-- 右侧抽屉 --> |
</div> |
||||
<a-drawer |
<!-- 照明设备 --> |
||||
v-model:visible="visible" |
<div class="lights"> |
||||
class="drawer-item" |
<light |
||||
width="496" |
v-for="(item, index) in bulbs" |
||||
:forceRender="preload" |
:key="index" |
||||
placement="right" |
:styleObject="item.styleText" |
||||
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" |
:type="item.type" |
||||
:closable="false" |
:visible="item.visible" /> |
||||
id="drawer" |
</div> |
||||
: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" |
|
||||
></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> |
</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> |
</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'; |
|
||||
|
|
||||
|
<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(() => { |
onMounted(() => { |
||||
// 获得分区与线路的结构 |
// 获得分区与线路的结构 |
||||
getAllArea() |
getAllArea(); |
||||
}) |
}); |
||||
|
|
||||
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错 |
|
||||
const preload = ref(false) |
|
||||
|
|
||||
|
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错 |
||||
|
const preload = ref(false); |
||||
|
|
||||
// 分层业务 ===================================================== |
// 分层业务 ===================================================== |
||||
|
|
||||
// 所有楼层的数据 |
// 所有楼层的数据 |
||||
const floorData = ref([]) |
const floorData = ref([]); |
||||
// 左上角分层切换 |
// 左上角分层切换 |
||||
const changeFloor = (area: any) => { |
const changeFloor = (area: any) => { |
||||
// 重置数据 |
// 重置数据 |
||||
reset() |
reset(); |
||||
// 重置视图 |
// 重置视图 |
||||
changeArea(['1']) |
changeArea(['1']); |
||||
// 切换楼层数据 |
// 切换楼层数据 |
||||
treeData.value = area |
treeData.value = area; |
||||
// 默认选择第一项 |
// 默认选择第一项 |
||||
treeData.value[0].selected = true |
treeData.value[0].selected = true; |
||||
} |
}; |
||||
|
|
||||
|
// 分区业务 ===================================================== |
||||
|
|
||||
// 分区业务 ===================================================== |
// 分区结构树 |
||||
|
const treeData = ref([]); |
||||
// 分区结构树 |
// 当前选中的分区序列 - 用于样式渲染 |
||||
const treeData = ref([]) |
const area = ref(['1']); |
||||
// 当前选中的分区序列 - 用于样式渲染 |
// 线路内小灯泡 - 此处位置需前端写死 |
||||
const area = ref(['1']) |
const bulbs = ref([ |
||||
// 线路内小灯泡 - 此处位置需前端写死 |
|
||||
const bulbs = ref([ |
|
||||
{ |
{ |
||||
styleText: { left: '180px', bottom: '200px' }, |
styleText: { left: '180px', bottom: '200px' }, |
||||
area: 1, |
area: 1, |
||||
type: 1, |
type: 1, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
{ |
{ |
||||
styleText: { left: '230px', bottom: '125px' }, |
styleText: { left: '230px', bottom: '125px' }, |
||||
area: 1, |
area: 1, |
||||
type: 2, |
type: 2, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
{ |
{ |
||||
styleText: { left: '320px', bottom: '140px' }, |
styleText: { left: '320px', bottom: '140px' }, |
||||
area: 1, |
area: 1, |
||||
type: 3, |
type: 3, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
{ |
{ |
||||
styleText: { left: '245px', bottom: '230px' }, |
styleText: { left: '245px', bottom: '230px' }, |
||||
area: 1, |
area: 1, |
||||
type: 3, |
type: 3, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
{ |
{ |
||||
styleText: { left: '405px', bottom: '230px' }, |
styleText: { left: '405px', bottom: '230px' }, |
||||
area: 2, |
area: 2, |
||||
type: 3, |
type: 3, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
{ |
{ |
||||
styleText: { left: '460px', bottom: '180px' }, |
styleText: { left: '460px', bottom: '180px' }, |
||||
area: 2, |
area: 2, |
||||
type: 3, |
type: 3, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
{ |
{ |
||||
styleText: { left: '360px', bottom: '275px' }, |
styleText: { left: '360px', bottom: '275px' }, |
||||
area: 2, |
area: 2, |
||||
type: 3, |
type: 3, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
{ |
{ |
||||
styleText: { left: '715px', bottom: '320px' }, |
styleText: { left: '715px', bottom: '320px' }, |
||||
area: 3, |
area: 3, |
||||
type: 1, |
type: 1, |
||||
visible: true |
visible: true, |
||||
}, |
}, |
||||
]) |
]); |
||||
// 由子组件控制的分区与线路切换 |
// 由子组件控制的分区与线路切换 |
||||
const changeArea = (result: any) => { |
const changeArea = (result: any) => { |
||||
console.log(result,'changeArea') |
console.log(result, 'changeArea'); |
||||
// 数组 |
// 数组 |
||||
if (Array.isArray(result)) { |
if (Array.isArray(result)) { |
||||
area.value = result |
area.value = result; |
||||
// 不是数组 |
// 不是数组 |
||||
} else { |
} else { |
||||
area.value.length = 0 |
area.value.length = 0; |
||||
area.value[0] = String(result) |
area.value[0] = String(result); |
||||
} |
} |
||||
} |
}; |
||||
// 由当前组件控制的分区切换 |
// 由当前组件控制的分区切换 |
||||
const changeThisArea = (result: any) => { |
const changeThisArea = (result: any) => { |
||||
console.log(result, 'changeThisArea') |
console.log(result, 'changeThisArea'); |
||||
// 修改前，将所有选项置空 |
// 修改前，将所有选项置空 |
||||
reset() |
reset(); |
||||
let level1 = result[0]; |
let level1 = result[0]; |
||||
area.value.length = 0 |
area.value.length = 0; |
||||
// 只选择了分区 |
// 只选择了分区 |
||||
if (result.length === 1) { |
if (result.length === 1) { |
||||
result[0].selected = true |
result[0].selected = true; |
||||
area.value.push(result[0].id) |
area.value.push(result[0].id); |
||||
// 控制子组件按钮区 |
// 控制子组件按钮区 |
||||
tabs1Ref.value.changeArea(result[0]) |
tabs1Ref.value.changeArea(result[0]); |
||||
// 选择了分区 + 线路 |
// 选择了分区 + 线路 |
||||
} else if (result.length === 2) { |
} else if (result.length === 2) { |
||||
// 如果没有分区，默认选择第一个 |
// 如果没有分区，默认选择第一个 |
||||
if (!level1) { |
if (!level1) { |
||||
level1 = treeData.value[0] |
level1 = treeData.value[0]; |
||||
} |
} |
||||
// 选中状态都设为true |
// 选中状态都设为true |
||||
level1.selected = result[1].selected = true |
level1.selected = result[1].selected = true; |
||||
area.value.splice(0, 0, level1.id, result[1].id) |
area.value.splice(0, 0, level1.id, result[1].id); |
||||
// 控制子组件按钮区 |
// 控制子组件按钮区 |
||||
tabs1Ref.value.changeArea(result[0]) |
tabs1Ref.value.changeArea(result[0]); |
||||
tabs1Ref.value.changeLine(result[1]) |
tabs1Ref.value.changeLine(result[1]); |
||||
} |
} |
||||
} |
}; |
||||
// 重置分区树所有当前选项 |
// 重置分区树所有当前选项 |
||||
const reset = () => { |
const reset = () => { |
||||
treeData.value.forEach((item: any) => { |
treeData.value.forEach((item: any) => { |
||||
item.selected = false |
item.selected = false; |
||||
item.childList.forEach((i: any) => { |
item.childList.forEach((i: any) => { |
||||
i.selected = false |
i.selected = false; |
||||
}) |
}); |
||||
}) |
}); |
||||
} |
}; |
||||
// 俯视图分区选中计算函数 |
// 俯视图分区选中计算函数 |
||||
const computedClass = (string: string) => { |
const computedClass = (string: string) => { |
||||
if (area.value.indexOf(string) != -1) { |
if (area.value.indexOf(string) != -1) { |
||||
return `isActive area-item area${string}` |
return `isActive area-item area${string}`; |
||||
} else { |
} else { |
||||
return `area-item area${string}` |
return `area-item area${string}`; |
||||
} |
} |
||||
} |
}; |
||||
|
|
||||
// 获得所有分区 |
// 获得所有分区 |
||||
const getAllArea = () => { |
const getAllArea = () => { |
||||
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => { |
http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then((res) => { |
||||
const data = res.data |
const data = res.data; |
||||
floorData.value = data |
floorData.value = data; |
||||
/** 只在前端使用的变量 |
/** 只在前端使用的变量 |
||||
* @param id 用于判断样式和层级的前端属性 |
* @param id 用于判断样式和层级的前端属性 |
||||
* @param selected 用于表示是否选中的前端属性 |
* @param selected 用于表示是否选中的前端属性 |
||||
*/ |
*/ |
||||
data.forEach((floor: any) => { |
data.forEach((floor: any) => { |
||||
floor.childList.forEach((item: any, index: number) => { |
floor.childList.forEach((item: any, index: number) => { |
||||
if (index == 0) { |
if (index == 0) { |
||||
item.selected = true |
item.selected = true; |
||||
} else { |
} else { |
||||
item.selected = false |
item.selected = false; |
||||
} |
} |
||||
item.id = String(index + 1) |
item.id = String(index + 1); |
||||
item.childList.forEach((v: any, i: number) => { |
item.childList.forEach((v: any, i: number) => { |
||||
v.selected = false |
v.selected = false; |
||||
v.id = (index + 1) + '-' + (i + 1) |
v.id = index + 1 + '-' + (i + 1); |
||||
}) |
}); |
||||
}) |
}); |
||||
}) |
}); |
||||
// 默认展示 线路 1-1 |
// 默认展示 线路 1-1 |
||||
treeData.value = data[0].childList |
treeData.value = data[0].childList; |
||||
// 开始预加载 |
// 开始预加载 |
||||
preload.value = true |
preload.value = true; |
||||
}) |
}); |
||||
} |
}; |
||||
|
|
||||
// 抽屉业务 ===================================================== |
// 抽屉业务 ===================================================== |
||||
|
|
||||
// 抽屉 - 当前选择的tab |
// 抽屉 - 当前选择的tab |
||||
let activeKey = ref('1'); |
let activeKey = ref('1'); |
||||
// 抽屉 - 打开状态 |
// 抽屉 - 打开状态 |
||||
let visible = ref(false); |
let visible = ref(false); |
||||
// 抽屉 - 开关事件 |
// 抽屉 - 开关事件 |
||||
const toggleDrawer = () => { |
const toggleDrawer = () => { |
||||
visible.value = !visible.value; |
visible.value = !visible.value; |
||||
}; |
}; |
||||
// 抽屉tab1组件的引用 |
// 抽屉tab1组件的引用 |
||||
const tabs1Ref = ref() |
const tabs1Ref = ref(); |
||||
|
|
||||
</script> |
</script> |
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
@import "./index.less"; |
@import './index.less'; |
||||
// 当前选中分区的样式 |
|
||||
.isActive { |
// 当前选中分区的样式 |
||||
|
.isActive { |
||||
border: 3px solid white !important; |
border: 3px solid white !important; |
||||
} |
} |
||||
// 抽屉顶部tab按钮样式 |
|
||||
:deep(.ant-tabs-tab-btn) { |
// 抽屉顶部tab按钮样式 |
||||
|
:deep(.ant-tabs-tab-btn) { |
||||
color: white; |
color: white; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|
||||
Loading…
Reference in new issue