From 1cdc1565130a5dd1f3d946baf4508066449231d5 Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期二, 11 二月 2025 13:40:59 +0800
Subject: [PATCH] 自动播放
---
src/views/model/pre/analysis/index.vue | 196 ++++++++++++++++++++++++++++++++++++++----------
1 files changed, 153 insertions(+), 43 deletions(-)
diff --git a/src/views/model/pre/analysis/index.vue b/src/views/model/pre/analysis/index.vue
index de15ab9..c7bddd8 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>
@@ -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'})
@@ -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) {
@@ -355,7 +374,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 +382,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 +413,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 +444,7 @@
yAxisIndex: yAxisIndex,
showSymbol: false,
connectNulls: true,
- smooth: true,
+ smooth: false,
lineStyle: {
width: 2,
type: 'dashed'
@@ -485,7 +505,9 @@
],
series: seriesData
}
- myChart.clear()
+ if (isClear) {
+ myChart.clear()
+ }
myChart.setOption(option)
} finally {
loading1.value = false
@@ -493,12 +515,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 +572,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 +626,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 +699,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