From 70bebe9dae89ebddd7e77543aac618e78d730fc9 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Wed, 26 Feb 2025 16:39:32 +0800
Subject: [PATCH] 样式调整
---
/dev/null | 264 --------------------------------------------
src/views/ProjectView.vue | 20 ++-
src/store/modules/common.js | 10 +
src/components/Header.vue | 5
src/views/Home.vue | 37 +++++
src/utils/getToken.js | 4
src/views/EquipmentView.vue | 12 +-
7 files changed, 65 insertions(+), 287 deletions(-)
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 2464fa2..e37f15e 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -2,7 +2,7 @@
* @Author: gjj Ganjj@probim.com.cn
* @Date: 2025-02-14 14:32:18
* @LastEditors: gjj Ganjj@probim.com.cn
- * @LastEditTime: 2025-02-25 11:47:12
+ * @LastEditTime: 2025-02-26 15:50:22
* @FilePath: \北京交通大学\src\components\Header.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -72,9 +72,6 @@
},
onHomeClick(tab) {
this.activeTab = tab;
- },
- onProjectChange(data) {
- this.$store.commit("common/setCurrentProject", data);
},
updateTime() {
const now = new Date();
diff --git a/src/components/MenuList.vue b/src/components/MenuList.vue
deleted file mode 100644
index c08b441..0000000
--- a/src/components/MenuList.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<template>
- <div class="menuListWrapper inline-block rounded-tr-[34px] rounded-br-[34px] w-[13.5rem] h-[45rem]">
- <router-link
- v-for="item in localMenusFiltered"
- :key="item.id"
- :to="item.to"
- class="relative z-[100] menuItem flex items-center pl-6 py-[9px] pr-5 my-3 cursor-pointer"
- active-class="activated"
- exact
- >
- <img class="w-8" :src="item.icon" :alt="item.label" />
- <div class="ml-[12px] text-[18px] text-[#FFF] text-opacity-60 menuName">{{ item.label }}</div>
- </router-link>
- <div
- v-for="item in thirdMenus"
- :key="item.id"
- class="relative z-[100] thirdMenuItem flex items-center pl-6 py-[9px] pr-5 my-3"
- :class="{
- 'cursor-pointer': item.subMenus?.length > 0,
- 'cursor-not-allowed': !item.subMenus || item.subMenus.length === 0,
- hovered: activatedThirdMenu2?.id === item.id,
- activated: activatedThirdMenu?.id === item.id,
- }"
- @mouseenter="onThirdMenuEnter(item)"
- @mouseleave="onThirdMenuLeave(item)"
- >
- <img class="w-8" :src="item.icon" :alt="item.label" />
- <div class="ml-[12px] font-pingfang text-[18px] text-[#FFF] text-opacity-60 menuName">{{ item.label }}</div>
- <div v-show="item.subMenus?.length && activatedThirdMenu2?.id === item.id" class="absolute top-6 left-full min-w-[260px] submenusWrapper">
- <div
- v-for="submenu in item.subMenus"
- :key="submenu.id"
- @click.stop="onThirdMenuClick(submenu, item)"
- class="submenuItem"
- :class="{ activated: activatedThirdSubmenu?.id === submenu.id }"
- >
- <a v-if="submenu.needInvokeLocalApp" :href="submenu.to" target="_blank">{{ submenu.label }}</a>
- <span v-else>{{ submenu.label }}</span>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
- import CryptoJS from "crypto-js";
- import { Message } from "element-ui";
- import { mapGetters } from "vuex";
-
- let workflowLoginURL;
- let workflowWebURL;
- let pid;
- if (import.meta.env.PROD) {
- //生产环境
- const ProjectConfig = window.ProjectConfig;
- workflowLoginURL = ProjectConfig.workflowLoginURL;
- workflowWebURL = ProjectConfig.workflowWebURL;
- pid = ProjectConfig.pid;
- } else {
- //非生产环境
- workflowLoginURL = "http://workflow-newapi.probim.cn/api/User/Home/Login";
- workflowWebURL = "http://workflow.probim.cn";
- pid = "71f7a5df-a7e3-42f4-bcea-36d7d2924ddd";
- }
-
- export default {
- name: "MenuList",
- data() {
- return {
- activatedThirdMenu2: null,
- PublicKey: "MK4ZJF10PRO19*#8",
- };
- },
- computed: {
- ...mapGetters("common", [
- "localMenus",
- "thirdMenus",
- "activatedThirdSubmenu",
- "activatedThirdMenu",
- "currentProjectId",
- "projectIdsWithoutMoldBase",
- "projectIdPNMap",
- "aiJumpThirdPage"
- ]),
- localMenusFiltered() {
- if (this.projectIdsWithoutMoldBase.includes(this.currentProjectId)) {
- return this.localMenus.filter((item) => item.id !== "mold-base");
- } else {
- return this.localMenus;
- }
- },
- },
- watch: {
- aiJumpThirdPage: {
- deep: true,
- handler(n, o) {
- if(n && n.self) {
- this.onThirdMenuClick(n.self, n.parent)
- }
- },
- },
- },
- methods: {
- onThirdMenuClick(item, parentItem) {
- if (item?.isLocal === true) {
- if (this.$route.path === item.to) return;
- item?.to &&
- this.$router?.push(item.to).then(() => {
- this.$store.commit("common/setActivatedThirdMenu", parentItem);
- this.$store.commit("common/setActivatedThirdSubmenu", item);
- });
- } else {
- if (item?.needInvokeLocalApp) {
- return;
- } else if (item?.needLocalHandle) {
- const id = item.id;
- if (id === "construction-1") {
- //绿色建造九宫格管理系统
- this.doVmsEnvmonitorLoginRedirect();
- } else if (id === "construction-2") {
- //协同
- this.doSelfLoginRedirect(item);
- } else if (id === "construction-3") {
- const pn = this.projectIdPNMap[this.currentProjectId];
- if (!/^\s*$/i.test(pn + "")) {
- window.open(`http://xmglappjs.sh2j.com/web/public/index.php/fanganapi/index/index?pn=${pn}`);
- }
- }
- } else {
- item?.to && window.open(item.to);
- }
- }
- },
- onThirdMenuEnter(item) {
- this.activatedThirdMenu2 = item;
- },
- // eslint-disable-next-line no-unused-vars
- onThirdMenuLeave(item) {
- this.activatedThirdMenu2 = null;
- },
-
- //登录绿色建造九宫格管理系统
- async doVmsEnvmonitorLoginRedirect() {
- window.open("http://127.0.0.1:9000/vms-envmonitor-webapp/");
- },
-
- //登录自己的协同平台
- async doSelfLoginRedirect(item) {
- const userInfo = {
- UserName: "huangtj_0909@163.com",
- Password: this.computepwdstr("htj123456" + this.PublicKey, CryptoJS),
- };
- // const userInfo = {
- // UserName: "admin",
- // Password: this.computepwdstr("admin" + this.PublicKey, CryptoJS),
- // };
- const postData = Object.keys(userInfo)
- .map((key) => {
- return `${key}=${encodeURIComponent(userInfo[key])}`;
- })
- .join("&");
- const res = await this.$http({
- method: "post",
- url: workflowLoginURL,
- data: postData,
- withCredentials: false,
- withProjectId: false,
- withToken: false,
- baseURL: "/",
- });
- if (res?.code === 0) {
- const token = res.data?.token;
- if (token) {
- window.open(`${workflowWebURL}/#/Home/Boot/${token}/0/${pid}`);
- } else {
- Message.error({ message: `${item.label}登录失败,请稍后再试`, duration: 1000 * 3 });
- }
- } else {
- Message.error({ message: `${item.label}登录失败,请稍后再试`, duration: 1000 * 3 });
- }
- },
- computepwdstr(pwdorigin, _this_CryptoJS) {
- const afterpwd = this.SymmetricEncryption(
- {
- input: pwdorigin,
- key: this.PublicKey,
- },
- _this_CryptoJS,
- );
- return afterpwd;
- },
- SymmetricEncryption(json, CryptoJS) {
- if (!json || !json.input || !json.key) {
- console.warn("json, json.input and json.key are not allow null!");
- return -1;
- }
- if (json.key.length === 0) {
- console.warn("json.length should not be zero!");
- return -1;
- }
- while (json.key.length < 16) {
- json.key = json.key + json.key;
- }
- const KEY = json.key;
- const IV = "*BIM19FF4KMY0R8*";
- const key = CryptoJS.enc.Utf8.parse(KEY);
- const iv = CryptoJS.enc.Utf8.parse(IV);
- const srcs = CryptoJS.enc.Utf8.parse(json.input);
- const encrypted = CryptoJS.AES.encrypt(srcs, key, {
- iv: iv,
- mode: CryptoJS.mode.CBC,
- padding: CryptoJS.pad.Pkcs7,
- });
- return encrypted.ciphertext.toString();
- },
- },
- };
-</script>
-
-<style lang="scss" scoped>
- .menuListWrapper {
- background: rgba(0,22,26,0.95);
- border-radius: 0px 40px 40px 0px;
- }
- .menuItem:not(.activated):hover {
- background: linear-gradient( 270deg, rgba(0,75,83,0) 0%, rgba(0,135,153,0.3) 100%);
- }
- .menuItem.activated {
- background: linear-gradient( 270deg, rgba(0,75,83,0) 0%, #008C99 100%);
- .menuName {
- @apply text-opacity-100;
- }
- }
-
- .thirdMenuItem:not(.activated).hovered {
- background: linear-gradient( 270deg, rgba(0,75,83,0) 0%, rgba(0,135,153,0.3) 100%);
- }
- .thirdMenuItem.activated {
- background: linear-gradient( 270deg, rgba(0,75,83,0) 0%, #008C99 100%);
- .menuName {
- @apply text-opacity-100;
- }
- }
- .submenusWrapper {
- .submenuItem {
- @apply h-[60px] px-6 flex justify-start items-center font-pingfang text-base bg-[#00161af2] cursor-pointer;
- &:first-of-type {
- @apply rounded-tl-[12px] rounded-tr-[12px];
- &:only-child {
- @apply rounded-bl-[12px] rounded-br-[12px];
- }
- }
- &:last-of-type:not(:first-of-type) {
- @apply rounded-bl-[12px] rounded-br-[12px];
- }
- &:not(.activated):hover {
- @apply bg-[hsla(228,67%,48%,1)];
- }
- &.activated {
- @apply bg-[#485eb7];
- }
- }
- }
-</style>
diff --git a/src/store/modules/common.js b/src/store/modules/common.js
index f43fad6..45426ee 100644
--- a/src/store/modules/common.js
+++ b/src/store/modules/common.js
@@ -2,7 +2,7 @@
* @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
+ * @LastEditTime: 2025-02-26 15:44:09
* @FilePath: \北京交通大学\src\store\modules\common.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@@ -11,6 +11,7 @@
state: () => ({
code: null, //用户信息
token: null, //token
+ projectEndDate: null, //项目结束日期
}),
mutations: {
@@ -20,6 +21,9 @@
setToken(state, data) {
state.token = data;
},
+ setProjectEndDate(state, data) {
+ state.projectEndDate = data;
+ },
},
actions: {
setCode(context, data) {
@@ -28,9 +32,13 @@
setToken(context, data) {
context.commit("setToken", data);
},
+ setProjectEndDate(context, data) {
+ context.commit("setProjectEndDate", data);
+ },
},
getters: {
code: (state) => state.code,
token: (state) => state.token,
+ projectEndDate: (state) => state.projectEndDate,
},
};
\ No newline at end of file
diff --git a/src/utils/getToken.js b/src/utils/getToken.js
index 216e492..9713fc6 100644
--- a/src/utils/getToken.js
+++ b/src/utils/getToken.js
@@ -10,4 +10,8 @@
export const getProjectId = () => {
let id = window.ProjectConfig.projectId;
return id;
+}
+export const getProjectEndDate = () => {
+ let endDate = store.getters["common/projectEndDate"];
+ return endDate;
}
\ No newline at end of file
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index 44315d3..c4dcaae 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -44,7 +44,7 @@
}">
</div>
<div class="equipment-status" :style="sectionStyle">
- <div class="w-full h-[30px] mb-[10px]" :style="{
+ <div class="w-full h-[30px]" :style="{
backgroundImage: `url(${bgImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
@@ -71,10 +71,10 @@
<button class="control-btn" :class="{ 'active': currentTab === '升降机监控' }" @click="handleControlBtnClick('升降机监控')">升降机监控</button>
</div>
<div class="divider"></div>
- <div class="progress-bar">
+ <div class="progress-bar px-[10px]">
<div class="label">运行设备总数</div>
<div class="bar flex items-center">
- <div class="progress relative w-[80%] h-[24px]">
+ <div class="progress relative w-[90%] 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>
@@ -560,7 +560,7 @@
}
.equipment-status {
- padding: 20px 10px;
+ padding: 10px 10px;
height: calc(100% - 5vh);
}
@@ -572,7 +572,7 @@
.status-circles {
display: flex;
justify-content: space-around;
- margin: 20px 0;
+ margin: 15px 0;
}
.progress-circle {
@@ -628,7 +628,7 @@
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;
+ margin: 15px 0;
}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 24ed95c..ce401b6 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -11,7 +11,7 @@
<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 class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">{{endDate}}</div>
</div>
<div class="time-line">
</div>
@@ -20,7 +20,7 @@
<div class="bottom-nav">
<div class="content-wrapper mb-[20px]">
<!-- 720菜单 -->
- <div class="side-menu" v-if="currentView === '720'">
+ <div class="side-menu z-[100]" v-if="currentView === '720'">
<el-cascader popper-class="custom-dropdown" v-model="panoValue" :options="panoList" @change="handlePanoChange" :props="{ value: 'id',label: 'label',children: 'Children'}">
</el-cascader>
</div>
@@ -83,7 +83,8 @@
} from "../api/home";
import {
getProjectId,
- getToken
+ getToken,
+ getProjectEndDate
} from "../utils/getToken.js";
export default {
name: 'Home',
@@ -142,8 +143,25 @@
panoValue: [],
backgroundImage: new URL('@/assets/images/backgrounds/cover_bg.png',
import.meta.url).href,
+ endDate: 0,
}
},
+ watch: {
+ projectEndDate:{
+ deep: true,
+ handler (newVal) {
+ console.log('newVal', newVal)
+ const date = new Date(newVal);
+ // 获取当前日期作为Date对象
+ const now = new Date();
+ // 计算两个日期的差异（毫秒）
+ const diffTime = Math.abs(now - date);
+ // 将毫秒转换为天数
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+ this.endDate = diffDays
+ }
+ }
+ },
computed: {
sectionStyle() {
return {
@@ -152,10 +170,19 @@
backgroundPosition: 'center center',
backgroundSize: '100% 100%'
}
- },
+ },
projectId() {
return getProjectId()
+ },
+ projectEndDate() {
+ return getProjectEndDate()
}
+ },
+ mounted() {
+ setTimeout(() => {
+ console.log('projectEndDate', getProjectEndDate())
+ this.modelShow()
+ }, 1000)
},
methods: {
@@ -186,6 +213,7 @@
})
} else if (view === 'project') {
nextTick(() => {
+ removepano('krpanoSWFObject')
this.sceneShow()
})
}
@@ -256,6 +284,7 @@
})
},
panoPreview(item, scene) {
+ removepano('krpanoSWFObject')
const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
let setting = {}
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index f896813..586d7b3 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -14,7 +14,7 @@
<!-- 下部分 - 内容区域 -->
<div
- class="content flex-1 px-[16px] py-[14px] overflow-y-auto"
+ class="content flex-1 px-[16px] py-[14px] overflow-y-hidden"
:style="{
backgroundImage: `url(${backgroundImage})`,
backgroundRepeat: 'no-repeat',
@@ -77,7 +77,7 @@
backgroundSize: '100% 100%'
}"
>
- <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：{{projectInfo.OrganizeName}}</div>
+ <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：{{projectInfo.ProjectName}}</div>
</div>
<div class="text-white text-[14px] tracking-[1px] leading-[24px]">
@@ -88,10 +88,10 @@
:src="projectInfo.Thumbnail? projectInfo.Thumbnail : '../assets/images/backgrounds/cover_bg.png'"
alt=""
class="w-full mt-[20px]"
- style="height: calc(100% - 120px);"
+ style="height: calc(100% - 150px);"
>
</div>
- <div class="w-[100%] h-[15%]">
+ <div class="w-[100%] h-[18%]">
<!-- 参建单位 -->
<div
class="w-full h-[30px] mt-[20px] mb-[10px]"
@@ -172,7 +172,7 @@
<!-- 表格 -->
<div
- class="w-full min-h-[20vh] px-[8px] py-[10px]"
+ class="chartTable w-full h-[300px] px-[8px] py-[10px] overflow-y-auto"
:style="{
backgroundImage: `url(${tableImage})`,
backgroundRepeat: 'no-repeat',
@@ -221,7 +221,7 @@
bgImage: new URL('@/assets/images/titles/title_second.png', import.meta.url).href,
tableImage: new URL('@/assets/images/backgrounds/table_bg.png', import.meta.url).href,
projectInfo: {
- OrganizeName: '',
+ ProjectName: '',
Description: '',
Thumbnail: '',
endDate: ''
@@ -253,7 +253,8 @@
console.log(result);
if(result.SafeProductionEndDate && result.SafeProductionEndDate !== 'null') {
this.projectInfo.endDate = result.SafeProductionEndDate.substring(0, 10)
- this.projectInfo.OrganizeName = result.OrganizeName
+ this.$store.commit('common/setProjectEndDate', this.projectInfo.endDate)
+ this.projectInfo.ProjectName = result.ProjectName
this.projectInfo.Description = result.Description
this.projectInfo.Thumbnail = result.Thumbnail
}
@@ -380,6 +381,9 @@
}
.chart-container{
width: 100%;
- height: calc(40% - 180px);
+ height: calc(40% - 170px);
+ .chartTable{
+ height: calc(100% - 10px);
+ }
}
</style>
--
Gitblit v1.9.3