Skip to content

C
cloud-platform-ui
Commit 240c8273 authored by jiaorz's avatar jiaorz
Browse files
Options

修改

parent 2fd82290
Show whitespace changes
Inline Side-by-side
Showing with 234 additions and 0 deletions
src/views/financial/vehicleStatistics.vue 0 → 100644
View file @ 240c8273
<template>
<div class="app-container calendar-list-container">
<div class="filter-container">
<el-form ref="queryForm" :model="listQuery" label-width="100px">
<el-row>
<el-col :span="5">
<el-form-item label="统计时间:">
<el-date-picker
v-model="time"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changeTime"
placeholder="请选择统计时间"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="统计方式:" class="wayMsg">
<span
v-for="(item,index) in way"
:key="index"
:class="{active:isactive==item.label}"
@click="changeWay(item)"
>{{item.label}}</span>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="所属公司" prop="startCompanyId">
<el-select
v-model="listQuery.companyId"
filterable
placeholder="请选择"
getAllBranchCompanyChange
>
<el-option :key="undefined" label="无" :value="undefined"></el-option>
<el-option
v-for="item in allBranchCompany"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" v-waves icon="delete" @click="clearSearch">清除搜索</el-button>
<el-button class="filter-item" type="primary" v-waves @click="exportVehicleInfo">导出为Excel</el-button>
<el-table :data="list" border fit highlight-current-row style="width: 100%" v-loading="loading">
<el-table-column align="center" label="时间">
<template scope="scope">
<span v-if="scope.row.countDate">{{scope.row.countDate}}</span>
<span v-else-if="scope.row.weekStartDate">{{scope.row.weekStartDate}} ~ {{scope.row.weekEndDate}}</span>
<span v-else>{{scope.row.countYear}}-{{scope.row.countMonth}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="公司名">
<template scope="scope">
<span>{{scope.row.companyName}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="停靠车辆数量">
<template scope="scope">
<!-- <span>{{scope.row.vehicleNum}}</span>
--> <span v-if="listQuery.type==1">{{scope.row.vehicleNum}}</span>
<span v-if="listQuery.type==2">{{Math.ceil(scope.row.vehicleNum/7)}}</span>
<span v-if="listQuery.type==3">{{Math.ceil(scope.row.vehicleNum/30)}}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
:page-sizes="[10,20,30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
style="margin-top:20px"
></el-pagination>
</div>
</div>
</template>
<script>
import { pageList, vehicleInfoExcel} from 'api/statistics/vehicleStatistics'
import {formatDate} from '../../utils/dateFormattor'
import { getAllCompany } from 'api/base_info/branch_company'
export default {
created() {
this.getList(),
getAllCompany(codeAndBranchCompany => {
this.allBranchCompany = codeAndBranchCompany;
});
},
data() {
return {
loading: false,
total: 0,
list: [],
time: [],
allBranchCompany:[],
// 统计时间筛选
listQuery: {
type: 1,
startTime: null,
endTime: null,
companyId:null,
limit: 10,
page: 1
},
//统计方式筛选
way: [
{
label: '日统计',
id: 1
},
{
label: '周统计',
id: 2
},
{
label: '月统计',
id: 3
}
],
isactive: '日统计'
}
},
methods: {
//统计时间筛选
changeTime() {
!!this.time[0]
? (this.listQuery.startTime = this.time[0])
: (this.listQuery.startTime = null)
!!this.time[1]
? (this.listQuery.endTime = this.time[1])
: (this.listQuery.endTime = null)
if(this.listQuery.startTime && this.listQuery.endTime) {
this.listQuery.startTime = formatDate(this.listQuery.startTime, 'yyyy-MM-dd')
this.listQuery.endTime = formatDate(this.listQuery.endTime, 'yyyy-MM-dd')
}
},
//统计方式筛选
changeWay(val) {
this.isactive = val.label
this.listQuery.type = val.id
this.listQuery.page = 1
this.getList()
},
//导出
exportVehicleInfo() {
vehicleInfoExcel(this.listQuery).then(res => {
const content = res
const blob = new Blob([content])
const fileName = '车辆信息.xlsx'
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName)
}
})
},
handleSizeChange(val) {
this.listQuery.limit = val
this.getList()
},
handleCurrentChange(val) {
this.listQuery.page = val
this.getList()
},
handleFilter() {
this.listQuery.page = 1
this.$refs.queryForm.validate(valid => {
if (valid) {
this.getList()
} else {
return false
}
})
},
clearSearch() {
this.listQuery = {
type: 1,
startTime: null,
endTime: null,
companyId:null,
limit: 10,
page: 1
}
this.time = []
this.isactive = '日统计'
this.getList()
},
//列表
getList() {
this.loading = true
pageList(this.listQuery).then(data => {
if (data.status == 200 && data.data) {
this.total = data.totalCount
this.list = []
this.list = data.data.data
}
setTimeout(() => {
this.loading = false
}, 300)
})
}
}
}
</script>
<style>
.wayMsg span {
margin: 10px;
cursor: pointer;
}
.active {
color: #409eff;
font-weight: bold;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment