426 lines
10 KiB
Vue
426 lines
10 KiB
Vue
<template>
|
|
<div class="app-ark-static">
|
|
<ai-list>
|
|
<template #content>
|
|
<ai-title title="门店概况"></ai-title>
|
|
<div class="card_list">
|
|
<div class="card" v-for="(item,index) in cardList" :key="index">
|
|
<h2>{{ item.label }}</h2>
|
|
<p class="color1">{{ item.value || 0 }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex-row">
|
|
<div class="left-row flex-col">
|
|
<ai-title :title="`${new Date().getMonth()}月五星门店（排名不分先后）`">
|
|
<template #rightBtn>
|
|
<ai-select
|
|
v-model="search.girdCode"
|
|
@change="(search.current = 1), getList()"
|
|
placeholder="请选择网格"
|
|
size="small"
|
|
:selectList="gridList">
|
|
</ai-select>
|
|
</template>
|
|
</ai-title>
|
|
<div class="table-wrap">
|
|
<ai-table :is-show-pagination="false"
|
|
:tableData="tableData"
|
|
style="height: 100%"
|
|
height="100%"
|
|
:col-configs="colConfigs"></ai-table>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="right-row flex-col">
|
|
<ai-title title="网格五星门店数量排名"></ai-title>
|
|
<div class="bar-chart" v-show="chartList && chartList.length > 0" ref="chartRef"></div>
|
|
<div v-show="chartList && chartList.length === 0" class="no-data" style="width:386px;height:160px;"/>
|
|
</div>
|
|
</div>
|
|
<ai-title title="统计列表"></ai-title>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<ai-select
|
|
v-model="form.operatorType"
|
|
@change="(form.current = 1), getList2()"
|
|
placeholder="经营类型"
|
|
:selectList="$dict.getDict('operatorType')">
|
|
</ai-select>
|
|
<ai-select
|
|
v-model="form.girdCode"
|
|
@change="(form.current = 1), getList2()"
|
|
placeholder="所属网格"
|
|
:selectList="gridList">
|
|
</ai-select>
|
|
</template>
|
|
<template #right>
|
|
<el-input
|
|
v-model="form.shopName"
|
|
size="small"
|
|
v-throttle="() => {form.current = 1, getList2()}"
|
|
placeholder="请输入门店名称"
|
|
clearable
|
|
@clear="form.current = 1, form.shopName = '', getList2()"
|
|
suffix-icon="iconfont iconSearch">
|
|
</el-input>
|
|
</template>
|
|
</ai-search-bar>
|
|
<ai-table
|
|
:tableData="tableData1"
|
|
:col-configs="colConfigs1"
|
|
:total="total"
|
|
:current.sync="form.current"
|
|
:size.sync="form.size"
|
|
@getList="getList2">
|
|
<el-table-column
|
|
label="门店照片"
|
|
slot="pic"
|
|
align="left">
|
|
<template v-slot="{ row }">
|
|
<img class="shop-img" :src="row.fileUrl" v-if="row.fileUrl" alt="" v-viewer>
|
|
<img class="shop-img" src="./img/shop.png" v-else alt="" v-viewer>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="门店评分" slot="mark" align="center">
|
|
<template v-slot="{row}">
|
|
<el-rate :value="row.storeScore" show-score text-color="#ff9900" disabled></el-rate>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
let chartInstance = null;
|
|
export default {
|
|
name: "AppMarkStatic",
|
|
label: '门店统计',
|
|
props: {
|
|
instance: Function,
|
|
dict: Object
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
data: {},
|
|
form: {
|
|
current:1,
|
|
size:10,
|
|
operatorType:'',
|
|
girdCode:'',
|
|
shopName:'',
|
|
},
|
|
search: {
|
|
girdCode:'',
|
|
fiveStartTime:new Date().getMonth().toString(),
|
|
storeLevel:'5',
|
|
current:1,
|
|
size:1000
|
|
},
|
|
cardList: [
|
|
{
|
|
label: '门店总数量',
|
|
value: 0
|
|
},
|
|
{
|
|
label: '总网格数',
|
|
value: 0
|
|
},
|
|
{
|
|
label: '总网格员',
|
|
value: 0
|
|
},
|
|
{
|
|
label: '五星门店',
|
|
value: 0
|
|
}
|
|
],
|
|
gridList:[],
|
|
tableData: [],
|
|
colConfigs: [
|
|
{prop: 'shopName', label: '门店名称', align: 'center'},
|
|
{prop: 'operatorType', label: '经营类型', align: 'center',render:(h,{row})=>{
|
|
return h('span',null,this.dict.getLabel('operatorType',row.operatorType))
|
|
}},
|
|
{prop: 'name', label: '经营者名称', align: 'center'},
|
|
],
|
|
total: 10,
|
|
colConfigs1: [
|
|
{type: "selection"},
|
|
{slot: 'pic', align: 'center'},
|
|
{prop: 'shopName', label: '门店名称', align: 'center'},
|
|
{prop: 'name', label: '经营者姓名', align: 'center'},
|
|
{prop: 'phone', label: '联系电话', align: 'center'},
|
|
{prop: 'createTime', label: '录入时间', align: 'center'},
|
|
{prop: 'girdName', label: '所属网格', align: 'center'},
|
|
{prop: 'address', label: '门店地址', align: 'center'},
|
|
{prop: 'operatorType', label: '经营类型', align: 'center',render:(h,{row})=>{
|
|
return h('span',null,this.dict.getLabel('operatorType',row.operatorType))
|
|
}},
|
|
{slot: 'mark', align: 'center'}
|
|
],
|
|
tableData1: [],
|
|
chartList:[]
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.$dict.load('operatorType').then(()=>{
|
|
this.girdList()
|
|
this.queryShopDetail()
|
|
this.getList()
|
|
this.getList2()
|
|
this.countByFiveStars()
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
async countByFiveStars(){
|
|
try {
|
|
const {code, data:{records}} = await this.instance.post('/app/appShopStatistics/countByFiveStars',null,{
|
|
current:1,
|
|
size:1000
|
|
})
|
|
if (code === 0) {
|
|
this.chartList = records?.reverse() || []
|
|
this.$nextTick(()=>{
|
|
this.initChart()
|
|
})
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
|
|
async girdList() {
|
|
try {
|
|
const {code, data:{records}} = await this.instance.post('/app/appShopStatistics/girdList',null,{
|
|
size:1000
|
|
})
|
|
if (code === 0) {
|
|
this.gridList = records?.map(item=>{
|
|
return {
|
|
dictName:item.girdName,
|
|
dictValue:item.girdCode
|
|
}
|
|
})
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
async queryShopDetail() {
|
|
try {
|
|
const {code, data} = await this.instance.post('/app/appShopStatistics/queryShopDetail')
|
|
if (code === 0) {
|
|
const list = ['shopCounts','girdCounts','girdPersons','fiveStarsShops']
|
|
list.forEach((item,index)=>{
|
|
this.cardList[index].value = data[item]
|
|
})
|
|
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
|
|
// 五星门店列表查询
|
|
async getList() {
|
|
try {
|
|
const {code, data:{records}} = await this.instance.post('/app/appshoparchives/list',null,{
|
|
params:{
|
|
...this.search,
|
|
}
|
|
})
|
|
if (code === 0) {
|
|
this.tableData = records
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
|
|
// 列表查询
|
|
async getList2() {
|
|
try {
|
|
const {code, data:{records,total}} = await this.instance.post('/app/appShopStatistics/list',null,{
|
|
params:{
|
|
...this.form,
|
|
}
|
|
})
|
|
if (code === 0) {
|
|
this.total = total
|
|
this.tableData1 = records
|
|
}
|
|
} catch (e) {
|
|
console.log(e)
|
|
}
|
|
},
|
|
|
|
resize() {
|
|
if (chartInstance) {
|
|
chartInstance.resize()
|
|
}
|
|
},
|
|
initChart() {
|
|
chartInstance = echarts.init(this.$refs.chartRef)
|
|
chartInstance.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
top: '1%',
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01]
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: this.chartList?.map(item=>item.girdName)
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
barWidth:'20%',
|
|
itemStyle: {
|
|
color: '#389FFF',
|
|
},
|
|
data: this.chartList?.map(item=>item.fiveStarsCount)
|
|
}
|
|
]
|
|
})
|
|
|
|
window.addEventListener('resize', this.resize)
|
|
}
|
|
},
|
|
|
|
beforeDestroy() {
|
|
if (chartInstance) {
|
|
chartInstance.dispose()
|
|
chartInstance = null
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-ark-static {
|
|
height: 100%;
|
|
background: #F3F6F9;
|
|
|
|
.card_list {
|
|
display: flex;
|
|
|
|
.card {
|
|
flex: 1;
|
|
height: 96px;
|
|
background: #F9F9F9;
|
|
border-radius: 2px;
|
|
margin-right: 20px;
|
|
padding: 16px 24px;
|
|
box-sizing: border-box;
|
|
|
|
h2 {
|
|
color: #888888;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 8px;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.color1 {
|
|
color: #2891FF;
|
|
}
|
|
|
|
.color2 {
|
|
color: #22AA99;
|
|
}
|
|
|
|
.color3 {
|
|
color: #F8B425;
|
|
}
|
|
}
|
|
|
|
.card:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.flex-row {
|
|
width: 100%;
|
|
height: 400px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-top: 10px;
|
|
|
|
.left-row {
|
|
height: 100%;
|
|
width: 50%;
|
|
display: flex;
|
|
}
|
|
|
|
.right-row {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-wrap{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.mt-10 {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.tooltip {
|
|
font-size: 16px;
|
|
color: #D9001B;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.h-full {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.bar-chart {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.shop-img{
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
}
|
|
</style>
|