调整样式，接口对接

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);
  },

  getEquipmentCategoryCount: (data, config = {}) => {
    return http.post("/beh/equipment/total", data, config);
  },

  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");
  }
};
    GetParticipatingList: (data) => {
        return http.get("/api/User/Home/GetParticipatingList", {
            params: data
        });
    },
    GetParticipatingNumber: (data) => {
        return http.get("/api/User/Home/GetParticipatingNumber", {
            params: data
        });
    },
};

 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

@@ -6,4 +6,8 @@
        token = window.localStorage.getItem("token");
    }
    return token;
}
export const getProjectId = () => {
    let id = window.ProjectConfig.projectId;
    return id;
}

 src/utils/getUserProfile.js

File was deleted

 src/utils/http.js

@@ -3,237 +3,103 @@
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) {
  //生产环境
  const ProjectConfig = window.ProjectConfig;
  
  axiosBaseURL = ProjectConfig.axiosBaseURL;
  axiosTimeout = ProjectConfig.axiosTimeout;
  workflowLoginURL = ProjectConfig.workflowLoginURL;
if (
    import.meta.env.PROD) {
    //生产环境
    const ProjectConfig = window.ProjectConfig;

    axiosBaseURL = ProjectConfig.axiosBaseURL;
    axiosTimeout = ProjectConfig.axiosTimeout;
} else {
  //非生产环境
  axiosBaseURL = "/api";
  axiosTimeout = 1000 * 30;
  workflowLoginURL = "http://workflow-newapi.probim.cn/api/User/Home/Login";
    //非生产环境
    axiosBaseURL = "/api";
    axiosTimeout = 1000 * 30;
}

export const http = axios.create({
  withCredentials: false,
  baseURL: axiosBaseURL,
  timeout: axiosTimeout
    withCredentials: false,
    baseURL: axiosBaseURL,
    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: {}
  //   }
    console.log(`axios包装过的响应${response.config.url}`, response);

  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,
    let responseData = response.data;
    if (response.status === 200) {
        if (/^\s*$/g.test("" + responseData)) {
            responseData = {
                code: 1,
                message: "无响应数据",
                data: null,
            };
        }
    } else {
        return {
            code: 1,
            message: responseData ? responseData.message : "服务异常",
            data: responseData,
        };
      } else {
        responseData = {
          code: 1,
          message: "天气服务异常",
          data: null,
        };
      }
    }
  } else {
    return {
      code: 1,
      message: responseData?.message ?? "服务异常",
      data: responseData,
    };
  }
  if (!responseData || responseData.code !== 0) {
    Message.error({ message: responseData?.message ?? "服务异常", duration: 1000 * 3 });
  }
  return responseData;
    if (!responseData || responseData.code !== 0) {
        Message.error({ message: responseData ? responseData.message : "服务异常", duration: 1000 * 3 });
    }
    return responseData;
}

//处理错误，返回统一结构
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;
    if (status === 500 && /^\s*$/gi.test(data + "")) {
      responseData.message = "服务异常,无响应数据";
    console.log(`axios包装过的错误${error.config.url}`, error);
    const responseData = { code: -999, data: null };
    if (error.response) {
        const { data, status, statusText } = error.response;
        if (status === 500 && /^\s*$/gi.test(data + "")) {
            responseData.message = "服务异常,无响应数据";
        } else {
            responseData.data = data;
            responseData.message = `${statusText ?? "服务异常,请稍后再试"}`;
        }
    } else if (error.request) {
        responseData.message = "未收到服务端响应,请稍后再试";
    } else {
      responseData.data = data;
      responseData.message = `${statusText ?? "服务异常,请稍后再试"}`;
        responseData.message = "未发送请求,请检查请求参数是否正确";
    }
  } else if (error.request) {
    responseData.message = "未收到服务端响应,请稍后再试";
  } else {
    responseData.message = "未发送请求,请检查请求参数是否正确";
  }
  Message.error({ message: responseData.message, duration: 1000 * 3 });
  return responseData;
    Message.error({ message: responseData.message, duration: 1000 * 3 });
    return responseData;
}

//添加请求拦截器
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();
    }
    return config;
  },
  (error) => {
    // console.log("request-error", error);
    //todo 封装成固定结构 {code,data,message}
    return handleTheError(error);
  },
    (config) => {
        if (config.withToken !== false) {
            config.headers["token"] = getToken();
        }
        return config;
    },
    (error) => {
        // console.log("request-error", error);
        //todo 封装成固定结构 {code,data,message}
        return handleTheError(error);
    },
);

//响应拦截器
http.interceptors.response.use(
  (response) => {
    //todo 封装成固定结构 {code,data,message}
    return handleTheResponse(response);
  },
  (error) => {
    //todo 封装成固定结构 {code,data,message}
    return handleTheError(error);
  },
    (response) => {
        //todo 封装成固定结构 {code,data,message}
        return handleTheResponse(response);
    },
    (error) => {
        //todo 封装成固定结构 {code,data,message}
        return handleTheError(error);
    },
);
// 引擎接口
let modelaxiosUrl
@@ -241,40 +107,37 @@

modelaxiosUrl = ProjectConfig.modelUrl;
export const modelhttp = axios.create({
  withCredentials: false,
  baseURL: modelaxiosUrl,
  timeout: axiosTimeout
    withCredentials: false,
    baseURL: modelaxiosUrl,
    timeout: axiosTimeout
});

//添加请求拦截器
modelhttp.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();
    }
    return config;
  },
  (error) => {
    // console.log("request-error", error);
    //todo 封装成固定结构 {code,data,message}
    return handleTheError(error);
  },
    (config) => {
        if (config.withProjectId !== false) {
            config.headers["projectId"] = store.getters["common/currentProjectId"];
        }
        if (config.withToken !== false) {
            config.headers["token"] = getToken();
        }
        return config;
    },
    (error) => {
        // console.log("request-error", error);
        //todo 封装成固定结构 {code,data,message}
        return handleTheError(error);
    },
);

//响应拦截器
modelhttp.interceptors.response.use(
  (response) => {
    //todo 封装成固定结构 {code,data,message}
    return handleTheResponse(response);
  },
  (error) => {
    //todo 封装成固定结构 {code,data,message}
    return handleTheError(error);
  },
    (response) => {
        //todo 封装成固定结构 {code,data,message}
        return handleTheResponse(response);
    },
    (error) => {
        //todo 封装成固定结构 {code,data,message}
        return handleTheError(error);
    },
);

 src/utils/logout.js

File was deleted

 src/views/EquipmentView.vue

@@ -1,618 +1,670 @@
<template>
  <div class="equipment-container">
    <div class="top-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
<div class="equipment-container">
 <div class="top-nav w-full mb-[1vh]" :style="{
          backgroundImage: `url(${titleImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
      </div>
      <div class="stats-grid"  :style="sectionStyle">
        <div class="stat-item mb-[10px]">
          <div class="stat-info">
            <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="">
            <span class="satalabel ml-[8px]">实时人数</span>
          </div>
          <div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
        </div>
        <div class="stat-item mb-[10px]">
          <div class="stat-info">
            <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="">
            <span class="satalabel ml-[8px]">今日累计/人次</span>
          </div>
          <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
        </div>
        <div class="stat-item">
          <div class="stat-info">
            <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="">
            <span class="satalabel ml-[8px]">在岗总数</span>
          </div>
          <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
        </div>
      </div>
    </div>
        }">
 </div>
 <div class="bottom-nav">
  <div class="top-section mb-[20px]">

    <div class="middle-section mb-[20px]">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
   <div class="stats-grid" :style="sectionStyle">
    <div class="stat-item mb-[10px]">
     <div class="stat-info">
      <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/shishirenshu.png" alt="">
      <span class="satalabel ml-[8px]">实时人数</span>
     </div>
     <div class="value text-[#00FFFF] text-[28px] font-bold">62</div>
    </div>
    <div class="stat-item mb-[10px]">
     <div class="stat-info">
      <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/people.png" alt="">
      <span class="satalabel ml-[8px]">今日累计/人次</span>
     </div>
     <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
    </div>
    <div class="stat-item">
     <div class="stat-info">
      <img class="w-[24px] h-[24px]" src="../assets/images/backgrounds/zaigang.png" alt="">
      <span class="satalabel ml-[8px]">在岗总数</span>
     </div>
     <div class="value text-[#FFD500] text-[28px] font-bold">62</div>
    </div>
   </div>
  </div>

  <div class="middle-section mb-[20px]">
   <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>
   <div class="equipment-status" :style="sectionStyle">
    <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">
          <template v-for="item in circleItems">
            <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
              <div class="progress-circle">
                <V2Echarts :idName="item.id" :options="item.options" />
                <div class="percentage">{{item.percentage}}%</div>
            </div>
            <div class="label mt-[5px] flex flex-row items-center justify-center">
              <div class="text-[12px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
              <div class="text-[24px] text-[#FFD500]">{{item.value}}</div>
            </div>
            </div>
          </template>
        </div>
        <div class="control-buttons mt-[30px]">
          <button class="control-btn" :class="{ 'active': currentTab === '塔吊监控' }" @click="handleControlBtnClick('塔吊监控')">塔吊监控</button>
          <button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
        </div>
        <div class="divider"></div>
        <div class="progress-bar">
          <div class="label">运行设备总数</div>
          <div class="bar flex items-center">
            <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>
            </div>
            <div class="count-container ml-[25px]">
              <span class="text-[#FFBF00] text-[24px]">{{deviceOnline}}</span>
              <span class="text-white text-[24px]">/</span>
              <span class="text-white text-[24px]">{{deviceTotal}}</span>
            </div>
          </div>
        </div>
      </div>
          }">
     <div class="text-white text-[14px] ml-[40px] leading-[35px]">升降机监控</div>
    </div>
    <div class="status-circles">
     <template v-for="item in circleItems">
      <div class="circle-item flex flex-col items-center justify-center" :key="item.id">
       <div class="progress-circle">
        <V2Echarts :idName="item.id" :options="item.options" />
        <div class="percentage">{{item.percentage}}%</div>
       </div>
       <div class="label mt-[5px] flex flex-row items-center justify-center">
        <div class="text-[12px] text-[#FFFFFF] mr-[12px]">{{item.name}}</div>
        <div class="text-[24px] text-[#FFD500]">{{item.value}}</div>
       </div>
      </div>
     </template>
    </div>
    <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>
    <div class="divider"></div>
    <div class="progress-bar">
     <div class="label">运行设备总数</div>
     <div class="bar flex items-center">
      <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>
      </div>
      <div class="count-container ml-[25px]">
       <span class="text-[#FFBF00] text-[24px]">{{deviceOnline}}</span>
       <span class="text-white text-[24px]">/</span>
       <span class="text-white text-[24px]">{{deviceTotal}}</span>
      </div>
     </div>
    </div>
   </div>
  </div>

    <div class="bottom-section">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
  <div class="bottom-section">
   <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">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqiwendu.png" alt="">
          <div class="env-info">
            <span class="envlabel">大气温度</span>
            <span class="envvalue" :style="enviorStyle">5°C</span>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt="">
          <div class="env-info">
            <span class="envlabel">大气湿度</span>
            <span class="envvalue" :style="enviorStyle">22.9%</span>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt="">
          <div class="env-info">
            <span class="envlabel">PM2.5</span>
            <span class="envvalue" :style="enviorStyle">10 μg/m³</span>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt="">
          <div class="env-info">
            <span class="envlabel">PM10</span>
            <span class="envvalue" :style="enviorStyle">13 μg/m³</span>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt="">
          <div class="env-info">
            <span class="envlabel">风力</span>
            <span class="envvalue" :style="enviorStyle">3级</span>
          </div>
        </div>
        <div class="env-item">
          <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt="">
          <div class="env-info">
            <span class="envlabel">风向</span>
            <span class="envvalue" :style="enviorStyle">北风</span>
          </div>
        </div>
      </div>
        }">
   </div>
   <div class="environment-grid" :style="sectionStyle">
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqiwendu.png" alt="">
     <div class="env-info">
      <span class="envlabel">大气温度</span>
      <span class="envvalue" :style="enviorStyle">5°C</span>
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/daqishidu.png" alt="">
     <div class="env-info">
      <span class="envlabel">大气湿度</span>
      <span class="envvalue" :style="enviorStyle">22.9%</span>
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM2.png" alt="">
     <div class="env-info">
      <span class="envlabel">PM2.5</span>
      <span class="envvalue" :style="enviorStyle">10 μg/m³</span>
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/PM10.png" alt="">
     <div class="env-info">
      <span class="envlabel">PM10</span>
      <span class="envvalue" :style="enviorStyle">13 μg/m³</span>
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengli.png" alt="">
     <div class="env-info">
      <span class="envlabel">风力</span>
      <span class="envvalue" :style="enviorStyle">3级</span>
     </div>
    </div>
    <div class="env-item">
     <img class="w-[60px] h-[60px]" src="../assets/images/backgrounds/fengxiang.png" alt="">
     <div class="env-info">
      <span class="envlabel">风向</span>
      <span class="envvalue" :style="enviorStyle">北风</span>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</template>

<script>
import V2Echarts from '@/components/V2Echarts.vue'
export default {
  name: 'EquipmentView',
  components: {
    V2Echarts
  },
  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,
      deviceOnline: 1,
      deviceTotal: 27,
      currentTab: '塔吊监控',
      circleItems: [
        {
          id: 'zaixianChartBox',
          name: '总在线',
          value: 22,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              },
              
            ],
          }
 name: 'EquipmentView',
 components: {
  V2Echarts
 },
 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,
   deviceOnline: 1,
   deviceTotal: 27,
   currentTab: '塔吊监控',
   circleItems: [{
     id: 'zaixianChartBox',
     name: '总在线',
     value: 22,
     percentage: 81.5,
     options: {
      tooltip: {
       trigger: 'item',
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        {
          id: 'lixianChartBox',
          name: '总离线',
          value: 5,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 20, name: '主隧洞掘进', itemStyle: { color: '#00FFFF' } },
                  { value: 80, name: '', itemStyle: { color: 'transparent' } },
                ],
              },
              
            ],
          }
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        {
          id: 'baojingChartBox',
          name: '总报警',
          value: 0,
          percentage: 81.5,
          options: {
            tooltip: {
              trigger: 'item',
            },
            legend: {
              itemWidth: 8,
              itemHeight: 8,
              top: '5%',
              left: 'center',
              show: false,
            },
            series: [
              {
                type: 'pie',
                radius: ['70%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 5,
                    shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
                  },
                },
                data: [
                  { value: 100, name: '', itemStyle: { color: '#234E84' } },
                ],
              },
              {
                type: 'pie',
                radius: ['70%', '100%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                startAngle: 90,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                    },
                    labelLine: {
                      show: false,
                    },
                    shadowBlur: 40,
                    borderWidth: 10,
                    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'
          }
         },
        ],
       },

      ],
     }
    },
    {
     id: 'lixianChartBox',
     name: '总离线',
     value: 5,
     percentage: 81.5,
     options: {
      tooltip: {
       trigger: 'item',
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
        ],
       },

      ],
     }
    },
    {
     id: 'baojingChartBox',
     name: '总报警',
     value: 0,
     percentage: 81.5,
     options: {
      tooltip: {
       trigger: 'item',
      },
      legend: {
       itemWidth: 8,
       itemHeight: 8,
       top: '5%',
       left: 'center',
       show: false,
      },
      series: [{
        type: 'pie',
        radius: ['70%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 5,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
         value: 100,
         name: '',
         itemStyle: {
          color: '#234E84'
         }
        }, ],
       },
       {
        type: 'pie',
        radius: ['70%', '100%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        hoverAnimation: false,
        startAngle: 90,
        itemStyle: {
         normal: {
          label: {
           show: false,
          },
          labelLine: {
           show: false,
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)', // 边框阴影
         },
        },
        data: [{
          value: 20,
          name: '主隧洞掘进',
          itemStyle: {
           color: '#00FFFF'
          }
         },
         {
          value: 80,
          name: '',
          itemStyle: {
           color: 'transparent'
          }
         },
        ],
       },
      ],
     }
    }
  },
  computed: {
    sectionStyle() {
      return {
        backgroundImage: `url(${this.backgroundImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%'
      }
    },
    enviorStyle() {
      return {
        backgroundImage: `url(${this.enviorImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%'
      }
    }
  },
  methods: {
    handleControlBtnClick(tab) {
      this.currentTab = tab;
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
   ]
  }
 },
 computed: {
  sectionStyle() {
   return {
    backgroundImage: `url(${this.backgroundImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  },
  enviorStyle() {
   return {
    backgroundImage: `url(${this.enviorImage})`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '100% 100%'
   }
  }
 },
 methods: {
  handleControlBtnClick(tab) {
   this.currentTab = tab;
  },
  handleResize() {
   if (this.myChart) {
    this.myChart.resize()
   }
  },
 }
}
</script>

<style scoped>
.equipment-container {
  width: 100%;
  height: calc(100vh - 100px);
  color: white;
 width: 100%;
 display: flex;
 flex-direction: column;
 height: calc(100vh - 100px);
 overflow: hidden;
}

.top-nav{
  height: 4vh;
}
.bottom-nav{
  flex: 1;
}
.section-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #fff;
 font-size: 18px;
 margin-bottom: 20px;
 color: #fff;
}

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

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

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

.stats-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 20px 10px;
}

.stat-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px;
  height: 52px;
  background: linear-gradient( 270deg, rgba(48,104,165,0.1) 2%, #3068A5 100%);
  border-radius: 2px;
} 
.stat-item {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 14px;
 height: 52px;
 background: linear-gradient(270deg, rgba(48, 104, 165, 0.1) 2%, #3068A5 100%);
 border-radius: 2px;
}

.env-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 10px 14px;
}

.stat-info {
  display: flex;
  flex-direction: row;
  align-items: left;
 display: flex;
 flex-direction: row;
 align-items: left;
}

.env-info {
  display: flex;
  flex-direction: column;
  width: 70%;
  height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 70%;
 height: 95%;
}
.satalabel{
  font-size: 16px;
  color: #fff;

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

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

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

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

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

.status-title {
  font-size: 16px;
  margin-bottom: 20px;
 font-size: 16px;
 margin-bottom: 20px;
}

.status-circles {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
 display: flex;
 justify-content: space-around;
 margin: 20px 0;
}

.progress-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #3068A5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 border: 4px solid #3068A5;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: relative;
}

.percentage {
  font-size: 12px;
  color: #00ffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 font-size: 12px;
 color: #00ffff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.environment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 height: calc(100% - 5vh);
}

.control-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
 display: flex;
 gap: 10px;
 justify-content: center;
}

.control-btn {
  padding: 8px 16px;
  background: rgba(112,119,140,0.3);
  border-radius: 2px;
  border: 1px solid rgba(112,124,140,0.6);
  color: #C8C8C8;
  cursor: pointer;
 padding: 8px 16px;
 background: rgba(112, 119, 140, 0.3);
 border-radius: 2px;
 border: 1px solid rgba(112, 124, 140, 0.6);
 color: #C8C8C8;
 cursor: pointer;
}

.control-btn.active {
  background: rgba(255,191,0,0.2);
  border-radius: 2px;
  border: 1px solid #FFBF00;
  color: #fff;
 background: rgba(255, 191, 0, 0.2);
 border-radius: 2px;
 border: 1px solid #FFBF00;
 color: #fff;
}

.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient( 270deg, rgba(94,161,209,0.1) 0%, #4886BC 49%, rgba(48,104,165,0.1) 100%);
  margin: 20px 0;
 width: 100%;
 height: 1px;
 background: linear-gradient(270deg, rgba(94, 161, 209, 0.1) 0%, #4886BC 49%, rgba(48, 104, 165, 0.1) 100%);
 margin: 20px 0;
}

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


.bar {
  width: 100%;
 width: 100%;
}

.progress {
  background: rgba(216,216,216,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
 background: rgba(216, 216, 216, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.2);
 overflow: hidden;
}

.progress-blocks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 4px;
  padding: 2px 4px;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 gap: 4px;
 padding: 2px 4px;
}

.block {
  flex: 1;
  height: 100%;
  background: rgba(216,216,216,0.1);
 flex: 1;
 height: 100%;
 background: rgba(216, 216, 216, 0.1);
}

.block.active {
  background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
 background: linear-gradient(180deg, #FFD500 0%, #FF9B00 100%);
}

.progress-inner {
  display: none;
 display: none;
}
</style>

 src/views/Home.vue

@@ -1,362 +1,491 @@
<template>
  <div class="home-container">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <div class="nav-items">
        <div class="nav-item mr-[8px]" :class="{ active: currentView === 'model' }" @click="handleChange('model')">模型</div>
        <div class="nav-item mr-[8px]" :class="{ active: currentView === '720' }" @click="handleChange('720')">720全景</div>
        <div class="nav-item" :class="{ active: currentView === 'project' }" @click="handleChange('project')">项目实况</div>
      </div>
      <div class="time-info">
        <div class="time-info-item">
          <i class="el-icon-date" style="color: #FFBF00;font-size: 20px;"></i>
          <div class="text-white text-[16px] ml-[4px]">工程倒计时/天</div>
          <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">175</div>
        </div>
        <div class="time-line">
        </div>
      </div>
    </div>
<div class="home-container">
 <!-- 顶部导航 -->
 <div class="top-nav">
  <div class="nav-items">
   <div class="nav-item mr-[8px]" :class="{ active: currentView === 'model' }" @click="handleChange('model')">模型</div>
   <div class="nav-item mr-[8px]" :class="{ active: currentView === '720' }" @click="handleChange('720')">720全景</div>
   <div class="nav-item" :class="{ active: currentView === 'project' }" @click="handleChange('project')">项目实况</div>
  </div>
  <div class="time-info">
   <div class="time-info-item">
    <i class="el-icon-date" style="color: #FFBF00;font-size: 20px;"></i>
    <div class="text-white text-[16px] ml-[4px]">工程倒计时/天</div>
    <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">175</div>
   </div>
   <div class="time-line">
   </div>
  </div>
 </div>
 <div class="bottom-nav">
  <div class="content-wrapper mb-[20px]">
   <!-- 720菜单 -->
   <div class="side-menu" v-if="currentView === '720'">
    <el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange">
    </el-cascader>
   </div>

    <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>
      </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>
        </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>
        </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>
        </div>
      </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-full" src="" frameborder="0"></iframe>
    </div>
    <div class="chart-content">
      <div 
        class="w-full h-[4vh] mb-[1vh]" 
        :style="{
    <!-- 720 -->
    <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-full" src="" frameborder="0"></iframe>
    </div>
   </div>

  </div>
  <div class="chart-content">
   <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>
    </div>
        }">
   </div>
   <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: {
  },
  data() {
    return {
      currentView: 'model',
      chartOptions: {
        id: 'shigongjinduChart',
        options: {
          title: {
            text: '施工进度'
          }
        }
      },
      bottomImage: new URL('@/assets/images/titles/shigong.png', import.meta.url).href,
      isLoading: false
 name: 'Home',
 components: {},
 data() {
  return {
   currentView: 'model',
   chartOptions: {
    id: 'shigongjinduChart',
    options: {
     title: {
      text: '施工进度'
     }
    }
   },
   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;`
   }
  },
  methods: {
    handleChange(view) {
      this.isLoading = true
      this.currentView = view
      if (view === 'model') {
        removepano('krpanoSWFObject')
        nextTick(() => {
          this.modelShow()
        })
      } else if (view === '720') {
        nextTick(() => {
          this.panoShow()
        })
      } else if (view === 'project') {
        nextTick(() => {
          this.sceneShow()
        })
      }
    },
    modelShow() {
      const iframe = document.getElementById('model-iframe')
      const token = '08168BBAD572518D1AB6EC233A13C3E2FA9C16340A21C6B6D0F2785DBDF2CB3506A0873877DA22C7E7ADA6CB1012493B4C702FC75B529ABD'
      const projectId = '1c179617-a7d9-4243-b813-84fa55a17ce7'
      let ifrSrc = ''
      console.log('模型中查看')
      ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
      iframe.src = ifrSrc
      console.log('加载iframe地址', ifrSrc)
      this.isLoading = false
    },
    panoShow(item, scene) {
      this.isLoading = false
      const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
      const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
      let setting = {}
      if (scene) {
        const scenename = 'scene_' + scene.PsScenename
        setting = { startscene: scenename }
      }
      this.$nextTick(() => {
        embedpano({
          xml: xmlurl,
          target: 'panoviewpreview',
          basepath,
          vars: setting,
          html5: 'auto',
          passQueryParameters: true
        })
      })
    },
    sceneShow() {
      const iframe = document.getElementById('scene-iframe')
      const ifrSrc = window.ProjectConfig.sceneUrl
      iframe.src = ifrSrc
      this.isLoading = false
  handleChange(view) {
   this.isLoading = true
   this.currentView = view
   if (view === 'model') {
    removepano('krpanoSWFObject')
    nextTick(() => {
     this.modelShow()
    })
   } else if (view === '720') {
    nextTick(() => {
     this.panoShow()
    })
   } else if (view === 'project') {
    nextTick(() => {
     this.sceneShow()
    })
   }
  },
  handlePanoChange(value) {
   console.log('value', value)
  },
  modelShow() {
   const iframe = document.getElementById('model-iframe')
   const token = '08168BBAD572518D1AB6EC233A13C3E2FA9C16340A21C6B6D0F2785DBDF2CB3506A0873877DA22C7E7ADA6CB1012493B4C702FC75B529ABD'
   const projectId = '1c179617-a7d9-4243-b813-84fa55a17ce7'
   let ifrSrc = ''
   console.log('模型中查看')
   ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
   iframe.src = ifrSrc
   console.log('加载iframe地址', ifrSrc)
   this.isLoading = false
  },
  panoShow(item, scene) {
   this.isLoading = false
   const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
   const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
   let setting = {}
   if (scene) {
    const scenename = 'scene_' + scene.PsScenename
    setting = {
     startscene: scenename
    }
   }
   this.$nextTick(() => {
    embedpano({
     xml: xmlurl,
     target: 'panoviewpreview',
     basepath,
     vars: setting,
     html5: 'auto',
     passQueryParameters: true
    })
   })
  },
  mounted() {
    this.isLoading = true
    this.modelShow()
  },
  sceneShow() {
   const iframe = document.getElementById('scene-iframe')
   const ifrSrc = window.ProjectConfig.sceneUrl
   iframe.src = ifrSrc
   this.isLoading = false
  }
 },
 mounted() {
  this.isLoading = true
  this.modelShow()
 },
}
</script>

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

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

.nav-items {
  display: flex;
  gap: 20px;
 display: flex;
 gap: 20px;
}

.nav-item {
  background: rgba(112,119,140,0.3);
  border-radius: 2px;
  border: 1px solid rgba(112,124,140,0.6);
  padding: 5px 16px;
  cursor: pointer;
 background: rgba(112, 119, 140, 0.3);
 border-radius: 2px;
 border: 1px solid rgba(112, 124, 140, 0.6);
 padding: 5px 16px;
 cursor: pointer;
}

.nav-item.active {
  background: rgba(255,191,0,0.2);
  border-radius: 2px;
  border: 1px solid #FFBF00;
 background: rgba(255, 191, 0, 0.2);
 border-radius: 2px;
 border: 1px solid #FFBF00;
}

.time-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 200px;
}

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

}

.time-line {
  width: 200px;
  height: 1px;
  background: linear-gradient( 270deg, rgba(255,191,0,0) 0%, #FFBF00 100%);
 width: 200px;
 height: 1px;
 background: linear-gradient(270deg, rgba(255, 191, 0, 0) 0%, #FFBF00 100%);
}

.content-wrapper {
  display: flex;
  overflow: hidden;
  position: relative;
 display: flex;
 overflow: hidden;
 position: relative;
 height: 52%;
}

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

.side-menu {
  width: 250px;
  background-color: #1e3d6b;
  color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
 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 {
  padding: 15px;
 padding: 15px;
}

.menu-select {
  width: 100%;
  padding: 8px;
  background-color: #0a1931;
  color: white;
  border: 1px solid #2a4d7d;
 width: 100%;
 padding: 8px;
 background-color: #0a1931;
 color: white;
 border: 1px solid #2a4d7d;
}

.menu-list {
  border-top: 1px solid #2a4d7d;
 border-top: 1px solid #2a4d7d;
}

.menu-item {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
 padding: 12px 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
}

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
 background-color: rgba(255, 255, 255, 0.1);
}

.arrow-icon {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
 border: solid white;
 border-width: 0 2px 2px 0;
 display: inline-block;
 padding: 3px;
 transform: rotate(-45deg);
}

.submenu {
  background-color: #152b4a;
 background-color: #152b4a;
}

.submenu-item {
  padding: 10px 30px;
  font-size: 14px;
  cursor: pointer;
 padding: 10px 30px;
 font-size: 14px;
 cursor: pointer;
}

.submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
 background-color: rgba(255, 255, 255, 0.1);
}

.main-content {
  flex: 1;
  background-color: #fff;
  width: 100%;
  height: 588px;
 flex: 1;
 background-color: #fff;
 width: 100%;
 height: 100%;
}

.content-header {
  color: white;
  margin-bottom: 20px;
 color: white;
 margin-bottom: 20px;
}

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

.chart-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  color: white;
 display: flex;
 gap: 20px;
 margin-bottom: 20px;
 color: white;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
 display: flex;
 align-items: center;
 gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
 width: 10px;
 height: 10px;
 border-radius: 50%;
}

.dot.blue {
  background-color: #00ffff;
 background-color: #00ffff;
}

.dot.yellow {
  background-color: #ffd700;
 background-color: #ffd700;
}

.chart-area {
  height: 400px;
  margin-bottom: 20px;
 height: 400px;
 margin-bottom: 20px;
}

.chart-tabs {
  display: flex;
  gap: 10px;
 display: flex;
 gap: 10px;
}

.tab {
  padding: 8px 16px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
 padding: 8px 16px;
 color: white;
 cursor: pointer;
 border-radius: 4px;
}

.tab.active {
  background-color: #2a4d7d;
 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,187 +22,195 @@
        backgroundSize: 'cover'
      }"
    >
      <!-- 建筑面积 -->
      <div 
        class="w-full h-[50px] mb-[10px] flex items-center justify-evenly" 
        :style="{
          backgroundImage: `url(${contentImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
      <div class="h-[120px] w-full">
        <!-- 建筑面积 -->
        <div 
          class="w-full h-[50px] mb-[10px] flex items-center justify-evenly" 
          :style="{
            backgroundImage: `url(${contentImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%'
          }"
        >
          <img 
            src="../assets/images/backgrounds/jianzhumianji.png" 
            alt="" 
            class="h-[30px] w-[40px]"
          >
          <div class="text-white text-[14px]">一期总建筑面积</div>
          <div class="flex items-center justify-center">
            <div class="text-[24px] text-[#FFD500] font-bold mr-[8px]">103.18</div>
            <div class="text-[14px] text-white">万㎡</div>
          </div>
        </div>

        <!-- 目标日期 -->
        <div 
          class="w-full h-[50px] flex items-center justify-evenly" 
          :style="{
            backgroundImage: `url(${contentImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%'
          }"
        >
          <img 
            src="../assets/images/backgrounds/mubiaowancheng.png" 
            alt="" 
            class="h-[30px] w-[40px]"
          >
          <div class="text-white text-[14px]">目标完成日期</div>
          <div class="flex items-center justify-center">
            <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]" 
          :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="text-white text-[14px] tracking-[1px] leading-[24px] h-[60px]">
          北京交通大学雄安校区选址位于河北雄安新区第五组团及启动区。东至规划绿地、城市道路NB6，南至城市道路ED34、城市道路EA2，西至城市道路ND32、城市道路NA11，北至城市道路EA1。
        </div>

        <img 
          src="../assets/images/backgrounds/jianzhumianji.png" 
          src="../assets/images/backgrounds/map.png" 
          alt="" 
          class="h-[30px] w-[40px]"
          class="w-full h-[196px] mt-[20px]"
        >
        <div class="text-white text-[14px]">一期总建筑面积</div>
        <div class="flex items-center justify-center">
          <div class="text-[24px] text-[#FFD500] font-bold mr-[8px]">103.18</div>
          <div class="text-[14px] text-white">万㎡</div>
        </div>
      </div>

      <!-- 目标日期 -->
      <div 
        class="w-full h-[50px] flex items-center justify-evenly" 
        :style="{
          backgroundImage: `url(${contentImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
        <img 
          src="../assets/images/backgrounds/mubiaowancheng.png" 
          alt="" 
          class="h-[30px] w-[40px]"
      <div class="w-[100%] h-[15%]">
        <!-- 参建单位 -->
        <div 
          class="w-full h-[30px] mt-[20px] mb-[10px]" 
          :style="{
            backgroundImage: `url(${bgImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%'
          }"
        >
        <div class="text-white text-[14px]">目标完成日期</div>
        <div class="flex items-center justify-center">
          <div class="text-[24px] text-[#00FFFF] font-bold">2028-12-01</div>
          <div class="text-white text-[14px] ml-[40px] leading-[35px]">参建单位</div>
        </div>
      </div>

      <!-- 项目名称 -->
      <div 
        class="w-full h-[30px] mt-[20px] 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="text-white text-[14px] tracking-[1px] leading-[24px]">
        北京交通大学雄安校区选址位于河北雄安新区第五组团及启动区。东至规划绿地、城市道路NB6，南至城市道路ED34、城市道路EA2，西至城市道路ND32、城市道路NA11，北至城市道路EA1。
      </div>

      <img 
        src="../assets/images/backgrounds/map.png" 
        alt="" 
        class="w-full h-[196px] mt-[20px]"
      >

      <!-- 参建单位 -->
      <div 
        class="w-full h-[30px] mt-[20px] 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="flex justify-between mb-[10px]">
        <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
          <div class="text-white text-[14px] flex flex-col items-center justify-center">
            <div class="text-[16px] text-[#00FFFF]">3</div>
            <div class="text-[12px] text-[#ddd]">建设单位</div>
          </div>
          <img 
            src="../assets/images/backgrounds/jianshedanwei.png" 
            alt="" 
            class="h-[40px] w-[60px]"
          >
        </div>
        <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
          <div class="text-white text-[14px] flex flex-col items-center justify-center">
            <div class="text-[16px] text-[#00FFFF]">5</div>
            <div class="text-[12px] text-[#ddd]">施工单位</div>
          </div>
          <img 
            src="../assets/images/backgrounds/shigongdanwei.png" 
            alt="" 
            class="h-[40px] w-[60px]"
          >
        </div>
      </div>

      <div class="flex justify-between">
        <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
          <div class="text-white text-[14px] flex flex-col items-center justify-center">
            <div class="text-[16px] text-[#00FFFF]">1</div>
            <div class="text-[12px] text-[#ddd]">监理单位</div>
          </div>
          <img 
            src="../assets/images/backgrounds/jianlidanwei.png" 
            alt="" 
            class="h-[40px] w-[60px]"
          >
        </div>
        <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
          <div class="text-white text-[14px] flex flex-col items-center justify-center">
            <div class="text-[16px] text-[#00FFFF]">1</div>
            <div class="text-[12px] text-[#ddd]">设计单位</div>
          </div>
          <img 
            src="../assets/images/backgrounds/shejidanwei.png" 
            alt="" 
            class="h-[40px] w-[60px]"
          >
        </div>
      </div>

      <!-- 表格搜索 -->
      <div class="w-full flex items-center justify-between mb-[10px] mt-[20px]">
        <el-input
          v-model="searchText"
          placeholder="搜索"
          class="search-item w-full rounded-[2px]"
          prefix-icon="el-icon-search"
        >
        </el-input>
      </div>

      <!-- 表格 -->
      <div 
        class="w-full min-h-[20vh] px-[8px] py-[10px]" 
        :style="{
          backgroundImage: `url(${tableImage})`,
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center center',
          backgroundSize: '100% 100%'
        }"
      >
        <table class="w-full text-white text-[14px] overflow-y-auto">
          <thead>
            <tr class="table-header">
              <th class="py-[8px] text-left pl-[12px]">类型</th>
              <th class="py-[8px] text-left">阶段</th>
              <th class="py-[8px] text-left">名称</th>
            </tr>
          </thead>
          <tbody>
            <tr 
              v-for="item in tableData" 
              :key="item.id"
              class="border-b border-[rgba(255,255,255,0.1)]"
        <!-- 参建单位统计 -->
        <div class="flex justify-between mb-[10px]">
          <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
            <div class="text-white text-[14px] flex flex-col items-center justify-center">
              <div class="text-[16px] text-[#00FFFF]">3</div>
              <div class="text-[12px] text-[#ddd]">建设单位</div>
            </div>
            <img 
              src="../assets/images/backgrounds/jianshedanwei.png" 
              alt="" 
              class="h-[40px] w-[60px]"
            >
              <td class="py-[8px] pl-[12px]">{{ item.type }}</td>
              <td class="py-[8px]">{{ item.stage }}</td>
              <td class="py-[8px]">{{ item.name }}</td>
            </tr>
          </tbody>
        </table>
          </div>
          <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
            <div class="text-white text-[14px] flex flex-col items-center justify-center">
              <div class="text-[16px] text-[#00FFFF]">5</div>
              <div class="text-[12px] text-[#ddd]">施工单位</div>
            </div>
            <img 
              src="../assets/images/backgrounds/shigongdanwei.png" 
              alt="" 
              class="h-[40px] w-[60px]"
            >
          </div>
        </div>

        <div class="flex justify-between">
          <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
            <div class="text-white text-[14px] flex flex-col items-center justify-center">
              <div class="text-[16px] text-[#00FFFF]">1</div>
              <div class="text-[12px] text-[#ddd]">监理单位</div>
            </div>
            <img 
              src="../assets/images/backgrounds/jianlidanwei.png" 
              alt="" 
              class="h-[40px] w-[60px]"
            >
          </div>
          <div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
            <div class="text-white text-[14px] flex flex-col items-center justify-center">
              <div class="text-[16px] text-[#00FFFF]">1</div>
              <div class="text-[12px] text-[#ddd]">设计单位</div>
            </div>
            <img 
              src="../assets/images/backgrounds/shejidanwei.png" 
              alt="" 
              class="h-[40px] w-[60px]"
            >
          </div>
        </div>
      </div>
      <div class="chart-container">
        <!-- 表格搜索 -->
        <div class="w-full flex items-center justify-between mb-[10px] mt-[20px]">
          <el-input
            v-model="searchText"
            placeholder="搜索"
            class="search-item w-full rounded-[2px]"
            prefix-icon="el-icon-search"
          >
          </el-input>
        </div>

        <!-- 表格 -->
        <div 
          class="w-full min-h-[20vh] px-[8px] py-[10px]" 
          :style="{
            backgroundImage: `url(${tableImage})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: '100% 100%'
          }"
        >
          <table class="w-full text-white text-[14px] overflow-y-auto">
            <thead>
              <tr class="table-header">
                <th class="py-[8px] text-left pl-[12px]">类型</th>
                <th class="py-[8px] text-left">阶段</th>
                <th class="py-[8px] text-left">名称</th>
              </tr>
            </thead>
            <tbody>
              <tr 
                v-for="item in tableData" 
                :key="item.id"
                class="border-b border-[rgba(255,255,255,0.1)]"
              >
                <td class="py-[8px] pl-[12px]">{{ item.type }}</td>
                <td class="py-[8px]">{{ item.stage }}</td>
                <td class="py-[8px]">{{ item.name }}</td>
              </tr>
            </tbody>
          </table>
        </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相同)
                },