1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
  <el-dialog
    title="历史值"
    :close-on-click-modal="false"
    width="80%"
    v-model="visible"
  >
    <el-checkbox-group v-model="selectedData" @change="refreshCharts">
      <el-checkbox
        v-for="item in dataList"
        :label="item.dataName"
        :key="item.dataName"
      >
        {{ item.dataName }}
      </el-checkbox>
    </el-checkbox-group>
 
    <div
      v-for="(chart, index) in charts"
      :key="chart.id"
      class="chart-container"
      :ref="el => chartDoms[index] = el"
      v-loading="loading"
    ></div>
  </el-dialog>
</template>
 
<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue'
  import * as echarts from 'echarts'
  import * as suggestSnapshotApi from '@/api/model/sche/suggest/suggestSnapshotRecord';
 
  const { message } = useMessage()
  const visible = ref(false)
  const dataList = ref([])
  const selectedData = ref([])
  const charts = ref([])
  const chartDoms = ref([])
  const chartInstances = ref([])
  const loading = ref(false)
 
 
  const open = async (suggestId: string) => {
    visible.value = true
    await getDataList(suggestId)
  }
 
  defineExpose({ open })
 
  /** 获取数据列表 */
  const getDataList = async (suggestId: string) => {
    try {
      const res = await suggestSnapshotApi.getList(suggestId)
      dataList.value = res
      selectedData.value = [] // 清空已选项
      refreshCharts()
    } catch (error) {
      console.error(error)
      message.error('获取数据列表失败')
    }
  }
 
  /** 刷新图表 */
  const refreshCharts = async () => {
    if (selectedData.value.length === 0) {
      destroyCharts()
      charts.value = []
      return
    }
 
    loading.value = true
    try {
      const selectedDataList = selectedData.value.map(code =>
        dataList.value.find(d => d.dataName === code)
      ).filter(Boolean) // 过滤无效项
      const chartData = await suggestSnapshotApi.getChartList(
        selectedDataList
      )
      destroyCharts()
 
      // 生成图表配置数据
      charts.value = selectedData.value.map(code => {
        const item = dataList.value.find(d => d.dataName === code)
        return {
          id: `chart-${code}`,
          name: item?.dataName || code,
          data: chartData.find((d: any) => d.dataName === code)
        }
      })
 
      await nextTick()
      renderCharts()
    } catch (error) {
      console.error(error)
      message.error('获取图表数据失败')
    } finally {
      loading.value = false
    }
  }
 
  /** 销毁图表实例 */
  const destroyCharts = () => {
    chartInstances.value.forEach(instance => instance?.dispose())
    chartInstances.value = []
  }
 
  /** 渲染图表 */
  const renderCharts = () => {
    chartInstances.value = chartDoms.value.map((dom, index) => {
      if (!dom) return null
      const chart = echarts.init(dom)
      const chartInfo = charts.value[index]
 
      if (!chartInfo) return chart
 
      const option = {
        title: {
          text: chartInfo.name,
          textStyle: { fontSize: 14 }
        },
        tooltip: { trigger: 'axis' },
        grid: { top: 30, left: '3%', right: '5%', bottom: 20 },
        xAxis: {type: 'category'},
        yAxis: { type: 'value' },
        dataZoom: [{ type: 'inside' }],
        series: [{
          type: 'line',
          data: chartInfo.data?.dataList || [],
          lineStyle: { color: '#5B8FF9', width: 1 }
        }]
      }
 
      chart.setOption(option)
      return chart
    }).filter(Boolean) as echarts.ECharts[]
  }
</script>
 
<style scoped>
  .chart-container {
    height: 400px;
    margin: 20px 0;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
  }
</style>