车辆信息统计

src/api/statistics/vehicleStatistics.js

+import fetch from 'utils/fetch';
+
+//车辆统计信息列表
+export function pageList(params) {
+	return fetch({
+		url: '/vehicle/bg-vehicle/count/getAll',
+		method: 'get',
+		params: params
+	});
+}
+
+//车辆统计信息导出
+export function vehicleInfoExcel(params) {
+	return fetch({
+		url: '/vehicle/bg-vehicle/count/app/unauth/export',
+		method: 'get',
+		params: params,
+		responseType: 'blob'
+	});
+}
\ No newline at end of file

src/router/index.js

@@ -728,7 +728,13 @@ export const asyncRouterMap = [{
       component: _import('statistics/orderStatistics'),
       name: '订单统计',
       authority: 'orderStatistics'
-    }
+    },
+		{
+		      path: 'vehicleStatistics',
+		      component: _import('statistics/vehicleStatistics'),
+		      name: '车辆统计',
+		      authority: 'vehicleStatistics'
+		}
   ]
 }
 ];

src/views/order/modal/rentOrderDetailModal.vue

@@ -59,8 +59,8 @@
 						<span v-else></span>
 					</td>
 					<td>
-						<p>取:{{orderDetailInfo.orderRentVehicleDetail.startTime}}</p>
-						<p>还:{{orderDetailInfo.orderRentVehicleDetail.endTime}}</p>
+						<p>取:{{timestamp(new Date(orderDetailInfo.orderRentVehicleDetail.startTime))}}</p>
+						<p>还:{{timestamp(new Date(orderDetailInfo.orderRentVehicleDetail.endTime))}}</p>
 						<p v-show="orderDetailInfo.orderRentVehicleDetail.dayNum">租借天数{{orderDetailInfo.orderRentVehicleDetail.dayNum}}天</p>
 					</td>
 					<td>{{orderDetailInfo.startCompanyName}}</td>

src/views/statistics/vehicleStatistics.vue

+
+<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>
+					</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>