From a3e27f5cab583debe11a9c62d8cc0115783b0791 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 16:59:43 +0800
Subject: [PATCH] fix: 优化实况UI放大缩小
---
src/views/EquipmentView.vue | 460 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 419 insertions(+), 41 deletions(-)
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index dd39b73..b307bf8 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -18,21 +18,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>
@@ -49,7 +49,7 @@
>
</div>
<div class="equipment-status" :style="sectionStyle">
- <el-select v-model="equipmentSelected" placeholder="请选择">
+ <el-select v-model="deviceSelected" placeholder="请选择" @change="handleSelectChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div
@@ -114,7 +114,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 +123,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 +132,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 +141,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 +150,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 +159,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>
@@ -171,51 +171,50 @@
<script>
import V2Echarts from "@/components/V2Echarts.vue";
+ import { HomeAPI } from "@/api/home";
export default {
name: "EquipmentView",
components: {
V2Echarts,
},
+ props: {
+ selectedId: {
+ type: String,
+ default: "",
+ },
+ },
data() {
return {
- equipmentSelected: "",
- options: [
- {
- value: "选项1",
- label: "黄金糕",
- },
- {
- value: "选项2",
- label: "双皮奶",
- },
- {
- value: "选项3",
- label: "蚵仔煎",
- },
- {
- value: "选项4",
- label: "龙须面",
- },
- {
- value: "选项5",
- label: "北京烤鸭",
- },
- ],
+ 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,
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,
+ deviceOnline: 0,
+ deviceTotal: 0,
currentTab: "塔吊监控",
circleItems: [
{
id: "zaixianChartBox",
name: "总在线",
- value: 22,
- percentage: 81.5,
+ value: 0,
+ percentage: 0,
options: {
tooltip: {
trigger: "item",
@@ -302,8 +301,8 @@
{
id: "lixianChartBox",
name: "总离线",
- value: 5,
- percentage: 33,
+ value: 0,
+ percentage: 0,
options: {
tooltip: {
trigger: "item",
@@ -391,7 +390,7 @@
id: "baojingChartBox",
name: "总报警",
value: 0,
- percentage: 20,
+ percentage: 0,
options: {
tooltip: {
trigger: "item",
@@ -496,7 +495,387 @@
};
},
},
+ watch: {
+ selectedId: {
+ handler(newVal) {
+ console.log("设备界面接收到的数据:", newVal);
+ // 处理数据变化的逻辑
+ this.getDeviceTypes(newVal);
+ this.getEnvData(newVal);
+ this.getUserData(newVal);
+ },
+ deep: true, // 深度监听对象内部变化
+ immediate: true, // 立即执行一次
+ },
+ },
+ mounted() {},
methods: {
+ /**
+ * 处理设备选择变化
+ * @param val
+ */
+ 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: "无",
+ };
+ }
+ }
+ });
+ },
+ /**
+ * 获取设备类型
+ * @param bindId
+ */
+ getDeviceTypes(bindId) {
+ const params = {
+ bindId,
+ };
+ HomeAPI.GetDeviceType(params).then((res) => {
+ if (res.Ret === 1) {
+ const result = res.Data;
+ if (result.length > 0) {
+ this.options = result.map((item) => ({
+ value: item.Id,
+ label: item.Name,
+ }));
+ this.deviceSelected = this.options[0].value; // 默认选中第一个项目
+ this.getDeviceState(this.deviceSelected);
+ } else {
+ this.options = [];
+ }
+ }
+ });
+ },
+ /**
+ * 获取设备状态
+ * @param deviceTypeId
+ */
+ getDeviceState(deviceTypeId) {
+ const params = {
+ bindId: this.selectedId || "",
+ deviceTypeId,
+ };
+ HomeAPI.GetJSCDeviceState(params).then((res) => {
+ if (res.Ret === 1) {
+ const result = res.Data;
+ if (result) {
+ this.deviceOnline = result.TotalOnlineNumber;
+ this.deviceTotal = result.TotalOnlineNumber + result.TotalOfflineNumber;
+ this.circleItems = [
+ {
+ id: "zaixianChartBox",
+ name: "总在线",
+ value: result.TotalOnlineNumber,
+ percentage: result.TotalOnlineRate,
+ options: {
+ tooltip: {
+ trigger: "item",
+ show: false,
+ },
+ 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: result.TotalOnlineRate,
+ name: "",
+ itemStyle: {
+ color: "#00FFFF",
+ },
+ },
+ {
+ value: 100 - result.TotalOnlineRate,
+ name: "",
+ itemStyle: {
+ color: "transparent",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ id: "lixianChartBox",
+ name: "总离线",
+ value: result.TotalOfflineNumber,
+ percentage: result.TotalOfflineRate,
+ options: {
+ tooltip: {
+ trigger: "item",
+ show: false,
+ },
+ 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: result.TotalOfflineRate,
+ name: "",
+ itemStyle: {
+ color: "#00FFFF",
+ },
+ },
+ {
+ value: 100 - result.TotalOfflineRate,
+ name: "",
+ itemStyle: {
+ color: "transparent",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
+ {
+ id: "baojingChartBox",
+ name: "总报警",
+ value: result.TotalAlarmsNumber,
+ percentage: result.TotalAlarmsRate,
+ options: {
+ tooltip: {
+ trigger: "item",
+ show: false,
+ },
+ 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: result.TotalAlarmsRate,
+ name: "",
+ itemStyle: {
+ color: "#00FFFF",
+ },
+ },
+ {
+ value: 100 - result.TotalAlarmsRate,
+ name: "",
+ itemStyle: {
+ color: "transparent",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ },
+ ];
+ }
+ }
+ });
+ },
handleControlBtnClick(tab) {
this.currentTab = tab;
},
@@ -749,5 +1128,4 @@
.progress-inner {
display: none;
}
-
</style>
--
Gitblit v1.9.3