mirror of
https://gitee.com/beecue/fastbee.git
synced 2025-12-18 00:45:55 +08:00
添加了一些页面
This commit is contained in:
qianlile
124
wechat/miniprogram/pages/PM2.5/index.js
Normal file
124
wechat/miniprogram/pages/PM2.5/index.js
Normal file
@@ -0,0 +1,124 @@
|
||||
// miniprogram/pages/deviceControl/PM2.5/index.js
|
||||
import * as echarts from '../../ec-canvas/echarts';
|
||||
|
||||
function initChart(canvas, width, height, dpr) {
|
||||
const chart = echarts.init(canvas, null, {
|
||||
width: width,
|
||||
height: height,
|
||||
devicePixelRatio: dpr // 像素
|
||||
});
|
||||
canvas.setChart(chart);
|
||||
|
||||
var option = {
|
||||
title:{ text:'污染物浓度趋势',bottom:15,left:'33%' },
|
||||
xAxis:{ maxInterval: 3600 * 1000, data:['8:00','9:00','10:00','11:00','12:00','13:00'],nameTextStyle:{
|
||||
color:'#fff'
|
||||
} },
|
||||
yAxis:{ type:'value',name:'μg/m³',max:50, min:0 ,show:true ,splitNumber:5 },
|
||||
legend:{
|
||||
data:['PM2.5','PM10','PM1.0'],
|
||||
z:100
|
||||
},
|
||||
legend:{ textStyle:{ color:'#fff' } },
|
||||
textStyle:{ color:'#fff' },
|
||||
series:[
|
||||
{ type:'bar',name:'PM2.5', smooth:true, data: [27, 22, 25, 31, 32, 26] },
|
||||
{ type:'line',name:'PM10', smooth:true, data: [28, 27, 28, 30, 28, 28] },
|
||||
{ type:'line',name:'PM1.0', smooth:true, data: [22, 24, 22, 23, 22, 24] }
|
||||
],
|
||||
axisPointer:{ show:true,type:'line',snap:true }
|
||||
};
|
||||
chart.setOption(option);
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
deviceInfo:{},
|
||||
deviceData:[],
|
||||
ec: {
|
||||
onInit:initChart
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
// this.getServerData();
|
||||
// this.getLastPageData();
|
||||
// this.getDeviceAttribute();
|
||||
wx.setNavigationBarTitle({
|
||||
title: 'PM2.5监测',
|
||||
})
|
||||
},
|
||||
|
||||
//获取上一页的数据
|
||||
getLastPageData(){
|
||||
const that = this;
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.on('getDeviceInfo',(data)=>{
|
||||
wx.setNavigationBarTitle({
|
||||
title: data.product_name
|
||||
});
|
||||
that.setData({ deviceInfo:data })
|
||||
})
|
||||
},
|
||||
|
||||
//获取设备属性数据
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
7
wechat/miniprogram/pages/PM2.5/index.json
Normal file
7
wechat/miniprogram/pages/PM2.5/index.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-circle": "@vant/weapp/circle/index",
|
||||
"ec-canvas": "../../ec-canvas/ec-canvas"
|
||||
},
|
||||
"disableScroll": true
|
||||
}
|
||||
64
wechat/miniprogram/pages/PM2.5/index.wxml
Normal file
64
wechat/miniprogram/pages/PM2.5/index.wxml
Normal file
@@ -0,0 +1,64 @@
|
||||
<!--miniprogram/pages/deviceControl/PM2.5/index.wxml-->
|
||||
<view class='body'>
|
||||
<!-- <view class='time'>
|
||||
2021-05-31 13:27
|
||||
</view> -->
|
||||
<view class='outroom'>室外空气：良</view>
|
||||
<view class='airInfo'>
|
||||
<van-circle
|
||||
value="26"
|
||||
layer-color="#fff"
|
||||
color="lightgreen"
|
||||
size='280'
|
||||
stroke-width='10'
|
||||
>
|
||||
<slots>
|
||||
<view class='title'>PM2.5</view>
|
||||
<view>
|
||||
<text class='num'>26</text>
|
||||
<text class='unit'>μg/m³</text>
|
||||
</view>
|
||||
<view class='degree'>室内：<text style='color:lightgreen'>优</text></view>
|
||||
</slots>
|
||||
</van-circle>
|
||||
</view>
|
||||
<view class='small_info'>
|
||||
<!-- <view class='city'>
|
||||
<image src='/icon/address.png' />
|
||||
<text>南京</text>
|
||||
</view> -->
|
||||
<view class='particle'>
|
||||
<text class='name' decode>PM10 : </text>
|
||||
<text class='index'>32</text>
|
||||
<text class='explain' style='color:lightgreen' >优</text>
|
||||
</view>
|
||||
<view class='particle'>
|
||||
<text class='name' decode>PM1.0 : </text>
|
||||
<text class='index'>21</text>
|
||||
<text class='explain' style='color:lightgreen'>优</text>
|
||||
</view>
|
||||
<!-- <view class='updateTime'>今日 11:55 发布</view> -->
|
||||
</view>
|
||||
<!-- <view class='others'>
|
||||
<van-circle
|
||||
value="{{ value }}"
|
||||
layer-color="#eeeeee"
|
||||
color="#ee0a24"
|
||||
text="PM10"
|
||||
size='125'
|
||||
/>
|
||||
<van-circle
|
||||
value="{{ value }}"
|
||||
layer-color="#eeeeee"
|
||||
color="#ee0a24"
|
||||
text="PM1.0"
|
||||
size='125'
|
||||
/>
|
||||
</view> -->
|
||||
<view class='bg'></view>
|
||||
|
||||
<view class="container">
|
||||
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
124
wechat/miniprogram/pages/PM2.5/index.wxss
Normal file
124
wechat/miniprogram/pages/PM2.5/index.wxss
Normal file
@@ -0,0 +1,124 @@
|
||||
/* miniprogram/pages/deviceControl/PM2.5/index.wxss */
|
||||
.bg{
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
background-image:linear-gradient(120deg, gray , deepskyblue);
|
||||
z-index:-99;
|
||||
}
|
||||
.body{
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
color:#fff;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
.outroom{
|
||||
display:block;
|
||||
width:100%;
|
||||
height:80rpx;
|
||||
padding: 0 30rpx;
|
||||
line-height:80rpx;
|
||||
}
|
||||
/* .time{
|
||||
display:block;
|
||||
width:100%;
|
||||
height:80rpx;
|
||||
text-align:center;
|
||||
line-height:80rpx;
|
||||
margin:70rpx 0;
|
||||
} */
|
||||
.airInfo{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
/* margin-top:70rpx; */
|
||||
}
|
||||
.airInfo .title{
|
||||
display:block;
|
||||
width:100%;
|
||||
height:80rpx;
|
||||
/* padding-bottom:40rpx; */
|
||||
text-align:center;
|
||||
line-height:80rpx;
|
||||
font-size:70rpx;
|
||||
}
|
||||
slots{
|
||||
color:#fff;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
}
|
||||
slots .num{
|
||||
font-size:160rpx
|
||||
}
|
||||
.degree{
|
||||
display:block;
|
||||
/* width:300rpx; */
|
||||
height:90rpx;
|
||||
color:yellow;
|
||||
text-align:center;
|
||||
line-height:90rpx;
|
||||
font-size:40rpx;
|
||||
padding:15rpx 0;
|
||||
}
|
||||
.small_info{
|
||||
/* padding:15rpx 35rpx; */
|
||||
display:flex;
|
||||
justify-content:space-around;
|
||||
border-bottom:2rpx solid #fff;
|
||||
}
|
||||
/* .city{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
margin:15rpx 0;
|
||||
}
|
||||
.city image{
|
||||
width:45rpx;
|
||||
height:45rpx;
|
||||
}
|
||||
.city>text{
|
||||
display:block;
|
||||
height:45rpx;
|
||||
line-height:45rpx;
|
||||
text-align:center;
|
||||
padding:0 15rpx;
|
||||
} */
|
||||
.particle{
|
||||
margin:30rpx 0;
|
||||
padding:10rpx 0;
|
||||
width:45%;
|
||||
height:60rpx;
|
||||
border:2rpx solid #ffffff;
|
||||
text-align:center;
|
||||
line-height:60rpx;
|
||||
border-radius:50rpx;
|
||||
|
||||
font-size:32rpx;
|
||||
}
|
||||
.particle .name{
|
||||
display:inline-block;
|
||||
/* width:135rpx; */
|
||||
}
|
||||
.particle .index{
|
||||
display:inline-block;
|
||||
width:60rpx;
|
||||
}
|
||||
/* .updateTime{
|
||||
margin:10rpx 0;
|
||||
} */
|
||||
/* .others{
|
||||
display:flex;
|
||||
justify-content:space-around;
|
||||
} */
|
||||
|
||||
.container{
|
||||
width: 100vw;
|
||||
height: 450rpx;
|
||||
}
|
||||
#mychart-dom-bar{
|
||||
width: 100vw;
|
||||
height: 450rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user