<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-09-13 10:06:22
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-09-15 21:46:43
 * @FilePath: \xld-gis-admin\src\views\dashboard\workbench\component\TopCardStatistic.vue
 * @Description: 统计卡片
-->
<template>
  <div class="ust-statistic">
    <div class="title">{{ title }}</div>

    <!-- <a-row type="flex" justify="space-between" class="cards">
      <a-col :span="7" class="card card1"></a-col>
      <a-col :span="7" class="card card2"></a-col>
      <a-col :span="7" class="card card3"></a-col>
      <a-col :span="7" class="card card4"></a-col>
      <a-col :span="7" class="card card5"></a-col>
      <a-col :span="7" class="card card6"></a-col>
    </a-row> -->
    <a-row :gutter="[16, 16]" class="cards">
      <a-col :span="8" class="card">
        <div class="card-info">
          <div class="bkg">
            <div class="img1"></div>
          </div>
          <div class="contenter">
            <div class="res-title">DOM影像</div>
            <div class="res-file">
              <div class="num">160</div>
              <div class="name">文件个数</div>
            </div>
            <div class="res-file">
              <div class="num">200GB</div>
              <div class="name">文件总大小</div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="8" class="card">
        <div class="card-info">
          <div class="bkg">
            <div class="img2"></div>
          </div>
          <div class="contenter">
            <div class="res-title">DEM高程数据</div>
            <div class="res-file">
              <div class="num">160</div>
              <div class="name">文件个数</div>
            </div>
            <div class="res-file">
              <div class="num">200GB</div>
              <div class="name">文件总大小</div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="8" class="card">
        <div class="card-info">
          <div class="bkg">
            <div class="img3"></div>
          </div>
          <div class="contenter">
            <div class="res-title">BIM数据</div>
            <div class="res-file">
              <div class="num">160</div>
              <div class="name">文件个数</div>
            </div>
            <div class="res-file">
              <div class="num">200GB</div>
              <div class="name">文件总大小</div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="8" class="card">
        <div class="card-info">
          <div class="bkg">
            <div class="img4"></div>
          </div>
          <div class="contenter">
            <div class="res-title">矢量数据</div>
            <div class="res-file">
              <div class="num">160</div>
              <div class="name">文件个数</div>
            </div>
            <div class="res-file">
              <div class="num">200GB</div>
              <div class="name">文件总大小</div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="8" class="card">
        <div class="card-info">
          <div class="bkg">
            <div class="img5"></div>
          </div>
          <div class="contenter">
            <div class="res-title">文件数据</div>
            <div class="res-file">
              <div class="num">{{ file.num }}</div>
              <div class="name">文件个数</div>
            </div>
            <div class="res-file">
              <div class="num">{{ file.size }}GB</div>
              <div class="name">文件总大小</div>
            </div>
          </div>
        </div>
      </a-col>
      <a-col :span="8" class="card">
        <div class="card-info">
          <div class="bkg">
            <div class="img6"></div>
          </div>
          <div class="contenter">
            <div class="res-title">其他数据</div>
            <div class="res-file">
              <div class="num">160</div>
              <div class="name">文件个数</div>
            </div>
            <div class="res-file">
              <div class="num">200GB</div>
              <div class="name">文件总大小</div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
    <script lang="ts">
import { defineComponent, onMounted, toRefs, onUnmounted, nextTick, reactive } from 'vue';
import { DataStoreGroupByStatistics } from '/@/api/interface/interface';

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

  setup(props) {
    const data = reactive({
      statisticData: props.statisticData,
      title: '非结构化统计',
      file:{
        num:'0',
        size:'0',
      }
    });

    nextTick(() => {});
    /**
     * 查数据
     */
    const queryData = async() => {
      const param = {}
      const res = await DataStoreGroupByStatistics(param)
      if(res && res.length > 0){
        data.file.num = res[0]['num']
        data.file.size = parseFloat(parseInt(res[0]['size'])/(1024*1024*1024)).toFixed(2)
      }
      console.log('文件数据统计',res,data.file)
    };
    onMounted(() => {
      queryData();
    });

    onUnmounted(() => {});

    return {
      ...toRefs(data),
      queryData,
    };
  },
});
</script>
    <style lang="less" scoped>
.ust-statistic {
  height: 100%;
  width: 100%;
  padding: 1rem;
  .title {
    height: 1.2rem;
    font-family: Source Han Sans CN;
    font-size: 1.012rem;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    color: #3d3d3d;
    margin-bottom: 1.2rem;
  }
  .cards {
    height: calc(100% - 1.6rem);
    .card {
      height: calc(50% - 1rem);
      padding: 0 0.8rem;
      .card-info {
        display: flex;
        justify-content: center;
        height: 100%;
        width: 100%;
        //border: 0.1rem dashed #d2d2d2;
        background-size: 100% 100%;
        .bkg {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 6.32rem;
          width: 6.32rem;
          border-radius: 50%;
          background: rgba(205, 228, 248, 0.8);
          z-index: 4;
          border: 0.392rem solid #fff;
          .img1 {
            height: calc(100% - 3.6rem);
            width: calc(100% - 3rem);
            background-size: 100% 100%;
            background-image: url('./images/VIDEO.png');
          }
          .img2 {
            height: calc(100% - 3.3rem);
            width: calc(100% - 3rem);
            background-size: 100% 100%;
            background-image: url('./images/DEM.png');
          }
          .img3 {
            height: calc(100% - 3rem);
            width: calc(100% - 2.9rem);
            background-size: 100% 100%;
            background-image: url('./images/BIM.png');
          }
          .img4 {
            height: calc(100% - 3.2rem);
            width: calc(100% - 3rem);
            background-size: 100% 100%;
            background-image: url('./images/VECTOR.png');
          }
          .img5 {
            height: calc(100% - 3.2rem);
            width: calc(100% - 2.9rem);
            background-size: 100% 100%;
            background-image: url('./images/FILE.png');
          }
          .img6 {
            height: calc(100% - 3.2rem);
            width: calc(100% - 3rem);
            background-size: 100% 100%;
            background-image: url('./images/OTHER.png');
          }
        }
        .contenter {
          position: absolute;
          height: calc(100% - 3.16rem);
          width: calc(100% - 1.6rem);
          padding: 3.6rem 1rem 1rem 1rem;
          bottom: 0;
          z-index: 3;
          border-radius: 0.3112rem;
          background: linear-gradient(190deg, rgba(235, 243, 252, 1), rgba(235, 243, 252, 0.5));

          font-family: Source Han Sans CN;
          font-size: 1.112rem;
          font-weight: bold;
          line-height: normal;
          text-align: center;
          letter-spacing: 0em;
          color: #333333;
          .res-title {
            font-size: 1.112rem;
            font-weight: 500;
            color: #3d3d3d;
            margin-bottom: 0.6rem;
          }
          .res-file {
            height: 40%;
            align-items: center;
            font-family: Source Han Sans CN;
            font-size: 1.312rem;
            font-weight: bold;
            line-height: normal;
            text-align: center;
            letter-spacing: 0em;
            color: #333333;
            padding: 10% 0;
            .num {
              width: 100%;
              font-size: 1.312rem;
              margin-bottom: 0.2rem;
            }
            .name {
              width: 100%;
              font-size: 1rem;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
    