SmartBeehive/pages/index/index.vue

<template>
	<view class="page">
		<view class="backImg">
			<image src="https://api.ccttiot.com/smartmeter/img/static/utkroSMjT09nmCYaA7FT" mode=""></image>
		</view>
		<view class="tipbox" v-if="haveApiary">
			<view class="tip_cont">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uKW514Tl8TVUiaJW2ygl" mode=""></image>
				<view class="txt">
					蜂箱数量:{{tjobj.beehiveCount == undefined ? '' : tjobj.beehiveCount}}
				</view>
			</view>
			<view class="tip_cont" style="margin-top: 48rpx;">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uBEd8suIZ2vdqOGI8rP6" mode=""></image>
				<view class="txt">
					蜂场数量:{{tjobj.apiaryCount == undefined ? '' : tjobj.apiaryCount}}
				</view>
			</view>
			<view class="tip_cont" style="margin-top: 48rpx;">
				<image src="https://api.ccttiot.com/smartmeter/img/static/ufgkE5w8AND4eLZD94RR" mode=""></image>
				<view class="txt">
					预警数量:{{tjobj.warnCount == undefined ? '' : tjobj.warnCount}}
				</view>
			</view>
		</view>
		<view class="no_cont" @click="addApiary()" v-if="haveApiary == false">
			<view class="img" >
				<image src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode=""></image>
			</view>
			<view class="txt">
				当前还没有添加蜂场哦,点击跳转添加蜂场
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="isLoading" />
		<view class="warp_box" v-if="haveApiary">
			<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx'
				previous-margin='50rpx' next-margin='50rpx' :circular='true' @change="swiperchange">
				<swiper-item>
					<view class="swiper-item">
						<view class="card_box">
							<view class="card">
								<view class="card_top">
									<view class="top_left">

										<image src="https://api.ccttiot.com/smartmeter/img/static/uhsU6Y1K35jxA4aRauzy"
											mode=""></image>
										近7天蜜蜂总出勤变化
									</view>

									<view class="top_right">
										<view style="width: 1rpx;">

										</view>
										<view class="txt">
											<view class="iconfont icon-xiangyou1"></view>
										</view>

									</view>
								</view>

								<view class="echarts">
									<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas4"
										canvas-id="uni-ec-canvas" :ec="ec">
									</uni-ec-canvas>
								</view>
							</view>


						</view>

					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">

						<view class="card_box">

							<view class="card">
								<view class="card_top">
									<view class="top_left">

										<image src="https://api.ccttiot.com/smartmeter/img/static/uk7CvwzeU0ukxvS9cBtD"
											mode=""></image>
										近7天蜂箱总重量变化
									</view>

									<view class="top_right">
										<view style="width: 1rpx;">

										</view>
										<view class="txt">
											<view class="iconfont icon-xiangyou1"></view>
										</view>

									</view>
								</view>
								<view class="echarts">
									<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas3"
										canvas-id="uni-ec-canvas" :ec="ec">
									</uni-ec-canvas>
								</view>
							</view>

						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info_cont" v-if="haveApiary">
			<view class="cont">
				<view class="cont_top">
					电量不足
				</view>
				<view class="cont_bot">
					{{yjobj[4].count == undefined ? '' : yjobj[4].count}}
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					出勤异常
				</view>
				<view class="cont_bot">
					{{yjobj[5].count == undefined ? '' : yjobj[5].count}}
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					重量异常
				</view>
				<view class="cont_bot">
					{{yjobj[3].count == undefined ? '' : yjobj[3].count}}
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					温度异常
				</view>
				<view class="cont_bot">
					{{yjobj[1].count == undefined ? '' : yjobj[1].count}}
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					湿度异常
				</view>
				<view class="cont_bot">
					{{yjobj[2].count == undefined ? '' : yjobj[2].count}}
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					声音异常
				</view>
				<view class="cont_bot">
					{{yjobj[6].count == undefined ? '' : yjobj[6].count}}
				</view>
			</view>
		</view>
		<view v-if="logoflag" class="" style="text-align: right;padding-right: 30rpx;color: #FFCC25;">
			<text style="border-bottom: 1px solid #FFCC25;" @click="btnlogo">暂未登录，去登录</text>
		</view>
		<tab-bar :indexs='0'></tab-bar> 
	</view>
</template>


<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	let chart = null

	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				logoflag: false,
				ec: {
					lazyLoad: true
				},
				bgc: {
					backgroundColor: "#F7FAFE",

				},
				iconType: 'flower',
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				curtitidx: 0,
				swiperHeight: 426,
				activeSwiperHeight: 500, // 激活的swiper高度
				swiperItems: [1, 2, ], // Placeholder for swiper items
				numdata: [],
				numdatas: [],
				haveApiary: true,
				yeartime: {
					year: '',
					month: '',
					day: ''
				},
				yeartimes: {
					year: '',
					month: '',
					day: ''
				},
				chartData3: [],
				chartData4: [],
				tjobj: {},
				yjobj: []
			}
		},

		onShow() {
			this.getuserinfo()
         
			setTimeout(() => {
				
				
			}, 1500);
			const now = new Date();
			const previousDay = new Date(now)
			this.yeartime.year = now.getFullYear()
			this.yeartime.month = String(previousDay.getMonth() + 1).padStart(2, '0')
			this.yeartime.day = String(now.getDate()).padStart(2, '0')


			previousDay.setDate(now.getDate() - 7)
			this.yeartimes.year = previousDay.getFullYear()
			this.yeartimes.month = String(previousDay.getMonth() + 1).padStart(2, '0')
			this.yeartimes.day = String(previousDay.getDate()).padStart(2, '0')

		},
		onPullDownRefresh() {},

		methods: {
			// 点击跳转登录页
			btnlogo(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 未登录调静默获取token
			jmlogin() {
				let taht = this
				wx.login({
					success(res) {
						if (res.code) {
							console.log(res.code);
							let data = {
								loginCode: res.code,
								deptId: 100
							}
							taht.$u.post('/app/auth/wxLogin', data).then(res => {
								if (res.code == 200) {
									taht.logoflag = false
									uni.setStorageSync('token', res.token);
									taht.getchartData3()
									taht.getchartData4()
									taht.gettj()
									taht.getyj() 
								}else if(res.code == 10003){
									taht.logoflag = true
								}
								// console.log(res,10003);
							})
						}
					},
				})
			},
			getuserinfo(){
				this.$u.get(`/app/user/userInfo`).then(res => {
					if (res.code == 200) {
						if(res.data.type==1){
							   this.ishave()
							this.getchartData3()
							this.getchartData4()
							this.gettj()
							this.getyj() 
						}else{
								
							
							// uni.navigateTo({
							// 	url:
							// })
						}
					}else{
						setTimeout(()=>{
							let code= uni.getStorageSync('code');
							console.log(code,'codecodecode');
							if(code==200){
								this.getuserinfo()
							}else{
								this.logoflag = true
							}
						},500)
					}
				})
			},
			// 统计
			gettj() {
				this.$u.get(`/farmer/report/statistic`).then(res => {
					if (res.code == 200) {
						this.tjobj = res.data
					}
				})
			},
			// 预警
			getyj() {
				this.$u.get(`/farmer/report/warnCount`).then(res => {
					if (res.code == 200) {
						this.yjobj = res.data
					}
				})
			},

			// 重量图表
			getchartData3() {
				let time = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
				let times = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
				this.$u.get(`/farmer/report/weightDay?dateRange=${times},${time}&beehiveId=${''}`).then(res => {
					if (res.code == 200) {
						this.chartData3 = res.data.map(item => item.value)
						this.$refs.canvas3.init(this.initChart3)
					}
				})
			},
			// 出勤图表
			getchartData4() {
				let time = this.yeartime.year + '-' + this.yeartime.month + '-' + this.yeartime.day
				let times = this.yeartimes.year + '-' + this.yeartimes.month + '-' + this.yeartimes.day
				this.$u.get(`/farmer/report/ioCount?dateRange=${times},${time}&beehiveId=${''}`).then(res => {
					if (res.code == 200) {
						this.chartData4 = res.data.map(item => item.value)
						this.$refs.canvas4.init(this.initChart4)
					}
				})
			},

			addApiary() {
				uni.navigateTo({
					url: '/pages/Apiary/AddApiary'
				})
			},
			ishave() {
				let data = {
					pageNum: 1,
					pageSize: 10
				}
				this.$u.get('/farm/apiary/list?', data).then((res) => {
					if (res.code == 200) {
						if (res.total >= 1) {
							// this.getnum()
							// this.getnums()
							this.haveApiary = true
						} else {
							this.haveApiary = false
						}
					}
				})
			},
			swiperchange(e) {
				this.curtitidx = e.detail.current
				// console.log(e, 'aaaa');
			},
			getnum() {
				const currentDate = new Date();

				// 获取前七天的日期
				const sevenDaysAgoDate = new Date();
				sevenDaysAgoDate.setDate(currentDate.getDate() - 7);

				// 格式化日期为 'YYYY-MM-DD'
				const formatDate = (date) => {
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					return `${year}-${month}-${day}`;
				};

				const currentDateString = formatDate(currentDate);
				const sevenDaysAgoDateString = formatDate(sevenDaysAgoDate);

				// 赋值给 data 中的 dateRange
				let data = {
					dateRange: `${sevenDaysAgoDateString},${currentDateString}`
				};
				this.$u.get('/farmer/report/ioCount?', data).then((res) => {

					if (res.code === 200) {
						this.numdata = res.data
						this.$refs.canvas4.init(this.initChart4)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});

					}
				})
			},
			getnums() {
				const currentDate = new Date();

				// 获取前七天的日期
				const sevenDaysAgoDate = new Date();
				sevenDaysAgoDate.setDate(currentDate.getDate() - 7);

				// 格式化日期为 'YYYY-MM-DD'
				const formatDate = (date) => {
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					return `${year}-${month}-${day}`;
				};

				const currentDateString = formatDate(currentDate);
				const sevenDaysAgoDateString = formatDate(sevenDaysAgoDate);

				// 赋值给 data 中的 dateRange
				let data = {
					dateRange: `${sevenDaysAgoDateString},${currentDateString}`
				};
				this.$u.get('/farmer/report/weightDay?', data).then((res) => {

					if (res.code === 200) {
						this.numdatas = res.data
						this.$refs.canvas3.init(this.initChart3)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});

					}
				})
			},
			// 进出量
			initChart4(canvas, width, height, canvasDpr) {
				let that = this

				const option = {
					grid: {
						left: '4%',
						right: '4%',
						bottom: '3%',
						top: '4%',
						containLabel: true
					},
					xAxis: {
						show: true,
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false // 隐藏X轴线
						},
						axisTick: {
							show: false // 隐藏X轴刻度
						},
						axisLabel: {
							show: false // 隐藏X轴标签
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							rotate: 0,
						},
						splitLine: {
							show: false,
						},
						// data: that.chartday,
					},
					yAxis: {
						show: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							formatter: function(value) {
								// 保留两位小数，没有小数时显示00
								return value + '只'
							},
						},
						splitLine: {
							show: true, // 显示X轴网格线
							lineStyle: {
								type: 'dashed', // 设置网格线为虚线
								color: '#ccc', // 可以设置虚线的颜色
								width: 1 // 可以设置虚线的宽度
							}
						}
					},
					visualMap: {
						type: 'piecewise',
						show: false,
						dimension: 0,
						seriesIndex: 0,
						pieces: [{
								gt: 1,
								lt: 3,
								color: 'RGBA(255, 241, 201, 1)',
							},
							{
								gt: 5,
								lt: 7,
								color: 'RGBA(255, 241, 201, 1)',
							},
						],
					},
					series: [{
						type: 'line',
						smooth: 0.6,
						symbol: 'none',
						lineStyle: {
							color: '#FFE28C',
							width: 4,
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#FFF1C9'
								}, ]),
							},
						},
						data: that.chartData4,
					}],
				};
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})

				option.series[0].data = that.chartData4
				canvas.setChart(chart)
				chart.setOption(option)
				return chart
			},
			//重量
			initChart3(canvas, width, height, canvasDpr) {
				let that = this

				const option = {
					grid: {
						left: '2%',
						right: '10%',
						bottom: '3%',
						top: '4%',
						containLabel: true
					},
					xAxis: {
						show: true,
						type: 'category',
						boundaryGap: false,
						axisLine: {
							show: false // 隐藏X轴线
						},
						axisTick: {
							show: false // 隐藏X轴刻度
						},
						axisLabel: {
							show: false // 隐藏X轴标签
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							rotate: 0,
						},
						splitLine: {
							show: false,
						},
						// data: that.chartday,
						// data: that.numdata.map(item => item.date)
					},
					yAxis: {
						show: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							color: '#ccc',
							fontSize: 11,
							formatter: function(value) {
								// 保留两位小数，没有小数时显示00
								return value + 'Kg'
							},
						},
						splitLine: {
							show: true, // 显示X轴网格线
							lineStyle: {
								type: 'dashed', // 设置网格线为虚线
								color: '#ccc', // 可以设置虚线的颜色
								width: 1 // 可以设置虚线的宽度
							}
						}
					},
					visualMap: {
						type: 'piecewise',
						show: false,
						dimension: 0,
						seriesIndex: 0,
						pieces: [{
								gt: 1,
								lt: 3,
								color: 'RGBA(255, 241, 201, 1)',
							},
							{
								gt: 5,
								lt: 7,
								color: 'RGBA(255, 241, 201, 1)',
							},
						],
					},
					series: [{
						type: 'line',
						smooth: 0.6,
						symbol: 'none',
						lineStyle: {
							color: '#FFE28C',
							width: 4,
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#FFF1C9'
								}, ]),
							},
						},
						data: that.chartData3,
					}],
				};
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})

				option.series[0].data = that.chartData3
				canvas.setChart(chart)
				chart.setOption(option)
				return chart
			},
			// 获取设备详情

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7FAFE;
	}

	.page {
		width: 750rpx;

		.backImg {
			position: fixed;
			top: 0;
			z-index: -1;

			image {
				width: 750rpx;
				height: 870rpx;
			}
		}

		.no_cont {
			margin: 500rpx auto 0;
			width: 432rpx;

			.img {
				image {
					width: 432rpx;
					height: 432rpx;
				}
			}

			.txt {
				margin-top: 50rpx;
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #808080;
			}
		}

		.info_cont {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-around;
			padding: 38rpx 74rpx 28rpx 74rpx;
			margin: 32rpx auto;
			width: 638rpx;
			height: 256rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.cont:nth-child(3n) {
				margin-right: 0rpx;
			}

			.cont {
				margin-right: 100rpx;
				width: 96rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.cont_top {
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;

				}

				.cont_bot {

					margin-top: 4rpx;
					width: 96rpx;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
		}

		.warp_box {
			margin-top: 128rpx;

			.swiper {
				.swiper-item {
					display: flex;
					justify-content: center;
					transition: height 0.3s ease-in-out;

					&.active {
						height: 500rpx; // 激活状态的高度
					}

					&:not(.active) {
						height: 426rpx; // 非激活状态的高度
					}

					.card_box {
						display: flex;
						flex-wrap: wrap;

						.card {
							padding: 18rpx;
							width: 638rpx;
							height: 426rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
							border-radius: 28rpx 28rpx 28rpx 28rpx;

							.card_top {
								display: flex;
								align-items: center;

								.top_left {

									display: flex;
									align-items: center;
									font-weight: 400;
									font-size: 36rpx;
									color: #3D3D3D;

									image {
										margin-right: 24rpx;
										margin-left: 28rpx;
										width: 25.03rpx;
										height: 34rpx;
									}
								}

								.top_cont {
									width: 33.33%;
									text-align: center;
									font-weight: 600;
									font-size: 36rpx;
									color: #3D3D3D;
								}

								.top_right {
									margin-left: auto;
									display: flex;
									align-items: center;

									.txt {
										display: flex;
										align-items: center;
										flex-wrap: nowrap;
										margin-left: auto;
										font-weight: 400;
										font-size: 32rpx;
										color: #4D4D4D;

										.icon-xiangyou1 {
											margin-top: 4rpx;
											margin-left: 8rpx;
										}
									}
								}
							}

							.echarts {

								margin-top: 24rpx;
								width: 100%;
								// height: 80%;

								height: 344rpx;
							}
						}

					}
				}
			}
		}

		.tipbox {
			width: 300rpx;
			display: flex;
			flex-wrap: wrap;
			// position: relative;
			margin-top: 186rpx;
			margin-left: 56rpx;

			.tip_cont {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;

				image {
					margin-right: 6rpx;
					width: 38rpx;
					height: 38rpx;
				}

				// display: inline-flexbox;
				flex-wrap: nowrap;
				padding: 8rpx 22rpx;
				background: rgba(61, 61, 61, 0.5);
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				font-weight: 500;
				font-size: 32rpx;
				color: #FAFDFD;

			}
		}
	}
</style>