|  |  |  | 
|---|
|  |  |  | <div class="main_head_title"> | 
|---|
|  |  |  | <span>入园人员统计总览</span> | 
|---|
|  |  |  | <el-radio-group v-model="isGroupBy" size="mini" @change="getData(), getRataLists(), getReportLists()"> | 
|---|
|  |  |  | <el-radio-button :label="0">按车次统计</el-radio-button> | 
|---|
|  |  |  | <el-radio-button :label="1">按车辆统计</el-radio-button> | 
|---|
|  |  |  | <el-radio-button :label="0">按人次统计</el-radio-button> | 
|---|
|  |  |  | <el-radio-button :label="1">按人员统计</el-radio-button> | 
|---|
|  |  |  | </el-radio-group> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="main_head_bottom"> | 
|---|
|  |  |  | 
|---|
|  |  |  | v-model="value" | 
|---|
|  |  |  | :type="dateType" | 
|---|
|  |  |  | size="mini" | 
|---|
|  |  |  | :clearable="false" | 
|---|
|  |  |  | @change="getRataLists()" | 
|---|
|  |  |  | :value-format="dateType === 'month' ? 'yyyy-MM' : 'yyyy'" | 
|---|
|  |  |  | style="margin-left: 20px; width: 130px;" | 
|---|
|  |  |  | placeholder="请选择"> | 
|---|
|  |  |  | </el-date-picker> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div id="echart2" ref="deptRef" v-if="listZB.length > 0"></div> | 
|---|
|  |  |  | <div class="echart2" ref="deptRef" v-if="listZB.length > 0"></div> | 
|---|
|  |  |  | <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" v-else> | 
|---|
|  |  |  | <img style="width: 200px;" src="@/assets/images/default_homeimg.png" alt=""> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-date-picker | 
|---|
|  |  |  | v-model="date1" | 
|---|
|  |  |  | :type="radio" | 
|---|
|  |  |  | :clearable="false" | 
|---|
|  |  |  | size="mini" | 
|---|
|  |  |  | @change="getReportLists()" | 
|---|
|  |  |  | :value-format="radio === 'month' ? 'yyyy-MM' : 'yyyy'" | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="table_box"> | 
|---|
|  |  |  | <div class="list_content" v-for="(item, index) in list" :key="index"> | 
|---|
|  |  |  | <div class="list_head_item">储运科</div> | 
|---|
|  |  |  | <div class="list_head_item">联合工房</div> | 
|---|
|  |  |  | <div class="list_head_item">232</div> | 
|---|
|  |  |  | <div class="list_head_item">储运科</div> | 
|---|
|  |  |  | <div class="list_head_item">联合工房</div> | 
|---|
|  |  |  | <div class="list_head_item">232</div> | 
|---|
|  |  |  | <div class="list_head_item">储运科</div> | 
|---|
|  |  |  | <div class="list_head_item">联合工房</div> | 
|---|
|  |  |  | <div class="list_head_item">232</div> | 
|---|
|  |  |  | <div class="list_head_item">232</div> | 
|---|
|  |  |  | <div class="list_head_item" v-for="(child, i) in item" :key="i">{{child}}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <span>本年人员累计入园统计</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="list_head"> | 
|---|
|  |  |  | <div class="list_head_item">车辆分类</div> | 
|---|
|  |  |  | <div class="list_head_item">入局次数</div> | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | 
|---|
|  |  |  | daochu() { | 
|---|
|  |  |  | reportExportExcel({ dateStr: this.date1, isGroupBy: this.isGroupBy, type: 1 }).then(res => { | 
|---|
|  |  |  | this.download(res) | 
|---|
|  |  |  | console.log(res.data) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeBB() { | 
|---|
|  |  |  | 
|---|
|  |  |  | getReportLists() { | 
|---|
|  |  |  | getReportList({ dateStr: this.date1, isGroupBy: this.isGroupBy, type: 1 }) | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | console.log(res) | 
|---|
|  |  |  | if (res.length === 0) return | 
|---|
|  |  |  |  | 
|---|
|  |  |  | this.column = res.data.map(item => item[0]) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const keys = res.data.map(row => row[0]); // 获取键名 | 
|---|
|  |  |  | const values = res.data.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; | 
|---|
|  |  |  | }, {}); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | this.column = res[0] | 
|---|
|  |  |  | this.list = res.slice(1, res.length); | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeDateType() { | 
|---|
|  |  |  | 
|---|
|  |  |  | getRataLists() { | 
|---|
|  |  |  | getRataList({ dateStr: this.value, isGroupBy: this.isGroupBy, type: 1 }) | 
|---|
|  |  |  | .then(res => { | 
|---|
|  |  |  | console.log(res) | 
|---|
|  |  |  | this.listZB = res | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.initDept() | 
|---|
|  |  |  | 
|---|
|  |  |  | top: '20%', | 
|---|
|  |  |  | containLabel: true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tooltip: { | 
|---|
|  |  |  | trigger: 'item' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | xAxis: { | 
|---|
|  |  |  | type: 'category', | 
|---|
|  |  |  | data: names | 
|---|
|  |  |  | 
|---|
|  |  |  | initDept() { | 
|---|
|  |  |  | if (!this.listZB) return | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const myChart = echarts.init(document.querySelector('#echart2')) | 
|---|
|  |  |  | const myChart = echarts.init(document.querySelector('.echart2')) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let data = this.listZB.map(item => { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let option = { | 
|---|
|  |  |  | tooltip: { | 
|---|
|  |  |  | trigger: 'item' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | legend: { | 
|---|
|  |  |  | show: false, | 
|---|
|  |  |  | orient: 'vertical', | 
|---|
|  |  |  | left: 'left' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | series : [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | name: '访问来源', | 
|---|
|  |  |  | 
|---|
|  |  |  | height: calc(100% - 20px); | 
|---|
|  |  |  | padding-left: 20px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | #echart2 { | 
|---|
|  |  |  | .echart2 { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: calc(100% - 60px); | 
|---|
|  |  |  | } | 
|---|