126 lines
3.9 KiB
Vue
126 lines
3.9 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="width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 844px;padding: 26px 0px;">
|
||
<!-- 动态生成12个月的容器：优化flex布局，缩小行间距 -->
|
||
<div class="month-list">
|
||
<!-- 循环生成12个月：通过判断当前月份索引，添加current类 -->
|
||
<div class="monthItem" :class="{
|
||
'has-data': month.haveData,
|
||
'current': index === currentMonthIndex // 本月匹配current样式
|
||
}" v-for="(month, index) in list" :key="index">
|
||
{{ month.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Container from './container.vue'
|
||
// import * as echarts from 'echarts'
|
||
// import topItem from './operating-item.vue'
|
||
|
||
export default {
|
||
name: 'ProductionStatus',
|
||
components: { Container },
|
||
// mixins: [resize],
|
||
props: {
|
||
calendarList: { // 接收父组件传递的年月状态对象
|
||
type: Object, // 注意：父组件传递的是对象，不是数组，修正props类型
|
||
default: () => ({}) // 默认空对象，避免报错
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
list:[]
|
||
}
|
||
},
|
||
computed: {
|
||
// 计算属性：获取当前月份对应的索引（0-11，对应1月-12月）
|
||
currentMonthIndex() {
|
||
// new Date().getMonth() 返回 0(1月) - 11(12月)，正好匹配monthList索引
|
||
return new Date().getMonth();
|
||
}
|
||
},
|
||
watch: {
|
||
// 监听calendarList变化，实时更新monthList的haveData状态
|
||
calendarList: {
|
||
immediate: true, // 组件挂载时立即执行一次
|
||
deep: true, // 深度监听对象内部属性变化
|
||
handler(newVal) {
|
||
this.updateMonthHaveData(newVal);
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化图表（若需展示图表，需在模板中添加对应 DOM）
|
||
// this.$nextTick(() => this.updateChart())
|
||
},
|
||
methods: {
|
||
// 根据calendarList更新monthList的haveData状态
|
||
updateMonthHaveData(calendarObj) {
|
||
if (!calendarObj || typeof calendarObj !== 'object') return;
|
||
const keys = Object.keys(calendarObj);
|
||
if(keys.length == 0){
|
||
return
|
||
}
|
||
console.log('calendarObj',calendarObj)
|
||
this.list = []
|
||
for(let i = 0; i < keys.length; i++) {
|
||
this.list.push({name:i+1+'月',haveData:calendarObj[keys[i]],isActive:i==new Date().getMonth()})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
// 月份列表容器（flex布局，自动换行）
|
||
.month-list {
|
||
// 内联样式已优化行间距，此处可留空或补充其他样式
|
||
}
|
||
|
||
// 基础月份样式
|
||
.monthItem {
|
||
width: 100px;
|
||
height: 57px;
|
||
border-radius: 4px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20px;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
line-height: 57px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
cursor: pointer; // 鼠标悬浮手型
|
||
transition: all 0.2s ease; // 过渡效果，样式切换更平滑
|
||
border: 2px solid transparent; // 透明边框，避免选中时布局偏移
|
||
margin: 0 auto 10px; // 清除默认外边距，进一步缩小缝隙
|
||
}
|
||
|
||
// 有数据的样式（背景色#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>
|
||
|
||
<style></style>
|