From 6f130fad868d053948665d94bff7b5cb0e221fd7 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Tue, 01 Jul 2025 09:34:47 +0800
Subject: [PATCH] fix: 人员管理标题优化
---
src/views/EquipmentView.vue | 122 ++++++++++++++++++++++++++++++++++------
1 files changed, 104 insertions(+), 18 deletions(-)
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index 8a19837..5d4161b 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -7,8 +7,13 @@
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '100% 100%',
+ display: 'flex',
+ alignItems: 'center',
}"
>
+ <span style="font-family: PangMenZhengDaoBiaoTiTi !important; font-size: 24px; letter-spacing: 2px; white-space: nowrap; margin-left: 30px"
+ >人员管理</span
+ >
</div>
<div class="bottom-nav">
<div class="top-section mb-[20px]">
@@ -18,21 +23,21 @@
<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 class="value text-[#00FFFF] text-[28px] font-bold">{{ userData.RealtimeUserNumber }}</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 class="value text-[#FFD500] text-[28px] font-bold">{{ userData.TodayUserNumber }}</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 class="value text-[#FFD500] text-[28px] font-bold">{{ userData.DutyUserTotle }}</div>
</div>
</div>
</div>
@@ -45,8 +50,13 @@
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '100% 100%',
+ display: 'flex',
+ alignItems: 'center',
}"
>
+ <span style="font-family: PangMenZhengDaoBiaoTiTi !important; font-size: 24px; letter-spacing: 2px; white-space: nowrap; margin-left: 30px"
+ >重要设备状态</span
+ >
</div>
<div class="equipment-status" :style="sectionStyle">
<el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange">
@@ -105,8 +115,13 @@
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundSize: '100% 100%',
+ display: 'flex',
+ alignItems: 'center',
}"
>
+ <span style="font-family: PangMenZhengDaoBiaoTiTi !important; font-size: 24px; letter-spacing: 2px; white-space: nowrap; margin-left: 30px"
+ >环境监测</span
+ >
</div>
<div class="environment-grid" :style="sectionStyle">
<div class="env-item">
@@ -114,7 +129,7 @@
<div class="env-info">
<span class="envlabel">大气温度</span>
<div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">5°C</span>
+ <span class="envvalue-text">{{ evnData.Tmp + "°C" }}</span>
</div>
</div>
</div>
@@ -123,7 +138,7 @@
<div class="env-info">
<span class="envlabel">大气湿度</span>
<div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">22.9%</span>
+ <span class="envvalue-text">{{ evnData.Rh + "%" }}</span>
</div>
</div>
</div>
@@ -132,7 +147,7 @@
<div class="env-info">
<span class="envlabel">PM2.5</span>
<div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">10 μg/m³</span>
+ <span class="envvalue-text">{{ evnData.Pm25 + "μg/m³" }}</span>
</div>
</div>
</div>
@@ -141,7 +156,7 @@
<div class="env-info">
<span class="envlabel">PM10</span>
<div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">13 μg/m³</span>
+ <span class="envvalue-text">{{ evnData.Pm10 + "μg/m³" }}</span>
</div>
</div>
</div>
@@ -150,7 +165,7 @@
<div class="env-info">
<span class="envlabel">风力</span>
<div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">3级</span>
+ <span class="envvalue-text">{{ evnData.Ws }}</span>
</div>
</div>
</div>
@@ -159,7 +174,7 @@
<div class="env-info">
<span class="envlabel">风向</span>
<div class="envvalue" :style="enviorStyle">
- <span class="envvalue-text">北风</span>
+ <span class="envvalue-text">{{ evnData.Wd }}</span>
</div>
</div>
</div>
@@ -185,12 +200,25 @@
},
data() {
return {
+ evnData: {
+ Tmp: "0",
+ Rh: "0",
+ Pm25: "0",
+ Pm10: "0",
+ Ws: "0",
+ Wd: "无",
+ },
+ userData: {
+ RealtimeUserNumber: 0,
+ TodayUserNumber: 0,
+ DutyUserTotle: 0,
+ },
deviceSelected: "",
options: [],
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,
+ titleImage: new URL("@/assets/images/titles/xiangmu.png", import.meta.url).href,
+ middleImage: new URL("@/assets/images/titles/xiangmu.png", import.meta.url).href,
+ bottomImage: new URL("@/assets/images/titles/xiangmu.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: 0,
@@ -267,14 +295,14 @@
},
data: [
{
- value: 81.5,
+ value: 0,
name: "",
itemStyle: {
color: "#00FFFF",
},
},
{
- value: 18.5,
+ value: 100,
name: "",
itemStyle: {
color: "transparent",
@@ -355,14 +383,14 @@
},
data: [
{
- value: 33,
+ value: 0,
name: "",
itemStyle: {
color: "#00FFFF",
},
},
{
- value: 77,
+ value: 100,
name: "",
itemStyle: {
color: "transparent",
@@ -443,14 +471,14 @@
},
data: [
{
- value: 20,
+ value: 0,
name: "",
itemStyle: {
color: "#00FFFF",
},
},
{
- value: 80,
+ value: 100,
name: "",
itemStyle: {
color: "transparent",
@@ -488,6 +516,8 @@
console.log("设备界面接收到的数据:", newVal);
// 处理数据变化的逻辑
this.getDeviceTypes(newVal);
+ this.getEnvData(newVal);
+ this.getUserData(newVal);
},
deep: true, // 深度监听对象内部变化
immediate: true, // 立即执行一次
@@ -501,6 +531,56 @@
*/
handleSelectChange(val) {
this.getDeviceState(val);
+ // this.getEnvData(val);
+ // this.getUserData(val);
+ },
+ /**
+ * 获取人员数据
+ * @param bindId
+ */
+ getUserData(bindId) {
+ const params = {
+ bindId,
+ };
+ HomeAPI.GetJSCUserManage(params).then((res) => {
+ if (res.Ret === 1) {
+ const result = res.Data;
+ if (result) {
+ this.userData = result;
+ } else {
+ this.userData = {
+ RealtimeUserNumber: 0,
+ TodayUserNumber: 0,
+ DutyUserTotle: 0,
+ };
+ }
+ }
+ });
+ },
+ /**
+ * 获取环境数据
+ */
+ getEnvData(bindId) {
+ const params = {
+ bindId,
+ };
+ HomeAPI.GetJSCEnvMonitor(params).then((res) => {
+ if (res.Ret === 1) {
+ const result = res.Data;
+ if (result) {
+ this.evnData = result;
+ } else {
+ this.evnData = {
+ Tmp: "0",
+ Rh: "0",
+ Pm25: "0",
+ Pm10: "0",
+ Ws: "0",
+ Wd: "无",
+ };
+ }
+ }
+ });
},
/**
* 获取设备类型
@@ -1064,3 +1144,9 @@
display: none;
}
</style>
+<style lang="scss">
+ .el-scrollbar__wrap {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ }
+</style>
--
Gitblit v1.9.3