hlt_gis_admin/src/views/dashboard/workbench/component/TopCardStatistic.vue

<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-09-13 10:06:22
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2024-03-04 14:20:36
 * @FilePath: \xld-gis-admin\src\views\dashboard\workbench\component\TopCardStatistic.vue
 * @Description: 统计卡片
-->
<template>
  <div class="card-statistic">
    <div class="card card1">
      <div class="data">
        <span class="label">数据容量</span>
        <span class="value">{{ dataSize }}GB</span>
      </div>
    </div>
    <div class="card card2">
      <div class="data">
        <span class="label">资源种类</span>
        <span class="value">{{ dataType }}类</span>
      </div>
    </div>
    <div class="card card3">
      <div class="data">
        <span class="label">支撑应用</span>
        <span class="value">{{ analysisProject }}个</span>
      </div>
    </div>
    <div class="card card4">
      <div class="data">
        <span class="label">资源访问</span>
        <span class="value">{{ supportNum }}次</span>
      </div>
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent, onMounted, toRefs, onUnmounted, nextTick, reactive } from 'vue';
import {
  queryApiUseCountMouths,
  querySupportApp,
  querySourceAccess,
  QueryDRResourceFileSize,
} from '/@/api/interface/interface';
import { list } from '/@/api/authorize/authorize';
import { GetIServerRequestCount } from '/@/api/dashboard/index';

export default defineComponent({
  name: 'TopCardStatistic',
  components: {},
  props: {
    statisticData: {
      type: Array,
      default: () => [],
    },
  },

  setup(props) {
    const data = reactive({
      interval: null,
      statisticData: props.statisticData,
      dataSize: '-',
      dataType: '5',
      analysisProject: '-',
      supportNum: '-',
    });

    nextTick(() => {});
    /**
     * 查询数据
     */
    const queryData = async () => {
      let supportNum = 0;
      let analysisProject = 0;
      // const res = await queryApiUseCountMouths({});
      let sysRes = await list({});
      let supportNumRes = await GetIServerRequestCount();
      if (supportNumRes && supportNumRes.resp_code === 0) {
        for(let item in supportNumRes.datas){
          supportNumRes.datas[item].map(op=>{
            supportNum += op['SUM(COUNT)']
          })
        }
      }
      if (sysRes) {
        analysisProject = sysRes.length;
      }
      data.analysisProject = analysisProject;
      data.supportNum = supportNum;
      //(1)数据容量统计 文件个数字段sumcount（SUMCOUNT）,文件大小字段SUMSIZE
      const sizeRes = await QueryDRResourceFileSize({}) as any;
      if(sizeRes && sizeRes.length >0){
        let sumSize = 0
        sizeRes.map(item=>{
          sumSize += item.SUMSIZE
        })
        data.dataSize = parseFloat(sumSize.toFixed(2))
      }

      // //（2）查询支撑应用
      // const res2 = await querySupportApp() as any
      // if(res2) {
      //   //支撑数据
      // }

      // //（3）查询资源访问
      // const res3 = await querySourceAccess({}) as any
      // if(res3 && res3.resp_cod === 0){}
    };

    onMounted(() => {
      if (data.interval) clearInterval(data.interval);
      data.interval = setInterval(() => {
        queryData();
      }, 3000);
    });

    onUnmounted(() => {
      if (data.interval) clearInterval(data.interval);
    });

    return {
      ...toRefs(data),
      queryData,
    };
  },
});
</script>
  <style lang="less" scoped>
.card-statistic {
  height: 100%;
  width: 100%;
  display: flex;
  padding: 1rem 0;
  .card {
    display: flex;
    height: 100%;
    width: calc(100% - 3rem);
    margin: 0 3rem;
    justify-content: flex-end;
    align-items: center;
    background-size: 100% 100%;
    .data {
      height: 60%;
      width: 36%;
      .label {
        display: flex;
        width: 100%;
        height: 2rem;
        font-family: Source Han Sans CN;
        font-size: 1.112rem;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        color: #333333;
      }
      .value {
        display: flex;
        width: 100%;
        height: 2rem;
        font-family: Source Han Sans CN;
        font-size: 1.412rem;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0em;
        color: #333333;
      }
    }
  }
  .card1 {
    background-image: url('./images/data-size.png');
  }
  .card2 {
    background-image: url('./images/data-type.png');
  }
  .card3 {
    background-image: url('./images/support-analysis.png');
  }
  .card4 {
    background-image: url('./images/support-data.png');
  }
}
</style>