131 lines
3.9 KiB
Vue
131 lines
3.9 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<!-- 场景模型 -->
|
|
<ThreeView background="#353535" light="0xffffff" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
|
|
<!-- <ThreeModel /> -->
|
|
<!-- 底部菜单 -->
|
|
<MenuTab @changeMenu="changeMenu"></MenuTab>
|
|
<!-- 左侧建筑菜单 -->
|
|
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
|
|
<!-- 建筑信息 -->
|
|
<BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
|
|
<!-- 资产信息 -->
|
|
<DevicePie v-if="deviceInfo && activateIndex == 0" @openDialog="openDialog"></DevicePie>
|
|
<!-- 左侧资产菜单 -->
|
|
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
|
|
<!-- 资产信息 -->
|
|
<DeviceInfo v-if="equimentInfo && activateIndex == 1"></DeviceInfo>
|
|
<!-- 资产事件 -->
|
|
<DeviceEvent v-if="activateIndex == 1" @openDialog="openDialog1"></DeviceEvent>
|
|
<!-- 左侧应用菜单 -->
|
|
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
|
|
<!-- 设备信息 -->
|
|
<EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
|
|
<!-- 实时数据 -->
|
|
<RealData v-if="activateIndex == 2" @openDialog="openDialog1"></RealData>
|
|
<!-- 资产信息弹出框 -->
|
|
<el-dialog v-model="dialogVisible" title="资产信息" width="1200px" append-to-body>
|
|
<DeviceInfoDialog @viewDetail="viewDetail"></DeviceInfoDialog>
|
|
</el-dialog>
|
|
<el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" append-to-body>
|
|
<RealInfoDialog></RealInfoDialog>
|
|
</el-dialog>
|
|
<!-- 资产详情 -->
|
|
<el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" append-to-body>
|
|
<DeviceDetial></DeviceDetial>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
<script setup name="bimHome">
|
|
import MenuTab from './components/MenuTab.vue';
|
|
import BuildTree from './components/BuildTree.vue';
|
|
import BuildInfo from './components/BuildInfo.vue';
|
|
import DevicePie from './components/DevicePie.vue';
|
|
import DeviceTree from './components/DeviceTree.vue';
|
|
import DeviceInfo from './components/DeviceInfo.vue';
|
|
import DeviceEvent from './components/DeviceEvent.vue';
|
|
import ApplicationTree from './components/ApplicationTree.vue';
|
|
import EquipmentInfo from './components/EquipmentInfo.vue';
|
|
import RealData from './components/RealData.vue';
|
|
import ThreeView from './components/ThreeView.vue';
|
|
// import ThreeModel from './components/ThreeModel.vue';
|
|
import DeviceInfoDialog from './components/DeviceInfoDialog.vue';
|
|
import RealInfoDialog from './components/RealInfoDialog.vue';
|
|
import DeviceDetial from './components/DeviceDetial.vue';
|
|
import bimStore from '@/store/modules/bim';
|
|
import { computed } from 'vue';
|
|
const data = reactive({
|
|
sceneUrl: '',
|
|
equimentInfo: {},
|
|
});
|
|
|
|
const { sceneUrl,equimentInfo} = toRefs(data);
|
|
const dialogVisible = ref(false);
|
|
const dialogVisible1 = ref(false);
|
|
const dialogVisible2 = ref(false);
|
|
|
|
const activateIndex = computed(() =>
|
|
bimStore().activateIndex
|
|
);
|
|
|
|
const buildInfo = computed(() =>
|
|
bimStore().activateTree.info
|
|
);
|
|
|
|
const deviceInfo = computed(() =>
|
|
bimStore().activateTree.deviceInfo
|
|
);
|
|
|
|
|
|
|
|
const onReady = () => {
|
|
}
|
|
|
|
const onError = () => {
|
|
}
|
|
|
|
const onProgress = () => {
|
|
}
|
|
|
|
const handleBuildClick = (value, isParent) => {
|
|
// 点击父级，加载/切换场景
|
|
if (isParent) {
|
|
sceneUrl.value = value.url;
|
|
console.log(sceneUrl.value);
|
|
return;
|
|
}
|
|
|
|
}
|
|
|
|
const handleDeviceClick = (value) => {
|
|
equimentInfo.value = bimStore().activateDevice.info;
|
|
}
|
|
|
|
const handleApplicationClick = (value) => {
|
|
|
|
}
|
|
|
|
const changeMenu = (index) => {
|
|
}
|
|
|
|
const openDialog = () => {
|
|
dialogVisible.value = true;
|
|
}
|
|
|
|
const openDialog1 = () => {
|
|
dialogVisible1.value = true;
|
|
}
|
|
|
|
const viewDetail = (val) => {
|
|
console.log(val);
|
|
dialogVisible2.value = true;
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.app-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 900px;
|
|
}
|
|
</style> |