目录
1 AirC首页
1.1 需求分析
- 查看网格及切换网格；
- 查看描述信息
- 查看空气质量参数
- 查看气象参数
- 查看监控设备在所有监控网点中的排名；
- 查看站点视频，点击可以播放视频；
- 查看历史记录，有变化趋势图，同时也可以导出保存。
1.2 原型设计
1.3 结果展示
- 1.查询某设备实时气象参数和空气质量参数
用户点击下拉选框选择希望查询的设备序列号，选好之后点击查询按钮，前端根据用户选择的序列号向后端发送get请求，并将获取的response中的相应值（PM2.5、PM10、SO2、CO2、NO2、O3、温度、湿度、风速、风向、光照、气压）赋值给全局变量，并更新页面显示的值，弹出获取气象参数成功的提示。
- 2.清空设备序列号输入框
前端向后端发送get请求，五请求参数。获取空气质量参数成功后，在右下角展示出PM2.5，PM10，SO2，CO，NO2这5种气体含量的变化趋势，将鼠标移至某一天的位置处，还能显示这一天这5种气体的具体含量，同时还支持导出图表下载到本地。
- 3.设备AQI排名信息
前端向后端发送get请求，无请求参数。获取排名数据成功后，在右上角的图表展示出设备排名、设备序列号、AQI以及污染详情。
- 4.近7天的空气质量参数
前端向后端发送get请求，五请求参数。获取空气质量参数成功后，在右下角展示出PM2.5，PM10，SO2，CO，NO2这5种气体含量的变化趋势，将鼠标移至某一天的位置处，还能显示这一天这5种气体的具体含量，同时还支持导出图表下载到本地。
1.4 优化思路
- 可供查询的设备应该要扩充范围到所有设备；
- 在排名表格中，增加滚动条，使用户能够下滑看到更多排名信息；
- 空气质量参数为静态数据，可以通过数据格式转换获取对应的数据值；
- 用户可自行选择数据的时间时间间隔，每小时，每天，每周，每月，每小时之类。
1.5 源代码
<template>
<div id="Index">
<!-- 占位 -->
<div>
<!-- 搜索相关开始 -->
<el-select v-model="value" placeholder="请选择设备序列号" style="width:300px;height:50px;border:1px solid #fff;margin:15px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- <el-button
type="primary"
style="background-color:#BFDFAF; border-color:#BFDFAF;"
@click='Search' icon="el-icon-search">查 询</el-button> -->
<el-button
type="primary"
style="background-color:#BFDFAF; border-color:#BFDFAF;"
@click='Search' icon="el-icon-search">查 询</el-button>
<el-button @click="clearText" icon="el-icon-delete">清 空</el-button>
<!-- 搜索相关结束 -->
<div style="width:100%;height:50px;text-align:center;border:1px solid #fff;font-size:15">
<h3>该设备实时气象参数和空气质量参数如下</h3>
</div>
<br>
<div style="width:100%;height:30px;border:1px solid #fff;margin:0 auto;">
<span slot="title">
PM2.5:{
{PM25}}
PM10:{
{PM10}}
SO2:{
{SO2}}
</span>
</div>
<div style="width:100%;height:30px;border:1px solid #fff;margin:0 auto;">
<span slot="title">
CO2:{
{CO2}}
NO2:{
{NO2}}
O3:{
{O3}}
</span>
</div>
</div>
<div>
<el-table
title="监控设备排名"
:data="tableData"
style="width: 100%;height:100%"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}">
<el-table-column
prop="rank"
label="排名"
width="50">
</el-table-column>
<el-table-column
prop="serialnum"
label="设备序列号"
width="150">
</el-table-column>
<el-table-column
prop="AQI"
label="AQI"
width="200">
</el-table-column>
<el-table-column
prop="desc"
label="详情"
width="200">
</el-table-column>
</el-table>
</div>
<!-- <div id='echart3'></div> -->
<div>
<div id='temperature' style="height:30%;float:left;border:1px solid #fff;margin:5px auto">
<img src="../assets/温度计.png" alt="" align="center">
<span slot="title">{
{Temperature}}</span>
</div>
<div id='windspeed' style="height:30%;float:right;border:1px solid #fff;margin:5px auto">
<img src="../assets/风.png" alt="" align="center">
<span slot="title">{
{WindSpeed}}</span>
</div>
<div id='humidity' style="height:30%;float:left;border:1px solid #fff;margin:5px auto">
<img src="../assets/水滴.png" alt="" align="center">
<span slot="title">{
{Humidity}}</span>
</div>
<div id='winddirection' style="height:30%;float:right;border:1px solid #fff;margin:5px auto">
<img src="../assets/风向标.png" alt="" align="center">
<span slot="title">{
{WindDirection}}</span>
</div>
<div id='light' style="height:30%;float:left;border:1px solid #fff;margin:5px auto">
<img src="../assets/太阳.png" alt="" align="center">
<span slot="title">{
{Light}}</span>
</div>
<div id='airpressure' style="height:30%;float:right;border:1px solid #fff;margin:5px auto">
<img src="../assets/压力.png" alt="" align="center">
<span slot="title">{
{AirPressure}}</span>
</div>
</div>
<div id='echart4'></div>
</div>
</template>
<script type="text/javascript">
var echarts = require('echarts');
import china from 'echarts/map/js/china.js';
// 哪里需要请求数据 就在哪里导入
import axios from '@/http/axios.js';
export default{
data(){
return{
//show: false
tableData: [],
Temperature:'',
Humidity:'',
WindSpeed:'',
WindDirection:'',
Light:'',
AirPressure:'',
AirIndex:[],
PM25:'',
PM10:'',
SO2:'',
CO2:'',
NO2:'',
O3:'',
options: [{
value: 'ASN11000010',
label: 'ASN11000010'
}, {
value: 'ASN11000011',
label: 'ASN11000011'
}, {
value: 'ASN11000012',
label: 'ASN11000012'
}, {
value: 'ASN11000013',
label: 'ASN11000013'
}, {
value: 'ASN11000014',
label: 'ASN11000014'
}, {
value: 'ASN11000015',
label: 'ASN11000015'
}],
value: 'ASN11000010'
}
},
created(){
this.GetAllData();
},
mounted(){
this.drawEchart4();
},
methods:{
Search(){
let url2='/nowdevicedata/'+this.value+'/get_single';
axios.get(url2)
.then((response)=>{
console.log(response);
this.Temperature='温度：'+response.data.data[0]['Temperature']+'℃';
this.Humidity='湿度：'+response.data.data[0]['Humidity']+'%';
this.WindSpeed='风速：'+response.data.data[0]['WindSpeed']+'级';
this.WindDirection='风向：'+this.transfer2(response.data.data[0]['WindDirection']);
//transfer2(response.data.data[0]['WindDirection']);
this.Light='光照：'+response.data.data[0]['Light']+'lx';
this.AirPressure='气压：'+response.data.data[0]['AirPressure']+'Pa';
this.PM25=response.data.data[0]['PM25'];
this.PM10=response.data.data[0]['PM10'];
this.SO2=response.data.data[0]['SO2'];
this.CO2=response.data.data[0]['CO2'];
this.NO2=response.data.data[0]['NO2'];
this.O3=response.data.data[0]['O3'];
console.log("气象参数:",
[this.Temperature,this.Humidity,this.WindSpeed,this.WindDirection,this.Light,this.AirPressure]);
this.$notify.success({
title: '成功',
message: '获取气象参数成功'
});
}).catch((error)=>{
//错误提醒
this.$notify.error({
title: '失败',
message: '获取气象参数失败'
});
})
},
clearText(){
this.value='';
this.GetAllData();
},
GetAllData(){
this.Search();
let url1='/alldevicedata/AQI';
// 第二个参数 请求的参数
axios.get(url1)
.then((response)=>{
// 后台传来什么样的值
console.log(response);
this.tableData=response.data.data;
this.$notify.success({
title: '成功',
message: '获取排名数据成功'
});
}).catch((error)=>{
//错误提醒
this.$notify.error({
title: '失败',
message: '获取排名数据失败'
});
})
let url3='/alldevicedata/Avg';
axios.get(url3)
.then((response)=>{
console.log(response);
/*this.tableData=response.data.data.results;
this.total=response.data.data.count;
//map 数组里所有值进行统一操作 item 子的数组中单个值本身
最低0.47元/天 解锁文章
扫一扫
734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
