数据风险模型模块修改

riku

2023-08-29 71b1532d5a3609f3125e15fbe65e4b34bb6c4e8b

数据风险模型模块修改

 components.d.ts

@@ -12,27 +12,16 @@
    AppLayout: typeof import('./src/components/layout/AppLayout.vue')['default']
    ElAside: typeof import('element-plus/es')['ElAside']
    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
    ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
    ElAvatar: typeof import('element-plus/es')['ElAvatar']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCascader: typeof import('element-plus/es')['ElCascader']
    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
    ElCion: typeof import('element-plus/es')['ElCion']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElContainer: typeof import('element-plus/es')['ElContainer']
    ElCountdown: typeof import('element-plus/es')['ElCountdown']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDivided: typeof import('element-plus/es')['ElDivided']
    ElDivider: typeof import('element-plus/es')['ElDivider']
    ElDivItem: typeof import('element-plus/es')['ElDivItem']
    ElDrawer: typeof import('element-plus/es')['ElDrawer']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -46,34 +35,19 @@
    ElMain: typeof import('element-plus/es')['ElMain']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElPanel: typeof import('element-plus/es')['ElPanel']
    ElProgress: typeof import('element-plus/es')['ElProgress']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSpace: typeof import('element-plus/es')['ElSpace']
    ElStatistic: typeof import('element-plus/es')['ElStatistic']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElSubMenuItem: typeof import('element-plus/es')['ElSubMenuItem']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColum: typeof import('element-plus/es')['ElTableColum']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTableColumns: typeof import('element-plus/es')['ElTableColumns']
    ElTableV2: typeof import('element-plus/es')['ElTableV2']
    ElTag: typeof import('element-plus/es')['ElTag']
    ElText: typeof import('element-plus/es')['ElText']
    ElTimeline: typeof import('element-plus/es')['ElTimeline']
    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
    ElTon: typeof import('element-plus/es')['ElTon']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
@@ -82,29 +56,13 @@
    IEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
    IEpBell: typeof import('~icons/ep/bell')['default']
    IEpDataLine: typeof import('~icons/ep/data-line')['default']
    IEpDownload: typeof import('~icons/ep/download')['default']
    IEpExpand: typeof import('~icons/ep/expand')['default']
    IEpFold: typeof import('~icons/ep/fold')['default']
    IEpGrid: typeof import('~icons/ep/grid')['default']
    IEpHistogram: typeof import('~icons/ep/histogram')['default']
    IEpInfoFilled: typeof import('~icons/ep/info-filled')['default']
    IEpList: typeof import('~icons/ep/list')['default']
    IEpLock: typeof import('~icons/ep/lock')['default']
    IEpMonitor: typeof import('~icons/ep/monitor')['default']
    IEpNotebook: typeof import('~icons/ep/notebook')['default']
    IEpSearch: typeof import('~icons/ep/search')['default']
    IEpSeting: typeof import('~icons/ep/seting')['default']
    IEpSetting: typeof import('~icons/ep/setting')['default']
    IEpShop: typeof import('~icons/ep/shop')['default']
    IEpStopwatch: typeof import('~icons/ep/stopwatch')['default']
    IEpSunrise: typeof import('~icons/ep/sunrise')['default']
    IEpSunset: typeof import('~icons/ep/sunset')['default']
    IEpTrendCharts: typeof import('~icons/ep/trend-charts')['default']
    IEpUser: typeof import('~icons/ep/user')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
  }
  export interface ComponentCustomProperties {
    vLoading: typeof import('element-plus/es')['ElLoadingDirective']

 src/App.vue

@@ -1,13 +1,12 @@
<script setup lang="ts">
import {  RouterView } from 'vue-router'
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';


const locale = ref(zhCn);
</script>

<template>
  <el-config-provider :locale="zhCn">
      <RouterView />
  <el-config-provider :locale="locale">
      <router-view />
</el-config-provider>
</template>


 src/api/config.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
import { ElMessage } from 'element-plus';

/**
 * è®¾ç½®ç½‘路请求监听
 */
function setInterceptors(...instance) {
  instance.forEach((i) => {
    // æ·»åŠ è¯·æ±‚拦截器
    i.interceptors.request.use(
      function (config) {
        // åœ¨å‘送请求之前, æ·»åŠ è¯·æ±‚头
        // config.headers = addHeaders(config.headers);

        console.log('==>请求开始');
        console.log(`${config.baseURL}${config.url}`);
        if (config.data) {
          console.log('==>请求数据', config.data);
        }
        return config;
      },
      function (error) {
        // å¯¹è¯·æ±‚错误做些什么
        console.log('==>请求开始');
        console.log(error);
        ElMessage({
          message: error,
          type: 'error'
        });
        return Promise.reject(error);
      }
    );

    // æ·»åŠ å“åº”拦截器
    i.interceptors.response.use(
      function (response) {
        // 2xx èŒƒå›´å†…的状态码都会触发该函数。
        // å¯¹å“åº”数据做点什么
        console.log(response);
        console.log('==>请求结束');
        if (response.status == 200) {
          if (
            response.data.success != undefined &&
            response.data.success != null
          ) {
            if (response.data.success == true) {
              // if (response.data.message && response.data.message != '') {
              //   ElMessage({
              //     message: response.data.message,
              //     type: 'success'
              //   }); 
              // }
              return response.data.data;
            } else {
              ElMessage({
                message: response.data.message,
                type: 'error'
              });
              return Promise.reject(response.data.message);
            }
          } else {
            return response;
          }
        } else {
          return Promise.reject(response);
        }
      },
      function (error) {
        // è¶…出 2xx èŒƒå›´çš„状态码都会触发该函数。
        // å¯¹å“åº”错误做点什么
        console.log(error);
        console.log('==>请求结束');
        ElMessage({
          message: error,
          type: 'error'
        });
        return Promise.reject(error);
      }
    );
  });
}

export { setInterceptors };

 src/api/exceptionApi.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,40 @@
import { $http } from './index';

export default {
  /**
   *
   * @param {*} siteName
   * @param {*} beginTime
   * @param {*} endTime
   * @returns
   */
  analysisdata(siteName, beginTime, endTime) {
    return $http.get('/dust/analysisdata', {
      params: {
        siteName: siteName,
        beginTime: beginTime,
        endTime: endTime
      }
    });
  },

  /**
   *
   * @param {*} siteName
   * @param {*} exceptionType
   * @param {*} beginTime
   * @param {*} endTime
   * @returns
   */
  exceptiondata1({ siteName, exceptionType, beginTime, endTime }) {
    const _params = {
      siteName: siteName,
      beginTime: beginTime,
      endTime: endTime
    };
    if (exceptionType) {
      _params.exceptionType = exceptionType;
    }
    return $http.get('/dust/exceptiondata1', { params: _params });
  }
};

 src/api/historyApi.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
import { $http } from './index';

export default {
  
};

 src/api/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,16 @@
import axios from 'axios';
import { setInterceptors } from './config';

// const url = 'http://47.100.191.150:9031/';
const url = 'http://192.168.1.4:8081/';

//飞羽监管
const $http = axios.create({
  baseURL: url,
  timeout: 10000
});

//添加拦截器
setInterceptors($http);

export { $http };

 src/components/layout/AppLayout.vue

@@ -39,7 +39,7 @@
.el-main {
  background-color: #f4f4f5;
  padding: 0;
  overflow-y: hidden;
  // overflow-y: hidden;
}

</style>

 src/main.ts

@@ -14,7 +14,7 @@

const app = createApp(App)

axios.defaults.baseURL = 'http://localhost:8081'
axios.defaults.baseURL = 'http://192.168.1.4:8081'
app.config.globalProperties.$http = axios

app.use(createPinia())

 src/sfc/DustExceptionText.vue

@@ -4,12 +4,13 @@
将该站点某时段的异常数据返回给父组件，父组件再返回给祖先组件
-->
<script>
import exceptionApi from '@/api/exceptionApi.js';
export default {
  props: {
    siteName:String,
    exceptionType:String,
    beginTime:String,
    endTime:String,
    siteName: String,
    exceptionType: String,
    beginTime: String,
    endTime: String
  },
  emits: ['submitExceptionData'],
  data() {
@@ -22,21 +23,16 @@
  methods: {
    requestExceptionData() {
      // ä¸åˆ†é¡µ
      this.$http
        .get('/dust/exceptiondata1', {
          params: {
            siteName: this.siteName,
            exceptionType: this.exceptionType,
            beginTime: this.beginTime,
            endTime: this.endTime
          }
        })
      exceptionApi
        .exceptiondata1(
          this.siteName,
          this.exceptionType,
          this.beginTime,
          this.endTime
        )
        .then((result) => {
          //将返回的结果传递给父组件
          this.$emit(
            'submitExceptionData',
            result.data.data
          );
          this.$emit('submitExceptionData', result.data.data);
        });
    }
  }

 src/sfc/LineChart.vue

@@ -2,108 +2,126 @@
子组件有基本的样式 
使用同一个图形实例，接受父组件传入的折线图option
 -->
 <template>
    <div ref="chart" class="line-chart"></div>
<template>
  <div ref="chart" class="line-chart"></div>
</template>
  

<script>
  import * as echarts from 'echarts';
  
  export default {
    props: {
      chartData: {
        type: Object,
        required: true,
        }
    },
    data() {
      return {
        chart: null
      };
    },
    mounted() {
      this.renderChart();
    //   this.chart.setOption(this.chartData)
      window.addEventListener('resize',this.resizeChart)
    },
    watch: {
      chartData() {
        // option变化时，图形再次初始化
      // this.renderChart();
      this.chart.dispose();
      this.renderChart();
      this.chart.setOption(this.chartData)
      }
      
    },
    beforeUnmount() {
      if (this.chart) {
        this.chart.dispose();
      }
    },
    methods: {
      renderChart() {
        // åˆ›å»ºecharts实例
        this.chart = echarts.init(this.$refs.chart);
  
        // å®šä¹‰å›¾è¡¨çš„配置项和数据
        const option = {
          title: {
            // text: '异步数据加载示例'
          },
          tooltip: {},
  
          toolbox: {
            // å·¥å…·æ 
            feature: {
              dataZoom: {
                // åŒºåŸŸç¼©æ”¾
                yAxisIndex: 'none'
              },
           
              // ä¿å­˜ä¸ºå›¾ç‰‡
              saveAsImage: {}
            }
          },
          xAxis: {
            name: '时间',
            data: []
          },
          yAxis: {
              type: 'value',
              axisLabel: {
              show: true,
              interval: 'auto'
            },
            name: '百分比'
          },
          series: [
            {
              name: 'fume',
              type: 'line',
              data: []
            }
          ]
import * as _echarts from 'echarts';

export default {
  props: {
    chartData: {
      type: Object,
      required: true,
      default: () => {
        return {
          x: [],
          y: []
        };
  
        // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表
        this.chart.setOption(option, true);
      },
  
      // è·Ÿé¡µé¢å“åº”式变化
      resizeChart(){
        this.chart.resize()
      }
    },
    title: {
      type: String
    },
    xName: {
      type: String,
      default: '时间'
    },
    yName: {
      type: String,
      default: '百分比'
    },
    seriesName: {
      type: String,
      default: '系列一'
    }
  };
  </script>
  
  <style>
  .line-chart {
      width: 100%;
      height: 500px;
      margin-top: 25px;
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.intiChart();
    //   this.chart.setOption(this.chartData)
    window.addEventListener('resize', this.resizeChart);
  },
  watch: {
    chartData() {
      // option变化时，图形再次初始化
      this.setOption();
    }
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    intiChart() {
      // åˆ›å»ºecharts实例
      this.chart = _echarts.init(this.$refs.chart);

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表
      // this.chart.setOption(option, true);
    },

    setOption() {
      // å®šä¹‰å›¾è¡¨çš„配置项和数据
      const option = {
        title: {
          text: this.title
        },
        tooltip: {},

        toolbox: {
          // å·¥å…·æ 
          feature: {
            dataZoom: {
              // åŒºåŸŸç¼©æ”¾
              yAxisIndex: 'none'
            },

            // ä¿å­˜ä¸ºå›¾ç‰‡
            saveAsImage: {}
          }
        },
        xAxis: {
          name: this.xName,
          data: this.chartData.x
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            interval: 'auto'
          },
          name: this.yName
        },
        series: [
          {
            name: this.seriesName,
            type: 'line',
            data: this.chartData.y
          }
        ]
      };
      this.chart.setOption(option);
    },

    // è·Ÿé¡µé¢å“åº”式变化
    resizeChart() {
      this.chart.resize();
    }
  }
  
  </style>
  
};
</script>

<style>
.line-chart {
  width: 100%;
  height: 500px;
  margin-top: 25px;
}
</style>

 src/views/line_graph/components/Compont1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
<template>
  <div>HomePage</div>
</template>

<script>
// å¼‚常复现率
export default {
  
};
</script>

 src/views/line_graph/components/Compont2.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
<template>
  <el-radio-group v-model="radio" @change="setChart">
    <!-- å¼‚常类型 -->
  </el-radio-group>
  <el-table></el-table>
</template>

<script>
// åŒæ—¶æ®µåŒç±»å¼‚常复现情况
export default {};
</script>

 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>