优化 监控中心 前端样式

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

@@ -10,6 +10,7 @@
       placeholder="请选择设备类型"
       v-model:value="value"
       style="width: 100%"
+      :treeDefaultExpandedKeys="firstKey"
       :tree-line="treeLine && { showLeafIcon }"
       :tree-data="treeData1"
       @change="changeDeviceType" />
@@ -123,10 +124,14 @@
       orgId.value = result;
 
       const treeData1 = ref<TreeSelectProps['treeData']>([]);
+      const firstKey = ref<String[]>([]);
 
       http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
         treeData1.value = formatTreeData(res.data);
-
+        debugger;
+        if (treeData1.value && treeData1.value.length > 0) {
+          firstKey.value = [treeData1.value[0].value];
+        }
         // if (treeData1.value && treeData1.value.length > 0) {
         //   if (treeData1.value[0].children) {
         //     value.value = treeData1.value[0].children[0].value;
@@ -401,6 +406,7 @@
         treeLoading,
         select,
         divWidth,
+        firstKey,
       };
     },
   });

hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue

@@ -48,6 +48,22 @@
         "></div>
     </a-col>
   </a-row>
+  <div
+    v-show="!haveData"
+    style="
+      height: 80%;
+      width: 98%;
+      position: absolute;
+      border-radius: 10px;
+      z-index: 5;
+      top: 20%;
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    ">
+    <a-empty />
+  </div>
 </template>
 
 <script lang="ts">
@@ -59,6 +75,7 @@
   export default defineComponent({
     name: 'AnalysisGraph',
     setup() {
+      let haveData = ref(false);
       const mode = ref<String>('1');
       let data = ref<any[]>([]);
       interface PageData {
@@ -112,6 +129,13 @@
         // 深度拷贝
         let dataList = JSON.parse(JSON.stringify(pageData.analysisGraphList));
         // let dataList = pageData.analysisGraphList;
+
+        if (dataList && dataList.length > 0) {
+          haveData.value = true;
+        } else {
+          haveData.value = false;
+          return;
+        }
         dataList.forEach((item) => {
           if (item.yoyValue < 0) {
             item.yoyLabel = { position: 'right' };
@@ -552,6 +576,7 @@
         downloadChart,
         mode,
         changeMode,
+        haveData,
       };
     },
   });

hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue

@@ -57,7 +57,7 @@
 
       let chartInstance: echarts.ECharts | null = null;
 
-      let haveData = ref(true);
+      let haveData = ref(false);
       const draw = () => {
         data.value = pageData.graphGraphList;
         if (data.value && data.value.length > 0) {

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

@@ -121,6 +121,7 @@
 </template>
 
 <script lang="ts">
+  import { message } from 'ant-design-vue';
   import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
   import { defineComponent, ref, onMounted, inject, onUnmounted } from 'vue';
   import dayjs, { Dayjs } from 'dayjs';
@@ -276,10 +277,25 @@
           keyV = key;
         }
         if (activeKey.value == '1') {
+          if (checkedKeys.value.length == 0) {
+            message.warning(mode.value == '0' ? '请先选择设备！' : '请先选择节点！');
+            pageData.graphTableList = [];
+            pageData.graphTableColumns = [];
+            pageData.graphGraphList = [];
+            return;
+          } else {
             getSelectGraph(keyV);
+          }
+        } else {
+          if (checkedKeys.value.length == 0) {
+            message.warning(mode.value == '0' ? '请先选择设备！' : '请先选择节点！');
+            pageData.analysisTableList = [];
+            pageData.analysisGraphList = [];
+            return;
           } else {
             getSelectAnalyse(keyV);
           }
+        }
       };
 
       const getSelectGraph = (key: any) => {
@@ -293,7 +309,12 @@
           //   return;
           // }
         }
-
+        if (checkedKeys.value.length == 0) {
+          pageData.graphTableList = [];
+          pageData.graphTableColumns = [];
+          pageData.graphGraphList = [];
+          return;
+        }
         let startTime = '';
         let endTime = '';
         if (startDate.value && endDate.value) {
@@ -369,6 +390,11 @@
           //   return;
           // }
         }
+        if (checkedKeys.value.length == 0) {
+          pageData.analysisTableList = [];
+          pageData.analysisGraphList = [];
+          return;
+        }
         let startTime = '';
         let endTime = '';
         if (startDateAnalyse.value != endDateAnalyse.value) {
@@ -460,8 +486,8 @@
               let a: TreeSelectProps['treeData'] = [{ title: label, key: val, children: records }];
               treeData2.value = a;
               expandedKeys.value = [val];
-              checkedKeys.value.push(records[0].deviceCode, records[1].deviceCode);
+              // checkedKeys.value.push(records[0].deviceCode, records[1].deviceCode);
-              getSelect(null);
+              // getSelect(null);
             })
             .finally(() => {
               treeLoading.value = false;
@@ -478,10 +504,11 @@
               treeData2.value = formatTreeData(res.data);
 
               expandedKeys.value = getAllKeys(treeData2.value);
-              if (treeData2.value?.length >= 2) {
+              // if (treeData2.value?.length >= 2) {
-                checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
+              //   checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
-                getSelect(null);
+              //   getSelect(null);
-              }
+              // }
+              // getSelect(null);
             })
             .finally(() => {
               treeLoading.value = false;

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

@@ -153,7 +153,7 @@
     // } else if (frequencyValue.value == '4') {
     //   dateTypeValue.value = 'year';
     // }
-    dateRange.value = undefined;
+    // dateRange.value = undefined;
   };
   // 获取表格数据
   const getTableList = () => {