zm/nuttyreading-master-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-09-19 17:20:09 +08:00
parent 7fcb6e61ce
commit 9654a1cbbd
8 changed files with 1094 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/views/modules/reportList/FullYearCalendar.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="calendar" style="min-width: 1000px;overflow-x: auto;min-height: 100%;">
<div @click="handleExportAll()" style="position: absolute;left: 280px;top:35px;cursor: pointer;color: #006699;font-size: 14px;"><i class="el-icon-download"></i>下载 {{year}} 年全部报表</div>
<div v-if="allMonthData.length>0" @click="handleExportAll()" style="position: absolute; left: 360px;top:30px;cursor: pointer;color: #006699;font-size: 14px;"><i class="el-icon-download"></i>下载 {{year}} 年全部VIP报表</div>
<el-card class="box-card" v-for="(month, mIndex) in months"
<el-card class="box-card" v-for="(month, mIndex) in allMonthData"
:key="mIndex" >
<div slot="header" class="clearfix" >
<div style="color: #888;font-weight: 700;text-align: center;position: relative;font-size: 20px;">{{ monthNames[mIndex] }} 月 <el-button @click="handleExport(mIndex)" style="float: right; padding: 3px 0;position: absolute;right: 0px;top: -2px;" type="text"><i class="el-icon-download"></i>下载报表</el-button>
<div style="color: #888;font-weight: 700;text-align: center;position: relative;font-size: 20px;">{{ month.month}} 月 <el-button @click="handleExport(Number(month.month))" style="float: right; padding: 3px 0;position: absolute;right: 0px;top: -2px;" type="text"><i class="el-icon-download"></i>下载报表</el-button>
</div>
</div>
<div class="days" style="margin-bottom: 15px;">
@@ -13,14 +13,12 @@
<!-- <div v-for="blank in month.startWeek" :key="'b'+blank" class="day"></div> -->
<div v-for="d in list" :key="d" class="day header" style="margin-bottom: 10px;">{{ d.title }}</div>
<template v-if=" allMonthData[mIndex]&&allMonthData[mIndex].total">
<div v-for="d in list" :key="d" class="day" :style="`${d.val=='currentTanxiao'?'background-color:#ffdddd;color:#d00':''}`">{{
allMonthData[mIndex].total[d.val]
<div v-for="d in list" :key="d" class="day" :style="`${d.val=='currentTanxiao'?'background-color:#11cdba30;color:#d00':''}`">{{
month.total[d.val]
}}</div>
</template>
<div v-else>
-
</div>
<!-- <div
v-for="day in month.days"
@@ -39,19 +37,19 @@
<script>
// 获取当年到当前月的所有月份数组
function getMonths(year) {
const now = new Date()
const currentYear = now.getFullYear()
const currentMonth = now.getMonth() + 1 // 月份从0开始
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1; // 月份从0开始
// 如果是今年，只取到当前月；否则取12个月
const endMonth = (year == currentYear) ? currentMonth-1 : 12
const endMonth = year == currentYear ? currentMonth - 1 : 12;
let months = []
let months = [];
for (let i = 1; i <= endMonth; i++) {
let monthStr = i < 10 ? "0" + i : i // 补零
months.push(`${monthStr}`)
let monthStr = i < 10 ? "0" + i : i; // 补零
months.push(`${monthStr}`);
}
return months
return months;
}
export default {
@@ -65,6 +63,10 @@
marks: {
type: Object,
default: () => ({})
},
urlList: {
type: Object,
default: () => ({})
}
},
data() {
@@ -118,7 +120,7 @@
},
methods: {
async handleExportAll() {
const months = getMonths(this.year) // 例如 ["01","02",...,"09"]
const months = this.allMonthData.map(m => m.month); // 例如 ["01","02",...,"09"]
this.$message({
message: "所有月份的VIP报表正在下载，请耐心等待...",
@@ -130,7 +132,7 @@
// 构造请求数组
const requests = months.map(m => {
return this.$http({
url: this.$http.adornUrl("/master/userVip/exportUserVipLogInfo"),
url: this.$http.adornUrl(this.urlList.export),
method: "post",
data: this.$http.adornData({ date: `${this.year}-${m}` }),
responseType: "blob"
@@ -173,30 +175,30 @@
async handleExport(mIndex) {
console.log('mIndex at line 120:', mIndex)
var filename = `VIP报表_${this.year}年${this.pad(mIndex + 1)}月下载文件.xlsx`;
var filename = `VIP报表_${this.year}年${this.pad(mIndex)}月下载文件.xlsx`;
this.$message({
message: "请耐心等待...",
type: "info",
duration: 6000,
duration: 3000,
showClose: true
});
try {
this.$http({
url: this.$http.adornUrl(
"/master/userVip/exportUserVipLogInfo"
this.urlList.export,
),
method: "post",
data: this.$http.adornData({
date: `${this.year}-${this.pad(mIndex + 1)}`
date: `${this.year}-${this.pad(mIndex)}`
}),
responseType: "blob" // ⚡⚡⚡一定要加上
}).then(res => {
this.$message({
message: "VIP报表文件下载中，下载完成后文件会自动下载，请耐心等待...",
type: "info",
duration: 6000,
showClose: true
});
// this.$message({
// message: "VIP报表文件下载中，下载完成后文件会自动下载，请耐心等待...",
// type: "info",
// duration: 6000,
// showClose: true
// });
const blob = new Blob([res.data], {
type:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
@@ -257,9 +259,9 @@
console.log('months', months)
// 构造请求数组
const requests = months.map(m => {
const monthNum = parseInt(m.split("-")[1]) // 拿到 1,2,3...
const monthNum = m // 拿到 1,2,3...
return this.$http({
url: this.$http.adornUrl("/master/userVip/getUserVipLogInfoTotal"),
url: this.$http.adornUrl(this.urlList.list),
method: "post",
data: this.$http.adornData({ date: `${year}-${m}` })
}).then(res => {
@@ -277,7 +279,17 @@
Promise.all(requests).then(resArr => {
console.log("所有月份结果：", resArr)
loading.close()
this.allMonthData = resArr
this.allMonthData = resArr.filter(
r => r.total !== null && r.total.length !== 0
);
if(this.allMonthData.length==0){
this.$message({
message: "该年无数据",
type: "warning",
duration: 3000,
showClose: true
});
}
if (this.year == new Date().getFullYear()) {
const now = new Date()
const year = now.getFullYear()

364
src/views/modules/reportList/FullYearCalendarCoin.vue Normal file
View File

@@ -0,0 +1,364 @@
<template>
<div class="calendar" style="min-width: 1000px;overflow-x: auto;min-height: 100%;">
<div v-if="allMonthData.length>0" @click="handleExportAll()" style="position: absolute;left: 360px;top:30px;cursor: pointer;color: #006699;font-size: 14px;"><i class="el-icon-download"></i>下载 {{year}} 年全部天医币报表</div>
<el-card class="box-card" v-for="(month, mIndex) in allMonthData"
:key="mIndex" >
<div slot="header" class="clearfix" >
<div style="color: #888;font-weight: 700;text-align: center;position: relative;font-size: 20px;">{{month.month }} 月 <el-button v-if="month&&month.total&&month.total.length>0" @click="handleExport(Number(month.month))" style="float: right; padding: 3px 0;position: absolute;right: 0px;top: -2px;" type="text"><i class="el-icon-download"></i>下载报表</el-button>
</div>
</div>
<div class="days" style="margin-bottom: 15px;"v-if="month&&month.total&&month.total.length>0" :style="{'grid-template-columns':`repeat(${month.total.length&&month.total.length>2?2:month.total.length}, 1fr)`}">
<div v-for="d in month.total" :key="d" class="day header" style="margin-bottom: 10px;text-align:left;">{{ d.type }}
<span style="font-size: 16px;" v-if="d.payType">
<img src="/static/img/oder_chong.png" alt="" style="width: 20px;" v-if="d.payType=='天医币'">
<img src="/static/img/pingguo.png" alt="" style="width: 18px;margin-top: -6px;" v-if="d.payType=='苹果'">
<icon-svg name="weixin" v-if="d.payType=='微信'" style=""></icon-svg>
<icon-svg name="zhifubao" v-if="d.payType=='支付宝'"></icon-svg>
</span>
<div class="day" style="display: inline-block;"> : {{d.amount}}</div>
</div>
<!-- <div
v-for="day in month.days"
:key="day.date"
template
:class="day.color"
>
{{ day.number }}
</div> -->
</div>
<div v-else style="font-size: 20px;color: #888;text-align: center;line-height: 100px;">暂无数据</div>
</el-card>
</div>
</template>
<script>
// 获取当年到当前月的所有月份数组
function getMonths(year) {
const now = new Date()
const currentYear = now.getFullYear()
const currentMonth = now.getMonth() + 1 // 月份从0开始
// 如果是今年，只取到当前月；否则取12个月
const endMonth = (year == currentYear) ? currentMonth-1 : 12
let months = []
for (let i = 1; i <= endMonth; i++) {
let monthStr = i < 10 ? "0" + i : i // 补零
months.push(`${monthStr}`)
}
return months
}
export default {
name: "FullYearCalendar",
props: {
year: {
type: Number,
default: new Date().getFullYear()
},
// 标记数据，例如：{ "2019-01-05": "red", "2019-03-12": "yellow" }
marks: {
type: Object,
default: () => ({})
},
urlList: {
type: Object,
default: () => ({})
}
},
data() {
return {
showCurrentMonth: '',
showCurrentMonthDate: '',
allMonthData: [],
list: [
{title:'收入',val:'fee'} ,
{title:'月摊销',val:'currentTanxiao'},
{title:'已摊销',val:'alreadyTanxiao'},
{title:'剩余摊销',val:'notyetTanxiao'},
],
weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
monthNames: [
"一", "二", "三", "四",
"五", "六", "七", "八",
"九", "十", "十 一", "十 二"
]
};
},
computed: {
// months() {
// let months = [];
// for (let m = 0; m < 12; m++) {
// let firstDay = new Date(this.year, m, 1);
// let lastDay = new Date(this.year, m + 1, 0);
// let daysInMonth = lastDay.getDate();
// let startWeek1 = (firstDay.getDay() + 6) % 7; // 转换为 Mon=0
// let startWeek = (firstDay.getDay() + 6) % 7; // 转换为 Mon=0
// let days = [];
// for (let d = 1; d <= daysInMonth; d++) {
// let dateStr = `${this.year}-${String(m+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
// days.push({
// number: d,
// date: dateStr,
// color: this.marks[dateStr] || ""
// });
// }
// months.push({ startWeek, days });
// }
// return months;
// }
},
async created() {
await this.getMonthsByYear(this.year)
await this.fetchAllMonthData()
},
methods: {
async handleExportAll() {
const months = this.allMonthData.map(m => m.month);
this.$message({
message: "所有月份的天医币报表正在下载，请耐心等待...",
type: "info",
duration: 6000,
showClose: true
});
// 构造请求数组
const requests = months.map(m => {
return this.$http({
url: this.$http.adornUrl(this.urlList.export),
method: "post",
data: this.$http.adornData({ date: `${this.year}-${m}` }),
responseType: "blob"
}).then(res => {
const filename = `天医币报表_${this.year}年${m}月下载文件.xlsx`
const blob = new Blob([res.data], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
})
const link = document.createElement("a")
link.href = window.URL.createObjectURL(blob)
link.download = filename
link.click()
window.URL.revokeObjectURL(link.href)
return { month: m, success: true }
}).catch(() => {
return { month: m, success: false }
})
})
// 等待所有请求完成
const results = await Promise.all(requests)
// 统计成功/失败
const successMonths = results.filter(r => r.success).map(r => r.month)
const failMonths = results.filter(r => !r.success).map(r => r.month)
let message = `报表下载完成：成功 ${successMonths.length} 个`
if (failMonths.length > 0) {
message += `，失败 ${failMonths.length} 个（失败月份: ${failMonths.join("、")}）`
}
this.$message({
message,
type: failMonths.length === 0 ? "success" : "warning",
duration: 5000,
showClose: true
});
},
async handleExport(mIndex) {
console.log('mIndex at line 120:', mIndex)
var filename = `天医币报表_${this.year}年${this.pad(mIndex)}月下载文件.xlsx`;
this.$message({
message: "请耐心等待...",
type: "info",
duration: 3000,
showClose: true
});
try {
this.$http({
url: this.$http.adornUrl(
this.urlList.export,
),
method: "post",
data: this.$http.adornData({
date: `${this.year}-${this.pad(mIndex)}`
}),
responseType: "blob" // ⚡⚡⚡一定要加上
}).then(res => {
// this.$message({
// message: "天医币报表文件下载中，下载完成后文件会自动下载，请耐心等待...",
// type: "info",
// duration: 6000,
// showClose: true
// });
const blob = new Blob([res.data], {
type:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = filename;
link.click();
window.URL.revokeObjectURL(link.href); // 释放内存
this.$message({
message: "天医币报表文件下载完成,请注意查看！",
type: "success",
duration: 3000,
showClose: true
});
});
// const res = await axios.post(
// window.SITE_CONFIG.baseUrl+"/master/userContribution/exportContributionStatQuery",
// {
// current: this.current,
// limit: this.limit
// },
// {
// responseType: "blob" // 关键点：告诉 axios 返回的是二进制文件
// }
// );
} catch (err) {
this.$message.error("文件下载失败!");
// console.error("文件下载失败：", err);
}
},
async init(){
this.showCurrentMonth = ''
this.showCurrentMonthDate = ''
await this.getMonthsByYear(this.year)
await this.fetchAllMonthData()
},
getMonthsByYear(year) {
this.months = getMonths(year)
}
,pad(num) {
return num < 10 ? "0" + num : num
}
,
fetchAllMonthData() {
const loading = this.$loading({
lock: true,
text: "统计中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
const year = this.year
const months = getMonths(year)
console.log('months', months)
// 构造请求数组
const requests = months.map(m => {
const monthNum = m // 拿到 1,2,3...
return this.$http({
url: this.$http.adornUrl(this.urlList.list),
method: "post",
data: this.$http.adornData({ date: `${year}-${m}` })
}).then(res => {
if (res.data && res.data.code === 0) {
return { month: monthNum, total: res.data.total }
} else {
return { month: monthNum, total: null, error: "获取失败" }
}
}).catch(err => {
return { month: monthNum, total: null, error: err.message || "请求出错" }
})
})
// 并发请求
Promise.all(requests).then(resArr => {
console.log("所有月份结果：", resArr)
loading.close()
this.allMonthData = resArr.filter(
r => r.total !== null && r.total.length !== 0
);
if(this.allMonthData.length==0){
this.$message({
message: "该年无数据",
type: "warning",
duration: 3000,
showClose: true
});
}
if (this.year == new Date().getFullYear()) {
const now = new Date()
const year = now.getFullYear()
const month = this.pad(now.getMonth() + 1)
const day = this.pad(now.getDate())
this.showCurrentMonth = now.getMonth() + 1
console.log('this.showCurrentMonth at line 111:', this.showCurrentMonth)
this.showCurrentMonthDate = `${year}-${month}-${day}`
console.log('当前完整日期:', this.showCurrentMonthDate)
}
// resArr 是每个月接口返回结果的数组
}).catch(err => {
console.error("获取所有月份数据失败:", err)
loading.close()
})
}
},
};
</script>
<style scoped>
.calendar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.month {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px;
text-align: center;
}
.month h3 {
margin: 0 0 5px;
font-size: 16px;
}
.days {
display: grid;
grid-template-columns: repeat(4, 1fr);
font-size: 16px;
}
.day {
text-align: center;
padding: 4px;
margin: 2px;
border-radius: 4px;
min-height: 20px;
}
.day.header {
font-weight: bold;
color: #555;
}
.day.red { background: #ffdddd; color: #d00; }
.day.blue { background: #ddeeff; color: #004; }
.day.yellow { background: #fff6cc; color: #665500; }
/deep/ .el-card .el-card__header{
padding: 8px 20px !important;
}
/deep/ .el-card .el-card__body{
padding:10px !important;
}
</style>

439
src/views/modules/reportList/FullYearCalendarEntity.vue Normal file
View File

@@ -0,0 +1,439 @@
<template>
<div
class="calendar"
style="min-width: 1000px;overflow-x: auto;min-height: 100%;"
>
<div v-if="allMonthData.length>0"
@click="handleExportAll()"
style="position: absolute;left: 360px;top:30px;cursor: pointer;color: #006699;font-size: 14px;"
>
<i class="el-icon-download"></i>下载 {{ year }} 年全部实物报表
</div>
<el-card class="box-card" v-for="(month, mIndex) in allMonthData" :key="mIndex">
<div slot="header" class="clearfix">
<div
style="color: #888;font-weight: 700;text-align: center;position: relative;font-size: 20px;"
>
{{ month.month }} 月
<el-button
@click="handleExport(Number(month.month))"
style="float: right; padding: 3px 0;position: absolute;right: 0px;top: -2px;"
type="text"
><i class="el-icon-download"></i>下载报表</el-button
>
</div>
</div>
<div
class="days"
style="margin-bottom: 15px;"
>
<!-- <div v-for="d in weekDays" :key="d" class="day header">{{ d }}</div> -->
<!-- <div v-for="blank in month.startWeek" :key="'b'+blank" class="day"></div> -->
<div
v-for="d in list"
:key="d"
class="day header"
style="margin-bottom: 0px;display: flex;justify-content: center;"
>
<div style="display: flex;align-items: center;">
<img :src="d.icon" alt="" style="width: 20px;" v-if="d.icon" />
<icon-svg
name="weixin"
v-if="d.title == '微信'"
style=""
></icon-svg>
<icon-svg name="zhifubao" v-if="d.title == '支付宝'"></icon-svg>
<span style="margin-left: 10px;"> {{ d.title }}</span>
</div>
</div>
<div
v-for="d in list"
:key="d"
class="day"
:style="
`${
d.val == 'currentTanxiao'
? 'background-color:#ffdddd;color:#d00'
: ''
}`
"
>
<span style="font-size: 14px;color:#888;"
>共计：{{
allMonthData[mIndex].total.filter(
item => item.payType == d.title
)[0].count
}}笔</span
>
<span style="display: block;margin-top: 10px;font-weight: bold;"
>{{
allMonthData[mIndex].total.filter(
item => item.payType == d.title
)[0].totalPrice
}}
</span>
</div>
</div>
</el-card>
</div>
</template>
<script>
// 获取当年到当前月的所有月份数组
function getMonths(year) {
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1; // 月份从0开始
// 如果是今年，只取到当前月；否则取12个月
const endMonth = year == currentYear ? currentMonth - 1 : 12;
let months = [];
for (let i = 1; i <= endMonth; i++) {
let monthStr = i < 10 ? "0" + i : i; // 补零
months.push(`${monthStr}`);
}
return months;
}
export default {
name: "FullYearCalendar",
props: {
year: {
type: Number,
default: new Date().getFullYear()
},
// 标记数据，例如：{ "2019-01-05": "red", "2019-03-12": "yellow" }
marks: {
type: Object,
default: () => ({})
},
urlList: {
type: Object,
default: () => ({})
}
},
data() {
return {
showCurrentMonth: "",
showCurrentMonthDate: "",
allMonthData: [],
list: [
{ title: "微信", val: "totalPrice", icon: "" },
{ title: "支付宝", val: "totalPrice", icon: "" },
{
title: "天医币",
val: "totalPrice",
icon: "/static/img/oder_chong.png"
}
],
weekDays: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
monthNames: [
"一",
"二",
"三",
"四",
"五",
"六",
"七",
"八",
"九",
"十",
"十 一",
"十 二"
]
};
},
computed: {
// months() {
// let months = [];
// for (let m = 0; m < 12; m++) {
// let firstDay = new Date(this.year, m, 1);
// let lastDay = new Date(this.year, m + 1, 0);
// let daysInMonth = lastDay.getDate();
// let startWeek1 = (firstDay.getDay() + 6) % 7; // 转换为 Mon=0
// let startWeek = (firstDay.getDay() + 6) % 7; // 转换为 Mon=0
// let days = [];
// for (let d = 1; d <= daysInMonth; d++) {
// let dateStr = `${this.year}-${String(m+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`;
// days.push({
// number: d,
// date: dateStr,
// color: this.marks[dateStr] || ""
// });
// }
// months.push({ startWeek, days });
// }
// return months;
// }
},
async created() {
await this.getMonthsByYear(this.year);
await this.fetchAllMonthData();
},
methods: {
async handleExportAll() {
const months = this.allMonthData.map(m => m.month); // 例如 ["01","02",...,"09"]
this.$message({
message: "所有月份的实物报表正在下载，请耐心等待...",
type: "info",
duration: 6000,
showClose: true
});
// 构造请求数组
const requests = months.map(m => {
return this.$http({
url: this.$http.adornUrl(this.urlList.export),
method: "post",
data: this.$http.adornData({ date: `${this.year}-${m}` }),
responseType: "blob"
})
.then(res => {
const filename = `实物报表_${this.year}年${m}月下载文件.xlsx`;
const blob = new Blob([res.data], {
type:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = filename;
link.click();
window.URL.revokeObjectURL(link.href);
return { month: m, success: true };
})
.catch(() => {
return { month: m, success: false };
});
});
// 等待所有请求完成
const results = await Promise.all(requests);
// 统计成功/失败
const successMonths = results.filter(r => r.success).map(r => r.month);
const failMonths = results.filter(r => !r.success).map(r => r.month);
let message = `报表下载完成：成功 ${successMonths.length} 个`;
if (failMonths.length > 0) {
message += `，失败 ${failMonths.length} 个（失败月份: ${failMonths.join(
"、"
)}）`;
}
this.$message({
message,
type: failMonths.length === 0 ? "success" : "warning",
duration: 5000,
showClose: true
});
},
async handleExport(mIndex) {
console.log("mIndex at line 120:", mIndex);
var filename = `实物报表_${this.year}年${this.pad(
mIndex
)}月下载文件.xlsx`;
this.$message({
message: "请耐心等待...",
type: "info",
duration: 3000,
showClose: true
});
try {
this.$http({
url: this.$http.adornUrl(this.urlList.export),
method: "post",
data: this.$http.adornData({
date: `${this.year}-${this.pad(mIndex)}`
}),
responseType: "blob" // ⚡⚡⚡一定要加上
}).then(res => {
// this.$message({
// message: "实物报表文件下载中，下载完成后文件会自动下载，请耐心等待...",
// type: "info",
// duration: 6000,
// showClose: true
// });
const blob = new Blob([res.data], {
type:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = filename;
link.click();
window.URL.revokeObjectURL(link.href); // 释放内存
this.$message({
message: "实物报表文件下载完成,请注意查看！",
type: "success",
duration: 3000,
showClose: true
});
});
// const res = await axios.post(
// window.SITE_CONFIG.baseUrl+"/master/userContribution/exportContributionStatQuery",
// {
// current: this.current,
// limit: this.limit
// },
// {
// responseType: "blob" // 关键点：告诉 axios 返回的是二进制文件
// }
// );
} catch (err) {
this.$message.error("文件下载失败!");
// console.error("文件下载失败：", err);
}
},
async init() {
this.showCurrentMonth = "";
this.showCurrentMonthDate = "";
await this.getMonthsByYear(this.year);
await this.fetchAllMonthData();
},
getMonthsByYear(year) {
this.months = getMonths(year);
},
pad(num) {
return num < 10 ? "0" + num : num;
},
fetchAllMonthData() {
const loading = this.$loading({
lock: true,
text: "统计中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
});
const year = this.year;
const months = getMonths(year);
console.log("months", months);
// 构造请求数组
const requests = months.map(m => {
const monthNum = m; // 拿到 1,2,3...
return this.$http({
url: this.$http.adornUrl(this.urlList.list),
method: "post",
data: this.$http.adornData({ date: `${year}-${m}` })
})
.then(res => {
if (res.data && res.data.code === 0) {
return { month: monthNum, total: res.data.total };
} else {
return { month: monthNum, total: null, error: "获取失败" };
}
})
.catch(err => {
return {
month: monthNum,
total: null,
error: err.message || "请求出错"
};
});
});
// 并发请求
Promise.all(requests)
.then(resArr => {
console.log("所有月份结果：", resArr);
loading.close();
this.allMonthData = resArr.filter(
r => r.total !== null && r.total.length !== 0
);
console.log("this.allMonthData at line 295:", this.allMonthData);
if(this.allMonthData.length==0){
this.$message({
message: "该年无数据",
type: "warning",
duration: 3000,
showClose: true
});
}
if (this.year == new Date().getFullYear()) {
const now = new Date();
const year = now.getFullYear();
const month = this.pad(now.getMonth() + 1);
const day = this.pad(now.getDate());
this.showCurrentMonth = now.getMonth() + 1;
console.log(
"this.showCurrentMonth at line 111:",
this.showCurrentMonth
);
this.showCurrentMonthDate = `${year}-${month}-${day}`;
console.log("当前完整日期:", this.showCurrentMonthDate);
}
// resArr 是每个月接口返回结果的数组
})
.catch(err => {
console.error("获取所有月份数据失败:", err);
loading.close();
});
}
}
};
</script>
<style scoped>
.calendar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.month {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 10px;
text-align: center;
}
.month h3 {
margin: 0 0 5px;
font-size: 16px;
}
.days {
display: grid;
grid-template-columns: repeat(3, 1fr);
font-size: 16px;
}
.day {
text-align: center;
padding: 4px;
margin: 2px;
border-radius: 4px;
min-height: 20px;
}
.day.header {
font-weight: bold;
color: #555;
}
.day.red {
background: #ffdddd;
color: #d00;
}
.day.blue {
background: #ddeeff;
color: #004;
}
.day.yellow {
background: #fff6cc;
color: #665500;
}
/deep/ .el-card .el-card__header {
padding: 8px 20px !important;
}
</style>

102
src/views/modules/reportList/coinList.vue Normal file
View File

@@ -0,0 +1,102 @@
<template>
<div class="mod-config" >
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<div class="block">
<el-date-picker
v-model="currentYear"
type="year"
format="yyyy"
value-format="yyyy" :picker-options="pickerOptions"
placeholder="选择年份"
@change="handleYearChange"
/>
</div>
</el-form-item>
<el-button
type="primary"
size="small"
@click="
handleYearChange();
"
>刷新</el-button
>
</el-form>
<FullYearCalendar :urlList="urlList" ref="refCalendar" :year="Number(currentYear)" :marks="markedDates" v-if="currentYear" />
</div>
</template>
<script>
import FullYearCalendar from "./FullYearCalendarCoin.vue";
export default {
data() {
return {
urlList:{
list:'/master/statistics/getTransactionDetailsTotal',
export:'/master/statistics/getTransactionDetailsInfo',
},
currentYear: '',
dataForm:{},
pickerOptions: {
disabledDate(time) {
// 禁用今年以后的年份
return time.getFullYear() > new Date().getFullYear()
}
},
markedDates: {
"2019-01-01": "red",
"2019-02-14": "blue",
"2019-03-12": "yellow",
"2019-05-20": "blue",
"2019-06-10": "yellow"
}
};
},
components: { FullYearCalendar },
activated() {
this.currentYear = new Date().getFullYear().toString();
this.handleYearChange();
},
methods: {
handleYearChange() {
this.$nextTick(() => {
this.$refs.refCalendar.init();
})
},
}
};
</script>
<style scoped>
/deep/ .mod-config .el-table .el-table__cell {
padding: 4px 0 !important;
box-sizing: border-box;
}
/deep/ .mod-config .el-table .cell,
.el-table th div {
padding: 0 !important;
box-sizing: border-box;
}
/deep/ .el-form .el-form-item{
margin-bottom:10px !important;
}
</style>

100
src/views/modules/reportList/entityList.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<div class="mod-config">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<div class="block">
<el-date-picker
v-model="currentYear"
type="year"
format="yyyy"
value-format="yyyy" :picker-options="pickerOptions"
placeholder="选择年份"
@change="handleYearChange"
/>
</div>
</el-form-item>
<el-button
type="primary"
size="small"
@click="
handleYearChange();
"
>刷新</el-button
>
</el-form>
<FullYearCalendar :urlList="urlList" ref="refCalendar" :year="Number(currentYear)" :marks="markedDates" v-if="currentYear" />
</div>
</template>
<script>
import FullYearCalendar from "./FullYearCalendarEntity.vue";
export default {
data() {
return {
urlList:{
list:'/master/statistics/getPhysicalBuyOrderInfoTotal',
export:'/master/statistics/exportPhysicalBuyOrderInfo',
},
currentYear: '',
dataForm:{},
pickerOptions: {
disabledDate(time) {
// 禁用今年以后的年份
return time.getFullYear() > new Date().getFullYear()
}
},
markedDates: {
"2019-01-01": "red",
"2019-02-14": "blue",
"2019-03-12": "yellow",
"2019-05-20": "blue",
"2019-06-10": "yellow"
}
};
},
components: { FullYearCalendar },
activated() {
this.currentYear = new Date().getFullYear().toString();
this.handleYearChange();
},
methods: {
handleYearChange() {
this.$nextTick(() => {
this.$refs.refCalendar.init();
})
},
}
};
</script>
<style scoped>
/deep/ .mod-config .el-table .el-table__cell {
padding: 4px 0 !important;
box-sizing: border-box;
}
/deep/ .mod-config .el-table .cell,
.el-table th div {
padding: 0 !important;
box-sizing: border-box;
}
/deep/ .el-form .el-form-item{
margin-bottom:10px !important;
}
</style>

28
src/views/modules/reportList/vipList.vue
View File

@@ -21,28 +21,18 @@
</el-form-item>
<el-form-item>
<!-- <el-button
<el-button
type="primary"
size="small"
@click="
pageIndex = 1;
getDataList();
handleYearChange();
"
>查询</el-button
> -->
<!-- <el-button
size="small"
plain
v-if="isAuth('book:user:save')"
type="danger"
@click="addOrUpdateHandle()"
>补录人工开通 VIP 记录</el-button
> -->
</el-form-item>
>刷新</el-button
>
</el-form>
<FullYearCalendar ref="refCalendar" :year="Number(currentYear)" :marks="markedDates" v-if="currentYear" />
<FullYearCalendar :urlList="urlList" ref="refCalendar" :year="Number(currentYear)" :marks="markedDates" v-if="currentYear" />
@@ -54,6 +44,10 @@
export default {
data() {
return {
urlList:{
list:'/master/statistics/getUserVipLogInfoTotal',
export:'/master/statistics/exportUserVipLogInfo',
},
currentYear: '',
dataForm:{},
pickerOptions: {

41
src/views/modules/vipList/userList.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="mod-config">
<el-form
:inline="true"
:model="dataForm"
@@ -81,6 +82,7 @@
@click="openVip()"
>开通VIP</el-button
>
<el-checkbox v-model="checked" @change="changeNeedAdd" style="margin-left: 60px;">筛选未录入信息</el-checkbox>
<!-- <el-button
size="small"
plain
@@ -105,7 +107,7 @@
</template>
</el-table-column> -->
<el-table-column
width="120"
width="100"
prop="id"
header-align="center"
align="center"
@@ -144,7 +146,7 @@
</template>
</el-table-column>
<el-table-column
width="260"
width="200"
prop="nickname"
header-align="center"
align="center"
@@ -442,6 +444,7 @@ import OpenVip from "./user-open-vip";
export default {
data() {
return {
checked:false,
dataForm: {
state: ""
},
@@ -495,6 +498,7 @@ export default {
youForm: {},
currentuserInfo: {},
courperList: [],
list: [],
courperHistList: [],
//开通vip
openVipVisible: false
@@ -505,6 +509,26 @@ export default {
this.getDataList();
},
methods: {
changeNeedAdd(){
if(this.checked){
this.pageIndex= 1;
this.pageSize=10;
this. totalPage= 0;
this.total=0;
this.dataForm.state = '';
this.getDataList();
}else{
this.pageIndex= 1;
this.pageSize=10;
this. totalPage= 0;
this.total=0;
this.dataForm.state = '';
this.getDataList();
}
},
getVipPrice(data) {
console.log("data at line 504:", data.userVipLogs);
if (data.userVipLogs && data.userVipLogs.length > 0) {
@@ -597,12 +621,12 @@ if (latest && latest.endTime) {
e.state == 0 ? "#409EFF" : "#f0f0f0"
};" effect="dark">${vipMap[e.type]}</el-tag>
<span style="color: #f94f04;margin-left: 20px;font-weight:700;display:inline-block;min-width:80px;text-align:center"> ${
<span style="color: #f94f04;margin-left: 10px;font-weight:700;display:inline-block;min-width:80px;text-align:center"> ${
this.getVipPrice(e) != null
? `<span style="${e.state == 0?'':'color:#c9bd50'}">￥${this.getVipPrice(e)}</span>${e.state == 0 ? "" : "<span style='color: #888;'> ( 已过期 ) </span>"}`
: '<i class="el-icon-close"></i>'
}</span>
<span style="color: #888;margin-left: 20px;">有效期：${
<span style="color: #888;margin-left: 10px;">有效期：${
e.startTime ? e.startTime : ""
}</span>
<span>~</span>
@@ -617,12 +641,12 @@ if (latest && latest.endTime) {
};display:inline-block;margin-bottom: 6px; padding:0 6px; border-radius: 2px; font-size: 11px; background: ${
e.state == 0 ? "#409EFF" : "#f0f0f0"
}" effect="dark">${vipMap[e.type]}</el-tag>
<span style="color: #f94f04;margin-left: 20px;font-weight:700;display:inline-block;min-width:80px;text-align:center"> ${
<span style="color: #f94f04;margin-left: 10px;font-weight:700;display:inline-block;min-width:80px;text-align:center"> ${
this.getVipPrice(e) != null
? `<span style="${e.state == 0?'':'color:#c9bd50'}">￥${this.getVipPrice(e)}</span>${e.state == 0 ? "" : "<span style='color: #888;'> ( 已过期 ) </span>"}`
: '<i class="el-icon-close"></i>'
}</span>
<span style="color: #888;margin-left: 20px;">有效期：${
<span style="color: #888;margin-left: 10px;">有效期：${
e.startTime ? e.startTime : ""
}</span>
<span>~</span>
@@ -639,12 +663,12 @@ if (latest && latest.endTime) {
}; padding:0 6px; border-radius: 2px; font-size: 11px; " effect="dark">${
vipMap[e.type]
}</el-tag>
<span style="color: #f94f04;margin-left: 20px;font-weight:700;display:inline-block;min-width:80px;text-align:center"> ${
<span style="color: #f94f04;margin-left: 10px;font-weight:700;display:inline-block;min-width:80px;text-align:center"> ${
this.getVipPrice(e) != null
? `<span style="${e.state == 0?'':'color:#c9bd50'}">￥${this.getVipPrice(e)}</span>${e.state == 0 ? "" : "<span style='color: #888;'> ( 已过期 ) </span>"}`
: '<i class="el-icon-close"></i>'
}</span>
<span style="color: #888;margin-left: 20px;">有效期：${
<span style="color: #888;margin-left: 10px;">有效期：${
e.startTime ? e.startTime : ""
}</span>
<span>~</span>
@@ -724,6 +748,7 @@ if (latest && latest.endTime) {
getDataList() {
this.dataListLoading = true;
var data = {
isLog: this.checked?1:'',
current: this.pageIndex,
limit: this.pageSize,
userName: this.dataForm.userName,

BIN
static/img/pingguo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB