监控中心添加loading

hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue

@@ -93,6 +93,8 @@
   import { deviceMonitor } from '/@/api/monitor';
   import { Item } from 'ant-design-vue/lib/menu';
   import { dict, getEnum } from '/@/api';
+  // 全局变量
+  import { items } from '/@/store/item';
 
   export default defineComponent({
     // eslint-disable-next-line vue/multi-word-component-names
@@ -101,6 +103,8 @@
       const select = ref<HTMLElement | null>(null);
       const divWidth = ref(0); // 用于存储 div 的宽度
 
+      // 全局变量
+      const state = items();
       // 获取 div 的宽度
       // const getDivWidth = () => {
       //   if (select.value) {
@@ -282,6 +286,7 @@
 
       // 查询数据后放入pageData
       const getSelect = () => {
+        state.setLoading(true);
         pageData.tableList = [];
         pageData.tableColumns = [];
 
@@ -324,6 +329,9 @@
 
             pageData.graphList = res.data.graphData;
             pageData.XData = res.data.XData;
+          })
+          .finally(() => {
+            state.setLoading(false);
           });
       };
 

hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue

@@ -205,10 +205,21 @@
 
   import { dict, getEnum } from '/@/api';
   import dayjs from 'dayjs';
+
+  // 全局变量
+  import { items } from '/@/store/item';
+
   defineOptions({
     name: 'AggregateData', // 与页面路由name一致缓存才可生效
   });
-  const loading = ref(false);
+  let statusLoading = ref(false);
+
+  let averageLoading = ref(false);
+
+  let hotLoading = ref(false);
+
+  // 全局变量
+  const state = items();
   // 采集频率
   const frequencyValue = ref<string>();
 
@@ -241,7 +252,10 @@
 
   // 获取设备状态
   const getDeviceStatus = () => {
-    http.post(environmentMonitor.getDeviceStatus, { orgId: orgId.value }).then((res) => {
+    statusLoading.value = true;
+    http
+      .post(environmentMonitor.getDeviceStatus, { orgId: orgId.value })
+      .then((res) => {
         ringData.value = [
           {
             name: '在线',
@@ -256,10 +270,17 @@
         ];
         sum.value = res.data.在线 + res.data.离线;
         // drawRing(ringData.value);
+      })
+      .finally(() => {
+        statusLoading.value = false;
+        if (!statusLoading.value && !averageLoading.value && !hotLoading.value) {
+          state.setLoading(false);
+        }
       });
   };
   // 获取平均值
   const getAverageData = () => {
+    averageLoading.value = true;
     const now = new Date();
     const year = now.getFullYear();
     // getMonth() 返回的月份是从0开始的，所以需要加1
@@ -319,6 +340,12 @@
               'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0Ny45OTYiIGhlaWdodD0iNDguMDAxIiB2aWV3Qm94PSIwIDAgNDcuOTk2IDQ4LjAwMSI+DQogIDxwYXRoIGlkPSLlh4/ljrtfMTA3OCIgZGF0YS1uYW1lPSLlh4/ljrsgMTA3OCIgZD0iTS0xNjU5Ni05YTIzLjg0LDIzLjg0LDAsMCwxLTE2Ljk2Ny03LjAyOUEyMy44MzEsMjMuODMxLDAsMCwxLTE2NjIwLTMzYTIzLjg0NSwyMy44NDUsMCwwLDEsNy4wMjUtMTYuOTczQTIzLjg0MSwyMy44NDEsMCwwLDEtMTY1OTYtNTdoLjAwOGEyMy44MzIsMjMuODMyLDAsMCwxLDE2Ljk2NSw3LjAyOUEyMy44NDUsMjMuODQ1LDAsMCwxLTE2NTcyLTMzYTIzLjg0MywyMy44NDMsMCwwLDEtNy4wMjksMTYuOTcxQTIzLjg0NSwyMy44NDUsMCwwLDEtMTY1OTYtOVptLTIuODQ0LTM0LjIyNGgtLjAxYTEuMjA2LDEuMjA2LDAsMCwwLS45My4zOTJjLS4xMDcuMTE5LS42NjIuNzI4LTEuMjA1LDEuMzkzbC0uMDQzLjA1MmMtMS43OTUsMi4xODQtNS45NjksNy42LTUuOTY5LDEwLjdhOC4xNjksOC4xNjksMCwwLDAsMi43MTcsNi4yOTQsOC4yOTMsOC4yOTMsMCwwLDAsNS40MywyLjExMWguMDU1YTguNTYsOC41NiwwLDAsMCw1LjM0NC0yLjA3Myw4LjQ2Miw4LjQ2MiwwLDAsMCwyLjc0NC02LjI5NGMwLTMuNjc2LTUuOC0xMC41MzgtNS44NTUtMTAuNjA3LS4wMS0uMDEyLTEtMS4yNDgtMS4zOTUtMS42MTRBMS4zNDQsMS4zNDQsMCwwLDAtMTY1OTguODQ2LTQzLjIyNVptMTAuMDc4LS43NzZoLS4wMDZhLjUzLjUzLDAsMCwwLS40LjE1OGMtLjAwNiwwLS4yNjIuMjc2LS41MTguNTcybC0uMDI1LjAyOWMtLjc2Ni44ODktMi41NDksMy4wOTEtMi41NDksNC4zNDZhMy4yNzEsMy4yNzEsMCwwLDAsMS4xNiwyLjU2NSwzLjY3NywzLjY3NywwLDAsMCwyLjMzMi44NTloLjAyMWEzLjc0NiwzLjc0NiwwLDAsMCwyLjI4OS0uODQzLDMuMzc4LDMuMzc4LDAsMCwwLDEuMTc2LTIuNTY1YzAtMS41MDYtMi40ODItNC4yOTMtMi41MDYtNC4zMjEsMCwwLS40MzItLjUxLS42LS42NTlBLjU5LjU5LDAsMCwwLTE2NTg4Ljc2OC00NFptLTguNTYxLDE4LjIyNWEuNjM3LjYzNywwLDAsMS0uNjMxLS4zMWMtLjItLjQ0NS4zLTEuMjExLDEuMTI3LTEuNzA2YTIuNTM5LDIuNTM5LDAsMCwxLDEuMjMtLjQuNjQzLjY0MywwLDAsMSwuNjM1LjMxM2MuMi40NDUtLjMsMS4yMDktMS4xMjcsMS43QTIuNTYsMi41NiwwLDAsMS0xNjU5Ny4zMjgtMjUuNzc2WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTY2MTkuOTk4IDU3LjAwMikiIGZpbGw9IiMyNzc4ZmYiLz4NCjwvc3ZnPg0K',
           },
         ];
+      })
+      .finally(() => {
+        averageLoading.value = false;
+        if (!statusLoading.value && !averageLoading.value && !hotLoading.value) {
+          state.setLoading(false);
+        }
       });
   };
   // 获取区域数据
@@ -336,6 +363,7 @@
 
   // 获取热力图数据
   const getDeviceHotMap = () => {
+    hotLoading.value = true;
     let environmentType = '';
     for (let i = 0; i < typeList.value.length; i++) {
       if (typeList.value[i].value == typeValue.value) {
@@ -356,10 +384,18 @@
       .then((res) => {
         let hotData = res.data;
         drawHot(hotData);
+      })
+      .finally(() => {
+        hotLoading.value = false;
+        if (!statusLoading.value && !averageLoading.value && !hotLoading.value) {
+          state.setLoading(false);
+        }
       });
   };
 
-  const initOptions = () => {};
+  const initOptions = () => {
+    state.setLoading(true);
+  };
   onMounted(async () => {
     initOptions();
     //获取设备状态