196 lines
4.9 KiB
Vue
196 lines
4.9 KiB
Vue
<template>
|
||
<view class="videoPage">
|
||
<headers>
|
||
<image @click="goBack" src="../../static/logo.png" class="backImg" v-show="showMapBack"></image>
|
||
<view class="headerName">
|
||
{{backArr.length>0?[backArr.length-1].name:'集团'}}
|
||
</view>
|
||
</headers>
|
||
<!-- @markertap="markertap" -->
|
||
<!-- @updated='mapUpdated' :latitude="latitude"
|
||
:longitude="longitude"-->
|
||
<map class="map" style="height: 500px;"
|
||
scale="3"
|
||
:markers="markers"
|
||
:show-location="true"
|
||
>
|
||
</map>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import amap from '../../static/js/amap-wx.js'
|
||
import headers from '../../components/headers/headers.vue'
|
||
export default {
|
||
components:{headers},
|
||
data() {
|
||
return {
|
||
mapData: [],
|
||
backArr: [],
|
||
searchsn:'',
|
||
latitude:'22.720017',
|
||
longitude:'114.171091',
|
||
markers:[],
|
||
mobileTopHeight:10,
|
||
userInfo:null,
|
||
showMapBack:false,
|
||
// mapObj:null
|
||
};
|
||
},
|
||
mounted() {
|
||
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||
|
||
this.initMap()
|
||
this.initData(true);
|
||
},
|
||
methods:{
|
||
initMap(){
|
||
// this.mapObj = new amap.AMapWX({
|
||
// key: '78f31be3debf6947dca6e092e56a22b4' //该key 是在高德中申请的微信小程序key
|
||
// });
|
||
// amapPluginInstance.getPoiAround({
|
||
// success: function(data){
|
||
// //成功回调
|
||
// },
|
||
// fail: function(info){
|
||
// //失败回调
|
||
// console.log(info)
|
||
// }
|
||
// })
|
||
},
|
||
goBack() {
|
||
if(this.backArr.length==1){
|
||
this.backArr=[]
|
||
}else{
|
||
this.backArr=this.backArr.splice(0, this.backArr.length-1);
|
||
}
|
||
this.initData()
|
||
},
|
||
initData(type) {
|
||
var that = this
|
||
if(this.backArr.length>0){
|
||
this.searchsn=this.backArr[this.backArr.length-1].sn
|
||
}else{
|
||
switch (that.userInfo.accountType) {
|
||
case 2:
|
||
this.searchsn=that.userInfo.headquartersSn
|
||
break;
|
||
case 3:
|
||
this.searchsn=that.userInfo.sn
|
||
break;
|
||
case 4:
|
||
this.searchsn=that.userInfo.sn
|
||
break;
|
||
case 5:
|
||
this.searchsn=that.userInfo.sn
|
||
break;
|
||
}
|
||
}
|
||
if((this.backArr.length==0&&that.userInfo.accountType==2) ||
|
||
(this.backArr.length==1&&that.userInfo.accountType==3) ||
|
||
(this.backArr.length==2&&that.userInfo.accountType==4||that.userInfo.accountType==5)){
|
||
this.showMapBack=false
|
||
}else{
|
||
this.showMapBack=true
|
||
}
|
||
if(that.userInfo.accountType==5){
|
||
this.getProjectDetail()
|
||
}else{
|
||
this.loadData(type);
|
||
}
|
||
|
||
},
|
||
//获取所有企业下区域数据
|
||
loadData(type) {
|
||
//type：true代表第一调用
|
||
var that = this
|
||
this.sendRequest({
|
||
url: "xmgl/company/getComapnyStatisticsList",
|
||
data: {sn: this.searchsn},
|
||
method: "POST",
|
||
success(res){
|
||
that.mapData = res.result.companyList?res.result.companyList:res.result.projectList
|
||
if(type){
|
||
// this.showMapBack=false
|
||
that.backArr=[]
|
||
// if(that.userInfo.accountType==4){
|
||
if(res.result.parentCompany){
|
||
that.backArr.push({name:res.result.parentCompany.companyName,sn:res.result.parentCompany.companySn})
|
||
}
|
||
// }
|
||
// if(that.userInfo.accountType==3||that.userInfo.accountType==4){
|
||
if(res.result.companyInfo){
|
||
that.backArr.push({name:res.result.companyInfo.companyName,sn:res.result.companyInfo.companySn})
|
||
}
|
||
// }
|
||
// console.log('that.userInfo',this)
|
||
// debugger
|
||
if((that.backArr.length==0&&that.userInfo.accountType==2) ||
|
||
(that.backArr.length==1&&that.userInfo.accountType==3) ||
|
||
(that.backArr.length==2&&that.userInfo.accountType==4)){
|
||
that.showMapBack=false
|
||
}else{
|
||
that.showMapBack=true
|
||
}
|
||
}
|
||
if(that.mapData.length>0){
|
||
that.markers = []
|
||
for (let i = 0; i < that.mapData.length; i++) {
|
||
var item = that.mapData[i]
|
||
var json = {
|
||
latitude:item.latitude,
|
||
longitude:item.longitude,
|
||
iconPath:'/static/logo.png',
|
||
label:{
|
||
content:item.name,
|
||
color:'#fff',
|
||
fontSize: 16,
|
||
borderRadius: 3,
|
||
padding: 5,
|
||
bgColor:'#5181F6',
|
||
textAlign:'center',
|
||
x: 80,
|
||
y: 80
|
||
}
|
||
}
|
||
// if(i==0){
|
||
// this.latitude=item.latitude
|
||
// this.longitude=item.longitude
|
||
// }
|
||
that.markers.push(json)
|
||
}
|
||
// that.mapObj.setFitView();
|
||
}else{
|
||
// this.$message('该区域下没有数据！')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//获取项目详细
|
||
getProjectDetail(){
|
||
this.sendRequest({
|
||
url: "xmgl/project/getProjectInfoBySn",
|
||
data: {projectSn: this.searchsn},
|
||
method: "POST",
|
||
success(res){
|
||
// this.mapData=[res.result]
|
||
// this.mapObj.clearMap()
|
||
// this.setAreaMarker()
|
||
}
|
||
})
|
||
},
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.videoPage{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.map{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style> |