From 2eb996e89891da7fe35b6e909b28097ef9683b6e Mon Sep 17 00:00:00 2001
From: dengzedong <dengzedong@email>
Date: 星期一, 09 六月 2025 14:39:29 +0800
Subject: [PATCH] 建议快照 图表Y轴上下限函数
---
src/views/model/sche/suggest/suggestSnapshot.vue | 125 +++++++++++++++++++++++++++++++++++++++--
1 files changed, 117 insertions(+), 8 deletions(-)
diff --git a/src/views/model/sche/suggest/suggestSnapshot.vue b/src/views/model/sche/suggest/suggestSnapshot.vue
index f64263c..fd8272f 100644
--- a/src/views/model/sche/suggest/suggestSnapshot.vue
+++ b/src/views/model/sche/suggest/suggestSnapshot.vue
@@ -40,19 +40,20 @@
const loading = ref(false)
- const open = async (id: string) => {
+ const open = async (suggestId: string) => {
visible.value = true
- await getDataList(id)
+ await getDataList(suggestId)
}
defineExpose({ open })
/** 获取数据列表 */
- const getDataList = async (id: string) => {
+ const getDataList = async (suggestId: string) => {
try {
- const res = await suggestSnapshotApi.getList(id)
+ const res = await suggestSnapshotApi.getList(suggestId)
dataList.value = res
selectedData.value = [] // 清空已选项
+ refreshCharts()
} catch (error) {
console.error(error)
message.error('获取数据列表失败')
@@ -112,26 +113,134 @@
if (!chartInfo) return chart
+ const markLineData = []
+
+ if (chartInfo.data?.limitH !== null) {
+ markLineData.push({
+ yAxis: chartInfo.data?.limitH, // 上限
+ label: {
+ show: true,
+ formatter: '上限',
+ position: 'insideStartTop',
+ color: '#FF9A3D'
+ },
+ lineStyle: {
+ color: '#FF9A3D',
+ type: 'dashed'
+ },
+ })
+ }
+ if (chartInfo.data?.limitL !== null) {
+ markLineData.push({
+ yAxis: chartInfo.data?.limitL, // 下限
+ label: {
+ show: true,
+ formatter: '下限',
+ position: 'insideStartBottom',
+ color: '#00C2FF'
+ },
+ lineStyle: {
+ color: '#00C2FF',
+ type: 'dashed'
+ },
+ })
+ }
+ if (chartInfo.data?.scheduleTime !== null) {
+ markLineData.push({
+ xAxis: chartInfo.data?.scheduleTime, // 真实数据分割线
+ label: {
+ show: true,
+ formatter: '建\n议\n时\n间',
+ position: 'insideEndBottom',
+ color: '#5DFF9E',
+ rotate: 0
+ },
+ lineStyle: {
+ color: '#5DFF9E',
+ },
+ })
+ }
+ // 采纳
+ if (chartInfo.data?.status === 1) {
+ markLineData.push({
+ xAxis: chartInfo.data?.handleTime,
+ label: {
+ show: true,
+ formatter: '采\n纳\n时\n间',
+ position: 'insideEndBottom',
+ color: '#2196F3',
+ rotate: 0
+ },
+ lineStyle: {
+ color: '#2196F3',
+ },
+ })
+ }
+ // 忽略
+ if (chartInfo.data?.status === 2) {
+ markLineData.push({
+ xAxis: chartInfo.data?.handleTime,
+ label: {
+ show: true,
+ formatter: '忽\n略\n时\n间',
+ position: 'insideEndBottom',
+ color: '#999999',
+ rotate: 0
+ },
+ lineStyle: {
+ color: '#999999',
+ },
+ })
+ }
+
+ // 冲顶触底时间
+ if (chartInfo.data?.overLimitTimes?.length > 0) {
+ chartInfo.data?.overLimitTimes.forEach(overLimitTime => {
+ markLineData.push({
+ xAxis: overLimitTime,
+ lineStyle: {
+ color: '#ff0000',
+ },
+ })
+ })
+ }
+
const option = {
title: {
text: chartInfo.name,
textStyle: { fontSize: 14 }
},
tooltip: { trigger: 'axis' },
- grid: { top: 30, left: '3%', right: '5%', bottom: 20 },
+ grid: { top: '10%', left: '3%', right: '5%', bottom: 20 },
xAxis: {type: 'category'},
- yAxis: { type: 'value' },
+ yAxis: { type: 'value',
+ max: (value) => chartInfo.data?.limitH && value.max < chartInfo.data.limitH ? chartInfo.data?.limitH : null,
+ min: (value) => chartInfo.data?.limitL && value.min > chartInfo.data.limitL ? chartInfo.data?.limitL : null,
+ },
dataZoom: [{ type: 'inside' }],
series: [{
type: 'line',
data: chartInfo.data?.dataList || [],
- lineStyle: { color: '#5B8FF9', width: 1 }
+ lineStyle: { color: '#5B8FF9', width: 1 },
+ markLine: {
+ silent: true,
+ symbol: ['none', 'none'],
+ lineStyle: {
+ type: 'solid',
+ width: 1,
+ color: '#95E6FF',
+ },
+ label: {
+ show: false,
+ },
+ data: markLineData,
+ },
}]
}
chart.setOption(option)
return chart
- }).filter(Boolean) as echarts.ECharts[]
+ })
}
</script>
--
Gitblit v1.9.3