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: 设备状态接口对接
---
vite.config.js | 209 ++++++++++----------
src/views/EquipmentView.vue | 360 ++++++++++++++++++++++++++++++++---
2 files changed, 437 insertions(+), 132 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;
},
diff --git a/vite.config.js b/vite.config.js
index b0162fb..7857501 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -13,111 +13,118 @@
import PluginForViteVue2 from "@vitejs/plugin-vue2";
// 屏幕适配
-const px2rem = require("postcss-px2rem")
- // 配置基本大小
+const px2rem = require("postcss-px2rem");
+// 配置基本大小
const postcss = px2rem({
- //配rem基准值 基准大小 baseSize
- remUnit: 192, // 设稿尺1920/10
-})
+ //配rem基准值 基准大小 baseSize
+ remUnit: 192, // 设稿尺1920/10
+});
export default defineConfig(({ mode }) => {
- return {
- resolve: {
- alias: {
- "@": path.resolve(__dirname, './src'),
- "@css": path.resolve("./src/assets/css"),
- 'worker-loader': require.resolve('worker-loader'),
- },
+ return {
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ "@css": path.resolve("./src/assets/css"),
+ "worker-loader": require.resolve("worker-loader"),
+ },
+ },
+ worker: {
+ // 例如，设置一个worker的入口文件
+ // 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
+ // entry: '/path/to/worker/entry.js',
+ options: { inline: true, name: "workerName.[hash].js" },
+ },
+ plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
+ css: {
+ preprocessorOptions: {
+ scss: {
+ additionalData: "@import '@css/sass.scss';",
},
- worker: {
- // 例如，设置一个worker的入口文件
- // 注意：这是一个假设的配置，具体取决于worker-loader是否支持这样的配置
- // entry: '/path/to/worker/entry.js',
- options: { inline: true, name: 'workerName.[hash].js' }
+ },
+ loaderOptions: {
+ postcss: {
+ plugins: [postcss],
},
- plugins: [PluginForViteVue2(), splitVendorChunkPlugin()],
- css: {
- preprocessorOptions: {
- scss: {
- additionalData: "@import '@css/sass.scss';",
- },
- },
- loaderOptions: {
- postcss: {
- plugins: [postcss]
- }
+ },
+ },
+ server: {
+ proxy: {
+ "^/api/": {
+ // target: "http://47.117.124.20:2002/",
+ target: "http://101.201.155.10:4011/",
+ rewrite: (path) => path.replace(/^\/api\//, ""),
+ changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
+ },
+ },
+ port: 8081,
+ host: "0.0.0.0",
+ cors: true,
+ open: true,
+ },
+ esbuild: {
+ treeShaking: true,
+ drop: mode === "production" ? ["console", "debugger"] : [],
+ },
+ chainWebpack(config) {
+ config.module
+ .rule("css")
+ .test(/\.css$/)
+ .oneOf("vue")
+ .use("px2rem-loader")
+ .loader("px2rem-loader")
+ .options({
+ remUnit: 192,
+ })
+ .end();
+ },
+ build: {
+ minify: "esbuild",
+ chunkSizeWarningLimit: 500, //kbs
+ rollupOptions: {
+ output: {
+ chunkFileNames: "assets/js/[name]-[hash].js",
+ entryFileNames: "assets/js/[name]-[hash].js",
+ assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
+ // manualChunks(id) {
+ // if (id.includes("/node_modules/")) {
+ // const name = id.split("/node_modules/")[1].split("/")[0];
+ // for (const key of Object.keys(ChunksMap)) {
+ // if (ChunksMap[key].includes(name)) {
+ // return key;
+ // }
+ // }
+ // return "vendor";
+ // }
+ // },
+
+ // eslint-disable-next-line no-unused-vars
+ // manualChunks(id, { getModuleInfo, getModuleIds }) {
+ // const getShouldBeVendor = splitVendorChunk();
+ // const chunkName = getShouldBeVendor(id, { getModuleInfo });
+ // if (chunkName === "vendor") {
+ // //1 在node_modules文件夹下
+ // //2 不是css类请求
+ // //3 是被静态引入的
+ // return chunkName;
+ // } else if (id.includes("src")) {
+ // const moduleInfo = getModuleInfo(id);
+ // // console.log(id, "importers", moduleInfo.importers);
+ // // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
+ // if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
+ // return "manifest";
+ // }
+ // }
+ // },
+
+ // eslint-disable-next-line no-unused-vars
+ manualChunks(id) {
+ if (id.includes("/node_modules/")) {
+ return id.split("/node_modules/")[1].split("/")[0];
}
+ },
},
- server: {
- proxy: {
- "^/api/": {
- // target: "http://47.117.124.20:2002/",
- target: "http://101.201.155.10:4011/",
- rewrite: (path) => path.replace(/^\/api\//, ""),
- changeOrigin: true, //通过浏览器查看像是"未生效",实际发送给后端的是更改过的Host(与target的host相同)
- },
- },
- port: 3000,
- host: "0.0.0.0",
- cors: true,
- open: true,
- },
- esbuild: {
- treeShaking: true,
- drop: mode === "production" ? ["console", "debugger"] : [],
- },
- chainWebpack(config) {
- config.module.rule("css").test(/\.css$/).oneOf("vue").use("px2rem-loader").loader("px2rem-loader").options({
- remUnit: 192,
- }).end();
- },
- build: {
- minify: "esbuild",
- chunkSizeWarningLimit: 500, //kbs
- rollupOptions: {
- output: {
- chunkFileNames: "assets/js/[name]-[hash].js",
- entryFileNames: "assets/js/[name]-[hash].js",
- assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
- // manualChunks(id) {
- // if (id.includes("/node_modules/")) {
- // const name = id.split("/node_modules/")[1].split("/")[0];
- // for (const key of Object.keys(ChunksMap)) {
- // if (ChunksMap[key].includes(name)) {
- // return key;
- // }
- // }
- // return "vendor";
- // }
- // },
-
- // eslint-disable-next-line no-unused-vars
- // manualChunks(id, { getModuleInfo, getModuleIds }) {
- // const getShouldBeVendor = splitVendorChunk();
- // const chunkName = getShouldBeVendor(id, { getModuleInfo });
- // if (chunkName === "vendor") {
- // //1 在node_modules文件夹下
- // //2 不是css类请求
- // //3 是被静态引入的
- // return chunkName;
- // } else if (id.includes("src")) {
- // const moduleInfo = getModuleInfo(id);
- // // console.log(id, "importers", moduleInfo.importers);
- // // console.log(id, "dynamicImporters", moduleInfo.dynamicImporters);
- // if (moduleInfo.importers.length + moduleInfo.dynamicImporters.length > 1) {
- // return "manifest";
- // }
- // }
- // },
-
- // eslint-disable-next-line no-unused-vars
- manualChunks(id) {
- if (id.includes("/node_modules/")) {
- return id.split("/node_modules/")[1].split("/")[0];
- }
- },
- },
- },
- },
- };
-});
\ No newline at end of file
+ },
+ },
+ };
+});
--
Gitblit v1.9.3