修改

src/views/home/components/budgetCalendar.vue

@@ -0,0 +1,144 @@
+<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': month.haveData,
+              'current': index === currentMonthIndex // 本月匹配current样式
+            }" v-for="(month, index) in monthList" :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,
+      // 初始化12个月的列表，可根据实际需求修改haveData默认值
+      monthList: [
+        { name: '1月', haveData: false, isActive: false },
+        { name: '2月', haveData: false, isActive: false },
+        { name: '3月', haveData: false, isActive: false },
+        { name: '4月', haveData: false, isActive: false },
+        { name: '5月', haveData: false, isActive: false },
+        { name: '6月', haveData: false, isActive: false },
+        { name: '7月', haveData: false, isActive: false },
+        { name: '8月', haveData: false, isActive: false },
+        { name: '9月', haveData: false, isActive: false },
+        { name: '10月', haveData: false, isActive: false },
+        { name: '11月', haveData: false, isActive: false },
+        { name: '12月', haveData: false, isActive: false }
+      ],
+    }
+  },
+  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;
+
+      // 遍历12个月，匹配对应年月
+      this.monthList.forEach((month, index) => {
+        // 获取月份数字（索引+1，补两位，如1→01，10→10）
+        const monthNum = (index + 1).toString().padStart(2, '0');
+        // 拼接成calendarList中的键格式（如2025-01）
+        const yearMonthKey = `2025-${monthNum}`; // 若年份不固定，可改为props传递年份
+
+        // 判断calendarObj中该键对应的值：1→true，0→false，无该键则保持默认false
+        if (calendarObj.hasOwnProperty(yearMonthKey)) {
+          month.haveData = calendarObj[yearMonthKey] === 1;
+        }
+      });
+    },
+  }
+}
+</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;
+  cursor: pointer; // 鼠标悬浮手型
+  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>
+
+<style></style>