|
|
@@ -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: {
|