自定义底部tabbar以及首页、智能巡检的首页静态页面画写完成(首页天气获取)

components/CusTabbar/index.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="bottom_tabbar">
+		<view v-for="(item,index) in list" :key="index" @tap="changeTabbar(index)">
+			<image :src="tabbarIndex===index?item.activeImg:item.inactiveImg"></image>
+			<text :class="{'active':tabbarIndex===index}">{{item.text}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			tabbarIndex: 0
+		},
+		data() {
+			return {
+				tabbarValue: 0,
+				list: [
+					{
+						inactiveImg: this.$imgBase+'icon_home_grey.png',
+						activeImg: this.$imgBase+'icon_home_blue.png',
+						text: '首页',
+						path: '/pagesHome/index'
+					},
+					{
+						inactiveImg: this.$imgBase+'icon_xunjian_grey.png',
+						activeImg: this.$imgBase+'icon_xunjian_blue.png',
+						text: '智能巡检',
+						path: '/pagesInspection/index'
+					},
+					{
+						inactiveImg: this.$imgBase+'icon_storage_grey.png',
+						activeImg: this.$imgBase+'icon_storage_blue.png',
+						text: '仓储管理',
+						path: '/pagesStorage/home'
+					},
+				],
+				loginSuccessUrl:''
+			}
+		},
+		mounted() {
+			this.tabbarValue = this.tabbarIndex;
+		},
+		methods: {
+			changeTabbar(e) {
+				this.tabbarValue = e;
+				uni.reLaunch({
+					url: this.list[e].path
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.bottom_tabbar {
+		width: 100%;
+		height: 168rpx;
+		background: #FFFFFF;
+		display: flex;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		z-index: 999;
+		padding-top: 10rpx;
+		box-sizing: border-box;
+		border-top: 1rpx solid lavender;
+
+		&>view {
+			width: calc(100% / 3);
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+
+			text {
+				margin-top: 6rpx;
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #86909C;
+				line-height: 33rpx;
+				text-align: center;
+				&.active{
+					font-weight: bold;
+					color: #198CFF;
+				}
+			}
+		}
+	}
+</style>

manifest.json

@@ -112,6 +112,11 @@
         "usingComponents" : true,
         "optimization" : {
             "subPackages" : true
+        },
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "获取当前城市天气"
+            }
         }
     },
     "mp-alipay" : {

pages.json

@@ -248,6 +248,28 @@
 		}
 	],
 	"subPackages": [
+		{
+			"root": "pagesHome",
+			"pages": [
+				{
+					"path": "index",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
+		},
+		{
+			"root": "pagesInspection",
+			"pages": [
+				{
+					"path": "index",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
+		},
 		{
 			"root": "pagesStorage",
 			"pages": [

pages/login/wxLogin.vue

@@ -24,7 +24,7 @@
 		methods:{
 			decryptPhoneNumber(e){
 				uni.reLaunch({
-					url:'/pagesStorage/home'
+					url:'/pagesHome/index'
 				})
 				
 				return
@@ -64,7 +64,7 @@
 				})
 			},
 			cancelLogin(){
-				
+				uni.exitMiniProgram();
 			},
 		}
 	}

pagesHome/index.vue

@@ -0,0 +1,315 @@
+<template>
+	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='首页' :titleStyle="{color:'transparent'}" :showback='false' bgColor='transparent'></cus-header>
+		<image class="topbg" :src="imgBase+'home/home_top_bg.png'" mode="widthFix"></image>
+		<div class="header">
+			<div class="top">
+				<div class="left">
+					<div class="title">
+						<text>谷锐特</text>
+						<u-icon name="arrow-right" color="#FFFFFF" size="32"></u-icon>
+					</div>
+					<div class="tip">{{time}}，天气{{weatherInfo.wea||''}}，共有{{deviceNum}}个设备正在运行</div>
+				</div>
+				<div class="right">
+					<image :src="avatar"></image>
+				</div>
+			</div>
+			<div class="weather">
+				<div class="item line">
+					<div class="text">{{weatherInfo.air_level||''}}</div>
+					<p>空气质量</p>
+				</div>
+				<div class="item line">
+					<div class="text">{{weatherInfo.tem||''}}<span>℃</span></div>
+					<p>温度</p>
+				</div>
+				<div class="item">
+					<div class="text">{{weatherInfo.humidity||''}}<span>%</span></div>
+					<p>湿度</p>
+				</div>
+			</div>
+		</div>
+		<div class="boxs">
+			<div class="box">
+				<div class="left">
+					<image :src="imgBase+'home/home_icon_spjk.png'"></image>
+					<text>视频监控</text>
+				</div>
+				<div class="right">
+					<div class="num">{{18}}</div>
+					<div class="wz">设备</div>
+				</div>
+			</div>
+			<div class="box">
+				<div class="left">
+					<image :src="imgBase+'home/home_icon_zhkt.png'"></image>
+					<text>智慧空调</text>
+				</div>
+				<div class="right">
+					<div class="num">{{18}}</div>
+					<div class="wz">设备</div>
+				</div>
+			</div>
+			<div class="box">
+				<div class="left">
+					<image :src="imgBase+'home/home_icon_mjgl.png'"></image>
+					<text>门禁管理</text>
+				</div>
+				<div class="right">
+					<div class="num">{{18}}</div>
+					<div class="wz">设备</div>
+				</div>
+			</div>
+			<div class="box">
+				<div class="left">
+					<image :src="imgBase+'home/home_icon_yggl.png'"></image>
+					<text>员工管理</text>
+				</div>
+				<div class="right">
+					<div class="num">{{18}}</div>
+					<div class="wz">设备</div>
+				</div>
+			</div>
+			<div class="box">
+				<div class="left">
+					<image :src="imgBase+'home/home_icon_nhfx.png'"></image>
+					<text>能耗分析</text>
+				</div>
+				<div class="right">
+					<div class="num">{{18}}</div>
+					<div class="wz">设备</div>
+				</div>
+			</div>
+			<div class="box">
+				<div class="left">
+					<image :src="imgBase+'home/home_icon_db.png'"></image>
+					<text>电表</text>
+				</div>
+				<div class="right">
+					<div class="num">{{18}}</div>
+					<div class="wz">设备</div>
+				</div>
+			</div>
+		</div>
+		<Tabbar :tabbarIndex="0"></Tabbar>
+	</view>
+</template>
+
+<script>
+	var amapFile = require('@/utils/amap-wx.130.js');
+	import Tabbar from '@/components/CusTabbar/index.vue'
+	export default {
+		components:{
+			Tabbar
+		},
+		data(){
+			return {
+				avatar:this.$imgBase+'home/home_avator.png',
+				time:'早上好',
+				deviceNum:0,
+				weatherInfo:{}
+			}
+		},
+		onLoad() {
+			this.getTime();
+			this.getWeather();
+		},
+		methods:{
+			getTime(){
+				let hours = new Date().getHours()+1;
+				if(hours<=8) this.time = '早上好';
+				else if(hours<=11) this.time = '上午好';
+				else if(hours<=13) this.time = '中午好';
+				else if(hours<=18) this.time = '下午好';
+				else if(hours<=24) this.time = '晚上好';
+			},
+			getWeather(){
+				uni.request({
+					url:'http://gfeljm.tianqiapi.com/free/v2030?appid=31449887&appsecret=7F6JCrvB&adcode=340100000000',
+					success:res=>{
+						this.weatherInfo = res.data;
+						this.weatherInfo.humidity = this.weatherInfo.humidity.replace('%','')
+					}
+				})
+				var myAmapFun = new amapFile.AMapWX({key:'f83be04fc5f239edfa9f1201e4bc7c47key'});
+				myAmapFun.getWeather({
+					success: function(data) {
+						console.log(data);
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.tabPage{
+		width: 100%;
+		padding: 0 0 188rpx;
+		box-sizing: border-box;
+		background: #F4F8FB;
+		
+		.topbg{
+			width: 100%;
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 0;
+		}
+		
+		.header{
+			width: 100%;
+			position: relative;
+			
+			.top{
+				width: 100%;
+				padding: 26rpx 40rpx 0;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.left{
+					.title{
+						display: flex;
+						align-items: center;
+						text{
+							font-family: PingFang-SC, PingFang-SC;
+							font-weight: bold;
+							font-size: 48rpx;
+							color: #FFFFFF;
+							line-height: 48rpx;
+							text-align: left;
+							letter-spacing: 2rpx;
+							margin-right: 20rpx;
+						}
+					}
+					.tip{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						line-height: 30rpx;
+						text-align: left;
+						margin-top: 20rpx;
+					}
+				}
+				.right{
+					width: 90rpx;
+					height: 90rpx;
+					background: #FFFFFF;
+					padding: 2rpx;
+					box-sizing: border-box;
+					border-radius: 50%;
+					image{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+			}
+			
+			.weather{
+				width: 100%;
+				margin-top: 50rpx;
+				display: flex;
+				.item{
+					width: calc(100% / 3);
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					position: relative;
+					&::after{
+						content: '';
+						width: 1rpx;
+						height: 64rpx;
+						background: #CCCCCC;
+						position: absolute;
+						top:10rpx;
+						right: 0;
+					}
+					.text{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 44rpx;
+						color: #FFFFFF;
+						line-height: 44rpx;
+						span{
+							font-weight: 400;
+							font-size: 20rpx;
+						}
+					}
+					p{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						line-height: 24rpx;
+						text-align: center;
+						margin-top: 16rpx;
+					}
+				}
+			}
+		}
+		
+		.boxs{
+			width: calc(100% - 48rpx);
+			margin: 20rpx 24rpx 0;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			position: relative;
+			.box{
+				width: calc(50% - 11rpx);
+				padding: 36rpx 25rpx 40rpx 22rpx;
+				box-sizing: border-box;
+				background: #FFFFFF;
+				border-radius: 8rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+				margin-top: 20rpx;
+				.left{
+					display: flex;
+					flex-direction: column;
+					image{
+						width: 90rpx;
+						height: 88rpx;
+					}
+					text{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 28rpx;
+						color: #333333;
+						line-height: 28rpx;
+						text-align: left;
+						margin-top: 24rpx;
+						padding-left: 2rpx;
+					}
+				}
+				.right{
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					.num{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 32rpx;
+						color: #333333;
+						line-height: 32rpx;
+						text-align: center;
+					}
+					.wz{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #999999;
+						line-height: 24rpx;
+						text-align: center;
+						margin-top: 24rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pagesInspection/index.vue

@@ -0,0 +1,197 @@
+<template>
+	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title='智能巡检' :showback='false' bgColor='transparent'></cus-header>
+		<image class="topbg" :src="imgBase+'inspection/inspection_top_bg.png'" mode="widthFix"></image>
+		<div class="top">
+			<div class="box">
+				<image :src="imgBase+'inspection/inspection_img_xsbx.png'"></image>
+				<text>线上报修</text>
+			</div>
+			<div class="box">
+				<image :src="imgBase+'inspection/inspection_img_xjjl.png'"></image>
+				<text>巡检记录</text>
+			</div>
+			<div class="box">
+				<image :src="imgBase+'inspection/inspection_img_kjjl.png'"></image>
+				<text>扣缴记录</text>
+			</div>
+		</div>
+		<div class="card">
+			<div class="title">
+				<div class="left">工单待办</div>
+				<div class="right">
+					<text>立即查看</text>
+					<u-icon name="arrow-right" color="#198CFF" size="28"></u-icon>
+				</div>
+			</div>
+			<div class="info">
+				<div class="pre">
+					<text>{{3}}</text>
+					<p>待指派</p>
+				</div>
+				<div class="pre">
+					<text>{{2}}</text>
+					<p>待维修</p>
+				</div>
+				<div class="pre">
+					<text>{{1}}</text>
+					<p>已维修</p>
+				</div>
+			</div>
+		</div>
+		<div class="card">
+			<div class="title">
+				<div class="left">设备</div>
+				<div class="right">
+					<text>立即查看</text>
+					<u-icon name="arrow-right" color="#198CFF" size="28"></u-icon>
+				</div>
+			</div>
+			<div class="info">
+				<div class="pre">
+					<text>{{3}}</text>
+					<p>设备总数</p>
+				</div>
+				<div class="pre">
+					<text>{{2}}</text>
+					<p>正常设备</p>
+				</div>
+				<div class="pre">
+					<text>{{1}}</text>
+					<p>异常设备</p>
+				</div>
+			</div>
+		</div>
+		<Tabbar :tabbarIndex="1"></Tabbar>
+	</view>
+</template>
+
+<script>
+	import Tabbar from '@/components/CusTabbar/index.vue'
+	export default {
+		components:{
+			Tabbar
+		},
+		data(){
+			return {
+				
+			}
+		},
+		methods:{
+			
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.tabPage{
+		width: 100%;
+		padding: 0 24rpx 188rpx;
+		box-sizing: border-box;
+		background: #F4F8FB;
+		
+		.topbg{
+			width: 100%;
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 0;
+		}
+		
+		.top{
+			width: 100%;
+			position: relative;
+			display: flex;
+			justify-content: space-around;
+			margin-top: 20rpx;
+			.box{
+				width: calc(100% / 3 - 10rpx);
+				padding: 36rpx 0 40rpx;
+				box-sizing: border-box;
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				image{
+					width: 98rpx;
+					height: 98rpx;
+				}
+				text{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 28rpx;
+					color: #333333;
+					line-height: 28rpx;
+					text-align: center;
+					margin-top: 20rpx;
+				}
+			}
+		}
+		
+		.card{
+			width: 100%;
+			position: relative;
+			background: #FFFFFF;
+			border-radius: 16rpx;
+			padding: 36rpx 0 40rpx;
+			box-sizing: border-box;
+			margin-top: 20rpx;
+			.title{
+				width: 100%;
+				padding: 0 24rpx;
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.left{
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 36rpx;
+					color: #333333;
+					line-height: 36rpx;
+					text-align: left;
+				}
+				.right{
+					display: flex;
+					align-content: center;
+					text {
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 26rpx;
+						color: #198CFF;
+						line-height: 28rpx;
+						text-align: left;
+					}
+				}
+			}
+			.info{
+				width: 100%;
+				margin-top: 64rpx;
+				display: flex;
+				.pre{
+					width: calc(100% / 3);
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					text{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 36rpx;
+						color: #333333;
+						line-height: 36rpx;
+					}
+					p{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #999999;
+						line-height: 28rpx;
+						text-align: center;
+						margin-top: 20rpx;
+					}
+				}
+			}
+		}
+	}
+</style>

pagesStorage/home.vue

@@ -22,7 +22,7 @@
 		<div class="chartBox">
 			<p class="title">库存数量占比</p>
 			<div class="chart">
-				<l-echart ref="kcslzbChartRef" @finished="initKcslzb"></l-echart>
+				<l-echart ref="kcslzbChartRef" :canvas2d="true" @finished="initKcslzb"></l-echart>
 			</div>
 		</div>
 		<div class="chartBox">
@@ -32,7 +32,7 @@
 					<div class="pre" :class="{'active':rkIdx===0}" @tap="changeRkCahrtData(0)">按月</div>
 					<div class="pre" :class="{'active':rkIdx===1}" @tap="changeRkCahrtData(1)">按年</div>
 				</div>
-				<l-echart ref="rktjChartRef" @finished="initRktj"></l-echart>
+				<l-echart ref="rktjChartRef" :canvas2d="true" @finished="initRktj"></l-echart>
 			</div>
 		</div>
 		<div class="chartBox">
@@ -42,17 +42,22 @@
 					<div class="pre" :class="{'active':ckIdx===0}" @tap="changeCkCahrtData(0)">按月</div>
 					<div class="pre" :class="{'active':ckIdx===1}" @tap="changeCkCahrtData(1)">按年</div>
 				</div>
-				<l-echart ref="cktjChartRef" @finished="initCktj"></l-echart>
+				<l-echart ref="cktjChartRef" :canvas2d="true" @finished="initCktj"></l-echart>
 			</div>
 		</div>
+		<Tabbar :tabbarIndex="2"></Tabbar>
 	</div>
 </template>
 
 <script>
 	import * as echarts from '@/pagesStorage/components/lime-echart/static/echarts.min.js'
 	import lEchart from '@/pagesStorage/components/lime-echart/components/l-echart/l-echart.vue'
+	import Tabbar from '@/components/CusTabbar/index.vue'
 	export default {
-		components:{lEchart},
+		components:{
+			lEchart,
+			Tabbar
+		},
 		data(){
 			return {
 				inNum:'9879',
@@ -281,7 +286,7 @@
 
 <style scoped lang="less">
 	.tabPage{
-		padding: 0 24rpx 194rpx;
+		padding: 0 24rpx 188rpx;
 		background: #F4F8FB;
 		
 		.topbg{

pagesStorage/inventoryStatistics/index.vue

@@ -16,7 +16,7 @@
 			<div class="left">选择仓库</div>
 			<div class="right" @tap="selectWarehouse">
 				<text v-if="warehouseName">{{warehouseName}} ></text>
-				<text class="tip" v-else>请选择仓库 ></text>
+				<div class="tip" v-else>请选择仓库<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon></div>
 			</div>
 		</div>
 		<div class="list" :style="{'height':'calc(100vh - '+(mt+125)+'px)'}">
@@ -177,6 +177,10 @@
 				color: #4E5969;
 				line-height: 42rpx;
 				text-align: right;
+				.tip{
+					display: flex;
+					align-items: center;
+				}
 			}
 		}
 		

pagesStorage/storageRecord/index.vue

@@ -24,7 +24,7 @@
 			<div class="left">选择仓库</div>
 			<div class="right" @tap="selectWarehouse">
 				<text v-if="warehouseName">{{warehouseName}} ></text>
-				<text class="tip" v-else>请选择仓库 ></text>
+				<div class="tip" v-else>请选择仓库<u-icon name="arrow-right" color="#198CFF" size="32" style="margin-left: 10rpx;"></u-icon></div>
 			</div>
 		</div>
 		<div class="list" :style="{'height':'calc(100vh - '+(mt+175)+'px)'}">
@@ -36,7 +36,7 @@
 								<div class="name">{{good.item.itemName}}</div>
 								<div class="ktype" @tap="toDetail(good.id)">
 									<div class="box" :class="typeClass[good.orderType]||'mr'">{{typeCfg[good.orderType]||''}}</div>
-									<span>></span>
+									<span><u-icon name="arrow-right" color="#86909C" size="32"></u-icon></span>
 								</div>
 							</div>
 							<div class="info">
@@ -279,6 +279,10 @@
 				color: #4E5969;
 				line-height: 42rpx;
 				text-align: right;
+				.tip{
+					display: flex;
+					align-items: center;
+				}
 			}
 		}