<template>
|
<TableLayout>
|
<div slot="search-form" class="data">
|
<div class="item-title">数据看板</div>
|
<div class="data-summary">
|
<div class="data-item">
|
<div>今日活跃用户</div>
|
<div class="data-num">{{ countData.nowActivity }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item">
|
<div>本月售前诊断/成交次数</div>
|
<div class="data-num">{{ countData.preSaleCount }}/{{ countData.dealCount }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item">
|
<div>售后服务次数</div>
|
<div class="data-num">{{ countData.afterSaleCount }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item">
|
<div>总门店数量</div>
|
<div class="data-num">{{ countData.shopCount }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item">
|
<div>总用户数</div>
|
<div class="data-num">{{ countData.membercount }}</div>
|
</div>
|
<div class="parting"></div>
|
<div class="data-item">
|
<div>客户总数</div>
|
<div class="data-num">{{ countData.customerCount }}</div>
|
</div>
|
</div>
|
</div>
|
<template v-slot:table-wrap>
|
<div style="display: flex;">
|
<div class="change-item" style="flex: 1;">
|
<div class="change-style">
|
<div class="item-title">售前诊断次数/成交次数趋势</div>
|
<div>
|
<el-select v-model="preType" @change="initHome">
|
<el-option
|
label="近7天"
|
value="7">
|
</el-option>
|
<el-option
|
label="近30天"
|
value="30">
|
</el-option>
|
|
</el-select>
|
</div>
|
</div>
|
<div ref="orderChange" class="bottom"></div>
|
</div>
|
<div style="width: 5px;"></div>
|
<div class="change-item" style="flex:0.8">
|
<div class="change-style">
|
<div class="item-title">门店客户咨询排行榜</div>
|
<div>
|
<el-select v-model="shopType" @change="initShop">
|
<el-option
|
label="近7天"
|
value="7">
|
</el-option>
|
<el-option
|
label="近30天"
|
value="30">
|
</el-option>
|
|
</el-select>
|
</div>
|
</div>
|
<div ref="rank" class="bottom"></div>
|
</div>
|
</div>
|
|
</template>
|
|
</TableLayout>
|
</template>
|
|
<script>
|
import TableLayout from '@/layouts/TableLayout'
|
import { home, homeShop } from '@/api/business/home'
|
import * as echarts from 'echarts';
|
export default {
|
components: {
|
TableLayout,
|
},
|
data() {
|
return {
|
countData: {
|
nowActivity: 0,
|
membercount: 0,
|
afterSaleCount: 0,
|
preSaleCount: 0,
|
dealCount: 0,
|
customerCount: 0,
|
shopCount: 0,
|
preList: 0,
|
visList: [],
|
},
|
preType: '7',
|
shopType: '7',
|
preList: [],
|
myChart: null,
|
myHistogram: null,
|
}
|
},
|
|
mounted() {
|
this.myChart = echarts.init(this.$refs.orderChange)
|
this.myHistogram = echarts.init(this.$refs.rank)
|
window.addEventListener('resize', () => {
|
this.myChart.resize()
|
this.myHistogram.resize()
|
})
|
this.initHome(7)
|
this.initShop(7)
|
},
|
methods: {
|
initHome(mark) {
|
home({mark})
|
.then(res => {
|
this.countData = res
|
this.renderOrderChange()
|
})
|
},
|
initShop(mark) {
|
homeShop({mark})
|
.then(res => {
|
this.preList = res.preList
|
this.renderShopRank()
|
})
|
},
|
renderOrderChange() {
|
let dealCounts = []
|
let preCounts = []
|
let days = []
|
this.countData.visList.forEach(item => {
|
dealCounts.push(item.dealCount)
|
preCounts.push(item.preCount)
|
days.push(item.everyDay)
|
})
|
this.myChart.setOption({
|
title: {},
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: days
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
name: '成交次数趋势',
|
type: 'line',
|
stack: '总量',
|
data: dealCounts
|
},
|
{
|
name: '售前成交次数',
|
type: 'line',
|
stack: '总量',
|
data: preCounts
|
},
|
]
|
})
|
|
},
|
renderShopRank() {
|
let names = []
|
let preCounts = []
|
this.preList.forEach(item => {
|
names.push(item.name)
|
preCounts.push(item.preCount)
|
})
|
preCounts.reverse()
|
names.reverse()
|
this.myHistogram.setOption({
|
// title: {
|
// text: 'World Population'
|
// },
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
boundaryGap: [0, 0.01]
|
},
|
yAxis: {
|
type: 'category',
|
data: names
|
},
|
series: [
|
{
|
// name: '2011',
|
type: 'bar',
|
data: preCounts,
|
barWidth: '50%'
|
}
|
]
|
})
|
},
|
getData() {
|
|
|
}
|
},
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.data {
|
padding-bottom: 10px;
|
}
|
.item-title {
|
font-weight: 500;
|
|
}
|
.data-summary {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 10px;
|
.data-item {
|
flex: 1;
|
height: 80px;
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1) ;
|
box-sizing: border-box;
|
padding: 15px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.data-num {
|
font-size: 20px;
|
font-weight: 700;
|
color: #1457C7;
|
color: #216EEE;
|
}
|
}
|
.parting {
|
width: 20px;
|
}
|
}
|
.change-item {
|
|
box-sizing: border-box;
|
padding: 10px;
|
background-color: #fff;
|
}
|
.bottom {
|
// min-height: 500px;
|
height: 300px;
|
display: flex;
|
.item-box {
|
padding: 10px;
|
// border: 2px #ccc solid;
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1) ;
|
border-radius: 8px;
|
}
|
.calendar {
|
flex: 1;
|
margin-right: 10px;
|
.calendar-header {
|
display: flex;
|
justify-content: space-between;
|
// border-bottom: 5px rgb(232, 202, 122) solid;
|
padding: 10px 5px;
|
font-weight: 600;
|
}
|
}
|
.notice-meeting {
|
// flex: 0.3;
|
height: 150px;
|
width: 340px;
|
display: flex;
|
flex-direction: column;
|
.notice {
|
flex: 0.3;
|
margin-bottom: 10px;
|
.notice-header {
|
display: flex;
|
justify-content: space-between;
|
height: 30px;
|
line-height: 30px;
|
cursor: pointer;
|
// border-bottom: 5px rgb(232, 202, 122) solid;
|
// padding: 0 5px;
|
font-weight: 600;
|
.more {
|
font-weight: normal;
|
color: rgb(127, 127, 127);
|
}
|
}
|
.notice-item {
|
line-height: 24px;
|
font-size: 12px;
|
display: flex;
|
justify-content: space-between;
|
height: 24px;
|
}
|
}
|
.meeting {
|
flex: 0.7;
|
display: flex;
|
flex-direction: column;
|
|
// width: 100%;
|
.meeting-header {
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 5px;
|
font-weight: 600;
|
line-height: 30px;
|
height: 30px;
|
.action {
|
font-weight: normal;
|
display: flex;
|
.type-sel {
|
color: rgb(84, 169, 235);
|
color: #216EEE;
|
text-decoration: underline;
|
}
|
}
|
}
|
.meeting-list {
|
// flex: 1;
|
height: 500px;
|
overflow-y: scroll;
|
}
|
.meeting-item {
|
display: flex;
|
font-size: 12px;
|
line-height: 24px;
|
.type-sel {
|
flex: 1;
|
// color: rgb(84, 169, 235);
|
color: #216EEE;
|
}
|
}
|
}
|
}
|
}
|
.change-style {
|
display: flex;
|
justify-content: space-between;
|
line-height: 31px;
|
}
|
.bottom {
|
height: 500px;
|
}
|
</style>
|
|
<style>
|
.available {
|
text-align: left;
|
}
|
.dateItem {
|
display: block;
|
/* display: flex;
|
flex-direction: column;
|
align-items: flex-start; */
|
height: 100%;
|
min-height:100px;
|
padding:5px;
|
box-sizing: border-box;
|
}
|
.fc .fc-daygrid-day.fc-day-today {
|
background-color: #fff;
|
}
|
/* #F7F8F9; */
|
.table-wrap {
|
background: #F7F8F9 !important;
|
padding: 0 !important;
|
}
|
</style>
|
