雷达图 新增综合风险排名 数据接入配置

zmc

2023-09-05 c2f95b0b9090a2394b5b068582b932a5e57b86aa

 src/views/line_graph/DataRiskModel.vue

@@ -6,14 +6,8 @@

import DustRadarChart from './components/DustRadarChart.vue';
import exceptionApi from '@/api/exceptionApi.js';
import { useWindowSize } from '@vueuse/core';

import LineChart from './components/LineChart.vue'


// const DustRadarChart = defineAsyncComponent(() =>
//   import('./components/DustRadarChart.vue')
// )
import LineChart from './components/LineChart.vue';

import dayjs from 'dayjs';
export default {
@@ -61,14 +55,21 @@
        //  典型异常复现率
        exceptionRecurrence: '',
        // 异常类型据聚集度
        exceptionTypeAggregation: '',
      
        exceptionTypeAggregation: ''
      }
    };
  },
  setup() {
    const { height } = useWindowSize();
    return { height };

  computed: {
    weight() {
      return (
        (100 - this.bill.online) * 0.1 +
        (100 - this.bill.valid) * 0.2 +
        this.bill.exceeding * 0.2 +
        this.bill.exceptionTypeAggregation * 0.2 +
        this.bill.exceptionRecurrence * 0.3
      ).toFixed(2);
    }
  },
  mounted() {
    this.fetch();
@@ -90,11 +91,11 @@
      let exceedindCriticalDegree = 0;

      // 保存出现的不同异常类型
      let exception = []
      let exception = [];
      // 异常类型聚集度
      let exceptionTypeAggregation = 0
      let exceptionTypeAggregation = 0;
     
      exceptionArr.forEach(item => {
      exceptionArr.forEach((item) => {
        // 异常复现率
        if (item.exceptionType == 4) {
          mutationCount++;
@@ -106,11 +107,11 @@

        // 异常类型聚集度
        if(exception.length == 0){
          exception.push(item.exceptionType)
          exception.push(item.exceptionType);
        }
        // 保存新的异常类型
        else if(exception.indexOf(item.exceptionType) == -1){
          exception.push(item.exceptionType)
          exception.push(item.exceptionType);
        }
      });

@@ -127,7 +128,12 @@
      }
      console.log('sum:',sum);
      console.log('exception:',exception);
      console.log('其他',mutationCount,exceedindCriticalDegree,exceedindCriticalDegree);
      console.log(
        '其他',
        mutationCount,
        exceedindCriticalDegree,
        exceedindCriticalDegree
      );
      switch (sum) {
        case 0:
          exceptionTyprRecurRate = sum / 3;
@@ -143,13 +149,13 @@
          return 'error';
      }

      exceptionTypeAggregation = exception.length / 8
      exceptionTypeAggregation = exception.length / 8;

      let obj = {}
      obj['exceptionRecurrence'] = exceptionTyprRecurRate
      obj['exceptionTypeAggregation'] = exceptionTypeAggregation
      let obj = {};
      obj['exceptionRecurrence'] = exceptionTyprRecurRate;
      obj['exceptionTypeAggregation'] = exceptionTypeAggregation;

      return obj
      return obj;
    },
    /**
     * 计算日期相差几天
@@ -158,12 +164,6 @@
     * @returns：
     */
    getDaysDifference(startDate, endDate) {
      // var start = new Date(startDate);
      // var end = new Date(endDate);
      // var timeDiff = Math.abs(end.getTime() - start.getTime());
      // var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));


      return dayjs(endDate).diff(startDate,'day') + 1;
    },
    /**
@@ -245,14 +245,6 @@

    // 点击展示按钮
    fetchData() {
      if (
        this.form.beginTime >= this.form.endTime &&
        (this.form.beginTime != null || this.form.endTime != null) &&
        (this.form.beginTime != '' || tthis.form.endTime != '')
      ) {
        alert('请输入有效的时间段');
        return;
      }
      let params = {};
      if (this.form.name) {
        params['siteName'] = this.form.name;
@@ -287,8 +279,8 @@
          this.bill.valid = temp['valid'];
          this.bill.exceeding = temp['exceeding'];

          this.begin = this.chartData[0].lst
          this.end = this.chartData[this.chartData.length-1].lst
          this.begin = this.chartData[0].lst;
          this.end = this.chartData[this.chartData.length - 1].lst;
        });
    },

@@ -341,9 +333,9 @@
        })
        .then((res) => {
          console.log('异常：', res.data.data);
          let obj = this.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
          let obj = this.calRecur(res.data.data);
          this.bill.exceptionRecurrence = obj['exceptionRecurrence'];
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation'];
        });
    }
  }
@@ -353,9 +345,7 @@
  <div class="search-container">
    <el-container>
      <el-main>
        
        <el-form :inline="true" :model="form" >
       
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
@@ -372,34 +362,101 @@
            ></TimeSelectWithShortCuts>
          </el-form-item>
    
        
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>
       
        </el-form>

        <div class="time-text">数据统计时段：{{ begin}} ~ {{ end }}</div>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="16" >
         
        <el-card
              shadow="never"
            <el-card shadow="never">
              <DustRadarChart
                :name="[
                  '数据有效率风险',
                  '典型异常复现率风险',
                  '异常类型聚集度风险',
                  '数据超标率风险',
                  '数据在线率风险'
                ]"
                :yData="[
                  bill.valid,
                  bill.exceptionRecurrence,
                  bill.exceptionTypeAggregation,
                  bill.exceeding,
                  bill.online
                ]"
              ></DustRadarChart>
              <div>
                权重：
                <span
                  :class="{
                    'weightColor-low': weight < 0.2,
                    'weightColor-medium': weight >= 0.2 && weight < 0.6,
                    'weightColor-heigh': weight >= 0.6
                  }"
                  >{{ weight }}</span
            >
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
            权重：{{ ((bill.online*0.1+bill.valid*0.2+bill.exceeding*0.2+bill.exceptionTypeAggregation*0.2+bill.exceptionRecurrence*0.3)*0.01).toFixed(2) }} 
              </div>
              <div></div>
            </el-card>


          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card
              shadow="never"
            style="width: 200px;min-width: 200px;"
            <el-card shadow="never" style="width: 200px; min-width: 200px">
              <template #header>
                <h1
                  :class="{
                    'weightColor-low': weight < 0.2,
                    'weightColor-medium': weight >= 0.2 && weight < 0.6,
                    'weightColor-heigh': weight >= 0.6
                  }"
            >
              <template #header><span class="title-16">风险详情</span></template>
                  风险值：{{ weight }}
                </h1>
              </template>
              <template #default>
                <div class="risk-grade">
                  <h1>风险等级：</h1>
                  <span v-if="weight >= 0.6"> 高风险</span>
                  <span v-else-if="weight >= 0.2 && weight < 0.6"> 中风险</span>
                  <span v-else> 低风险</span>
                </div>

                <div class="risk-advice">
                  <h1>管控建议：</h1>
                  <span v-if="weight >= 0.6">
                    建议对该站点进行线下执法检查，专项数据对比</span
                  >
                  <span v-else-if="weight >= 0.2 && weight < 0.6">
                    建议开展常态追踪分析</span
                  >
                  <span v-else> 建议引导企业长态保持</span>
                </div>
                <div class="grade-instance">
                  <div class="container">
                    <div class="block-color heigh"></div>
                    <div>高风险(≥0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color medium"></div>
                    <div>中风险(0.2~0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color low"></div>
                    <div>低风险(＜0.2)</div>
                  </div>
                </div>
              </template>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card shadow="never" style="width: 200px; min-width: 200px">
              <template #header
                ><span class="title-16">风险详情</span></template
              >
              <el-form >
                <el-form-item label="最大值：">
                  {{ bill.max }} mg/m³
@@ -419,52 +476,17 @@
                <el-form-item label="异常类型聚集度：">
                  {{ bill.exceptionTypeAggregation*100  }}%
                </el-form-item>
                <el-form-item label="典型异常复现率：" label-width="auto">
                <el-form-item label="典型异常复现率：">
                  {{ bill.exceptionRecurrence*100  }}%
                </el-form-item>
              </el-form>
      
            
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card
              shadow="never"
              
            style="width:200px; min-width: 200px;"
            >
              <template #header>
                <span class="title-16">风险等级</span>
              </template>
              <template #default>
                <!-- <el-space direction="vertical" :size="15" > -->
                  <div class="container">
                    <div class="block-color heigh"></div> <div>高风险(≥0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color medium" ></div> <div>中风险(0.2~0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block-color low"></div><div>低风险(＜0.2)</div>
                  </div>
                  
                  
                  
                <!-- </el-space> -->
              </template>
            </el-card>
          </el-col>
        </el-row>



        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
              
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日均值"
@@ -478,10 +500,7 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
             
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日在线率"
@@ -495,8 +514,7 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never"
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日有效率"
@@ -523,9 +541,6 @@
            </el-card>
          </el-col>
        </el-row>



      </el-main>
    </el-container>
  </div>
@@ -552,6 +567,9 @@
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  margin-top: 40px;
}
.block-color {
  width: 1em;
  height: 1em;
@@ -562,10 +580,10 @@
  background-color: red;
}
.medium {
  background-color: #FADC19;
  background-color: #fadc19;
}
.low {
  background-color: #9FDB1D;
  background-color: #9fdb1d;
}

.el-text {
@@ -573,16 +591,25 @@
}
.el-form-item {
margin-bottom: 20px;

}
:deep().el-form-item__content {
  justify-content: flex-end;
  
}
.title-16 {
  font-size: 16px;
  font-weight: bold;
}
.el-row {
.weightColor-low {
  color: #9fdb1d;
}
.weightColor-medium {
  color: #dabe09;
}
.weightColor-heigh {
  color: red;
}
.risk-grade {
  display: flex;
  margin-bottom: 20px;
}
</style>