|
|
@@ -1,381 +0,0 @@
|
|
|
-<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
|
|
-<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=0c011c95685ea80ab9ca5601fc894139&plugin=AMap.PlaceSearch,AMap.AutoComplete,AMap.PolyEditor,AMap.Geocoder"></script>
|
|
|
-<template>
|
|
|
- <div class="main">
|
|
|
- <!-- <div class="tabs">
|
|
|
- <el-radio-group v-model="apply_status" style="margin-bottom: 30px;" @change="handleClick">
|
|
|
- <el-radio-button label="1">GPS定位信息</el-radio-button>
|
|
|
- <el-radio-button label="2">修改记录</el-radio-button>
|
|
|
- </el-radio-group>
|
|
|
- </div> -->
|
|
|
- <!-- GPS定位信息 -->
|
|
|
- <div class="moudel" v-if="apply_status == '1'">
|
|
|
- <el-form ref="screenForm" :model="screenForm" label-width="160px" size="small" label-position="left">
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="22">
|
|
|
- <div>
|
|
|
- <span>售后网点： {{websit_name}}</span>
|
|
|
- </div>
|
|
|
- <div style="margin: 10px 0 20px 0;">
|
|
|
- <span>地址： {{address}}</span>
|
|
|
- <span style="margin-left: 30px">经纬度</span>
|
|
|
- <span v-if="lng">{{lng + ' ， ' + lat}}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <el-button type="primary" @click="init1();getGps()">刷新</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <div class="map">
|
|
|
- <el-amap-search-box
|
|
|
- class="search-box"
|
|
|
- :search-option="searchOption"
|
|
|
- :on-search-result="onSearchResult"
|
|
|
- >
|
|
|
- </el-amap-search-box>
|
|
|
- <el-amap vid="amapDemo" :events='events' v-bind="mapConfig" class="map-container" ref="map" :center="center" style="height: 70vh;" :zoom="zoom">
|
|
|
- <el-amap-polygon v-bind="polygonConfig"></el-amap-polygon>
|
|
|
- <el-amap-marker
|
|
|
- v-for="(marker, index) in markers"
|
|
|
- :position="marker.position"
|
|
|
- :title="marker.title"
|
|
|
- :key="index"
|
|
|
- :events="marker.events"
|
|
|
- :icon="marker.icon"
|
|
|
- ></el-amap-marker>
|
|
|
- <template v-if="currentWindow.visible">
|
|
|
- <el-amap-info-window :position="currentWindow.position" :content="currentWindow.content" :visible="currentWindow.visible"></el-amap-info-window>
|
|
|
- </template>
|
|
|
- </el-amap>
|
|
|
- </div>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="reset()">重置</el-button>
|
|
|
- <el-button type="primary" @click="save()">确认</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 修改记录 -->
|
|
|
- <div class="moudel" v-if="apply_status == '2'">
|
|
|
- <div class="table">
|
|
|
- <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
|
|
|
- <el-table-column prop="" label="操作类型" align="center">修改GPS</el-table-column>
|
|
|
- <el-table-column prop="operate_content" label="操作记录" align="center"></el-table-column>
|
|
|
- <el-table-column prop="operate_person_name" label="修改人" align="center"></el-table-column>
|
|
|
- <el-table-column prop="createtime" label="修改时间" align="center"></el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="pagination clearfix">
|
|
|
- <div class="fr">
|
|
|
- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="currentPage"
|
|
|
- :page-sizes="[10, 20, 30, 50]"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="listTotal"
|
|
|
- ></el-pagination>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
- // import { save, getGps, getList } from '@/api/websitRemoteExpenseSet/afterSaleGpsLocationSet.js';
|
|
|
- export default {
|
|
|
- data(){
|
|
|
- let self = this;
|
|
|
- return {
|
|
|
- dataList: [],
|
|
|
- websit_name: '',
|
|
|
- websit_number: 'S2106590',
|
|
|
- address: '',
|
|
|
- selectAddress: '',
|
|
|
- apply_status: '1',
|
|
|
- keyword: '',
|
|
|
- screenForm: {},
|
|
|
- listLoading: true, // 列表加载loading
|
|
|
- currentPage: 1, // 当前页码
|
|
|
- pageSize: 10, // 每页数量
|
|
|
- listTotal: 0, // 列表总数
|
|
|
- zoom: 12,
|
|
|
- searchOption: {
|
|
|
- city: "全国", //范围
|
|
|
- citylimit: false, //是否限制城市内搜索
|
|
|
- },
|
|
|
- geoCoder: null,
|
|
|
- mapConfig: {
|
|
|
- //地图属性配置
|
|
|
- center: [120.96, 30.9], // 地图中心点
|
|
|
- zoom: 11, // 地图缩放比例
|
|
|
- city: '嘉善县', // 描边传参
|
|
|
- zoomEnable: true, // 缩放
|
|
|
- dragEnable: true, // 拖拽
|
|
|
- features: ['bg', 'road', 'point'], // 隐藏默认楼块
|
|
|
- mapStyle: 'amap://styles/normal', // 设置地图的显示样式
|
|
|
- events: {} // 地图加载完成时执行的方法
|
|
|
- },
|
|
|
- polygonConfig: {
|
|
|
- // 城市边界 配置
|
|
|
- strokeColor: '#5D87FB', // 城市边界颜色
|
|
|
- strokeWeight: 2,
|
|
|
- strokeStyle: 'dashed', // 线样式
|
|
|
- fillColor: '#5D87FB', // 遮罩背景色
|
|
|
- fillOpacity: 0.1
|
|
|
- },
|
|
|
- events: {
|
|
|
- click(e) {
|
|
|
- self.chaadd(e.lnglat)
|
|
|
- }
|
|
|
- },
|
|
|
- center: [113.3568890, 23.1355340],
|
|
|
- currentWindow: {},
|
|
|
- markers: [],
|
|
|
- lat: null,
|
|
|
- lng: null,
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- if(this.$route.query.websit_number){
|
|
|
- this.websit_number = this.$route.query.websit_number;
|
|
|
- this.websit_name = this.$route.query.websit_name;
|
|
|
- }
|
|
|
- // this.getGps()
|
|
|
- setTimeout(()=>{
|
|
|
- this.init1()
|
|
|
- this.geoCoder = new AMap.Geocoder({
|
|
|
- radius: 1000 //范围，默认：500
|
|
|
- })
|
|
|
- },500);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleClick(event) {
|
|
|
- this.apply_status = event
|
|
|
- if(event == 1){
|
|
|
- this.getGps()
|
|
|
- }else if(event == 2){
|
|
|
- this.getList()
|
|
|
- }
|
|
|
- },
|
|
|
- getGps(){
|
|
|
- getGps({websit_number: this.websit_number}).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- if(res.data.lng){
|
|
|
- this.address = res.data.address
|
|
|
- this.websit_name = res.data.websit_name
|
|
|
- this.lat = res.data.lat
|
|
|
- this.lng = res.data.lng
|
|
|
- this.center = [res.data.lng,res.data.lat]
|
|
|
- this.addMarker(res.data.lng,res.data.lat,res.data.address)
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.$message.error(res.msg);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 获取修改记录
|
|
|
- getList() {
|
|
|
- this.listLoading = true;
|
|
|
- let params = {
|
|
|
- page: this.currentPage,
|
|
|
- limit: this.pageSize,
|
|
|
- websit_number: this.websit_number
|
|
|
- }
|
|
|
- getList(params).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- this.dataList = res.data.data
|
|
|
- this.listTotal = res.data.total
|
|
|
- this.listLoading = false
|
|
|
- } else {
|
|
|
- this.$message.error(res.msg);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- onSearchResult(pois) {
|
|
|
- const that = this
|
|
|
- that.lat = pois[0].lat
|
|
|
- that.lng = pois[0].lng
|
|
|
- that.selectAddress = pois[0].name
|
|
|
- that.center = [pois[0].lng, pois[0].lat]
|
|
|
- that.addMarker(pois[0].lng, pois[0].lat, pois[0].name)
|
|
|
- },
|
|
|
- save(){
|
|
|
- console.log(this.lng,this.lat,this.selectAddress)
|
|
|
- if(!this.lng || !this.lat || !this.selectAddress){
|
|
|
- return this.$message({
|
|
|
- message: '经纬度地址为空，请重新选择!',
|
|
|
- type: 'warning'
|
|
|
- });
|
|
|
- }
|
|
|
- let params = {
|
|
|
- websit_number: this.websit_number,
|
|
|
- lng: this.lng,
|
|
|
- lat: this.lat,
|
|
|
- address: this.selectAddress
|
|
|
- }
|
|
|
- save(params).then(res => {
|
|
|
- if (res.code == 1) {
|
|
|
- this.$message({
|
|
|
- type: 'success',
|
|
|
- message: '保存成功!'
|
|
|
- });
|
|
|
- this.getGps();
|
|
|
- } else {
|
|
|
- this.$message.error(res.msg);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- init1() {
|
|
|
- const that = this
|
|
|
- var map = new AMap.Map("container", {
|
|
|
- resizeEnable: true
|
|
|
- });
|
|
|
- var autoOptions = {
|
|
|
- input: "tipinput"
|
|
|
- };
|
|
|
- AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder'], function(){
|
|
|
- var auto = new AMap.AutoComplete(autoOptions);
|
|
|
- var placeSearch = new AMap.PlaceSearch({
|
|
|
- map: map
|
|
|
- }); //构造地点查询类
|
|
|
- auto.on("select", select);//注册监听，当选中某条记录时会触发
|
|
|
- function select(e) {
|
|
|
- console.log(e)
|
|
|
- placeSearch.setCity(e.poi.adcode);
|
|
|
- placeSearch.search(e.poi.name); //关键字查询查询
|
|
|
- }
|
|
|
- // 地址逆向解析插件
|
|
|
- });
|
|
|
- },
|
|
|
- chaadd(e){
|
|
|
-
|
|
|
- this.lng = e.lng
|
|
|
- this.lat = e.lat
|
|
|
- this.setMapMarker(e.lng,e.lat)
|
|
|
- },
|
|
|
- addMarker(lng,lat,address){
|
|
|
- const that = this
|
|
|
- that.markers = []
|
|
|
-
|
|
|
- this.currentWindow = {
|
|
|
- visible: true, //窗体显示
|
|
|
- position: [lng, lat],
|
|
|
- offset: 0,
|
|
|
- content: `<div class="content" style="font-size:12px;">
|
|
|
- <div style="font-size:14px;font-weight:bold;margin-bottom:5px;">售后网点地址</div>
|
|
|
- <div>地址：${address}</div>
|
|
|
- <div>经度：${lng}</div>
|
|
|
- <div>纬度：${lat}</div>
|
|
|
- </div>`
|
|
|
- }
|
|
|
-
|
|
|
- that.markers.push(
|
|
|
- {
|
|
|
- position: [lng,lat],
|
|
|
- title: '售后网点地址',
|
|
|
- icon: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
|
|
|
- events: {
|
|
|
- //events里面定义点标记的事件，比如点击事件
|
|
|
- click: () => {
|
|
|
- // that.currentWindow = {
|
|
|
- // visible: true, //窗体显示
|
|
|
- // position: [lng,lat],
|
|
|
- // offset: 0,
|
|
|
- // content: `<div class="content" style="font-size:12px;">
|
|
|
- // <div style="font-size:14px;font-weight:bold;margin-bottom:5px;">售后网点地址</div>
|
|
|
- // <div>地址：${address}</div>
|
|
|
- // <div>经度：${lng}</div>
|
|
|
- // <div>纬度：${lat}</div>
|
|
|
- // </div>`
|
|
|
- // }
|
|
|
- }
|
|
|
- },
|
|
|
- offset: 0, //偏移量
|
|
|
- clickable: true, //点标记是否可以点击
|
|
|
- visible: true //点标记是否显示
|
|
|
- }
|
|
|
- )
|
|
|
- },
|
|
|
- setMapMarker(lng,lat) {
|
|
|
- const that = this
|
|
|
- if (lng == '' && lat == '') {
|
|
|
- return
|
|
|
- }
|
|
|
- let lnglat = [lng, lat]
|
|
|
- that.center = [lng, lat]
|
|
|
- that.geoCoder.getAddress(lnglat, (status, result) => {
|
|
|
- let address = result.regeocode.formattedAddress
|
|
|
- if (status === 'complete' && result.regeocode) {
|
|
|
- console.log(result)
|
|
|
- that.selectAddress = result.regeocode.formattedAddress
|
|
|
-
|
|
|
- that.addMarker(lng, lat, address)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 更改每页数量
|
|
|
- handleSizeChange(val) {
|
|
|
- this.pageSize = val;
|
|
|
- this.currentPage = 1;
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- // 更改当前页
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.currentPage = val;
|
|
|
- this.getList();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped="scoped" lang="scss">
|
|
|
- .main{
|
|
|
- // height: 100vh;
|
|
|
- padding: 10px;
|
|
|
- .tabs {
|
|
|
- width: 88%;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- .map{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border: 1px solid #cccccc;
|
|
|
- margin-right: 10px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- .text{
|
|
|
- padding: 10px;
|
|
|
- font-size: 14px;
|
|
|
- color: #333333;
|
|
|
- line-height: 26px;
|
|
|
- .zhu,.fu{
|
|
|
- width: 40%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .search-box {
|
|
|
- width: 50%;
|
|
|
- // transform: translateY(-20px);
|
|
|
- border: 1px solid #d9d9d9;
|
|
|
- ::v-deep .search-btn {
|
|
|
- background: #409EFF;
|
|
|
- color: #ffffff;
|
|
|
- width: 15%;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .dialog-footer{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- ::v-deep .search-box{
|
|
|
- position: absolute !important;
|
|
|
- }
|
|
|
- ::v-deep .amap-info div:first-child {
|
|
|
- left: 170px !important;
|
|
|
- bottom: -135px !important;
|
|
|
- }
|
|
|
-</style>
|
pengyh