Merge branch 'master' of http://192.168.1.218:3000/lianghanqiang/cyzh-park into master

src/components/dialog/comps/visitor-detail.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="contain-main" style="color: #ebebeb;">
+     <div class="content" >
+       <div class="face" style="padding-bottom: 1.25rem;" v-if="detail.faceUrl">
+         <el-image style="width: 100px;height: 100px;" :src="detail.faceUrl" :preview-src-list="[detail.faceUrl]" z-index="999999"></el-image>
+       </div>
+        <label>人员姓名：{{detail.userName}}</label>
+        <label v-if="detail.temperature">体温检测：{{detail.temperature}} ℃</label>
+        <label v-if="detail.openType==1">开门方式：刷脸开门</label>
+        <label v-if="detail.openType==2">开门方式：小程序一键开门</label>
+        <label v-if="detail.openTime">开门时间：{{detail.openTime}}</label>
+        <label v-else>抓怕时间：{{detail.createTime}}</label>
+        <label v-if="detail.score">抓拍分数：{{detail.score}}</label>
+        <label>所在园区：{{detail.agencyName}}</label>
+        <label>所在区域：{{detail.residentialName}}</label>
+        <label>所在企业：{{detail.enterpriseName}}</label>
+        <label>设备名称：{{detail.deviceName}}</label>
+        <label>设备地址：{{detail.deviceAddress}}</label>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      detail: Object
+    },
+    data() {
+      return {
+
+      };
+    },
+    created() {
+      console.log(this.detail);
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .contain-main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1.25rem;
+    margin-top: 1.25rem;
+    flex-direction: column;
+    color: #ebebeb
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    label {
+      margin-bottom: 0.9375rem;
+    }
+  }
+</style>

src/components/mp-dialog.vue → src/components/dialog/my-dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mask center " v-if="maskShow">
-    <div class="dialog animate__animated animate__faster" :class="dialogShow?'animate__zoomIn':'animate__zoomOut'">
+    <div class="dialog animate__animated animate__faster" :style="detail.style" :class="dialogShow?'animate__zoomIn':'animate__zoomOut'">
       <dv-border-box-3 color="['#2567d8','#2567d8']">
         <dv-border-box-8 backgroundColor="rgba(6, 57, 111, 0.5)">
           <img class="close animate__animated" src="/img/icon/close.png" :class="closeEnter?'animate__heartBeat':''"
@@ -15,9 +15,7 @@
               <dv-decoration-5 style="width:50%;height:40px;margin-top: -10px;" />
             </div>
             <div class="info">
-              <div style="color: #FFFFFF;padding: 1.25rem;">
-                {{detail.content}}
-              </div>
+              <visitor-detail v-if="detail.type=='visitor'" :detail="detail.content"></visitor-detail>
             </div>
             <div class="bottom">
               <div>
@@ -33,8 +31,12 @@
 </template>
 
 <script>
+  import visitorDetail from "./comps/visitor-detail.vue"
   export default {
     name: "test",
+    components:{
+      visitorDetail
+    },
     data() {
       return {
         detail:{},
@@ -86,7 +88,7 @@
       width: 100%;
       font-weight: 800;
       color: #00dcfd;
-      font-size: 22px;
+      font-size: 21px;
       padding-top: 15px;
     }
 
@@ -109,7 +111,7 @@
     right: 0;
     bottom: 0;
     top: 0;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: rgba(0, 0, 0, .6);
     width: 100%;
     height: 100%;
     z-index: 99999;

src/components/scene/mainScene.vue

@@ -38,7 +38,6 @@
 
 <script>
   import {reqFullScreen,fullscreenEnable } from "../../util/util.js";
-  import mpDialog from "../mp-dialog.vue"
   import enterpriseType from "./comps/enterprise-type.vue"
   import matingInfo from "./comps/mating-info.vue"
   import incident from "./comps/incident.vue"
@@ -49,7 +48,6 @@
   export default {
     name: "mainScene",
     components: {
-      mpDialog,
       InfoBox,
       enterpriseType,
       matingInfo,

src/page/index/index.vue

@@ -35,7 +35,7 @@
     <!-- <div class="avue-shade" @click="showCollapse"></div> -->
 
     <!-- 园区事件 -->
-    <mp-dialog ref="incident"></mp-dialog>
+    <my-dialog ref="myDialog"></my-dialog>
     <!-- 视频播放 -->
     <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
@@ -51,7 +51,7 @@
   import sidebar from "./sidebar/";
   import admin from "@/util/admin";
   import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
-  import mpDialog from "@/components/mp-dialog.vue"
+  import myDialog from "@/components/dialog/my-dialog.vue"
   import {
     validatenull
   } from "@/util/validate";
@@ -68,7 +68,7 @@
       tags,
       search,
       sidebar,
-      mpDialog,
+      myDialog,
       devicePlayer
     },
     name: "index",
@@ -79,6 +79,8 @@
     },
     data() {
       return {
+        slot:'',
+
         incidentdetail: {},
 
         menuShow: false,

src/util/dateTime.js

@@ -1,6 +1,6 @@
 /**
  * 日期时间工具类，后期慢慢收集累积
- * createDate 2021-11-02
+ * create hmp 2021-11-02
  */
 
 let dateTime = {}
@@ -24,8 +24,8 @@ dateTime.format=(date= new Date(),fmt="YYYY-mm-dd HH:MM:SS")=> {
         ret = new RegExp("(" + k + ")").exec(fmt);
         if (ret) {
             fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
-        };
-    };
+        }
+    }
     return fmt;
 }
 

src/views/dashboard/onefaceaccess/comps/resident.vue

@@ -1,28 +1,36 @@
 <template>
-  <div class="page" style="box-sizing: border-box;">
+  <div class="page" style="box-sizing: border-box;position: relative;">
     <more title="常驻人员"></more>
+    <div style="position: absolute;right: 40px;bottom: 10px;z-index: 999;" v-show="!loading">
+      <span style="color: #3b8ff4;">{{page.current}}</span>
+      /
+      <span style="color: #333333;">{{page.pages}}</span>
+    </div>
 
-    <div class="card-box">
-      <div class="changeIcon" style="left: 0px;z-index: 9999;">
+    <div class="card-box" style="position: relative;">
+      <div class="changeIcon" style="left: 0px;z-index: 9999;" v-show="!loading">
         <el-button type="primary" plain size="medium" @click="change('Left')" icon="el-icon-arrow-left" circle>
         </el-button>
       </div>
 
-      <div class="changeIcon" style="right: 0px;z-index: 9999;">
+      <div class="changeIcon" style="right: 0px;z-index: 9999;" v-show="!loading">
         <el-button type="primary" plain size="medium" @click="change('Right')" icon="el-icon-arrow-right" circle>
         </el-button>
       </div>
 
       <div class="card-list animate__animated animate__faster animate__fadeInLeft"
-        style="display: flex;justify-content: center;">
-        <div class="card" v-for="(item,index) in list" :key="index">
+        style="display: flex;justify-content: center;min-height: 304px;" v-loading="loading">
+        <div @click="showDetail(item)" class="card" v-for="(item,index) in list" :key="index">
           <div class="img">
-            <el-image style="width: 100%;height: 100%" :src="item.faceUrl" :preview-src-list="[item.faceUrl]"></el-image>
+            <el-image style="width: 100%;height: 100%;" :style="item.faceUrl?'filter: blur(3px);':''"
+              :src="item.faceUrl">
+              <img style="width: 100%;height: 100%;" slot="error" src="/img/icon/open.png">
+            </el-image>
           </div>
           <div class="data">
             <div class="left">
               <div class="name">{{item.userName}}</div>
-              <div class="temperature">
+              <div class="temperature" v-if="item.temperature">
                 <div>{{item.temperature}} ℃</div>
                 <div v-if="item.temperature>37.6" class="center" style="margin-top: 0.125rem;"><i
                     class="el-icon-warning dot"></i></div>
@@ -31,11 +39,11 @@
             <div class="right">
               <div style="display: flex;" v-if="item.isOut === 1">
                 <img src="/img/icon/enter.png" style="width: 16px;height: 16px;margin-right: 0.2rem;" />
-                {{item.openTime}}
+                {{item.openTime | formatDate}}
               </div>
               <div style="display: flex;margin-top: 0.2rem;" v-if="item.isOut === 2">
                 <img src="/img/icon/outer.png" style="width: 16px;height: 16px;margin-right: 0.2rem;" />
-                {{item.openTime}}
+                {{item.openTime | formatDate}}
               </div>
             </div>
           </div>
@@ -47,42 +55,76 @@
 
 <script>
   import more from "@/components/more.vue";
-  import {getList} from "@/api/estate/accessrecord";
+  import {
+    getList
+  } from "@/api/estate/accessrecord";
+  import dateTime from "@/util/dateTime.js"
   export default {
     components: {
       more
     },
+    inject: ['index'],
     data() {
       return {
-        page:{
+        loading: true,
+        page: {
           current: 1,
           size: 5,
-          total: 0
+          total: 0,
+          pages: 0
         },
         list: []
       };
     },
-    created(){
-      this.loadStaffRecord(1);
+    created() {
+      this.loadStaffRecord();
+    },
+    filters: {
+      formatDate(date) {
+        return dateTime.format(new Date(date), 'mm-dd HH:MM:SS')
+      }
     },
     methods: {
-      loadStaffRecord(current){
+      showDetail(item) {
+        let params = {
+          style:'height: 58%;width: 38%;',
+          title: '常驻人员',
+          type: 'visitor',
+          content:item,
+          time: item.createTime
+        }
+        this.index.$refs.myDialog.open(params)
+      },
+      async loadStaffRecord() {
         //userType:2-员工，4-访客
-        getList(current, this.page.size, {"userType": 2}).then(res =>{
-          let data = res.data.data;
-          this.list = data.records;
-          this.page.total = data.total;
-          this.page.current = current;
-        })
+        let params = {
+          "userType": 2
+        }
+        let data = (await getList(this.page.current, this.page.size, params)).data.data
+        this.list = data.records;
+        this.page.total = data.total;
+        this.page.pages = data.pages
+        this.loading = false
       },
       change(item) {
-        console.log(item);
+        if (item == 'Left') {
+          if (this.page.current > 1) {
+            this.page.current = this.page.current - 1
+          } else {
+            this.page.current = this.page.pages
+          }
+        }
+
+        if (item == 'Right') {
+          if ((this.page.current + 1) <= this.page.pages) {
+            this.page.current = this.page.current + 1
+          } else {
+            this.page.current = 1
+          }
+        }
+        this.loadStaffRecord()
         this.$animateCss('.card-list', 'animate__slideIn' + item)
-        this.list = this.loadStaffRecord(this.page.current + 1)
       },
-      randomArray(array) {
-        return array.sort(() => Math.random() - 0.5)
-      }
     }
   };
 </script>

src/views/dashboard/onefaceaccess/comps/strange.vue

@@ -1,27 +1,32 @@
 <template>
-  <div class="page" style="box-sizing: border-box;">
+  <div class="page" style="box-sizing: border-box;position: relative;">
     <more title="陌生人员"></more>
+    <div style="position: absolute;right: 40px;bottom: 10px;" v-show="!loading">
+      <span style="color: #3b8ff4;">{{page.current}}</span>
+      /
+      <span style="color: #333333;">{{page.pages}}</span>
+    </div>
 
     <div class="card-box">
-      <div class="changeIcon" style="left: 0px;z-index: 9999;">
+      <div class="changeIcon" style="left: 0px;z-index: 9999;" v-show="!loading">
         <el-button type="primary" plain size="medium" @click="change('Left')" icon="el-icon-arrow-left" circle>
         </el-button>
       </div>
 
-      <div class="changeIcon" style="right: 0px;z-index: 9999;">
+      <div class="changeIcon" style="right: 0px;z-index: 9999;" v-show="!loading">
         <el-button type="primary" plain size="medium" @click="change('Right')" icon="el-icon-arrow-right" circle>
         </el-button>
       </div>
 
-      <div class="card-list strange animate__animated animate__faster animate__fadeInLeft"
-        style="display: flex;justify-content: center;">
-        <div class="card" v-for="(item,index) in list" :key="index">
+      <div class="card-list-strange strange animate__animated animate__faster animate__fadeInLeft"
+        style="display: flex;justify-content: center;min-height: 304px;" v-loading="loading">
+        <div class="card" @click="showDetail(item)" v-for="(item,index) in list" :key="index">
           <div class="img">
-            <el-image style="width: 100%;height: 100%" :src="item.faceUrl" :preview-src-list="[item.faceUrl]"></el-image>
+            <el-image style="width: 100%;height: 100%;filter: blur(3px)" :src="item.faceUrl"></el-image>
           </div>
           <div class="data">
             <div class="left">
-              <div class="temperature">
+              <div class="temperature" v-if="item.temperature">
                 <div>{{item.temperature}} ℃</div>
                 <div v-if="item.temperature>37.6" class="center" style="margin-top: 0.125rem;"><i
                     class="el-icon-warning dot"></i></div>
@@ -30,11 +35,11 @@
             <div class="right">
               <div style="display: flex;" v-if="item.isOut === 1">
                 <img src="/img/icon/enter.png" style="width: 16px;height: 16px;margin-right: 0.2rem;" />
-                {{item.createTime}}
+                {{item.createTime | formatDate}}
               </div>
               <div style="display: flex;margin-top: 0.2rem;" v-if="item.isOut === 2">
                 <img src="/img/icon/outer.png" style="width: 16px;height: 16px;margin-right: 0.2rem;" />
-                {{item.createTime}}
+                {{item.createTime | formatDate}}
               </div>
             </div>
           </div>
@@ -46,41 +51,74 @@
 
 <script>
   import more from "@/components/more.vue";
-  import {getList} from "@/api/estate/snaprecord";
+  import {
+    getList
+  } from "@/api/estate/snaprecord";
+  import dateTime from "@/util/dateTime.js"
   export default {
     components: {
       more
     },
+    inject:['index'],
     data() {
       return {
-        page:{
+        loading: true,
+        page: {
           current: 1,
           size: 5,
-          total: 0
+          total: 0,
+          pages: 0
         },
         list: []
       };
     },
-    created(){
-      this.loadSnapRecord(1);
+    created() {
+      this.loadSnapRecord();
+    },
+    filters: {
+      formatDate(date) {
+        return dateTime.format(new Date(date), 'mm-dd HH:MM:SS')
+      }
     },
     methods: {
-      loadSnapRecord(current){
-        getList(current, this.page.size, {}).then(res =>{
+      showDetail(item) {
+        let params = {
+          style: 'height: 58%;width: 38%;',
+          title: '陌生人员',
+          type: 'visitor',
+          content: item,
+          time: item.createTime
+        }
+        this.index.$refs.myDialog.open(params)
+      },
+      loadSnapRecord() {
+        getList(this.page.current, this.page.size, {}).then(res => {
           let data = res.data.data;
           this.list = data.records;
           this.page.total = data.total;
-          this.page.current = current;
+          this.page.pages = data.pages
+          this.loading = false
         })
       },
       change(item) {
-        console.log(item);
-        this.$animateCss('.card-list', 'animate__slideIn' + item)
-        this.list = this.loadSnapRecord(this.page.current + 1)
+        if (item == 'Left') {
+          if (this.page.current > 1) {
+            this.page.current = this.page.current - 1
+          } else {
+            this.page.current = this.page.pages
+          }
+        }
+
+        if (item == 'Right') {
+          if ((this.page.current + 1) <= this.page.pages) {
+            this.page.current = this.page.current + 1
+          } else {
+            this.page.current = 1
+          }
+        }
+        this.loadSnapRecord()
+        this.$animateCss('.card-list-strange', 'animate__slideIn' + item)
       },
-      randomArray(array) {
-        return array.sort(() => Math.random() - 0.5)
-      }
     }
   };
 </script>

src/views/dashboard/onefaceaccess/comps/today_visitor.vue

@@ -1,38 +1,51 @@
 <template>
-  <div class="page animate__animated animate__faster animate__fadeInRight" style="padding-bottom: 84px;">
+  <div class="page animate__animated animate__faster animate__fadeInRight" style="min-height: 56.3125rem;">
     <more title="今日访客"></more>
-    <div class="card"  v-for="(item,index) in list" :key="index">
-      <div class="card-left">
-        <div class="center">
-          <img :src="item.faceUrl">
-        </div>
-        <div class="data">
-          <div>{{item.userName}}</div>
-          <div>体温 {{item.temperature}}℃</div>
+
+    <div v-loading="loading">
+      <div v-if="list.size>0">
+        <div class="card" v-for="(item,index) in list" :key="index">
+          <div class="card-left">
+            <div class="center">
+              <img :src="item.faceUrl">
+            </div>
+            <div class="data">
+              <div>{{item.userName}}</div>
+              <div>体温 {{item.temperature}}℃</div>
+            </div>
+          </div>
+          <div class="card-center">
+            {{item.openTime}}
+          </div>
+          <div class="card-right" v-if="false">
+            逗留:{{item.time}}
+          </div>
         </div>
       </div>
-      <div class="card-center">
-        {{item.openTime}}
-      </div>
-      <!--<div class="card-right">
-        逗留:{{item.time}}
-      </div>-->
+
+      <avue-empty v-else style="margin-top: 150px;" image="/img/icon/empty-fk.png"></avue-empty>
+
     </div>
+
   </div>
 </template>
 
 <script>
   import more from "@/components/more.vue";
-  import {getList} from "@/api/estate/accessrecord";
-  import {dateFormat} from "../../../../util/date";
+  import {
+    getList
+  } from "@/api/estate/accessrecord";
+  import {
+    dateFormat
+  } from "@/util/date";
   export default {
     components: {
       more
     },
     data() {
       return {
-        timer:null,
-        page:{
+        loading: true,
+        page: {
           current: 1,
           size: 5,
           total: 0
@@ -40,33 +53,38 @@
         list: []
       };
     },
-    created(){
+    created() {
       this.loadGuestRecord(1);
     },
     methods: {
       loadGuestRecord(current) {
         //userType:2-员工，4-访客
         let queryDate = dateFormat(new Date, "yyyy-MM-dd");
-        getList(current, this.page.size, {"userType": 4, "queryDate": queryDate}).then(res => {
+        getList(current, this.page.size, {
+          "userType": 4,
+          "queryDate": queryDate
+        }).then(res => {
           let data = res.data.data;
           this.list = data.records;
           this.page.total = data.total;
           this.page.current = current;
+          this.loading = false
           this.$forceUpdate();
         })
       },
-    },
-    unmounted() {
-      clearInterval(this.timer)
+      change() {
+        setInterval(() => {
+          let list = this.list;
+          list.push(list[0]);
+          list.splice(0, 1);
+          this.list = list;
+        }, 1500)
+      }
     },
     mounted() {
-      this.timer = setInterval(() => {
-        let list = this.list;
-        list.push(list[0]);
-        list.splice(0, 1);
-        this.list = list;
-      }, 1500)
-    }
+
+    },
+
   };
 </script>
 

src/views/dashboard/panoramapark.vue

@@ -11,12 +11,6 @@
     <!--  工具栏   -->
     <tools-bar :option="toolsOption"></tools-bar>
 
-    <!-- 园区事件 -->
-    <mp-dialog ref="mpDialog" title="园区事件">
-      <div slot="detail" style="color: #FFFFFF;padding: 1.25rem;">
-        {{dialogDetail.detail}}
-      </div>
-    </mp-dialog>
     <!-- 视频播放 -->
     <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
@@ -27,7 +21,6 @@
     mapGetters
   } from "vuex";
   import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
-  import mpDialog from "../../components/mp-dialog.vue"
   import TopBar from "../../components/3DScene/top-bar/top-bar";
   import Scene3D from "../../components/3DScene/3DScene";
   import MainScene from "../../components/scene/mainScene";
@@ -47,7 +40,6 @@
     name: "index",
     components: {
       devicePlayer,
-      mpDialog,
       MainScene,
       Scene3D,
       TopBar,

src/views/wel/index1.vue

@@ -11,12 +11,6 @@
     <!--  工具栏   -->
     <tools-bar :option="toolsOption"></tools-bar>
 
-    <!-- 园区事件 -->
-    <mp-dialog ref="mpDialog" title="园区事件">
-      <div slot="detail" style="color: #FFFFFF;padding: 1.25rem;">
-        {{dialogDetail.detail}}
-      </div>
-    </mp-dialog>
     <!-- 视频播放 -->
     <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
@@ -27,7 +21,6 @@
     mapGetters
   } from "vuex";
   import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
-  import mpDialog from "../../components/mp-dialog.vue"
   import TopBar from "../../components/3DScene/top-bar/top-bar";
   import Scene3D from "../../components/3DScene/3DScene";
   import MainScene from "../../components/scene/mainScene";
@@ -47,7 +40,6 @@
     name: "index",
     components: {
       devicePlayer,
-      mpDialog,
       MainScene,
       Scene3D,
       TopBar,