|
|
@@ -2,26 +2,25 @@
|
|
|
<div id="card-1">
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="main">
|
|
|
- <el-col :span="24" class="one">
|
|
|
- <el-button type="primary" size="mini" @click="toSelect('day')">今日</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="toSelect('week')">本周</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="toSelect('month')">本月</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="toSelect('year')">年度</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="toSelect('custom')">自定义</el-button>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-button type="primary" size="mini" @click="totime('day')">本日</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="totime('week')">本周</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="totime('monthDay')">本月</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="totime('yearMonth')">本年</el-button>
|
|
|
<el-date-picker
|
|
|
- @blur="onchang"
|
|
|
- v-if="show == '1'"
|
|
|
v-model="time"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
+ style="margin: 0 12px"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
+ <el-button type="primary" size="mini" @click="totime(time, 1)">查询</el-button>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="two">
|
|
|
- <div id="card_six" style="width: 70vw; height: 30vw"></div>
|
|
|
+ <div id="card_six" style="width: 70vw; height: 30vw; margin: 40px 0 0 0"></div>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -43,11 +42,7 @@ export default {
|
|
|
xAxisList: [],
|
|
|
seriesList: [],
|
|
|
// 时间
|
|
|
- time: [],
|
|
|
- // 是否显示自定义
|
|
|
- show: '0',
|
|
|
- // 查询类型
|
|
|
- type: '',
|
|
|
+ time: '',
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -60,18 +55,12 @@ export default {
|
|
|
methods: {
|
|
|
...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
|
|
|
async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
- info.status = '3';
|
|
|
- info.type = this.type;
|
|
|
- if (this.type == 'custom' && this.time.length > 0) {
|
|
|
- info.start = this.time[0];
|
|
|
- info.end = this.time[1];
|
|
|
- }
|
|
|
- let res = await this.query({ skip, limit, ...info });
|
|
|
+ let res = await this.query({ skip, limit, status: '3', type: info.time, start: info.start, end: info.end });
|
|
|
if (this.$checkRes(res)) {
|
|
|
let list = res.data.sAfterSale;
|
|
|
let xAxisList = [];
|
|
|
let seriesList = [];
|
|
|
- if (this.type == 'year') {
|
|
|
+ if (info.time == 'yearMonth') {
|
|
|
for (let i = 1; i <= 12; i++) {
|
|
|
let str = i;
|
|
|
if (i < 10) str = `0${i}`;
|
|
|
@@ -92,6 +81,15 @@ export default {
|
|
|
this.$set(this, 'seriesList', seriesList);
|
|
|
}
|
|
|
},
|
|
|
+ totime(time, e) {
|
|
|
+ if (e == '1') {
|
|
|
+ let start = time[0];
|
|
|
+ let end = time[1];
|
|
|
+ this.search({ start, end, time: 'custom' });
|
|
|
+ } else {
|
|
|
+ this.search({ time });
|
|
|
+ }
|
|
|
+ },
|
|
|
getEchartData(data) {
|
|
|
if (myChart != null && myChart != '' && myChart != undefined) {
|
|
|
myChart.dispose(); //销毁
|
|
|
@@ -131,19 +129,6 @@ export default {
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
},
|
|
|
- toSelect(type) {
|
|
|
- this.$set(this, `type`, type);
|
|
|
- if (type == 'custom') {
|
|
|
- this.$set(this, `show`, '1');
|
|
|
- } else {
|
|
|
- this.$set(this, `show`, '0');
|
|
|
- }
|
|
|
- this.search();
|
|
|
- },
|
|
|
- // 时间选择
|
|
|
- onchang() {
|
|
|
- this.search();
|
|
|
- },
|
|
|
},
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
|
@@ -159,22 +144,4 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
-.main {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .one {
|
|
|
- margin: 1vw 0;
|
|
|
- text-align: center;
|
|
|
- span {
|
|
|
- margin: 0 1vw;
|
|
|
- }
|
|
|
- }
|
|
|
- .two {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-.el-range-editor--small.el-input__inner {
|
|
|
- margin: 0 0 0 1vw;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style lang="less" scoped></style>
|
