table增加loading

src/App.vue

@@ -188,7 +188,7 @@ export default {
   color: #A1A8B3;
 }
 .el-table__empty-text {
-  color: $modularHoverBackGround !important;
+  color: #fff !important;
   font-size: 16px;
   margin-top: 10px;
 }

src/components2/equipmentAlarm/seTable.vue

@@ -1,13 +1,16 @@
 <template>
-  <el-table ref="initList" :data="initList"  height="120px" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
+  <el-table ref="initList" :data="initList"  height="120px" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-loading="loading">
+      <template slot="empty">
+          <span>{{text}}</span>
+      </template>
       <el-table-column label="告警时间"  prop="alarmTime"  show-overflow-tooltip  min-width="35%" />
-      <el-table-column label="告警内容"  prop="property"  show-overflow-tooltip min-width="25%" />
+      <el-table-column label="告警内容"  prop="property"  show-overflow-tooltip min-width="40%" />
       <el-table-column label="告警类型"  prop="deviceTypeName"  show-overflow-tooltip min-width="25%" />
-      <el-table-column label="状态"  prop="alarmStatus"  show-overflow-tooltip min-width="15%" >
+      <!-- <el-table-column label="状态"  prop="alarmStatus"  show-overflow-tooltip min-width="15%" >
         <template slot-scope="scope">
           <span :class="scope.row.alarmStatus == '1' ? 'handle2' : 'untreated2'">{{scope.row.alarmStatus == "1"  ? "已处理" : "未处理"}}</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
     </el-table>
 </template>
 <script>
@@ -25,6 +28,8 @@ export default {
         // {alarmTime:'2022-03-05 03:12:21',property:'故障',deviceType:1,deviceTypeName:'1层监控室用户信息传输装置',deviceId:'74869'}
       ],
       table_interval:null,
+      text:"",
+      loading:true,
     };
   },
   created(){
@@ -45,10 +50,15 @@ export default {
           endTime:YearMonthDate(),
           current:1,
           size:500,
-          type:1
+          type:2
         }
       }).then(res =>{
           this.initList = res.data.data.records
+          this.loading = false
+          this.text = "暂无数据"
+      }).catch(err =>{
+        this.loading = false
+        this.text = "数据加载失败..."
       })
       let that = this
       let num = 0
@@ -60,7 +70,7 @@ export default {
 				};
 				this.ws.onmessage = (res) => { //接收websocket消息
 					let warningInfo = JSON.parse(res.data)
-          if(warningInfo.property != "火警" && warningInfo.property != "故障"){
+          if(warningInfo.property == "火警" && warningInfo.property == "故障"){
             that.initList.push(warningInfo)
           }
           if(num == '0'){

src/components2/equipmentStatus/index.vue

@@ -1,13 +1,34 @@
 <template>
-  <el-col :span="24" class="equipmentStatus modular">
-    <el-col class="title title2">设备状态</el-col>
-    <seTable @videoClick="clickData"/>
+  <el-col :span="24" class="equipmentStatus modular" style="padding:10px 20px 0;">
+    <div class="title title2" style="margin-left:0">设备状态</div>
+    <!-- <div class="selectOpition">
+        <el-select  v-model="select" placeholder="请选择设备类型" class="select1">
+            <el-option
+            v-for="item in selectList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            >
+            </el-option>
+        </el-select>
+    </div> -->
+    <seTable @videoClick="clickData" />
+    <!-- :select="select" -->
 </el-col>
 </template>
 <script>
 import seTable from "@/components2/equipmentStatus/seTable.vue";
 export default {
   name:"equipmentStatus",
+  data() {
+    return {
+      selectList:[
+        {label:"摄像头",value:1},
+        {label:"消防设备",value:2},
+      ],
+      select:1,
+    }
+  },
   components: {
 		seTable,
   },
@@ -20,3 +41,68 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+@import '@/assets/styles/common.scss';
+  .title{
+      width:80px;
+      display: inline-block;
+  }
+  .selectOpition{
+      width:auto;
+      float:right
+  }
+
+
+::v-deep .el-input__inner {
+  background-color: transparent !important;
+  color: $white;
+  height: 36px;
+}
+/**修改边框和字体颜色 */
+::v-deep .el-select {
+  position: relative;
+  width: 200px;
+  display: inline-block;
+  margin-left:20px;
+  .el-input {
+    input {
+      height: 40px;
+      border-color: $white;
+      color: $white;
+      font-size: 14px;
+    }
+  }
+
+}
+/**修改下拉图标颜色 */
+::v-deep .el-input__suffix {
+  .el-input__suffix-inner {
+    .el-icon-arrow-up:before {
+      color: $white;
+      padding-left: 0.11rem;
+    }
+  }
+}
+
+.el-select-dropdown__item{
+    padding:0 12px !important;
+    font-size: 12px !important;
+    height:20px !important;
+    line-height: 20px !important;
+    color:$white;
+}
+.el-select-dropdown__item.hover{
+    background-color: $modularHoverBackGround;
+}
+
+
+</style>
+<style >
+.el-scrollbar{
+    background-color: rgba(35,40,49,1);
+}
+.el-scrollbar{
+    border:1px solid rgba(35,40,49,1) !important;
+
+}
+</style>

src/components2/equipmentStatus/seTable.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-table ref="initList" :data="videoSelect"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
+  <div>
+    <el-table ref="initList" :data="videoSelect"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-if="select1" v-loading="loading">
+      <template slot="empty">
+          <span>{{text}}</span>
+      </template>
       <el-table-column label="设备名称"  prop="name"  show-overflow-tooltip min-width="35%" />
       <el-table-column label="安装位置"  prop="name"  show-overflow-tooltip min-width="25%" />
       <el-table-column label="设备类型"  prop="name"  show-overflow-tooltip min-width="25%" >
@@ -13,39 +17,79 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- <el-table ref="initList" :data="videoSelect"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-if="select2">
+      <el-table-column label="设备名称"  prop="name"  show-overflow-tooltip min-width="35%" />
+      <el-table-column label="安装位置"  prop="name"  show-overflow-tooltip min-width="25%" />
+      <el-table-column label="设备类型"  prop="name"  show-overflow-tooltip min-width="25%" >
+        <template  slot-scope="scope">
+          {{scope.row.unitType == "1" ? "摄像头" : scope.row.unitType == "2" ? "打印机" : scope.row.unitType == "3" ? "考勤机" : scope.row.unitType == "4" ? "人脸识别终端" : ""}}
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" prop="status" min-width="15%">
+        <template  slot-scope="scope">
+            <span :class="scope.row.status == '0' ? 'handle2' : 'untreated2'">{{scope.row.status == "0" ? "在线" : "离线" }}</span>
+        </template>
+      </el-table-column>
+    </el-table> -->
+  </div>
 </template>
 <script>
 import axios from 'axios'
 export default {
+  // props: ["select"],
   data() {
     return {
       table_interval:null,
-      videoSelect:[]
+      videoSelect:[],
+      value:undefined,
+      select1:true,
+      select2:false,
+      text:"",
+      loading:true,
     };
   },
   created(){
-    this.initData();
+    this.initDataVideo()
+    // this.selectChange()
   },
+  // watch: {
+  //   select: {
+  //       handler (n, o) {
+  //         this.selectChange()
+  //       },
+  //       deep: true // 深度监听父组件传过来对象变化
+  //     }
+  // },
   mounted() {},
   methods: {
+    selectChange(){
+      if(this.select == "1"){
+        this.initDataVideo()
+      }
+      if(this.select == "2"){
+        this.initDataSBSS()
+      }
+    },
     //初始化数据
-   
-    initData() {
-      let arr1 = 
+    initDataVideo() {
+      this.select1 = false
+      this.select1 = true
+      this.videoSelect = []
+      let arr1 =
         {
         "unitType": "2",
         "cameraFunctions": 0,
         "name": "8楼公共打印机",
         "status": 0,
         }
-      let arr2 = 
+      let arr2 =
         {
         "unitType": "3",
         "cameraFunctions": 0,
         "name": "考勤机",
         "status": 0,
         }
-      let arr3 = 
+      let arr3 =
         {
         "unitType": "4",
         "cameraFunctions": 0,
@@ -54,7 +98,7 @@ export default {
         }
       axios({
           method: 'post',
-          url: 'http://10.21.39.1:8082/dhController/getLocalChannel?pageNo=1&pageSize=10&unitType=1&name=1F',
+          url: 'http://10.21.39.1:8082/dhController/getLocalChannel?pageNo=1&pageSize=500&unitType=1',
           timeout: 3000,
       }).then(res =>{
           if(res.data.data.pageList){
@@ -68,8 +112,18 @@ export default {
               this.videoSelect.push(arr2)
               this.videoSelect.push(arr3)
           }
+          this.loading = false
+          this.text = "暂无数据"
+      }).catch(err =>{
+        this.loading = false
+        this.text = "数据加载失败..."
       })
     },
+    initDataSBSS(){
+      this.select2 = true
+      this.select1 = false
+      this.videoSelect = []
+    },
     //数据滚动
     dataScrolling:function(){
         let top=this.$refs.initList.bodyWrapper;
@@ -91,7 +145,9 @@ export default {
     },
     //点击行
     clickData(row){
-      this.$emit("videoClick", row);
+      if(this.select1 == "1"){
+        this.$emit("videoClick", row);
+      }
     },
     // cellStyle (row, column, rowIndex, columnIndex) {
     // //列的label的名称
@@ -120,4 +176,4 @@ export default {
     background: $modularBackGround;//滚动条背景色
   }
 }
-</style>
+</style>

src/components2/fireHazard/seTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-table ref="initList" :data="initList"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
+  <el-table ref="initList" :data="initList"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-loading="loading">
+      <template slot="empty">
+          <span>{{text}}</span>
+      </template>
       <el-table-column label="时间" align="left" prop="alarmTime"  show-overflow-tooltip min-width="35%"   />
       <el-table-column label="内容" align="left" prop="property"  show-overflow-tooltip min-width="25%"/>
       <el-table-column label="名称" align="left" prop="deviceName"  show-overflow-tooltip min-width="25%"/>
@@ -14,6 +17,8 @@ export default {
     return {
       initList:[],
       table_interval:null,
+      text:"",
+      loading:true,
     };
   },
   created(){
@@ -30,6 +35,7 @@ export default {
             data:{
               current: 1,
               size: 100,
+              type:1,
             },
             timeout: 3000,
         }).then(res =>{
@@ -37,7 +43,11 @@ export default {
                 let data = res.data.data.records
                 this.initList = data
             }
+            this.loading = false
+            this.text = "暂无数据"
         }).catch(err =>{
+          this.loading = false
+          this.text = "数据加载失败..."
         })
     },
     //数据滚动

src/components2/intrusionAlarm/seTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-table ref="initList" :data="initList"  height="120" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
+  <el-table ref="initList" :data="initList"  height="120" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-loading="loading">
+      <template slot="empty">
+          <span>{{text}}</span>
+      </template>
       <el-table-column label="告警时间"  prop="creatTime"  show-overflow-tooltip min-width="35%" />
       <el-table-column label="告警内容"  prop="message"  show-overflow-tooltip min-width="25%" />
       <el-table-column label="告警类型"  prop="eventFlag"  show-overflow-tooltip min-width="25%">
@@ -21,6 +24,8 @@ export default {
     return {
       initList:[],
       table_interval:null,
+      text:"",
+      loading:true,
     };
   },
   created(){
@@ -297,10 +302,12 @@ export default {
                 let data = res.data.data.pageList
                 this.initList = data
             }
+            this.loading = false
+            this.text = "暂无数据"
         }).catch(err =>{
+          this.loading = false
+          this.text = "数据加载失败..."
         })
-
-
     },
     //数据滚动
     dataScrolling:function(){
@@ -352,4 +359,4 @@ export default {
     background: $modularBackGround;//滚动条背景色
   }
 }
-</style>
+</style>

src/components2/keepWatch/seTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-table ref="initList" :data="initList"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
+  <el-table ref="initList" :data="initList"  height="200" @row-click="clickData" highlight-current-row @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave" v-loading="loading">
+      <template slot="empty">
+          <span>{{text}}</span>
+      </template>
       <el-table-column label="时间"  prop="eStartTime"  show-overflow-tooltip min-width="35%"/>
       <el-table-column label="内容"  prop="eLName"  show-overflow-tooltip min-width="25%"/>
       <el-table-column label="名称"  prop="ePlaceName"  show-overflow-tooltip min-width="25%"/>
@@ -13,6 +16,8 @@ export default {
     return {
       initList:[],
       table_interval:null,
+      text:"",
+      loading:true,
     };
   },
   created(){
@@ -306,8 +311,12 @@ export default {
                   this.initList[i].ePlaceName = arr[i]
                 }
             }
-        }).catch(err =>{
-        })
+            this.loading = false
+            this.text = "暂无数据"
+      }).catch(err =>{
+        this.loading = false
+        this.text = "数据加载失败..."
+      })
     },
     //数据滚动
     dataScrolling:function(){

src/components2/populationStatistics/index.vue

@@ -41,7 +41,7 @@ export default {
     this.timing()
   },
   mounted() {
-    
+
   },
   methods: {
     async init(){
@@ -65,7 +65,7 @@ export default {
               this.status = true
               this.loading = false
             },20)
-            
+
           }
       }).catch(err =>{
       })

src/components2/realTimeVideo/index.vue

@@ -77,12 +77,7 @@ export default {
       init(){
         axios({
             method: 'post',
-            url: 'http://10.21.39.1:8082/dhController/getLocalChannel',
-            data:{
-                pageNo: 1,
-                pageSize: 300,
-                unitType: 1,
-            },
+            url: 'http://10.21.39.1:8082/dhController/getLocalChannel?pageNo=1&pageSize=500&unitType=1',
             timeout: 3000,
         }).then(res =>{
             if(res.data.data.pageList){

src/views/index.vue

@@ -18,7 +18,8 @@
           </el-col>
         </el-col>
         <el-col  id="middleWrap" >
-          <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe>
+          <!-- <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
+          <!-- <iframe  style="width:100%;height:100%;border:none;" id="iframe" src='http://10.21.39.6:9000/'></iframe> -->
         </el-col>
         <el-col  class="rightWrap">
           <weather alt="天气"/>