|  |  |  | 
|---|
|  |  |  | :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; | 
|---|