diff --git a/src/main.js b/src/main.js
index f2d105d..30e1696 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,23 @@
 import App from './App'
 import store from './store'
 import router from './router'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.pm'
+import 'leaflet.pm/dist/leaflet.pm.css'
+import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+Vue.config.productionTip = false
+Vue.L = Vue.prototype.$L = L
+
+/* leaflet icon */
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+})
 
 import '@/icons' // icon
 import '@/permission' // permission control

diff --git a/src/main.js b/src/main.js
index f2d105d..30e1696 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,23 @@
 import App from './App'
 import store from './store'
 import router from './router'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.pm'
+import 'leaflet.pm/dist/leaflet.pm.css'
+import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+Vue.config.productionTip = false
+Vue.L = Vue.prototype.$L = L
+
+/* leaflet icon */
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+})
 
 import '@/icons' // icon
 import '@/permission' // permission control
diff --git a/src/views/route/addRoute.vue b/src/views/route/addRoute.vue
index 8b5fb20..b208d0e 100644
--- a/src/views/route/addRoute.vue
+++ b/src/views/route/addRoute.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addroute" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -101,7 +101,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small">
             <el-form-item prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -120,7 +120,7 @@
             <el-form-item prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -141,275 +141,276 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
-  import { getDictCode } from '@/api/dict'
-  import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
-  import DeptSelect from '@/components/DeptSelect'
-  import L from 'leaflet'
-  import 'leaflet/dist/leaflet.css'
+import { getDictCode } from '@/api/dict'
+import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
+import DeptSelect from '@/components/DeptSelect'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
 
-  export default {
-    components: { DeptSelect },
-    data() {
-      return {
-        activeNames: ['1', '3'],
-        deptShow: true,
-        map: null,
-        list: [],
-        alarmlist: [],
-        cartypelist: [],
-        canclick2: true,
-        canclick3: true,
-        timechoose: false,
-        click1: true,
-        click2: true,
-        click3: true,
-        accessTime: [],
-        carlist: [],
-        baselayer: [],
-        markerlayer: null,
-        pointForm: {
-          routeId: '',
-          pointlist: []
-        },
-        carForm: {
-          routeId: '',
-          carIds: []
-        },
-        listQuery: {
-          routeId: '',
-          description: '',
-          carCode: '',
-          carType: '',
-          deptId: ''
-        },
-        routeForm: {
-          id: '',
-          routeName: '',
-          alarmType: '',
-          alarmDistance: '',
-          startAddress: '',
-          endAddress: '',
-          mainRoad: '',
-          startDate: '',
-          endDate: '',
-          accessTime: '',
-          remarks: ''
-        }, // 表单
-        times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
-        options: [{
-          value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
-          label: '全天（0-23）'
-        }, {
-          value: '8,9,10,11,12,13,14,15,16,17,18',
-          label: '工作时间段（8-18）'
-        }, {
-          value: '8,9,10,11,12',
-          label: '上午工作时间段（8-12）'
-        }, {
-          value: '14,15,16,17,18',
-          label: '下午工作时间段（14-18）'
-        }, {
-          value: '-1',
-          label: '自定义时间段'
-        }],
-        rules: {
-          routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
-          alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
-          alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
-        }
-      }
-    },
-    mounted() {
-      getDictCode('routeAlarmType').then(response => {
-        this.alarmlist = response.data
-      })
-      getDictCode('carType').then(response => {
-        this.cartypelist = response.data
-      })
-    },
-    methods: {
-      removeall() {
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        this.pointForm.pointlist = []
+export default {
+  components: { DeptSelect },
+  data() {
+    return {
+      activeNames: ['1', '3'],
+      deptShow: true,
+      map: null,
+      list: [],
+      alarmlist: [],
+      cartypelist: [],
+      canclick2: true,
+      canclick3: true,
+      timechoose: false,
+      click1: true,
+      click2: true,
+      click3: true,
+      accessTime: [],
+      carlist: [],
+      baselayer: [],
+      markerlayer: null,
+      pointForm: {
+        routeId: '',
+        pointlist: []
       },
-      initMap() {
-        const map = L.map('map', {
-          minZoom: 3,
-          maxZoom: 18,
-          center: [27.75962, 116.06021],
-          zoom: 11,
-          zoomControl: false,
-          attributionControl: false,
-          crs: L.CRS.EPSG3857
-        })
-        this.map = map // data上需要挂载
-        window.map = map
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.map.pm.addControls({
-          position: 'topleft',
-          drawPolygon: false, // 添加绘制多边形
-          drawMarker: false, // 添加按钮以绘制标记
-          drawCircleMarker: false, // 添加按钮以绘制圆形标记
-          drawPolyline: true, // 添加按钮绘制线条
-          drawRectangle:	false,	// 添加按钮绘制矩形
-          drawCircle: false, //  添加按钮绘制圆圈
-          editMode: false, //  添加按钮编辑多边形
-          dragMode: false, //   添加按钮拖动多边形
-          cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
-          removalMode: false // 清除图层
-        })
-        // 设置绘制后的线条颜色等
-        this.map.pm.setPathOptions({
-          color: '#409eff',
-          fillColor: 'green',
-          fillOpacity: 0.4
-        })
-        this.map.pm.setLang('zh')
-        this.map.on('pm:create', e => {
-          if (this.pointForm.pointlist.length !== 0) {
-            this.$message.warning('一次只能绘制一条路线')
-            e.layer.remove()
-          } else {
-            console.log(e, '绘制完成时调用')
-            console.log(e.layer._latlngs[0].lat)
-            var Icon
-            var removepoints = []
-            for (var i = 0; i < e.layer._latlngs.length; i++) {
-              if (i === 0) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/start.png'),
-                  iconSize: [35, 35]
-                })
-              } else if (i === e.layer._latlngs.length - 1) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/end.png'),
-                  iconSize: [35, 35]
-                })
-              } else {
-                Icon = L.divIcon({
-                  className: 'my-div-icon', // 自定义icon css样式
-                  iconSize: [10, 10]// 点大小
-                })
-              }
-              var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
-                icon: Icon
-              })
-              removepoints.push(marker)
-            }
-            this.markerlayer = L.layerGroup(removepoints)
-            map.addLayer(this.markerlayer)
-            this.pointForm.pointlist = e.layer._latlngs
-          }
-        })
+      carForm: {
+        routeId: '',
+        carIds: []
       },
-      fetchData() {
-        console.log('fetchData')
-        listUnbindCar(this.listQuery).then(response => {
-          this.list = response.data
-        })
+      listQuery: {
+        routeId: '',
+        description: '',
+        carCode: '',
+        carType: '',
+        deptId: ''
       },
-      accessTimeSelect(val) {
-        if (val === '-1') {
-          this.timechoose = true
-        } else {
-          this.timechoose = false
-        }
-      },
-      search() {
-        this.fetchData(false)
-      },
-      saveRoute() {
-        this.click3 = false
-        if (this.pointForm.pointlist.length === 0) {
-          this.click3 = true
-          this.$message.warning('请规划路线')
-        } else {
-          addPath(this.pointForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('新增路线成功！')
-              this.$router.push({ path: '/route/list' })
-            }
-          })
-        }
-      },
-      saveCar() {
-        this.click2 = false
-        if (this.carlist.length === 0) {
-          this.$message.warning('请至少选择一辆车')
-          this.click2 = true
-        } else {
-          for (var i = 0; i < this.carlist.length; i++) {
-            this.carForm.carIds.push(Number(this.carlist[i]))
-          }
-          console.log(this.carForm)
-          bindCar(this.carForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('绑定车辆信息成功！')
-              this.canclick3 = false
-              this.initMap()
-            }
-          })
-        }
-      },
-      saveData() {
-        this.click1 = false
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            if (this.routeForm.startDate > this.routeForm.endDate) {
-              this.$message.warning('请确认输入正确起止时间')
-              this.click1 = true
-            } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
-              this.$message.warning('请选择时间段')
-              this.click1 = true
-            } else {
-              var timeselect = false
-              if (this.routeForm.accessTime === '-1') {
-                timeselect = true
-                this.routeForm.accessTime = this.accessTime[0]
-                for (var i = 1; i < this.accessTime.length; i++) {
-                  this.routeForm.accessTime += (',' + this.accessTime[i])
-                }
-              }
-              addRouteInfo(this.routeForm).then(response => {
-                if (response.code === 200) {
-                  this.$message.success('添加规划路线基本信息成功！')
-                  if (timeselect) {
-                    this.routeForm.accessTime = '自定义时间段'
-                  }
-                  this.canclick2 = false
-                  this.carForm.routeId = response.data
-                  this.listQuery.routeId = response.data
-                  this.pointForm.routeId = response.data
-                  this.activeNames.push('2')
-                  this.fetchData()
-                }
-              })
-            }
-          } else {
-            this.click1 = true
-          }
-        })
-      },
-      handleChange(val) {
-        console.log(val)
+      routeForm: {
+        id: '',
+        routeName: '',
+        alarmType: '',
+        alarmDistance: '',
+        startAddress: '',
+        endAddress: '',
+        mainRoad: '',
+        startDate: '',
+        endDate: '',
+        accessTime: '',
+        remarks: ''
+      }, // 表单
+      times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
+      options: [{
+        value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
+        label: '全天（0-23）'
+      }, {
+        value: '8,9,10,11,12,13,14,15,16,17,18',
+        label: '工作时间段（8-18）'
+      }, {
+        value: '8,9,10,11,12',
+        label: '上午工作时间段（8-12）'
+      }, {
+        value: '14,15,16,17,18',
+        label: '下午工作时间段（14-18）'
+      }, {
+        value: '-1',
+        label: '自定义时间段'
+      }],
+      rules: {
+        routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
+        alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
+        alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
       }
     }
+  },
+  mounted() {
+    getDictCode('routeAlarmType').then(response => {
+      this.alarmlist = response.data
+    })
+    getDictCode('carType').then(response => {
+      this.cartypelist = response.data
+    })
+  },
+  methods: {
+    removeall() {
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+      this.pointForm.pointlist = []
+    },
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 11,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      debugger
+      this.map.pm.addControls({
+        position: 'topleft',
+        drawPolygon: false, // 添加绘制多边形
+        drawMarker: false, // 添加按钮以绘制标记
+        drawCircleMarker: false, // 添加按钮以绘制圆形标记
+        drawPolyline: true, // 添加按钮绘制线条
+        drawRectangle:	false,	// 添加按钮绘制矩形
+        drawCircle: false, //  添加按钮绘制圆圈
+        editMode: false, //  添加按钮编辑多边形
+        dragMode: false, //   添加按钮拖动多边形
+        cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
+        removalMode: false // 清除图层
+      })
+      // 设置绘制后的线条颜色等
+      this.map.pm.setPathOptions({
+        color: '#409eff',
+        fillColor: 'green',
+        fillOpacity: 0.4
+      })
+      this.map.pm.setLang('zh')
+      this.map.on('pm:create', e => {
+        if (this.pointForm.pointlist.length !== 0) {
+          this.$message.warning('一次只能绘制一条路线')
+          e.layer.remove()
+        } else {
+          console.log(e, '绘制完成时调用')
+          console.log(e.layer._latlngs[0].lat)
+          var Icon
+          var removepoints = []
+          for (var i = 0; i < e.layer._latlngs.length; i++) {
+            if (i === 0) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/start.png'),
+                iconSize: [35, 35]
+              })
+            } else if (i === e.layer._latlngs.length - 1) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/end.png'),
+                iconSize: [35, 35]
+              })
+            } else {
+              Icon = L.divIcon({
+                className: 'my-div-icon', // 自定义icon css样式
+                iconSize: [10, 10]// 点大小
+              })
+            }
+            var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
+              icon: Icon
+            })
+            removepoints.push(marker)
+          }
+          this.markerlayer = L.layerGroup(removepoints)
+          map.addLayer(this.markerlayer)
+          this.pointForm.pointlist = e.layer._latlngs
+        }
+      })
+    },
+    fetchData() {
+      console.log('fetchData')
+      listUnbindCar(this.listQuery).then(response => {
+        this.list = response.data
+      })
+    },
+    accessTimeSelect(val) {
+      if (val === '-1') {
+        this.timechoose = true
+      } else {
+        this.timechoose = false
+      }
+    },
+    search() {
+      this.fetchData(false)
+    },
+    saveRoute() {
+      this.click3 = false
+      if (this.pointForm.pointlist.length === 0) {
+        this.click3 = true
+        this.$message.warning('请规划路线')
+      } else {
+        addPath(this.pointForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('新增路线成功！')
+            this.$router.push({ path: '/route/list' })
+          }
+        })
+      }
+    },
+    saveCar() {
+      this.click2 = false
+      if (this.carlist.length === 0) {
+        this.$message.warning('请至少选择一辆车')
+        this.click2 = true
+      } else {
+        for (var i = 0; i < this.carlist.length; i++) {
+          this.carForm.carIds.push(Number(this.carlist[i]))
+        }
+        console.log(this.carForm)
+        bindCar(this.carForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('绑定车辆信息成功！')
+            this.canclick3 = false
+            this.initMap()
+          }
+        })
+      }
+    },
+    saveData() {
+      this.click1 = false
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.routeForm.startDate > this.routeForm.endDate) {
+            this.$message.warning('请确认输入正确起止时间')
+            this.click1 = true
+          } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
+            this.$message.warning('请选择时间段')
+            this.click1 = true
+          } else {
+            var timeselect = false
+            if (this.routeForm.accessTime === '-1') {
+              timeselect = true
+              this.routeForm.accessTime = this.accessTime[0]
+              for (var i = 1; i < this.accessTime.length; i++) {
+                this.routeForm.accessTime += (',' + this.accessTime[i])
+              }
+            }
+            addRouteInfo(this.routeForm).then(response => {
+              if (response.code === 200) {
+                this.$message.success('添加规划路线基本信息成功！')
+                if (timeselect) {
+                  this.routeForm.accessTime = '自定义时间段'
+                }
+                this.canclick2 = false
+                this.carForm.routeId = response.data
+                this.listQuery.routeId = response.data
+                this.pointForm.routeId = response.data
+                this.activeNames.push('2')
+                this.fetchData()
+              }
+            })
+          }
+        } else {
+          this.click1 = true
+        }
+      })
+    },
+    handleChange(val) {
+      console.log(val)
+    }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
@@ -449,4 +450,13 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+
 </style>

diff --git a/src/main.js b/src/main.js
index f2d105d..30e1696 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,23 @@
 import App from './App'
 import store from './store'
 import router from './router'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.pm'
+import 'leaflet.pm/dist/leaflet.pm.css'
+import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+Vue.config.productionTip = false
+Vue.L = Vue.prototype.$L = L
+
+/* leaflet icon */
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+})
 
 import '@/icons' // icon
 import '@/permission' // permission control
diff --git a/src/views/route/addRoute.vue b/src/views/route/addRoute.vue
index 8b5fb20..b208d0e 100644
--- a/src/views/route/addRoute.vue
+++ b/src/views/route/addRoute.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addroute" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -101,7 +101,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small">
             <el-form-item prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -120,7 +120,7 @@
             <el-form-item prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -141,275 +141,276 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
-  import { getDictCode } from '@/api/dict'
-  import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
-  import DeptSelect from '@/components/DeptSelect'
-  import L from 'leaflet'
-  import 'leaflet/dist/leaflet.css'
+import { getDictCode } from '@/api/dict'
+import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
+import DeptSelect from '@/components/DeptSelect'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
 
-  export default {
-    components: { DeptSelect },
-    data() {
-      return {
-        activeNames: ['1', '3'],
-        deptShow: true,
-        map: null,
-        list: [],
-        alarmlist: [],
-        cartypelist: [],
-        canclick2: true,
-        canclick3: true,
-        timechoose: false,
-        click1: true,
-        click2: true,
-        click3: true,
-        accessTime: [],
-        carlist: [],
-        baselayer: [],
-        markerlayer: null,
-        pointForm: {
-          routeId: '',
-          pointlist: []
-        },
-        carForm: {
-          routeId: '',
-          carIds: []
-        },
-        listQuery: {
-          routeId: '',
-          description: '',
-          carCode: '',
-          carType: '',
-          deptId: ''
-        },
-        routeForm: {
-          id: '',
-          routeName: '',
-          alarmType: '',
-          alarmDistance: '',
-          startAddress: '',
-          endAddress: '',
-          mainRoad: '',
-          startDate: '',
-          endDate: '',
-          accessTime: '',
-          remarks: ''
-        }, // 表单
-        times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
-        options: [{
-          value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
-          label: '全天（0-23）'
-        }, {
-          value: '8,9,10,11,12,13,14,15,16,17,18',
-          label: '工作时间段（8-18）'
-        }, {
-          value: '8,9,10,11,12',
-          label: '上午工作时间段（8-12）'
-        }, {
-          value: '14,15,16,17,18',
-          label: '下午工作时间段（14-18）'
-        }, {
-          value: '-1',
-          label: '自定义时间段'
-        }],
-        rules: {
-          routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
-          alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
-          alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
-        }
-      }
-    },
-    mounted() {
-      getDictCode('routeAlarmType').then(response => {
-        this.alarmlist = response.data
-      })
-      getDictCode('carType').then(response => {
-        this.cartypelist = response.data
-      })
-    },
-    methods: {
-      removeall() {
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        this.pointForm.pointlist = []
+export default {
+  components: { DeptSelect },
+  data() {
+    return {
+      activeNames: ['1', '3'],
+      deptShow: true,
+      map: null,
+      list: [],
+      alarmlist: [],
+      cartypelist: [],
+      canclick2: true,
+      canclick3: true,
+      timechoose: false,
+      click1: true,
+      click2: true,
+      click3: true,
+      accessTime: [],
+      carlist: [],
+      baselayer: [],
+      markerlayer: null,
+      pointForm: {
+        routeId: '',
+        pointlist: []
       },
-      initMap() {
-        const map = L.map('map', {
-          minZoom: 3,
-          maxZoom: 18,
-          center: [27.75962, 116.06021],
-          zoom: 11,
-          zoomControl: false,
-          attributionControl: false,
-          crs: L.CRS.EPSG3857
-        })
-        this.map = map // data上需要挂载
-        window.map = map
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.map.pm.addControls({
-          position: 'topleft',
-          drawPolygon: false, // 添加绘制多边形
-          drawMarker: false, // 添加按钮以绘制标记
-          drawCircleMarker: false, // 添加按钮以绘制圆形标记
-          drawPolyline: true, // 添加按钮绘制线条
-          drawRectangle:	false,	// 添加按钮绘制矩形
-          drawCircle: false, //  添加按钮绘制圆圈
-          editMode: false, //  添加按钮编辑多边形
-          dragMode: false, //   添加按钮拖动多边形
-          cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
-          removalMode: false // 清除图层
-        })
-        // 设置绘制后的线条颜色等
-        this.map.pm.setPathOptions({
-          color: '#409eff',
-          fillColor: 'green',
-          fillOpacity: 0.4
-        })
-        this.map.pm.setLang('zh')
-        this.map.on('pm:create', e => {
-          if (this.pointForm.pointlist.length !== 0) {
-            this.$message.warning('一次只能绘制一条路线')
-            e.layer.remove()
-          } else {
-            console.log(e, '绘制完成时调用')
-            console.log(e.layer._latlngs[0].lat)
-            var Icon
-            var removepoints = []
-            for (var i = 0; i < e.layer._latlngs.length; i++) {
-              if (i === 0) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/start.png'),
-                  iconSize: [35, 35]
-                })
-              } else if (i === e.layer._latlngs.length - 1) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/end.png'),
-                  iconSize: [35, 35]
-                })
-              } else {
-                Icon = L.divIcon({
-                  className: 'my-div-icon', // 自定义icon css样式
-                  iconSize: [10, 10]// 点大小
-                })
-              }
-              var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
-                icon: Icon
-              })
-              removepoints.push(marker)
-            }
-            this.markerlayer = L.layerGroup(removepoints)
-            map.addLayer(this.markerlayer)
-            this.pointForm.pointlist = e.layer._latlngs
-          }
-        })
+      carForm: {
+        routeId: '',
+        carIds: []
       },
-      fetchData() {
-        console.log('fetchData')
-        listUnbindCar(this.listQuery).then(response => {
-          this.list = response.data
-        })
+      listQuery: {
+        routeId: '',
+        description: '',
+        carCode: '',
+        carType: '',
+        deptId: ''
       },
-      accessTimeSelect(val) {
-        if (val === '-1') {
-          this.timechoose = true
-        } else {
-          this.timechoose = false
-        }
-      },
-      search() {
-        this.fetchData(false)
-      },
-      saveRoute() {
-        this.click3 = false
-        if (this.pointForm.pointlist.length === 0) {
-          this.click3 = true
-          this.$message.warning('请规划路线')
-        } else {
-          addPath(this.pointForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('新增路线成功！')
-              this.$router.push({ path: '/route/list' })
-            }
-          })
-        }
-      },
-      saveCar() {
-        this.click2 = false
-        if (this.carlist.length === 0) {
-          this.$message.warning('请至少选择一辆车')
-          this.click2 = true
-        } else {
-          for (var i = 0; i < this.carlist.length; i++) {
-            this.carForm.carIds.push(Number(this.carlist[i]))
-          }
-          console.log(this.carForm)
-          bindCar(this.carForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('绑定车辆信息成功！')
-              this.canclick3 = false
-              this.initMap()
-            }
-          })
-        }
-      },
-      saveData() {
-        this.click1 = false
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            if (this.routeForm.startDate > this.routeForm.endDate) {
-              this.$message.warning('请确认输入正确起止时间')
-              this.click1 = true
-            } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
-              this.$message.warning('请选择时间段')
-              this.click1 = true
-            } else {
-              var timeselect = false
-              if (this.routeForm.accessTime === '-1') {
-                timeselect = true
-                this.routeForm.accessTime = this.accessTime[0]
-                for (var i = 1; i < this.accessTime.length; i++) {
-                  this.routeForm.accessTime += (',' + this.accessTime[i])
-                }
-              }
-              addRouteInfo(this.routeForm).then(response => {
-                if (response.code === 200) {
-                  this.$message.success('添加规划路线基本信息成功！')
-                  if (timeselect) {
-                    this.routeForm.accessTime = '自定义时间段'
-                  }
-                  this.canclick2 = false
-                  this.carForm.routeId = response.data
-                  this.listQuery.routeId = response.data
-                  this.pointForm.routeId = response.data
-                  this.activeNames.push('2')
-                  this.fetchData()
-                }
-              })
-            }
-          } else {
-            this.click1 = true
-          }
-        })
-      },
-      handleChange(val) {
-        console.log(val)
+      routeForm: {
+        id: '',
+        routeName: '',
+        alarmType: '',
+        alarmDistance: '',
+        startAddress: '',
+        endAddress: '',
+        mainRoad: '',
+        startDate: '',
+        endDate: '',
+        accessTime: '',
+        remarks: ''
+      }, // 表单
+      times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
+      options: [{
+        value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
+        label: '全天（0-23）'
+      }, {
+        value: '8,9,10,11,12,13,14,15,16,17,18',
+        label: '工作时间段（8-18）'
+      }, {
+        value: '8,9,10,11,12',
+        label: '上午工作时间段（8-12）'
+      }, {
+        value: '14,15,16,17,18',
+        label: '下午工作时间段（14-18）'
+      }, {
+        value: '-1',
+        label: '自定义时间段'
+      }],
+      rules: {
+        routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
+        alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
+        alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
       }
     }
+  },
+  mounted() {
+    getDictCode('routeAlarmType').then(response => {
+      this.alarmlist = response.data
+    })
+    getDictCode('carType').then(response => {
+      this.cartypelist = response.data
+    })
+  },
+  methods: {
+    removeall() {
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+      this.pointForm.pointlist = []
+    },
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 11,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      debugger
+      this.map.pm.addControls({
+        position: 'topleft',
+        drawPolygon: false, // 添加绘制多边形
+        drawMarker: false, // 添加按钮以绘制标记
+        drawCircleMarker: false, // 添加按钮以绘制圆形标记
+        drawPolyline: true, // 添加按钮绘制线条
+        drawRectangle:	false,	// 添加按钮绘制矩形
+        drawCircle: false, //  添加按钮绘制圆圈
+        editMode: false, //  添加按钮编辑多边形
+        dragMode: false, //   添加按钮拖动多边形
+        cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
+        removalMode: false // 清除图层
+      })
+      // 设置绘制后的线条颜色等
+      this.map.pm.setPathOptions({
+        color: '#409eff',
+        fillColor: 'green',
+        fillOpacity: 0.4
+      })
+      this.map.pm.setLang('zh')
+      this.map.on('pm:create', e => {
+        if (this.pointForm.pointlist.length !== 0) {
+          this.$message.warning('一次只能绘制一条路线')
+          e.layer.remove()
+        } else {
+          console.log(e, '绘制完成时调用')
+          console.log(e.layer._latlngs[0].lat)
+          var Icon
+          var removepoints = []
+          for (var i = 0; i < e.layer._latlngs.length; i++) {
+            if (i === 0) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/start.png'),
+                iconSize: [35, 35]
+              })
+            } else if (i === e.layer._latlngs.length - 1) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/end.png'),
+                iconSize: [35, 35]
+              })
+            } else {
+              Icon = L.divIcon({
+                className: 'my-div-icon', // 自定义icon css样式
+                iconSize: [10, 10]// 点大小
+              })
+            }
+            var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
+              icon: Icon
+            })
+            removepoints.push(marker)
+          }
+          this.markerlayer = L.layerGroup(removepoints)
+          map.addLayer(this.markerlayer)
+          this.pointForm.pointlist = e.layer._latlngs
+        }
+      })
+    },
+    fetchData() {
+      console.log('fetchData')
+      listUnbindCar(this.listQuery).then(response => {
+        this.list = response.data
+      })
+    },
+    accessTimeSelect(val) {
+      if (val === '-1') {
+        this.timechoose = true
+      } else {
+        this.timechoose = false
+      }
+    },
+    search() {
+      this.fetchData(false)
+    },
+    saveRoute() {
+      this.click3 = false
+      if (this.pointForm.pointlist.length === 0) {
+        this.click3 = true
+        this.$message.warning('请规划路线')
+      } else {
+        addPath(this.pointForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('新增路线成功！')
+            this.$router.push({ path: '/route/list' })
+          }
+        })
+      }
+    },
+    saveCar() {
+      this.click2 = false
+      if (this.carlist.length === 0) {
+        this.$message.warning('请至少选择一辆车')
+        this.click2 = true
+      } else {
+        for (var i = 0; i < this.carlist.length; i++) {
+          this.carForm.carIds.push(Number(this.carlist[i]))
+        }
+        console.log(this.carForm)
+        bindCar(this.carForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('绑定车辆信息成功！')
+            this.canclick3 = false
+            this.initMap()
+          }
+        })
+      }
+    },
+    saveData() {
+      this.click1 = false
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.routeForm.startDate > this.routeForm.endDate) {
+            this.$message.warning('请确认输入正确起止时间')
+            this.click1 = true
+          } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
+            this.$message.warning('请选择时间段')
+            this.click1 = true
+          } else {
+            var timeselect = false
+            if (this.routeForm.accessTime === '-1') {
+              timeselect = true
+              this.routeForm.accessTime = this.accessTime[0]
+              for (var i = 1; i < this.accessTime.length; i++) {
+                this.routeForm.accessTime += (',' + this.accessTime[i])
+              }
+            }
+            addRouteInfo(this.routeForm).then(response => {
+              if (response.code === 200) {
+                this.$message.success('添加规划路线基本信息成功！')
+                if (timeselect) {
+                  this.routeForm.accessTime = '自定义时间段'
+                }
+                this.canclick2 = false
+                this.carForm.routeId = response.data
+                this.listQuery.routeId = response.data
+                this.pointForm.routeId = response.data
+                this.activeNames.push('2')
+                this.fetchData()
+              }
+            })
+          }
+        } else {
+          this.click1 = true
+        }
+      })
+    },
+    handleChange(val) {
+      console.log(val)
+    }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
@@ -449,4 +450,13 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+
 </style>
diff --git a/src/views/route/detailRoute.vue b/src/views/route/detailRoute.vue
index 5501b36..cbe1b12 100644
--- a/src/views/route/detailRoute.vue
+++ b/src/views/route/detailRoute.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detailroute" class="app-container">
-    <el-collapse v-model="activeNames">
-      <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll">
+      <el-collapse-item title="（一）基本信息" name="1">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" size="small" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -96,7 +96,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -361,4 +361,10 @@
   #detailroute .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>

diff --git a/src/main.js b/src/main.js
index f2d105d..30e1696 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,23 @@
 import App from './App'
 import store from './store'
 import router from './router'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.pm'
+import 'leaflet.pm/dist/leaflet.pm.css'
+import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+Vue.config.productionTip = false
+Vue.L = Vue.prototype.$L = L
+
+/* leaflet icon */
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+})
 
 import '@/icons' // icon
 import '@/permission' // permission control
diff --git a/src/views/route/addRoute.vue b/src/views/route/addRoute.vue
index 8b5fb20..b208d0e 100644
--- a/src/views/route/addRoute.vue
+++ b/src/views/route/addRoute.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addroute" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -101,7 +101,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small">
             <el-form-item prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -120,7 +120,7 @@
             <el-form-item prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -141,275 +141,276 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
-  import { getDictCode } from '@/api/dict'
-  import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
-  import DeptSelect from '@/components/DeptSelect'
-  import L from 'leaflet'
-  import 'leaflet/dist/leaflet.css'
+import { getDictCode } from '@/api/dict'
+import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
+import DeptSelect from '@/components/DeptSelect'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
 
-  export default {
-    components: { DeptSelect },
-    data() {
-      return {
-        activeNames: ['1', '3'],
-        deptShow: true,
-        map: null,
-        list: [],
-        alarmlist: [],
-        cartypelist: [],
-        canclick2: true,
-        canclick3: true,
-        timechoose: false,
-        click1: true,
-        click2: true,
-        click3: true,
-        accessTime: [],
-        carlist: [],
-        baselayer: [],
-        markerlayer: null,
-        pointForm: {
-          routeId: '',
-          pointlist: []
-        },
-        carForm: {
-          routeId: '',
-          carIds: []
-        },
-        listQuery: {
-          routeId: '',
-          description: '',
-          carCode: '',
-          carType: '',
-          deptId: ''
-        },
-        routeForm: {
-          id: '',
-          routeName: '',
-          alarmType: '',
-          alarmDistance: '',
-          startAddress: '',
-          endAddress: '',
-          mainRoad: '',
-          startDate: '',
-          endDate: '',
-          accessTime: '',
-          remarks: ''
-        }, // 表单
-        times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
-        options: [{
-          value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
-          label: '全天（0-23）'
-        }, {
-          value: '8,9,10,11,12,13,14,15,16,17,18',
-          label: '工作时间段（8-18）'
-        }, {
-          value: '8,9,10,11,12',
-          label: '上午工作时间段（8-12）'
-        }, {
-          value: '14,15,16,17,18',
-          label: '下午工作时间段（14-18）'
-        }, {
-          value: '-1',
-          label: '自定义时间段'
-        }],
-        rules: {
-          routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
-          alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
-          alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
-        }
-      }
-    },
-    mounted() {
-      getDictCode('routeAlarmType').then(response => {
-        this.alarmlist = response.data
-      })
-      getDictCode('carType').then(response => {
-        this.cartypelist = response.data
-      })
-    },
-    methods: {
-      removeall() {
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        this.pointForm.pointlist = []
+export default {
+  components: { DeptSelect },
+  data() {
+    return {
+      activeNames: ['1', '3'],
+      deptShow: true,
+      map: null,
+      list: [],
+      alarmlist: [],
+      cartypelist: [],
+      canclick2: true,
+      canclick3: true,
+      timechoose: false,
+      click1: true,
+      click2: true,
+      click3: true,
+      accessTime: [],
+      carlist: [],
+      baselayer: [],
+      markerlayer: null,
+      pointForm: {
+        routeId: '',
+        pointlist: []
       },
-      initMap() {
-        const map = L.map('map', {
-          minZoom: 3,
-          maxZoom: 18,
-          center: [27.75962, 116.06021],
-          zoom: 11,
-          zoomControl: false,
-          attributionControl: false,
-          crs: L.CRS.EPSG3857
-        })
-        this.map = map // data上需要挂载
-        window.map = map
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.map.pm.addControls({
-          position: 'topleft',
-          drawPolygon: false, // 添加绘制多边形
-          drawMarker: false, // 添加按钮以绘制标记
-          drawCircleMarker: false, // 添加按钮以绘制圆形标记
-          drawPolyline: true, // 添加按钮绘制线条
-          drawRectangle:	false,	// 添加按钮绘制矩形
-          drawCircle: false, //  添加按钮绘制圆圈
-          editMode: false, //  添加按钮编辑多边形
-          dragMode: false, //   添加按钮拖动多边形
-          cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
-          removalMode: false // 清除图层
-        })
-        // 设置绘制后的线条颜色等
-        this.map.pm.setPathOptions({
-          color: '#409eff',
-          fillColor: 'green',
-          fillOpacity: 0.4
-        })
-        this.map.pm.setLang('zh')
-        this.map.on('pm:create', e => {
-          if (this.pointForm.pointlist.length !== 0) {
-            this.$message.warning('一次只能绘制一条路线')
-            e.layer.remove()
-          } else {
-            console.log(e, '绘制完成时调用')
-            console.log(e.layer._latlngs[0].lat)
-            var Icon
-            var removepoints = []
-            for (var i = 0; i < e.layer._latlngs.length; i++) {
-              if (i === 0) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/start.png'),
-                  iconSize: [35, 35]
-                })
-              } else if (i === e.layer._latlngs.length - 1) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/end.png'),
-                  iconSize: [35, 35]
-                })
-              } else {
-                Icon = L.divIcon({
-                  className: 'my-div-icon', // 自定义icon css样式
-                  iconSize: [10, 10]// 点大小
-                })
-              }
-              var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
-                icon: Icon
-              })
-              removepoints.push(marker)
-            }
-            this.markerlayer = L.layerGroup(removepoints)
-            map.addLayer(this.markerlayer)
-            this.pointForm.pointlist = e.layer._latlngs
-          }
-        })
+      carForm: {
+        routeId: '',
+        carIds: []
       },
-      fetchData() {
-        console.log('fetchData')
-        listUnbindCar(this.listQuery).then(response => {
-          this.list = response.data
-        })
+      listQuery: {
+        routeId: '',
+        description: '',
+        carCode: '',
+        carType: '',
+        deptId: ''
       },
-      accessTimeSelect(val) {
-        if (val === '-1') {
-          this.timechoose = true
-        } else {
-          this.timechoose = false
-        }
-      },
-      search() {
-        this.fetchData(false)
-      },
-      saveRoute() {
-        this.click3 = false
-        if (this.pointForm.pointlist.length === 0) {
-          this.click3 = true
-          this.$message.warning('请规划路线')
-        } else {
-          addPath(this.pointForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('新增路线成功！')
-              this.$router.push({ path: '/route/list' })
-            }
-          })
-        }
-      },
-      saveCar() {
-        this.click2 = false
-        if (this.carlist.length === 0) {
-          this.$message.warning('请至少选择一辆车')
-          this.click2 = true
-        } else {
-          for (var i = 0; i < this.carlist.length; i++) {
-            this.carForm.carIds.push(Number(this.carlist[i]))
-          }
-          console.log(this.carForm)
-          bindCar(this.carForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('绑定车辆信息成功！')
-              this.canclick3 = false
-              this.initMap()
-            }
-          })
-        }
-      },
-      saveData() {
-        this.click1 = false
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            if (this.routeForm.startDate > this.routeForm.endDate) {
-              this.$message.warning('请确认输入正确起止时间')
-              this.click1 = true
-            } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
-              this.$message.warning('请选择时间段')
-              this.click1 = true
-            } else {
-              var timeselect = false
-              if (this.routeForm.accessTime === '-1') {
-                timeselect = true
-                this.routeForm.accessTime = this.accessTime[0]
-                for (var i = 1; i < this.accessTime.length; i++) {
-                  this.routeForm.accessTime += (',' + this.accessTime[i])
-                }
-              }
-              addRouteInfo(this.routeForm).then(response => {
-                if (response.code === 200) {
-                  this.$message.success('添加规划路线基本信息成功！')
-                  if (timeselect) {
-                    this.routeForm.accessTime = '自定义时间段'
-                  }
-                  this.canclick2 = false
-                  this.carForm.routeId = response.data
-                  this.listQuery.routeId = response.data
-                  this.pointForm.routeId = response.data
-                  this.activeNames.push('2')
-                  this.fetchData()
-                }
-              })
-            }
-          } else {
-            this.click1 = true
-          }
-        })
-      },
-      handleChange(val) {
-        console.log(val)
+      routeForm: {
+        id: '',
+        routeName: '',
+        alarmType: '',
+        alarmDistance: '',
+        startAddress: '',
+        endAddress: '',
+        mainRoad: '',
+        startDate: '',
+        endDate: '',
+        accessTime: '',
+        remarks: ''
+      }, // 表单
+      times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
+      options: [{
+        value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
+        label: '全天（0-23）'
+      }, {
+        value: '8,9,10,11,12,13,14,15,16,17,18',
+        label: '工作时间段（8-18）'
+      }, {
+        value: '8,9,10,11,12',
+        label: '上午工作时间段（8-12）'
+      }, {
+        value: '14,15,16,17,18',
+        label: '下午工作时间段（14-18）'
+      }, {
+        value: '-1',
+        label: '自定义时间段'
+      }],
+      rules: {
+        routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
+        alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
+        alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
       }
     }
+  },
+  mounted() {
+    getDictCode('routeAlarmType').then(response => {
+      this.alarmlist = response.data
+    })
+    getDictCode('carType').then(response => {
+      this.cartypelist = response.data
+    })
+  },
+  methods: {
+    removeall() {
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+      this.pointForm.pointlist = []
+    },
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 11,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      debugger
+      this.map.pm.addControls({
+        position: 'topleft',
+        drawPolygon: false, // 添加绘制多边形
+        drawMarker: false, // 添加按钮以绘制标记
+        drawCircleMarker: false, // 添加按钮以绘制圆形标记
+        drawPolyline: true, // 添加按钮绘制线条
+        drawRectangle:	false,	// 添加按钮绘制矩形
+        drawCircle: false, //  添加按钮绘制圆圈
+        editMode: false, //  添加按钮编辑多边形
+        dragMode: false, //   添加按钮拖动多边形
+        cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
+        removalMode: false // 清除图层
+      })
+      // 设置绘制后的线条颜色等
+      this.map.pm.setPathOptions({
+        color: '#409eff',
+        fillColor: 'green',
+        fillOpacity: 0.4
+      })
+      this.map.pm.setLang('zh')
+      this.map.on('pm:create', e => {
+        if (this.pointForm.pointlist.length !== 0) {
+          this.$message.warning('一次只能绘制一条路线')
+          e.layer.remove()
+        } else {
+          console.log(e, '绘制完成时调用')
+          console.log(e.layer._latlngs[0].lat)
+          var Icon
+          var removepoints = []
+          for (var i = 0; i < e.layer._latlngs.length; i++) {
+            if (i === 0) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/start.png'),
+                iconSize: [35, 35]
+              })
+            } else if (i === e.layer._latlngs.length - 1) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/end.png'),
+                iconSize: [35, 35]
+              })
+            } else {
+              Icon = L.divIcon({
+                className: 'my-div-icon', // 自定义icon css样式
+                iconSize: [10, 10]// 点大小
+              })
+            }
+            var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
+              icon: Icon
+            })
+            removepoints.push(marker)
+          }
+          this.markerlayer = L.layerGroup(removepoints)
+          map.addLayer(this.markerlayer)
+          this.pointForm.pointlist = e.layer._latlngs
+        }
+      })
+    },
+    fetchData() {
+      console.log('fetchData')
+      listUnbindCar(this.listQuery).then(response => {
+        this.list = response.data
+      })
+    },
+    accessTimeSelect(val) {
+      if (val === '-1') {
+        this.timechoose = true
+      } else {
+        this.timechoose = false
+      }
+    },
+    search() {
+      this.fetchData(false)
+    },
+    saveRoute() {
+      this.click3 = false
+      if (this.pointForm.pointlist.length === 0) {
+        this.click3 = true
+        this.$message.warning('请规划路线')
+      } else {
+        addPath(this.pointForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('新增路线成功！')
+            this.$router.push({ path: '/route/list' })
+          }
+        })
+      }
+    },
+    saveCar() {
+      this.click2 = false
+      if (this.carlist.length === 0) {
+        this.$message.warning('请至少选择一辆车')
+        this.click2 = true
+      } else {
+        for (var i = 0; i < this.carlist.length; i++) {
+          this.carForm.carIds.push(Number(this.carlist[i]))
+        }
+        console.log(this.carForm)
+        bindCar(this.carForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('绑定车辆信息成功！')
+            this.canclick3 = false
+            this.initMap()
+          }
+        })
+      }
+    },
+    saveData() {
+      this.click1 = false
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.routeForm.startDate > this.routeForm.endDate) {
+            this.$message.warning('请确认输入正确起止时间')
+            this.click1 = true
+          } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
+            this.$message.warning('请选择时间段')
+            this.click1 = true
+          } else {
+            var timeselect = false
+            if (this.routeForm.accessTime === '-1') {
+              timeselect = true
+              this.routeForm.accessTime = this.accessTime[0]
+              for (var i = 1; i < this.accessTime.length; i++) {
+                this.routeForm.accessTime += (',' + this.accessTime[i])
+              }
+            }
+            addRouteInfo(this.routeForm).then(response => {
+              if (response.code === 200) {
+                this.$message.success('添加规划路线基本信息成功！')
+                if (timeselect) {
+                  this.routeForm.accessTime = '自定义时间段'
+                }
+                this.canclick2 = false
+                this.carForm.routeId = response.data
+                this.listQuery.routeId = response.data
+                this.pointForm.routeId = response.data
+                this.activeNames.push('2')
+                this.fetchData()
+              }
+            })
+          }
+        } else {
+          this.click1 = true
+        }
+      })
+    },
+    handleChange(val) {
+      console.log(val)
+    }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
@@ -449,4 +450,13 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+
 </style>
diff --git a/src/views/route/detailRoute.vue b/src/views/route/detailRoute.vue
index 5501b36..cbe1b12 100644
--- a/src/views/route/detailRoute.vue
+++ b/src/views/route/detailRoute.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detailroute" class="app-container">
-    <el-collapse v-model="activeNames">
-      <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll">
+      <el-collapse-item title="（一）基本信息" name="1">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" size="small" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -96,7 +96,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -361,4 +361,10 @@
   #detailroute .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/route/editRoute.vue b/src/views/route/editRoute.vue
index c8124cc..1444c55 100644
--- a/src/views/route/editRoute.vue
+++ b/src/views/route/editRoute.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="editroute" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -89,7 +89,7 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="（二）关联车辆" name="2">
-        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 10px;padding-right: 10px" @tab-click="handleClick">
+        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 20px;padding-right: 10px" @tab-click="handleClick">
           <el-tab-pane label="解绑当前车辆" name="first">
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px;padding-top: 20px">
               <el-checkbox-group v-model="removelist" class="checkbox">
@@ -101,7 +101,7 @@
             </div>
           </el-tab-pane>
           <el-tab-pane label="增加绑定车辆" name="second">
-            <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container" style="padding-left: 20px">
+            <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container" size="small" style="padding-left: 20px">
               <el-form-item class="selectForm-container-item" prop="keywords">
                 <el-input v-model.trim="listQuery.description" style="width: 180px" placeholder="车辆描述" clearable/>
               </el-form-item>
@@ -121,7 +121,7 @@
               <el-form-item class="selectForm-container-item" prop="keywords">
                 <dept-select v-if=" activeTab==='second'" v-model="listQuery.deptId" :dept-show="deptShow" style="width: 180px" placeholder="使用单位" clearable value=""/>
               </el-form-item>
-              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+              <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">查 询</el-button>
             </el-form>
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 20px">
               <el-checkbox-group v-model="addlist" class="checkbox">
@@ -138,7 +138,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -503,4 +503,10 @@
     background-color: orange;
     border-radius: 50%;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>

diff --git a/src/main.js b/src/main.js
index f2d105d..30e1696 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,23 @@
 import App from './App'
 import store from './store'
 import router from './router'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import 'leaflet.pm'
+import 'leaflet.pm/dist/leaflet.pm.css'
+import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+Vue.config.productionTip = false
+Vue.L = Vue.prototype.$L = L
+
+/* leaflet icon */
+delete L.Icon.Default.prototype._getIconUrl
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+})
 
 import '@/icons' // icon
 import '@/permission' // permission control
diff --git a/src/views/route/addRoute.vue b/src/views/route/addRoute.vue
index 8b5fb20..b208d0e 100644
--- a/src/views/route/addRoute.vue
+++ b/src/views/route/addRoute.vue
@@ -1,8 +1,8 @@
-<template xmlns:align="">
-  <div id="addroute" class="app-container">
-    <el-collapse v-model="activeNames" @change="handleChange">
+<template>
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll" @change="handleChange">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -101,7 +101,7 @@
       </el-collapse-item>
       <el-collapse-item :disabled="canclick2" title="（二）关联车辆" name="2">
         <div style="padding-top: 20px;padding-left: 40px">
-          <el-form ref="selectForm" :inline="true" :model="listQuery">
+          <el-form ref="selectForm" :inline="true" :model="listQuery" size="small">
             <el-form-item prop="keywords">
               <el-input v-model.trim="listQuery.description" placeholder="车辆描述" clearable/>
             </el-form-item>
@@ -120,7 +120,7 @@
             <el-form-item prop="keywords">
               <dept-select v-if="canclick2==false" v-model="listQuery.deptId" :dept-show="deptShow" placeholder="使用单位" clearable value=""/>
             </el-form-item>
-            <el-button :disabled="canclick3==false" class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+            <el-button :disabled="canclick3==false" class="filter-item" size="small" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
           </el-form>
         </div>
         <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px">
@@ -141,275 +141,276 @@
         </div>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
-  import { getDictCode } from '@/api/dict'
-  import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
-  import DeptSelect from '@/components/DeptSelect'
-  import L from 'leaflet'
-  import 'leaflet/dist/leaflet.css'
+import { getDictCode } from '@/api/dict'
+import { addRouteInfo, listUnbindCar, bindCar, addPath } from '@/api/routeInfo'
+import DeptSelect from '@/components/DeptSelect'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
 
-  export default {
-    components: { DeptSelect },
-    data() {
-      return {
-        activeNames: ['1', '3'],
-        deptShow: true,
-        map: null,
-        list: [],
-        alarmlist: [],
-        cartypelist: [],
-        canclick2: true,
-        canclick3: true,
-        timechoose: false,
-        click1: true,
-        click2: true,
-        click3: true,
-        accessTime: [],
-        carlist: [],
-        baselayer: [],
-        markerlayer: null,
-        pointForm: {
-          routeId: '',
-          pointlist: []
-        },
-        carForm: {
-          routeId: '',
-          carIds: []
-        },
-        listQuery: {
-          routeId: '',
-          description: '',
-          carCode: '',
-          carType: '',
-          deptId: ''
-        },
-        routeForm: {
-          id: '',
-          routeName: '',
-          alarmType: '',
-          alarmDistance: '',
-          startAddress: '',
-          endAddress: '',
-          mainRoad: '',
-          startDate: '',
-          endDate: '',
-          accessTime: '',
-          remarks: ''
-        }, // 表单
-        times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
-        options: [{
-          value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
-          label: '全天（0-23）'
-        }, {
-          value: '8,9,10,11,12,13,14,15,16,17,18',
-          label: '工作时间段（8-18）'
-        }, {
-          value: '8,9,10,11,12',
-          label: '上午工作时间段（8-12）'
-        }, {
-          value: '14,15,16,17,18',
-          label: '下午工作时间段（14-18）'
-        }, {
-          value: '-1',
-          label: '自定义时间段'
-        }],
-        rules: {
-          routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
-          alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
-          alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
-        }
-      }
-    },
-    mounted() {
-      getDictCode('routeAlarmType').then(response => {
-        this.alarmlist = response.data
-      })
-      getDictCode('carType').then(response => {
-        this.cartypelist = response.data
-      })
-    },
-    methods: {
-      removeall() {
-        var base = this.baselayer
-        this.map.eachLayer(function(layer) {
-          if (layer !== base[0] && layer !== base[1]) {
-            layer.remove()
-          }
-        })
-        this.pointForm.pointlist = []
+export default {
+  components: { DeptSelect },
+  data() {
+    return {
+      activeNames: ['1', '3'],
+      deptShow: true,
+      map: null,
+      list: [],
+      alarmlist: [],
+      cartypelist: [],
+      canclick2: true,
+      canclick3: true,
+      timechoose: false,
+      click1: true,
+      click2: true,
+      click3: true,
+      accessTime: [],
+      carlist: [],
+      baselayer: [],
+      markerlayer: null,
+      pointForm: {
+        routeId: '',
+        pointlist: []
       },
-      initMap() {
-        const map = L.map('map', {
-          minZoom: 3,
-          maxZoom: 18,
-          center: [27.75962, 116.06021],
-          zoom: 11,
-          zoomControl: false,
-          attributionControl: false,
-          crs: L.CRS.EPSG3857
-        })
-        this.map = map // data上需要挂载
-        window.map = map
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.baselayer.push(L.tileLayer(
-          'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
-          { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
-        ).addTo(map))
-        this.map.pm.addControls({
-          position: 'topleft',
-          drawPolygon: false, // 添加绘制多边形
-          drawMarker: false, // 添加按钮以绘制标记
-          drawCircleMarker: false, // 添加按钮以绘制圆形标记
-          drawPolyline: true, // 添加按钮绘制线条
-          drawRectangle:	false,	// 添加按钮绘制矩形
-          drawCircle: false, //  添加按钮绘制圆圈
-          editMode: false, //  添加按钮编辑多边形
-          dragMode: false, //   添加按钮拖动多边形
-          cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
-          removalMode: false // 清除图层
-        })
-        // 设置绘制后的线条颜色等
-        this.map.pm.setPathOptions({
-          color: '#409eff',
-          fillColor: 'green',
-          fillOpacity: 0.4
-        })
-        this.map.pm.setLang('zh')
-        this.map.on('pm:create', e => {
-          if (this.pointForm.pointlist.length !== 0) {
-            this.$message.warning('一次只能绘制一条路线')
-            e.layer.remove()
-          } else {
-            console.log(e, '绘制完成时调用')
-            console.log(e.layer._latlngs[0].lat)
-            var Icon
-            var removepoints = []
-            for (var i = 0; i < e.layer._latlngs.length; i++) {
-              if (i === 0) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/start.png'),
-                  iconSize: [35, 35]
-                })
-              } else if (i === e.layer._latlngs.length - 1) {
-                Icon = L.icon({
-                  iconUrl: require('../../assets/global_images/end.png'),
-                  iconSize: [35, 35]
-                })
-              } else {
-                Icon = L.divIcon({
-                  className: 'my-div-icon', // 自定义icon css样式
-                  iconSize: [10, 10]// 点大小
-                })
-              }
-              var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
-                icon: Icon
-              })
-              removepoints.push(marker)
-            }
-            this.markerlayer = L.layerGroup(removepoints)
-            map.addLayer(this.markerlayer)
-            this.pointForm.pointlist = e.layer._latlngs
-          }
-        })
+      carForm: {
+        routeId: '',
+        carIds: []
       },
-      fetchData() {
-        console.log('fetchData')
-        listUnbindCar(this.listQuery).then(response => {
-          this.list = response.data
-        })
+      listQuery: {
+        routeId: '',
+        description: '',
+        carCode: '',
+        carType: '',
+        deptId: ''
       },
-      accessTimeSelect(val) {
-        if (val === '-1') {
-          this.timechoose = true
-        } else {
-          this.timechoose = false
-        }
-      },
-      search() {
-        this.fetchData(false)
-      },
-      saveRoute() {
-        this.click3 = false
-        if (this.pointForm.pointlist.length === 0) {
-          this.click3 = true
-          this.$message.warning('请规划路线')
-        } else {
-          addPath(this.pointForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('新增路线成功！')
-              this.$router.push({ path: '/route/list' })
-            }
-          })
-        }
-      },
-      saveCar() {
-        this.click2 = false
-        if (this.carlist.length === 0) {
-          this.$message.warning('请至少选择一辆车')
-          this.click2 = true
-        } else {
-          for (var i = 0; i < this.carlist.length; i++) {
-            this.carForm.carIds.push(Number(this.carlist[i]))
-          }
-          console.log(this.carForm)
-          bindCar(this.carForm).then(response => {
-            if (response.code === 200) {
-              this.$message.success('绑定车辆信息成功！')
-              this.canclick3 = false
-              this.initMap()
-            }
-          })
-        }
-      },
-      saveData() {
-        this.click1 = false
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            if (this.routeForm.startDate > this.routeForm.endDate) {
-              this.$message.warning('请确认输入正确起止时间')
-              this.click1 = true
-            } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
-              this.$message.warning('请选择时间段')
-              this.click1 = true
-            } else {
-              var timeselect = false
-              if (this.routeForm.accessTime === '-1') {
-                timeselect = true
-                this.routeForm.accessTime = this.accessTime[0]
-                for (var i = 1; i < this.accessTime.length; i++) {
-                  this.routeForm.accessTime += (',' + this.accessTime[i])
-                }
-              }
-              addRouteInfo(this.routeForm).then(response => {
-                if (response.code === 200) {
-                  this.$message.success('添加规划路线基本信息成功！')
-                  if (timeselect) {
-                    this.routeForm.accessTime = '自定义时间段'
-                  }
-                  this.canclick2 = false
-                  this.carForm.routeId = response.data
-                  this.listQuery.routeId = response.data
-                  this.pointForm.routeId = response.data
-                  this.activeNames.push('2')
-                  this.fetchData()
-                }
-              })
-            }
-          } else {
-            this.click1 = true
-          }
-        })
-      },
-      handleChange(val) {
-        console.log(val)
+      routeForm: {
+        id: '',
+        routeName: '',
+        alarmType: '',
+        alarmDistance: '',
+        startAddress: '',
+        endAddress: '',
+        mainRoad: '',
+        startDate: '',
+        endDate: '',
+        accessTime: '',
+        remarks: ''
+      }, // 表单
+      times: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
+      options: [{
+        value: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
+        label: '全天（0-23）'
+      }, {
+        value: '8,9,10,11,12,13,14,15,16,17,18',
+        label: '工作时间段（8-18）'
+      }, {
+        value: '8,9,10,11,12',
+        label: '上午工作时间段（8-12）'
+      }, {
+        value: '14,15,16,17,18',
+        label: '下午工作时间段（14-18）'
+      }, {
+        value: '-1',
+        label: '自定义时间段'
+      }],
+      rules: {
+        routeName: [{ required: true, message: '路线描述不能为空', trigger: ['blur', 'change'] }],
+        alarmType: [{ required: true, message: '报警类型必选', trigger: ['blur', 'change'] }],
+        alarmDistance: [{ required: true, message: '偏离报警距离不能为空', trigger: ['blur', 'change'] }]
       }
     }
+  },
+  mounted() {
+    getDictCode('routeAlarmType').then(response => {
+      this.alarmlist = response.data
+    })
+    getDictCode('carType').then(response => {
+      this.cartypelist = response.data
+    })
+  },
+  methods: {
+    removeall() {
+      var base = this.baselayer
+      this.map.eachLayer(function(layer) {
+        if (layer !== base[0] && layer !== base[1]) {
+          layer.remove()
+        }
+      })
+      this.pointForm.pointlist = []
+    },
+    initMap() {
+      const map = L.map('map', {
+        minZoom: 3,
+        maxZoom: 18,
+        center: [27.75962, 116.06021],
+        zoom: 11,
+        zoomControl: false,
+        attributionControl: false,
+        crs: L.CRS.EPSG3857
+      })
+      this.map = map // data上需要挂载
+      window.map = map
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      this.baselayer.push(L.tileLayer(
+        'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
+        { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
+      ).addTo(map))
+      debugger
+      this.map.pm.addControls({
+        position: 'topleft',
+        drawPolygon: false, // 添加绘制多边形
+        drawMarker: false, // 添加按钮以绘制标记
+        drawCircleMarker: false, // 添加按钮以绘制圆形标记
+        drawPolyline: true, // 添加按钮绘制线条
+        drawRectangle:	false,	// 添加按钮绘制矩形
+        drawCircle: false, //  添加按钮绘制圆圈
+        editMode: false, //  添加按钮编辑多边形
+        dragMode: false, //   添加按钮拖动多边形
+        cutPolygon: false, // 添加一个按钮以删除图层里面的部分内容
+        removalMode: false // 清除图层
+      })
+      // 设置绘制后的线条颜色等
+      this.map.pm.setPathOptions({
+        color: '#409eff',
+        fillColor: 'green',
+        fillOpacity: 0.4
+      })
+      this.map.pm.setLang('zh')
+      this.map.on('pm:create', e => {
+        if (this.pointForm.pointlist.length !== 0) {
+          this.$message.warning('一次只能绘制一条路线')
+          e.layer.remove()
+        } else {
+          console.log(e, '绘制完成时调用')
+          console.log(e.layer._latlngs[0].lat)
+          var Icon
+          var removepoints = []
+          for (var i = 0; i < e.layer._latlngs.length; i++) {
+            if (i === 0) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/start.png'),
+                iconSize: [35, 35]
+              })
+            } else if (i === e.layer._latlngs.length - 1) {
+              Icon = L.icon({
+                iconUrl: require('../../assets/global_images/end.png'),
+                iconSize: [35, 35]
+              })
+            } else {
+              Icon = L.divIcon({
+                className: 'my-div-icon', // 自定义icon css样式
+                iconSize: [10, 10]// 点大小
+              })
+            }
+            var marker = L.marker([e.layer._latlngs[i].lat, e.layer._latlngs[i].lng], {
+              icon: Icon
+            })
+            removepoints.push(marker)
+          }
+          this.markerlayer = L.layerGroup(removepoints)
+          map.addLayer(this.markerlayer)
+          this.pointForm.pointlist = e.layer._latlngs
+        }
+      })
+    },
+    fetchData() {
+      console.log('fetchData')
+      listUnbindCar(this.listQuery).then(response => {
+        this.list = response.data
+      })
+    },
+    accessTimeSelect(val) {
+      if (val === '-1') {
+        this.timechoose = true
+      } else {
+        this.timechoose = false
+      }
+    },
+    search() {
+      this.fetchData(false)
+    },
+    saveRoute() {
+      this.click3 = false
+      if (this.pointForm.pointlist.length === 0) {
+        this.click3 = true
+        this.$message.warning('请规划路线')
+      } else {
+        addPath(this.pointForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('新增路线成功！')
+            this.$router.push({ path: '/route/list' })
+          }
+        })
+      }
+    },
+    saveCar() {
+      this.click2 = false
+      if (this.carlist.length === 0) {
+        this.$message.warning('请至少选择一辆车')
+        this.click2 = true
+      } else {
+        for (var i = 0; i < this.carlist.length; i++) {
+          this.carForm.carIds.push(Number(this.carlist[i]))
+        }
+        console.log(this.carForm)
+        bindCar(this.carForm).then(response => {
+          if (response.code === 200) {
+            this.$message.success('绑定车辆信息成功！')
+            this.canclick3 = false
+            this.initMap()
+          }
+        })
+      }
+    },
+    saveData() {
+      this.click1 = false
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.routeForm.startDate > this.routeForm.endDate) {
+            this.$message.warning('请确认输入正确起止时间')
+            this.click1 = true
+          } else if (this.routeForm.accessTime === '-1' && this.accessTime.length === 0) {
+            this.$message.warning('请选择时间段')
+            this.click1 = true
+          } else {
+            var timeselect = false
+            if (this.routeForm.accessTime === '-1') {
+              timeselect = true
+              this.routeForm.accessTime = this.accessTime[0]
+              for (var i = 1; i < this.accessTime.length; i++) {
+                this.routeForm.accessTime += (',' + this.accessTime[i])
+              }
+            }
+            addRouteInfo(this.routeForm).then(response => {
+              if (response.code === 200) {
+                this.$message.success('添加规划路线基本信息成功！')
+                if (timeselect) {
+                  this.routeForm.accessTime = '自定义时间段'
+                }
+                this.canclick2 = false
+                this.carForm.routeId = response.data
+                this.listQuery.routeId = response.data
+                this.pointForm.routeId = response.data
+                this.activeNames.push('2')
+                this.fetchData()
+              }
+            })
+          }
+        } else {
+          this.click1 = true
+        }
+      })
+    },
+    handleChange(val) {
+      console.log(val)
+    }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
@@ -449,4 +450,13 @@
     align-items: center;
     border: 2px solid #ccc;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
+</style>
+<style lang="scss" scoped>
+
 </style>
diff --git a/src/views/route/detailRoute.vue b/src/views/route/detailRoute.vue
index 5501b36..cbe1b12 100644
--- a/src/views/route/detailRoute.vue
+++ b/src/views/route/detailRoute.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="detailroute" class="app-container">
-    <el-collapse v-model="activeNames">
-      <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll">
+      <el-collapse-item title="（一）基本信息" name="1">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" size="small" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -96,7 +96,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -361,4 +361,10 @@
   #detailroute .el-form-item {
     margin-bottom: 10px;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/route/editRoute.vue b/src/views/route/editRoute.vue
index c8124cc..1444c55 100644
--- a/src/views/route/editRoute.vue
+++ b/src/views/route/editRoute.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="editroute" class="app-container">
-    <el-collapse v-model="activeNames">
+  <app-container>
+    <el-collapse v-model="activeNames" class="route-coll">
       <el-collapse-item title="（一）基本信息" name="1" >
-        <el-form ref="dataForm" :rules="rules" :model="routeForm" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
+        <el-form ref="dataForm" :rules="rules" :model="routeForm" size="small" label-position="right" label-width="130px" style="padding-top:20px;padding-right: 40px">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="路线描述" prop="routeName" >
@@ -89,7 +89,7 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="（二）关联车辆" name="2">
-        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 10px;padding-right: 10px" @tab-click="handleClick">
+        <el-tabs v-model="activeTab" style="padding-top: 10px;padding-left: 20px;padding-right: 10px" @tab-click="handleClick">
           <el-tab-pane label="解绑当前车辆" name="first">
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 40px;padding-top: 20px">
               <el-checkbox-group v-model="removelist" class="checkbox">
@@ -101,7 +101,7 @@
             </div>
           </el-tab-pane>
           <el-tab-pane label="增加绑定车辆" name="second">
-            <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container" style="padding-left: 20px">
+            <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container" size="small" style="padding-left: 20px">
               <el-form-item class="selectForm-container-item" prop="keywords">
                 <el-input v-model.trim="listQuery.description" style="width: 180px" placeholder="车辆描述" clearable/>
               </el-form-item>
@@ -121,7 +121,7 @@
               <el-form-item class="selectForm-container-item" prop="keywords">
                 <dept-select v-if=" activeTab==='second'" v-model="listQuery.deptId" :dept-show="deptShow" style="width: 180px" placeholder="使用单位" clearable value=""/>
               </el-form-item>
-              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
+              <el-button class="filter-item" type="primary" icon="el-icon-search" size="small" @click="search">查 询</el-button>
             </el-form>
             <div class="infinite-list-wrapper" style="overflow:auto;height: 100px;padding-left: 20px">
               <el-checkbox-group v-model="addlist" class="checkbox">
@@ -138,7 +138,7 @@
         <div id="map"/>
       </el-collapse-item>
     </el-collapse>
-  </div>
+  </app-container>
 </template>
 <script>
 import { getDictCode } from '@/api/dict'
@@ -503,4 +503,10 @@
     background-color: orange;
     border-radius: 50%;
   }
+  .route-coll{
+    .el-collapse-item__header{
+      font-weight: bolder;
+      margin-left: 10px;
+    }
+  }
 </style>
diff --git a/src/views/route/listRoute.vue b/src/views/route/listRoute.vue
index d40f63d..ea9abc2 100644
--- a/src/views/route/listRoute.vue
+++ b/src/views/route/listRoute.vue
@@ -1,57 +1,39 @@
-<template xmlns:align="">
-  <div class="app-container">
+<template>
+  <app-container>
     <!--筛选条件-->
-    <div class="search-div">
-      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model.trim="listQuery.routeName" placeholder="路线描述" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model="listQuery.startAddress" placeholder="起始地址" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model="listQuery.endAddress" placeholder="终点地址" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <el-input v-model="listQuery.mainRoad" placeholder="主要途径道路" clearable/>
-        </el-form-item>
-        <el-form-item class="selectForm-container-item" prop="keywords">
-          <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="申请单位" clearable value=""/>
-        </el-form-item>
-        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查 询</el-button>
-        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="add">增加路线</el-button>
-      </el-form>
-    </div>
+    <search-area size="small" @search="search">
+      <search-item>
+        <el-input v-model.trim="listQuery.routeName" placeholder="路线描述" size="small" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.startAddress" placeholder="起始地址" size="small" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.endAddress" placeholder="终点地址" size="small" clearable/>
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.mainRoad" placeholder="主要途径道路" size="small" clearable/>
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.deptId" :dept-show="deptShow" placeholder="申请单位" clearable size="small" value=""/>
+      </search-item>
+    </search-area>
     <!--查询结果Table显示-->
-    <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange" style="margin-top: 20px">
-      <el-table-column :index="indexMethod" align="center" type="index" label="序号" width="55"/>
-      <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span :class="column.class">{{ scope.row[column.value] }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="180" align="center">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="detail(scope.row)">详情</el-button>
-          <el-button type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
-          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页-->
-    <div class="pagination-container">
-      <el-pagination
-        v-show="total>listQuery.limit"
-        :current-page="listQuery.offset"
-        :page-sizes="[15,20,30]"
-        :page-size="listQuery.limit"
-        :total="total"
-        align="center"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"/>
-    </div>
-  </div>
+    <normal-table :data="list" :query="listQuery" :total="total" :columns="columns" :list-loading="listLoading" class="table" border size="small" @selection-change="handleSelectionChange" @change="changePage">
+      <template slot="btns">
+        <el-button size="small" class="edit_btn" icon="el-icon-plus" @click="add">增加路线</el-button>
+      </template>
+      <template slot="columns">
+        <el-table-column label="操作" width="180" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="detail(scope.row)">详情</el-button>
+            <el-button type="text" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button type="text" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </template>
+    </normal-table>
+  </app-container>
 </template>
 <script>
 import { getRouteInfoList, delRouteInfo } from '@/api/routeInfo'
@@ -209,6 +191,16 @@
     // 多选触发方法
     handleSelectionChange(val) {
       this.multipleSelection = val
+    },
+    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+    changePage(val) {
+      if (val && val.size) {
+        this.listQuery.limit = val.size
+      }
+      if (val && val.page) {
+        this.listQuery.offset = val.page
+      }
+      this.fetchData()
     }
   }
 }