对接导入导出，优化页面UI

hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts

@@ -9,7 +9,8 @@ export enum carbonEmissionFactorLibrary {
   creat = '/carbon-smart/api/carbon/emission/type/creatOrUpdate',
   delTreeNode = '/carbon-smart/api/carbon/emission/type/del',
   move = '/carbon-smart/api/carbon/emission/type/move',
-  excel = '/carbon-smart/api/carbon/emission/factor/excel',
+  import = '/carbon-smart/api/carbon/emission/factor/import',
+  export = '/carbon-smart/api/carbon/emission/factor/export',
   // 单位管理
   dictionaryUnitManagement = '/carbon-smart/client/dict/dictionaryUnitManagement',
   findOutermost = '/carbon-smart/client/dict/findOutermost',
@@ -27,6 +28,8 @@ export enum energyConsumption {
   del = '/carbon-smart/api/carbon/stats/del',
   voucherDownloadList = '/carbon-smart/api/carbon/stats/voucherDownloadList',
   energyAcquisition = '/carbon-smart/api/carbon/stats/energyAcquisition',
+  import = '/carbon-smart/api/carbon/stats/import',
+  export = '/carbon-smart/api/carbon/stats/export',
 }
 // 碳排管理-碳排速算接口
 export enum quickCalculation {

hx-ai-intelligent/src/icon/carbonAssetsSearch-1.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="37px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -738 -62 )">
-    <path d="M 32 16.17637875390625  L 32 5  L 5 5  L 5 32  L 16.17637875390625 32  L 16.17637875390625 37  L 0 37  L 0 0  L 37 0  L 37 16.17637875390625  L 32 16.17637875390625  Z M 6.9478248789666415 18.66767607469059  C 6.9478248789666415 15.5442205297455  8.189402439205798 12.548862312376832  10.3991006171875 10.341327827148438  C 12.604273280037184 8.143662959434554  15.590626658621316 6.909656880840238  18.703907459282163 6.909656880840238  C 25.201454239889483 6.909656880840238  30.46875662920404 12.176959270154791  30.46875662920404 18.674506050762112  C 30.46875662920404 20.983959083452117  29.789040393343488 23.24233673232217  28.514333895507814 25.16813439941406  L 36.990756359375 33.66766596484375  L 33.6653550546875 36.99768908984375  L 25.18893259082031 28.49815752441406  C 23.267562429817577 29.7630406080517  21.01764204116391 30.43714706492497  18.717295869201017 30.43714706492497  C 12.217196527718643 30.43714706492497  6.9478248789666415 25.167775416172965  6.9478248789666415 18.66767607469059  Z M 18.53350819726563 25.387670972656252  L 18.526575466796874 25.387670972656245  C 18.537359653048604 25.387721182280185  18.54814394157355 25.387746287194187  18.558928244709044 25.387746287194187  C 22.396705336309363 25.387746287194187  25.50783837263873 22.27661325086481  25.50783837263873 18.438836159264497  C 25.50783837263873 14.601059067664185  22.396705336309363 11.48992603133481  18.558928244709044 11.48992603133481  C 14.72118056523231 11.48992603133481  11.610059711939467 14.601013165475232  11.610018117187504 18.438760844726563  C 11.6100055260099 18.44415500501238  11.609999230414665 18.449549178157536  11.609999230414665 18.45494335313865  C 11.609999230414665 22.280184472224335  14.70827046453852 25.38258105471001  18.53350819726563 25.387670972656252  Z " fill-rule="nonzero" fill="#e4793f" stroke="none" transform="matrix(1 0 0 1 738 62 )" />
-  </g>
-</svg>

hx-ai-intelligent/src/icon/carbonAssetsSearch-2.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="37px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -738 -62 )">
-    <path d="M 32 16.17637875390625  L 32 5  L 5 5  L 5 32  L 16.17637875390625 32  L 16.17637875390625 37  L 0 37  L 0 0  L 37 0  L 37 16.17637875390625  L 32 16.17637875390625  Z M 6.9478248789666415 18.66767607469059  C 6.9478248789666415 15.5442205297455  8.189402439205798 12.548862312376832  10.3991006171875 10.341327827148438  C 12.604273280037184 8.143662959434554  15.590626658621316 6.909656880840238  18.703907459282163 6.909656880840238  C 25.201454239889483 6.909656880840238  30.46875662920404 12.176959270154791  30.46875662920404 18.674506050762112  C 30.46875662920404 20.983959083452117  29.789040393343488 23.24233673232217  28.514333895507814 25.16813439941406  L 36.990756359375 33.66766596484375  L 33.6653550546875 36.99768908984375  L 25.18893259082031 28.49815752441406  C 23.267562429817577 29.7630406080517  21.01764204116391 30.43714706492497  18.717295869201017 30.43714706492497  C 12.217196527718643 30.43714706492497  6.9478248789666415 25.167775416172965  6.9478248789666415 18.66767607469059  Z M 18.53350819726563 25.387670972656252  L 18.526575466796874 25.387670972656245  C 18.537359653048604 25.387721182280185  18.54814394157355 25.387746287194187  18.558928244709044 25.387746287194187  C 22.396705336309363 25.387746287194187  25.50783837263873 22.27661325086481  25.50783837263873 18.438836159264497  C 25.50783837263873 14.601059067664185  22.396705336309363 11.48992603133481  18.558928244709044 11.48992603133481  C 14.72118056523231 11.48992603133481  11.610059711939467 14.601013165475232  11.610018117187504 18.438760844726563  C 11.6100055260099 18.44415500501238  11.609999230414665 18.449549178157536  11.609999230414665 18.45494335313865  C 11.609999230414665 22.280184472224335  14.70827046453852 25.38258105471001  18.53350819726563 25.387670972656252  Z " fill-rule="nonzero" fill="#e93f33" stroke="none" transform="matrix(1 0 0 1 738 62 )" />
-  </g>
-</svg>

hx-ai-intelligent/src/icon/carbonAssetsSearch-3.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="37px" xmlns="http://www.w3.org/2000/svg">
-  <g transform="matrix(1 0 0 1 -738 -62 )">
-    <path d="M 32 16.17637875390625  L 32 5  L 5 5  L 5 32  L 16.17637875390625 32  L 16.17637875390625 37  L 0 37  L 0 0  L 37 0  L 37 16.17637875390625  L 32 16.17637875390625  Z M 6.9478248789666415 18.66767607469059  C 6.9478248789666415 15.5442205297455  8.189402439205798 12.548862312376832  10.3991006171875 10.341327827148438  C 12.604273280037184 8.143662959434554  15.590626658621316 6.909656880840238  18.703907459282163 6.909656880840238  C 25.201454239889483 6.909656880840238  30.46875662920404 12.176959270154791  30.46875662920404 18.674506050762112  C 30.46875662920404 20.983959083452117  29.789040393343488 23.24233673232217  28.514333895507814 25.16813439941406  L 36.990756359375 33.66766596484375  L 33.6653550546875 36.99768908984375  L 25.18893259082031 28.49815752441406  C 23.267562429817577 29.7630406080517  21.01764204116391 30.43714706492497  18.717295869201017 30.43714706492497  C 12.217196527718643 30.43714706492497  6.9478248789666415 25.167775416172965  6.9478248789666415 18.66767607469059  Z M 18.53350819726563 25.387670972656252  L 18.526575466796874 25.387670972656245  C 18.537359653048604 25.387721182280185  18.54814394157355 25.387746287194187  18.558928244709044 25.387746287194187  C 22.396705336309363 25.387746287194187  25.50783837263873 22.27661325086481  25.50783837263873 18.438836159264497  C 25.50783837263873 14.601059067664185  22.396705336309363 11.48992603133481  18.558928244709044 11.48992603133481  C 14.72118056523231 11.48992603133481  11.610059711939467 14.601013165475232  11.610018117187504 18.438760844726563  C 11.6100055260099 18.44415500501238  11.609999230414665 18.449549178157536  11.609999230414665 18.45494335313865  C 11.609999230414665 22.280184472224335  14.70827046453852 25.38258105471001  18.53350819726563 25.387670972656252  Z " fill-rule="nonzero" fill="#3da1de" stroke="none" transform="matrix(1 0 0 1 738 62 )" />
-  </g>
-</svg>

hx-ai-intelligent/src/icon/carbonAssetsToDetail-1.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M15.8699 14.8395C16.0301 14.431 16.1182 13.9985 16.1182 13.558C16.1182 11.6116 14.5403 10.0257 12.594 10.0257C10.6476 10.0257 9.06971 11.6116 9.06971 13.558C9.06971 15.5043 10.6476 17.0902 12.594 17.0902C13.443 17.0902 14.2199 16.7778 14.8287 16.2732L16.9032 18.0273L18.0406 16.6817L15.8699 14.8395L15.8699 14.8395ZM12.586 15.3201C11.6168 15.3441 10.8078 14.5672 10.7838 13.59C10.7597 12.6128 11.5367 11.8038 12.5059 11.7798L12.586 11.7798C13.5631 11.8038 14.3321 12.6128 14.308 13.59C14.292 14.5431 13.5311 15.296 12.586 15.3201L12.586 15.3201ZM8.18862 13.5499C8.18862 11.115 10.167 9.13662 12.602 9.13662C13.2347 9.13662 13.8274 9.27279 14.3641 9.51308L14.3641 3.77013C14.3641 2.79295 13.5792 2 12.602 2L3.77531 2C2.79813 2 2.01318 2.78495 2.01318 3.77013L2.01318 15.3201C2.01318 16.2972 2.79813 17.0902 3.77531 17.0902L9.96678 17.0902C8.84543 16.2572 8.18864 14.9516 8.18864 13.5499L8.18862 13.5499ZM4.36001 5.50022L10.984 5.50022C11.3044 5.50022 11.5687 5.7325 11.5687 6.02085C11.5687 6.3092 11.3044 6.54148 10.984 6.54148L4.352 6.54148C4.03161 6.54148 3.7753 6.3092 3.7753 6.02085C3.7753 5.7325 4.03962 5.50022 4.36001 5.50022L4.36001 5.50022ZM4.36001 8.62399L8.66121 8.62399C8.9816 8.62399 9.24592 8.85627 9.24592 9.14462C9.24592 9.43297 8.98158 9.66525 8.66121 9.66525L4.352 9.66525C4.03161 9.66525 3.7753 9.43297 3.7753 9.14462C3.7753 8.85627 4.03962 8.62399 4.36001 8.62399L4.36001 8.62399ZM7.49981 12.789L4.352 12.789C4.03161 12.789 3.7753 12.5567 3.7753 12.2684C3.7753 11.98 4.03962 11.7478 4.352 11.7478L7.49179 11.7478C7.81218 11.7478 8.0765 11.98 8.0765 12.2684C8.0765 12.5567 7.81218 12.789 7.4998 12.789L7.49981 12.789Z"   fill="#E56616" >
+</path>
+</svg>

hx-ai-intelligent/src/icon/carbonAssetsToDetail-2.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M15.8699 14.8395C16.0301 14.431 16.1182 13.9985 16.1182 13.558C16.1182 11.6116 14.5403 10.0257 12.594 10.0257C10.6476 10.0257 9.06971 11.6116 9.06971 13.558C9.06971 15.5043 10.6476 17.0902 12.594 17.0902C13.443 17.0902 14.2199 16.7778 14.8287 16.2732L16.9032 18.0273L18.0406 16.6817L15.8699 14.8395L15.8699 14.8395ZM12.586 15.3201C11.6168 15.3441 10.8078 14.5672 10.7838 13.59C10.7597 12.6128 11.5367 11.8038 12.5059 11.7798L12.586 11.7798C13.5631 11.8038 14.3321 12.6128 14.308 13.59C14.292 14.5431 13.5311 15.296 12.586 15.3201L12.586 15.3201ZM8.18862 13.5499C8.18862 11.115 10.167 9.13662 12.602 9.13662C13.2347 9.13662 13.8274 9.27279 14.3641 9.51308L14.3641 3.77013C14.3641 2.79295 13.5792 2 12.602 2L3.77531 2C2.79813 2 2.01318 2.78495 2.01318 3.77013L2.01318 15.3201C2.01318 16.2972 2.79813 17.0902 3.77531 17.0902L9.96678 17.0902C8.84543 16.2572 8.18864 14.9516 8.18864 13.5499L8.18862 13.5499ZM4.36001 5.50022L10.984 5.50022C11.3044 5.50022 11.5687 5.7325 11.5687 6.02085C11.5687 6.3092 11.3044 6.54148 10.984 6.54148L4.352 6.54148C4.03161 6.54148 3.7753 6.3092 3.7753 6.02085C3.7753 5.7325 4.03962 5.50022 4.36001 5.50022L4.36001 5.50022ZM4.36001 8.62399L8.66121 8.62399C8.9816 8.62399 9.24592 8.85627 9.24592 9.14462C9.24592 9.43297 8.98158 9.66525 8.66121 9.66525L4.352 9.66525C4.03161 9.66525 3.7753 9.43297 3.7753 9.14462C3.7753 8.85627 4.03962 8.62399 4.36001 8.62399L4.36001 8.62399ZM7.49981 12.789L4.352 12.789C4.03161 12.789 3.7753 12.5567 3.7753 12.2684C3.7753 11.98 4.03962 11.7478 4.352 11.7478L7.49179 11.7478C7.81218 11.7478 8.0765 11.98 8.0765 12.2684C8.0765 12.5567 7.81218 12.789 7.4998 12.789L7.49981 12.789Z"   fill="#E6332C" >
+</path>
+</svg>

hx-ai-intelligent/src/icon/carbonAssetsToDetail-3.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M15.8699 14.8395C16.0301 14.431 16.1182 13.9985 16.1182 13.558C16.1182 11.6116 14.5403 10.0257 12.594 10.0257C10.6476 10.0257 9.06971 11.6116 9.06971 13.558C9.06971 15.5043 10.6476 17.0902 12.594 17.0902C13.443 17.0902 14.2199 16.7778 14.8287 16.2732L16.9032 18.0273L18.0406 16.6817L15.8699 14.8395L15.8699 14.8395ZM12.586 15.3201C11.6168 15.3441 10.8078 14.5672 10.7838 13.59C10.7597 12.6128 11.5367 11.8038 12.5059 11.7798L12.586 11.7798C13.5631 11.8038 14.3321 12.6128 14.308 13.59C14.292 14.5431 13.5311 15.296 12.586 15.3201L12.586 15.3201ZM8.18862 13.5499C8.18862 11.115 10.167 9.13662 12.602 9.13662C13.2347 9.13662 13.8274 9.27279 14.3641 9.51308L14.3641 3.77013C14.3641 2.79295 13.5792 2 12.602 2L3.77531 2C2.79813 2 2.01318 2.78495 2.01318 3.77013L2.01318 15.3201C2.01318 16.2972 2.79813 17.0902 3.77531 17.0902L9.96678 17.0902C8.84543 16.2572 8.18864 14.9516 8.18864 13.5499L8.18862 13.5499ZM4.36001 5.50022L10.984 5.50022C11.3044 5.50022 11.5687 5.7325 11.5687 6.02085C11.5687 6.3092 11.3044 6.54148 10.984 6.54148L4.352 6.54148C4.03161 6.54148 3.7753 6.3092 3.7753 6.02085C3.7753 5.7325 4.03962 5.50022 4.36001 5.50022L4.36001 5.50022ZM4.36001 8.62399L8.66121 8.62399C8.9816 8.62399 9.24592 8.85627 9.24592 9.14462C9.24592 9.43297 8.98158 9.66525 8.66121 9.66525L4.352 9.66525C4.03161 9.66525 3.7753 9.43297 3.7753 9.14462C3.7753 8.85627 4.03962 8.62399 4.36001 8.62399L4.36001 8.62399ZM7.49981 12.789L4.352 12.789C4.03161 12.789 3.7753 12.5567 3.7753 12.2684C3.7753 11.98 4.03962 11.7478 4.352 11.7478L7.49179 11.7478C7.81218 11.7478 8.0765 11.98 8.0765 12.2684C8.0765 12.5567 7.81218 12.789 7.4998 12.789L7.49981 12.789Z"   fill="#389DDC" >
+</path>
+</svg>

hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/index.vue

@@ -9,13 +9,16 @@
         <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{
           nationwide.valuation
         }}</div>
-        <div class="moneyDetail"
+        <div class="moneyDetail">
-          ><img
+          <div class="detailClick" @click="viewDetail(1)" style="border: 1px solid rgba(229, 102, 22, 1);">
-            @click="viewDetail(1)"
+            <img
-            width="34px"
+              width="20px"
-            height="34px"
+              height="20px"
-            src="../../../../src/icon/carbonAssetsSearch-1.svg"
+              src="../../../../src/icon/carbonAssetsToDetail-1.svg"
-        /></div>
+              alt="" />
+            <span style="color: rgba(229, 102, 22, 1);">交易明细</span>
+          </div>
+        </div>
       </div>
       <div class="title">
         <img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-1.svg" />
@@ -56,13 +59,16 @@
         /></div>
         <div class="moneyTitle">地方碳账户估值（CNY）</div>
         <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ place.valuation }}</div>
-        <div class="moneyDetail"
+        <div class="moneyDetail">
-          ><img
+          <div class="detailClick" @click="viewDetail(2)" style="border: 1px solid rgba(230, 51, 44, 1);">
-            width="34px"
+            <img
-            height="34px"
+              width="20px"
-            @click="viewDetail(2)"
+              height="20px"
-            src="../../../../src/icon/carbonAssetsSearch-2.svg"
+              src="../../../../src/icon/carbonAssetsToDetail-2.svg"
-        /></div>
+              alt="" />
+            <span style="color: rgba(230, 51, 44, 1);">交易明细</span>
+          </div>
+        </div>
       </div>
       <div class="title">
         <img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-2.svg" />
@@ -103,13 +109,16 @@
         /></div>
         <div class="moneyTitle">CCER资产估值（CNY）</div>
         <div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ ccer.valuation }}</div>
-        <div class="moneyDetail"
+        <div class="moneyDetail" >
-          ><img
+          <div class="detailClick" @click="viewDetail(3)" style="border: 1px solid rgba(56, 157, 220, 1);">
-            width="34px"
+            <img
-            height="34px"
+              width="20px"
-            @click="viewDetail(3)"
+              height="20px"
-            src="../../../../src/icon/carbonAssetsSearch-3.svg"
+              src="../../../../src/icon/carbonAssetsToDetail-3.svg"
-        /></div>
+              alt="" />
+            <span style="color: rgba(56, 157, 220, 1);">交易明细</span>
+          </div>
+        </div>
       </div>
       <div class="title">
         <img width="24px" height="24px" src="../../../../src/icon/carbonAssetsTitle-3.svg" />
@@ -259,7 +268,7 @@
     display: flex;
     align-items: center;
     .moneyImg {
-      width: 20%;
+      width: 18%;
       display: flex;
       justify-content: center;
     }
@@ -275,7 +284,7 @@
       vertical-align: top;
     }
     .moneyTotal {
-      width: 35%;
+      width: 33%;
       display: flex;
       justify-content: center;
       opacity: 1;
@@ -285,10 +294,17 @@
       text-align: left;
     }
     .moneyDetail {
-      width: 10%;
+      width: 14%;
       display: flex;
       justify-content: center;
       cursor: pointer;
+      .detailClick {
+        border-radius: 4px;
+        padding: 3px;
+        > span {
+          font-size: 12px;
+        }
+      }
     }
   }
   .title {

hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue

@@ -125,12 +125,14 @@
       :body-style="{ paddingBottom: '80px' }"
       :footer-style="{ textAlign: 'right' }"
       destroyOnClose
-      title="单位管理"
       @close="closeUnitManag">
-      <div class="addButton">
+      <div class="ns-form-title titleUnit">
+        <div class="title">单位管理</div>
         <a-button type="primary" @click="addGroup">新增分组</a-button>
         <a-button type="primary" @click="addUnit">新增单位</a-button>
       </div>
+      <!-- <div class="addButton">
+      </div> -->
       <div class="treePart">
         <div
           style="
@@ -245,8 +247,8 @@
   const dynamicDisabled = computed(() => {
     return formRef.value?.validateResult && userAuthList.value?.length;
   });
-  const fetch = (api, params = { orgId }) => {
+  const fetch = (api, params = { orgId }, config) => {
-    return http.post(api, params);
+    return http.post(api, params, config);
   };
   const selectTreeDataValue = ref<string>('');
   const mainRef = ref();
@@ -640,7 +642,7 @@
         type: 'primary',
         name: 'carbonEmissionFactorLibraryImport',
         extra: {
-          api: carbonEmissionFactorLibrary.excel, // 导入接口名
+          api: carbonEmissionFactorLibrary.import, // 导入接口名
           params: {
             orgId,
           },
@@ -659,7 +661,31 @@
         label: '导出',
         type: 'primary',
         handle: () => {
-          doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+          const exportQuery = {
+            orgId: orgId.value,
+            pageNum: 1,
+            pageSize: 999,
+          };
+          const config = {
+            responseType: 'blob',
+          };
+          fetch(carbonEmissionFactorLibrary.export, exportQuery, config)
+            .then((res) => {
+              // 创建一个 URL 对象，指向图片数据的 blob
+              const url = window.URL.createObjectURL(new Blob([res]));
+              // 创建一个 <a> 标签，用于触发下载
+              const link = document.createElement('a');
+              link.href = url;
+              link.setAttribute('download', 'carbonFactor.xlsx'); // 设置下载的文件名
+              document.body.appendChild(link);
+              link.click();
+
+              // 清理 URL 对象
+              window.URL.revokeObjectURL(url);
+            })
+            .catch((error) => {
+              console.error('下载失败：', error);
+            });
         },
       },
       {
@@ -1101,6 +1127,20 @@
     padding-bottom: 10px;
     border-bottom: 1px solid #e9e9e9;
   }
+  .titleUnit {
+    font-weight: bold;
+    user-select: text;
+    padding: unset;
+    margin-bottom: unset;
+    padding-bottom: unset;
+    border-bottom: unset;
+    width: 70%;
+    height: 5vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 10%;
+  }
   .title {
     text-align: left;
     height: 32px;
@@ -1140,6 +1180,7 @@
     border: 1px solid #bfbfbf;
     margin-left: 10%;
     flex-direction: column;
+    border-radius: 12px;
   }
   .actionMore {
     display: none;

hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue

@@ -1,52 +1,11 @@
 <template>
   <div>
-    <!-- <a-table 
-      :columns="tableColumns" 
-      :data-source="data" 
-      bordered
-      :pagination="false"
-      :scroll="{ x: 2000 }">
-      <template #bodyCell="{ column, text, record }">
-        <template v-if="column.key === 'action'">
-          <span>
-            <a @click="editData(record)">编辑</a>
-            <a-divider type="vertical" />
-            <a @click="delData(record)">删除</a>
-          </span>
-        </template>
-      </template>
-      <template #title>
-        <a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
-        <div class="buttonGroup">
-          <a-button type="primary" @click="addNewData">新增</a-button>
-          <a-button type="primary">导入</a-button>
-          <a-button type="primary">导出</a-button>
-          <a-button type="primary">模板下载</a-button>
-          <a-button type="primary" @click="uploadVoucher">上传凭证</a-button>
-          <a-button type="primary">凭证下载</a-button>
-        </div>
-      </template>
-    </a-table> -->
     <ns-view-list-table
       v-bind="tableConfig"
       :model="data"
       ref="mainRef"
       :scroll="{ x: 1500, y: 350 }">
-      <!-- <template #bodyCell="{ column, text, record }">
-        <template v-if="column.dataIndex === 'janFlag'">
-          <span v-if="record.janFlag===1" style="color: rgba(243, 97, 99, 1);">{{text}}</span>
-          <span v-else style="color: rgba(57, 215, 287, 1);">{{text}}</span>
-        </template>
-      </template> -->
     </ns-view-list-table>
-    <!-- <a-pagination 
-        :current="queryParams.pageNum"
-        :total="total"
-        :page-size="queryParams.pageSize"
-        style="display: flex;justify-content: center;margin-top: 16px;"
-        :show-size-changer="true"
-        :show-quick-jumper="true"
-        @change="onChange" /> -->
     <!-- 新增数据库数据 -->
     <a-drawer
       :width="500"
@@ -68,8 +27,11 @@
         <a-form-item label="计量单位" name="unit">
           <a-cascader v-model:value="formState.unit" :options="measurementUnit" />
         </a-form-item>
-        <a-form-item label="能耗类型" name="emissionType" :required="isRequired">
+        <a-form-item label="能耗类型">
-          <a-select v-model:value="formState.emissionType" placeholder="请选择能耗类型">
+          <a-select
+            v-model:value="formState.energyConsumptionType"
+            @change="changeEnergyType"
+            placeholder="请选择能耗类型">
             <a-select-option
               v-for="(item, index) in energyTypeOptions"
               :key="index"
@@ -230,14 +192,19 @@
           </a-col>
         </a-row> -->
       <div class="ns-form-title"><div class="title">能耗统计</div></div>
-      <a-table :columns="addColumns" :data-source="addData" size="small" :pagination="false">
+      <a-table
+        :columns="addColumns"
+        :data-source="addData"
+        size="small"
+        :pagination="false"
+        :scroll="{ y: 200 }">
         <template #bodyCell="{ column, text, record }">
           <template v-if="column.key === 'action'">
             <a-switch
-              :checked="record.age === 1 ? true : false"
+              :checked="record.type === 1 ? true : false"
               :class="{
-                'blue-background': record.age === 1 ? true : false,
+                'blue-background': record.type === 1 ? true : false,
-                'grey-background': record.age === 1 ? false : true,
+                'grey-background': record.type === 1 ? false : true,
               }"
               @click="changeSwitch(record)" />
           </template>
@@ -256,6 +223,10 @@
           上传
         </a-button>
       </a-upload>
+      <div style="display: flex; flex-direction: column">
+        <span>1.仅支持pdf格式文件或文件夹</span>
+        <span>2.文件名命名规则为【能源种类_年份】</span>
+      </div>
 
       <template #footer>
         <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
@@ -316,7 +287,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, toRaw, defineExpose } from 'vue';
+  import { ref, toRaw, defineExpose, createVNode } from 'vue';
   import type { Rule } from 'ant-design-vue/es/form';
   import { Pagination, message, Modal } from 'ant-design-vue';
   import { UploadOutlined } from '@ant-design/icons-vue';
@@ -406,6 +377,7 @@
   const tableConfig = ref({
     title: '能耗统计',
     api: energyConsumption.pageList,
+    rowSelection: null,
     params: queryParams.value,
     headerActions: [
       {
@@ -421,17 +393,62 @@
       {
         label: '导入',
         type: 'primary',
-        name: 'userImport',
+        name: 'energyConsumptionImport',
-        handle: () => {},
+        extra: {
+          api: energyConsumption.import, // 导入接口名
+          params: {
+            orgId,
+            year,
+          },
+          title: '碳排统计', // 弹窗title
+          templateName: 'energyConsumption', // 所使用的文件名称
+          indexName: '能源种类', // 匹配类型字段
+          message: [
+            { label: '1、若必填项未填写，则不能进行导入操作' },
+            { label: `2、当重复时，则更新数据。` },
+            { label: '3、数据将从模版的第五行进行导入。' },
+            { label: '4、文件导入勿超过5MB。' },
+          ],
+        },
       },
       {
         label: '导出',
         type: 'primary',
-        name: 'userExports',
+        handle: () => {
+          const exportQuery = {
+            orgId: orgId.value,
+            year: mainRef.value.nsTableRef.formParamsRef.year
+              ? mainRef.value.nsTableRef.formParamsRef.year
+              : selectYear.value.format('YYYY'),
+          };
+          const config = {
+            responseType: 'blob',
+          };
+          fetch(energyConsumption.export, exportQuery, config)
+            .then((res) => {
+              // 创建一个 URL 对象，指向图片数据的 blob
+              const url = window.URL.createObjectURL(new Blob([res]));
+              // 创建一个 <a> 标签，用于触发下载
+              const link = document.createElement('a');
+              link.href = url;
+              link.setAttribute('download', 'carbonStats.xlsx'); // 设置下载的文件名
+              document.body.appendChild(link);
+              link.click();
+
+              // 清理 URL 对象
+              window.URL.revokeObjectURL(url);
+            })
+            .catch((error) => {
+              console.error('下载失败：', error);
+            });
+        },
       },
       {
         label: '模板下载',
         type: 'primary',
+        handle: () => {
+          doWnload('/hx-ai-intelligent/asset/file/energyConsumption.xlsx');
+        },
       },
       // {
       //   label: '上传凭证',
@@ -474,53 +491,242 @@
       {
         title: '1月',
         dataIndex: 'jan',
-        // customRender: ({ text }: { text: string }) => {
+        customRender: (value) => {
-        //   return <span :style="{ color: getColor(text) }">{text}</span>;
+          let text;
-        // }
+          let color;
+          switch (value.record.janFlag) {
+            case 1:
+              text = value.record.jan ? value.record.jan : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.jan ? value.record.jan : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '2月',
         dataIndex: 'feb',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.febFlag) {
+            case 1:
+              text = value.record.feb ? value.record.feb : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.feb ? value.record.feb : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '3月',
         dataIndex: 'mar',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.marFlag) {
+            case 1:
+              text = value.record.mar ? value.record.mar : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.mar ? value.record.mar : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '4月',
         dataIndex: 'apr',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.aprFlag) {
+            case 1:
+              text = value.record.apr ? value.record.apr : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.apr ? value.record.apr : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '5月',
         dataIndex: 'may',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.mayFlag) {
+            case 1:
+              text = value.record.may ? value.record.may : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.may ? value.record.may : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '6月',
         dataIndex: 'jun',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.junFlag) {
+            case 1:
+              text = value.record.jun ? value.record.jun : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.jun ? value.record.jun : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '7月',
         dataIndex: 'jul',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.julFlag) {
+            case 1:
+              text = value.record.jul ? value.record.jul : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.jul ? value.record.jul : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '8月',
         dataIndex: 'aug',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.augFlag) {
+            case 1:
+              text = value.record.aug ? value.record.aug : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.aug ? value.record.aug : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '9月',
         dataIndex: 'sep',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.sepFlag) {
+            case 1:
+              text = value.record.sep ? value.record.sep : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.sep ? value.record.sep : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '10月',
         dataIndex: 'oct',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.octFlag) {
+            case 1:
+              text = value.record.oct ? value.record.oct : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.oct ? value.record.oct : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '11月',
         dataIndex: 'nov',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.novFlag) {
+            case 1:
+              text = value.record.nov ? value.record.nov : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.nov ? value.record.nov : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
       {
         title: '12月',
         dataIndex: 'dec',
+        customRender: (value) => {
+          let text;
+          let color;
+          switch (value.record.decFlag) {
+            case 1:
+              text = value.record.dec ? value.record.dec : '';
+              color = 'rgba(243, 97, 99, 1)';
+              break;
+            case 0:
+              text = value.record.dec ? value.record.dec : '';
+              color = 'rgba(57, 215, 287, 1)';
+              break;
+          }
+          // 使用内联样式设置颜色
+          return createVNode('div', { style: { color: color } }, text);
+        },
       },
     ],
     columnActions: {
@@ -531,6 +737,7 @@
           name: 'userEdit',
           handle: (record: any) => {
             getDictList();
+            getSummaryMethod(record.id);
             visible.value = true;
             fetch(energyConsumption.findById, { id: record.id }).then((res) => {
               if (res.data.emissionType) {
@@ -588,38 +795,39 @@
     },
     rowKey: 'id',
   });
-  const getColor = (value: string | number): string => {
+  const doWnload = (url) => {
-    if (typeof value === 'string') {
+    const a = document.createElement('a');
-      switch (value) {
+    document.body.appendChild(a);
-        case 'active':
+    a.href = encodeURI(url);
-          return 'green';
+    //设置下载的文件名
-        case 'inactive':
+    // a.download = fileName.value;
-          return 'red';
+    //触发a标签的点击事件，进行下载
-        default:
+    a.click();
-          return 'black';
+  };
-      }
+  const getSummaryMethod = (id) => {
-    } else if (typeof value === 'number') {
+    const queryData = {
-      return value > 30 ? 'blue' : 'purple'; // 示例：根据年龄设置颜色
+      orgId: orgId.value,
-    }
-    return 'black';
     };
-  const getSummaryMethod = () => {
+    if (id) {
-    fetch(energyConsumption.energyAcquisition, { orgId: orgId.value }).then((res) => {
+      queryData.id = id;
-      addData.value = res.data.records;
+    }
+    fetch(energyConsumption.energyAcquisition, queryData).then((res) => {
+      addData.value = res.data;
     });
   };
   const addColumns = [
-    { title: '月份', dataIndex: 'key' },
+    { title: '月份', dataIndex: 'month', align: 'center' },
-    { title: '汇总方式', dataIndex: 'name' },
+    { title: '汇总方式', dataIndex: 'access', align: 'center' },
-    { title: '操作', key: 'action', dataIndex: 'age' },
+    { title: '操作', key: 'action', dataIndex: 'type', align: 'center' },
   ];
   const addData = ref([]);
   //开关
   const changeSwitch = (data: any) => {
-    data.age = data.age === 1 ? 0 : 1;
+    data.type = data.type === 1 ? 0 : 1;
-    data.name = data.age === 1 ? '自动' : '手动';
+    data.access = data.type === 1 ? '自动' : '手动';
     addData.value = [...addData.value];
     console.log(addData.value);
+    formState.value.summaryMethodList = addData.value;
   };
   defineExpose({
     mainRef,
@@ -648,6 +856,22 @@
     queryParams.value.pageSize = size;
     mainRef.value?.nsTableRef.reload();
   };
+  const changeEnergyType = (value) => {
+    // 获取自动采集节点的数据
+    fetch(group.queryDeviceGroupTree, { energyType: value, orgId: orgId.value }).then((res) => {
+      treeData.value = res.data;
+      treeData.value = treeData.value.map((item) => ({
+        value: item.id,
+        label: item.pointName,
+        children: item.children
+          ? item.children.map((child) => ({
+              value: child.id,
+              label: child.pointName,
+            }))
+          : [],
+      }));
+    });
+  };
   // 计算碳排切换
   const emissionType = ref();
   const changeRadio = (e) => {
@@ -778,22 +1002,6 @@
         }));
       },
     );
-    // 获取自动采集节点的数据
-    fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE', orgId: orgId.value }).then(
-      (res) => {
-        treeData.value = res.data;
-        treeData.value = treeData.value.map((item) => ({
-          value: item.id,
-          label: item.pointName,
-          children: item.children
-            ? item.children.map((child) => ({
-                value: child.id,
-                label: child.pointName,
-              }))
-            : [],
-        }));
-      },
-    );
   };
   // 点击新增按钮
   const addNewData = () => {
@@ -911,13 +1119,10 @@
     const deleteId = ref(new FormData());
     deleteId.value.append('id', record.id);
     const config = {
-      headers: {
       responseType: 'blob',
-      },
     };
     fetch(uploadPic.download, deleteId.value, config)
       .then((res) => {
-        debugger
         // 创建一个 URL 对象，指向图片数据的 blob
         const url = window.URL.createObjectURL(new Blob([res]));
         // 创建一个 <a> 标签，用于触发下载
@@ -939,14 +1144,17 @@
     selectedRowKeysSet.value.forEach((item) => {
       deleteIds.value.append('ids', item);
     });
-    fetch(uploadPic.downloadZip, deleteIds.value)
+    const config = {
+      responseType: 'blob',
+    };
+    fetch(uploadPic.downloadZip, deleteIds.value, config)
       .then((res) => {
         // 创建一个 URL 对象，指向图片数据的 blob
-        const url = window.URL.createObjectURL(new Blob([res.data]));
+        const url = window.URL.createObjectURL(new Blob([res]));
         // 创建一个 <a> 标签，用于触发下载
         const link = document.createElement('a');
         link.href = url;
-        link.setAttribute('download', ''); // 设置下载的文件名
+        link.setAttribute('download', '能耗统计凭证.zip'); // 设置下载的文件名
         document.body.appendChild(link);
         link.click();
 

hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue

@@ -61,7 +61,11 @@
           </div>
         </template>
       </a-table> -->
-      <ns-view-list-table v-bind="tableConfig" :model="tableData" ref="mainRef" />
+      <ns-view-list-table
+        v-bind="tableConfig"
+        :model="tableData"
+        ref="mainRef"
+        :scroll="{ x: 1000 }" />
       <a-pagination
         :current="queryParams.pageNum"
         :total="total"
@@ -107,7 +111,7 @@
           <a-row>
             <a-col :span="12">
               <a-form-item ref="name">
-                <ns-input style="margin-top: 5px;" v-model:value="selectData" @change="keyChange" />
+                <ns-input style="margin-top: 5px" v-model:value="selectData" @change="keyChange" />
               </a-form-item>
             </a-col>
           </a-row>
@@ -271,7 +275,7 @@
     orgId: orgId.value,
   });
   const tableData = ref([]);
-
+  const emissionSources = ref();
   const tableConfig = ref({
     title: '排放因子库',
     api: quickCalculation.queryCarbonEmissionPage,
@@ -310,6 +314,7 @@
         title: '更新时间',
         className: 'updateTime',
         dataIndex: 'updateTime',
+        ellipsis: true,
       },
       {
         title: '启用时间',
@@ -340,6 +345,8 @@
             formState.value.dateRange = [record.startTime, record.endTime];
             formState.value.factorId = record.factorId;
             visible.value = true;
+            emissionSources.value = record.emissionSources;
+            queryData.value.emissionSources = emissionSources.value;
             getNewTable();
           },
         },
@@ -411,7 +418,11 @@
   };
   const selectData = ref();
   const keyChange = () => {
+    if (selectData.value === '') {
+      queryData.value.emissionSources = emissionSources.value;
+    } else {
       queryData.value.emissionSources = selectData.value;
+    }
     getNewTable();
   };
   // 点击编辑按钮

hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue

@@ -56,6 +56,12 @@
       </div> -->
     </div>
     <div class="right">
+      <a-button
+        type="primary"
+        @click="changeParentData"
+        style="position: absolute; right: 25px; top: 10px; z-index: 99">
+        返回
+      </a-button>
       <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" style="height: 100%">
         <a-tab-pane key="1" tab="排放源">
           <div style="display: flex; height: 100%">
@@ -305,7 +311,8 @@
         :data-source="newTableData"
         bordered
         rowKey="id"
-        :scroll="{ y: 400 }"
+        :scroll="{ y: 300 }"
+        size="small"
         style="margin-bottom: 10px"
         :rowSelection="{
           selectedRowKeys: selectedRowKeysEdit,
@@ -315,14 +322,14 @@
         :pagination="false">
       </a-table>
       <a-pagination
-        :current="queryParams.pageNum"
+        :current="queryData.pageNum"
         :total="total"
-        :page-size="queryParams.pageSize"
+        :page-size="queryData.pageSize"
         style="display: flex; justify-content: center; margin-top: 16px"
         :show-size-changer="true"
         :show-quick-jumper="true"
         @change="onChange" />
-      <a-upload
+      <!-- <a-upload
         v-model:file-list="fileList"
         name="file"
         accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
@@ -333,7 +340,20 @@
           <upload-outlined></upload-outlined>
           点击上传凭证
         </a-button>
-      </a-upload>
+      </a-upload> -->
+      <a-upload-dragger
+        v-model:fileList="fileList"
+        name="file"
+        @remove="handleFileRemove"
+        :before-upload="beforeUpload"
+        @change="handleChange">
+        <p class="ant-upload-drag-icon">
+          <inbox-outlined></inbox-outlined>
+        </p>
+        <p class="ant-upload-hint">1.仅支持pdf格式文件或文件夹</p>
+        <p class="ant-upload-hint">2.文件名命名规则为【能源种类_年份】</p>
+        <p class="ant-upload-hint">3.每次上传自动覆盖</p>
+      </a-upload-dragger>
       <template #footer>
         <a-button style="margin-right: 8px" @click="onCloseEditData">取消</a-button>
         <a-button type="primary" @click="submitEditData">确定</a-button>
@@ -352,6 +372,7 @@
     PlusCircleOutlined,
     MinusCircleOutlined,
     UploadOutlined,
+    InboxOutlined,
   } from '@ant-design/icons-vue';
   import * as echarts from 'echarts';
   import { voucherColumns, drawerColumns } from '../config';
@@ -388,8 +409,8 @@
   const orgId = ref('');
   const result = JSON.parse(sessionStorage.getItem('ORGID')!);
   orgId.value = result;
-  const fetch = (api, params = { orgId: orgId.value }) => {
+  const fetch = (api, params = { orgId: orgId.value }, config) => {
-    return http.post(api, params);
+    return http.post(api, params, config);
   };
   // 左侧树结构
   const x = 3;
@@ -867,15 +888,17 @@
     selectedRowKeys.value.forEach((item) => {
       deleteIds.value.append('ids', item);
     });
-    fetch(uploadPic.downloadZip, deleteIds.value)
+    const config = {
+      responseType: 'blob',
+    };
+    fetch(uploadPic.downloadZip, deleteIds.value, config)
       .then((res) => {
         // 创建一个 URL 对象，指向图片数据的 blob
-        const url = window.URL.createObjectURL(new Blob([res.data]));
+        const url = window.URL.createObjectURL(new Blob([res]));
         // 创建一个 <a> 标签，用于触发下载
         const link = document.createElement('a');
         link.href = url;
-        debugger;
+        link.setAttribute('download', '碳盘查凭证.zip'); // 设置下载的文件名
-        link.setAttribute('download', ''); // 设置下载的文件名
         document.body.appendChild(link);
         link.click();
 
@@ -912,10 +935,11 @@
   const queryData = ref({
     orgId: orgId.value,
     pageNum: 1,
-    pageSize: 999,
+    pageSize: 10,
   });
   const edit = (record) => {
     getDictList();
+    // queryData.value.emissionSources = record.emissionFactors;
     getNewTable();
     editFormState.value.id = record.id;
     editFormState.value.dataSources = record.dataSources;
@@ -1064,8 +1088,8 @@
   };
   // 分页器
   const onChange = (pageNumber: number, size: number) => {
-    queryParams.value.pageNum = pageNumber;
+    queryData.value.pageNum = pageNumber;
-    queryParams.value.pageSize = size;
+    queryData.value.pageSize = size;
     getNewTable();
   };
   // 点击切换排放统计/碳排流向
@@ -1511,6 +1535,7 @@
     background-color: @white;
     border-radius: @ns-border-radius;
     box-shadow: @ns-content-box-shadow;
+    position: relative;
     :deep(.ant-tabs-content-holder) {
       padding: 20px;
     }
@@ -1570,4 +1595,8 @@
     margin-left: 10%;
     flex-direction: column;
   }
+  :deep(.ant-upload.ant-upload-drag) {
+    height: 18vh;
+    margin-top: 10px;
+  }
 </style>