预算&指标填报

src/views/home/components/budgetCalendar.vue

@@ -11,10 +11,10 @@
             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 }}
+              'has-data': calendar.haveData,
+              'current': calendar.isActive // 本月匹配current样式
+            }" v-for="(calendar, index) in calendarList" :key="index">
+              {{ calendar.name }}
             </div>
           </div>
         </div>
@@ -25,49 +25,35 @@
 
 <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: {  // 接收父组件传递的年月状态对象
+    timeType: {
+      type: String,
+      default: 'month', // 默认月份维度
+    },
+    calendarObj: {  // 接收父组件传递的年月状态对象
       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();
+      calendarList:[],// 日历列表
     }
   },
   watch: {
     // 监听calendarList变化，实时更新monthList的haveData状态
-    calendarList: {
+    // timeType: {
+    //   immediate: true, // 组件挂载时立即执行一次
+    //   deep: true, // 深度监听对象内部属性变化
+    //   handler() {
+    //     this.updateMonthHaveData();
+    //   }
+    // },
+    calendarObj:{
       immediate: true, // 组件挂载时立即执行一次
       deep: true, // 深度监听对象内部属性变化
       handler(newVal) {
@@ -75,28 +61,24 @@ export default {
       }
     }
   },
-  mounted() {
-    // 初始化图表（若需展示图表，需在模板中添加对应 DOM）
-    // this.$nextTick(() => this.updateChart())
-  },
+  mounted() {},
   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;
+      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>
@@ -119,7 +101,6 @@ export default {
   line-height: 42px;
   text-align: center;
   font-style: normal;
-  cursor: pointer; // 鼠标悬浮手型
   transition: all 0.2s ease; // 过渡效果，样式切换更平滑
   border: 2px solid transparent; // 透明边框，避免选中时布局偏移
   margin: 0; // 清除默认外边距，进一步缩小缝隙
@@ -140,5 +121,3 @@ export default {
   border: 2px solid #0B58FF !important;
 }
 </style>
-
-<style></style>