302 lines
7.1 KiB
Vue
302 lines
7.1 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="6月五星门店（排名不分先后）">
|
||
<template #rightBtn>
|
||
<label class="tooltip">默认选择一个网格</label>
|
||
<el-select placeholder="请选择网格" v-model="form.data" size="small">
|
||
<el-option
|
||
v-for="item in []"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</ai-title>
|
||
<ai-table :is-show-pagination="false"
|
||
:tableData="tableData"
|
||
:col-configs="colConfigs"></ai-table>
|
||
</div>
|
||
<div class="right-row flex-col">
|
||
<ai-title title="网格五星门店数量排名"></ai-title>
|
||
<div class="bar-chart" ref="chartRef"></div>
|
||
</div>
|
||
</div>
|
||
<ai-title title="统计列表"></ai-title>
|
||
<ai-search-bar>
|
||
<template #left>
|
||
<ai-select
|
||
v-model="search.applyItemId"
|
||
@change="(search.current = 1), getList()"
|
||
placeholder="经营类型"
|
||
:selectList="[]">
|
||
</ai-select>
|
||
<ai-select
|
||
v-model="search.applyItemId"
|
||
@change="(search.current = 1), getList()"
|
||
placeholder="所属网格"
|
||
:selectList="[]">
|
||
</ai-select>
|
||
</template>
|
||
<template #right>
|
||
<el-input
|
||
v-model="search.createUserName"
|
||
size="small"
|
||
v-throttle="() => {search.current = 1, getList()}"
|
||
placeholder="请输入门店名称"
|
||
clearable
|
||
@clear="search.current = 1, search.createUserName = '', getList()"
|
||
suffix-icon="iconfont iconSearch">
|
||
</el-input>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:tableData="colConfigs1"
|
||
:col-configs="colConfigs1"
|
||
:total="total"
|
||
:current.sync="search.current"
|
||
:size.sync="search.size"
|
||
@getList="getList">
|
||
<el-table-column
|
||
label="门店照片"
|
||
slot="pic"
|
||
align="left">
|
||
<template v-slot="{ row }">
|
||
<img :src="row.picUrl" alt="" v-viewer>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="门店评分" slot="mark" align="center">
|
||
<template v-slot="{row}">
|
||
<el-rate :value="4" 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: '门店统计',
|
||
data() {
|
||
return {
|
||
data: {},
|
||
form: {},
|
||
search:{},
|
||
cardList: [
|
||
{
|
||
label: '门店总数量',
|
||
value: 122
|
||
},
|
||
{
|
||
label: '总网格数',
|
||
value: 122
|
||
},
|
||
{
|
||
label: '总网格员',
|
||
value: 122
|
||
},
|
||
{
|
||
label: '五星门店',
|
||
value: 122
|
||
}
|
||
],
|
||
tableData: [],
|
||
colConfigs: [
|
||
{prop: '1', label: '门店名称', align: 'center'},
|
||
{prop: '2', label: '经营类型', align: 'center'},
|
||
{prop: '3', label: '经营者名称', align: 'center'},
|
||
],
|
||
total: 10,
|
||
colConfigs1: [
|
||
{type: "selection"},
|
||
{ slot: 'pic', align: 'center' },
|
||
{ prop: 'integralUserName', label: '门店名称', align: 'center' },
|
||
{ prop: 'areaName', label: '经营者姓名', align: 'center' },
|
||
{ prop: 'girdName', label: '联系电话', align: 'center' },
|
||
{ prop: 'createTime', label: '录入时间', align: 'center' },
|
||
{ prop: 'createTime', label: '所属网格', align: 'center' },
|
||
{ prop: 'status', label: '门店地址', align: 'center'},
|
||
{ prop: 'auditUserName', label: '经营类型', align: 'center' },
|
||
{slot:'mark',align: 'center'}
|
||
],
|
||
tableData1: [],
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getList(){
|
||
|
||
},
|
||
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: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
|
||
},
|
||
series: [
|
||
{
|
||
name: '2012',
|
||
type: 'bar',
|
||
itemStyle:{
|
||
color:'#389FFF'
|
||
},
|
||
data: [19325, 23438, 31000, 121594, 134141, 681807]
|
||
}
|
||
]
|
||
})
|
||
|
||
window.addEventListener('resize', this.resize)
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.initChart()
|
||
},
|
||
|
||
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%;
|
||
}
|
||
|
||
.right-row {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.flex-col {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style>
|