1287 lines
30 KiB
Vue
1287 lines
30 KiB
Vue
<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" :id="listdata.status_text == '在线' ? 'text-wrapper-bgc1' : '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);
|
|
console.log(decodedValue,'idValueidValue')
|
|
let idValue = decodedValue.split('=')[1]
|
|
this.id = idValue
|
|
this.listDataFn()
|
|
} 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()
|
|
// if(res.user_id != wx.getStorageSync('userToken')){
|
|
// uni.reLaunch({
|
|
// url: '/pagesFengXiang/pages/fengxiangDetailtwo/index?id=' + this.id
|
|
// })
|
|
// }
|
|
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: 50rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 60rpx;
|
|
background:rgba(0, 0, 0, 0.5);
|
|
// opacity: .5;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
padding-top: 20rpx;
|
|
}
|
|
.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> |