存货分布

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

@@ -29,6 +29,9 @@ type InventoryDistributionResponse = {
   storageNameInventoryPair?: Record<string, number>
 }
 
+type ActivePanel = 'distribution' | 'trend'
+
+const activePanel = ref<ActivePanel>('distribution')
 const DEFAULT_DATE = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
 const selectedDate = ref(DEFAULT_DATE)
 const inventoryResult = ref<InventoryDistributionResponse | null>(null)
@@ -38,6 +41,15 @@ const trendChartRef = ref<HTMLDivElement>()
 let distributionChart: echarts.ECharts | null = null
 let trendChart: echarts.ECharts | null = null
 
+const panelOptions: Array<{ label: string; value: ActivePanel }> = [
+  { label: '存货分布', value: 'distribution' },
+  { label: '趋势', value: 'trend' }
+]
+
+const activeTitle = computed(() =>
+  activePanel.value === 'distribution' ? '存货分布' : '积压趋势'
+)
+
 const yuanToWan = (value: number) => Number((value / 10000).toFixed(2))
 
 function formatAmount(value: number) {
@@ -473,6 +485,19 @@ function destroyCharts() {
   trendChart = null
 }
 
+watch(activePanel, (value) => {
+  nextTick(() => {
+    if (value === 'distribution') {
+      if (!distributionChart) initDistributionChart()
+      renderDistributionChart()
+    } else {
+      if (!trendChart) initTrendChart()
+      renderTrendChart()
+    }
+    resizeCharts()
+  })
+})
+
 async function requestInventoryDistribution() {
   if (deptId.value === null || !selectedDate.value) return
 
@@ -526,18 +551,29 @@ onUnmounted(() => {
           <span></span>
           <span></span>
         </div>
-        存货分布
+        {{ activeTitle }}
+      </div>
+      <div class="inventory-panel-actions">
+        <el-date-picker
+          v-model="selectedDate"
+          value-format="YYYY-MM-DD"
+          type="date"
+          placeholder="选择日期"
+          :clearable="false"
+          class="inventory-date-picker" />
+        <el-segmented
+          v-model="activePanel"
+          :options="panelOptions"
+          size="small"
+          class="inventory-switch" />
       </div>
-      <el-date-picker
-        v-model="selectedDate"
-        value-format="YYYY-MM-DD"
-        type="date"
-        placeholder="选择日期"
-        :clearable="false"
-        class="inventory-date-picker" />
     </div>
     <div class="flex-1 min-h-0">
-      <div ref="distributionChartRef" class="inventory-chart"></div>
+      <div
+        v-show="activePanel === 'distribution'"
+        ref="distributionChartRef"
+        class="inventory-chart"></div>
+      <div v-show="activePanel === 'trend'" ref="trendChartRef" class="inventory-chart"></div>
     </div>
   </div>
 </template>
@@ -545,6 +581,31 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 @import url('@/styles/kb.scss');
 
+.inventory-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: calc(8px * var(--kb-scale, 1));
+}
+
+.inventory-switch {
+  --el-segmented-item-selected-color: #03409b;
+  --el-segmented-item-selected-bg-color: rgb(255 255 255 / 86%);
+  --el-segmented-bg-color: rgb(31 91 184 / 10%);
+  --el-segmented-item-hover-bg-color: rgb(255 255 255 / 56%);
+
+  min-height: calc(26px * var(--kb-scale, 1));
+  padding: calc(2px * var(--kb-scale, 1));
+  border: 1px solid rgb(31 91 184 / 12%);
+
+  :deep(.el-segmented__item) {
+    min-height: calc(22px * var(--kb-scale, 1));
+    padding: 0 calc(8px * var(--kb-scale, 1));
+    font-size: calc(12px * var(--kb-scale, 1));
+    font-weight: 500;
+    color: #29527f;
+  }
+}
+
 .inventory-date-picker {
   width: calc(132px * var(--kb-scale, 1));