2024-06-11 18:02:55 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="page">
|
2024-07-06 18:05:22 +08:00
|
|
|
|
<u-navbar :is-back="false" title="地图" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
|
|
|
|
|
|
title-size='36' height='45' id="navbar">
|
2024-06-11 18:02:55 +08:00
|
|
|
|
</u-navbar>
|
2024-06-21 18:04:01 +08:00
|
|
|
|
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
2024-07-06 18:05:22 +08:00
|
|
|
|
:show-location='true' :markers="covers" @markertap="handleMarkerTap"></map>
|
|
|
|
|
|
|
2024-07-03 18:03:01 +08:00
|
|
|
|
<view class="fxtongji">
|
|
|
|
|
|
<view class="one">
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
|
|
|
|
|
|
<text class="wz">蜂场</text>
|
|
|
|
|
|
<text class="shu">{{listmap.length}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="two">
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
|
|
|
|
|
|
<text class="wz">蜂箱</text>
|
|
|
|
|
|
<text class="shu">{{listmaps.length}}</text>
|
|
|
|
|
|
</view>
|
2024-07-06 18:05:22 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 --><!-- 蜂箱弹窗 -->
|
|
|
|
|
|
<view class="fctan" v-if="fxslag">
|
|
|
|
|
|
<view class="fctop">
|
|
|
|
|
|
<view class="fclt">
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image>
|
|
|
|
|
|
<view class="fctit">{{fxobj.name == undefined ? '--' : fxobj.name}}</view>
|
|
|
|
|
|
<view class="fcry">已认养</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcrt" @click="fxslag = false">
|
|
|
|
|
|
x
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcbh">
|
|
|
|
|
|
设备编号：{{fxobj.sn == undefined ? '--' : fxobj.sn}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcdz">
|
|
|
|
|
|
<u-icon name="map-fill" color="#808080" size="32"></u-icon> {{fxobj.apiaryAddress == undefined ? '--' : fxobj.apiaryAddress}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fctq">
|
|
|
|
|
|
<view class="">{{daily[0].textDay == undefined ? '--' : daily[0].textDay}} {{daily[0].tempMin == undefined ? '--' : daily[0].tempMin}}℃ ~ {{daily[0].tempMax == undefined ? '--' : daily[0].tempMax}}℃</view>
|
|
|
|
|
|
<view class="">{{daily[0].windDirDay == undefined ? '--' : daily[0].windDirDay}} {{nowtqobj.windScale == undefined ? '--' : nowtqobj.windScale}}级</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcfm">
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uwO70CUV98b3maj6bfCF" mode=""></image> {{listfz}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uQQym033Pvs3rirm9kP5" mode=""></image> {{listmy}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fclist">
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">箱内温度：{{fxobj.innerTemperature == undefined ? '--' : fxobj.innerTemperature}}℃</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">箱内湿度：{{fxobj.innerHumidity == undefined ? '--' : fxobj.innerHumidity}}%</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">蜂箱重量：{{fxobj.totalYield == undefined ? '--' : fxobj.totalYield}}g</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">二氧化碳浓度：{{fxobj.innerCo2 == undefined ? '--' : fxobj.innerCo2}}ppm</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">进出量(日)：{{fxobj.ioCountDay == undefined ? '--' : fxobj.ioCountDay}}只</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">频率：{{fxobj.volume == undefined ? '--' : fxobj.volume}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="btncha" @click="btnpage(1)">
|
|
|
|
|
|
立即查看
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
2024-07-03 18:03:01 +08:00
|
|
|
|
|
2024-07-06 18:05:22 +08:00
|
|
|
|
<!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 --><!-- 蜂场弹窗 -->
|
|
|
|
|
|
<view class="fxtan" v-if="fcflag">
|
|
|
|
|
|
<view class="fctop">
|
|
|
|
|
|
<view class="fclt">
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uB2k1NNeN2QUuSZIAf5r" mode=""></image>
|
|
|
|
|
|
<view class="fctit">{{fcobj.name == undefined ? '--' : fcobj.name}}</view>
|
|
|
|
|
|
<view class="fcry">已认养</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcrt" @click="fcflag = false">
|
|
|
|
|
|
x
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcdz">
|
|
|
|
|
|
<u-icon name="map-fill" color="#808080" size="32"></u-icon> {{fcobj.address == undefined ? '--' : fcobj.address}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fctq">
|
|
|
|
|
|
<view class="">{{daily[0].textDay == undefined ? '--' : daily[0].textDay}} {{daily[0].tempMin == undefined ? '--' : daily[0].tempMin}}℃ ~ {{daily[0].tempMax == undefined ? '--' : daily[0].tempMax}}℃</view>
|
|
|
|
|
|
<view class="">{{daily[0].windDirDay == undefined ? '--' : daily[0].windDirDay}} {{nowtqobj.windScale == undefined ? '--' : nowtqobj.windScale}}级</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcfm">
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uwO70CUV98b3maj6bfCF" mode=""></image> {{listfz}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uQQym033Pvs3rirm9kP5" mode=""></image> {{listmy}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G" mode=""></image> {{fcobj.beehiveCount == undefined ? '--' : fcobj.beehiveCount}}箱
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fclist">
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">当前温度：{{nowtqobj.temp == undefined ? '--' : nowtqobj.temp}}℃</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">当前湿度：{{nowtqobj.humidity == undefined ? '--' : nowtqobj.humidity}}%</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="fcli">
|
|
|
|
|
|
<view class="">在线数：{{fcobj.beehiveCount == undefined ? '--' : fcobj.beehiveCount}}箱</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="btncha" @click="btnpage(2)">
|
|
|
|
|
|
立即查看
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
2024-06-11 18:02:55 +08:00
|
|
|
|
<tab-bar :indexs='3' style=""></tab-bar>
|
2024-07-03 18:03:01 +08:00
|
|
|
|
<!-- <span style="">福鼎蜂场</span> -->
|
2024-06-11 18:02:55 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
2024-07-06 18:05:22 +08:00
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
2024-06-11 18:02:55 +08:00
|
|
|
|
data() {
|
2024-07-06 18:05:22 +08:00
|
|
|
|
return {
|
2024-06-11 18:02:55 +08:00
|
|
|
|
bgc: {
|
2024-06-21 18:04:01 +08:00
|
|
|
|
backgroundColor: " #F4FAF8",
|
2024-06-11 18:02:55 +08:00
|
|
|
|
},
|
2024-07-06 18:05:22 +08:00
|
|
|
|
title: "地图",
|
2024-07-03 18:03:01 +08:00
|
|
|
|
latitude: '',
|
|
|
|
|
|
longitude: '',
|
2024-06-21 18:04:01 +08:00
|
|
|
|
isMap: false,
|
2024-07-06 18:05:22 +08:00
|
|
|
|
zoomSize: 12,
|
2024-07-05 14:07:28 +08:00
|
|
|
|
markers: [],
|
2024-07-06 18:05:22 +08:00
|
|
|
|
jinweidu: '',
|
2024-07-03 18:03:01 +08:00
|
|
|
|
covers: [],
|
|
|
|
|
|
mapContext: null,
|
|
|
|
|
|
mapScaleInterval: null,
|
2024-07-06 18:05:22 +08:00
|
|
|
|
listmap: [],
|
|
|
|
|
|
listmaps: [],
|
|
|
|
|
|
id:'',
|
|
|
|
|
|
fxslag:false,
|
|
|
|
|
|
fcflag:false,
|
|
|
|
|
|
fxobj:{},
|
|
|
|
|
|
fcobj:{},
|
|
|
|
|
|
longitudetq:'',
|
|
|
|
|
|
latitudetq:'',
|
|
|
|
|
|
daily:[],
|
|
|
|
|
|
listfz:'',
|
|
|
|
|
|
listmy:'',
|
|
|
|
|
|
nowtqobj:{}
|
2024-06-11 18:02:55 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
2024-06-21 18:04:01 +08:00
|
|
|
|
|
2024-06-11 18:02:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
onShow() {
|
2024-07-06 18:05:22 +08:00
|
|
|
|
this.getMyLocation()
|
2024-07-03 18:03:01 +08:00
|
|
|
|
this.getMyLocations()
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
|
2024-07-03 18:03:01 +08:00
|
|
|
|
},
|
|
|
|
|
|
onReady() {
|
|
|
|
|
|
this.mapContext = uni.createMapContext('map', this)
|
|
|
|
|
|
this.mapScaleInterval = setInterval(this.updateMarkers, 1000)
|
|
|
|
|
|
},
|
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
|
if (this.mapScaleInterval) {
|
|
|
|
|
|
clearInterval(this.mapScaleInterval)
|
|
|
|
|
|
this.mapScaleInterval = null
|
|
|
|
|
|
}
|
2024-06-11 18:02:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
2024-07-06 18:05:22 +08:00
|
|
|
|
btnpage(num){
|
|
|
|
|
|
if(num == 1){
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url:'/page_Beehive/Beehive_detail?beehiveId=' + this.fxobj.beehiveId
|
|
|
|
|
|
})
|
|
|
|
|
|
}else{
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pages/Apiary/Apiary_detail?id=' + this.fcobj.apiaryId
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 请求蜂种
|
|
|
|
|
|
getfz() {
|
|
|
|
|
|
this.$u.get(`/common/getDictByType?dictType=apiary_bee_type`).then(res => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
|
|
|
if (res.data[i].dictValue == this.fcobj.beeType) {
|
|
|
|
|
|
this.listfz = res.data[i].dictLabel
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 请求蜜源
|
|
|
|
|
|
getmy() {
|
|
|
|
|
|
this.$u.get(`/common/getDictByType?dictType=apiary_honey_type`).then(res => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
for (let i = 0; i < res.data.length; i++) {
|
|
|
|
|
|
if (res.data[i].dictValue == this.fcobj.honeyType) {
|
|
|
|
|
|
this.listmy = res.data[i].dictLabel
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2024-07-05 14:07:28 +08:00
|
|
|
|
|
2024-07-06 18:05:22 +08:00
|
|
|
|
// 请求天气预告
|
|
|
|
|
|
gettq(){
|
|
|
|
|
|
this.$u.get(`weather/7d?location=${this.longitudetq},${this.latitudetq}`).then(res => {
|
|
|
|
|
|
if(res.code == 200){
|
|
|
|
|
|
this.daily = res.data.daily
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 请求当前天气
|
|
|
|
|
|
gettqs(){
|
|
|
|
|
|
this.$u.get(`weather/now?location=${this.longitudetq},${this.latitudetq}`).then(res => {
|
|
|
|
|
|
if(res.code == 200){
|
|
|
|
|
|
this.nowtqobj = res.data.now
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 点击地图图标
|
|
|
|
|
|
handleMarkerTap(e) {
|
|
|
|
|
|
let markerId = e.markerId.toString()
|
|
|
|
|
|
let firstDigit = markerId.charAt(0)
|
|
|
|
|
|
if (firstDigit === '1') {
|
|
|
|
|
|
// 蜂场
|
|
|
|
|
|
this.fxslag = false
|
|
|
|
|
|
this.fcflag = true
|
|
|
|
|
|
markerId = markerId.substring(1)
|
|
|
|
|
|
this.id = markerId
|
|
|
|
|
|
this.$u.get(`/farm/apiary/${this.id}`).then(res => {
|
|
|
|
|
|
if(res.code == 200){
|
|
|
|
|
|
this.fcobj = res.data
|
|
|
|
|
|
this.latitudetq = res.data.lat
|
|
|
|
|
|
this.longitudetq = res.data.lng
|
|
|
|
|
|
this.gettq()
|
|
|
|
|
|
this.getfz()
|
|
|
|
|
|
this.getmy()
|
|
|
|
|
|
this.gettqs()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
} else if (firstDigit === '2') {
|
|
|
|
|
|
// 蜂箱
|
|
|
|
|
|
this.fcflag = false
|
|
|
|
|
|
this.fxslag = true
|
|
|
|
|
|
markerId = markerId.substring(1)
|
|
|
|
|
|
this.id = markerId
|
|
|
|
|
|
this.$u.get(`/farm/beehive/${this.id}`).then(res => {
|
|
|
|
|
|
if(res.code == 200){
|
|
|
|
|
|
this.fxobj = res.data
|
|
|
|
|
|
// 请求蜂箱之后请求蜂箱所属蜂场 计算蜂种和蜜源
|
|
|
|
|
|
this.$u.get(`/farm/apiary/${this.fxobj.apiaryId}`).then(res => {
|
|
|
|
|
|
if(res.code == 200){
|
|
|
|
|
|
this.fcobj = res.data
|
|
|
|
|
|
this.getfz()
|
|
|
|
|
|
this.getmy()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
this.latitudetq = res.data.lat
|
|
|
|
|
|
this.longitudetq = res.data.lng
|
|
|
|
|
|
this.gettq()
|
|
|
|
|
|
this.gettqs()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 地图回正
|
|
|
|
|
|
async setMapScale(e, val) {
|
|
|
|
|
|
let mapContext = uni.createMapContext('map', this);
|
|
|
|
|
|
let setScale = () => {
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
mapContext.getScale({
|
|
|
|
|
|
success: r => {
|
|
|
|
|
|
this.mapScale = 15
|
|
|
|
|
|
resolve()
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
};
|
|
|
|
|
|
await setScale();
|
|
|
|
|
|
mapContext.moveToLocation({
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
const timer = setTimeout(() => {
|
|
|
|
|
|
this.mapScale = 15
|
|
|
|
|
|
clearTimeout(timer);
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
},
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
2024-07-03 18:03:01 +08:00
|
|
|
|
getMyLocations() {
|
|
|
|
|
|
uni.getLocation({
|
|
|
|
|
|
type: 'wgs84',
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
this.jinweidu = res.longitude + ',' + res.latitude
|
|
|
|
|
|
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
|
|
|
|
|
|
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
|
2024-07-06 18:05:22 +08:00
|
|
|
|
this.setMapScale()
|
|
|
|
|
|
this.$u.get("/farm/beehive/listNearBy?center=" + this.jinweidu + '&radius=' + 1000)
|
|
|
|
|
|
.then(
|
|
|
|
|
|
res => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
// 蜂箱
|
|
|
|
|
|
this.listmaps = res.data
|
|
|
|
|
|
res.data.forEach(item => {
|
|
|
|
|
|
let id = "2" + item.beehiveId //蜂箱id前加2 以此进行判断
|
|
|
|
|
|
this.covers.push({
|
|
|
|
|
|
id: parseFloat(id),
|
|
|
|
|
|
latitude: item.lat,
|
|
|
|
|
|
longitude: item.lng,
|
|
|
|
|
|
width: 25,
|
|
|
|
|
|
height: 30,
|
|
|
|
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
type: 2,
|
|
|
|
|
|
content: item.name,
|
|
|
|
|
|
anchorX: this.calculateAnchorX(item.name),
|
|
|
|
|
|
fontWeight: 700,
|
|
|
|
|
|
color: '#FFCC25',
|
|
|
|
|
|
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
|
|
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
|
borderRadius: 5,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
2024-07-03 18:03:01 +08:00
|
|
|
|
})
|
2024-07-06 18:05:22 +08:00
|
|
|
|
}
|
|
|
|
|
|
})
|
2024-07-03 18:03:01 +08:00
|
|
|
|
},
|
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
|
console.error('获取位置失败：', err)
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
getMyLocation() {
|
|
|
|
|
|
uni.getLocation({
|
|
|
|
|
|
type: 'wgs84',
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
this.jinweidu = res.longitude + ',' + res.latitude
|
|
|
|
|
|
this.latitude = Number(res.latitude.toFixed(5)) - 0.004
|
|
|
|
|
|
this.longitude = Number(res.longitude.toFixed(5)) + 0.004
|
|
|
|
|
|
this.$u.get("/farm/apiary/listNearBy?center=" + this.jinweidu + '&radius=' + 1000)
|
|
|
|
|
|
.then(
|
|
|
|
|
|
res => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
// 蜂场
|
|
|
|
|
|
this.listmap = res.data
|
|
|
|
|
|
res.data.forEach(item => {
|
|
|
|
|
|
let id = '1' + item.apiaryId //蜂箱id前加1 以此进行判断
|
|
|
|
|
|
this.covers.push({
|
|
|
|
|
|
id: parseFloat(id),
|
|
|
|
|
|
latitude: item.lat,
|
|
|
|
|
|
longitude: item.lng,
|
|
|
|
|
|
width: 25,
|
|
|
|
|
|
height: 30,
|
|
|
|
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
type: 1,
|
|
|
|
|
|
content: item.name,
|
|
|
|
|
|
anchorX: this.calculateAnchorX(item.name),
|
|
|
|
|
|
fontWeight: 700,
|
|
|
|
|
|
color: '#FFCC25',
|
|
|
|
|
|
textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white',
|
|
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
|
borderRadius: 5,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
|
console.error('获取位置失败：', err)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 缩放显示隐藏
|
|
|
|
|
|
updateMarkers() {
|
|
|
|
|
|
this.mapContext.getScale({
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
this.covers = []
|
|
|
|
|
|
if (res.scale <= 14) {
|
|
|
|
|
|
this.addMarkersWithoutLabels()
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.addMarkersWithLabels()
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: (error) => {
|
|
|
|
|
|
// console.error('获取地图缩放级别失败：', error);
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
addMarkersWithoutLabels() {
|
|
|
|
|
|
this.listmap.forEach((item) => {
|
|
|
|
|
|
let id = '1' + item.apiaryId
|
|
|
|
|
|
this.covers.push({
|
|
|
|
|
|
id: parseFloat(id),
|
|
|
|
|
|
latitude: item.lat,
|
|
|
|
|
|
longitude: item.lng,
|
|
|
|
|
|
width: 25,
|
|
|
|
|
|
height: 30,
|
|
|
|
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
|
borderRadius: 5,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
type: 1,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
2024-07-03 18:03:01 +08:00
|
|
|
|
this.listmaps.forEach((item) => {
|
2024-07-06 18:05:22 +08:00
|
|
|
|
let id = "2" + item.beehiveId
|
2024-07-03 18:03:01 +08:00
|
|
|
|
this.covers.push({
|
2024-07-06 18:05:22 +08:00
|
|
|
|
id: parseFloat(id),
|
2024-07-03 18:03:01 +08:00
|
|
|
|
latitude: item.lat,
|
|
|
|
|
|
longitude: item.lng,
|
|
|
|
|
|
width: 25,
|
|
|
|
|
|
height: 30,
|
|
|
|
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
2024-07-06 18:05:22 +08:00
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
|
borderRadius: 5,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
type: 2,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
addMarkersWithLabels() {
|
|
|
|
|
|
this.listmap.forEach((item) => {
|
|
|
|
|
|
let id = '1' + item.apiaryId
|
|
|
|
|
|
this.covers.push({
|
|
|
|
|
|
id: parseFloat(id),
|
|
|
|
|
|
latitude: item.lat,
|
|
|
|
|
|
longitude: item.lng,
|
|
|
|
|
|
width: 25,
|
|
|
|
|
|
height: 30,
|
|
|
|
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
type: 1,
|
|
|
|
|
|
content: item.name,
|
|
|
|
|
|
anchorX: this.calculateAnchorX(item.name),
|
|
|
|
|
|
fontWeight: 700,
|
|
|
|
|
|
color: '#FFCC25',
|
|
|
|
|
|
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
|
|
|
|
|
|
rotate: 20,
|
|
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
|
borderRadius: 5,
|
|
|
|
|
|
}
|
2024-07-03 18:03:01 +08:00
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
this.listmaps.forEach((item) => {
|
2024-07-06 18:05:22 +08:00
|
|
|
|
let id = "2" + item.beehiveId
|
2024-07-03 18:03:01 +08:00
|
|
|
|
this.covers.push({
|
2024-07-06 18:05:22 +08:00
|
|
|
|
id: parseFloat(id),
|
2024-07-03 18:03:01 +08:00
|
|
|
|
latitude: item.lat,
|
|
|
|
|
|
longitude: item.lng,
|
|
|
|
|
|
width: 25,
|
|
|
|
|
|
height: 30,
|
|
|
|
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukbyhyrDcp3VzgyeJo2G',
|
|
|
|
|
|
label: {
|
2024-07-06 18:05:22 +08:00
|
|
|
|
type: 2,
|
2024-07-03 18:03:01 +08:00
|
|
|
|
content: item.name,
|
|
|
|
|
|
anchorX: this.calculateAnchorX(item.name),
|
|
|
|
|
|
fontWeight: 700,
|
|
|
|
|
|
color: '#FFCC25',
|
|
|
|
|
|
textShadow: '2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000',
|
|
|
|
|
|
rotate: 20,
|
2024-07-06 18:05:22 +08:00
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
|
borderRadius: 5,
|
2024-07-03 18:03:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
2024-07-06 18:05:22 +08:00
|
|
|
|
},
|
|
|
|
|
|
calculateAnchorX(name) {
|
|
|
|
|
|
let chineseLength = 0;
|
|
|
|
|
|
let englishLength = 0;
|
|
|
|
|
|
for (let i = 0; i < name.length; i++) {
|
|
|
|
|
|
const charCode = name.charCodeAt(i);
|
|
|
|
|
|
if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
|
|
|
|
|
|
chineseLength++;
|
|
|
|
|
|
} else if (/[a-zA-Z]/.test(name[i])) {
|
|
|
|
|
|
englishLength = englishLength + 0.3
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
const totalLength = chineseLength + englishLength * 2
|
|
|
|
|
|
return -totalLength * 7
|
|
|
|
|
|
},
|
2024-06-21 18:04:01 +08:00
|
|
|
|
|
2024-06-11 18:02:55 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
2024-06-21 18:04:01 +08:00
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
page {
|
|
|
|
|
|
background-color: #FAFDFD;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page {
|
|
|
|
|
|
// position: relative;
|
|
|
|
|
|
width: 750rpx;
|
2024-07-06 18:05:22 +08:00
|
|
|
|
// 蜂场弹窗
|
|
|
|
|
|
.fxtan {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 750rpx;
|
|
|
|
|
|
height: 670rpx;
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 50rpx 50rpx 0 0;
|
|
|
|
|
|
z-index: 99;
|
|
|
|
|
|
padding: 30rpx 52rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.btncha{
|
|
|
|
|
|
width: 658rpx;
|
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
|
background: #FFCC25;
|
|
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
margin-top: 46rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 88rpx;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
.fclist{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
margin-top: 28rpx;
|
|
|
|
|
|
.fcli{
|
|
|
|
|
|
margin: 10rpx;
|
|
|
|
|
|
flex: 1 0 calc(50% - 20rpx);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.fcfm {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 28rpx;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
view {
|
|
|
|
|
|
width: 182rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
background: rgba(61,61,61,0.3);
|
|
|
|
|
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
|
|
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #FAFDFD;
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 38rpx;
|
|
|
|
|
|
height: 38rpx;
|
|
|
|
|
|
margin-right: 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fctq {
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
|
|
|
|
|
|
view {
|
|
|
|
|
|
margin-right: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcdz {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #808080;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcbh {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fctop {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
.fclt {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.fctit {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
margin-right: 32rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcry {
|
|
|
|
|
|
width: 90rpx;
|
|
|
|
|
|
height: 42rpx;
|
|
|
|
|
|
background: #FFC107;
|
|
|
|
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
|
|
|
line-height: 42rpx;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 64rpx;
|
|
|
|
|
|
height: 64rpx;
|
|
|
|
|
|
margin-right: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcrt {
|
|
|
|
|
|
// font-weight: 600;
|
|
|
|
|
|
font-size: 64rpx;
|
|
|
|
|
|
padding-bottom: 10rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 蜂箱弹窗
|
|
|
|
|
|
.fctan {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 750rpx;
|
|
|
|
|
|
height: 730rpx;
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 50rpx 50rpx 0 0;
|
|
|
|
|
|
z-index: 99;
|
|
|
|
|
|
padding: 30rpx 52rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.btncha{
|
|
|
|
|
|
width: 658rpx;
|
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
|
background: #FFCC25;
|
|
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
margin-top: 46rpx;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 88rpx;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
.fclist{
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
margin-top: 28rpx;
|
|
|
|
|
|
.fcli{
|
|
|
|
|
|
margin: 10rpx;
|
|
|
|
|
|
flex: 1 0 calc(50% - 20rpx);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.fcfm {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 28rpx;
|
|
|
|
|
|
view {
|
|
|
|
|
|
width: 182rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
margin-right: 50rpx;
|
|
|
|
|
|
background: rgba(61,61,61,0.3);
|
|
|
|
|
|
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
|
|
|
|
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #FAFDFD;
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 38rpx;
|
|
|
|
|
|
height: 38rpx;
|
|
|
|
|
|
margin-right: 4rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fctq {
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
|
|
|
|
|
|
view {
|
|
|
|
|
|
margin-right: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcdz {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #808080;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcbh {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fctop {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
.fclt {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.fctit {
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 40rpx;
|
|
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
margin-right: 32rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcry {
|
|
|
|
|
|
width: 90rpx;
|
|
|
|
|
|
height: 42rpx;
|
|
|
|
|
|
background: #FFC107;
|
|
|
|
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
|
|
|
line-height: 42rpx;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 64rpx;
|
|
|
|
|
|
height: 64rpx;
|
|
|
|
|
|
margin-right: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fcrt {
|
|
|
|
|
|
// font-weight: 600;
|
|
|
|
|
|
font-size: 64rpx;
|
|
|
|
|
|
padding-bottom: 10rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.fxtongji {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 15vh;
|
|
|
|
|
|
right: 50rpx;
|
|
|
|
|
|
z-index: 99;
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
.one {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background-color: rgba(191, 191, 191, 0.4);
|
|
|
|
|
|
padding: 4rpx 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
border-radius: 30rpx;
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
.wz {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
margin: 0 15rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
.shu {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
color: #FFC107;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
}
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
image {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
width: 44rpx;
|
|
|
|
|
|
height: 44rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
.two {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
background-color: rgba(191, 191, 191, 0.4);
|
|
|
|
|
|
padding: 4rpx 20rpx;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
border-radius: 30rpx;
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
.wz {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
color: #3D3D3D;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
margin: 0 15rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
.shu {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
color: #FFC107;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
}
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
|
|
|
|
|
image {
|
2024-07-03 18:03:01 +08:00
|
|
|
|
width: 44rpx;
|
|
|
|
|
|
height: 44rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-07-06 18:05:22 +08:00
|
|
|
|
|
2024-06-21 18:04:01 +08:00
|
|
|
|
.map {
|
|
|
|
|
|
width: 750rpx;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
