From 550ebddfff98ce78f53093030df3e150a165429d Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Mon, 12 Aug 2024 17:51:52 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=94=B6=E8=B4=B9=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |  2 ++
 src/views/system/area/areaSet.vue | 20 ++++++++++++++++----
 src/views/system/area/index.vue   |  4 ++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 6f04923..3b10830 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "nprogress": "0.2.0",
     "qrcode": "^1.5.3",
     "quill": "1.3.7",
+    "react-native-vector-icons": "^10.1.0",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
@@ -64,6 +65,7 @@
     "vuex": "3.6.0"
   },
   "devDependencies": {
+    "@types/react-native-vector-icons": "^6.4.18",
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
diff --git a/src/views/system/area/areaSet.vue b/src/views/system/area/areaSet.vue
index 05c12f3..29303ef 100644
--- a/src/views/system/area/areaSet.vue
+++ b/src/views/system/area/areaSet.vue
@@ -11,7 +11,7 @@
                         <el-col :span="12">
                             <el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'" data-tip="这是运营商选择框">
                                 <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
-                                    placeholder="请选择运营商" />
+                                    placeholder="请选择运营商" @change="changedept" />
 
 
 
@@ -366,6 +366,9 @@ export default {
         console.log(this.dictList, 'dictdict');
     },
     methods: {
+        changedept(){
+            clog
+        },
     reset() {
       this.form = {
         areaTime:'1',
@@ -542,7 +545,12 @@ export default {
 
                 this.title = "修改运营区";
                 this.key++;
-
+                //  listFee({ areaId: this.form.areaId }).then(response => {
+                //   this.ruleOptions = response.rows;
+                //   this.open = true;
+                //   this.title = "修改运营区";
+                //   this.key++;
+                // });
 
             });
         },
@@ -584,11 +592,15 @@ export default {
                 })  /* 市匹配成功*/
             }
         },
-        getCityList() {
-            listFee({ areaId: this.form.areaId }).then(response => {
+        getFeeList(){
+                listFee({ deptId: this.form.deptId }).then(response => {
                     this.ruleOptions = response.rows;
 
                 });
+
+        },
+        getCityList() {
+           
             getDistrictList().then(res => {
                 this.form.provinceList = JSON.parse(res.data)
                 // console.log("provinceList======"+JSON.stringify(this.form.provinceList))
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index ddfbc08..5ea119f 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -28,8 +28,8 @@
           </router-link>
       </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:area:edit']">修改</el-button> -->
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['system:area:edit']">修改</el-button>
         <!-- <el-button
           type="success"
           plain

From f95e1aceff9b78b45a0c5827ecebaeb94a8514f7 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Wed, 14 Aug 2024 18:05:34 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                            |    4 +-
 src/components/Map/location/LocationMap.vue |  204 ++-
 src/views/statistics/index.vue              |   43 +-
 src/views/system/area/areaSet.vue           | 1622 +++++++++++--------
 src/views/system/device/index.vue           |    6 +-
 5 files changed, 1208 insertions(+), 671 deletions(-)

diff --git a/.env.development b/.env.development
index 8f703d4..c500b62 100644
--- a/.env.development
+++ b/.env.development
@@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享电动车管理系统
 ENV = 'development'
 
 # 共享电动车管理系统/开发环境
-# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
-VUE_APP_BASE_API = 'http://192.168.2.46:8088'
+VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
+# VUE_APP_BASE_API = 'http://192.168.2.46:8088'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/components/Map/location/LocationMap.vue b/src/components/Map/location/LocationMap.vue
index eec4ba2..4d31b7e 100644
--- a/src/components/Map/location/LocationMap.vue
+++ b/src/components/Map/location/LocationMap.vue
@@ -11,7 +11,8 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 import globalConfig from '@/utils/config/globalConfig'
 import { debounce } from '@/utils'
 import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
-
+import { getArea } from '@/api/system/area'
+import { listParking } from '@/api/system/parking'
 export default {
   name: "LocationMap",
   components: { AreaTextSelect },
@@ -43,7 +44,11 @@ export default {
     deviceSn: {
       type: String,
       default: ''
-    }
+    },
+      areaId: {
+      type: Number,
+      default: ''
+    },
   },
   data() {
     return {
@@ -55,13 +60,19 @@ export default {
       keyword: null,
       markers: [],
       area: {
-        province: '福建省',
-        city: '宁德市',
-      }
+        // province: '福建省',
+        // city: '宁德市',
+      },
+       area:{},
+      parkingList:[],
+      noParkingList:[],
+      noridingList:[],
+      labels: [],
     }
   },
   mounted() {
-    this.initAMap();
+    // this.initAMap();
+     this.getAreas(this.areaId)
   },
   beforeDestroy() {
     console.log("轨迹=====组件将被销毁");
@@ -86,6 +97,30 @@ export default {
     //     this.doPlaceSearch(city + '人民政府');
     //   }
     // },
+     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 时必填
@@ -93,7 +128,7 @@ export default {
         plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       }).then((AMap) => {
         this.AMap = AMap;
-        this.map = new AMap.Map("container", {
+        this.map = new AMap.Map("container", { 
           // 设置地图容器id
           viewMode: "3D", // 是否为3D地图模式
           zoom: 16, // 初始化地图级别
@@ -106,7 +141,22 @@ export default {
 
         // 逆地理编码
         // this.loadGeoCoder();
-
+         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.initMarker();
 
@@ -137,6 +187,41 @@ export default {
         // })
       }
     },
+    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)
+    },
     addMarker: function(lng, lat, title, status, onlineStatus) {
       //创建一个 Marker 实例：
       console.log('title===========' + title)
@@ -152,9 +237,11 @@ export default {
         title: title,
         offset: new AMap.Pixel(-12.5, -35)
       })
+
       //将创建的点标记添加到已有的地图实例：
       this.map.add(marker)
       this.markers.push(marker)
+      console.log();
 
       // 创建一个 Text 实例来显示标题
       let text = new AMap.Text({
@@ -174,6 +261,107 @@ export default {
 
       // 将文本标签添加到地图实例
       this.map.add(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);
     },
     formarStatus(status,onlineStatus){
       if(onlineStatus == "0"){
diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue
index 573682e..4efb598 100644
--- a/src/views/statistics/index.vue
+++ b/src/views/statistics/index.vue
@@ -2,10 +2,26 @@
   <div class="page">
     <div class="area-options">
       <span style="margin-right: .625rem;">切换运营区</span>
-      <el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange" size="medium">
-        <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
-          :value="item.areaId"></el-option>
-      </el-select>
+     <el-select
+    v-model="areaId"
+    placeholder="请选择运营区"
+    filterable
+    clearable
+    @change="handleAreaChange"
+    size="medium"
+  >
+    <el-option
+      v-for="item in areaOptions"
+      :key="item.areaId"
+      :label="item.areaName + ' - ' + item.deptName" 
+      :value="item.areaId"
+    >
+      <div class="option-content" style=" display: flex;justify-content: space-between;"> 
+        <span class="area-name">{{ item.areaName }}</span>
+        <span class="dept-name">{{ item.deptName }}</span>
+      </div>
+    </el-option>
+  </el-select>
     </div>
     <div class="top_box">
       <div class="tops_left">
@@ -400,6 +416,25 @@ export default {
   // height: 100vh;
   display: flex;
   flex-direction: column;
+.option-content {
+  display: flex;
+  flex-wrap: nowrap;
+  // justify-content: space-between;
+  // align-items: center;
+  width: 100%;
+  .area-name {
+  // width: 10rem !important;
+  // flex-grow: 1;
+  // text-align: left;
+}
+
+.dept-name {
+  margin-left: 20px;
+  // flex-grow: 1;
+  // text-align: right;
+}
+}
+
 
   .area-options {
     width: 100%;
diff --git a/src/views/system/area/areaSet.vue b/src/views/system/area/areaSet.vue
index 29303ef..90730ae 100644
--- a/src/views/system/area/areaSet.vue
+++ b/src/views/system/area/areaSet.vue
@@ -1,387 +1,672 @@
 <template>
-    <div class="page">
-        <div class="tit"
-            style="width: 100%;display: flex;justify-content: space-between;padding-right: 30px;align-items: center;">{{
-                title }} <el-button type="primary" @click="submitForm" size="medium"
-                style="margin-left: auto;">保存</el-button></div>
-        <div class="pagecont">
-            <div class="left_box">
-                <el-form ref="form" :model="form" :rules="rules" label-width="90px">
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="运营商" prop="deptId" v-if="userName == 'admin'" data-tip="这是运营商选择框">
-                                <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true"
-                                    placeholder="请选择运营商" @change="changedept" />
-
-
-
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="运营区" prop="areaName" data-tip="这是运营区输入框">
-                                <el-input v-model="form.areaName" placeholder="请输入运营区" />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="运营个性化图片" prop="picture" label-width="140" data-tip="这是运营个性化图片上传框">
-                                <div style="display: flex;flex-wrap: wrap;">
-                                    <image-upload :limit="1" :isShowTip="false" v-model="form.picture" />
-
-                                </div>
-
-                            </el-form-item>
-                            <div class="tip">用户地图上显示的车辆图标样式</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="运营区域" data-tip="这是运营区域选择框">
-                                <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-form-item label="运营时间" prop="areaTime">
-                        <div style="display: flex;flex-wrap: wrap;">
-                            <el-select v-model="form.areaTime" placeholder="请选择运营时间" style="width: 100%;">
-                                <el-option v-for="item in dictList" :key="item.value" :label="item.label"
-                                    :value="item.value" />
-                            </el-select>
-                            <div class="tip">运营区外的时间用户无法解锁骑行</div>
-                        </div>
-
-                    </el-form-item>
-                    <el-row v-if="form.areaTime == 2">
-                        <el-col :span="18">
-                            <el-form-item label="自定义运营时间" label-width="140px" data-tip="这是自定义运营时间选择框">
-                                <el-time-picker v-model="form.areaTimeStart" value-format="HH:mm:ss" placeholder="开始时间">
-                                </el-time-picker>
-                                <el-time-picker arrow-control v-model="form.areaTimeEnd" value-format="HH:mm:ss"
-                                    placeholder="结束时间">
-                                </el-time-picker>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="20">
-                            <el-form-item label="自定义客服" prop="customService" label-width="120" class="switch-item">
-                                <el-switch v-model="form.customService" class="drawer-switch" />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                    <div v-if="form.customService == '1'">
-                        <el-row v-for="(service, index) in customServices" :key="index">
-                            <el-col :span="7">
-                                <el-form-item :label="'自定义客服名称' + (index + 1)" :prop="'serviceName' + index"
-                                    label-width="80">
-                                    <el-input v-model="service.name" placeholder="请输入自定义客服名称" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="7" style="margin-left: 20px;">
-                                <el-form-item label="电话" :prop="'servicePhone' + index" label-width="80">
-                                    <el-input v-model="service.phone" placeholder="请输入客服电话" />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="4" style="margin-top: 5px;margin-left: 10px;">
-                                <el-button type="primary" @click="addService"
-                                    v-if="index === customServices.length - 1 && customServices.length < 3">添加</el-button>
-                                <el-button type="danger" @click="removeService(index)" v-if="index > 0">删除</el-button>
-                            </el-col>
-                        </el-row>
-                    </div>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="实名认证" label-width="120" class="switch-item">
-                                <el-switch v-model="form.authentication" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启后用户骑行前必须先进行实名认证才可使用</div>
-                        </el-col>
-
-                        <el-col :span="12">
-                            <el-form-item label="是否开启押金抵扣" label-width="120" class="switch-item">
-                                <el-switch v-model="form.isDepositDeduction" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">关闭:用户需对订单付费后方可退还押金，开启:押金可以直接抵扣订单金额付款</div>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="还车是否拍照审核" label-width="120" class="switch-item">
-                                <el-switch v-model="form.returnVerify" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启后则需用户拍摄视频后审核订单方可退还押金</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="短信通知服务" label-width="120" class="switch-item">
-                                <el-switch v-model="form.msgSwitch" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启短信通知，短信费用0.1元/条，从余额中扣除</div>
-                        </el-col>
-
-                    </el-row>
-
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="强制停车点还车" label-width="120" class="switch-item">
-                                <el-switch v-model="form.parkingReturn" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启则必须在停车点才可还车，停车点存在误差</div>
-                        </el-col>
-                        <el-col :span="12" v-if="form.parkingReturn == false">
-                            <el-form-item label="运营区外还车" label-width="120" class="switch-item">
-                                <el-switch v-model="form.areaOutReturn" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启后可以在运营区范围外还车</div>
-                        </el-col>
-                    </el-row>
-
-                    <el-row v-if="form.parkingReturn == false">
-                        <el-col :span="12">
-                            <el-form-item label="停车点外还车调度" label-width="120" class="switch-item">
-                                <el-switch v-model="form.parkingOutDispatch" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启后在停车点外还车会收取调度费</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="运营区外还车调度" label-width="120" class="switch-item">
-                                <el-switch v-model="form.areaOutDispatch" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启后在运营区外还车会收取调度费</div>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="运营区外调度费" label-width="120" class="switch-item">
-                                <el-input-number style="width: 100%" v-model="form.dispatchFee"
-                                    placeholder="车辆超出运行区外的调度费用"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">设置车辆超出运营区外产生的调度费用</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="停车点外调度费" label-width="120" class="switch-item">
-                                <el-input-number style="width: 100%" v-model="form.vehicleManagementFee"
-                                    placeholder="车辆在运营区内但没在停车区产生的调度费用"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">设置车辆超出停车点外产生的调度费用</div>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="还车误差（米）" label-width="120" class="switch-item">
-                                <el-input-number v-model="form.error" placeholder="还车误差"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">允许用户在规划的停车点外多少米还车</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="禁行区内断电" label-width="120" class="switch-item">
-                                <el-switch v-model="form.noRidingOutage" class="drawer-switch" />
-                            </el-form-item>
-                            <div class="tips">开启后当进入禁行区内将进行断电</div>
-                        </el-col>
-
-                    </el-row>
-                    <el-row>
-
-
-                        <el-col :span="12">
-                            <el-form-item label="运营区域外断电" label-width="120" class="switch-item">
-                                <div style="display: flex;flex-wrap: wrap;">
-                                    <el-switch v-model="form.areaOutOutage" class="drawer-switch" />
-
-                                </div>
-
-                            </el-form-item>
-                            <div class="tips">开启后当进入运营区域外内将进行断电</div>
-                        </el-col>
-                         <el-col :span="12">
-                            <el-form-item label="骑行押金" label-width="120" class="switch-item" prop="deposit">
-                                <el-input-number style="width: 100%" v-model="form.deposit"
-                                    placeholder="骑行前需要充值的押金"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">设置骑行前需要缴纳的押金金额</div>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <el-form-item label="收费方式" label-width="120" class="switch-item"  prop="ruleIds">
-                                <el-select v-model="form.ruleIds" multiple placeholder="请选择收费方式" >
-                                    <el-option v-for="item in ruleOptions" :key="item.ruleId" :label="item.name"
-                                        :value="item.ruleId"></el-option>
-                                </el-select>
-                            </el-form-item>
-                            <div class="tips">选择在收费方式菜单当中设置好的收费套餐(可多选)</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="低于电量（%）不得骑行" label-width="120" class="switch-item">
-                                <el-input-number style="width: 100%" v-model="form.undercharge"
-                                    placeholder="低于电量（%）不得骑行"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">当车辆电量低于多少时无法解锁用车</div>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-
-                        <el-col :span="12">
-                            <el-form-item label="最大预约时间(分)" label-width="120" class="switch-item">
-                                <el-input-number style="width: 100%" v-model="form.timeoutMinutes"
-                                    placeholder="车辆可最长预约多少分钟"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">设置车辆的最大可以预约时间</div>
-                        </el-col>
-                        <el-col :span="12">
-                            <el-form-item label="预约服务费（元）" label-width="120" class="switch-item">
-                                <el-input-number style="width: 100%" v-model="form.appointmentServiceFee"
-                                    placeholder="预约时每十分钟的计费"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">设置车辆预约时每十分钟产生的费用</div>
-                        </el-col>
-                    </el-row>
-
-
-                    <el-row>
-                        <el-col :span="15">
-                            <el-form-item label="电量低于多少值自动生成换电订单" label-width="120" class="switch-item"
-                                prop="autoReplacementOrder">
-                                <el-input-number style="width: 50%" v-model="form.autoReplacementOrder"
-                                    placeholder="电量低于多少值自动生成换电订单"></el-input-number>
-                            </el-form-item>
-                            <div class="tips">设置车辆电量低于多少时自动生成的换电维护工单</div>
-                        </el-col>
-
-                    </el-row>
-                </el-form>
-            </div>
-            <div class="right_box">
-                <div class="right_tit">弹窗公告</div>
-                <editor v-model="form.agreement" :min-height="192" />
-                <div class="right_tit">电子围栏设置</div>
-                <area-map :key="key" v-model="form.boundaryStr" :dataId="form.areaId" :pathList="form.boundaryStr"
-                    :lon="form.longitude" :lat="form.latitude" @center="center" @mapList="mapList" />
-                <div class="right_tit">运营区经纬度</div>
-                <el-row>
-                    <el-col :span="11">
-                        <el-input v-model="form.longitude" placeholder="请输入经度" disabled />
-                    </el-col>
-                    <el-col :span="11" style="margin-left: 20px;">
-                        <el-input v-model="form.latitude" placeholder="请输入纬度" disabled />
-                    </el-col>
-                </el-row>
-            </div>
-        </div>
+  <div class="page">
+    <div
+      class="tit"
+      style="
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding-right: 30px;
+        align-items: center;
+      "
+    >
+      {{ title }}
+      <el-button
+        type="primary"
+        @click="submitForm"
+        size="medium"
+        style="margin-left: auto"
+        >保存</el-button
+      >
     </div>
+    <div class="pagecont">
+      <div class="left_box">
+        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="运营商"
+                prop="deptId"
+                v-if="userName == 'admin'"
+                data-tip="这是运营商选择框"
+              >
+                <treeselect
+                  v-model="form.deptId"
+                  :options="deptOptions"
+                  :show-count="true"
+                  placeholder="请选择运营商"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="运营区"
+                prop="areaName"
+                data-tip="这是运营区输入框"
+              >
+                <el-input v-model="form.areaName" placeholder="请输入运营区" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="运营个性化图片"
+                prop="picture"
+                label-width="140"
+                data-tip="这是运营个性化图片上传框"
+              >
+                <div style="display: flex; flex-wrap: wrap">
+                  <image-upload
+                    :limit="1"
+                    :isShowTip="false"
+                    v-model="form.picture"
+                  />
+                </div>
+              </el-form-item>
+              <div class="tip">用户地图上显示的车辆图标样式</div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="运营区域" data-tip="这是运营区域选择框">
+                <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-form-item label="运营时间" prop="areaTime">
+            <div style="display: flex; flex-wrap: wrap">
+              <el-select
+                v-model="form.areaTime"
+                placeholder="请选择运营时间"
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in dictList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+              <div class="tip">运营区外的时间用户无法解锁骑行</div>
+            </div>
+          </el-form-item>
+          <el-row v-if="form.areaTime == 2">
+            <el-col :span="18">
+              <el-form-item
+                label="自定义运营时间"
+                label-width="140px"
+                data-tip="这是自定义运营时间选择框"
+              >
+                <el-time-picker
+                  v-model="form.areaTimeStart"
+                  value-format="HH:mm:ss"
+                  placeholder="开始时间"
+                >
+                </el-time-picker>
+                <el-time-picker
+                  arrow-control
+                  v-model="form.areaTimeEnd"
+                  value-format="HH:mm:ss"
+                  placeholder="结束时间"
+                >
+                </el-time-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="20">
+              <el-form-item
+                label="自定义客服"
+                prop="customService"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch v-model="form.customService" class="drawer-switch" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <div v-if="form.customService == '1'">
+            <el-row v-for="(service, index) in customServices" :key="index">
+              <el-col :span="7">
+                <el-form-item
+                  :label="'自定义客服名称' + (index + 1)"
+                  :prop="'serviceName' + index"
+                  label-width="80"
+                >
+                  <el-input
+                    v-model="service.name"
+                    placeholder="请输入自定义客服名称"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="7" style="margin-left: 20px">
+                <el-form-item
+                  label="电话"
+                  :prop="'servicePhone' + index"
+                  label-width="80"
+                >
+                  <el-input
+                    v-model="service.phone"
+                    placeholder="请输入客服电话"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="4" style="margin-top: 5px; margin-left: 10px">
+                <el-button
+                  type="primary"
+                  @click="addService"
+                  v-if="
+                    index === customServices.length - 1 &&
+                    customServices.length < 3
+                  "
+                  >添加</el-button
+                >
+                <el-button
+                  type="danger"
+                  @click="removeService(index)"
+                  v-if="index > 0"
+                  >删除</el-button
+                >
+              </el-col>
+            </el-row>
+          </div>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="实名认证"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch
+                  v-model="form.authentication"
+                  class="drawer-switch"
+                />
+              </el-form-item>
+              <div class="tips">开启后用户骑行前必须先进行实名认证才可使用</div>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item
+                label="是否开启押金抵扣"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch
+                  v-model="form.isDepositDeduction"
+                  class="drawer-switch"
+                />
+              </el-form-item>
+              <div class="tips">
+                关闭:用户需对订单付费后方可退还押金，开启:押金可以直接抵扣订单金额付款
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="还车是否拍照审核"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch v-model="form.returnVerify" class="drawer-switch" />
+              </el-form-item>
+              <div class="tips">
+                开启后则需用户拍摄视频后审核订单方可退还押金
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="短信通知服务"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch v-model="form.msgSwitch" class="drawer-switch" />
+              </el-form-item>
+              <div class="tips">
+                开启短信通知，短信费用0.1元/条，从余额中扣除
+              </div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="强制停车点还车"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch v-model="form.parkingReturn" class="drawer-switch" />
+              </el-form-item>
+              <div class="tips">开启则必须在停车点才可还车，停车点存在误差</div>
+            </el-col>
+            <el-col :span="12" v-if="form.parkingReturn == false">
+              <el-form-item
+                label="运营区外还车"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch v-model="form.areaOutReturn" class="drawer-switch" />
+              </el-form-item>
+              <div class="tips">开启后可以在运营区范围外还车</div>
+            </el-col>
+          </el-row>
+
+          <el-row v-if="form.parkingReturn == false">
+            <el-col :span="12">
+              <el-form-item
+                label="停车点外还车调度"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch
+                  v-model="form.parkingOutDispatch"
+                  class="drawer-switch"
+                />
+              </el-form-item>
+              <div class="tips">开启后在停车点外还车会收取调度费</div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="运营区外还车调度"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch
+                  v-model="form.areaOutDispatch"
+                  class="drawer-switch"
+                />
+              </el-form-item>
+              <div class="tips">开启后在运营区外还车会收取调度费</div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="运营区外调度费"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-input-number
+                  style="width: 100%"
+                  v-model="form.dispatchFee"
+                  placeholder="车辆超出运行区外的调度费用"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">设置车辆超出运营区外产生的调度费用</div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="停车点外调度费"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-input-number
+                  style="width: 100%"
+                  v-model="form.vehicleManagementFee"
+                  placeholder="车辆在运营区内但没在停车区产生的调度费用"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">设置车辆超出停车点外产生的调度费用</div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="还车误差（米）"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-input-number
+                  v-model="form.error"
+                  placeholder="还车误差"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">允许用户在规划的停车点外多少米还车</div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="禁行区内断电"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-switch
+                  v-model="form.noRidingOutage"
+                  class="drawer-switch"
+                />
+              </el-form-item>
+              <div class="tips">开启后当进入禁行区内将进行断电</div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="运营区域外断电"
+                label-width="120"
+                class="switch-item"
+              >
+                <div style="display: flex; flex-wrap: wrap">
+                  <el-switch
+                    v-model="form.areaOutOutage"
+                    class="drawer-switch"
+                  />
+                </div>
+              </el-form-item>
+              <div class="tips">开启后当进入运营区域外内将进行断电</div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="骑行押金"
+                label-width="120"
+                class="switch-item"
+                prop="deposit"
+              >
+                <el-input-number
+                  style="width: 100%"
+                  v-model="form.deposit"
+                  placeholder="骑行前需要充值的押金"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">设置骑行前需要缴纳的押金金额</div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="收费方式"
+                label-width="120"
+                class="switch-item"
+                prop="ruleIds"
+              >
+                <el-select
+                  v-model="form.ruleIds"
+                  multiple
+                  placeholder="请选择收费方式"
+                >
+                  <el-option
+                    v-for="item in ruleOptions"
+                    :key="item.ruleId"
+                    :label="item.name"
+                    :value="item.ruleId"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+              <div class="tips">
+                选择在收费方式菜单当中设置好的收费套餐(可多选)
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="低于电量（%）不得骑行"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-input-number
+                  style="width: 100%"
+                  v-model="form.undercharge"
+                  placeholder="低于电量（%）不得骑行"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">当车辆电量低于多少时无法解锁用车</div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item
+                label="最大预约时间(分)"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-input-number
+                  style="width: 100%"
+                  v-model="form.timeoutMinutes"
+                  placeholder="车辆可最长预约多少分钟"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">设置车辆的最大可以预约时间</div>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item
+                label="预约服务费（元）"
+                label-width="120"
+                class="switch-item"
+              >
+                <el-input-number
+                  style="width: 100%"
+                  v-model="form.appointmentServiceFee"
+                  placeholder="预约时每十分钟的计费"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">设置车辆预约时每十分钟产生的费用</div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="15">
+              <el-form-item
+                label="电量低于多少值自动生成换电订单"
+                label-width="120"
+                class="switch-item"
+                prop="autoReplacementOrder"
+              >
+                <el-input-number
+                  style="width: 50%"
+                  v-model="form.autoReplacementOrder"
+                  placeholder="电量低于多少值自动生成换电订单"
+                ></el-input-number>
+              </el-form-item>
+              <div class="tips">
+                设置车辆电量低于多少时自动生成的换电维护工单
+              </div>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="right_box">
+        <div class="right_tit">弹窗公告</div>
+        <editor v-model="form.agreement" :min-height="192" />
+        <div class="right_tit">电子围栏设置</div>
+        <area-map
+          :key="key"
+          v-model="form.boundaryStr"
+          :dataId="form.areaId"
+          :pathList="form.boundaryStr"
+          :lon="form.longitude"
+          :lat="form.latitude"
+          @center="center"
+          @mapList="mapList"
+        />
+        <div class="right_tit">运营区经纬度</div>
+        <el-row>
+          <el-col :span="11">
+            <el-input
+              v-model="form.longitude"
+              placeholder="请输入经度"
+              disabled
+            />
+          </el-col>
+          <el-col :span="11" style="margin-left: 20px">
+            <el-input
+              v-model="form.latitude"
+              placeholder="请输入纬度"
+              disabled
+            />
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
 </template>
 
 
 <script>
-import { listArea, getArea, delArea, addArea, updateArea, updateArea2 } from "@/api/system/area";
+import {
+  listArea,
+  getArea,
+  delArea,
+  addArea,
+  updateArea,
+  updateArea2,
+} from "@/api/system/area";
 import AreaMap from "@/components/AreaMap";
 import { listFee } from "@/api/system/fee";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { getDistrictList } from "@/api/common/common";
-import { deptTreeSelect } from '@/api/system/user'
-
+import { deptTreeSelect } from "@/api/system/user";
 
 export default {
-    components: { AreaMap, Treeselect },
-    dicts: ['et_operating_area_status', 'et_operating_area_time', 'et_business_switch'],
-    data() {
-        return {
-            dictList: null,
-            loading: true,
-            ids: [],
-            single: true,
-            multiple: true,
-            showSearch: true,
-            total: 0,
-            dateRange: [],
-            customService: false,
-            ruleOptions: [],
-            provinceList: [],
-            cityList: [],
-            countyList: [],
-            CITY: [],
-            XIAN: [],
-            areaList: [],
-            userName: null,
-            deptOptions: undefined,
-            title: "新增运营区",
-            open: false,
-            mapopen: false,
-            key: 0,
-            customServices: [
-                { name: '', phone: '' }
-            ],
-            queryParams: {
-                pageNum: 1,
-                pageSize: 50,
-                areaName: null,
-            },
-            form: {
-                status: '1',
-                province: '',
-                city: '',
-                county: '',
-                provinceList: [],
-                cityList: [],
-                countyList: [],
-            },
-            rules: {
-                areaName: [{ required: true, message: "运营区域不能为空", trigger: "blur" }],
-                autoReplacementOrder: [{ required: true, message: "最低电量不能为空", trigger: "blur" }],
-                deptId: [{ required: true, message: "运营商不能为空", trigger: "blur" }],
-                 // ruleIds: [{ required: true, message: "收费方式不能为空", trigger: "blur" }],
-                   deposit: [{ required: true, message: "骑行押金不能为空", trigger: "blur" }],
+  components: { AreaMap, Treeselect },
+  dicts: [
+    "et_operating_area_status",
+    "et_operating_area_time",
+    "et_business_switch",
+  ],
+  data() {
+    return {
+      dictList: null,
+      loading: true,
+      ids: [],
+      single: true,
+      multiple: true,
+      showSearch: true,
+      total: 0,
+      dateRange: [],
+      customService: false,
+      ruleOptions: [],
+      provinceList: [],
+      cityList: [],
+      countyList: [],
+      CITY: [],
+      XIAN: [],
+      areaList: [],
+      userName: null,
+      deptOptions: undefined,
+      title: "新增运营区",
+      open: false,
+      mapopen: false,
+      key: 0,
+      customServices: [{ name: "", phone: "" }],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50,
+        areaName: null,
+      },
+      form: {
+        status: "1",
+        province: "",
+        city: "",
+        county: "",
+        provinceList: [],
+        cityList: [],
+        countyList: [],
+      },
+      rules: {
+        areaName: [
+          { required: true, message: "运营区域不能为空", trigger: "blur" },
+        ],
+        autoReplacementOrder: [
+          { required: true, message: "最低电量不能为空", trigger: "blur" },
+        ],
+        deptId: [
+          { required: true, message: "运营商不能为空", trigger: "blur" },
+        ],
+        // ruleIds: [{ required: true, message: "收费方式不能为空", trigger: "blur" }],
+        deposit: [
+          { required: true, message: "骑行押金不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  watch: {
+    'form.deptId'(newValue, oldValue) {
+      console.log('运营商ID变化了:', newValue);
+      this.changedept()
+      // 在这里执行值变化后的逻辑
+    }
+  },
 
-            },
-        }
-    },
-    created() {
-        const areaId = this.$route.params && this.$route.params.areaId;
-        if (areaId) {
-            this.getArea(areaId);
-        }else{
-            this.reset()
-        }
-        this.getCityList();
-        this.userName = this.$store.state.user.name;
-        this.getDeptTree();
+  created() {
+    const areaId = this.$route.params && this.$route.params.areaId;
+    if (areaId) {
+      this.getArea(areaId);
+    } else {
+      this.reset();
+    }
+    this.getCityList();
+    this.userName = this.$store.state.user.name;
+    this.getDeptTree();
 
-        this.dictList = this.dict.type.et_operating_area_time
-        console.log(this.dictList, 'dictdict');
+    this.dictList = this.dict.type.et_operating_area_time;
+    console.log(this.dictList, "dictdict");
+  },
+  methods: {
+    changedept() {
+      console.log("111");
+      listFee({ deptId: this.form.deptId }).then((response) => {
+        this.ruleOptions = response.rows;
+      });
     },
-    methods: {
-        changedept(){
-            clog
-        },
     reset() {
       this.form = {
-        areaTime:'1',
+        areaTime: "1",
         areaId: null,
         areaName: null,
         boundaryStr: null,
         longitude: null,
         latitude: null,
         // parkingPoint: null,
-        agreement: '<p><strong style=\\"color: rgb(68, 68, 68);\\">亲爱的用户，为了确保您的骑行安全，</strong></p><p><strong style=\\"color: rgb(68, 68, 68);\\">请务必遵守以下骑行提示： </strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">仅限16岁及以上用户使用。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">为确保安全，后座不允许载人。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请务必佩戴安全头盔，保护自身安全。 </span></p><p><span style=\\"color: rgb(136, 136, 136);\\">注意道路状况，避开坑洼，小心骑行。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请在规定的地点还车，避免随意停放。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">不逆行、不闯红灯，遵守所有交通法规。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">骑行时不要使用手机，保持注意力集中。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">避免急刹车和急转弯，保持适当的车速。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">夜间骑行时，确保车灯和反光标识正常。</span></p><p><br></p><p><strong style=\\"color: rgb(68, 68, 68);\\">紧急情况处理：</strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">如有紧急情况，请及时拨打客服电话。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">感谢您的理解与配合，祝您骑行愉快。</span></p>',
+        agreement:
+          '<p><strong style=\\"color: rgb(68, 68, 68);\\">亲爱的用户，为了确保您的骑行安全，</strong></p><p><strong style=\\"color: rgb(68, 68, 68);\\">请务必遵守以下骑行提示： </strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">仅限16岁及以上用户使用。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">为确保安全，后座不允许载人。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请务必佩戴安全头盔，保护自身安全。 </span></p><p><span style=\\"color: rgb(136, 136, 136);\\">注意道路状况，避开坑洼，小心骑行。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">请在规定的地点还车，避免随意停放。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">不逆行、不闯红灯，遵守所有交通法规。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">骑行时不要使用手机，保持注意力集中。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">避免急刹车和急转弯，保持适当的车速。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">夜间骑行时，确保车灯和反光标识正常。</span></p><p><br></p><p><strong style=\\"color: rgb(68, 68, 68);\\">紧急情况处理：</strong></p><p><span style=\\"color: rgb(136, 136, 136);\\">如有紧急情况，请及时拨打客服电话。</span></p><p><span style=\\"color: rgb(136, 136, 136);\\">感谢您的理解与配合，祝您骑行愉快。</span></p>',
         createBy: null,
         createTime: null,
-        status: '1',
+        status: "1",
         deptId: null,
         contact: null,
         phone: null,
@@ -407,355 +692,380 @@ export default {
         deposit: 200,
         customService: true,
         undercharge: 10,
-        dispatchFee:10,
-        vehicleManagementFee:10,
-        error:5,
-        timeoutMinutes:30,
-        appointmentServiceFee:2,
-
-
-
-
-
+        dispatchFee: 10,
+        vehicleManagementFee: 10,
+        error: 5,
+        timeoutMinutes: 30,
+        appointmentServiceFee: 2,
       };
       this.resetForm("form");
     },
-        submitForm() {
-            this.$refs["form"].validate(valid => {
-                if (valid) {
-                    const { cityList, countyList, provinceList, ...rest } = this.form;
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          const { cityList, countyList, provinceList, ...rest } = this.form;
 
-                    // 将 rest 对象中的属性赋值给 data
-                    let data = { ...rest };
-                    console.log("this.form=================", data)
-                    data.customService = data.customService ? "1" : "0";
-                    data.areaOutOutage = data.areaOutOutage ? "1" : "0";
-                    data.parkingOutDispatch = data.parkingOutDispatch ? "1" : "0";
-                    data.areaOutDispatch = data.areaOutDispatch ? "1" : "0";
-                    data.noRidingOutage = data.noRidingOutage ? "1" : "0";
-                    data.authentication = data.authentication ? "1" : "0";
-                    data.msgSwitch = data.msgSwitch ? "1" : "0";
-                    data.parkingReturn = data.parkingReturn ? "1" : "0";
-                    data.areaOutReturn = data.areaOutReturn ? "1" : "0";
-                    data.isDepositDeduction = data.isDepositDeduction ? "1" : "0";
-                    data.returnVerify = data.returnVerify ? "1" : "0";
-                    if (data.isDepositDeduction === '1' && data.returnVerify === '1') {
-                        this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
-                        return
-                    }
-                    this.customServices.forEach((service, index) => {
-                        data[`serviceName${index + 1}`] = service.name;
-                        data[`servicePhone${index + 1}`] = service.phone;
-                    });
-                    if (data.isDepositDeduction === '1' && data.returnVerify === '1') {
-                        this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
-                        return
-                    }
-                    if(data.serviceName1==''&&data.servicePhone1==''){
-                         this.$modal.msgError("最少添加一个客服电话");
-                          return
-                    }
-                    if (this.form.areaId != null) {
-                        updateArea2({ areaId: this.form.areaId, boundary: this.form.boundary, boundaryStr: this.form.boundaryStr }).then(response => {
-                            this.$modal.msgSuccess("修改成功");
-                            this.open = false;
-                            this.mapopen = false
-                            this.getList();
-                        });
-                    } else {
-                        addArea(data).then(response => {
-                            this.$modal.msgSuccess("新增成功");
-                            this.open = false;
-
-                            this.getList();
-                        });
-                    }
-                    // console.log(data, 'data without cityList, countyList, provinceList');
-                    // console.log(this.form,'formformformformform');
-                    if (this.form.areaId != null) {
-                        updateArea(data).then(response => {
-
-                            this.$modal.msgSuccess("修改成功");
-                            this.open = false;
-                            this.mapopen = false
-                            this.getList();
-                        });
-                    } else {
-                        addArea(data).then(response => {
-                            this.$modal.msgSuccess("新增成功");
-                            this.open = false;
-
-                            this.getList();
-                        });
-                    }
-                }
+          // 将 rest 对象中的属性赋值给 data
+          let data = { ...rest };
+          console.log("this.form=================", data);
+          data.customService = data.customService ? "1" : "0";
+          data.areaOutOutage = data.areaOutOutage ? "1" : "0";
+          data.parkingOutDispatch = data.parkingOutDispatch ? "1" : "0";
+          data.areaOutDispatch = data.areaOutDispatch ? "1" : "0";
+          data.noRidingOutage = data.noRidingOutage ? "1" : "0";
+          data.authentication = data.authentication ? "1" : "0";
+          data.msgSwitch = data.msgSwitch ? "1" : "0";
+          data.parkingReturn = data.parkingReturn ? "1" : "0";
+          data.areaOutReturn = data.areaOutReturn ? "1" : "0";
+          data.isDepositDeduction = data.isDepositDeduction ? "1" : "0";
+          data.returnVerify = data.returnVerify ? "1" : "0";
+          if (data.isDepositDeduction === "1" && data.returnVerify === "1") {
+            this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
+            return;
+          }
+          this.customServices.forEach((service, index) => {
+            data[`serviceName${index + 1}`] = service.name;
+            data[`servicePhone${index + 1}`] = service.phone;
+          });
+          if (data.isDepositDeduction === "1" && data.returnVerify === "1") {
+            this.$modal.msgError("押金抵扣和拍照审核不能同时开启");
+            return;
+          }
+          if (data.serviceName1 == "" && data.servicePhone1 == "") {
+            this.$modal.msgError("最少添加一个客服电话");
+            return;
+          }
+          if (this.form.areaId != null) {
+            updateArea2({
+              areaId: this.form.areaId,
+              boundary: this.form.boundary,
+              boundaryStr: this.form.boundaryStr,
+            }).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.mapopen = false;
+              this.getList();
             });
-        },
-        submitForm2() {
-            this.$refs["form"].validate(valid => {
-                if (valid) {
+          } else {
+            addArea(data).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
 
-                }
+              this.getList();
             });
-        },
-        addService() {
-            if (this.customServices.length < 3) {
-                this.customServices.push({ name: '', phone: '' });
-            }
-        },
-        removeService(index) {
-
-            if (index > 0 && this.customServices.length > 1) {
-                this.$delete(this.customServices, index);
-                this.$set(this.form, `serviceName${index + 1}`, '');
-                this.$set(this.form, `servicePhone${index + 1}`, '');
-            }
-        },
-        getArea(areaId) {
-            getArea(areaId).then(response => {
-                this.form = response.data;
-                this.form.ruleIds = response.ruleIds;
-                response.data.customService == "1" ? this.form.customService = true : this.form.customService = false;
-                response.data.areaOutOutage == "1" ? this.form.areaOutOutage = true : this.form.areaOutOutage = false;
-                response.data.parkingOutDispatch == "1" ? this.form.parkingOutDispatch = true : this.form.parkingOutDispatch = false;
-                response.data.areaOutDispatch == "1" ? this.form.areaOutDispatch = true : this.form.areaOutDispatch = false;
-                response.data.noRidingOutage == "1" ? this.form.noRidingOutage = true : this.form.noRidingOutage = false;
-                response.data.authentication == "1" ? this.form.authentication = true : this.form.authentication = false;
-                response.data.msgSwitch == "1" ? this.form.msgSwitch = true : this.form.msgSwitch = false;
-                response.data.parkingReturn == "1" ? this.form.parkingReturn = true : this.form.parkingReturn = false;
-                response.data.areaOutReturn == "1" ? this.form.areaOutReturn = true : this.form.areaOutReturn = false;
-                response.data.isDepositDeduction == "1" ? this.form.isDepositDeduction = true : this.form.isDepositDeduction = false;
-                response.data.returnVerify == "1" ? this.form.returnVerify = true : this.form.returnVerify = false;
-
-                // 初始化 customServices 数组
-                this.customServices = [];
-                for (let i = 1; i <= 3; i++) {
-                    if (response.data[`serviceName${i}`] || response.data[`servicePhone${i}`]) {
-                        this.customServices.push({
-                            name: response.data[`serviceName${i}`] || '',
-                            phone: response.data[`servicePhone${i}`] || ''
-                        });
-                    }
-                }
-
-                // 如果 customServices 为空，添加一个默认的服务
-                if (this.customServices.length === 0) {
-                    this.customServices.push({ name: '', phone: '' });
-                }
-
-                this.title = "修改运营区";
-                this.key++;
-                //  listFee({ areaId: this.form.areaId }).then(response => {
-                //   this.ruleOptions = response.rows;
-                //   this.open = true;
-                //   this.title = "修改运营区";
-                //   this.key++;
-                // });
-
+          }
+          // console.log(data, 'data without cityList, countyList, provinceList');
+          // console.log(this.form,'formformformformform');
+          if (this.form.areaId != null) {
+            updateArea(data).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.mapopen = false;
+              this.getList();
             });
-        },
-        cityChange(that) {
-            let countyCode = 0
-            let cityname = ''
-            let newCountyArry = []
-            this.form.cityList.forEach((item, index) => {
-                if (item.name == that) {
-                    countyCode = item.id
-                    cityname = item.name
-                }
-            })
-            if (countyCode) {
-                this.form.countyList = []
-                this.XIAN.forEach((item, index) => {
-                    if (item.code == countyCode && item.cityCountyName == cityname) {
-                        this.form.countyList.push(item)
-                    }
-                })
-            }
-        },
-        provinceChange(that) {
-            // 根据选中省，匹配市
-            let cityCode = 0
-            let newCityArry = []
-            this.form.provinceList.forEach((item, index) => {
-                if (item.name == that) {
-                    cityCode = item.code
-                }
-            })
-            // console.log(cityCode)
-            if (cityCode) {
-                this.form.cityList = []
-                this.CITY.forEach((item, index) => {
-                    if (item.code == cityCode) {
-                        this.form.cityList.push(item)
-                    }
-                })  /* 市匹配成功*/
-            }
-        },
-        getFeeList(){
-                listFee({ deptId: this.form.deptId }).then(response => {
-                    this.ruleOptions = response.rows;
+          } else {
+            addArea(data).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
 
-                });
-
-        },
-        getCityList() {
-           
-            getDistrictList().then(res => {
-                this.form.provinceList = JSON.parse(res.data)
-                // console.log("provinceList======"+JSON.stringify(this.form.provinceList))
-                // this.form.provinceList = res.data.districts[0].districts  /* 省*/
-                /* 进行遍历赋值*/
-                /* 市区和县区*/
-                let newProvince = this.form.provinceList
-                for (let i = 0; i < newProvince.length; i++) {              /* 省级*/
-                    for (let j = 0; j < newProvince[i].districts.length; j++) {       /* 市级*/
-                        let city = newProvince[i].districts[j].name
-                        this.CITY.push({ id: j + 1, name: city, code: i + 1 })
-                        for (let k = 0; k < newProvince[i].districts[j].districts.length; k++) {/* 县级*/
-                            let xian = newProvince[i].districts[j].districts[k].name
-                            this.XIAN.push({ id: k + 1, name: xian, code: j + 1, cityCountyName: city })
-                        }
-                    }
-                }
-                for (let m = 0; m < newProvince.length; m++) {
-                    newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } }
-                }
-                // console.log("newProvince======"+JSON.stringify(newProvince))
-                this.form.provinceList = newProvince
-                // this.loading = true
-                console.log(console.log(this.form.provinceList, ' this.form.provinceList'))
-            })
-        },
-        center(data) {
-            this.form.longitude = data.lng;
-            this.form.latitude = data.lat;
-        },
-        mapList(data) {
-            let mapListJson = JSON.stringify(data);
-            console.log("mapListJson:" + mapListJson);
-            this.form.boundaryStr = mapListJson;
-        },
-        getDeptTree() {
-            deptTreeSelect().then(response => {
-                this.deptOptions = response.data;
+              this.getList();
             });
-        },
-    }
-}
+          }
+        }
+      });
+    },
+    submitForm2() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+        }
+      });
+    },
+    addService() {
+      if (this.customServices.length < 3) {
+        this.customServices.push({ name: "", phone: "" });
+      }
+    },
+    removeService(index) {
+      if (index > 0 && this.customServices.length > 1) {
+        this.$delete(this.customServices, index);
+        this.$set(this.form, `serviceName${index + 1}`, "");
+        this.$set(this.form, `servicePhone${index + 1}`, "");
+      }
+    },
+    getArea(areaId) {
+      getArea(areaId).then((response) => {
+        this.form = response.data;
+        this.form.ruleIds = response.ruleIds;
+        response.data.customService == "1"
+          ? (this.form.customService = true)
+          : (this.form.customService = false);
+        response.data.areaOutOutage == "1"
+          ? (this.form.areaOutOutage = true)
+          : (this.form.areaOutOutage = false);
+        response.data.parkingOutDispatch == "1"
+          ? (this.form.parkingOutDispatch = true)
+          : (this.form.parkingOutDispatch = false);
+        response.data.areaOutDispatch == "1"
+          ? (this.form.areaOutDispatch = true)
+          : (this.form.areaOutDispatch = false);
+        response.data.noRidingOutage == "1"
+          ? (this.form.noRidingOutage = true)
+          : (this.form.noRidingOutage = false);
+        response.data.authentication == "1"
+          ? (this.form.authentication = true)
+          : (this.form.authentication = false);
+        response.data.msgSwitch == "1"
+          ? (this.form.msgSwitch = true)
+          : (this.form.msgSwitch = false);
+        response.data.parkingReturn == "1"
+          ? (this.form.parkingReturn = true)
+          : (this.form.parkingReturn = false);
+        response.data.areaOutReturn == "1"
+          ? (this.form.areaOutReturn = true)
+          : (this.form.areaOutReturn = false);
+        response.data.isDepositDeduction == "1"
+          ? (this.form.isDepositDeduction = true)
+          : (this.form.isDepositDeduction = false);
+        response.data.returnVerify == "1"
+          ? (this.form.returnVerify = true)
+          : (this.form.returnVerify = false);
+
+        // 初始化 customServices 数组
+        this.customServices = [];
+        for (let i = 1; i <= 3; i++) {
+          if (
+            response.data[`serviceName${i}`] ||
+            response.data[`servicePhone${i}`]
+          ) {
+            this.customServices.push({
+              name: response.data[`serviceName${i}`] || "",
+              phone: response.data[`servicePhone${i}`] || "",
+            });
+          }
+        }
+
+        // 如果 customServices 为空，添加一个默认的服务
+        if (this.customServices.length === 0) {
+          this.customServices.push({ name: "", phone: "" });
+        }
+
+        this.title = "修改运营区";
+        this.key++;
+        //  listFee({ areaId: this.form.areaId }).then(response => {
+        //   this.ruleOptions = response.rows;
+        //   this.open = true;
+        //   this.title = "修改运营区";
+        //   this.key++;
+        // });
+      });
+    },
+    cityChange(that) {
+      let countyCode = 0;
+      let cityname = "";
+      let newCountyArry = [];
+      this.form.cityList.forEach((item, index) => {
+        if (item.name == that) {
+          countyCode = item.id;
+          cityname = item.name;
+        }
+      });
+      if (countyCode) {
+        this.form.countyList = [];
+        this.XIAN.forEach((item, index) => {
+          if (item.code == countyCode && item.cityCountyName == cityname) {
+            this.form.countyList.push(item);
+          }
+        });
+      }
+    },
+    provinceChange(that) {
+      // 根据选中省，匹配市
+      let cityCode = 0;
+      let newCityArry = [];
+      this.form.provinceList.forEach((item, index) => {
+        if (item.name == that) {
+          cityCode = item.code;
+        }
+      });
+      // console.log(cityCode)
+      if (cityCode) {
+        this.form.cityList = [];
+        this.CITY.forEach((item, index) => {
+          if (item.code == cityCode) {
+            this.form.cityList.push(item);
+          }
+        }); /* 市匹配成功*/
+      }
+    },
+
+    getCityList() {
+      getDistrictList().then((res) => {
+        this.form.provinceList = JSON.parse(res.data);
+        // console.log("provinceList======"+JSON.stringify(this.form.provinceList))
+        // this.form.provinceList = res.data.districts[0].districts  /* 省*/
+        /* 进行遍历赋值*/
+        /* 市区和县区*/
+        let newProvince = this.form.provinceList;
+        for (let i = 0; i < newProvince.length; i++) {
+          /* 省级*/
+          for (let j = 0; j < newProvince[i].districts.length; j++) {
+            /* 市级*/
+            let city = newProvince[i].districts[j].name;
+            this.CITY.push({ id: j + 1, name: city, code: i + 1 });
+            for (
+              let k = 0;
+              k < newProvince[i].districts[j].districts.length;
+              k++
+            ) {
+              /* 县级*/
+              let xian = newProvince[i].districts[j].districts[k].name;
+              this.XIAN.push({
+                id: k + 1,
+                name: xian,
+                code: j + 1,
+                cityCountyName: city,
+              });
+            }
+          }
+        }
+        for (let m = 0; m < newProvince.length; m++) {
+          newProvince[m] = { ...newProvince[m], ...{ code: m + 1 } };
+        }
+        // console.log("newProvince======"+JSON.stringify(newProvince))
+        this.form.provinceList = newProvince;
+        // this.loading = true
+        console.log(
+          console.log(this.form.provinceList, " this.form.provinceList")
+        );
+      });
+    },
+    center(data) {
+      this.form.longitude = data.lng;
+      this.form.latitude = data.lat;
+    },
+    mapList(data) {
+      let mapListJson = JSON.stringify(data);
+      console.log("mapListJson:" + mapListJson);
+      this.form.boundaryStr = mapListJson;
+    },
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 ::v-deep .el-form-item__label {
-    font-size: 18px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    height: 36px;
+  font-size: 18px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  height: 36px;
 }
 
 ::v-deep .el-form-item__content {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 ::v-deep .el-input .el-input__inner {
-    height: 36px !important;
-    display: flex;
-    align-items: center;
+  height: 36px !important;
+  display: flex;
+  align-items: center;
 }
 
 ::v-deep .el-input-number {
-    display: flex;
-    align-items: center;
-    height: 36px; // 这里设置为和其他输入框一致的高度
+  display: flex;
+  align-items: center;
+  height: 36px; // 这里设置为和其他输入框一致的高度
 }
 
 ::v-deep .el-input-number__input {
-    height: 36px !important;
-    display: flex;
-    align-items: center;
+  height: 36px !important;
+  display: flex;
+  align-items: center;
 }
 
 ::v-deep .el-input-number__increase,
 ::v-deep .el-input-number__decrease {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 36px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px !important;
 }
 
 .tip {
-    font-size: 14px;
-    color: #888;
-    margin-top: 5px;
+  font-size: 14px;
+  color: #888;
+  margin-top: 5px;
 }
 
 .tips {
-    font-size: 14px;
-    color: #888;
-    margin-top: -10px;
+  font-size: 14px;
+  color: #888;
+  margin-top: -10px;
 }
 
 ::v-deep .el-form-item__content::after {
-    content: attr(data-tip);
-    display: block;
-    font-size: 14px;
-    color: #888;
-    margin-top: 5px;
+  content: attr(data-tip);
+  display: block;
+  font-size: 14px;
+  color: #888;
+  margin-top: 5px;
 }
 
 .page {
-    padding: 10px;
+  padding: 10px;
 
-    .tit {
-        font-size: 30px;
-        font-weight: 700;
+  .tit {
+    font-size: 30px;
+    font-weight: 700;
+  }
+
+  .pagecont {
+    width: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+
+    .left_box {
+      padding: 10px;
+      width: 53%;
+      border: 1px solid #ccc;
+      border-radius: 10px;
     }
 
-    .pagecont {
-        width: 100%;
-        display: flex;
-        flex-wrap: nowrap;
+    .right_box {
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 10px;
+      margin-left: 1%;
+      width: 44%;
 
-        .left_box {
-            padding: 10px;
-            width: 53%;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-        }
+      .right_tit {
+        margin-bottom: 20px;
+        font-size: 24px;
+        color: #000;
+        margin-top: 20px;
+      }
 
-        .right_box {
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            margin-left: 1%;
-            width: 44%;
-
-            .right_tit {
-                margin-bottom: 20px;
-                font-size: 24px;
-                color: #000;
-                margin-top: 20px;
-            }
-
-            // background: yellow;
-        }
+      // background: yellow;
     }
+  }
 }
 
 .switch-item {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
 
-
-
-    /* 垂直居中 */
-    // justify-content: flex-start;
-    .el-switch {
-        margin-left: 10px;
-        /* 根据需要调整间距 */
-    }
+  /* 垂直居中 */
+  // justify-content: flex-start;
+  .el-switch {
+    margin-left: 10px;
+    /* 根据需要调整间距 */
+  }
 }
 </style>
diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue
index 5f37ef6..a65843f 100644
--- a/src/views/system/device/index.vue
+++ b/src/views/system/device/index.vue
@@ -523,7 +523,9 @@
               :status="form.status"
               :online-status="form.onlineStatus"
               :device-sn="form.sn"
+              :areaId="form.areaId"
             />
+             
           </el-col>
         </el-row>
         <el-row>
@@ -558,7 +560,7 @@
     updateDevice,
     handleLock,
     handleUnlocking,
-    ring,
+    ring, 
     oneClickOnline,
     oneClickOffline,
     reboot,
@@ -1065,7 +1067,9 @@ export default {
     /** 详情按钮 */
     handleView(row) {
       this.open2 = true;
+      
       this.form = row;
+      console.log(this.form,'this.formthis.formthis.form');
       this.showPlaceSearchMap = true;
       this.key++;
       this.orderRecordKey += 1;