添加定时刷新

src/common/img-preview.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="preview" @click="onClick" @keydown="onKeydown">
+      <div class="preview-img" >
+        <img :src="src" alt />
+      </div>
+    </div>
+  </template>
+  <script>
+  export default {
+    data() {
+      return {};
+    },
+    props: {
+      src: {
+        type: String,
+        default: "",
+        required: true
+      },
+      onClick: { type: Function, default: () => {}, required: true },
+      onKeydown: { type: Function, default: () => {}, required: true }
+    }
+  };
+  </script>
+  <style lang="scss" scoped>
+  .preview {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    overflow: scroll;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+  .preview-img {
+    padding: 20px;
+    display: inline-block;
+    margin: auto;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+  </style>

src/components/centerTop.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="cointan">
+    <div v-if="listLength>0">
     <!-- 领导 -->
     <div v-if="lingdao">
       <div class="titleimg"></div>
@@ -22,15 +23,24 @@
       <div class="red_bg" v-for="(item,index) in moList" :key="index">
         <div class="rentype">人员类型：<span style="color:rgba(67, 207, 124, 1)">{{item.personnelType}}</span></div>
         <div class="renzhuang">禁止通行</div>
-        <img class="renImg" :src="item.captureImg" :preview-src-list="[item.captureImg,'']">
+        <img class="renImg" :src="item.captureImg"  @click="previewImage(item.captureImg)">
         <div class="renname">{{item.name}}</div>
         <div class="rentime" v-if="item.cmpTime!=''">{{item.cmpTime.slice(0,10)}}<br/>{{item.cmpTime.slice(11,19)}}</div>
       </div>
     </div>
   </div>
+  <div class="queshen" v-else>
+    <img src="../assets//index/queshen.png" class="queshen2">
+    <div class="queshen3">暂无数据</div>
+  </div>
+    <div v-if="preview">
+      <img-preview :src="src" :onClick="closeImgPreview" :onKeydown="keydownCloseImgPreview"></img-preview>
+    </div>
+  </div>
 </template>
 
 <script>
+import imgPreview from "../common/img-preview.vue";
 export default {
   name: 'centerTop',
   data() {
@@ -41,8 +51,15 @@ export default {
       moList:[],//陌生人
       build:'',//楼栋
       token:'',//请求头token
+      listLength:0,
+
+      preview: false,
+      src:""
     }
   },
+  components: {
+    "img-preview": imgPreview
+  },
   props: {
     msg: String
   },
@@ -61,9 +78,29 @@ export default {
 
     }else{
       this.getMosheng()
+      this.t4 = setInterval(function() {
+        this.getMosheng()
+      }, 43200000);
     }
   },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t4)
+  },
   methods:{
+    // 点击图片放大
+    previewImage(src) {
+      this.preview = true;
+      this.src = src;
+    },
+    keydownCloseImgPreview(e) {
+      if (e && e.keyCode == 27) {
+        this.preview = false;
+      }
+    },
+    closeImgPreview() {
+      this.preview = false;
+    },
     //陌生人
     getMosheng(){
       this.moList=[]
@@ -75,11 +112,13 @@ export default {
       }
       ).then(res => {
         if (res.data.success) {
+          this.listLength=res.data.data.records.length
           var shuzu=res.data.data.records
           // 横坐标时间
           shuzu.forEach(data => {
             this.moList.push(data)
           })
+          console.log(this.moList)
         }
       })
     },
@@ -205,4 +244,20 @@ export default {
   background-image: url('../assets/centerTop/blueBg.png');
   background-size: 100%;
 }
+// 缺省页
+.queshen{
+  margin: 58px 0 0 11px;
+  // width: 480px;
+  height: 480px;
+}
+.queshen2{
+  margin: 58px 0 0 11px;
+  width: 310px;
+  height: 310px;
+}
+.queshen3{
+  margin: -68px 0 0 11px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 22px;
+}
 </style>

src/components/centerbuttom.vue

@@ -11,11 +11,11 @@
     <div class="sushe_san"></div>
     <div class="sushe">{{date}}</div>
     <!-- 滚动 -->
-    <el-carousel trigger="click" height="240px" style="height: 240px;width: 830px;margin: 67px 0 0 19px;">
+    <el-carousel trigger="click" height="240px" style="height: 240px;width: 830px;margin: 67px 0 0 19px;" v-if="listLength>0">
       <el-carousel-item v-for="(list,index) in studentList" :key="index">
         <div class="gun"> 
           <div class="mokuai" v-for="(item,index2) in list" :key="index2">
-            <img class="moimg" :src="item.pictureUrl">
+            <img class="moimg" :src="item.pictureUrl"  @click="previewImage(item.pictureUrl)">
             <div class="moyuan">入</div>
             <div class="moname">{{item.name}}</div>
             <div class="motime">15:25:26</div>
@@ -25,36 +25,78 @@
         </div>
       </el-carousel-item>
     </el-carousel>
+    <div class="queshen" v-else>
+    <img src="../assets//index/queshen.png" class="queshen2">
+    <div class="queshen3">暂无数据</div>
+  </div>
+    <div v-if="preview">
+      <img-preview :src="src" :onClick="closeImgPreview" :onKeydown="keydownCloseImgPreview"></img-preview>
+    </div>
   </div>
 </template>
 
 <script>
+import imgPreview from "../common/img-preview.vue";
 export default {
   name: 'centerButtom',
   data() {
     return {
       studentList:[],//进出人员
-      date:new Date().toISOString().slice(0, 10),//当前日期
+      date:'',//当前日期
+      yestDay:'',//昨天
       build:'',//楼栋
       token:'',//请求头token
+      listLength:0,
+
+      preview: false,
+      src:""
     }
   },
+  components: {
+    "img-preview": imgPreview
+  },
   props: {
     msg: String
   },
   created(){
     
   },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t5)
+  },
   mounted(){
     this.token=sessionStorage.getItem('token')
     this.build=sessionStorage.getItem('build')
     this.getJinchu()
+    this.date=new Date().toISOString().slice(0, 10)
+    this.t5 = setInterval(function() {
+      this.date=new Date().toISOString().slice(0, 10)
+      this.getJinchu()
+    }, 43200000);
   },
   methods:{
+    // 点击图片放大
+    previewImage(src) {
+      this.preview = true;
+      this.src = src;
+    },
+    keydownCloseImgPreview(e) {
+      if (e && e.keyCode == 27) {
+        this.preview = false;
+      }
+    },
+    closeImgPreview() {
+      this.preview = false;
+    },
     //进出人员
     getJinchu(){
+      var aData=new Date()
+      this.yestDay=aData.getFullYear() + "-" + 
+        (aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1) + "-" + 
+        (aData.getDate() <= 9 ? "0" + (aData.getDate()-1) : (aData.getDate()-1))
       this.studentList=[]
-      this.$axios.get('/auto/face-recognition/list?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1]+'学生公寓进门&date=2023-06-15',
+      this.$axios.get('/auto/face-recognition/list?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1]+'学生公寓进门&date='+this.yestDay,
       // +this.date,
       {
         headers: {
@@ -63,6 +105,7 @@ export default {
       }
       ).then(res => {
         if (res.data.success) {
+          this.listLength=res.data.data.length
           // 宿舍进出人员数据
           res.data.data.forEach(data => {
             this.studentList.push(data)
@@ -122,7 +165,8 @@ export default {
   margin: 44px 0 0 685px;
   font-size: 14px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 1);
+  // color: rgba(255, 255, 255, 1);
+  color: rgba(0, 218, 216, 1);
 }
 // 展示时间
 .sushe_san{
@@ -200,4 +244,42 @@ export default {
   width: 145px;
   text-align: center;
 }
+
+//走马灯指示器样式
+::v-deep .el-carousel__indicators--horizontal {
+        position: absolute;
+        bottom: 0px;
+        text-align: right;
+        .el-carousel__indicator--horizontal button {
+            width: 6px;   // 设置被选中前的样式
+            height: 6px;
+            background: #ffffff;
+            border-radius: 50%;
+            opacity: 0.5;
+        }
+ 
+        .el-carousel__indicator--horizontal.is-active button {
+            width: 0px;      //设置被选中后的样式
+            height: 0px;
+            background: #ffffff;
+            opacity: 1;
+            border-radius: 10px;
+        }
+    }
+
+    // 缺省页
+    .queshen{
+  // margin: 58px 0 0 11px;
+  // height: 480px;
+}
+.queshen2{
+  margin: 88px 0 0 11px;
+  width: 210px;
+  height: 210px;
+}
+.queshen3{
+  margin: -38px 0 0 11px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 22px;
+}
 </style>

src/components/leftButtom.vue

@@ -30,6 +30,13 @@ export default {
     this.token=sessionStorage.getItem('token')
     this.build=sessionStorage.getItem('build')
     this.getchugui()
+    this.t3 = setInterval(function() {
+      this.getchugui()
+    }, 43200000);
+  },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t3)
   },
   methods:{
     //近30天出归人员统计

src/components/leftCenter.vue

@@ -31,6 +31,13 @@ export default {
     this.token=sessionStorage.getItem('token')
     this.build=sessionStorage.getItem('build')
     this.getnenghao()
+    this.t10 = setInterval(function() {
+      this.getnenghao()
+    }, 1296000000);
+  },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t10)
   },
   methods:{
     //近半年能耗

src/components/leftTop.vue

@@ -45,6 +45,10 @@ export default {
     this.build=sessionStorage.getItem('build')
     this.getNowDate()
   },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t9)
+  },
   methods:{
     //上个月能耗
     getnenghao(){
@@ -68,6 +72,9 @@ export default {
               this.waterMoney=res.data.data[i].coldWaterTotalMoney
             }
           }
+        }else{
+          this.$message.error('捕捉异常：' + res.data.msg)
+          this.$router.replace('/'); //跳转到首页
         }
       })
     },
@@ -88,6 +95,9 @@ export default {
         _this.month = aData.getFullYear() + "-" + month;
         _this.week = week
         this.getnenghao()
+        this.t9 = setInterval(function() {
+          this.getnenghao()
+        }, 1296000000);
       // }, 86400000);
     },
   },

src/components/rightCenter.vue

@@ -49,6 +49,13 @@ export default {
     this.token=sessionStorage.getItem('token')
     this.build=sessionStorage.getItem('build')
     this.getWeigui()
+    this.t7 = setInterval(function() {
+      this.getWeigui()
+    }, 43200000);
+  },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t7)
   },
   methods:{
     tableRowClassName({row, rowIndex}) {

src/components/rightbuttom.vue

@@ -47,6 +47,13 @@ export default {
     this.token=sessionStorage.getItem('token')
     this.build=sessionStorage.getItem('build')
     this.getAllsushe()
+    this.t8 = setInterval(function() {
+      this.getAllsushe()
+    }, 43200000);
+  },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t8)
   },
   methods:{
     //宿舍楼未归人员统计

src/components/righttop.vue

@@ -73,8 +73,14 @@ export default {
   mounted(){
     this.token=sessionStorage.getItem('token')
     this.build=sessionStorage.getItem('build')
-    console.log(this.build.split(",")[0])
     this.getGuiqin()
+    this.t6 = setInterval(function() {
+      this.getGuiqin()
+    }, 43200000);
+  },
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t6)
   },
   methods:{
     //宿舍归寝率

src/views/index.vue

@@ -79,7 +79,6 @@ export default {
       time:'',//具体时间
       build:'',//楼栋
       token:'',//请求头token
-      timer:null,//定时器
     }
   },
   mounted(){
@@ -89,12 +88,14 @@ export default {
     this.build=sessionStorage.getItem('build')
     this.getNowDate()
     this.getSushe()
+    this.t2 = setInterval(function() {
+      this.getSushe()
+    }, 3600000);
   },
   beforeDestroy() {
     // 页面关闭清除定时器
     clearInterval(this.t1)
-    // 清除定时器标识
-    this.t1 = null
+    clearInterval(this.t2)
   },
   methods:{