From 25a22cb0f8243aca902d4747141900fbe896f6f3 Mon Sep 17 00:00:00 2001
From: jiang <jiang@bonus>
Date: Thu, 29 Aug 2024 15:49:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E8=84=B8=E8=AF=86=E5=88=AB=E4=B8=8E?=
 =?UTF-8?q?=E5=A4=A7=E6=A8=A1=E5=9E=8B=E9=97=AE=E7=AD=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/largeScreen/introVideo.vue |   6 +-
 src/views/largeScreen/routeIcon.vue  | 413 ++++++++++-----------------
 2 files changed, 156 insertions(+), 263 deletions(-)

diff --git a/src/views/largeScreen/introVideo.vue b/src/views/largeScreen/introVideo.vue
index 1f2bdf6..452b05e 100644
--- a/src/views/largeScreen/introVideo.vue
+++ b/src/views/largeScreen/introVideo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="body-container">
     <div class="intro-video-box">
-      <video controls :poster="poster" width="100%" height="100%">
+      <video controls :poster="poster" width="100%" height="50%">
         <source :src="videoSrc" type="video/mp4"/>
         不好意思，视频走丢了
       </video>
@@ -12,7 +12,9 @@
         <span class="title">AI平台简介</span>
       </div>
       <div class="intro-video-text">
-        数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示
+        安徽博诺思信息科技有限公司是一家与中国科学技术大学、中国科学技术大学先进技术研究院校企共建高新技术企业，落户于中国科学技术大学先进技术研究院，注册资本1515.15万元。专业从事人工智能、大数据分析、物联网技术研究和电力、教育行业的应用系统自主研发、系统集成、安防监控、咨询和技术服务的高新技术企业。
+        公司依托科大先进技术研究院、合肥工业大学、安徽大学等高校和研究院丰富的技术资源和研发成果，凭借先进的经营理念，坚持“求实、创新”的企业精神，本着以质量求生存，以服务树口碑的经营宗旨，不断开拓市场，为客户提供解决方案和应用效果。
+        公司秉承专业、专注的服务理念、关注客户需求、执着于追求质量与服务的结合、致力于成为软件开发和系统集成行业、物联网技术行业、智能安防行业的中坚力量。我们期待着与您携手共进、同创美好未来。
       </div>
     </div>
   </div>
diff --git a/src/views/largeScreen/routeIcon.vue b/src/views/largeScreen/routeIcon.vue
index 8c2e610..c2e20dd 100644
--- a/src/views/largeScreen/routeIcon.vue
+++ b/src/views/largeScreen/routeIcon.vue
@@ -1,114 +1,18 @@
 <template>
   <div class="body-container">
-    <div class="boxMidTwoc">
-      <div class="boxMidLevelThreec">违章智能识别</div>
-      <div class="midIconMainc">
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midOneIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToVideo"></a>
-          <div class="midTextc">安全帽识别</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ hatNum }}</span><span
-            class="smallTextc">(次)</span>
-          </div>
-        </div>
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midTwoIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToVideo"></a>
-          <div class="midTextc midTextSecc">安全带识别</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ seatBeltNum }}</span><span
-            class="smallTextc">(次)</span>
-          </div>
-        </div>
-        <div class="midIconc ">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midThreeIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToVideo"></a>
-          <div class="midTextc midTextTrdc">电子围栏识别</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ electFenceNum }}</span><span
-            class="smallTextc">(次)</span>
-          </div>
-        </div>
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToVideo"></a>
-          <div class="midTextc midTextFthc">更多场景扩展中</div>
-
-        </div>
-      </div>
-    </div>
-    <div class="boxMidTwoc">
-      <div class="boxMidLevelThreec">OCR识别</div>
-      <div class="midIconMainc">
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midSixIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToUpdateIDCard"></a>
-          <div class="midTextc midTextSthc">身份证识别</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ idCardNum }}</span><span
-            class="smallTextc">(次)</span>
-          </div>
-        </div>
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midFiveIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToViolation"></a>
-          <div class="midTextc midTextFithc">发票识别</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ InvoiceNum }}</span><span
-            class="smallTextc">(次)</span>
-          </div>
-        </div>
-
-        <div class="midIconc ">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midSevenIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToText"></a>
-          <div class="midTextc midTextSevthc">文本识别</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ textRecognitionNum }}</span>
+    <div v-for="section in sections" :key="section.title" class="box">
+      <div class="box-title">{{ section.title }}</div>
+      <div class="box-container">
+        <div v-for="icon in section.icons" :key="icon.text" class="box-container-ico">
+          <a href="javascript:;" class="box-container-ico-img">
+            <img :src="icon.imgSrc" alt="error" @click="handleClick(icon.route)">
+          </a>
+          <div  class="box-container-ico-text">{{ icon.text }}</div>
+          <div v-if="icon.num!==undefined" class="box-container-ico-num">
+            <span class="bigTextc">{{ icon.num }}</span>
             <span class="smallTextc">(次)</span>
           </div>
         </div>
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="showPopup"></a>
-          <div class="midTextc midTextFthc">更多场景扩展中</div>
-        </div>
-      </div>
-    </div>
-    <div class="boxMidTwoc">
-      <div class="boxMidLevelThreec">其他拓展服务</div>
-      <div class="midIconMainc">
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midEightIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToAskRequest"></a>
-          <div class="midTextc">大模型问答</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ largeModelNum }}</span><span
-            class="smallTextc">(次)</span>
-          </div>
-        </div>
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midNineIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="goToUpdateFace"></a>
-          <div class="midTextc midTextFithc">人脸识别</div>
-          <div class="hatInsertc"><span class="bigTextc">{{ faceRecognitionNum }}</span><span
-            class="smallTextc">(次)</span>
-          </div>
-        </div>
-        <div class="midIconc">
-          <a href="javascript:;" class="midIconLinkc">
-            <img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
-                 @click="showPopup"></a>
-          <div class="midTextc midTextFthc">更多场景扩展中</div>
-        </div>
-        <div class="midIconc ">
-          <div class="hatInsertc"><span class="bigTextc"></span><span class="smallTextc"></span>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -116,6 +20,15 @@
 
 <script>
 import {getAlgoAppOverview} from '@/api/largeScreen/largeScreen.js'
+import midEightIcon from '@/assets/images/midEightIcon.png';
+import midNineIcon from '@/assets/images/midNineIcon.png'
+import midOneIcon from '@/assets/images/midOneIcon.png'
+import midTwoIcon from '@/assets/images/midTwoIcon.png'
+import midThreeIcon from '@/assets/images/midThreeIcon.png'
+import midFourIcon from '@/assets/images/midFourIcon.png'
+import midSixIcon from '@/assets/images/midSixIcon.png'
+import midFiveIcon from '@/assets/images/midFiveIcon.png'
+import midSevenIcon from '@/assets/images/midSevenIcon.png'
 
 export default {
   name: 'routeIcon',
@@ -129,55 +42,96 @@ export default {
       textRecognitionNum: 0,
       largeModelNum: 0,
       faceRecognitionNum: 0,
-      routeIconNum: ''
+      sections: [
+        {
+          title: '图像识别',
+          icons: [
+            {text: '人脸识别', num: 0, imgSrc: midNineIcon, route: '/updateFace', textClass: 'midTextFithc'},
+            {text: '安全帽识别', num: 0, imgSrc: midOneIcon, route: '/Video'},
+            {text: '安全带识别', num: 0, imgSrc: midTwoIcon, route: '/Video', textClass: 'midTextSecc'},
+            {
+              text: '电子围栏识别',
+              num: 0,
+              imgSrc: midThreeIcon,
+              route: '/Video',
+              textClass: 'midTextTrdc'
+            },
+            {
+              text: '更多场景扩展中',
+              imgSrc: midFourIcon,
+              route: 'showPopup',
+              textClass: 'midTextFthc'
+            }
+          ]
+        },
+        {
+          title: 'OCR识别',
+          icons: [
+            {
+              text: '身份证识别',
+              num: 0,
+              imgSrc: midSixIcon,
+              route: '/updateIDCard',
+              textClass: 'midTextSthc'
+            },
+            {
+              text: '发票识别',
+              num: 0,
+              imgSrc: midFiveIcon,
+              route: '/Violation'
+            },
+            {
+              text: '文本识别',
+              num: 0,
+              imgSrc: midSevenIcon,
+              route: '/Text',
+              textClass: 'midTextSevthc'
+            },
+            {
+              text: '更多场景扩展中',
+              imgSrc: midFourIcon,
+              route: 'showPopup',
+              textClass: 'midTextFthc'
+            }
+          ]
+        },
+        {
+          title: '智能问答',
+          icons: [
+            {text: '大模型问答', num: 0, imgSrc: midEightIcon, route: '/askRequest'},
+            {
+              text: '更多场景扩展中',
+              imgSrc: midFourIcon,
+              route: 'showPopup',
+              textClass: 'midTextFthc'
+            }
+          ]
+        }
+      ],
+
     }
   },
-  // created() {
-  //     this.routeIconNum = setInterval(() => {
-  //         this.getAlgoAppOverviewLC();
-  //     }, 1000);
-  // },
+  created() {
+    this.getAlgoAppOverviewLC();
+  },
   methods: {
     getAlgoAppOverviewLC() {
-      getAlgoAppOverview(4).then(res => {
-        try {
+      getAlgoAppOverview(4)
+        .then(res => {
           if (res.code == 200) {
-            this.hatNum = res.data.hatNum;
-            this.seatBeltNum = res.data.seatBeltNum;
-            this.electFenceNum = res.data.electFenceNum;
-            this.InvoiceNum = res.data.InvoiceNum;
-            this.idCardNum = res.data.idCardNum;
-            this.textRecognitionNum = res.data.textRecognitionNum;
-            this.largeModelNum = res.data.largeModelNum;
-            this.faceRecognitionNum = res.data.faceRecognitionNum;
+            Object.assign(this, res.data);
           }
-        } catch (error) {
+        })
+        .catch(() => {
           this.$modal.msgError("算法应用次数获取失败，请刷新页面或者请求管理员");
-          this.$modal.closeLoading();
-
-        }
-      }).catch(error => {
-        this.$modal.msgError("算法应用次数获取失败，请刷新页面或者请求管理员");
-        this.$modal.closeLoading();
-      });
+        });
     },
-    goToAskRequest() {
-      this.$router.beforeEach((to, from, next) => {
-        if (from.path === '/askRequest') {
-          localStorage.clear();
-        }
-        next();
-      });
-      this.$router.push('/askRequest');
-    },
-    goToUpdateFace() {
-      this.$router.beforeEach((to, from, next) => {
-        if (from.path === '/updateFace') {
-          localStorage.clear();
-        }
-        next();
-      });
-      this.$router.push('/updateFace');
+    handleClick(route) {
+      if (route === 'showPopup') {
+        this.showPopup();
+      } else {
+        this.$router.push(route);
+      }
     },
     showPopup() {
       const h = this.$createElement;
@@ -185,132 +139,69 @@ export default {
         title: '睿思AI平台',
         message: h('i', {style: 'color: teal'}, '功能还在继续开发中，敬请期待！')
       });
-    },
-    goToText() {
-      this.$router.beforeEach((to, from, next) => {
-        if (from.path === '/Text') {
-
-          localStorage.clear();
-        }
-        next();
-      });
-      this.$router.push('/Text');
-    },
-    goToUpdateIDCard() {
-      this.$router.beforeEach((to, from, next) => {
-        if (from.path === '/updateIDCard') {
-          localStorage.clear();
-        }
-        next();
-      });
-
-      this.$router.push('/updateIDCard');
-    },
-    goToViolation() {
-      this.$router.beforeEach((to, from, next) => {
-        if (from.path === '/Violation') {
-          localStorage.clear();
-        }
-        next();
-      });
-      this.$router.push('/Violation');
-    },
-    goToVideo() {
-      this.$router.beforeEach((to, from, next) => {
-        if (from.path === '/Video') {
-          localStorage.clear();
-        }
-        next();
-      });
-      this.$router.push('/Video');
-    },
+    }
   }
 }
 </script>
 
-<style scoped>
-.boxMidTwoc {
+<style lang="scss">
+.box {
   border-radius: 1%;
-  flex: 8;
-  margin-bottom: 1%;
-  height: 15rem;
+  height: 33.333333%;
   border: 1px solid rgba(0, 255, 255, .3);
-}
+  margin-bottom: 1%;
 
-.boxMidLevelThreec {
-  position: absolute;
-  color: #ffffff;
-  padding-left: 1.5rem;
-  padding-top: 0.5rem;
-  font-size: 1rem;
-  letter-spacing: 0.2rem;
-  opacity: .8;
-}
+  .box-title {
+    height: 15%;
+    width: 100%;
+    color: #ffffff;
+    padding: 1%;
+    font-size: 1rem;
+    letter-spacing: 0.2rem;
+    opacity: .8;
+  }
 
-.midIconMainc {
-  color: #ffffff;
-  display: flex;
-  margin-top: 2.5rem;
-  height: 9rem;
-  width: 100%;
-}
+  .box-container {
+    height: 85%;
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
 
-.midIconc {
-  flex: 1;
-  padding-left: 1rem;
-  padding-top: 1.5rem;
-  height: 7.5rem;
+    .box-container-ico {
+      height: 90%;
+      width: 20%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
 
-}
+      .box-container-ico-img {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
 
-.midIconLinkPicc {
-  margin-top: -2rem;
-  margin-left: 0.8rem;
-  height: 8rem;
-}
+        img {
+          height: 90%;
+          width: 60%;
+        }
+      }
 
-.midTextc {
-  margin-left: 1rem;
-  font-size: 1.2rem;
-  opacity: .5;
-}
+      .box-container-ico-text {
+        font-size: 18px;
+        margin-left: 0.4rem;
+        color: #fff;
+      }
 
-.hatInsertc {
-  margin-left: 2.5rem;
-  font-size: 0.8rem;
-}
-
-.hatInsertc .bigTextc {
-  font-size: 1.9rem;
-}
-
-.hatInsertc .smallTextc {
-  font-size: 1rem;
-  margin-left: 0.4rem;
-}
-
-.midTextSecc {
-  margin-left: 0.5rem
-}
-
-.midTextTrdc {
-  margin-left: 0;
-}
-
-.midTextFthc {
-  margin-left: -0.3rem;
-}
-
-.midTextFithc {
-  margin-left: 1.5rem;
-}
-
-.midTextSthc {
-  margin-left: 0.7rem;
-
-}
-
-.midTextSevthc {
-  margin-left: 1.8rem;
+      .box-container-ico-num {
+        font-size: 18px;
+        height: 10%;
+        margin-top: 0.4rem;
+        color: #fff;
+      }
+    }
+  }
 }
 </style>