From 975f728b857fcbc107998b73274df59011e6b19c Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Mon, 1 Aug 2022 18:31:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F(=E6=95=B0=E5=AD=97=E5=B7=A5?=
 =?UTF-8?q?=E5=9C=B0)=EF=BC=9A=E6=8A=BD=E7=A6=BB=E4=BA=BA=E8=84=B8?=
 =?UTF-8?q?=E9=97=B8=E6=9C=BA=E5=BC=B9=E6=A1=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataBoard/digitalSite/center/FaceGate.vue | 173 ++++++++++++++++
 .../dataBoard/digitalSite/index.vue           | 193 +-----------------
 2 files changed, 184 insertions(+), 182 deletions(-)
 create mode 100644 src/views/projectAdmin/dataBoard/digitalSite/center/FaceGate.vue

diff --git a/src/views/projectAdmin/dataBoard/digitalSite/center/FaceGate.vue b/src/views/projectAdmin/dataBoard/digitalSite/center/FaceGate.vue
new file mode 100644
index 00000000..42672534
--- /dev/null
+++ b/src/views/projectAdmin/dataBoard/digitalSite/center/FaceGate.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="faceGate">
+    <div class="faceDevBox pointDialog_s" :style="{ left: data.x, top: data.y }">
+      <div class="title">
+        {{ data.name }}
+        <span class="closeBtn" @click="close">
+          <i class="el-icon-close"></i>
+        </span>
+        <!-- "在线" "离线"-->
+        <span class="devStatus" :class="{ red: !data.ufaceDev || data.ufaceDev.deviceState != 1 }">
+          {{ data.ufaceDev && data.ufaceDev.deviceState == 1 ? $t('message.dataBoard.online') : $t('message.dataBoard.notOnline') }}
+        </span>
+      </div>
+      <div class="blockTitle blockTitle2" style="margin-bottom: 10px">
+        <i></i>
+        <!-- 进出统计 -->
+        {{ $t('message.dataBoard.inAndOutStatistics') }}
+      </div>
+      <div class="timeInner">
+        <p>
+          <!-- 今日进场人次 -->
+          {{ $t('message.dataBoard.todayInPeople') }}
+        </p>
+        <div class="bg1 small">
+          <span class="num">{{ data.totalAttendance.inTotalNum }}</span>
+        </div>
+      </div>
+      <div class="timeInner">
+        <p>
+          <!-- 今日出场人次 -->
+          {{ $t('message.dataBoard.todayOutPeople') }}
+        </p>
+        <div class="bg1 small">
+          <span class="num">{{ data.totalAttendance.outTotalNum }}</span>
+        </div>
+      </div>
+      <div v-if="data.list.length > 0" class="blockTitle blockTitle2" style="margin-bottom: 10px">
+        <i></i>
+        <!-- 进出记录 -->
+        {{ $t('message.dataBoard.inAndOutRecords') }}
+      </div>
+      <div class="inOutListBox" :style="{ height: data.list.length > 0 ? '170px' : '' }">
+        <vue-scroll>
+          <ul>
+            <li v-for="(item, index) in data.list" :key="index">
+              <img :src="$store.state.FILEURL + item.imageUrl" width="20" height="30" />
+              <span class="workerName">{{ item.workerName }}</span>
+              <span class="time">{{ item.createTime }}</span>
+              <span class="type" :class="{ type2: item.passType == 1 }">
+                {{ item.passType == 1 ? $t('message.dataBoard.in') : $t('message.dataBoard.out') }}
+              </span>
+            </li>
+          </ul>
+        </vue-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    close: {
+      type: Function,
+      require: true,
+      default: () => {}
+    },
+    data: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.faceGate {
+  position: relative;
+  .faceDevBox {
+    text-align: left;
+    .blockTitle2 {
+      font-size: 14px;
+    }
+    .timeInner {
+      margin-bottom: 10px;
+      display: flex;
+      p {
+        font-size: 12px;
+      }
+      .num {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+.pointDialog_s {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background-color: #000;
+  padding: 15px 15px 10px;
+  // width: 400px;
+  z-index: 3;
+  box-shadow: 0 2px 4px 0 #1a4c5a;
+  border: 1px solid #1a4c5a;
+  .title {
+    padding-bottom: 6px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid rgba(20, 83, 72, 0.4);
+    text-align: left;
+    font-size: 15px;
+    .closeBtn {
+      float: right;
+      font-size: 20px;
+      cursor: pointer;
+      &:hover {
+        color: #5ce2f6;
+      }
+    }
+    .inOutListBox {
+      li {
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        margin-top: 5px;
+        .workerName {
+          width: 50px;
+        }
+        img {
+          margin-right: 10px;
+        }
+        .time {
+          margin-right: 20px;
+        }
+        .type {
+          width: 30px;
+          height: 22px;
+          line-height: 22px;
+          text-align: center;
+          border-radius: 3px;
+          border: 1px solid rgba(81, 129, 246, 0.42);
+          color: #5181f6;
+          &.type2 {
+            border: 1px solid rgba(68, 215, 182, 0.42);
+            color: #44d7b6;
+          }
+        }
+      }
+    }
+    .devStatus {
+      background-color: #279e83;
+      font-size: 12px;
+      width: 40px;
+      height: 22px;
+      text-align: center;
+      line-height: 22px;
+      color: white;
+      float: right;
+      margin-right: 10px;
+      border-radius: 3px;
+      margin-left: 10px;
+      &.red {
+        background-color: #fe6c7f;
+      }
+    }
+  }
+  .pointDialogContent {
+    margin-top: 20px;
+  }
+}
+</style>
diff --git a/src/views/projectAdmin/dataBoard/digitalSite/index.vue b/src/views/projectAdmin/dataBoard/digitalSite/index.vue
index e2d19904..7cc6c35b 100644
--- a/src/views/projectAdmin/dataBoard/digitalSite/index.vue
+++ b/src/views/projectAdmin/dataBoard/digitalSite/index.vue
@@ -125,7 +125,7 @@
       </div>
       <div class="mapContent" :class="company == 'longguang' ? 'lgMapContent' : ''">
         <vue-scroll v-show="!showVideoDialog">
-          <div class="mapUrl" style="width: 100%; height: 100%; overflow: hidden">
+          <div class="mapUrl">
             <img
               :src="bgUrl"
               style="width: 100%; height: auto; position: relative"
@@ -146,66 +146,12 @@
               <img :src="getDevIcon(item.devType)" />
               <div class="devName">{{ item.name }}</div>
             </div>
-
             <!-- 人脸闸机弹框 -->
-            <div class="faceDevBox pointDialog_s" v-show="showFaceDevDialog" :style="{ left: faceDevDetail.x, top: faceDevDetail.y }">
-              <div class="title">
-                {{ faceDevDetail.name }}
-                <span class="closeBtn" @click="showFaceDevDialog = false">
-                  <i class="el-icon-close"></i>
-                </span>
-                <!-- "在线" "离线"-->
-                <span class="devStatus" :class="{ red: !faceDevDialogData.ufaceDev || faceDevDialogData.ufaceDev.deviceState != 1 }">
-                  {{
-                    faceDevDialogData.ufaceDev && faceDevDialogData.ufaceDev.deviceState == 1
-                      ? $t('message.dataBoard.online')
-                      : $t('message.dataBoard.notOnline')
-                  }}
-                </span>
-              </div>
-              <div class="blockTitle blockTitle2" style="margin-bottom: 10px">
-                <i></i>
-                <!-- 进出统计 -->
-                {{ $t('message.dataBoard.inAndOutStatistics') }}
-              </div>
-              <div class="timeInner">
-                <p>
-                  <!-- 今日进场人次 -->
-                  {{ $t('message.dataBoard.todayInPeople') }}
-                </p>
-                <div class="bg1 small">
-                  <span class="num">{{ faceDevDialogData.totalAttendance.inTotalNum }}</span>
-                </div>
-              </div>
-              <div class="timeInner">
-                <p>
-                  <!-- 今日出场人次 -->
-                  {{ $t('message.dataBoard.todayOutPeople') }}
-                </p>
-                <div class="bg1 small">
-                  <span class="num">{{ faceDevDialogData.totalAttendance.outTotalNum }}</span>
-                </div>
-              </div>
-              <div v-if="faceDevDialogData.list.length > 0" class="blockTitle blockTitle2" style="margin-bottom: 10px">
-                <i></i>
-                <!-- 进出记录 -->
-                {{ $t('message.dataBoard.inAndOutRecords') }}
-              </div>
-              <div class="inOutListBox" :style="{ height: faceDevDialogData.list.length > 0 ? '170px' : '' }">
-                <vue-scroll>
-                  <ul>
-                    <li v-for="(item, index) in faceDevDialogData.list" :key="index">
-                      <img :src="$store.state.FILEURL + item.imageUrl" width="20" height="30" />
-                      <span class="workerName">{{ item.workerName }}</span>
-                      <span class="time">{{ item.createTime }}</span>
-                      <span class="type" :class="{ type2: item.passType == 1 }">
-                        {{ item.passType == 1 ? $t('message.dataBoard.in') : $t('message.dataBoard.out') }}
-                      </span>
-                    </li>
-                  </ul>
-                </vue-scroll>
-              </div>
-            </div>
+            <FaceGate
+              v-if="showFaceDevDialog"
+              :close="() => (showFaceDevDialog = false)"
+              :data="{ ...faceDevDialogData, ...faceDevDetail }"
+            ></FaceGate>
             <!-- 环境设备弹框 -->
             <div class="environBox pointDialog_s" v-show="showEnvironDialog" :style="{ left: environBoxPos.x, top: environBoxPos.y }">
               <!-- 实时数据 -->
@@ -2361,8 +2307,9 @@ var $line
 var $line2
 
 import DataCard from './DataCard.vue'
+import FaceGate from './center/FaceGate.vue'
 export default {
-  components: { areaTree, videoModule, DataCard },
+  components: { areaTree, videoModule, DataCard, FaceGate },
   data() {
     return {
       countDownTime: null,
@@ -4189,6 +4136,9 @@ img {
   .mapUrl {
     display: inline-block;
     position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
   }
 }
 .lgMapContent {
@@ -4306,13 +4256,8 @@ img {
   width: 100%;
   height: 800px;
   padding-top: 1px;
-  /*position: absolute;*/
-  /*left: 0;*/
-  /*top: 0;*/
-  /*background-image: url("~@/assets/images/dataBoard/pointDialog_l_BG.png");*/
   background-size: 100% 100%;
   z-index: 3;
-  /*background-color: #040d15;*/
   .closeBtn {
     position: absolute;
     right: 22px;
@@ -4331,7 +4276,6 @@ img {
       height: 100%;
       width: 224px;
       margin-right: 25px;
-      /*background-color: rgba(0, 0, 0, 1);*/
       border: 1px solid rgba(26, 76, 90, 1);
       .pageTitle {
         display: none;
@@ -4346,72 +4290,7 @@ img {
     }
   }
 }
-.faceDevBox {
-  text-align: left;
-  .blockTitle2 {
-    font-size: 14px;
-  }
-  .timeInner {
-    margin-bottom: 10px;
-    display: flex;
-    p {
-      font-size: 12px;
-    }
-    .num {
-      font-size: 16px;
-    }
-  }
-}
-.inOutListBox {
-  li {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    margin-top: 5px;
-    .workerName {
-      width: 50px;
-    }
-    img {
-      margin-right: 10px;
-    }
-    .time {
-      margin-right: 20px;
-    }
-    .type {
-      width: 30px;
-      height: 22px;
-      line-height: 22px;
-      text-align: center;
-      border-radius: 3px;
-      border: 1px solid rgba(81, 129, 246, 0.42);
-      color: #5181f6;
-      &.type2 {
-        border: 1px solid rgba(68, 215, 182, 0.42);
-        color: #44d7b6;
-      }
-    }
-  }
-}
-.devStatus {
-  background-color: #279e83;
-  font-size: 12px;
-  width: 40px;
-  height: 22px;
-  text-align: center;
-  line-height: 22px;
-  color: white;
-  float: right;
-  margin-right: 10px;
-  border-radius: 3px;
-  margin-left: 10px;
-  &.red {
-    background-color: #fe6c7f;
-  }
-}
 .dialogBlock {
-  /*border: 1px solid #1a4c5a;*/
-  /*background-color: #000;*/
-
   color: #fff;
   .dialogBlockContent {
     margin: 20px;
@@ -4849,63 +4728,13 @@ img {
   line-height: 20px;
   color: #fff;
 }
-//蓝色风格
-.dataBoardPage_blue {
-  .pointTabBox {
-    li {
-      background-image: url('~@/assets/images/dataBoard/blueTheme/tabBG.png');
-      color: rgba(255, 255, 254, 0.8);
-      &.active {
-        background-image: url('~@/assets/images/dataBoard/blueTheme/tabBG-active.png');
-        color: #ffffff;
-      }
-    }
-  }
-  .pointDialog_l {
-    background-image: none;
-  }
-  .dialogBlock {
-    // background-color: #03032D;
-    background-color: #262d47;
-  }
-  .pointDialog_s {
-    background-color: #091750;
-  }
-}
-// 湛蓝色
-.dataBoardPage_blue2 {
-  .pointTabBox {
-    li {
-      background-image: url('~@/assets/images/dataBoard/blueTheme2/tabBG.png');
-      color: rgba(255, 255, 254, 0.8);
-      &.active {
-        background-image: url('~@/assets/images/dataBoard/blueTheme2/tabBG-active.png');
-        color: #ffffff;
-      }
-    }
-  }
-  .pointDialog_l {
-    background-image: none;
-  }
-  .dialogBlock {
-    // background-color: #03032D;
-    background-color: #262d47;
-  }
-  .pointDialog_s {
-    background-color: #091750;
-  }
-}
 .svg-box {
   margin-top: 20px;
   width: 100%;
   height: 320px;
-  // border: 1px solid red;
 }
 .dialog_box {
   overflow: inherit;
-  // /deep/.el-dialog__wrapper{
-  //   overflow: inherit;
-  // }
 }
 .isIframe {
   /deep/.isLongguangIframe {