| | |
| | | <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" |
| | |
| | | </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> |
| | | |
| | |
| | | </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" |
| | |
| | | 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'}) |
| | | |
| | |
| | | currentStamp60: '', |
| | | predictStamp: '', |
| | | chartCheck: ['T+L', '真实值'], |
| | | chartOptions: ['T+N', 'T+L', '当时', '真实值', '调整值'], |
| | | chartOptions: ['T+N', 'T+L', '当时', '真实值', '调整值', '预测累计', '真实累计'], |
| | | checkedItemData: [], |
| | | backItem: '', |
| | | backValue: 0, |
| | |
| | | const calRateFormRef = ref() |
| | | const calRateForm = ref({ |
| | | calItem: undefined, |
| | | IN_DEVIATION: 0, |
| | | OUT_DEVIATION: 0, |
| | | IN_DEVIATION: 10, |
| | | OUT_DEVIATION: 50, |
| | | IN_ACCURACY_RATE: 0, |
| | | OUT_ACCURACY_RATE: 0, |
| | | itemAvg: 0, |
| | |
| | | const itemDataObject = ref() |
| | | const timer = ref() |
| | | let myChart = null; |
| | | const isPlay = ref(false) |
| | | |
| | | const formRules = reactive({ |
| | | calItem: [{required: true, message: '预测项不能为空', trigger: 'blur'}], |
| | |
| | | }) |
| | | |
| | | /** 查询列表 */ |
| | | const getList = async () => { |
| | | const getList = async (isClear = true) => { |
| | | loading1.value = true |
| | | try { |
| | | if (!formData.value.chartCheck) { |
| | |
| | | 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; |
| | |
| | | }, |
| | | }); |
| | | 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; |
| | |
| | | type: 'line', |
| | | yAxisIndex: yAxisIndex, |
| | | showSymbol: false, |
| | | smooth: true, |
| | | smooth: false, |
| | | lineStyle: { |
| | | width: 2 |
| | | } |
| | |
| | | } |
| | | 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 |
| | | } |
| | |
| | | showSymbol: false, |
| | | connectNulls: true, |
| | | yAxisIndex: yAxisIndex, |
| | | smooth: true, |
| | | smooth: false, |
| | | lineStyle: { |
| | | width: 2 |
| | | } |
| | |
| | | data: dataView.curData || [], |
| | | type: 'line', |
| | | yAxisIndex: yAxisIndex, |
| | | showSymbol: false, |
| | | smooth: true, |
| | | showSymbol: true, |
| | | smooth: false, |
| | | lineStyle: { |
| | | width: 2 |
| | | width: 3 |
| | | } |
| | | }); |
| | | } |
| | |
| | | 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.cumulantPreData) { |
| | | seriesLeiJiData = dataView.cumulantPreData |
| | | } |
| | | 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.cumulantRealData) { |
| | | seriesLeiJiData = dataView.cumulantRealData |
| | | } |
| | | seriesData.push({ |
| | | name: legendName, |
| | | data: seriesLeiJiData, |
| | | type: 'line', |
| | | yAxisIndex: 0, |
| | | showSymbol: false, |
| | | connectNulls: true, |
| | | smooth: false, |
| | | lineStyle: { |
| | | width: 2, |
| | | type: 'dashed' |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | myChart = echarts.init(dataAnalysisChart.value); |
| | | let option = { |
| | | title: { |
| | |
| | | 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', |
| | |
| | | ], |
| | | series: seriesData |
| | | } |
| | | myChart.clear() |
| | | if (isClear) { |
| | | myChart.clear() |
| | | } |
| | | myChart.setOption(option) |
| | | } finally { |
| | | loading1.value = false |
| | | } |
| | | |
| | | calItemBaseVale() |
| | | } |
| | | |
| | | onMounted(() => { |
| | |
| | | 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() { |
| | |
| | | function onCheckTree(data, checked, indeterminate) { |
| | | formData.value.checkedItemData = []; |
| | | if (checked.checkedNodes) { |
| | | formData.value.checkedItemData = [...checked.checkedNodes] |
| | | let cns = [...checked.checkedNodes] |
| | | for (let i = 0; i < cns.length; i++) { |
| | | if (cns[i].id.indexOf('-') !== -1) { |
| | | continue |
| | | } |
| | | formData.value.checkedItemData.push(cns[i]) |
| | | } |
| | | } |
| | | debounce(getList, 1000); |
| | | } |
| | |
| | | calRateForm.value.itemAvg = dataView.hisAvg; |
| | | calRateForm.value.realCumulant = dataView.hisCumulant; |
| | | } |
| | | calAccuracyRate() |
| | | } |
| | | |
| | | function calAccuracyRate() { |
| | | this.$refs['calRateForm'].validate((valid) => { |
| | | if (!valid) { |
| | | return false |
| | | } |
| | | let dataView = itemDataObject[calRateForm.value.calItem] |
| | | let seriesReaData = dataView.realData; |
| | | let seriesPreData = dataView.preDataL; |
| | | if (seriesReaData == null || seriesPreData == null || |
| | | seriesReaData.length === 0 || seriesPreData.length === 0) { |
| | | loading2.value = false; |
| | | return; |
| | | } |
| | | let predictValueMap = {}; |
| | | seriesPreData.forEach(function (item) { |
| | | predictValueMap[item[0]] = item[1]; |
| | | }) |
| | | let pointValueMap = {}; |
| | | seriesReaData.forEach(function (item) { |
| | | pointValueMap[item[0]] = item[1]; |
| | | }) |
| | | let inDeviation = Number(calRateForm.value.IN_DEVIATION); |
| | | let outDeviation = Number(calRateForm.value.OUT_DEVIATION); |
| | | if (inDeviation === 0 && outDeviation === 0) { |
| | | loading2.value = false; |
| | | return; |
| | | } |
| | | let inDeviationCount = 0; |
| | | let outDeviationCount = 0; |
| | | let totalCount = 0; |
| | | for (let key in predictValueMap) { |
| | | let predictValue = predictValueMap[key]; |
| | | let pointValue = pointValueMap[key]; |
| | | if (pointValue == null || "" === pointValue || predictValue == null || "" === predictValue) { |
| | | continue; |
| | | } |
| | | let deviationAbs = (predictValue - pointValue) >= 0 ? (predictValue - pointValue) : (predictValue - pointValue) * -1; |
| | | if (deviationAbs < inDeviation) { |
| | | inDeviationCount = inDeviationCount + 1; |
| | | } |
| | | if (deviationAbs > outDeviation) { |
| | | outDeviationCount = outDeviationCount + 1; |
| | | } |
| | | totalCount = totalCount + 1; |
| | | } |
| | | const valid = calRateFormRef.value.validate() |
| | | if (!valid) return |
| | | |
| | | let rateIn = (inDeviationCount / totalCount * 100).toFixed(2); |
| | | let rateOut = (outDeviationCount / totalCount * 100).toFixed(2); |
| | | calRateForm.value.IN_ACCURACY_RATE = Number(rateIn); |
| | | calRateForm.value.OUT_ACCURACY_RATE = Number(rateOut); |
| | | let dataView = itemDataObject.value[calRateForm.value.calItem] |
| | | let seriesReaData = dataView.realData; |
| | | let seriesPreData = dataView.preDataL; |
| | | if (seriesReaData == null || seriesPreData == null || |
| | | seriesReaData.length === 0 || seriesPreData.length === 0) { |
| | | loading2.value = false; |
| | | return; |
| | | } |
| | | let predictValueMap = {}; |
| | | seriesPreData.forEach(function (item) { |
| | | predictValueMap[item[0]] = item[1]; |
| | | }) |
| | | let pointValueMap = {}; |
| | | seriesReaData.forEach(function (item) { |
| | | pointValueMap[item[0]] = item[1]; |
| | | }) |
| | | let inDeviation = Number(calRateForm.value.IN_DEVIATION); |
| | | let outDeviation = Number(calRateForm.value.OUT_DEVIATION); |
| | | if (inDeviation === 0 && outDeviation === 0) { |
| | | loading2.value = false; |
| | | return; |
| | | } |
| | | let inDeviationCount = 0; |
| | | let outDeviationCount = 0; |
| | | let totalCount = 0; |
| | | for (let key in predictValueMap) { |
| | | let predictValue = predictValueMap[key]; |
| | | let pointValue = pointValueMap[key]; |
| | | if (pointValue == null || "" === pointValue || predictValue == null || "" === predictValue) { |
| | | continue; |
| | | } |
| | | let deviationAbs = (predictValue - pointValue) >= 0 ? (predictValue - pointValue) : (predictValue - pointValue) * -1; |
| | | if (deviationAbs < inDeviation) { |
| | | inDeviationCount = inDeviationCount + 1; |
| | | } |
| | | if (deviationAbs > outDeviation) { |
| | | outDeviationCount = outDeviationCount + 1; |
| | | } |
| | | totalCount = totalCount + 1; |
| | | } |
| | | |
| | | let rateIn = (inDeviationCount / totalCount * 100).toFixed(2); |
| | | let rateOut = (outDeviationCount / totalCount * 100).toFixed(2); |
| | | calRateForm.value.IN_ACCURACY_RATE = Number(rateIn); |
| | | calRateForm.value.OUT_ACCURACY_RATE = Number(rateOut); |
| | | loading2.value = false; |
| | | } |
| | | |
| | | function rightSearchDataByRange() { |
| | |
| | | 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); |
| | | } |
| | | |
| | | /** 重置表单 */ |
| | |
| | | currentStamp60: '', |
| | | predictStamp: '', |
| | | chartCheck: ['T+L', '真实值'], |
| | | chartOptions: ['T+N', 'T+L', '当时', '真实值', '调整值'], |
| | | chartOptions: ['T+N', 'T+L', '当时', '真实值', '调整值', '预测累计', '真实累计'], |
| | | checkedItemData: [], |
| | | backItem: '', |
| | | backValue: 0, |
| | |
| | | queryStep: 2, |
| | | isMultipleYRadio: '单坐标轴', |
| | | isMultipleY: false, |
| | | predictFreq: 3, |
| | | predictFreq: 2, |
| | | } |
| | | calRateForm.value = { |
| | | calItem: undefined, |
| | | IN_DEVIATION: 0, |
| | | OUT_DEVIATION: 0, |
| | | IN_DEVIATION: 10, |
| | | OUT_DEVIATION: 50, |
| | | IN_ACCURACY_RATE: 0, |
| | | OUT_ACCURACY_RATE: 0, |
| | | itemAvg: 0, |