| 提交 | 用户 | 时间 | ||
| 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 | }) | |
| 170 | }) | |
| 171 | } | |
| 172 | ||
| e7b6da | 173 | const option = { |
| 潘 | 174 | title: { |
| da47a3 | 175 | text: dataForm.value.itemName, |
| e7b6da | 176 | top: 0, |
| 潘 | 177 | left: "1%", |
| 178 | textStyle: { | |
| 179 | fontSize: 14, | |
| 180 | }, | |
| 181 | }, | |
| 182 | tooltip: { | |
| 183 | trigger: "axis", | |
| 184 | axisPointer: { | |
| 185 | type: "line", | |
| 186 | lineStyle: { | |
| 187 | color: "#cccccc", | |
| 188 | width: "1", | |
| 189 | type: "dashed", | |
| 190 | }, | |
| 191 | }, | |
| 192 | }, | |
| 193 | legend: { | |
| da47a3 | 194 | show: true, |
| 潘 | 195 | top: 20, |
| 196 | data: legendData | |
| e7b6da | 197 | }, |
| 潘 | 198 | grid: { |
| da47a3 | 199 | top: "20%", |
| e7b6da | 200 | left: "3%", |
| 潘 | 201 | right: "5%", |
| 202 | bottom: 10, | |
| 203 | containLabel: true, | |
| 204 | }, | |
| 205 | xAxis: { | |
| 206 | type: "category", | |
| 207 | boundaryGap: false, | |
| 208 | data: data.categories, | |
| 209 | }, | |
| 210 | yAxis: { | |
| 211 | type: "value", | |
| 212 | }, | |
| 213 | dataZoom: [ | |
| 214 | { | |
| 215 | type: "inside", | |
| 216 | }, | |
| 217 | ], | |
| 218 | series: seriesData, | |
| 219 | }; | |
| 220 | myChart.setOption(option); | |
| 221 | } catch (error) { | |
| 222 | console.error(error) | |
| 223 | } | |
| 224 | } | |
| 225 | } | |
| da47a3 | 226 | |
| e7b6da | 227 | /** 导出按钮操作 */ |
| 潘 | 228 | const exportLoading = ref(false) |
| 229 | const handleExport = async () => { | |
| da47a3 | 230 | chartParams.itemId = dataForm.value.id; |
| 1e376e | 231 | chartParams.startTime = dataForm.value.startTime?dataForm.value.startTime:""; |
| D | 232 | chartParams.endTime = dataForm.value.endTime?dataForm.value.endTime:""; |
| e7b6da | 233 | try { |
| 潘 | 234 | // 导出的二次确认 |
| 235 | await message.exportConfirm() | |
| 236 | // 发起导出 | |
| 237 | exportLoading.value = true | |
| 1e376e | 238 | const data = await McsApi.exportPredictValue(chartParams) |
| D | 239 | download.excel(data, dataForm.value.itemName + '.xls') |
| e7b6da | 240 | } catch { |
| 潘 | 241 | } finally { |
| 242 | exportLoading.value = false | |
| 243 | } | |
| 244 | } | |
| da47a3 | 245 | |
| 潘 | 246 | /** 重置表单 */ |
| 247 | const resetForm = () => { | |
| 248 | dataForm.value = { | |
| 249 | id: undefined, | |
| 250 | itemName: undefined, | |
| 251 | startTime: undefined, | |
| 252 | endTime: undefined | |
| 253 | } | |
| 254 | } | |
| e7b6da | 255 | </script> |
| 潘 | 256 | <style> |
| 257 | .el-select { | |
| 258 | width: 100%; | |
| 259 | } | |
| 260 | ||
| 261 | .result-chart { | |
| 262 | height: 500px; | |
| 263 | } | |
| 264 | </style> | |
