104 lines
2.8 KiB
Vue
104 lines
2.8 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div id="three">
|
|
<Renderer ref="renderer" antialias :orbit-ctrl="{ enableDamping: true }" resize>
|
|
<Camera :position="{ x: 100, y: 80, z: -150 }" />
|
|
<Scene background="#353535">
|
|
<AmbientLight></AmbientLight>
|
|
<GltfModel :src="bimUrl" @load="onReady" @progress="onProgress" @error="onError" />
|
|
</Scene>
|
|
</Renderer>
|
|
<!-- 底部菜单 -->
|
|
<MenuTab @changeMenu="changeMenu"></MenuTab>
|
|
<!-- 左侧建筑菜单 -->
|
|
<BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
|
|
<!-- 建筑信息 -->
|
|
<BuildInfo v-if="activateIndex == 0"></BuildInfo>
|
|
<!-- 资产信息 -->
|
|
<DevicePie v-if="activateIndex == 0"></DevicePie>
|
|
<!-- 左侧资产菜单 -->
|
|
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
|
|
<!-- 资产信息 -->
|
|
<DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
|
|
<!-- 资产事件 -->
|
|
<DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
|
|
<!-- 左侧应用菜单 -->
|
|
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
|
|
<!-- 设备信息 -->
|
|
<EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
|
|
<!-- 实时数据 -->
|
|
<RealData v-if="activateIndex == 2"></RealData>
|
|
</div>
|
|
</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 bimStore from '@/store/modules/bim';
|
|
import {
|
|
AmbientLight,
|
|
PointLight,
|
|
Camera,
|
|
GltfModel,
|
|
Renderer,
|
|
Scene,
|
|
} from 'troisjs';
|
|
const renderer = ref(null);
|
|
|
|
const data = reactive({
|
|
bimUrl: '/jz/glb/scene.gltf'
|
|
});
|
|
|
|
const { bimUrl } = toRefs(data);
|
|
|
|
const activateIndex = computed(() =>
|
|
bimStore().activateIndex
|
|
);
|
|
onMounted(() => {
|
|
renderer.value.onBeforeRender(() => {
|
|
// box.rotation.x += 0.01;
|
|
|
|
});
|
|
});
|
|
|
|
const onReady = () => {
|
|
}
|
|
|
|
const onError = () => {
|
|
}
|
|
|
|
const onProgress = () => {
|
|
}
|
|
|
|
const handleBuildClick = (value) => {
|
|
bimUrl.value = value.url;
|
|
console.log(value);
|
|
}
|
|
|
|
const handleDeviceClick = (value) => {
|
|
console.log(value);
|
|
}
|
|
|
|
const handleApplicationClick = (value) => {
|
|
console.log(value);
|
|
}
|
|
|
|
const changeMenu = () => {
|
|
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
#three {
|
|
height: 900px;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
</style> |