ss

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

@@ -11,7 +11,6 @@ import {
 
 import { IotStatApi } from '@/api/pms/stat'
 import dayjs from 'dayjs'
-import { getUserProfile } from '@/api/system/user/profile'
 
 type InventoryItem = {
   project: string
@@ -280,153 +279,6 @@ function getDistributionOption(
   }
 }
 
-function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
-  const layout = getChartLayout(trendChartRef)
-  const maxBacklog = Math.max(
-    ...data.map((item) => Math.max(item.yearBeginningBacklog, item.mayBacklogAmount)),
-    1
-  )
-  const backlogAxisMax = Math.ceil((maxBacklog * 1.15) / 100) * 100
-  const barLabel = {
-    show: true,
-    position: 'right' as any,
-    distance: layout.labelDistance,
-    color: THEME.text.strong,
-    fontSize: layout.labelFontSize,
-    fontWeight: 700,
-    fontFamily: FONT_FAMILY,
-    formatter(params: any) {
-      return formatAmount(Number(params.value))
-    }
-  }
-
-  return {
-    ...ANIMATION,
-    grid: {
-      ...THEME.grid,
-      top: layout.trendGridTop,
-      right: layout.trendGridRight,
-      bottom: layout.trendGridBottom
-    },
-    color: [THEME.color.blue.line, THEME.color.orange.line],
-    legend: createLegend(
-      {
-        top: layout.legendTop,
-        right: layout.legendRight,
-        itemWidth: layout.legendItemSize,
-        itemHeight: layout.legendItemSize,
-        itemGap: layout.legendGap,
-        textStyle: {
-          color: THEME.text.regular,
-          fontSize: layout.legendFontSize,
-          fontWeight: 600,
-          fontFamily: FONT_FAMILY
-        }
-      },
-      ['年初积压', '5月底积压']
-    ),
-    tooltip: createTooltip({
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow',
-        shadowStyle: {
-          color: THEME.split
-        }
-      },
-      valueFormatter(value: number) {
-        return `${formatAmount(value)}万元`
-      }
-    }),
-    xAxis: {
-      type: 'value',
-      max: backlogAxisMax,
-      splitNumber: 4,
-      axisLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: THEME.text.regular,
-        fontSize: layout.axisFontSize,
-        fontFamily: FONT_FAMILY
-      },
-      splitLine: {
-        lineStyle: {
-          color: THEME.split,
-          type: 'dashed'
-        }
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: data.map((item) => item.project),
-      inverse: true,
-      axisLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: THEME.text.regular,
-        fontSize: layout.axisFontSize,
-        fontWeight: 600,
-        fontFamily: FONT_FAMILY,
-        margin: layout.yAxisLabelMargin,
-        width: layout.yAxisLabelWidth,
-        overflow: 'break',
-        align: 'right'
-      }
-    },
-    series: [
-      {
-        name: '年初积压',
-        type: 'bar',
-        data: data.map((item) => item.yearBeginningBacklog),
-        barWidth: layout.barWidth,
-        barGap: layout.barGap,
-        barCategoryGap: layout.barCategoryGap,
-        label: barLabel,
-        labelLayout: {
-          hideOverlap: false
-        },
-        itemStyle: {
-          shadowBlur: 10,
-          shadowColor: THEME.color.blue.bg,
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: THEME.color.blue.light },
-            { offset: 0.55, color: THEME.color.blue.mid },
-            { offset: 1, color: THEME.color.blue.line }
-          ])
-        }
-      },
-      {
-        name: '5月底积压',
-        type: 'bar',
-        data: data.map((item) => item.mayBacklogAmount),
-        barWidth: layout.barWidth,
-        barGap: layout.barGap,
-        barCategoryGap: layout.barCategoryGap,
-        label: barLabel,
-        labelLayout: {
-          hideOverlap: false
-        },
-        itemStyle: {
-          shadowBlur: 10,
-          shadowColor: THEME.color.orange.bg,
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: THEME.color.orange.light },
-            { offset: 0.55, color: THEME.color.orange.mid },
-            { offset: 1, color: THEME.color.orange.line }
-          ])
-        }
-      }
-    ]
-  }
-}
-
 function initChart(
   chartRef: Ref<HTMLDivElement | undefined>,
   chart: echarts.ECharts | null,
@@ -445,8 +297,11 @@ function initChart(
 
 function getInventoryAgingOption(data: InventoryAgingResponse): echarts.EChartsOption {
   const layout = getChartLayout(trendChartRef)
-  const months = Object.keys(data).sort()
-  const values = months.map((month) => yuanToWan(data[month]))
+  const entries = Object.entries(data)
+    .filter(([month, value]) => /^\d{4}-\d{2}$/.test(month) && Number.isFinite(Number(value)))
+    .sort(([monthA], [monthB]) => monthA.localeCompare(monthB))
+  const months = entries.map(([month]) => month)
+  const values = entries.map(([, value]) => yuanToWan(Number(value)))
 
   return {
     ...ANIMATION,
@@ -557,8 +412,6 @@ function initTrendChart() {
 function resizeCharts() {
   distributionChart?.resize()
   trendChart?.resize()
-  renderDistributionChart()
-  renderTrendChart()
 }
 
 function destroyCharts() {
@@ -574,10 +427,8 @@ watch(activePanel, (value) => {
       if (!distributionChart) initDistributionChart()
       renderDistributionChart()
     } else {
-      if (!trendChart) initTrendChart()
       requestInventoryAging()
     }
-    resizeCharts()
   })
 })
 
@@ -589,12 +440,18 @@ async function requestInventoryAging() {
       fdate: selectedDate.value,
       dept: deptId.value
     })
-    const data = response?.data ?? response
+    const data = response?.data?.data ?? response?.data ?? response
 
-    if (data && typeof data === 'object') {
+    if (
+      data &&
+      typeof data === 'object' &&
+      Object.keys(data).some((month) => /^\d{4}-\d{2}$/.test(month))
+    ) {
       inventoryAgingResult.value = data as InventoryAgingResponse
-      if (!trendChart) initTrendChart()
-      renderTrendChart()
+      nextTick(() => {
+        if (!trendChart) initTrendChart()
+        renderTrendChart()
+      })
     }
   } catch (error) {
     console.error('获取库存积压趋势数据失败', error)
@@ -614,7 +471,6 @@ async function requestInventoryDistribution() {
     if (data && typeof data === 'object') {
       inventoryResult.value = data as InventoryDistributionResponse
       renderDistributionChart()
-      renderTrendChart()
     }
   } catch (error) {
     console.error('获取库存分布数据失败', error)
@@ -679,7 +535,11 @@ onUnmounted(() => {
         v-show="activePanel === 'distribution'"
         ref="distributionChartRef"
         class="inventory-chart"></div>
-      <div v-show="activePanel === 'trend'" ref="trendChartRef" class="inventory-chart"></div>
+      <div
+        v-show="activePanel === 'trend'"
+        ref="trendChartRef"
+        style="height: 80%; margin-top: 18px"
+        class="inventory-chart"></div>
     </div>
   </div>
 </template>