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

<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-09-13 10:06:22
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2024-01-26 16:41:02
 * @FilePath: \xld-gis-admin\src\views\dashboard\workbench\component\TopCardStatistic.vue
 * @Description: 统计卡片
-->
<template>
  <div class="ust-statistic">
    <div class="title">{{ title }}</div>
    <!-- autoplay -->
    <a-carousel style="height: calc(100% - 40px); width: 100%" autoplay dotsClass="dotsClassBottom">
      <!-- 第一页 -->
      <div class="indiv">
        <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影像(L1级)</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="img1"></div>
              </div>
              <div class="contenter">
                <div class="res-title">DOM影像(L2级)</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="img1"></div>
              </div>
              <div class="contenter">
                <div class="res-title">DOM影像(L3级)</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高程数据(L1级)</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高程数据(L2级)</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高程数据(L3级)</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>
      <!-- 第二页 -->
      <div class="indiv">
        <a-row :gutter="[16, 16]" class="cards">
          <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数据(L1级)</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数据(L2级)</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数据(L3级)</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>

      <!-- 第三页 -->
      <div class="indiv">
        <a-row :gutter="[16, 16]" class="cards">
          <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>
    </a-carousel>
  </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;
  }
  .indiv {
    height: 100%;
    width: 100%;
    .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;
              }
            }
          }
        }
      }
    }
  }
}

::v-deep.ant-carousel {
  .slick-slider {
    height: 100%;
    width: 100%;
    .slick-list {
      height: 100%;
      width: 100%;
      .slick-track {
        height: 100%;
        width: 100%;
        .slick-current {
          height: 100%;
          width: 100%;
        }
        .slick-current > div:first-child {
          height: 100%;
          width: 100%;
        }
      }
    }
    .dotsClassBottom {
      li {
        button {
          background: #3d3d3d;
        }
      }
      .slick-active {
        button {
          background: #00ffff !important;
        }
      }
    }
  }
}
</style>