integrated_traffic_vue/src/views/index/components/count.vue

<template>
  <el-row :gutter="10">
    <el-col :span="9">
      <el-card>
        <div class="flex">
          <div class="img">
            <img src="/src/assets/images/index/icon1.png" alt="" />
          </div>
          <div
            @click="
              router.push({
                path: '/hidden_danger_government/ledger',
                query: { STATE: '4' },
              })
            "
          >
            <span>已验收</span>
            <count-to :end-val="data.hidCount.yys" />
          </div>
          <div
            @click="
              router.push({
                path: '/hidden_danger_government/ledger',
                query: { STATE: '-1' },
              })
            "
          >
            <span>已超期</span>
            <count-to :end-val="data.hidCount.ycq" />
          </div>
          <div
            @click="
              router.push({ path: '/hidden_danger_government/rectification' })
            "
          >
            <span>待整改</span>
            <count-to :end-val="data.hidCount.dzg" />
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="9">
      <el-card>
        <div class="flex">
          <div class="img">
            <img src="/src/assets/images/index/icon2.png" alt="" />
          </div>
          <div @click="router.push({ path: '/risk_control/ledger' })">
            <span>存在风险</span>
            <count-to :end-val="data.riskCount.cnzfx" />
          </div>
          <div
            @click="router.push({ path: '/risk_control/identifying_parts' })"
          >
            <span>辨识部位</span>
            <count-to :end-val="data.riskCount.idcount" />
          </div>
          <div @click="router.push({ path: '/risk_control/risk_point' })">
            <span>风险点(单元)</span>
            <count-to :end-val="data.riskCount.unitcount" />
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <div class="flex">
          <div class="img">
            <img src="/src/assets/images/index/icon3.png" alt="" />
          </div>
          <div>
            <span>已使用存储</span>
            <count-to
              :end-val="(data.memoryUsage.total_usage / 1000 / 1000).toFixed(2)"
              :options="{ suffix: 'MB' }"
            />
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { getHiddenCount, getMemoryUsage } from "@/request/index.js";
import { reactive } from "vue";
import CountTo from "vue-countup-v3";
import { useRouter } from "vue-router";
import { getRiskManagement } from "@/request/large_screen_data_display.js";

const router = useRouter();
const data = reactive({
  hidCount: {
    dzg: 0,
    yys: 0,
    ycq: 0,
  },
  riskCount: {
    cnzfx: 0,
    idcount: 0,
    unitcount: 0,
  },
  memoryUsage: {
    total_usage: 0,
  },
});
const fnGetData = async () => {
  const { hidCount } = await getHiddenCount();
  const { riskCount } = await getRiskManagement();
  const { pd: memoryUsage } = await getMemoryUsage();
  data.hidCount = hidCount;
  data.riskCount = riskCount;
  data.memoryUsage = memoryUsage;
};
fnGetData();
</script>

<style scoped lang="scss">
img {
  width: 40px;
  height: 40px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  div:not(:first-child) {
    cursor: pointer;
  }

  .countup-wrap {
    padding-top: 10px;
    font-weight: bold;
    font-size: 20px;
  }
}
</style>