From 6bea66d8cf0b585b89cfa5f3534d87bf24a643c2 Mon Sep 17 00:00:00 2001
From: chengwenyou <3451066845@qq.com>
Date: Wed, 31 Jul 2024 15:14:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BA=AB=E4=BB=BD=E8=AF=81=E8=AF=86=E5=88=AB?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E6=9D=A1=E4=BB=B6=E4=BB=A5=E5=8F=8A=E4=BA=BA?=
 =?UTF-8?q?=E8=84=B8=E8=AF=86=E5=88=AB=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/updateFace.css            | 141 ++-------------
 src/views/components/IDrecognition.vue      |   7 +-
 src/views/updateFace/midPic.vue             | 169 ++++++++++++++----
 src/views/updateFace/updateFace.vue         | 187 +++-----------------
 src/views/updateIDCard/listIDResultShow.vue |   1 -
 src/views/updateIDCard/updateIDCard.vue     |   3 +-
 vue.config.js                               |   2 +-
 7 files changed, 178 insertions(+), 332 deletions(-)

diff --git a/src/assets/styles/updateFace.css b/src/assets/styles/updateFace.css
index ec5f703..7085bbc 100644
--- a/src/assets/styles/updateFace.css
+++ b/src/assets/styles/updateFace.css
@@ -1,3 +1,7 @@
+:root{
+    --custom-Facesize:3rem
+}
+
 body {
     background-image: url('../images/backimg.png');
     background-size: 100% 100%;
@@ -14,150 +18,37 @@ body {
 
 .mainContent {
     display: flex;
-    /* background-color: antiquewhite; */
     width: 116rem;
     height: 51rem;
     margin-left: 2.5rem;
-
 }
 
 .boxLevelOne {
     display: flex;
-    /* padding-left: .625rem; */
     margin-right: .75rem;
-
+    flex-direction: column;
+    position: relative;
 }
 
-.leftBoxLevelOne {
-    flex: 3;
-    /* background-color: blue; */
-    flex-direction: column;
-
+.sideBoxLevelOne {
+    flex: 3; 
 }
 
 .midBoxLevelOne {
     flex: 5;
-    position: relative;
-    display: flex;
-    flex-direction: column;
     border: .0625rem solid rgba(204, 252, 253, 0.3);
     border-radius: 1.5rem;
-
-}
-
-.rightBoxLevelOne {
-    flex: 3;
-    /* background-color:yellow ; */
-    flex-direction: column;
-
 }
 
 .boxLevelTwo {
     flex: 1;
-    /* background-color: hotpink; */
     position: relative;
-}
-
-/* 二级标题图片 */
-.boxLevelTwoHeaderPic {
-    width: 29.0625rem;
-    /* 宽度 */
-    height: 2.4375rem;
-    opacity: .51;
-    /* 高度 */
-}
-
-.boxLevelTwo {
     border: .0625rem solid rgba(204, 252, 253, 0.3);
     border-radius: .6rem;
 }
 
-
-
 .boxLevelTwoFst {
     margin-bottom: 1rem;
-
-}
-
-.boxLevelTwoText {
-    position: absolute;
-    top: .6rem;
-    left: 2.1rem;
-    font-size: 1.125rem;
-    font-weight: bold;
-    color: #FFFFFF;
-    letter-spacing: .3rem;
-}
-
-
-.faceContentBox {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-    position: relative;
-
-}
-
-.faceContentTable {
-    width: 100%;
-
-
-}
-
-tbody {
-    height: 14.5rem;
-    overflow: auto;
-    display: block;
-    scroll-behavior: smooth;
-}
-
-.faceContentRow {
-    width: 100%;
-    background: linear-gradient(to bottom, rgba(47, 47, 214, .6), rgba(255, 255, 255, .7));
-    display: flex;
-    height: 2.1rem;
-    /* 底部边框为2像素宽的黑色边框 */
-}
-
-.faceContentRowPrime {
-    background-color: RGBA(13, 31, 75, .8);
-    display: flex;
-}
-
-.faceContentRowEven {
-    background-color: RGBA(6, 19, 48, .9);
-    display: flex;
-
-}
-
-.faceContentColume {
-    font-size: 1rem;
-    padding-top: .3rem;
-    padding-bottom: .4rem;
-    text-align: center;
-    height: 2rem;
-    color: #FFFFFF;
-
-}
-
-.faceContentColumeSort {
-    /* border: #51AEFE 1px solid; */
-    flex: 1
-}
-
-.faceContentColumeIPAddr {
-    /* border: #55636f 1px solid; */
-    text-align: center;
-    flex: 2
-}
-
-.faceContentColumeDate {
-    /* border: #2f6ca2 1px solid; */
-    flex: 2
-}
-
-.faceContentColumeTime {
-    /* border: #530303 1px solid; */
-    flex: 1
 }
 
 
@@ -168,24 +59,18 @@ tbody {
     /* background-color: #51AEFE; */
 }
 
-.resultHeader {
-    width: 100%;
-    height: 3.0625rem;
-}
-
 .el-upload-list__item-thumbnail,
 .el-upload-list__item,
-.el-upload-list__item-actions>li {
-    width: calc(var(--custom-size) *4.6) !important;
+.el-upload-list__item-actions>li{
     background-color: transparent;
     border-radius: 0rem;
+    /* border: 1px solid transparent; */
 }
 
-
 .el-upload-dragger,
-.el-upload {
-    height: calc(var(--custom-size) *3.0) !important;
-    width: calc(var(--custom-size) *4.6) !important;
+.el-upload{
     background-color: transparent !important;
     border-radius: 0rem;
+    /* border: 1px dotted #fff; */
+
 }
\ No newline at end of file
diff --git a/src/views/components/IDrecognition.vue b/src/views/components/IDrecognition.vue
index d987ec0..ceb990f 100644
--- a/src/views/components/IDrecognition.vue
+++ b/src/views/components/IDrecognition.vue
@@ -221,7 +221,12 @@ export default {
                         this.$modal.msgSuccess("识别成功");
                     }
                     else if (res.data.data.code == 20001) {
-                        this.$modal.msgError("身份证信息不完整，请重新上传");
+                        // this.$modal.msgError("");
+                        this.$message({
+                            message: '身份证信息不完整，请重新上传',
+                            type: 'warning'
+                        });
+
                     }
                     else if (res.data.data.code == 20003) {
                         this.$modal.msgError("图片base64编码转换异常,请重新上传");
diff --git a/src/views/updateFace/midPic.vue b/src/views/updateFace/midPic.vue
index 32ee848..3a5a1a6 100644
--- a/src/views/updateFace/midPic.vue
+++ b/src/views/updateFace/midPic.vue
@@ -1,17 +1,18 @@
 <template>
     <div class="faceMidPic">
         <div class="face3d">
-            <img src="../../assets/images/faceBackCircle.png" alt="error" class="backImgCircle">
+            
+            <img src="../../assets/images/faceBackCircle.png" alt="error" class="backImgCircle ">
             <img src="../../assets/images/faceBackMain.png" alt="error" class="faceBackMain">
         </div>
         <div class="face3dSec">
             <div class="face3dSecBox">
                 <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
-                <img src="../../assets/images/faceleft.png" alt="error" class="faceLeftTwo">
+                <img src="../../assets/images/faceleft.png" alt="error" class="facePicTwo" @click="open">
             </div>
             <div class="face3dSecBox">
                 <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
-                <img src="../../assets/images/faceright.png" alt="error" class="faceRightTwo">
+                <img src="../../assets/images/faceright.png" alt="error" class="facePicTwo">
             </div>
         </div>
     </div>
@@ -19,40 +20,48 @@
 
 <script>
 export default {
-
+data(){
+    return{
+      
+    }
+},
+methods:{
+    open() {
+        this.$prompt('请输入邮箱', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+          inputErrorMessage: '邮箱格式不正确'
+        }).then(({ value }) => {
+          this.$message({
+            type: 'success',
+            message: '你的邮箱是: ' + value
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '取消输入'
+          });       
+        });
+      }
+}
 }
 </script>
 
 <style scoped>
 .faceMidPic {
-    flex: 4.5;
+    flex: 4;
     display: flex;
     flex-direction: column;
     position: relative;
 }
 
 .face3d {
-    flex: 2.5;
+    flex: 2;
     position: relative;
 
 }
 
-.faceBackMain {
-    position: absolute;
-    height: 90%;
-    top: 10%;
-    left: 43.2%;
-
-}
-
-.backImgCircle {
-    position: absolute;
-    height: 150%;
-    left: 35%;
-
-}
-
-
 .face3dSec {
     position: relative;
     flex: 2;
@@ -60,12 +69,26 @@ export default {
 
 }
 
+.faceBackMain {
+    position: absolute;
+    height: 50%;
+    top: 13%;
+    left: 44.4%;
+    animation: flash 4s infinite alternate;
 
+}
+
+.backImgCircle {
+    position: absolute;
+    height: 100%;
+    left: 36.3%;
+
+}
 
 .faceLeftTwoCircle {
     position: absolute;
     bottom: 5%;
-    left: 35%;
+    left: 24%;
     height: 100%
 }
 
@@ -74,25 +97,103 @@ export default {
     position: relative;
 }
 
-
-
-
-.faceLeftTwo {
+.facePicTwo {
     position: absolute;
     height: 46%;
-    left: 46%;
+    left: 42%;
     top: 18%;
     animation: moveandflash 4s infinite alternate;
 
 }
 
-.faceRightTwo {
-    position: absolute;
-    height: 46%;
-    left: 46%;
-    top: 18%;
-    animation: moveandflash 4s infinite alternate;
 
+@keyframes flash {
+    0% {
+
+        transform: translateY(0) translateZ(0rem);
+    }
+
+    30% {
+        opacity: .43;
+        transform: rotateY(180deg) translateZ(1.25rem);
+    }
+
+    43% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    45% {
+        opacity: 0.43;
+    }
+
+    46% {
+        opacity: 1;
+
+    }
+
+    47% {
+        opacity: .6;
+
+    }
+
+    48% {
+        opacity: .9;
+
+    }
+
+    49% {
+        opacity: .2;
+
+    }
+
+    50% {
+        opacity: 1;
+
+    }
+
+    51% {
+        opacity: .2;
+
+    }
+
+    52% {
+        opacity: .9;
+
+    }
+
+    53% {
+        opacity: .6;
+    }
+
+    54% {
+        opacity: 1;
+    }
+
+    55% {
+        opacity: 0;
+    }
+
+    57% {
+        opacity: 1;
+    }
+
+    30% {
+        opacity: .43;
+        transform: rotateY(180deg) translateZ(1.25rem);
+    }
+
+    80% {
+        transform: translateY(0) translateZ(0rem);
+    }
+
+    90% {
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    100% {
+        transform: translateY(0) translateZ(0rem);
+    }
 }
 
 @keyframes moveandflash {
diff --git a/src/views/updateFace/updateFace.vue b/src/views/updateFace/updateFace.vue
index ad664ad..379bdd5 100644
--- a/src/views/updateFace/updateFace.vue
+++ b/src/views/updateFace/updateFace.vue
@@ -4,94 +4,35 @@
 
 
       <div class="mainContent">
-         <div class="boxLevelOne leftBoxLevelOne">
+         <div class="boxLevelOne sideBoxLevelOne">
             <div class="boxLevelTwo boxLevelTwoFst">
                <boxHeader :boxHeaderText="'人脸库'"></boxHeader>
-
-               <div class="boxLeftLevelThree " ref="scrollBox">
-                  <div class="row boxLeftLevelThreeRow" v-for="(row, rowIndex) in Math.ceil(PicNum / 3)"
-                     :key="rowIndex">
-                     <div v-if="rowIndex * 3 < PicNum" class="boxLeftLevelThreeRow">
-                        <div class="box boxLeftLevelThreeBox" v-for="(col, colIndex) in 3" :key="colIndex"
-                           ref="boxLeftLevelThreeBox">
-                           <div v-if="(rowIndex * 3 + colIndex) < PicNum" class="image-box boxLeftLevelThreeImg">
-                              <img :src="`your_image_url_${rowIndex * 3 + colIndex}`" alt="image"
-                                 class="faceRepository">
-                           </div>
-                        </div>
-                     </div>
-                  </div>
-               </div>
+               <faceListShowPic></faceListShowPic>
             </div>
+
             <div class="boxLevelTwo boxLevelTwoSnd">
                <boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
-
-               <div class="faceContentBox">
-                  <img src="../../assets/images/resultHeader.png" alt="error" class="resultHeader">
-                  <table class="faceContentTable">
-                     <thead>
-                        <tr class="faceContentRow">
-                           <th class="faceContentColume faceContentColumeSort">序号</th>
-                           <th class="faceContentColume faceContentColumeIPAddr">访问地址</th>
-                           <th class="faceContentColume faceContentColumeDate">访问时间</th>
-                           <th class="faceContentColume faceContentColumeTime">响应时长</th>
-                        </tr>
-                     </thead>
-                     <tbody>
-                        <tr v-for="(item, index) in recognition" :key="index"
-                           :class="{ 'faceContentRowEven': index % 2 === 0, 'faceContentRowPrime': index % 2 !== 0 }">
-                           <td class="faceContentColume faceContentColumeSort">{{ index + 1 }}</td>
-                           <td class="faceContentColume faceContentColumeIPAddr">{{ item.ip }}</td>
-                           <td class="faceContentColume faceContentColumeDate">{{ item.returnTime }}</td>
-                           <td class="faceContentColume faceContentColumeTime">{{ item.responseTime }}</td>
-                        </tr>
-                     </tbody>
-                  </table>
-               </div>
+               <faceListResultCount></faceListResultCount>
             </div>
          </div>
 
+
          <div class="boxLevelOne midBoxLevelOne">
             <boxHeader :boxHeaderText="'人脸识别算法应用'"></boxHeader>
-
             <midPic></midPic>
-
-            <IDrecognition></IDrecognition>
-
+            <faceRecognition></faceRecognition>
          </div>
 
-         <div class="boxLevelOne rightBoxLevelOne">
+         
+         <div class="boxLevelOne sideBoxLevelOne">
             <div class="boxLevelTwo boxLevelTwoFst">
-
                <boxHeader :boxHeaderText="'服务调用统计'"></boxHeader>
-
                <div class="myEcharts" ref="myEcharts"></div>
             </div>
+
             <div class="boxLevelTwo boxLevelTwoSnd">
                <boxHeader :boxHeaderText="'服务响应监控'"></boxHeader>
-
-               <div class="faceContentBox">
-                  <img src="../../assets/images/resultHeader.png" alt="error" class="resultHeader">
-                  <table class="faceContentTable">
-                     <thead>
-                        <tr class="faceContentRow">
-                           <th class="faceContentColume faceContentColumeSort">序号</th>
-                           <th class="faceContentColume faceContentColumeIPAddr">访问地址</th>
-                           <th class="faceContentColume faceContentColumeDate">访问时间</th>
-                           <th class="faceContentColume faceContentColumeTime">响应时长</th>
-                        </tr>
-                     </thead>
-                     <tbody>
-                        <tr v-for="(item, index) in ServerResult" :key="index"
-                           :class="{ 'faceContentRowEven': index % 2 === 0, 'faceContentRowPrime': index % 2 !== 0 }">
-                           <td class="faceContentColume faceContentColumeSort">{{ index + 1 }}</td>
-                           <td class="faceContentColume faceContentColumeIPAddr">{{ item.ip }}</td>
-                           <td class="faceContentColume faceContentColumeDate">{{ item.returnTime }}</td>
-                           <td class="faceContentColume faceContentColumeTime">{{ item.responseTime }}</td>
-                        </tr>
-                     </tbody>
-                  </table>
-               </div>
+               <faceListResWatch></faceListResWatch>
             </div>
          </div>
       </div>
@@ -102,21 +43,27 @@
 import * as echarts from 'echarts';
 import largeScreenHeader from '@/components/LargeScreen'
 import boxHeader from '@/views/components/boxHeader.vue'
-import IDrecognition from '@/views/components/IDrecognition.vue'
+import faceRecognition from '@/views/components/faceRecognition.vue'
 import midPic from '@/views/updateFace/midPic.vue'
+import faceListShowPic from '@/views/updateFace/faceListShowPic.vue'
+import faceListResultCount from '@/views/updateFace/faceListResultCount.vue'
+import faceListResWatch from '@/views/updateFace/faceListResWatch.vue'
+
+
 export default {
    components: {
       largeScreenHeader,
-      IDrecognition,
+      faceRecognition,
       boxHeader,
-      midPic
+      midPic,
+      faceListShowPic,
+      faceListResultCount,
+      faceListResWatch
    },
 
    mounted() {
 
-      this.$nextTick(() => {
-         this.scrollDown();
-      });
+
       this.updateDateTime();
       this.echartsInit()
    },
@@ -124,8 +71,6 @@ export default {
       backToHome() {
          this.$router.beforeEach((to, from, next) => {
             if (from.path === '/largeScreen') {
-               // 清除缓存的操作
-               // 可以使用 localStorage.clear() 或其他方法清除缓存
                localStorage.clear();
             }
             next();
@@ -144,39 +89,14 @@ export default {
          const minutes = now.getMinutes();
          const seconds = now.getSeconds();
          const dayOfWeek = now.toLocaleString('zh-CN', { weekday: 'long' });
-
          this.currentDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
          this.currentTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
          this.dayOfWeek = dayOfWeek;
       },
-      scrollDown() {
-         const boxes = this.$refs.boxLeftLevelThreeBox;
 
-
-         boxes.forEach((box, index) => {
-            const boxHeight = box.offsetHeight;
-            let translateYValue = '0';
-            let animationDuration = 0;
-
-            if (this.PicNum <= 9) {
-               // No movement
-            } else {
-               translateYValue = `${-170 - (this.PicNum - 12) * 100}px`;
-            }
-
-            if (translateYValue !== '0') {
-               animationDuration = boxHeight / this.scrollSpeed * 1000;
-            }
-
-            box.style.setProperty('animation', `scrollAnimationBox ${animationDuration}ms linear infinite`);
-            box.style.setProperty('transform', 'translateY(0)');
-         });
-
-      },
       echartsInit() {
          this.myRectangleEchart = echarts.init(this.$refs.myEcharts);
          let rightYData = this.rightYData;
-         // let rightXData = ['1', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          let sum = rightYData.reduce((acc, curr) => acc + curr, 0);
          let average = sum / rightYData.length;
          this.myRectangleEchart.setOption({
@@ -295,67 +215,4 @@ export default {
 
 <style vars="{{PicNum}}">
 @import url('./../../assets/styles/updateFace.css');
-
-.boxLeftLevelThree {
-   background-color: RGBA(10, 76, 122, .8);
-   margin-left: 25px;
-   margin-top: 12px;
-   width: 445px;
-   height: 318px;
-   /* border: 1px solid yellow; */
-   display: flex;
-   flex-wrap: wrap;
-   overflow: hidden;
-}
-
-
-
-@keyframes scrollAnimationBox {
-
-   0%,
-   100% {
-      transform: translateY(0);
-   }
-
-   50% {
-      transform: translateY(calc(100% - 6 * 100px));
-   }
-}
-
-.boxLeftLevelThreeRow {
-   display: flex;
-}
-
-.boxLeftLevelThreeBox {
-   width: 97px;
-   height: 79px;
-   background-color: RGBA(55, 108, 157, 1);
-   /* border: 1px solid blue; */
-   margin-left: 37px;
-   margin-bottom: 10px;
-   margin-top: 10px;
-
-   display: flex;
-   justify-content: center;
-   align-items: center;
-   overflow: hidden;
-   animation: scrollAnimationBox;
-
-}
-
-.boxLeftLevelThreeImg {
-   width: 60px;
-   height: 61px;
-   border: 1px solid red;
-   display: flex;
-   justify-content: center;
-   align-items: center;
-
-}
-
-.faceRepository {
-   width: 100%;
-   height: 100%;
-   object-fit: cover;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/updateIDCard/listIDResultShow.vue b/src/views/updateIDCard/listIDResultShow.vue
index 9e5f9b1..f89cfc2 100644
--- a/src/views/updateIDCard/listIDResultShow.vue
+++ b/src/views/updateIDCard/listIDResultShow.vue
@@ -162,7 +162,6 @@ tbody tr {
 
 .listIDResultShowTable {
     width: 100%;
-    ;
 }
 
 .listIDResultShow {
diff --git a/src/views/updateIDCard/updateIDCard.vue b/src/views/updateIDCard/updateIDCard.vue
index ea8111c..e032ad3 100644
--- a/src/views/updateIDCard/updateIDCard.vue
+++ b/src/views/updateIDCard/updateIDCard.vue
@@ -59,8 +59,7 @@ export default {
    },
    props: {
       value: [String, Object, Array],
-      // 图片数量限制
-      // 大小限制(MB)
+      
       fileSize: {
          type: Number,
          default: 5,
diff --git a/vue.config.js b/vue.config.js
index 2f3d946..4ea4f8a 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -34,7 +34,7 @@ module.exports = {
     open: true,
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.2.33:18080`,
+        target: `http://192.168.2.47:18080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''