fix: 🐛 修改统计图已发现的问题

master
“Yer” 2023-09-30 16:18:27 +08:00
parent 46143beb83
commit c88c1865e7
2 changed files with 157 additions and 61 deletions

View File

@ -1,20 +1,20 @@
<template> <template>
<div> <div>
<div class="breadcrumb"> <div class="breadcrumb">
<span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" <span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
:key="index"> {{item.title}}</span> :key="index"> {{ item.title }}</span>
<div class="date-picker"> <div class="date-picker">
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" clearable <Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
style="width:200px;margin-left:10px;"> style="width:200px;margin-left:10px;">
<Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index" clearable> <Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
{{ item.year+'年'+item.month+'月' }}</Option> {{ item.year + '年' + item.month + '月' }}</Option>
</Select> </Select>
</div> </div>
<div class="shop-list" v-if="!closeShop"> <div class="shop-list" v-if="!closeShop">
<Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询" <Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
style="width:200px;margin-left:10px;"> style="width:200px;margin-left:10px;">
<Scroll :on-reach-bottom="handleReachBottom"> <Scroll :on-reach-bottom="handleReachBottom">
<Option v-for="(item,index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option> <Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
</Scroll> </Scroll>
</Select> </Select>
</div> </div>
@ -31,7 +31,7 @@ export default {
selectedWay: { selectedWay: {
// //
title: "最近7天", title: "过去7天",
selected: true, selected: true,
searchType: "LAST_SEVEN", searchType: "LAST_SEVEN",
}, },
@ -56,12 +56,35 @@ export default {
searchType: "YESTERDAY", searchType: "YESTERDAY",
}, },
{ {
title: "最近7天", title: "过去7天",
selected: true, selected: true,
searchType: "LAST_SEVEN", searchType: "LAST_SEVEN",
}, },
{ {
title: "最近30天", title: "过去30天",
selected: false,
searchType: "LAST_THIRTY",
},
],
originDateList: [
//
{
title: "今天",
selected: false,
searchType: "TODAY",
},
{
title: "昨天",
selected: false,
searchType: "YESTERDAY",
},
{
title: "过去7天",
selected: true,
searchType: "LAST_SEVEN",
},
{
title: "过去30天",
selected: false, selected: false,
searchType: "LAST_THIRTY", searchType: "LAST_THIRTY",
}, },
@ -126,8 +149,8 @@ export default {
this.dates = dates.reverse(); this.dates = dates.reverse();
}, },
// //
changeSelect() { changeSelect(e) {
console.log(this.month); this.month = e
if (this.month) { if (this.month) {
this.dateList.forEach((res) => { this.dateList.forEach((res) => {
res.selected = false; res.selected = false;
@ -138,34 +161,36 @@ export default {
this.$emit("selected", this.selectedWay); this.$emit("selected", this.selectedWay);
} else { } else {
const current = this.dateList.find(item=>{return item.selected})
const current = this.dateList.find(item => { return item.selected })
this.selectedWay = current this.selectedWay = current
this.clickBreadcrumb(current)
this.$emit("selected", this.selectedWay); this.$emit("selected", this.selectedWay);
} }
}, },
// //
clickBreadcrumb(item) { clickBreadcrumb(item) {
this.dateList.forEach((res) => {
let currentIndex;
this.dateList.forEach((res,index) => {
res.selected = false; res.selected = false;
if(res.title === item.title){
currentIndex = index
}
}); });
item.selected = true; item.selected = true;
item.storeId = this.storeId; item.storeId = this.storeId;
this.month = ""; this.month = "";
const dateList = this.dateList
let currentDate
if (item.searchType == "") { if (item.searchType == "") {
if ( let currentDate = this.originDateList[currentIndex].searchType
dateList.some((date) => { if (currentDate) {
currentDate = date item.searchType = currentDate
return date.title == item.title;
})
) {
item.searchType = currentDate.searchType;
} else { } else {
item.searchType = "LAST_SEVEN"; item.searchType = "LAST_SEVEN";
} }
} }
this.selectedWay = item; this.selectedWay = item;
this.selectedWay.year = new Date().getFullYear(); this.selectedWay.year = new Date().getFullYear();
this.selectedWay.month = ""; this.selectedWay.month = "";
@ -179,15 +204,20 @@ export default {
.breadcrumb { .breadcrumb {
display: flex; display: flex;
align-items: center; align-items: center;
> span {
>span {
margin-right: 15px; margin-right: 15px;
cursor: pointer; cursor: pointer;
} }
} }
.active { .active {
color: $theme_color; color: $theme_color;
position: relative; position: relative;
} }
.date-picker {}
.active:before { .active:before {
content: ""; content: "";
position: absolute; position: absolute;

View File

@ -1,45 +1,50 @@
<template> <template>
<div> <div>
<div class="breadcrumb"> <div class="breadcrumb">
<span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" :key="index"> {{item.title}}</span> <span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
:key="index"> {{ item.title }}</span>
<div class="date-picker"> <div class="date-picker">
<Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" style="width:200px;margin-left:10px;"> <Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
<Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index">{{ item.year+''+item.month+'' }}</Option> style="width:200px;margin-left:10px;">
<Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
{{ item.year + '年' + item.month + '月' }}</Option>
</Select>
</div>
<div class="shop-list" v-if="!closeShop">
<Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
style="width:200px;margin-left:10px;">
<Scroll :on-reach-bottom="handleReachBottom">
<Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
</Scroll>
</Select> </Select>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Cookies from "js-cookie"; import { getShopListData } from "@/api/shops.js";
export default { export default {
props: ["closeShop"], props: ["closeShop"],
data() { data() {
return { return {
month: "", // month: "", //
defuaultWay: {
title: "最近7天",
selected: true,
searchType: "LAST_SEVEN",
},
selectedWay: { selectedWay: {
title: "最近7天", //
title: "过去7天",
selected: true, selected: true,
searchType: "LAST_SEVEN", searchType: "LAST_SEVEN",
}, },
storeId: "", // id storeId: "", // id
dates: [], // dates: [], //
params: { // params: {
//
pageNumber: 1, pageNumber: 1,
pageSize: 10, pageSize: 10,
storeName: "", storeName: "",
storeId: "",
}, },
dateList: [ dateList: [
//
{ {
title: "今天", title: "今天",
selected: false, selected: false,
@ -51,23 +56,77 @@ export default {
searchType: "YESTERDAY", searchType: "YESTERDAY",
}, },
{ {
title: "最近7天", title: "过去7天",
selected: true, selected: true,
searchType: "LAST_SEVEN", searchType: "LAST_SEVEN",
}, },
{ {
title: "最近30天", title: "过去30天",
selected: false, selected: false,
searchType: "LAST_THIRTY", searchType: "LAST_THIRTY",
}, },
], ],
originDateList: [
//
{
title: "今天",
selected: false,
searchType: "TODAY",
},
{
title: "昨天",
selected: false,
searchType: "YESTERDAY",
},
{
title: "过去7天",
selected: true,
searchType: "LAST_SEVEN",
},
{
title: "过去30天",
selected: false,
searchType: "LAST_THIRTY",
},
],
shopTotal: "", //
shopsData: [], //
}; };
}, },
mounted() { mounted() {
this.storeId = JSON.parse(Cookies.get("userInfoSeller")).id;
this.getFiveYears(); this.getFiveYears();
this.getShopList();
}, },
methods: { methods: {
//
handleReachBottom() {
setTimeout(() => {
if (this.params.pageNumber * this.params.pageSize <= this.shopTotal) {
this.params.pageNumber++;
this.getShopList();
}
}, 1500);
},
//
getShopList() {
getShopListData(this.params).then((res) => {
if (res.success) {
/**
* 解决数据请求中滚动栏会一直上下跳动
*/
this.shopTotal = res.result.total;
this.shopsData.push(...res.result.records);
}
});
},
//
changeshop(val) {
this.selectedWay.storeId = this.storeId;
this.$emit("selected", this.selectedWay);
},
// 5 // 5
getFiveYears() { getFiveYears() {
let getYear = new Date().getFullYear(); let getYear = new Date().getFullYear();
@ -89,8 +148,9 @@ export default {
} }
this.dates = dates.reverse(); this.dates = dates.reverse();
}, },
// //
changeSelect() { changeSelect(e) {
this.month = e
if (this.month) { if (this.month) {
this.dateList.forEach((res) => { this.dateList.forEach((res) => {
res.selected = false; res.selected = false;
@ -101,33 +161,36 @@ export default {
this.$emit("selected", this.selectedWay); this.$emit("selected", this.selectedWay);
} else { } else {
const current = this.dateList.find(item=>{return item.selected})
const current = this.dateList.find(item => { return item.selected })
this.selectedWay = current this.selectedWay = current
this.clickBreadcrumb(current)
this.$emit("selected", this.selectedWay); this.$emit("selected", this.selectedWay);
} }
}, },
// //
clickBreadcrumb(item) { clickBreadcrumb(item) {
this.dateList.forEach((res) => {
let currentIndex;
this.dateList.forEach((res,index) => {
res.selected = false; res.selected = false;
if(res.title === item.title){
currentIndex = index
}
}); });
item.selected = true; item.selected = true;
item.storeId = this.storeId; item.storeId = this.storeId;
this.month = ""; this.month = "";
const dateList = this.dateList
let currentDate
if (item.searchType == "") { if (item.searchType == "") {
if ( let currentDate = this.originDateList[currentIndex].searchType
dateList.some((date) => { if (currentDate) {
return date.title == item.title; item.searchType = currentDate
})
) {
item.searchType = currentDate.searchType;
} else { } else {
item.searchType = "LAST_SEVEN"; item.searchType = "LAST_SEVEN";
} }
} }
this.selectedWay = item; this.selectedWay = item;
this.selectedWay.year = new Date().getFullYear(); this.selectedWay.year = new Date().getFullYear();
this.selectedWay.month = ""; this.selectedWay.month = "";
@ -141,17 +204,20 @@ export default {
.breadcrumb { .breadcrumb {
display: flex; display: flex;
align-items: center; align-items: center;
> span {
>span {
margin-right: 15px; margin-right: 15px;
cursor: pointer; cursor: pointer;
} }
} }
.active { .active {
color: $theme_color; color: $theme_color;
position: relative; position: relative;
} }
.date-picker {
} .date-picker {}
.active:before { .active:before {
content: ""; content: "";
position: absolute; position: absolute;