mirror of
https://gitee.com/beecue/fastbee.git
synced 2025-12-19 09:25:54 +08:00
智慧宿舍系统小程序
This commit is contained in:
qianlile
154
wechat/miniprogram/pages/index/index.js
Normal file
154
wechat/miniprogram/pages/index/index.js
Normal file
@@ -0,0 +1,154 @@
|
||||
// miniprogram/pages/index/index.js
|
||||
const amap = require('../../libs/amap-wx.js');
|
||||
const { requestApi } = require('../../API/request.js');
|
||||
const app = getApp();
|
||||
const project_id = 'wHJB7a';
|
||||
var timer;
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
weather:{}, //天气信息
|
||||
products:[],
|
||||
DeviceList:[],
|
||||
fourGDeviceList:[],
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: '绑定设备' },
|
||||
],
|
||||
|
||||
},
|
||||
// },
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
// this.getProducts();
|
||||
// this.query();
|
||||
// timer = setInterval(() => {
|
||||
this.getDevices();
|
||||
// }, 2000);
|
||||
},
|
||||
|
||||
|
||||
async getDevices(){
|
||||
const res = await requestApi('/system/device/list');
|
||||
console.log(res);
|
||||
this.setData({ DeviceList:res.data.rows })
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
//获取天气
|
||||
getWeather:async function(){
|
||||
let that = this;
|
||||
var myAmapFun = new amap.AMapWX({key:'5cafa1133f593cfe005081749a46e717'});
|
||||
myAmapFun.getWeather({
|
||||
success: function(data){
|
||||
console.log(data);
|
||||
that.setData({
|
||||
weather:data
|
||||
})
|
||||
},
|
||||
fail: function(info){
|
||||
//失败回调
|
||||
console.log(info)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
goToDeviceControl(e){
|
||||
if (e.currentTarget.dataset.info.categoryId !== 5) {
|
||||
return;
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: '/pages/roomSystem/index',
|
||||
success:(res)=>{
|
||||
res.eventChannel.emit('getDeviceInfo',e.currentTarget.dataset.info)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
deviceFail(){
|
||||
wx.showToast({
|
||||
title: '设备离线!',
|
||||
icon:'error'
|
||||
})
|
||||
},
|
||||
deviceNone(){
|
||||
wx.showToast({
|
||||
title: '设备未激活！',
|
||||
icon:'error'
|
||||
})
|
||||
},
|
||||
|
||||
//底部弹起的模态面板
|
||||
isShow:function(){
|
||||
this.setData({
|
||||
show:!this.data.show
|
||||
})
|
||||
},
|
||||
onClose:function() {
|
||||
this.setData({ show: false });
|
||||
},
|
||||
onCancel:function(){
|
||||
this.setData({ show: false });
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
this.getWeather();
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
homeSelected:true,
|
||||
userSelected:false //这个数字是当前页面在tabBar中list数组的索引
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
clearInterval(timer);
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
this.onLoad();
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
7
wechat/miniprogram/pages/index/index.json
Normal file
7
wechat/miniprogram/pages/index/index.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"van-action-sheet": "@vant/weapp/action-sheet/index",
|
||||
"van-tab": "@vant/weapp/tab/index",
|
||||
"van-tabs": "@vant/weapp/tabs/index"
|
||||
}
|
||||
}
|
||||
145
wechat/miniprogram/pages/index/index.wxml
Normal file
145
wechat/miniprogram/pages/index/index.wxml
Normal file
@@ -0,0 +1,145 @@
|
||||
<!--miniprogram/pages/myDevice/index.wxml-->
|
||||
<view class='body'>
|
||||
<view class='top'>
|
||||
<view class='top_left'>
|
||||
<view class='top_big_info'>
|
||||
<text class='temperature'>{{ weather.temperature.data }}℃</text>
|
||||
<text class='city'>城市: {{ weather.city.data }}</text>
|
||||
</view>
|
||||
<view class='top_small_info'>
|
||||
<view>
|
||||
<text class='humidity'>湿度: {{ weather.humidity.data }}</text>
|
||||
<text class='weather'>天气: {{ weather.weather.data }}</text>
|
||||
</view>
|
||||
<text class='winddirection'>风向: {{ weather.winddirection.data }}</text>
|
||||
<text class='windpower'>风力: {{ weather.windpower.data }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='top_right'>
|
||||
<view class='start'>
|
||||
<image src='/icons/start.png' />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='devices'>
|
||||
<view class='devices_tab'>全部 ({{ DeviceList.length }})</view>
|
||||
<van-tabs swipeable animated>
|
||||
<van-tab title="WiFi设备({{ DeviceList.length }})">
|
||||
<scroll-view scroll-y>
|
||||
<view class="devices_list">
|
||||
<block wx:if="{{ DeviceList.length !== 0 }}">
|
||||
<view wx:for='{{ DeviceList }}' wx:key='index' class='border'>
|
||||
<block wx:if="{{ item.isOnline === 2 }}">
|
||||
<view class='devices_item' style="background-color:rgba(0,0,0,.05)" bindtap='deviceNone' data-info='{{item}}'>
|
||||
<view class="info">
|
||||
<view class='img'>
|
||||
<image src='/images/room.jpeg' />
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view style="color:#bfbfbf" class="status">未激活</view>
|
||||
<view style="font-size:24rpx;color:#666">{{ item.categoryName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='name'>{{ item.deviceName }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{ item.isOnline === 1 }}">
|
||||
<view class='devices_item' bindtap='goToDeviceControl' data-info='{{item}}'>
|
||||
<view class="info">
|
||||
<view class='img'>
|
||||
<image src='/images/room.jpeg' />
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view style="color:green" class="status">在线</view>
|
||||
<view style="font-size:24rpx;color:#666">{{ item.categoryName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='name'>{{ item.deviceName }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{ item.isOnline === 0 }}">
|
||||
<view style="background-color:rgba(0,0,0,.05)" class='devices_item' bindtap='deviceFail' data-info='{{item}}'>
|
||||
<view class="info">
|
||||
<view class='img'>
|
||||
<image src='/images/room.jpeg' />
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view style="color:#ff0000" class="status">离线</view>
|
||||
<view style="font-size:24rpx;color:#666">{{ item.categoryName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='name'>{{ item.deviceName }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:elif='{{ DeviceList.length === 0 }}'>
|
||||
<view class='noDevice'> 暂无设备，请添加。 </view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</van-tab>
|
||||
<van-tab title="4G设备({{ fourGDeviceList.length }})">
|
||||
<scroll-view scroll-y>
|
||||
<view class="devices_list">
|
||||
<block wx:if="{{ fourGDeviceList.length !== 0 }}">
|
||||
<view wx:for='{{ fourGDeviceList }}' wx:key='index' class='border'>
|
||||
<block wx:if="{{ item.status === 1 }}">
|
||||
<view class='devices_item' style="background-color:rgba(0,0,0,.05)" bindtap='deviceNone' data-info='{{item}}'>
|
||||
<view class="info">
|
||||
<view class='img'>
|
||||
<image src='/icons/device.jpg' />
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view style="color:#bfbfbf" class="status">未激活</view>
|
||||
<view style="font-size:24rpx;color:#666">{{ item.device_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='name'>{{ item.product_name }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{ item.status === 2 }}">
|
||||
<view class='devices_item' bindtap='goToDeviceControl' data-info='{{item}}'>
|
||||
<view class="info">
|
||||
<view class='img'>
|
||||
<image src='/icons/device.jpg' />
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view style="color:green" class="status">在线</view>
|
||||
<view style="font-size:24rpx;color:#666">{{ item.device_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='name'>{{ item.product_name }}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{ item.status === 3 }}">
|
||||
<view style="background-color:rgba(0,0,0,.05)" class='devices_item' bindtap='deviceFail' data-info='{{item}}'>
|
||||
<view class="info">
|
||||
<view class='img'>
|
||||
<image src='/icons/device.jpg' />
|
||||
</view>
|
||||
<view class="_right">
|
||||
<view style="color:#ff0000" class="status">离线</view>
|
||||
<view style="font-size:24rpx;color:#666">{{ item.device_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='name'>{{ item.product_name }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:elif='{{ fourGDeviceList.length === 0 }}'>
|
||||
<view class='noDevice'> 暂无设备，请添加。 </view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
<!-- <view class='addDevice' catchtap='isShow'>
|
||||
<image src="/images/add.png" />
|
||||
</view> -->
|
||||
<van-action-sheet class='aa' show="{{ show }}" actions="{{ actions }}"
|
||||
bind:close="onClose" bind:select="onSelect" cancel-text="取消" bind:cancel='onCancel'
|
||||
/>
|
||||
</view>
|
||||
153
wechat/miniprogram/pages/index/index.wxss
Normal file
153
wechat/miniprogram/pages/index/index.wxss
Normal file
@@ -0,0 +1,153 @@
|
||||
/* miniprogram/pages/myDevice/index.wxss */
|
||||
.top{
|
||||
display:flex;
|
||||
justify-content:space-around;
|
||||
background-color:skyblue;
|
||||
background-image: linear-gradient(to bottom right, skyblue, blue);
|
||||
padding:30rpx 0;
|
||||
border-radius:0 0 25rpx 25rpx;
|
||||
color:#ffffff;
|
||||
height:270rpx;
|
||||
}
|
||||
|
||||
.top .top_left{
|
||||
width:420rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
}
|
||||
.top .top_left .top_big_info{
|
||||
padding:10rpx 0;
|
||||
}
|
||||
.top .top_left .top_small_info{
|
||||
padding:10rpx 20rpx;
|
||||
font-size:30rpx;
|
||||
}
|
||||
|
||||
.temperature{
|
||||
font-size:60rpx;
|
||||
display:inline-block;
|
||||
padding:0 20rpx;
|
||||
}
|
||||
.humidity::after{
|
||||
content:'|';
|
||||
width:55rpx;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
color:rgba(255,255,255,.5);
|
||||
}
|
||||
.winddirection::after{
|
||||
content:'|';
|
||||
width:55rpx;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
color:rgba(255,255,255,.5);
|
||||
}
|
||||
.top .top_right{
|
||||
width:250rpx;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
.top .top_right .start{
|
||||
position:relative;
|
||||
width:220rpx;
|
||||
height:220rpx;
|
||||
animation:move 4s linear infinite;
|
||||
}
|
||||
@keyframes move{
|
||||
0%{ top:0rpx }
|
||||
25%{ top:-30rpx }
|
||||
50%{ top:0rpx }
|
||||
75%{ top:30rpx }
|
||||
100%{ top:0rpx }
|
||||
}
|
||||
.top .top_right .start image{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.devices .devices_tab{
|
||||
font-size:36rpx;
|
||||
padding:20rpx;
|
||||
}
|
||||
.devices .devices_list{
|
||||
padding:10rpx 0;
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
.devices .devices_list .border{
|
||||
width:50%;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
}
|
||||
.devices .devices_list .devices_item{
|
||||
width:280rpx;
|
||||
height:200rpx;
|
||||
margin:30rpx 20rpx;
|
||||
border-radius:10rpx;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
box-shadow:0rpx 5rpx 10rpx #bfbfbf;
|
||||
}
|
||||
.info{
|
||||
flex: 3;
|
||||
display: flex;
|
||||
}
|
||||
.status{
|
||||
padding: 15rpx;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
}
|
||||
.devices .devices_list .devices_item:active{
|
||||
background-color:rgba(0,0,0,.1);
|
||||
}
|
||||
.devices .devices_list .devices_item .img{
|
||||
width:50%;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
.devices .devices_list .devices_item image{
|
||||
width:100rpx;
|
||||
height:100rpx;
|
||||
}
|
||||
.devices .devices_list .devices_item .name{
|
||||
flex:2;
|
||||
padding:0 20rpx;
|
||||
/* background-color:rgba(0,0,0,.1); */
|
||||
border-top:1rpx solid #bfbfbf;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
.noDevice{
|
||||
display:block;
|
||||
width:100%;
|
||||
height:200rpx;
|
||||
text-align:center;
|
||||
line-height:200rpx;
|
||||
}
|
||||
.addDevice{
|
||||
background-color:blue;
|
||||
width:80rpx;
|
||||
height:80rpx;
|
||||
border-radius:50%;
|
||||
position:fixed;
|
||||
right:0;
|
||||
top:30%;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
.addDevice:active{
|
||||
background-color:deepskyblue;
|
||||
}
|
||||
.addDevice image{
|
||||
width:40rpx;
|
||||
height:40rpx;
|
||||
}
|
||||
scroll-view{
|
||||
height: 60vh;
|
||||
width: 100vw;
|
||||
}
|
||||
Reference in New Issue
Block a user