冲突解决

src/App.vue

@@ -27,7 +27,7 @@ export default {
 }
 
 </style>
-<style lang="scss" >
+<!-- <style lang="scss" >
 .el-select {
   .el-input__inner{
     color: red;
@@ -39,4 +39,4 @@ export default {
     color: red;
   }
 }
-</style>
+</style> -->

src/api/system/msgLog.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询短信日志列表
+export function listMsgLog(query) {
+  return request({
+    url: '/system/msgLog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询短信日志详细
+export function getMsgLog(id) {
+  return request({
+    url: '/system/msgLog/' + id,
+    method: 'get'
+  })
+}
+
+// 新增短信日志
+export function addMsgLog(data) {
+  return request({
+    url: '/system/msgLog',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改短信日志
+export function updateMsgLog(data) {
+  return request({
+    url: '/system/msgLog',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除短信日志
+export function delMsgLog(id) {
+  return request({
+    url: '/system/msgLog/' + id,
+    method: 'delete'
+  })
+}

src/components/Map/TrajectoryMap.vue

@@ -18,6 +18,8 @@
 import AMapLoader from "@amap/amap-jsapi-loader";
 import globalConfig from '@/utils/config/globalConfig'
 import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
+import { getArea } from '@/api/system/area'
+import { listParking } from '@/api/system/parking'
 export default {
   name: "TrajectoryMap",
   components: { AreaTextSelect },
@@ -38,6 +40,10 @@ export default {
       type: String,
       default: '27.101745'
     },
+    areaId: {
+      type: Number,
+      default: ''
+    },
     tripRouteStr: {
       type: String,
       default: ''
@@ -56,11 +62,18 @@ export default {
       area: {
         province: '福建省',
         city: '宁德市',
-      }
+      },
+      area:{},
+      parkingList:[],
+      noParkingList:[],
+      noridingList:[],
+      labels: [],
     }
   },
   mounted() {
-    this.initAMap();
+    console.log(this.areaId,'areaIdareaIdareaId');
+    // this.initAMap();
+    this.getAreas(this.areaId)
   },
   beforeDestroy() {
     this.destroyMap();
@@ -75,19 +88,91 @@ export default {
         console.log("轨迹=====地图实例不存在，无需销毁");
       }
     },
+    showMarkers() {
+      if (this.show) {
+        // this.markers.forEach(marker => {
+        //   marker.show();
+        // });
+        this.labels.forEach(label => {
+          label.show();
+        });
+      } else {
+        // this.markers.forEach(marker => {
+        //   marker.hide();
+        // });
+        this.labels.forEach(label => {
+          label.hide();
+        });
+      }
+      this.show = !this.show;
+      const elements = document.querySelectorAll('.apiary-marker-name');
+      elements.forEach(element => {
+        element.style.visibility = this.show ? 'hidden' : 'visible';
+      });
+    },
+    async getAreas(areaId) {
+      getArea(this.areaId).then(response => {
+      
+          console.log(response,'responseresponse');
+          this.area = response.data;
+          
+        
+          listParking({ areaId: this.area.areaId }).then(response => {
+            let list = response.rows;
+            console.log(list,'listlistlist');
+            list.forEach(item => {
+              if (item.type == '1') {
+                this.parkingList.push(item);
+              } else if (item.type == '2') {
+                this.noParkingList.push(item);
+              } else if (item.type == '3') {
+                this.noridingList.push(item);
+              }
+            });
+          
+            this.initAMap();
+          });
+      });
+    },
     initAMap() {
       AMapLoader.load({
         key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: ["AMap.MoveAnimation"]
       }).then((AMap) => {
+        let abb;
+      try {
+        abb = JSON.parse(this.tripRouteStr);
+      } catch (error) {
+        console.error("Error parsing tripRouteStr:", error);
+        return;
+      }
+      let latitude = parseFloat(abb[0][1]);
+      let longitude = parseFloat(abb[0][0]);
         this.AMap = AMap;
         this.map = new AMap.Map("container", {
           // 设置地图容器id
           resizeEnable: true,
           viewMode: "3D", // 是否为3D地图模式
           zoom: 16, // 初始化地图级别
-          center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
+          // center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
+          center:[longitude,latitude]
+        });
+        this.addArea(JSON.parse( this.area.boundaryStr) || []);
+         //停车区
+         this.parkingList.forEach(parking => {
+          this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
+          this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
+        });
+        //禁停区
+        this.noParkingList.forEach(noparking => {
+          this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
+          this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
+        });
+        //禁行区
+        this.noridingList.forEach(noriding => {
+          this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
+          this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
         });
         this.trajectory(); //轨迹
 
@@ -96,6 +181,142 @@ export default {
         console.log(e);
       });
     },
+    addMarker2(parking, icon, title, color) {
+      let marker = new AMap.Marker({
+        map: this.map,
+        icon: new AMap.Icon({
+          image: icon,
+          size: new AMap.Size(25, 36), // 设置图标的宽高
+          imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
+        }),
+        position: [parking.longitude, parking.latitude],
+        offset: new AMap.Pixel(-12.5, -36)
+      });
+
+      this.markers.push(marker);
+
+      // console.log("title============="+title)
+      // 创建一个 Text 实例来显示标题
+      let text = new AMap.Text({
+        text: title,
+        anchor: 'center', // 设置文本的锚点
+        position: [parking.longitude, parking.latitude],
+        offset: new AMap.Pixel(0, -50),
+        style: {
+          'background-color': color, // 背景颜色为蓝色
+          'border': 'none', // 边框颜色与背景一致
+          'border-radius': '5px', // 圆角 5px
+          'color': 'white', // 文字颜色为白色
+          'font-size': '12px', // 字体大小
+        }
+      });
+
+      // 将文本标签添加到地图实例
+      this.map.add(text);
+      // console.log("text=============",text)
+      this.labels.push(text)
+    },
+    addParking(data, title, lon, lat) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#3b7ed9',  // 修改边界颜色为红色
+        strokeWeight: 2,         // 加粗边界
+        strokeStyle: 'solid',
+        strokeDasharray: [5, 5],
+      });
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.7,
+          fillColor: '#71b7cc'  // 鼠标悬浮时填充颜色为红色
+        });
+      });
+      polygon.on('mouseout', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#a7c1d0'  // 鼠标移出时恢复填充颜色
+        });
+      });
+      this.map.add(polygon);
+    },
+    addNoParking(data) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#ff0000',  // 修改边界颜色为红色
+        strokeWeight: 2,         // 加粗边界
+        strokeStyle: 'solid',
+        strokeDasharray: [5, 5],
+      });
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.7,
+          fillColor: '#ff0000'  // 鼠标悬浮时填充颜色为红色
+        });
+      });
+      polygon.on('mouseout', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#cc7b7b'  // 鼠标移出时恢复填充颜色
+        });
+      });
+      this.map.add(polygon);
+    },
+    addNoriding(data, title, lon, lat) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#ffcc00',  // 修改边界颜色为红色
+        strokeWeight: 2,         // 加粗边界
+        strokeStyle: 'solid',
+        strokeDasharray: [5, 5],
+      });
+      polygon.on('mouseover', () => {
+        polygon.setOptions({
+          fillOpacity: 0.7,
+          fillColor: '#FFEBA4FF'
+        });
+      });
+      polygon.on('mouseout', () => {
+        polygon.setOptions({
+          fillOpacity: 0.5,
+          fillColor: '#ffeba4'
+        });
+      });
+      this.map.add(polygon);
+    },
+  
+    addArea(data) {
+      let polygon = new AMap.Polygon({
+        path: data,
+        fillColor: '#ccebc5',
+        strokeOpacity: 1,
+        fillOpacity: 0.5,
+        strokeColor: '#2b8cbe',
+        strokeWeight: 1,
+        strokeStyle: 'dashed',
+        strokeDasharray: [5, 5],
+      });
+      // polygon.on('mouseover', () => {
+      //   polygon.setOptions({
+      //     fillOpacity: 0.7,
+      //     fillColor: '#7bccc4'
+      //   })
+      // })
+      // polygon.on('mouseout', () => {
+      //   polygon.setOptions({
+      //     fillOpacity: 0.5,
+      //     fillColor: '#ccebc5'
+      //   })
+      // })
+      this.map.add(polygon);
+    },
     // 显示轨迹
     trajectory() {
       this.line = JSON.parse(this.tripRouteStr)

src/views/system/area/index.vue

@@ -73,8 +73,8 @@
         </template>
       </el-table-column>
       <el-table-column label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true"/>
-      <el-table-column label="联系人" align="center" prop="contact" />
-      <el-table-column label="联系人电话" align="center" prop="phone" />
+<!--      <el-table-column label="联系人" align="center" prop="contact" />-->
+<!--      <el-table-column label="联系人电话" align="center" prop="phone" />-->
       <el-table-column label="状态" align="center" key="status">
         <template slot-scope="scope">
           <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@@ -139,24 +139,6 @@
               <el-input v-model="form.areaName" placeholder="请输入运营区" />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="运营区域">
-              <el-select v-model="form.province" clearable size="small" placeholder="请选择省" class="filter-item"
-                style="width: 90px" @change="provinceChange($event)">
-                <el-option v-for="item in form.provinceList" :key="item.name" :label="item.name" :value="item.name" />
-              </el-select>
-
-              <el-select v-model="form.city" clearable size="small" placeholder="请选择城市" class="filter-item"
-                style="width: 100px" @change="cityChange($event)">
-                <el-option v-for="item in form.cityList" :key="item.name" :label="item.name" :value="item.name" />
-              </el-select>
-
-              <el-select v-model="form.county" clearable size="small" placeholder="请选择区县" class="filter-item"
-                style="width: 100px">
-                <el-option v-for="item in form.countyList" :key="item.name" :label="item.name" :value="item.name" />
-              </el-select>
-            </el-form-item>
-          </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
@@ -165,23 +147,41 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="运营个性化标语" prop="slogan" label-width="120px">
-              <el-input v-model="form.slogan" placeholder="请输入运营个性化标语" style="" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="联系人" prop="contact">
-              <el-input v-model="form.contact" placeholder="请输入联系人" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="联系人电话" label-width="90" prop="phone">
-              <el-input v-model="form.phone" style="width: 75%" placeholder="请输入联系人电话" />
+            <el-form-item label="运营区域">
+              <el-select v-model="form.province" clearable size="small" placeholder="请选择省" class="filter-item"
+                         style="width: 90px" @change="provinceChange($event)">
+                <el-option v-for="item in form.provinceList" :key="item.name" :label="item.name" :value="item.name" />
+              </el-select>
+
+              <el-select v-model="form.city" clearable size="small" placeholder="请选择城市" class="filter-item"
+                         style="width: 100px" @change="cityChange($event)">
+                <el-option v-for="item in form.cityList" :key="item.name" :label="item.name" :value="item.name" />
+              </el-select>
+
+              <el-select v-model="form.county" clearable size="small" placeholder="请选择区县" class="filter-item"
+                         style="width: 100px">
+                <el-option v-for="item in form.countyList" :key="item.name" :label="item.name" :value="item.name" />
+              </el-select>
             </el-form-item>
           </el-col>
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="运营个性化标语" prop="slogan" label-width="120px">-->
+<!--              <el-input v-model="form.slogan" placeholder="请输入运营个性化标语" style="" />-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
         </el-row>
+<!--        <el-row>-->
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="联系人" prop="contact">-->
+<!--              <el-input v-model="form.contact" placeholder="请输入联系人" />-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="联系人电话" label-width="90" prop="phone">-->
+<!--              <el-input v-model="form.phone" style="width: 75%" placeholder="请输入联系人电话" />-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
         <el-row>
           <el-col :span="12">
             <el-form-item label="运营时间" prop="areaTime">
@@ -466,8 +466,8 @@ export default {
       // 表单校验
       rules: {
         areaName: [{ required: true, message: "运营区域不能为空", trigger: "blur" }],
-        contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
-        phone: [{ required: true, message: "联系人电话不能为空", trigger: "blur" }],
+        // contact: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
+        // phone: [{ required: true, message: "联系人电话不能为空", trigger: "blur" }],
         autoReplacementOrder: [{ required: true, message: "最低电量不能为空", trigger: "blur" }],
         deptId: [{ required: true, message: "运营商不能为空", trigger: "blur" }],
       },
@@ -803,4 +803,14 @@ export default {
 .el-dialog:not(.is-fullscreen) {
   margin-top: 2vh !important;
 }
+.el-upload--picture-card {
+  width: 60px !important;
+  height: 60px !important;
+  line-height: 70px !important;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+  width: 60px !important;
+  height: 60px !important;
+}
 </style>

src/views/system/device/index.vue

@@ -1,21 +1,28 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-    
-
       <el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'">
-        <el-select v-model="queryParams.deptId" placeholder="请选择运营商" clearable   :popper-append-to-body="false">
+        <el-select v-model="queryParams.deptId" placeholder="选择运营商"  style="width: 120px;" clearable>
           <el-option
             v-for="item in deptOptions"
             :key="item.deptId"
             :label="item.deptName"
             :value="item.deptId"
-           
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="运营区" prop="areaId" v-if="userName == 'admin'">
+        <el-select v-model="queryParams.areaId" placeholder="选择运营区"  style="width: 120px;" clearable>
+          <el-option
+            v-for="item in areaOptions"
+            :key="item.areaId"
+            :label="item.areaName"
+            :value="item.areaId"
           ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="MAC" prop="mac">
-        <el-input style="width: 150px"
+        <el-input style="width: 120px"
           v-model="queryParams.mac"
           placeholder="请输入mac"
           clearable
@@ -23,15 +30,15 @@
         />
       </el-form-item>
       <el-form-item label="SN号" prop="sn">
-        <el-input style="width: 150px"
+        <el-input style="width: 120px"
           v-model="queryParams.sn"
-          placeholder="请输入设备SN号"
+          placeholder="请输入SN号"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
       <el-form-item label="车牌号" prop="vehicleNum">
-        <el-input style="width: 150px"
+        <el-input style="width: 120px"
           v-model="queryParams.vehicleNum"
           placeholder="请输入车牌号"
           clearable
@@ -39,7 +46,7 @@
         />
       </el-form-item>
       <el-form-item label="在线状态" prop="onlineStatus">
-        <el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态" clearable>
+        <el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态"  style="width: 100px;" clearable>
           <el-option
             v-for="dict in dict.type.as_online_status"
             :key="dict.value"
@@ -49,7 +56,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+        <el-select v-model="queryParams.status" placeholder="请选择状态"  style="width: 100px;" clearable>
           <el-option
             v-for="dict in statusOptions"
             :key="dict.dictValue"
@@ -59,7 +66,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="锁状态" prop="status">
-        <el-select v-model="queryParams.lockStatus" placeholder="请选择锁状态" clearable>
+        <el-select v-model="queryParams.lockStatus" placeholder="请选择锁状态"  style="width: 100px;" clearable>
           <el-option
             v-for="dict in dict.type.et_device_lock_status"
             :key="dict.value"
@@ -172,45 +179,50 @@
           v-hasPermi="['system:device:export']"
         >导出</el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange"  :default-sort="defaultSort" @sort-change="handleSortChange">
+    <el-table ref="tableSort" v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange"  :default-sort="defaultSort"
+              @sort-change="handleSortChange"
+            class="el-table">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="运营商" align="center" prop="deptName" v-if="userName == 'admin'"/>
-      <el-table-column label="运营区" align="center" prop="areaName" width="60"/>
-      <el-table-column label="mac" align="center" prop="mac" width="70"/>
-      <el-table-column label="SN" align="center" prop="sn" sortable="custom" :sort-orders="['descending', 'ascending']"/>
-      <el-table-column label="车辆型号" align="center" prop="model" />
-      <el-table-column label="车牌号" align="center" prop="vehicleNum" sortable="custom" :sort-orders="['descending', 'ascending']"/>
-      <el-table-column label="定位" align="center" prop="location" :show-overflow-tooltip="true"/>
-      <el-table-column label="版本" align="center" prop="version" width="70" sortable="custom" :sort-orders="['descending', 'ascending']"/>
-      <el-table-column label="信号" align="center" prop="signalStrength" sortable="custom" :sort-orders="['descending', 'ascending']"/>
-      <el-table-column label="卫星" align="center" prop="satellites" width="70" sortable="custom" :sort-orders="['descending', 'ascending']"/>
-      <el-table-column label="钥匙" align="center" prop="quality" width="60"/>
-      <el-table-column label="定位时间" align="center" prop="lastLocationTime" width="90">
+      <el-table-column label="运营商" align="center" prop="deptName" v-if="userName == 'admin' && columns[0].visible" />
+      <el-table-column label="运营区" align="center" prop="areaName"  v-if="columns[1].visible"/>
+      <el-table-column label="MAC" align="center" prop="mac" v-if="columns[2].visible"/>
+      <el-table-column label="SN" align="center" prop="sn" sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[3].visible"/>
+      <el-table-column label="车辆型号" align="center" prop="model" v-if="columns[4].visible"/>
+      <el-table-column label="车牌号" align="center" prop="vehicleNum"  sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[5].visible"/>
+      <el-table-column label="版本" align="center" prop="version"  sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[6].visible">
+        <template slot-scope="scope">
+          <span>{{ formatVersion(scope.row.hardwareVersionId)+' | '+scope.row.version }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="信号" align="center" prop="signalStrength" sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[7].visible"/>
+      <el-table-column label="卫星" align="center" prop="satellites"  sortable="custom" :sort-orders="['descending', 'ascending']" v-if="columns[8].visible"/>
+      <el-table-column label="钥匙" align="center" prop="quality" width="60" v-if="columns[9].visible"/>
+      <el-table-column label="定位时间" align="center" prop="lastLocationTime"  v-if="columns[10].visible">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.lastLocationTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="电压" align="center" prop="voltage" width="60" :formatter="formatVoltage"/>
-      <el-table-column label="电量" align="center" prop="remainingPower" width="70" sortable="custom" :sort-orders="['descending', 'ascending']" :formatter="formatPower"/>
-      <el-table-column label="车辆状态" align="center" prop="status">
+      <el-table-column label="电压" align="center" prop="voltage"  :formatter="formatVoltage" v-if="columns[11].visible"/>
+      <el-table-column label="电量" align="center" prop="remainingPower" sortable="custom" :sort-orders="['descending', 'ascending']" :formatter="formatPower" v-if="columns[12].visible"/>
+      <el-table-column label="车辆状态" align="center" prop="status"  v-if="columns[13].visible">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.as_device_status" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="锁状态" align="center" prop="status">
+      <el-table-column label="锁" align="center" prop="status" width="60" v-if="columns[14].visible">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.et_device_lock_status" :value="scope.row.lockStatus"/>
         </template>
       </el-table-column>
-      <el-table-column label="网络状态" align="center" prop="onlineStatus">
+      <el-table-column label="网络" align="center" prop="onlineStatus" width="60" v-if="columns[15].visible">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.as_online_status" :value="scope.row.onlineStatus"/>
         </template>
       </el-table-column>
-      <el-table-column label="二维码" align="center" width="100">
+      <el-table-column label="二维码" align="center" v-if="columns[16].visible">
         <template slot-scope="d">
           <el-popover
             placement="top"
@@ -223,12 +235,12 @@
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="90">
+      <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[17].visible">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="160" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" width="320" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
              size="mini"
@@ -300,6 +312,13 @@
             @click="reboot(scope.row)"
             v-hasPermi="['system:device:reboot']"
           >重启</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-refresh"
+            @click="refresh(scope.row)"
+            v-hasPermi="['system:device:refresh']"
+          >更新</el-button>
           <el-button
             size="mini"
             type="text"
@@ -329,7 +348,7 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="SN" prop="sn">
-            <el-input v-model="form.sn" placeholder="请输入设备SN" :disabled="title=='修改设备' && userName != 'admin'"/>
+            <el-input v-model="form.sn" placeholder="请输入SN" :disabled="title=='修改设备' && userName != 'admin'"/>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -412,6 +431,13 @@
             </el-form-item>
           </el-col>
         </div>
+        <el-col :span="24">
+          <el-form-item label="硬件版本说明：" label-width="200">
+              <span style="color: red;font-weight: 600">
+                {{versionDescription}}
+              </span>
+          </el-form-item>
+        </el-col>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -420,12 +446,12 @@
     </el-dialog>
 
     <!-- 设备详情对话框 -->
-    <el-dialog style="font-weight: bold;" title="设备详情"  :close-on-click-modal="true" :visible.sync="open2" width="1000px" append-to-body>
+    <el-dialog style="font-weight: bold;" title="设备详情"  :close-on-click-modal="true" :visible.sync="open2" width="1300px" append-to-body>
       <el-form ref="form" :model="form"  label-width="100px" size="mini">
         <el-row>
           <el-col :span="8">
             <el-form-item label="设备mac：">{{ form.mac }}</el-form-item>
-            <el-form-item label="设备sn：">{{ form.sn }}</el-form-item>
+            <el-form-item label="设备SN：">{{ form.sn }}</el-form-item>
             <el-form-item label="车辆状态：" style="color: #12d2ac;font-weight: 700">{{ form.statusStr }}</el-form-item>
           </el-col>
           <el-col :span="8">
@@ -450,7 +476,7 @@
           </el-col>
         </el-row>
         <el-row>
-          <h2 style="font-weight: bold;font-size: 18px">自动更新</h2>
+          <h2 style="font-weight: bold;font-size: 18px;padding: 0;margin: 0">定位更新</h2>
           <el-col :span="6">
             <el-form-item label="经度：">{{ form.longitude }}</el-form-item>
           </el-col>
@@ -458,7 +484,7 @@
             <el-form-item label="纬度：">{{ form.latitude }}</el-form-item>
           </el-col>
           <el-col :span="8" >
-            <el-form-item label="最后更新时间：" label-width="120">{{ form.lastTime }}</el-form-item>
+            <el-form-item label="最后更新时间：" label-width="120">{{ form.lastLocationTime }}</el-form-item>
           </el-col>
           <el-col :span="4" v-if="form.gps === '0'">
             <span style="color: red;font-weight: 700">
@@ -535,7 +561,7 @@ import { getModel, listModel } from '@/api/system/model'
 import QrCode from "@/components/QrCode/index.vue";
   import { listArea, selectAreaListByDeptId, selectDeptByAreaId } from '@/api/system/area'
 import { listDept } from '@/api/system/dept'
-import { listHardwareVersion } from '@/api/system/hardwareVersion'
+  import { getHardwareVersion, listHardwareVersion } from '@/api/system/hardwareVersion'
 import Treeselect from '@riophae/vue-treeselect'
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
@@ -565,6 +591,7 @@ export default {
       key: 0,
       // 非单个禁用
       single: true,
+      versionDescription: '',
       // 非多个禁用
       multiple: true,
       statusOptions: [],
@@ -600,6 +627,27 @@ export default {
         onlineStatus: null,
         status: null,
       },
+      // 列信息
+      columns: [
+        { key: 0, label: `运营商`, visible: true },
+        { key: 1, label: `运营区`, visible: true },
+        { key: 2, label: `MAC`, visible: true },
+        { key: 3, label: `SN`, visible: true },
+        { key: 4, label: `车辆型号`, visible: true },
+        { key: 5, label: `车牌号`, visible: true },
+        { key: 6, label: `版本`, visible: true },
+        { key: 7, label: `信号`, visible: true },
+        { key: 8, label: `卫星`, visible: true },
+        { key: 9, label: `钥匙`, visible: true },
+        { key: 10, label: `定位时间`, visible: true },
+        { key: 11, label: `电压`, visible: true },
+        { key: 12, label: `电量`, visible: true },
+        { key: 13, label: `车辆状态`, visible: true },
+        { key: 14, label: `锁`, visible: true },
+        { key: 15, label: `网络`, visible: true },
+        { key: 16, label: `二维码`, visible: true },
+        { key: 17, label: `创建时间`, visible: true },
+      ],
       showPlaceSearchMap: false,
       selected: null,
       // 表单参数
@@ -618,6 +666,12 @@ export default {
       }
     };
   },
+  mounted() { //添加监听滚动条事件
+    window.addEventListener('scroll', this.handleScroll, true)
+  },
+  destroyed() { //移除（跳转页面后移除）
+    window.removeEventListener('scroll', this.handleScroll, true)
+  },
   created() {
     console.log("当前用户信息：",this.$store.state.user.name)
     const sn = this.$route.params && this.$route.params.sn;
@@ -651,6 +705,9 @@ export default {
       listDept({status: '0' }).then(response => {
         this.deptOptions = response.data;
       });
+      listArea(this.queryParams).then(response => {
+        this.areaOptions = response.rows;
+      });
     }
   },
   watch: {
@@ -663,6 +720,11 @@ export default {
     'form.areaId': function(newVal) {
       this.fetchData3(newVal);
     },
+    'form.hardwareVersionId': function(hardwareVersionId) {
+      if(hardwareVersionId){
+        this.selectHardwareVersion(hardwareVersionId);
+      }
+    },
     open2(val) {
       if (!val) {
         console.log("========关闭地图=============")
@@ -677,6 +739,35 @@ export default {
     this.$eventBus.$off('close-all-dialogs', this.closeDialog);
   },
   methods: {
+    handleScroll() {
+      let scrollTop = window.scrollY;
+      let heightTop = this.$refs['tableSort'].$parent.$parent.$el.offsetTop; // 距离顶部高度
+      const headerWrapper = document.querySelector('.el-table__header-wrapper');
+      if (scrollTop >= heightTop) { // 表头到达页面顶部固定表头
+        let top = scrollTop - (heightTop + 160);
+        headerWrapper.style.position = 'relative';
+        headerWrapper.style.zIndex = '500';
+        headerWrapper.style.top = `${top}px`;
+      } else if (scrollTop === 0) { // 表格横向
+        headerWrapper.style.position = 'relative';
+        headerWrapper.style.zIndex = '500';
+      } else {
+        headerWrapper.style.position = '';
+        headerWrapper.style.top = '';
+        headerWrapper.style.zIndex = '';
+      }
+    },
+    formatVersion(versionId){
+      if(versionId){
+        return this.hardwareVersionOptions.find(item => item.id === versionId).version;
+      }
+      return "";
+    },
+    selectHardwareVersion(hardwareVersionId){
+      getHardwareVersion(hardwareVersionId).then(response => {
+        this.versionDescription =response.data.instructions;
+      });
+    },
     closeDialog() {
       this.open2 = false;
     },
@@ -695,7 +786,7 @@ export default {
           areaOptions.length > 0 ? this.form.areaId = areaOptions[0].areaId : this.form.areaId = null;
         });
       }else{
-        this.reset();
+        this.reset2();
       }
     },
     /** 当选择运营商时  根据运营商id，获取运营区和型号 */
@@ -711,7 +802,7 @@ export default {
           modelOptions.length > 0 ? this.form.modelId = modelOptions[0].modelId : this.form.modelId = null;
         });
       }else{
-        this.reset();
+        this.reset2();
         // this.form.areaId = null;
         // this.form.modelId = null;
       }
@@ -730,7 +821,7 @@ export default {
           modelOptions.length > 0 ? this.form.modelId = modelOptions[0].modelId : this.form.modelId = null;
         });
       }else{
-        this.reset();
+        this.reset2();
       }
     },
     /** 排序触发事件 */
@@ -892,6 +983,23 @@ export default {
         this.areaOptions = response.rows;
       });
     },
+    reset2() {
+      console.log(11111)
+      this.form.areaId = null;
+      this.form.deptId = null;
+      this.form.modelId = null;
+      if(this.userName === 'admin'){
+        listDept({status: '0' }).then(response => {
+          this.deptOptions = response.data;
+        });
+      }
+      listModel(this.queryParams).then(response => {
+        this.modelOptions = response.rows;
+      });
+      listArea(this.queryParams).then(response => {
+        this.areaOptions = response.rows;
+      });
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -1099,6 +1207,9 @@ export default {
     padding: 10px 20px;
   }
   .el-dialog:not(.is-fullscreen) {
-    margin-top: 3vh !important;
+    margin-top: 1vh !important;
+  }
+  .el-dialog__header {
+    padding: 10px 20px !important;
   }
 </style>

src/views/system/fee/index.vue

@@ -52,6 +52,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="id" align="center" prop="ruleId" />
       <el-table-column label="运营商" align="center" prop="deptName" v-if="userName == 'admin'"/>
+      <el-table-column label="应用运营区" align="center" prop="areaName"/>
       <el-table-column label="套餐名称" align="center" prop="name" />
       <el-table-column label="说明" :show-overflow-tooltip="true" align="center" prop="instructions" />
       <!-- <el-table-column label="时间(小时)" align="center" prop="time" />
@@ -87,16 +88,32 @@
         <el-form-item label="套餐名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入套餐名称" />
         </el-form-item>
-        <el-form-item label="运营区" prop="areaId" v-if="userName == 'admin'">
-          <el-select v-model="form.areaId" placeholder="请选择运营区">
-            <el-option
-              v-for="item in areaOptions"
-              :key="item.areaId"
-              :label="item.areaName"
-              :value="item.areaId"
-            ></el-option>
-          </el-select>
-        </el-form-item>
+        <el-row>
+          <el-col :span="12" v-if="userName == 'admin'">
+            <el-form-item label="运营商" prop="deptId" >
+              <el-select v-model="form.deptId" placeholder="请选择运营区">
+                <el-option
+                  v-for="item in deptOptions"
+                  :key="item.deptId"
+                  :label="item.deptName"
+                  :value="item.deptId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="应用运营区" prop="areaId">
+              <el-select v-model="form.areaId" clearable placeholder="请选择运营区">
+                <el-option
+                  v-for="item in areaOptions"
+                  :key="item.areaId"
+                  :label="item.areaName"
+                  :value="item.areaId"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-form-item label="说明" prop="instructions" :show-overflow-tooltip="true">
           <editor v-model="form.instructions" :min-height="192"/>
           <!-- <el-input v-model="form.explain" type="textarea" placeholder="请输入内容" /> -->
@@ -289,10 +306,10 @@
                 style="width: 80px; display: inline-block; margin-left: 10px;" />
               小时
             </el-radio>
-<!--            <el-radio label="2">-->
-<!--              自定义时刻-->
-<!--              <el-time-picker v-model="time2" value-format="HH:mm:ss" placeholder="选择时间" style="margin-left: 10px;" />-->
-<!--            </el-radio>-->
+            <el-radio label="2">
+              自定义时刻
+              <el-time-picker v-model="time2" value-format="HH:mm:ss" placeholder="选择时间" style="margin-left: 10px;" />
+            </el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item v-if="form.rentalUnit != 'day'">
@@ -325,12 +342,17 @@
 
 <script>
 import { listFee, getFee, delFee, addFee, updateFee } from "@/api/system/fee";
-import { listArea } from '@/api/system/area'
+import { listArea, selectAreaListByDeptId } from '@/api/system/area'
 import { listDept, listDeptExcludeChild } from '@/api/system/dept'
 
 export default {
   name: "Fee",
   dicts: ['sys_normal_disable'],
+  watch: {
+    'form.deptId': function(deptId) {
+      this.getAreaListByDeptId(deptId);
+    },
+  },
   data() {
     return {
       userName: undefined,
@@ -425,8 +447,8 @@ export default {
         sectionCharges: [
           { required: true, message: '请输入区间收费', trigger: 'blur' },
         ],
-        areaId: [
-          { required: true, message: '请选择运营区', trigger: 'change' },
+        deptId: [
+          { required: true, message: '请选择运营商', trigger: 'change' },
         ]
         // startingTime: [
         //   { required: true, message: '请输入起步时间', trigger: 'blur' },
@@ -448,8 +470,28 @@ export default {
         this.deptOptions = response.data;
       });
     }
+    listArea(this.queryParams).then(response => {
+      this.areaOptions = response.rows;
+    });
   },
   methods: {
+    getAreaListByDeptId(deptId){
+      console.log('---------------deptId:', deptId)
+      if(deptId){
+        selectAreaListByDeptId(deptId).then(response => {
+          console.log("根据运营商id，获取运营区和型号=========",response.data)
+          this.areaOptions = response.data.areaList;
+          let areaOptions = response.data.areaList;
+          if(this.form.areaId != null){
+            areaOptions.length > 0 ? this.form.areaId = areaOptions[0].areaId : this.form.areaId = null;
+          }
+        });
+      }else{
+        listArea(this.queryParams).then(response => {
+          this.areaOptions = response.rows;
+        });
+      }
+    },
     handleUnitChange() {
       if (this.form.rentalUnit == 'minutes') {
         this.timeUnit = '分钟';
@@ -497,7 +539,8 @@ export default {
         ridingRule: '1',
         chargingCycle: '',
         chargingCycleValue: '',
-        cappedAmount: ''
+        cappedAmount: '',
+        areaId: null
       }
       this.enablelnterval = false,
         this.more = { start: '', end: '9999', eachUnit: '', fee: '' }
@@ -523,11 +566,8 @@ export default {
     },
     handleAdd() {
       this.reset();
-      listArea(this.queryParams).then(response => {
-        this.areaOptions = response.rows;
-        this.open = true;
-        this.title = "添加收费方式";
-      });
+      this.open = true;
+      this.title = "添加收费方式";
     },
     handleUpdate(row) {
       this.reset();

src/views/system/msgLog/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="短信类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择短信类型" clearable>
+          <el-option
+            v-for="dict in dict.type.et_msg_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input
+          v-model="queryParams.phone"
+          placeholder="请输入手机号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="primary"-->
+<!--          plain-->
+<!--          icon="el-icon-plus"-->
+<!--          size="mini"-->
+<!--          @click="handleAdd"-->
+<!--          v-hasPermi="['system:msgLog:add']"-->
+<!--        >新增</el-button>-->
+<!--      </el-col>-->
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="success"-->
+<!--          plain-->
+<!--          icon="el-icon-edit"-->
+<!--          size="mini"-->
+<!--          :disabled="single"-->
+<!--          @click="handleUpdate"-->
+<!--          v-hasPermi="['system:msgLog:edit']"-->
+<!--        >修改</el-button>-->
+<!--      </el-col>-->
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="danger"-->
+<!--          plain-->
+<!--          icon="el-icon-delete"-->
+<!--          size="mini"-->
+<!--          :disabled="multiple"-->
+<!--          @click="handleDelete"-->
+<!--          v-hasPermi="['system:msgLog:remove']"-->
+<!--        >删除</el-button>-->
+<!--      </el-col>-->
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="warning"-->
+<!--          plain-->
+<!--          icon="el-icon-download"-->
+<!--          size="mini"-->
+<!--          @click="handleExport"-->
+<!--          v-hasPermi="['system:msgLog:export']"-->
+<!--        >导出</el-button>-->
+<!--      </el-col>-->
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="msgLogList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="短信类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.et_msg_type" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="短信签名" align="center" prop="signName" />
+      <el-table-column label="内容" align="center" prop="content" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号" align="center" prop="phone" />
+<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
+<!--        <template slot-scope="scope">-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-edit"-->
+<!--            @click="handleUpdate(scope.row)"-->
+<!--            v-hasPermi="['system:msgLog:edit']"-->
+<!--          >修改</el-button>-->
+<!--          <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-delete"-->
+<!--            @click="handleDelete(scope.row)"-->
+<!--            v-hasPermi="['system:msgLog:remove']"-->
+<!--          >删除</el-button>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改短信日志对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listMsgLog, getMsgLog, delMsgLog, addMsgLog, updateMsgLog } from "@/api/system/msgLog";
+
+export default {
+  name: "MsgLog",
+  dicts: ['et_msg_type'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 短信日志表格数据
+      msgLogList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        type: null,
+        content: null,
+        phone: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询短信日志列表 */
+    getList() {
+      this.loading = true;
+      listMsgLog(this.queryParams).then(response => {
+        this.msgLogList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        type: null,
+        templateCode: null,
+        signName: null,
+        content: null,
+        createTime: null,
+        phone: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加短信日志";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getMsgLog(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改短信日志";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateMsgLog(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addMsgLog(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除短信日志编号为"' + ids + '"的数据项？').then(function() {
+        return delMsgLog(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/msgLog/export', {
+        ...this.queryParams
+      }, `msgLog_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

src/views/system/order/index.vue

@@ -240,6 +240,7 @@
               v-if="showPlaceSearchMap"
               ref="map"
               :key="key"
+              :areaId="form.areaId"
               height="400px"
               :trip-route-str="form.tripRouteStr"
             />