feat: 增加设备分类

Gary Gu

5 days ago 36e044280298d6f6b37b1295f9eba25584ef66a2

 src/Dashboard.vue

@@ -15,172 +15,171 @@
      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" @onHomeClick="switchView" />


    <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"/>
          <project-view v-if="isReady" />
        </div>
      </div>
      <div class="flex-1 min-w-0">
        <!-- 中间模块 -->
        <div class="w-full h-full">
          <equipment-view v-if="isReady"/>
          <equipment-view :selected-id="selectedId" v-if="isReady" />
        </div>
      </div>
      <div class="w-[1080px]">
        <!-- 右侧模块 -->
        <div class="w-full h-full">
          <Home v-if="isReady"/>
          <Home v-if="isReady" />
        </div>
      </div>
    </div>

<!--    <div class="absolute inset-0 top-[80px] flex" v-if="clickTab === 'xietong'">
    <!--    <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 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,
    "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
    };
  },
  computed: {
    ...mapGetters("common", [])
  },
  watch: {
  },
  mounted() {
    this.getLoginInfo();
  },
  beforeDestroy() {
    this.resetEngineRelated();
  },
  methods: {
    /**
     * 切换视图
     * @param val
     */
    switchView(val){
      switch (val){
        case 'xietong':
          window.open(window.ProjectConfig.xieTongIframeSrc, '_blank');
          break;
      }
  export default {
    name: "Dashboard",
    components: {
      "app-header": Header,
      Home: Home,
      "project-view": ProjectView,
      "equipment-view": EquipmentView,
    },
    //重置引擎相关的东西
    resetEngineRelated() {
      window.scene = window.underlay = null;
    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: "",
      };
    },
    //响应切换地图
    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();
    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 "gis": {
            if (building) {
              building.visible = true;
        }
      },
      //重置引擎相关的东西
      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;
            }
            u.change("darkblue"); //这样需要将本地资源放在工程内
            // u.url = "http://multiverse.vothing.com/ref/style/darkblue.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);
        }
        
      });
    },
      },
      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{
  .xieTongIframe {
    width: 100%;
    height: 100%;
  }