From de815a29624a06616d9d4b5781a90147c6041cc5 Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Sun, 4 Feb 2024 15:54:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=BB=9F=E8=AE=A1=E5=88=86?=
 =?UTF-8?q?=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dialogs/Broadcast/index.vue    |   2 +-
 .../Home/components/Dialogs/Camera/index.vue  |   2 +-
 .../Dialogs/DrivingGuidance/index.vue         |   2 +-
 .../components/Dialogs/SmartDevice/index.vue  |   2 +-
 .../statisticalAnalysis/assets/charts.js      |   2 +-
 .../components/deviceSummary/index.vue        |  14 +-
 .../components/deviceUptime/index.vue         |  24 +-
 .../components/monthlyEquipment/index.vue     |  15 +-
 .../statisticalAnalysis/data.js               |   4 -
 .../statisticalAnalysis/index.vue             | 317 +++++++-----------
 10 files changed, 147 insertions(+), 237 deletions(-)

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
index 392d439f..85556b84 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
@@ -4,7 +4,7 @@
 
     <div class="Broadcast">
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
-        <ElTabPane label="详细设计" name="first">
+        <ElTabPane label="基本信息" name="first">
           <Descriptions :list="list" :data="data" style="gap: 18px" />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
index 5a14e4bd..5c6759b9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
@@ -3,7 +3,7 @@
     <div class="Camera">
       <Video class="video-stream" :camId="dialogData.iotDeviceId" />
       <ElTabs v-model="activeName" class="tabs">
-        <ElTabPane label="详细设计" name="first">
+        <ElTabPane label="基本信息" name="first">
           <Descriptions :list="list" :data="data" style="gap: 18px">
             <template #content-deviceName>
               <span>{{ dialogData.deviceName || '-' }}</span>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
index a2898749..9c22faad 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
@@ -4,7 +4,7 @@
       <Video class="video-stream" :pileNum="dialogData.stakeMark" />
 
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
-        <ElTabPane label="详细设计" name="first">
+        <ElTabPane label="基本信息" name="first">
           <Descriptions :list="list" :data="data" style="gap: 18px" />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
index e2dfb20b..42ae305c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
@@ -4,7 +4,7 @@
 
     <div class="SmartDevice">
       <ElTabs v-model="activeName" class="tabs">
-        <ElTabPane label="详细设计" name="first">
+        <ElTabPane label="基本信息" name="first">
           <Descriptions :list="list" :data="data" style="gap: 18px" />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
index f5eb612d..417577a6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/assets/charts.js
@@ -8,7 +8,7 @@ let options = {
       color: "#fff"
     },
     formatter: function (params) {
-      return params[0].name + params[0].seriesName + ': ' + params[0].value
+      return params[0].name + params[0].seriesName + ': ' + params[0].value + '%'
     }
   },
   grid: {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceSummary/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceSummary/index.vue
index 13b1d20d..1e1ce1eb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceSummary/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceSummary/index.vue
@@ -18,9 +18,9 @@
                     <img src="@screen/images/deviceType/ball.svg" v-if="item.title.includes('球形摄像机')" />
                     <img src="@screen/images/layer/路测设备/合流区.svg" v-if="item.title.includes('合流区预警')" />
                     <img src="@screen/images/layer/路测设备/行车诱导.svg" v-if="item.title.includes('行车诱导')" />
-                    <img src="@screen/images/layer/路测设备/护栏碰撞.svg" v-if="item.title.includes('护栏碰撞')" />
+                    <img src="@screen/images/layer/路测设备/护栏碰撞.svg" v-if="item.title.includes('碰撞')" />
                     <img src="@screen/images/deviceType/ball.svg" v-if="item.title.includes('全景摄像机')" />
-                    <img src="@screen/images/layer/路测设备/交调.svg" v-if="item.title.includes('交通量调查站')" />
+                    <img src="@screen/images/layer/路测设备/交调.svg" v-if="item.title.includes('交通量调')" />
                     <img src="@screen/images/layer/路测设备/气象检测器.svg" v-if="item.title.includes('气象')" />
                     <img src="@screen/images/layer/路测设备/语音广播.svg" v-if="item.title.includes('语音广播')" />
                     <img src="@screen/images/layer/路测设备/疲劳唤醒.svg" v-if="item.title.includes('疲劳唤醒')" />
@@ -223,17 +223,11 @@
 
         .text {
           font-size: 15px;
-          letter-spacing: 3px;
-          font-family: "PangMenZhengDao";
-          font-weight: 400;
+          font-family: "Arial","PingFang","Microsoft YaHei";
+          font-weight: bold;
           color: #FFFFFF;
         }
 
-
-
-
-
-
       }
 
       .title-tool::after {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue
index 432143c4..ce8e7c5a 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/deviceUptime/index.vue
@@ -85,31 +85,15 @@ export default {
     height: 510px;
     width: 100%;
     padding: 0px 20px;
-    background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
-    border-radius: 5px 5px 5px 5px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(6, 66, 88, 0.4) 100%);
+    // border-radius: 5px 5px 5px 5px;
     opacity: 1;
-    border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    // border: 1px solid;
+    // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
-
-    .board {
-      height: 510px;
-      width: 100%;
-      padding: 0px 20px;
-      background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(6, 66, 88, 0.4) 93%);
-      border-radius: 5px 5px 5px 5px;
-      opacity: 1;
-      border: 1px solid;
-      border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-direction: column;
-
-    }
   }
 }
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue
index bbd0a620..16ef388f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/components/monthlyEquipment/index.vue
@@ -160,9 +160,18 @@ export default {
   .board {
     position: relative;
     height: 510px;
-    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(6, 66, 88, 0.4) 93%);
-    border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    width: 100%;
+    padding: 0px 20px;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0) 0%, rgba(6, 66, 88, 0.4) 100%);
+    // border-radius: 5px 5px 5px 5px;
+    opacity: 1;
+    // border: 1px solid;
+    // border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+  
 
     .ball {
       position: absolute;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
index 7da00383..d605840d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/data.js
@@ -41,10 +41,6 @@ export const searchFormList = [
     type: "select",
     options: {
       options: [
-        {
-          value: "",
-          label: "全部",
-        },
           {
           value: "1",
           label: "高清网络枪型固定摄像机",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
index 61b69d6e..2f2e4760 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue
@@ -12,21 +12,23 @@
       <el-tab-pane label="设备查询" name="second">
         <div class="topdiv">
           <div class="left-div">
-            <el-button size="mini" icon="el-icon-refresh-left" class="btnSearch">刷新</el-button>
+            <el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" @click="onRefreshData">刷新</el-button>
             <el-button size="mini" icon="el-icon-download" class="btnSearch"
               @click="SystemStatusExport">导出Excel</el-button>
           </div>
           <div class="right-div">
-            <InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
+            <InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" :placeholder="searchText"/>
           </div>
-        </div>
-        <div class="middleDiv">
+        </div> 
+        <div class="queryChart">
+          <!-- v-if="isEmpty01"  -->
+          <Empty v-if="isEmpty01" class="floatEmpty" :text="emptyText01"></Empty>
           <div ref="queryChart" class="keep-ratio">
-
           </div>
         </div>
-        <div>
-          <el-table :border="false" :data="tableData" height="480" style="width: 100%">
+        <div style="position: relative;">
+          <Empty v-if="isEmpty02" class="floatEmpty" :text="emptyText02"></Empty>
+          <el-table :border="false" :data="tableData" height="480" header-align="left" empty-text=" ">
             <el-table-column prop="order" label="序号" width="80">
             </el-table-column>
             <el-table-column prop="deviceName" label="设备名称"></el-table-column>
@@ -63,10 +65,10 @@
             </el-table-column>
             <el-table-column prop="time" label="监测时间" width="">
             </el-table-column>
-            <el-table-column prop="deviceStatus" label="操作" width="">
+            <el-table-column prop="deviceStatus" label="设备状态" width="">
               <template slot-scope="scope">
                 <div v-if="scope.row.deviceStatus == 1">在线</div>
-                <div v-if="scope.row.deviceStatus == 0">离线</div>
+                <div v-if="scope.row.deviceStatus == 0" style="color: #BBB;">离线</div>
               </template>
             </el-table-column>
           </el-table>
@@ -107,9 +109,14 @@ export default {
   },
   data() {
     return {
-      startTime: "2024-01-01 00:00:00",
-      time: "2024-01-31 00:00:00",
-      typeQuery: 1, //高清网络枪型固定摄像机
+      searchText:"请设置查询条件",
+      isEmpty01:true,
+      emptyText01:"请输入参数查询...",
+      isEmpty02:true,
+      emptyText02: "请输入参数查询...",
+      startTime: "",
+      time: "",
+      typeQuery: "", //高清网络枪型固定摄像机
       pageTotal: 0,
       pageIndex: 1,
       pageSize: 10,
@@ -133,139 +140,8 @@ export default {
         "智能行车诱导系统",
       ],
       equipments: [],
-      activeName: "second",
-      tableData: [{
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      }, {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      },
-      {
-        date: '2023-12-31 13:00:00',
-        name: '高清网络球形摄像机',
-        address: 'K234+235',
-        root: "中央分隔带",
-        ip: "10.0.61.43",
-        cj: "海康威视",
-        xh: "XXX",
-        wd: "梁山收费站监控网段",
-        jcsj: "2024-01-17",
-        cz: "在线",
-      }
-      ],
+      activeName: "first",
+      tableData: [],
       interval: null
     }
   },
@@ -281,10 +157,6 @@ export default {
       } else if (this.activeName == 'second') {
         this.queryChart = echarts.init(this.$refs["queryChart"]);
         this.queryChart.setOption(chartsStatistics);
-
-        // this.initQueryTable(1);
-        // this.initQueryChart();
-
       }
 
       this.interval = setInterval(() => {
@@ -308,10 +180,23 @@ export default {
 
       return year + "-" + m + "-" + day + " 00:00:00";
     },
+    onRefreshData(){
+      if(!this.typeQuery || !this.startTime){
+        this.$message({
+          message : "请先设置查询条件！",
+          type : "warning"
+        })
+        return
+      }
+      this.initQueryChart();
+      this.initQueryTable(1);
+    },
     handleSearch(data) {
       this.typeQuery = data.type;
       this.startTime = this.formatDate(data.time[0]);
       this.time = this.formatDate(data.time[1]);
+      let typeText = this.searchFormList[1].options.options[this.typeQuery-1].label;
+      this.searchText = `${moment(this.startTime).format("YYYY年MM月DD日")}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`;
       this.initQueryChart();
       this.initQueryTable(1);
     },
@@ -347,44 +232,6 @@ export default {
         loadingInstance.close();
       })
     },
-    initQueryChart() {
-
-      getSystemStatusList({
-        startTime: this.startTime,
-        time: this.time,
-        type: this.typeQuery,
-      }).then((res) => {
-        if (res.code == 200) {
-          let origin = res.data;
-
-          let startStamp = +moment(this.startTime).startOf('day').format("x");
-          let endStamp = +moment(this.time).endOf('day').format("x");
-          let oneDay = 86400000;
-          let daysTotal = Math.ceil((endStamp - startStamp) / oneDay);
-          let queryChartData = [];
-          let dataX = [];
-          let data0 = [];
-          let data1 = [];
-          for (let i = 0; i < daysTotal; i++) {
-            let ts = startStamp + i * oneDay;
-            let date = moment(ts).format("YYYY-M-D");
-            let val = origin[date] ? +origin[date].replace("%", "") : 0;
-            dataX.push(moment(ts).format("MM月DD日"));
-            data0.push(val);
-            data1.push(100);
-          }
-          chartsStatistics.xAxis.data = dataX;
-          chartsStatistics.series[0].data = data0;
-          chartsStatistics.series[1].data = data1;
-          chartsStatistics.yAxis[0].name = "在线率(%)";
-
-          this.$nextTick(() => {
-            this.queryChart.setOption(chartsStatistics);
-          });
-
-        }
-      })
-    },
     initDevice() {   //设备在线离线率接口
 
       getSystemStatusType().then((res) => {
@@ -424,8 +271,73 @@ export default {
       })
 
     },
+    setStatus(id,status){
+      if(status == "doing"){
+          this["isEmpty" + id] = true
+          this["emptyText" + id] = "数据查询中..."
+        }else if(status == "empty"){
+          this["isEmpty" + id] = true
+          this["emptyText" + id] = "暂无数据..."
+        } else if (status == "finish") {
+          this["isEmpty" + id] = false
+          this["emptyText" + id] = ""
+      }
+    },
+    initQueryChart() {
+
+      this.setStatus("01", "doing");
+
+      getSystemStatusList({
+        startTime: this.startTime,
+        time: this.time,
+        type: this.typeQuery,
+      }).then((res) => {
+        if (res.code == 200) {
+
+          if (res.data && Object.keys(res.data).length>0) {
+            
+            this.setStatus("01", "finish");
+
+            let origin = res.data;
+  
+            let startStamp = +moment(this.startTime).startOf('day').format("x");
+            let endStamp = +moment(this.time).endOf('day').format("x");
+            let oneDay = 86400000;
+            let daysTotal = Math.ceil((endStamp - startStamp) / oneDay);
+            let queryChartData = [];
+            let dataX = [];
+            let data0 = [];
+            let data1 = [];
+            for (let i = 0; i < daysTotal; i++) {
+              let ts = startStamp + i * oneDay;
+              let date = moment(ts).format("YYYY-M-D");
+              let val = origin[date] ? +origin[date].replace("%", "") : 0;
+              dataX.push(moment(ts).format("MM-DD"));
+              data0.push(val);
+              data1.push(100);
+            }
+            chartsStatistics.xAxis.data = dataX;
+            chartsStatistics.series[0].data = data0;
+            chartsStatistics.series[1].data = data1;
+            chartsStatistics.yAxis[0].name = "在线率(%)";
+  
+            this.$nextTick(() => {
+              this.queryChart.setOption(chartsStatistics);
+            });
+
+          }else{
+
+            this.setStatus("01", "empty");
+            
+          }
+
+
+        }
+      })
+    },
     //查询列表
     initQueryTable(pageIndex, pageSize = 30) {
+      this.setStatus("02", "doing");
       getSystemStatusTabList({
         startTime: this.startTime,
         time: this.time,
@@ -434,13 +346,18 @@ export default {
         pageSize: pageSize,
       }).then((res) => {
         if (res.code == 200) {
-          this.pageIndex = pageIndex;
-          this.pageSize = pageSize;
-          this.pageTotal = res.total;
-          this.tableData = res.rows;
-          this.tableData.forEach((it, index) => {
-            it.order = (pageIndex - 1) * (pageSize) + index + 1;
-          })
+          if(res.rows && res.rows.length>0){
+              this.setStatus("02", "finish");
+              this.pageIndex = pageIndex;
+              this.pageSize = pageSize;
+              this.pageTotal = res.total;
+              this.tableData = res.rows;
+              this.tableData.forEach((it, index) => {
+                it.order = (pageIndex - 1) * (pageSize) + index + 1;
+              })
+          }else{
+              this.setStatus("02", "empty");
+          }
         }
       })
     }
@@ -454,6 +371,14 @@ export default {
 </script>
   
 <style lang='scss' scoped>
+
+.floatEmpty{
+  position: absolute;
+  z-index: 100;
+  background: rgba($color: #000000, $alpha: 0.2);
+  left: 0; top:0; right: 0; bottom: 0;
+}
+
 .bottomTabs {
   position: relative;
   display: inline-flex;
@@ -512,6 +437,7 @@ export default {
 
 ::v-deep .el-table .el-table__cell {
   height: 47px;
+  padding-left: 15px;
   font-size: 14px;
   font-family: PingFang SC, PingFang SC;
   font-weight: 500;
@@ -593,7 +519,8 @@ export default {
 
   }
 
-  .middleDiv {
+  .queryChart {
+    position: relative;
     display: inline-flex;
     width: 100%;
     height: 343px;