| | |
| | | :title="title" |
| | | width="100%" |
| | | :visible.sync="visible" |
| | | > |
| | | <div id="container"></div> |
| | | <div id="panel" style='position: absolute; right: 10px;top: 10px;height: 480px;width: 300px;z-index: 100;overflow: auto;'></div> |
| | | ><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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | 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 blueIcon from '@/assets/icons/location-blue.png' |
| | | import redIcon from '@/assets/icons/location-red.png' |
| | | export default { |
| | | name: 'OperaJkSketchMapWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | extends: BaseTable, |
| | | components: { GlobalWindow, Pagination, TableLayout }, |
| | | data () { |
| | | return { |
| | | // 表单数据 |
| | | visible: false, |
| | | title: '', |
| | | searchForm: { |
| | | sketchLineId: '', |
| | | name: '', |
| | | code: '' |
| | | }, |
| | | dataList: [], |
| | | infoWindow: null, |
| | | locations: [], |
| | | map: null, |
| | | model: { |
| | |
| | | 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 |
| | |
| | | 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 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', |