大屏设备监控接口。

public/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "1.8"
+  "version": "1.9"
 }

src/api/screens/index.ts

@@ -0,0 +1,11 @@
+import request from "@/utils/request";
+
+/**
+ * 设备监控
+ */
+export function deviceMonitor() {
+  return request({
+    url: "/data/device",
+    method: "POST",
+  });
+}

src/store/modules/user.ts

@@ -81,7 +81,7 @@ export const useUserStore = defineStore("user", () => {
       logoutApi()
         .then(() => {
           localStorage.setItem("token", "");
-          location.reload(); // 清空路由
+          resetRouter();
           resolve();
         })
         .catch((error) => {
@@ -92,7 +92,6 @@ export const useUserStore = defineStore("user", () => {
 
   // remove token
   function resetToken() {
-    console.log("resetToken");
     return new Promise<void>((resolve) => {
       localStorage.setItem("token", "");
       resetRouter();

src/utils/request.ts

@@ -1,4 +1,4 @@
-import axios, { InternalAxiosRequestConfig, AxiosResponse } from "axios";
+import axios, { AxiosResponse, InternalAxiosRequestConfig } from "axios";
 import { useUserStoreHook } from "@/store/modules/user";
 
 // 创建 axios 实例
@@ -35,28 +35,25 @@ service.interceptors.response.use(
       return response;
     }
 
-    ElMessage.error(msg || "系统出错");
+    // token 过期,重新登录
+    if (code === "4106") {
+      ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        const userStore = useUserStoreHook();
+        userStore.resetToken();
+      });
+    } else {
+      ElMessage.error(msg || "系统出错");
+    }
 
     return Promise.reject(new Error(msg || "Error"));
   },
   (error: any) => {
     if (error.response.data) {
       const { code, msg } = error.response.data;
-      // token 过期,重新登录
-      if (code === "A0230") {
-        ElMessageBox.confirm("当前页面已失效，请重新登录", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }).then(() => {
-          const userStore = useUserStoreHook();
-          userStore.resetToken().then(() => {
-            location.reload();
-          });
-        });
-      } else {
-        ElMessage.error(msg || "系统出错");
-      }
     }
     return Promise.reject(error.message);
   }

src/views/screens/screen-components/EquipmentMonitoring.vue

@@ -20,6 +20,7 @@ import {
   allChartColors,
   chartLegend,
 } from "@/views/screens/configs/chartsConfig";
+import { deviceMonitor } from "@/api/screens";
 
 const props = defineProps({
   moduleId: {
@@ -30,38 +31,43 @@ const props = defineProps({
 
 const chartRef = ref(null);
 
-const options = {
-  color: allChartColors,
-  tooltip: {
-    trigger: "item",
-  },
-  legend: chartLegend,
-  series: [
-    {
-      name: "设备监控",
-      type: "pie",
-      radius: ["40%", "70%"],
-      avoidLabelOverlap: false,
-      label: {
-        show: true,
-        position: "center",
-        color: "#fff",
-        formatter: function () {
-          return "设备总数：1000";
+onMounted(async () => {
+  const chart = echarts.init(chartRef.value);
+
+  let result: any = await deviceMonitor();
+
+  console.log(result.data);
+
+  const options = {
+    color: allChartColors,
+    tooltip: {
+      trigger: "item",
+    },
+    legend: chartLegend,
+    series: [
+      {
+        name: "设备监控",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: "center",
+          color: "#fff",
+          formatter: function () {
+            return `设备总数：${result.data.total}`;
+          },
         },
+        data: [
+          { value: result.data.runNum, name: "运行" },
+          { value: result.data.offLineNum, name: "离线" },
+          { value: result.data.faultNum, name: "故障" },
+          { value: result.data.repairNum, name: "维修" },
+        ],
       },
-      data: [
-        { value: 1048, name: "运行" },
-        { value: 735, name: "空闲" },
-        { value: 580, name: "维护" },
-        { value: 484, name: "维修" },
-      ],
-    },
-  ],
-};
+    ],
+  };
 
-onMounted(() => {
-  const chart = echarts.init(chartRef.value);
   chart.setOption(options);
 });
 </script>