fix: 🐛 修改统计图已发现的问题
parent
46143beb83
commit
c88c1865e7
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue