From fe2b697a063ab9898af5ec0b49c30ad20274d56e Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Tue, 25 Feb 2025 11:42:12 +0800
Subject: [PATCH] 调整样式，接口对接
---
/dev/null | 19
src/views/ProjectView.vue | 384 +++++---
public/config.js | 18
src/store/modules/common.js | 16
src/utils/http.js | 319 ++-----
src/Dashboard.vue | 49
src/api/home.js | 68
src/views/Home.vue | 633 ++++++++-----
vite.config.js | 10
src/utils/getToken.js | 4
src/views/EquipmentView.vue | 1052 ++++++++++++-----------
11 files changed, 1,331 insertions(+), 1,241 deletions(-)
diff --git a/public/config.js b/public/config.js
index 298537a..a6ea056 100644
--- a/public/config.js
+++ b/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
}
\ No newline at end of file
diff --git a/src/Dashboard.vue b/src/Dashboard.vue
index d9c19bd..3bd3d56 100644
--- a/src/Dashboard.vue
+++ b/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);
diff --git a/src/api/app.js b/src/api/app.js
deleted file mode 100644
index 55265fa..0000000
--- a/src/api/app.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { http } from "../utils/http";
-export const AppAPI = {
- getRiskData(data, config = {}) {
- return http.post("/beh/environment/GetRiskData", data, config);
- },
- getRiskDetails(id, config = {}) {
- return http.post(`/beh/environment/risk/${id}`, null, config);
- },
-};
diff --git a/src/api/home.js b/src/api/home.js
index ace0a96..989a263 100644
--- a/src/api/home.js
+++ b/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
+ });
+ },
+};
\ No newline at end of file
diff --git a/src/store/modules/common.js b/src/store/modules/common.js
index 9cdbc46..f43fad6 100644
--- a/src/store/modules/common.js
+++ b/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,
},
};
\ No newline at end of file
diff --git a/src/utils/getToken.js b/src/utils/getToken.js
index a2fe80d..216e492 100644
--- a/src/utils/getToken.js
+++ b/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;
}
\ No newline at end of file
diff --git a/src/utils/getUserProfile.js b/src/utils/getUserProfile.js
deleted file mode 100644
index 83251cc..0000000
--- a/src/utils/getUserProfile.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import store from "../store/index";
-
-export const getUserProfile = () => {
- let userProfile = store.getters["common/userProfile"];
- if (!userProfile) {
- userProfile = JSON.parse(window.localStorage.getItem("userProfile"));
- }
- return userProfile;
-}
\ No newline at end of file
diff --git a/src/utils/http.js b/src/utils/http.js
index 8cf3b4d..997d954 100644
--- a/src/utils/http.js
+++ b/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);
+ },
);
\ No newline at end of file
diff --git a/src/utils/logout.js b/src/utils/logout.js
deleted file mode 100644
index 29f9c57..0000000
--- a/src/utils/logout.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import store from "../store/index";
-import router from "../router";
-
-const clearAuthenticateInfo = () => {
- store.commit("common/setToken", "");
- store.commit("common/setUserProfile", null);
- window.localStorage.removeItem("token");
- window.localStorage.removeItem("userProfile");
-}
-
-export const toLoginPage = () => {
- clearAuthenticateInfo();
- router.replace("/login");
-}
-
-export const toResetPwdPage = () => {
- clearAuthenticateInfo();
- router.replace("/resetpwd");
-}
\ No newline at end of file
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index a499a46..b036fd5 100644
--- a/src/views/EquipmentView.vue
+++ b/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>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index da552b2..a2ab897 100644
--- a/src/views/Home.vue
+++ b/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>
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index f0d31c4..cc1d4b8 100644
--- a/src/views/ProjectView.vue
+++ b/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>
diff --git a/vite.config.js b/vite.config.js
index 037f13a..55294e5 100644
--- a/vite.config.js
+++ b/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相同)
},
--
Gitblit v1.9.3