<template>
	<!-- 蜂箱详情 -->
	<view class="page">
		<!-- 吸顶蜂箱名称 -->
		<view class="ceiling">
			<u-skeleton v-if='loading' :animate="true" rows="1"></u-skeleton>
			<view class="early" v-if="loading==false">
				<view>

					<view class="group_7 bianhao-top-yi">
						<view class="bianhao-zuo">
							<view class="font_2">{{listdata.name}}</view>
							<view class=" justify-start  self-start text-wrapper" style="background-color: red;"
								:id="listdata.status_text == '在线' ? 'text-wrapper-bgc1' : '<strong></strong>text-wrapper-bgc2'">
								<view class="font_33">{{listdata.status_text}}</view>
							</view>

							<image v-if="listdata.warning_battery_low" class=" image_7 image_8"
								src="../../../static/蜂箱-电量预警.png" />
							<image v-if="listdata.warning_shake" class=" image_7 image_9"
								src="../../../static/蜂箱-震动预警.png" />
							<image v-if="listdata.warning_temperature" class=" image_7 image_10"
								src="../../../static/蜂箱-温度预警.png" />
							<image v-if="listdata.warning_humidity" class=" image_7 image_11"
								src="../../../static/蜂箱-湿度预警.png" />
							<image v-if="listdata.warning_weight" class=" image_7 image_12"
								src="../../../static/蜂箱-重量预警.png" />
							<image v-if="listdata.warning_attendance" class=" image_7 image_13"
								src="../../../static/蜂箱-蜂场预警.png" />
						</view>

						<!-- 按钮 -->
						<view @click.stop="HiddenClick(item)" class="dianbox">
						</view>
					</view>
					<view class="d-baseline group_7 view_2">
						<text class="font_4">{{listdata.qrcode}}</text>
						<text class="font_4 text_6">丨 {{listdata.update_time}}更新</text>
						<text class="font_4 text_7">丨</text>
						<text class="font_4 text_8">{{listdata.address}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 地图 -->
		<view class="mapbox">
			<map class="map" id="map" ref="map" style="width: 100%; height: 100%;" :scale="map.zoomSize"
				:latitude="map.latitude" :longitude="map.longitude" :markers="map.markers" :enable-satellite="map.isMap"
				show-location>
			</map>
			<view class="maskmap" v-if="maskflag">
				未获取到定位信息
			</view>
		</view>
		<!-- 详情 -->
		<view class="detailbox">
			<u-skeleton :loading="loading" :animate="true" rows="3"></u-skeleton>
			<view class="massagebox" v-if="loading==false">
				<view class="dflex">
					<view class="dflex1">
						<image class=" image_16" src="../../../static/蜂箱-温度.png" />
						<view class="dflex-text">温度 {{listdata.temperature_in_box}}</view>
					</view>
					<view class="dflex1 leftmg">
						<image class=" image_16" src="../../../static/蜂箱-湿度.png" />
						<view class="dflex-text">湿度 {{listdata.humidity_in_box}}</view>
					</view>
				</view>
				<view class="dflex2 magtop">
					<view class="dflex1">
						<image class=" image_16" src="../../../static/16994974076527700865.png" />
						<view class="dflex-text">{{listdata.wind}}</view>
					</view>
					<view class="dflex2-text-Date">更新 {{listdata.update_time}}</view>
				</view>
			</view>
			<view class="chart-box">
				<view class="control-box" v-if="loading==false">
					<view class="flex-taxt1">
						<image class=" image_15" src="../../../static/蜂箱-电量.png" />
						<text class="font_5  text-l text_15">电量</text>
						<text class="self-start font_5">{{listdata.battery}}</text>
					</view>
					<view class="flex-taxt1">
						<image class=" image_19" src="../../../static/加热.png" />
						<text class="font_5 text_15">加热</text>
						<switch :checked="listdata.heat === 1 ? true : false" @change="warmbut" class="image_201"
							:color="'#3a942b'" style="transform:scale(0.5)" />
					</view>
					<view class="flex-taxt1">
						<image class=" image_21" src="../../../static/蜂箱-风扇.png" />
						<text class="font_5 text_15">风扇</text>
						<switch :checked="listdata.fan === 1 ? true : false" @change="fenlampbut" class="image_201"
							:color="'#3a942b'" style="transform:scale(0.5)" />
					</view>
				</view>
				<view class="change-chart">
					<!-- 7天蜂箱温度折线图 -->
					<view class="xin-box">
						<view>
							<view class="hedlien-box">
								近7天蜂箱温度变化(℃)
							</view>
							<view class="xin-box-title">
								<view class="flex-taxt">
									<image class=" image_16" src="../../../static/蜂箱-温度.png" />
									<view>
										<text class="font_5  text-l">当前箱内</text>
										<text class="self-start font_5 text_13">{{listdata.temperature_in_box}}</text>
									</view>
								</view>
								<view class="flex-taxt">
									<image class=" image_16" src="../../../static/蜂箱详情-温度深.png" />
									<view>
										<text class="font_5  text-l">当前箱外</text>
										<text class="self-start font_5 text_13">{{listdata.temperature_out_box}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="line" :canvas2d="false" :opts="optsZhe1" :chartData="chartDataZhe1"
								:animation="false" :tooltipShow="false" :tapLegend="false" />
						</view>
					</view>
					<!-- 7天蜂湿度度折线图 -->
					<view class="xin-box">
						<view>
							<view class="hedlien-box">
								近7天蜂箱湿度变化(%RH)
							</view>
							<view class="xin-box-title">
								<view class="flex-taxt">
									<image class=" image_16" src="../../../static/蜂箱-湿度.png" />
									<view>
										<text class="font_5  text-l">当前箱内</text>
										<text class="self-start font_5 text_13">{{listdata.humidity_in_box}}</text>
									</view>
								</view>
								<view class="flex-taxt">
									<image class=" image_16" src="../../../static/蜂箱详情-湿度深.png" />
									<view>
										<text class="font_5  text-l">当前箱外</text>
										<text class="self-start font_5 text_13">{{listdata.humidity_out_box}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="line" :canvas2d="false" :opts="optsZhe2" :chartData="chartDataZhe2"
								:animation="false" :tooltipShow="false" :tapLegend="false" />
						</view>
					</view>
					<!-- 7天蜂重量折线图 -->
					<view class="xin-box">
						<view>
							<view class="hedlien-box">
								近7天蜂箱重量变化(Kg)
							</view>
							<view class="xin-box-title">
								<view class="flex-taxt">
									<image class="image_17" src="../../../static/重量.png" />
									<view>
										<text class="font_5  text-l">当前</text>
										<text class="self-start font_5 text_13">{{listdata.weight}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="line" :canvas2d="false" :opts="optsZhe3" :chartData="chartDataZhe3"
								:animation="false" :tooltipShow="false" :tapLegend="false" />
						</view>
					</view>
					<!-- 7天蜂出勤次数柱状图 -->
					<view class="xin-box">
						<view>
							<view class="hedlien-box">
								近7天蜜蜂出勤次数变化(次)
							</view>
							<view class="xin-box-title">
								<view class="flex-taxt">
									<image class=" image_16" src="../../../static/e5e18447349367492c81f64ccec7ebcb.png"
										style="width: 28.84rpx;height: 28rpx;">
										<view>
											<text class="font_5  text-l">当前</text>
											<text class="self-start font_5 text_13">{{listdata.attendance_day}}次</text>
										</view>
								</view>

							</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="optsZhu" :chartData="chartDataZhu" :errorShow="false"
								:errorReload="false" :animation="false" :tooltipShow="false" :tapLegend="false" />
						</view>
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import request from '../../../utils/request.js'
	export default {
		data() {
			return {
				loading: true,
				switchk: true,
				maskflag:false,
				listdata: {},
				id: null,
				chartdataObj: {},
				map: {
					zoomSize: 15,
					latitude: null,
					longitude: null,
					isMap: false,
					markers: [{
						latitude: null,
						longitude: null,
						width: 15,
						height: 15,
						id: 0,
						iconPath: '../../../static/a11.png',
					}],
				},
				// 折线图1
				chartDataZhe1: {},
				optsZhe1: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#89c28c", "#23693f", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [10, 10, 0, 10],
					fontSize: 12,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: true,
						position: "top",
						float: "right",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 12,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 20
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: true,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 12,
						lineHeight: 20,
						marginTop: 0,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: [{
							type: "value",
							position: "left",
							disabled: false,
							axisLine: false,
							axisLineColor: "#CCCCCC",
							calibration: false,
							fontColor: "#666666",
							fontSize: 12,
							textAlign: "right",
							title: "",
							titleFontSize: 13,
							titleOffsetY: 0,
							titleOffsetX: 0,
							titleFontColor: "#666666",
							// min: 0,
							max: null,
							tofix: null,
							unit: "",
							format: ""
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "none",
							onShadow: false,
							animation: "vertical"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 12,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},
				// 折线图2
				chartDataZhe2: {},
				optsZhe2: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#89c28c", "#23693f", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [10, 10, 0, 10],
					fontSize: 12,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: true,
						position: "top",
						float: "right",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 12,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 20
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: true,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 12,
						lineHeight: 20,
						marginTop: 0,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: [{
							type: "value",
							position: "left",
							disabled: false,
							axisLine: false,
							axisLineColor: "#CCCCCC",
							calibration: false,
							fontColor: "#666666",
							fontSize: 12,
							textAlign: "right",
							title: "",
							titleFontSize: 13,
							titleOffsetY: 0,
							titleOffsetX: 0,
							titleFontColor: "#666666",
							// min: 0,
							max: null,
							tofix: null,
							unit: "",
							format: ""
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "none",
							onShadow: false,
							animation: "vertical"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 12,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},
				// 折线图3
				chartDataZhe3: {},
				optsZhe3: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#89c28c", "#23693f", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [10, 10, 0, 10],
					fontSize: 12,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: true,
						position: "top",
						float: "right",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 12,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 20
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: true,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 12,
						lineHeight: 20,
						marginTop: 0,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: false,
						data: [{
							type: "value",
							position: "left",
							disabled: false,
							axisLine: false,
							axisLineColor: "#CCCCCC",
							calibration: false,
							fontColor: "#666666",
							fontSize: 12,
							textAlign: "right",
							title: "",
							titleFontSize: 13,
							titleOffsetY: 0,
							titleOffsetX: 0,
							titleFontColor: "#666666",
							// min: 0,
							max: null,
							tofix: null,
							unit: "",
							format: ""
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "none",
							onShadow: false,
							animation: "vertical"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 12,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},
				// 柱状图
				chartDataZhu: {},
				user_id:'',
				idss:'',
				optsZhu: {
					timing: "linear",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#89c28c", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 20, 15, 15],
					fontSize: 12,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 12,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: false,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 12,
						lineHeight: 20,
						marginTop: 10,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "dash",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						data: [{
							// min: 0,
							disabled: false,
							axisLine: false,
							position: "left",
							calibration: false,
							title: "",
							textAlign: "left",
							titleFontSize: 13,
							max: null,
							format: "",
							titleOffsetY: 0,
							titleOffsetX: 0,
							type: "value"
						}],
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 2,
							categoryGap: 3,
							barBorderCircle: false,
							barBorderRadius: [
								50,
								50,
								50,
								50
							],
							linearType: "none",
							linearOpacity: 1,
							colorStop: 0,
							meterBorder: 1,
							meterFillColor: "#FFFFFF",
							labelPosition: "outside"
						},
						tooltip: {
							showBox: false,
							showArrow: false,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 12,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				}
			}
		},
		// 接收参数
		onLoad(option) {
			console.log(option);
			 this.getuserid()
			if (option.scene) {
				let sceneValue = option.scene
				let decodedValue = decodeURIComponent(sceneValue);
				let idValue = decodedValue.split('=')[1]
				this.id = idValue
				this.listDataFn()
				// console.log(this.user_id)
				// if (wx.getStorageSync('user_id') != this.user_id) {
				// 	uni.navigateTo({
				// 		url: '/pagesFengXiang/pages/fengxiangDetailtwo/index?id=' + this.id
				// 	}) 
				// } 
			} else {
				this.id = option.id
				if (!wx.getStorageSync('userToken')) {
					uni.reLaunch({
						url: '/pagesFengXiang/pages/fengxiangDetailtwo/index?id=' + this.id
					})
				} else {
					this.listDataFn()
					// this.getServerDatas()
		
				}
			}
		},
		onShow() {
           
		},
		methods: {
			getuserid(){
				let page = 1
				let qrcode = ''
				request.get('/api/apiary/index', {page,qrcode}).then(res => {
			          this.user_id = res.data.data[0].user_id
			          console.log(wx.getStorageSync('user_id'),this.user_id);
			          if (wx.getStorageSync('user_id') != this.user_id) {
			          	uni.reLaunch({
			          		url: '/pagesFengXiang/pages/fengxiangDetailtwo/index?id=' + this.id
			          	}) 
			          } 
				})
			},
			fenlampbut() {
				if (this.switchk) {
					this.switchk = false
					request.post('/api/beehive/fanSwitch/' + this.id, {}).then(res => {
						this.listDataFn()
						this.$nextTick(() => {
							uni.showToast({
								icon: "none",
								title: res.data.msg,
							})
						})

						this.switchk = true
					})
				}
			},
			// 加热状态改变
			warmbut() {
				if (this.switchk) {
					this.switchk = false
					request.post('/api/beehive/heatSwitch/' + this.id, {}).then(res => {
						this.listDataFn()
						this.$nextTick(() => {
							uni.showToast({
								icon: "none",
								title: res.data.msg,
							})

						})
						this.switchk = true

					})
				}
			},
			getServerDatas() {
				request.get('/api/beehive/statistics/' + this.idss, {}).then(res => {
					console.log(res)
					this.chartdataObj = {
						...res.data.data
					}
					console.log(this.chartdataObj,111)
					this.getServerDataZhe1()
					this.getServerDataZhe2()
					this.getServerDataZhe3()
					this.getServerDataZhu()
				})
			},
			listDataFn() {
				request.get('/api/beehive/detail/' + this.id, {}).then(res => {
					this.idss = res.data.data.id
					this.getServerDatas()
					console.log(res);
					this.listdata = {
						...res.data.data
					}
					if(this.listdata.lng == ''){
						this.maskflag = true
					}else{
						this.map.longitude = this.listdata.lng
						this.map.latitude = this.listdata.lat
						this.maskflag = false
					}
					if (this.listdata.status_text == '离线') {
						this.map.markers.push({
							latitude: this.listdata.lat,
							longitude: this.listdata.lng,
							width: 15,
							height: 15,
							id: this.listdata.id,
							iconPath: '../../../static/a22.png',
						})
					} else {
						this.map.markers.push({
							latitude: this.listdata.lat,
							longitude: this.listdata.lng,
							width: 15,
							height: 15,
							id: this.listdata.id,
							iconPath: '../../../static/a11.png',
						})
					}

					this.loading = false
				})
			},
			// 重量变化
			async getServerDataZhe1() {
				//模拟从服务器获取数据时的延时
				setTimeout(async () => {
					// console.log(this.uchartsData)
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [...this.chartdataObj.temperature.xData.slice(-7)],
						series: [{
								name: "箱内",
								data: [...this.chartdataObj.temperature.yData.slice(-7)]
							},
							{
								name: "箱外",
								data: [...this.chartdataObj.temperature.yData_day.slice(-7)]
							}
						]
					};
					this.chartDataZhe1 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 湿度变化
			async getServerDataZhe2() {
				//模拟从服务器获取数据时的延时
				setTimeout(async () => {
					// console.log(this.uchartsData)
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [...this.chartdataObj.humidity.xData.slice(-7)],
						series: [{
								name: "箱内",
								data: [...this.chartdataObj.humidity.yData.slice(-7)]
							},
							{
								name: "箱外",
								data: [...this.chartdataObj.humidity.yData_day.slice(-7)]
							}
						]
					};
					this.chartDataZhe2 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 重量变化
			async getServerDataZhe3() {
				//模拟从服务器获取数据时的延时
				setTimeout(async () => {
					// console.log(this.uchartsData)
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [...this.chartdataObj.weight.xData.slice(-7)],
						series: [{
								name: "总重量",
								data: [...this.chartdataObj.weight.yData.slice(-7)]
							},
							{
								name: "日增量",
								data: [...this.chartdataObj.weight.yData_day.slice(-7)]
							}
						]
					};
					this.chartDataZhe3 = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 柱状 出勤次数
			async getServerDataZhu() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: [...this.chartdataObj.attendance.xData.slice(-7)], // X 轴
						series: [{
							name: "目标值",
							data: [...this.chartdataObj.attendance.yData.slice(-7)] // Y 轴
						}]
					};
					this.chartDataZhu = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>


<style scoped lang="scss">
	.image_17 {
		width: 30rpx;
		height: 32rpx;
	}

	.text_15 {
		margin-left: 10rpx;
	}

	.image_201 {
		margin-left: -15rpx;
	}

	.flex-taxt1 {
		display: flex;
		align-items: center;
	}

	.image_21 {
		width: 28rpx;
		height: 28rpx;
	}

	.image_19 {
		width: 24rpx;
		height: 32rpx;
	}

	.image_15 {
		width: 31rpx;
		height: 32rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: 微软雅黑;
		line-height: 24rpx;
		color: #444444;
	}

	.text-l {
		margin-left: 5rpx;
	}

	.leftmg {
		margin-left: 50rpx;
	}

	.dflex-text {
		margin-left: 15rpx;
	}

	.dflex1 {
		display: flex;
	}

	.image_7 {
		border-radius: 4rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.image_8 {
		margin-left: 32rpx;
	}

	.image_9 {
		margin-left: 16rpx;
	}

	.image_10 {
		margin-left: 16rpx;
	}

	.image_11 {
		margin-left: 16rpx;
	}

	.image_13 {
		margin-left: 16rpx;
	}

	#text-wrapper-bgc1 {
		background-color: #89c28c;
	}

	#text-wrapper-bgc2 {
		background-color: #ff5733;
	}

	.wendubox {
		display: flex;
	}
    .maskmap{
		position: absolute;
		    left: 50%;
		    transform: translateX(-50%);
		    bottom: 0rpx;
		    width: 100%;
		    text-align: center;
		    height: 599rpx;
		    background: #ccc;
		    opacity: .5;
		    color: red;
		    font-size: 32rpx;
		    font-weight: 600;
	}
	.flex-taxt {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.xin-box-title {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.image_16 {
		width: 22rpx;
		height: 32rpx;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: 微软雅黑;
		line-height: 24rpx;
		color: #444444;
	}

	.text_13 {
		margin-left: 6rpx;
		margin-top: 12rpx;
		line-height: 23rpx;
	}

	.hedlien-box {
		text-align: center;
		width: 100%;
	}

	.charts-box {
		width: 100%;
		height: 600rpx;
	}

	.xin-box {
		// height: 300rpx;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx;
	}

	.control-box {
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.chart-box {
		padding: 0 35rpx;
	}

	.magtop {
		margin-top: 15rpx;
	}

	.dflex2 {
		display: flex;
		justify-content: space-between;
	}

	.dflex2-text-Date {
		color: #848889;
	}

	.humid-box {
		margin-left: 30rpx;
	}

	.dflex {
		display: flex;
	}

	.massagebox {
		font-size: 24rpx;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #8888;
	}

	.view_2 {
		margin-top: 20rpx;
	}

	.font_4 {
		font-size: 20rpx;
		font-family: 微软雅黑;
		line-height: 15rpx;
		color: #888888;
	}

	.text_6 {
		margin-left: 16rpx;
	}

	.text_7 {
		margin-left: 8rpx;
	}

	.text_8 {
		margin-left: 1rpx;
	}

	.group_7 {
		padding: 0 4rpx;
	}

	.bianhao-top-yi {
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.bianhao-zuo {
		display: flex;
		align-content: center;
	}

	.font_2 {
		font-size: 45rpx;
		font-weight: 550;
		font-family: 微软雅黑;
		line-height: 30rpx;
		color: #000000;
	}

	.text-wrapper {
		height: 30rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		// height: 30rpx;
		border-radius: 15rpx;
		padding: 0rpx 10rpx;
	}

	.font_33 {
		font-size: 16rpx;
		font-family: 微软雅黑;
		// line-height: 15rpx;
		color: #ffffff;
	}

	// .ceiling{
	// z-index: 2; 
	// position: sticky; 
	// top: 0rpx;
	// }
	.early {
		padding: 20rpx 30rpx;
		height: 100rpx;
		background-color: #f7f7f7;
	}

	.mapbox {
		height: 600rpx;
		position: relative;
	}

	.detailbox {
		padding: 0 0 50rpx 0;
	}

	.page {
		width: 100%;
		background-color: #f7f7f7;
	}
</style>