作者 小范

新增车辆定位界面

  1 +import axios from 'axios'
  2 +import http from "../http";
  3 +
  4 +let baseServiceURL = 'wms-server-warehouse'
  5 +
  6 +export const selectVehicle = params => { return axios.get(`${baseServiceURL}/map/location/lastlocation`, { params: params }); };
@@ -19,7 +19,10 @@ import Print from 'vue-print-nb' @@ -19,7 +19,10 @@ import Print from 'vue-print-nb'
19 // 条形组件 19 // 条形组件
20 import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件 20 import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
21 Vue.component('barcode', VueBarcode); 21 Vue.component('barcode', VueBarcode);
22 - 22 +import BaiduMap from 'vue-baidu-map'
  23 +Vue.use(BaiduMap, {
  24 + ak: 'PV0SfW0yRxe4NHUQ8OhyO4DrDbiwX4Sd'
  25 +})
23 26
24 //定义一个全局过滤器实现日期格式化 27 //定义一个全局过滤器实现日期格式化
25 Vue.filter('datefmt',function(input,fmtstring){ 28 Vue.filter('datefmt',function(input,fmtstring){
@@ -43,6 +46,7 @@ Vue.use(ElementUI, @@ -43,6 +46,7 @@ Vue.use(ElementUI,
43 Vue.use(VueRouter) 46 Vue.use(VueRouter)
44 Vue.use(Vuex) 47 Vue.use(Vuex)
45 Vue.use(Print) 48 Vue.use(Print)
  49 +
46 Vue.prototype.$axios = axios; 50 Vue.prototype.$axios = axios;
47 51
48 //NProgress.configure({ showSpinner: false }); 52 //NProgress.configure({ showSpinner: false });
@@ -110,6 +110,7 @@ import myTask from './views/technological/myTask.vue' @@ -110,6 +110,7 @@ import myTask from './views/technological/myTask.vue'
110 import definition from './views/technological/definition.vue' 110 import definition from './views/technological/definition.vue'
111 111
112 //仓库场站管理 112 //仓库场站管理
  113 +import vehicle from './views/deploy/vehicle.vue'
113 import station from './views/deploy/station.vue' 114 import station from './views/deploy/station.vue'
114 import house from './views/deploy/house.vue' 115 import house from './views/deploy/house.vue'
115 import inventroyrecord from './views/deploy/inventroyrecord.vue' 116 import inventroyrecord from './views/deploy/inventroyrecord.vue'
@@ -562,6 +563,7 @@ let routes = [ @@ -562,6 +563,7 @@ let routes = [
562 name: '仓库场站管理', 563 name: '仓库场站管理',
563 iconCls:'el-icon-goods', 564 iconCls:'el-icon-goods',
564 children:[ 565 children:[
  566 + {path:'/vehicle',component:vehicle,name:'车辆定位'},
565 {path:'/station',component:station,name:'场站管理'}, 567 {path:'/station',component:station,name:'场站管理'},
566 {path:'/house',component:house,name:'仓库管理'}, 568 {path:'/house',component:house,name:'仓库管理'},
567 {path:'/inventroyrecord',component:inventroyrecord,name:'库存变更记录'}, 569 {path:'/inventroyrecord',component:inventroyrecord,name:'库存变更记录'},
  1 +<template>
  2 + <div>
  3 + <el-row>
  4 + <el-card style="background-color: #F5F7FA">
  5 + <el-row>
  6 + <el-col :span="5">
  7 + <el-input v-model="queryInfo.vno" prefix-icon="el-icon-search" size="small" style="width: 200px"
  8 + placeholder="车牌号" clearable>
  9 + <template slot="prepend">车牌号</template>
  10 + </el-input>
  11 + </el-col>
  12 + <el-col :offset="1" :span="12">
  13 + <div class="my-text-area">
  14 + <div class="el-input-group__prepend prepand">车牌类型</div>
  15 + <el-select v-model="queryInfo.vnocolor" placeholder="车牌类型" style="width: 200px" clearable>
  16 + <el-option label="蓝色" value="1"></el-option>
  17 + <el-option label="黄色" value="2"></el-option>
  18 + <el-option label="绿色" value="3"></el-option>
  19 + </el-select>
  20 + </div>
  21 + </el-col>
  22 + <el-col :span="3">
  23 + <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
  24 + 查询
  25 + </el-button>
  26 + </el-col>
  27 + </el-row>
  28 +
  29 + </el-card>
  30 + </el-row>
  31 + <div id="mapContainer" style="width: 100%; height: 500px;"></div>
  32 + </div>
  33 +</template>
  34 +<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
  35 +<script>
  36 + import AMapLoader from '@amap/amap-jsapi-loader';
  37 + import {selectVehicle} from '../../api/consigner/vehicle';
  38 + import {list} from "../../api/consigner/check";
  39 +
  40 + export default {
  41 + name: 'MapComponent',
  42 + data() {
  43 + return {
  44 + mapInstance: null,
  45 + queryInfo:{
  46 + vno:'',
  47 + vnocolor:''
  48 + }
  49 + };
  50 + },
  51 + methods:{
  52 + getList() {
  53 + const _this = this
  54 + selectVehicle(this.queryInfo).then((response) => {
  55 + const res = response.data
  56 + //console.log(response.data)
  57 + if (res.code !== '200') {
  58 + return _this.$message.error('获取消息收发记录,失败!')
  59 + }
  60 + // 获取列表数据
  61 + console.log(res.data.data.firstVcl)
  62 + _this.$message.success('获取消息收发记录,成功!')
  63 + }).catch(error => {
  64 + // 关闭加载
  65 + _this.$message.error(error.toString())
  66 + })
  67 + },
  68 + },
  69 + mounted() {
  70 + AMapLoader.load({
  71 + key: 'fdb27c13681d084e85ff8457b5cbe540',
  72 + version: '2.0',
  73 + plugins: [], // 可以加载地图插件,比如定位、地图工具等
  74 + }).then((AMap) => {
  75 + this.mapInstance = new AMap.Map('mapContainer', {
  76 + zoom: 10,
  77 + center: [116.397428, 39.90923], // 设置地图中心点
  78 + });
  79 + }).catch((err) => {
  80 + console.error(err);
  81 + });
  82 + },
  83 + };
  84 +</script>
  85 +
  86 +<style scoped>
  87 + /* 可以添加一些样式来设置地图容器的大小等 */
  88 + .my-text-area .prepand{
  89 + float: left;
  90 + width:89px;
  91 + height: 28px;
  92 + font-size: 12px;
  93 + line-height: 28px;
  94 + }
  95 +</style>
  96 +<style>
  97 + .my-text-area .el-textarea__inner{
  98 + min-height: 28px;
  99 + height: 28px;
  100 + border-bottom-left-radius: 0;
  101 + border-top-left-radius: 0;
  102 + }
  103 +</style>