forked from qiushanhe/dm-manage-web
parent
052fcd60b8
commit
185163d326
@ -0,0 +1,747 @@ |
||||
|
||||
<template> |
||||
<div class="amap-page-container"> |
||||
<div id="map" class="amap-cavans" /> |
||||
<el-input id="search" v-model="searchBody" class="search-body" placeholder="请输入..." @keyup.enter.native="submitSearch"> |
||||
<el-button slot="append" icon="el-icon-search" @click="submitSearch" /> |
||||
</el-input> |
||||
<div class="asider" :class="showSchool ? '' : 'hidden-school'"> |
||||
<el-card class="box-card" :body-style="{ flex: 1, 'overflow-y': 'scroll', padding: 0 }"> |
||||
<div slot="header" class="clearfix"> |
||||
<div class="map-card-title">驾校列表</div> |
||||
</div> |
||||
<div v-for="school in schoolList" :key="school.schoolId" style="margin:10px;" :class="currentdeptId == school.schoolId ? 'actived-school' : ''"> |
||||
<el-card :body-style="{ padding: '10px' }"> |
||||
<div slot="header" class="clearfix"> |
||||
<div class="map-card-title">{{ school.schoolName }}</div> |
||||
<el-switch v-model="school.showInMap" v-hasPermi="['sch:place:edit']" class="add-icon" active-text="展示" inactive-text="隐藏" @change="changeSchoolStatus(school)" /> |
||||
</div> |
||||
<el-button @click="handleClickSchool(school)">{{ `数据管理(${getCount(school.schoolId)})` }}</el-button> |
||||
<el-tooltip v-hasPermi="['sch:place:add']" content="新增场地" placement="left" effect="dark"> |
||||
<el-button icon="el-icon-plus" class="add-place-btn" @click="handleInsertPlace(school.schoolId)" /> |
||||
</el-tooltip> |
||||
</el-card> |
||||
</div> |
||||
</el-card> |
||||
<div class="asider-sub"> |
||||
<el-tooltip content="放大" placement="left" effect="dark"> |
||||
<el-button icon="el-icon-plus" class="is-circle" :disabled="zomm >= 18" @click="bigger" /> |
||||
</el-tooltip> |
||||
<el-tooltip content="缩小" placement="left" effect="dark"> |
||||
<el-button icon="el-icon-minus" class="is-circle" :disabled="zomm <= 8" @click="smaller" /> |
||||
</el-tooltip> |
||||
<div class="mt10"> |
||||
<el-tooltip content="驾校" placement="left" effect="dark"> |
||||
<el-button icon="el-icon-school" class="is-circle" @click="toggleSchool" /> |
||||
</el-tooltip> |
||||
<el-tooltip content="定位" placement="left" effect="dark"> |
||||
<el-button icon="el-icon-help" class="is-circle" @click="geolocation" /> |
||||
</el-tooltip> |
||||
<el-tooltip content="测距" placement="left" effect="dark"> |
||||
<el-button icon="el-icon-thumb" class="is-circle" @click="ranging" /> |
||||
</el-tooltip> |
||||
<el-tooltip content="分享" placement="left" effect="dark"> |
||||
<el-button icon="el-icon-share" class="is-circle" /> |
||||
</el-tooltip> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<el-card v-if="placeDialogShow" class="place-dialog" :body-style="{ padding: '10px' }"> |
||||
<div slot="header" class="clearfix"> |
||||
<div class="map-card-title">场地设置</div> |
||||
<el-tooltip content="取点" placement="right" effect="dark"> |
||||
<el-button icon="el-icon-location" class="add-icon" @click="getPoint" /> |
||||
</el-tooltip> |
||||
</div> |
||||
<el-form ref="placeForm" :model="placeForm" label-width="70px"> |
||||
<el-form-item label="所属驾校" prop="schoolId"> |
||||
<el-select v-model="placeForm.schoolId" placeholder="请选择" clearable> |
||||
<el-option v-for="dict in schoolList" :key="dict.schoolId" :label="dict.schoolName" :value="dict.schoolId" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="名称" prop="name"> |
||||
<el-input v-model="placeForm.name" placeholder="输入名称" /> |
||||
</el-form-item> |
||||
<el-form-item label="旗子颜色" prop="flagColor"> |
||||
<el-radio-group v-model="placeForm.flagColor"> |
||||
<el-radio v-for="(item, index) in colorOptions" :key="index" :label="item"> |
||||
<img :src="require(`@/assets/images/place/flag_${item}.png`)" width="20px"> |
||||
</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item label="地址" prop="address"> |
||||
<el-input v-model="placeForm.address" placeholder="输入地址" /> |
||||
</el-form-item> |
||||
<el-form-item label="经度" prop="lng"> |
||||
<el-input v-model="placeForm.lng" placeholder="输入经度" /> |
||||
</el-form-item> |
||||
<el-form-item label="纬度" prop="lat"> |
||||
<el-input v-model="placeForm.lat" placeholder="输入纬度" /> |
||||
</el-form-item> |
||||
<el-form-item label="所属区域" prop="area"> |
||||
<el-select v-model="placeForm.area" placeholder="请选择" clearable size="small"> |
||||
<el-option v-for="dict in areaOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="电话" prop="phone"> |
||||
<el-input v-model="placeForm.phone" placeholder="输入电话" /> |
||||
</el-form-item> |
||||
<el-form-item label="负责人" prop="contact"> |
||||
<el-input v-model="placeForm.contact" placeholder="输入负责人" /> |
||||
</el-form-item> |
||||
<el-form-item label="是否推荐" prop="contact"> |
||||
<el-radio v-model="placeForm.recommend" :label="true">是</el-radio> |
||||
<el-radio v-model="placeForm.recommend" :label="false">否</el-radio> |
||||
</el-form-item> |
||||
<el-form-item label="备注" prop="remark"> |
||||
<el-input v-model="placeForm.remark" placeholder="输入备注" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" /> |
||||
</el-form-item> |
||||
<el-form-item style="text-align:right;"> |
||||
<el-button v-hasPermi="['sch:place:edit']" type="primary" @click="onSubmit">保存</el-button> |
||||
<el-button @click="closePlaceDialog">取消</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<el-card :class="placeListDialogShow ? '' : 'hidden-place-list'" class="place-list-dialog" :style="{ right: showSchool ? '300px' : '0', top: fullScreenPlaceList ? '0px' : '420px' }" :body-style="{ padding: '10px', height: 'calc(100% - 52px)' }"> |
||||
<div slot="header" class="clearfix"> |
||||
<div class="map-card-title"> |
||||
{{ placeListDialogTitle }} |
||||
<el-input v-model="tableSearch" placeholder="请输入搜索的内容" clearable /> |
||||
</div> |
||||
<el-tooltip content="全屏" placement="top" effect="dark"> |
||||
<el-button icon="el-icon-full-screen" class="add-icon" @click="fullScreenPlaceList = !fullScreenPlaceList" /> |
||||
</el-tooltip> |
||||
<el-tooltip content="关闭" placement="top" effect="dark"> |
||||
<el-button icon="el-icon-close" class="add-icon" @click="() => { placeListDialogShow = false; fullScreenPlaceList = false }" /> |
||||
</el-tooltip> |
||||
</div> |
||||
<el-table :data="placeTableData" border stripe class="place-table-list" height="100%"> |
||||
<el-table-column label="序号" type="index" fixed="left" width="50" /> |
||||
<el-table-column prop="name" label="名称" min-width="100" /> |
||||
<el-table-column prop="phone" label="电话" width="120" /> |
||||
<el-table-column prop="contact" label="负责人" width="120" /> |
||||
<el-table-column prop="address" label="地址" min-width="100" /> |
||||
<el-table-column prop="lng" label="经度" width="110" /> |
||||
<el-table-column prop="lat" label="纬度" width="110" /> |
||||
<el-table-column prop="area" label="所属区域" width="110" /> |
||||
<el-table-column label="展示" width="100"> |
||||
<template slot-scope="scope"> |
||||
<el-switch v-model="scope.row.showInMap" v-hasPermi="['sch:place:edit']" @change="changePlaceStatus(scope.row)" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="100"> |
||||
<template slot-scope="scope"> |
||||
<el-tooltip v-hasPermi="['sch:place:edit']" content="编辑" placement="top" effect="dark"> |
||||
<el-button icon="el-icon-edit" type="primary" style="padding: 4px 8px;" @click="handleEditPlace(scope.row)" /> |
||||
</el-tooltip> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-card> |
||||
|
||||
<div v-if="isPointing || isRanging" class="map-tip" :style="{ transform: 'translate3D(' + (tipPostion.x + 15) + 'px,' + (tipPostion.y - 10) + 'px, 0)' }">{{ mapHelpText }}</div> |
||||
<i v-if="isPointing" class="el-icon-s-flag circle" :style="{ transform: 'translate3D(' + tipPostion.x + 'px,' + tipPostion.y + 'px, 0)' }" /> |
||||
</div> |
||||
</template> |
||||
<!-- eslint-disable no-undef --> |
||||
<script> |
||||
import AMap from 'AMap'; |
||||
import { getMapData, addPlace, updatePlace, updateSchoolStatus } from '@/api/sch/place'; |
||||
export default { |
||||
name: 'Place', |
||||
data() { |
||||
return { |
||||
aMap: null, |
||||
zomm: 12, |
||||
showSchool: true, |
||||
isRanging: false, |
||||
aMapLocation: null, |
||||
aMouseTool: null, |
||||
searchBody: '', |
||||
placeSearch: null, |
||||
placeDialogShow: false, |
||||
isPointing: false, |
||||
placeForm: { |
||||
lat: undefined, |
||||
lng: undefined, |
||||
name: undefined, |
||||
address: undefined, |
||||
remark: undefined, |
||||
phone: undefined, |
||||
flagColor: 'red' |
||||
}, |
||||
colorOptions: ['red', 'yellow', 'blue', 'green', 'purple', 'black'], |
||||
mapHelpText: '', |
||||
tipPostion: { |
||||
x: 0, |
||||
y: 0 |
||||
}, |
||||
geocoder: null, |
||||
locationMarker: null, |
||||
selectMarker: null, |
||||
placeListDialogShow: false, |
||||
placeListDialogTitle: '', |
||||
fullScreenPlaceList: false, |
||||
tableSearch: '', |
||||
tableData: [], |
||||
schoolList: [], |
||||
currentdeptId: undefined, |
||||
placeMarkerList: [], |
||||
areaOptions: [] |
||||
}; |
||||
}, |
||||
computed: { |
||||
placeTableData: function () { |
||||
if (this.tableSearch) { |
||||
return this.tableData.filter((dataNews) => { |
||||
return ( |
||||
dataNews.schoolId === this.currentdeptId && |
||||
Object.keys(dataNews).some((key) => { |
||||
return String(dataNews[key]).toLowerCase().indexOf(this.tableSearch) > -1; |
||||
}) |
||||
); |
||||
}); |
||||
} |
||||
return this.tableData.filter((dataNews) => dataNews.schoolId === this.currentdeptId); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.initMap(); |
||||
this.getDicts('dm_area').then((response) => { |
||||
this.areaOptions = response.data; |
||||
}); |
||||
}, |
||||
methods: { |
||||
initMap() { |
||||
window.onLoad = () => { |
||||
this.aMap = new AMap.Map('map', { |
||||
zoom: this.zomm, |
||||
center: [117.226095, 31.814372], |
||||
zooms: [8, 18] |
||||
}); |
||||
// 监听缩放 |
||||
this.aMap.on('zoomend', () => { |
||||
this.zomm = this.aMap.getZoom(); |
||||
this.$message('当前缩放等级:' + this.zomm); |
||||
}); |
||||
// 监听点击 |
||||
this.aMap.on('click', (ev) => { |
||||
if (this.isPointing) { |
||||
this.placeForm.lat = ev.lnglat.lat; |
||||
this.placeForm.lng = ev.lnglat.lng; |
||||
this.regeoCode(); |
||||
if (this.selectMarker) { |
||||
this.selectMarker.setPosition([this.placeForm.lng, this.placeForm.lat]); |
||||
} else { |
||||
this.locationMarker.setPosition([this.placeForm.lng, this.placeForm.lat]); |
||||
this.aMap.add(this.locationMarker); |
||||
} |
||||
this.isPointing = false; |
||||
} |
||||
}); |
||||
// 监听移动 |
||||
this.aMap.on('mousemove', (ev) => { |
||||
if (this.isRanging) { |
||||
this.mapHelpText = '左键单击选点，双击/右键单击完成选点，再次点击测距按钮可退出测距模式，并清除测距结果'; |
||||
this.tipPostion = { |
||||
x: ev.pixel.x, |
||||
y: ev.pixel.y |
||||
}; |
||||
} else if (this.isPointing) { |
||||
this.mapHelpText = '点击地图添加标注'; |
||||
this.tipPostion = { |
||||
x: ev.pixel.x, |
||||
y: ev.pixel.y |
||||
}; |
||||
} |
||||
}); |
||||
// 添加地图插件 |
||||
AMap.plugin(['AMap.Scale', 'AMap.Geolocation', 'AMap.MouseTool', 'AMap.PlaceSearch', 'AMap.Autocomplete', 'AMap.Geocoder'], () => { |
||||
this.aMap.addControl(new AMap.Scale()); |
||||
const geoLoca = new AMap.Geolocation({ |
||||
showButton: false |
||||
}); |
||||
this.aMapLocation = geoLoca; |
||||
this.aMap.addControl(geoLoca); |
||||
this.aMouseTool = new AMap.MouseTool(this.aMap); |
||||
const auto = new AMap.Autocomplete({ |
||||
input: 'search' // 前端搜索框 |
||||
}); |
||||
this.placeSearch = new AMap.PlaceSearch({ |
||||
map: this.aMap |
||||
}); |
||||
AMap.event.addListener(auto, 'select', this.select); |
||||
this.geocoder = new AMap.Geocoder(); |
||||
this.locationMarker = new AMap.Marker({ |
||||
icon: require(`@/assets/images/place/flag_red.png`) |
||||
}); |
||||
}); |
||||
this.getPageData(); |
||||
}; |
||||
// this.importMap(); |
||||
}, |
||||
// 导入地图 |
||||
// importMap() { |
||||
// const url = 'https://webapi.amap.com/maps?v=1.4.15&key=0e62be0896c6b8d27d453445f0fb8bc4&callback=onLoad'; |
||||
// var jsapi = document.createElement('script'); |
||||
// jsapi.charset = 'utf-8'; |
||||
// jsapi.src = url; |
||||
// document.head.appendChild(jsapi); |
||||
// }, |
||||
toggleSchool() { |
||||
this.showSchool = !this.showSchool; |
||||
}, |
||||
// 经纬度 -> 地址 |
||||
regeoCode() { |
||||
this.geocoder.getAddress([this.placeForm.lng, this.placeForm.lat], (status, result) => { |
||||
if (status === 'complete' && result.regeocode) { |
||||
this.placeForm.address = result.regeocode.formattedAddress; |
||||
} else { |
||||
console.log('根据经纬度查询地址失败'); |
||||
} |
||||
}); |
||||
}, |
||||
// 定位 |
||||
geolocation() { |
||||
this.aMapLocation.getCurrentPosition(); |
||||
}, |
||||
// 测距 |
||||
ranging() { |
||||
this.isPointing = false; |
||||
this.isRanging = !this.isRanging; |
||||
if (this.isRanging) { |
||||
this.aMap.setDefaultCursor('crosshair'); |
||||
this.drawLine(); |
||||
} else { |
||||
this.aMap.setDefaultCursor('default'); |
||||
this.aMouseTool.close(true); |
||||
} |
||||
}, |
||||
// 画线 |
||||
drawLine() { |
||||
this.aMouseTool.rule({ |
||||
startMarkerOptions: { |
||||
// 可缺省 |
||||
icon: new AMap.Icon({ |
||||
size: new AMap.Size(19, 31), // 图标大小 |
||||
imageSize: new AMap.Size(19, 31), |
||||
image: 'https://webapi.amap.com/theme/v1.3/markers/b/start.png' |
||||
}) |
||||
}, |
||||
endMarkerOptions: { |
||||
// 可缺省 |
||||
icon: new AMap.Icon({ |
||||
size: new AMap.Size(19, 31), // 图标大小 |
||||
imageSize: new AMap.Size(19, 31), |
||||
image: 'https://webapi.amap.com/theme/v1.3/markers/b/end.png' |
||||
}), |
||||
offset: new AMap.Pixel(-9, -31) |
||||
}, |
||||
midMarkerOptions: { |
||||
// 可缺省 |
||||
icon: new AMap.Icon({ |
||||
size: new AMap.Size(19, 31), // 图标大小 |
||||
imageSize: new AMap.Size(19, 31), |
||||
image: 'https://webapi.amap.com/theme/v1.3/markers/b/mid.png' |
||||
}), |
||||
offset: new AMap.Pixel(-9, -31) |
||||
}, |
||||
lineOptions: { |
||||
// 可缺省 |
||||
strokeStyle: 'solid', |
||||
strokeColor: '#FF33FF', |
||||
strokeOpacity: 1, |
||||
strokeWeight: 2 |
||||
}, |
||||
tmpLineOptions: { |
||||
strokeStyle: 'dashed', |
||||
strokeColor: '#FF33FF', |
||||
strokeOpacity: 1, |
||||
strokeWeight: 2 |
||||
} |
||||
}); |
||||
}, |
||||
// 选择查询结果 |
||||
select(e) { |
||||
this.placeSearch.setCity(e.poi.adcode); |
||||
this.placeSearch.search(e.poi.name); // 关键字查询查询 |
||||
}, |
||||
// 查询按钮/回车事件 |
||||
submitSearch() { |
||||
this.placeSearch.search(this.searchBody); |
||||
}, |
||||
// 缩放 |
||||
bigger() { |
||||
this.zomm++; |
||||
this.aMap.setZoom(this.zomm); |
||||
}, |
||||
smaller() { |
||||
this.zomm--; |
||||
this.aMap.setZoom(this.zomm); |
||||
}, |
||||
|
||||
// 点击数据管理 |
||||
handleClickSchool(item) { |
||||
this.placeListDialogShow = true; |
||||
this.placeListDialogTitle = `数据管理 [${item.schoolName}]`; |
||||
this.currentdeptId = item.schoolId; |
||||
}, |
||||
// 新增场地 |
||||
handleInsertPlace(schoolId) { |
||||
if (this.selectMarker) { |
||||
this.selectMarker.setAnimation('AMAP_ANIMATION_NONE'); |
||||
this.selectMarker = null; |
||||
} |
||||
this.placeDialogShow = true; |
||||
this.aMap.setDefaultCursor('default'); |
||||
this.isRanging = false; |
||||
this.placeForm = { |
||||
lat: undefined, |
||||
lng: undefined, |
||||
name: undefined, |
||||
address: undefined, |
||||
remark: undefined, |
||||
phone: undefined, |
||||
schoolId: schoolId, |
||||
showInMap: true, |
||||
flagColor: 'red' |
||||
}; |
||||
}, |
||||
// 编辑场地 |
||||
handleEditPlace(item) { |
||||
this.placeDialogShow = true; |
||||
this.aMap.setDefaultCursor('default'); |
||||
if (this.selectMarker) { |
||||
this.selectMarker.setAnimation('AMAP_ANIMATION_NONE'); |
||||
} |
||||
this.isRanging = false; |
||||
this.placeForm = Object.assign({}, item); |
||||
this.selectMarker = this.placeMarkerList.filter((marker) => marker.getExtData().placeId === item.placeId)[0]; |
||||
this.selectMarker && this.selectMarker.setAnimation('AMAP_ANIMATION_BOUNCE'); |
||||
this.aMap.setCenter([item.lng, item.lat]); |
||||
}, |
||||
getPoint() { |
||||
this.isPointing = !this.isPointing; |
||||
}, |
||||
// 保存 |
||||
async onSubmit() { |
||||
// 保存接口 |
||||
if (this.checkPlaceFormValidate()) { |
||||
// 先访问接口，返回id插入placeForm |
||||
const resp = this.savePlace(this.placeForm); |
||||
if (resp.code != 200) { |
||||
return; |
||||
} else { |
||||
this.$message.success('操作成功'); |
||||
} |
||||
if (!this.placeForm.placeId && resp.data) { |
||||
this.$set(this.placeForm, 'placeId', resp.data); |
||||
} |
||||
// 移除选点用 的标记 |
||||
this.aMap.remove(this.locationMarker); |
||||
// 根据form创建新marker 并添加到地图上 |
||||
const tmpMarker = new AMap.Marker({ |
||||
map: this.aMap, |
||||
position: [this.placeForm.lng, this.placeForm.lat], |
||||
icon: require(`@/assets/images/place/flag_${this.placeForm.flagColor}.png`), |
||||
label: { |
||||
content: this.placeForm.name, |
||||
direction: 'right' |
||||
}, |
||||
extData: this.placeForm |
||||
}); |
||||
// 新marker事件 |
||||
tmpMarker.on('click', this.handleClickMarker); |
||||
// 如果当前选择的marker点存在（编辑） |
||||
if (this.selectMarker) { |
||||
// 地图上 移除选择的点 |
||||
this.aMap.remove(this.selectMarker); |
||||
this.selectMarker = null; |
||||
} |
||||
// 关闭场地弹窗 |
||||
this.placeDialogShow = false; |
||||
this.isPointing = false; |
||||
|
||||
// 场地列表 移除原列表中操作的场地数据 |
||||
const tmpArr = this.tableData.filter((item) => item.placeId !== this.placeForm.placeId); |
||||
// 新增新的场地 |
||||
tmpArr.push(this.placeForm); |
||||
// 重置场地数组 |
||||
this.tableData = tmpArr; |
||||
// 地图marker列表 移除操作的原marker 添加新marker进数组 |
||||
const tmpArr1 = this.placeMarkerList.filter((item) => item.getExtData().placeId !== this.placeForm.placeId); |
||||
tmpArr1.push(tmpMarker); |
||||
this.placeMarkerList = tmpArr1; |
||||
} |
||||
}, |
||||
async savePlace(item) { |
||||
if (item.placeId) { |
||||
return updatePlace(item); |
||||
} else { |
||||
return addPlace(item); |
||||
} |
||||
}, |
||||
checkPlaceFormValidate() { |
||||
const valid = []; |
||||
if (!this.placeForm.name) { |
||||
valid.push('名称'); |
||||
} |
||||
if (!this.placeForm.address) { |
||||
valid.push('地址'); |
||||
} |
||||
if (!this.placeForm.lng) { |
||||
valid.push('经度'); |
||||
} |
||||
if (!this.placeForm.lat) { |
||||
valid.push('纬度'); |
||||
} |
||||
if (!this.placeForm.phone) { |
||||
valid.push('电话'); |
||||
} |
||||
if (valid.length == 0) { |
||||
return true; |
||||
} else { |
||||
this.$message.error(`请将以下填写完整: ${valid.join(',')}`); |
||||
return false; |
||||
} |
||||
}, |
||||
// 关闭场地弹窗 |
||||
closePlaceDialog() { |
||||
this.placeDialogShow = false; |
||||
this.isPointing = false; |
||||
this.aMap.remove(this.locationMarker); |
||||
if (this.selectMarker) { |
||||
this.selectMarker.setAnimation('AMAP_ANIMATION_NONE'); |
||||
this.selectMarker = null; |
||||
} |
||||
}, |
||||
handleClickMarker(ev) { |
||||
if (this.selectMarker) { |
||||
this.selectMarker.setAnimation('AMAP_ANIMATION_NONE'); |
||||
} |
||||
this.placeForm = ev.target.getExtData(); |
||||
this.placeDialogShow = true; |
||||
ev.target.setAnimation('AMAP_ANIMATION_BOUNCE'); |
||||
this.selectMarker = ev.target; |
||||
}, |
||||
getPageData() { |
||||
getMapData().then((resp) => { |
||||
if (resp.code == 200) { |
||||
this.schoolList = resp.data.schoolList; |
||||
this.tableData = resp.data.placeList; |
||||
this.currentdeptId = this.schoolList[0].schoolId; |
||||
this.createMarkersInMap(); |
||||
} |
||||
}); |
||||
}, |
||||
getCount(schoolId) { |
||||
return this.tableData.filter((item) => item.schoolId === schoolId).length; |
||||
}, |
||||
// 重置markers |
||||
resetMarkers() { |
||||
this.aMap.clearMap(); |
||||
this.createMarkersInMap(); |
||||
}, |
||||
// 生成markers |
||||
createMarkersInMap() { |
||||
for (let i = 0; i < this.tableData.length; i++) { |
||||
const element = this.tableData[i]; |
||||
const tempSchool = this.schoolList.filter((item) => item.schoolId === element.schoolId)[0]; |
||||
if (!element.schoolShow || !element.showInMap) { |
||||
continue; |
||||
} |
||||
const tmpMarker = new AMap.Marker({ |
||||
map: this.aMap, |
||||
position: [element.lng, element.lat], |
||||
icon: require(`@/assets/images/place/flag_${element.flagColor}.png`), |
||||
label: { |
||||
content: element.name, |
||||
direction: 'right' |
||||
}, |
||||
extData: element |
||||
}); |
||||
tmpMarker.on('click', this.handleClickMarker); |
||||
this.placeMarkerList.push(tmpMarker); |
||||
} |
||||
}, |
||||
// 修改驾校状态 |
||||
changeSchoolStatus(item) { |
||||
// 访问接口，成功后重置markers |
||||
updateSchoolStatus(item).then((resp) => { |
||||
if (resp.code == 200) { |
||||
this.$message.success('操作成功'); |
||||
// this.aMap.clearMap() |
||||
// this.getPageData() |
||||
this.resetMarkers(); |
||||
} |
||||
}); |
||||
}, |
||||
// 修改场地状态 |
||||
async changePlaceStatus(item) { |
||||
const resp = await updatePlace(item); |
||||
if (resp.code == 200) { |
||||
this.resetMarkers(); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.amap-page-container { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.amap-cavans { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.asider { |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
width: 300px; |
||||
height: 100%; |
||||
transition: 0.3s; |
||||
z-index: 9; |
||||
} |
||||
|
||||
.box-card { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
} |
||||
|
||||
::v-deep .el-card__header { |
||||
padding: 10px 15px; |
||||
} |
||||
|
||||
.clearfix { |
||||
display: flex; |
||||
} |
||||
|
||||
.clearfix .map-card-title { |
||||
flex: 1; |
||||
line-height: 30px; |
||||
} |
||||
|
||||
.clearfix .add-icon { |
||||
width: auto; |
||||
height: 30px; |
||||
} |
||||
|
||||
.asider-sub { |
||||
position: absolute; |
||||
top: 40px; |
||||
left: -45px; |
||||
padding: 10px 10px 0 0; |
||||
z-index: 900; |
||||
} |
||||
|
||||
.asider-sub .is-circle { |
||||
display: block; |
||||
margin: 0; |
||||
padding: 10px; |
||||
color: #464646; |
||||
border-radius: 0; |
||||
font-size: 16px; |
||||
box-shadow: 2px 2px 2px rgba(80, 80, 80, 0.67); |
||||
} |
||||
|
||||
.mt10 { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.hidden-school { |
||||
transform: translateX(300px); |
||||
} |
||||
|
||||
.search-body { |
||||
position: absolute; |
||||
top: 20px; |
||||
left: 20px; |
||||
width: 400px; |
||||
} |
||||
|
||||
.add-place-btn { |
||||
float: right; |
||||
border: none; |
||||
font-size: 16px; |
||||
color: #409eff; |
||||
} |
||||
|
||||
::v-deep .place-dialog { |
||||
position: absolute; |
||||
left: 20px; |
||||
top: 60px; |
||||
width: 350px; |
||||
} |
||||
|
||||
.map-tip { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
max-width: 150px; |
||||
padding: 5px; |
||||
border-radius: 2px; |
||||
background: #000; |
||||
color: #fff; |
||||
opacity: 0.7; |
||||
font-size: 12px; |
||||
transition-duration: 1ms; |
||||
} |
||||
|
||||
.circle { |
||||
position: absolute; |
||||
left: -8px; |
||||
top: -25px; |
||||
font-size: 24px; |
||||
color: red; |
||||
transition-duration: 1ms; |
||||
} |
||||
|
||||
.place-dialog .el-form .el-form-item { |
||||
margin-bottom: 8px; |
||||
} |
||||
|
||||
.place-list-dialog { |
||||
position: absolute; |
||||
top: 420px; |
||||
left: 0; |
||||
bottom: 0; |
||||
transition: 0.3s; |
||||
z-index: 151; |
||||
background: #e2e5ea; |
||||
} |
||||
|
||||
.place-list-dialog .add-icon { |
||||
font-size: 18px; |
||||
border: none; |
||||
} |
||||
|
||||
.hidden-place-list { |
||||
transform: translateY(100%); |
||||
} |
||||
|
||||
.place-list-dialog .clearfix .map-card-title { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.place-list-dialog .clearfix .map-card-title .el-input { |
||||
margin-left: 20px; |
||||
width: 240px; |
||||
} |
||||
|
||||
.actived-school { |
||||
border: 2px solid #409eff !important; |
||||
} |
||||
|
||||
::v-deep .el-radio__label { |
||||
vertical-align: middle; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue