Bonus-AI-LargeScreen/src/views/largeScreen/routeIcon.vue

<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>
            <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>
</template>

<script>
import {getAlgoAppOverview} from '@/api/largeScreen/largeScreen.js'

export default {
  name: 'routeIcon',
  data() {
    return {
      hatNum: 0,
      seatBeltNum: 0,
      electFenceNum: 0,
      InvoiceNum: 0,
      idCardNum: 0,
      textRecognitionNum: 0,
      largeModelNum: 0,
      faceRecognitionNum: 0,
      routeIconNum: ''
    }
  },
  // created() {
  //     this.routeIconNum = setInterval(() => {
  //         this.getAlgoAppOverviewLC();
  //     }, 1000);
  // },
  methods: {
    getAlgoAppOverviewLC() {
      getAlgoAppOverview(4).then(res => {
        try {
          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;
          }
        } catch (error) {
          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');
    },
    showPopup() {
      const h = this.$createElement;
      this.$notify({
        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 {
  border-radius: 1%;
  flex: 8;
  margin-bottom: 1%;
  height: 15rem;
  border: 1px solid rgba(0, 255, 255, .3);
}

.boxMidLevelThreec {
  position: absolute;
  color: #ffffff;
  padding-left: 1.5rem;
  padding-top: 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.2rem;
  opacity: .8;
}

.midIconMainc {
  color: #ffffff;
  display: flex;
  margin-top: 2.5rem;
  height: 9rem;
  width: 100%;
}

.midIconc {
  flex: 1;
  padding-left: 1rem;
  padding-top: 1.5rem;
  height: 7.5rem;

}

.midIconLinkPicc {
  margin-top: -2rem;
  margin-left: 0.8rem;
  height: 8rem;
}

.midTextc {
  margin-left: 1rem;
  font-size: 1.2rem;
  opacity: .5;
}

.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;
}
</style>