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

<template>
  <div class="body-container">
    <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>
    </div>
  </div>
</template>

<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',
  data() {
    return {
      hatNum: 0,
      seatBeltNum: 0,
      electFenceNum: 0,
      InvoiceNum: 0,
      idCardNum: 0,
      textRecognitionNum: 0,
      largeModelNum: 0,
      faceRecognitionNum: 0,
      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.getAlgoAppOverviewLC();
  },
  methods: {
    getAlgoAppOverviewLC() {
      getAlgoAppOverview(4)
        .then(res => {
          if (res.code == 200) {
            Object.assign(this, res.data);
          }
        })
        .catch(() => {
          this.$modal.msgError("算法应用次数获取失败，请刷新页面或者请求管理员");
        });
    },
    handleClick(route) {
      if (route === 'showPopup') {
        this.showPopup();
      } else {
        this.$router.push(route);
      }
    },
    showPopup() {
      const h = this.$createElement;
      this.$notify({
        title: '睿思AI平台',
        message: h('i', {style: 'color: teal'}, '功能还在继续开发中，敬请期待！')
      });
    }
  }
}
</script>

<style lang="scss">
.box {
  border-radius: 1%;
  height: 33.333333%;
  border: 1px solid rgba(0, 255, 255, .3);
  margin-bottom: 1%;

  .box-title {
    height: 15%;
    width: 100%;
    color: #ffffff;
    padding: 1%;
    font-size: 1rem;
    letter-spacing: 0.2rem;
    opacity: .8;
  }

  .box-container {
    height: 85%;
    width: 100%;
    display: flex;
    justify-content: flex-start;

    .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;

        img {
          height: 90%;
          width: 60%;
        }
      }

      .box-container-ico-text {
        font-size: 18px;
        margin-left: 0.4rem;
        color: #fff;
      }

      .box-container-ico-num {
        font-size: 18px;
        height: 10%;
        margin-top: 0.4rem;
        color: #fff;
      }
    }
  }
}
</style>