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