<!--
|
* @Author: gjj Ganjj@probim.com.cn
|
* @Date: 2025-02-14 14:32:17
|
* @LastEditors: gjj Ganjj@probim.com.cn
|
* @LastEditTime: 2025-02-21 16:54:08
|
* @FilePath: \北京交通大学\src\Dashboard.vue
|
-->
|
<!-- eslint-disable vue/no-textarea-mustache -->
|
<!-- eslint-disable vue/html-self-closing -->
|
<template>
|
<main
|
id="appWrapper"
|
class="absolute top-[50%] left-[50%] -translate-x-[50%] w-screen h-screen -translate-y-[50%] font-pingfang text-white select-none"
|
:style="{
|
backgroundImage: `url(${backgroundImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: 'cover'
|
}"
|
>
|
<!--头部-->
|
<app-header class="absolute z-[100] top-0 left-0 right-0" :selected-id="currentProjectId" />
|
|
|
|
<!--全屏、切换地图-->
|
<!--<div class="absolute z-[50] top-20 left-4 flex space-x-3">
|
<fullscreen-button />
|
<switch-map mapType="gis" @changeMap="onChangeMap" />
|
</div>-->
|
|
|
|
<!--页面内容-->
|
<div class="content-wrapper px-[22px] py-[10px] absolute inset-0 top-[80px] flex gap-[20px]">
|
<div class="flex-1 min-w-0">
|
<!-- 左侧模块 -->
|
<div class="w-full h-full">
|
<project-view/>
|
</div>
|
</div>
|
<div class="flex-1 min-w-0">
|
<!-- 中间模块 -->
|
<div class="w-full h-full">
|
<equipment-view/>
|
</div>
|
</div>
|
<div class="w-[1080px]">
|
<!-- 右侧模块 -->
|
<div class="w-full h-full">
|
<Home/>
|
</div>
|
</div>
|
</div>
|
|
|
<!--multiverse渲染容器
|
<div id="renderDom" class="absolute z-[40] top-0 bottom-0 left-0 right-0 w-full h-full"></div>-->
|
|
|
</main>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import { mapGetters } from "vuex";
|
import Header from "./components/Header.vue";
|
import FullscreenButton from "./components/FullScreenButton.vue";
|
import SwitchMap from "./components/SwitchMap.vue";
|
import Home from "./views/Home.vue";
|
import ProjectView from "./views/ProjectView.vue";
|
import { sceneJSON } from "./sceneJSON.js";
|
import { AppAPI } from "./api/app";
|
import EquipmentView from "./views/EquipmentView.vue";
|
import dayjs from "dayjs";
|
import "dayjs/locale/zh-cn";
|
import relativeTime from "dayjs/plugin/relativeTime";
|
dayjs.locale("zh-cn");
|
dayjs.extend(relativeTime);
|
Vue.prototype.$dayjs = dayjs;
|
|
import * as echarts from "echarts";
|
Vue.prototype.$echarts = echarts;
|
|
import { nanoid } from "nanoid";
|
Vue.prototype.$nanoid = nanoid;
|
|
export default {
|
name: "Dashboard",
|
components: {
|
"app-header": Header,
|
"fullscreen-button": FullscreenButton,
|
"switch-map": SwitchMap,
|
"Home": Home,
|
"project-view": ProjectView,
|
"equipment-view": EquipmentView
|
},
|
data() {
|
return {
|
backgroundImage: new URL('@/assets/images/backgrounds/screen.png', import.meta.url).href,
|
currentProjectId: '1c179617-a7d9-4243-b813-84fa55a17ce7'
|
};
|
},
|
computed: {
|
...mapGetters("common", [])
|
},
|
watch: {
|
},
|
mounted() {
|
this.initMultiverse();
|
},
|
beforeDestroy() {
|
this.resetEngineRelated();
|
},
|
methods: {
|
//重置引擎相关的东西
|
resetEngineRelated() {
|
window.scene = window.underlay = null;
|
},
|
//响应切换地图
|
onChangeMap(item) {
|
if (window.scene && window.underlay) {
|
const u = window.underlay;
|
const building = window.scene.findFeature("3DBuilding");
|
switch (item.id) {
|
case "pic": {
|
if (building) {
|
building.visible = false;
|
}
|
u.change("satellite"); //这样需要将本地资源放在工程内
|
// u.url = "http://multiverse.vothing.com/ref/style/satellite.json";
|
// // 加载显示底图
|
// u.load();
|
break;
|
}
|
case "gis": {
|
if (building) {
|
building.visible = true;
|
}
|
u.change("darkblue"); //这样需要将本地资源放在工程内
|
// u.url = "http://multiverse.vothing.com/ref/style/darkblue.json";
|
// // 加载显示底图
|
// u.load();
|
break;
|
}
|
}
|
}
|
},
|
|
|
//初始化引擎
|
initMultiverse() {
|
// 获取承载场景画布dom
|
const renderDom = document.getElementById("renderDom");
|
if (window.multiverse && renderDom) {
|
// 实例化引擎
|
const multiverse = window.multiverse;
|
const engine = new multiverse.mvCore(renderDom);
|
|
// mapbox地图服务的Token,需申请,如不使用Mapbox地图服务,可不设置
|
engine.token = window.ProjectConfig.mapboxToken;
|
// multiverse.js所在的路径,用于获取静态资源文件
|
engine.path = "https://multiverse.vothing.com/";
|
|
// 初始化场景
|
engine.initialize().then((s) => {
|
window.scene = s;
|
s.fromJSON(sceneJSON);
|
s.load();
|
s.stop();
|
window.underlay = s.findFeature("underlay");
|
|
setTimeout(() => {
|
|
}, 1000);
|
});
|
}
|
},
|
//设置字体颜色
|
cellStyle(row, _column, _rowIndex, _columnIndex) {
|
// console.log("row", row);
|
if (row.column.label === "状态" && row.row.status === "未处置") {
|
return "color:#EF424E";
|
}
|
},
|
},
|
};
|
</script>
|
