| 提交 | 用户 | 时间 | ||
| 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) { |
| 82 | getDataList(); | |
| 83 | } | |
| e7b6da | 84 | } |
| 潘 | 85 | |
| 86 | defineExpose({open}) // 提供 open 方法，用于打开弹窗 | |
| 87 | ||
| 88 | async function getDataList() { | |
| 89 | visible.value = true; | |
| 90 | if (dataForm.value.id) { | |
| 91 | try { | |
| da47a3 | 92 | chartParams.itemId = dataForm.value.id; |
| 潘 | 93 | chartParams.startTime = dataForm.value.startTime; |
| 94 | chartParams.endTime = dataForm.value.endTime; | |
| 95 | const data = await McsApi.getPreDataItemChart(chartParams) | |
| 96 | let legendData = [] | |
| 97 | if (data.legend && data.legend.length > 0) { | |
| 98 | data.legend.forEach(item => { | |
| 99 | legendData.push(item + ":" + '真实值') | |
| 100 | legendData.push(item + ":" + '预测值') | |
| 101 | }) | |
| 102 | } | |
| 103 | ||
| e7b6da | 104 | let seriesData = [] |
| 67b64e | 105 | if (data.predictTime) { |
| e7b6da | 106 | seriesData.push({ |
| da47a3 | 107 | name: '', |
| 潘 | 108 | data: [null], |
| 109 | type: 'line', | |
| 110 | smooth: true, | |
| 111 | color: 'green', | |
| 112 | markLine: { | |
| 113 | silent: true, | |
| 114 | lineStyle: { | |
| 115 | color: '#32a487', | |
| 116 | width: 2 | |
| e7b6da | 117 | }, |
| da47a3 | 118 | data: [{ |
| 67b64e | 119 | xAxis: data.predictTime |
| da47a3 | 120 | }], |
| 潘 | 121 | label: { |
| 122 | normal: { | |
| 67b64e | 123 | formatter: data.predictTime |
| da47a3 | 124 | } |
| 潘 | 125 | }, |
| 126 | symbol: ['circle', 'none'], | |
| e7b6da | 127 | }, |
| 潘 | 128 | }); |
| da47a3 | 129 | } |
| e7b6da | 130 | |
| da47a3 | 131 | if (data.viewMap) { |
| 潘 | 132 | Object.keys(data.viewMap).forEach(key => { |
| 133 | let viewData = data.viewMap[key] | |
| 290730 | 134 | if(viewData.realData) { |
| D | 135 | seriesData.push({ |
| 136 | name: key + ":" + '真实值', | |
| 137 | type: "line", | |
| 138 | data: viewData.realData, | |
| 139 | showSymbol: false, | |
| 140 | smooth: false, | |
| 141 | lineStyle: { | |
| 142 | normal: { | |
| 143 | width: 1, | |
| 144 | }, | |
| da47a3 | 145 | }, |
| 290730 | 146 | }) |
| D | 147 | } |
| da47a3 | 148 | seriesData.push({ |
| 潘 | 149 | name: key + ":" + '预测值', |
| 150 | type: "line", | |
| 151 | data: viewData.preDataN, | |
| 152 | showSymbol: false, | |
| 153 | smooth: false, | |
| 154 | lineStyle: { | |
| 155 | normal: { | |
| 156 | width: 1, | |
| 157 | }, | |
| 158 | }, | |
| 159 | }) | |
| 160 | }) | |
| 161 | } | |
| 162 | ||
| 163 | myChart = echarts.init(chartDomPre.value); | |
| e7b6da | 164 | const option = { |
| 潘 | 165 | title: { |
| da47a3 | 166 | text: dataForm.value.itemName, |
| e7b6da | 167 | top: 0, |
| 潘 | 168 | left: "1%", |
| 169 | textStyle: { | |
| 170 | fontSize: 14, | |
| 171 | }, | |
| 172 | }, | |
| 173 | tooltip: { | |
| 174 | trigger: "axis", | |
| 175 | axisPointer: { | |
| 176 | type: "line", | |
| 177 | lineStyle: { | |
| 178 | color: "#cccccc", | |
| 179 | width: "1", | |
| 180 | type: "dashed", | |
| 181 | }, | |
| 182 | }, | |
| 183 | }, | |
| 184 | legend: { | |
| da47a3 | 185 | show: true, |
| 潘 | 186 | top: 20, |
| 187 | data: legendData | |
| e7b6da | 188 | }, |
| 潘 | 189 | grid: { |
| da47a3 | 190 | top: "20%", |
| e7b6da | 191 | left: "3%", |
| 潘 | 192 | right: "5%", |
| 193 | bottom: 10, | |
| 194 | containLabel: true, | |
| 195 | }, | |
| 196 | xAxis: { | |
| 197 | type: "category", | |
| 198 | boundaryGap: false, | |
| 199 | data: data.categories, | |
| 200 | }, | |
| 201 | yAxis: { | |
| 202 | type: "value", | |
| 203 | }, | |
| 204 | dataZoom: [ | |
| 205 | { | |
| 206 | type: "inside", | |
| 207 | }, | |
| 208 | ], | |
| 209 | series: seriesData, | |
| 210 | }; | |
| 290730 | 211 | myChart.clear() |
| e7b6da | 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> | |
