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">
					蜂箱数量:10
				</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">
					蜂箱数量:10
				</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">
					蜂箱数量:10
				</view>
			</view>
		</view>
		<view class="no_cont" v-if="!haveApiary">
			<view class="img"  @click="addApiary()">
				<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">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					出勤异常
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					重量异常
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					温度异常
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					湿度异常
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>
			<view class="cont">
				<view class="cont_top">
					声音异常
				</view>
				<view class="cont_bot">
					0
				</view>
			</view>

		</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 {
				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:[],
				haveApiary:true
			}
		},

		onShow() {
			
			
			this.ishave()
			// setTimeout(() => {


				
			// 	this.$refs.canvas4.init(this.initChart4)

			// }, 200);

		},
		onPullDownRefresh() {
		},

		methods: {
			addApiary(){
				uni.navigateTo({
					url:'/pages/Apiary/AddApiary'
				})
			},
			ishave(){
				let data ={
					pageNum:1,
					pageSize:0
				}
				this.$u.get('/farm/apiary/list?',data ).then((res) => {
				
					if (res.code === 200) {
						if(res.total>1){
							this.getnum()
						}else{
							this.haveApiary=false
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
				
					}
				})
			},
			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.canvas3.init(this.initChart4)
					} 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.numdata.map(item => item.value),
					}],
				};
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})


				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.numdata.map(item => item.value),
					}],
				};
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})


				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>