126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
|
||
<el-form-item label="时间范围" prop="dataRange">
|
||
<el-date-picker
|
||
v-model="queryParams.dataRange"
|
||
type="monthrange"
|
||
align="right"
|
||
unlink-panels
|
||
range-separator="至"
|
||
start-placeholder="开始月份"
|
||
end-placeholder="结束月份"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<pie-cus-chart ref="pieCusChart"></pie-cus-chart>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { countryChart } from "@/api/statistics/statistics";
|
||
import PieCusChart from '../../dashboard/PieCusChart'
|
||
export default {
|
||
name: 'countryChart',
|
||
components: { PieCusChart },
|
||
data() {
|
||
return {
|
||
// 查询参数
|
||
queryParams: {
|
||
dataRange: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
tenantId: null
|
||
},
|
||
pickerOptions: {
|
||
shortcuts: [{
|
||
text: '本月',
|
||
onClick(picker) {
|
||
picker.$emit('pick', [new Date(), new Date()]);
|
||
}
|
||
}, {
|
||
text: '今年至今',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date(new Date().getFullYear(), 0);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近六个月',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setMonth(start.getMonth() - 6);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}]
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
this.initDateRange()
|
||
},
|
||
methods:{
|
||
initDateRange(){
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setMonth(start.getMonth() - 6);
|
||
this.queryParams.dataRange = [start,end]
|
||
this.handleQuery()
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.queryParams.pageNum = 1
|
||
if (this.queryParams.dataRange && this.queryParams.dataRange.length > 1) {
|
||
this.queryParams.startDate = this.formatDate(this.queryParams.dataRange[0],false)
|
||
this.queryParams.endDate = this.formatDate(this.queryParams.dataRange[1],true)
|
||
console.log(this.queryParams, '12')
|
||
} else {
|
||
this.queryParams.startDate = null
|
||
this.queryParams.endDate = null
|
||
}
|
||
this.getList()
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm('queryForm')
|
||
this.initDateRange()
|
||
},
|
||
/**
|
||
* 查询数据
|
||
*/
|
||
getList(){
|
||
countryChart(this.queryParams).then(response => {
|
||
this.$refs.pieCusChart.initChart(response.data)
|
||
});
|
||
},
|
||
/**
|
||
* 格式化时间戳
|
||
*/
|
||
formatDate(timestamp,ifEnd) {
|
||
const date = new Date(timestamp)
|
||
const year = date.getFullYear()
|
||
// 月份是从0开始的，所以要加1
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
if(ifEnd){
|
||
//取这个月最后一天
|
||
const date = new Date(year, month, 0);
|
||
return `${year}-${month}`+"-"+date.getDate();
|
||
}else{
|
||
//取这个月第一天
|
||
return `${year}-${month}`+"-01"
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|