124 lines
4.0 KiB
Vue
124 lines
4.0 KiB
Vue
<template>
|
||
<div style="flex: 1">
|
||
<Container name="预算填报日历" icon="cockpitItemIcon" size="calendarBg" topSize="calendarTitleBg">
|
||
<!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
|
||
<div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
|
||
<!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
|
||
<div class="bottom"
|
||
style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 844px;padding: 26px 16px;">
|
||
<!-- 动态生成12个月的容器：优化flex布局，缩小行间距 -->
|
||
<div class="month-list"
|
||
style="display: flex; gap: 16px; flex-wrap: wrap; align-content: flex-start; row-gap: 8px;">
|
||
<!-- 循环生成12个月：通过判断当前月份索引，添加current类 -->
|
||
<div class="monthItem" :class="{
|
||
'has-data': calendar.haveData,
|
||
'current': calendar.isActive // 本月匹配current样式
|
||
}" v-for="(calendar, index) in calendarList" :key="index">
|
||
{{ calendar.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Container from './container.vue'
|
||
export default {
|
||
name: 'ProductionStatus',
|
||
components: { Container },
|
||
// mixins: [resize],
|
||
props: {
|
||
timeType: {
|
||
type: String,
|
||
default: 'month', // 默认月份维度
|
||
},
|
||
calendarObj: { // 接收父组件传递的年月状态对象
|
||
type: Object, // 注意：父组件传递的是对象，不是数组，修正props类型
|
||
default: () => ({}) // 默认空对象，避免报错
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
calendarList:[],// 日历列表
|
||
}
|
||
},
|
||
watch: {
|
||
// 监听calendarList变化，实时更新monthList的haveData状态
|
||
// timeType: {
|
||
// immediate: true, // 组件挂载时立即执行一次
|
||
// deep: true, // 深度监听对象内部属性变化
|
||
// handler() {
|
||
// this.updateMonthHaveData();
|
||
// }
|
||
// },
|
||
calendarObj:{
|
||
immediate: true, // 组件挂载时立即执行一次
|
||
deep: true, // 深度监听对象内部属性变化
|
||
handler(newVal) {
|
||
this.updateMonthHaveData(newVal);
|
||
}
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
// 根据月或者年维度，获取不同的接口，拿到数据，更新左侧日历框
|
||
updateMonthHaveData(calendarObj) {
|
||
if(this.timeType == 'month'){
|
||
const keys = Object.keys(calendarObj);
|
||
this.calendarList = []
|
||
for(let i = 0; i < keys.length; i++) {
|
||
this.calendarList.push({name:i+1+'月',haveData:calendarObj[keys[i]],isActive:i==new Date().getMonth()})
|
||
}
|
||
}else{
|
||
const keys = Object.keys(calendarObj);
|
||
this.calendarList = []
|
||
for(let i = 0; i < keys.length; i++) {
|
||
this.calendarList.push({name:keys[i]+'年',haveData:calendarObj[keys[i]],isActive:keys[i]==new Date().getFullYear()})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
// 月份列表容器（flex布局，自动换行）
|
||
.month-list {
|
||
// 内联样式已优化行间距，此处可留空或补充其他样式
|
||
}
|
||
|
||
// 基础月份样式
|
||
.monthItem {
|
||
width: 164px;
|
||
height: 42px;
|
||
border-radius: 4px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
line-height: 42px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
transition: all 0.2s ease; // 过渡效果，样式切换更平滑
|
||
border: 2px solid transparent; // 透明边框，避免选中时布局偏移
|
||
margin: 0; // 清除默认外边距，进一步缩小缝隙
|
||
}
|
||
|
||
// 有数据的样式（背景色#D1E8FF）
|
||
.monthItem.has-data {
|
||
background-color: #D1E8FF;
|
||
}
|
||
|
||
// 无数据的样式（背景色#EFF3F8，基础样式默认值）
|
||
.monthItem:not(.has-data) {
|
||
background-color: #EFF3F8;
|
||
}
|
||
|
||
// 本月样式（current类，边框2px solid #0B58FF）
|
||
.monthItem.current {
|
||
border: 2px solid #0B58FF !important;
|
||
}
|
||
</style>
|