|  |  | 
 |  |  |                         :clearable="false" | 
 |  |  |                         @change="getRataLists()" | 
 |  |  |                         :value-format="dateType === 'month' ? 'yyyy-MM' : 'yyyy'" | 
 |  |  |                         style="margin-left: 20px; width: 130px;" | 
 |  |  |                         style="margin-left: 10px; width: 120px;" | 
 |  |  |                         placeholder="请选择"> | 
 |  |  |                     </el-date-picker> | 
 |  |  |                 </div> | 
 |  |  | 
 |  |  |                             :clearable="false" | 
 |  |  |                             @change="getReportLists()" | 
 |  |  |                             :value-format="radio === 'month' ? 'yyyy-MM' : 'yyyy'" | 
 |  |  |                             style="margin-left: 20px; width: 130px;" | 
 |  |  |                             style="margin-left: 10px; width: 120px;" | 
 |  |  |                             placeholder="请选择"> | 
 |  |  |                         </el-date-picker> | 
 |  |  |                     </div> | 
 |  |  |                     <el-button type="primary" style="margin-left: 20px;" icon="el-icon-upload2" @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: 0 }) | 
 |  |  |             .then(res => { | 
 |  |  |               if (res.length === 0) return | 
 |  |  |  | 
 |  |  |               this.column = res[0] | 
 |  |  |               this.list = res.slice(1, res.length); | 
 |  |  |  | 
 |  |  |               console.log(res) | 
 |  |  |               this.list = res.slice(1).map(row => { | 
 |  |  |                 const obj = {}; | 
 |  |  |                 this.column.forEach((header, index) => { | 
 |  |  |                   obj[header] = row[index]; | 
 |  |  |                 }); | 
 |  |  |                 return obj; | 
 |  |  |               }); | 
 |  |  |               // const keys = res.map(row => row[0]); // 获取键名 | 
 |  |  |               // const values = res.map(row => row.slice(1, row.length)); // 获取值 | 
 |  |  |               // | 
 |  |  |               // this.list = values[0].map((_, index) => { | 
 |  |  |               //   return keys.reduce((obj, key, i) => { | 
 |  |  |               //     obj[key] = values[i][index]; | 
 |  |  |               //     return obj; | 
 |  |  |               //   }, {}); | 
 |  |  |               // }); | 
 |  |  |  | 
 |  |  |               console.log(this.column) | 
 |  |  |               console.log(this.list) | 
 |  |  |  | 
 |  |  |               // if (res.length === 0) { | 
 |  |  |               //   this.column = [] | 
 |  |  |               //   this.list = [] | 
 |  |  |               //   return | 
 |  |  |               // } | 
 |  |  |               // | 
 |  |  |               // this.column = res[0] | 
 |  |  |               // this.list = res.slice(1, res.length); | 
 |  |  |               // | 
 |  |  |               // console.log(res) | 
 |  |  |             }) | 
 |  |  |       }, | 
 |  |  |       changeDateType() { | 
 |  |  | 
 |  |  |  | 
 |  |  |         let option = { | 
 |  |  |           tooltip: { | 
 |  |  |             trigger: 'item' | 
 |  |  |             trigger: 'axis', | 
 |  |  |             axisPointer: { | 
 |  |  |               type: 'line' | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           legend: { | 
 |  |  |             show: false, | 
 |  |  | 
 |  |  |             type: 'value', | 
 |  |  |             axisLine: { | 
 |  |  |               show: true | 
 |  |  |             }, | 
 |  |  |             axisLabel: { | 
 |  |  |               formatter: function (value) { | 
 |  |  |                 // 四舍五入到最近的整数 | 
 |  |  |                 return Math.round(value); | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           series: [ | 
 |  |  | 
 |  |  |               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; | 
 |  |  | 
 |  |  |                 .title { | 
 |  |  |                     font-weight: 500; | 
 |  |  |                     font-size: 18px; | 
 |  |  |                     color: #222222; | 
 |  |  |                 } | 
 |  |  |                 .list_wu { | 
 |  |  |                     width: 100%; | 
 |  |  |                     height: 100px; | 
 |  |  |                     line-height: 100px; | 
 |  |  |                     text-align: center; | 
 |  |  |                     font-size: 16px; | 
 |  |  |                     color: #222222; | 
 |  |  |                 } | 
 |  |  |                 .list_head { | 
 |  |  | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             .dept_wrap { | 
 |  |  |                 width: 520px; | 
 |  |  |                 width: 420px; | 
 |  |  |                 flex-shrink: 0; | 
 |  |  |                 height: 100%; | 
 |  |  |                 background-color: #ffffff; |