From 0c1b9461bae93a8753c18c226bceaa1ff9a1416c Mon Sep 17 00:00:00 2001
From: cxc <quantulr@outlook.com>
Date: Wed, 11 Jan 2023 17:28:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=B8=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                  |   3 +-
 package.json                                |   1 +
 src/api/car/group.js                        |  47 ++
 src/api/car/info.js                         |  47 ++
 src/api/driver/info.js                      |  47 ++
 src/api/region.js                           |  25 +
 src/assets/images/end.png                   | Bin 0 -> 1115 bytes
 src/assets/images/endRoute.png              | Bin 0 -> 3827 bytes
 src/assets/images/mark_bs.png               | Bin 0 -> 1483 bytes
 src/assets/images/start.png                 | Bin 0 -> 910 bytes
 src/assets/images/startRoute.png            | Bin 0 -> 3478 bytes
 src/components/CitySelect/index.vue         | 186 ++++++
 src/components/ImageUpload/index.vue        |  62 +-
 src/views/basic/car/group/index.vue         | 320 ++++++++++
 src/views/basic/car/info/add.vue            | 291 +++++++++
 src/views/basic/car/info/index.vue          | 476 +++++++++++++++
 src/views/basic/driver/info/add.vue         | 236 ++++++++
 src/views/basic/driver/info/index.vue       | 217 +++++++
 src/views/basic/map-route/RouteStepList.vue | 160 +++++
 src/views/basic/map-route/index.vue         | 625 ++++++++++++++++++++
 20 files changed, 2714 insertions(+), 29 deletions(-)
 create mode 100644 src/api/car/group.js
 create mode 100644 src/api/car/info.js
 create mode 100644 src/api/driver/info.js
 create mode 100644 src/api/region.js
 create mode 100644 src/assets/images/end.png
 create mode 100644 src/assets/images/endRoute.png
 create mode 100644 src/assets/images/mark_bs.png
 create mode 100644 src/assets/images/start.png
 create mode 100644 src/assets/images/startRoute.png
 create mode 100644 src/components/CitySelect/index.vue
 create mode 100644 src/views/basic/car/group/index.vue
 create mode 100644 src/views/basic/car/info/add.vue
 create mode 100644 src/views/basic/car/info/index.vue
 create mode 100644 src/views/basic/driver/info/add.vue
 create mode 100644 src/views/basic/driver/info/index.vue
 create mode 100644 src/views/basic/map-route/RouteStepList.vue
 create mode 100644 src/views/basic/map-route/index.vue

diff --git a/index.html b/index.html
index 8df38e8..ad0a948 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,9 @@
   <title>若依管理系统</title>
   <script type="text/javascript">
     window._AMapSecurityConfig = {
-      securityJsCode: 'd9ded0c99c2545c9feb200da26b29fbf',
+      securityJsCode: '2b65e7751cb17e4605f4c4cdccf885f6',
     }
   </script>
-  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7891f1238368a895ff1967c79643102d"></script>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,
diff --git a/package.json b/package.json
index fbe12f3..4da4fd4 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons-vue": "2.0.10",
     "@highlightjs/vue-plugin": "^2.1.0",
     "@vueuse/core": "9.5.0",
diff --git a/src/api/car/group.js b/src/api/car/group.js
new file mode 100644
index 0000000..4e94fa7
--- /dev/null
+++ b/src/api/car/group.js
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 查询车辆分组列表
+export function listGroup(query) {
+    return request({
+        url: '/car/group/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询车辆分组详细
+export function getGroup(groupId,uuid) {
+    return request({
+        url: '/car/group/' + groupId + '/' + uuid,
+        method: 'get'
+    })
+}
+
+// 新增车辆分组
+export function addGroup(data) {
+    return request({
+        url: '/car/group',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改车辆分组
+export function updateGroup(data) {
+    return request({
+        url: '/car/group',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除车辆分组
+export function delGroup(groupId) {
+    return request({
+        url: '/car/group',
+        method: 'delete',
+        data: {
+            ids: groupId
+        }
+    })
+}
diff --git a/src/api/car/info.js b/src/api/car/info.js
new file mode 100644
index 0000000..f393f3c
--- /dev/null
+++ b/src/api/car/info.js
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 查询车辆信息列表
+export function listInfo(query) {
+    return request({
+        url: '/car/info/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询车辆信息详细
+export function getInfo(carId,uuid) {
+    return request({
+        url: '/car/info/' + carId + '/' + uuid,
+        method: 'get'
+    })
+}
+
+// 新增车辆信息
+export function addInfo(data) {
+    return request({
+        url: '/car/info',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改车辆信息
+export function updateInfo(data) {
+    return request({
+        url: '/car/info',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除车辆信息
+export function delInfo(carId) {
+    return request({
+        url: '/car/info',
+        method: 'delete',
+        data: {
+            ids: carId
+        }
+    })
+}
diff --git a/src/api/driver/info.js b/src/api/driver/info.js
new file mode 100644
index 0000000..154d635
--- /dev/null
+++ b/src/api/driver/info.js
@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+// 查询司机信息列表
+export function listInfo(query) {
+    return request({
+        url: '/driver/info/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 查询司机信息详细
+export function getInfo(driverId,uuid) {
+    return request({
+        url: '/driver/info/' + driverId + '/' + uuid,
+        method: 'get'
+    })
+}
+
+// 新增司机信息
+export function addInfo(data) {
+    return request({
+        url: '/driver/info',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改司机信息
+export function updateInfo(data) {
+    return request({
+        url: '/driver/info',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除司机信息
+export function delInfo(driverId) {
+    return request({
+        url: '/driver/info',
+        method: 'delete',
+        data: {
+            ids: driverId
+        }
+    })
+}
diff --git a/src/api/region.js b/src/api/region.js
new file mode 100644
index 0000000..abdbbc5
--- /dev/null
+++ b/src/api/region.js
@@ -0,0 +1,25 @@
+import request from "@/utils/request";
+
+// 获取某市所有区
+export const listArea = (cityCode) =>
+  request({
+    url: "/system/region/allArea",
+    params: {
+      cityCode,
+    },
+  });
+
+// 获取某省所有市
+export const listCity = (provinceCode) =>
+  request({
+    url: "/system/region/allCity",
+    params: {
+      provinceCode,
+    },
+  });
+
+// 获取所有省
+export const listProvince = () =>
+  request({
+    url: "/system/region/allProvince",
+  });
diff --git a/src/assets/images/end.png b/src/assets/images/end.png
new file mode 100644
index 0000000000000000000000000000000000000000..d18ea9711ef4d885db48a55d19ea14d86ba9104c
GIT binary patch
literal 1115
zcmV-h1f=_kP)<h;3K|Lk000e1NJLTq000vJ0018d1^@s61(No+000CcNkl<Zc-p0u
zTWFhg7{()_cq!fpUbfA8KA+nhn|wK^$=XiA&AaKHpwM0jGPmiKh$4y;wkrj9qpnkA
zmbRlF)`8&Ki6U#aitNzzkfv?YFNZJ5<NN#rfsxIvTj9r>_kEw|`TxIuBqjhAB!|N<
z2ou7ba9hX<tUqzi{k?p5H9O(ZQ^LD~o(V@`ghx>bkD(Yk#HxDExu=f$dxj-K!Doe8
zJrqG9C;>qU@Q<M2i3nj<_MEFdb)vs0Ja<>vR?z>XFrx=cL3#f{6b>DR;qbz+Yl{5H
zORCSi0^BPd_2Qcso-T)N2K>j9fnnqW@+fkH{PFjIcpOIbMdYk*RrzPUIgXr7Lym`N
zC4EYK^sBISpYM4=&&g?qH;Sy?gTm4>jAJK}dt(AwiwlKw=TX#k&P!aHr%n!zf<F40
zV~Tmb<2$|(4Bv>H=!fyaM<^~XB0Jz>0Q*w?{0wL1gR%o|>Xnav$(b<S@whMUX%S>y
zQKSbv%9#IkzQoiFiZ^c|cj}C)#+PT+Jl*Fa)GHtT%rV_^yVuh0C^C)^bP7UaisH3p
z=)FTozw)Z8g@vo?pzPZx*%RuOkABICnf`S-3mMlzq^&{h^$aNr5|n;@9J+*NPn|}A
zxBB)xG7?mb$JujEt@6>&9MeBeM^Yb(K(_{v>K;P&i?7rTikordrlyg3|3mB@ISS*K
zd1O92EgB~)XVfbn{gSh5x^A~E?AXK52SZ49xsdXWDUzMeawVz5Dv*bi=hV|jzvL{M
zmTcCK*K9uMwg^&3UPJbqNf=kIsz=FRTSC%1TDqkKC0{<O`rQtPBH8U$z76q9&L^h7
zErWeGEDoeB5$yK*k@;~NskctZ>mJ2+yMw6DnXf1L_}rIv9Zu?%kACK;Z@`}e{d2bm
zG$i|nvEAuLqQxQDE7;aXki9T1b&NWtr;q;f*XfV`zFHxZ=#%H~2_Vtt#8$KYzHm<+
z_4LtS4kHV_JttOr<bTl<LZVeeyvdGuqpbqYxu=eL`YL{ce(&yjMp#+x(y-kXz-E&J
z8x7V9IOm=^>glTpBfoWZM*r#@M4~;2c(aD}dK=d3tYz49&OLS1-}jf6T<&O}S&`Si
z)fSMOIIvc0DZ`#~?nO6C{r`qtYHMu~3R|swR82yxh?y;{s^^@0>K+(Ier|0!yVPtG
zvmdcq2kul4vZ|hQ?x}mIu({@@2BEmo=$9M0CCsWSd(OFk=rA(d*f_b|V8?oc7prEc
zs_Z%EeqUkJ4fXEJ4ejz4eTW^<RAtZkzQd;K>z)v9+%&tfX7+)VJ?HxlBNu9Gk1d#c
z5v%clRr+^0f26P<4jibPH8*0l+5=Yhj~qt6H`iQWsd9pq{bPlFS5y7zVpT6#A3N+^
hb(LG#5wr(s{{vpa5l(sCCKCVv002ovPDHLkV1lC;GXekr

literal 0
HcmV?d00001

diff --git a/src/assets/images/endRoute.png b/src/assets/images/endRoute.png
new file mode 100644
index 0000000000000000000000000000000000000000..edefbdda854ad43ef21a25797eaea34e724feff5
GIT binary patch
literal 3827
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/mark_bs.png b/src/assets/images/mark_bs.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f68e9ae921c87efc1e8aeba06642e2f0b5b83b8
GIT binary patch
literal 1483
zcmV;+1vL7JP)<h;3K|Lk000e1NJLTq001Tc002J-1^@s6jO4og000G&Nkl<Zc-qa?
zX>3$g7{>9}Vi2Rz!~_!wRF*DwT3Tr7P79@_g#i;2{Q?Ru;DUgn1quQJEtJwifkGD`
z(NBKCXbdRgZbT6yL<k@t5LrrDx&p1G%k=m>a$=^FdvEVdxB2i(ZtpqgJ^!?mjwq!J
zIg6UCjDc*}1IM5iTC`fe(`(s!uXxKMtkKh>unf*jD{fZPN?O(QQkR-uq14m6V7G>6
zzT+DAa4*mBtezn@ScDbcAsPrd(C}Z(P6l{~XLyz~V40pN7R<w@Vi6+YPv^E4495k#
zyN5G4i!&h##E@m!#@jQX*}1)qLwgiwa<;xh3>b$^DY&%&I-F(gYT7Q<D>$2Xz(NpD
z22l;qLx;26rJNYhn|KHB(szoR&S6;_>Z9TA)UtLS>=V2TceX$rh^E6JGr#U3IG45k
zu9|`aeJN{ui^ARKVGszoht=k17B{J^ovL5(ZZzb9kT7cU`kKMeIHjVa-@<q|8+3~f
zTUVVsc}t_p+}Y8u*uWML$;i7I0GBiIA)Jir{=^2fTw#->=iW%l*iff3DqMbnEoe$c
z*!5NEn{TU(a+hCV3!7xp+N!<j+nQ8*dAna=3!5Zu&DGPBcHC8y@X{Z!g-w#Sy0Rgy
zv`wXzwfl$CR)wZ|nfU&d_K9U}%AcUgB@<R%YMX%HnBUmZs?gLZsVgsDPsR6RYH6!~
zC}~z`s+80fe;-Q0f7}$5`UAGGNmAasP@Ym)r^fGS@e3)1wF*sTGJg5_S;@KAR1#kL
z1Gcb9l9!!(4B8X%Ir9f>VUsAOBsu5o{-mP1eve8js#j<^03r-aT6!icarGsYP}1D5
z*npPla4#%z$>{+2E1{r9#bZN%;N5J{E%(AGVaciS;EKbSXxz4c`V{Zv-MT@DQEqW3
zOX72{s90?5OT3eJgJ_+@;uoKI7%s&YRI71YoB9Or;+^_#(K?4wT=sEi?22<LW@}@g
z;9a~E#ElN~5c}@2k7CwdR?#@vn|KHB0`XuRHtwB221CtQd_9caa;H~tHt&GPK|C?U
zIBwC=c`>Uls3;8S4V=w8Kn$3N#k_rF02~>USE(Y4Z}%w9#O$N`4l!UJ7X8-mlmH#0
zF{~$Xrk*V(%)`bm{Eg^?DE!(ZHs9(IoQ0Vmf>^K!TX2|YFw{rj|4ldscL!&1mYyjV
z%)`da|JB{1$mM61V^c%7a0X|Abiq6<>djx=JpdOS>#9^3F7Sn8{WZlIdX{v-JS=kF
z&z@#QEIp}0H`V)uXE9?ohz%BDZyfX#04Kumg&R^-@0GCJO2xB!hS*>pHv09Sj655j
zecbCXp26AYKx{G(i+JrvBLQ$WB=4#UF08YKdwE8m6`QQWelRn~vG}+O!lia_FV4&b
z@q&3+_^aQW83<LQ@~^8=g|(KrhkNxI@q&4nWA1lWR);P<rABV7wG@(bN@4FB5HDGT
z&H2{K6VNuYpc(-+hPcK(Fa*R)=3!y4eAAUZK`YOz;fOH8HSGBq#0OSkUw36{=)%M5
z$$}a~T;m=PADD+d_3~F;xgV|#Usr{Y>Q4BMYkH6Pz&tGUr2}>pkHl9^AY$C{9oIm7
zWEJ+M9f`s74ys`rsypF3u7UW-JS^nJ{dU|3m4SJc2)e0=&wQuX#77okv%j#bYy|#v
zLlH$I@c#|(DnPoyJS-TCHa#<H{-OWF_{?`8KC=v)^|_^R8Sn@MI)*03;b+&7{2Pk+
z>=>3D&o%DhULRP6?K8rlLEwNGqTrdITnJo#MiHOg*2uv#JnIGXu%H+A8DUri#JCGh
z$ypFI^Rt?u8K2(Zv*$X`@T`57VS9~ugxMCsv)*8Y9SkCmKcy`Wc#t!^;7gdMKl~5|
lQ4me~IgD$1kC3-v{{oIL#HlU0*cJc)002ovPDHLkV1nn}+0p<2

literal 0
HcmV?d00001

diff --git a/src/assets/images/start.png b/src/assets/images/start.png
new file mode 100644
index 0000000000000000000000000000000000000000..730b6bc85877b06587358ce1bcc214a3ec2317bc
GIT binary patch
literal 910
zcmV;919AL`P)<h;3K|Lk000e1NJLTq000vJ0018d1^@s61(No+000A3Nkl<Zc-p0u
zYfQ~?9LE1<%uDme<^^+0B6qpxl7qs=*cfx0OEX4HhS5>EM5sjWb6G2MnNk=EZR9qz
z(Prh^vfK{39q0Oge4k(Tn;b{Q**^Q;p6B_W^WuLD06s({*0vL(g<HZq!TGZmaL@an
zeDy<i*0d1f1^dJl7bc|vlMf0<R8=$gyi-U0AH%|TRJ9iJBa$7MbXbf>{KGqSqQ4=u
zsTVdOp|ZJ<7rxhl2oaOnr-1d@?EOQ%_zH!VI&A#*ubU?%*%5IVnypuWoT9pZ)=4#M
z)@4EK=%ZhSjoWH#E7-#icoBXGSejWEa`y#L`kuYsX}G7B&__RW49k{JYb?8KFz%44
zn0dlP{AJ+u0|u&|`(I&Ly_tT=i8jLGKHRXRI$=3zDk3w0_)9>hgcV8{`x(bgTr7g7
zv;x#>=x2^GCbr^3*nT&{<m-~SToc((ps>}{^@}r1lz#zlio9Y_tD#?V-W#K><=)Y0
z9{kGnViVJkc~DXTz0<uPm}89GR8~D|zYC+%+=^+(-24`*w>u#rCNl1OS+#}_TYcW6
zXZj_l$_U-~`blVVEkb2MtT`U=v+A6O0ea8itjAuWe*RQ>DEEq#T1ZZjF=E5Zlo2~@
z7{1S`NWbU7ol<3BnBGU7btC3t9aE0FxYN)tIjP35^(BLcTHj(wszYI`2Iie|V&z#E
zdlh)$kw<gwnOE)7@4B^ze&(n*VCdTCw}x!{h(UY5W5pRKE79}DY?lvnPCC?`KKk|R
zG&s7ro8SmZszykPz0pulAN@Lv3|jLvHe_=d1|-)u8tUou`3oAjx~P@#s(->q^h>U3
z5bCI>&nJuwh<ZGw|ArFuPO5GY>ZteoPfPl(c$n8awhY00s{F#c=<=!mYgpgq_j?K6
z9=j{y58kP3FpTtBR+t$a^9n(`zWKmC@6<Iatk=@pL4p~W_!YmyJ@1VUBf*gcS%KC!
z=$iON!<l>Dn-tb_$<47rQ4i5&r%l6|`zD74Ey`~uyzIQC0-fYVX64L%lfy{&h1X*O
zqMxE;!e_9`Y~}u+!U7ju4Gf4ZK>LJGVCDSJVWivqD=#|4m4lV@e}x6iyS%UC+Gk+>
k@35|ObH@smf~6tt4*}(Xs`sw64FCWD07*qoM6N<$f>?ad%K!iX

literal 0
HcmV?d00001

diff --git a/src/assets/images/startRoute.png b/src/assets/images/startRoute.png
new file mode 100644
index 0000000000000000000000000000000000000000..120c75fc32267da865c72cebbcf888bd562cff3a
GIT binary patch
literal 3478
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
Eg2U{%asU7T

literal 0
HcmV?d00001

diff --git a/src/components/CitySelect/index.vue b/src/components/CitySelect/index.vue
new file mode 100644
index 0000000..1aa9b20
--- /dev/null
+++ b/src/components/CitySelect/index.vue
@@ -0,0 +1,186 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="modelValue"
+    :rules="rules"
+    :label-width="`${labelWidth}px`"
+  >
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="所在地:">
+          <el-row type="flex" justify="space-between">
+            <el-col :span="7">
+              <el-form-item prop="province">
+                <el-select
+                  v-model="modelValue.province"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                  :disabled="provinceSelectList.length === 0"
+                  @change="provinceChanged"
+                >
+                  <el-option
+                    v-for="item in provinceSelectList"
+                    :key="item.provinceCode"
+                    :label="item.provinceName"
+                    :value="item.provinceCode"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item prop="city">
+                <el-select
+                  v-model="modelValue.city"
+                  clearable
+                  filterable
+                  :disabled="citySelectList.length === 0"
+                  placeholder="请选择"
+                  @change="cityChanged"
+                >
+                  <el-option
+                    v-for="item in citySelectList"
+                    :key="item.cityCode"
+                    :label="item.cityName"
+                    :value="item.cityCode"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item prop="area">
+                <el-select
+                  v-model="modelValue.area"
+                  clearable
+                  filterable
+                  :disabled="districtSelectList.length === 0"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="item in districtSelectList"
+                    :key="item.areaCode"
+                    :label="item.areaName"
+                    :value="item.areaCode"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script setup name="CityOptions">
+import { listArea, listCity, listProvince } from "@/api/region";
+
+import { reactive, ref, toRefs, watch } from "vue";
+
+const props = defineProps({
+  modelValue: Object,
+  labelWidth: {
+    type: Number,
+    default: 120,
+  },
+});
+const { modelValue, labelWidth } = toRefs(props);
+const formRef = ref(null);
+const provinceSelectList = ref([]); // 省
+const citySelectList = ref([]); // 市
+const districtSelectList = ref([]); // 区\
+const data = reactive({
+  rules: {
+    province: [
+      { required: true, message: "请选择省", trigger: ["change", "blur"] },
+    ],
+    city: [
+      { required: true, message: "请选择市", trigger: ["change", "blur"] },
+    ],
+    district: [
+      { required: true, message: "请选择区", trigger: ["change", "blur"] },
+    ],
+  },
+});
+const { rules } = toRefs(data);
+// 获取 省列表
+const getProvinceList = async () => {
+  const resp = await listProvince();
+  provinceSelectList.value = resp.data.map((el) => {
+    return { ...el, provinceCode: el.provinceCode.toString() };
+  });
+};
+// 获取市列表
+const getCityListByProvinceId = async (provinceId) => {
+  const { data } = await listCity(provinceId);
+  citySelectList.value = data.map((el) => {
+    return {
+      ...el,
+      cityCode: el.cityCode.toString(),
+    };
+  });
+};
+// 根据市id获取县区列表
+const getAreaListByCityId = async (cityId) => {
+  const { data } = await listArea(cityId);
+  districtSelectList.value = data.map((el) => {
+    return {
+      ...el,
+      areaCode: el.areaCode.toString(),
+    };
+  });
+};
+// 当省改变时
+const provinceChanged = () => {
+  // 清除市县代码列表
+  modelValue.value.city = undefined;
+  modelValue.value.area = undefined;
+  // 清除市县列表
+  citySelectList.value = [];
+  districtSelectList.value = [];
+  // 重新请求城市列表
+};
+// 当市改变时
+const cityChanged = () => {
+  // 清除县区代码列表
+  modelValue.value.area = undefined;
+  districtSelectList.value = [];
+};
+
+const validateForm = async () => {
+  try {
+    return await formRef.value.validate();
+  } catch (error) {
+    return false;
+  }
+};
+
+watch(
+  () => modelValue.value.province,
+  (val) => {
+    console.log("changed province");
+    val && getCityListByProvinceId(val);
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  () => modelValue.value.city,
+  (val) => {
+    console.log("changed city");
+    val && getAreaListByCityId(val);
+  },
+  {
+    immediate: true,
+  }
+);
+getProvinceList();
+
+defineExpose({
+  validateForm,
+});
+</script>
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 149524b..8f29dc3 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -68,7 +68,7 @@ const props = defineProps({
   // 是否显示提示
   isShowTip: {
     type: Boolean,
-    default: true
+    default: true,
   },
 });
 
@@ -79,33 +79,39 @@ const uploadList = ref([]);
 const dialogImageUrl = ref("");
 const dialogVisible = ref(false);
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
-const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
+const uploadImgUrl = ref(
+  import.meta.env.VITE_APP_BASE_API + "/business/sysFile/upload"
+); // 上传的图片服务器地址
 const headers = ref({ Authorization: "Bearer " + getToken() });
 const fileList = ref([]);
 const showTip = computed(
   () => props.isShowTip && (props.fileType || props.fileSize)
 );
 
-watch(() => props.modelValue, val => {
-  if (val) {
-    // 首先将值转为数组
-    const list = Array.isArray(val) ? val : props.modelValue.split(",");
-    // 然后将数组转为对象数组
-    fileList.value = list.map(item => {
-      if (typeof item === "string") {
-        if (item.indexOf(baseUrl) === -1) {
-          item = { name: baseUrl + item, url: baseUrl + item };
-        } else {
-          item = { name: item, url: item };
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      // 首先将值转为数组
+      const list = Array.isArray(val) ? val : props.modelValue.split(",");
+      // 然后将数组转为对象数组
+      fileList.value = list.map((item) => {
+        if (typeof item === "string") {
+          if (item.indexOf(baseUrl) === -1) {
+            item = { name: baseUrl + item, url: baseUrl + item };
+          } else {
+            item = { name: item, url: item };
+          }
         }
-      }
-      return item;
-    });
-  } else {
-    fileList.value = [];
-    return [];
-  }
-},{ deep: true, immediate: true });
+        return item;
+      });
+    } else {
+      fileList.value = [];
+      return [];
+    }
+  },
+  { deep: true, immediate: true }
+);
 
 // 上传前loading加载
 function handleBeforeUpload(file) {
@@ -115,7 +121,7 @@ function handleBeforeUpload(file) {
     if (file.name.lastIndexOf(".") > -1) {
       fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
     }
-    isImg = props.fileType.some(type => {
+    isImg = props.fileType.some((type) => {
       if (file.type.indexOf(type) > -1) return true;
       if (fileExtension && fileExtension.indexOf(type) > -1) return true;
       return false;
@@ -148,7 +154,7 @@ function handleExceed() {
 // 上传成功回调
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
-    uploadList.value.push({ name: res.fileName, url: res.fileName });
+    uploadList.value.push({ name: res.fileName, url: res.url });
     uploadedSuccessfully();
   } else {
     number.value--;
@@ -161,7 +167,7 @@ function handleUploadSuccess(res, file) {
 
 // 删除图片
 function handleDelete(file) {
-  const findex = fileList.value.map(f => f.name).indexOf(file.name);
+  const findex = fileList.value.map((f) => f.name).indexOf(file.name);
   if (findex > -1 && uploadList.value.length === number.value) {
     fileList.value.splice(findex, 1);
     emit("update:modelValue", listToString(fileList.value));
@@ -172,7 +178,9 @@ function handleDelete(file) {
 // 上传结束处理
 function uploadedSuccessfully() {
   if (number.value > 0 && uploadList.value.length === number.value) {
-    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    fileList.value = fileList.value
+      .filter((f) => f.url !== undefined)
+      .concat(uploadList.value);
     uploadList.value = [];
     number.value = 0;
     emit("update:modelValue", listToString(fileList.value));
@@ -208,6 +216,6 @@ function listToString(list, separator) {
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 :deep(.hide .el-upload--picture-card) {
-    display: none;
+  display: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/basic/car/group/index.vue b/src/views/basic/car/group/index.vue
new file mode 100644
index 0000000..a384579
--- /dev/null
+++ b/src/views/basic/car/group/index.vue
@@ -0,0 +1,320 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="分组名称" prop="groupName">
+        <el-input
+          v-model="queryParams.groupName"
+          placeholder="请输入分组名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="编码" prop="groupCode">
+        <el-input
+          v-model="queryParams.groupCode"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="租户ID" prop="tenantId">
+        <el-input
+          v-model="queryParams.tenantId"
+          placeholder="请输入租户ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['car:group:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['car:group:edit']"
+          >修改</el-button
+        >
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['car:group:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['car:group:export']"
+          >导出</el-button
+        >
+      </el-col> -->
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="groupList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="车辆分组ID" align="center" prop="groupId" />
+      <el-table-column label="分组名称" align="center" prop="groupName" />
+      <el-table-column label="编码" align="center" prop="groupCode" />
+      <!-- <el-table-column label="租户ID" align="center" prop="tenantId" /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['car:group:edit']"
+            >修改</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['car:group:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改车辆分组对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="groupRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="分组名称" prop="groupName">
+          <el-input v-model="form.groupName" placeholder="请输入分组名称" />
+        </el-form-item>
+        <el-form-item label="编码" prop="groupCode">
+          <el-input v-model="form.groupCode" placeholder="请输入编码" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+        <!-- <el-form-item label="租户ID" prop="tenantId">
+          <el-input v-model="form.tenantId" placeholder="请输入租户ID" />
+        </el-form-item> -->
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Group">
+import {
+  listGroup,
+  getGroup,
+  delGroup,
+  addGroup,
+  updateGroup,
+} from "@/api/car/group";
+
+const { proxy } = getCurrentInstance();
+
+const groupList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    groupName: null,
+    groupCode: null,
+    // tenantId: null,
+  },
+  rules: {},
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询车辆分组列表 */
+function getList() {
+  loading.value = true;
+  listGroup(queryParams.value).then((response) => {
+    groupList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    groupId: null,
+    groupName: null,
+    groupCode: null,
+    remark: null,
+    createTime: null,
+    createBy: null,
+    uuid: null,
+    // tenantId: null,
+  };
+  proxy.resetForm("groupRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => {
+    return { id: item.groupId, uuid: item.uuid };
+  });
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加车辆分组";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _groupId = row.groupId || ids.value;
+  getGroup(_groupId, row.uuid).then((response) => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改车辆分组";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["groupRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.groupId != null) {
+        updateGroup(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addGroup(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _groupIds = row.groupId
+    ? [{ id: row.groupId, uuid: row.uuid }]
+    : ids.value;
+  proxy.$modal
+    .confirm(
+      '是否确认删除车辆分组编号为"' +
+        _groupIds.map((el) => el.groupId).join(",") +
+        '"的数据项？'
+    )
+    .then(function () {
+      return delGroup(_groupIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "car/group/export",
+    {
+      ...queryParams.value,
+    },
+    `group_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>
diff --git a/src/views/basic/car/info/add.vue b/src/views/basic/car/info/add.vue
new file mode 100644
index 0000000..ee0af65
--- /dev/null
+++ b/src/views/basic/car/info/add.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="app-container">
+    <div class="title">添加车辆</div>
+    <el-form ref="infoRef" :model="form" :rules="rules" label-width="240px">
+      <el-form-item label="车牌号" prop="carCode">
+        <el-input v-model="form.carCode" placeholder="请输入车牌号" />
+      </el-form-item>
+      <el-form-item label="车辆名称" prop="carName">
+        <el-input v-model="form.carName" placeholder="请输入车辆名称" />
+      </el-form-item>
+      <el-form-item label="车辆容量" prop="carVolume">
+        <el-input v-model="form.carVolume" placeholder="请输入车辆容量" />
+      </el-form-item>
+      <el-form-item label="车辆型号" prop="carModel">
+        <el-input v-model="form.carModel" placeholder="请输入车辆型号" />
+      </el-form-item>
+      <el-form-item label="车架号" prop="frameCode">
+        <el-input v-model="form.frameCode" placeholder="请输入车架号" />
+      </el-form-item>
+      <el-form-item label="发动机号" prop="engineCode">
+        <el-input v-model="form.engineCode" placeholder="请输入发动机号" />
+      </el-form-item>
+      <el-form-item label="主要图片(一张)">
+        <image-upload v-model="form.mainPic" :limit="1" />
+      </el-form-item>
+      <el-form-item label="车辆类别" prop="carCategory">
+        <el-checkbox-group v-model="form.carCategory">
+          <el-checkbox label="1">行政公车</el-checkbox>
+          <el-checkbox label="2">物流货运</el-checkbox>
+          <el-checkbox label="3">旅游客运</el-checkbox>
+          <el-checkbox label="4">作业车辆</el-checkbox>
+          <el-checkbox label="5">通勤班车</el-checkbox>
+          <el-checkbox label="6">个人车辆</el-checkbox>
+          <el-checkbox label="7">其他车辆</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="行驶证" prop="vehicleLicense">
+        <image-upload v-model="form.vehicleLicense" :limit="1" />
+        <!-- <el-input v-model="form.vehicleLicense" placeholder="请输入行驶证" /> -->
+      </el-form-item>
+      <div class="form-item-group-title">类型信息</div>
+      <el-form-item label="分组" prop="groupId">
+        <el-select v-model="form.groupId" placeholder="请选择分组">
+          <ElOption
+            v-for="group in groupList"
+            :key="group.groupId"
+            :label="group.groupName"
+            :value="group.groupId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="类型(1自有/2外来)" prop="type">
+        <el-radio-group v-model="form.type" class="ml-4">
+          <el-radio label="1">自有</el-radio>
+          <el-radio label="2">外来</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="form.status" placeholder="请选择状态">
+          <ElOption label="正常" value="0" />
+          <ElOption label="暂停" value="1" />
+        </el-select>
+      </el-form-item>
+      <div class="form-item-group-title">默认司机信息</div>
+      <el-form-item label="司机ID" prop="driverId">
+        <el-select v-model="form.driverId" placeholder="请选择司机ID">
+          <ElOption
+            v-for="driver in driverList"
+            :key="driver.driverId"
+            :label="driver.name"
+            :value="driver.driverId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="form.driverId" label="司机手机号">
+        <el-input
+          :model-value="
+            driverList.find((el) => el.driverId === form.driverId)?.phone
+          "
+        ></el-input>
+      </el-form-item>
+      <div class="form-item-group-title">车辆保养信息</div>
+      <el-form-item label="总里程数(km)" prop="totalMileage">
+        <el-input
+          v-model="form.totalMileage"
+          placeholder="请输入总里程数(km)"
+        />
+      </el-form-item>
+      <el-form-item label="加油类型" prop="oilType">
+        <el-input
+          v-model="form.oilType"
+          placeholder="请输入内容，如92#"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="购置日期" prop="buyDate">
+        <el-input v-model="form.buyDate" placeholder="请输入购置日期" />
+      </el-form-item>
+      <div class="form-item-group-title">定位设备信息</div>
+      <el-form-item label="定位设备编码" prop="locateEquipmentCode">
+        <el-input
+          v-model="form.locateEquipmentCode"
+          placeholder="请输入定位设备编码"
+        />
+      </el-form-item>
+      <el-form-item label="最大限速(km/h)" prop="maxSpeed">
+        <el-input v-model="form.maxSpeed" placeholder="请输入最大限速(km/h)" />
+      </el-form-item>
+      <el-form-item label="最大连续驾驶时间(分钟)" prop="maxContinuityTime">
+        <el-input
+          v-model="form.maxContinuityTime"
+          placeholder="请输入最大连续驾驶时间(分钟)"
+        />
+      </el-form-item>
+      <el-form-item label="最大静止时间(分钟)" prop="maxStopTime">
+        <el-input
+          v-model="form.maxStopTime"
+          placeholder="请输入最大静止时间(分钟)"
+        />
+      </el-form-item>
+      <div class="form-item-group-title">其他信息</div>
+      <el-form-item label="其他照片(<=6张)" prop="otherPhotos">
+        <!-- <el-input
+          v-model="form.otherPhotos"
+          type="textarea"
+          placeholder="请输入内容"
+          :limit="6"
+        /> -->
+        <image-upload v-model="form.otherPhotos" :limit="6" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="租户ID" prop="tenantId">
+        <el-input v-model="form.tenantId" placeholder="请输入租户ID" />
+      </el-form-item>
+    </el-form>
+    <el-row justify="center" :gutter="10">
+      <el-col :span="1.5">
+        <el-button type="primary" @click="submitForm">保存</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button @click="back">取消</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup name="AddCar">
+import tab from "@/plugins/tab";
+import { useRoute } from "vue-router";
+import { listGroup } from "@/api/car/group";
+import { reactive, toRefs, onMounted } from "vue";
+import { getInfo, addInfo, updateInfo } from "@/api/car/info";
+import { listInfo as listDriver } from "@/api/driver/info";
+
+const route = useRoute();
+const { proxy } = getCurrentInstance();
+const groupList = ref([]); // 分组列表
+const driverList = ref([]); // 司机列表
+const data = reactive({
+  form: {
+    carCategory: [],
+  },
+  rules: {
+    carCode: [
+      {
+        required: true,
+        message: "请填写车牌号",
+        trigger: "blur",
+      },
+    ],
+    carCategory: [
+      {
+        required: true,
+        message: "请选择车辆类型",
+        trigger: "change",
+      },
+    ],
+    type: [
+      {
+        required: true,
+        message: "请选择类型(自有/外来)",
+        trigger: "change",
+      },
+    ],
+    status: [
+      {
+        required: true,
+        message: "请选择状态",
+        trigger: "change",
+      },
+    ],
+  },
+});
+const { form, rules } = toRefs(data);
+// 表单重置
+function reset() {
+  form.value = {
+    carId: null,
+    carCode: null,
+    carName: null,
+    carVolume: null,
+    carModel: null,
+    frameCode: null,
+    engineCode: null,
+    mainPic: null,
+    carCategory: [],
+    vehicleLicense: null,
+    groupId: null,
+    type: null,
+    status: "0",
+    driverId: null,
+    totalMileage: null,
+    oilType: null,
+    buyDate: null,
+    locateEquipmentCode: null,
+    maxSpeed: null,
+    maxContinuityTime: null,
+    maxStopTime: null,
+    otherPhotos: null,
+    remark: null,
+    createTime: null,
+    createBy: null,
+    uuid: null,
+    tenantId: null,
+  };
+  proxy.resetForm("infoRef");
+}
+function back() {
+  reset();
+  tab.closeOpenPage({ path: "/basic/car/info" });
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["infoRef"].validate((valid) => {
+    if (valid) {
+      //   form.value.carCategory = form.value.carCategory.join(",");
+      if (form.value.carId != null) {
+        updateInfo({
+          ...form.value,
+          carCategory: form.value.carCategory.join(","),
+        }).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          back();
+        });
+      } else {
+        addInfo({
+          ...form.value,
+          carCategory: form.value.carCategory.join(","),
+        }).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          back();
+        });
+      }
+    }
+  });
+}
+onMounted(async () => {
+  reset();
+  if (route.query.carId && route.query.uuid) {
+    const resp = await getInfo(route.query.carId, route.query.uuid);
+    form.value = {
+      ...resp.data,
+      carCategory: resp.data.carCategory
+        ? resp.data.carCategory.split(",")
+        : [],
+    };
+  }
+});
+// 获取分组列表
+listGroup().then((resp) => {
+  groupList.value = resp.rows;
+});
+listDriver().then((resp) => {
+  driverList.value = resp.rows;
+});
+</script>
+<style scoped lang="scss">
+.title {
+  font-size: 14px;
+  font-weight: 700;
+  padding: 10px 0;
+}
+.form-item-group-title {
+  width: 150px;
+  text-align: center;
+  margin: 10px 0 10px 26px;
+  border-bottom: 1px solid #bbb;
+  font-size: 14px;
+  color: #101010;
+}
+</style>
diff --git a/src/views/basic/car/info/index.vue b/src/views/basic/car/info/index.vue
new file mode 100644
index 0000000..8a1f699
--- /dev/null
+++ b/src/views/basic/car/info/index.vue
@@ -0,0 +1,476 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="车牌号" prop="carCode">
+        <el-input
+          v-model="queryParams.carCode"
+          placeholder="请输入车牌号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="车辆名称" prop="carName">
+        <el-input
+          v-model="queryParams.carName"
+          placeholder="请输入车辆名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车辆容量" prop="carVolume">
+        <el-input
+          v-model="queryParams.carVolume"
+          placeholder="请输入车辆容量"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车辆型号" prop="carModel">
+        <el-input
+          v-model="queryParams.carModel"
+          placeholder="请输入车辆型号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车架号" prop="frameCode">
+        <el-input
+          v-model="queryParams.frameCode"
+          placeholder="请输入车架号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="发动机号" prop="engineCode">
+        <el-input
+          v-model="queryParams.engineCode"
+          placeholder="请输入发动机号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车辆类别" prop="carCategory">
+        <el-input
+          v-model="queryParams.carCategory"
+          placeholder="请输入车辆类别"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="行驶证" prop="vehicleLicense">
+        <el-input
+          v-model="queryParams.vehicleLicense"
+          placeholder="请输入行驶证"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="分组ID" prop="groupId">
+        <el-input
+          v-model="queryParams.groupId"
+          placeholder="请输入分组ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="司机ID" prop="driverId">
+        <el-input
+          v-model="queryParams.driverId"
+          placeholder="请输入司机ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="总里程数(km)" prop="totalMileage">
+        <el-input
+          v-model="queryParams.totalMileage"
+          placeholder="请输入总里程数(km)"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="购置日期" prop="buyDate">
+        <el-input
+          v-model="queryParams.buyDate"
+          placeholder="请输入购置日期"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="定位设备编码" prop="locateEquipmentCode">
+        <el-input
+          v-model="queryParams.locateEquipmentCode"
+          placeholder="请输入定位设备编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="最大限速(km/h)" prop="maxSpeed">
+        <el-input
+          v-model="queryParams.maxSpeed"
+          placeholder="请输入最大限速(km/h)"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="最大连续驾驶时间(分钟)" prop="maxContinuityTime">
+        <el-input
+          v-model="queryParams.maxContinuityTime"
+          placeholder="请输入最大连续驾驶时间(分钟)"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="最大静止时间(分钟)" prop="maxStopTime">
+        <el-input
+          v-model="queryParams.maxStopTime"
+          placeholder="请输入最大静止时间(分钟)"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="租户ID" prop="tenantId">
+        <el-input
+          v-model="queryParams.tenantId"
+          placeholder="请输入租户ID"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['car:info:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['car:info:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['car:info:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="primary" plain @click="goGroupManage"
+          >分组管理</el-button
+        >
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="infoList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="车辆ID" align="center" prop="carId" />
+      <el-table-column label="车牌号" align="center" prop="carCode" />
+      <el-table-column label="车辆名称" align="center" prop="carName" />
+      <!-- <el-table-column label="车辆容量" align="center" prop="carVolume" />
+      <el-table-column label="车辆型号" align="center" prop="carModel" />
+      <el-table-column label="车架号" align="center" prop="frameCode" />
+      <el-table-column label="发动机号" align="center" prop="engineCode" /> -->
+      <!-- <el-table-column
+        label="主要图片(一张)"
+        align="center"
+        prop="mainPic"
+        width="100"
+      >
+        <template #default="scope">
+          <image-preview :src="scope.row.mainPic" :width="50" :height="50" />
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="车辆类别" align="center" prop="carCategory" />
+      <el-table-column label="行驶证" align="center" prop="vehicleLicense" />
+      <el-table-column label="分组ID" align="center" prop="groupId" /> -->
+      <!-- <el-table-column label="类型(1自有/2外来)" align="center" prop="${field}">
+        <template #default="{ row }">
+          {{ "未知" }}
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column label="状态(0正常/1禁用)" align="center" prop="status" />
+      <el-table-column label="司机ID" align="center" prop="driverId" /> -->
+      <!-- <el-table-column
+        label="总里程数(km)"
+        align="center"
+        prop="totalMileage"
+      /> -->
+      <!-- <el-table-column label="加油类型" align="center" prop="${field}">
+        <template #default="{ row }">
+          {{ "未知" }}
+        </template>
+      </el-table-column>
+      <el-table-column label="购置日期" align="center" prop="buyDate" /> -->
+      <el-table-column
+        label="定位设备编码"
+        align="center"
+        prop="locateEquipmentCode"
+      />
+      <!-- <el-table-column label="最大限速(km/h)" align="center" prop="maxSpeed" />
+      <el-table-column
+        label="最大连续驾驶时间(分钟)"
+        align="center"
+        prop="maxContinuityTime"
+      />
+      <el-table-column
+        label="最大静止时间(分钟)"
+        align="center"
+        prop="maxStopTime"
+      />
+      <el-table-column
+        label="其他照片(<=6张)"
+        align="center"
+        prop="otherPhotos"
+      /> -->
+      <el-table-column label="备注" align="center" prop="remark" />
+      <!-- <el-table-column label="租户ID" align="center" prop="tenantId" /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['car:info:edit']"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script setup name="Info">
+import {
+  listInfo,
+  // getInfo,
+  delInfo,
+  // addInfo,
+  // updateInfo,
+} from "@/api/car/info";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+
+const infoList = ref([]);
+// const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+// const title = ref("");
+
+const data = reactive({
+  // form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    carCode: null,
+    carName: null,
+    carVolume: null,
+    carModel: null,
+    frameCode: null,
+    engineCode: null,
+    mainPic: null,
+    carCategory: null,
+    vehicleLicense: null,
+    groupId: null,
+    type: null,
+    status: null,
+    driverId: null,
+    totalMileage: null,
+    oilType: null,
+    buyDate: null,
+    locateEquipmentCode: null,
+    maxSpeed: null,
+    maxContinuityTime: null,
+    maxStopTime: null,
+    otherPhotos: null,
+    tenantId: null,
+  },
+  // rules: {},
+});
+
+const { queryParams } = toRefs(data);
+
+/** 查询车辆信息列表 */
+function getList() {
+  loading.value = true;
+  listInfo(queryParams.value).then((response) => {
+    infoList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// // 取消按钮
+// function cancel() {
+//   open.value = false;
+//   reset();
+// }
+
+// 表单重置
+// function reset() {
+//   form.value = {
+//     carId: null,
+//     carCode: null,
+//     carName: null,
+//     carVolume: null,
+//     carModel: null,
+//     frameCode: null,
+//     engineCode: null,
+//     mainPic: null,
+//     carCategory: null,
+//     vehicleLicense: null,
+//     groupId: null,
+//     type: null,
+//     status: "0",
+//     driverId: null,
+//     totalMileage: null,
+//     oilType: null,
+//     buyDate: null,
+//     locateEquipmentCode: null,
+//     maxSpeed: null,
+//     maxContinuityTime: null,
+//     maxStopTime: null,
+//     otherPhotos: null,
+//     remark: null,
+//     createTime: null,
+//     createBy: null,
+//     uuid: null,
+//     tenantId: null,
+//   };
+//   proxy.resetForm("infoRef");
+// }
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => {
+    return { id: item.carId, uuid: item.uuid };
+  });
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  router.push({
+    path: "/basic/car/info/add",
+  });
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  // reset();
+  const _carId = row.carId || ids.value;
+  router.push({
+    path: "/basic/car/info/add",
+    query: {
+      carId: _carId,
+      uuid: row.uuid,
+    },
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _carIds = row.carId ? [{ id: row.carId, uuid: row.uuid }] : ids.value;
+  proxy.$modal
+    .confirm(
+      '是否确认删除车辆信息编号为"' +
+        _carIds.map((el) => el.carId).join(",") +
+        '"的数据项？'
+    )
+    .then(function () {
+      return delInfo(_carIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "car/info/export",
+    {
+      ...queryParams.value,
+    },
+    `info_${new Date().getTime()}.xlsx`
+  );
+}
+
+function goGroupManage() {
+  router.push({
+    path: "/basic/car/group",
+  });
+}
+
+getList();
+</script>
diff --git a/src/views/basic/driver/info/add.vue b/src/views/basic/driver/info/add.vue
new file mode 100644
index 0000000..bec19a2
--- /dev/null
+++ b/src/views/basic/driver/info/add.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="app-container">
+    <div class="title">添加司机</div>
+    <el-form ref="infoRef" :model="form" :rules="rules" label-width="240px">
+      <el-form-item label="司机姓名" prop="name">
+        <el-input v-model="form.name" placeholder="请输入司机姓名" />
+      </el-form-item>
+      <el-form-item label="性别" prop="gender">
+        <el-radio-group v-model="form.gender" class="ml-4">
+          <el-radio label="0" size="large">男</el-radio>
+          <el-radio label="1" size="large">女</el-radio>
+          <el-radio label="2" size="large">未知</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input
+          v-model="form.phone"
+          placeholder="请输入手机号"
+          :maxlength="11"
+        />
+      </el-form-item>
+      <el-form-item label="身份证" prop="idCard">
+        <el-input v-model="form.idCard" placeholder="请输入身份证" />
+      </el-form-item>
+      <el-form-item label="员工编号" prop="employeeNo">
+        <el-input v-model="form.employeeNo" placeholder="请输入员工编号" />
+      </el-form-item>
+      <CitySelect v-model="form" :label-width="240"></CitySelect>
+      <!-- <el-form-item label="省" prop="province">
+        <el-input v-model="form.province" placeholder="请输入省" />
+      </el-form-item>
+      <el-form-item label="市" prop="city">
+        <el-input v-model="form.city" placeholder="请输入市" />
+      </el-form-item>
+      <el-form-item label="区" prop="area">
+        <el-input v-model="form.area" placeholder="请输入区" />
+      </el-form-item> -->
+      <el-form-item label="详细地址" prop="address">
+        <el-input v-model="form.address" placeholder="请输入详细地址" />
+      </el-form-item>
+      <div class="form-item-group-title">类型信息</div>
+      <el-form-item label="部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="deptOptions"
+          :props="{ value: 'id', label: 'label', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          check-strictly
+          :render-after-expand="false"
+        />
+      </el-form-item>
+      <el-form-item label="司机类型" prop="driverType">
+        <el-radio-group v-model="form.driverType" class="ml-4">
+          <el-radio label="0" size="large">员工</el-radio>
+          <el-radio label="1" size="large">车队司机</el-radio>
+          <el-radio label="2" size="large">外来司机</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="form.status" class="ml-4">
+          <el-radio label="0" size="large">正常</el-radio>
+          <el-radio label="1" size="large">休息</el-radio>
+          <el-radio label="2" size="large">停用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <div class="form-item-group-title">车辆信息</div>
+      <el-form-item label="车辆" prop="carId">
+        <el-select v-model="form.carId" placeholder="请选择车辆">
+          <ElOption
+            v-for="car in carList"
+            :key="car.carId"
+            :label="car.carName"
+            :value="car.carId"
+          />
+        </el-select>
+      </el-form-item>
+      <div class="form-item-group-title">其他信息</div>
+      <el-form-item label="驾驶证" prop="driverLicense">
+        <image-upload v-model="form.driverLicense" />
+      </el-form-item>
+      <el-form-item label="其他照片" prop="otherPhotos">
+        <image-upload v-model="form.otherPhotos" />
+      </el-form-item>
+      <el-form-item label="紧急联系人姓名" prop="urgentUser">
+        <el-input
+          v-model="form.urgentUser"
+          placeholder="请输入紧急联系人姓名"
+        />
+      </el-form-item>
+      <el-form-item label="紧急联系人电话" prop="urgentPhone">
+        <el-input
+          v-model="form.urgentPhone"
+          placeholder="请输入紧急联系人电话"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <!-- <el-form-item label="租户ID" prop="tenantId">
+        <el-input v-model="form.tenantId" placeholder="请输入租户ID" />
+      </el-form-item>
+      <el-form-item label="用户ID" prop="userId">
+        <el-input v-model="form.userId" placeholder="请输入用户ID" />
+      </el-form-item> -->
+    </el-form>
+    <el-row justify="center" :gutter="10">
+      <el-col :span="1.5">
+        <el-button type="primary" @click="submitForm">保存</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button @click="back">取消</el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup name="AddDriver">
+import { reactive, toRefs, ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { getInfo, updateInfo, addInfo } from "@/api/driver/info";
+import { listInfo as listCarInfo } from "@/api/car/info";
+import { deptTreeSelect } from "@/api/system/user";
+import CitySelect from "@/components/CitySelect";
+import tab from "@/plugins/tab";
+const route = useRoute();
+const { proxy } = getCurrentInstance();
+const deptOptions = ref(undefined);
+const carList = ref([]);
+const data = reactive({
+  form: {},
+  rules: {
+    name: [{ required: true, message: "请输入司机姓名", trigger: "blur" }],
+    idCard: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
+    status: [{ required: true, message: "请选择状态", trigger: "change" }],
+    phone: [
+      { required: true, message: "请输入司机手机号", trigger: "blur" },
+      {
+        pattern: /^1[3456789]\d{9}$/,
+        message: "手机号格式不正确",
+        trigger: "blur",
+      },
+    ],
+    deptId: [
+      {
+        required: true,
+        message: "请选择部门",
+        trigger: "change",
+      },
+    ],
+    driverType: [
+      {
+        required: true,
+        message: "请选择司机类型",
+        trigger: "change",
+      },
+    ],
+  },
+});
+
+const { form, rules } = toRefs(data);
+// 表单重置
+function reset() {
+  form.value = {
+    driverId: null,
+    name: null,
+    gender: null,
+    phone: null,
+    idCard: null,
+    employeeNo: null,
+    province: null,
+    city: null,
+    area: null,
+    address: null,
+    deptId: null,
+    driverType: null,
+    status: "0",
+    carId: null,
+    driverLicense: null,
+    otherPhotos: null,
+    urgentUser: null,
+    urgentPhone: null,
+    remark: null,
+    uuid: null,
+    tenantId: null,
+    userId: null,
+  };
+  proxy.resetForm("infoRef");
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["infoRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.driverId != null) {
+        updateInfo(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          back();
+        });
+      } else {
+        addInfo(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          back();
+        });
+      }
+    }
+  });
+}
+function back() {
+  reset();
+  tab.closeOpenPage({ path: "/basic/driver/info" });
+}
+onMounted(async () => {
+  reset();
+  if (route.query.driverId && route.query.uuid) {
+    const { data } = await getInfo(route.query.driverId, route.query.uuid);
+    form.value = data;
+  }
+});
+listCarInfo().then((resp) => {
+  carList.value = resp.rows;
+});
+/** 查询部门下拉树结构 */
+deptTreeSelect().then((response) => {
+  deptOptions.value = response.data;
+});
+</script>
+<style lang="scss" scoped>
+.form-item-group-title {
+  width: 150px;
+  text-align: center;
+  margin: 10px 0 10px 26px;
+  border-bottom: 1px solid #bbb;
+  font-size: 14px;
+  color: #101010;
+}
+</style>
diff --git a/src/views/basic/driver/info/index.vue b/src/views/basic/driver/info/index.vue
new file mode 100644
index 0000000..72a0c4f
--- /dev/null
+++ b/src/views/basic/driver/info/index.vue
@@ -0,0 +1,217 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="司机姓名" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入司机姓名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input
+          v-model="queryParams.phone"
+          placeholder="请输入手机号"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['driver:info:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['driver:info:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['driver:info:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="infoList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="司机ID" align="center" prop="driverId" />
+      <el-table-column label="司机姓名" align="center" prop="name" />
+      <el-table-column label="手机号" align="center" prop="phone" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['driver:info:edit']"
+            >修改</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script setup name="Info">
+import { listInfo, delInfo } from "@/api/driver/info";
+import { useRouter } from "vue-router";
+
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const infoList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    name: null,
+    phone: null,
+  },
+});
+
+const { queryParams } = toRefs(data);
+
+/** 查询司机信息列表 */
+function getList() {
+  loading.value = true;
+  listInfo(queryParams.value).then((response) => {
+    infoList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => {
+    return { id: item.driverId, uuid: item.uuid };
+  });
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  router.push({
+    path: "/basic/driver/info/add",
+  });
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  const _driverId = row.driverId || ids.value;
+  router.push({
+    path: "/basic/driver/info/add",
+    query: {
+      driverId: _driverId,
+      uuid: row.uuid,
+    },
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _driverIds = row.driverId
+    ? [{ id: row.driverId, uuid: row.uuid }]
+    : ids.value;
+  proxy.$modal
+    .confirm(
+      '是否确认删除司机信息编号为"' +
+        _driverIds.map((el) => el.driverId).join(",") +
+        '"的数据项？'
+    )
+    .then(function () {
+      return delInfo(_driverIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "driver/info/export",
+    {
+      ...queryParams.value,
+    },
+    `info_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>
diff --git a/src/views/basic/map-route/RouteStepList.vue b/src/views/basic/map-route/RouteStepList.vue
new file mode 100644
index 0000000..058ea9c
--- /dev/null
+++ b/src/views/basic/map-route/RouteStepList.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="description">
+    <div class="roads">
+      <div class="road-item" v-for="(road, index) in roadsList" :key="road">
+        {{ road }}
+        <ElIcon v-if="index != roadsList.length - 1">
+          <ArrowRight />
+        </ElIcon>
+      </div>
+    </div>
+    <div class="time-distance">
+      <span class="time">{{ (routeExtData.time / 60).toFixed(1) }}分钟</span>
+      (<span class="distance">{{ routeExtData.distance }}米</span>)
+      <span class="seg">|</span>
+      <span class="policy">
+        {{ routeExtData.policy }}
+      </span>
+    </div>
+  </div>
+  <div
+    @click="emit('start-click')"
+    class="steps-item start"
+    v-if="stepsList.length"
+  >
+    <div
+      class="icon"
+      :style="{
+        backgroundPosition: stepIconMap.get('起点'),
+      }"
+    ></div>
+    <div class="content">起点</div>
+  </div>
+  <div
+    v-for="(item, index) in stepsList"
+    :key="item.start_location.lng"
+    class="steps-item"
+    @click="handleRouteClick(item, index)"
+  >
+    <div
+      class="icon"
+      :style="{
+        backgroundPosition: stepIconMap.get(item.action) ?? '-46px -23px',
+      }"
+    ></div>
+    <div class="content">
+      {{ item.instruction }}
+    </div>
+  </div>
+  <div
+    @click="emit('end-click')"
+    class="steps-item start"
+    v-if="stepsList.length"
+  >
+    <div
+      class="icon"
+      :style="{
+        backgroundPosition: stepIconMap.get('终点'),
+      }"
+    ></div>
+    <div class="content">终点</div>
+  </div>
+</template>
+<script setup name="StepsList">
+import { ArrowRight } from "@element-plus/icons-vue";
+import { computed, toRefs } from "vue";
+
+const emit = defineEmits(["step-click", "start-click", "end-click"]);
+const props = defineProps({
+  stepsList: {
+    type: Array,
+    required: true,
+  },
+  routeExtData: {
+    type: Object,
+    required: true,
+  },
+});
+const { stepsList } = toRefs(props);
+const roadsList = computed(() =>
+  stepsList.value
+    ? [...new Set(stepsList.value.map((el) => el.road).filter((el) => !!el))]
+    : []
+);
+const stepIconMap = new Map([
+  ["靠左", "-406px -23px"],
+  ["靠右", "-445px -23px"],
+  ["左转", "-87px -23px"],
+  ["右转", "-124px -23px"],
+  ["左转调头", "-327px -23px"],
+  ["向左前方行驶", "-165px -23px"],
+  ["向右前方行驶", "-206px -23px"],
+  ["向左后方行驶", "-246px -23px"],
+  ["减速行驶", "-524px -23px"],
+  ["终点", "-126px -104px"],
+  ["起点", "-47px -104px"],
+]);
+
+const handleRouteClick = (data, index) => {
+  emit("step-click", data, index);
+};
+</script>
+<style scoped lang="scss">
+.description {
+  border-bottom: 1px solid #e6e6e6;
+  padding: 8px 8px;
+  .roads {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    font-weight: bold;
+    overflow: hidden;
+    .road-item {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+  }
+  .time-distance {
+    display: flex;
+    margin-top: 5px;
+    font-size: 13px;
+    .seg {
+      margin: 0px 3px;
+    }
+  }
+}
+.steps-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  &:not(:last-child) {
+    // margin-bottom: 10px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .icon {
+    margin-right: 8px;
+    width: 20px;
+    height: 20px;
+    color: #fff;
+    line-height: 20px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    background-color: #fff;
+    // background-position: -47px -104px;
+    background-image: url(https://webapi.amap.com/theme/v1.3/images/newpc/diricon.png);
+  }
+  .content {
+    font-size: 12px;
+  }
+  &.start .content {
+    font-size: 14px;
+    font-weight: 700;
+  }
+}
+</style>
diff --git a/src/views/basic/map-route/index.vue b/src/views/basic/map-route/index.vue
new file mode 100644
index 0000000..0d04bfd
--- /dev/null
+++ b/src/views/basic/map-route/index.vue
@@ -0,0 +1,625 @@
+<template>
+  <div id="map-container"></div>
+  <el-drawer
+    v-model="drawer"
+    direction="ltr"
+    :close-on-click-modal="false"
+    modal-class="control-drawer-modal"
+    size="25%"
+    :modal="false"
+    :show-close="false"
+    :with-header="false"
+  >
+    <el-row justify="center">
+      <el-radio-group v-model="carType" size="small">
+        <el-radio-button label="car">小车</el-radio-button>
+        <el-radio-button label="truck">货车</el-radio-button>
+      </el-radio-group>
+    </el-row>
+    <el-row :gutter="10" justify="space-between">
+      <el-col :span="2">
+        <div
+          :style="{
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+          }"
+        >
+          <el-icon color="#30a1f0"><Sort /></el-icon>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <el-form ref="routeFormRef" id="route-form" :model="formData">
+          <el-form-item prop="startName">
+            <el-popover
+              :width="300"
+              :visible="showStartSuggestion && !!formData.startName"
+              title="搜索建议"
+            >
+              <div
+                v-for="item in searchTips"
+                :key="item.id"
+                class="suggestion-item"
+                @click="searchPoint(item.name, 'start')"
+              >
+                {{ item.name }}
+              </div>
+              <template #reference>
+                <el-input
+                  v-model="formData.startName"
+                  size="small"
+                  @keydown.enter="searchPoint(formData.startName, 'start')"
+                  @input="handleInput('start', $event)"
+                  @focus="
+                    nowSearch = 'start';
+                    showStartSuggestion = true;
+                  "
+                  @blur="
+                    showStartSuggestion = false;
+                    nowSearch = '';
+                  "
+                  :suffix-icon="
+                    formData.startLngLat.length ? `circle-check-filled` : null
+                  "
+                >
+                  <template #prepend>起</template>
+                </el-input>
+              </template>
+            </el-popover>
+          </el-form-item>
+          <el-form-item prop="endName">
+            <el-popover
+              :width="300"
+              :visible="showEndSuggestion && !!formData.endName"
+              title="搜索建议"
+            >
+              <div
+                v-for="item in searchTips"
+                :key="item.id"
+                class="suggestion-item"
+                @click="searchPoint(item.name, 'end')"
+              >
+                {{ item.name }}
+              </div>
+              <template #reference>
+                <el-input
+                  v-model="formData.endName"
+                  size="small"
+                  @input="getAutoComplete"
+                  @keydown.enter="searchPoint(formData.endName, 'end')"
+                  @focus="
+                    nowSearch = 'end';
+                    // map.clearMap();
+                    showEndSuggestion = true;
+                  "
+                  @blur="
+                    showEndSuggestion = false;
+                    nowSearch = '';
+                    // searchTips = [];
+                  "
+                  :suffix-icon="
+                    formData.endLngLat.length ? `circle-check-filled` : null
+                  "
+                >
+                  <template #prepend>终</template>
+                </el-input>
+              </template>
+            </el-popover>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="2">
+        <div
+          :style="{
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+          }"
+        >
+          <el-icon color="#30a1f0"><CirclePlusFilled /></el-icon>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row justify="space-between">
+      <el-button link @click="clearRoute" size="small">清除路线</el-button>
+      <el-button type="primary" @click="searchRoute" size="small"
+        >查询</el-button
+      >
+    </el-row>
+    <el-tabs
+      v-if="showStepPane"
+      v-model="activeTabName"
+      @tab-click="handleTabClick"
+    >
+      <!-- :disabled="!stepsList.length" -->
+      <el-tab-pane label="费用最低" name="LEAST_FEE">
+        <div id="panel"></div>
+      </el-tab-pane>
+      <!-- :disabled="!stepsList.length" -->
+      <el-tab-pane label="时间最短" name="LEAST_TIME">
+        <route-step-list
+          :steps-list="stepsList"
+          :route-ext-data="routeExtData"
+          @start-click="map.setFitView([startMarker])"
+          @end-click="map.setFitView([endMarker])"
+          @step-click="handleRouteClick"
+      /></el-tab-pane>
+      <!-- :disabled="!stepsList.length" -->
+      <el-tab-pane label="距离最短" name="LEAST_DISTANCE">
+        <route-step-list
+          :steps-list="stepsList"
+          :route-ext-data="routeExtData"
+          @step-click="handleRouteClick"
+          @start-click="map.setFitView([startMarker])"
+          @end-click="map.setFitView([endMarker])"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </el-drawer>
+  <el-button
+    id="drawer-switch"
+    type="primary"
+    circle
+    :icon="drawer ? ArrowLeftBold : ArrowRightBold"
+    @click="switchDrawer"
+  ></el-button>
+</template>
+<script setup>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import startPng from "@/assets/images/start.png";
+import endPng from "@/assets/images/end.png";
+
+import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
+import markBsPng from "@/assets/images/mark_bs.png";
+import { ElMessage } from "element-plus";
+import { computed, onMounted, reactive, ref, shallowRef, toRefs } from "vue";
+import RouteStepList from "./RouteStepList.vue";
+
+const map = shallowRef(null);
+const AMap = shallowRef(null);
+const carType = ref("car"); // car: 小车, truck: 卡车
+const driving = shallowRef(null); // 驾车路线规划插件
+const truckDriving = shallowRef(null); // 卡车路线规划插件
+const geocoder = shallowRef(null); // 经纬度转地址插件
+const placeSearch = shallowRef(null); // 地点搜索插件
+const autoComplete = shallowRef(null); // 搜索建议插件
+const startMarker = shallowRef(null); // 起点标记
+const endMarker = shallowRef(null); // 终点标记
+const resultInfoWindow = shallowRef(null);
+
+const searchResultMarkers = ref([]); // 搜索结果表笔列表
+const stepsPolylines = ref([]); // 路线步骤标记列表
+const stepsList = ref([]);
+const showStepPane = computed(
+  () =>
+    formData.value.startLngLat.length === 2 &&
+    formData.value.endLngLat.length === 2
+);
+const routePlugins = {
+  car: driving,
+  truck: truckDriving,
+};
+const drawer = ref(true);
+const routeFormRef = ref(null);
+const searchTips = ref([]);
+const nowSearch = ref("");
+const showStartSuggestion = ref(false);
+const showEndSuggestion = ref(false);
+const activeTabName = ref("LEAST_FEE");
+
+const data = reactive({
+  formData: {
+    startLngLat: [],
+    startName: "",
+    endName: "",
+    endLngLat: [],
+  },
+  routeExtData: {
+    distance: 0,
+    time: 0,
+    policy: "",
+  },
+});
+
+const { formData, routeExtData } = toRefs(data);
+
+// 初始化地图
+const initMap = async () => {
+  try {
+    AMap.value = await AMapLoader.load({
+      key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key，首次调用 load 时必填
+      // key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: [
+        "AMap.Driving",
+        "AMap.Scale",
+        "AMap.PlaceSearch",
+        "AMap.AutoComplete",
+        "AMap.Geocoder",
+        "AMap.TruckDriving",
+      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      AMapUI: {
+        // 是否加载 AMapUI，缺省不加载
+        version: "1.1", // AMapUI 版本
+        plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
+      },
+      Loca: {
+        // 是否加载 Loca， 缺省不加载
+        version: "2.0", // Loca 版本
+      },
+    });
+
+    map.value = new AMap.value.Map("map-container", {
+      zoom: 16, // 缩放级别
+      center: [117.290345, 31.797813], // 中心点
+      city: "合肥",
+    });
+    window.mapins = map.value;
+    /** 加载插件 */
+    // 驾车路线规划插件
+    driving.value = new AMap.value.Driving({
+      // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
+      // policy: AMap.DrivingPolicy.MULTI_POLICIES,
+      // map: map.value,
+      panel: "panel",
+    });
+
+    // 卡车路线规划插件 TODO:
+    truckDriving.value = new AMap.value.TruckDriving({ map: map.value });
+    // 地点搜索插件
+    placeSearch.value = new AMap.value.PlaceSearch({
+      // map: map.value,
+      city: "0551",
+    });
+    geocoder.value = new AMap.value.Geocoder();
+    // 搜索建议插件
+    autoComplete.value = new AMap.value.AutoComplete({});
+    /** 加载插件结束 */
+    resultInfoWindow.value = new AMap.value.InfoWindow({
+      anchor: "bottom-center",
+    });
+    startMarker.value = new AMap.value.Marker({
+      icon: startPng,
+      anchor: "bottom-center",
+    });
+    endMarker.value = new AMap.value.Marker({
+      icon: endPng,
+      anchor: "bottom-center",
+    });
+    // city: "010", //城市设为北京，默认：“全国”
+    // radius: 1000, //范围，默认：500
+    // AMap.value.Event.addListener(placeSearch.value, "markerClick", (e) => {
+    //   //添加事件
+    //   console.log(e); //获取点标注位置
+    //   if (nowSearch.value === "start") {
+    //     formData.value.startName = e.data.name;
+    //     formData.value.startLngLat = [e.data.location.lng, e.data.location.lat];
+    //   } else if (nowSearch.value === "end") {
+    //     formData.value.endName = e.data.name;
+    //     formData.value.endLngLat = [e.data.location.lng, e.data.location.lat];
+    //   }
+    // });
+    map.value.on("click", handleMapClick);
+    map.value.addControl(new AMap.value.Scale());
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+const handleInput = (type, data) => {
+  getAutoComplete(data);
+};
+
+// 地图点击
+const handleMapClick = (ev) => {
+  // 起点输入框 focus 时
+  if (nowSearch.value === "start") {
+    map.value.clearMap();
+    if (formData.value.endLngLat.length === 2) {
+      map.value.add(endMarker.value);
+    }
+    startMarker.value.setPosition(
+      new AMap.value.LngLat(ev.lnglat.lng, ev.lnglat.lat)
+    );
+    map.value.add(startMarker.value);
+    regeoCode([ev.lnglat.lng, ev.lnglat.lat])
+      .then((address) => {
+        formData.value.startName = address;
+      })
+      .catch(() => {
+        formData.value.startName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
+      });
+    formData.value.startLngLat = [ev.lnglat.lng, ev.lnglat.lat];
+  }
+  // 终点输入框 focus 时
+  else if (nowSearch.value === "end") {
+    map.value.clearMap();
+    if (formData.value.startLngLat.length === 2) {
+      map.value.add(startMarker.value);
+    }
+    endMarker.value.setPosition(
+      new AMap.value.LngLat(ev.lnglat.lng, ev.lnglat.lat)
+    );
+    map.value.add(endMarker.value);
+    regeoCode([ev.lnglat.lng, ev.lnglat.lat])
+      .then((address) => {
+        formData.value.endName = address;
+      })
+      .catch(() => {
+        formData.value.endName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
+      });
+    formData.value.endLngLat = [ev.lnglat.lng, ev.lnglat.lat];
+  }
+};
+const handleRouteClick = (data, index) => {
+  console.log(data, index);
+  map.value.setFitView([stepsPolylines.value[index]]);
+};
+const routeFixView = (idx) => {
+  console.log(idx);
+  map.value.setFitView(stepsPolylines.value[idx]);
+};
+
+// 根据经纬度获取地址
+const regeoCode = (lnglat /** [lng, lat] */) => {
+  return new Promise((resolve, reject) => {
+    geocoder.value.getAddress(lnglat, (status, result) => {
+      if (status === "complete" && result.regeocode) {
+        const address = result.regeocode.formattedAddress;
+        resolve(address);
+      } else {
+        reject("根据经纬度查询地址失败");
+      }
+    });
+  });
+};
+
+// tab点击事件
+const handleTabClick = (tab, ev) => {
+  activeTabName.value = tab.paneName;
+  if (formData.value.startLngLat.length && formData.value.endLngLat.length) {
+    searchRoute();
+  } else {
+    ElMessage.error("err");
+  }
+};
+
+// 清除路线，reset form
+const clearRoute = () => {
+  if (routeFormRef.value) {
+    routeFormRef.value.resetFields();
+  }
+  formData.value.startLngLat = [];
+  formData.value.endLngLat = [];
+  stepsList.value = [];
+  routeExtData.value = {};
+  map.value.clearMap();
+};
+
+// 搜索路线
+const searchRoute = () => {
+  if (!driving.value) return;
+  return new Promise((resolve, reject) => {
+    map.value.clearMap();
+    driving.value.opt.policy = AMap.value.DrivingPolicy[activeTabName.value];
+    const startLngLat = formData.value.startLngLat;
+    const endLngLat = formData.value.endLngLat;
+    driving.value.search(startLngLat, endLngLat, (status, result) => {
+      // 未出错时，result即是对应的路线规划方案
+      if (status === "complete") {
+        stepsList.value = result.routes[0].steps;
+        routeExtData.value.distance = result.routes[0].distance;
+        routeExtData.value.time = result.routes[0].time;
+        routeExtData.value.policy = result.routes[0].policy;
+        console.log(result);
+        drawRoute(result);
+        resolve(result);
+      } else {
+        reject("获取路线失败");
+      }
+    });
+  });
+};
+
+// 绘制路线
+const drawRoute = (result) => {
+  const startLngLat = formData.value.startLngLat;
+  const endLngLat = formData.value.endLngLat;
+  map.value.add(startMarker.value);
+  new AMap.value.Polyline({
+    map: map.value,
+    strokeWeight: 8,
+    strokeOpacity: 1,
+    strokeColor: "#808080",
+    strokeStyle: "dashed",
+    path: [
+      new AMap.value.LngLat(...startLngLat),
+      new AMap.value.LngLat(
+        result.routes[0].steps[0].start_location.lng,
+        result.routes[0].steps[0].start_location.lat
+      ),
+    ],
+  });
+  new AMap.value.Polyline({
+    map: map.value,
+    strokeWeight: 8,
+    strokeOpacity: 1,
+    strokeColor: "#808080",
+    strokeStyle: "dashed",
+    path: [
+      new AMap.value.LngLat(
+        result.routes[0].steps[
+          result.routes[0].steps.length - 1
+        ].end_location.lng,
+        result.routes[0].steps[
+          result.routes[0].steps.length - 1
+        ].end_location.lat
+      ),
+      new AMap.value.LngLat(...endLngLat),
+    ],
+  });
+
+  stepsPolylines.value = result.routes[0].steps.map((el) => {
+    return new AMap.value.Polyline({
+      map: map.value,
+      strokeWeight: 8,
+      strokeOpacity: 1,
+      strokeColor: "#1bac2e",
+      showDir: true,
+      path: el.path.map((item) => new AMap.value.LngLat(item.lng, item.lat)),
+    });
+  });
+  map.value.add(endMarker.value);
+  map.value.setFitView(stepsPolylines.value);
+};
+
+// 切换左侧面板显示隐藏
+const switchDrawer = () => {
+  drawer.value = !drawer.value;
+  if (drawer.value) {
+    document.querySelector("#drawer-switch").style.left = "25%";
+    document.querySelector("#drawer-switch").style.transform =
+      "translate(-50%, -50%)";
+  } else {
+    document.querySelector("#drawer-switch").style.left = "0";
+    document.querySelector("#drawer-switch").style.transform =
+      "translate(0, -50%)";
+  }
+};
+
+// 根据名称搜索地图标点
+const searchPoint = (val /** 搜索建议选项 */, type) => {
+  if (val) {
+    if (nowSearch.value === "start") {
+      formData.value.startName = val;
+    } else if (nowSearch.value === "end") {
+      formData.value.endName = val;
+    } else {
+      return;
+    }
+  } else {
+    return;
+  }
+
+  map.value.clearMap();
+  if (type === "start" && formData.value.endLngLat.length === 2) {
+    map.value.add(endMarker.value);
+  } else if (type === "end" && formData.value.startLngLat.length === 2) {
+    map.value.add(startMarker.value);
+  }
+  placeSearch.value.search(val, (status, result) => {
+    console.log(status, result);
+    // TODO: 添加搜索结果标记
+    if (status === "complete") {
+      searchResultMarkers.value = result.poiList.pois.map((el, index) => {
+        const marker = new AMap.value.Marker({
+          map: map.value,
+          position: new AMap.value.LngLat(el.location.lng, el.location.lat),
+          extData: el,
+          content: `
+              <div
+                style="
+                  background-image: url(${markBsPng});
+                  width: 19px;
+                  height: 31px;
+                  background-size: cover;
+                  color: #fff;
+                  text-align: center;
+                  font-size: 12px;
+                  padding-top: 3px;
+                "
+              >
+                ${index + 1}
+              </div>
+              `,
+        });
+        marker.on("click", handleResultClick);
+        return marker;
+      });
+      map.value.setFitView(searchResultMarkers.value);
+    }
+  });
+};
+
+const handleResultClick = (ev) => {
+  if (nowSearch.value === "start") {
+    formData.value.startName = ev.target.getExtData().name;
+    formData.value.startLngLat = [ev.lnglat.lng, ev.lnglat.lat];
+  } else if (nowSearch.value === "end") {
+    formData.value.endName = ev.target.getExtData().name;
+    formData.value.endLngLat = [ev.lnglat.lng, ev.lnglat.lat];
+  }
+  resultInfoWindow.value.setContent(`
+    <div>
+    ${ev.target.getExtData().name}</div>
+    `);
+  resultInfoWindow.value.open(map.value, [ev.lnglat.lng, ev.lnglat.lat]);
+};
+
+// 获取搜索建议
+const getAutoComplete = (val) => {
+  console.log("changed");
+  if (!autoComplete.value) return;
+  autoComplete.value.search(val, (status, result) => {
+    console.log(status, result);
+    if (status === "complete") {
+      searchTips.value = result.tips;
+    }
+  });
+};
+const setCenter = (val) => {
+  if (!val) return;
+  placeSearch.value.search(val, (status, result) => {
+    console.log(status, result);
+  });
+};
+
+onMounted(() => {
+  initMap();
+});
+</script>
+<style scoped lang="scss">
+#map-container {
+  width: 100%;
+//   height: calc(100vh-84px);
+}
+#route-form {
+  margin-top: 20px;
+}
+#drawer-switch {
+  position: absolute;
+  top: 50%;
+  left: 25%;
+  z-index: 99999;
+  transform: translate(-50%, -50%);
+}
+.suggestion-item {
+  user-select: none;
+  cursor: pointer;
+  padding: 0 32px 0 20px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  color: #606266;
+  height: 34px;
+  line-height: 34px;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  &:hover {
+    background-color: #f5f7fa;
+  }
+}
+</style>
+
+<style lang="scss">
+.control-drawer-modal {
+  pointer-events: none;
+  .el-drawer {
+    pointer-events: initial;
+    .el-input__suffix {
+      color: #67c23a;
+    }
+  }
+}
+</style>