From 52bd8c50dfeb8599b317813c9b60e88118e7edbd Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期二, 11 二月 2025 14:45:08 +0800
Subject: [PATCH] 累计值曲线
---
src/views/model/pre/analysis/index.vue | 302 +++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 251 insertions(+), 51 deletions(-)
diff --git a/src/views/model/pre/analysis/index.vue b/src/views/model/pre/analysis/index.vue
index de15ab9..ae8903c 100644
--- a/src/views/model/pre/analysis/index.vue
+++ b/src/views/model/pre/analysis/index.vue
@@ -1,23 +1,29 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-his__index">
- <el-form :inline="true" :model="formData" label-width="80px">
+ <el-form :inline="true" :model="formData" label-width="70px">
<el-form-item label="开始时间">
<el-date-picker
v-model="formData.startTime"
type="datetime"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
placeholder="选择日期时间"/>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="formData.endTime"
type="datetime"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
placeholder="选择日期时间"/>
</el-form-item>
<el-form-item label="预测时间">
<el-date-picker
v-model="formData.predictTime"
type="datetime"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
placeholder="选择日期时间"/>
</el-form-item>
<el-form-item label="预测频率">
@@ -27,13 +33,25 @@
</el-form-item>
<el-form-item>
<el-button-group>
- <el-button type="primary" plain :icon="ArrowLeft"
- v-loading="loading1" @click="leftSearchDataByRange()"/>
+ <el-button type="primary" plain :icon="DArrowLeft"
+ :loading="loading1" @click="leftSearchDataByRange()"/>
<el-button type="primary" plain :icon="Search"
- v-loading="loading1" @click="getList()">查询
+ :loading="loading1" @click="getList()">查询
</el-button>
- <el-button type="primary" plain :icon="ArrowRight"
- v-loading="loading1" @click="rightSearchDataByRange()"/>
+ <el-button type="primary" plain :icon="DArrowRight"
+ :loading="loading1" @click="rightSearchDataByRange()"/>
+ </el-button-group>
+ </el-form-item>
+ <el-form-item>
+ <el-button-group>
+ <el-button type="primary" plain :icon="CaretLeft"
+ @click="playChart(true)"/>
+ <el-button type="primary" plain :icon="VideoPlay" v-if="!isPlay"
+ @click="playHandle('play')"/>
+ <el-button type="primary" plain :icon="VideoPause" v-if="isPlay"
+ @click="playHandle('pause')"/>
+ <el-button type="primary" plain :icon="CaretRight"
+ @click="playChart(false)"/>
</el-button-group>
</el-form-item>
@@ -52,18 +70,19 @@
</div>
<div class="his-body-right">
<div class="his-body-chart">
- <el-form :inline="true" :model="calRateForm" :rules="formRules" ref="calRateForm"
+ <el-form :inline="true" :model="calRateForm" :rules="formRules" ref="calRateFormRef"
label-width="108px">
<el-row>
<el-col :span="6">
<el-form-item label="预测项" prop="calItem" style="width: 90%">
- <el-select size="small" v-model="calRateForm.calItem" @change="calItemBaseVale"
+ <el-select size="small" v-model="calRateForm.calItem"
+ @change="calItemBaseVale"
placeholder="请选择">
<el-option
- v-for="item in formData.checkedItemData"
- :key="item.id"
- :label="item.label"
- :value="item.id"/>
+ v-for="itemOut in formData.checkedItemData"
+ :key="itemOut.id"
+ :label="itemOut.label"
+ :value="itemOut.id"/>
</el-select>
</el-form-item>
</el-col>
@@ -147,7 +166,7 @@
</el-form>
<el-form :inline="true" :model="formData" label-width="100px">
<el-row>
- <el-col :span="12">
+ <el-col :span="16">
<el-form-item label="数据类型">
<el-checkbox-group v-model="formData.chartCheck" @change="changeChartCheck">
<el-checkbox v-for="item in formData.chartOptions" :label="item"
@@ -180,9 +199,7 @@
import {getYMDHMS} from "@/utils/dateUtil"
import * as McsApi from '@/api/model/mcs'
import * as echarts from "echarts";
-import {onMounted, ref} from 'vue';
-import {Search, ArrowLeft, ArrowRight,} from '@element-plus/icons-vue'
-import {getPreDataCharts, getPredictItemTree} from "@/api/model/mcs";
+import {Search, DArrowLeft, DArrowRight, VideoPlay, VideoPause, CaretLeft, CaretRight} from '@element-plus/icons-vue'
defineOptions({name: 'AnalysisformData'})
@@ -208,7 +225,7 @@
currentStamp60: '',
predictStamp: '',
chartCheck: ['T+L', '真实值'],
- chartOptions: ['T+N', 'T+L', '当时', '真实值', '调整值'],
+ chartOptions: ['T+N', 'T+L', '当时', '真实值', '调整值', '预测累计', '真实累计'],
checkedItemData: [],
backItem: '',
backValue: 0,
@@ -218,10 +235,11 @@
queryStep: 2,
isMultipleYRadio: '单坐标轴',
isMultipleY: false,
- predictFreq: 3,
+ predictFreq: 2,
})
-let calRateForm = ref({
- calItem: '',
+const calRateFormRef = ref()
+const calRateForm = ref({
+ calItem: undefined,
IN_DEVIATION: 0,
OUT_DEVIATION: 0,
IN_ACCURACY_RATE: 0,
@@ -244,6 +262,7 @@
const itemDataObject = ref()
const timer = ref()
let myChart = null;
+const isPlay = ref(false)
const formRules = reactive({
calItem: [{required: true, message: '预测项不能为空', trigger: 'blur'}],
@@ -252,7 +271,7 @@
})
/** 查询列表 */
-const getList = async () => {
+const getList = async (isClear = true) => {
loading1.value = true
try {
if (!formData.value.chartCheck) {
@@ -278,6 +297,22 @@
formData.value.endTime = data.endTime
let xAxisData = data.categories;
+ let defaultYAxis = [
+ {
+ type: 'value',
+ name: "累计值",
+ splitLine: {show: false},
+ axisLine: {show: true},
+ position: 'right'
+ },
+ {
+ type: 'value',
+ name: "",
+ splitLine: {show: false},
+ axisLine: {show: true},
+ position: 'left'
+ }
+ ];
let yAxisData = [];
let offset = 0;
let yAxisIndex = 0;
@@ -308,12 +343,27 @@
},
});
itemDataObject.value = {}
+ yAxisData.push({
+ type: 'value',
+ name: "累计值",
+ position: 'right',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {}
+ },
+ axisLabel: {
+ formatter: '{value}'
+ }
+ })
for (let i = 0; i < data.dataViewList.length; i++) {
let dataView = data.dataViewList[i]
itemDataObject.value[dataView.outId] = dataView;
let maxValue = dataView.maxValue;
let minValue = dataView.minValue;
- yAxisIndex = formData.value.isMultipleY ? i : 0;
+ yAxisIndex = (formData.value.isMultipleY ? i : 0) + 1;
let yMax = maxValue;
if (maxValue < 0) {
maxValue = 1;
@@ -355,7 +405,7 @@
})
offset = offset + 40
if (chartCheckArray.indexOf('真实值') !== -1) {
- let legendName = dataView.resultstr + '(真实)';
+ let legendName = dataView.resultName + '(真实)';
legendData.push(legendName);
seriesData.push({
name: legendName,
@@ -363,28 +413,29 @@
type: 'line',
yAxisIndex: yAxisIndex,
showSymbol: false,
- smooth: true,
+ smooth: false,
lineStyle: {
width: 2
}
});
}
if (chartCheckArray.indexOf('T+N') !== -1) {
- let legendName = dataView.resultstr + '(T+N)';
+ let legendName = dataView.resultName + '(T+N)';
+ legendData.push(legendName);
seriesData.push({
name: legendName,
data: dataView.preDataN || [],
type: 'line',
yAxisIndex: yAxisIndex,
showSymbol: false,
- smooth: true,
+ smooth: false,
lineStyle: {
width: 2
}
});
}
if (chartCheckArray.indexOf('T+L') !== -1) {
- let legendName = dataView.resultstr + '(T+L)';
+ let legendName = dataView.resultName + '(T+L)';
legendData.push(legendName);
seriesData.push({
name: legendName,
@@ -393,29 +444,29 @@
showSymbol: false,
connectNulls: true,
yAxisIndex: yAxisIndex,
- smooth: true,
+ smooth: false,
lineStyle: {
width: 2
}
});
}
if (chartCheckArray.indexOf('当时') !== -1) {
- let legendName = dataView.resultstr + '(当时)';
+ let legendName = dataView.resultName + '(当时)';
legendData.push(legendName);
seriesData.push({
name: legendName,
data: dataView.curData || [],
type: 'line',
yAxisIndex: yAxisIndex,
- showSymbol: false,
- smooth: true,
+ showSymbol: true,
+ smooth: false,
lineStyle: {
- width: 2
+ width: 3
}
});
}
if (chartCheckArray.indexOf('调整值') !== -1) {
- let legendName = dataView.resultstr + '(调整值)';
+ let legendName = dataView.resultName + '(调整值)';
legendData.push(legendName);
seriesData.push({
name: legendName,
@@ -424,7 +475,69 @@
yAxisIndex: yAxisIndex,
showSymbol: false,
connectNulls: true,
- smooth: true,
+ smooth: false,
+ lineStyle: {
+ width: 2,
+ type: 'dashed'
+ }
+ });
+ }
+
+ if (chartCheckArray.indexOf('预测累计') !== -1) {
+ let legendName = dataView.resultName + '(预测累计)';
+ legendData.push(legendName);
+ let seriesLeiJiData = []
+ if (dataView.curData) {
+ let leiJi = 0;
+ for (let i = 0; i < dataView.curData.length; i++) {
+ let item = dataView.curData[i];
+ leiJi = leiJi + Number(item[1])
+ seriesLeiJiData.push([item[0], (leiJi / 60).toFixed(2)]);
+ }
+ }
+ seriesData.push({
+ name: legendName,
+ data: seriesLeiJiData,
+ type: 'line',
+ yAxisIndex: 0,
+ showSymbol: false,
+ connectNulls: true,
+ smooth: false,
+ lineStyle: {
+ width: 2,
+ type: 'dashed'
+ }
+ });
+ }
+
+ if (chartCheckArray.indexOf('真实累计') !== -1) {
+ let legendName = dataView.resultName + '(真实累计)';
+ legendData.push(legendName);
+ let seriesLeiJiData = []
+ if (dataView.realData) {
+ let leiJi = 0;
+ let lCount = 0
+ for (let i = 0; i < dataView.realData.length; i++) {
+ let item = dataView.realData[i];
+ if(new Date(item[0]).getTime() < new Date(formData.value.predictTime).getTime()) {
+ continue
+ }
+ if (lCount > dataView.curData.length) {
+ continue
+ }
+ lCount = lCount + 1
+ leiJi = leiJi + Number(item[1])
+ seriesLeiJiData.push([item[0], (leiJi / 60).toFixed(2)]);
+ }
+ }
+ seriesData.push({
+ name: legendName,
+ data: seriesLeiJiData,
+ type: 'line',
+ yAxisIndex: 0,
+ showSymbol: false,
+ connectNulls: true,
+ smooth: false,
lineStyle: {
width: 2,
type: 'dashed'
@@ -442,6 +555,7 @@
}
}
}
+
myChart = echarts.init(dataAnalysisChart.value);
let option = {
title: {
@@ -467,11 +581,7 @@
boundaryGap: false,
data: xAxisData
},
- yAxis: formData.value.isMultipleY ? yAxisData : {
- type: 'value',
- splitLine: {show: false},
- axisLine: {show: true}
- },
+ yAxis: formData.value.isMultipleY ? yAxisData : defaultYAxis,
dataZoom: [
{
type: 'inside',
@@ -485,7 +595,9 @@
],
series: seriesData
}
- myChart.clear()
+ if (isClear) {
+ myChart.clear()
+ }
myChart.setOption(option)
} finally {
loading1.value = false
@@ -493,12 +605,55 @@
}
onMounted(() => {
+ resetForm()
getPreItemTree()
- getList()
})
async function getPreItemTree() {
treeData.value = await McsApi.getPredictItemTree()
+}
+
+function changeChartCheck(value) {
+ getList(true)
+}
+
+function onChangeMultipleY() {
+ getList(true)
+}
+
+function playChart(isBack = false) {
+ let mins = isBack ? formData.value.predictFreq * -1 : formData.value.predictFreq
+ let startTime = formData.value.startTime;
+ let endTime = formData.value.endTime;
+ let predictTime = formData.value.predictTime;
+ if (predictTime) {
+ predictTime = getYMDHMS(new Date(predictTime).getTime() + 1000 * 60 * mins);
+ formData.value.predictTime = predictTime;
+ }
+ if (startTime) {
+ startTime = getYMDHMS(new Date(startTime).getTime() + 1000 * 60 * mins);
+ formData.value.startTime = startTime;
+ }
+ if (endTime) {
+ endTime = getYMDHMS(new Date(endTime).getTime() + 1000 * 60 * mins);
+ formData.value.endTime = endTime;
+ }
+ getList(false);
+}
+
+function playHandle(type) {
+ isPlay.value = 'play' === type
+ let doPlay = setInterval(function () {
+ if (isPlay.value) {
+ playChart()
+ } else {
+ clearInterval(doPlay);
+ }
+ if (new Date().getTime() - new Date(formData.value.predictTime).getTime() < 1000 * 60 ) {
+ isPlay.value = false
+ clearInterval(doPlay);
+ }
+ }, 1000)
}
function leftSearchDataByRange() {
@@ -507,18 +662,18 @@
let endTime = formData.value.endTime;
let predictTime = formData.value.predictTime;
if (predictTime) {
- predictTime = getYMDHMS(new Date(predictTime) - 1000 * 60 * mins);
+ predictTime = getYMDHMS(new Date(predictTime).getTime() - 1000 * 60 * mins);
formData.value.predictTime = predictTime;
}
if (startTime) {
- startTime = getYMDHMS(new Date(startTime) - 1000 * 60 * mins);
+ startTime = getYMDHMS(new Date(startTime).getTime() - 1000 * 60 * mins);
formData.value.startTime = startTime;
}
if (endTime) {
- endTime = getYMDHMS(new Date(endTime) - 1000 * 60 * mins);
+ endTime = getYMDHMS(new Date(endTime).getTime() - 1000 * 60 * mins);
formData.value.endTime = endTime;
}
- getList();
+ getList(false);
}
function getRangeMins() {
@@ -561,9 +716,8 @@
calRateForm.value.itemMin = 0;
calRateForm.value.itemAvg = 0;
calRateForm.value.realCumulant = 0;
- return
} else {
- let dataView = itemDataObject[calRateForm.value.calItem]
+ let dataView = itemDataObject.value[calRateForm.value.calItem]
calRateForm.value.itemPreMax = dataView.preMax;
calRateForm.value.itemPreMin = dataView.preMin;
calRateForm.value.itemPreAvg = dataView.preAvg;
@@ -635,20 +789,66 @@
let endTime = formData.value.endTime;
let predictTime = formData.value.predictTime;
if (predictTime) {
- predictTime = getYMDHMS(new Date(predictTime) - 0 + 1000 * 60 * mins);
+ predictTime = getYMDHMS(new Date(predictTime).getTime() + 1000 * 60 * mins);
formData.value.predictTime = predictTime;
}
if (startTime) {
- startTime = getYMDHMS(new Date(startTime) - 0 + 1000 * 60 * mins);
+ startTime = getYMDHMS(new Date(startTime).getTime() + 1000 * 60 * mins);
formData.value.startTime = startTime;
}
if (endTime) {
- endTime = getYMDHMS(new Date(endTime) - 0 + 1000 * 60 * mins);
+ endTime = getYMDHMS(new Date(endTime).getTime() + 1000 * 60 * mins);
formData.value.endTime = endTime;
}
- getList();
+ getList(false);
}
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ rangeDate: '',
+ startTime: '',
+ endTime: '',
+ predictTime: '',
+ predictTimeStr: '',
+ startTimeStr: '',
+ endTimeStr: '',
+ predictTimeStamp: 0,
+ startTimeStamp: 0,
+ endTimeStamp: 0,
+ currentStamp: '',
+ currentStamp60: '',
+ predictStamp: '',
+ chartCheck: ['T+L', '真实值'],
+ chartOptions: ['T+N', 'T+L', '当时', '真实值', '调整值', '预测累计', '真实累计'],
+ checkedItemData: [],
+ backItem: '',
+ backValue: 0,
+ backCoe: 1,
+ preCumulant: 0,
+ realCumulant: 0,
+ queryStep: 2,
+ isMultipleYRadio: '单坐标轴',
+ isMultipleY: false,
+ predictFreq: 2,
+ }
+ calRateForm.value = {
+ calItem: undefined,
+ IN_DEVIATION: 0,
+ OUT_DEVIATION: 0,
+ IN_ACCURACY_RATE: 0,
+ OUT_ACCURACY_RATE: 0,
+ itemAvg: 0,
+ itemMax: 0,
+ itemMin: 0,
+ itemPreAvg: 0,
+ itemPreMax: 0,
+ itemPreMin: 0,
+ preCumulant: 0,
+ realCumulant: 0
+ }
+ calRateFormRef.value?.resetFields()
+}
</script>
<style scoped>
.el-form-item {
--
Gitblit v1.9.3