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 | 105 +++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 82 insertions(+), 23 deletions(-) diff --git a/src/views/model/pre/analysis/index.vue b/src/views/model/pre/analysis/index.vue index ef66aba..c7bddd8 100644 --- a/src/views/model/pre/analysis/index.vue +++ b/src/views/model/pre/analysis/index.vue @@ -1,7 +1,7 @@ <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" @@ -33,13 +33,25 @@ </el-form-item> <el-form-item> <el-button-group> - <el-button type="primary" plain :icon="ArrowLeft" + <el-button type="primary" plain :icon="DArrowLeft" :loading="loading1" @click="leftSearchDataByRange()"/> <el-button type="primary" plain :icon="Search" :loading="loading1" @click="getList()">查询 </el-button> - <el-button type="primary" plain :icon="ArrowRight" + <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> @@ -187,7 +199,7 @@ import {getYMDHMS} from "@/utils/dateUtil" import * as McsApi from '@/api/model/mcs' import * as echarts from "echarts"; -import {Search, ArrowLeft, ArrowRight,} from '@element-plus/icons-vue' +import {Search, DArrowLeft, DArrowRight, VideoPlay, VideoPause, CaretLeft, CaretRight} from '@element-plus/icons-vue' defineOptions({name: 'AnalysisformData'}) @@ -223,7 +235,7 @@ queryStep: 2, isMultipleYRadio: '单坐标轴', isMultipleY: false, - predictFreq: 3, + predictFreq: 2, }) const calRateFormRef = ref() const calRateForm = ref({ @@ -250,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'}], @@ -258,7 +271,7 @@ }) /** 查询列表 */ -const getList = async () => { +const getList = async (isClear = true) => { loading1.value = true try { if (!formData.value.chartCheck) { @@ -369,7 +382,7 @@ type: 'line', yAxisIndex: yAxisIndex, showSymbol: false, - smooth: true, + smooth: false, lineStyle: { width: 2 } @@ -377,13 +390,14 @@ } if (chartCheckArray.indexOf('T+N') !== -1) { 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 } @@ -399,7 +413,7 @@ showSymbol: false, connectNulls: true, yAxisIndex: yAxisIndex, - smooth: true, + smooth: false, lineStyle: { width: 2 } @@ -413,10 +427,10 @@ data: dataView.curData || [], type: 'line', yAxisIndex: yAxisIndex, - showSymbol: false, - smooth: true, + showSymbol: true, + smooth: false, lineStyle: { - width: 2 + width: 3 } }); } @@ -430,7 +444,7 @@ yAxisIndex: yAxisIndex, showSymbol: false, connectNulls: true, - smooth: true, + smooth: false, lineStyle: { width: 2, type: 'dashed' @@ -491,7 +505,9 @@ ], series: seriesData } - myChart.clear() + if (isClear) { + myChart.clear() + } myChart.setOption(option) } finally { loading1.value = false @@ -507,24 +523,67 @@ 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() { let mins = getRangeMins(); let startTime = formData.value.startTime; 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() { @@ -640,18 +699,18 @@ 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); } /** 重置表单 */ @@ -681,7 +740,7 @@ queryStep: 2, isMultipleYRadio: '单坐标轴', isMultipleY: false, - predictFreq: 3, + predictFreq: 2, } calRateForm.value = { calItem: undefined, -- Gitblit v1.9.3