修改非结构化数据

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

@@ -2,381 +2,211 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2023-09-13 10:06:22
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2024-03-07 10:16:30
+ * @LastEditTime: 2024-03-18 14:13:18
  * @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 ref="domRef" style="height: calc(100% - 40px); width: 100%" 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">{{dataTypeStatistic[0].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[0].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+    <a-row 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-first">DOM数据</div>
+            <div class="res-file-first">
+              <div class="name">L1级别</div>
+              <div class="num_left">{{ dataTypeStatistic[0].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[0].size }}<span class="unit">GB</span></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">{{dataTypeStatistic[1].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[1].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+            <div class="res-file-first">
+              <div class="name">L2级别</div>
+              <div class="num_left">{{ dataTypeStatistic[1].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[1].size }}<span class="unit">GB</span></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">{{dataTypeStatistic[2].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[2].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+            <div class="res-file-first"> 
+              <div class="name">L3级别</div>
+              <div class="num_left">{{ dataTypeStatistic[2].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[2].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
+          </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">{{dataTypeStatistic[3].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[3].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <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-first">DEM数据</div>
+            <div class="res-file-first">
+              <div class="name">L1级别</div>
+              <div class="num_left">{{ dataTypeStatistic[3].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[3].size }}<span class="unit">GB</span></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">{{dataTypeStatistic[4].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[4].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+            <div class="res-file-first">
+              <div class="name">L2级别</div>
+              <div class="num_left">{{ dataTypeStatistic[4].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[4].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
+            <div class="res-file-first">
+              <div class="name">L3级别</div>
+              <div class="num_left">{{ dataTypeStatistic[5].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[5].size }}<span class="unit">GB</span></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">{{dataTypeStatistic[5].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[5].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <a-col :span="8" class="card">
+        <div class="card-info">
+          <div class="bkg">
+            <div class="img3" style="height:calc(100% - 1.4rem)"></div>
+          </div>
+          <div class="contenter">
+            <div class="res-title-first">BIM数据</div>
+            <div class="res-file-first">
+              <div class="name">L2级别</div>
+              <div class="num_left">{{ dataTypeStatistic[6].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[6].size }}<span class="unit">GB</span></div>
+            </div>
+            <div class="res-file-first">
+              <div class="name">L2级别</div>
+              <div class="num_left">{{ dataTypeStatistic[7].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[7].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
-          <!-- <tempalte v-for="(item, index) in dataTypeStatistic" :key="item.typeName">
-            <a-col v-if="index >= 0 && index < 6" :span="8" class="card">
-              <div class="card-info">
-                <div class="bkg">
-                  <div :class="item.imgClass"></div>
-                </div>
-                <div class="contenter">
-                  <div class="res-title">{{item.typeName}}</div>
-                  <div class="res-file">
-                    <div class="num">{{item.sun}}</div>
-                    <div class="name">文件个数</div>
-                  </div>
-                  <div class="res-file">
-                    <div class="num">{{item.size}} GB</div>
-                    <div class="name">文件大小</div>
-                  </div>
-                </div>
-              </div>
-            </a-col>
-          </tempalte> -->
-          
-        </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数据(L2级)</div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[6].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[6].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+            <div class="res-file-first">
+              <div class="name">L3+级别</div>
+              <div class="num_left">{{ dataTypeStatistic[8].sum }}<span class="unit">个</span></div>
+              <div class="num">{{ dataTypeStatistic[8].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
+          </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">{{dataTypeStatistic[7].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[7].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <a-col :span="8" class="card">
+        <div class="card-info">
+          <div class="bkg">
+            <div class="img4" style="height:calc(100% - 1.5rem)"></div>
+          </div>
+          <div class="contenter">
+            <div class="res-title">文件数据</div>
+            <div class="res-file">
+              <div class="name">个数</div>
+              <div class="num">{{ dataTypeStatistic[9].sum }}<span class="unit">个</span></div>
+            </div>
+            <div class="res-file">
+              <div class="name">大小</div>
+              <div class="num">{{ dataTypeStatistic[9].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
+          </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">{{dataTypeStatistic[8].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[8].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <a-col :span="8" class="card">
+        <div class="card-info">
+          <div class="bkg">
+            <div class="img5" style="height:calc(100% - 1.4rem)"></div>
+          </div>
+          <div class="contenter">
+            <div class="res-title">倾斜摄影</div>
+            <div class="res-file">
+              <div class="name">个数</div>
+              <div class="num">{{ dataTypeStatistic[10].sum }}<span class="unit">个</span></div>
             </div>
-          </a-col>
+            <div class="res-file">
+              <div class="name">大小</div>
+              <div class="num">{{ dataTypeStatistic[10].size }}<span class="unit">GB</span></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">{{dataTypeStatistic[9].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[9].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <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="name">个数</div>
+              <div class="num">{{ dataTypeStatistic[11].sum }}<span class="unit">个</span></div>
+            </div>
+            <div class="res-file">
+              <div class="name">大小</div>
+              <div class="num">{{ dataTypeStatistic[11].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
+          </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">{{dataTypeStatistic[10].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[10].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <a-col :span="8" class="card">
+        <div class="card-info">
+          <div class="bkg">
+            <div class="img7"></div>
+          </div>
+          <div class="contenter">
+            <div class="res-title">矢量数据</div>
+            <div class="res-file">
+              <div class="name">个数</div>
+              <div class="num">{{ dataTypeStatistic[12].sum }}<span class="unit">个</span></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">{{dataTypeStatistic[11].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[11].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+            <div class="res-file">
+              <div class="name">大小</div>
+              <div class="num">{{ dataTypeStatistic[12].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
-          <!-- <tempalte v-for="(item, x) in dataTypeStatistic" :key="item.typeName">
-            <a-col v-if="x>=6 && x < 12" :span="8" class="card">
-              <div class="card-info">
-                <div class="bkg">
-                  <div :class="item.imgClass"></div>
-                </div>
-                <div class="contenter">
-                  <div class="res-title">{{item.typeName}}</div>
-                  <div class="res-file">
-                    <div class="num">{{item.sun}}</div>
-                    <div class="name">文件个数</div>
-                  </div>
-                  <div class="res-file">
-                    <div class="num">{{item.size}} GB</div>
-                    <div class="name">文件大小</div>
-                  </div>
-                </div>
-              </div>
-            </a-col>
-          </tempalte> -->
-        </a-row>
-      </div>
+          </div>
+        </div>
+      </a-col>
 
-      <!-- 第三页 -->
-      <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">{{dataTypeStatistic[12].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[12].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <a-col :span="8" class="card">
+        <div class="card-info">
+          <div class="bkg">
+            <div class="img8"></div>
+          </div>
+          <div class="contenter">
+            <div class="res-title">条带数据</div>
+            <div class="res-file">
+              <div class="name">个数</div>
+              <div class="num">{{ dataTypeStatistic[13].sum }}<span class="unit">个</span></div>
+            </div>
+            <div class="res-file">
+              <div class="name">大小</div>
+              <div class="num">{{ dataTypeStatistic[13].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
+          </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">{{dataTypeStatistic[13].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[13].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+      <a-col :span="8" class="card">
+        <div class="card-info">
+          <div class="bkg">
+            <div class="img9"></div>
+          </div>
+          <div class="contenter">
+            <div class="res-title">其他数据</div>
+            <div class="res-file">
+              <div class="name">个数</div>
+              <div class="num">{{ dataTypeStatistic[14].sum }}<span class="unit">个</span></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">{{dataTypeStatistic[14].sum}}</div>
-                  <div class="name">文件个数</div>
-                </div>
-                <div class="res-file">
-                  <div class="num">{{dataTypeStatistic[14].size}}GB</div>
-                  <div class="name">文件大小</div>
-                </div>
-              </div>
+            <div class="res-file">
+              <div class="name">大小</div>
+              <div class="num">{{ dataTypeStatistic[14].size }}<span class="unit">GB</span></div>
             </div>
-          </a-col>
-          <!-- <tempalte v-for="(item, y) in dataTypeStatistic" :key="item.typeName">
-            <a-col v-if="y>=12 && y < dataTypeStatistic.length" :span="8" class="card">
-              <div class="card-info">
-                <div class="bkg">
-                  <div :class="item.imgClass"></div>
-                </div>
-                <div class="contenter">
-                  <div class="res-title">{{item.typeName}}</div>
-                  <div class="res-file">
-                    <div class="num">{{item.sun}}</div>
-                    <div class="name">文件个数</div>
-                  </div>
-                  <div class="res-file">
-                    <div class="num">{{item.size}} GB</div>
-                    <div class="name">文件大小</div>
-                  </div>
-                </div>
-              </div>
-            </a-col>
-          </tempalte> -->
-        </a-row>
-      </div>
-    </a-carousel>
+          </div>
+        </div>
+      </a-col>
+    </a-row>
   </div>
 </template>
     <script lang="ts">
-import { defineComponent, onMounted, toRefs, onUnmounted, nextTick, reactive,ref } from 'vue';
-import {
-  DataStoreGroupByStatistics,
-  QueryDRResourceFileSize,
-} from '/@/api/interface/interface';
+import { defineComponent, onMounted, toRefs, onUnmounted, nextTick, reactive, ref } from 'vue';
+import { DataStoreGroupByStatistics, QueryDRResourceFileSize } from '/@/api/interface/interface';
 
 export default defineComponent({
   name: 'UnstructuredStatistic',
@@ -389,8 +219,8 @@ export default defineComponent({
   },
 
   setup(props) {
-    const domRef=ref(null)
-    const intervalId = ref()
+    const domRef = ref(null);
+    const intervalId = ref();
     const data = reactive({
       statisticData: props.statisticData,
       title: '非结构化统计',
@@ -408,12 +238,12 @@ export default defineComponent({
         { typeName: 'BIM数据(L2级)', typeAlias: 'BIML2', sum: 0, size: 0, imgClass: 'img3' },
         { typeName: 'BIM数据(L3级)', typeAlias: 'BIML3', sum: 0, size: 0, imgClass: 'img3' },
         { typeName: 'BIM数据(L3+)', typeAlias: 'BIML3+', sum: 0, size: 0, imgClass: 'img3' },
-        { typeName: '工程图纸', typeAlias: 'jpg文件', sum: 0, size: 0, imgClass: 'img5' },
-        { typeName: '倾斜摄影', typeAlias: '倾斜摄影', sum: 0, size: 0, imgClass: 'img6' },
-        { typeName: '激光点云', typeAlias: '激光点云', sum: 0, size: 0, imgClass: 'img4' },
-        { typeName: '矢量数据', typeAlias: 'shp文件', sum: 0, size: 0, imgClass: 'img4' },
-        { typeName: '条带数据', typeAlias: 'tiff文件', sum: 0, size: 0, imgClass: 'img5' },
-        { typeName: '其他数据', typeAlias: '其他', sum: 0, size: 0, imgClass: 'img6' },
+        { typeName: '工程图纸', typeAlias: 'jpg文件', sum: 0, size: 0, imgClass: 'img4' },
+        { typeName: '倾斜摄影', typeAlias: '倾斜摄影', sum: 0, size: 0, imgClass: 'img5' },
+        { typeName: '激光点云', typeAlias: '激光点云', sum: 0, size: 0, imgClass: 'img6' },
+        { typeName: '矢量数据', typeAlias: 'shp文件', sum: 0, size: 0, imgClass: 'img7' },
+        { typeName: '条带数据', typeAlias: 'tiff文件', sum: 0, size: 0, imgClass: 'img8' },
+        { typeName: '其他数据', typeAlias: '其他', sum: 0, size: 0, imgClass: 'img9' },
       ],
     });
 
@@ -429,30 +259,28 @@ export default defineComponent({
         data.file.size = parseFloat(parseInt(res[0]['size']) / (1024 * 1024 * 1024)).toFixed(2);
       }
 
-      const res2 = await QueryDRResourceFileSize({}) as any;
-      //文件个数字段sumcount（SUMCOUNT）,文件大小字段SUMSIZE
+      const res2 = (await QueryDRResourceFileSize({})) as any;
+      //个数字段sumcount（SUMCOUNT）,大小字段SUMSIZE
       console.log('非结构化数据分类统计', res2);
-      if(res2 && res2.length >0){
-        data.dataTypeStatistic.forEach(item => {
-          let obj = res2.find(r=>r.NAME === item.typeAlias)
-          if(obj){
-            item.sum = obj?.SUMCOUNT
-            item.size = obj?.SUMSIZE
+      if (res2 && res2.length > 0) {
+        data.dataTypeStatistic.forEach((item) => {
+          let obj = res2.find((r) => r.NAME === item.typeAlias);
+          if (obj) {
+            item.sum = obj?.SUMCOUNT;
+            item.size = obj?.SUMSIZE;
           }
         });
       }
-
-
     };
     onMounted(() => {
       queryData();
-      intervalId.value = setInterval(()=>{
-        if(domRef.value)domRef.value.next()
-      },6000)
+      intervalId.value = setInterval(() => {
+        if (domRef.value) domRef.value.next();
+      }, 6000);
     });
 
     onUnmounted(() => {
-      if(intervalId.value) clearInterval(intervalId.value)
+      if (intervalId.value) clearInterval(intervalId.value);
     });
 
     return {
@@ -479,112 +307,180 @@ export default defineComponent({
     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 {
+  .cards {
+    height: calc(100% - 1.6rem);
+    .card {
+      height: calc(33% - 0.8rem);
+      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;
-          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: 4.32rem;
+          width: 4.32rem;
+          border-radius: 50%;
+          background: rgba(205, 228, 248, 0.8);
+          z-index: 4;
+          border: 0.212rem solid #fff;
+          .img1 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/VIDEO.png');
+          }
+          .img2 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/DEM.png');
+          }
+          .img3 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/BIM.png');
+          }
+          .img4 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/FILE.png');
+          }
+          .img5 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/QXSY.png');
+          }
+          .img6 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/DY.png');
+          }
+          .img7 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/VECTOR.png');
+          }
+          .img8 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/TD.png');
+          }
+          .img9 {
+            height: calc(100% - 2.1rem);
+            width: calc(100% - 1.5rem);
+            background-size: 100% 100%;
+            background-image: url('./images/OTHER.png');
+          }
+        }
+        .contenter {
+          position: absolute;
+          height: calc(100% - 2rem);
+          width: calc(100% - 1.6rem);
+          padding: 2.4rem 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: 16px;
+            font-weight: 500;
+            color: #3d3d3d;
+            margin-bottom: 1.812rem;
+          }
+          .res-file {
+            height: 36%;
+            padding: 0 10px;
             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');
+            font-family: Source Han Sans CN;
+            // font-size: 1.312rem;
+            font-weight: bold;
+            line-height: normal;
+            text-align: center;
+            letter-spacing: 0em;
+            color: #333333;
+            .num {
+              float: right;
+              width: 50%;
+              // font-size: 1.312rem;
+              font-size: 16px;
+              margin-bottom: 0.2rem;
+              text-align: end;
+              .unit {
+                font-size: 12px;
+                font-weight: 200;
+              }
             }
-            .img6 {
-              height: calc(100% - 3.2rem);
-              width: calc(100% - 3rem);
-              background-size: 100% 100%;
-              background-image: url('./images/OTHER.png');
+            .name {
+              float: left;
+              width: 50%;
+              font-size: 14px;
+              // font-weight: 500;
+              text-align: start;
             }
           }
-          .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));
-
+          .res-title-first {
+            font-size: 16px;
+            font-weight: 500;
+            color: #3d3d3d;
+            margin-bottom: 0.8rem;
+          }
+          .res-file-first{
+            height: 28%;
+            align-items: center;
             font-family: Source Han Sans CN;
-            font-size: 1.112rem;
+            // font-size: 1.312rem;
             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;
+            .name {
+              float: left;
+              width: 40%;
+              font-size: 14px;
+              text-align: start;
             }
-            .res-file {
-              height: 40%;
-              align-items: center;
-              font-family: Source Han Sans CN;
-              font-size: 1.312rem;
-              font-weight: bold;
-              line-height: normal;
+            .num_left {
+              float: left;
+              width: 30%;
+              font-size: 16px;
+              margin-bottom: 0.2rem;
               text-align: center;
-              letter-spacing: 0em;
-              color: #333333;
-              padding: 10% 0;
-              .num {
-                width: 100%;
-                font-size: 1.312rem;
-                margin-bottom: 0.2rem;
+              .unit {
+                font-size: 12px;
+                font-weight: 200;
               }
-              .name {
-                width: 100%;
-                font-size: 1rem;
-                font-weight: 500;
+            }
+            .num {
+              float: right;
+              width: 30%;
+              font-size: 16px;
+              margin-bottom: 0.2rem;
+              text-align: end;
+              .unit {
+                font-size: 12px;
+                font-weight: 200;
               }
             }
           }

src/views/dashboard/workbench/component/UnstructuredStatistic_f_bk.vue

@@ -0,0 +1,632 @@
+<!--
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2023-09-13 10:06:22
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2024-03-18 09:33:23
+ * @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 ref="domRef" style="height: calc(100% - 40px); width: 100%" 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">{{dataTypeStatistic[0].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[0].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="img1"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">DOM数据(L2级)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[1].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[1].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="img1"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">DOM数据(L3级)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[2].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[2].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="img2"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">DEM数据(L1级)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[3].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[3].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="img2"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">DEM数据(L2级)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[4].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[4].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="img2"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">DEM数据(L3级)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[5].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[5].size}}GB</div>
+                  <div class="name">文件大小</div>
+                </div>
+              </div>
+            </div>
+          </a-col>
+          <!-- <tempalte v-for="(item, index) in dataTypeStatistic" :key="item.typeName">
+            <a-col v-if="index >= 0 && index < 6" :span="8" class="card">
+              <div class="card-info">
+                <div class="bkg">
+                  <div :class="item.imgClass"></div>
+                </div>
+                <div class="contenter">
+                  <div class="res-title">{{item.typeName}}</div>
+                  <div class="res-file">
+                    <div class="num">{{item.sun}}</div>
+                    <div class="name">文件个数</div>
+                  </div>
+                  <div class="res-file">
+                    <div class="num">{{item.size}} GB</div>
+                    <div class="name">文件大小</div>
+                  </div>
+                </div>
+              </div>
+            </a-col>
+          </tempalte> -->
+          
+        </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数据(L2级)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[6].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[6].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="img3"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">BIM数据(L3级)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[7].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[7].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="img3"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">BIM数据(L3+)</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[8].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[8].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="img5"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">工程图纸</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[9].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[9].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">{{dataTypeStatistic[10].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[10].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="img4"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">激光点云</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[11].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[11].size}}GB</div>
+                  <div class="name">文件大小</div>
+                </div>
+              </div>
+            </div>
+          </a-col>
+          <!-- <tempalte v-for="(item, x) in dataTypeStatistic" :key="item.typeName">
+            <a-col v-if="x>=6 && x < 12" :span="8" class="card">
+              <div class="card-info">
+                <div class="bkg">
+                  <div :class="item.imgClass"></div>
+                </div>
+                <div class="contenter">
+                  <div class="res-title">{{item.typeName}}</div>
+                  <div class="res-file">
+                    <div class="num">{{item.sun}}</div>
+                    <div class="name">文件个数</div>
+                  </div>
+                  <div class="res-file">
+                    <div class="num">{{item.size}} GB</div>
+                    <div class="name">文件大小</div>
+                  </div>
+                </div>
+              </div>
+            </a-col>
+          </tempalte> -->
+        </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">{{dataTypeStatistic[12].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[12].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="img5"></div>
+              </div>
+              <div class="contenter">
+                <div class="res-title">条带数据</div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[13].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[13].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">{{dataTypeStatistic[14].sum}}</div>
+                  <div class="name">文件个数</div>
+                </div>
+                <div class="res-file">
+                  <div class="num">{{dataTypeStatistic[14].size}}GB</div>
+                  <div class="name">文件大小</div>
+                </div>
+              </div>
+            </div>
+          </a-col>
+          <!-- <tempalte v-for="(item, y) in dataTypeStatistic" :key="item.typeName">
+            <a-col v-if="y>=12 && y < dataTypeStatistic.length" :span="8" class="card">
+              <div class="card-info">
+                <div class="bkg">
+                  <div :class="item.imgClass"></div>
+                </div>
+                <div class="contenter">
+                  <div class="res-title">{{item.typeName}}</div>
+                  <div class="res-file">
+                    <div class="num">{{item.sun}}</div>
+                    <div class="name">文件个数</div>
+                  </div>
+                  <div class="res-file">
+                    <div class="num">{{item.size}} GB</div>
+                    <div class="name">文件大小</div>
+                  </div>
+                </div>
+              </div>
+            </a-col>
+          </tempalte> -->
+        </a-row>
+      </div>
+    </a-carousel>
+  </div>
+</template>
+    <script lang="ts">
+import { defineComponent, onMounted, toRefs, onUnmounted, nextTick, reactive,ref } from 'vue';
+import {
+  DataStoreGroupByStatistics,
+  QueryDRResourceFileSize,
+} from '/@/api/interface/interface';
+
+export default defineComponent({
+  name: 'UnstructuredStatistic',
+  components: {},
+  props: {
+    statisticData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  setup(props) {
+    const domRef=ref(null)
+    const intervalId = ref()
+    const data = reactive({
+      statisticData: props.statisticData,
+      title: '非结构化统计',
+      file: {
+        num: '0',
+        size: '0',
+      },
+      dataTypeStatistic: [
+        { typeName: 'DOM影像(L1级)', typeAlias: 'DOML1级', sum: 0, size: 0, imgClass: 'img1' },
+        { typeName: 'DOM影像(L2级)', typeAlias: 'DOML2级', sum: 0, size: 0, imgClass: 'img1' },
+        { typeName: 'DOM影像(L3级)', typeAlias: 'DOML3级', sum: 0, size: 0, imgClass: 'img1' },
+        { typeName: 'DEM高程数据(L1级)', typeAlias: 'DEML1级', sum: 0, size: 0, imgClass: 'img2' },
+        { typeName: 'DEM高程数据(L2级)', typeAlias: 'DEML2级', sum: 0, size: 0, imgClass: 'img2' },
+        { typeName: 'DEM高程数据(L3级)', typeAlias: 'DEML3级', sum: 0, size: 0, imgClass: 'img2' },
+        { typeName: 'BIM数据(L2级)', typeAlias: 'BIML2', sum: 0, size: 0, imgClass: 'img3' },
+        { typeName: 'BIM数据(L3级)', typeAlias: 'BIML3', sum: 0, size: 0, imgClass: 'img3' },
+        { typeName: 'BIM数据(L3+)', typeAlias: 'BIML3+', sum: 0, size: 0, imgClass: 'img3' },
+        { typeName: '工程图纸', typeAlias: 'jpg文件', sum: 0, size: 0, imgClass: 'img5' },
+        { typeName: '倾斜摄影', typeAlias: '倾斜摄影', sum: 0, size: 0, imgClass: 'img6' },
+        { typeName: '激光点云', typeAlias: '激光点云', sum: 0, size: 0, imgClass: 'img4' },
+        { typeName: '矢量数据', typeAlias: 'shp文件', sum: 0, size: 0, imgClass: 'img4' },
+        { typeName: '条带数据', typeAlias: 'tiff文件', sum: 0, size: 0, imgClass: 'img5' },
+        { typeName: '其他数据', typeAlias: '其他', sum: 0, size: 0, imgClass: 'img6' },
+      ],
+    });
+
+    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);
+      }
+
+      const res2 = await QueryDRResourceFileSize({}) as any;
+      //文件个数字段sumcount（SUMCOUNT）,文件大小字段SUMSIZE
+      console.log('非结构化数据分类统计', res2);
+      if(res2 && res2.length >0){
+        data.dataTypeStatistic.forEach(item => {
+          let obj = res2.find(r=>r.NAME === item.typeAlias)
+          if(obj){
+            item.sum = obj?.SUMCOUNT
+            item.size = obj?.SUMSIZE
+          }
+        });
+      }
+
+
+    };
+    onMounted(() => {
+      queryData();
+      intervalId.value = setInterval(()=>{
+        if(domRef.value)domRef.value.next()
+      },6000)
+    });
+
+    onUnmounted(() => {
+      if(intervalId.value) clearInterval(intervalId.value)
+    });
+
+    return {
+      domRef,
+      ...toRefs(data),
+      intervalId,
+      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>
+