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 | 72 +++++++++++++++++++++++++++++++----- 1 files changed, 62 insertions(+), 10 deletions(-) diff --git a/src/views/model/pre/analysis/index.vue b/src/views/model/pre/analysis/index.vue index 64155c3..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'}) @@ -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'}], @@ -514,21 +527,60 @@ 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(false); @@ -647,15 +699,15 @@ 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(false); -- Gitblit v1.9.3