风险模型页面的折线图写成组件

zmc

2023-12-01 f4062e41dfbe26ca7664a963357cc0b9bea37b44

风险模型页面的折线图写成组件

 src/utils/time.js

@@ -142,5 +142,16 @@
      result.push(temp)
    }
    return result
  },

  /**
   * æ ¹æ®å¯¹è±¡æ•°ç»„中lst字段按升序排列
   * @param： 
   * @returns：
   */
  compareByScore(a, b) {
    const dateA = new Date(a.lst)
    const dateB = new Date(b.lst)
    return dateA - dateB
  }
}

 src/views/risk_assessment/components/CompDataRiskModel.vue

@@ -6,7 +6,7 @@

import DustRadarChart from '@/views/risk_assessment/components/DustRadarChart.vue'
import FYLineChart from '@/components/chart/FYLineChart.vue'

import time from '@/utils/time.js'
import index from '@/utils/risk_estimate_common_function/index.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
@@ -15,6 +15,7 @@
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: {
    // ç‚¹ä½åå­—
@@ -39,7 +40,8 @@
    AreaAndmonitorType,
    DustRadarChart,
    ButtonClick,
    MonthSelect
    MonthSelect,
    CompDailyStatistic
  },
  data() {
    return {
@@ -127,27 +129,26 @@
    //   }
    // },
    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.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')

        // æ›´æ–°è¯¥ç«™ç‚¹çš„所属场景和运维商
        this.getSiteInfo(this.form.number)
        // æ›´æ–°ç»Ÿè®¡æ•°æ®
        this.getAnalysisData()
        // è®¡ç®—风险值
        this.calRiskValue()
        this.screenLoading = false
      })
          // æ›´æ–°è¯¥ç«™ç‚¹çš„所属场景和运维商
          this.getSiteInfo(this.form.number)
          // æ›´æ–°ç»Ÿè®¡æ•°æ®
          this.getAnalysisData()
          // è®¡ç®—风险值
          this.calRiskValue()
          this.screenLoading = false
        })
      }
   
    }
  },

@@ -157,12 +158,12 @@
      return riskApi.getRiskAdvice(this.weight)
    }
  },
mounted(){
    if(this.showAll){
        // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„站点数据
        this.ShowDefaultData()
  mounted() {
    if (this.showAll) {
      // åŠ è½½é£Žé™©å€¼æœ€é«˜çš„站点数据
      this.ShowDefaultData()
    }
},
  },
  methods: {
    // æŸ¥è¯¢ç«™ç‚¹ç»Ÿè®¡ä¿¡æ¯
    async querySiteStaticsInfo(row) {
@@ -275,6 +276,7 @@
            this.isNoData = true
            return
          }
          this.chartData.sort(time.compareByScore)
          // åˆ†æžæ•°æ®ä¸­çš„最早时间
          let begin = this.chartData[0].lst
          // åˆ†æžæ•°æ®ä¸­çš„最晚时间
@@ -282,12 +284,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)
@@ -317,35 +313,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风险排名清单
@@ -417,7 +384,6 @@
    <el-form-item v-show="showAll">
      <MonthSelect @submit-value="giveMonth"></MonthSelect>
    </el-form-item>
    

    <el-form-item v-show="showAll">
      <ButtonClick
@@ -440,12 +406,18 @@
        <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>

      <el-row :gutter="10" >
      <el-row :gutter="10">
        <el-col :span="5" v-show="showAll">
          <el-card shadow="never" class="table-class">
            <el-table
@@ -494,7 +466,7 @@
          </el-card>
        </el-col>

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

        <el-col :span="showAll ?4: 5" >
        <el-col :span="showAll ? 4 : 5">
          <el-card shadow="never" class="card-height risk-card">
            <template #header>
              <span class="title-16"> é£Žé™©å€¼(0~1)： </span>
              <span
              class="title-16"
                :class="{
                  'weightColor-low': weight < 0.15,
                  'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                  'weightColor-heigh': weight > 0.6
                }"
              >
                é£Žé™©å€¼(0~1)：
              </span>
              <span  :class="{
                'weightColor-low': weight < 0.15,
                'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                'weightColor-heigh': weight > 0.6
              }"> {{ weight }}</span>
                {{ weight }}</span
              >
            </template>
            <div class="risk-text-container">
              <div class="risk-grade">
                <h1 class="sub-title">风险等级：</h1>
                <span  :class="{
                  'weightColor-low': weight < 0.15,
                  'weightColor-medium': weight >= 0.15 && weight <= 0.6,
                  'weightColor-heigh': weight > 0.6
                }" >{{ 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">
@@ -562,7 +537,7 @@
          </el-card>
        </el-col>

        <el-col :span="showAll ?4: 5"  >
        <el-col :span="showAll ? 4 : 5">
          <el-card shadow="never" class="card-height">
            <template #header>
              <span class="title-16">风险详情</span>
@@ -571,30 +546,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" v-show="bill.exception">共出现了{{ bill.exception }}类异常</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" v-show="bill.mutationCount">量级突变异常:{{ bill.mutationCount }}条</el-tag>
                <el-tag size="small" v-show="bill.mutationCount"
                  >量级突变异常:{{ bill.mutationCount }}条</el-tag
                >
              </div>

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

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

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

        <el-col :span="12">
          <el-card shadow="never" class="card-value">
            <FYLineChart
              title="日有效率"
              :chartData="chartData3"
              yName="%"
              seriesName="日有效率"
              :areaColor="areaColor"
            >
            </FYLineChart>
          </el-card>
        </el-col>
      </el-row>
      <CompDailyStatistic :fetch-params="form" />
    </div>
  </div>
  <el-empty description="暂无数据" v-show="isNoData" :image-size="200" />

 src/views/risk_assessment/riskModel/components/CompDailyStatistic.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,125 @@
<script>
import exceptionApi from '@/api/exceptionApi.js'
import lineChart from '@/utils/chartFunction/lineChart.js'
import index from '@/utils/risk_estimate_common_function/index.js'
import time from '@/utils/time.js'
import FYLineChart from '@/components/chart/FYLineChart.vue'
export default {
  props: {
    fetchParams: {
      type: Object,
      default: {
        name: null,
        number: null,
        beginTime: null,
        endTime: null
      }
    }
  },
  components: {
    FYLineChart
  },
  data() {
    return {
      chart: {
        // æ—¥å‡å€¼ æŠ˜çº¿å›¾ç»“æžœ
        chartDataAvg: {},
        // æ—¥æœ‰æ•ˆçŽ‡ æŠ˜çº¿å›¾ç»“æžœ
        chartDataValid: {},
        // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
        areaColor: []
      }
    }
  },
  watch: {
    fetchParams: {
      handler() {
        if(this.fetchParams.name != '' && this.fetchParams.name != null){
          this.fetchDayAnalysisData()
        }
      },
      deep: true
    }
  },
  mounted() {
  },
  methods: {
    //  æ ¹æ®ç›®å‰ç«™ç‚¹ï¼Œæœˆä»½ï¼ŒæŸ¥æŠ˜çº¿å›¾æ—¥ç»Ÿè®¡æ•°æ®
    fetchDayAnalysisData() {
      exceptionApi
        .analysisdata(
          this.fetchParams.name,
          this.fetchParams.beginTime,
          this.fetchParams.endTime,
          'day'
        )
        .then((response) => {
          const chartData = response.data.data
          console.log('数据为',chartData);
          if (response.data.data.length == 0) {
            return
          }
          chartData.sort(time.compareByScore)
          // åˆ†æžæ•°æ®ä¸­çš„最早时间
          let begin = chartData[0].lst
          // åˆ†æžæ•°æ®ä¸­çš„最晚时间
          let end = chartData[chartData.length - 1].lst

          // æ— æ•°æ®çš„时间段
          let noDataTimeInteval = lineChart.backNoDataInteval(begin, end)
          // æ— æ•°æ®é…ç½®æ—¶é—´æ®µ
          this.chart.areaColor = lineChart.getMarkArea(noDataTimeInteval)
          this.setChart(chartData, this.fetchParams.beginTime, this.fetchParams.endTime)
   
        })
    },

    // é€‰æ‹©å…¶ä»–值类型时
    setChart(cData, bt, et) {
      if (cData.length!=0) {
        // æž„建折线图x,y数据
        let obj = lineChart.getLineChartXYData(cData, bt, et)
        console.log('设置：',obj);
        this.chart.chartDataAvg = {
          x: obj.xData,
          y: obj.yAvg
        }
        this.chart.chartDataValid = {
          x: obj.xData,
          y: obj.yValid
        }
      }
    },
  }
}
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card shadow="never">
        <FYLineChart
          title="日均值"
          :chartData="chart.chartDataAvg"
          yName="mg/m³"
          seriesName="日均值"
          :areaColor="chart.areaColor"
        />
      </el-card>
    </el-col>

    <el-col :span="12">
      <el-card shadow="never">
        <FYLineChart
          title="日有效率"
          :chartData="chart.chartDataValid"
          yName="%"
          seriesName="日有效率"
          :areaColor="chart.areaColor"
        />
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped></style>