From d6fb6076423a6d97da240804b0b43f30781b5fc2 Mon Sep 17 00:00:00 2001
From: dengzedong <dengzedong@email>
Date: 星期三, 11 六月 2025 17:32:46 +0800
Subject: [PATCH] 建议快照 dom虚拟渲染导致chartDoms不更新的bug
---
src/views/model/sche/suggest/suggestSnapshot.vue | 143 ++++++++++++++++++++++++++++++-----------------
1 files changed, 90 insertions(+), 53 deletions(-)
diff --git a/src/views/model/sche/suggest/suggestSnapshot.vue b/src/views/model/sche/suggest/suggestSnapshot.vue
index ca89233..801a654 100644
--- a/src/views/model/sche/suggest/suggestSnapshot.vue
+++ b/src/views/model/sche/suggest/suggestSnapshot.vue
@@ -16,10 +16,10 @@
</el-checkbox-group>
<div
- v-for="(chart, index) in charts"
+ v-for="chart in charts"
:key="chart.id"
class="chart-container"
- :ref="el => chartDoms[index] = el"
+ :ref="el => chartDoms[chart.id] = el"
v-loading="loading"
></div>
</el-dialog>
@@ -34,8 +34,8 @@
const visible = ref(false)
const dataList = ref([])
const selectedData = ref([])
- const charts = ref([])
- const chartDoms = ref([])
+ const charts = ref()
+ const chartDoms = ref({})
const chartInstances = ref([])
const loading = ref(false)
@@ -106,64 +106,98 @@
/** 渲染图表 */
const renderCharts = () => {
- chartInstances.value = chartDoms.value.map((dom, index) => {
+ chartInstances.value = charts.value.map((chartInfo, index) => {
+ const dom = chartDoms.value[chartInfo.id]
if (!dom) return null
const chart = echarts.init(dom)
- const chartInfo = charts.value[index]
if (!chartInfo) return chart
- const markLineData = [
- {
- yAxis: chartInfo.data?.limitH, // 上限
- label: {
- show: true,
- formatter: '上限',
- position: 'insideStartTop',
- color: '#FF9A3D'
- },
- lineStyle: {
- color: '#FF9A3D',
- type: 'dashed'
- },
+ const markLineData = []
+
+ if (chartInfo.data?.limitH !== null) {
+ markLineData.push({
+ yAxis: chartInfo.data?.limitH, // 上限
+ label: {
+ show: true,
+ formatter: '上限',
+ position: 'insideStartTop',
+ color: '#FF9A3D'
},
- {
- yAxis: chartInfo.data?.limitL, // 下限
- label: {
- show: true,
- formatter: '下限',
- position: 'insideStartBottom',
- color: '#00C2FF'
- },
- lineStyle: {
- color: '#00C2FF',
- type: 'dashed'
- },
+ lineStyle: {
+ color: '#FF9A3D',
+ type: 'dashed'
},
- {
- xAxis: chartInfo.data?.scheduleTime || 0, // 真实数据分割线
- label: {
- show: true,
- formatter: '预测时间',
- position: 'end',
- color: '#5DFF9E'
- },
- lineStyle: {
- color: '#5DFF9E',
- },
- }
- ]
+ })
+ }
+ 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, // 真实数据分割线
- label: {
- show: false,
- formatter: '预测时间',
- position: 'end',
- color: '#5DFF9E'
- },
+ xAxis: overLimitTime,
lineStyle: {
color: '#ff0000',
},
@@ -177,9 +211,12 @@
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',
--
Gitblit v1.9.3