存货分布

src/views/pms/stat/rhkb/inventorySituation.vue

@@ -607,34 +607,27 @@ onUnmounted(() => {
         ref="trendChartRef"
         style="height: 80%; margin-top: 18px"
         class="inventory-chart"></div>
-      <el-table
-        v-show="activePanel === 'detail'"
-        :data="detailTableData"
-        border
-        class="inventory-detail-table"
-        height="100%">
-        <el-table-column label="存货及变动情况" align="center">
-          <el-table-column
-            prop="beginningInventory"
-            label="年初存货"
-            min-width="52"
-            align="center" />
-          <el-table-column
-            prop="beginningOverStock"
-            label="年初积压"
-            min-width="52"
-            align="center" />
-          <el-table-column prop="endingInventory" label="期末库存" min-width="52" align="center" />
-          <el-table-column prop="endingOverStock" label="期末积压" min-width="52" align="center" />
-        </el-table-column>
-        <el-table-column label="账龄分析" align="center">
-          <el-table-column prop="withinOneYear" label="1年以内" min-width="52" align="center" />
-          <el-table-column prop="oneToTwoYears" label="1-2年" min-width="54" align="center" />
-          <el-table-column prop="twoToThreeYears" label="2-3年" min-width="54" align="center" />
-          <el-table-column prop="overThreeYears" label="3年以上" min-width="52" align="center" />
-          <el-table-column prop="overStockRatio" label="积压比" min-width="58" align="center" />
-        </el-table-column>
-      </el-table>
+      <div v-show="activePanel === 'detail'" class="inventory-detail-layout">
+        <section class="inventory-detail-section">
+          <div class="inventory-detail-section__title">存货及变动情况</div>
+          <el-table :data="detailTableData" border class="inventory-detail-table" height="100%">
+            <el-table-column prop="beginningInventory" label="年初存货" min-width="92" align="center" />
+            <el-table-column prop="beginningOverStock" label="年初积压" min-width="92" align="center" />
+            <el-table-column prop="endingInventory" label="期末库存" min-width="92" align="center" />
+            <el-table-column prop="endingOverStock" label="期末积压" min-width="92" align="center" />
+          </el-table>
+        </section>
+        <section class="inventory-detail-section">
+          <div class="inventory-detail-section__title">账龄分析</div>
+          <el-table :data="detailTableData" border class="inventory-detail-table" height="100%">
+            <el-table-column prop="withinOneYear" label="1年以内" min-width="82" align="center" />
+            <el-table-column prop="oneToTwoYears" label="1-2年" min-width="74" align="center" />
+            <el-table-column prop="twoToThreeYears" label="2-3年" min-width="74" align="center" />
+            <el-table-column prop="overThreeYears" label="3年以上" min-width="82" align="center" />
+            <el-table-column prop="overStockRatio" label="积压比" min-width="78" align="center" />
+          </el-table>
+        </section>
+      </div>
     </div>
   </div>
 </template>
@@ -692,8 +685,8 @@ onUnmounted(() => {
 
 .inventory-detail-table {
   width: 100%;
-  height: 100%;
-  margin-top: calc(12px * var(--kb-scale, 1));
+  height: auto;
+  margin: 0;
   color: #1d2f46;
   background: transparent;
 
@@ -706,10 +699,16 @@ onUnmounted(() => {
     color: #073f8e;
     font-size: calc(13px * var(--kb-scale, 1));
     font-weight: 700;
+    text-align: center;
     background: transparent;
     border-color: rgb(31 91 184 / 24%);
   }
 
+  :deep(th.el-table__cell .cell) {
+    justify-content: center;
+    text-align: center;
+  }
+
   :deep(td.el-table__cell) {
     padding: calc(8px * var(--kb-scale, 1)) 0;
     color: #1d2f46;
@@ -726,6 +725,32 @@ onUnmounted(() => {
   }
 }
 
+.inventory-detail-layout {
+  display: grid;
+  height: 100%;
+  padding-top: calc(10px * var(--kb-scale, 1));
+  gap: calc(12px * var(--kb-scale, 1));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+.inventory-detail-section {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.inventory-detail-section__title {
+  padding: 0 0 calc(5px * var(--kb-scale, 1));
+  font-size: calc(13px * var(--kb-scale, 1));
+  font-weight: 700;
+  color: #0b4a9c;
+  text-align: center;
+}
+
+.inventory-detail-section .inventory-detail-table {
+  flex: 1;
+}
+
 ::v-deep .el-table {
   background-color: transparent !important;
 }