|
|
|
@ -1,7 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<el-amap ref="map" :center="center" :zoom="zoom" @init="initMap" @click="clickMap"> |
|
|
|
|
|
|
|
<el-amap ref="map" :center="center" :zoom="zoom"> |
|
|
|
<el-amap-control-map-type :visible="controlVisible" /> |
|
|
|
<el-amap-marker |
|
|
|
v-for="(marker, index) in markers" |
|
|
|
@ -14,138 +13,311 @@ |
|
|
|
/> |
|
|
|
</el-amap> |
|
|
|
<div class="toolbar"> |
|
|
|
<el-card class="box-card" shadow="never"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>当前门店信息</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
{{ stinfo }} |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card class="box-card" shadow="never"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>门店列表</span> |
|
|
|
<el-button style="float: right; padding: 3px 0" type="text">更新门店数据</el-button> |
|
|
|
</div> |
|
|
|
<el-collapse v-model="activeNames"> |
|
|
|
<el-collapse-item name="info"> |
|
|
|
<template slot="title"> |
|
|
|
<i class="el-icon-s-shop" /> 当前选中门店信息 |
|
|
|
</template> |
|
|
|
<el-descriptions :column="1" size="mini" border> |
|
|
|
<el-descriptions-item :label-style="{'width': '70px'}" label="序号">{{ currentStore.serNumber }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="门店名称">{{ currentStore.name }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="门店地址">{{ currentStore.address }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="门店面积">{{ currentStore.area }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="是否尽调">{{ currentStore.dueDiligence }}</el-descriptions-item> |
|
|
|
</el-descriptions> |
|
|
|
</el-collapse-item> |
|
|
|
<el-collapse-item title="" name="list"> |
|
|
|
<template slot="title"> |
|
|
|
<i class="el-icon-s-grid" /> 门店列表<el-button style="margin-left: 20px;padding: 3px 0" type="text" @click.stop="showUploadXlsx">更新门店数据</el-button> |
|
|
|
</template> |
|
|
|
<el-form ref="form" :model="queryParams" label-width="70px" size="mini"> |
|
|
|
<el-form-item label="门店名称"> |
|
|
|
<el-input v-model="queryParams.name" clearable @clear="dosearch"> |
|
|
|
<el-button slot="append" icon="el-icon-search" @click="dosearch" /> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="是否尽调"> |
|
|
|
<el-radio-group v-model="queryParams.jindiao" @input="dosearch"> |
|
|
|
<el-radio label="全部" /> |
|
|
|
<el-radio label="是" /> |
|
|
|
<el-radio label="否" /> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="营业面积"> |
|
|
|
<el-input v-model="queryParams.areaStar" clearable @clear="dosearch"> |
|
|
|
<template slot="prepend">大于等于</template> |
|
|
|
</el-input> |
|
|
|
<el-input v-model="queryParams.areaEnd" clearable @clear="dosearch"> |
|
|
|
<template slot="prepend">小于等于</template> |
|
|
|
<el-button slot="append" icon="el-icon-search" @click="dosearch" /> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<el-table v-loading="tableLoading" :data="dataList" border style="width: 100%;margin-top: 10px;" max-height="400"> |
|
|
|
<el-table-column prop="name" label="门店名称" align="center" /> |
|
|
|
<el-table-column prop="dueDiligence" label="是否尽调" align="center" width="90" /> |
|
|
|
</el-table> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="chartsa"> |
|
|
|
<el-collapse v-model="activeNamesChart"> |
|
|
|
<el-collapse-item name="pie"> |
|
|
|
<template slot="title"> |
|
|
|
<i class="el-icon-pie-chart" /> 尽调比例 |
|
|
|
</template> |
|
|
|
<div ref="charta" style="height:240px;width: 100%;" /> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</div> |
|
|
|
<el-dialog title="上传《门店信息.xlsx》" :visible.sync="uploadDialogVisible" width="40%" :before-close="dialogClose"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div> |
|
|
|
{{ stinfo }} |
|
|
|
<el-upload |
|
|
|
ref="upload" |
|
|
|
class="upload-demo" |
|
|
|
:action="updateAction" |
|
|
|
:on-progress="handleProgress" |
|
|
|
:on-success="handleSuccess" |
|
|
|
:file-list="fileList" |
|
|
|
:auto-upload="false" |
|
|
|
:multiple="false" |
|
|
|
:limit="1" |
|
|
|
> |
|
|
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button> |
|
|
|
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> |
|
|
|
<div slot="tip" class="el-upload__tip">上传 《门店信息.xlsx》文件，文件中数据格式需要按照 <el-button type="text" @click="downtemplate">模板Excel文件</el-button> 中填写，可以点击<el-button |
|
|
|
size="mini" |
|
|
|
type="warning" |
|
|
|
>下载模板Excel文件</el-button> 做为参照。 </div> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
<el-card class="box-card" shadow="never"> |
|
|
|
<el-descriptions title="文件上传结果" :column="1"> |
|
|
|
<el-descriptions-item label="上传文件名">{{ uploadVo.fileName }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="上传开始时间">{{ uploadVo.starTime }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="上传用时">{{ uploadVo.useTime }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="总记录数">{{ uploadVo.numberAll }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="已尽调数">{{ uploadVo.numberTure }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="未尽调数">{{ uploadVo.numberFalse }}</el-descriptions-item> |
|
|
|
<el-descriptions-item label="未知状态数">{{ uploadVo.numberOther }}</el-descriptions-item> |
|
|
|
<el-descriptions-item v-show="uploadVo.errInfo" label="异常信息">{{ uploadVo.errInfo }}</el-descriptions-item> |
|
|
|
</el-descriptions> |
|
|
|
</el-card> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
<div slot="footer"> |
|
|
|
<el-button type="primary" plain style="margin-right: 50px;" @click="dialogClose">关闭</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as echarts from 'echarts' |
|
|
|
import req from '@/api/gd36524/store' |
|
|
|
export default { |
|
|
|
name: 'MapVueAMap', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
controlVisible: true, |
|
|
|
stinfo: '', |
|
|
|
zoom: 13, |
|
|
|
center: [114.490788, 38.033577], |
|
|
|
|
|
|
|
markers: [{ |
|
|
|
position: ['114.319127', '38.12222'], |
|
|
|
id: 1, |
|
|
|
icon: 'https://supervise.yxtsoft.com/img/base/ic_ar.png', |
|
|
|
content: 'abc', |
|
|
|
title: '测xxx', |
|
|
|
label: { |
|
|
|
content: 'aaa', |
|
|
|
offset: [1, 1] |
|
|
|
} |
|
|
|
}, { |
|
|
|
position: [114.618504, 38.063857], |
|
|
|
id: 2, |
|
|
|
content: 'abc', |
|
|
|
title: '测试caaa', |
|
|
|
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png', |
|
|
|
label: { |
|
|
|
content: 'bbb', |
|
|
|
offset: [1, 1] |
|
|
|
} |
|
|
|
}, { |
|
|
|
position: [114.515507, 37.976225], |
|
|
|
id: 3, |
|
|
|
content: 'abc', |
|
|
|
title: '测试content', |
|
|
|
label: { |
|
|
|
direction: 'bottom', |
|
|
|
offset: [0, 5], // 设置文本标注偏移量 |
|
|
|
content: "<div class='info'>我是 marker 的 label 标签</div>" // 设置文本标注内容 |
|
|
|
} |
|
|
|
}], |
|
|
|
charta: null, |
|
|
|
notChartData: true, |
|
|
|
activeNames: ['info', 'list'], |
|
|
|
activeNamesChart: ['pie'], |
|
|
|
mapicon: { |
|
|
|
red: process.env.VUE_APP_PUBLIC_PATH + 'image/icon_local_red.png', |
|
|
|
blue: process.env.VUE_APP_PUBLIC_PATH + 'image/icon_local_blue.png' |
|
|
|
}, |
|
|
|
tplpath: process.env.VUE_APP_PUBLIC_PATH + 'datatemplate.xlsx', |
|
|
|
uploadDialogVisible: false, |
|
|
|
uploadVo: { |
|
|
|
fileName: '', |
|
|
|
starTime: '', |
|
|
|
useTime: '', |
|
|
|
numberAll: '', |
|
|
|
numberTure: '', |
|
|
|
numberFalse: '', |
|
|
|
numberOther: '', |
|
|
|
errInfo: '' |
|
|
|
}, |
|
|
|
updateAction: process.env.VUE_APP_BASE_API + '/store/uploadData', |
|
|
|
fullscreenloading: null, |
|
|
|
fileList: [], |
|
|
|
|
|
|
|
table: false, |
|
|
|
dialog: false, |
|
|
|
loading: false, |
|
|
|
gridData: [{ |
|
|
|
date: '2016-05-02', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-04', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-01', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}, { |
|
|
|
date: '2016-05-03', |
|
|
|
name: '王小虎', |
|
|
|
address: '上海市普陀区金沙江路 1518 弄' |
|
|
|
}], |
|
|
|
form: { |
|
|
|
queryParams: { |
|
|
|
name: '', |
|
|
|
region: '', |
|
|
|
date1: '', |
|
|
|
date2: '', |
|
|
|
delivery: false, |
|
|
|
type: [], |
|
|
|
resource: '', |
|
|
|
desc: '' |
|
|
|
areaStar: '', |
|
|
|
areaEnd: '', |
|
|
|
jindiao: '全部' |
|
|
|
}, |
|
|
|
formLabelWidth: '80px', |
|
|
|
timer: null |
|
|
|
dataList: [], |
|
|
|
tableLoading: false, |
|
|
|
|
|
|
|
controlVisible: false, |
|
|
|
zoom: 13, |
|
|
|
center: [114.490788, 38.033577], |
|
|
|
markers: [], |
|
|
|
currentStore: { |
|
|
|
serNumber: '', |
|
|
|
name: '', |
|
|
|
address: '', |
|
|
|
area: '', |
|
|
|
dueDiligence: '' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.loadList() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// this.$nextTick(() => { |
|
|
|
// this.initCharta() |
|
|
|
// }) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (this.charta) { |
|
|
|
this.charta.dispose() |
|
|
|
this.charta = null |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getMap() { |
|
|
|
console.log(this.$refs.map.$$getInstance()) |
|
|
|
initCharta(listdata) { |
|
|
|
this.notChartData = false |
|
|
|
var x = 0 |
|
|
|
var y = 0 |
|
|
|
for (var i in listdata) { |
|
|
|
if (listdata[i].dueDiligence === '是') { x++ } else { y++ } |
|
|
|
} |
|
|
|
const _dataX = [] |
|
|
|
_dataX.push({ |
|
|
|
value: x, |
|
|
|
name: '已尽调' |
|
|
|
}) |
|
|
|
_dataX.push({ |
|
|
|
value: y, |
|
|
|
name: '未尽调' |
|
|
|
}) |
|
|
|
|
|
|
|
this.charta = echarts.init(this.$refs.charta) |
|
|
|
this.charta.setOption({ |
|
|
|
tooltip: { |
|
|
|
trigger: 'item' |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
orient: 'vertical', |
|
|
|
left: 'left' |
|
|
|
}, |
|
|
|
series: [{ |
|
|
|
name: '门店数量', |
|
|
|
type: 'pie', |
|
|
|
radius: '50%', |
|
|
|
data: _dataX |
|
|
|
}] |
|
|
|
}) |
|
|
|
}, |
|
|
|
clickMap(e) { |
|
|
|
console.log('click map :', e) |
|
|
|
loadList() { |
|
|
|
req.list(this.queryParams).then(res => { |
|
|
|
this.dataList = res.data |
|
|
|
this.resetMarkers() |
|
|
|
if (this.notChartData) { |
|
|
|
this.initCharta(res.data) |
|
|
|
} |
|
|
|
}).catch(e => { |
|
|
|
console.log('GdinventoryLog-loadList-ee:', e) |
|
|
|
}) |
|
|
|
}, |
|
|
|
initMap(e) { |
|
|
|
console.log('init map: ', e) |
|
|
|
dosearch() { |
|
|
|
this.loadList() |
|
|
|
}, |
|
|
|
clickArrayMarker(marker) { |
|
|
|
this.stinfo = marker.title |
|
|
|
resetQuery() { |
|
|
|
this.queryParams = { |
|
|
|
name: '', |
|
|
|
areaStar: '', |
|
|
|
areaEnd: '', |
|
|
|
jindiao: '全部' |
|
|
|
} |
|
|
|
this.loadList() |
|
|
|
}, |
|
|
|
|
|
|
|
handleClose(done) { |
|
|
|
if (this.loading) { |
|
|
|
return |
|
|
|
resetMarkers() { |
|
|
|
this.markers = [] |
|
|
|
for (var i in this.dataList) { |
|
|
|
const d = this.dataList[i] |
|
|
|
let nicon = this.mapicon.blue |
|
|
|
if (d.dueDiligence === '是') { |
|
|
|
nicon = this.mapicon.red |
|
|
|
} |
|
|
|
const newMarker = { |
|
|
|
id: d.sid, |
|
|
|
position: [d.lng, d.lat], |
|
|
|
title: d.name, |
|
|
|
icon: nicon, |
|
|
|
label: { |
|
|
|
direction: 'bottom', |
|
|
|
offset: [0, 5], // 设置文本标注偏移量 |
|
|
|
content: "<div class='info'>" + d.name + '</div>' // 设置文本标注内容 |
|
|
|
} |
|
|
|
} |
|
|
|
this.markers.push(newMarker) |
|
|
|
} |
|
|
|
}, |
|
|
|
showUploadXlsx() { |
|
|
|
this.uploadDialogVisible = true |
|
|
|
}, |
|
|
|
downtemplate() { |
|
|
|
window.open(this.tplpath, '_blank') |
|
|
|
}, |
|
|
|
submitUpload() { |
|
|
|
this.$refs.upload.submit() |
|
|
|
}, |
|
|
|
handleProgress(event, file, fileList) { |
|
|
|
const _this = this |
|
|
|
this.fullscreenloading = this.$loading({ |
|
|
|
lock: true, |
|
|
|
text: '文件正在上传', |
|
|
|
spinner: 'el-icon-loading', |
|
|
|
background: 'rgba(0, 0, 0, 0.7)' |
|
|
|
}) |
|
|
|
console.log('111', event.percent) |
|
|
|
if (event.percent >= 100) { |
|
|
|
_this.fullscreenloading.text = '上传完成，正在导入数据库' |
|
|
|
} |
|
|
|
this.$confirm('确定要提交表单吗？') |
|
|
|
.then(_ => { |
|
|
|
this.loading = true |
|
|
|
this.timer = setTimeout(() => { |
|
|
|
done() |
|
|
|
// 动画关闭需要一定的时间 |
|
|
|
setTimeout(() => { |
|
|
|
this.loading = false |
|
|
|
}, 400) |
|
|
|
}, 2000) |
|
|
|
}) |
|
|
|
.catch(_ => {}) |
|
|
|
}, |
|
|
|
cancelForm() { |
|
|
|
this.loading = false |
|
|
|
this.dialog = false |
|
|
|
clearTimeout(this.timer) |
|
|
|
handleSuccess(resp, file, fileList) { |
|
|
|
console.log('222', resp) |
|
|
|
const _this = this |
|
|
|
if (this.fullscreenloading) this.fullscreenloading.close() |
|
|
|
this.fullscreenloading = null |
|
|
|
_this.uploadVo = resp.data |
|
|
|
_this.notChartData = true |
|
|
|
_this.loadList() |
|
|
|
setTimeout(function() { |
|
|
|
_this.dialogClose() |
|
|
|
}, 3000) |
|
|
|
}, |
|
|
|
dialogClose() { |
|
|
|
this.uploadVo = { |
|
|
|
fileName: '', |
|
|
|
starTime: '', |
|
|
|
useTime: '', |
|
|
|
numberAll: '', |
|
|
|
numberTure: '', |
|
|
|
numberFalse: '', |
|
|
|
numberOther: '', |
|
|
|
errInfo: '' |
|
|
|
} |
|
|
|
if (this.fullscreenloading) this.fullscreenloading.close() |
|
|
|
this.fullscreenloading = null |
|
|
|
this.fileList = [] |
|
|
|
this.uploadDialogVisible = false |
|
|
|
}, |
|
|
|
clickArrayMarker(marker) { |
|
|
|
for (var i in this.dataList) { |
|
|
|
if (marker.id === this.dataList[i].sid) { |
|
|
|
this.currentStore = this.dataList[i] |
|
|
|
break |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -176,8 +348,19 @@ |
|
|
|
min-width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.storelabel { |
|
|
|
width: 80px |
|
|
|
} |
|
|
|
|
|
|
|
.amap-icon img { |
|
|
|
width: 25px; |
|
|
|
height: 34px; |
|
|
|
} |
|
|
|
|
|
|
|
.chartsa { |
|
|
|
position: absolute; |
|
|
|
top: 20px; |
|
|
|
right: 15px; |
|
|
|
width: 300px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
liupopo
2 years ago
