数据风险模型模块修改

riku

2023-08-29 71b1532d5a3609f3125e15fbe65e4b34bb6c4e8b

 src/views/line_graph/dayMonthAvgData.vue

@@ -1,17 +1,17 @@
<!-- 日均值 -->
<script>
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
import InputSearch from '../../sfc/InputSearch.vue'
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue'
import InputSearch from '../../sfc/InputSearch.vue';
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
import DustRadarChart from '../../sfc/DustRadarChart.vue';
// 异步组件
const LineChart = defineAsyncComponent(() =>
  import('../../sfc/LineChart.vue')
)
import exceptionApi from '@/api/exceptionApi.js';

import dayjs from 'dayjs'
// 异步组件
const LineChart = defineAsyncComponent(() => import('../../sfc/LineChart.vue'));

import dayjs from 'dayjs';
export default {
  components :{
  components: {
    LineChart,
    TimeSelectWithShortCuts,
    InputSearch,
@@ -20,12 +20,16 @@
  },
  data() {
    return {
      isNoData:false,
      loading:false,
      chartData: [],     //保存查询的结果
      isNoData: false,
      loading: false,
      chartData: [],
      chartData1: {}, //保存查询的结果
      chartData2: {},
      chartData3: {},
      chartData4: {},
      //devId:'',          //设备编号
      begin:'2023-05-01',         //开始时间
      end:'2023-05-15',           //结束时间
      begin: '2023-05-01', //开始时间
      end: '2023-05-15', //结束时间

      form: {
        // 站点名称
@@ -38,15 +42,14 @@
        endTime: ''
      },
      // 折线图配置项
      option:{},
      option: {},

      // 复选框组
      radio:1
    }
      radio: 1
    };
  },
  mounted(){
  
    this.fetchData()
  mounted() {
    this.fetch();
  },
  methods: {
    giveTime(val) {
@@ -55,209 +58,170 @@
      this.form.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss');
    },

    fetch() {
      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 = {}
        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;
      }
      if(this.form.beginTime){
        params['beginTime'] = this.form.beginTime
      if (this.form.beginTime) {
        params['beginTime'] = this.form.beginTime;
      }
      if(this.form.endTime){
        params['endTime'] = this.form.endTime
      if (this.form.endTime) {
        params['endTime'] = this.form.endTime;
      }
      this.loading=true
      this.$http.get('/dust/analysisdata',{params:params})
        .then(response => {
          this.chartData = response.data.data
          console.log('分析数据为：',this.chartData);
          this.loading=false
          if(response.data.data.length==0){
          alert('该时段无数据')
          this.isNoData = true
          return
        }
        // 移除空数据状态
        this.isNoData = false
          this.drawChart()
        })
    },
    // 折线图配置项
    drawChart() {
     if(this.chartData.length!=0){
      let xdate=[]
      let ydata=[]
      this.chartData.map(item=>{
        xdate.push(item['lst'])
        ydata.push(item['dayAvg'])
      })
      console.log('配置项为：',xdate,ydata);
      this.option ={
        xAxis: {
            name: '时间',
            data: xdate
          },
          yAxis: {
              type: 'value',
              axisLabel: {
              show: true,
              interval: 'auto'
            },
            name: '颗粒物浓度'
          },
          series: [
            {
              name: 'fume',
              type: 'line',
              data: ydata
            }
          ]
      }
     }
      this.loading = true;
      exceptionApi
        .analysisdata(this.form.name, this.form.beginTime, this.form.endTime)
        .then((response) => {
          this.chartData = response.data.data;
          this.loading = false;
          if (response.data.data.length == 0) {
            this.isNoData = true;
            return;
          }
          // 移除空数据状态
          this.isNoData = false;
          this.setChart();
        });
    },

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

          yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto'
          },
          name: 'mg/m³'
        },
          series: [
            {
              name: '颗粒物浓度',
              type: 'line',
              data: dayAvg
            }
          ]
        }
        this.chartData1 = {
          x: dateList,
          y: dayAvg
        };
        this.chartData2 = {
          x: dateList,
          y: dataOnline
        };
        this.chartData3 = {
          x: dateList,
          y: dataValid
        };
        this.chartData4 = {
          x: dateList,
          y: dataExceed
        };
      }
      else if (this.radio == 2) {
         // x轴日期时间
      let dateList = [];
       // 历史风机电
       let dataOnline = [];
       let dataValid = [];
       let dataExceed = [];
       this.chartData.forEach(item => {
          //x轴日期
          dateList.push(item.lst);
           // 历史风机电
          dataOnline.push(item.dayOnline.slice(0,-1));
          dataValid.push(item.dayValid.slice(0,-1));
          dataExceed.push(item.dayExceeding.slice(0,-1));
        })
        this.option={}
        this.option = {
          legend: {
           data: ['日数据在线率','日数据有效率','日数据超标率']
          },
          xAxis: {
          data: dateList,
          name: '时间'
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto'
          },
          name: '%'
        },
        series: [
          {
            name: '日数据在线率',
            type: 'line',
            data: dataOnline
          },
          {
            name: '日数据有效率',
            type: 'line',
            data: dataValid
          },
          {
            name: '日数据超标率',
            type: 'line',
            data: dataExceed
          },
    },

        ]
        }
      }
    // 企业异常详情
    exceptiondataCount() {
      exceptionApi
        .exceptiondata1({
          siteName: this.form.name,
          beginTime: this.form.beginTime,
          endTime: this.form.endTime
        })
        .then((res) => {
          // 所有异常
        });
    }
  }
  }
}
};
</script>
<template>
  <div class="search-container">
    <el-container>
      <el-main>

        <el-form :inline="true" :model="form" class="demo-form-inline">
        <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>
            <AreaAndmonitorType></AreaAndmonitorType>
          </el-form-item>
          <el-form-item>
            <TimeSelectWithShortCuts @submit-time="giveTime"></TimeSelectWithShortCuts>
            <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="fetchData">展示折线图</el-button>
            <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>
          <!-- <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>
        <el-card> 异常数量统计 </el-card>
        <el-card> 超标复现率 </el-card>
        <el-card>
          <el-empty v-show="isNoData" :image-size="200" />
          <LineChart :chartData="option"> </LineChart>
          <LineChart
            title="日均值"
            :chartData="chartData1"
            yName="浓度"
            seriesName="日均值"
          >
          </LineChart>
          <LineChart
            title="日在线率"
            :chartData="chartData2"
            yName="百分比"
            seriesName="日在线率"
          >
          </LineChart>
          <LineChart
            title="日有效率"
            :chartData="chartData3"
            yName="百分比"
            seriesName="日有效率"
          >
          </LineChart>
          <LineChart
            title="日超标率"
            :chartData="chartData4"
            yName="百分比"
            seriesName="日超标率"
          >
          </LineChart>
          <DustRadarChart></DustRadarChart>
        </el-card>
        
        
      </el-main>
    </el-container>
  </div>
@@ -277,5 +241,4 @@
  color: #333;
  line-height: 60px;
}

</style>