分险排名页面增加站点清单 辅助审核增加了选择日期以及查看详情页面的样式调整

zmc

2023-10-26 73b40d54554307ced5aab5b89dff6e1980e8a242

 src/views/line_graph/DataRiskModel.vue

@@ -1,33 +1,34 @@
<!-- 日均值 -->
<script>
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';
<script>
// import DateSelectWithShortCuts from '@/sfc/DateSelectWithShortCuts.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 LineChart from './components/LineChart.vue'


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

import dayjs from 'dayjs';
import index from '@/utils/risk_estimate_common_function/index.js'
import ButtonClick from '@/sfc/ButtonClick.vue'
import dayjs from 'dayjs'
import rank from '@/utils/risk_estimate_common_function/rank.js'
import MonthSelect from '@/sfc/MonthSelect.vue';
export default {
  components: {
    LineChart,
    TimeSelectWithShortCuts,
    // DateSelectWithShortCuts,
    InputSearch,
    AreaAndmonitorType,
    DustRadarChart
    DustRadarChart,
    ButtonClick,
    MonthSelect
  },
  data() {
    return {
      isNoData: false,
      loading: false,
      screenLoading:false,
      chartData: [],
      chartData1: {}, //保存查询的结果
      chartData2: {},
@@ -42,6 +43,8 @@
        name: '',
        // 设备编号
        number: '',

        month:'',
        // 开始时间
        beginTime: '',
        // 结束时间
@@ -54,172 +57,85 @@
        min: '',
        max: '',
        avg: '',
        online: '',
        valid: '',
        exceeding: '',
        online: 100,
        valid: 100,
        exceeding: 0,

        //  典型异常复现率
        exceptionRecurrence: '',
        exceptionRecurrence: 0,
        // 异常类型据聚集度
        exceptionTypeAggregation: '',
      
        exceptionTypeAggregation: 0
      },
      status: {
        isHasData: false
      },
      // 查询按钮加载效果
      queryButton: false,

      // 风险值排名前十的站点
      top_10_sites_with_risk_values:[
        {name:'金山区金山新城JSC1-0401单元1-11-01地块项目09',
        riskValue:0.2
      }
    };
    ]
    }
  },
  setup() {
    const { height } = useWindowSize();
    return { height };
  
  watch:{

  },
  computed: {
    weight() {
      let singleOnline = ((100 - this.bill.online) / 100) * 0.1
      let singleValid = ((100 - this.bill.valid) / 100) * 0.2
      let singleExceeding = (this.bill.exceeding / 100) * 0.2
      let singleAggregation = this.bill.exceptionTypeAggregation * 0.2
      let singleRecurrence = this.bill.exceptionRecurrence * 0.3
      let allWeight = (
        singleOnline +
        singleValid +
        singleExceeding +
        singleAggregation +
        singleRecurrence
      ).toFixed(2)

      return allWeight
    }
  },
  mounted() {
    this.fetch();
    // 页面加载显示风险最高的站点
    // this.getRiskWeightName()
    
    this.fetch()
    // 计算风险排名清单
    this.getRiskRank()
  },
  methods: {
    /**
     * 计算异常类型聚集度 异常复现率
     * @param： 异常数据数组
     * @returns：
     */
    calRecur(exceptionArr) {
      // 典型异常复现率
      let exceptionTyprRecurRate = 0;
      // 量级突变
      let mutationCount = 0;
      // 超标临近
      let exceedingNearCount = 0;
      // 超标次数临界
      let exceedindCriticalDegree = 0;

      // 保存出现的不同异常类型
      let exception = []
      // 异常类型聚集度
      let exceptionTypeAggregation = 0
     
      exceptionArr.forEach(item => {
        // 异常复现率
        if (item.exceptionType == 4) {
          mutationCount++;
        } else if (item.exceptionType == 5) {
          exceedingNearCount++;
        } else if (item.exceptionType == 6) {
          exceedindCriticalDegree++;
        }

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

      let sum = 0;
      // 次数减1，该异常出现2次，算复现1次。出现3次，算复现2次...
      if (mutationCount > 1) {
        sum = sum + mutationCount - 1;
      }
      if (exceedingNearCount > 1) {
        sum = sum + exceedindCriticalDegree - 1;
      }
      if (exceedindCriticalDegree > 1) {
        sum = sum + exceedindCriticalDegree - 1;
      }
      console.log('sum:',sum);
      console.log('exception:',exception);
      console.log('其他',mutationCount,exceedindCriticalDegree,exceedindCriticalDegree);
      switch (sum) {
        case 0:
          exceptionTyprRecurRate = sum / 3;
          break;
        case 1:
          exceptionTyprRecurRate = sum / 3;
          break;
        case 2:
        case sum >= 3:
          exceptionTyprRecurRate = 1;
          break;
        default:
          return 'error';
      }

      exceptionTypeAggregation = exception.length / 8

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

      return obj
    // 查询站点统计信息
    querySiteStaticsInfo(row){
      this.form.name = row.siteName
      this.riskDetails()
    },
    /**
     * 计算日期相差几天
     * @param：
     * @createTime:开始时间，结束时间
     * @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));

    async getRiskWeightName() {
      this.screenLoading = true
        this.form.name = await rank.fetchData(this.form.beginTime, this.form.endTime);

      return dayjs(endDate).diff(startDate,'day') + 1;
        // 加载该风险清单
        this.fetch()
        this.screenLoading = false
    },
    /**
     * 从分析数据数组中找到最小和大值
     * @param：
     * @returns：
     */
    calBillData(arr) {
      let min = 65536;
      let max = -1;
      let avg = 0;
      let online = 0;
      let valid = 0;
      let exceeding = 0;

      let sumAvg = 0;
      let sumOnline = 0;
      let sumValid = 0;
      let sumExceeding = 0;
    giveMonth(val){
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.month = dayjs(val).format('YYYY-MM-DD');
      // 同时更新开始和结束时间 
      this.form.beginTime = dayjs(this.form.month).startOf().format('YYYY-MM-DD HH:mm:ss')
      this.form.endTime = dayjs(this.form.month).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      console.log(this.form.beginTime,this.form.endTime);

      // 计算选择的时间的相差的天数
      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) => {
        if (item.min < min) {
          min = item.min;
        }
        if (item.max > max) {
          max = item.max;
        }
        // 计算平均值，在线率，有效率，超标率
        sumAvg = sumAvg + item.dayAvg;
        sumOnline = sumOnline + Number(item.dayOnline.slice(0, -1));
        sumValid = sumValid + Number(item.dayValid.slice(0, -1));
        sumExceeding = sumExceeding + Number(item.dayExceeding.slice(0, -1));
      });
      // 计算均值
      avg = sumAvg / dayDiff;
      // console.log('sumavg:',sumAvg,dayDiff);
      online = sumOnline / dayDiff;
      valid = sumValid / dayDiff;
      exceeding = sumExceeding / dayDiff;
      obj['min'] = min.toFixed(3);
      obj['max'] = max.toFixed(3);

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

      return obj;
    },
     },

    /**
     * 将中国标准时间转为指定格式
@@ -228,8 +144,8 @@
     */
    giveTime(val) {
      //将中国标准时间转为指定格式(该组件返回的标准时间的格式，所以必须的加这个函数)
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss');
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
      this.form.beginTime = dayjs(val[0]).format('YYYY-MM-DD')
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD')
    },
    /**
     * 初始加载函数
@@ -237,97 +153,101 @@
     * @returns：
     */
    fetch() {
      // 计算风险排名清单,获取风险最高的站点名字
      this.getRiskRank()

      // 分析数据
      this.fetchData();
      this.fetchData()
      // 异常数据
      this.exceptiondataCount();
      this.exceptiondataCount()

      
    },
    riskDetails() {
      // 分析数据
      this.fetchData()
      // 异常数据
      this.exceptiondataCount()
    },

    // 点击展示按钮
    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 = {};
      let params = {}
      if (this.form.name) {
        params['siteName'] = this.form.name;
        params['siteName'] = this.form.name
      }
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime;
        params['beginTime'] = this.form.beginTime
      }
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime;
        params['endTime'] = this.form.endTime
      }
      this.loading = true;
      this.loading = true
      this.queryButton = true
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime,'day')
        .then((response) => {
          this.chartData = response.data.data;
          this.loading = false;
          this.chartData = response.data.data
          this.loading = false
          this.queryButton = false
          if (response.data.data.length == 0) {
            this.isNoData = true;
            return;
            this.isNoData = true
            return
          }
          // 移除空数据状态
          this.isNoData = false;
          this.setChart();
          this.isNoData = false
          this.setChart()

          let temp = this.calBillData(this.chartData);
          console.log('temp:', temp);
          this.bill.min = temp['min'];
          this.bill.max = temp['max'];
          let temp = index.calBillData(this.chartData, this.form.beginTime, this.form.endTime)
          this.bill.min = temp['min']
          this.bill.max = temp['max']

          this.bill.avg = temp['avg'];
          this.bill.online = temp['online'];
          this.bill.valid = temp['valid'];
          this.bill.exceeding = temp['exceeding'];
          this.bill.avg = temp['avg']
          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
        });
          this.end = this.chartData[this.chartData.length - 1].lst
        })
    },

    // 选择其他值类型时
    setChart() {
      if (this.chartData.length) {
        // x轴日期时间
        let dateList = [];
        let dateList = []
        //颗粒物平均浓度
        let dayAvg = [];
        let dataOnline = [];
        let dataValid = [];
        let dataExceed = [];
        let dayAvg = []
        let dataOnline = []
        let dataValid = []
        let dataExceed = []
        this.chartData.forEach((item) => {
          //x轴日期
          dateList.push(item.lst);
          dateList.push(item.lst)
          // 历史油烟浓度
          dayAvg.push(item.dayAvg);
          dataOnline.push(item.dayOnline.slice(0, -1));
          dataValid.push(item.dayValid.slice(0, -1));
          dataExceed.push(item.dayExceeding.slice(0, -1));
        });
          dayAvg.push(item.dayAvg)
          dataOnline.push(item.dayOnline.slice(0, -1))
          dataValid.push(item.dayValid.slice(0, -1))
          dataExceed.push(item.dayExceeding.slice(0, -1))
        })

        this.chartData1 = {
          x: dateList,
          y: dayAvg
        };
        }
        this.chartData2 = {
          x: dateList,
          y: dataOnline
        };
        }
        this.chartData3 = {
          x: dateList,
          y: dataValid
        };
        }
        this.chartData4 = {
          x: dateList,
          y: dataExceed
        };
        }
      }
    },

@@ -340,201 +260,271 @@
          endTime: this.form.endTime
        })
        .then((res) => {
          console.log('异常：', res.data.data);
          let obj = this.calRecur(res.data.data)
          let obj = index.calRecur(res.data.data)
          this.bill.exceptionRecurrence = obj['exceptionRecurrence']
          this.bill.exceptionTypeAggregation = obj['exceptionTypeAggregation']
        });
    }
  }
};
</script>
<template>
  <div class="search-container">
    <el-container>
      <el-main>
        
        <el-form :inline="true" :model="form">
       
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
          <el-form-item>
            <InputSearch
              :isNeedDefaultSite="1"
              @submit-value="(n) => (form.name = n)"
            ></InputSearch>
          </el-form-item>
        })
    },

          <el-form-item>
            <TimeSelectWithShortCuts
              @submit-time="giveTime"
            ></TimeSelectWithShortCuts>
          </el-form-item>
    
        
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>
       
        </el-form>
    // 点击风险排名按钮
    getRiskRank() {
      exceptionApi
        .analysisdataByType(this.form.month, 'month')
        .then((response) => {
          let staticsData = response.data.data

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

        <el-card
              shadow="never"
            >
        <el-row :gutter="20">

          <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
           
              <DustRadarChart :name="['数据有效率','典型异常复现率','异常类型聚集度','数据超标率','数据在线率']" :yData="[bill.valid,bill.exceptionRecurrence,bill.exceptionTypeAggregation,bill.exceeding,bill.online]" ></DustRadarChart>
           
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
            <el-card
              shadow="never"
            >
              <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="典型异常复现率：" label-width="auto">
                  {{ bill.exceptionRecurrence*100  }}%
                </el-form-item>
              </el-form>
                <!-- <div class="date-text">最大值:{{ 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-card>
          </el-col>

          <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
            <el-card
              shadow="never"
            
            >
              <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-card>


        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
          exceptionApi
            .exceptiondata1({
              siteName: this.form.name,
              beginTime: this.form.beginTime,
              endTime: this.form.endTime
            })
            .then((res) => {
              const riskValueSite = index.merge(
                staticsData,
                res.data.data,
                this.form.beginTime,
                this.form.endTime
              )
              // 获取排名前10的风险值站点
              
              this.top_10_sites_with_risk_values = this.getTopriskData(riskValueSite,10)
              this.form.name = this.top_10_sites_with_risk_values[0].siteName
              
              this.$nextTick(()=>{
              this.$refs.table.sort('riskValue','descending')
              console.log('表格数据为：',this.top_10_sites_with_risk_values);
            })

            })
            
        })
    },
/**
 * 降序排列，返回降序前num的元素
 * @param： 对象数组，返回的数量
 */
getTopriskData(arr,num) {
     // 按照riskValue降序排列
     arr.sort((a, b) => b.riskValue - a.riskValue); 
     // 获取前num个元素 
     return arr.slice(0,num); 
 } 

  }
}
</script>


<template>
  <el-form :inline="true" :model="form">
    <el-form-item class="form-item">
      <AreaAndmonitorType></AreaAndmonitorType>
    </el-form-item>
    <el-form-item class="form-item">
      <!-- <InputSearch isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" :siteName="form.name"></InputSearch> -->
      <InputSearch :site-name="form.name" isNeedDefaultSite="1" @submit-value="(n) => (form.name = n)" ></InputSearch>
    </el-form-item>

    <!-- <el-form-item>
      <DateSelectWithShortCuts @submit-time="giveTime"></DateSelectWithShortCuts>
    </el-form-item> -->

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

    
    <el-form-item>
      <ButtonClick
        content="风险评估"
        type="primary"
        :loading="queryButton"
        @do-search="fetch"
      ></ButtonClick>
    </el-form-item>
  </el-form>
  <div v-loading="screenLoading" class="wait-name">  
  <div class="chart-container" v-show="!isNoData && !screenLoading " >
    <div class="time-text">数据统计时段：{{ begin }} ~ {{ end }}</div>

    <el-row :gutter="10">
      <el-col :span="5">
        <div class="table-class">
        <el-table 
        ref="table"
        highlight-current-row="true"
        :data="top_10_sites_with_risk_values"
        :default-sort="{ prop: 'riskValue', order: 'descending' }"
        height="540">
          <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              fixed
              show-overflow-tooltip
            />
            <el-table-column
              prop="siteName"
              label="站点名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="riskValue"
              label="风险值"
              sortable
              width="70"
              show-overflow-tooltip
            />
            <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" text class="table-button" @click="querySiteStaticsInfo(row)"
              >风险详情</el-button
            >
              <template #default>
                <LineChart
                  title="日均值"
                  :chartData="chartData1"
                  yName="mg/m³"
                  seriesName="日均值"
                >
                </LineChart>
              </template>
            </el-card>
          </el-col>
          </template>
        </el-table-column>
        </el-table>
      </div>
      
      </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
             

      <el-col :span="12">
        <el-card shadow="never">
          <DustRadarChart
            :name="[
              '数据有效风险',
              '典型异常复现风险',
              '异常类型聚集风险',
              '数据超标风险',
              '数据在线风险'
            ]"
            :yData="[
              bill.valid,
              bill.exceptionRecurrence,
              bill.exceptionTypeAggregation,
              bill.exceeding,
              bill.online
            ]"
          ></DustRadarChart>
        </el-card>
      </el-col>

      <el-col :span="3">
        <el-card shadow="never" class="card-height">
          <template #header>
            <h1
              :class="{
                'weightColor-low': weight < 0.2,
                'weightColor-medium': weight >= 0.2 && weight < 0.6,
                'weightColor-heigh': weight >= 0.6
              }"
            >
              <template #default>
                <LineChart
                  title="日在线率"
                  :chartData="chartData2"
                  yName="%"
                  seriesName="日在线率"
                >
                </LineChart>
              </template>
            </el-card>
          </el-col>
              风险值(0~1)：{{ weight }}
            </h1>
          </template>
          <div class="risk-grade">
            <strong>风险等级：</strong>
            <span v-if="weight >= 0.6"> 高风险</span>
            <span v-else-if="weight >= 0.2 && weight < 0.6"> 中风险</span>
            <span v-else> 低风险</span>
          </div>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never"
            >
              <template #default>
                <LineChart
                  title="日有效率"
                  :chartData="chartData3"
                  yName="%"
                  seriesName="日有效率"
                >
                </LineChart>
              </template>
            </el-card>
          </el-col>
          <div class="risk-advice">
            <strong>管控建议：</strong>
            <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>
        </el-card>
      </el-col>

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never" >
              <template #default>
                <LineChart
                  title="日超标率"
                  :chartData="chartData4"
                  yName="%"
                  seriesName="日超标率"
                >
                </LineChart>
              </template>
            </el-card>
          </el-col>
        </el-row>
      <el-col :span="4">
        <el-card shadow="never" class="card-height">
          <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-main>
    </el-container>
    <el-row :gutter="20">
      <el-col :span="12"> 
        <el-card shadow="never" class="card-value">
          <LineChart title="日均值" :chartData="chartData1" yName="mg/m³" seriesName="日均值">
          </LineChart>
        </el-card>
      </el-col>
      
      <el-col :span="12"> 
        <el-card shadow="never" class="card-value">
          <LineChart title="日在线率" :chartData="chartData2" yName="%" seriesName="日在线率">
          </LineChart>
        </el-card>
        </el-col>




    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never" class="card-value">
          <LineChart title="日有效率" :chartData="chartData3" yName="%" seriesName="日有效率">
          </LineChart>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="never" class="card-value">
          <LineChart title="日超标率" :chartData="chartData4" yName="%" seriesName="日超标率">
          </LineChart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</div>
  <el-empty description="暂无数据" v-show="isNoData " :image-size="200" />
</template>

<style scoped>
.el-form {
  margin: 10px;
}
.form-item {
  margin-top:10px;
}
.chart-container {
  margin-left: 10px;
}
.time-text {
  letter-spacing: 2px;
}
@@ -543,17 +533,30 @@
  border-radius: 9px;
}
.chart-container {
  width: 100%;
  height: 600px;
  width: 98%;
  /* height: 600px; */
}
.card-value {
  /* min-width:900px; */
  /* padding:0px */
}
.card-height {
  height: 540px;
}
.el-header {
  background-color: #010408;
  color: #333;
  line-height: 60px;
}
.risk-advice {
  margin: 40px 0px;
}
.container {
  display: flex;
  margin-bottom: 10px;
}
.grade-instance {
  margin-top: 80px;
}
.block-color {
  width: 1em;
@@ -565,25 +568,51 @@
  background-color: red;
}
.medium {
  background-color: #FADC19;
  background-color: #fadc19;
}
.low {
  background-color: #9FDB1D;
  background-color: #9fdb1d;
}

.el-text {
  align-self: left;
}
.el-form-item {
margin-bottom: 20px;

  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-top: 10px;
}
:deep().el-table__header-wrapper {
  color: red;
}
/* .wait-name {
  width: 500px;
  height: 600px;
} */
.table-class {
  border: 1px solid blue;
  margin: 20px 0px 20px 0px;
}
.table-button {
  letter-spacing: 1px;
  text-decoration: underline;
}
</style>