new
parent
b4cf2d5312
commit
1fbf0e1ca3
47
src/App.vue
47
src/App.vue
|
|
@ -160,4 +160,51 @@
|
|||
.bg_colorf8{
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
// 顶部筛选样式
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -55,6 +55,24 @@
|
|||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/index/monitor",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "智能监控",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/index/soil-monitoring",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "土壤监控",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "white",
|
||||
|
|
|
|||
|
|
@ -101,6 +101,14 @@
|
|||
uni.navigateTo({
|
||||
url:'/pages/index/meteorological'
|
||||
})
|
||||
}else if(item.label=='智能监控'){
|
||||
uni.navigateTo({
|
||||
url:'/pages/index/monitor'
|
||||
})
|
||||
}else if(item.label=='土壤监控'){
|
||||
uni.navigateTo({
|
||||
url:'/pages/index/soil-monitoring'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -283,13 +283,13 @@
|
|||
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:'',
|
||||
|
|
@ -447,10 +447,10 @@
|
|||
let info = data.data;
|
||||
let chartInfo = {};
|
||||
if(params.start_time!=params.end_time){//不是当天
|
||||
this.opts.xAxis.labelCount = 4;
|
||||
this.opts2.xAxis.labelCount = 4;
|
||||
this.opts3.xAxis.labelCount = 4;
|
||||
this.opts4.xAxis.labelCount = 4;
|
||||
this.opts.xAxis.labelCount = 3;
|
||||
this.opts2.xAxis.labelCount = 3;
|
||||
this.opts3.xAxis.labelCount = 3;
|
||||
this.opts4.xAxis.labelCount = 3;
|
||||
}
|
||||
for(let fk in info){
|
||||
let _item = {
|
||||
|
|
@ -481,7 +481,8 @@
|
|||
{
|
||||
name:'空气温度',
|
||||
legendShape:'circle',
|
||||
data: this.air_temperature.data
|
||||
data: this.air_temperature.data,
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -635,32 +636,7 @@
|
|||
// 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{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<view class="monitor-page">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,456 @@
|
|||
<template>
|
||||
<view class="soil-monitoring">
|
||||
<view class="content-box">
|
||||
<view class="secreen-section">
|
||||
<u-dropdown ref="uDropdown" @open="openDropDown">
|
||||
<u-dropdown-item v-model="addressValue" title="基地"
|
||||
:options="deviceAddressList" @change="change"></u-dropdown-item>
|
||||
<u-dropdown-item v-model="device_id" title="检测点"
|
||||
:options="options2" @change="change2"></u-dropdown-item>
|
||||
<u-dropdown-item title="日期">
|
||||
<view class="slot-content" style="background-color: #FFFFFF;">
|
||||
<view class="select-date u-border-bottom" >
|
||||
<view class="name" @click="calendarShow = true">
|
||||
<u-icon name="calendar" color="#333" size="32"></u-icon>
|
||||
<text style="margin-left: 6rpx;">选择日期：</text>
|
||||
</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">us/cm</text></view>
|
||||
<view class="name">{{addressName}}</view>
|
||||
</view>
|
||||
<view class="cart_box">
|
||||
<qiun-data-charts
|
||||
type="area"
|
||||
:opts="opts"
|
||||
:chartData="chart_conductivity"
|
||||
/>
|
||||
</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_humidity"
|
||||
/>
|
||||
</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_temperature"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 氮 -->
|
||||
<view class="chart_section">
|
||||
<view class="top_box u-border-bottom">
|
||||
<view class="tit">氮<text class="unit">mg/kg</text></view>
|
||||
<view class="name">{{addressName}}</view>
|
||||
</view>
|
||||
<view class="cart_box">
|
||||
<qiun-data-charts
|
||||
type="area"
|
||||
:opts="opts"
|
||||
:chartData="chart_k"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 磷 -->
|
||||
<view class="chart_section">
|
||||
<view class="top_box u-border-bottom">
|
||||
<view class="tit">磷<text class="unit">mg/kg</text></view>
|
||||
<view class="name">{{addressName}}</view>
|
||||
</view>
|
||||
<view class="cart_box">
|
||||
<qiun-data-charts
|
||||
type="area"
|
||||
:opts="opts"
|
||||
:chartData="chart_n"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 钾 -->
|
||||
<view class="chart_section">
|
||||
<view class="top_box u-border-bottom">
|
||||
<view class="tit">钾<text class="unit">mg/kg</text></view>
|
||||
<view class="name">{{addressName}}</view>
|
||||
</view>
|
||||
<view class="cart_box">
|
||||
<qiun-data-charts
|
||||
type="area"
|
||||
:opts="opts"
|
||||
:chartData="chart_p"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {showLoading,getLastWeekRange,getLastMonthRange} from '@/com/utils.js'
|
||||
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
||||
export default {
|
||||
components: { QiunDataCharts },
|
||||
data() {
|
||||
return {
|
||||
opts: {
|
||||
dataLabel:false,//显示数据
|
||||
padding:[10,40,25,25],
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
labelCount:5
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
data:[
|
||||
{
|
||||
min:0
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.9,
|
||||
addLine: true,
|
||||
gradient: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
chart_conductivity:{},//电导率
|
||||
chart_humidity:{},//湿度
|
||||
chart_temperature:{},//温度
|
||||
chart_k:{},//氮
|
||||
chart_n:{},//磷
|
||||
chart_p:{},//钾
|
||||
//筛选
|
||||
q_start_time:'',
|
||||
q_end_time:'',
|
||||
deviceAddressList:[],//筛选设备地区列表
|
||||
addressName:'',
|
||||
addressValue:'',
|
||||
device_id:'11',//检测点 - options2中的设备id
|
||||
options2:[],
|
||||
calendarShow:false,//选择日期
|
||||
start_date_c:'',
|
||||
end_date_c:'',
|
||||
sublist:[
|
||||
{
|
||||
name: '今天'
|
||||
},
|
||||
{
|
||||
name: '近一周'
|
||||
},
|
||||
{
|
||||
name: '近一月'
|
||||
},
|
||||
],
|
||||
currentIndex:0,
|
||||
|
||||
};
|
||||
},
|
||||
onLoad(){
|
||||
this.queryDeviceBasics();
|
||||
},
|
||||
onShow(){
|
||||
|
||||
},
|
||||
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:2,
|
||||
_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:2,
|
||||
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(){
|
||||
let params = {
|
||||
device_id:this.device_id,
|
||||
start_time:this.q_start_time,
|
||||
end_time:this.q_end_time,
|
||||
_t: new Date().getTime()
|
||||
}
|
||||
this.$http.get('/api/monitoring-data',{params:params}).then(({data})=>{
|
||||
if(data.code==200){
|
||||
let info = data.data;
|
||||
let chartInfo = {};
|
||||
|
||||
for(let fk in info){
|
||||
let _item = {
|
||||
categories: [],
|
||||
data:[]
|
||||
}
|
||||
for(let k in info[fk]){
|
||||
|
||||
_item.data.push(info[fk][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');
|
||||
_item.categories.push(time1);
|
||||
}else{
|
||||
let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
|
||||
_item.categories.push(time2);
|
||||
}
|
||||
}
|
||||
chartInfo[fk] = _item;
|
||||
}
|
||||
console.log(chartInfo,'chartDatas--')
|
||||
if(params.start_time!=params.end_time){//不是当天
|
||||
this.opts.xAxis.labelCount = 3;
|
||||
}else{
|
||||
let len = chartInfo.conductivity.categories.length-1;
|
||||
let v = 5;
|
||||
if(len>5){
|
||||
v = len%5>0?v-1:v;
|
||||
}
|
||||
this.opts.xAxis.labelCount = v;
|
||||
}
|
||||
console.log(this.opts,'配置')
|
||||
//start 电导率 conductivity
|
||||
let res = {
|
||||
categories: chartInfo.conductivity.categories,
|
||||
series: [
|
||||
{
|
||||
name:'电导率',
|
||||
legendShape:'circle',
|
||||
data: chartInfo.conductivity.data,
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.chart_conductivity = JSON.parse(JSON.stringify(res));
|
||||
console.log(this.chart_conductivity,'电导率')
|
||||
//end 电导率 conductivity
|
||||
//start 湿度
|
||||
let res2 = {
|
||||
categories: chartInfo.humidity.categories,
|
||||
series: [
|
||||
{
|
||||
name:'湿度',
|
||||
legendShape:'circle',
|
||||
data: chartInfo.humidity.data
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart_humidity = JSON.parse(JSON.stringify(res2));
|
||||
//end 湿度
|
||||
//start 温度 temperature
|
||||
let res3 = {
|
||||
categories: chartInfo.temperature.categories,
|
||||
series: [
|
||||
{
|
||||
name:'温度',
|
||||
legendShape:'circle',
|
||||
data: chartInfo.temperature.data
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.chart_temperature = JSON.parse(JSON.stringify(res3));
|
||||
//end 温度
|
||||
//start 氮 k
|
||||
let res4 = {
|
||||
categories: chartInfo.k.categories,
|
||||
series: [
|
||||
{
|
||||
name:'氮',
|
||||
legendShape:'circle',
|
||||
data: chartInfo.k.data,
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart_k = JSON.parse(JSON.stringify(res4));
|
||||
//start 磷 n
|
||||
let res5 = {
|
||||
categories: chartInfo.n.categories,
|
||||
series: [
|
||||
{
|
||||
name:'磷',
|
||||
legendShape:'circle',
|
||||
data: chartInfo.n.data,
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart_n = JSON.parse(JSON.stringify(res5));
|
||||
//end 磷 n
|
||||
//start 钾 p
|
||||
let res6 = {
|
||||
categories: chartInfo.p.categories,
|
||||
series: [
|
||||
{
|
||||
name:'钾',
|
||||
legendShape:'circle',
|
||||
data: chartInfo.p.data,
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart_p = JSON.parse(JSON.stringify(res6));
|
||||
//end 钾 p
|
||||
|
||||
}
|
||||
}).catch(()=>{
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-box{
|
||||
padding-bottom: 60rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue