|
@@ -78,7 +78,7 @@
|
|
|
</el-row>
|
|
|
<!-- 第二行:图表行 -->
|
|
|
<el-row :gutter="16" class="mb-4 mt-3">
|
|
|
- <el-col :span="7">
|
|
|
+ <el-col :span="6">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center">
|
|
@@ -88,7 +88,7 @@
|
|
|
<div ref="statusChartRef" class="h-[290px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
- <el-col :span="7">
|
|
|
+ <el-col :span="10">
|
|
|
<el-card class="chart-card" shadow="never" >
|
|
|
<template #header>
|
|
|
<div class="flex items-center">
|
|
@@ -98,7 +98,7 @@
|
|
|
<div ref="topContainer" class="h-[290px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
- <el-col :span="10">
|
|
|
+ <el-col :span="8">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center justify-between">
|
|
@@ -112,7 +112,7 @@
|
|
|
|
|
|
<!-- 第三行:消息统计行 -->
|
|
|
<el-row :gutter="16" class="mb-1">
|
|
|
- <el-col :span="7">
|
|
|
+ <el-col :span="6">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center">
|
|
@@ -122,7 +122,7 @@
|
|
|
<div ref="materialChartRef" class="h-[320px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
- <el-col :span="17">
|
|
|
+ <el-col :span="18">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center justify-between">
|
|
@@ -138,20 +138,20 @@
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center justify-between">
|
|
|
- <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.gasWater')}}</span>
|
|
|
+ <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.dailyGasWater')}}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div ref="zqlChartRef" class="h-[300px]"></div>
|
|
|
+ <div ref="todayZqlRef" class="h-[300px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center justify-between">
|
|
|
- <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.dailyGasWater')}}</span>
|
|
|
+ <span class="text-base font-medium " style="color: #b6c8da">{{t('stat.gasWater')}}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div ref="todayZqlRef" class="h-[300px]"></div>
|
|
|
+ <div ref="zqlChartRef" class="h-[300px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -441,37 +441,37 @@ const initTodayZqlChart = async (gas:any,water:any) => {
|
|
|
},
|
|
|
position: 'left' // 左侧 Y 轴
|
|
|
},
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name:water+'(m³)',
|
|
|
- axisLabel: {
|
|
|
- color: '#B6C8DA',
|
|
|
- formatter: '{value}'
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true, // 显示水平网格线(默认显示)
|
|
|
- lineStyle: {
|
|
|
- // 水平网格线颜色(可设置为纯色或带透明度的颜色)
|
|
|
- color: '#457794', // 浅灰色半透明
|
|
|
- // 可选:设置线条类型(实线/虚线/点线)
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#B6C8DA'
|
|
|
- }
|
|
|
- },
|
|
|
- position: 'right', // 右侧 Y 轴
|
|
|
- splitLine: {
|
|
|
- show: false // 隐藏右侧 Y 轴的分割线
|
|
|
- }
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // type: 'value',
|
|
|
+ // name:water+'(m³)',
|
|
|
+ // axisLabel: {
|
|
|
+ // color: '#B6C8DA',
|
|
|
+ // formatter: '{value}'
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // show: true, // 显示水平网格线(默认显示)
|
|
|
+ // lineStyle: {
|
|
|
+ // // 水平网格线颜色(可设置为纯色或带透明度的颜色)
|
|
|
+ // color: '#457794', // 浅灰色半透明
|
|
|
+ // // 可选:设置线条类型(实线/虚线/点线)
|
|
|
+ // type: 'dashed'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#B6C8DA'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // position: 'right', // 右侧 Y 轴
|
|
|
+ // splitLine: {
|
|
|
+ // show: false // 隐藏右侧 Y 轴的分割线
|
|
|
+ // }
|
|
|
+ // }
|
|
|
],
|
|
|
|
|
|
series: zqlTodayData.value.series.map((item, index) => {
|
|
|
// 假设前两条曲线使用左侧 Y 轴,后两条曲线使用右侧 Y 轴
|
|
|
- const yAxisIndex = index < 1 ? 0 : 1
|
|
|
+ // const yAxisIndex = index < 1 ? 0 : 1
|
|
|
return {
|
|
|
name: item.name,
|
|
|
type: 'line',
|
|
@@ -488,7 +488,7 @@ const initTodayZqlChart = async (gas:any,water:any) => {
|
|
|
])
|
|
|
},
|
|
|
data: item.data,
|
|
|
- yAxisIndex: yAxisIndex // 指定使用的 Y 轴
|
|
|
+ // yAxisIndex: yAxisIndex // 指定使用的 Y 轴
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -862,36 +862,9 @@ const initZqlChart = (gas:any,water:any) => {
|
|
|
},
|
|
|
position: 'left' // 左侧 Y 轴
|
|
|
},
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: gas+'(m³)',
|
|
|
- axisLabel: {
|
|
|
- color: '#B6C8DA',
|
|
|
- formatter: '{value}'
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true, // 显示水平网格线(默认显示)
|
|
|
- lineStyle: {
|
|
|
- // 水平网格线颜色(可设置为纯色或带透明度的颜色)
|
|
|
- color: '#457794', // 浅灰色半透明
|
|
|
- // 可选:设置线条类型(实线/虚线/点线)
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#B6C8DA'
|
|
|
- }
|
|
|
- },
|
|
|
- position: 'right', // 右侧 Y 轴
|
|
|
- splitLine: {
|
|
|
- show: false // 隐藏右侧 Y 轴的分割线
|
|
|
- }
|
|
|
- }
|
|
|
],
|
|
|
series: zqlData.value.series.map((item, index) => {
|
|
|
// 假设前两条曲线使用左侧 Y 轴,后两条曲线使用右侧 Y 轴
|
|
|
- const yAxisIndex = index < 1 ? 0 : 1
|
|
|
return {
|
|
|
name: item.name,
|
|
|
type: 'bar',
|
|
@@ -908,7 +881,6 @@ const initZqlChart = (gas:any,water:any) => {
|
|
|
])
|
|
|
},
|
|
|
data: item.data,
|
|
|
- yAxisIndex: yAxisIndex // 指定使用的 Y 轴
|
|
|
}
|
|
|
})
|
|
|
}
|