增加点击OCR身份证识别后会触发更新：识别结果统计，识别结果展示，识别结果统计，服务响应监控，并且增加判断两个列表的长度而判断滚动多高距离。

2024-07-30 14:49:02 +08:00 · 2024-07-30 14:49:02 +08:00 · 387a8e2d21
parent 68ae7bbe44
commit 387a8e2d21
13 changed files with 532 additions and 443 deletions
--- a/src/api/Violation/Violation.js
+++ b/src/api/Violation/Violation.js
--- 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;
@ -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%;
@ -435,3 +172,20 @@ tbody {
    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;
+}
--- a/src/views/Violation/pieVioResultCount.vue
+++ 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>
--- 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("出错了，请重新上传图片");
--- 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;
--- a/src/views/updateFace/midPic.vue
+++ 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>
--- 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,
+      IDrecognition,
+      boxHeader,
+      midPic
   },

   mounted() {
--- 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();
            });
        }
    }
@ -114,21 +139,14 @@ tbody {
    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;
 }
+
 .resultHeader {
    width: 100%;
    height: 3.0625rem;
--- 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 {

--- 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>
@ -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: {

@ -59,10 +59,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();
            });
        },
        pieIDResultCount() {
--- a/src/views/updateIDCard/rectangleIDInvokeCount.vue
+++ b/src/views/updateIDCard/rectangleIDInvokeCount.vue
@ -22,8 +22,8 @@ export default {
    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() {
        //在组件销毁前清除定时器
@ -44,10 +44,13 @@ export default {
                        // 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() {
@ -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>
--- 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>

--- 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
  },