<!--
|
* @Author: gjj Ganjj@probim.com.cn
|
* @Date: 2025-02-14 14:32:17
|
* @LastEditors: gjj Ganjj@probim.com.cn
|
* @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
|
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" @onHomeClick="switchView" @onSelectChange="onSelectChange" />
|
|
<!--页面内容-->
|
<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 v-if="isReady" />
|
</div>
|
</div>
|
<div class="flex-1 min-w-0">
|
<!-- 中间模块 -->
|
<div class="w-full h-full">
|
<equipment-view :selected-id="selectedId" v-if="isReady" />
|
</div>
|
</div>
|
<div class="w-[1080px]">
|
<!-- 右侧模块 -->
|
<div class="w-full h-full">
|
<Home v-if="isReady" :selected-id="selectedId" />
|
</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 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 { nanoid } from "nanoid";
|
Vue.prototype.$nanoid = nanoid;
|
|
export default {
|
name: "Dashboard",
|
components: {
|
"app-header": Header,
|
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",
|
isReady: false,
|
clickTab: "home",
|
iframeSrc: window.ProjectConfig.xieTongIframeSrc,
|
selectedId: "",
|
};
|
},
|
computed: {
|
...mapGetters("common", []),
|
},
|
watch: {},
|
mounted() {
|
this.getLoginInfo();
|
},
|
beforeDestroy() {
|
this.resetEngineRelated();
|
},
|
methods: {
|
onSelectChange(val) {
|
this.selectedId = val;
|
console.log("onSelectChange", val);
|
},
|
/**
|
* 切换视图
|
* @param val
|
*/
|
switchView(val) {
|
switch (val) {
|
case "xietong":
|
window.open(window.ProjectConfig.xieTongIframeSrc, "_blank");
|
break;
|
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;
|
}
|
}
|
}
|
},
|
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";
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.xieTongIframe {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
