调整瑞鹰看板

src/views/pms/stat/rykb/equipment-category.vue

@@ -69,6 +69,30 @@ const categoryRows = computed(() =>
   })
 )
 
+function getCategoryChartLayout() {
+  const { clientWidth = 0, clientHeight = 0 } = categoryChartRef.value ?? {}
+  const compact = clientHeight > 0 && (clientHeight < 210 || clientWidth < 520)
+
+  return {
+    compact,
+    gridTop: compact ? 26 : 34,
+    gridRight: compact ? 24 : 92,
+    gridBottom: compact ? 20 : 24,
+    gridLeft: compact ? 154 : 200,
+    legendLeft: compact ? 282 : 360,
+    legendItemSize: compact ? 8 : 10,
+    legendGap: compact ? 10 : 14,
+    axisFontSize: compact ? 10 : 12,
+    projectFontSize: compact ? 11 : 13,
+    modelLabelWidth: compact ? 44 : 54,
+    projectLabelWidth: compact ? 90 : 104,
+    projectOffset: compact ? 58 : 70,
+    barWidth: compact ? 9 : 13,
+    summaryLabelDistance: compact ? 4 : 6,
+    summaryLabelFontSize: compact ? 10 : 12
+  }
+}
+
 function getCategoryOption(data: any): echarts.EChartsOption {
   const modelLabels = data.map((item) => item.model)
   const projectLabels = data.map((item) => item.projectLabel)
@@ -76,15 +100,32 @@ function getCategoryOption(data: any): echarts.EChartsOption {
   const ownedData = data.map((item) => item.owned)
   const nonOwnedData = data.map((item) => item.nonOwned)
   const maxTotal = Math.max(...totalData, 1)
+  const layout = getCategoryChartLayout()
+  const summaryLabel = {
+    show: true,
+    position: 'right' as any,
+    distance: layout.summaryLabelDistance,
+    color: THEME.text.strong,
+    fontSize: layout.summaryLabelFontSize,
+    fontWeight: 700,
+    fontFamily: FONT_FAMILY,
+    formatter(params: any) {
+      const row = data[params.dataIndex]
+
+      if (!row) return ''
+
+      return `${row.owned} / ${row.nonOwned}`
+    }
+  }
 
   return {
     ...ANIMATION,
     grid: {
       ...THEME.grid,
-      top: 34,
-      right: 18,
-      bottom: 24,
-      left: 200,
+      top: layout.gridTop,
+      right: layout.gridRight,
+      bottom: layout.gridBottom,
+      left: layout.gridLeft,
       containLabel: false
     },
     color: [THEME.color.green.line, THEME.color.orange.line],
@@ -92,10 +133,10 @@ function getCategoryOption(data: any): echarts.EChartsOption {
       {
         top: 0,
         right: 0,
-        left: 360,
-        itemWidth: 10,
-        itemHeight: 10,
-        itemGap: 14,
+        left: layout.legendLeft,
+        itemWidth: layout.legendItemSize,
+        itemHeight: layout.legendItemSize,
+        itemGap: layout.legendGap,
         selectedMode: true
       },
       ['自有设备', '非自有设备']
@@ -128,7 +169,7 @@ function getCategoryOption(data: any): echarts.EChartsOption {
     }),
     xAxis: {
       type: 'value',
-      max: Math.max(10, maxTotal),
+      max: Math.max(10, Math.ceil(maxTotal + 1)),
       axisLine: {
         show: true
       },
@@ -138,7 +179,7 @@ function getCategoryOption(data: any): echarts.EChartsOption {
       axisLabel: {
         show: true,
         color: THEME.text.regular,
-        fontSize: 12,
+        fontSize: layout.axisFontSize,
         fontWeight: 500,
         fontFamily: FONT_FAMILY
       },
@@ -162,11 +203,11 @@ function getCategoryOption(data: any): echarts.EChartsOption {
         },
         axisLabel: {
           color: THEME.text.regular,
-          fontSize: 12,
+          fontSize: layout.axisFontSize,
           fontWeight: 500,
           fontFamily: FONT_FAMILY,
-          margin: 10,
-          width: 54,
+          margin: layout.compact ? 6 : 10,
+          width: layout.modelLabelWidth,
           overflow: 'truncate',
           align: 'right'
         }
@@ -176,7 +217,7 @@ function getCategoryOption(data: any): echarts.EChartsOption {
         data: projectLabels,
         inverse: true,
         position: 'left',
-        offset: 70,
+        offset: layout.projectOffset,
         axisLine: {
           show: false
         },
@@ -185,11 +226,11 @@ function getCategoryOption(data: any): echarts.EChartsOption {
         },
         axisLabel: {
           color: THEME.text.strong,
-          fontSize: 13,
+          fontSize: layout.projectFontSize,
           fontWeight: 700,
           fontFamily: FONT_FAMILY,
-          margin: 10,
-          width: 104,
+          margin: layout.compact ? 6 : 10,
+          width: layout.projectLabelWidth,
           overflow: 'break',
           align: 'right'
         }
@@ -200,9 +241,13 @@ function getCategoryOption(data: any): echarts.EChartsOption {
         name: '设备数量',
         type: 'bar',
         data: totalData,
-        barWidth: 13,
+        barWidth: layout.barWidth,
         silent: true,
         z: 1,
+        label: summaryLabel,
+        labelLayout: {
+          hideOverlap: false
+        },
         itemStyle: {
           borderRadius: 999,
           color: THEME.split
@@ -216,7 +261,7 @@ function getCategoryOption(data: any): echarts.EChartsOption {
         type: 'bar',
         stack: 'device',
         data: ownedData,
-        barWidth: 13,
+        barWidth: layout.barWidth,
         barGap: '-100%',
         z: 3,
         itemStyle: {
@@ -233,7 +278,7 @@ function getCategoryOption(data: any): echarts.EChartsOption {
         type: 'bar',
         stack: 'device',
         data: nonOwnedData,
-        barWidth: 13,
+        barWidth: layout.barWidth,
         z: 3,
         itemStyle: {
           // borderRadius: [0, 999, 999, 0],
@@ -267,6 +312,7 @@ function renderCategoryChart() {
 
 function resizeCategoryChart() {
   categoryChart?.resize()
+  renderCategoryChart()
 }
 
 function destroyCategoryChart() {

src/views/pms/stat/rykb/inventory-situation.vue

@@ -124,7 +124,46 @@ function formatAmount(value: number) {
   return Number(value || 0).toFixed(2)
 }
 
+function getInventoryChartLayout(chartRef: Ref<HTMLDivElement | undefined>) {
+  const { clientWidth = 0, clientHeight = 0 } = chartRef.value ?? {}
+  const compact = clientHeight > 0 && (clientHeight < 210 || clientWidth < 520)
+
+  return {
+    compact,
+    trendGridTop: compact ? 24 : 32,
+    trendGridRight: compact ? 12 : THEME.grid.right,
+    trendGridBottom: compact ? 10 : THEME.grid.bottom,
+    legendTop: compact ? 0 : 4,
+    legendRight: compact ? 2 : 6,
+    legendItemSize: compact ? 9 : 12,
+    legendGap: compact ? 10 : 16,
+    legendFontSize: compact ? 11 : 14,
+    axisFontSize: compact ? 10 : 12,
+    yAxisLabelWidth: compact ? 96 : 132,
+    yAxisLabelMargin: compact ? 8 : 12,
+    distributionTitleTop: compact ? 6 : 18,
+    distributionTitleFontSize: compact ? 12 : 14,
+    distributionTitleLineHeight: compact ? 14 : 16,
+    distributionPieRadius: compact ? ['36%', '54%'] : ['48%', '68%'],
+    distributionPieCenterY: compact ? '62%' : '57%',
+    distributionLegendBottom: compact ? 0 : 10,
+    distributionLegendItemSize: compact ? 9 : 13,
+    distributionLegendGap: compact ? 8 : 14,
+    distributionLegendFontSize: compact ? 10 : 14,
+    pieLabelNameFontSize: compact ? 11 : 13,
+    pieLabelNameLineHeight: compact ? 18 : 22,
+    pieLabelValueFontSize: compact ? 16 : 20,
+    pieLabelValueLineHeight: compact ? 22 : 30,
+    barWidth: compact ? 8 : 12,
+    barGap: compact ? '12%' : '5%',
+    barCategoryGap: compact ? '46%' : '36%',
+    labelDistance: compact ? 4 : 7,
+    labelFontSize: compact ? 10 : 12
+  }
+}
+
 function getDistributionOption(data: InventoryItem[]): echarts.EChartsOption {
+  const layout = getInventoryChartLayout(distributionChartRef)
   const inventoryTotal = data.reduce((total, item) => total + item.mayInventoryAmount, 0)
   const backlogTotal = data.reduce((total, item) => total + item.mayBacklogAmount, 0)
   const inventoryPieData = data.map((item) => ({
@@ -146,16 +185,16 @@ function getDistributionOption(data: InventoryItem[]): echarts.EChartsOption {
     rich: {
       name: {
         color: THEME.text.regular,
-        fontSize: 13,
+        fontSize: layout.pieLabelNameFontSize,
         fontWeight: 500,
-        lineHeight: 22,
+        lineHeight: layout.pieLabelNameLineHeight,
         fontFamily: FONT_FAMILY
       },
       value: {
         color: THEME.text.strong,
-        fontSize: 20,
+        fontSize: layout.pieLabelValueFontSize,
         fontWeight: 700,
-        lineHeight: 30,
+        lineHeight: layout.pieLabelValueLineHeight,
         fontFamily: FONT_FAMILY
       }
     }
@@ -185,41 +224,41 @@ function getDistributionOption(data: InventoryItem[]): echarts.EChartsOption {
       {
         text: `5月底库存金额\n${formatAmount(inventoryTotal)} 万元`,
         left: '26.5%',
-        top: 18,
+        top: layout.distributionTitleTop,
         textAlign: 'center',
         textStyle: {
           color: THEME.text.strong,
-          fontSize: 14,
+          fontSize: layout.distributionTitleFontSize,
           fontWeight: 700,
-          lineHeight: 16,
+          lineHeight: layout.distributionTitleLineHeight,
           fontFamily: FONT_FAMILY
         }
       },
       {
         text: `5月底积压库存金额\n${formatAmount(backlogTotal)} 万元`,
         left: '72.5%',
-        top: 18,
+        top: layout.distributionTitleTop,
         textAlign: 'center',
         textStyle: {
           color: THEME.text.strong,
-          fontSize: 14,
+          fontSize: layout.distributionTitleFontSize,
           fontWeight: 700,
-          lineHeight: 16,
+          lineHeight: layout.distributionTitleLineHeight,
           fontFamily: FONT_FAMILY
         }
       }
     ],
     legend: createLegend({
       type: 'scroll',
-      bottom: 10,
+      bottom: layout.distributionLegendBottom,
       left: 10,
       right: 10,
-      itemWidth: 13,
-      itemHeight: 13,
-      itemGap: 14,
+      itemWidth: layout.distributionLegendItemSize,
+      itemHeight: layout.distributionLegendItemSize,
+      itemGap: layout.distributionLegendGap,
       textStyle: {
         color: THEME.text.regular,
-        fontSize: 14,
+        fontSize: layout.distributionLegendFontSize,
         fontWeight: 600,
         fontFamily: FONT_FAMILY
       }
@@ -228,8 +267,8 @@ function getDistributionOption(data: InventoryItem[]): echarts.EChartsOption {
       {
         name: '5月底库存金额',
         type: 'pie',
-        radius: ['48%', '68%'],
-        center: ['27%', '57%'],
+        radius: layout.distributionPieRadius,
+        center: ['27%', layout.distributionPieCenterY],
         minAngle: 5,
         avoidLabelOverlap: true,
         label: pieLabel,
@@ -247,8 +286,8 @@ function getDistributionOption(data: InventoryItem[]): echarts.EChartsOption {
       {
         name: '5月底积压库存金额',
         type: 'pie',
-        radius: ['48%', '68%'],
-        center: ['73%', '57%'],
+        radius: layout.distributionPieRadius,
+        center: ['73%', layout.distributionPieCenterY],
         minAngle: 5,
         avoidLabelOverlap: true,
         label: pieLabel,
@@ -274,12 +313,13 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
     1
   )
   const backlogAxisMax = Math.ceil((maxBacklog * 1.15) / 50) * 50
+  const layout = getInventoryChartLayout(trendChartRef)
   const barLabel = {
     show: true,
     position: 'right' as any,
-    distance: 7,
+    distance: layout.labelDistance,
     color: THEME.text.strong,
-    fontSize: 12,
+    fontSize: layout.labelFontSize,
     fontWeight: 700,
     fontFamily: FONT_FAMILY,
     formatter(params: any) {
@@ -293,19 +333,21 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
     ...ANIMATION,
     grid: {
       ...THEME.grid,
-      top: 32
+      top: layout.trendGridTop,
+      right: layout.trendGridRight,
+      bottom: layout.trendGridBottom
     },
     color: [THEME.color.blue.line, THEME.color.orange.line],
     legend: createLegend(
       {
-        top: 4,
-        right: 6,
-        itemWidth: 12,
-        itemHeight: 12,
-        itemGap: 16,
+        top: layout.legendTop,
+        right: layout.legendRight,
+        itemWidth: layout.legendItemSize,
+        itemHeight: layout.legendItemSize,
+        itemGap: layout.legendGap,
         textStyle: {
           color: THEME.text.regular,
-          fontSize: 14,
+          fontSize: layout.legendFontSize,
           fontWeight: 600,
           fontFamily: FONT_FAMILY
         }
@@ -336,7 +378,7 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
       },
       axisLabel: {
         color: THEME.text.regular,
-        fontSize: 12,
+        fontSize: layout.axisFontSize,
         fontFamily: FONT_FAMILY,
         formatter(value: number) {
           return `${value}`
@@ -361,11 +403,11 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
       },
       axisLabel: {
         color: THEME.text.regular,
-        fontSize: 12,
+        fontSize: layout.axisFontSize,
         fontWeight: 600,
         fontFamily: FONT_FAMILY,
-        margin: 12,
-        width: 132,
+        margin: layout.yAxisLabelMargin,
+        width: layout.yAxisLabelWidth,
         overflow: 'break',
         align: 'right'
       }
@@ -375,9 +417,9 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
         name: '年初积压库存',
         type: 'bar',
         data: data.map((item) => item.yearBeginningBacklog),
-        barWidth: 12,
-        barGap: '5%',
-        barCategoryGap: '36%',
+        barWidth: layout.barWidth,
+        barGap: layout.barGap,
+        barCategoryGap: layout.barCategoryGap,
         barMinHeight: 0,
         showBackground: false,
         backgroundStyle: {
@@ -386,7 +428,7 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
         },
         label: barLabel,
         labelLayout: {
-          hideOverlap: true
+          hideOverlap: false
         },
         itemStyle: {
           shadowBlur: 10,
@@ -402,10 +444,10 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
         name: '5月底积压库存',
         type: 'bar',
         data: data.map((item) => item.mayBacklogAmount),
-        barWidth: 12,
+        barWidth: layout.barWidth,
         barMinHeight: 0,
-        barGap: '5%',
-        barCategoryGap: '36%',
+        barGap: layout.barGap,
+        barCategoryGap: layout.barCategoryGap,
         showBackground: false,
         backgroundStyle: {
           color: THEME.split,
@@ -413,7 +455,7 @@ function getTrendOption(data: InventoryItem[]): echarts.EChartsOption {
         },
         label: barLabel,
         labelLayout: {
-          hideOverlap: true
+          hideOverlap: false
         },
         itemStyle: {
           shadowBlur: 10,
@@ -468,6 +510,8 @@ function initTrendChart() {
 function resizeCharts() {
   distributionChart?.resize()
   trendChart?.resize()
+  renderDistributionChart()
+  renderTrendChart()
 }
 
 function destroyCharts() {