From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/Dashboard.vue | 188 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 188 insertions(+), 0 deletions(-)
diff --git a/src/Dashboard.vue b/src/Dashboard.vue
new file mode 100644
index 0000000..d9c19bd
--- /dev/null
+++ b/src/Dashboard.vue
@@ -0,0 +1,188 @@
+<!--
+ * @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>
--
Gitblit v1.9.3