iailab-plat-ui-vue3.git

dongyukun

2024-11-15 1e376e8f5ea28a0f15cb883703b466f69835637b

提交 \| 用户 \| 时间
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);
da47a3	61	const chartDomPre = ref(null);
e7b6da	62	let myChart = null;
潘	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 = []
da47a3	105	if (data.lastTime) {
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: [{
潘	119	xAxis: data.lastTime
	120	}],
	121	label: {
	122	normal: {
	123	formatter: data.lastTime
	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]
	134	seriesData.push({
	135	name: key + ":" + '真实值',
	136	type: "line",
	137	data: viewData.realData,
	138	showSymbol: false,
	139	smooth: false,
	140	lineStyle: {
	141	normal: {
	142	width: 1,
	143	},
	144	},
	145	})
	146	seriesData.push({
	147	name: key + ":" + '预测值',
	148	type: "line",
	149	data: viewData.preDataN,
	150	showSymbol: false,
	151	smooth: false,
	152	lineStyle: {
	153	normal: {
	154	width: 1,
	155	},
	156	},
	157	})
	158	})
	159	}
	160
	161	myChart = echarts.init(chartDomPre.value);
e7b6da	162	const option = {
潘	163	title: {
da47a3	164	text: dataForm.value.itemName,
e7b6da	165	top: 0,
潘	166	left: "1%",
	167	textStyle: {
	168	fontSize: 14,
	169	},
	170	},
	171	tooltip: {
	172	trigger: "axis",
	173	axisPointer: {
	174	type: "line",
	175	lineStyle: {
	176	color: "#cccccc",
	177	width: "1",
	178	type: "dashed",
	179	},
	180	},
	181	},
	182	legend: {
da47a3	183	show: true,
潘	184	top: 20,
	185	data: legendData
e7b6da	186	},
潘	187	grid: {
da47a3	188	top: "20%",
e7b6da	189	left: "3%",
潘	190	right: "5%",
	191	bottom: 10,
	192	containLabel: true,
	193	},
	194	xAxis: {
	195	type: "category",
	196	boundaryGap: false,
	197	data: data.categories,
	198	},
	199	yAxis: {
	200	type: "value",
	201	},
	202	dataZoom: [
	203	{
	204	type: "inside",
	205	},
	206	],
	207	series: seriesData,
	208	};
	209	myChart.setOption(option);
	210	} catch (error) {
	211	console.error(error)
	212	}
	213	}
	214	}
da47a3	215
e7b6da	216	/** 导出按钮操作 */
潘	217	const exportLoading = ref(false)
	218	const handleExport = async () => {
da47a3	219	chartParams.itemId = dataForm.value.id;
1e376e	220	chartParams.startTime = dataForm.value.startTime?dataForm.value.startTime:"";
D	221	chartParams.endTime = dataForm.value.endTime?dataForm.value.endTime:"";
e7b6da	222	try {
潘	223	// 导出的二次确认
	224	await message.exportConfirm()
	225	// 发起导出
	226	exportLoading.value = true
1e376e	227	const data = await McsApi.exportPredictValue(chartParams)
D	228	download.excel(data, dataForm.value.itemName + '.xls')
e7b6da	229	} catch {
潘	230	} finally {
	231	exportLoading.value = false
	232	}
	233	}
da47a3	234
潘	235	/** 重置表单 */
	236	const resetForm = () => {
	237	dataForm.value = {
	238	id: undefined,
	239	itemName: undefined,
	240	startTime: undefined,
	241	endTime: undefined
	242	}
	243	}
e7b6da	244	</script>
潘	245	<style>
	246	.el-select {
	247	width: 100%;
	248	}
	249
	250	.result-chart {
	251	height: 500px;
	252	}
	253	</style>