扬尘Vue

zmc

2023-08-31 013ed9283200da41902835f9fd679df13299d436

 src/views/line_graph/DataRiskModel.vue

@@ -10,6 +10,11 @@

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


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

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

      form: {
        // 站点名称
@@ -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;
    },
@@ -278,6 +286,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
        });
    },

@@ -342,7 +353,9 @@
  <div class="search-container">
    <el-container>
      <el-main>
        
        <el-form :inline="true" :model="form">
       
          <el-form-item>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
@@ -352,39 +365,115 @@
              @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>

          <!-- <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>
            </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="典型异常复现率：" 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="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"
              :style="{ height: `calc(${height}px - 35vh - 250px)` }"
              
            >
              <template #default>
                <LineChart
                  title="日均值"
                  :chartData="chartData1"
                  yName="浓度"
                  yName="mg/m³"
                  seriesName="日均值"
                >
                </LineChart>
@@ -395,13 +484,13 @@
          <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="日在线率"
                  :chartData="chartData2"
                  yName="百分比"
                  yName="%"
                  seriesName="日在线率"
                >
                </LineChart>
@@ -411,12 +500,12 @@

          <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="日有效率"
                  :chartData="chartData3"
                  yName="百分比"
                  yName="%"
                  seriesName="日有效率"
                >
                </LineChart>
@@ -425,12 +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="chartData4"
                  yName="百分比"
                  yName="%"
                  seriesName="日超标率"
                >
                </LineChart>
@@ -439,57 +528,17 @@
          </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>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.time-text {
  letter-spacing: 2px;
}
.el-card {
  margin-top: 15px;
  border-radius: 9px;
@@ -503,4 +552,41 @@
  color: #333;
  line-height: 60px;
}
.container {
  display: flex;
  margin-bottom: 10px;
}
.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;
}
.el-row {
}
</style>