<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"?>
????????????<!--?地圖右上顯示內(nèi)容?-->
????????????<div?class="intro">
????????????????<el-row?:gutter="10"?style="text-align:?center;">
????????????????????<!--?學(xué)校數(shù)量?-->
????????????????????<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>學(xué)校數(shù)量</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>
????????????????????<!--?在用食堂數(shù)?-->
????????????????????<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>在用食堂數(shù)</h3>
??????????????????????<h3?style="color:?#F59A23;">{{canteen_num_inuse}}</h3>
????????????????????</el-col>
????????????????????<!--?工勤人員總數(shù)?-->
????????????????????<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>工勤人員總數(shù)</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,
????????????},//工勤人員數(shù)量
????????school_num:?{?
????????????????type:??[String,?Number,?Array],
????????????????default:?String,
????????????},//學(xué)校總量
????????allcanteens:?{?//初始化地圖層級
????????????????type:??[String,?Number,?Array],
????????????????default:?Array,
????????????},
????????allschools:?{?//初始化地圖層級
????????????????type:??[String,?Number,?Array],
????????????????default:?Array,
????????????},
????},
?name:?"Index",
?watch:?{
????????allschools(val)?{?//監(jiān)聽學(xué)校數(shù)據(jù)
????????????????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)});
????????//學(xué)校數(shù)據(jù)通過文本標(biāo)記顯示
????????for?(var?i?=?0;?i?<?allschools.length;?i++)?{
????????????//?文本標(biāo)記顯示內(nèi)容
????????????var?text?=?new?AMap.Text({
????????????????text:`<div?>?
????????????????????${?allschools[i].name?}<br/>
????????????????????<br/>
????????????????????${?allschools[i].canteens?allschools[i].canteens:''?}<br/>
??????????????????</div>`,
????????????????anchor:'center',?//?設(shè)置文本標(biāo)記錨點
????????????????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保存/添加組織機(jī)構(gòu)數(shù)據(jù)
????????????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);
????????????//學(xué)校信息窗展示數(shù)據(jù)
????????????text.content?=?`<div?class="prompt">?
????????????????????學(xué)校名稱：${?allschools[i].name?}<br/>
????????????????????學(xué)校地址：${?allschools[i].address?}<br/>
????????????????????聯(lián)系人：${?allschools[i].contacts?allschools[i].contacts:''?}<br/>
????????????????????聯(lián)系電話：${?allschools[i].phone?allschools[i].phone:''?}<br/>
????????????????????食堂數(shù)量：${?allschools[i].canteens?allschools[i].canteens:''?}<br/>
????????????????????工勤人員數(shù)量：${?allschools[i].workers?allschools[i].workers:''?}<br/>
??????????????????</div>`;
????????????//通過點擊顯示學(xué)校信息窗數(shù)據(jù)
????????????text.on('click',?markerClick);
????????????//?text.on('mouseout',?marker.setLabel({}));
????????}
????????//食堂數(shù)據(jù)通過標(biāo)記點顯示
????????for?(var?i?=?0,?marker;?i?<?allcanteens.length;?i++)?{
????????//地圖標(biāo)記點
????????var?marker?=?new?AMap.Marker({
????????????????position:?allcanteens[i].position,
????????????????map:?map
????????????});
????????????//通過data保存/添加組織機(jī)構(gòu)數(shù)據(jù)
????????????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,
????????????}
????????????//食堂信息窗展示數(shù)據(jù)
????????????marker.content?=?`<div?class="prompt">?
????????????????????食堂名稱：${?allcanteens[i].name?}<br/>
????????????????????食堂地址：${?allcanteens[i].address?}<br/>
????????????????????聯(lián)系人：${?allcanteens[i].contacts?allcanteens[i].contacts:''?}<br/>
????????????????????聯(lián)系電話：${?allcanteens[i].phone?allcanteens[i].phone:''?}<br/>
????????????????????工勤人員數(shù)量：${?allcanteens[i].workers?allcanteens[i].workers:''?}<br/>
??????????????????</div>`;
????????????//通過鼠標(biāo)移動上標(biāo)記點顯示信息窗
????????????marker.on('mouseover',?markerClick);
????????????//點擊調(diào)取父級方法跳轉(zhuǎn)
????????????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();
????},
????//回調(diào)父級方法傳參
????handler(val){?????????
??????????this.$emit('handlerJump',?val.target.data)
????}
??},
};
</script>
