279 lines
7.5 KiB
Vue
279 lines
7.5 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- <image src="../../static/zddt.jpg" mode="" class="bgimg" @click="todetail()"></image> -->
|
|
<map
|
|
id="map"
|
|
style="width: 100%; height:2000rpx;"
|
|
scale="13"
|
|
:markers="markers"
|
|
longitude="110.628279"
|
|
latitude="35.546105"
|
|
show-location
|
|
@markertap="markertap"
|
|
@callouttap="callouttap">
|
|
<cover-view slot="callout">
|
|
<cover-view v-for="(item,index) in markers" :key="index" class="customCallout" :marker-id="item.id">
|
|
<cover-image class="imgs" src="@/static/zhandian_icon_xuqin_title.png" v-if="item.stationType == 'livestock'"></cover-image>
|
|
<cover-image class="imgs" src="@/static/zhandian_icon_nongtian_title.png" v-if="item.stationType == 'orient'"></cover-image>
|
|
<cover-view class="content" v-if="item.stationType == 'livestock' || item.stationType == 'orient'">
|
|
{{item.stationName}}
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</map>
|
|
<view class="zdxq">
|
|
<view class="zdxqitem">
|
|
<image src="../../static/zhandian_sahchong_dingwei.png" mode=""></image>
|
|
<view class="textss">
|
|
联网式太阳能杀虫灯
|
|
</view>
|
|
</view>
|
|
<view class="zdxqitem">
|
|
<image src="../../static/zhandian_xuqin_dingwei.png" mode=""></image>
|
|
<view class="textss">
|
|
畜禽养殖污染监测站
|
|
</view>
|
|
</view>
|
|
<view class="zdxqitem">
|
|
<image src="../../static/zhandian_nongtian_dingwei.png" mode=""></image>
|
|
<view class="textss">
|
|
农田面源污染监测站
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="switchs">
|
|
<selectSwitch @change="switch1Change" :defaultSwitch="isscd" checked_bj_color="#13ce66"/>
|
|
<!-- <switch style="margin-right: 10rpx;" :checked="isscd" @change="switch1Change" /> -->
|
|
<!-- 显示/隐藏杀虫灯 -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/api/api'
|
|
import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
|
|
export default {
|
|
components: {
|
|
selectSwitch
|
|
},
|
|
data() {
|
|
return {
|
|
markers: [],
|
|
list:[],
|
|
pointers:[],
|
|
imgurl1:'@/static/zhandian_icon_nongtian_title.png',
|
|
imgurl2:'@/static/zhandian_icon_xuqin_title.png',
|
|
isscd:true,
|
|
};
|
|
},
|
|
onLoad() {
|
|
// this.isscd = true
|
|
// this.getList()
|
|
},
|
|
onShow() {
|
|
this.isscd = true
|
|
this.$nextTick(()=>{
|
|
this.getList()
|
|
})
|
|
},
|
|
methods: {
|
|
getList(){
|
|
this.markers = []
|
|
this.pointers = []
|
|
this.list = []
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
this.$http.get('/applet/survStationInfo/stationMap').then(res =>{
|
|
if(this.isscd == true){
|
|
this.list = []
|
|
}else if(this.isscd == false){
|
|
this.list = res.data.data.pestlight
|
|
}
|
|
var stationlist = res.data.data.stationInfo
|
|
if(this.list.length!=0){
|
|
for(var i=0;i<this.list.length;i++){
|
|
this.list[i].stationType = this.list[i].inType
|
|
}
|
|
}
|
|
if(stationlist){
|
|
for(var k=0;k<stationlist.length;k++){
|
|
this.list.push({
|
|
latitude:stationlist[k].stationLatitude,
|
|
longitude:stationlist[k].stationLongitude,
|
|
stationType:stationlist[k].stationType,
|
|
sortNo:stationlist[k].sortNo,
|
|
stationName:stationlist[k].stationName,
|
|
stationCode:stationlist[k].stationCode
|
|
})
|
|
}
|
|
}
|
|
console.log(this.list,'数组')
|
|
// return
|
|
if(this.list.length != 0){
|
|
for(var i=0;i<this.list.length;i++){
|
|
if(this.list[i].stationType == 'pestlight'){
|
|
this.list[i].iconPath = '/static/zhandian_sahchong_dingwei.png'
|
|
this.list[i].latitude = Number(this.list[i].latitude)
|
|
this.list[i].longitude = Number(this.list[i].longitude)
|
|
this.list[i].width = 15
|
|
this.list[i].height = 20
|
|
}else if(this.list[i].stationType == 'orient'){
|
|
this.list[i].iconPath = '/static/zhandian_nongtian_dingwei.png'
|
|
this.list[i].latitude = Number(this.list[i].latitude)
|
|
this.list[i].longitude = Number(this.list[i].longitude)
|
|
this.list[i].width = 35
|
|
this.list[i].height = 52
|
|
}else if(this.list[i].stationType == 'livestock'){
|
|
this.list[i].iconPath = '/static/zhandian_xuqin_dingwei.png'
|
|
this.list[i].latitude = Number(this.list[i].latitude)
|
|
this.list[i].longitude = Number(this.list[i].longitude)
|
|
this.list[i].width = 35
|
|
this.list[i].height = 52
|
|
}
|
|
this.pointers.push({
|
|
id:i,
|
|
iconPath:this.list[i].iconPath,
|
|
latitude:this.list[i].latitude,
|
|
longitude:this.list[i].longitude,
|
|
width:this.list[i].width,
|
|
height:this.list[i].height,
|
|
customCallout: {
|
|
anchorY: 0, // Y轴偏移量
|
|
anchorX: 0, // X轴偏移量
|
|
display: 'ALWAYS' ,// 一直展示
|
|
},
|
|
stationType:this.list[i].stationType,
|
|
stationName:this.list[i].stationName,
|
|
stationCode:this.list[i].stationCode,
|
|
})
|
|
}
|
|
}
|
|
this.markers = this.pointers
|
|
console.log(this.markers,1523)
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
markertap(e){
|
|
console.log(e,'点击')
|
|
var index = e.detail.markerId
|
|
if(this.list[index].stationType == 'orient' || this.list[index].stationType == 'livestock'){
|
|
uni.navigateTo({
|
|
url:'/packDetail/pages/Site/detail?item='+ encodeURIComponent(JSON.stringify(this.list[index]))
|
|
})
|
|
}
|
|
},
|
|
callouttap(e){
|
|
console.log(e,'点击111')
|
|
var index = e.detail.markerId
|
|
if(this.list[index].stationType == 'orient' || this.list[index].stationType == 'livestock'){
|
|
uni.navigateTo({
|
|
url:'/packDetail/pages/Site/detail?item='+ encodeURIComponent(JSON.stringify(this.list[index]))
|
|
})
|
|
}
|
|
},
|
|
todetails(item){
|
|
console.log(item,'还是个然后')
|
|
},
|
|
switch1Change(e){
|
|
console.log(e,'gwgweg')
|
|
this.isscd = e
|
|
// this.isscd = e.detail.value
|
|
this.$nextTick(()=>{
|
|
this.getList()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bgimg{
|
|
position: fixed;
|
|
// z-index: -99;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.customCallout{
|
|
width: 349rpx;
|
|
height: 49rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
text-shadow: 1rpx 2rpx 0rpx #0D1934;
|
|
font-weight: bold;
|
|
// background-image: url('@/static/zhandian_icon_nongtian_title.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.customCallout1{
|
|
width: 349rpx;
|
|
height: 49rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
text-shadow: 1rpx 2rpx 0rpx #0D1934;
|
|
font-weight: bold;
|
|
// background-image: url('@/static/zhandian_icon_xuqin_title.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.zdxq{
|
|
position: fixed;
|
|
left: 33rpx;
|
|
bottom: 36rpx;
|
|
}
|
|
.zdxqitem{
|
|
padding: 8rpx 0 7rpx 17rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 22rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
text-shadow: 0rpx 1rpx 0rpx rgba(4,49,52,0.55);
|
|
width: 299rpx;
|
|
background: rgba(0,0,0,0.52);
|
|
border: 1px solid #4B677C;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 10rpx;
|
|
position: relative;
|
|
}
|
|
.zdxqitem:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.zdxqitem image{
|
|
width: 33rpx;
|
|
height: 50rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
.zdxqitem:first-child image{
|
|
width: 30rpx;
|
|
height: 40rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
.textss{
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
.imgs{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -9;
|
|
}
|
|
.switchs{
|
|
position: fixed;
|
|
top:36rpx;
|
|
right: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style> |