| 提交 | 用户 | 时间 | ||
| e7b6da | 1 | <template> |
| 潘 | 2 | <el-dialog |
| da47a3 | 3 | title="预测数据" |
| e7b6da | 4 | :close-on-click-modal="false" |
| 潘 | 5 | width="50%" |
| 932c3a | 6 | @close="dialogClose" |
| e7b6da | 7 | v-model="visible" |
| 潘 | 8 | > |
| 9 | <el-form | |
| 10 | :inline="true" | |
| 11 | :model="dataForm" | |
| 12 | @keydown.enter="getDataList()" | |
| 13 | > | |
| 14 | <el-form-item label="开始时间"> | |
| 15 | <el-date-picker | |
| 16 | v-model="dataForm.startTime" | |
| 17 | format="YYYY-MM-DD HH:mm:00" | |
| 18 | value-format="YYYY-MM-DD HH:mm:00" | |
| 19 | type="datetime" | |
| 20 | :clearable="false" | |
| 21 | placeholder="选择日期时间"/> | |
| 22 | </el-form-item> | |
| 23 | <el-form-item label="结束时间"> | |
| 24 | <el-date-picker | |
| 25 | v-model="dataForm.endTime" | |
| 26 | format="YYYY-MM-DD HH:mm:00" | |
| 27 | value-format="YYYY-MM-DD HH:mm:00" | |
| 28 | type="datetime" | |
| 29 | :clearable="false" | |
| 30 | placeholder="选择日期时间"/> | |
| 31 | </el-form-item> | |
| 32 | <el-form-item> | |
| 33 | <el-button @click="getDataList()">查询</el-button> | |
| 34 | </el-form-item> | |
| 35 | <el-form-item> | |
| 36 | <el-button | |
| 37 | type="success" | |
| 38 | plain | |
| 39 | @click="handleExport" | |
| 40 | :loading="exportLoading" | |
| 41 | > | |
| da47a3 | 42 | <Icon icon="ep:download"/> |
| 潘 | 43 | 导出 |
| e7b6da | 44 | </el-button> |
| 潘 | 45 | </el-form-item> |
| 46 | </el-form> | |
| da47a3 | 47 | <div ref="chartDomPre" class="result-chart"></div> |
| e7b6da | 48 | </el-dialog> |
| 潘 | 49 | </template> |
| 50 | ||
| 51 | <script lang="ts" setup> | |
| 52 | import {ref} from 'vue'; | |
| 53 | import * as echarts from 'echarts'; | |
| da47a3 | 54 | import * as McsApi from '@/api/model/mcs' |
| e7b6da | 55 | import {getYMDHM0} from "@/utils/dateUtil" |
| 潘 | 56 | import download from "@/utils/download"; |
| da47a3 | 57 | |
| e7b6da | 58 | const message = useMessage() // 消息弹窗 |
| 潘 | 59 | const visible = ref(false); |
| 290730 | 60 | const chartDomPre = ref(); |
| D | 61 | let myChart = undefined; |
| e7b6da | 62 | const chartParams = reactive({ |
| da47a3 | 63 | itemId: undefined, |
| 潘 | 64 | startTime: undefined, |
| 65 | endTime: undefined, | |
| e7b6da | 66 | }) |
| 潘 | 67 | const dataForm = ref({ |
| 68 | id: "", | |
| da47a3 | 69 | itemName: "", |
| e7b6da | 70 | startTime: getYMDHM0(new Date() - 60 * 60 * 1000), |
| da47a3 | 71 | endTime: getYMDHM0(new Date() + 60 * 60 * 1000), |
| e7b6da | 72 | }); |
| 潘 | 73 | |
| 74 | /** 打开弹窗 */ | |
| 75 | const open = async (row: object) => { | |
| 76 | visible.value = true | |
| da47a3 | 77 | resetForm() |
| e7b6da | 78 | dataForm.value.id = row.id; |
| da47a3 | 79 | dataForm.value.itemName = row.itemname; |
| 潘 | 80 | if (row.id) { |
| 932c3a | 81 | nextTick(() => { |
| D | 82 | myChart = echarts.init(chartDomPre.value); |
| 83 | }); | |
| da47a3 | 84 | getDataList(); |
| 932c3a | 85 | } |
| D | 86 | } |
| 87 | ||
| 88 | const dialogClose = () => { | |
| 89 | if (myChart) { | |
| 90 | myChart.dispose(); // 组件卸载时销毁实例 | |
| da47a3 | 91 | } |
| e7b6da | 92 | } |
| 潘 | 93 | |
| 94 | defineExpose({open}) // 提供 open 方法，用于打开弹窗 | |
| 95 | ||
| 96 | async function getDataList() { | |
| 97 | visible.value = true; | |
| 98 | if (dataForm.value.id) { | |
| 99 | try { | |
| da47a3 | 100 | chartParams.itemId = dataForm.value.id; |
| 潘 | 101 | chartParams.startTime = dataForm.value.startTime; |
| 102 | chartParams.endTime = dataForm.value.endTime; | |
| 103 | const data = await McsApi.getPreDataItemChart(chartParams) | |
| 104 | let legendData = [] | |
| 932c3a | 105 | // if (data.legend && data.legend.length > 0) { |
| D | 106 | // data.legend.forEach(item => { |
| 107 | // legendData.push(item + ":" + '真实值') | |
| 108 | // legendData.push(item + ":" + '预测值') | |
| 109 | // }) | |
| 110 | // } | |
| da47a3 | 111 | |
| e7b6da | 112 | let seriesData = [] |
| 67b64e | 113 | if (data.predictTime) { |
| e7b6da | 114 | seriesData.push({ |
| da47a3 | 115 | name: '', |
| 潘 | 116 | data: [null], |
| 117 | type: 'line', | |
| 118 | smooth: true, | |
| 119 | color: 'green', | |
| 120 | markLine: { | |
| 121 | silent: true, | |
| 122 | lineStyle: { | |
| 123 | color: '#32a487', | |
| 124 | width: 2 | |
| e7b6da | 125 | }, |
| da47a3 | 126 | data: [{ |
| 67b64e | 127 | xAxis: data.predictTime |
| da47a3 | 128 | }], |
| 潘 | 129 | label: { |
| 130 | normal: { | |
| 67b64e | 131 | formatter: data.predictTime |
| da47a3 | 132 | } |
| 潘 | 133 | }, |
| 134 | symbol: ['circle', 'none'], | |
| e7b6da | 135 | }, |
| 潘 | 136 | }); |
| da47a3 | 137 | } |
| e7b6da | 138 | |
| da47a3 | 139 | if (data.viewMap) { |
| 潘 | 140 | Object.keys(data.viewMap).forEach(key => { |
| 141 | let viewData = data.viewMap[key] | |
| 290730 | 142 | if(viewData.realData) { |
| 932c3a | 143 | legendData.push(key + ":" + '真实值') |
| 290730 | 144 | seriesData.push({ |
| D | 145 | name: key + ":" + '真实值', |
| 146 | type: "line", | |
| 147 | data: viewData.realData, | |
| 148 | showSymbol: false, | |
| 149 | smooth: false, | |
| 150 | lineStyle: { | |
| 151 | normal: { | |
| 152 | width: 1, | |
| 153 | }, | |
| da47a3 | 154 | }, |
| 290730 | 155 | }) |
| D | 156 | } |
| 932c3a | 157 | legendData.push(key + ":" + '预测值') |
| da47a3 | 158 | seriesData.push({ |
| 潘 | 159 | name: key + ":" + '预测值', |
| 160 | type: "line", | |
| 161 | data: viewData.preDataN, | |
| 162 | showSymbol: false, | |
| 163 | smooth: false, | |
| 164 | lineStyle: { | |
| 165 | normal: { | |
| 166 | width: 1, | |
| 167 | }, | |
| 168 | }, | |
| 169 | }) | |
| 22bcd6 | 170 | //累计点 |
| D | 171 | if(viewData.cumulantRealData) { |
| 172 | legendData.push(key + "累计:" + '真实值') | |
| 173 | seriesData.push({ | |
| 174 | name: key + "累计:" + '真实值', | |
| 175 | type: "line", | |
| 176 | data: viewData.cumulantRealData, | |
| 177 | showSymbol: false, | |
| 178 | smooth: false, | |
| 179 | lineStyle: { | |
| 180 | normal: { | |
| 181 | width: 1, | |
| 182 | }, | |
| 183 | }, | |
| 184 | }) | |
| 185 | } | |
| 186 | if(viewData.cumulantPreData) { | |
| 187 | legendData.push(key + "累计:" + '预测值') | |
| 188 | seriesData.push({ | |
| 189 | name: key + "累计:" + '预测值', | |
| 190 | type: "line", | |
| 191 | data: viewData.cumulantPreData, | |
| 192 | showSymbol: false, | |
| 193 | smooth: false, | |
| 194 | lineStyle: { | |
| 195 | normal: { | |
| 196 | width: 1, | |
| 197 | }, | |
| 198 | }, | |
| 199 | }) | |
| 200 | } | |
| da47a3 | 201 | }) |
| 潘 | 202 | } |
| 203 | ||
| e7b6da | 204 | const option = { |
| 潘 | 205 | title: { |
| da47a3 | 206 | text: dataForm.value.itemName, |
| e7b6da | 207 | top: 0, |
| 潘 | 208 | left: "1%", |
| 209 | textStyle: { | |
| 210 | fontSize: 14, | |
| 211 | }, | |
| 212 | }, | |
| 213 | tooltip: { | |
| 214 | trigger: "axis", | |
| 215 | axisPointer: { | |
| 216 | type: "line", | |
| 217 | lineStyle: { | |
| 218 | color: "#cccccc", | |
| 219 | width: "1", | |
| 220 | type: "dashed", | |
| 221 | }, | |
| 222 | }, | |
| 223 | }, | |
| 224 | legend: { | |
| da47a3 | 225 | show: true, |
| 潘 | 226 | top: 20, |
| 227 | data: legendData | |
| e7b6da | 228 | }, |
| 潘 | 229 | grid: { |
| da47a3 | 230 | top: "20%", |
| e7b6da | 231 | left: "3%", |
| 潘 | 232 | right: "5%", |
| 233 | bottom: 10, | |
| 234 | containLabel: true, | |
| 235 | }, | |
| 236 | xAxis: { | |
| 237 | type: "category", | |
| 238 | boundaryGap: false, | |
| 239 | data: data.categories, | |
| 240 | }, | |
| 241 | yAxis: { | |
| 242 | type: "value", | |
| 243 | }, | |
| 244 | dataZoom: [ | |
| 245 | { | |
| 246 | type: "inside", | |
| 247 | }, | |
| 248 | ], | |
| 249 | series: seriesData, | |
| 250 | }; | |
| 251 | myChart.setOption(option); | |
| 252 | } catch (error) { | |
| 253 | console.error(error) | |
| 254 | } | |
| 255 | } | |
| 256 | } | |
| da47a3 | 257 | |
| e7b6da | 258 | /** 导出按钮操作 */ |
| 潘 | 259 | const exportLoading = ref(false) |
| 260 | const handleExport = async () => { | |
| da47a3 | 261 | chartParams.itemId = dataForm.value.id; |
| 1e376e | 262 | chartParams.startTime = dataForm.value.startTime?dataForm.value.startTime:""; |
| D | 263 | chartParams.endTime = dataForm.value.endTime?dataForm.value.endTime:""; |
| e7b6da | 264 | try { |
| 潘 | 265 | // 导出的二次确认 |
| 266 | await message.exportConfirm() | |
| 267 | // 发起导出 | |
| 268 | exportLoading.value = true | |
| 1e376e | 269 | const data = await McsApi.exportPredictValue(chartParams) |
| D | 270 | download.excel(data, dataForm.value.itemName + '.xls') |
| e7b6da | 271 | } catch { |
| 潘 | 272 | } finally { |
| 273 | exportLoading.value = false | |
| 274 | } | |
| 275 | } | |
| da47a3 | 276 | |
| 潘 | 277 | /** 重置表单 */ |
| 278 | const resetForm = () => { | |
| 279 | dataForm.value = { | |
| 280 | id: undefined, | |
| 281 | itemName: undefined, | |
| 282 | startTime: undefined, | |
| 283 | endTime: undefined | |
| 284 | } | |
| 285 | } | |
| e7b6da | 286 | </script> |
| 潘 | 287 | <style> |
| 288 | .el-select { | |
| 289 | width: 100%; | |
| 290 | } | |
| 291 | ||
| 292 | .result-chart { | |
| 293 | height: 500px; | |
| 294 | } | |
| 295 | </style> | |
