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