liupopo
2 years ago
5 changed files with 391 additions and 5 deletions
@ -0,0 +1,372 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-bmap :center="center" :zoom="zoom"> |
|||
<el-bmap-marker |
|||
v-for="(marker, index) in markers" |
|||
:key="index" |
|||
:icon="marker.icon" |
|||
:position="marker.position" |
|||
:title="marker.title" |
|||
:vid="index" |
|||
@click="(e) => {clickArrayMarker(marker, e)}" |
|||
/> |
|||
</el-bmap> |
|||
<div class="toolbar"> |
|||
<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> |
|||
<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 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: 'MapVueBdMap', |
|||
data() { |
|||
return { |
|||
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: [], |
|||
|
|||
queryParams: { |
|||
name: '', |
|||
areaStar: '', |
|||
areaEnd: '', |
|||
jindiao: '全部' |
|||
}, |
|||
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: { |
|||
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 |
|||
}] |
|||
}) |
|||
}, |
|||
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) |
|||
}) |
|||
}, |
|||
dosearch() { |
|||
this.loadList() |
|||
}, |
|||
resetQuery() { |
|||
this.queryParams = { |
|||
name: '', |
|||
areaStar: '', |
|||
areaEnd: '', |
|||
jindiao: '全部' |
|||
} |
|||
this.loadList() |
|||
}, |
|||
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 mapicon = { url: nicon, size: [20, 28], imageOffset: [0, 0], anchor: [0, 0] } |
|||
const newMarker = { |
|||
id: d.sid, |
|||
position: [d.lng, d.lat], |
|||
title: d.name, |
|||
icon: mapicon, |
|||
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 = '上传完成，正在导入数据库' |
|||
} |
|||
}, |
|||
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 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.app-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0px; |
|||
left: 0px; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.toolbar { |
|||
position: absolute; |
|||
top: 20px; |
|||
left: 20px; |
|||
width: 300px; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.info { |
|||
position: relative; |
|||
margin: 0; |
|||
top: 0; |
|||
right: 0; |
|||
min-width: 0; |
|||
} |
|||
|
|||
.storelabel { |
|||
width: 80px |
|||
} |
|||
|
|||
.amap-icon img { |
|||
width: 25px; |
|||
height: 34px; |
|||
} |
|||
|
|||
.chartsa { |
|||
position: absolute; |
|||
top: 20px; |
|||
right: 15px; |
|||
width: 300px; |
|||
z-index: 9; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue