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

zmc

2023-09-05 c2f95b0b9090a2394b5b068582b932a5e57b86aa

 src/views/line_graph/DataRiskModel.vue

@@ -1,14 +1,13 @@
<!-- 日均值 -->
<script>
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
import TimeSelectWithShortCuts from '@/sfc/TimeSelectWithShortCuts.vue';
import InputSearch from '@/sfc/InputSearch.vue';
import AreaAndmonitorType from '@/sfc/AreaAndmonitorType.vue';

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

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

import dayjs from 'dayjs';
export default {
@@ -29,8 +28,8 @@
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      // begin: '2023-05-01', //开始时间
      // end: '2023-05-15', //结束时间
      begin: '', //开始时间
      end: '', //结束时间

      form: {
        // 站点名称
@@ -56,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();
@@ -85,11 +91,11 @@
      let exceedindCriticalDegree = 0;

      // 保存出现的不同异常类型
      let exception = []
      let exception = [];
      // 异常类型聚集度
      let exceptionTypeAggregation = 0
     
      exceptionArr.forEach(item => {
      let exceptionTypeAggregation = 0;

      exceptionArr.forEach((item) => {
        // 异常复现率
        if (item.exceptionType == 4) {
          mutationCount++;
@@ -100,12 +106,12 @@
        }

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

@@ -120,9 +126,14 @@
      if (exceedindCriticalDegree > 1) {
        sum = sum + exceedindCriticalDegree - 1;
      }
      console.log('sum:',sum);
      console.log('exception:',exception);
      console.log('其他',mutationCount,exceedindCriticalDegree,exceedindCriticalDegree);
      console.log('sum:', sum);
      console.log('exception:', exception);
      console.log(
        '其他',
        mutationCount,
        exceedindCriticalDegree,
        exceedindCriticalDegree
      );
      switch (sum) {
        case 0:
          exceptionTyprRecurRate = sum / 3;
@@ -138,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;
    },
    /**
     * 计算日期相差几天
@@ -153,11 +164,7 @@
     * @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 diffDays;
      return dayjs(endDate).diff(startDate, 'day') + 1;
    },
    /**
     * 从分析数据数组中找到最小和大值
@@ -181,6 +188,7 @@
      let begin = dayjs(this.form.beginTime).format('YYYY-MM-DD');
      let end = dayjs(this.form.endTime).format('YYYY-MM-DD');
      let dayDiff = this.getDaysDifference(begin, end);
      console.log('日期间隔', dayDiff);
      let obj = {};
      // 计算最小和大值
      arr.forEach((item) => {
@@ -202,13 +210,13 @@
      online = sumOnline / dayDiff;
      valid = sumValid / dayDiff;
      exceeding = sumExceeding / dayDiff;
      obj['min'] = min;
      obj['max'] = max;
      obj['min'] = min.toFixed(3);
      obj['max'] = max.toFixed(3);

      obj['avg'] = avg.toFixed(3);
      obj['online'] = online.toFixed(3);
      obj['valid'] = valid.toFixed(3);
      obj['exceeding'] = exceeding.toFixed(3);
      obj['avg'] = avg.toFixed(2);
      obj['online'] = online.toFixed(2);
      obj['valid'] = valid.toFixed(2);
      obj['exceeding'] = exceeding.toFixed(2);

      return obj;
    },
@@ -237,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;
@@ -278,6 +278,9 @@
          this.bill.online = temp['online'];
          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;
        });
    },

@@ -330,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'];
        });
    }
  }
@@ -348,10 +351,11 @@
          </el-form-item>
          <el-form-item>
            <InputSearch
              :isNeedDefaultSite="1"
              isNeedDefaultSite="1"
              @submit-value="(n) => (form.name = n)"
            ></InputSearch>
          </el-form-item>

          <el-form-item>
            <TimeSelectWithShortCuts
              @submit-time="giveTime"
@@ -361,30 +365,133 @@
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>

          <!-- <div>
            <el-form-item>
              <el-radio-group v-model="radio" @change="setChart">
                <el-radio :label="1">颗粒物浓度平均值</el-radio>
                <el-radio :label="2">数据在线/有效/超标率</el-radio>
              </el-radio-group>
            </el-form-item>
          </div> -->
        </el-form>

        <div>数据统计时段：{{}}</div>
        <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">
              <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
                >
              </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">
              <template #header>
                <h1
                  :class="{
                    'weightColor-low': weight < 0.2,
                    'weightColor-medium': weight >= 0.2 && weight < 0.6,
                    'weightColor-heigh': weight >= 0.6
                  }"
                >
                  风险值：{{ 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³
                </el-form-item>
                <el-form-item label="最小值：">
                  {{ bill.min }} mg/m³
                </el-form-item>
                <el-form-item label="数据有效率：">
                  {{ bill.online }}%
                </el-form-item>
                <el-form-item label="数据在线率：">
                  {{ bill.valid }}%
                </el-form-item>
                <el-form-item label="数据超标率：">
                  {{ bill.exceeding }}%
                </el-form-item>
                <el-form-item label="异常类型聚集度：">
                  {{ bill.exceptionTypeAggregation * 100 }}%
                </el-form-item>
                <el-form-item label="典型异常复现率：">
                  {{ bill.exceptionRecurrence * 100 }}%
                </el-form-item>
              </el-form>
            </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"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日均值"
                  :chartData="chartData1"
                  yName="浓度"
                  yName="mg/m³"
                  seriesName="日均值"
                >
                </LineChart>
@@ -393,15 +500,12 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日在线率"
                  :chartData="chartData2"
                  yName="百分比"
                  yName="%"
                  seriesName="日在线率"
                >
                </LineChart>
@@ -410,13 +514,12 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never"
            :style="{ height: `calc(${height}px - 35vh - 250px)` }">
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日有效率"
                  :chartData="chartData3"
                  yName="百分比"
                  yName="%"
                  seriesName="日有效率"
                >
                </LineChart>
@@ -425,61 +528,15 @@
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never" :style="{ height: `calc(${height}px - 35vh - 250px)` }">
            <el-card shadow="never">
              <template #default>
                <LineChart
                  title="日超标率"
                  :chartData="chartData4"
                  yName="百分比"
                  yName="%"
                  seriesName="日超标率"
                >
                </LineChart>
              </template>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :data="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>异常数量统计</template>
              <el-space direction="vertical">
                <div>最大值:{{ bill.max }} mg/m³</div>
                <div>最小值:{{ bill.min }} mg/m³</div>
                <div>均值:{{ bill.avg }} mg/m³</div>
                <div>数据有效率:{{ bill.online }}%</div>
                <div>数据在线率:{{ bill.valid }}%</div>
                <div>数据超标率:{{ bill.exceeding }}%</div>
                <div>异常类型聚集度:{{ bill.exceptionTypeAggregation*100 }}%</div>
                <div>典型异常复现率:{{ bill.exceptionRecurrence*100 }}%</div>
              </el-space>
            </el-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>风险等级</template>
              <template #default>
                <el-space direction="vertical">
                  <el-text>高风险(≥0.6)</el-text>
                  <el-text>中风险(0.2~0.6)</el-text>
                  <el-text>低风险(＜0.2)</el-text>
                </el-space>
              </template>
            </el-card>
          </el-col>
@@ -490,6 +547,9 @@
</template>

<style scoped>
.time-text {
  letter-spacing: 2px;
}
.el-card {
  margin-top: 15px;
  border-radius: 9px;
@@ -503,4 +563,53 @@
  color: #333;
  line-height: 60px;
}
.container {
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  margin-top: 40px;
}
.block-color {
  width: 1em;
  height: 1em;
  margin-right: 10px;
  margin-top: 3px;
}
.heigh {
  background-color: red;
}
.medium {
  background-color: #fadc19;
}
.low {
  background-color: #9fdb1d;
}

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