Wuzu
/
cloud-ui
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zxd-更新项目

master
张小东 2023-12-06 08:06:57 +08:00
parent 4680f6838e
commit e54a42be3b
11 changed files with 184 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/trajectory/battery.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
// 电池型号
export function getBatteryList() {
return request({
url: '/trajectory/vehicle/batteryList',
method: 'get'
})
}

9
src/api/trajectory/batteryMerchant.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
// 电池厂商
export function getBatterMerchantList() {
return request({
url: '/trajectory/vehicle/batteryMerchantList',
method: 'get'
})
}

0
src/api/trajectory/historyTrack.js
View File

9
src/api/trajectory/motor.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
// 电机型号
export function getMotorList() {
return request({
url: '/trajectory/vehicle/motorList',
method: 'get'
})
}

9
src/api/trajectory/motorMerchant.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
// 电机厂商
export function getMotorMerchantList() {
return request({
url: '/trajectory/vehicle/motorMerchantList',
method: 'get'
})
}

8
src/api/trajectory/track.js
View File

@ -1,8 +0,0 @@
import request from '@/utils/request'
export function getTrackList(vehicleId) {
return request({
url: '/trajectory/track/trackList?vehicleId=' + vehicleId,
method: 'get'
})
}

27
src/api/trajectory/vehicle.js
View File

@ -6,6 +6,13 @@ export function getVehicleList() {
method: 'get'
})
}
// 车辆类型
export function getVehicleType() {
return request({
url: '/trajectory/vehicle/vehicleTypeList',
method: 'get'
})
}
// 删除车辆
export function deleteVehicle(vehicleId) {
@ -18,7 +25,7 @@ export function deleteVehicle(vehicleId) {
// 车辆详情
export function getVehicleByVehicleId(vehicleId) {
return request({
url: '/trajectory/vehicle/getVehicleByVehicleId?vehicleId=' + vehicleId,
url: '/trajectory/vehicle/findVehicleById?vehicleId=' + vehicleId,
method: 'get'
})
}
@ -27,20 +34,11 @@ export function getVehicleByVehicleId(vehicleId) {
export function updateVehicle(data) {
return request({
url: '/trajectory/vehicle/updateVehicle',
method: 'post',
method: 'put',
data: data
})
}
// 新增车辆
export function insertVehicle(data) {
return request({
@ -50,5 +48,12 @@ export function insertVehicle(data) {
})
}
// 实时轨迹
export function getVehicleTrack(vehicleVin) {
return request({
url: '/trajectory/track/vehicleTrack?vehicleVin='+vehicleVin,
method: 'get'
})
}

9
src/api/trajectory/vehicleType.js
View File

@ -1,9 +0,0 @@
import request from '@/utils/request'
// 车辆类型
export function getVehicleTypeList() {
return request({
url: '/trajectory/vehicle/vehicleTypeList',
method: 'get'
})
}

234
src/views/trajectory/trackMap/trackMap.vue
View File

@ -1,103 +1,3 @@
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getTrackList } from '@/api/trajectory/track'
export default {
name: 'MapContainer',
data() {
return {
AMap: null,
map: null,
carMarker: null, // 汽车位置marker
track:[]
};
},
created() {
this.getTrack()
},
methods: {
getTrack() {
// 接参
const vehicleId = this.$route.params.vehicleId
getTrackList(vehicleId).then(res => {
console.log(res)
this.track = res.data
// 更新汽车位置
this.updateCarLocation(this.track[0])
})
},
initMap() {
AMapLoader.load({
key: "6911d4b3d9f7745cfed4ab0c87ad9b3f",
version: "2.0",
"plugins": [
"AMap.Scale",
"AMap.ToolBar",
"AMap.MoveAnimation"
],
}).then((AMap) => {
this.AMap = AMap;
this.map = new AMap.Map("container", {
viewMode: "2D",
zoom: 13,
center: [116.478935,39.997761],
resizeEnable: true
});
this.map.setFitView();
}).catch(e => {
console.log(e);
})
},
updateCarLocation(carLocation) {
if (!this.carMarker) {
// 第一次更新时，创建汽车位置marker，并添加到地图上
this.carMarker = new this.AMap.Marker({
map: this.map,
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
offset: new this.AMap.Pixel(-13, -26),
});
}
const { latitude, longitude } = carLocation;
const carPosition = [longitude, latitude];
// 更新汽车位置marker的位置
this.carMarker.setPosition(carPosition);
},
},
mounted() {
this.initMap();
this.getTrack();
// 定时更新汽车位置
setInterval(() => {
if (this.track.length > 0) {
// 更新汽车位置
this.updateCarLocation(this.track[0])
// 从轨迹列表中移除已经更新过的点
this.track.shift()
}
}, 500); // 每隔0.5秒钟更新一次
},
}
</script>
<style scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 1000px;
}
</style>
<!--<template>-->
<!-- <div>-->
<!-- <div id="container"></div>-->
@ -106,6 +6,7 @@ export default {
<!--<script>-->
<!--import AMapLoader from "@amap/amap-jsapi-loader";-->
<!--import { getVehicleTrack } from '@/api/trajectory/vehicle'-->
<!--export default {-->
<!-- name: 'MapContainer',-->
@ -114,9 +15,23 @@ export default {
<!-- AMap: null,-->
<!-- map: null,-->
<!-- carMarker: null, // 汽车位置marker-->
<!-- track:[]-->
<!-- };-->
<!-- },-->
<!-- created() {-->
<!-- this.getTrack()-->
<!-- },-->
<!-- methods: {-->
<!-- getTrack() {-->
<!-- // 接参-->
<!-- const vehicleVin = this.$route.params.vehicleVin-->
<!-- getVehicleTrack(vehicleVin).then(res => {-->
<!-- console.log(res)-->
<!-- this.track = res.data-->
<!-- // 更新汽车位置-->
<!-- this.updateCarLocation(this.track[0])-->
<!-- })-->
<!-- },-->
<!-- initMap() {-->
<!-- AMapLoader.load({-->
<!-- key: "6911d4b3d9f7745cfed4ab0c87ad9b3f",-->
@ -160,26 +75,17 @@ export default {
<!-- },-->
<!-- mounted() {-->
<!-- this.initMap();-->
<!-- // 模拟后台传来的汽车位置数据-->
<!-- const carLocationData = [-->
<!-- { latitude: 39.988, longitude: 116.432 },-->
<!-- { latitude: 39.989, longitude: 116.434 },-->
<!-- { latitude: 39.990, longitude: 116.436 },-->
<!-- // ...-->
<!-- ];-->
<!-- let index = 0;-->
<!-- this.getTrack();-->
<!-- // 定时更新汽车位置-->
<!-- setInterval(() => {-->
<!-- this.updateCarLocation(carLocationData[index]);-->
<!-- index++;-->
<!-- if (index >= carLocationData.length) {-->
<!-- index = 0;-->
<!-- if (this.track.length > 0) {-->
<!-- // 更新汽车位置-->
<!-- this.updateCarLocation(this.track[0])-->
<!-- // 从轨迹列表中移除已经更新过的点-->
<!-- this.track.shift()-->
<!-- }-->
<!-- }, 500); // 每隔5秒钟更新一次-->
<!-- }, 500); // 每隔0.5秒钟更新一次-->
<!-- },-->
<!--}-->
<!--</script>-->
@ -189,6 +95,100 @@ export default {
<!-- padding: 0px;-->
<!-- margin: 0px;-->
<!-- width: 100%;-->
<!-- height: 800px;-->
<!-- height: 1000px;-->
<!--}-->
<!--</style>-->
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
name: 'MapContainer',
data() {
return {
AMap: null,
map: null,
carMarker: null, // 汽车位置marker
};
},
methods: {
initMap() {
AMapLoader.load({
key: "6911d4b3d9f7745cfed4ab0c87ad9b3f",
version: "2.0",
"plugins": [
"AMap.Scale",
"AMap.ToolBar",
"AMap.MoveAnimation"
],
}).then((AMap) => {
this.AMap = AMap;
this.map = new AMap.Map("container", {
viewMode: "2D",
zoom: 13,
center: [116.478935,39.997761],
resizeEnable: true
});
this.map.setFitView();
}).catch(e => {
console.log(e);
})
},
updateCarLocation(carLocation) {
if (!this.carMarker) {
// 第一次更新时，创建汽车位置marker，并添加到地图上
this.carMarker = new this.AMap.Marker({
map: this.map,
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
offset: new this.AMap.Pixel(-13, -26),
});
}
const { latitude, longitude } = carLocation;
const carPosition = [longitude, latitude];
// 更新汽车位置marker的位置
this.carMarker.setPosition(carPosition);
},
},
mounted() {
this.initMap();
// 模拟后台传来的汽车位置数据
const carLocationData = [
{ latitude: 39.988, longitude: 116.432 },
{ latitude: 39.989, longitude: 116.434 },
{ latitude: 39.990, longitude: 116.436 },
// ...
];
let index = 0;
// 定时更新汽车位置
setInterval(() => {
this.updateCarLocation(carLocationData[index]);
index++;
if (index >= carLocationData.length) {
index = 0;
}
}, 500); // 每隔5秒钟更新一次
},
}
</script>
<style scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 800px;
}
</style>

168
src/views/trajectory/vehicle/list.vue
View File

@ -8,36 +8,25 @@
<el-form-item label="车辆VIN">
<el-input v-model="form.vehicleVin"></el-input>
</el-form-item>
<el-form-item label="车辆拍照">
<el-input v-model="form.vehiclePlateNumber"></el-input>
</el-form-item>
<el-form-item label="车辆品牌">
<el-input v-model="form.vehicleBrand"></el-input>
</el-form-item>
<el-form-item label="车辆类型">
<el-select v-model="form.vehicleTypeName" placeholder="请选择类型">
<el-select v-model="form.vehicleTypeId" placeholder="请选择类型">
<el-option v-for="item in vehicleType" :key="item.vehicleTypeId" :label="item.vehicleTypeName" :value="item.vehicleTypeId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电机厂商">
<el-select v-model="form.motorMerchantName" placeholder="请选择电机厂商">
<el-option v-for="item in motorMerchant" :key="item.motorMerchantId" :label="item.motorMerchantName" :value="item.motorMerchantId"></el-option>
</el-select>
<el-form-item label="电子围栏">
<el-input v-model="form.wallId"></el-input>
</el-form-item>
<el-form-item label="电机">
<el-select v-model="form.motorName" placeholder="请选择电机">
<el-option v-for="item in motor" :key="item.motorId" :label="item.motorName" :value="item.motorId"></el-option>
</el-select>
<el-form-item label="电机厂商">
<el-input v-model="form.motorMerchant"></el-input>
</el-form-item>
<el-form-item label="电池厂商">
<el-select v-model="form.batteryMerchantName" placeholder="请选择电池厂商">
<el-option v-for="item in batteryMerchant" :key="item.batteryMerchantId" :label="item.batteryMerchantName" :value="item.batteryMerchantId"></el-option>
</el-select>
<el-input v-model="form.batteryMerchant"></el-input>
</el-form-item>
<el-form-item label="电机">
<el-input v-model="form.motor"></el-input>
</el-form-item>
<el-form-item label="电池">
<el-select v-model="form.batteryName" placeholder="请选择电池">
<el-option v-for="item in battery" :key="item.batteryId" :label="item.batteryName" :value="item.batteryId"></el-option>
</el-select>
<el-input v-model="form.battery"></el-input>
</el-form-item>
</el-form>
<el-button @click="dialogVisible2 = false">取 消</el-button>
@ -60,15 +49,9 @@
</template>
</el-table-column>
<el-table-column label="车辆车牌号" width="180">
<el-table-column label="电子围栏" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.vehiclePlateNumber }}</span>
</template>
</el-table-column>
<el-table-column label="品牌名称" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.vehicleBrand }}</span>
<span style="margin-left: 10px">{{ scope.row.wallId }}</span>
</template>
</el-table-column>
@ -80,37 +63,31 @@
<el-table-column label="电机制造商名称" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.motorMerchantName }}</span>
</template>
</el-table-column>
<el-table-column label="电机名称" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.motorName }}</span>
<span style="margin-left: 10px">{{ scope.row.motorMerchant }}</span>
</template>
</el-table-column>
<el-table-column label="电池制造商名称" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.batteryMerchantName }}</span>
<span style="margin-left: 10px">{{ scope.row.batteryMerchant }}</span>
</template>
</el-table-column>
<el-table-column label="电机名称" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.motor }}</span>
</template>
</el-table-column>
<el-table-column label="电池名称" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.batteryName }}</span>
</template>
</el-table-column>
<el-table-column label="车辆状态" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.vehicleStatus }}</span>
<span style="margin-left: 10px">{{ scope.row.battery }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button size="small" type="danger" @click="handleTrack(scope.row.vehicleId)">实时轨迹</el-button>
<el-button size="small" type="danger" @click="handleTrack(scope.row.vehicleVin)">实时轨迹</el-button>
<el-button size="small" type="danger" @click="handleEdit(scope.row.vehicleId)">编辑</el-button>
@ -125,39 +102,25 @@
<el-form-item label="车辆VIN">
<el-input v-model="vehicle.vehicleVin"></el-input>
</el-form-item>
<el-form-item label="车辆车牌号">
<el-input v-model="vehicle.vehiclePlateNumber"></el-input>
</el-form-item>
<el-form-item label="车辆品牌">
<el-input v-model="vehicle.vehicleBrand"></el-input>
</el-form-item>
<el-form-item label="车辆类型">
<el-select v-model="vehicle.vehicleTypeName" placeholder="请选择类型">
<el-option v-for="item in vehicleType" :key="item.vehicleTypeId" :label="item.vehicleTypeName" :value="item.vehicleTypeId"></el-option>
<el-select v-model="vehicle.vehicleTypeId" placeholder="请选择类型">
<el-option v-for="item in vehicleType" :label="item.vehicleTypeName" :key="item.vehicleTypeId" :value="item.vehicleTypeId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电子围栏">
<el-input v-model="vehicle.wallId"></el-input>
</el-form-item>
<el-form-item label="电机厂商">
<el-select v-model="vehicle.motorMerchantName" placeholder="请选择电机厂家">
<el-option v-for="item in motorMerchant" :key="item.motorMerchantId" :label="item.motorMerchantName" :value="item.motorMerchantId"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电机">
<el-select v-model="vehicle.motorName" placeholder="请选择电机">
<el-option v-for="item in motor" :key="item.motorId" :label="item.motorName" :value="item.motorId"></el-option>
</el-select>
<el-input v-model="vehicle.motorMerchant"></el-input>
</el-form-item>
<el-form-item label="电池厂商">
<el-select v-model="vehicle.batteryMerchantName" placeholder="请选择电池厂商">
<el-option v-for="item in batteryMerchant" :key="item.batteryMerchantId" :label="item.batteryMerchantName" :value="item.batteryMerchantId"></el-option>
</el-select>
<el-input v-model="vehicle.batteryMerchant"></el-input>
</el-form-item>
<el-form-item label="电池">
<el-select v-model="vehicle.batteryName" placeholder="请选择电池">
<el-option v-for="item in battery" :key="item.batteryId" :label="item.batteryName" :value="item.batteryId"></el-option>
</el-select>
<el-form-item label="电机型号">
<el-input v-model="vehicle.motor"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-input v-model="vehicle.vehicleStatus"></el-input>
<el-form-item label="电池编号">
<el-input v-model="vehicle.battery"></el-input>
</el-form-item>
</el-form>
<el-button @click="dialogVisible = false">取消</el-button>
@ -176,35 +139,31 @@
<script>
import {
getVehicleList, deleteVehicle, getVehicleByVehicleId, insertVehicle, updateVehicle } from '@/api/trajectory/vehicle'
import { getVehicleTypeList } from '@/api/trajectory/vehicleType'
import { getMotorMerchantList } from '@/api/trajectory/motorMerchant'
import { getMotorList } from '@/api/trajectory/motor'
import { getBatterMerchantList } from '@/api/trajectory/batteryMerchant'
import { getBatteryList } from '@/api/trajectory/battery'
getVehicleList,
deleteVehicle,
getVehicleByVehicleId,
insertVehicle,
updateVehicle,
getVehicleType
} from '@/api/trajectory/vehicle'
export default {
data() {
return {
tableData: [],// 车辆数据
vehicleType: [], //车辆类型
motorMerchant: [], //电机制造商
motor: [], //电机
batteryMerchant: [], //电池制造商
battery: [], //电池
dialogVisible: false, //开关 关
dialogVisible2: false, //开关 关
vehicle: { //车辆信息
vehicleId: null,
vehicleVin: null,
vehiclePlateNumber: null,
vehicleBrand: null,
vehicleTypeId:null,
wallId: null,
vehicleTypeName: null,
batteryMerchantName: null,
batteryName: null,
motorMerchantName: null,
motorName: null,
vehicleStatus: null
batteryMerchant: null,
battery: null,
motorMerchant: null,
motor: null
},// 单车辆信息
form:{} // 添加
}
@ -212,10 +171,6 @@ export default {
created() {
this.getVehicleList()
this.getVehicleTypeList()
this.getMotorMerchantList()
this.getMotorList()
this.getBatteryMerchantList()
this.getBatteryList()
},
mounted() {
},
@ -243,38 +198,15 @@ export default {
},
// 车辆类型
getVehicleTypeList() {
getVehicleTypeList().then(res => {
getVehicleType().then(res => {
this.vehicleType = res.data
})
},
// 电机厂商
getMotorMerchantList() {
getMotorMerchantList().then(res => {
this.motorMerchant = res.data
})
},
// 电机
getMotorList() {
getMotorList().then(res => {
this.motor = res.data
})
},
// 电池厂商
getBatteryMerchantList() {
getBatterMerchantList().then(res => {
this.batteryMerchant = res.data
})
},
// 电池
getBatteryList() {
getBatteryList().then(res => {
this.battery = res.data
})
},
// 修改
updateVehicle() {
updateVehicle(this.vehicle).then(res => {
this.$message.success(res.data)
this.getVehicleList()
})
},
handleAdd() {
@ -289,11 +221,11 @@ export default {
this.getVehicleList();
})
},
handleTrack(vehicleId) {
handleTrack(vehicleVin) {
//传参
this.$router.push({
name: 'trackMap', // 这里使用路由的名称，而不是实际路径
params: { vehicleId: vehicleId } // 携带的参数应该是一个对象
params: { vehicleVin: vehicleVin } // 携带的参数应该是一个对象
});
}
}

2
vue.config.js
View File

@ -35,7 +35,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
target: `http://localhost:8085`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''