From e7c05e5d214a149bdaba12f2e84ad0e8136f8726 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 10:23:06 +0800
Subject: [PATCH] feat: 设备状态接口对接
---
src/views/EquipmentView.vue | 360 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 329 insertions(+), 31 deletions(-)
diff --git a/src/views/EquipmentView.vue b/src/views/EquipmentView.vue
index 7b2233b..8a19837 100644
--- a/src/views/EquipmentView.vue
+++ b/src/views/EquipmentView.vue
@@ -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
@@ -171,6 +171,7 @@
<script>
import V2Echarts from "@/components/V2Echarts.vue";
+ import { HomeAPI } from "@/api/home";
export default {
name: "EquipmentView",
components: {
@@ -184,44 +185,23 @@
},
data() {
return {
- equipmentSelected: "",
- options: [
- {
- value: "选项1",
- label: "黄金糕",
- },
- {
- value: "选项2",
- label: "双皮奶",
- },
- {
- value: "选项3",
- label: "蚵仔煎",
- },
- {
- value: "选项4",
- label: "龙须面",
- },
- {
- value: "选项5",
- label: "北京烤鸭",
- },
- ],
+ 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",
@@ -308,8 +288,8 @@
{
id: "lixianChartBox",
name: "总离线",
- value: 5,
- percentage: 33,
+ value: 0,
+ percentage: 0,
options: {
tooltip: {
trigger: "item",
@@ -397,7 +377,7 @@
id: "baojingChartBox",
name: "总报警",
value: 0,
- percentage: 20,
+ percentage: 0,
options: {
tooltip: {
trigger: "item",
@@ -507,12 +487,330 @@
handler(newVal) {
console.log("设备界面接收到的数据:", newVal);
// 处理数据变化的逻辑
+ this.getDeviceTypes(newVal);
},
deep: true, // 深度监听对象内部变化
immediate: true, // 立即执行一次
},
},
+ mounted() {},
methods: {
+ /**
+ * 处理设备选择变化
+ * @param val
+ */
+ handleSelectChange(val) {
+ this.getDeviceState(val);
+ },
+ /**
+ * 获取设备类型
+ * @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;
},
--
Gitblit v1.9.3