修改

dsk-operate-ui/src/views/monitoring/EnterpriseMonitoring.vue

@@ -32,6 +32,7 @@
           </div>
         </div>
         <div class="table-item">
+          <div v-if="tableDataTotal > 0  && !isSkeleton">
             <el-table
               class="fixed-table"
               element-loading-text="Loading"
@@ -66,6 +67,16 @@
               </el-table-column>
             </el-table>
           </div>
+          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+          <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
+            <img class="img" src="@/assets/images/project/empty.png">
+            <div class="p1">抱歉，没找到相关数据</div>
+            <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
+          </div>
+        </div>
+        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
+          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        </div>
       </div>
 
       <el-dialog :visible.sync="jkVisible" custom-class='dialog-claim' title="提示" width="480px" >
@@ -136,12 +147,17 @@
 <script>
   import { companyPage,companyList,companyAdd,companyCancel,queryMonitorCompany } from '@/api/monitoring/monitoring'
   import { getToken } from '@/utils/auth'
+  import skeleton from '../component/skeleton'
   export default {
     name: 'EnterpriseMonitoring',
+    components: {
+      skeleton
+    },
     data() {
       return {
         radio:null,
         date:[],
+        isSkeleton:true,
         radioList:[
           {
             type:null,
@@ -202,6 +218,7 @@
         console.log(this.queryParams)
         companyPage(this.queryParams).then(res => {
           console.log(res)
+          this.isSkeleton = false;
           this.tableData=res.rows
           this.tableDataTotal=res.total
         })
@@ -266,6 +283,18 @@
             break;
         }
       },
+      // 重置页数
+      handleSizeChange(val) {
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.querySubmit()
+      },
+      // 跳转指定页数
+      handleCurrentChange(val) {
+        this.queryParams.pageNum = val
+        this.querySubmit()
+        window.scrollTo(0, 0);
+      },
       // 时间选择改变后的回调
       changePicker(value) {
         if(value && value.length) {
@@ -430,6 +459,27 @@
           color: #0CBC6D;
         }
       }
+      .empty{
+        margin: 0 auto;
+        height: 550px;
+        text-align: center;
+        border-top: 1px solid #EFEFEF;
+        .img{
+          width: 108px;
+          height: 108px;
+          margin-bottom: 24px;
+          margin-top: 150px;
+        }
+        .p1{
+          color: #333333;
+          font-size: 16px;
+        }
+        .p2{
+          color: #999999;
+          font-size: 14px;
+          margin-top: 8px;
+        }
+      }
     }
     ::v-deep .dialogAdd{
       .el-dialog__body{

dsk-operate-ui/src/views/monitoring/MonitoringDynamics.vue

@@ -67,6 +67,7 @@
       <div class="content">
         <div class="total">共 {{tableDataTotal}} 条</div>
         <div class="table-item">
+          <div v-if="tableDataTotal > 0  && !isSkeleton">
             <el-table
               class="fixed-table"
               :data="tableData"
@@ -104,6 +105,16 @@
               </el-table-column>
             </el-table>
           </div>
+          <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
+          <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
+            <img class="img" src="@/assets/images/project/empty.png">
+            <div class="p1">抱歉，没找到相关数据</div>
+            <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
+          </div>
+        </div>
+        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
+          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        </div>
       </div>
       <el-dialog :visible.sync="dialogVisible" custom-class='dialog-claim' :title="title" width="720px" >
         <div class="dialog-content">
@@ -149,14 +160,16 @@
   import {changeTime} from "@/assets/js/common.js"
   import { dynamicPage,companyDetail,rulesSelect } from '@/api/monitoring/monitoring'
   import InfoTable from '../detail/party-a/component/infoTable';
+  import skeleton from '../component/skeleton'
   export default {
     name: 'MonitoringDynamics',
     components: {
-      InfoTable
+      InfoTable,skeleton
     },
     data() {
       return {
         changeTime,
+        isSkeleton:true,
         radio:null,
         date:'',
         radioList:[
@@ -337,6 +350,7 @@
           this.queryParams.condition.fxjbType=this.riskLevel.join()
         }
         dynamicPage(this.queryParams).then(res => {
+          this.isSkeleton = false;
           this.tableData=res.rows;
           this.tableDataTotal=res.total;
           this.tableData.forEach(el => {
@@ -433,6 +447,18 @@
             break;
         }
       },
+      // 重置页数
+      handleSizeChange(val) {
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.querySubmit()
+      },
+      // 跳转指定页数
+      handleCurrentChange(val) {
+        this.queryParams.pageNum = val
+        this.querySubmit()
+        window.scrollTo(0, 0);
+      },
       // 时间选择改变后的回调
       changePicker(value) {
         if(value && value.length) {
@@ -703,6 +729,27 @@
           margin-right: 4px;
         }
       }
+      .empty{
+        margin: 0 auto;
+        height: 550px;
+        text-align: center;
+        border-top: 1px solid #EFEFEF;
+        .img{
+          width: 108px;
+          height: 108px;
+          margin-bottom: 24px;
+          margin-top: 150px;
+        }
+        .p1{
+          color: #333333;
+          font-size: 16px;
+        }
+        .p2{
+          color: #999999;
+          font-size: 14px;
+          margin-top: 8px;
+        }
+      }
     }
     ::v-deep .dialog-claim{
       .el-dialog__header{