From a3e27f5cab583debe11a9c62d8cc0115783b0791 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 16:59:43 +0800
Subject: [PATCH] fix: 优化实况UI放大缩小
---
src/Dashboard.vue | 272 ++++++++++++++++++++++++++++--------------------------
1 files changed, 141 insertions(+), 131 deletions(-)
diff --git a/src/Dashboard.vue b/src/Dashboard.vue
index 5e6dc05..db1aa12 100644
--- a/src/Dashboard.vue
+++ b/src/Dashboard.vue
@@ -2,187 +2,197 @@
* @Author: gjj Ganjj@probim.com.cn
* @Date: 2025-02-14 14:32:17
* @LastEditors: gjj Ganjj@probim.com.cn
- * @LastEditTime: 2025-02-20 15:46:39
+ * @LastEditTime: 2025-02-25 15:38:05
* @FilePath: \北京交通大学\src\Dashboard.vue
-->
<!-- eslint-disable vue/no-textarea-mustache -->
<!-- eslint-disable vue/html-self-closing -->
<template>
<main
- v-loading="isAuthenticating || isLoadingPrjList"
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'
+ 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>-->
-
-
+ <app-header
+ class="absolute z-[100] top-0 left-0 right-0"
+ :selected-id="currentProjectId"
+ @onHomeClick="switchView"
+ @onSelectChange="onSelectChange"
+ @fullscreenChange="fullscreenChange"
+ />
<!--页面内容-->
<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/>
+ <project-view v-if="isReady" />
</div>
</div>
<div class="flex-1 min-w-0">
<!-- 中间模块 -->
<div class="w-full h-full">
- <equipment-view/>
+ <equipment-view :selected-id="selectedId" v-if="isReady" />
</div>
</div>
<div class="w-[1080px]">
<!-- 右侧模块 -->
<div class="w-full h-full">
- <Home/>
+ <Home v-if="isReady" :selected-id="selectedId" :is-full-screen="isFullScreen" />
</div>
</div>
</div>
+ <!-- <div class="absolute inset-0 top-[80px] flex" v-if="clickTab === 'xietong'">
+ <iframe :src="iframeSrc" class="xieTongIframe" frameborder='0'></iframe>
+ </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 Vue from "vue";
+ import { mapGetters } from "vuex";
+ import Header from "./components/Header.vue";
+ import Home from "./views/Home.vue";
+ import ProjectView from "./views/ProjectView.vue";
+ import { sceneJSON } from "./sceneJSON.js";
+ import EquipmentView from "./views/EquipmentView.vue";
+ import dayjs from "dayjs";
+ import "dayjs/locale/zh-cn";
+ import relativeTime from "dayjs/plugin/relativeTime";
+ import { HomeAPI } from "./api/home";
+ dayjs.locale("zh-cn");
+ dayjs.extend(relativeTime);
+ Vue.prototype.$dayjs = dayjs;
-import * as echarts from "echarts";
-Vue.prototype.$echarts = echarts;
+ import * as echarts from "echarts";
+ Vue.prototype.$echarts = echarts;
-import { nanoid } from "nanoid";
-Vue.prototype.$nanoid = nanoid;
+ 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
- };
- },
- computed: {
- ...mapGetters("common", [])
- },
- watch: {
- },
- mounted() {
- this.initMultiverse();
- },
- beforeDestroy() {
- this.resetEngineRelated();
- },
- methods: {
- //重置引擎相关的东西
- resetEngineRelated() {
- window.scene = window.underlay = null;
+ export default {
+ name: "Dashboard",
+ components: {
+ "app-header": Header,
+ Home: Home,
+ "project-view": ProjectView,
+ "equipment-view": EquipmentView,
},
- //响应切换地图
- 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();
+ data() {
+ return {
+ backgroundImage: new URL("@/assets/images/backgrounds/screen.png", import.meta.url).href,
+ currentProjectId: "1c179617-a7d9-4243-b813-84fa55a17ce7",
+ isReady: false,
+ clickTab: "home",
+ iframeSrc: window.ProjectConfig.xieTongIframeSrc,
+ selectedId: "",
+ isFullScreen: false,
+ };
+ },
+ computed: {
+ ...mapGetters("common", []),
+ },
+ watch: {},
+ mounted() {
+ this.getLoginInfo();
+ },
+ beforeDestroy() {
+ this.resetEngineRelated();
+ },
+ methods: {
+ onSelectChange(val) {
+ this.selectedId = val;
+ },
+ fullscreenChange(val) {
+ this.isFullScreen = val;
+ },
+ /**
+ * 切换视图
+ * @param val
+ */
+ switchView(val) {
+ switch (val) {
+ case "xietong":
+ window.open(window.ProjectConfig.xieTongIframeSrc, "_blank");
break;
- }
- case "gis": {
- if (building) {
- building.visible = true;
- }
- u.change("darkblue"); //这样需要将本地资源放在工程内
- // u.url = "http://multiverse.vothing.com/ref/style/darkblue.json";
- // // 加载显示底图
- // u.load();
+ case "zhihui":
+ window.open("http://beijiaodaxiongan.zhihuibuild.com/#/autologin?next=", "_blank");
break;
+ }
+ },
+ //重置引擎相关的东西
+ 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);
+ },
+ getLoginInfo() {
+ this.isReady = true;
+ const data = {
+ UserName: "JSC",
+ Password: "JSC@jsc123",
+ IfSingleLogin: "",
+ };
+ HomeAPI.WhLogin(data).then((res) => {
+ console.log(res);
+ if (res.Ret === 1) {
+ const result = res.Data;
+ window.localStorage.setItem("token", result.token);
+ console.log(result);
+ }
});
- }
+ },
+
+ //设置字体颜色
+ cellStyle(row, _column, _rowIndex, _columnIndex) {
+ // console.log("row", row);
+ if (row.column.label === "状态" && row.row.status === "未处置") {
+ return "color:#EF424E";
+ }
+ },
},
- //设置字体颜色
- cellStyle(row, _column, _rowIndex, _columnIndex) {
- // console.log("row", row);
- if (row.column.label === "状态" && row.row.status === "未处置") {
- return "color:#EF424E";
- }
- },
- },
-};
+ };
</script>
+<style lang="scss" scoped>
+ .xieTongIframe {
+ width: 100%;
+ height: 100%;
+ }
+</style>
--
Gitblit v1.9.3