93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
|
|
<template>
|
|
<div>
|
|
<el-row style="margin-bottom: 16px">
|
|
<el-date-picker
|
|
v-model="dateRange"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
@change="getData"
|
|
:picker-options="pickerOptions"
|
|
:clearable="false"
|
|
/>
|
|
</el-row>
|
|
<daily-profit-report :bill-data="billData" width="100%" height="250px"/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import DailyProfitReport from '@/views/dashboard/DailyProfitReport.vue'
|
|
import { getServiceIncome } from '@/api/system/dashboard'
|
|
import { getLastDate, getLastDateStr, getLastMonth } from '@/utils'
|
|
|
|
export default {
|
|
name: 'ServiceIncomeChart',
|
|
components: { DailyProfitReport },
|
|
computed: {
|
|
dateRange: {
|
|
get() {
|
|
return [this.queryParams.startDate, this.queryParams.endDate];
|
|
},
|
|
set(val) {
|
|
this.queryParams.startDate = val[0];
|
|
this.queryParams.endDate = val[1];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
billData: [],
|
|
queryParams: {
|
|
startDate: getLastDateStr(6),
|
|
endDate: getLastDateStr(0),
|
|
},
|
|
pickerOptions: {
|
|
shortcuts: [{
|
|
text: '最近一周',
|
|
onClick(picker) {
|
|
const end = getLastDate(0);
|
|
const start = getLastDate(6);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近一个月',
|
|
onClick(picker) {
|
|
const end = getLastDate(0);
|
|
const start = getLastMonth(1);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}, {
|
|
text: '最近三个月',
|
|
onClick(picker) {
|
|
const end = getLastDate(0);
|
|
const start = getLastMonth(3);
|
|
picker.$emit('pick', [start, end]);
|
|
}
|
|
}]
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.loading = true;
|
|
getServiceIncome(this.queryParams).then(res => {
|
|
if (res.code === 200) {
|
|
this.billData = res.data;
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|