扬尘vue

zmc

2023-09-04 34257f504330191b1a698eb48b52217095db47fe

 src/views/line_graph/DataRiskModel.vue

@@ -1,14 +1,19 @@
<!-- 日均值 -->
<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'


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

import dayjs from 'dayjs';
export default {
@@ -153,11 +158,13 @@
     * @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;
      // 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;
    },
    /**
     * 从分析数据数组中找到最小和大值
@@ -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;
    },
@@ -345,89 +353,117 @@
  <div class="search-container">
    <el-container>
      <el-main>
        <el-form :inline="true" :model="form">
        
        <el-form :inline="true" :model="form" >
       
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </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"
            ></TimeSelectWithShortCuts>
          </el-form-item>

    
        
          <el-form-item>
            <el-button type="primary" @click="fetch">展示折线图</el-button>
          </el-form-item>
       
        </el-form>

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

        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <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>
            权重：{{ ((bill.online*0.1+bill.valid*0.2+bill.exceeding*0.2+bill.exceptionTypeAggregation*0.2+bill.exceptionRecurrence*0.3)*0.01).toFixed(2) }} 
            </el-card>


          </el-col>

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

          <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="4">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
              
            style="width:200px; min-width: 200px;"
            >
              <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="6" :xl="6">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
            >
              <template #header>风险等级</template>
              <template #header>
                <span class="title-16">风险等级</span>
              </template>
              <template #default>
                <el-space direction="vertical" :size="15">
                <!-- <el-space direction="vertical" :size="15" > -->
                  <div class="container">
                    <div class="block heigh"></div> <div>高风险(≥0.6)</div>
                    <div class="block-color heigh"></div> <div>高风险(≥0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block medium" ></div> <div>中风险(0.2~0.6)</div>
                    <div class="block-color medium" ></div> <div>中风险(0.2~0.6)</div>
                  </div>
                  <div class="container">
                    <div class="block low"></div><div>低风险(＜0.2)</div>
                    <div class="block-color low"></div><div>低风险(＜0.2)</div>
                  </div>
                  
                  
                  
                </el-space>
                <!-- </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"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
              
            >
              <template #default>
                <LineChart
@@ -444,7 +480,7 @@
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card
              shadow="never"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
             
            >
              <template #default>
                <LineChart
@@ -460,7 +496,7 @@

          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
            <el-card shadow="never"
            :style="{ height: `calc(${height}px - 35vh - 250px)` }">
            >
              <template #default>
                <LineChart
                  title="日有效率"
@@ -474,7 +510,7 @@
          </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="日超标率"
@@ -496,6 +532,9 @@
</template>

<style scoped>
.time-text {
  letter-spacing: 2px;
}
.el-card {
  margin-top: 15px;
  border-radius: 9px;
@@ -511,12 +550,13 @@
}
.container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.block {
.block-color {
  width: 1em;
  height: 1em;
  margin-right: 10px;
  margin-top: 3px;
}
.heigh {
  background-color: red;
@@ -531,4 +571,18 @@
.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;
}
.el-row {
}
</style>