| src/view/car-manage/components/detailModal.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/car-manage/detail.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/car-manage/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/view/car-manage/service.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/view/car-manage/components/detailModal.vue
@@ -2,35 +2,35 @@ <div> <el-dialog title="车辆基础信息" :visible.sync="dialogVisible" width="80%" :modal-append-to-body="false"> <el-descriptions title="" :column="3"> <el-descriptions-item label="公司名称">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车牌号码">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆颜色">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="核定载客位">14725836902</el-descriptions-item> <el-descriptions-item label="车辆厂牌">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车辆型号">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆类型">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="所属车主">14725836902</el-descriptions-item> <el-descriptions-item label="车身颜色">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="发动机号">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆VIN码">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="车辆注册日期">14725836902</el-descriptions-item> <el-descriptions-item label="车辆燃料类型">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="发动机排量">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆运输证发证机构">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="车辆经营区域">14725836902</el-descriptions-item> <el-descriptions-item label="运输证字号">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车辆运输证有效期起">91510922769973987B</el-descriptions-item> <el-descriptions-item label="车辆运输证有效期止">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="车辆初次登记日期">14725836902</el-descriptions-item> <el-descriptions-item label="车辆检修状态">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="车辆年度审验状态">91510922769973987B</el-descriptions-item> <el-descriptions-item label="卫星定位装置品牌">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="卫星定位装置型号">14725836902</el-descriptions-item> <el-descriptions-item label="卫星定位装置IMEI号">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="卫星定位设备安装日期">91510922769973987B</el-descriptions-item> <el-descriptions-item label="注册日期">四川省遂宁市射洪市太和街道万洪二路33、35、37号</el-descriptions-item> <el-descriptions-item label="营运类型">14725836902</el-descriptions-item> <el-descriptions-item label="运价类型编码">射洪洪达出租车有限公司</el-descriptions-item> <el-descriptions-item label="公司名称">{{detail.enterpriseName}}</el-descriptions-item> <el-descriptions-item label="车牌号码">{{detail.vehicleNumber}}</el-descriptions-item> <el-descriptions-item label="车牌颜色">{{detail.licensePlateColor}}</el-descriptions-item> <el-descriptions-item label="核定载客位">{{detail.passengerCapacity}}</el-descriptions-item> <el-descriptions-item label="车辆厂牌">{{detail.brand}}</el-descriptions-item> <el-descriptions-item label="车辆型号">{{detail.brandModel}}</el-descriptions-item> <el-descriptions-item label="车辆类型">{{detail.vehicleType}}</el-descriptions-item> <el-descriptions-item label="所属车主">{{detail.driverName}}</el-descriptions-item> <el-descriptions-item label="车身颜色">{{detail.vehicleColor}}</el-descriptions-item> <el-descriptions-item label="发动机号">{{detail.engineNumber}}</el-descriptions-item> <el-descriptions-item label="车辆VIN码">{{detail.vin}}</el-descriptions-item> <el-descriptions-item label="车辆注册日期">{{detail.registrationDate}}</el-descriptions-item> <el-descriptions-item label="车辆燃料类型">{{detail.fuelType}}</el-descriptions-item> <el-descriptions-item label="发动机排量">{{detail.engineCapacity}}</el-descriptions-item> <el-descriptions-item label="车辆运输证发证机构">{{detail.transportLicenseIssuingAuthority}}</el-descriptions-item> <el-descriptions-item label="车辆经营区域">{{detail.operatingArea}}</el-descriptions-item> <el-descriptions-item label="运输证字号">{{detail.transportCertificateNumber}}</el-descriptions-item> <el-descriptions-item label="车辆运输证有效期起">{{detail.transportCertificateStart}}</el-descriptions-item> <el-descriptions-item label="车辆运输证有效期止">{{detail.transportCertificateEnd}}</el-descriptions-item> <el-descriptions-item label="车辆初次登记日期">{{detail.initialRegistrationTime}}</el-descriptions-item> <el-descriptions-item label="车辆检修状态">{{detail.vehicleMaintenanceStatus}}</el-descriptions-item> <el-descriptions-item label="车辆年度审验状态">{{detail.annualReviewStatus}}</el-descriptions-item> <el-descriptions-item label="卫星定位装置品牌">{{detail.gpsBrand}}</el-descriptions-item> <el-descriptions-item label="卫星定位装置型号">{{detail.gpsModel}}</el-descriptions-item> <el-descriptions-item label="卫星定位装置IMEI号">{{detail.gpsImei}}</el-descriptions-item> <el-descriptions-item label="卫星定位设备安装日期">{{detail.gpsInstallationDate}}</el-descriptions-item> <el-descriptions-item label="注册日期">{{detail.registrationDate}}</el-descriptions-item> <el-descriptions-item label="营运类型">{{detail.operateType}}</el-descriptions-item> <el-descriptions-item label="运价类型编码">{{detail.rateTypeNumber}}</el-descriptions-item> </el-descriptions> </el-dialog> </div> @@ -39,7 +39,12 @@ <script> export default { components: {}, props: {}, props: { detail: { type: Object, default: () => { } } }, data() { return { dialogVisible: false src/view/car-manage/detail.vue
@@ -3,23 +3,23 @@ <div class="info-content flex"> <div class="info-left flex3 flex"> <div class="info-back flex shrink0"> <span class="back-size"><i class="el-icon-back"></i>返回</span> <span class="back-size" @click="$router.back()"><i class="el-icon-back"></i>返回</span> </div> <div class="info-content-left ml--100"> <el-descriptions :column="2"> <el-descriptions-item label="公司名称">kooriookami</el-descriptions-item> <el-descriptions-item label="车牌号码">18100000000</el-descriptions-item> <el-descriptions-item label="车牌颜色">苏州市</el-descriptions-item> <el-descriptions-item label="车辆营运类型">kooriookami</el-descriptions-item> <el-descriptions-item label="所属车主">18100000000</el-descriptions-item> <el-descriptions-item label="联系电话">苏州市</el-descriptions-item> <el-descriptions-item label="经营区域">kooriookami</el-descriptions-item> <el-descriptions-item label="车辆年度审验">18100000000</el-descriptions-item> <el-descriptions-item label="驾驶证"> <img class="img-size" src="../../assets/homeImg/img1.png"></img> <el-descriptions-item label="公司名称">{{detail.enterpriseName}}</el-descriptions-item> <el-descriptions-item label="车牌号码">{{detail.vehicleNumber}}</el-descriptions-item> <el-descriptions-item label="车牌颜色">{{detail.licensePlateColor}}</el-descriptions-item> <el-descriptions-item label="车辆营运类型">{{detail.operateType}}</el-descriptions-item> <el-descriptions-item label="所属车主">{{detail.driverName}}</el-descriptions-item> <el-descriptions-item label="联系电话">{{detail.driverPhone}}</el-descriptions-item> <el-descriptions-item label="经营区域">{{detail.operatingArea}}</el-descriptions-item> <el-descriptions-item label="车辆年度审验">{{detail.annualReviewStatus}}</el-descriptions-item> <el-descriptions-item label="驾驶证" v-if="detail.drivingLicense"> <img class="img-size" :src="detail.drivingLicense"></img> </el-descriptions-item> <el-descriptions-item label="行驶证"> <img class="img-size" src="../../assets/homeImg/img2.png"></img> <el-descriptions-item label="行驶证" v-if="detail.travelLicense"> <img class="img-size" :src="detail.travelLicense"></img> </el-descriptions-item> </el-descriptions> <div class="info-btn" @click="showDetail"> @@ -57,7 +57,7 @@ <div class="pagination-box relative mt--23 flex j-end"> <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" background @current-change="handleCurrentChange" :current-page="searchForm.pageCurr" background layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total"> </el-pagination> </div> @@ -88,7 +88,7 @@ <div class="pagination-box relative mt--23 flex j-end"> <el-pagination :popper-append-to-body="false" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" background @current-change="handleCurrentChange" :current-page="searchForm.pageCurr" background layout="total,sizes,prev, pager, next,jumper" :total="searchForm.total"> </el-pagination> </div> @@ -100,12 +100,10 @@ <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="选择轨迹时间范围:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-date-picker v-model="searchForm.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" > <el-date-picker v-model="searchForm.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"> </el-date-picker> </el-form-item> </el-form> </div> <div class="form-right shrink0 mr--24 mb--23"> @@ -120,13 +118,15 @@ </el-tab-pane> </el-tabs> </div> <DetailModal ref="detailModal" /> <DetailModal ref="detailModal" :detail="detail" /> </div> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; import DetailModal from "./components/detailModal.vue"; import { getCarDetail,getCarOrder,getCarWarning,getCarTrack } from './service' export default { name: "detail", components: { DetailModal }, @@ -135,28 +135,63 @@ id: '', tableData: [], searchForm: { date: '', type: '', level: '', name: '', total: 40, page: 1, pageSize: 10 pageCurr: 1, pageSize: 10, total: 0 }, activeName: 'first' detail:{}, activeName: 'first', routeList:[], } }, mounted() { this.initMap(); if(this.$route.query.id){ getCarDetail({id: this.$route.query.id}).then(res => { this.detail = res; this.getList(res.vehicleNumber); }) } }, methods: { handleClick(){ handleClick(e) { this.activeName = e.name if(e.name != 'third'){ this.searchForm = { pageCurr: 1, pageSize: 10, total: 0, } this.getList(this.detail.vehicleNumber) }else{ getCarTrack({...this.searchForm,vehicleNumber:this.detail.vehicleNumber}).then(res => { this.routeList = res; if(res.length > 0){ this.initMap(); } }) } }, search() { }, search(){}, reset() { }, getList(vehicleNumber) { if(this.activeName == 'first'){ getCarOrder({...this.searchForm,vehicleNumber:vehicleNumber}).then(res => { this.tableData = res.records; this.searchForm.total = res.total; }) }else{ getCarWarning({...this.searchForm,vehicleNumber:vehicleNumber}).then(res => { this.tableData = res.records; this.searchForm.total = res.total; }) } }, showDetail() { this.$refs.detailModal.dialogVisible = true }, @@ -177,12 +212,17 @@ zoom: 15, }); this.map.addControl(new AMap.ToolBar()); let path = [ new AMap.LngLat(105.57, 30.51), new AMap.LngLat(116.382122, 39.901176), new AMap.LngLat(116.387271, 39.912501), new AMap.LngLat(116.398258, 39.9046), // new AMap.LngLat(105.57, 30.51), // new AMap.LngLat(116.382122, 39.901176), // new AMap.LngLat(116.387271, 39.912501), // new AMap.LngLat(116.398258, 39.9046), ] this.routeList.forEach(item => { path.push(new AMap.LngLat(item.longitude, item.latitude)) }) const content = `<div class="custom-content-marker"> <img src="${require("@/assets/logo.png")}"> </div>`; src/view/car-manage/index.vue
@@ -3,45 +3,44 @@ <div class="form flex j-between mt--23" style="align-items: end;"> <div class="form-left ml--30"> <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="车辆号牌:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item label="车辆号:" prop="carNumber" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.carNumber" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="公司名称:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item label="公司名称:" prop="companyName" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.companyName" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="所属车主:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item label="所属车主:" prop="ownerName" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.ownerName" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="车辆颜色:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item label="车辆颜色:" prop="carColor" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.carColor" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="车辆经营区域:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item label="车辆经营区域:" prop="operationArea" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.operationArea" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="车辆型号:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item label="车辆型号:" prop="carModel" class="unset_m" style="margin-right: 15px;"> <el-input v-model="searchForm.carModel" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="车辆型号:" prop="level" class="unset_m" style="margin-right: 15px;"> <el-form-item prop="level" style="margin-right: unset !important;"> <el-input class="w--90" v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item label="核定载客位:" prop="startNum" class="unset_m" style="margin-right: 15px;"> <el-form-item prop="startNum" style="margin-right: unset !important;"> <el-input class="w--90" v-model="searchForm.startNum" placeholder="请输入最小值"></el-input> </el-form-item> <span class="mr--5 ml--5">-</span> <el-form-item prop="level" class="unset_m"> <el-input class="w--90" v-model="searchForm.level" placeholder="请输入"></el-input> <el-form-item prop="endNum" class="unset_m"> <el-input class="w--90" v-model="searchForm.endNum" placeholder="请输入最大值"></el-input> </el-form-item> </el-form-item> <el-form-item label="车辆运营类型:" prop="type" class="unset_m" style="margin-right: 15px;"> <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择"> <el-option label="全部" value=""></el-option> <el-option label="预警" value="1"></el-option> <el-option label="报警" value="2"></el-option> <el-form-item label="车辆运营类型:" prop="operationType" class="unset_m" style="margin-right: 15px;"> <el-select :popper-append-to-body="false" v-model="searchForm.operationType" placeholder="请选择"> <el-option v-for="(item,index) in options" :key="index" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item label="车辆运营状态:" prop="type" class="unset_m" style="margin-right: 15px;"> <el-select :popper-append-to-body="false" v-model="searchForm.type" placeholder="请选择"> <el-option label="全部" value=""></el-option> <el-option label="预警" value="1"></el-option> <el-option label="报警" value="2"></el-option> <el-form-item label="车辆状态:" prop="carStatus" class="unset_m" style="margin-right: 15px;"> <el-select :popper-append-to-body="false" v-model="searchForm.carStatus" placeholder="请选择"> <el-option label="在线" value="1"></el-option> <el-option label="异常" value="2"></el-option> <el-option label="离线" value="3"></el-option> <el-option label="故障" value="4"></el-option> </el-select> </el-form-item> </el-form> @@ -59,19 +58,27 @@ </div> <div class="table-box ml--30 mt--23 mr--30"> <el-table :data="tableData" border stripe style="width: 100%"> <el-table-column prop="date" label="序号"></el-table-column> <el-table-column prop="name" label="车牌号"></el-table-column> <el-table-column prop="name" label="车辆颜色"></el-table-column> <el-table-column prop="name" label="车辆所属公司"></el-table-column> <el-table-column prop="name" label="核定载客位"></el-table-column> <el-table-column prop="name" label="车辆型号"></el-table-column> <el-table-column prop="name" label="车辆类型"></el-table-column> <el-table-column prop="name" label="车主"></el-table-column> <el-table-column prop="name" label="车身颜色"></el-table-column> <el-table-column prop="name" label="车辆注册日期"></el-table-column> <el-table-column prop="name" label="车辆经营区域"></el-table-column> <el-table-column prop="name" label="车辆运营类型"></el-table-column> <el-table-column prop="name" label="操作"> <el-table-column type="index" label="序号" width="60"></el-table-column> <el-table-column prop="vehicleNumber" label="车牌号"></el-table-column> <el-table-column prop="licensePlateColor" label="车辆颜色"></el-table-column> <el-table-column prop="enterpriseName" label="车辆所属公司"></el-table-column> <el-table-column prop="passengerCapacity" label="核定载客位"></el-table-column> <el-table-column prop="brandModel" label="车辆型号"></el-table-column> <el-table-column prop="vehicleType" label="车辆类型"></el-table-column> <el-table-column prop="driverName" label="车主"></el-table-column> <el-table-column prop="vehicleColor" label="车身颜色"></el-table-column> <el-table-column prop="registrationDate" label="车辆注册日期"></el-table-column> <el-table-column prop="operatingArea" label="车辆经营区域"></el-table-column> <el-table-column prop="operateType" label="车辆运营类型"></el-table-column> <el-table-column prop="status" label="车辆状态"> <template slot-scope="scope"> <el-tag v-if="scope.row.status == 1" type="success">在线</el-tag> <el-tag v-if="scope.row.status == 2" type="warning">异常</el-tag> <el-tag v-if="scope.row.status == 4" type="warning">故障</el-tag> <el-tag v-if="scope.row.status == 3" type="info">离线</el-tag> </template> </el-table-column> <el-table-column label="操作" width="100"> <template slot-scope="scope"> <el-button type="text" @click="handle(scope.$index, scope.row)">详情</el-button> </template> @@ -85,44 +92,89 @@ </el-pagination> </div> </div> </div> </template> <script> import { getCarList,getCarType } from './service' import { search } from 'core-js/fn/symbol'; export default { data() { return { searchForm: { date: '', type: '', level: '', name: '', total: 40, page: 1, carNumber: '', // 车辆号 companyName: '', // 公司名称 ownerName: '', // 所属车主 carColor: '', // 车辆颜色 operationArea: '', // 车辆经营区域 carModel: '', // 车辆型号 startNum: '', // 核定载客位最小值 endNum: '', // 核定载客位最大值 operationType: '', // 车辆运营类型 carStatus: '', // 车辆状态 total: 0, pageCurr: 1, pageSize: 10 }, options:[], tableData: [], }; }, created() { getCarType().then(res => { this.options = res; }); this.getList(); }, methods: { reset() { this.searchForm = { carNumber: '', companyName: '', ownerName: '', carColor: '', operationArea: '', carModel: '', minSeats: '', maxSeats: '', operationType: '', carStatus: '', total: 0, pageCurr: 1, pageSize: 10 }; this.getList(); }, search() { this.searchForm.pageCurr = 1; this.getList(); }, async getList() { try { const res = await getCarList({...this.searchForm}); this.tableData = res.records || []; this.searchForm.total = res.total || 0; } catch (error) { console.error('获取车辆列表失败:', error); } }, exportExcell() { // TODO: 实现导出功能 }, handleSizeChange(e) { this.searchForm.pageSize = e this.searchForm.pageSize = e; this.getList(); }, handleCurrentChange(e) { this.searchForm.page = e this.searchForm.pageCurr = e; this.getList(); }, handle(index, row) { // TODO: 实现详情查看功能 console.log('查看详情:', row); this.$router.push({ path: '/car-detail', query: { id: row.id } }); }, } } src/view/car-manage/service.js
New file @@ -0,0 +1,32 @@ import axios from '@/utils/request'; // 获取车辆列表 export const getCarList = (data) => { console.log(data) return axios.get('/system/car/getCarList', {params:data}) } //获取获取车辆类型 export const getCarType = (data) => { return axios.get('/system/car/getCarTypeList', data) } //获取车辆详情 export const getCarDetail = (data) => { return axios.get(`/system/car/getCarInfo/${data.id}`, data) } //获取车辆详情订单数据 export const getCarOrder = (data) => { return axios.get(`/system/order/getOrderList`, {params:data}) } //获取车辆详情预警数据 export const getCarWarning = (data) => { return axios.get(`/system/warn/getCarWarnList`, {params:data}) } //获取车辆详情行程轨迹 export const getCarTrack = (data) => { return axios.get(`/system/car/getCarTravel`, {params:data}) }
