Browse Source

新增仓库分布图

master
guoxing 8 months ago
parent
commit
d1779b7a88
  1. 132
      src/api/gd36524/allData.js
  2. 6
      src/layout/components/Navbar.vue
  3. 680
      src/views/map/index.vue
  4. 2637
      src/views/mortgage/allData.vue
  5. 2
      src/views/mortgage/yqpb-原始.vue
  6. 2
      src/views/mortgage/yqpb.vue

132
src/api/gd36524/allData.js

@ -1,66 +1,74 @@
import request from '@/utils/request'
export default {
// 左侧数据总览
getProjectDaily: function(data) {
return request({
url: '/datacenter/getProjectDailyNew',
method: 'post',
data: data
});
},
// 库存分析图 ,
getReportInventory: function(data) {
return request({
url: '/datacenter/getReportInventoryNew',
method: 'post',
data: data
});
},
// 获取基础信息 ,
getProjectBySid: function(data) {
return request({
url: '/datacenter/getProjectBySid?projectSid='+data,
method: 'get',
data: data
});
},
// 获取仓库sid,
getProjectIsJk: function(data) {
return request({
url: '/datacenter/getProjectIsJk?projectSid='+data,
method: 'get'
});
},
// 获取摄像头 设备列表,
getOtherList: function(data) {
return request({
url: '/datacenter/getOtherList?type=1&ckId='+data,
method: 'get'
});
},
// 实时监控 ,
getVedioPcLiveById: function(data) {
return request({
url: '/datacenter/getVedioPcLiveByIdNew?id=' + data,
method: 'get'
});
},
// 回放监控 ,
getVedioPcRecById: function(data) {
return request({
url: '/datacenter/getVedioPcRecByIdNew?id=' + data,
method: 'get'
});
},
// 左侧数据总览
getProjectDaily: function(data) {
return request({
url: '/datacenter/getProjectDailyNew',
method: 'post',
data: data
});
},
// 库存分析图 ,
getReportInventory: function(data) {
return request({
url: '/datacenter/getReportInventoryNew',
method: 'post',
data: data
});
},
// 获取基础信息 ,
getProjectBySid: function(data) {
return request({
url: '/datacenter/getProjectBySid?projectSid=' + data,
method: 'get',
data: data
});
},
// 获取仓库sid,
getProjectIsJk: function(data) {
return request({
url: '/datacenter/getProjectIsJk?projectSid=' + data,
method: 'get'
});
},
// 获取摄像头 设备列表,
getOtherList: function(data) {
return request({
url: '/datacenter/getOtherList?type=1&ckId=' + data,
method: 'get'
});
},
// 实时监控 ,
getVedioPcLiveById: function(data) {
return request({
url: '/datacenter/getVedioPcLiveByIdNew?id=' + data,
method: 'get'
});
},
// 回放监控 ,
getVedioPcRecById: function(data) {
return request({
url: '/datacenter/getVedioPcRecByIdNew?id=' + data,
method: 'get'
});
},
// 仓库分布
getPos: function(data) {
return request({
url: '/datacenter/getWarehouseAddress',
method: 'post',
data: data
});
},
}

6
src/layout/components/Navbar.vue

@ -1,8 +1,8 @@
<template>
<div>
<div class="navbar">
<p class="breadcrumb-container"><img src="@/assets/loginImg/logo.png" style="width: 45px;height: 45px;margin-right: 10px;">汇融清分系统</p>
<!-- <h3 class="breadcrumb-container">汇融银行供应链贷后监管平台</h3> -->
<p class="breadcrumb-container"><img src="@/assets/loginImg/logo.png" style="width: 45px;height: 45px;margin-right: 10px;">清分系统</p>
<!-- <h3 class="breadcrumb-container">银行供应链贷后监管平台</h3> -->
<div class="right-menu">
<!-- <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>-->
<p>欢迎您{{ name }}</p>
@ -11,7 +11,7 @@
<span class="backToHome" @click="logout"><i class="el-icon-back" />返回首页</span>
</div>
</div>
<el-footer class="footer" height="40px">Copyright © {{ year }} 汇融清分系统All Rights Reserved</el-footer>
<el-footer class="footer" height="40px">Copyright © {{ year }} 清分系统All Rights Reserved</el-footer>
</div>
</template>

680
src/views/map/index.vue

@ -1,365 +1,359 @@
<template>
<div class="app-container">
<el-amap ref="map" :center="center" :zoom="zoom">
<el-amap-control-map-type :visible="controlVisible" />
<el-amap-marker
v-for="(marker, index) in markers"
:key="index"
:icon="marker.icon"
:title="marker.title"
:position="marker.position"
@click="(e) => {clickArrayMarker(marker, e)}"
/>
</el-amap>
<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>
<div class="app-container">
<el-amap ref="map" :center="center" :zoom="zoom">
<el-amap-control-map-type :visible="controlVisible" />
<el-amap-marker v-for="(marker, index) in markers" :key="index" :icon="marker.icon" :title="marker.title"
:position="marker.position" @click="(e) => {clickArrayMarker(marker, e)}" />
</el-amap>
<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>
<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 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-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>
<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: 'MapVueAMap',
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'
import * as echarts from 'echarts'
import req from '@/api/gd36524/store'
export default {
name: 'MapVueAMap',
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: ''
}
}
},
tplpath: process.env.VUE_APP_PUBLIC_PATH + 'datatemplate.xlsx',
uploadDialogVisible: false,
uploadVo: {
fileName: '',
starTime: '',
useTime: '',
numberAll: '',
numberTure: '',
numberFalse: '',
numberOther: '',
errInfo: ''
created() {
this.loadList()
},
updateAction: process.env.VUE_APP_BASE_API + '/store/uploadData',
fullscreenloading: null,
fileList: [],
queryParams: {
name: '',
areaStar: '',
areaEnd: '',
jindiao: '全部'
mounted() {
// this.$nextTick(() => {
// this.initCharta()
// })
},
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: '未尽调'
})
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 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.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 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 = '上传完成,正在导入数据库'
}
},
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
}
}
}
}
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;
}
.app-container {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
}
.toolbar {
position: absolute;
top: 20px;
left: 20px;
width: 300px;
}
.toolbar {
position: absolute;
top: 20px;
left: 20px;
width: 300px;
}
.info {
position: relative;
margin: 0;
top: 0;
right: 0;
min-width: 0;
}
.info {
position: relative;
margin: 0;
top: 0;
right: 0;
min-width: 0;
}
.storelabel {
width: 80px
}
.storelabel {
width: 80px
}
.amap-icon img {
width: 25px;
height: 34px;
}
.amap-icon img {
width: 25px;
height: 34px;
}
.chartsa {
position: absolute;
top: 20px;
right: 15px;
width: 300px;
}
</style>
.chartsa {
position: absolute;
top: 20px;
right: 15px;
width: 300px;
}
</style>

2637
src/views/mortgage/allData.vue

File diff suppressed because it is too large

2
src/views/mortgage/yqpb-原始.vue

@ -1,7 +1,7 @@
<template>
<div class="yxt-containers">
<div class="yxt-header">
<h1>一起拼搏(汇融惠享项目)</h1>
<h1>一起拼搏(惠享项目)</h1>
</div>
<div class="yxt-main">
<div class="yxt-main-ha">

2
src/views/mortgage/yqpb.vue

@ -1,7 +1,7 @@
<template>
<div class="yxt-containers" style="overflow-y: auto;">
<span class="title">一起拼搏(汇融惠享项目)</span>
<span class="title">一起拼搏(惠享项目)</span>
<div class="layout">

Loading…
Cancel
Save