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 {