<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
:visible.sync="visible"
|
><div style="display:flex;">
|
<div style="width: 40%;">
|
<TableLayout >
|
<!-- 搜索表单 -->
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="" inline>
|
<el-form-item label="" prop="name" style="width: 100px;">
|
<el-input v-model="searchForm.name" placeholder="客户名称" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="" prop="code" style="width: 100px;">
|
<el-input v-model="searchForm.code" placeholder="客户简码" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<section>
|
<el-button type="primary" @click="search">搜索</el-button>
|
<el-button @click="reset">重置</el-button>
|
</section>
|
</el-form>
|
<!-- 表格和分页 -->
|
<template v-slot:table-wrap>
|
<el-table
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
stripe
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column prop="sortnum" label="客户序号" min-width="80px"></el-table-column>
|
<el-table-column prop="code" label="客户简码" min-width="120px">
|
<template scope="{row}">
|
<span title="点击查看" style="cursor: pointer;" class="blue" @click="showDetail(row)">{{row.code}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="客户名称" min-width="120px">
|
<template scope="{row}">
|
<span title="点击查看" style="cursor: pointer;" class="blue" @click="showDetail(row)">{{row.name}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="totalNum" label="送货量(条)" min-width="120px"></el-table-column>
|
</el-table>
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
style="width: 60%;"
|
>
|
</pagination>
|
<el-button @click="visible=false" style="position: fixed;bottom: 10px;right: 20px;">返回</el-button>
|
</template>
|
</TableLayout>
|
</div>
|
<div style="width: 60%;">
|
<div id="container" style="width: 60%"></div>
|
<div id="panel" style='position: absolute; right: 10px;top: 10px;height: 480px;width: 300px;z-index: 100;overflow: auto;'></div>
|
</div>
|
</div>
|
|
<template v-slot:footer>
|
<el-button @click="visible=false">返回</el-button>
|
</template>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseTable from '@/components/base/BaseTable'
|
import TableLayout from '@/layouts/TableLayout'
|
import Pagination from '@/components/common/Pagination'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
import greenIcon from '@/assets/icons/location-green.png'
|
import blueIcon from '@/assets/icons/location-blue.png'
|
import redIcon from '@/assets/icons/location-red.png'
|
export default {
|
name: 'OperaJkSketchMapWindow',
|
extends: BaseTable,
|
components: { GlobalWindow, Pagination, TableLayout },
|
data () {
|
return {
|
// 表单数据
|
visible: false,
|
title: '',
|
searchForm: {
|
sketchLineId: '',
|
name: '',
|
code: ''
|
},
|
dataList: [],
|
infoWindow: null,
|
locations: [],
|
map: null,
|
model: {
|
}
|
}
|
},
|
created () {
|
this.config({
|
module: '交控-线路优化线路客户记录信息表',
|
api: '/business/jkSketchCustomer',
|
'field.id': 'id',
|
'field.main': 'id'
|
})
|
},
|
methods: {
|
open (title, row) {
|
this.title = title + (row.lineName)
|
this.visible = true
|
this.dataList = []
|
this.model = row
|
this.locations = []
|
this.infoWindows = []
|
this.initAMap()
|
this.searchForm.sketchLineId = row.id
|
this.visible = true
|
this.tableData = {
|
// 已选中的数据
|
selectedRows: [],
|
// 排序的字段
|
sorts: [],
|
// 当前页数据
|
list: [],
|
// 分页
|
pagination: {
|
pageIndex: 1,
|
pageSize: 10,
|
total: 0
|
}
|
}
|
this.search()
|
},
|
showDetail (row) {
|
console.error('对不起，该客户定位信息不完善！')
|
if (!this.map) {
|
return
|
}
|
if (!row.longitude || !row.latitude) {
|
this.$message.error('对不起，该客户定位信息不完善！')
|
return
|
}
|
this.closeInfo()
|
// 构建信息窗体中显示的内容
|
var info = []
|
info.push('<div style="width: 400px;"><div style="width: 100%;font-size: 18px;border-bottom: 1px solid #eeeeee;padding-bottom: 6px;"> <b>客户信息</b> </div> ')
|
info.push('<div style="padding:0px 0px 0px 4px;"><span><b>姓名：' + row.name + '</b><b style="color:red;">【' + row.code + '】</b></span> ')
|
info.push('<span style="margin-top: 5px;">序号：' + row.sortnum + '</span> ')
|
info.push('<span style="margin-top: 5px;">地址：' + row.location + '</span></div>')
|
info.push('</div>')
|
this.infoWindow = new AMap.InfoWindow({
|
content: info.join('<br/>') // 使用默认信息窗体框样式，显示信息内容
|
})
|
// this.infoWindow.on('open',showInfoOpen)
|
this.infoWindow.on('close', this.showInfoClose)
|
this.infoWindow.open(this.map, new AMap.LngLat(row.longitude, row.latitude))
|
},
|
closeInfo () {
|
if (this.infoWindow) {
|
this.infoWindow.close()
|
}
|
},
|
showInfoClose () {
|
},
|
loadCustomer () {
|
var that = this
|
this.api.allMapList({
|
sketchLineId: this.model.id
|
}).then(res => {
|
that.dataList = res || []
|
that.locations = []
|
that.dataList.forEach((item, index) => {
|
var allsteps = []
|
allsteps.push([item.startLogitude, item.startLatitude])
|
const steps = (item.steps || '').split(';')
|
if (index != that.dataList.length - 1) {
|
steps.forEach(item1 => {
|
const ll = (item1 || '').split(',')
|
allsteps.push(ll)
|
})
|
allsteps.push([item.endLogitude, item.endLatitude])
|
}
|
try {
|
/* console.log(item)
|
var driving = new AMap.Driving({
|
map: that.map,
|
panel: 'panel'
|
})
|
driving.search(new AMap.LngLat(item.startLogitude, item.startLatitude), new AMap.LngLat(item.endLogitude, item.endLatitude), function (status, result) {
|
if (status === 'complete') {
|
console.log('绘制驾车路线完成')
|
} else {
|
console.error('获取驾车数据失败：' + result)
|
}
|
}) */
|
} catch (e) {
|
|
}
|
var color = index === that.dataList.length - 1 ? '#a10e0e' : '#157713'
|
var polyline = new AMap.Polyline({
|
path: [allsteps],
|
isOutline: true,
|
outlineColor: color || '#157713',
|
borderWeight: 1,
|
strokeColor: color || '#157713',
|
strokeOpacity: 1,
|
strokeWeight: 2,
|
// 折线样式还支持 'dashed'
|
strokeStyle: 'solid',
|
// strokeStyle是dashed时有效
|
strokeDasharray: [10, 5],
|
lineJoin: 'round',
|
lineCap: 'round',
|
zIndex: 100
|
})
|
|
that.map.add([polyline])
|
that.map.setFitView()
|
|
const icon = new AMap.Icon({
|
size: new AMap.Size(30, 50), // 图标尺寸
|
image: index === 0 ? greenIcon : (index === that.dataList.length - 1 ? redIcon : blueIcon)
|
})
|
|
console.log("=====index====",index)
|
var marker = new AMap.Marker({
|
position: new AMap.LngLat(item.startLogitude, item.startLatitude),
|
icon: icon,
|
anchor: 'bottom-center',
|
offset: new AMap.Pixel(0, 0)
|
})
|
// var title = (index == 0 ? '园区' : (index + '.' + item.name + (' ' + item.location || ''))) + '，' + (index != that.dataList.length - 1 ? '距下一站：' : '返回园区：') + ((item.distance || 0) / 1000) + '公里'
|
// marker.setTitle(title)
|
var contnet = '<div>' + (index == 0 ? '园区' : (index + '.' + item.name)) + '</div>'
|
marker.setLabel({
|
direction: 'right',
|
offset: new AMap.Pixel(0, 0),
|
content: contnet
|
})
|
marker.setMap(that.map)
|
// that.locations.push(allsteps)
|
})
|
})
|
},
|
initAMap () {
|
var that = this
|
AMapLoader.load({
|
key: process.env.VUE_APP_AMAP_KEY,
|
version: '2.0',
|
plugins: ['AMap.ToolBar', 'AMap.Driving'],
|
AMapUI: {
|
version: '1.1',
|
plugins: []
|
},
|
Loca: {
|
version: '2.0' // 数据可视化
|
}
|
}).then((AMap) => {
|
that.map = new AMap.Map('container', {
|
viewMode: '2D', // 默认使用 2D 模式
|
zoom: 20, // 初始化地图层级
|
center: [118.39, 31.28] // 初始化地图中心点
|
})
|
this.loadCustomer()
|
}).catch(e => {
|
console.log(e)
|
})
|
},
|
getRandomColor (index, total) {
|
const r = 21
|
// const g = 80 +(index*50/total);
|
const g = 120
|
const b = 19
|
return `rgb(${r}, ${g}, ${b})`
|
}
|
}
|
}
|
</script>
|
<style>
|
#container {
|
padding: 0px;
|
margin: 0px;
|
width: 100%;
|
height: 90%;
|
position: absolute;
|
}
|
|
</style>
|
