|
@@ -63,30 +63,13 @@
|
|
|
<!-- 各回收物类型数据 -->
|
|
|
<a-card class="panel " title="各回收物类型清运数据">
|
|
|
<a-row :gutter="24">
|
|
|
- <a-col :md="4" :lg="4">
|
|
|
- <a-card class="border-radius background-skyblue">
|
|
|
- <div class="module-list ">
|
|
|
- <p>废旧金属</p>
|
|
|
- <span>{{ chartData.KX }}kg</span>
|
|
|
+ <a-col :md="24" :lg="24">
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div v-for="(item,index) in qyTotalPieData" :key="index" class="module-list" :style="{background:washTypePieColor[index]}">
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ <span>{{ item.value }} kg</span>
|
|
|
</div>
|
|
|
- </a-card>
|
|
|
- </a-col>
|
|
|
- <a-col :md="4" :lg="4">
|
|
|
- <a-card class="border-radius background-greenBlue">
|
|
|
- <div class="module-list ">
|
|
|
- <p>废旧塑料</p>
|
|
|
- <span>{{ chartData.JX }}kg</span>
|
|
|
- </div>
|
|
|
- </a-card>
|
|
|
- </a-col>
|
|
|
- <a-col :md="4" :lg="4">
|
|
|
- <a-card class="border-radius background-blackGreen">
|
|
|
- <div class="module-list ">
|
|
|
- <p>废旧纸张</p>
|
|
|
- <span>{{ chartData.DLX }}kg</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- </a-card>
|
|
|
+ </div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<!-- 各回收物类型数据图表展示 -->
|
|
@@ -104,7 +87,7 @@
|
|
|
:xAxisRotate="resize"
|
|
|
:yMax="1000"
|
|
|
yUnit="kg"
|
|
|
- :xAxisData="XdaysData"
|
|
|
+ :xAxisData="XdaysData1"
|
|
|
:seriesData="washTypeBarData"
|
|
|
text="" />
|
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
@@ -118,42 +101,42 @@
|
|
|
yUnit="kg"
|
|
|
:yMax="1000"
|
|
|
:xAxisRotate="resize"
|
|
|
- :xAxisData="XdaysData"
|
|
|
+ :xAxisData="XdaysData1"
|
|
|
:seriesData="washTypeLineData"
|
|
|
text="" />
|
|
|
<span v-if="isNoData" class="noData">暂无数据</span>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-card>
|
|
|
- <a-card class="panel chart-pie" title="各回收物类型占比">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col span="12">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col span="12">
|
|
|
+ <a-card class="panel chart-pie" title="各回收物类型占比">
|
|
|
<chart-pie
|
|
|
ref="chartPie"
|
|
|
class="chartPie-box"
|
|
|
- :searchData="XdaysData"
|
|
|
- :value="washTypePieData"
|
|
|
+ :value="qyTotalPieData"
|
|
|
title="清运总量(kg)"
|
|
|
- :total="chartData.allOrderNum"
|
|
|
+ :total="totalGroupRubbiData.cleanWeight"
|
|
|
:color="washTypePieColor"
|
|
|
:xAxisRotate="resize"
|
|
|
text="" />
|
|
|
- </a-col>
|
|
|
- <a-col span="12">
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col span="12">
|
|
|
+ <a-card class="panel chart-pie" title="各清运司机占比">
|
|
|
<!-- 各清运司机占比 百分比展示 -->
|
|
|
<chart-pie
|
|
|
ref="serverChartPie"
|
|
|
class="chartPie-box"
|
|
|
- :searchData="XdaysData"
|
|
|
- :value="couponChartData"
|
|
|
+ :value="sjTotalPieData"
|
|
|
title="清运总量(台)"
|
|
|
- :total="chartData.allOrderNum"
|
|
|
+ :total="totalGroupUserData.cleanWeight"
|
|
|
:color="couponColor"
|
|
|
:xAxisRotate="resize"
|
|
|
text="" />
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-card>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -163,7 +146,7 @@ import { ChartPie, ChartBar, ChartLine } from '@/components/Echarts'
|
|
|
import _ from 'lodash'
|
|
|
import getDate from '@/libs/getDate'
|
|
|
import moment from 'moment'
|
|
|
-import { getCleanReport } from '@/api/cleanManage.js'
|
|
|
+import { findTotalGroupRubbi, findTotalGroupUser, findTotalGroupDate, findTotalGroupDateAndRubbishType } from '@/api/cleanManage.js'
|
|
|
import { stationList } from '@/api/releaseRecord.js'
|
|
|
export default {
|
|
|
name: 'Home',
|
|
@@ -209,37 +192,29 @@ export default {
|
|
|
return 0
|
|
|
}
|
|
|
},
|
|
|
- // 各类型占比总计数据
|
|
|
- washTypePieData () {
|
|
|
- const data = [{
|
|
|
- 'name': '快速洗车',
|
|
|
- 'value': this.chartData.KX
|
|
|
- }, {
|
|
|
- 'name': '精致洗车',
|
|
|
- 'value': this.chartData.JX
|
|
|
- }, {
|
|
|
- 'name': '打蜡精洗',
|
|
|
- 'value': this.chartData.DLX
|
|
|
- }]
|
|
|
- return data
|
|
|
+ // 各回收物类型占比
|
|
|
+ qyTotalPieData () {
|
|
|
+ const list = this.totalGroupRubbiData ? this.totalGroupRubbiData.cleanReportData : []
|
|
|
+ const temp = []
|
|
|
+ list.map(item => {
|
|
|
+ temp.push({
|
|
|
+ name: item.rubbishTypeDictValue,
|
|
|
+ value: Number(item.cleanWeight / 1000).toFixed(2)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return temp
|
|
|
},
|
|
|
- // 洗车用券量占比数据
|
|
|
- couponChartData () {
|
|
|
- const data = [
|
|
|
- {
|
|
|
- 'name': '未用券洗车量',
|
|
|
- 'value': this.chartData.notUseCouponOrderNum
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': '用券洗车量',
|
|
|
- 'value': this.chartData.useCouponOrderNum
|
|
|
- },
|
|
|
- {
|
|
|
- 'name': '用券洗车量11',
|
|
|
- 'value': this.chartData.useCouponOrderNum
|
|
|
- }
|
|
|
- ]
|
|
|
- return data
|
|
|
+ // 各清运司机占比
|
|
|
+ sjTotalPieData () {
|
|
|
+ const list = this.totalGroupUserData ? this.totalGroupUserData.cleanReportData : []
|
|
|
+ const temp = []
|
|
|
+ list.map(item => {
|
|
|
+ temp.push({
|
|
|
+ name: item.operatorName,
|
|
|
+ value: Number(item.cleanWeight / 1000).toFixed(2)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return temp
|
|
|
}
|
|
|
},
|
|
|
data () {
|
|
@@ -248,18 +223,10 @@ export default {
|
|
|
timer: false,
|
|
|
form: this.$form.createForm(this, { name: 'searchForm' }),
|
|
|
isNoData: false, // 是否有每天营业额及进店量数据
|
|
|
- stationList: [], // 洗车网点列表
|
|
|
+ stationList: [], // 清运网点列表
|
|
|
searchForm: {
|
|
|
queryWord: null, // 时间查询条件,默认本周
|
|
|
- storeIdList: [] // 已选洗车网点
|
|
|
- },
|
|
|
- chartData: {
|
|
|
- KX: 0, // 快洗
|
|
|
- JX: 0, // 精洗
|
|
|
- DLX: 0, // 打蜡洗
|
|
|
- allOrderNum: 0, // 洗车总量
|
|
|
- useCouponOrderNum: 0, // 用券洗车量
|
|
|
- notUseCouponOrderNum: 0 // 未用券洗车量
|
|
|
+ storeIdList: [] // 已选清运网点
|
|
|
},
|
|
|
// 快速删选tab
|
|
|
tabList: [{
|
|
@@ -282,63 +249,38 @@ export default {
|
|
|
curentType: 'thisWeek', // 当前所选时间查询类型
|
|
|
beginDate: null, // 开始时间
|
|
|
endDate: null, // 结束时间
|
|
|
- // 洗车量图表数据
|
|
|
- clearnChartData: [{
|
|
|
- name: '投递量',
|
|
|
- type: 'line',
|
|
|
- data: []
|
|
|
+ // 各回收物类型占比
|
|
|
+ totalGroupRubbiData: {
|
|
|
+ cleanWeight: 0,
|
|
|
+ cleanReportData: []
|
|
|
+ },
|
|
|
+ // 各清运司机占比
|
|
|
+ totalGroupUserData: {
|
|
|
+ cleanWeight: 0,
|
|
|
+ cleanReportData: []
|
|
|
},
|
|
|
- {
|
|
|
- name: '清运量',
|
|
|
- type: 'line',
|
|
|
- data: []
|
|
|
- }
|
|
|
- ],
|
|
|
- couponColor: ['#d48265', '#ff55ff'],
|
|
|
// 洗车类型数据
|
|
|
currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
|
|
|
XdaysData: [], // 图表X轴时间集合
|
|
|
- // 洗车类型柱状图表数据
|
|
|
- washTypeBarData: [{
|
|
|
- name: '快速洗车',
|
|
|
- type: 'bar',
|
|
|
- data: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '精致洗车',
|
|
|
- type: 'bar',
|
|
|
- data: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '打蜡精洗',
|
|
|
- type: 'bar',
|
|
|
- data: []
|
|
|
- }
|
|
|
- ],
|
|
|
- // 洗车类型折线图表数据
|
|
|
- washTypeLineData: [{
|
|
|
- name: '快速洗车',
|
|
|
- type: 'line',
|
|
|
- data: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '精致洗车',
|
|
|
- type: 'line',
|
|
|
- data: []
|
|
|
- },
|
|
|
- {
|
|
|
- name: '打蜡精洗',
|
|
|
- type: 'line',
|
|
|
- data: []
|
|
|
- }
|
|
|
- ],
|
|
|
+ XdaysData1: [],
|
|
|
// 各类型占比
|
|
|
- washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
- databack: {
|
|
|
- couponChartData: [],
|
|
|
- washTypePieData: [],
|
|
|
- chartData: {}
|
|
|
- }
|
|
|
+ washTypePieColor: ['#ffaa00', '#ff5500', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
+ couponColor: ['#ffaa00', '#ff5500', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
+ // 清运量趋势
|
|
|
+ clearnChartData: [
|
|
|
+ {
|
|
|
+ name: '投递量',
|
|
|
+ type: 'line',
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '清运量',
|
|
|
+ type: 'line',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ washTypeBarData: [],
|
|
|
+ washTypeLineData: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -370,11 +312,6 @@ export default {
|
|
|
// 页面初始化
|
|
|
pageInit () {
|
|
|
this.form.resetFields()
|
|
|
- this.databack = {
|
|
|
- couponChartData: _.cloneDeep(this.couponChartData),
|
|
|
- washTypePieData: _.cloneDeep(this.washTypePieData),
|
|
|
- chartData: _.cloneDeep(this.chartData)
|
|
|
- }
|
|
|
},
|
|
|
// 查询
|
|
|
handleSearch () {
|
|
@@ -425,61 +362,56 @@ export default {
|
|
|
// 根据查询条件获取所有数据
|
|
|
getPageData () {
|
|
|
this.XdaysData = [] // x轴置空
|
|
|
- const _date = {
|
|
|
- beginDate: this.beginDate,
|
|
|
- endDate: this.endDate,
|
|
|
+ const params = {
|
|
|
+ beginDate: this.beginDate + ' 00:00:00',
|
|
|
+ endDate: this.endDate + ' 00:00:00',
|
|
|
storeIdList: this.searchForm.storeIdList
|
|
|
}
|
|
|
- console.log(_date, '_date')
|
|
|
- getCleanReport(_date).then(res => {
|
|
|
- console.log(res, 'rrrrrrr')
|
|
|
+ // 各回收物类型占比
|
|
|
+ findTotalGroupRubbi(params).then(res => {
|
|
|
+ console.log(res, '各回收物类型占比')
|
|
|
if (res.status == 200) {
|
|
|
- this.chartData = res.data
|
|
|
- if (res.data.dateList && res.data.dateList.length) {
|
|
|
- this.isNoData = false
|
|
|
- this.filterData(res.data.dateList)
|
|
|
- } else {
|
|
|
- this.isNoData = true
|
|
|
- }
|
|
|
+ this.totalGroupRubbiData = res.data
|
|
|
} else {
|
|
|
this.isNoData = true
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- // 整合图表每天数据
|
|
|
- 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)
|
|
|
- // console.log(days, 'ddddd')
|
|
|
- kxData.push(item.KX)
|
|
|
- jxData.push(item.JX)
|
|
|
- dlxData.push(item.DLX)
|
|
|
- totalData.push(item.allOrderNum)
|
|
|
- useCouponData.push(item.useCouponOrderNum)
|
|
|
+ // 各清运司机占比
|
|
|
+ findTotalGroupUser(params).then(res => {
|
|
|
+ console.log(res, '各清运司机占比')
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.totalGroupUserData = res.data
|
|
|
+ } else {
|
|
|
+ this.isNoData = true
|
|
|
+ }
|
|
|
})
|
|
|
- this.XdaysData = days
|
|
|
- const washTypeData = [kxData, jxData, dlxData]
|
|
|
- // 各回收物类型柱状图表数据
|
|
|
- this.washTypeBarData.map((item, index) => {
|
|
|
- item.data = washTypeData[index]
|
|
|
+ // 清运量趋势
|
|
|
+ findTotalGroupDate(params).then(res => {
|
|
|
+ console.log(res, '清运量趋势')
|
|
|
+ if (res.status == 200) {
|
|
|
+ // this.totalGroupUserData = res.data
|
|
|
+ const a = res.data.cleanReportData
|
|
|
+ const b = res.data.deliveryReportData
|
|
|
+ for (var key in a) {
|
|
|
+ this.clearnChartData[0].data.push(Number(a[key] / 1000).toFixed(2))
|
|
|
+ }
|
|
|
+ for (var key in b) {
|
|
|
+ this.XdaysData.push(key)
|
|
|
+ this.clearnChartData[1].data.push(Number(b[key] / 1000).toFixed(2))
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isNoData = true
|
|
|
+ }
|
|
|
})
|
|
|
- // 各回收物类型折线图表数据
|
|
|
- this.washTypeLineData.map((item, index) => {
|
|
|
- item.data = washTypeData[index]
|
|
|
+ // 各回收物类型清运数据柱状图
|
|
|
+ findTotalGroupDateAndRubbishType(params).then(res => {
|
|
|
+ console.log(res, '各回收物类型清运数据柱状图')
|
|
|
+ if (res.status == 200) {
|
|
|
+ // this.totalGroupUserData = res.data
|
|
|
+ } else {
|
|
|
+ this.isNoData = true
|
|
|
+ }
|
|
|
})
|
|
|
- // 洗车量图表数据赋值
|
|
|
- this.clearnChartData[0].data = totalData
|
|
|
- this.clearnChartData[1].data = useCouponData
|
|
|
}
|
|
|
},
|
|
|
beforeRouteEnter (to, from, next) {
|
|
@@ -548,7 +480,8 @@ export default {
|
|
|
}
|
|
|
.chartPie-box{
|
|
|
height: 300px;
|
|
|
- width: 100%;
|
|
|
+ max-width: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
.panel-title {
|
|
|
font-size: 18px;
|
|
@@ -570,59 +503,17 @@ export default {
|
|
|
color: #2d8cf0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .border-radius {
|
|
|
- border-radius: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .background-blue {
|
|
|
- background-color: #157edf;
|
|
|
- }
|
|
|
-
|
|
|
- .background-green {
|
|
|
- background-color: #29aa4f;
|
|
|
- }
|
|
|
-
|
|
|
- .background-yellow {
|
|
|
- background-color: #dbb211;
|
|
|
- }
|
|
|
-
|
|
|
- .background-pop {
|
|
|
- background-color: #8544e0;
|
|
|
- }
|
|
|
-
|
|
|
- .background-black {
|
|
|
- background-color: #1f2c65;
|
|
|
- }
|
|
|
-
|
|
|
- .background-pink {
|
|
|
- background-color: #d23e57;
|
|
|
- }
|
|
|
-
|
|
|
- .background-skyblue {
|
|
|
- background-color: #00aaff;
|
|
|
- }
|
|
|
-
|
|
|
- .background-greenBlue {
|
|
|
- background-color: #1b9eaa;
|
|
|
- }
|
|
|
-
|
|
|
- .background-blackGreen {
|
|
|
- background-color: #357c09;
|
|
|
- }
|
|
|
-
|
|
|
- .background-orange {
|
|
|
- background-color: #d2701b;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.module-list {
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: 100px;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 15px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
- color: #FFFFFF;
|
|
|
-
|
|
|
+ margin: 5px;
|
|
|
span {
|
|
|
font-weight: 600;
|
|
|
font-size: 20px;
|