mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改

Browse Source
This commit is contained in:
‘937886381’
2026-01-07 16:47:49 +08:00
parent 51e66cf6e1
commit b76f3bfd37
164 changed files with 4179 additions and 2297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/views/home/components/noRouterHeader.vue
View File

@@ -18,17 +18,12 @@
<!-- 时间选择区域：日/月/年按钮 + 日期选择器 -->
<div class="timeType">
<!-- <div class="item" v-for="(item, index) in timeTypes" :key="index" @click="activeTime = index"
:class="{ 'no-skew': activeTime === index }">
<span class="item-text">{{ item.text }}</span>
</div> -->
<div class="dateP">
<div class="label">
<span class="label-text">月份选择</span>
</div>
<el-date-picker v-model="date" type="month" placeholder="请选择月份"
class="custom-date-picker" value-format="yyyy-MM-dd" :clearable="false" style="width: 132px;height: 29px;"
@change="emitTimeRange" />
<el-date-picker v-model="date" type="month" placeholder="请选择月份" class="custom-date-picker"
value-format="timestamp" :clearable="false" style="width: 132px;height: 29px;" @change="emitTimeRange" />
</div>
</div>
</header>
@@ -49,76 +44,65 @@ export default {
},
dateData: {
type: Object,
default: {} // 默认值设为350px
default: () => ({})
},
},
data() {
return {
currentTime: '',
timeTimer: null,
date: undefined, // 存储选择的日期（字符串格式：yyyy-MM-dd/yyyy-MM/yyyy）
date: Date.now(), // 使用当前时间戳作为初始值
activeTime: 1, // 默认月维度（0=日，1=月，2=年）
// timeTypes: [
// { text: '日', pickerType: 'date', placeholder: '选择日期' },
// { text: '月', pickerType: 'month', placeholder: '选择月份' },
// { text: '年', pickerType: 'year', placeholder: '选择年份' }
// ]
}
},
computed: {
// getPickerType() {
// return this.timeTypes[this.activeTime].pickerType;
// },
// getPickerPlaceholder() {
// return this.timeTypes[this.activeTime].placeholder;
// }
},
watch: {
activeTime(newVal, oldVal) {
if (newVal !== oldVal) {
this.date = undefined;
// this.emitTimeRange();
this.date = Date.now();
this.emitTimeRange();
}
},
dateData: {
immediate: true, // 初始化时立即执行
handler(newVal) {
console.log('newVal', newVal);
console.log('dateData 变化:', newVal);
if (newVal && (newVal.startTime || newVal.endTime)) {
// 优先使用 startTime 转换为月份格式
// 优先使用 startTime，如果没有则使用 endTime
const timeStamp = newVal.startTime || newVal.endTime;
if (timeStamp !== 0) {
const monthStr = moment(timeStamp).format('YYYY-MM');
this.date = monthStr; // 赋值给选择器
if (timeStamp && timeStamp !== 0) {
console.log('设置日期选择器时间为:', timeStamp);
this.date = timeStamp; // 直接使用时间戳
}
}
}
}
},
mounted() {
// 初始化默认日期（当前月，格式：yyyy-MM）
// console.log(this.$router);
this.date = moment().format('YYYY-MM');
this.$nextTick(() => this.emitTimeRange());
// 初始化默认日期为当前月份
console.log('初始化日期选择器，当前时间戳:', this.date);
this.$nextTick(() => {
this.emitTimeRange();
});
},
beforeDestroy() {
// 清理定时器
if (this.timeTimer) {
clearInterval(this.timeTimer);
}
},
methods: {
changeFullScreen() {
this.$emit('screenfullChange');
},
handleReturn() {
console.log(this.$router);
this.$router.go(-1);
},
exportPDF() {
this.$emit('exportPDF');
console.log('返回上一页');
if (this.$router) {
this.$router.go(-1);
}
},
/**
* 核心方法：用moment计算时间范围（时间戳格式）
* 日：选择日00:00:00 → 次日00:00:00
* 月：当月1日00:00:00 → 次月1日00:00:00
* 年：当年1月1日00:00:00 → 次年1月1日00:00:00
* 计算时间范围（时间戳格式）
* 固定为月维度：当月1日00:00:00 → 当月最后一天23:59:59
*/
calculateTimeRange() {
// 固定为月维度
@@ -128,99 +112,53 @@ export default {
let endTime = 0;
// 存储目标月份（仅数字，如10、12）
let targetMonth = '';
// 默认当前月份
const defaultMoment = moment();
try {
// 仅处理月份维度：固定使用YYYY-MM格式解析日期
// 使用 this.date（时间戳）创建 moment 对象
let targetMoment = this.date
? moment(this.date, 'YYYY-MM') // 解析传入的月份（如"2025-10"）
: defaultMoment;
? moment(this.date)
: moment(); // 如果 date 无效，使用当前时间
// 验证日期是否有效，无效则使用当前月份兜底
// 验证日期是否有效
if (!targetMoment.isValid()) {
console.warn('无效的月份格式（请使用YYYY-MM），已使用当前月份:', this.date);
targetMoment = defaultMoment;
console.warn('无效的日期，已使用当前月份:', this.date);
targetMoment = moment();
}
// 仅获取月份（数字格式，如10、12；若要两位格式如01、10，使用'MM'）
targetMonth = targetMoment.format('M'); // 'M'是1-12，'MM'是01-12，可按需选择
// 获取月份（数字格式，1-12）
targetMonth = targetMoment.format('M');
console.log('当前选择的月份:', targetMonth);
// 打印仅含月份的结果
console.log('targetMonth', targetMonth);
// 计算当月第一天00:00:00的时间戳
startTime = targetMoment.startOf('month').valueOf();
// 计算当月最后一天23:59:59的时间戳
endTime = targetMoment.endOf('month').valueOf();
// 计算当月第一天00:00:00（去掉毫秒）的毫秒级时间戳
startTime = targetMoment.startOf('month').millisecond(0).valueOf();
// 计算当月最后一天23:59:59（去掉毫秒）的毫秒级时间戳
endTime = targetMoment.endOf('month').millisecond(0).valueOf();
// 【可选】调试输出：查看时间范围详情
// console.log('月份时间范围：', {
// startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
// endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
// startTimeStamp: startTime,
// endTimeStamp: endTime
// });
// 调试输出
console.log('月份时间范围计算结果:', {
startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
startTimeStamp: startTime,
endTimeStamp: endTime,
targetMonth: targetMonth
});
} catch (error) {
console.error('计算月份时间范围时出错：', error);
}
// 返回月份相关的所有信息：时间戳、维度、仅月份值
// 返回月份相关的所有信息：时间戳、维度、月份值
return {
startTime,
endTime,
mode,
targetMonth // 现在仅为月份数字，如"10"
targetMonth
};
},
// calculateTimeRange() {
// let startTime = 0;
// let endTime = 0;
// const mode = 2; // 1=日，2=月，3=年
// const defaultMoment = moment(); // 默认当前时间
// const targetMoment = this.date
// ? moment(this.date, this.getPickerType === 'date' ? 'YYYY-MM-DD' : (this.getPickerType === 'month' ? 'YYYY-MM' : 'YYYY'))
// : defaultMoment;
// // if (!targetMoment.isValid()) {
// // console.error('无效日期:', this.date);
// // return { startTime, endTime, mode };
// // }
// // // 1. 日维度：00:00:00 → 23:59:59（无毫秒）
// // if (this.activeTime === 0) {
// // startTime = targetMoment.startOf('day').millisecond(0).valueOf();
// // endTime = targetMoment.endOf('day').millisecond(0).valueOf();
// // }
// // 2. 月维度：当月1日00:00:00 → 当月最后一天23:59:59（无毫秒）
// // else if (this.activeTime === 1) {
// startTime = targetMoment.startOf('month').millisecond(0).valueOf();
// endTime = targetMoment.endOf('month').millisecond(0).valueOf();
// // }
// // // 3. 年维度：当年1月1日00:00:00 → 当年最后一天23:59:59（无毫秒）
// // else if (this.activeTime === 2) {
// // startTime = targetMoment.startOf('year').millisecond(0).valueOf();
// // endTime = targetMoment.endOf('year').millisecond(0).valueOf();
// // }
// // // 调试输出：验证是否去掉毫秒
// // console.log('时间范围计算结果:', {
// // mode,
// // startTime: moment(startTime * 1000).format('YYYY-MM-DD HH:mm:ss'), // 格式：2025-11-30 00:00:00
// // endTime: moment(endTime * 1000).format('YYYY-MM-DD HH:mm:ss'), // 格式：2025-11-30 23:59:59（无毫秒）
// // startTimeStamp: startTime, // 秒级时间戳（如：1764422400）
// // endTimeStamp: endTime // 秒级时间戳（如：1764508799）
// // });
// return { startTime, endTime, mode };
// },
// 传递时间范围给父组件
emitTimeRange() {
const timeRange = this.calculateTimeRange();
console.log('触发时间范围变化:', timeRange);
this.$emit('timeRangeChange', timeRange);
}
}
@@ -258,7 +196,6 @@ export default {
/* 左侧标题区域 */
.left-content {
margin-top: 11px;
// margin-left: 350px;
height: 55px;
display: flex;
align-items: center;
@@ -347,48 +284,36 @@ export default {
}
/* 右侧全屏按钮区域 */
.right-content {
display: flex;
// flex-direction: column;
margin-top: 12px;
margin-right: 10px;
gap: 21px;
}
.right-content {
display: flex;
margin-top: 12px;
margin-right: 10px;
gap: 21px;
}
// .current-time {
// color: #FFFFFF;
// font-family: PingFangSC, PingFang SC;
// font-weight: 500;
// font-size: 22px;
// line-height: 24px;
// letter-spacing: 1px;
// }
.screen-btn {
width: 26px;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.screen-btn {
width: 26px;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.home-btn {
width: 26px;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.home-btn {
width: 26px;
height: 26px;
// margin-left: 300px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.return-btn {
width: 26px;
height: 26px;
// margin-left: 300px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
.return-btn {
width: 26px;
height: 26px;
color: #00fff0;
font-size: 26px;
padding: 0;
}
}
/* 日期选择器自定义样式 */