调整样式，接口对接

gjj

2025-02-25 fe2b697a063ab9898af5ec0b49c30ad20274d56e

调整样式，接口对接

 public/config.js

@@ -1,13 +1,19 @@
/*
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:17
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-24 17:41:12
 * @FilePath: \北京交通大学\public\config.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
window.ProjectConfig = {
    // axiosBaseURL: "http://47.117.124.20:2002/",
    axiosBaseURL: "https://www.probim.cn:7707",
    axiosBaseURL: "http://8.140.54.245:5000",
    axiosTimeout: 1000 * 30, //毫秒
    workflowLoginURL: "http://workflow-newapi.probim.cn/api/User/Home/Login",
    workflowWebURL: "http://workflow.probim.cn",
    pid: "71f7a5df-a7e3-42f4-bcea-36d7d2924ddd",
    mapboxToken: 'pk.eyJ1Ijoiemhlbmd4dWZhbmciLCJhIjoiY2w5ejNiOWJ1MDE0bTN1cnp4MjNmM2dpNCJ9.qy3k-99E6-XSK5ldYUFz-A',
    modelUrl: '//dev.vothing.com/scenemanagerVothing/#/', // 模型预览地址
    panoUrl: '//47.95.223.61:6004', // 全景预览地址
    panoBaseUrl: '//47.95.223.61:6003', // 全景图及文档接口
    sceneUrl: 'http://dev.vothing.com/#/sceneDetail?linkToken=YjkzMWEyMzItNjQwOC00OTljLTlmOGItY2UxYWI4Mzc5YzQyLDFjMTc5NjE3LWE3ZDktNDI0My1iODEzLTg0ZmE1NWExN2NlNyxjODA0YzAzMS02ZGRmLTRkNmItYTM2ZC0xY2ExZjM4MzJiYTk=', // 场景地址
    modelUrl: 'http://8.140.54.245:5010/#/modelNewShareLoad/7d242691-e6b2-4fbc-b4df-687883eb1a4c/db0ba482-4eb0-4488-aa3f-10066a85ae7a', // 模型预览地址
    sceneUrl: 'http://59.64.5.216:9980/#/Home/sceneManagementDetail?shareUrlToken=0C7E4A1E4A9BB7DC9BBDEE6ACFA9B4963972FB01200DF887F404CC7D12A4EF4EF74F69D40F29B08CA2B41A97016084CC5D71C1FFDCDE331EAF8FA0DB7C9708193D65FAAA1A707BBA88B2F459AA065C82', // 场景地址
    projectId: '7d242691-e6b2-4fbc-b4df-687883eb1a4c', // 项目id
}

 src/Dashboard.vue

@@ -2,7 +2,7 @@
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:17
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-21 16:54:08
 * @LastEditTime: 2025-02-24 17:30:13
 * @FilePath: \北京交通大学\src\Dashboard.vue
-->
<!-- eslint-disable vue/no-textarea-mustache -->
@@ -70,11 +70,11 @@
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;
@@ -107,7 +107,7 @@
  watch: {
  },
  mounted() {
    this.initMultiverse();
    this.getLoginInfo();
  },
  beforeDestroy() {
    this.resetEngineRelated();
@@ -146,36 +146,23 @@
        }
      }
    },
    

    //初始化引擎
    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() {
      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);

 src/api/app.js

File was deleted

 src/api/home.js

@@ -1,45 +1,31 @@
/*
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-18 16:45:49
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-24 17:48:55
 * @FilePath: \北京交通大学\src\api\home.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { http } from "../utils/http";
export const HomeAPI = {
  getProjectList: (config = {}) => {
    return http.get("/beh/home/getGisProjectList", config);
    GetProject: (data) => {
        return http.get("/api/User/Project/GetProject", {
            params: data
        });
  },

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

  getWorkerCategoryData: (data, config = {}) => {
    return http.post("/beh/person/workTypeTotal", data, config);
    GetParticipatingList: (data) => {
        return http.get("/api/User/Home/GetParticipatingList", {
            params: data
        });
  },

  getEquipmentCategoryCount: (data, config = {}) => {
    return http.post("/beh/equipment/total", data, config);
    GetParticipatingNumber: (data) => {
        return http.get("/api/User/Home/GetParticipatingNumber", {
            params: data
        });
  },

  getVideoAreaList: (belong, data, config = {}) => {
    return http.post(`/beh/video/area?belong=${belong}`, data, config);
  },

  getEnvPointInfo: () => {
    return http.get("/beh/environment/getPointEnvironmentRealData");
  },

  getVideoByAreaId: (data, config = {}) => {
    return http.post("/beh/video", data, config);
  },

  getTotalGoingData: () => {
    return http.get("/beh/home/getHomeTotalGoingData");
  },

  getProjectTypeSummaryData: () => {
    return http.get("/beh/home/getHomeProjectTypeData");
  },

  getTradeCategoriesStatisticsData: () => {
    return http.get("/beh/home/getHomeIndustryCategoryData");
  },
  getVideoSourceList() {
    return http.post("/beh/person/tree");
  }
};

 src/store/modules/common.js

@@ -1,20 +1,36 @@
/*
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:19
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-24 17:33:32
 * @FilePath: \北京交通大学\src\store\modules\common.js
 * @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
    }),

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

 src/utils/getToken.js

@@ -7,3 +7,7 @@
    }
    return token;
}
export const getProjectId = () => {
    let id = window.ProjectConfig.projectId;
    return id;
}

 src/utils/getUserProfile.js

File was deleted

 src/utils/http.js

@@ -3,23 +3,20 @@
import { debounce } from "lodash-es";
import store from "../store/index";
import { getToken } from "./getToken.js";
import { toLoginPage, toResetPwdPage } from "./logout";

let axiosBaseURL;
let axiosTimeout;
let workflowLoginURL;
if (import.meta.env.PROD) {
if (
    import.meta.env.PROD) {
  //生产环境
  const ProjectConfig = window.ProjectConfig;
  
  axiosBaseURL = ProjectConfig.axiosBaseURL;
  axiosTimeout = ProjectConfig.axiosTimeout;
  workflowLoginURL = ProjectConfig.workflowLoginURL;
} else {
  //非生产环境
  axiosBaseURL = "/api";
  axiosTimeout = 1000 * 30;
  workflowLoginURL = "http://workflow-newapi.probim.cn/api/User/Home/Login";
}

export const http = axios.create({
@@ -28,153 +25,31 @@
  timeout: axiosTimeout
});

//loading对象
let loadingInstance;

//当前正在请求的数量
let needLoadingRequestCount = 0;

//显示loading
function showLoading(target) {
  // 后面这个判断很重要，因为关闭时加了抖动，此时loading对象可能还存在，
  // 但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
  if (needLoadingRequestCount === 0 && !loadingInstance) {
    loadingInstance = Loading.service({
      target: target || "body",
      fullscreen: false,
      lock: true,
      text: "Loading...",
      // spinner: "",
      // background: "",
      // customClass: "",
    });
  }
  needLoadingRequestCount++;
}

//隐藏loading
function hideLoading() {
  needLoadingRequestCount--;
  needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); //做个保护
  if (needLoadingRequestCount === 0) {
    //关闭loading
    toHideLoading();
  }
}

//防抖：将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时， loading闪烁的问题。
const toHideLoading = debounce(() => {
  loadingInstance?.close();
  loadingInstance = null;
}, 300);


//处理响应的结果，返回统一结构
function handleTheResponse(response) {
  console.log(`axios包装过的响应${response.config.url}`, response);
  if (response.config.showLoading === true) {
    hideLoading();
  }
  // {
  //     // `data` 由服务器提供的响应
  //     data: {},
  //     // `status` 来自服务器响应的 HTTP 状态码
  //     status: 200,
  //     // `statusText` 来自服务器响应的 HTTP 状态信息
  //     statusText: 'OK',
  //     // `headers` 是服务器响应头
  //     // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  //     // 例如: `response.headers['content-type']`
  //     headers: {},
  //     // `config` 是 `axios` 请求的配置信息
  //     config: {},
  //     // `request` 是生成此响应的请求
  //     // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  //     // 在浏览器中则是 XMLHttpRequest 实例
  //     request: {}
  //   }

  let responseData = response.data;
  if (response.status === 200) {
    if (responseData?.code === 40001) {
      toLoginPage();
      return;
    }
    if(responseData?.code === 40002) {
      toResetPwdPage();
      return;
    }
    const targetUrl = response.config.url.toLowerCase();
    if (/^\s*$/g.test("" + responseData)) {
      responseData = {
        code: 1,
        message: "无响应数据",
        data: null,
      };
    } else if (targetUrl === "https://bnah-web-api.biaddti.com/api/video/video/getvideo") {
      //摄像头视频
      responseData = {
        code: responseData?.Ret === 1 ? 0 : 1,
        message: responseData?.Msg ?? "服务异常",
        data: responseData?.Data ?? null,
      };
    } else if (targetUrl.startsWith(workflowLoginURL.toLowerCase())) {
      //协同登录，响应结构不一样，需要单独处理
      responseData = {
        code: responseData?.Ret === 1 ? 0 : 1,
        message: responseData?.Msg ?? "协同登录服务异常",
        data: responseData?.Data ?? null,
      };
    } else if (targetUrl.startsWith("https://api.help.bj.cn/apis/weather")) {
      //   {
      //     "status": "0",       //反馈代码 0成功
      //     "msg": "反馈信息",      //反馈信息
      //     "cityen": "changchun",       //城市名称英文
      //     "city": "长春",       //城市名称
      //     "citycode": "101060101",       //城市编码
      //     "temp": "10",       //实时温度
      //     "tempf": "50",       //华氏温度
      //     "wd": "西风",       //风向
      //     "wden": "W",       //风向英文
      //     "wdforce": "3级",       //风力
      //     "wdspd": "<12km/h",       //风速
      //     "uptime": "12:00",       //更新时间
      //     "weather": "晴",       //天气状况
      //     "weatheren": "Sunny",       //天气状况英文
      //     "weatherimg": "d00",       //天气状况图标
      //     "stp": "994",       //气压
      //     "wisib": "35000",       //能见度
      //     "humidity": "46%",       //湿度
      //     "prcp": "0",       //降雨
      //     "prcp24h": "2.2",       //24小时降雨量
      //     "aqi": "22",       //AQI
      //     "pm25": "20",       //PM2.5
      //     "today": "10月17日(星期一)"      //今天日期
      // }
      //网上找的天气信息接口,由服务端代理,响应结构不一样,需要单独处理
      if (responseData?.status === "0") {
        responseData = {
          code: 0,
          message: null,
          data: responseData,
        };
      } else {
        responseData = {
          code: 1,
          message: "天气服务异常",
          data: null,
        };
      }
    }
  } else {
    return {
      code: 1,
      message: responseData?.message ?? "服务异常",
            message: responseData ? responseData.message : "服务异常",
      data: responseData,
    };
  }
  if (!responseData || responseData.code !== 0) {
    Message.error({ message: responseData?.message ?? "服务异常", duration: 1000 * 3 });
        Message.error({ message: responseData ? responseData.message : "服务异常", duration: 1000 * 3 });
  }
  return responseData;
}
@@ -182,9 +57,6 @@
//处理错误，返回统一结构
function handleTheError(error) {
  console.log(`axios包装过的错误${error.config.url}`, error);
  if (error.config?.showLoading === true) {
    hideLoading();
  }
  const responseData = { code: -999, data: null };
  if (error.response) {
    const { data, status, statusText } = error.response;
@@ -206,12 +78,6 @@
//添加请求拦截器
http.interceptors.request.use(
  (config) => {
    if (config.showLoading === true) {
      showLoading(config.loadingTarget);
    }
    if (config.withProjectId !== false) {
      config.headers["projectId"] = store.getters["common/currentProjectId"];
    }
    if (config.withToken !== false) {
      config.headers["token"] = getToken();
    }
@@ -249,9 +115,6 @@
//添加请求拦截器
modelhttp.interceptors.request.use(
  (config) => {
    if (config.showLoading === true) {
      showLoading(config.loadingTarget);
    }
    if (config.withProjectId !== false) {
      config.headers["projectId"] = store.getters["common/currentProjectId"];
    }

 src/utils/logout.js

File was deleted

 src/views/EquipmentView.vue

@@ -1,16 +1,15 @@
<template>
  <div class="equipment-container">
    <div class="top-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
 <div class="top-nav w-full mb-[1vh]" :style="{
          backgroundImage: `url(${titleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
        }">
      </div>
 <div class="bottom-nav">
  <div class="top-section mb-[20px]">

      <div class="stats-grid"  :style="sectionStyle">
        <div class="stat-item mb-[10px]">
          <div class="stat-info">
@@ -37,26 +36,20 @@
    </div>

    <div class="middle-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
   <div class="w-full h-[4vh] mb-[1vh]" :style="{
          backgroundImage: `url(${middleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
        }">
      </div>
      <div class="equipment-status"  :style="sectionStyle">
        <div 
          class="w-full h-[30px] mb-[10px]" 
          :style="{
    <div class="w-full h-[30px] mb-[10px]" :style="{
            backgroundImage: `url(${bgImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%'
          }"
        >
          }">
          <div class="text-white text-[14px] ml-[40px] leading-[35px]">升降机监控</div>
        </div>
        <div class="status-circles">
@@ -73,7 +66,7 @@
            </div>
          </template>
        </div>
        <div class="control-buttons mt-[30px]">
    <div class="control-buttons">
          <button class="control-btn" :class="{ 'active': currentTab === '塔吊监控' }" @click="handleControlBtnClick('塔吊监控')">塔吊监控</button>
          <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
        </div>
@@ -84,10 +77,7 @@
            <div class="progress relative w-[80%] h-[24px]">
              <div class="progress-inner" :style="{ width: `${deviceOnline / deviceTotal * 100}%` }"></div>
              <div class="progress-blocks">
                <div v-for="n in 28" :key="n" 
                  class="block"
                  :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"
                ></div>
        <div v-for="n in 28" :key="n" class="block" :class="{ 'active': (n-1)/28 * 100 <= (deviceOnline / deviceTotal * 100) }"></div>
              </div>
            </div>
            <div class="count-container ml-[25px]">
@@ -101,15 +91,12 @@
    </div>

    <div class="bottom-section">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
   <div class="w-full h-[4vh] mb-[1vh]" :style="{
          backgroundImage: `url(${bottomImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
        }">
      </div>
      <div class="environment-grid"  :style="sectionStyle">
        <div class="env-item">
@@ -157,6 +144,7 @@
      </div>
    </div>
  </div>
</div>
</template>

<script>
@@ -168,17 +156,22 @@
  },
  data() {
    return {
      backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png', import.meta.url).href,
      titleImage: new URL('@/assets/images/titles/renyuan.png', import.meta.url).href,
      middleImage: new URL('@/assets/images/titles/shebei.png', import.meta.url).href,
      bottomImage: new URL('@/assets/images/titles/huanjing.png', import.meta.url).href,
      bgImage: new URL('@/assets/images/titles/title_second.png', import.meta.url).href,
      enviorImage: new URL('@/assets/images/titles/wendu_bg.png', import.meta.url).href,
   backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
    import.meta.url).href,
   titleImage: new URL('@/assets/images/titles/renyuan.png',
    import.meta.url).href,
   middleImage: new URL('@/assets/images/titles/shebei.png',
    import.meta.url).href,
   bottomImage: new URL('@/assets/images/titles/huanjing.png',
    import.meta.url).href,
   bgImage: new URL('@/assets/images/titles/title_second.png',
    import.meta.url).href,
   enviorImage: new URL('@/assets/images/titles/wendu_bg.png',
    import.meta.url).href,
      deviceOnline: 1,
      deviceTotal: 27,
      currentTab: '塔吊监控',
      circleItems: [
        {
   circleItems: [{
          id: 'zaixianChartBox',
          name: '总在线',
          value: 22,
@@ -194,8 +187,7 @@
              left: 'center',
              show: false,
            },
            series: [
              {
      series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
@@ -215,9 +207,13 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
              },
              {
                type: 'pie',
@@ -239,9 +235,20 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
                ],
              },
              
@@ -264,8 +271,7 @@
              left: 'center',
              show: false,
            },
            series: [
              {
      series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
@@ -285,9 +291,13 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
              },
              {
                type: 'pie',
@@ -309,9 +319,20 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
                ],
              },
              
@@ -334,8 +355,7 @@
              left: 'center',
              show: false,
            },
            series: [
              {
      series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
@@ -355,9 +375,13 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
              },
              {
                type: 'pie',
@@ -379,9 +403,20 @@
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
                ],
              },
            ],
@@ -424,10 +459,17 @@
<style scoped>
.equipment-container {
  width: 100%;
 display: flex;
 flex-direction: column;
  height: calc(100vh - 100px);
  color: white;
 overflow: hidden;
}

.top-nav{
  height: 4vh;
}
.bottom-nav{
  flex: 1;
}
.section-title {
  font-size: 18px;
  margin-bottom: 20px;
@@ -436,18 +478,22 @@

.top-section {
  width: 100%;
 height: calc(100% - 80%);
}

.middle-section {
  width: 100%;
 height: 40%;
}

.bottom-section {
  width: 100%;
 height: calc(100% - 20% - 43%);
}

.stats-grid {
  width: 100%;
 height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -465,6 +511,7 @@
  background: linear-gradient( 270deg, rgba(48,104,165,0.1) 2%, #3068A5 100%);
  border-radius: 2px;
} 

.env-item {
  width: 100%;
  display: flex;
@@ -478,37 +525,43 @@
  flex-direction: row;
  align-items: left;
}

.env-info {
  display: flex;
  flex-direction: column;
 align-items: center;
 justify-content: center;
  width: 70%;
  height: 100%;
 height: 95%;
}

.satalabel{
  font-size: 16px;
  color: #fff;
}

.label {
  font-size: 12px;
  color: #fff;
}

.envlabel {
  font-size: 14px;
  color: #C8C8C8;
  margin-left: 20px;
}

.envvalue {
  text-align: center;
  font-size: 16px;
  color: #fff;
  margin-top: 4px;
  width: 100%;
  height: 100%;
  padding-left: 20px;
}

.equipment-status {
  padding: 20px 10px;
 height: calc(100% - 5vh);
}

.status-title {
@@ -546,6 +599,7 @@
.environment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 height: calc(100% - 5vh);
}

.control-buttons {
@@ -577,9 +631,7 @@
  margin: 20px 0;
}

.progress-bar {
  margin-top: 20px;
}


.bar {
  width: 100%;

 src/views/Home.vue

@@ -17,84 +17,70 @@
        </div>
      </div>
    </div>

 <div class="bottom-nav">
    <div class="content-wrapper mb-[20px]">
      <!-- 720菜单 -->
      <div class="side-menu" v-if="currentView === '720'">
        <div class="menu-dropdown">
          <select class="menu-select">
            <option>请选择</option>
          </select>
        </div>
        <div class="menu-list">
          <div class="menu-item">
            <span>一期</span>
            <i class="arrow-icon"></i>
          </div>
          <div class="menu-item">
            <span>二期</span>
            <i class="arrow-icon"></i>
          </div>
          <div class="menu-item">
            <span>三期</span>
            <i class="arrow-icon"></i>
          </div>
          <div class="menu-item">
            <span>四期</span>
            <i class="arrow-icon"></i>
          </div>
        </div>
        <div class="submenu">
          <div class="submenu-item">1#楼东立面图</div>
          <div class="submenu-item">1#出入口层立-1</div>
          <div class="submenu-item">2#出入口层立-2</div>
          <div class="submenu-item">2#楼东立面图</div>
          <div class="submenu-item">3#楼东立面图</div>
          <div class="submenu-item">停车场入口区控制面</div>
        </div>
    <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange">
    </el-cascader>
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content" v-loading="isLoading">
        <!-- 模型 -->
        <div class="w-full h-full" v-if="currentView === 'model'" >
          <iframe id="model-iframe" class="content-frame w-full h-[588px]" src="" frameborder="0"></iframe>
     <iframe id="model-iframe" class="content-frame w-full h-full" src="" frameborder="0"></iframe>
        </div>
        <!-- 720 -->
        <div class="w-full h-full bg-white" v-if="currentView === '720'">
          <div id="panoviewpreview" class="pano-frame w-full h-[588px]">
    <div :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'" v-if="currentView === '720'">
     <div id="panoviewpreview" class="pano-frame w-full h-full" :style="isFullScreen ? fullScreenPanoStyle : ''">
     </div>
     <!-- 720全景图版本选择 -->
     <div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'">
      <div v-for="item in panoVersionList" :key="item.value" :style="isFullScreen ? 'z-index: 100;' : ''">
       <div class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]">
        <img :src="item.img" alt="全景图" class="w-full h-full" />
       </div>
      </div>
     </div>

     <!-- 放大镜 -->
     <div class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%]" v-if="currentView === '720'" @click="handleZoomOut">
      <img src="../assets/images/backgrounds/zoomout.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
      <img src="../assets/images/backgrounds/zoomout.png" alt="缩小" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-else />
          </div>
        </div>
        <!-- 项目 -->
        <div class="w-full h-full" v-if="currentView === 'project'" >
          <iframe id="scene-iframe" class="scene-frame w-full h-[588px]" src="" frameborder="0"></iframe>
     <iframe id="scene-iframe" class="scene-frame w-full h-full" src="" frameborder="0"></iframe>
        </div>
      </div>

    </div>
    <div class="chart-content">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
   <div class="w-full h-[4vh] mb-[1vh]" :style="{
          backgroundImage: `url(${bottomImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
        }">
      </div>
      <div class="chart-container">
        <img src="../assets/images/backgrounds/shigongjinduchart.png" alt="施工进度" class="w-full h-[280px]"/>
   <div class="chart-container" :style="sectionStyle">
    <img src="../assets/images/backgrounds/shigongjinduchart.png" alt="施工进度" class="w-full h-full" />
      </div>
    </div>
 </div>

  </div>
</template>

<script>
import { nextTick } from 'vue'
import {
 nextTick
} from 'vue'
export default {
  name: 'Home',
  components: {
  },
 components: {},
  data() {
    return {
      currentView: 'model',
@@ -106,11 +92,82 @@
          }
        }
      },
      bottomImage: new URL('@/assets/images/titles/shigong.png', import.meta.url).href,
      isLoading: false
   bottomImage: new URL('@/assets/images/titles/shigong.png',
    import.meta.url).href,
   isLoading: false,
   panoVersionList: [{
     value: '1',
     img: 'http://dev-pano.vothing.com/Panorama/bfb5597e-72cc-7f70-679c-fda46008effe/vtour/panos/7299e0b4-eac5-4c93-9d63-305fa2867f10.tiles/thumb.jpg'
    },
    {
     value: '2',
     img: 'http://dev-pano.vothing.com/Panorama/bfb5597e-72cc-7f70-679c-fda46008effe/vtour/panos/2e984554-8708-47dd-b8a0-b53e9e727ca2.tiles/thumb.jpg'
    },

   ],
   isFullScreen: false,
   fullScreenStyle: '',
   fullScreenPanoStyle: '',
   panoList: [{
    value: 'zhinan',
    label: '指南',
    children: [{
     value: 'shejiyuanze',
     label: '设计原则'
    }, {
     value: 'daohang',
     label: '导航'
    }]
   }, {
    value: 'zujian',
    label: '组件',
    children: [{
     value: 'basic',
     label: 'Basic',
    }, {
     value: 'form',
     label: 'Form',
    }, {
     value: 'data',
     label: 'Data',
    }, {
     value: 'notice',
     label: 'Notice',
    }, {
     value: 'navigation',
     label: 'Navigation',
    }, {
     value: 'others',
     label: 'Others',
    }],
   }],
   panoValue: [],
   backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
    import.meta.url).href,
    }
  },
 computed: {
  sectionStyle() {
   return {
    backgroundImage: `url(${this.backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  }
 },

  methods: {
  handleZoomOut() {
   console.log('放大')
   this.isFullScreen = !this.isFullScreen
   if (this.isFullScreen) {
    const clientX = document.documentElement.clientWidth || document.body.clientWidth
    const clientY = document.documentElement.clientHeight || document.body.clientHeight
    this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; `
    this.fullScreenStyle = `width: ${clientX - 40}px; height: ${clientY - 120}px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`
   }
  },
    handleChange(view) {
      this.isLoading = true
      this.currentView = view
@@ -128,6 +185,9 @@
          this.sceneShow()
        })
      }
  },
  handlePanoChange(value) {
   console.log('value', value)
    },
    modelShow() {
      const iframe = document.getElementById('model-iframe')
@@ -147,7 +207,9 @@
      let setting = {}
      if (scene) {
        const scenename = 'scene_' + scene.PsScenename
        setting = { startscene: scenename }
    setting = {
     startscene: scenename
    }
      }
      this.$nextTick(() => {
        embedpano({
@@ -174,19 +236,23 @@
}
</script>

<style scoped lang="scss">
<style lang="scss" scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
 height: calc(100vh - 100px);
 overflow: hidden;
}

.top-nav {
  height: 50px;
 height: 5vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
.bottom-nav{
  flex: 1;
}

.nav-items {
@@ -214,11 +280,13 @@
  align-items: center;
  width: 200px;
}

.time-info-item {
  display: flex;
  align-items: center;
  
}

.time-line {
  width: 200px;
  height: 1px;
@@ -229,17 +297,35 @@
  display: flex;
  overflow: hidden;
  position: relative;
 height: 52%;
}

.chart-content {
 width: 100%;
 height: calc(100% - 52% - 20px);
}

.side-menu {
  width: 250px;
  background-color: #1e3d6b;
 width: 160px;
  color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;

 ::v-deep .el-cascader {
  width: 100%;
  height: 100%;

  .el-cascader-node__label {
   color: #fff;
  }

  .el-input .el-input__inner {
   background: rgba(33, 72, 115, 0.9);
  }
 }
}

.menu-dropdown {
@@ -296,7 +382,7 @@
  flex: 1;
  background-color: #fff;
  width: 100%;
  height: 588px;
 height: 100%;
}

.content-header {
@@ -305,11 +391,9 @@
}

.chart-container {
  background-color: #1e3d6b;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  height: 100%;
 height: calc(100% - 5vh);
}

.chart-legend {
@@ -359,4 +443,49 @@
.tab.active {
  background-color: #2a4d7d;
}
</style><style lang="scss">
.custom-dropdown {
 background-color: rgba(33, 72, 115, 0.9);
 border-radius: 2px;
 border: 1px solid #3068A5;

 .el-cascader-menu {
  color: #fff;

  .el-cascader-node__label {
   color: #fff;
  }
 }

 .el-cascader .el-input .el-input__inner:focus,
 .el-cascader .el-input.is-focus .el-input__inner {
  height: 28px;
  line-height: 28px;
 }

 .el-cascader .el-input .el-input__inner {
  height: 28px;
  line-height: 28px;
  background: rgba(33, 72, 115, 0.9);
 }

 .el-input__icon {
  line-height: 38px;
 }

 .el-cascader-node:not(.is-disabled):focus,
 .el-cascader-node:not(.is-disabled):hover {
  background: #3068A5;
 }

 .popper__arrow {
  display: none;
 }

 .el-scrollbar__wrap {
  overflow: hidden;
  margin-bottom: 0px !important;
  margin-right: 0px !important;
 }
}
</style>

 src/views/ProjectView.vue

@@ -22,6 +22,7 @@
        backgroundSize: 'cover'
      }"
    >
      <div class="h-[120px] w-full">
      <!-- 建筑面积 -->
      <div 
        class="w-full h-[50px] mb-[10px] flex items-center justify-evenly" 
@@ -64,7 +65,8 @@
          <div class="text-[24px] text-[#00FFFF] font-bold">2028-12-01</div>
        </div>
      </div>

      </div>
      <div class="w-[100%] h-[38%]">
      <!-- 项目名称 -->
      <div 
        class="w-full h-[30px] mt-[20px] mb-[10px]" 
@@ -78,7 +80,7 @@
        <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：北京交通大学雄安校区</div>
      </div>

      <div class="text-white text-[14px] tracking-[1px] leading-[24px]">
        <div class="text-white text-[14px] tracking-[1px] leading-[24px] h-[60px]">
        北京交通大学雄安校区选址位于河北雄安新区第五组团及启动区。东至规划绿地、城市道路NB6，南至城市道路ED34、城市道路EA2，西至城市道路ND32、城市道路NA11，北至城市道路EA1。
      </div>

@@ -87,7 +89,8 @@
        alt="" 
        class="w-full h-[196px] mt-[20px]"
      >

      </div>
      <div class="w-[100%] h-[15%]">
      <!-- 参建单位 -->
      <div 
        class="w-full h-[30px] mt-[20px] mb-[10px]" 
@@ -151,7 +154,8 @@
          >
        </div>
      </div>

      </div>
      <div class="chart-container">
      <!-- 表格搜索 -->
      <div class="w-full flex items-center justify-between mb-[10px] mt-[20px]">
        <el-input
@@ -196,13 +200,17 @@
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { getProjectId, getToken } from "../utils/getToken.js";
import { HomeAPI } from "../api/home";
export default {
  name: 'ProjectView',
  data() {
    return {
      projectId: '',
      searchText: '',
      backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png', import.meta.url).href,
      titleImage: new URL('@/assets/images/titles/xiangmu.png', import.meta.url).href,
@@ -233,6 +241,52 @@
      ]
    };
  },
  mounted() {
    this.getProject();
    this.getParticipatingList();
    this.getParticipatingNumber();
  },
  methods: {
    getProject() {
      this.projectId = getProjectId();
      const data = {
        "projectId": this.projectId
      }
      HomeAPI.GetProject(data).then(res => {
        console.log(res);
        if(res.Ret === 1) {
          const result = res.Data
          console.log(result);
        }
        
      });
    },
    getParticipatingList() {
      const data = {
        "organizeId": this.projectId,
        name: ''
      }
      HomeAPI.GetParticipatingList(data).then(res => {
        console.log(res);
        if(res.Ret === 1) {
          const result = res.Data
          console.log(result);
        }
      });
    },
    getParticipatingNumber() {
      const data = {
        "organizeId": this.projectId
      }
      HomeAPI.GetParticipatingNumber(data).then(res => {
        console.log(res);
        if(res.Ret === 1) {
          const result = res.Data
          console.log(result);
        }
      });
    }
  }
}
</script>

@@ -302,4 +356,8 @@
  background: linear-gradient(180deg, #3068A5 0%, #1E4066 100%);
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.2);
}
.chart-container{
  width: 100%;
  height: calc(40% - 180px);
}
</style>

 vite.config.js

@@ -1,3 +1,11 @@
/*
 * @Author: gjj Ganjj@probim.com.cn
 * @Date: 2025-02-14 14:32:19
 * @LastEditors: gjj Ganjj@probim.com.cn
 * @LastEditTime: 2025-02-24 17:26:18
 * @FilePath: \北京交通大学\vite.config.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/* eslint-disable no-unused-vars */
import path from "path";
import { defineConfig, splitVendorChunkPlugin } from "vite";
@@ -32,7 +40,7 @@
            proxy: {
                "^/api/": {
                    // target: "http://47.117.124.20:2002/",
                    target: "https://www.probim.cn:7707",
                    target: "http://8.140.54.245:5000/",
                    rewrite: (path) => path.replace(/^\/api\//, ""),
                    changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
                },