feat: 增加设备分类

Gary Gu

4 days ago 36e044280298d6f6b37b1295f9eba25584ef66a2

feat: 增加设备分类

 public/config.js

@@ -8,12 +8,12 @@
 */
window.ProjectConfig = {
    // axiosBaseURL: "http://47.117.124.20:2002/",
    axiosBaseURL: "http://8.140.54.245:5000",
    axiosBaseURL: "http://101.201.155.10:4011",
    axiosTimeout: 1000 * 30, //毫秒
    panoUrl: 'http://8.140.54.245:4010', // 全景预览地址
    panoBaseUrl: 'http://8.140.54.245:5000', // 全景图及文档接口
    modelUrl: 'http://8.140.54.245:4010/#/Home/sceneManagementDetail?shareUrlToken=AA82C10E34245412D8E276559C8582363A2CD38177A286C582C0471DC44FA5D836CAFB932F2C33B44201FE828EF6545397771FA675F7518619FAD578EB06FB6FA7671DFBEA34C32F8241C1EF1DDEA645', // 模型预览地址
    panoUrl: 'http://101.201.155.10:4010', // 全景预览地址
    panoBaseUrl: 'http://101.201.155.10:4011', // 全景图及文档接口
    modelUrl: 'http://101.201.155.10:4010/#/Home/sceneManagementDetail?shareUrlToken=AA82C10E34245412D8E276559C8582363A2CD38177A286C582C0471DC44FA5D836CAFB932F2C33B44201FE828EF6545397771FA675F7518619FAD578EB06FB6FA7671DFBEA34C32F8241C1EF1DDEA645', // 模型预览地址
    sceneUrl: 'http://resources.vothing.com/mp4/12.mp4', // 实况地址
    projectId: 'de42bc0a-9a5a-4d43-877f-0ae980f905b2', // 项目id
    xieTongIframeSrc: 'http://8.140.54.245:4010/#/', // BIMe地址
    xieTongIframeSrc: 'http://101.201.155.10:4010/#/', // BIMe地址
}

 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%;
  }

 src/api/home.js

@@ -8,34 +8,64 @@
 */
import { http } from "../utils/http";
export const HomeAPI = {
    GetProject: (data) => {
        return http.get("/api/User/Project/GetProject", {
            params: data
        });
    },
  GetProject: (data) => {
    return http.get("/api/User/Project/GetProject", {
      params: data,
    });
  },

    WhLogin: (data, config = {}) => {
        return http.post("/api/User/Home/WhLogin", data, config);
    },
  WhLogin: (data, config = {}) => {
    return http.post("/api/User/Home/WhLogin", data, config);
  },

    GetParticipatingList: (data) => {
        return http.get("/api/User/Home/GetParticipatingList", {
            params: data
        });
    },
    GetParticipatingNumber: (data) => {
        return http.get("/api/User/Home/GetParticipatingNumber", {
            params: data
        });
    },
    GetProjectPanoramaList: (data) => {
        return http.get("/api/Panorama/PanoramaFile/GetProjectPanoramaList", {
            params: data
        });
    },
    GetScenesByPbGuid: (data) => {
        return http.get("/api/Panorama/PanoramaFile/GetScenesByPbGuid", {
            params: data
        });
    }
};
  GetParticipatingList: (data) => {
    return http.get("/api/User/Home/GetParticipatingList", {
      params: data,
    });
  },
  GetParticipatingNumber: (data) => {
    return http.get("/api/User/Home/GetParticipatingNumber", {
      params: data,
    });
  },
  GetProjectPanoramaList: (data) => {
    return http.get("/api/Panorama/PanoramaFile/GetProjectPanoramaList", {
      params: data,
    });
  },
  GetScenesByPbGuid: (data) => {
    return http.get("/api/Panorama/PanoramaFile/GetScenesByPbGuid", {
      params: data,
    });
  },
  GetBindSelect: (data) => {
    return http.get("/api/jsc/JSCManage/GetBindSelect", {
      params: data,
    });
  },
  GetDeviceType: (data) => {
    return http.get("/api/jsc/JSCManage/GetDeviceType", {
      params: data,
    });
  },
  GetJSCDeviceState: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCDeviceState", {
      params: data,
    });
  },
  GetJSCEnvMonitor: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCEnvMonitor", {
      params: data,
    });
  },
  GetJSCProgress: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCProgress", {
      params: data,
    });
  },
  GetJSCProjectMonitor: (data) => {
    return http.get("/api/jsc/JSCManage/GetJSCProjectMonitor", {
      params: data,
    });
  },
};

 src/components/Header.vue

@@ -43,7 +43,7 @@
      </div>
      <div class="absolute top-0 right-0">
        <div class="flex items-center h-[80px] mr-[20px]">
          <el-select v-model="projectSelected" placeholder="请选择" class="mr-[24px]">
          <el-select v-model="bindSelected" placeholder="请选择" class="mr-[24px]" @change="handleSelect">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <i
@@ -61,6 +61,9 @@
</template>

<script>
  import { HomeAPI } from "@/api/home";
  import { mapActions } from "vuex";

  export default {
    name: "AppHeader",
    components: {},
@@ -76,12 +79,8 @@
    },
    data() {
      return {
        projectSelected: "",
        options: [
          { value: "project1", label: "项目1" },
          { value: "project2", label: "项目2" },
          { value: "project3", label: "项目3" },
        ],
        bindSelected: "",
        options: [],
        activeTab: "home",
        currentTime: "",
        currentDate: "",
@@ -91,6 +90,7 @@
    },
    mounted() {
      this.updateTime();
      this.getBinds();
      this.timer = setInterval(this.updateTime, 1000);
    },
    beforeDestroy() {
@@ -127,6 +127,32 @@
        const weekDay = weekDays[now.getDay()];
        this.currentDate = `${year}.${month}.${day} 星期${weekDay}`;
      },
      /**
       * 获取标段信息
       */
      getBinds() {
        HomeAPI.GetBindSelect().then((res) => {
          if (res.Ret === 1) {
            const result = res.Data;
            if (result.length > 0) {
              this.options = result.map((item) => ({
                value: item.Id,
                label: item.BindName,
              }));
              this.bindSelected = this.options[0].value; // 默认选中第一个项目
              this.handleSelect(this.bindSelected);
            } else {
              this.options = [];
            }
          }
        });
      },
      /**
       * 处理选择变化
       */
      handleSelect(val) {
        this.$emit("onSelectChange", val);
      },
    },
  };
</script>
@@ -137,7 +163,7 @@
  ::v-deep(.el-select) {
    width: 160px;
    height: 28px;
    background: rgba(33,72,115,0.9);
    background: rgba(33, 72, 115, 0.9);
    border-radius: 2px;
    .el-input {
      align-items: center;

 src/store/modules/common.js

@@ -7,38 +7,46 @@
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
export default {
    namespaced: true,
    state: () => ({
        code: null, //用户信息
        token: null, //token
        projectEndDate: null, //项目结束日期
    }),
  namespaced: true,
  state: () => ({
    code: null, //用户信息
    token: null, //token
    projectEndDate: null, //项目结束日期
    bindId: null,
  }),

    mutations: {
        setCode(state, data) {
            state.code = data;
        },
        setToken(state, data) {
            state.token = data;
        },
        setProjectEndDate(state, data) {
            state.projectEndDate = data;
        },
  mutations: {
    setCode(state, data) {
      state.code = data;
    },
    actions: {
        setCode(context, data) {
            context.commit("setCode", data);
        },
        setToken(context, data) {
            context.commit("setToken", data);
        },
        setProjectEndDate(context, data) {
            context.commit("setProjectEndDate", data);
        },
    setToken(state, data) {
      state.token = data;
    },
    getters: {
        code: (state) => state.code,
        token: (state) => state.token,
        projectEndDate: (state) => state.projectEndDate,
    setProjectEndDate(state, data) {
      state.projectEndDate = data;
    },
};
    setBindId(state, data) {
      state.bindId = data;
    },
  },
  actions: {
    setCode(context, data) {
      context.commit("setCode", data);
    },
    setToken(context, data) {
      context.commit("setToken", data);
    },
    setProjectEndDate(context, data) {
      context.commit("setProjectEndDate", data);
    },
    updateBindId({ commit }, data) {
      commit("setBindId", data);
    },
  },
  getters: {
    code: (state) => state.code,
    token: (state) => state.token,
    projectEndDate: (state) => state.projectEndDate,
    bindId: (state) => state.bindId,
  },
};

 src/utils/getToken.js

@@ -14,4 +14,8 @@
export const getProjectEndDate = () => {
    let endDate = store.getters["common/projectEndDate"];
    return endDate;
}
export const getBindId = () => {
    let bindId = store.getters["common/bindId"];
    return bindId;
}

 src/views/EquipmentView.vue

@@ -176,6 +176,12 @@
    components: {
      V2Echarts,
    },
    props: {
      selectedId: {
        type: String,
        default: "",
      },
    },
    data() {
      return {
        equipmentSelected: "",
@@ -496,6 +502,16 @@
        };
      },
    },
    watch: {
      selectedId: {
        handler(newVal) {
          console.log("设备界面接收到的数据:", newVal);
          // 处理数据变化的逻辑
        },
        deep: true, // 深度监听对象内部变化
        immediate: true, // 立即执行一次
      },
    },
    methods: {
      handleControlBtnClick(tab) {
        this.currentTab = tab;
@@ -749,5 +765,4 @@
  .progress-inner {
    display: none;
  }

</style>

 vite.config.js

@@ -52,7 +52,7 @@
            proxy: {
                "^/api/": {
                    // target: "http://47.117.124.20:2002/",
                    target: "http://8.140.54.245:5000/",
                    target: "http://101.201.155.10:4011/",
                    rewrite: (path) => path.replace(/^\/api\//, ""),
                    changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
                },