Merge remote-tracking branch 'origin/master'
| | |
| | | <el-button type="primary" icon="el-icon-upload2" style="margin-left: 20px;" @click="daochu">导出</el-button> |
| | | </div> |
| | | <template v-if="column.length > 0"> |
| | | <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> |
| | | <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="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) { |
| | | this.column = [] |
| | | this.list = [] |
| | | 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() { |
| | |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | flex: 1; |
| | | width: 69%; |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | } |
| | | .main_table_list1 { |
| | | margin-left: 10px; |
| | | width: 520px; |
| | | width: 30%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | flex-shrink: 0; |
| | |
| | | <el-button type="primary" style="margin-left: 20px;" icon="el-icon-upload2" @click="daochu">导出</el-button> |
| | | </div> |
| | | <template v-if="column.length > 0"> |
| | | <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> |
| | | <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="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) { |
| | | this.column = [] |
| | | this.list = [] |
| | | 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() { |
| | |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | flex: 1; |
| | | width: 69%; |
| | | .title { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | } |
| | | } |
| | | .main_table_list1 { |
| | | margin-left: 10px; |
| | | width: 420px; |
| | | width: 30%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | flex-shrink: 0; |
| | |
| | | minInterval: 1, |
| | | axisLine: { |
| | | show: true, |
| | | }, |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | type: 'value', |
| | | axisLine: { |
| | | show: true |
| | | }, |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | // 四舍五入到最近的整数 |
| | | return Math.round(value); |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | |
| | | const myChart = echarts.init(document.getElementById('echart2')) |
| | | const that = this |
| | | myChart.setOption({ |
| | | dataZoom: [ |
| | | { |
| | | type: 'slider', // 滑动条类型 |
| | | orient: 'vertical', |
| | | left: 'left', |
| | | start: 0, // 起始位置(百分比) |
| | | end: 40, // 结束位置(百分比),控制初始显示范围 |
| | | width: 4, |
| | | dataBackground: { |
| | | areaStyle: { opacity: 0 }, // 设置背景透明 |
| | | lineStyle: { opacity: 0 } // 设置背景透明 |
| | | }, |
| | | moveOnMouseWheel: true, |
| | | }, |
| | | { |
| | | type: 'inside', // 用于监听滚轮事件 |
| | | orient: 'vertical', |
| | | start: 0, |
| | | end: 40, |
| | | minSpan: 40, |
| | | dataBackground: { |
| | | areaStyle: { opacity: 0 } // 设置背景透明 |
| | | }, |
| | | maxSpan: 40, |
| | | zoomLock: true, // 锁定缩放(仅允许平移) |
| | | moveOnMouseWheel: true, // 启用滚轮平移 |
| | | } |
| | | ], |
| | | grid: { |
| | | top: '4%', |
| | | left: '2%', |