From 328968f75a4dd4292ebc71f01d759a824765ac72 Mon Sep 17 00:00:00 2001
From: Jay <csj123456>
Date: 星期五, 22 十一月 2024 10:00:42 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/model/pre/item/MmPredictItemChart.vue | 253 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 253 insertions(+), 0 deletions(-)
diff --git a/src/views/model/pre/item/MmPredictItemChart.vue b/src/views/model/pre/item/MmPredictItemChart.vue
new file mode 100644
index 0000000..a0f867a
--- /dev/null
+++ b/src/views/model/pre/item/MmPredictItemChart.vue
@@ -0,0 +1,253 @@
+<template>
+ <el-dialog
+ title="预测数据"
+ :close-on-click-modal="false"
+ width="50%"
+ v-model="visible"
+ >
+ <el-form
+ :inline="true"
+ :model="dataForm"
+ @keydown.enter="getDataList()"
+ >
+ <el-form-item label="开始时间">
+ <el-date-picker
+ size="mini"
+ v-model="dataForm.startTime"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
+ type="datetime"
+ :clearable="false"
+ placeholder="选择日期时间"/>
+ </el-form-item>
+ <el-form-item label="结束时间">
+ <el-date-picker
+ size="mini"
+ v-model="dataForm.endTime"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
+ type="datetime"
+ :clearable="false"
+ placeholder="选择日期时间"/>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="getDataList()">查询</el-button>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="success"
+ plain
+ @click="handleExport"
+ :loading="exportLoading"
+ >
+ <Icon icon="ep:download"/>
+ 导出
+ </el-button>
+ </el-form-item>
+ </el-form>
+ <div ref="chartDomPre" class="result-chart"></div>
+ </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue';
+import * as echarts from 'echarts';
+import * as McsApi from '@/api/model/mcs'
+import {getYMDHM0} from "@/utils/dateUtil"
+import download from "@/utils/download";
+
+const message = useMessage() // 消息弹窗
+const visible = ref(false);
+const chartDomPre = ref(null);
+let myChart = null;
+const chartParams = reactive({
+ itemId: undefined,
+ startTime: undefined,
+ endTime: undefined,
+})
+const dataForm = ref({
+ id: "",
+ itemName: "",
+ startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
+ endTime: getYMDHM0(new Date() + 60 * 60 * 1000),
+});
+
+/** 打开弹窗 */
+const open = async (row: object) => {
+ visible.value = true
+ resetForm()
+ dataForm.value.id = row.id;
+ dataForm.value.itemName = row.itemname;
+ if (row.id) {
+ getDataList();
+ }
+}
+
+defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+async function getDataList() {
+ visible.value = true;
+ if (dataForm.value.id) {
+ try {
+ chartParams.itemId = dataForm.value.id;
+ chartParams.startTime = dataForm.value.startTime;
+ chartParams.endTime = dataForm.value.endTime;
+ const data = await McsApi.getPreDataItemChart(chartParams)
+ let legendData = []
+ if (data.legend && data.legend.length > 0) {
+ data.legend.forEach(item => {
+ legendData.push(item + ":" + '真实值')
+ legendData.push(item + ":" + '预测值')
+ })
+ }
+
+ let seriesData = []
+ if (data.predictTime) {
+ seriesData.push({
+ name: '',
+ data: [null],
+ type: 'line',
+ smooth: true,
+ color: 'green',
+ markLine: {
+ silent: true,
+ lineStyle: {
+ color: '#32a487',
+ width: 2
+ },
+ data: [{
+ xAxis: data.predictTime
+ }],
+ label: {
+ normal: {
+ formatter: data.predictTime
+ }
+ },
+ symbol: ['circle', 'none'],
+ },
+ });
+ }
+
+ if (data.viewMap) {
+ Object.keys(data.viewMap).forEach(key => {
+ let viewData = data.viewMap[key]
+ seriesData.push({
+ name: key + ":" + '真实值',
+ type: "line",
+ data: viewData.realData,
+ showSymbol: false,
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ })
+ seriesData.push({
+ name: key + ":" + '预测值',
+ type: "line",
+ data: viewData.preDataN,
+ showSymbol: false,
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ })
+ })
+ }
+
+ myChart = echarts.init(chartDomPre.value);
+ const option = {
+ title: {
+ text: dataForm.value.itemName,
+ top: 0,
+ left: "1%",
+ textStyle: {
+ fontSize: 14,
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "#cccccc",
+ width: "1",
+ type: "dashed",
+ },
+ },
+ },
+ legend: {
+ show: true,
+ top: 20,
+ data: legendData
+ },
+ grid: {
+ top: "20%",
+ left: "3%",
+ right: "5%",
+ bottom: 10,
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: data.categories,
+ },
+ yAxis: {
+ type: "value",
+ },
+ dataZoom: [
+ {
+ type: "inside",
+ },
+ ],
+ series: seriesData,
+ };
+ myChart.setOption(option);
+ } catch (error) {
+ console.error(error)
+ }
+ }
+}
+
+/** 导出按钮操作 */
+const exportLoading = ref(false)
+const handleExport = async () => {
+ chartParams.itemId = dataForm.value.id;
+ chartParams.startTime = dataForm.value.startTime?dataForm.value.startTime:"";
+ chartParams.endTime = dataForm.value.endTime?dataForm.value.endTime:"";
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await McsApi.exportPredictValue(chartParams)
+ download.excel(data, dataForm.value.itemName + '.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+ dataForm.value = {
+ id: undefined,
+ itemName: undefined,
+ startTime: undefined,
+ endTime: undefined
+ }
+}
+</script>
+<style>
+.el-select {
+ width: 100%;
+}
+
+.result-chart {
+ height: 500px;
+}
+</style>
--
Gitblit v1.9.3