|
|
@@ -8,6 +8,17 @@
|
|
|
:bodyStyle="{height: '400px'}"
|
|
|
>
|
|
|
<template v-slot:content>
|
|
|
+ <div class="block">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value1"
|
|
|
+ type="datetimerange"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch" >搜索</el-button >
|
|
|
+ </div>
|
|
|
<base-pie-chart
|
|
|
:options="pieOptions"
|
|
|
width="40%"
|
|
|
@@ -63,7 +74,35 @@ export default {
|
|
|
command: 'full',
|
|
|
icon: 'full-screen',
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ value1: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date()],
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近一周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近一个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -72,6 +111,9 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleSearch(){
|
|
|
+
|
|
|
+ },
|
|
|
// 初始化饼图统计数据
|
|
|
initPieChart() {
|
|
|
this.pieData = [];
|
|
|
@@ -218,5 +260,11 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
+.block{
|
|
|
+ width:100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.filter-item{
|
|
|
+ margin-left:10px;
|
|
|
+}
|
|
|
</style>
|
tongshanglei