feat: 增加协同平台功能

Gary Gu

2025-04-11 69b7012682b65295d0cd454c8b9077db1133985f

 src/Dashboard.vue

@@ -2,14 +2,13 @@
 * @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="{
@@ -20,40 +19,35 @@
    }"
  >
    <!--头部-->
    <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" />



    <!--页面内容-->
    <div class="content-wrapper px-[22px] py-[10px] absolute inset-0 top-[80px] flex gap-[20px]">
    <div class="content-wrapper px-[22px] py-[10px] absolute inset-0 top-[80px] flex gap-[20px]" v-if="clickTab === 'home'">
      <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 v-if="isReady"/>
        </div>
      </div>
      <div class="w-[1080px]">
        <!-- 右侧模块 -->
        <div class="w-full h-full">
          <Home/>
          <Home v-if="isReady"/>
        </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>-->
@@ -66,16 +60,14 @@
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";
import { HomeAPI } from "./api/home";
dayjs.locale("zh-cn");
dayjs.extend(relativeTime);
Vue.prototype.$dayjs = dayjs;
@@ -90,15 +82,17 @@
  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
      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
    };
  },
  computed: {
@@ -107,12 +101,19 @@
  watch: {
  },
  mounted() {
    this.initMultiverse();
    this.getLoginInfo();
  },
  beforeDestroy() {
    this.resetEngineRelated();
  },
  methods: {
    /**
     * 切换视图
     * @param val
     */
    switchView(val){
      this.clickTab = val;
    },
    //重置引擎相关的东西
    resetEngineRelated() {
      window.scene = window.underlay = null;
@@ -146,36 +147,24 @@
        }
      }
    },
    

    //初始化引擎
    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);
@@ -186,3 +175,9 @@
  },
};
</script>
<style lang="scss" scoped>
  .xieTongIframe{
    width: 100%;
    height: 100%;
  }
</style>