优化监控中心前台样式

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

@@ -2,8 +2,8 @@
 <template>
   <div class="parent-container">
     <div class="ns-tree-title">
-      <ns-icon name="deviceType" size="11" style="margin-right: 3px" />
-      <span>设备列表</span>
+      <ns-icon name="deviceType" size="11" style="margin-top: 10px" />
+      <div class="title">设备列表</div>
     </div>
     <a-tree-select
       ref="select"
@@ -83,6 +83,7 @@
 </template>
 
 <script lang="ts">
+  import { message } from 'ant-design-vue';
   import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
   import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
   import dayjs, { Dayjs } from 'dayjs';
@@ -228,12 +229,14 @@
       const getDianWeiList = () => {
         let deviceIds: any[] = [];
         if (checkedKeys.value && checkedKeys.value.length > 0) {
-          debugger;
           checkedKeys.value.forEach((element) => {
             if (value.value != element && value.value != '999999999') {
               deviceIds.push(element);
             }
           });
+          if (deviceIds.length == 0) {
+            return;
+          }
           http
             .post(deviceMonitor.getDevicePointToMonitor, {
               deviceIds: deviceIds,
@@ -275,6 +278,11 @@
 
       // 查询数据后放入pageData
       const getSelect = () => {
+        pageData.tableList = [];
+        pageData.tableColumns = [];
+
+        pageData.graphList = [];
+        pageData.XData = [];
         if (!startDate.value || !endDate.value) {
           // 获取当天的时间
           const today = new Date();
@@ -293,6 +301,10 @@
             }
           });
         }
+        if (deviceIds.length == 0) {
+          message.warning('请先选择设备！');
+          return;
+        }
         http
           .post(deviceMonitor.getDeviceGraph, {
             deviceIds: deviceIds,
@@ -414,8 +426,9 @@
 
 <style lang="less" scoped>
   .ns-tree-title {
+    display: flex;
     user-select: text;
-    margin-bottom: 5px;
+    margin-bottom: 12px;
     padding-bottom: 10px;
     padding-top: 10px;
     border-bottom: 1px solid #e9e9e9;
@@ -444,4 +457,25 @@
   //   width: 100%;
   //   // margin-bottom: 10px;
   // }
+
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 9px;
+  }
+  // .title::before {
+  //   content: '';
+  //   position: absolute;
+  //   left: 10px;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  //   height: 13px;
+  //   width: 3px;
+  //   border-radius: 1px;
+  //   background-color: #2778ff;
+  // }
 </style>