作者 小范

新增车辆定位界面

import axios from 'axios'
import http from "../http";
let baseServiceURL = 'wms-server-warehouse'
export const selectVehicle = params => { return axios.get(`${baseServiceURL}/map/location/lastlocation`, { params: params }); };
... ...
... ... @@ -19,7 +19,10 @@ import Print from 'vue-print-nb'
// 条形组件
import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
Vue.component('barcode', VueBarcode);
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: 'PV0SfW0yRxe4NHUQ8OhyO4DrDbiwX4Sd'
})
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function(input,fmtstring){
... ... @@ -43,6 +46,7 @@ Vue.use(ElementUI,
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(Print)
Vue.prototype.$axios = axios;
//NProgress.configure({ showSpinner: false });
... ...
... ... @@ -110,6 +110,7 @@ import myTask from './views/technological/myTask.vue'
import definition from './views/technological/definition.vue'
//仓库场站管理
import vehicle from './views/deploy/vehicle.vue'
import station from './views/deploy/station.vue'
import house from './views/deploy/house.vue'
import inventroyrecord from './views/deploy/inventroyrecord.vue'
... ... @@ -562,6 +563,7 @@ let routes = [
name: '仓库场站管理',
iconCls:'el-icon-goods',
children:[
{path:'/vehicle',component:vehicle,name:'车辆定位'},
{path:'/station',component:station,name:'场站管理'},
{path:'/house',component:house,name:'仓库管理'},
{path:'/inventroyrecord',component:inventroyrecord,name:'库存变更记录'},
... ...
<template>
<div>
<el-row>
<el-card style="background-color: #F5F7FA">
<el-row>
<el-col :span="5">
<el-input v-model="queryInfo.vno" prefix-icon="el-icon-search" size="small" style="width: 200px"
placeholder="车牌号" clearable>
<template slot="prepend">车牌号</template>
</el-input>
</el-col>
<el-col :offset="1" :span="12">
<div class="my-text-area">
<div class="el-input-group__prepend prepand">车牌类型</div>
<el-select v-model="queryInfo.vnocolor" placeholder="车牌类型" style="width: 200px" clearable>
<el-option label="蓝色" value="1"></el-option>
<el-option label="黄色" value="2"></el-option>
<el-option label="绿色" value="3"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="3">
<el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
查询
</el-button>
</el-col>
</el-row>
</el-card>
</el-row>
<div id="mapContainer" style="width: 100%; height: 500px;"></div>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {selectVehicle} from '../../api/consigner/vehicle';
import {list} from "../../api/consigner/check";
export default {
name: 'MapComponent',
data() {
return {
mapInstance: null,
queryInfo:{
vno:'',
vnocolor:''
}
};
},
methods:{
getList() {
const _this = this
selectVehicle(this.queryInfo).then((response) => {
const res = response.data
//console.log(response.data)
if (res.code !== '200') {
return _this.$message.error('获取消息收发记录,失败!')
}
// 获取列表数据
console.log(res.data.data.firstVcl)
_this.$message.success('获取消息收发记录,成功!')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
},
mounted() {
AMapLoader.load({
key: 'fdb27c13681d084e85ff8457b5cbe540',
version: '2.0',
plugins: [], // 可以加载地图插件,比如定位、地图工具等
}).then((AMap) => {
this.mapInstance = new AMap.Map('mapContainer', {
zoom: 10,
center: [116.397428, 39.90923], // 设置地图中心点
});
}).catch((err) => {
console.error(err);
});
},
};
</script>
<style scoped>
/* 可以添加一些样式来设置地图容器的大小等 */
.my-text-area .prepand{
float: left;
width:89px;
height: 28px;
font-size: 12px;
line-height: 28px;
}
</style>
<style>
.my-text-area .el-textarea__inner{
min-height: 28px;
height: 28px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
</style>
... ...