markers="pointMarkerList"
@markertap = "markertap"
v-if="!showModal"
</map>
<!-- <myMap/> -->
<div class="cu-load load-modal" v-if="loading">
<div class="gray-text">加载中...</div>
</div>
<div class="cu-modal bottom-modal" :class="showModal?'show':''" >
<div scroll-y="true" class=" cu-dialog" style="height: calc(100vh - 30px);">
<pointDataDetail :devInfo='currentSelectPoint' @closePointDataModal="closePointDataModal"></pointDataDetail>
</div>
</div>
</div>
</template>
<script>
import {XUANMU_DEV_TYPE} from '@/common/util/bizConstants.js'
import pointDataDetail from './pointDataDetail.vue';
export default {
components:{
pointDataDetail
},
name: "onemapnvue",
data() {
return {
currentSelectPoint:null,
mapOption:{
longitude:120.752512,
latitude:31.656016,
scale:13
},
pointMarkerList:[],
mapPointLastData:[],
pointCount :{
devType1Count:0,
devType2Count:0,
devType3Count:0,
devType4Count:0
},
pointTypeList:{
devType1List:[],
devType2List:[],
devType3List:[],
devType4List:[]
},
aaa:"我wo wo wo wo wow wo ",
loading:true,
showModal:false,
url:{
mapPointLastData:"/lastdata/xuanmuLastData/mapPointLastData"
}
};
},
created() {
this.getPointLastData();
},
methods:{
closePointDataModal(){
this.showModal=false;
},
markertap(e){
let markerId = e.detail.markerId;//此处markerId由于数据原因,存放的是设备编号deviceno
console.log(markerId);
let pointData =this.getPointFromMapPointLastDataByDeviceno(markerId)[0];
if(pointData!=null){
this.currentSelectPoint =pointData;
this.showModal = true;
}
},
getPointFromMapPointLastDataByDeviceno(deviceno){
return this.mapPointLastData.filter(function(item) {
return item.deviceno ==deviceno
});
},
getPointLastData(){
let params = {};
this.$http.get(this.url.mapPointLastData,params).then(res=>{
if(res.data.success){
this.mapPointLastData = res.data.result;
this.showPoint();
}else{
this.$tip.error(res.message)
}
this.loading = false
}).catch(()=>{
this.loading = false
});
},
showPoint(){
this.resetPointData();
this.dealMapPointLastData();
},
dealMapPointLastData(){
let that = this;
for(let i=0;i<this.mapPointLastData.length;i++){
let pointData =this.mapPointLastData[i];
if(pointData.xuanmuDevType == XUANMU_DEV_TYPE.YA_LI) {
that.pointCount.devType1Count += 1
that.pointTypeList.devType1List.push(pointData)
} else if (pointData.xuanmuDevType == XUANMU_DEV_TYPE.FA_MEN) {
that.pointCount.devType2Count += 1
that.pointTypeList.devType2List.push(pointData)
} else if (pointData.xuanmuDevType == XUANMU_DEV_TYPE.JING_GAI) {
that.pointCount.devType3Count += 1
that.pointTypeList.devType3List.push(pointData)
} else if (pointData.xuanmuDevType == XUANMU_DEV_TYPE.XIAO_HUO_SHUAN) {
that.pointCount.devType4Count += 1
that.pointTypeList.devType4List.push(pointData)
}
let imagename = this.getPointDevImage(pointData);
let showDataStr =that.formatShowData(pointData);
let pointMarker = {
id:parseInt(pointData.deviceno),
latitude:pointData.lat,
longitude:pointData.lng,
title:"我是title",
iconPath:`/static/devimg/${imagename}`,
width:20,
heigth:20,
label:{//为标记点旁边增加标签
content:showDataStr,//文本
color:'#123456',//文本颜色
fontSize:14,//文字大小
borderWidth:2,//边框宽度
borderColor:'#000000',//边框颜色
bgColor:'#000000',//背景颜色
borderRadius:12,//边框圆角
padding:5,//文本边缘留白
textAlign:'center',//文本对齐方式
x:0,//label的坐标,原点是 marker 对应的经纬度
y:0,//label的坐标,原点是 marker 对应的经纬度
},
callout:{//自定义标记点上方的气泡窗口 点击有效
content:showDataStr,//文本
color:'#ffffff',//文字颜色
fontSize:1,//文本大小
borderRadius:10,//边框圆角
bgColor:'#123456',//背景颜色
display:'ALWAYS'//常显
}
}
this.pointMarkerList.push(pointMarker);
}
console.log(this.pointMarkerList);
},
formatShowData(pointData){
let returnDataStr = "暂无数据";
let xuanmuDevType = pointData.xuanmuDevType
let dataValue = "";
if (xuanmuDevType == XUANMU_DEV_TYPE.YA_LI) {
dataValue = pointData.pressureKpa
if (dataValue != null && dataValue!='') {
returnDataStr = `${dataValue} Kpa`
}
}
return returnDataStr;
},
getPointDevImage(pointData) {
let devType = pointData.xuanmuDevType
let pointName = pointData.pointName
let warnType = pointData.warnType
let xuanmuDevType = pointData.xuanmuDevType
let imagename = ''
//判断设备类型
if (xuanmuDevType == '1') {
imagename += 'yl'
} else if (xuanmuDevType == '2') {
imagename += 'fm'
} else if (xuanmuDevType == '3') {
imagename += 'jg'
} else if (xuanmuDevType == '4') {
imagename += ''
}
imagename += '-green'
if (warnType != null) {
if (warnType.length > 0) {
imagename += '-red'
if (warnType.indexOf('1') >= 0) {
imagename += '-low'
}
}
}
imagename += '.png'
return imagename
},
resetPointData(){
this.pointMarkerList = [];
}
}
}
</script>
<style>
</style>
5***@qq.com (作者)
样式在下面,就是我有一个vue文件,一个nuve,2者在app的表现是一模一样的
2023-02-09 15:59