From 387a8e2d212d8bb80fae4ab6244047da9f1044f9 Mon Sep 17 00:00:00 2001
From: chengwenyou <3451066845@qq.com>
Date: Tue, 30 Jul 2024 14:49:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=82=B9=E5=87=BBOCR?=
 =?UTF-8?q?=E8=BA=AB=E4=BB=BD=E8=AF=81=E8=AF=86=E5=88=AB=E5=90=8E=E4=BC=9A?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E6=9B=B4=E6=96=B0=EF=BC=9A=E8=AF=86=E5=88=AB?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E7=BB=9F=E8=AE=A1=EF=BC=8C=E8=AF=86=E5=88=AB?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E5=B1=95=E7=A4=BA=EF=BC=8C=E8=AF=86=E5=88=AB?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E7=BB=9F=E8=AE=A1=EF=BC=8C=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=93=8D=E5=BA=94=E7=9B=91=E6=8E=A7=EF=BC=8C=E5=B9=B6=E4=B8=94?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=88=A4=E6=96=AD=E4=B8=A4=E4=B8=AA=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E9=95=BF=E5=BA=A6=E8=80=8C=E5=88=A4=E6=96=AD?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=A4=9A=E9=AB=98=E8=B7=9D=E7=A6=BB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/Violation/Violation.js                |   0
 src/assets/styles/updateFace.css              | 288 ++----------------
 src/views/Violation/pieVioResultCount.vue     | 150 +++++++++
 src/views/components/IDrecognition.vue        |  14 +-
 src/views/components/boxHeader.vue            |   2 +-
 src/views/updateFace/midPic.vue               | 196 ++++++++++++
 src/views/updateFace/updateFace.vue           |  96 ++----
 src/views/updateIDCard/listIDResultShow.vue   |  64 ++--
 .../updateIDCard/listSevericeResWatch.vue     |  65 ++--
 src/views/updateIDCard/pieIDResultCount.vue   |  26 +-
 .../updateIDCard/rectangleIDInvokeCount.vue   |  45 +--
 src/views/updateIDCard/updateIDCard.vue       |  18 +-
 vue.config.js                                 |  11 +-
 13 files changed, 532 insertions(+), 443 deletions(-)
 create mode 100644 src/api/Violation/Violation.js
 create mode 100644 src/views/Violation/pieVioResultCount.vue
 create mode 100644 src/views/updateFace/midPic.vue

diff --git a/src/api/Violation/Violation.js b/src/api/Violation/Violation.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/styles/updateFace.css b/src/assets/styles/updateFace.css
index 0f7d488..ec5f703 100644
--- a/src/assets/styles/updateFace.css
+++ b/src/assets/styles/updateFace.css
@@ -1,5 +1,3 @@
-
-
 body {
     background-image: url('../images/backimg.png');
     background-size: 100% 100%;
@@ -40,9 +38,10 @@ body {
 .midBoxLevelOne {
     flex: 5;
     position: relative;
+    display: flex;
     flex-direction: column;
-
-    /* background-color: red; */
+    border: .0625rem solid rgba(204, 252, 253, 0.3);
+    border-radius: 1.5rem;
 
 }
 
@@ -73,11 +72,7 @@ body {
     border-radius: .6rem;
 }
 
-.midBoxLevelOne {
-    border: .0625rem solid rgba(204, 252, 253, 0.3);
-    border-radius: 1.5rem;
 
-}
 
 .boxLevelTwoFst {
     margin-bottom: 1rem;
@@ -104,7 +99,7 @@ body {
 
 .faceContentTable {
     width: 100%;
-    
+
 
 }
 
@@ -165,264 +160,6 @@ tbody {
     flex: 1
 }
 
-.face3d {
-
-    flex: 4;
-    /* background-color: #390b0b; */
-}
-
-.backImgCircle {
-    margin-left: 13.3rem;
-    /* width: 3rem; */
-    height: 20rem;
-
-}
-
-.faceBackMain {
-    position: absolute;
-    top: 4.6875rem;
-    height: 14rem;
-
-    left: 19.375rem
-}
-
-.face3dSec {
-    position: relative;
-    flex: 2;
-    /* background-color: #af4d4d; */
-}
-
-.face3dTrd {
-    flex: 3;
-    display: flex;
-    /* flex-direction: column; */
-
-    /* background-color: #4d8d4d; */
-}
-
-.faceLeftTwoBox {
-    height: 12.3125rem;
-    width: 17.125rem;
-    position: absolute;
-    /* background-color: #ceb4b4; */
-    top: -2.5rem;
-    left: 4.375rem;
-
-}
-
-.faceRightTwoBox {
-    height: 12.3125rem;
-    width: 17.125rem;
-    position: absolute;
-    /* background-color: #ceb4b4; */
-    top: -2.5rem;
-    right: 4.375rem;
-
-}
-
-.faceLeftTwoBox {
-    position: absolute;
-    top: -2.5rem;
-    left: 4.375rem;
-}
-
-.faceLeftTwoCircle {
-    width: 75%;
-    position: absolute;
-    top: 1.5rem;
-    right: 1.5625rem;
-    height: 10.0625rem;
-    /* width: 10.0625rem; */
-}
-
-
-.faceLeftTwo {
-    position: absolute;
-    top: 3.125rem;
-    right: 5.625rem;
-    height: 4.9375rem;
-    width: 4.5625rem;
-    animation: moveandflash 4s infinite alternate;
-    transform: translateY(0) translateZ(0rem);
-}
-
-.faceRightTwo {
-    position: absolute;
-    top: 3.125rem;
-    right: 5.625rem;
-    height: 4.9375rem;
-    width: 4.5625rem;
-    animation: moveandflash 4s infinite alternate;
-    transform: translateY(0) translateZ(0rem);
-}
-
-@keyframes moveandflash {
-    0% {
-        transform: translateY(0) translateZ(0rem);
-    }
-
-    10% {
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-
-    20% {
-        transform: translateY(0rem) translateZ(0rem);
-    }
-
-    30% {
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    43% {
-        opacity: 1;
-        transform: translateY(-0.8125rem) translateZ(1.25rem);
-    }
-    45% {
-        opacity: 0;
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    46% {
-        opacity: 1;
-        transform: translateY(-0.875rem) translateZ(1.25rem);
-    }
-    47% {
-        opacity: .6;
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    48% {
-        opacity: .9;
-        transform: translateY(-0.75rem) translateZ(1.25rem);
-    }
-    49% {
-        opacity: .2;
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    50% {
-        opacity: 1;
-        transform: translateY(-0.875rem) translateZ(1.25rem);
-    }
-    51% {
-        opacity: .2;
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    52% {
-        opacity: .9;
-        transform: translateY(-0.75rem) translateZ(1.25rem);
-    }
-    53% {
-        opacity: .6;
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    54% {
-        opacity: 1;
-        transform: translateY(-0.875rem) translateZ(1.25rem);
-    }
-    55% {
-        opacity: 0;
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    57% {
-        opacity: 1;
-        transform: translateY(-0.8125rem) translateZ(1.25rem);
-    }
-    70% {
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-    80% {
-        transform: translateY(0) translateZ(0rem);
-    }
-
-    90% {
-        transform: translateY(-0.9375rem) translateZ(1.25rem);
-    }
-
-    100% {
-        transform: translateY(0) translateZ(0rem);
-    }
-}
-
-.faceLeftThreePic {
-    position: relative;
-    flex: 2;
-    /* background-color: #55636f; */
-}
-
-.faceLeftThreeCard {
-    flex: 5;
-    position: relative;
-    /* background-color: #1579d1; */
-
-}
-
-
-.text {
-    position: absolute;
-    margin-left: 1.875rem;
-    color: #ffffff;
-    z-index: 3;
-}
-
-.faceThree {
-
-    position: absolute;
-    left: 1.1875rem;
-    /* opacity: .5; */
-    z-index: 1;
-
-}
-
-.smallImg2 {
-    position: absolute;
-    width: 40%;
-    height: 60%;
-    top: 3.125rem;
-    left: 3.125rem;
-    border: #51AEFE .0625rem solid;
-}
-
-.smallImg1 {
-    position: absolute;
-    width: 40%;
-    height: 60%;
-    top: 3.125rem;
-    right: 3.125rem;
-    border: #51AEFE .0625rem solid;
-}
-
-.nameBox {
-    top: 3.125rem;
-    left: 2.8125rem;
-
-    position: absolute;
-    font-size: .875rem;
-    color: #ffffff;
-}
-
-.SexBox {
-    top: 6.875rem;
-    left: 2.8125rem;
-
-    position: absolute;
-    font-size: .875rem;
-    color: #ffffff;
-}
-
-.nameBox2 {
-    top: 3.125rem;
-    right: 5rem;
-
-    position: absolute;
-    font-size: .875rem;
-    color: #ffffff;
-}
-
-.SexBox2 {
-    top: 6.875rem;
-    right: 5.625rem;
-
-    position: absolute;
-    font-size: .875rem;
-    color: #ffffff;
-}
 
 .myEcharts {
     width: 90%;
@@ -434,4 +171,21 @@ tbody {
 .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;
+    background-color: transparent;
+    border-radius: 0rem;
+}
+
+
+.el-upload-dragger,
+.el-upload {
+    height: calc(var(--custom-size) *3.0) !important;
+    width: calc(var(--custom-size) *4.6) !important;
+    background-color: transparent !important;
+    border-radius: 0rem;
 }
\ No newline at end of file
diff --git a/src/views/Violation/pieVioResultCount.vue b/src/views/Violation/pieVioResultCount.vue
new file mode 100644
index 0000000..b5022b8
--- /dev/null
+++ b/src/views/Violation/pieVioResultCount.vue
@@ -0,0 +1,150 @@
+<template>
+    <div class="pieBoxVioResultCount">
+        <div class="pieVioResultCount" ref="pieVioResultCount"></div>
+        <div class="pieTextBoxVioResultCount">
+            <div class='pieTextVioResultCount'>
+                识别正确数
+            </div>
+            <div class='pieTextVioResultCount'>
+                识别错误数
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { init, graphic } from 'echarts'
+import { getPieData } from "@/api/Violation/Violation.js";
+
+
+function roundToTwo(num) {
+    return tmp_num = num.toFixed(2).toString();
+
+}
+
+export default {
+    name: 'pieVioResultCount',
+    data() {
+        return {
+            pieOneChart: null,
+            pieEntityNameValue: {
+                pieright: '',
+                pieerror: ''
+            }
+        }
+    },
+    mounted() {
+        this.getPieDataVio();
+
+    },
+    created() {
+        this.interval_VioPie = setInterval(() => {
+            this.pieVioResultCount();
+        }, 60 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
+    },
+    methods: {
+
+        getPieDataVio() {
+            getPieData(1).then(res => {
+                try {
+                    if (res.code == 200) {
+
+                        this.pieEntityNameValue.pieright = (res.data.correctNu / res.data.totalNu * 100);
+
+                        this.pieEntityNameValue.pieerror = (res.data.incorrectNu / res.data.totalNu * 100);
+
+                        this.pieVioResultCount()
+
+
+                    }
+                } catch (error) {
+                    this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
+                    this.$modal.closeLoading();
+                }
+            }).catch(error => {
+                this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
+                this.$modal.closeLoading();
+            });
+        },
+        pieVioResultCount() {
+            let pieBlank = {
+                color: 'rgba(255,255,255,.8)',
+            };
+            let pieEntity = {
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: 'rgba(0, 255, 225, 0.3)' },
+                    { offset: .5, color: 'rgba(100, 255, 100, 1)' },
+                    { offset: 1, color: 'rgba(0, 255, 255, 0.7)' },
+                ]),
+
+            };
+            let pieRadius = [30, 60];
+            let pieVioResultCount = init(this.$refs.pieVioResultCount);
+            console.log(this.pieEntityNameValue)
+            console.log(this.pieEntityNameValue.pieright)
+            let pieData = [
+                { name: 'pieright', value: this.pieEntityNameValue.pieright },
+                { name: 'pieerror', value: this.pieEntityNameValue.pieerror }
+            ];
+            // console.log(pieData)
+            pieVioResultCount.setOption({
+
+                series: pieData.map((data, index) => ({
+                    type: 'pie',
+                    top: '15%',
+                    center: [`${23 + 51 * index}%`, '50%'],
+                    radius: pieRadius,
+                    label: {
+                        show: true,
+                        formatter: function (params) {
+                            if (params.name === 'blank')
+                                return roundToTwo(100 - params.value) + "%"
+                            else
+                                return roundToTwo(params.value) + "%"//没有这个参数会出现数据漂移的现象，如0.1+0.2=0.3
+                        },
+                        position: 'center',
+                        fontSize: 15,
+                        fontWeight: 'bold',
+                        color: 'rgba(0, 255, 255, 0.7)'
+                    },
+                    data: [
+                        { name: 'entity', value: data.value, itemStyle: pieEntity },
+                        { name: 'blank', value: 100 - data.value, itemStyle: pieBlank }
+                    ]
+                }))
+            });
+        },
+    }
+}
+</script>
+
+<style scoped>
+.pieBoxVioResultCount {
+    height: 20rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+}
+
+.pieVioResultCount {
+    flex: 10;
+    width: 100%;
+
+}
+
+.pieTextBoxVioResultCount {
+    flex: 2;
+    display: flex;
+    color: #fff;
+    width: 100%;
+    font-size: 1rem;
+    margin-left: 30%;
+}
+
+.pieTextVioResultCount {
+    flex: 1
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/IDrecognition.vue b/src/views/components/IDrecognition.vue
index 1721ad7..de4a83b 100644
--- a/src/views/components/IDrecognition.vue
+++ b/src/views/components/IDrecognition.vue
@@ -93,6 +93,7 @@
 
 <script>
 import { updateIDCardPic } from "@/api/updateIDCard/updateIDCard.js";
+
 export default {
     name: 'IDrecognition',
     data() {
@@ -214,7 +215,12 @@ export default {
                     }
                     else if (res.data.data.code == 20001) {
                         this.$modal.msgError("身份证信息不完整，请重新上传");
-
+                    }        
+                    else if (res.data.data.code == 20003) {
+                        this.$modal.msgError("图片base64编码转换异常,请重新上传");
+                    }
+                    else if (res.data.data.code == 20005) {
+                        this.$modal.msgError("没有识别到文字，请传入正常的身份证图片");
                     }
                     else {
 
@@ -222,11 +228,9 @@ export default {
                     this.$modal.closeLoading();
                 }
 
-                // this.$refs.IDnega.clearFiles();
-                // this.$refs.IDposi.clearFiles();
+                this.$emit('custom-event');
                 this.open = false;
-                // this.dataList = [];
-                // this.baseUrl();
+               
             }).catch(error => {
                 // if()
                 this.$modal.msgError("出错了，请重新上传图片");
diff --git a/src/views/components/boxHeader.vue b/src/views/components/boxHeader.vue
index fea4191..103ac07 100644
--- a/src/views/components/boxHeader.vue
+++ b/src/views/components/boxHeader.vue
@@ -27,7 +27,7 @@ export default {
     position: absolute;
     top: 0.2rem;
     left: 2rem;
-    width: 10rem;
+    width: 13rem;
     height: 1.4375rem;
     font-family: Source Han Sans CN;
     font-weight: 500;
diff --git a/src/views/updateFace/midPic.vue b/src/views/updateFace/midPic.vue
new file mode 100644
index 0000000..32ee848
--- /dev/null
+++ b/src/views/updateFace/midPic.vue
@@ -0,0 +1,196 @@
+<template>
+    <div class="faceMidPic">
+        <div class="face3d">
+            <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">
+            </div>
+            <div class="face3dSecBox">
+                <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
+                <img src="../../assets/images/faceright.png" alt="error" class="faceRightTwo">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.faceMidPic {
+    flex: 4.5;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.face3d {
+    flex: 2.5;
+    position: relative;
+
+}
+
+.faceBackMain {
+    position: absolute;
+    height: 90%;
+    top: 10%;
+    left: 43.2%;
+
+}
+
+.backImgCircle {
+    position: absolute;
+    height: 150%;
+    left: 35%;
+
+}
+
+
+.face3dSec {
+    position: relative;
+    flex: 2;
+    display: flex;
+
+}
+
+
+
+.faceLeftTwoCircle {
+    position: absolute;
+    bottom: 5%;
+    left: 35%;
+    height: 100%
+}
+
+.face3dSecBox {
+    flex: 1;
+    position: relative;
+}
+
+
+
+
+.faceLeftTwo {
+    position: absolute;
+    height: 46%;
+    left: 46%;
+    top: 18%;
+    animation: moveandflash 4s infinite alternate;
+
+}
+
+.faceRightTwo {
+    position: absolute;
+    height: 46%;
+    left: 46%;
+    top: 18%;
+    animation: moveandflash 4s infinite alternate;
+
+}
+
+@keyframes moveandflash {
+    0% {
+        transform: translateY(0) translateZ(0rem);
+    }
+
+    10% {
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    20% {
+        transform: translateY(0rem) translateZ(0rem);
+    }
+
+    30% {
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    43% {
+        opacity: 1;
+        transform: translateY(-0.8125rem) translateZ(1.25rem);
+    }
+
+    45% {
+        opacity: 0;
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    46% {
+        opacity: 1;
+        transform: translateY(-0.875rem) translateZ(1.25rem);
+    }
+
+    47% {
+        opacity: .6;
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    48% {
+        opacity: .9;
+        transform: translateY(-0.75rem) translateZ(1.25rem);
+    }
+
+    49% {
+        opacity: .2;
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    50% {
+        opacity: 1;
+        transform: translateY(-0.875rem) translateZ(1.25rem);
+    }
+
+    51% {
+        opacity: .2;
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    52% {
+        opacity: .9;
+        transform: translateY(-0.75rem) translateZ(1.25rem);
+    }
+
+    53% {
+        opacity: .6;
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    54% {
+        opacity: 1;
+        transform: translateY(-0.875rem) translateZ(1.25rem);
+    }
+
+    55% {
+        opacity: 0;
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    57% {
+        opacity: 1;
+        transform: translateY(-0.8125rem) translateZ(1.25rem);
+    }
+
+    70% {
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    80% {
+        transform: translateY(0) translateZ(0rem);
+    }
+
+    90% {
+        transform: translateY(-0.9375rem) translateZ(1.25rem);
+    }
+
+    100% {
+        transform: translateY(0) translateZ(0rem);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/updateFace/updateFace.vue b/src/views/updateFace/updateFace.vue
index 9b3c86c..ad664ad 100644
--- a/src/views/updateFace/updateFace.vue
+++ b/src/views/updateFace/updateFace.vue
@@ -6,8 +6,8 @@
       <div class="mainContent">
          <div class="boxLevelOne leftBoxLevelOne">
             <div class="boxLevelTwo boxLevelTwoFst">
-               <img class="boxLevelTwoHeaderPic" src="../../assets/images/boxLevelTwoHeader.svg" alt="error">
-               <div class="boxLevelTwoText">人脸库</div>
+               <boxHeader :boxHeaderText="'人脸库'"></boxHeader>
+
                <div class="boxLeftLevelThree " ref="scrollBox">
                   <div class="row boxLeftLevelThreeRow" v-for="(row, rowIndex) in Math.ceil(PicNum / 3)"
                      :key="rowIndex">
@@ -24,8 +24,8 @@
                </div>
             </div>
             <div class="boxLevelTwo boxLevelTwoSnd">
-               <img class="boxLevelTwoHeaderPic" src="../../assets/images/boxLevelTwoHeader.svg" alt="error">
-               <div class="boxLevelTwoText">识别结果统计</div>
+               <boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
+
                <div class="faceContentBox">
                   <img src="../../assets/images/resultHeader.png" alt="error" class="resultHeader">
                   <table class="faceContentTable">
@@ -52,61 +52,24 @@
          </div>
 
          <div class="boxLevelOne midBoxLevelOne">
-            <img class="boxLevelTwoHeaderPic" src="../../assets/images/boxLevelTwoHeader.svg" alt="error">
-            <div class="boxLevelTwoText">人脸识别算法应用</div>
-            <div class="face3d">
-               <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="faceLeftTwoBox">
-                  <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
-                  <img src="../../assets/images/faceleft.png" alt="error" class="faceLeftTwo">
-               </div>
-               <div class="faceRightTwoBox">
-                  <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
-                  <img src="../../assets/images/faceright.png" alt="error" class="faceRightTwo">
-               </div>
-            </div>
-            <div class="face3dTrd">
+            <boxHeader :boxHeaderText="'人脸识别算法应用'"></boxHeader>
 
-               <div class="faceLeftThreePic">
-                  <div class="text">人脸信息</div>
-                  <img src="../../assets/images/faceLeftThree.png" alt="error" class="faceThree">
-               </div>
-               <div class="faceLeftThreeCard">
-                  <img src="../../assets/images/faceThreeBorder.png" alt="error" class="faceThreeBorder">
-                  <div class="smallImg1"></div>
-                  <div class="nameBox">姓名：</div>
+            <midPic></midPic>
 
-                  <div class="SexBox">性别: </div>
-
-               </div>
-               <div class="faceLeftThreePic">
-                  <div class="text">识别结果</div>
-                  <img src="../../assets/images/faceRightThree.png" alt="error" class="faceThree">
-
-               </div>
-               <div class="faceLeftThreeCard">
-                  <img src="../../assets/images/faceThreeBorder.png" alt="error" class="faceThreeBorder">
-                  <div class="smallImg2"></div>
-                  <div class="nameBox2">姓名：</div>
-
-                  <div class="SexBox2">性别: </div>
-               </div>
-            </div>
+            <IDrecognition></IDrecognition>
 
          </div>
 
          <div class="boxLevelOne rightBoxLevelOne">
             <div class="boxLevelTwo boxLevelTwoFst">
-               <img class="boxLevelTwoHeaderPic" src="../../assets/images/boxLevelTwoHeader.svg" alt="error">
-               <div class="boxLevelTwoText">服务调用统计</div>
+
+               <boxHeader :boxHeaderText="'服务调用统计'"></boxHeader>
+
                <div class="myEcharts" ref="myEcharts"></div>
             </div>
             <div class="boxLevelTwo boxLevelTwoSnd">
-               <img class="boxLevelTwoHeaderPic" src="../../assets/images/boxLevelTwoHeader.svg" alt="error">
-               <div class="boxLevelTwoText">服务响应监控</div>
+               <boxHeader :boxHeaderText="'服务响应监控'"></boxHeader>
+
                <div class="faceContentBox">
                   <img src="../../assets/images/resultHeader.png" alt="error" class="resultHeader">
                   <table class="faceContentTable">
@@ -138,10 +101,15 @@
 <script>
 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 midPic from '@/views/updateFace/midPic.vue'
 export default {
-   components: { 
-      largeScreenHeader,     
+   components: {
+      largeScreenHeader,
+      IDrecognition,
+      boxHeader,
+      midPic
    },
 
    mounted() {
@@ -154,19 +122,19 @@ export default {
    },
    methods: {
       backToHome() {
-      this.$router.beforeEach((to, from, next) => {
-        if (from.path === '/largeScreen') {
-          // 清除缓存的操作
-          // 可以使用 localStorage.clear() 或其他方法清除缓存
-          localStorage.clear();
-        }
-        next();
-      });
+         this.$router.beforeEach((to, from, next) => {
+            if (from.path === '/largeScreen') {
+               // 清除缓存的操作
+               // 可以使用 localStorage.clear() 或其他方法清除缓存
+               localStorage.clear();
+            }
+            next();
+         });
+
+         // 跳转到主页
+         this.$router.push('/largeScreen');
+      },
 
-      // 跳转到主页
-      this.$router.push('/largeScreen');
-    },
-  
       updateDateTime() {
          const now = new Date();
          const year = now.getFullYear();
diff --git a/src/views/updateIDCard/listIDResultShow.vue b/src/views/updateIDCard/listIDResultShow.vue
index 7e562be..9e5f9b1 100644
--- a/src/views/updateIDCard/listIDResultShow.vue
+++ b/src/views/updateIDCard/listIDResultShow.vue
@@ -37,7 +37,8 @@ export default {
         return {
             recognition: [],
             recognition_tmp: {}, // 临时存储单个数据的对象
-            maxRecognitionCount: 20 // 最多展示30条数据
+            maxRecognitionCount: 20, // 最多展示30条数据
+            numResult: '7'
         }
     },
     mounted() {
@@ -45,12 +46,32 @@ export default {
     },
     created() {
         this.interval_IDPie = setInterval(() => {
-            this.getListSearchDataData();
-        }, 60 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
+            this.getListSearchData();
+        }, 1 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
     },
     methods: {
-        
-        
+
+        updateScrollHeightResult() {
+            // 假设每行高度为2rem
+            const rowHeight = 2 ;
+            const tableHeight = this.recognition.length * rowHeight; 
+            // console.log('tableHeight'+tableHeight);
+            console.log(this.recognition.length);
+            if(this.recognition.length<=7){
+                this.num = 0
+            }else{
+                this.num = 10 * tableHeight ;
+            }
+            const style = document.querySelector('style');
+            style.textContent = this.keyframesResult();
+        },
+        keyframesResult() {
+            return `@keyframes scroll {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-${this.numResult}px); }
+            100% { transform: translateY(0); }
+        }`;
+        },
         getListSearchData() {
             getListIDSearchData(1).then(res => {
 
@@ -64,10 +85,12 @@ export default {
                             this.recognition_tmp.idcard = data.idcardNumber;
                             this.recognition_tmp.returnTime = data.idcardValidity;
                             this.recognition_tmp.responseNation = data.enthnic;
-
                             // 插入recognition_tmp到recognition数组
+                            if (this.recognition.length >= 20) {
+                                this.recognition.shift();
+                            }
                             this.recognition.push({ ...this.recognition_tmp });
-
+                            this.updateScrollHeightResult(); 
                             // 控制recognition数组最多展示30条数据
 
                             // 清空recognition_tmp
@@ -75,10 +98,12 @@ export default {
                         }
                     }
                 } catch (error) {
-                    console.error('Error:', error);
+                    this.$modal.msgError("坐下角列表加载失败，请刷新页面或者请求管理员");
+                    this.$modal.closeLoading();
                 }
             }).catch(error => {
-                console.error('Error:', error);
+                this.$modal.msgError("左下角列表加载失败，请刷新页面或者请求管理员");
+                this.$modal.closeLoading();
             });
         }
     }
@@ -112,23 +137,16 @@ tbody {
     overflow: auto;
     display: block;
     scroll-behavior: smooth;
-      
-}
-@keyframes scroll {
-    0% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(calc(-100% * 13));
-    }
-    100%{
-        transform: translateY(0);
-    }
+
 }
+
+
+
 tbody tr {
-   
-    animation: scroll 20s linear  infinite;
+
+    animation: scroll 20s linear infinite;
 }
+
 .resultHeader {
     width: 100%;
     height: 3.0625rem;
diff --git a/src/views/updateIDCard/listSevericeResWatch.vue b/src/views/updateIDCard/listSevericeResWatch.vue
index 4762db4..9c9b5a8 100644
--- a/src/views/updateIDCard/listSevericeResWatch.vue
+++ b/src/views/updateIDCard/listSevericeResWatch.vue
@@ -26,10 +26,11 @@
 <script>
 import { getListIDWatchData } from "@/api/updateIDCard/updateIDCard.js";
 
+
 export default {
     data() {
         return {
-
+            num: '',
             ServerResult: [],
             ServerResult_tmp: {}, // 临时存储单个数据的对象
             maxRecognitionCount: 30 // 最多展示30条数据
@@ -37,14 +38,41 @@ export default {
     },
     mounted() {
         this.getListWatchData();
+
     },
     created() {
         this.interval_IDPie = setInterval(() => {
             this.getListWatchData();
-        }, 60 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
+        }, 1 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
+    },
+    computed: {
+
     },
     methods: {
-        
+        updateScrollHeightWatch() {
+            // 假设每行高度为2rem
+            const rowHeight = 2 ;
+            const tableHeight = this.ServerResult.length * rowHeight; 
+            // console.log('tableHeight'+tableHeight);
+
+            console.log(this.ServerResult.length);
+            if(this.ServerResult.length<=7){
+                this.num = 0
+            }else{
+                this.num = 10 * tableHeight ;
+
+            }
+            
+            const style = document.querySelector('style');
+            style.textContent = this.keyframesWatch();
+        },
+        keyframesWatch() {
+            return `@keyframes scroll {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-${this.num}px); }
+            100% { transform: translateY(0); }
+        }`;
+        },
         getListWatchData() {
             getListIDWatchData(1).then(res => {
 
@@ -56,24 +84,22 @@ export default {
                             this.ServerResult_tmp.ip = data.invokeIp;
                             this.ServerResult_tmp.returnTime = data.updateTime;
                             this.ServerResult_tmp.responseTime = data.responseLong + 'ms';
-
-                            // 插入ServerResult_tmp到ServerResult数组
-                            this.ServerResult.push({ ...this.ServerResult_tmp });
-
-                            // 控制ServerResult数组最多展示30条数据
-                            if (this.ServerResult.length > this.maxRecognitionCount) {
+                            if (this.ServerResult.length >= 20) {
                                 this.ServerResult.shift(); // 删除最早的数据
                             }
-
-                            // 清空ServerResult_tmp
+                            // 插入ServerResult_tmp到ServerResult数组
+                            this.ServerResult.push({ ...this.ServerResult_tmp });
+                            this.updateScrollHeightWatch();
                             this.ServerResult_tmp = {};
                         }
                     }
                 } catch (error) {
-                    console.error('Error:', error);
+                    this.$modal.msgError("右下角列表加载失败，请刷新页面或者请求管理员");
+                    this.$modal.closeLoading();
                 }
             }).catch(error => {
-                console.error('Error:', error);
+                this.$modal.msgError("右下角列表加载失败，请刷新页面或者请求管理员");
+                this.$modal.closeLoading();
             });
         }
     }
@@ -109,19 +135,6 @@ tbody {
     scroll-behavior: smooth;
 }
 
-@keyframes scroll {
-    0% {
-        transform: translateY(0);
-    }
-
-    50% {
-        transform: translateY(calc(-100% * 13));
-    }
-
-    100% {
-        transform: translateY(0);
-    }
-}
 
 tbody tr {
 
diff --git a/src/views/updateIDCard/pieIDResultCount.vue b/src/views/updateIDCard/pieIDResultCount.vue
index 7785dcf..1b4341a 100644
--- a/src/views/updateIDCard/pieIDResultCount.vue
+++ b/src/views/updateIDCard/pieIDResultCount.vue
@@ -3,10 +3,10 @@
         <div class="pieIDResultCount" ref="pieIDResultCount"></div>
         <div class="pieTextBoxIDResultCount">
             <div class='pieTextIDResultCount'>
-                识别正确数
+                调用正确数
             </div>
             <div class='pieTextIDResultCount'>
-                识别错误数
+                调用失败数
             </div>
         </div>
     </div>
@@ -18,11 +18,11 @@ import { getPieData } from "@/api/updateIDCard/updateIDCard.js";
 
 
 function roundToTwo(num) {
-    let tmp_num = num.toFixed(2).toString();  
+    let tmp_num = num.toFixed(2).toString();
 
     return tmp_num;
 }
-    
+
 export default {
     name: 'pieIDResultCount',
     data() {
@@ -41,7 +41,7 @@ export default {
     created() {
         this.interval_IDPie = setInterval(() => {
             this.pieIDResultCount();
-        }, 60 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
+        }, 1 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
     },
     methods: {
 
@@ -49,20 +49,22 @@ export default {
             getPieData(1).then(res => {
                 try {
                     if (res.code == 200) {
-                       
+
                         this.pieEntityNameValue.pieright = (res.data.correctNu / res.data.totalNu * 100);
-                    
+
                         this.pieEntityNameValue.pieerror = (res.data.incorrectNu / res.data.totalNu * 100);
-            
+
                         this.pieIDResultCount()
-                       
-                    
+
+
                     }
                 } catch (error) {
-                    console.error('Error:', error);
+                    this.$modal.msgError("矩形图加载失败，请刷新页面或者请求管理员");
+                    this.$modal.closeLoading();
                 }
             }).catch(error => {
-                console.error('Error:', error);
+                this.$modal.msgError("饼图加载失败，请刷新页面或者请求管理员");
+                this.$modal.closeLoading();
             });
         },
         pieIDResultCount() {
diff --git a/src/views/updateIDCard/rectangleIDInvokeCount.vue b/src/views/updateIDCard/rectangleIDInvokeCount.vue
index 4d42c48..70c9794 100644
--- a/src/views/updateIDCard/rectangleIDInvokeCount.vue
+++ b/src/views/updateIDCard/rectangleIDInvokeCount.vue
@@ -17,13 +17,13 @@ export default {
     },
     mounted() {
         this.getRectIDData()
-       
+
     },
     created() {
         // 创建定时器
         this.interval_IDRect = setInterval(() => {
-            this.getrectangleIDInvokeX_Ydata();
-        }, 5 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
+            this.getRectIDData();
+        }, 1 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
     },
     beforeDestroy() {
         //在组件销毁前清除定时器
@@ -39,15 +39,18 @@ export default {
                         console.log(this.rectangleIDInvokeXData)
                         this.rectangleIDInvokeYData = res.data.map(item => item.totalNu).reverse();
 
-                      
+
                         this.rectangleIDInvokeCount();
                         // console.log(this.pieEntityNameValue)
                     }
                 } catch (error) {
-                    console.error('Error:', error);
+                    this.$modal.clearErrorMessages();
+                    this.$modal.msgError("矩形图加载失败，请刷新页面或者请求管理员");
+                    this.$modal.closeLoading();
                 }
             }).catch(error => {
-                console.error('Error:', error);
+                this.$modal.msgError("矩形图加载失败，请刷新页面或者请求管理员");
+                this.$modal.closeLoading();
             });
         },
         rectangleIDInvokeCount() {
@@ -64,19 +67,19 @@ export default {
                         type: 'cross'
                     }
                 },
-                
+
                 xAxis: {
                     type: 'category',
                     data: this.rectangleIDInvokeXData,
                     axisLabel: {
                         interval: 0, //强制显示所有标签
-                        rotate: 30, 
-                        left:10
+                        rotate: 30,
+                        left: 10
                     },
                     axisPointer: {
                         type: 'shadow' //在x轴每个单位下方显示阴影
                     },
-                   
+
                 },
                 yAxis: {
                     name: '单位',
@@ -131,27 +134,7 @@ export default {
             })
 
         },
-        getrectangleIDInvokeX_Ydata() {
-            axios.get('/api/some_endpoint?Xdata=some_value1&Ydata=some_value2', {
-                params: {
-                    rectangleIDInvokeXData: 'some_value1',
-                    rectangleIDInvokeYData: 'some_value2'
-                }
-            })
-                .then(res => {
-                    if (res.code === 200) {
-                        const rectangleIDInvokeXData = res.data.rectangleIDInvokeXData;
-                        const rectangleIDInvokeYData = res.data.rectangleIDInvokeYData;
-                        // 将响应数据赋值给组件的 data 属性
-                        this.rectangleIDInvokeXData = rectangleIDInvokeXData;
-                        this.rectangleIDInvokeYData = rectangleIDInvokeYData;
-                        // 处理响应数据
-                    }                                       // 处理响应数据
-                })
-                .catch(error => {
-                    // 处理错误
-                });
-        }
+        
     }
 }
 </script>
diff --git a/src/views/updateIDCard/updateIDCard.vue b/src/views/updateIDCard/updateIDCard.vue
index bb43643..a52f918 100644
--- a/src/views/updateIDCard/updateIDCard.vue
+++ b/src/views/updateIDCard/updateIDCard.vue
@@ -5,27 +5,27 @@
          <div class="boxLevelOne sideBoxLevelOne">
             <div class="boxLevelTwo boxLevelTwoFst">
                <boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
-               <pieIDResultCount></pieIDResultCount>
+               <pieIDResultCount ref="pieData"></pieIDResultCount>
             </div>
             <div class="boxLevelTwo">
                <boxHeader :boxHeaderText="'识别结果展示'"></boxHeader>
-               <listIDResultShow></listIDResultShow>
+               <listIDResultShow ref="listResult"></listIDResultShow>
             </div>
          </div>
          <div class="boxLevelOne midBoxLevelOne">
             <boxHeader :boxHeaderText="'OCR识别应用'"></boxHeader>
             <checkChangeUrl :thisUrlPage="'1'"></checkChangeUrl>
             <midPic></midPic>
-            <IDrecognition></IDrecognition>
+            <IDrecognition @custom-event="updateOtherData"></IDrecognition>
          </div>
          <div class="boxLevelOne sideBoxLevelOne">
             <div class="boxLevelTwo boxLevelTwoFst">
                <boxHeader :boxHeaderText="'识别结果统计'"></boxHeader>
-               <rectangleIDInvokeCount></rectangleIDInvokeCount>
+               <rectangleIDInvokeCount ref="rectData"></rectangleIDInvokeCount>
             </div>
             <div class="boxLevelTwo boxLevelTwoSnd">
                <boxHeader :boxHeaderText="'服务响应监控'"></boxHeader>
-               <listSevericeResWatch></listSevericeResWatch>
+               <listSevericeResWatch ref="listWatch"></listSevericeResWatch>
             </div>
          </div>
       </div>
@@ -97,7 +97,15 @@ export default {
          
       }
    },
+   methods: {
+      updateOtherData(data) {
+         this.$refs.pieData.getPieDataID();
+         this.$refs.listResult.getListSearchData();
+         this.$refs.rectData.getRectIDData();
+         this.$refs.listWatch.getListWatchData();
+   }
 
+}
 }
 </script>
 
diff --git a/vue.config.js b/vue.config.js
index 7c69175..2f3d946 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -34,20 +34,13 @@ module.exports = {
     open: true,
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.2.35:18080`,
+        target: `http://192.168.2.33:18080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }
       },
-    //   [process.env.VUE_APP_BASE_API_ID] : {  
-    //     target : "http://192.168.2.143:18080",
-       
-    //     changeOrigin : true,
-    //     pathRewrite : {
-    //         "^/ocr" : ""
-    //     }
-    // }
+
     },
     disableHostCheck: true
   },