|
@@ -6,9 +6,8 @@
|
|
<a-row>
|
|
<a-row>
|
|
<a-card class="search-panel">
|
|
<a-card class="search-panel">
|
|
<div class="toolsBar">
|
|
<div class="toolsBar">
|
|
- <a-form ref="searchForm" :model="searchForm" :rules="ruleInline" layout="inline">
|
|
|
|
- <a-form-item prop="queryWord">
|
|
|
|
- 统计区间:
|
|
|
|
|
|
+ <a-form ref="searchForm" :model="searchForm" layout="inline">
|
|
|
|
+ <a-form-item props="queryWord" label="统计区间">
|
|
<a-range-picker
|
|
<a-range-picker
|
|
style="width: 220px;"
|
|
style="width: 220px;"
|
|
@change="dateChange"
|
|
@change="dateChange"
|
|
@@ -16,6 +15,19 @@
|
|
:disabledDate="disabledDate"
|
|
:disabledDate="disabledDate"
|
|
/>
|
|
/>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
+ <a-form-item props="storeIds" label="洗车网点">
|
|
|
|
+ <a-select
|
|
|
|
+ allowClear
|
|
|
|
+ mode="multiple"
|
|
|
|
+ placeholder="选择网点"
|
|
|
|
+ v-model="searchForm.storeIds"
|
|
|
|
+ style="width: 200px"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option v-for="item in storesList" :value="item.id" :key="item.id">
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-item>
|
|
<a-form-item>
|
|
<a-form-item>
|
|
<a-button type="primary" class="search-btn" @click="handleSearch()">查询</a-button>
|
|
<a-button type="primary" class="search-btn" @click="handleSearch()">查询</a-button>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
@@ -31,7 +43,7 @@
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-card>
|
|
</a-row>
|
|
</a-row>
|
|
- <!-- 营业数据 -->
|
|
|
|
|
|
+ <!-- 洗车量数据 -->
|
|
<a-card class="panel ">
|
|
<a-card class="panel ">
|
|
<a-row :gutter="20">
|
|
<a-row :gutter="20">
|
|
<a-col span="24" class="panel-title">洗车量趋势</a-col>
|
|
<a-col span="24" class="panel-title">洗车量趋势</a-col>
|
|
@@ -44,10 +56,11 @@
|
|
<chart-line
|
|
<chart-line
|
|
style="height: 300px;"
|
|
style="height: 300px;"
|
|
color="#6C6FBE"
|
|
color="#6C6FBE"
|
|
- :yMax="yAmountMax"
|
|
|
|
|
|
+ :yMax="1000"
|
|
|
|
+ yUnit="台"
|
|
:xAxisRotate="resize"
|
|
:xAxisRotate="resize"
|
|
:xAxisData="XdaysData"
|
|
:xAxisData="XdaysData"
|
|
- :seriesData="amountChartData"
|
|
|
|
|
|
+ :seriesData="washCarsChartData"
|
|
text="" />
|
|
text="" />
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
</a-card>
|
|
</a-card>
|
|
@@ -99,9 +112,10 @@
|
|
style="height: 300px;"
|
|
style="height: 300px;"
|
|
color="#6C6FBE"
|
|
color="#6C6FBE"
|
|
:xAxisRotate="resize"
|
|
:xAxisRotate="resize"
|
|
- :yMax="yCheckMax"
|
|
|
|
|
|
+ :yMax="1000"
|
|
|
|
+ yUnit="台"
|
|
:xAxisData="XdaysData"
|
|
:xAxisData="XdaysData"
|
|
- :seriesData="checkDetailData"
|
|
|
|
|
|
+ :seriesData="washTypeChartData"
|
|
text="" />
|
|
text="" />
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -111,10 +125,10 @@
|
|
ref="ChartLine"
|
|
ref="ChartLine"
|
|
style="height: 300px;"
|
|
style="height: 300px;"
|
|
color="#6C6FBE"
|
|
color="#6C6FBE"
|
|
- yUnit="%"
|
|
|
|
|
|
+ yUnit="台"
|
|
:xAxisRotate="resize"
|
|
:xAxisRotate="resize"
|
|
:xAxisData="XdaysData"
|
|
:xAxisData="XdaysData"
|
|
- :seriesData="checkChangeData"
|
|
|
|
|
|
+ :seriesData="washTypeChartData"
|
|
text="" />
|
|
text="" />
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -130,25 +144,25 @@
|
|
ref="chartPie"
|
|
ref="chartPie"
|
|
class="chartPie-box"
|
|
class="chartPie-box"
|
|
:searchData="XdaysData"
|
|
:searchData="XdaysData"
|
|
- :value="payChartData"
|
|
|
|
- :title="payTitle"
|
|
|
|
- :total="payCost"
|
|
|
|
- :color="payColor"
|
|
|
|
|
|
+ :value="washTypePieData"
|
|
|
|
+ title="洗车总量(台)"
|
|
|
|
+ :total="washCarsTotal"
|
|
|
|
+ :color="washTypePieColor"
|
|
:xAxisRotate="resize"
|
|
:xAxisRotate="resize"
|
|
text="" />
|
|
text="" />
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col span="12">
|
|
<a-col span="12">
|
|
<a-card shadow>
|
|
<a-card shadow>
|
|
- <!-- 服务数据展示 -->
|
|
|
|
|
|
+ <!-- 用券与未用券百分比展示 -->
|
|
<chart-pie
|
|
<chart-pie
|
|
ref="serverChartPie"
|
|
ref="serverChartPie"
|
|
class="chartPie-box"
|
|
class="chartPie-box"
|
|
:searchData="XdaysData"
|
|
:searchData="XdaysData"
|
|
- :value="serverChartData"
|
|
|
|
|
|
+ :value="couponChartData"
|
|
title="洗车总量(台)"
|
|
title="洗车总量(台)"
|
|
- :total="serverTotal"
|
|
|
|
- :color="serverColor"
|
|
|
|
|
|
+ :total="washCarsTotal"
|
|
|
|
+ :color="couponColor"
|
|
:xAxisRotate="resize"
|
|
:xAxisRotate="resize"
|
|
text="" />
|
|
text="" />
|
|
</a-card>
|
|
</a-card>
|
|
@@ -167,6 +181,7 @@ import {
|
|
} from '@/components/Echarts'
|
|
} from '@/components/Echarts'
|
|
import _ from 'lodash'
|
|
import _ from 'lodash'
|
|
import getDate from '@/libs/getDate'
|
|
import getDate from '@/libs/getDate'
|
|
|
|
+import moment from 'moment'
|
|
export default {
|
|
export default {
|
|
name: 'Home',
|
|
name: 'Home',
|
|
components: {
|
|
components: {
|
|
@@ -213,11 +228,13 @@ export default {
|
|
return {
|
|
return {
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
timer: false,
|
|
timer: false,
|
|
|
|
+ form: this.$form.createForm(this, { name: 'searchForm' }),
|
|
isNoData: false, // 是否有每天营业额及进店量数据
|
|
isNoData: false, // 是否有每天营业额及进店量数据
|
|
|
|
+ storesList: [], // 洗车网点列表
|
|
searchForm: {
|
|
searchForm: {
|
|
- queryWord: '' // 时间查询条件,默认今天
|
|
|
|
|
|
+ queryWord: null, // 时间查询条件,默认本周
|
|
|
|
+ storeIds: [] // 已选洗车网点
|
|
},
|
|
},
|
|
- ruleInline: {},
|
|
|
|
// 快速删选tab
|
|
// 快速删选tab
|
|
tabList: [{
|
|
tabList: [{
|
|
name: '今天',
|
|
name: '今天',
|
|
@@ -236,20 +253,11 @@ export default {
|
|
type: 'thisMonth'
|
|
type: 'thisMonth'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
- curentType: 'today', // 当前所选时间查询类型
|
|
|
|
|
|
+ curentType: 'thisWeek', // 当前所选时间查询类型
|
|
beginDate: null, // 开始时间
|
|
beginDate: null, // 开始时间
|
|
endDate: null, // 结束时间
|
|
endDate: null, // 结束时间
|
|
- yAmountMax: 5000, // 营业额y轴最大值
|
|
|
|
- // 营业数据
|
|
|
|
- amountData: {
|
|
|
|
- daySaleMoney: 0, // 营业额
|
|
|
|
- dayIncome: 0, // 营业流水
|
|
|
|
- dayCost: 0, // 支出
|
|
|
|
- customPrice: 0 // 客单价 = 营业额/进店量
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
// 洗车量图表数据
|
|
// 洗车量图表数据
|
|
- amountChartData: [{
|
|
|
|
|
|
+ washCarsChartData: [{
|
|
name: '全部洗车量',
|
|
name: '全部洗车量',
|
|
type: 'line',
|
|
type: 'line',
|
|
data: []
|
|
data: []
|
|
@@ -261,27 +269,25 @@ export default {
|
|
}
|
|
}
|
|
],
|
|
],
|
|
// 洗车用券量占比
|
|
// 洗车用券量占比
|
|
- serverChartData: [{
|
|
|
|
|
|
+ couponChartData: [{
|
|
'name': '未用券洗车量',
|
|
'name': '未用券洗车量',
|
|
'value': 0
|
|
'value': 0
|
|
}, {
|
|
}, {
|
|
'name': '用券洗车量',
|
|
'name': '用券洗车量',
|
|
'value': 0
|
|
'value': 0
|
|
}],
|
|
}],
|
|
- serverTotal: 0, // 服务工时费总计
|
|
|
|
- serverColor: ['#d48265', '#ff55ff'],
|
|
|
|
- // 进店数据
|
|
|
|
- currentTabChart: 'tab1', // 进店量详情数据与变化趋势的tab 默认展示详情数据
|
|
|
|
|
|
+ washCarsTotal: 0, // 洗车总量
|
|
|
|
+ couponColor: ['#d48265', '#ff55ff'],
|
|
|
|
+ // 洗车类型数据
|
|
|
|
+ currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
|
|
carData: {
|
|
carData: {
|
|
dayTotalCar: 0, // 进店量
|
|
dayTotalCar: 0, // 进店量
|
|
dayWashCar: 0, // 洗车量
|
|
dayWashCar: 0, // 洗车量
|
|
- dayCheckCar: 0, // 检测量
|
|
|
|
- checkRate: 0 // 检测率 检测量/进店量
|
|
|
|
|
|
+ dayCheckCar: 0 // 检测量
|
|
},
|
|
},
|
|
XdaysData: [], // 图表X轴时间集合
|
|
XdaysData: [], // 图表X轴时间集合
|
|
// 进店量,检测量 数据
|
|
// 进店量,检测量 数据
|
|
- yCheckMax: 80, // 进店量y轴最大值
|
|
|
|
- checkDetailData: [{
|
|
|
|
|
|
+ washTypeChartData: [{
|
|
name: '进店量',
|
|
name: '进店量',
|
|
type: 'bar',
|
|
type: 'bar',
|
|
data: []
|
|
data: []
|
|
@@ -292,16 +298,9 @@ export default {
|
|
data: []
|
|
data: []
|
|
}
|
|
}
|
|
],
|
|
],
|
|
- checkChangeData: [{
|
|
|
|
- name: '检测率',
|
|
|
|
- type: 'line',
|
|
|
|
- data: []
|
|
|
|
- }],
|
|
|
|
// 各类型占比
|
|
// 各类型占比
|
|
- payColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
|
- payTitle: '洗车总量(台)',
|
|
|
|
- payCost: 0, // 支出总额
|
|
|
|
- payChartData: [{
|
|
|
|
|
|
+ washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
|
+ washTypePieData: [{
|
|
'name': '快速洗车',
|
|
'name': '快速洗车',
|
|
'value': 0
|
|
'value': 0
|
|
}, {
|
|
}, {
|
|
@@ -313,9 +312,8 @@ export default {
|
|
}],
|
|
}],
|
|
dayBundleSaleIncome: 0, // 套餐销售额
|
|
dayBundleSaleIncome: 0, // 套餐销售额
|
|
databack: {
|
|
databack: {
|
|
- serverChartData: [],
|
|
|
|
- payChartData: [],
|
|
|
|
- amountData: {},
|
|
|
|
|
|
+ couponChartData: [],
|
|
|
|
+ washTypePieData: [],
|
|
carData: {}
|
|
carData: {}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -323,37 +321,45 @@ export default {
|
|
created () {
|
|
created () {
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ moment,
|
|
// 时间改变
|
|
// 时间改变
|
|
- dateChange () {
|
|
|
|
|
|
+ dateChange (dates) {
|
|
|
|
+ console.log(dates, this.searchForm.queryWord, 'dddddd')
|
|
this.curentType = ''
|
|
this.curentType = ''
|
|
},
|
|
},
|
|
// 不可选日期
|
|
// 不可选日期
|
|
disabledDate (date) {
|
|
disabledDate (date) {
|
|
return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
|
|
return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
|
|
},
|
|
},
|
|
|
|
+ // 查询洗车网点
|
|
|
|
+ getListStore () {
|
|
|
|
+ // listStore().then(res => {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ // this.storesList = res.data ? res.data : []
|
|
|
|
+ // })
|
|
|
|
+ },
|
|
// 页面初始化
|
|
// 页面初始化
|
|
pageInit () {
|
|
pageInit () {
|
|
- this.$refs.searchForm.resetFields()
|
|
|
|
|
|
+ this.form.resetFields()
|
|
this.databack = {
|
|
this.databack = {
|
|
- serverChartData: _.cloneDeep(this.serverChartData),
|
|
|
|
- payChartData: _.cloneDeep(this.payChartData),
|
|
|
|
- amountData: _.cloneDeep(this.amountData),
|
|
|
|
|
|
+ couponChartData: _.cloneDeep(this.couponChartData),
|
|
|
|
+ washTypePieData: _.cloneDeep(this.washTypePieData),
|
|
carData: _.cloneDeep(this.carData)
|
|
carData: _.cloneDeep(this.carData)
|
|
}
|
|
}
|
|
this.dayBundleSaleIncome = 0
|
|
this.dayBundleSaleIncome = 0
|
|
- this.serverTotal = 0
|
|
|
|
|
|
+ this.washCarsTotal = 0
|
|
this.payCost = 0
|
|
this.payCost = 0
|
|
},
|
|
},
|
|
// 查询
|
|
// 查询
|
|
handleSearch () {
|
|
handleSearch () {
|
|
this.showChart = false
|
|
this.showChart = false
|
|
- if (this.searchForm.queryWord != ',' && this.searchForm.queryWord) {
|
|
|
|
|
|
+ if (this.searchForm.queryWord != ',' && this.searchForm.queryWord.length) {
|
|
const searchTime = this.searchForm.queryWord.toString().split(',')
|
|
const searchTime = this.searchForm.queryWord.toString().split(',')
|
|
this.beginDate = this.exitTime(searchTime[0])
|
|
this.beginDate = this.exitTime(searchTime[0])
|
|
this.endDate = this.exitTime(searchTime[1])
|
|
this.endDate = this.exitTime(searchTime[1])
|
|
this.getPageData()
|
|
this.getPageData()
|
|
} else {
|
|
} else {
|
|
- this.$Message.error('请选择查询条件')
|
|
|
|
|
|
+ this.$message.error('请选择查询条件')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 格式化时间
|
|
// 格式化时间
|
|
@@ -370,16 +376,17 @@ export default {
|
|
getCurentSearchTime (item) {
|
|
getCurentSearchTime (item) {
|
|
this.curentType = item ? item.type : this.curentType
|
|
this.curentType = item ? item.type : this.curentType
|
|
const quickType = {
|
|
const quickType = {
|
|
- lastMonth: [getDate.getLastMonthDays().starttime, getDate.getLastMonthDays().endtime],
|
|
|
|
- thisMonth: [getDate.getCurrMonthDays().starttime, getDate.getCurrMonthDays().endtime],
|
|
|
|
- lastWeek: [getDate.getLastWeekDays().starttime, getDate.getLastWeekDays().endtime],
|
|
|
|
- thisWeek: [getDate.getCurrWeekDays().starttime, getDate.getCurrWeekDays().endtime],
|
|
|
|
- yesterday: [getDate.getYesterday().starttime, getDate.getYesterday().endtime],
|
|
|
|
- today: [getDate.getToday().starttime, getDate.getToday().endtime]
|
|
|
|
|
|
+ lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)],
|
|
|
|
+ thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)],
|
|
|
|
+ lastWeek: [moment(getDate.getLastWeekDays().starttime), moment(getDate.getLastWeekDays().endtime)],
|
|
|
|
+ thisWeek: [moment(getDate.getCurrWeekDays().starttime), moment(getDate.getCurrWeekDays().endtime)],
|
|
|
|
+ yesterday: [moment(getDate.getYesterday().starttime), moment(getDate.getYesterday().endtime)],
|
|
|
|
+ today: [moment(getDate.getToday().starttime), moment(getDate.getToday().endtime)]
|
|
}
|
|
}
|
|
this.searchForm.queryWord = quickType[this.curentType]
|
|
this.searchForm.queryWord = quickType[this.curentType]
|
|
- this.beginDate = quickType[this.curentType][0]
|
|
|
|
- this.endDate = quickType[this.curentType][1]
|
|
|
|
|
|
+ this.beginDate = quickType[this.curentType][0].format('YYYY-MM-DD')
|
|
|
|
+ this.endDate = quickType[this.curentType][1].format('YYYY-MM-DD')
|
|
|
|
+ console.log(this.searchForm.queryWord, '1111111')
|
|
this.getPageData()
|
|
this.getPageData()
|
|
},
|
|
},
|
|
// 根据查询条件获取所有数据
|
|
// 根据查询条件获取所有数据
|
|
@@ -389,12 +396,21 @@ export default {
|
|
beginDate: this.beginDate,
|
|
beginDate: this.beginDate,
|
|
endDate: this.endDate
|
|
endDate: this.endDate
|
|
}
|
|
}
|
|
|
|
+ console.log(_date, '_date')
|
|
// this.getAmount(_date)
|
|
// this.getAmount(_date)
|
|
// this.getServerData(_date)
|
|
// this.getServerData(_date)
|
|
// this.getBundelData(_date)
|
|
// this.getBundelData(_date)
|
|
// this.getChartData(_date)
|
|
// this.getChartData(_date)
|
|
// this.getPayData(_date)
|
|
// this.getPayData(_date)
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
|
+ next(vm => {
|
|
|
|
+ vm.pageInit()
|
|
|
|
+ vm.getListStore()
|
|
|
|
+ vm.curentType = 'thisWeek'
|
|
|
|
+ vm.getCurentSearchTime()
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|