|  |  | 
 |  |  |                     </div> | 
 |  |  |                     <el-button type="primary" icon="el-icon-upload2" style="margin-left: 20px;" @click="daochu">导出</el-button> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="list_head"> | 
 |  |  |                     <div class="list_head_item" v-for="(item, index) in column" :key="index">{{item}}</div> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="table_box"> | 
 |  |  |                     <div class="list_content" v-for="(item, index) in list" :key="index"> | 
 |  |  |                         <div class="list_head_item" v-for="(child, i) in item" :key="i">{{child}}</div> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <template v-if="column.length > 0"> | 
 |  |  |                     <el-table | 
 |  |  |                         style="width: 100%; margin-top: 15px;" | 
 |  |  |                         :data="list" | 
 |  |  |                         header-row-style="background-color: #F7F7F7;" | 
 |  |  |                         border | 
 |  |  |                     > | 
 |  |  |                         <el-table-column :prop="item" :label="item" align="center" :fixed="index === 0 ? true : index === column.length - 1 ? 'right' : false" v-for="(item, index) in column" :key="index"></el-table-column> | 
 |  |  |                     </el-table> | 
 |  |  |                 </template> | 
 |  |  |                 <div class="list_wu" v-else>暂无数据</div> | 
 |  |  |             </div> | 
 |  |  |             <div class="main_table_list1"> | 
 |  |  |                 <div class="title"> | 
 |  |  |                     <span>本年人员累计入园统计</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="list_head"> | 
 |  |  |                     <div class="list_head_item">人员分类</div> | 
 |  |  |                     <div class="list_head_item">入园次数</div> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="table_box"> | 
 |  |  |                     <div class="list_content" v-for="(item, index) in info.yearSortList" :key="index"> | 
 |  |  |                         <div class="list_head_item">{{item.name}}</div> | 
 |  |  |                         <div class="list_head_item">{{item.total}}</div> | 
 |  |  |                     </div> | 
 |  |  |                 </div> | 
 |  |  |                 <el-table | 
 |  |  |                     style="width: 100%; margin-top: 15px;" | 
 |  |  |                     :data="info.yearSortList" | 
 |  |  |                     header-row-style="background-color: #F7F7F7;" | 
 |  |  |                     border | 
 |  |  |                 > | 
 |  |  |                     <el-table-column prop="name" label="人员分类" align="center"></el-table-column> | 
 |  |  |                     <el-table-column prop="total" label="入园次数" align="center"></el-table-column> | 
 |  |  |                 </el-table> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | 
 |  |  |       getReportLists() { | 
 |  |  |         getReportList({ dateStr: this.date1, isGroupBy: this.isGroupBy, type: 1 }) | 
 |  |  |           .then(res => { | 
 |  |  |             if (res.length === 0) return | 
 |  |  |  | 
 |  |  |             this.column = res[0] | 
 |  |  |             this.list = res.slice(1, res.length); | 
 |  |  |  | 
 |  |  |             this.list = res.slice(1).map(row => { | 
 |  |  |               const obj = {}; | 
 |  |  |               this.column.forEach((header, index) => { | 
 |  |  |                 obj[header] = row[index]; | 
 |  |  |               }); | 
 |  |  |               return obj; | 
 |  |  |             }); | 
 |  |  |  | 
 |  |  |             // if (res.length === 0) { | 
 |  |  |             //   this.column = [] | 
 |  |  |             //   this.list = [] | 
 |  |  |             //   return | 
 |  |  |             // } | 
 |  |  |             // | 
 |  |  |             // this.column = res[0] | 
 |  |  |             // this.list = res.slice(1, res.length); | 
 |  |  |           }) | 
 |  |  |       }, | 
 |  |  |       changeDateType() { | 
 |  |  | 
 |  |  |             containLabel: true | 
 |  |  |           }, | 
 |  |  |           tooltip: { | 
 |  |  |             trigger: 'item' | 
 |  |  |             trigger: 'axis', | 
 |  |  |             axisPointer: { | 
 |  |  |               type: 'line' | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           xAxis: { | 
 |  |  |             type: 'category', | 
 |  |  | 
 |  |  |             type: 'value', | 
 |  |  |             axisLine: { | 
 |  |  |               show: true | 
 |  |  |             }, | 
 |  |  |             axisLabel: { | 
 |  |  |               formatter: function (value) { | 
 |  |  |                 // 四舍五入到最近的整数 | 
 |  |  |                 return Math.round(value); | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           graphic: { | 
 |  |  | 
 |  |  |  | 
 |  |  |         let option = { | 
 |  |  |           tooltip: { | 
 |  |  |             trigger: 'item' | 
 |  |  |             trigger: 'item', | 
 |  |  |           }, | 
 |  |  |           legend: { | 
 |  |  |             show: false, | 
 |  |  | 
 |  |  |               labelLine: { | 
 |  |  |                 normal: { | 
 |  |  |                   length: 30, | 
 |  |  |                   length2: 100, | 
 |  |  |                   length2: 70, | 
 |  |  |                 } | 
 |  |  |               }, | 
 |  |  |               label: { | 
 |  |  | 
 |  |  |                 background-color: #ffffff; | 
 |  |  |                 padding: 20px; | 
 |  |  |                 box-sizing: border-box; | 
 |  |  |                 flex: 1; | 
 |  |  |                 width: 69%; | 
 |  |  |                 .title { | 
 |  |  |                     display: flex; | 
 |  |  |                     align-items: center; | 
 |  |  | 
 |  |  |                         font-size: 18px; | 
 |  |  |                         color: #222222; | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |                 .list_wu { | 
 |  |  |                     width: 100%; | 
 |  |  |                     height: 100px; | 
 |  |  |                     line-height: 100px; | 
 |  |  |                     text-align: center; | 
 |  |  |                     font-size: 16px; | 
 |  |  |                     color: #222222; | 
 |  |  |                 } | 
 |  |  |                 .list_head { | 
 |  |  |                     width: 100%; | 
 |  |  | 
 |  |  |             } | 
 |  |  |             .main_table_list1 { | 
 |  |  |                 margin-left: 10px; | 
 |  |  |                 width: 520px; | 
 |  |  |                 width: 30%; | 
 |  |  |                 padding: 20px; | 
 |  |  |                 box-sizing: border-box; | 
 |  |  |                 flex-shrink: 0; | 
 |  |  | 
 |  |  |                     font-size: 18px; | 
 |  |  |                     color: #222222; | 
 |  |  |                 } | 
 |  |  |                 .list_wu { | 
 |  |  |                     width: 100%; | 
 |  |  |                     height: 100px; | 
 |  |  |                     line-height: 100px; | 
 |  |  |                     text-align: center; | 
 |  |  |                     font-size: 16px; | 
 |  |  |                     color: #222222; | 
 |  |  |                 } | 
 |  |  |                 .list_head { | 
 |  |  |                     width: 100%; | 
 |  |  |                     height: 50px; |