add:统计数量

src/checklist.html

@@ -113,7 +113,7 @@
     <div id="app">
         <div class="checklist-container">
             <div>
-                {{ checkData[checkPageIndex].title }} 
+                {{ checkData[checkPageIndex].title }}
             </div>
             <div v-for="(item, index) in checkData[checkPageIndex]['checkList']" :key="item.id" class="check-item">
                 <div class="item-header">
@@ -162,13 +162,8 @@
                         <van-cell-group>
                             <van-cell>文件:<span style="color: red;">(格式png/jpg/jpeg)</span>
                                 <div>
-                                    <van-uploader
-								style="width: 80px; height:80px;"
-                               v-model="item.photos"
-                               :max-count="3"
-                               :after-read="handleFileUpload"
-                               class="uploader-wrapper"
-                           />
+                                    <van-uploader style="width: 80px; height:80px;" v-model="item.photos" :max-count="3"
+                                        :after-read="handleFileUpload" class="uploader-wrapper" />
                                 </div>
                             </van-cell>
                         </van-cell-group>
@@ -179,24 +174,28 @@
                                :after-read="handleFileUpload"
                                class="uploader-wrapper"
                            /> -->
- 
 
-                           <van-cell-group>
-                            <van-cell >
+
+                        <van-cell-group>
+                            <van-cell>
                                 <div>
-                                    <van-field label-align="right" readonly clickable label="整改期限" :value="`${item.deadlineDays}天  截至整改日期：${item.deadlineDate}`"
-                                    @click="showDeadlinePicker = true; currentItem=item" />
+                                    <van-field label-align="right" readonly clickable label="整改期限"
+                                        :value="`${item.deadlineDays}天  截至整改日期：${item.deadlineDate}`"
+                                        @click="showDeadlinePicker = true; currentItem=item" />
                                 </div>
                             </van-cell>
                         </van-cell-group>
-                     
-                        
+
+
                     </div>
                 </div>
             </div>
             <div>
-                <van-button v-show="checkPageIndex<3"  type="primary" size="small" @click="checkPageIndex++">下一页</van-button>
-                <van-button>{{  }}</van-button>
+                <van-button v-show="checkPageIndex<3" type="primary" size="small"
+                    @click="checkPageIndex++">下一页</van-button>
+                <van-button>{{  notNullCount }}/{{totalItems}} {{noCount}}</van-button>
+                   
+                    
             </div>
             <!-- 整改天数选择器 -->
             <van-popup v-model="showDeadlinePicker" position="bottom">
@@ -226,7 +225,7 @@
                         photos: [],
                         deadlineDays: '',
                         deadlineDate: ''
-                    },{
+                    }, {
                         id: 1,
                         title: '检查项目 2',
                         selected: null,
@@ -299,8 +298,32 @@
                         deadlineDate: ''
                     }],
                 },
-                
+
             ]
+
+            function countSelectedNo(result) { // 获取 checkList 中 selected 为 'no' 的对象个数
+                return result.reduce((total, category) => {
+                    return total + category.checkList.filter(item => item.selected === 'no').length;
+                }, 0);
+            }
+            function getTotalCheckListItems(result) { // 获取所有 checkList 子元素的总数
+                return result.reduce((total, category) => {
+                    console.log(category, 'category')
+                    return total + category.checkList.length;
+                }, 0);
+            }
+            function countSelectedNotNull(result) { // 获取 checkList 中 selected 不为 null 的个数
+                return result.reduce((total, category) => {
+                    return total + category.checkList.filter(item => item.selected !== null).length;
+                }, 0);
+            }
+            // 统计各个状态数量
+            // 调用方法
+            const noCount = countSelectedNo(checkData); // selected=no 的个数
+            const totalItems = getTotalCheckListItems(checkData); // checkList 子元素总数
+            const notNullCount = countSelectedNotNull(checkData); // selected 不为 null 的个数
+
+
             // 初始化检查项数据结构
             function createCheckItem(id) {
                 return {
@@ -314,7 +337,10 @@
                     description: '',
                     photos: [],
                     deadlineDays: '',
-                    deadlineDate: ''
+                    deadlineDate: '',
+
+          
+
                 }
             }
 
@@ -325,17 +351,26 @@
                     deadlineOptions: ['1', '3', '5', '7'],
                     currentEditingItem: null,
                     checkList: Array.from({ length: 40 }, (_, i) => createCheckItem(i + 1)),
-                    checkData,
+                    checkData,  // 提交给后端，图片使用vant结构，base64，后端处理，不走爱山东中台。（数据量大！）
                     checkPageIndex: 0,
                     currentItem: null,
+
+                    noCount,
+                    totalItems,
+                    notNullCount,
                 },
-                watch:{
+                watch: {
                     checkData: {
                         handler(newVal) {
                             const snapshot = JSON.parse(JSON.stringify(newVal));
                             // const snapshot = JSON.stringify(newVal);
 
                             console.log('全量变化:', snapshot);
+                            this.noCount = countSelectedNo(newVal); // selected=no 的个数
+                            this.totalItems = getTotalCheckListItems(newVal); // checkList 子元素总数
+                            this.notNullCount = countSelectedNotNull(newVal); // selected 不为 null 的个数
+
+
                         },
                         deep: true
                     },