vehicle.vue
3.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<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>