new
parent
07eca62897
commit
b4cf2d5312
|
|
@ -459,4 +459,31 @@ export function testBank(bank){
|
||||||
export function testPhone(phone){
|
export function testPhone(phone){
|
||||||
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
|
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
|
||||||
return reg.test(phone)
|
return reg.test(phone)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取近一周的日期范围
|
||||||
|
export function getLastWeekRange() {
|
||||||
|
// 获取当前日期
|
||||||
|
let currentDate = new Date();
|
||||||
|
let lastWeekStartDate = new Date(currentDate);
|
||||||
|
lastWeekStartDate.setDate(currentDate.getDate() - 7);
|
||||||
|
let lastWeekEndDate = new Date(currentDate);
|
||||||
|
lastWeekEndDate.setDate(currentDate.getDate() - 1);
|
||||||
|
return {
|
||||||
|
startDate: lastWeekStartDate,
|
||||||
|
endDate: lastWeekEndDate,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取近一月的日期范围
|
||||||
|
export function getLastMonthRange() {
|
||||||
|
let currentDate = new Date();
|
||||||
|
let lastMonthStartDate = new Date(currentDate);
|
||||||
|
lastMonthStartDate.setMonth(currentDate.getMonth() - 1);
|
||||||
|
let lastMonthEndDate = new Date(currentDate);
|
||||||
|
lastMonthEndDate.setDate(currentDate.getDate() - 1);
|
||||||
|
return {
|
||||||
|
startDate: lastMonthStartDate,
|
||||||
|
endDate: lastMonthEndDate,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -71,6 +71,10 @@ const cfu = {
|
||||||
return series[index].name+'：'+series[index].data+'元'
|
return series[index].name+'：'+series[index].data+'元'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"windDirection":function(val, index, series, opts){
|
||||||
|
let catenames = ['北风','东北风','东风','东南风','南风','西南风','西风','西北风'];
|
||||||
|
return catenames[val]
|
||||||
|
},
|
||||||
},
|
},
|
||||||
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
|
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
|
||||||
"demotype":{
|
"demotype":{
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,195 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="meteorological-page">
|
<view class="meteorological-page">
|
||||||
|
<view class="content-box">
|
||||||
<qiun-data-charts
|
<!-- <view class="screen-box">筛选条件</view> -->
|
||||||
type="area"
|
<view class="secreen-section">
|
||||||
:opts="opts"
|
<u-dropdown ref="uDropdown" @open="openDropDown">
|
||||||
:chartData="chart_air_temperature"
|
<u-dropdown-item v-model="addressValue" title="基地"
|
||||||
/>
|
:options="deviceAddressList" @change="change"></u-dropdown-item>
|
||||||
<qiun-data-charts
|
<u-dropdown-item v-model="device_id" title="检测点"
|
||||||
type="area"
|
:options="options2" @change="change2"></u-dropdown-item>
|
||||||
:opts="opts"
|
<u-dropdown-item title="日期">
|
||||||
:chartData="chart_air_humidity"
|
<view class="slot-content" style="background-color: #FFFFFF;">
|
||||||
/>
|
<view class="select-date u-border-bottom" >
|
||||||
<qiun-data-charts
|
<view class="name" @click="calendarShow = true">
|
||||||
type="scatter"
|
<u-icon name="calendar" color="#333" size="32"></u-icon>
|
||||||
:opts="opts"
|
<text style="margin-left: 6rpx;">选择日期：</text>
|
||||||
:chartData="chart_illumination"
|
</view>
|
||||||
/>
|
<view class="time_box">
|
||||||
|
<view class="tip_txt" v-if="!start_date_c"
|
||||||
|
@click="calendarShow = true">开始日期-结束日期</view>
|
||||||
|
<view class="tile_val" v-else
|
||||||
|
@click="calendarShow = true">{{start_date_c}} ~ {{end_date_c}}</view>
|
||||||
|
<view class="delete_btn" v-if="start_date_c" @click="deleteDateFn()">
|
||||||
|
<u-icon name="close-circle" color="#333" size="34"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<u-button type="primary" @click="selectedDateConform()">确定</u-button>
|
||||||
|
</view>
|
||||||
|
</u-dropdown-item>
|
||||||
|
</u-dropdown>
|
||||||
|
<view class="quick_times">
|
||||||
|
<u-subsection :list="sublist" :animation="false"
|
||||||
|
:current="currentIndex" @change="subChange1"></u-subsection>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 空气温度 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">空气温度<text class="unit">℃</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_air_temperature"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 空气湿度 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">空气湿度<text class="unit">%RH</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_air_humidity"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 光照强度 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">光照强度<text class="unit">Lux</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="mix"
|
||||||
|
:opts="opts2"
|
||||||
|
:chartData="chart_illumination"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 降雨量 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">降雨量<text class="unit">mm</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="mix"
|
||||||
|
:opts="opts2"
|
||||||
|
:chartData="chart_rainfall"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 风速 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">风速<text class="unit">m/s</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts3"
|
||||||
|
:chartData="chart_wind_speed"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 风向 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">风向<text class="unit"></text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="mix"
|
||||||
|
:opts="opts4"
|
||||||
|
:chartData="chart_wind_direction"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 噪音 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">噪音<text class="unit">db</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts3"
|
||||||
|
:chartData="chart_noise"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- pm10 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">PM10<text class="unit">ug/m3</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts3"
|
||||||
|
:chartData="chart_pm10"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- pm25 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">PM25<text class="unit">ug/m3</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts3"
|
||||||
|
:chartData="chart_pm25"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- co2 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">CO2<text class="unit">ppm</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts3"
|
||||||
|
:chartData="chart_co2"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
||||||
|
import {showLoading,getLastWeekRange,getLastMonthRange} from '@/com/utils.js'
|
||||||
export default {
|
export default {
|
||||||
components: { QiunDataCharts },
|
components: { QiunDataCharts },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
air_temperature:{},
|
|
||||||
chart_air_temperature:{},
|
|
||||||
opts: {
|
opts: {
|
||||||
dataLabel:false,//显示数据
|
dataLabel:false,//显示数据
|
||||||
|
padding:[10,40,25,25],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
disableGrid: true,
|
disableGrid: true,
|
||||||
labelCount:5
|
labelCount:5
|
||||||
|
|
@ -46,119 +207,415 @@
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
opts2: {
|
||||||
|
dataLabel:false,//显示数据
|
||||||
|
padding:[10,40,25,25],
|
||||||
|
xAxis: {
|
||||||
|
disableGrid: true,
|
||||||
|
labelCount:5
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
position: "left",
|
||||||
|
title: "",
|
||||||
|
textAlign: "left",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
opts3: {
|
||||||
|
dataLabel:false,//显示数据
|
||||||
|
padding:[10,40,25,25],
|
||||||
|
xAxis: {
|
||||||
|
disableGrid: true,
|
||||||
|
labelCount:5
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
position: "left",
|
||||||
|
title: "",
|
||||||
|
textAlign: "left",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
extra: {
|
||||||
|
area: {
|
||||||
|
type: "curve",
|
||||||
|
opacity: 0.9,
|
||||||
|
addLine: true,
|
||||||
|
gradient: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
opts4: {//风向的配置
|
||||||
|
dataLabel:false,//显示数据
|
||||||
|
padding:[10,40,25,25],
|
||||||
|
xAxis: {
|
||||||
|
disableGrid: true,
|
||||||
|
labelCount:5
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
splitNumber:7,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
max:7,
|
||||||
|
min:0,
|
||||||
|
position: "left",
|
||||||
|
title: "",
|
||||||
|
textAlign: "left",
|
||||||
|
format:"windDirection"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
air_temperature:{},
|
||||||
|
chart_air_temperature:{},
|
||||||
air_humidity:{},//空气湿度
|
air_humidity:{},//空气湿度
|
||||||
chart_air_humidity:{},
|
chart_air_humidity:{},
|
||||||
illumination:{},//光照强度
|
illumination:{},//光照强度
|
||||||
chart_illumination:{},
|
chart_illumination:{},
|
||||||
|
chart_rainfall:{},//降雨量
|
||||||
|
chart_wind_speed:{},//风速
|
||||||
|
chart_wind_direction:{},//风向
|
||||||
|
chart_noise:{},//噪音
|
||||||
|
chart_pm10:{},//pm10
|
||||||
|
chart_pm25:{},//pm25
|
||||||
|
chart_co2:{},//co2
|
||||||
|
q_start_time:'',
|
||||||
|
q_end_time:'',
|
||||||
|
deviceAddressList:[],//筛选设备地区列表
|
||||||
|
addressName:'',
|
||||||
|
addressValue:'',
|
||||||
|
device_id:'11',//检测点 - options2中的设备id
|
||||||
|
value3:'',//日期
|
||||||
|
options2:[],
|
||||||
|
calendarShow:false,//选择日期
|
||||||
|
start_date_c:'',
|
||||||
|
end_date_c:'',
|
||||||
|
sublist:[
|
||||||
|
{
|
||||||
|
name: '今天'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '近一周'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '近一月'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
currentIndex:0,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(){
|
onLoad(){
|
||||||
|
this.queryDeviceBasics();
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
this.queryMonitoringData();
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
|
||||||
|
//地区
|
||||||
|
change(val){
|
||||||
|
console.log(val);
|
||||||
|
let narray = this.deviceAddressList.filter(item=>{
|
||||||
|
return item.value==val;
|
||||||
|
})
|
||||||
|
console.log(narray);
|
||||||
|
this.addressName = narray[0].name;
|
||||||
|
this.$refs.uDropdown.highlight(0);
|
||||||
|
this.queryAddressDevicePoints(val);
|
||||||
|
},
|
||||||
|
|
||||||
|
//地区下设备id
|
||||||
|
change2(val){
|
||||||
|
this.$refs.uDropdown.highlight(1);
|
||||||
|
this.queryMonitoringData();
|
||||||
|
},
|
||||||
|
//日期范围
|
||||||
|
calendarChange(e){
|
||||||
|
console.log(e,'日期范围')
|
||||||
|
this.start_date_c = e.startDate;
|
||||||
|
this.end_date_c = e.endDate;
|
||||||
|
},
|
||||||
|
selectedDateConform(){
|
||||||
|
this.q_start_time = this.start_date_c;
|
||||||
|
this.q_end_time = this.end_date_c;
|
||||||
|
this.queryMonitoringData();
|
||||||
|
this.$refs.uDropdown.close();
|
||||||
|
},
|
||||||
|
//删除选择的时间
|
||||||
|
deleteDateFn(){
|
||||||
|
this.start_date_c = '';
|
||||||
|
this.end_date_c = '';
|
||||||
|
},
|
||||||
|
//时间筛选
|
||||||
|
openDropDown(index){
|
||||||
|
console.log(index,'openDropDown');
|
||||||
|
if(index==2){//日期
|
||||||
|
this.start_date_c = this.q_start_time;
|
||||||
|
this.end_date_c = this.q_end_time;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//快捷时间
|
||||||
|
subChange1(index){
|
||||||
|
console.log(index)
|
||||||
|
this.currentIndex = index;
|
||||||
|
if(index==1){
|
||||||
|
|
||||||
|
let lastWeekDate = getLastWeekRange();
|
||||||
|
let startDate = this.$u.timeFormat(lastWeekDate.startDate, 'yyyy-mm-dd');
|
||||||
|
let endDate = this.$u.timeFormat(lastWeekDate.endDate, 'yyyy-mm-dd');
|
||||||
|
console.log(startDate,endDate);
|
||||||
|
this.q_start_time = startDate;
|
||||||
|
this.q_end_time = endDate;
|
||||||
|
}else if(index==2){
|
||||||
|
let lastMonthRange = getLastMonthRange();
|
||||||
|
let startDate = this.$u.timeFormat(lastMonthRange.startDate, 'yyyy-mm-dd');
|
||||||
|
let endDate = this.$u.timeFormat(lastMonthRange.endDate, 'yyyy-mm-dd');
|
||||||
|
console.log(startDate,endDate);
|
||||||
|
this.q_start_time = startDate;
|
||||||
|
this.q_end_time = endDate;
|
||||||
|
}else{
|
||||||
|
this.q_start_time = '';
|
||||||
|
this.q_end_time = '';
|
||||||
|
}
|
||||||
|
this.queryMonitoringData();
|
||||||
|
},
|
||||||
|
//查询地址筛选
|
||||||
|
queryDeviceBasics(){
|
||||||
|
let params = {
|
||||||
|
device_type:4,
|
||||||
|
_t: new Date().getTime()
|
||||||
|
}
|
||||||
|
this.$http.get('/api/agricultural-device-basic',{params:params}).then(({data})=>{
|
||||||
|
console.log(data);
|
||||||
|
if(data.code==200){
|
||||||
|
let _data = data.data;
|
||||||
|
for(let item of _data){
|
||||||
|
item['label'] = item.name;
|
||||||
|
item['value'] = item.id;
|
||||||
|
}
|
||||||
|
this.deviceAddressList = _data;
|
||||||
|
this.addressValue = _data[0].id;
|
||||||
|
this.addressName = _data[0].name;
|
||||||
|
this.$refs.uDropdown.highlight(0);
|
||||||
|
this.queryAddressDevicePoints(this.addressValue);
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查询地址下的设备监控点
|
||||||
|
queryAddressDevicePoints(id){
|
||||||
|
let params = {
|
||||||
|
device_type:4,
|
||||||
|
agricultural_basic:id,
|
||||||
|
_t: new Date().getTime()
|
||||||
|
}
|
||||||
|
this.$http.get(`/api/agricultural-device-point/${id}`,{params:params}).then(({data})=>{
|
||||||
|
console.log(data);
|
||||||
|
if(data.code==200){
|
||||||
|
let _data = data.data;
|
||||||
|
let options = [];
|
||||||
|
for(let k in _data){
|
||||||
|
let item = {};
|
||||||
|
item['label'] = _data[k];
|
||||||
|
item['value'] = k;
|
||||||
|
options.push(item);
|
||||||
|
}
|
||||||
|
this.options2 = options;
|
||||||
|
this.device_id = options[0].value;
|
||||||
|
console.log(this.options2,this.device_id,'this.options2')
|
||||||
|
this.queryMonitoringData();
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
//查询监测数据
|
//查询监测数据
|
||||||
queryMonitoringData(){
|
queryMonitoringData(){
|
||||||
let params = {
|
let params = {
|
||||||
device_id:11,
|
device_id:this.device_id,
|
||||||
start_time:'',
|
start_time:this.q_start_time,
|
||||||
end_time:'',
|
end_time:this.q_end_time,
|
||||||
_t: new Date().getTime()
|
_t: new Date().getTime()
|
||||||
}
|
}
|
||||||
this.$http.get('/api/monitoring-data',{params:params}).then(({data})=>{
|
this.$http.get('/api/monitoring-data',{params:params}).then(({data})=>{
|
||||||
if(data.code==200){
|
if(data.code==200){
|
||||||
let _data = data.data;
|
let info = data.data;
|
||||||
//start 空气温度 air_temperature
|
let chartInfo = {};
|
||||||
this.air_temperature = _data.air_temperature;
|
if(params.start_time!=params.end_time){//不是当天
|
||||||
let categories1 = [];
|
this.opts.xAxis.labelCount = 4;
|
||||||
let sdata1 = [];
|
this.opts2.xAxis.labelCount = 4;
|
||||||
for(let k in this.air_temperature){
|
this.opts3.xAxis.labelCount = 4;
|
||||||
console.log(new Date(k),'---');
|
this.opts4.xAxis.labelCount = 4;
|
||||||
let timestamp = new Date(k).getTime();
|
|
||||||
// let time1 = k.split(/\s+/);
|
|
||||||
if(params.start_time!=params.end_time){
|
|
||||||
let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd');
|
|
||||||
categories1.push(time1);
|
|
||||||
}else{
|
|
||||||
|
|
||||||
let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
|
|
||||||
categories1.push(time2);
|
|
||||||
}
|
|
||||||
sdata1.push(this.air_temperature[k]);
|
|
||||||
}
|
}
|
||||||
|
for(let fk in info){
|
||||||
|
let _item = {
|
||||||
|
categories: [],
|
||||||
|
data:[]
|
||||||
|
}
|
||||||
|
for(let k in info[fk]){
|
||||||
|
let timestamp = new Date(k).getTime();
|
||||||
|
// let time1 = k.split(/\s+/);
|
||||||
|
if(params.start_time!=params.end_time){
|
||||||
|
let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd');
|
||||||
|
_item.categories.push(time1);
|
||||||
|
}else{
|
||||||
|
let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
|
||||||
|
_item.categories.push(time2);
|
||||||
|
}
|
||||||
|
_item.data.push(info[fk][k]);
|
||||||
|
}
|
||||||
|
chartInfo[fk] = _item;
|
||||||
|
}
|
||||||
|
console.log(chartInfo,'chartDatas--')
|
||||||
|
|
||||||
|
//start 空气温度 air_temperature
|
||||||
|
this.air_temperature = chartInfo.air_temperature;
|
||||||
let res = {
|
let res = {
|
||||||
categories: categories1,
|
categories: this.air_temperature.categories,
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name:'空气温度',
|
name:'空气温度',
|
||||||
data: sdata1
|
legendShape:'circle',
|
||||||
|
data: this.air_temperature.data
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
this.chart_air_temperature = JSON.parse(JSON.stringify(res));
|
this.chart_air_temperature = JSON.parse(JSON.stringify(res));
|
||||||
//end 空气温度 air_temperature
|
//end 空气温度 air_temperature
|
||||||
//start 空气湿度
|
//start 空气湿度
|
||||||
this.air_humidity = _data.air_humidity;
|
this.air_humidity = chartInfo.air_humidity;
|
||||||
let categories2 = [];
|
|
||||||
let sdata2 = [];
|
|
||||||
for(let k in this.air_humidity){
|
|
||||||
console.log(new Date(k),'---');
|
|
||||||
let timestamp = new Date(k).getTime();
|
|
||||||
// let time1 = k.split(/\s+/);
|
|
||||||
if(params.start_time!=params.end_time){
|
|
||||||
let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd');
|
|
||||||
categories2.push(time1);
|
|
||||||
}else{
|
|
||||||
|
|
||||||
let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
|
|
||||||
categories2.push(time2);
|
|
||||||
}
|
|
||||||
sdata2.push(this.air_humidity[k]);
|
|
||||||
}
|
|
||||||
let res2 = {
|
let res2 = {
|
||||||
categories: categories2,
|
categories: this.air_humidity.categories,
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name:'空气湿度',
|
name:'空气湿度',
|
||||||
type: "point",
|
legendShape:'circle',
|
||||||
data: sdata2
|
data: this.air_humidity.data
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
this.chart_air_humidity = JSON.parse(JSON.stringify(res2));
|
this.chart_air_humidity = JSON.parse(JSON.stringify(res2));
|
||||||
//end 空气湿度
|
//end 空气湿度
|
||||||
//start 光照强度illumination
|
//start 光照强度illumination
|
||||||
this.illumination = _data.illumination;
|
this.illumination = chartInfo.illumination;
|
||||||
let categories3 = [];
|
|
||||||
let sdata3 = [];
|
|
||||||
for(let k in this.illumination){
|
|
||||||
console.log(new Date(k),'---');
|
|
||||||
let timestamp = new Date(k).getTime();
|
|
||||||
// let time1 = k.split(/\s+/);
|
|
||||||
if(params.start_time!=params.end_time){
|
|
||||||
let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd');
|
|
||||||
categories3.push(time1);
|
|
||||||
}else{
|
|
||||||
|
|
||||||
let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
|
|
||||||
categories3.push(time2);
|
|
||||||
}
|
|
||||||
sdata3.push(this.illumination[k]);
|
|
||||||
}
|
|
||||||
let res3 = {
|
let res3 = {
|
||||||
categories: categories3,
|
categories: this.illumination.categories,
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
index: 0,
|
||||||
|
type: "point",
|
||||||
|
pointShape:'circle',
|
||||||
|
legendShape:'circle',
|
||||||
name:'光照强度',
|
name:'光照强度',
|
||||||
data: sdata3
|
data: this.illumination.data,
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
this.chart_illumination = JSON.parse(JSON.stringify(res3));
|
this.chart_illumination = JSON.parse(JSON.stringify(res3));
|
||||||
|
//end 光照强度
|
||||||
|
//start 降雨量 rainfall
|
||||||
|
// this.air_temperature = chartInfo.rainfall;
|
||||||
|
let res4 = {
|
||||||
|
categories: chartInfo.rainfall.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
index: 0,
|
||||||
|
type: "point",
|
||||||
|
pointShape:'square',//triangle
|
||||||
|
legendShape:'square',
|
||||||
|
name:'降雨量',
|
||||||
|
data: chartInfo.rainfall.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_rainfall = JSON.parse(JSON.stringify(res4));
|
||||||
|
//start 风速wind_speed
|
||||||
|
let res5 = {
|
||||||
|
categories: chartInfo.wind_speed.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'风速',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.wind_speed.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_wind_speed = JSON.parse(JSON.stringify(res5));
|
||||||
|
//end 风速wind_speed
|
||||||
|
//start 风向wind_direction
|
||||||
|
let res6 = {
|
||||||
|
categories: chartInfo.wind_direction.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
index: 0,
|
||||||
|
type: "point",
|
||||||
|
pointShape:'triangle',
|
||||||
|
legendShape:'triangle',
|
||||||
|
name:'风向',
|
||||||
|
data: chartInfo.wind_direction.data,
|
||||||
|
format:"windDirection"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_wind_direction = JSON.parse(JSON.stringify(res6));
|
||||||
|
//end 风向wind_direction
|
||||||
|
//start 噪音 noise
|
||||||
|
let res7 = {
|
||||||
|
categories: chartInfo.noise.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'噪音',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.noise.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_noise = JSON.parse(JSON.stringify(res7));
|
||||||
|
//end 噪音 noise
|
||||||
|
//start pm10 pm10
|
||||||
|
let res8 = {
|
||||||
|
categories: chartInfo.pm10.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'pm10',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.pm10.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_pm10 = JSON.parse(JSON.stringify(res8));
|
||||||
|
//end pm10
|
||||||
|
//start pm25
|
||||||
|
let res9 = {
|
||||||
|
categories: chartInfo.pm25.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'pm25',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.pm25.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_pm25 = JSON.parse(JSON.stringify(res9));
|
||||||
|
//end pm25
|
||||||
|
//start co2
|
||||||
|
let res10 = {
|
||||||
|
categories: chartInfo.co2.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'co2',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.co2.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_co2 = JSON.parse(JSON.stringify(res10));
|
||||||
|
//end co2
|
||||||
}
|
}
|
||||||
}).catch(()=>{
|
}).catch(()=>{
|
||||||
|
|
||||||
|
|
@ -169,5 +626,59 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.content-box{
|
||||||
|
padding-bottom: 60rpx;
|
||||||
|
}
|
||||||
|
.screen-box{
|
||||||
|
// height: 96rpx;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// padding: 0 24rpx;
|
||||||
|
}
|
||||||
|
.secreen-section{
|
||||||
|
.slot-content{
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
.select-date{
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
.time_box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.tip_txt{
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.delete_btn{
|
||||||
|
padding: 15rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.quick_times{
|
||||||
|
padding: 18rpx 24rpx 24rpx 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart_section{
|
||||||
|
.top_box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
.tit{
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
.unit{
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue