<style lang="css">
#container {
/* width: 100%;
height: 100%; */
position: relative;
/* left: 50%;
top: 50%; */
/* transform: translate3d(-50%, -50%, 0); */
}
.search-box {
position: relative;
width: 100%;
}
.intro {
width: 40%;
max-height: 260px;
position: absolute;
right: 13%;
top: 30px;
background-color: rgba(255, 255, 255, 0.8);
}
.prompt {
padding: 1rem;
background: white;
width: auto;
height: auto;
text-align: left;
}
</style>
<template>
<div id="outer-box" >
<div class="search-box" >
<!-- 地图右上显示内容 -->
<div class="intro">
<el-row :gutter="10" style="text-align: center;">
<!-- 学校数量 -->
<el-col :xs="24" :sm="12" :md="6" :lg="6" >
<h3 style="color: #797979; font-size: 24px;">
<i class="iconfont iconxuexiao" style="font-size: 25px;"></i>
</h3>
<h3>学校数量</h3>
<h3 style="color: #F59A23;">{{school_num}}</h3>
</el-col>
<!-- 食堂总量 -->
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<h3 style="color: #797979;">
<i class="iconfont iconshitang" style="font-size: 25px;"></i>
</h3>
<h3>食堂总量</h3>
<h3 style="color: #F59A23;">{{canteen_num_inuse}}</h3>
</el-col>
<!-- 在用食堂数 -->
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<h3 style="color: #797979;">
<i class="iconfont iconzaiyongshitang" style="font-size: 25px;"></i>
</h3>
<h3>在用食堂数</h3>
<h3 style="color: #F59A23;">{{canteen_num_inuse}}</h3>
</el-col>
<!-- 工勤人员总数 -->
<el-col :xs="24" :sm="12" :md="6" :lg="6">
<h3 style="color: #797979;">
<i class="iconfont icongonqinrenyuanshu" style="font-size: 25px;"></i>
</h3>
<h3>工勤人员总数</h3>
<h3 style="color: #F59A23;">{{people}}</h3>
</el-col>
</el-row>
</div>
</div>
<div style="width: 100vw;height: 100vh" id="container"></div>
</div>
</template>
<script>
// eslint-disable-next-line
import AMap from "AMap";
// var map;
export default {
props:{
canteen_num: {
type: [String, Number, Array],
default: String,
},//餐厅总量
canteen_num_inuse: {
type: [String, Number, Array],
default: String,
},//启用餐厅总量
people: {
type: [String, Number, Array],
default: String,
},//工勤人员数量
school_num: {
type: [String, Number, Array],
default: String,
},//学校总量
allcanteens: { //初始化地图层级
type: [String, Number, Array],
default: Array,
},
allschools: { //初始化地图层级
type: [String, Number, Array],
default: Array,
},
},
name: "Index",
watch: {
allschools(val) { //监听学校数据
this.init();
},
},
data() {
return {
map:null,
infoWindow:null,
};
},
mounted() {
this.init();
},
methods: {
init() {
let self=this;
console.log(self.list)
//初始化地图
var map = new AMap.Map("container", {viewMode: '3D',resizeEnable: true,zoom: 10});
var allschools = self.allschools;
var allcanteens = self.allcanteens;
//初始化信窗-显示位置
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
//学校数据通过文本标记显示
for (var i = 0; i < allschools.length; i++) {
// 文本标记显示内容
var text = new AMap.Text({
text:`<div >
${ allschools[i].name }<br/>
<br/>
${ allschools[i].canteens?allschools[i].canteens:'' }<br/>
</div>`,
anchor:'center', // 设置文本标记锚点
draggable:true,
cursor:'pointer',
angle:0,
style:{
'padding': '2rem',
'border-radius': '50%',
'background-color': 'rgba(255, 240, 9, 0.6)',
'width': '10rem',
'height': '10rem',
'border-width': 0,
'text-align': 'center',
'font-size': '1rem',
'color': 'blue'
},
position: allschools[i].position
});
//通过data保存/添加组织机构数据
text.data={
orgId:allschools[i].porgId?allschools[i].porgId:allschools[i].orgId,
schoolId:allschools[i].schoolId?allschools[i].schoolId:allschools[i].thisId,
canteenId:allschools[i].porgId?'':allschools[i].thisId,
}
text.setMap(map);
//学校信息窗展示数据
text.content = `<div class="prompt">
学校名称：${ allschools[i].name }<br/>
学校地址：${ allschools[i].address }<br/>
联系人：${ allschools[i].contacts?allschools[i].contacts:'' }<br/>
联系电话：${ allschools[i].phone?allschools[i].phone:'' }<br/>
食堂数量：${ allschools[i].canteens?allschools[i].canteens:'' }<br/>
工勤人员数量：${ allschools[i].workers?allschools[i].workers:'' }<br/>
</div>`;
//通过点击显示学校信息窗数据
text.on('click', markerClick);
// text.on('mouseout', marker.setLabel({}));
}
//食堂数据通过标记点显示
for (var i = 0, marker; i < allcanteens.length; i++) {
//地图标记点
var marker = new AMap.Marker({
position: allcanteens[i].position,
map: map
});
//通过data保存/添加组织机构数据
marker.data={
orgId:allcanteens[i].porgId?allcanteens[i].porgId:allcanteens[i].orgId,
schoolId:allcanteens[i].schoolId?allcanteens[i].schoolId:allcanteens[i].thisId,
canteenId:allcanteens[i].porgId?'':allcanteens[i].thisId,
}
//食堂信息窗展示数据
marker.content = `<div class="prompt">
食堂名称：${ allcanteens[i].name }<br/>
食堂地址：${ allcanteens[i].address }<br/>
联系人：${ allcanteens[i].contacts?allcanteens[i].contacts:'' }<br/>
联系电话：${ allcanteens[i].phone?allcanteens[i].phone:'' }<br/>
工勤人员数量：${ allcanteens[i].workers?allcanteens[i].workers:'' }<br/>
</div>`;
//通过鼠标移动上标记点显示信息窗
marker.on('mouseover', markerClick);
//点击调取父级方法跳转
marker.on('click',self.handler);
// marker.emit('mouseout', {target: marker});
}
//信息窗实例化方法
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
// map.setFitView();
},
//回调父级方法传参
handler(val){
this.$emit('handlerJump', val.target.data)
}
},
};
</script>
网友评论