فهرست منبع

fix: 调整钻井历史工作量单位展示

- 将钻井历史工作量进尺数据按万米展示
- 同步调整 Y 轴、tooltip、柱顶标签的小数格式
- 微调左右 Y 轴标题对齐和偏移,避免标题超出图表区域
Zimo 3 روز پیش
والد
کامیت
64a1a178a5
1فایلهای تغییر یافته به همراه60 افزوده شده و 20 حذف شده
  1. 60 20
      src/views/pms/stat/rykb/historical-workload.vue

+ 60 - 20
src/views/pms/stat/rykb/historical-workload.vue

@@ -13,6 +13,8 @@ import { IotStatApi } from '@/api/pms/stat'
 
 type ActivePanel = 'zj' | 'xj'
 
+const FOOTAGE_UNIT_DIVISOR = 10000
+
 const activePanel = ref<ActivePanel>('zj')
 const chartData = ref<ChartData>({
   xAxis: [],
@@ -50,8 +52,18 @@ function getBarStyle(color: (typeof THEME.color)[keyof typeof THEME.color]) {
   }
 }
 
-function formatValue(value: number | string) {
-  return Number(value || 0).toLocaleString('en-US')
+function formatValue(value: number | string, maximumFractionDigits = 0) {
+  return Number(value || 0).toLocaleString('en-US', {
+    maximumFractionDigits
+  })
+}
+
+function formatWanMiValue(value: number | string) {
+  return formatValue(value, 2)
+}
+
+function toWanMi(value: number) {
+  return Number((Number(value || 0) / FOOTAGE_UNIT_DIVISOR).toFixed(2))
 }
 
 function isFootageSeries(name: string) {
@@ -66,6 +78,31 @@ function isFinishedWellsSeries(name: string) {
   return name.includes('finishedWells') || displayName.includes('完井')
 }
 
+function shouldUseWanMiUnit(name: string) {
+  return activePanel.value === 'zj' && isFootageSeries(name)
+}
+
+function getSeriesData(item: ChartData['series'][number]) {
+  const data = item.data || []
+
+  if (!shouldUseWanMiUnit(item.name)) {
+    return data
+  }
+
+  return data.map((value) => toWanMi(value))
+}
+
+function getAxisLabel(maximumFractionDigits = 0) {
+  return {
+    color: THEME.text.regular,
+    fontSize: 12,
+    fontFamily: FONT_FAMILY,
+    formatter(value: number) {
+      return formatValue(value, maximumFractionDigits)
+    }
+  }
+}
+
 function hasMixedUnits(data: ChartData) {
   return (
     data.series.some((item) => isFootageSeries(item.name)) &&
@@ -83,14 +120,7 @@ function getYAxisOption(data: ChartData): echarts.EChartsOption['yAxis'] {
     axisTick: {
       show: false
     },
-    axisLabel: {
-      color: THEME.text.regular,
-      fontSize: 12,
-      fontFamily: FONT_FAMILY,
-      formatter(value: number) {
-        return formatValue(value)
-      }
-    },
+    axisLabel: getAxisLabel(),
     splitLine: {
       lineStyle: {
         color: THEME.split,
@@ -100,16 +130,18 @@ function getYAxisOption(data: ChartData): echarts.EChartsOption['yAxis'] {
   }
 
   if (!hasMixedUnits(data)) {
+    const hasFootage = data.series.some((item) => isFootageSeries(item.name))
+    const useWanMiUnit = activePanel.value === 'zj' && hasFootage
+
     return {
       ...baseAxis,
-      name: data.series.some((item) => isFootageSeries(item.name))
-        ? '累计进尺(m)'
-        : '累计完井数(口)',
+      name: hasFootage ? `累计进尺(${useWanMiUnit ? '万米' : 'm'})` : '累计完井数(口)',
+      axisLabel: getAxisLabel(useWanMiUnit ? 2 : 0),
       nameTextStyle: {
         color: THEME.text.regular,
         fontSize: 13,
         fontFamily: FONT_FAMILY,
-        align: 'center'
+        align: 'left'
       }
     }
   }
@@ -117,13 +149,15 @@ function getYAxisOption(data: ChartData): echarts.EChartsOption['yAxis'] {
   return [
     {
       ...baseAxis,
-      name: '累计进尺(m)',
+      name: `累计进尺(${activePanel.value === 'zj' ? '万米' : 'm'})`,
       position: 'left',
+      axisLabel: getAxisLabel(activePanel.value === 'zj' ? 2 : 0),
       nameTextStyle: {
         color: THEME.text.regular,
         fontSize: 13,
         fontFamily: FONT_FAMILY,
-        align: 'center'
+        align: 'left',
+        padding: [0, 0, 0, -22]
       }
     },
     {
@@ -134,7 +168,8 @@ function getYAxisOption(data: ChartData): echarts.EChartsOption['yAxis'] {
         color: THEME.text.regular,
         fontSize: 13,
         fontFamily: FONT_FAMILY,
-        align: 'center'
+        align: 'right',
+        padding: [0, -24, 0, 0]
       },
       splitLine: {
         show: false
@@ -166,7 +201,7 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
         }
       },
       valueFormatter(value: number | string) {
-        return formatValue(value)
+        return formatWanMiValue(value)
       }
     }),
     legend: createLegend(
@@ -197,12 +232,13 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
     series: seriesData.map((item, index) => {
       const color = colorList[index % colorList.length]
       const useRightAxis = mixedUnits && isFinishedWellsSeries(item.name)
+      const useWanMiUnit = shouldUseWanMiUnit(item.name)
 
       return {
         name: formatSeriesName(item.name),
         type: 'bar',
         yAxisIndex: useRightAxis ? 1 : 0,
-        data: item.data || [],
+        data: getSeriesData(item),
         barWidth: 24,
         barMaxWidth: 32,
         showBackground: true,
@@ -220,7 +256,11 @@ function getChartOption(data: ChartData): echarts.EChartsOption {
           fontWeight: 700,
           fontFamily: FONT_FAMILY,
           formatter(params: any) {
-            return Number(params.value) ? formatValue(params.value) : ''
+            return Number(params.value)
+              ? useWanMiUnit
+                ? formatWanMiValue(params.value)
+                : formatValue(params.value)
+              : ''
           }
         },
         emphasis: {