592 lines
15 KiB
Vue
592 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<SidePanelItem title="生态流量达标情况" :click-action="{ show: true }">
|
||
<!-- 使用插槽自定义点击提示的内容 -->
|
||
<!-- 1、时间：2026-05-11 至 2026-06-11；
|
||
|
||
-->
|
||
<template #click-action-content>
|
||
<div v-if="titleData.cnt" style="max-width: 300px; line-height: 1.6">
|
||
<p>
|
||
1、时间：{{ getdate().startDate1 }} 至 {{ getdate().endDate1 }}；
|
||
</p>
|
||
<p>
|
||
2、范围：接入过生态流量数据的电站<span
|
||
style="color: #5989ad; cursor: pointer"
|
||
@click.stop="handleStationClick()"
|
||
>
|
||
({{ titleData.cnt }}) </span
|
||
>；
|
||
</p>
|
||
<p>3、达标判定：按环评批复或报告中对生态流量限值有明确要求的评判。</p>
|
||
</div>
|
||
</template>
|
||
<div class="body_topOne">
|
||
<a-radio-group v-model:value="mode" @change="getEcharts()">
|
||
<a-radio-button value="top">按基地</a-radio-button>
|
||
<a-radio-button value="left">按调节性能</a-radio-button>
|
||
</a-radio-group>
|
||
</div>
|
||
<a-spin :spinning="spinning">
|
||
<div ref="chartRef" class="chart-container"></div>
|
||
</a-spin>
|
||
</SidePanelItem>
|
||
</div>
|
||
<!-- 环保自动监测工作开展情况弹框 -->
|
||
<a-modal
|
||
v-model:open="huanbaoModalVisible"
|
||
:title="'环保自动监测工作开展情况'"
|
||
width="1536px"
|
||
:footer="null"
|
||
>
|
||
<ModalYkzhbzdjcgz v-if="huanbaoModalVisible" :titleData="titleData" />
|
||
</a-modal>
|
||
|
||
<!-- 生态流量达标率详情弹框 -->
|
||
<a-modal
|
||
v-model:open="detailModalVisible"
|
||
:title="detailModalTitle"
|
||
width="1536px"
|
||
:footer="null"
|
||
>
|
||
<STLLXFFS
|
||
v-if="detailModalVisible"
|
||
:type="mode"
|
||
:basicId="detailData[0]?.baseId"
|
||
:qecPerformance=detailData[0].qecPerformance
|
||
/>
|
||
</a-modal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, watch } from 'vue';
|
||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||
import * as echarts from 'echarts';
|
||
import { eqqecRateCount, evnmAutoMonitorGetKendoListCust } from '@/api/stll';
|
||
import ModalYkzhbzdjcgz from '../shengtaidabiaoMod/TwoLayer/ModalYkzhbzdjcgz.vue';
|
||
import STLLXFFS from './TwoLayer/STLLXFFS.vue'
|
||
// 定义组件名（便于调试和递归）
|
||
defineOptions({
|
||
name: 'shengtaidabiaoMod'
|
||
});
|
||
const mode = ref('top');
|
||
const spinning = ref(false);
|
||
const chartRef = ref<HTMLElement | null>(null);
|
||
let chartInstance: echarts.ECharts | null = null;
|
||
|
||
// 动态数据存储
|
||
const chartData = ref<{
|
||
categories: string[];
|
||
currentData: number[];
|
||
lastYearData: number[];
|
||
baseIds: (string | number)[];
|
||
qecPerformances: (string | number)[];
|
||
}>({
|
||
categories: [],
|
||
currentData: [],
|
||
lastYearData: [],
|
||
baseIds: [],
|
||
qecPerformances: []
|
||
});
|
||
const huanbaoModalVisible = ref(false);
|
||
// 处理电站数量点击事件
|
||
const handleStationClick = () => {
|
||
huanbaoModalVisible.value = true;
|
||
};
|
||
// 加载数据
|
||
const loadData = async () => {
|
||
spinning.value = true;
|
||
|
||
try {
|
||
// 先获取数据
|
||
await getEcharts();
|
||
|
||
// 确保 DOM 已渲染后初始化图表
|
||
setTimeout(() => {
|
||
initChart();
|
||
spinning.value = false;
|
||
}, 50);
|
||
} catch (error) {
|
||
console.error('数据加载失败:', error);
|
||
spinning.value = false;
|
||
}
|
||
};
|
||
|
||
// 初始化图表
|
||
const initChart = () => {
|
||
if (!chartRef.value) {
|
||
console.error('图表容器未渲染');
|
||
return;
|
||
}
|
||
|
||
// 检查容器尺寸
|
||
const containerHeight = chartRef.value.offsetHeight;
|
||
if (!containerHeight || containerHeight === 0) {
|
||
console.warn('容器高度为 0，延迟重试');
|
||
setTimeout(() => initChart(), 50);
|
||
return;
|
||
}
|
||
|
||
// 如果实例存在，先销毁
|
||
if (chartInstance) {
|
||
chartInstance.dispose();
|
||
}
|
||
|
||
chartInstance = echarts.init(chartRef.value);
|
||
|
||
// 使用动态数据
|
||
const data = chartData.value;
|
||
const isHorizontal = mode.value === 'top';
|
||
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter: function (params: any) {
|
||
let result = params[0].name + '<br/>';
|
||
params.forEach((param: any) => {
|
||
const percentage = param.value.toFixed(2) + '%';
|
||
result +=
|
||
param.marker +
|
||
param.seriesName +
|
||
' <b>' +
|
||
percentage +
|
||
'</b><br/>';
|
||
});
|
||
return result;
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['当前', '去年同期']
|
||
},
|
||
grid: { left: 10, right: 10, bottom: 20, top: 40, containLabel: true },
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
// 横向柱形图(mode='top'): X轴是数值轴，需要缩放
|
||
// 竖向柱状图(mode='left'): X轴是分类轴，不需要缩放；Y轴是数值轴，也不需要内部缩放
|
||
[isHorizontal ? 'xAxisIndex' : 'xAxisIndex']: 0,
|
||
filterMode: 'empty',
|
||
zoomOnMouseWheel: true,
|
||
moveOnMouseMove: false,
|
||
moveOnMouseWheel: true,
|
||
start: 0,
|
||
end: 100,
|
||
minValueSpan: 0,
|
||
maxValueSpan: isHorizontal ? 20 : 5
|
||
}
|
||
],
|
||
xAxis: isHorizontal
|
||
? {
|
||
type: 'value',
|
||
min: 80,
|
||
max: 100,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#E8E8E8',
|
||
type: 'solid'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#666',
|
||
formatter: '{value}'
|
||
}
|
||
}
|
||
: {
|
||
type: 'category',
|
||
data: data.categories,
|
||
axisLabel: {
|
||
color: '#666',
|
||
fontSize: 12,
|
||
interval: 0,
|
||
rotate: 0,
|
||
margin: 10
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#666'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#666'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: isHorizontal
|
||
? {
|
||
type: 'category',
|
||
data: data.categories,
|
||
inverse: true,
|
||
axisLabel: {
|
||
color: '#666',
|
||
fontSize: 12,
|
||
interval: 0,
|
||
rotate: 45,
|
||
margin: 10
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#666'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#666'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}
|
||
: {
|
||
type: 'value',
|
||
min: 0,
|
||
max: 100,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#E8E8E8',
|
||
type: 'solid'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#666',
|
||
formatter: '{value}'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '当前',
|
||
type: 'bar',
|
||
data: data.currentData,
|
||
itemStyle: {
|
||
color: '#5470C6'
|
||
},
|
||
barWidth: isHorizontal ? 8 : 8
|
||
// barGap: '30%'
|
||
},
|
||
{
|
||
name: '去年同期',
|
||
type: 'bar',
|
||
data: data.lastYearData,
|
||
itemStyle: {
|
||
color: '#91CC75'
|
||
},
|
||
barWidth: isHorizontal ? 8 : 8
|
||
// barGap: '30%'
|
||
}
|
||
]
|
||
};
|
||
|
||
chartInstance.setOption(option);
|
||
|
||
// 添加点击事件
|
||
chartInstance.off('click');
|
||
chartInstance.on('click', (params: any) => {
|
||
handleChartClick(params);
|
||
});
|
||
|
||
// 强制重绘，确保尺寸正确
|
||
setTimeout(() => {
|
||
chartInstance?.resize();
|
||
}, 0);
|
||
};
|
||
|
||
// 处理图表点击事件
|
||
const handleChartClick = (params: any) => {
|
||
const categoryName = params.name;
|
||
const currentIndex = params.dataIndex;
|
||
// debugger
|
||
|
||
// 设置弹框标题
|
||
detailModalTitle.value =
|
||
mode.value === 'top'
|
||
? `生态流量达标率(按基地统计) `
|
||
: `生态流量达标率(按调节性能统计)`;
|
||
|
||
// 获取当前点击项的详细数据
|
||
const baseId = mode.value === 'top' ? chartData.value.baseIds[currentIndex] : undefined;
|
||
const qecPerformance = mode.value === 'left' ? chartData.value.qecPerformances[currentIndex] : undefined;
|
||
// debugger
|
||
|
||
const currentItem = {
|
||
baseId: baseId,
|
||
baseName: mode.value === 'top' ? categoryName :'',
|
||
qecPerformance: qecPerformance,
|
||
qecPerformanceName: mode.value === 'left' ? categoryName : '',
|
||
qecRate: chartData.value.currentData[currentIndex],
|
||
beforeQecRate: chartData.value.lastYearData[currentIndex]
|
||
};
|
||
|
||
detailData.value = [currentItem];
|
||
detailModalVisible.value = true;
|
||
};
|
||
|
||
const getdate = () => {
|
||
const now = new Date();
|
||
const oneMonthAgo = new Date(now);
|
||
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
|
||
|
||
// 格式化日期为 YYYY-MM-DD
|
||
const formatDate = (date: Date) => {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
};
|
||
|
||
const startDate = `${formatDate(oneMonthAgo)} 00:00:00`;
|
||
const endDate = `${formatDate(now)} 23:59:59`;
|
||
const startDate1 = `${formatDate(oneMonthAgo)}`;
|
||
const endDate1 = `${formatDate(now)}`;
|
||
return { startDate, endDate, startDate1, endDate1 };
|
||
};
|
||
const getEcharts = async () => {
|
||
let params = {
|
||
filter: {
|
||
logic: 'and',
|
||
filters: [
|
||
mode.value == 'top'
|
||
? {
|
||
field: 'dtinEnv',
|
||
operator: 'in',
|
||
dataType: 'string',
|
||
value: [1, 2]
|
||
}
|
||
: {
|
||
field: 'type',
|
||
operator: 'eq',
|
||
dataType: 'string',
|
||
value: 'DAY'
|
||
},
|
||
{
|
||
field: 'tm',
|
||
operator: 'gte',
|
||
dataType: 'date',
|
||
value: getdate().startDate
|
||
},
|
||
{
|
||
field: 'tm',
|
||
operator: 'lte',
|
||
dataType: 'date',
|
||
value: getdate().endDate
|
||
}
|
||
]
|
||
},
|
||
group:
|
||
mode.value == 'top'
|
||
? [
|
||
{
|
||
dir: 'asc',
|
||
field: 'basestepsort'
|
||
},
|
||
{
|
||
dir: 'asc',
|
||
field: 'baseId'
|
||
},
|
||
{
|
||
dir: 'asc',
|
||
field: 'baseName'
|
||
}
|
||
]
|
||
: [
|
||
{
|
||
dir: 'asc',
|
||
field: 'qecPerformance'
|
||
}
|
||
]
|
||
};
|
||
|
||
try {
|
||
const res: any = await eqqecRateCount(params);
|
||
|
||
// 处理返回数据
|
||
if (res && res.success && res.data && res.data.data) {
|
||
const apiData = res.data.data;
|
||
|
||
// 根据 mode 提取不同的数据
|
||
if (mode.value === 'top') {
|
||
// 按基地模式：去重处理（避免 baseId 重复）
|
||
const uniqueMap = new Map();
|
||
apiData.forEach((item: any) => {
|
||
if (!uniqueMap.has(item.baseId)) {
|
||
uniqueMap.set(item.baseId, item);
|
||
}
|
||
});
|
||
|
||
const uniqueData = Array.from(uniqueMap.values());
|
||
|
||
chartData.value = {
|
||
categories: uniqueData.map((item: any) => item.baseName || ''),
|
||
currentData: uniqueData.map((item: any) =>
|
||
item.qecRate != null ? Number(item.qecRate) : 0
|
||
),
|
||
lastYearData: uniqueData.map((item: any) =>
|
||
item.beforeQecRate != null ? Number(item.beforeQecRate) : 0
|
||
),
|
||
baseIds: uniqueData.map((item: any) => item.baseId),
|
||
qecPerformances: []
|
||
};
|
||
} else {
|
||
// 按调节性能模式
|
||
chartData.value = {
|
||
categories: apiData.map((item: any) => item.qecPerformanceName || ''),
|
||
currentData: apiData.map((item: any) =>
|
||
item.qecRate != null ? Number(item.qecRate) : 0
|
||
),
|
||
lastYearData: apiData.map((item: any) =>
|
||
item.beforeQecRate != null ? Number(item.beforeQecRate) : 0
|
||
),
|
||
baseIds: [],
|
||
qecPerformances: apiData.map((item: any) => item.qecPerformance || '')
|
||
};
|
||
}
|
||
} else {
|
||
console.warn('API 返回数据格式异常');
|
||
// 使用空数据
|
||
chartData.value = {
|
||
categories: [],
|
||
currentData: [],
|
||
lastYearData: [],
|
||
baseIds: [],
|
||
qecPerformances: []
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error('API 调用失败:', error);
|
||
// 发生错误时使用空数据
|
||
chartData.value = {
|
||
categories: [],
|
||
currentData: [],
|
||
lastYearData: [],
|
||
baseIds: [],
|
||
qecPerformances: []
|
||
};
|
||
}
|
||
};
|
||
//统计电站范围：接入过生态流量数据的电站
|
||
const titleData: any = ref({ cnt: 0 });
|
||
const getcont = async () => {
|
||
let params = {
|
||
filter: {
|
||
logic: 'and',
|
||
filters: [
|
||
{
|
||
field: 'showIds',
|
||
operator: 'in',
|
||
value: ['7']
|
||
}
|
||
]
|
||
}
|
||
};
|
||
let res = await evnmAutoMonitorGetKendoListCust(params);
|
||
// [
|
||
// {
|
||
// "cnt": 452,
|
||
// "orderInx": 7,
|
||
// "orderInxName": "生态流量",
|
||
// "sttpFullPath": "ENG",
|
||
// "sttpCode": "ENG",
|
||
// "sttpName": "生态流量"
|
||
// }
|
||
// ]
|
||
let list = res?.data?.data[0];
|
||
if (list) {
|
||
titleData.value = list;
|
||
}
|
||
// debugger
|
||
};
|
||
// 页面加载时执行的逻辑
|
||
onMounted(() => {
|
||
loadData();
|
||
getcont();
|
||
// 监听窗口大小变化
|
||
window.addEventListener('resize', () => {
|
||
chartInstance?.resize();
|
||
});
|
||
});
|
||
|
||
// 详情弹框相关
|
||
const detailModalVisible = ref(false);
|
||
const detailModalTitle = ref('');
|
||
const detailData = ref<any[]>([]);
|
||
const detailColumns = ref([
|
||
{
|
||
title: mode.value === 'top' ? '基地名称' : '调节性能',
|
||
dataIndex: mode.value === 'top' ? 'baseName' : 'qecPerformanceName',
|
||
key: mode.value === 'top' ? 'baseName' : 'qecPerformanceName',
|
||
width: 150,
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
title: '当前达标率',
|
||
dataIndex: 'qecRate',
|
||
key: 'qecRate',
|
||
width: 120,
|
||
align: 'right'
|
||
},
|
||
{
|
||
title: '去年同期达标率',
|
||
dataIndex: 'beforeQecRate',
|
||
key: 'beforeQecRate',
|
||
width: 150,
|
||
align: 'right'
|
||
}
|
||
]);
|
||
|
||
// 监听 mode 变化
|
||
watch(mode, () => {
|
||
loadData();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.body_topOne {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
|
||
.title_text {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
.ant-radio-group {
|
||
.ant-radio-button-wrapper-checked {
|
||
border: 1px solid #2f6b98 !important;
|
||
background-color: #2f6b98 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.ant-radio-button-wrapper {
|
||
border: 2px solid #2f6b98 !important;
|
||
}
|
||
|
||
.ant-radio-button-wrapper-checked :before {
|
||
background-color: #2f6b98 !important;
|
||
}
|
||
}
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 449px;
|
||
// padding: 10px;
|
||
}
|
||
|
||
.detail-content {
|
||
padding: 16px 0;
|
||
}
|
||
</style>
|