<!-- 日均值 -->
|
<script>
|
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue';
|
import InputSearch from '../../sfc/InputSearch.vue';
|
import AreaAndmonitorType from '../../sfc/AreaAndmonitorType.vue';
|
import DustRadarChart from '../../sfc/DustRadarChart.vue';
|
import exceptionApi from '@/api/exceptionApi.js';
|
|
// 异步组件
|
const LineChart = defineAsyncComponent(() => import('../../sfc/LineChart.vue'));
|
|
import dayjs from 'dayjs';
|
export default {
|
components: {
|
LineChart,
|
TimeSelectWithShortCuts,
|
InputSearch,
|
AreaAndmonitorType,
|
DustRadarChart
|
},
|
data() {
|
return {
|
isNoData: false,
|
loading: false,
|
chartData: [],
|
chartData1: {}, //保存查询的结果
|
chartData2: {},
|
chartData3: {},
|
chartData4: {},
|
//devId:'', //设备编号
|
begin: '2023-05-01', //开始时间
|
end: '2023-05-15', //结束时间
|
|
form: {
|
// 站点名称
|
name: '',
|
// 设备编号
|
number: '',
|
// 开始时间
|
beginTime: '',
|
// 结束时间
|
endTime: ''
|
},
|
// 折线图配置项
|
option: {},
|
|
// 复选框组
|
radio: 1
|
};
|
},
|
mounted() {
|
this.fetch();
|
},
|
methods: {
|
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');
|
},
|
|
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 = {};
|
if (this.form.name) {
|
params['siteName'] = this.form.name;
|
}
|
if (this.form.beginTime) {
|
params['beginTime'] = this.form.beginTime;
|
}
|
if (this.form.endTime) {
|
params['endTime'] = this.form.endTime;
|
}
|
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) {
|
// x轴日期时间
|
let dateList = [];
|
//颗粒物平均浓度
|
let dayAvg = [];
|
let dataOnline = [];
|
let dataValid = [];
|
let dataExceed = [];
|
this.chartData.forEach((item) => {
|
//x轴日期
|
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));
|
});
|
|
this.chartData1 = {
|
x: dateList,
|
y: dayAvg
|
};
|
this.chartData2 = {
|
x: dateList,
|
y: dataOnline
|
};
|
this.chartData3 = {
|
x: dateList,
|
y: dataValid
|
};
|
this.chartData4 = {
|
x: dateList,
|
y: 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">
|
<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>
|
|
<!-- <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
|
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>
|
</template>
|
|
<style scoped>
|
.el-card {
|
margin-top: 40px;
|
border-radius: 9px;
|
}
|
.chart-container {
|
width: 100%;
|
height: 600px;
|
}
|
.el-header {
|
background-color: #010408;
|
color: #333;
|
line-height: 60px;
|
}
|
</style>
|
