修改无数据时段的算法

zmc

2023-12-07 d1ccf7e1835b3c583da16d90a286e749d5e27c84

 src/views/risk_assessment/components/CompDataRiskModel.vue

@@ -1,21 +1,17 @@
<!-- 日均值 -->

<script>
import InputSearch from '@/sfc/InputSearch.vue'
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue'
import exceptionApi from '@/api/exceptionApi.js'

import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
import LineChart from '@/views/risk_assessment/components/LineChart.vue'

import index from '@/utils/risk_estimate_common_function/index.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
import MonthSelect from '@/sfc/MonthSelect.vue'
import riskApi from '@/api/risk/riskApi.js'
import riskValue from '@/utils/risk_estimate_common_function/riskValue.js'
import lineChart from '@/utils/chartFunction/lineChart.js'
import siteInfo from '@/api/site/siteInfo.js'
import CompDailyStatistic from '@/views/risk_assessment/riskModel/components/CompDailyStatistic.vue'
export default {
  props: {
    // 点位名字
@@ -35,12 +31,12 @@
    }
  },
  components: {
    LineChart,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart,
    ButtonClick,
    MonthSelect
    MonthSelect,
    CompDailyStatistic
  },
  data() {
    return {
@@ -58,9 +54,9 @@

      form: {
        // 站点名称
        name: '',
        siteName: '',
        // 设备编号
        number: '3234',
        mnCode: '3234',
        // 开始时间
        beginTime: '',
        // 结束时间
@@ -118,37 +114,27 @@
    }
  },
  watch: {
    // showAll() {
    //     console.log('1111')
    //   // 页面加载时showAll才会变化一次
    //   // 为true表示的风险模型页面
    //   if (this.showAll) {
    //     // 加载风险值最高的站点数据
    //     this.ShowDefaultData()
    //   }
    // },
    siteName() {
      if(this.siteName!= ''){
    // 更新站点名字和时间
      this.form.name = this.siteName
      this.screenLoading = true
      siteInfo.queryMnCode(this.siteName).then((response) => {
        this.form.number = response.data.data[0].mnCode
        this.month = this.time
        // 同时更新月起始时间
        this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss')
        this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      if (this.siteName != '') {
        // 更新站点名字和时间
        this.form.siteName = this.siteName
        this.screenLoading = true
        siteInfo.queryMnCode(this.siteName).then((response) => {
          this.form.mnCode = response.data.data[0].mnCode
          this.month = this.time
          // 同时更新月起始时间
          this.form.beginTime = dayjs(this.month).startOf().format('YYYY-MM-DD HH:mm:ss')
          this.form.endTime = dayjs(this.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')

        // 更新该站点的所属场景和运维商
        this.getSiteInfo(this.form.number)
        // 更新统计数据
        this.getAnalysisData()
        // 计算风险值
        this.calRiskValue()
        this.screenLoading = false
      })
          // 更新该站点的所属场景和运维商
          this.getSiteInfo(this.form.mnCode)
          // 更新统计数据
          this.getAnalysisData()
          // 计算风险值
          this.calRiskValue()
          this.screenLoading = false
        })
      }
   
    }
  },

@@ -158,16 +144,16 @@
      return riskApi.getRiskAdvice(this.weight)
    }
  },
mounted(){
    if(this.showAll){
        // 加载风险值最高的站点数据
        this.ShowDefaultData()
  mounted() {
    if (this.showAll) {
      // 加载风险值最高的站点数据
      this.ShowDefaultData()
    }
},
  },
  methods: {
    // 查询站点统计信息
    async querySiteStaticsInfo(row) {
      this.form.name = row.siteName
      this.form.siteName = row.siteName
      // 更新统计数据
      await this.getAnalysisData()
      // 计算风险值
@@ -192,7 +178,7 @@
      // 更新排名清单
      this.getRiskRank()
      // 更新该站点的所属场景和运维商
      this.getSiteInfo(this.form.number)
      this.getSiteInfo(this.form.mnCode)
      // 更新分析数据
      this.getAnalysisData()
      // 计算风险值
@@ -222,12 +208,12 @@
      this.screenLoading = true
      // 更新排名清单，并得到风险值最高站点
      let arr = await this.getRiskRank()
      this.form.name = arr[0]
      this.form.number = arr[1]
      this.form.siteName = arr[0]
      this.form.mnCode = arr[1]
      this.screenLoading = false

      // 更新该站点的所属场景和运维商
      this.getSiteInfo(this.form.number)
      this.getSiteInfo(this.form.mnCode)
      // 更新日统计数据
      this.getAnalysisData()
      // 计算风险值
@@ -240,7 +226,7 @@
     * @returns：
     */
    calRiskValue() {
      riskApi.queryRiskValue(this.form.number, this.month, 'month').then((response) => {
      riskApi.queryRiskValue(this.form.mnCode, this.month, 'month').then((response) => {
        const rValue = response.data.data[0]
        this.exceptionRisk.onlineRisk = rValue.onlineRisk
        this.exceptionRisk.validRisk = rValue.validRisk
@@ -254,25 +240,15 @@

    //  根据目前站点，月份，查折线图日统计数据
    fetchDayAnalysisData() {
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime
      }
      this.loading = true
      this.queryButton = true
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime, 'day')
        .analysisdata(this.form.siteName, this.form.beginTime, this.form.endTime, 'day')
        .then((response) => {
          this.chartData = response.data.data
          this.chartData = response
          this.loading = false
          this.queryButton = false
          if (response.data.data.length == 0) {
          if (response.length == 0) {
            this.isNoData = true
            return
          }
@@ -283,12 +259,6 @@

          // 移除空数据状态
          this.isNoData = false

          // 无数据的时间段
          let noDataTimeInteval = lineChart.backNoDataInteval(begin, end)
          // 无数据配置时间段
          this.areaColor = lineChart.getMarkArea(noDataTimeInteval)
          this.setChart()

          //  折线图数据
          let temp = index.calBillData(this.chartData, begin, end)
@@ -305,7 +275,7 @@
    fetchExceptionAnalysisData() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          siteName: this.form.siteName,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        })
@@ -318,35 +288,6 @@
          this.bill.exceedingNearCount = obj['exceedingNearCount']
          this.bill.exceedingCriticalDegree = obj['exceedingCriticalDegree']
        })
    },

    // 选择其他值类型时
    setChart() {
      if (this.chartData.length) {
        // 构建折线图x,y数据
        let obj = lineChart.getLineChartXYData(
          this.chartData,
          this.form.beginTime,
          this.form.endTime
        )

        this.chartData1 = {
          x: obj.xData,
          y: obj.yAvg
        }
        this.chartData2 = {
          x: obj.xData,
          y: obj.yOnline
        }
        this.chartData3 = {
          x: obj.xData,
          y: obj.yValid
        }
        this.chartData4 = {
          x: obj.xData,
          y: obj.yExceed
        }
      }
    },

    // 得到前10风险排名清单
@@ -391,7 +332,7 @@
    },

    openDetail() {
      const encodedSiteName = encodeURIComponent(this.form.name)
      const encodedSiteName = encodeURIComponent(this.form.siteName)
      const timeType = '1'
      const jumpPage = '2'
      this.$router.push(`/exceptionDetail/${encodedSiteName}/${this.month}/${timeType}/${jumpPage}`)
@@ -408,17 +349,16 @@

    <el-form-item class="form-item">
      <InputSearch
        :site-name="form.name"
        :site-name="form.siteName"
        isNeedDefaultSite="0"
        @submit-value="(n) => (form.name = n)"
        @submit-mncode="(n) => (form.number = n)"
        @submit-value="(n) => (form.siteName = n)"
        @submit-mncode="(n) => (form.mnCode = n)"
      ></InputSearch>
    </el-form-item>

    <el-form-item v-show="showAll">
      <MonthSelect @submit-value="giveMonth"></MonthSelect>
    </el-form-item>
    

    <el-form-item v-show="showAll">
      <ButtonClick
@@ -433,7 +373,7 @@
  <div v-loading="screenLoading" class="wait-name">
    <div class="chart-container" v-show="!isNoData && !screenLoading">
      <el-card class="time-text">
        <h4>{{ form.name }}</h4>
        <h4>{{ form.siteName }}</h4>

        <br />
        <br />
@@ -441,7 +381,13 @@
        <el-tag class="mx-1">场景</el-tag>{{ siteInfo.typename }}

        <el-tag class="mx-1">运维商</el-tag>{{ siteInfo.dutyCompany }}
        <el-button type="primary" size="default" class="exception-button" v-show="showAll" @click="openDetail">
        <el-button
          type="primary"
          size="default"
          class="exception-button"
          v-show="showAll"
          @click="openDetail"
        >
          数据异常详情
        </el-button>
      </el-card>
@@ -495,7 +441,7 @@
          </el-card>
        </el-col>

        <el-col :span="11">
        <el-col :span="showAll ? 11 : 14">
          <el-card shadow="never" class="table-class">
            <DustRadarChart
              :name="[
@@ -510,23 +456,31 @@
          </el-card>
        </el-col>

        <el-col :span="4">
        <el-col :span="showAll ? 4 : 5">
          <el-card shadow="never" class="card-height risk-card">
            <template #header>
              <h1
              <span class="title-16"> 风险值(0~1)： </span>
              <span
                :class="{
                  'weightColor-low': weight < 0.15,
                  'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                  'weightColor-heigh': weight > 0.6
                }"
              >
                风险值(0~1)：{{ weight }}
              </h1>
                {{ weight }}</span
              >
            </template>
            <div class="risk-text-container">
              <div class="risk-grade">
                <h1 class="sub-title">风险等级：</h1>
                <span class="sub-title">{{ riskGradeAndAdvice.riskGrade }} </span>
                <span
                  :class="{
                    'weightColor-low': weight < 0.15,
                    'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                    'weightColor-heigh': weight > 0.6
                  }"
                  >{{ riskGradeAndAdvice.riskGrade }}
                </span>
              </div>

              <div class="risk-advice">
@@ -558,7 +512,7 @@
          </el-card>
        </el-col>

        <el-col :span="4">
        <el-col :span="showAll ? 4 : 5">
          <el-card shadow="never" class="card-height">
            <template #header>
              <span class="title-16">风险详情</span>
@@ -567,26 +521,35 @@
            <el-form>
              <el-form-item label="最大值："> {{ bill.max }} mg/m³ </el-form-item>
              <el-form-item label="最小值："> {{ bill.min }} mg/m³ </el-form-item>
              <el-form-item label="数据有效率："> {{ bill.online*100 }}% </el-form-item>
              <el-form-item label="数据在线率："> {{ bill.valid*100 }}% </el-form-item>
              <el-form-item label="数据超标率："> {{ bill.exceeding*100 }}% </el-form-item>
              <el-form-item label="数据有效率："> {{ bill.online * 100 }}% </el-form-item>
              <el-form-item label="数据在线率："> {{ bill.valid * 100 }}% </el-form-item>
              <el-form-item label="数据超标率："> {{ bill.exceeding * 100 }}% </el-form-item>
              <el-form-item label="异常类型聚集度：">
                {{ exceptionRisk.exceptionTypeAggregation * 100 }}%
              </el-form-item>
              <el-tag :size="small">共出现了{{ bill.exception.length }}类异常</el-tag>

              <el-tag size="small" v-show="bill.exception"
                >共出现了{{ bill.exception }}类异常</el-tag
              >

              <el-form-item label="典型异常复现率：">
                {{ exceptionRisk.typicalExceptionRepetitionRate * 100 }}%
              </el-form-item>

              <div>
                <el-tag :size="small">量级突变异常:{{ bill.mutationCount }}条</el-tag>
                <el-tag size="small" v-show="bill.mutationCount"
                  >量级突变异常:{{ bill.mutationCount }}条</el-tag
                >
              </div>

              <div>
                <el-tag :size="small">临近超标异常:{{ bill.exceedingNearCount }}条</el-tag>
                <el-tag size="small" v-show="bill.exceedingNearCount"
                  >临近超标异常:{{ bill.exceedingNearCount }}条</el-tag
                >
              </div>

              <div>
                <el-tag :size="small"
                <el-tag size="small" v-show="bill.exceedingCriticalDegree"
                  >单日超标次数临界异常:{{ bill.exceedingCriticalDegree }}条</el-tag
                >
              </div>
@@ -595,33 +558,7 @@
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日均值"
              :chartData="chartData1"
              yName="mg/m³"
              seriesName="日均值"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <LineChart
              title="日有效率"
              :chartData="chartData3"
              yName="%"
              seriesName="日有效率"
              :areaColor="areaColor"
            >
            </LineChart>
          </el-card>
        </el-col>
      </el-row>
      <CompDailyStatistic :fetch-params="form" />
    </div>
  </div>
  <el-empty description="暂无数据" v-show="isNoData" :image-size="200" />
@@ -679,7 +616,7 @@
  background-color: red;
}
.medium {
  background-color: #fadc19;
  background-color: #dabe09;
}
.low {
  background-color: #9fdb1d;