|
@@ -20,7 +20,7 @@
|
|
allowClear
|
|
allowClear
|
|
mode="multiple"
|
|
mode="multiple"
|
|
placeholder="选择网点"
|
|
placeholder="选择网点"
|
|
- v-model="searchForm.storeIds"
|
|
|
|
|
|
+ v-model="searchForm.storeIdList"
|
|
style="width: 200px"
|
|
style="width: 200px"
|
|
>
|
|
>
|
|
<a-select-option v-for="item in storesList" :value="item.id" :key="item.id">
|
|
<a-select-option v-for="item in storesList" :value="item.id" :key="item.id">
|
|
@@ -30,6 +30,7 @@
|
|
</a-form-item>
|
|
</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-button type="" style="margin-left: 10px;" @click="handleReset()">重置</a-button>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-form-item>
|
|
快捷筛选:
|
|
快捷筛选:
|
|
@@ -44,35 +45,22 @@
|
|
</a-card>
|
|
</a-card>
|
|
</a-row>
|
|
</a-row>
|
|
<!-- 洗车量数据 -->
|
|
<!-- 洗车量数据 -->
|
|
- <a-card class="panel ">
|
|
|
|
- <a-row :gutter="20">
|
|
|
|
- <a-col span="24" class="panel-title">洗车量趋势</a-col>
|
|
|
|
- <a-divider />
|
|
|
|
- </a-row>
|
|
|
|
- <a-row :gutter="20">
|
|
|
|
- <a-col :md="24" :lg="24">
|
|
|
|
- <a-card shadow>
|
|
|
|
- <!-- 洗车量趋势图表展示 -->
|
|
|
|
- <chart-line
|
|
|
|
- style="height: 300px;"
|
|
|
|
- color="#6C6FBE"
|
|
|
|
- :yMax="1000"
|
|
|
|
- yUnit="台"
|
|
|
|
- :xAxisRotate="resize"
|
|
|
|
- :xAxisData="XdaysData"
|
|
|
|
- :seriesData="washCarsChartData"
|
|
|
|
- text="" />
|
|
|
|
- <span v-if="isNoData" class="noData">暂无数据</span>
|
|
|
|
- </a-card>
|
|
|
|
-
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
|
|
+ <a-card class="panel" title="洗车量趋势">
|
|
|
|
+ <!-- 洗车量趋势图表展示 -->
|
|
|
|
+ <chart-line
|
|
|
|
+ style="height: 300px;"
|
|
|
|
+ color="#6C6FBE"
|
|
|
|
+ :yMax="1000"
|
|
|
|
+ yUnit="台"
|
|
|
|
+ :xAxisRotate="resize"
|
|
|
|
+ :xAxisData="XdaysData"
|
|
|
|
+ :seriesData="washCarsChartData"
|
|
|
|
+ text="" />
|
|
|
|
+ <span v-if="isNoData" class="noData">暂无数据</span>
|
|
</a-card>
|
|
</a-card>
|
|
<!-- 各洗车类型数据 -->
|
|
<!-- 各洗车类型数据 -->
|
|
- <a-card class="panel ">
|
|
|
|
|
|
+ <a-card class="panel " title="各洗车类型数据">
|
|
<a-row :gutter="24">
|
|
<a-row :gutter="24">
|
|
- <a-col span="24" class="panel-title">各洗车类型数据</a-col>
|
|
|
|
- <a-divider />
|
|
|
|
<a-col :md="4" :lg="4">
|
|
<a-col :md="4" :lg="4">
|
|
<a-card class="border-radius background-skyblue">
|
|
<a-card class="border-radius background-skyblue">
|
|
<div class="module-list ">
|
|
<div class="module-list ">
|
|
@@ -100,13 +88,13 @@
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
<!-- 洗车类型数据图表展示 -->
|
|
<!-- 洗车类型数据图表展示 -->
|
|
- <a-row :gutter="20">
|
|
|
|
|
|
+ <a-row :gutter="24">
|
|
<a-col class="tab-card">
|
|
<a-col class="tab-card">
|
|
<span :class="['tab-card-item',currentTabChart=='tab1'?'checked-item':'']" @click="currentTabChart='tab1'">详情数据</span>
|
|
<span :class="['tab-card-item',currentTabChart=='tab1'?'checked-item':'']" @click="currentTabChart='tab1'">详情数据</span>
|
|
<span :class="['tab-card-item',currentTabChart=='tab2'?'checked-item':'']" @click="currentTabChart='tab2'">变化趋势</span>
|
|
<span :class="['tab-card-item',currentTabChart=='tab2'?'checked-item':'']" @click="currentTabChart='tab2'">变化趋势</span>
|
|
</a-col>
|
|
</a-col>
|
|
<!-- 详情数据 -->
|
|
<!-- 详情数据 -->
|
|
- <a-col :md="24" :lg="24" v-if="currentTabChart=='tab1'">
|
|
|
|
|
|
+ <a-col span="24" v-if="currentTabChart=='tab1'">
|
|
<chart-bar
|
|
<chart-bar
|
|
ref="ChartBar"
|
|
ref="ChartBar"
|
|
style="height: 300px;"
|
|
style="height: 300px;"
|
|
@@ -115,12 +103,12 @@
|
|
:yMax="1000"
|
|
:yMax="1000"
|
|
yUnit="台"
|
|
yUnit="台"
|
|
:xAxisData="XdaysData"
|
|
:xAxisData="XdaysData"
|
|
- :seriesData="washTypeChartData"
|
|
|
|
|
|
+ :seriesData="washTypeBarData"
|
|
text="" />
|
|
text="" />
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
</a-col>
|
|
</a-col>
|
|
<!-- 变化趋势 -->
|
|
<!-- 变化趋势 -->
|
|
- <a-col :md="24" :lg="24" v-if="currentTabChart=='tab2'">
|
|
|
|
|
|
+ <a-col span="24" v-if="currentTabChart=='tab2'">
|
|
<chart-line
|
|
<chart-line
|
|
ref="ChartLine"
|
|
ref="ChartLine"
|
|
style="height: 300px;"
|
|
style="height: 300px;"
|
|
@@ -128,44 +116,38 @@
|
|
yUnit="台"
|
|
yUnit="台"
|
|
:xAxisRotate="resize"
|
|
:xAxisRotate="resize"
|
|
:xAxisData="XdaysData"
|
|
:xAxisData="XdaysData"
|
|
- :seriesData="washTypeChartData"
|
|
|
|
|
|
+ :seriesData="washTypeLineData"
|
|
text="" />
|
|
text="" />
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</a-card>
|
|
</a-card>
|
|
- <a-card class="panel ">
|
|
|
|
- <a-row :gutter="20">
|
|
|
|
- <a-col span="24" class="panel-title">各类型占比</a-col>
|
|
|
|
- <a-divider />
|
|
|
|
|
|
+ <a-card class="panel chart-pie" title="各类型占比">
|
|
|
|
+ <a-row :gutter="24">
|
|
<a-col span="12">
|
|
<a-col span="12">
|
|
- <a-card shadow>
|
|
|
|
- <chart-pie
|
|
|
|
- ref="chartPie"
|
|
|
|
- class="chartPie-box"
|
|
|
|
- :searchData="XdaysData"
|
|
|
|
- :value="washTypePieData"
|
|
|
|
- title="洗车总量(台)"
|
|
|
|
- :total="chartData.allOrderNum.toFixed(2)"
|
|
|
|
- :color="washTypePieColor"
|
|
|
|
- :xAxisRotate="resize"
|
|
|
|
- text="" />
|
|
|
|
- </a-card>
|
|
|
|
|
|
+ <chart-pie
|
|
|
|
+ ref="chartPie"
|
|
|
|
+ class="chartPie-box"
|
|
|
|
+ :searchData="XdaysData"
|
|
|
|
+ :value="washTypePieData"
|
|
|
|
+ title="洗车总量(台)"
|
|
|
|
+ :total="chartData.allOrderNum.toFixed(2)"
|
|
|
|
+ :color="washTypePieColor"
|
|
|
|
+ :xAxisRotate="resize"
|
|
|
|
+ text="" />
|
|
</a-col>
|
|
</a-col>
|
|
<a-col span="12">
|
|
<a-col span="12">
|
|
- <a-card shadow>
|
|
|
|
- <!-- 用券与未用券百分比展示 -->
|
|
|
|
- <chart-pie
|
|
|
|
- ref="serverChartPie"
|
|
|
|
- class="chartPie-box"
|
|
|
|
- :searchData="XdaysData"
|
|
|
|
- :value="couponChartData"
|
|
|
|
- title="洗车总量(台)"
|
|
|
|
- :total="chartData.allOrderNum.toFixed(2)"
|
|
|
|
- :color="couponColor"
|
|
|
|
- :xAxisRotate="resize"
|
|
|
|
- text="" />
|
|
|
|
- </a-card>
|
|
|
|
|
|
+ <!-- 用券与未用券百分比展示 -->
|
|
|
|
+ <chart-pie
|
|
|
|
+ ref="serverChartPie"
|
|
|
|
+ class="chartPie-box"
|
|
|
|
+ :searchData="XdaysData"
|
|
|
|
+ :value="couponChartData"
|
|
|
|
+ title="洗车总量(台)"
|
|
|
|
+ :total="chartData.allOrderNum.toFixed(2)"
|
|
|
|
+ :color="couponColor"
|
|
|
|
+ :xAxisRotate="resize"
|
|
|
|
+ text="" />
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</a-card>
|
|
</a-card>
|
|
@@ -243,16 +225,7 @@ export default {
|
|
return data
|
|
return data
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
|
|
|
|
- mounted () {
|
|
|
|
- const that = this
|
|
|
|
- window.onresize = () => {
|
|
|
|
- return (() => {
|
|
|
|
- window.screenWidth = document.body.clientWidth
|
|
|
|
- that.screenWidth = window.screenWidth
|
|
|
|
- })()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
@@ -262,7 +235,7 @@ export default {
|
|
storesList: [], // 洗车网点列表
|
|
storesList: [], // 洗车网点列表
|
|
searchForm: {
|
|
searchForm: {
|
|
queryWord: null, // 时间查询条件,默认本周
|
|
queryWord: null, // 时间查询条件,默认本周
|
|
- storeIds: [] // 已选洗车网点
|
|
|
|
|
|
+ storeIdList: [] // 已选洗车网点
|
|
},
|
|
},
|
|
chartData: {
|
|
chartData: {
|
|
KX: 0, // 快洗
|
|
KX: 0, // 快洗
|
|
@@ -309,18 +282,40 @@ export default {
|
|
// 洗车类型数据
|
|
// 洗车类型数据
|
|
currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
|
|
currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
|
|
XdaysData: [], // 图表X轴时间集合
|
|
XdaysData: [], // 图表X轴时间集合
|
|
- // 洗车类型数据
|
|
|
|
- washTypeChartData: [{
|
|
|
|
- name: '',
|
|
|
|
|
|
+ // 洗车类型柱状图表数据
|
|
|
|
+ washTypeBarData: [{
|
|
|
|
+ name: '快速洗车',
|
|
|
|
+ type: 'bar',
|
|
|
|
+ data: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '精致洗车',
|
|
type: 'bar',
|
|
type: 'bar',
|
|
data: []
|
|
data: []
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- name: '',
|
|
|
|
|
|
+ name: '打蜡精洗',
|
|
type: 'bar',
|
|
type: 'bar',
|
|
data: []
|
|
data: []
|
|
}
|
|
}
|
|
],
|
|
],
|
|
|
|
+ // 洗车类型折线图表数据
|
|
|
|
+ washTypeLineData: [{
|
|
|
|
+ name: '快速洗车',
|
|
|
|
+ type: 'line',
|
|
|
|
+ data: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '精致洗车',
|
|
|
|
+ type: 'line',
|
|
|
|
+ data: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '打蜡精洗',
|
|
|
|
+ type: 'line',
|
|
|
|
+ data: []
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
// 各类型占比
|
|
// 各类型占比
|
|
washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
databack: {
|
|
databack: {
|
|
@@ -368,9 +363,15 @@ export default {
|
|
this.endDate = this.exitTime(searchTime[1])
|
|
this.endDate = this.exitTime(searchTime[1])
|
|
this.getPageData()
|
|
this.getPageData()
|
|
} else {
|
|
} else {
|
|
- this.$message.error('请选择查询条件')
|
|
|
|
|
|
+ this.$message.error('请选择统计区间')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ // 重置
|
|
|
|
+ handleReset () {
|
|
|
|
+ this.searchForm.storeIdList = []
|
|
|
|
+ this.curentType = 'thisWeek'
|
|
|
|
+ this.getCurentSearchTime()
|
|
|
|
+ },
|
|
// 格式化时间
|
|
// 格式化时间
|
|
exitTime (time) {
|
|
exitTime (time) {
|
|
const D = new Date(time)
|
|
const D = new Date(time)
|
|
@@ -403,20 +404,59 @@ export default {
|
|
this.XdaysData = [] // x轴置空
|
|
this.XdaysData = [] // x轴置空
|
|
const _date = {
|
|
const _date = {
|
|
beginDate: this.beginDate,
|
|
beginDate: this.beginDate,
|
|
- endDate: this.endDate
|
|
|
|
|
|
+ endDate: this.endDate,
|
|
|
|
+ storeIdList: this.searchForm.storeIdList
|
|
}
|
|
}
|
|
console.log(_date, '_date')
|
|
console.log(_date, '_date')
|
|
getOrderstatistics(_date).then(res => {
|
|
getOrderstatistics(_date).then(res => {
|
|
console.log(res, 'rrrrrrr')
|
|
console.log(res, 'rrrrrrr')
|
|
if (res.status == 200) {
|
|
if (res.status == 200) {
|
|
this.chartData = res.data
|
|
this.chartData = res.data
|
|
- this.filterData()
|
|
|
|
|
|
+ if (res.data.dateList && res.data.dateList.length) {
|
|
|
|
+ this.isNoData = false
|
|
|
|
+ this.filterData(res.data.dateList)
|
|
|
|
+ } else {
|
|
|
|
+ this.isNoData = true
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.isNoData = true
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- // 整合图表数据
|
|
|
|
- filterData () {
|
|
|
|
-
|
|
|
|
|
|
+ // 整合图表每天数据
|
|
|
|
+ filterData (data) {
|
|
|
|
+ const days = [] // 日期合集
|
|
|
|
+ const kxData = [] // 快速洗车数据
|
|
|
|
+ const jxData = [] // 精致洗车数据
|
|
|
|
+ const dlxData = [] // 打蜡洗车数据
|
|
|
|
+ const totalData = [] // 全部洗车量数据
|
|
|
|
+ const useCouponData = [] // 用券洗车量数据
|
|
|
|
+ data.map(item => {
|
|
|
|
+ const itemDay = item.date.split('-')
|
|
|
|
+ const month = Number(itemDay[1])
|
|
|
|
+ const day = Number(itemDay[2])
|
|
|
|
+ const time = month + '月' + day + '日'
|
|
|
|
+ days.push(time)
|
|
|
|
+ kxData.push(item.KX)
|
|
|
|
+ jxData.push(item.JX)
|
|
|
|
+ dlxData.push(item.DLX)
|
|
|
|
+ totalData.push(item.allOrderNum)
|
|
|
|
+ useCouponData.push(item.useCouponOrderNum)
|
|
|
|
+ })
|
|
|
|
+ this.XdaysData = days
|
|
|
|
+ const washTypeData = [kxData, jxData, dlxData]
|
|
|
|
+ console.log(washTypeData, 'washTypeData')
|
|
|
|
+ // 洗车类型柱状图表数据
|
|
|
|
+ this.washTypeBarData.map((item, index) => {
|
|
|
|
+ item.data = washTypeData[index]
|
|
|
|
+ })
|
|
|
|
+ // 洗车类型折线图表数据
|
|
|
|
+ this.washTypeLineData.map((item, index) => {
|
|
|
|
+ item.data = washTypeData[index]
|
|
|
|
+ })
|
|
|
|
+ // 洗车量图表数据赋值
|
|
|
|
+ this.washCarsChartData[0].data = totalData
|
|
|
|
+ this.washCarsChartData[1].data = useCouponData
|
|
}
|
|
}
|
|
},
|
|
},
|
|
beforeRouteEnter (to, from, next) {
|
|
beforeRouteEnter (to, from, next) {
|
|
@@ -426,15 +466,28 @@ export default {
|
|
vm.curentType = 'thisWeek'
|
|
vm.curentType = 'thisWeek'
|
|
vm.getCurentSearchTime()
|
|
vm.getCurentSearchTime()
|
|
})
|
|
})
|
|
|
|
+ },
|
|
|
|
+ // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
|
|
|
|
+ mounted () {
|
|
|
|
+ const that = this
|
|
|
|
+ window.onresize = () => {
|
|
|
|
+ return (() => {
|
|
|
|
+ window.screenWidth = document.body.clientWidth
|
|
|
|
+ that.screenWidth = window.screenWidth
|
|
|
|
+ })()
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
|
+ .home{
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
.report-page {
|
|
.report-page {
|
|
- position: relative;
|
|
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
height: calc(100vh - 285px);
|
|
height: calc(100vh - 285px);
|
|
overflow-y: scroll;
|
|
overflow-y: scroll;
|
|
|
|
+ overflow-x: hidden;
|
|
.search-panel {
|
|
.search-panel {
|
|
.ivu-card-body>div {
|
|
.ivu-card-body>div {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
@@ -472,7 +525,8 @@ export default {
|
|
left: 40%;
|
|
left: 40%;
|
|
}
|
|
}
|
|
.chartPie-box{
|
|
.chartPie-box{
|
|
- height: 350px;
|
|
|
|
|
|
+ height: 300px;
|
|
|
|
+ width: 100%;
|
|
}
|
|
}
|
|
.panel-title {
|
|
.panel-title {
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
@@ -540,36 +594,6 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- .count-div {
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .count-card {
|
|
|
|
- width: 49%;
|
|
|
|
- flex-shrink: 0;
|
|
|
|
- flex-grow: 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .home-card-title {
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .home-list {
|
|
|
|
- margin: 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .home-list-li {
|
|
|
|
- list-style: none;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- padding: 5px 0;
|
|
|
|
-
|
|
|
|
- i {
|
|
|
|
- color: #B2B2B2;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
.module-list {
|
|
.module-list {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|