优化监控中心前台样式

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

@@ -1,5 +1,26 @@
 <template>
   <div ref="graphChart" style="width: 100%; height: 80%"></div>
+  <div
+    v-show="!haveData"
+    style="
+      height: 80%;
+      width: 96%;
+      position: absolute;
+      margin: 0 1% 0 1%;
+      z-index: 5;
+      top: 20%;
+      background: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    ">
+    <a-empty />
+  </div>
+  <!-- <div
+    v-else
+    style="height: 80%; width: 100%; display: flex; justify-content: center; align-items: center">
+    <a-empty />
+  </div> -->
 </template>
 
 <script lang="ts">
@@ -36,8 +57,16 @@
       const graphChart = ref(null);
       let chartInstance: echarts.ECharts | null = null;
 
+      let haveData = ref(false);
       const draw = () => {
         data.value = pageData.graphList;
+        if (data.value && data.value.length > 0) {
+          haveData.value = true;
+        } else {
+          haveData.value = false;
+          return;
+        }
+
         let XData = pageData.XData;
         if (chartInstance) {
           chartInstance.dispose();
@@ -144,9 +173,11 @@
       };
 
       return {
+        data,
         draw,
         graphChart,
         downloadChart,
+        haveData,
       };
     },
   });

hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue

@@ -19,7 +19,7 @@
           <span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
           <div class="button">
             <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
-            <ns-icon :name="iconName" size="15" style="margin-right: 10px" @click="change" />
+            <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
           </div>
         </div>
         <graph ref="graphRef" v-if="isGraph" />
@@ -35,7 +35,7 @@
   import graph from './graph/index.vue';
   import environmentTable from './table/index.vue';
 
-  const iconName = ref('biaoge');
+  const iconName = ref('biaoge1');
 
   const treeRef = ref();
   const graphRef = ref();
@@ -57,10 +57,10 @@
 
   function change() {
     isGraph.value = !isGraph.value;
-    if (iconName.value == 'biaoge') {
-      iconName.value = 'bingtu';
+    if (iconName.value == 'biaoge1') {
+      iconName.value = 'zhexiantu';
     } else {
-      iconName.value = 'biaoge';
+      iconName.value = 'biaoge1';
     }
   }
 </script>

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

@@ -96,6 +96,7 @@
       const column: TableColumnType[] = [
         {
           title: '序号',
+          width: 50,
           customRender: ({ record, index }) => {
             // 自定义单元格内容，这里返回序号
             if (index == 0) {

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

@@ -7,6 +7,7 @@
     </div>
     <a-tree-select
       ref="select"
+      placeholder="请选择设备类型"
       v-model:value="value"
       style="width: 100%"
       :tree-line="treeLine && { showLeafIcon }"
@@ -18,6 +19,7 @@
         v-model:expandedKeys="expandedKeys"
         v-model:selectedKeys="selectedKeys"
         v-model:checkedKeys="checkedKeys"
+        :show-line="{ showLeafIcon: false }"
         checkable
         :height="560"
         style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
@@ -124,23 +126,24 @@
       http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
         treeData1.value = formatTreeData(res.data);
 
-        if (treeData1.value && treeData1.value.length > 0) {
-          if (treeData1.value[0].children) {
-            value.value = treeData1.value[0].children[0].value;
-            changeDeviceType(treeData1.value[0].children[0].value, [
-              treeData1.value[0].children[0].title,
-            ]);
-          } else {
-            value.value = treeData1.value[0].value;
-            changeDeviceType(treeData1.value[0].value, [treeData1.value[0].title]);
-          }
-        }
+        // if (treeData1.value && treeData1.value.length > 0) {
+        //   if (treeData1.value[0].children) {
+        //     value.value = treeData1.value[0].children[0].value;
+        //     changeDeviceType(treeData1.value[0].children[0].value, [
+        //       treeData1.value[0].children[0].title,
+        //     ]);
+        //   } else {
+        //     value.value = treeData1.value[0].value;
+        //     changeDeviceType(treeData1.value[0].value, [treeData1.value[0].title]);
+        //   }
+        // }
       });
 
       const formatTreeData = (data: any) => {
         return data.map((item: any) => ({
           title: item.code + '.' + item.deviceType,
           value: item.code,
+          disabled: item.children.length != 0 ? true : false,
           children: item.children ? formatTreeData(item.children) : [],
         }));
       };