diff --git a/src/api/system/area.js b/src/api/system/area.js
index ed601d8..b7beddb 100644
--- a/src/api/system/area.js
+++ b/src/api/system/area.js
@@ -102,3 +102,10 @@ export function selectDeptByAreaId(areaId) {
     method: 'get'
   })
 }
+// 根据运营区id获取运营商
+export function getleaderboard(type,timeLimit) {
+  return request({
+    url: '/index/admim/leaderboard?type='+type+'&timeLimit='+timeLimit,
+    method: 'get'
+  })
+}
diff --git a/src/api/system/device.js b/src/api/system/device.js
index d095bd8..18ce04e 100644
--- a/src/api/system/device.js
+++ b/src/api/system/device.js
@@ -132,6 +132,14 @@ export function reboot(data){
     method: 'post'
   })
 }
+// 获取轨迹
+export function gettrajectory(data){
+  console.log(data, 'data');
+  return request({
+    url: '/system/device/trajectory?sn=' + data.sn + '&startTime=' + data.startTime + '&endTime=' + data.endTime,
+    method: 'post'
+  });
+}
 // 根据sn查询设备
 export function getDeviceBySn(sn){
   return request({
diff --git a/src/components/Map/TrajectoryMap.vue b/src/components/Map/TrajectoryMap.vue
index a1451cc..e8c12a5 100644
--- a/src/components/Map/TrajectoryMap.vue
+++ b/src/components/Map/TrajectoryMap.vue
@@ -86,7 +86,7 @@ export default {
         console.log("轨迹=====地图已销毁");
       } else {
         console.log("轨迹=====地图实例不存在，无需销毁");
-      }
+      } 
     },
     showMarkers() {
       if (this.show) {
diff --git a/src/components/Map/location/LocationMaps.vue b/src/components/Map/location/LocationMaps.vue
new file mode 100644
index 0000000..aa3969a
--- /dev/null
+++ b/src/components/Map/location/LocationMaps.vue
@@ -0,0 +1,616 @@
+<template>
+  <div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
+    <div id="container"></div>
+    <el-row class="search-row" :gutter="8" type="flex">
+    </el-row>
+    <div id="panel"></div>
+  </div>
+</template>
+<script>
+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'
+import { getDeviceBySn } from '@/api/system/device'
+export default {
+  name: "LocationMap",
+  components: { AreaTextSelect },
+  props: {
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    initLng: {
+      type: String,
+      default: '120.250452'
+    },
+    initLat: {
+      type: String,
+      default: '27.101745'
+    },
+    status: {
+      type: String,
+      default: '0'
+    },
+    onlineStatus: {
+      type: String,
+      default: '0'
+    },
+    deviceSn: {
+      type: String,
+      default: ''
+    },
+    tripRouteStr: {
+      type: String,
+      default: ''
+    }
+
+  },
+  data() {
+    return {
+      AMap: null,
+      map: null,  // 地图实例
+      placeSearch: null,  // POI查询
+      geocoder: null, // 逆地理编码
+      loading: false,
+      keyword: null,
+      markers: [],
+      area: {
+        // province: '福建省',
+        // city: '宁德市',
+      },
+       // area:{},
+      parkingList:[],
+      noParkingList:[],
+      noridingList:[],
+      labels: [],
+      areaId:''
+    }
+  },
+  mounted() {
+    // this.initAMap();
+    //  this.getAreas(this.areaId)
+
+    getDeviceBySn(this.deviceSn).then(response => {
+        this.areaId=response.data.areaId
+        console.log(response,'responseresponse');
+        this.getAreas(this.areaId)
+      });
+  },
+  beforeDestroy() {
+    console.log("轨迹=====组件将被销毁");
+    this.destroyMap();
+  },
+  methods: {
+    destroyMap() {
+      if (this.map) {
+        console.log("位置=====地图实例存在，销毁地图...");
+        this.map.destroy();
+        console.log("位置=====地图已销毁");
+      } else {
+        console.log("位置=====地图实例不存在，无需销毁");
+      }
+    },
+    // onChangeArea() {
+    //   this.loadPlaceSearch(this.area.province, this.area.city);
+    //   if (this.keyword != null) {
+    //     this.doPlaceSearch(this.keyword);
+    //   } else {
+    //     let city = this.area.city === '市辖区' ? this.area.province : this.area.city;
+    //     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 时必填
+        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      }).then((AMap) => {
+        this.AMap = AMap;
+        this.map = new AMap.Map("container", {
+          // 设置地图容器id
+          viewMode: "3D", // 是否为3D地图模式
+          zoom: 16, // 初始化地图级别
+          center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
+        });
+        // this.map.on('click', this.onClickMap);
+
+        // POI
+        // this.loadPlaceSearch(this.area.province, this.area.city);
+
+        // 逆地理编码
+        // 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();
+        // setTimeout(() => {
+        //   this.trajectory()
+        // }, 500);
+     
+
+      }).catch((e) => {
+        console.log("地图加载失败！！！");
+        console.log(e);
+      });
+    },
+      trajectory() {
+        console.log('轨迹调用了',this.tripRouteStr);
+      this.line = JSON.parse(this.tripRouteStr)
+      console.log("this.line================" + this.line)
+      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]);
+      let latitude1 = parseFloat(abb[abb.length - 1][1]);
+      let longitude1 = parseFloat( abb[abb.length - 1][0]);
+      
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: [longitude, latitude],
+        icon: new AMap.Icon({
+          size: new AMap.Size(25, 38),  // 图标大小
+          image: "https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr",
+          imageSize: new AMap.Size(25, 38)  // 图标图片大小
+        }),
+        offset: new AMap.Pixel(-12.5, -19.5),
+      });
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: [longitude1, latitude1],
+        icon: new AMap.Icon({
+          size: new AMap.Size(25, 38),  // 图标大小
+          image: "https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx",
+          imageSize: new AMap.Size(25, 38)  // 图标图片大小
+        }),
+        offset: new AMap.Pixel(-12.5, -19.5),
+      });
+      // console.log(latitude,longitude,'longitudelongitudelongitude');
+      let line = this.line;
+      this.marker = new AMap.Marker({
+        map: this.map,
+        position: line[0],
+        icon: new AMap.Icon({
+          image: globalConfig.icon.trajectory,
+          size: new AMap.Size(25, 39), // 设置图标的宽高
+          imageSize: new AMap.Size(25, 39) // 设置图标的实际显示尺寸
+        }),
+        offset: new AMap.Pixel(-12.5, -19.5),
+        autoRotation: true,
+        angle: 90
+      });
+      // 绘制轨迹
+      let polyline = new AMap.Polyline({
+        map: this.map,
+        path: line,
+        showDir: true,
+        strokeColor: "#28F", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+
+      let passedPolyline = new AMap.Polyline({
+        map: this.map,
+        // path: this.lineArr,
+        strokeColor: "#AF5", //线颜色
+        // strokeOpacity: 1,     //线透明度
+        strokeWeight: 6 //线宽
+        // strokeStyle: "solid"  //线样式
+      });
+
+      this.marker.on("moving", function (e) {
+        passedPolyline.setPath(e.passedPath);
+      });
+
+      this.map.setFitView();
+    },
+    initMarker() {
+      this.removeAllMarker();
+      if (this.initLng != null && this.initLat != null) {
+        // this.getGeoAddress(this.initLng, this.initLat).then(res => {
+          // 标点
+          this.removeAllMarker();
+          console.log("添加标记点")
+          console.log("====",this.initLng, this.initLat,this.deviceSn, this.status, this.onlineStatus)
+          this.addMarker(this.initLng, this.initLat, this.deviceSn, this.status, this.onlineStatus);
+          // this.$emit('map-geo', res, this.initLng, this.initLat);
+
+          // 地区
+          // let component = res.regeocode.addressComponent;
+          // this.area = {
+          //   province: component.province,
+          //   city: component.city === '' ? '市辖区' : component.city,
+          // }
+        // }).finally(() => {
+        //   this.loading = false;
+        // })
+      }
+    },
+    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)
+      let icon = this.formarStatus(status, onlineStatus)
+      console.log('icon===========' + icon)
+      let marker = new AMap.Marker({
+        position: new AMap.LngLat(lng, lat), //经纬度对象
+        icon: new AMap.Icon({
+          image: icon,
+          size: new AMap.Size(25, 30), // 设置图标的宽高
+          imageSize: new AMap.Size(25, 30) // 设置图标的实际显示尺寸
+        }),
+        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({
+        text: title,
+        anchor: 'center', // 设置文本的锚点
+        position: new AMap.LngLat(lng, lat), // 经纬度对象
+        offset: new AMap.Pixel(0, -50),
+        style: {
+          'background-color': '#1890ff', // 背景颜色为蓝色
+          'border': 'none', // 边框颜色与背景一致
+          'border-radius': '5px', // 圆角 5px
+          'color': 'white', // 文字颜色为白色
+          'font-size': '14px', // 字体大小
+          'padding': '5px 10px' // 内边距，调整文本框的大小
+        }
+      })
+
+      // 将文本标签添加到地图实例
+      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"){
+        if(status == "3"){
+          return globalConfig.icon.redyellow;
+        }else if(status == "4"){
+          return globalConfig.icon.orangered;
+        }
+        return globalConfig.icon.red;
+      }else{
+        if(status == "0"){
+          return globalConfig.icon.gray;
+        }else if(status == "1"){
+          return globalConfig.icon.blue;
+        }else if(status == "2"){
+          return globalConfig.icon.green;
+        }else if(status == "3"){
+          return globalConfig.icon.yellow;
+        }else if(status == "4"){
+          return globalConfig.icon.orange;
+        }else if(status == "8"){
+          return globalConfig.icon.gray;
+        }else if(status == "9"){
+          return globalConfig.icon.gray;
+        }
+      }
+    },
+    // 删除所有的标记点
+    removeAllMarker() {
+      this.map.remove(this.markers);
+      this.markers = [];
+    },
+    // 点击地图事件
+    // onClickMap(e) {
+    //   console.log('clickMap', e);
+    //   let lng = e.lnglat.lng;
+    //   let lat = e.lnglat.lat;
+    //   this.changeMarker(lng, lat);
+    // },
+    // // 逆地理编码，并标点
+    // changeMarker(lng, lat) {
+    //   console.log('changeMarker', lng,lat);
+    //   this.loading = true;
+    //   this.getGeoAddress(lng, lat).then(res => {
+    //     this.removeAllMarker();
+    //     this.addMarker(lng, lat, res.regeocode.formattedAddress);
+    //     this.$emit('map-geo', res, lng, lat);
+    //   }).finally(() => {
+    //     this.loading = false;
+    //   })
+    // },
+    // // 获取逆地理编码
+    // getGeoAddress(lng, lat) {
+    //   console.log('getGeoAddress', lng,lat);
+    //   console.log('this.geocoder', this.geocoder);
+    //   if(this.geocoder){
+    //     return new Promise((resolve, reject) =>{
+    //       this.geocoder.getAddress([lng, lat], (status, result) => {
+    //         if (status === 'complete' && result.info === 'OK') {
+    //           console.log('resolve', result);
+    //           resolve(result);
+    //         } else {
+    //           console.log('reject', status,result);
+    //           reject(status);
+    //         }
+    //       })
+    //     })
+    //   }
+    // },
+    // // 加载逆地理编码
+    // loadGeoCoder() {
+    //   AMap.plugin('AMap.Geocoder', () => {
+    //     this.geocoder = new AMap.Geocoder({
+    //       city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
+    //     })
+    //   })
+    // },
+    // // 加载POI
+    // loadPlaceSearch(province, city) {
+    //   if (city == null) {
+    //     city = '北京市';
+    //   }
+    //   if (city === '市辖区') {
+    //     city = province;
+    //   }
+    //   AMap.plugin(["AMap.PlaceSearch"], () => {
+    //     //构造地点查询类
+    //     this.placeSearch = new AMap.PlaceSearch({
+    //       pageSize: 5, // 单页显示结果条数
+    //       pageIndex: 1, // 页码
+    //       city: city, // 兴趣点城市
+    //       citylimit: true,  //是否强制限制在设置的城市内搜索
+    //       map: this.map, // 展现结果的地图实例
+    //       panel: "panel", // 结果列表将在此容器中进行展示。
+    //       autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+    //     });
+    //   });
+    //   // 事件绑定
+    //   this.placeSearch.on('selectChanged', (data) => {
+    //     this.$emit('select-changed', data);
+    //   })
+    // },
+    //关键字查询
+    doPlaceSearch(keyword) {
+      if (keyword == null) {
+        return this.$message.warning("请输入关键词");
+      }
+      this.loading = true;
+      this.placeSearch.search(keyword, (status, result) => {
+        this.loading = false;
+        console.log("POI", status, result);
+      });
+    },
+    // 周边搜索
+    doSearchNearBy(keyword, lng, lat, radius = 200) {
+      if (keyword == null) {
+        return this.$message.warning("请输入关键词");
+      }
+      this.loading = true;
+      this.placeSearch.searchNearBy(keyword, [lng, lat], radius, (status, result) => {
+        this.loading = false;
+        console.log("POI NearBy", status, result);
+      })
+    },
+    // 根据地图中心点查询周边
+    doSearchNearByCenter(keyword) {
+      let center = this.map.getCenter();
+      this.doSearchNearBy(keyword, center.lng, center.lat, 1000);
+    },
+    // 监听输入事件
+    onInputSearch: debounce(function () {
+      this.doPlaceSearch(this.keyword)
+    }, 600)
+  },
+};
+</script>
+<style scoped lang="scss">
+.place-search-map {
+  position: relative;
+  overflow: hidden;
+
+  .search-row {
+    margin: 0.5em;
+  }
+  #container {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+  #panel {
+    position: absolute;
+    background-color: white;
+    max-height: 90%;
+    overflow-y: auto;
+    top: 10px;
+    right: 10px;
+    width: 280px;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 76947ab..04f3952 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -246,6 +246,20 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/system/areaRange',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:parking:list'],
+    children: [
+      {
+        path: 'index/:areaId(\\d+)?', // 将参数设置为可选
+        component: () => import('@/views/system/area/areaRange'),
+        name: 'Data',
+        meta: { title: '运营区范围设置', activeMenu: '/system/areaRange' }
+      }
+    ]
+  },
   {
     path: '/system/area-noriding',
     component: Layout,
diff --git a/src/views/index.vue b/src/views/index.vue
index c450aef..7934bcc 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,261 +1,479 @@
 <template>
   <div class="page" v-if="userName == 'admin'">
     <div class="left">
-       <div class="info_li">
-      <div class="card1">
-        <div class="txt">运营商数</div>
-        <div class="num">{{StatisticsInfo.operatorCount }}</div>
-        <div class="txt1">独立小程序：{{StatisticsInfo.appCount }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uZdZtiQN8BGMcSEamOmj" alt="">
-      </div>
-      <div class="card1" style="background: linear-gradient( 270deg, #A6A6E7 0%, rgba(166,166,231,0.44) 100%);">
-        <div class="txt">商户总余额</div>
-        <div class="num">{{StatisticsInfo.totalBalance }}</div>
-        <div class="txt1">已提现金额：{{ StatisticsInfo.withdrawn }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uy7fzOouY8czRqSuh76D" alt=""
-          style="width: 6.42rem;height: 7rem;">
-      </div>
-      <div class="card1" style="background: linear-gradient( 270deg, #64B6A7 0%, rgba(100,182,167,0.44) 100%);">
-        <div class="txt">运营区数</div>
-        <div class="num">{{StatisticsInfo.areaCount }}</div>
-        <div class="txt1">已提现金额：{{StatisticsInfo.otalOrderCount }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uErTaNSlejRXjjzHAdym" alt="">
-      </div>
-      <div class="card1" style="background: linear-gradient( 270deg, #60ADFD 0%, rgba(148,198,250,0.5) 100%), #FFFFFF;">
-        <div class="txt">车辆总数</div>
-        <div class="num">{{StatisticsInfo.vehicleVo.allNum }}</div>
-        <div class="txt1">车辆型号：{{StatisticsInfo.modelCount }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uTBhrhUajBERKs81lJSe" alt=""
-          style="width: 7.33rem;height: 6.08rem;">
-      </div>
-      <div class="card1"
-        style="background: linear-gradient( 270deg, #FFB2B2 0%, rgba(255,178,178,0.36) 100%), #FFFFFF;">
-        <div class="txt">用户总数</div>
-        <div class="num">{{StatisticsInfo.userCount }}</div>
-        <div class="txt1">今日新增：{{StatisticsInfo.todayUserCount }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uyqanVA0Qi2ZWg0cNmwg" alt=""
-          style="width: 7.33rem;height: 7.42rem;">
-      </div>
-    </div>
-    <div class="info_li" style="margin-top: 1.25rem;">
-      <div class="card2">
-        <div class="txt">今日订单数</div>
-        <div class="num">{{StatisticsInfo.todayOrderCount }}</div>
-        <div class="txt1">总订单数：{{StatisticsInfo.totalOrderCount }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
-      </div>
-      <div class="card2">
-        <div class="txt">今日订单金额</div>
-        <div class="num">{{StatisticsInfo.todayOrderFee }}</div>
-        <div class="txt1">订单总金额：{{StatisticsInfo.totalOrderFee }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
-      </div>
-      <div class="card2">
-        <div class="txt">今日退款金额</div>
-        <div class="num">{{StatisticsInfo.todayRefundFee }}</div>
-        <div class="txt1">总退款金额：{{StatisticsInfo.totalRefundFee }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uwJ6enKaUs6qMMXC7xEt" alt="">
-      </div>
-      <div class="card2">
-        <div class="txt">待付款订单金额</div>
-        <div class="num">{{StatisticsInfo.unpaidOrderFee }}</div>
-        <div class="txt1">待付款订单数：{{StatisticsInfo.unpaidOrderCount }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/un9hBy1mNXjAsRnrSt14" alt="">
-      </div>
-      <div class="card2">
-        <div class="txt">待审核还车押金扣款</div>
-        <div class="num">{{StatisticsInfo.returnOrderDeductFee }}</div>
-        <div class="txt1">还车待审核订单数:{{StatisticsInfo.returnOrderCount }}</div>
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uBV6yOFFWUvTValGnmfw" alt="">
-      </div>
-    </div>
-    <div class="cont_box">
-      <div class="echart_box">
-        <div class="tit"> 营收统计</div>
-        <div class="echarts_cont">
-          <div id="myChart" style="width: 100%;height: 100%;"></div>
+      <div class="info_li">
+        <div class="card1">
+          <div class="txt">运营商数</div>
+          <div class="num">{{ StatisticsInfo.operatorCount }}</div>
+          <div class="txt1">独立小程序：{{ StatisticsInfo.appCount }}</div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uZdZtiQN8BGMcSEamOmj"
+            alt=""
+          />
+        </div>
+        <div
+          class="card1"
+          style="
+            background: linear-gradient(
+              270deg,
+              #a6a6e7 0%,
+              rgba(166, 166, 231, 0.44) 100%
+            );
+          "
+        >
+          <div class="txt">商户总余额</div>
+          <div class="num">{{ StatisticsInfo.totalBalance }}</div>
+          <div class="txt1">已提现金额：{{ StatisticsInfo.withdrawn }}</div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uy7fzOouY8czRqSuh76D"
+            alt=""
+            style="width: 6.42rem; height: 7rem"
+          />
+        </div>
+        <div
+          class="card1"
+          style="
+            background: linear-gradient(
+              270deg,
+              #64b6a7 0%,
+              rgba(100, 182, 167, 0.44) 100%
+            );
+          "
+        >
+          <div class="txt">运营区数</div>
+          <div class="num">{{ StatisticsInfo.areaCount }}</div>
+          <div class="txt1">
+            已提现金额：{{ StatisticsInfo.otalOrderCount }}
+          </div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uErTaNSlejRXjjzHAdym"
+            alt=""
+          />
+        </div>
+        <div
+          class="card1"
+          style="
+            background: linear-gradient(
+                270deg,
+                #60adfd 0%,
+                rgba(148, 198, 250, 0.5) 100%
+              ),
+              #ffffff;
+          "
+        >
+          <div class="txt">车辆总数</div>
+          <div class="num">{{ StatisticsInfo.vehicleVo.allNum }}</div>
+          <div class="txt1">车辆型号：{{ StatisticsInfo.modelCount }}</div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uTBhrhUajBERKs81lJSe"
+            alt=""
+            style="width: 7.33rem; height: 6.08rem"
+          />
+        </div>
+        <div
+          class="card1"
+          style="
+            background: linear-gradient(
+                270deg,
+                #ffb2b2 0%,
+                rgba(255, 178, 178, 0.36) 100%
+              ),
+              #ffffff;
+          "
+        >
+          <div class="txt">用户总数</div>
+          <div class="num">{{ StatisticsInfo.userCount }}</div>
+          <div class="txt1">今日新增：{{ StatisticsInfo.todayUserCount }}</div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uyqanVA0Qi2ZWg0cNmwg"
+            alt=""
+            style="width: 7.33rem; height: 7.42rem"
+          />
         </div>
       </div>
-      <div class="right_box">
-        <div class="right_box_top">
-          <div class="info_li">
-            <div class="card2">
-              <div class="txt">今日支付手续费</div>
-              <div class="num">{{StatisticsInfo.todayHandlingFee }}</div>
-              <div class="txt1">总支付手续费：{{StatisticsInfo.totalHandlingFee }}</div>
-              <img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
-            </div>
-            <div class="card2">
-              <div class="txt">今日服务费</div>
-              <div class="num">{{StatisticsInfo.todayServiceFee }}</div>
-              <div class="txt1">总服务费：{{StatisticsInfo.totalServiceFee }}</div>
-              <img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
-            </div>
-
-          </div>
+      <div class="info_li" style="margin-top: 1.25rem">
+        <div class="card2">
+          <div class="txt">今日订单数</div>
+          <div class="num">{{ StatisticsInfo.todayOrderCount }}</div>
+          <div class="txt1">总订单数：{{ StatisticsInfo.totalOrderCount }}</div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN"
+            alt=""
+          />
         </div>
-        <div class="car_info_box">
-          <div class="tit">车辆统计</div>
-
-          <div class="info_li">
-            <div class="info_cont">
-              <div class="info_cont_top">
-                <img src="https://lxnapi.ccttiot.com/bike/img/static/uUSztvtXXdRtxHzQVWgH" alt="">投放中（辆）
-              </div>
-              <div class="info_cont_txt">
-                {{ StatisticsInfo.vehicleVo.inOperation }}
-              </div>
-            </div>
-            <div class="info_cont">
-              <div class="info_cont_top">
-                <img src="https://lxnapi.ccttiot.com/bike/img/static/uUAe2gRT4blxwsIKs0id" alt="">骑行中（辆）
-              </div>
-              <div class="info_cont_txt">
-                {{ StatisticsInfo.vehicleVo.ridingNum }}
-              </div>
-            </div>
-            <div class="info_cont">
-              <div class="info_cont_top">
-                <img src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH" alt="">仓库中（辆）
-              </div>
-              <div class="info_cont_txt">
-                {{ StatisticsInfo.vehicleVo.inStashNum }}
-              </div>
-            </div>
+        <div class="card2">
+          <div class="txt">今日订单金额</div>
+          <div class="num">{{ StatisticsInfo.todayOrderFee }}</div>
+          <div class="txt1">订单总金额：{{ StatisticsInfo.totalOrderFee }}</div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W"
+            alt=""
+          />
+        </div>
+        <div class="card2">
+          <div class="txt">今日退款金额</div>
+          <div class="num">{{ StatisticsInfo.todayRefundFee }}</div>
+          <div class="txt1">
+            总退款金额：{{ StatisticsInfo.totalRefundFee }}
           </div>
-          <div class="info_li">
-            <div class="info_cont">
-              <div class="info_cont_top">
-                <img src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中（辆）
-              </div>
-              <div class="info_cont_txt">
-                {{ StatisticsInfo.vehicleVo.disabledNum }}
-              </div>
-            </div>
-            <div class="info_cont">
-              <div class="info_cont_top">
-                <img src="https://lxnapi.ccttiot.com/bike/img/static/uUgJO8VOMNI48H7ab5yU" alt="">调度中（辆）
-              </div>
-              <div class="info_cont_txt">
-                {{ StatisticsInfo.vehicleVo.dispatchNum }}
-              </div>
-            </div>
-            <div class="info_cont">
-              <div class="info_cont_top">
-                <img src="https://lxnapi.ccttiot.com/bike/img/static/uAKVUuosyqvFJx5Ynjbp" alt="">离线（辆）
-              </div>
-              <div class="info_cont_txt">
-                {{ StatisticsInfo.vehicleVo.offlineNum }}
-              </div>
-            </div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uwJ6enKaUs6qMMXC7xEt"
+            alt=""
+          />
+        </div>
+        <div class="card2">
+          <div class="txt">待付款订单金额</div>
+          <div class="num">{{ StatisticsInfo.unpaidOrderFee }}</div>
+          <div class="txt1">
+            待付款订单数：{{ StatisticsInfo.unpaidOrderCount }}
           </div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/un9hBy1mNXjAsRnrSt14"
+            alt=""
+          />
+        </div>
+        <div class="card2">
+          <div class="txt">待审核还车押金扣款</div>
+          <div class="num">{{ StatisticsInfo.returnOrderDeductFee }}</div>
+          <div class="txt1">
+            还车待审核订单数:{{ StatisticsInfo.returnOrderCount }}
+          </div>
+          <img
+            src="https://lxnapi.ccttiot.com/bike/img/static/uBV6yOFFWUvTValGnmfw"
+            alt=""
+          />
         </div>
       </div>
-
-
-    </div>
-    <div class="bot_box">
-      <div class="tit">运维状态</div>
       <div class="cont_box">
+        <div class="echart_box">
+          <div class="tit">营收统计</div>
+          <div class="echarts_cont">
+            <div id="myChart" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <div class="right_box">
+          <div class="right_box_top">
+            <div class="info_li">
+              <div class="card2">
+                <div class="txt">今日支付手续费</div>
+                <div class="num">{{ StatisticsInfo.todayHandlingFee }}</div>
+                <div class="txt1">
+                  总支付手续费：{{ StatisticsInfo.totalHandlingFee }}
+                </div>
+                <img
+                  src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN"
+                  alt=""
+                />
+              </div>
+              <div class="card2">
+                <div class="txt">今日服务费</div>
+                <div class="num">{{ StatisticsInfo.todayServiceFee }}</div>
+                <div class="txt1">
+                  总服务费：{{ StatisticsInfo.totalServiceFee }}
+                </div>
+                <img
+                  src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W"
+                  alt=""
+                />
+              </div>
+            </div>
+          </div>
+          <div class="car_info_box">
+            <div class="tit">车辆统计</div>
 
-        <div class="cont_li">
-          <div class="cont_li_top">
-            <img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">4g解锁失败
-          </div>
-          <div class="cont_li_bot">
-            {{ StatisticsInfo.operationVo.failedUnlockCount }}
+            <div class="info_li">
+              <div class="info_cont">
+                <div class="info_cont_top">
+                  <img
+                    src="https://lxnapi.ccttiot.com/bike/img/static/uUSztvtXXdRtxHzQVWgH"
+                    alt=""
+                  />投放中（辆）
+                </div>
+                <div class="info_cont_txt">
+                  {{ StatisticsInfo.vehicleVo.inOperation }}
+                </div>
+              </div>
+              <div class="info_cont">
+                <div class="info_cont_top">
+                  <img
+                    src="https://lxnapi.ccttiot.com/bike/img/static/uUAe2gRT4blxwsIKs0id"
+                    alt=""
+                  />骑行中（辆）
+                </div>
+                <div class="info_cont_txt">
+                  {{ StatisticsInfo.vehicleVo.ridingNum }}
+                </div>
+              </div>
+              <div class="info_cont">
+                <div class="info_cont_top">
+                  <img
+                    src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH"
+                    alt=""
+                  />仓库中（辆）
+                </div>
+                <div class="info_cont_txt">
+                  {{ StatisticsInfo.vehicleVo.inStashNum }}
+                </div>
+              </div>
+            </div>
+            <div class="info_li">
+              <div class="info_cont">
+                <div class="info_cont_top">
+                  <img
+                    src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg"
+                    alt=""
+                  />禁用中（辆）
+                </div>
+                <div class="info_cont_txt">
+                  {{ StatisticsInfo.vehicleVo.disabledNum }}
+                </div>
+              </div>
+              <div class="info_cont">
+                <div class="info_cont_top">
+                  <img
+                    src="https://lxnapi.ccttiot.com/bike/img/static/uUgJO8VOMNI48H7ab5yU"
+                    alt=""
+                  />调度中（辆）
+                </div>
+                <div class="info_cont_txt">
+                  {{ StatisticsInfo.vehicleVo.dispatchNum }}
+                </div>
+              </div>
+              <div class="info_cont">
+                <div class="info_cont_top">
+                  <img
+                    src="https://lxnapi.ccttiot.com/bike/img/static/uAKVUuosyqvFJx5Ynjbp"
+                    alt=""
+                  />离线（辆）
+                </div>
+                <div class="info_cont_txt">
+                  {{ StatisticsInfo.vehicleVo.offlineNum }}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="cont_li">
-          <div class="cont_li_top">
-            <img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">蓝牙解锁数
+      </div>
+      <div class="bot_box">
+        <div class="tit">运维状态</div>
+        <div class="cont_box">
+          <div class="cont_li">
+            <div class="cont_li_top">
+              <img
+                src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
+                alt=""
+              />4g解锁失败
+            </div>
+            <div class="cont_li_bot">
+              {{ StatisticsInfo.operationVo.failedUnlockCount }}
+            </div>
           </div>
-          <div class="cont_li_bot">
-            {{ StatisticsInfo.operationVo.bluetoothUnlockCount}}
+          <div class="cont_li">
+            <div class="cont_li_top">
+              <img
+                src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
+                alt=""
+              />蓝牙解锁数
+            </div>
+            <div class="cont_li_bot">
+              {{ StatisticsInfo.operationVo.bluetoothUnlockCount }}
+            </div>
           </div>
-        </div>
-        <div class="cont_li">
-          <div class="cont_li_top">
-            <img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">设备离线率
+          <div class="cont_li">
+            <div class="cont_li_top">
+              <img
+                src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
+                alt=""
+              />设备离线率
+            </div>
+            <div class="cont_li_bot">
+              {{ StatisticsInfo.operationVo.deviceOfflineRate }}%
+            </div>
           </div>
-          <div class="cont_li_bot">
-            {{ StatisticsInfo.operationVo.deviceOfflineRate }}%
+          <div class="cont_li">
+            <div class="cont_li_top">
+              <img
+                src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
+                alt=""
+              />异常排查车辆
+            </div>
+            <div class="cont_li_bot">
+              {{ StatisticsInfo.operationVo.faultOrderCount }}
+            </div>
           </div>
-        </div>
-        <div class="cont_li">
-          <div class="cont_li_top">
-            <img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">异常排查车辆
+          <div class="cont_li">
+            <div class="cont_li_top">
+              <img
+                src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
+                alt=""
+              />待换电
+            </div>
+            <div class="cont_li_bot">
+              {{ StatisticsInfo.operationVo.replacementOrderCount }}
+            </div>
           </div>
-          <div class="cont_li_bot">
-            {{ StatisticsInfo.operationVo.faultOrderCount }}
-          </div>
-        </div>
-        <div class="cont_li">
-          <div class="cont_li_top">
-            <img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">待换电
-          </div>
-          <div class="cont_li_bot">
-            {{ StatisticsInfo.operationVo.replacementOrderCount }}
-          </div>
-        </div>
-        <div class="cont_li">
-          <div class="cont_li_top">
-            <img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">待维修
-          </div>
-          <div class="cont_li_bot">
-            {{ StatisticsInfo.operationVo.repairCount }}
+          <div class="cont_li">
+            <div class="cont_li_top">
+              <img
+                src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
+                alt=""
+              />待维修
+            </div>
+            <div class="cont_li_bot">
+              {{ StatisticsInfo.operationVo.repairCount }}
+            </div>
           </div>
         </div>
       </div>
     </div>
-    </div>
-    <div class="right">
-        1
+    <div class="rights">
+      <div class="check_li">
+        
+        <span>时间：</span>
+        <el-select
+          v-model="data"
+          filterable
+          placeholder="请选择排序时间"
+          clearable
+          @change="changetime"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+         
+         <span>类型：</span>
+        <el-select
+          v-model="type"
+          filterable
+          placeholder="请选择排序类型"
+          clearable
+           @change="changetype"
+        >
+          <el-option
+            v-for="item in optionss"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
+
+      <div class="li" v-for="(item,index) in leaderboardList" :key="index">
+        <img src="https://lxnapi.ccttiot.com/bike/img/static/uM68bA3PUCCXFEkIZJ6c" alt="" v-if="index==0">
+        <img src="https://lxnapi.ccttiot.com/bike/img/static/u5drfWtvysvsCjN8IuAE" alt="" v-if="index==1">
+        <img src="https://lxnapi.ccttiot.com/bike/img/static/u35XPUX5r0HrV2IWit5F" alt="" v-if="index==2">
+        <div class="paim" v-if="index!=0&&index!=1&&index!=2">
+          {{index+1}}
+        </div>
+          <div class="li_txt">
+           {{item.areaName}}
+        </div>
+        <div class="li_txt">
+          订单金额:{{item.orderFee}}
+        </div>
+         <div class="li_txt">
+          订单数:{{item.orderCount}}
+        </div>
+         <div class="li_txt">
+          进行中的订单:{{item.inProgressOrderCount}}
+        </div>
+        
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
-import { getAdminStatistics } from '@/api/system/area'
-import * as echarts from 'echarts';
+import { getAdminStatistics,getleaderboard } from "@/api/system/area";
+import * as echarts from "echarts";
 export default {
   name: "Index",
   data() {
     return {
       StatisticsInfo: {},
       userName: undefined,
-      chartInstance:null
+      chartInstance: null,
+      data: "1",
+      options: [
+        {
+          value: "1",
+          label: "今天",
+        },
+        {
+          value: "2",
+          label: "本周",
+        },
+      ],
+       optionss: [
+         {
+          value: "1",
+          label: "订单数",
+        },
+        {
+          value: "2",
+          label: "订单金额",
+        },
+       
+         {
+          value: "3",
+          label: "进行中的订单",
+        },
+      ],
+      type:"2",
+      leaderboardList:[]
     };
   },
-  created() {
-
-  },
+  created() {},
   mounted() {
     this.userName = this.$store.state.user.name;
     this.AdminStatistics();
-    window.addEventListener('resize', this.handleResize);
+    window.addEventListener("resize", this.handleResize);
+    this.getlibord()
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener("resize", this.handleResize);
     if (this.chartInstance) {
       this.chartInstance.dispose();
     }
   },
   methods: {
+    changetype(value){
+      this.getlibord()
+      console.log('点击了',value);
+    },
+    changetime(value){
+      this.getlibord()
+       console.log('点击了',value);
+    },
     AdminStatistics() {
-      getAdminStatistics().then(response => {
+      getAdminStatistics().then((response) => {
         this.StatisticsInfo = response.data;
         this.StatisticsInfo.incomeVoList.reverse();
         setTimeout(() => {
-          this.drawLine()
+          this.drawLine();
         }, 1000);
 
         console.log("areaOptions", this.areaOptions);
       });
     },
+    getlibord() {
+      getleaderboard(this.type,this.data).then((response) => {
+        this.leaderboardList=response.data
+        // this.StatisticsInfo = response.data;
+        // this.StatisticsInfo.incomeVoList.reverse();
+        // setTimeout(() => {
+        //   this.drawLine();
+        // }, 1000);
+
+        console.log("areaOptions", this.areaOptions);
+      });
+    },
     drawLine() {
-      this.chartInstance  = echarts.init(document.getElementById("myChart"));
+      this.chartInstance = echarts.init(document.getElementById("myChart"));
       // 设置图表的配置项和数据
       this.chartInstance.setOption({
         grid: {
@@ -265,384 +483,428 @@ export default {
           bottom: 20,
         },
         tooltip: {
-          trigger: 'axis'
+          trigger: "axis",
         },
         legend: {
-          data: ['订单金额', '订单']
+          data: ["订单金额", "订单"],
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           boundaryGap: false,
-          data: this.StatisticsInfo.incomeVoList.map(item => item.day)
+          data: this.StatisticsInfo.incomeVoList.map((item) => item.day),
         },
         yAxis: [
           {
-            type: 'value',
-            name: '订单金额',
-            position: 'left',
+            type: "value",
+            name: "订单金额",
+            position: "left",
             axisLine: {
               lineStyle: {
-                color: '#5470C6'
-              }
+                color: "#5470C6",
+              },
             },
             axisLabel: {
-              formatter: '{value} 元'
-            }
+              formatter: "{value} 元",
+            },
           },
           {
-            type: 'value',
-            name: '订单',
-            position: 'right',
+            type: "value",
+            name: "订单",
+            position: "right",
             axisLine: {
               lineStyle: {
-                color: '#91CC75'
-              }
+                color: "#91CC75",
+              },
             },
             axisLabel: {
-              formatter: '{value}'
-            }
-          }
+              formatter: "{value}",
+            },
+          },
         ],
         series: [
           {
-            name: '订单金额',
-            type: 'line',
-            data: this.StatisticsInfo.incomeVoList.map(item => item.orderFee),
+            name: "订单金额",
+            type: "line",
+            data: this.StatisticsInfo.incomeVoList.map((item) => item.orderFee),
             yAxisIndex: 0,
             itemStyle: {
-              color: '#5470C6'
+              color: "#5470C6",
             },
-            smooth: true
+            smooth: true,
           },
           {
-            name: '订单',
-            type: 'line',
-            data: this.StatisticsInfo.incomeVoList.map(item => item.orderNum),
+            name: "订单",
+            type: "line",
+            data: this.StatisticsInfo.incomeVoList.map((item) => item.orderNum),
             yAxisIndex: 1,
             itemStyle: {
-              color: '#91CC75'
+              color: "#91CC75",
             },
-            smooth: true
-          }
-        ]
+            smooth: true,
+          },
+        ],
       });
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
 .page {
   padding: 1.92rem;
-  background: #F7F8FA;
+  background: #f7f8fa;
   width: 100%;
   // height: 100vh;
   display: flex;
- 
+
   flex-wrap: nowrap;
-   flex-direction: row;
-  .right{
-    width: 24%;
-     display: flex;
-    flex-wrap: nowrap;
-    background: #fff;
-  }
-  .left{
-     width: 75%;
-      .cont_box {
-    width: 100%;
-    margin-top: 1.33rem;
+  flex-direction: row;
+  .rights {
+    width: 27%;
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
+    justify-content: center;
+    background: #fff;
+    align-content: flex-start;
+    flex-direction: row;
 
-    .echart_box {
-      padding: 1.08rem;
-      margin-right: 1.17rem;
-      width: 59%;
-      height: 31.83rem;
-      background: #FFFFFF;
-      border-radius: 0rem 0rem 0rem 0rem;
-
-      .echarts_cont {
-        width: 100%;
-        height: 27.17rem;
-        /* 可以设置为百分比或视口单位 */
-      }
-
-      .tit {
-        font-weight: 500;
-        font-size: 1.33rem;
-        color: #1D252F;
+    .check_li{
+      padding: 0 1rem;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      height: 3rem;
+      span{
+        width: 3.5rem;
+        font-size: 0.8rem;
       }
     }
 
-    .right_box {
+    .li {
+      margin-top: 1rem;
       display: flex;
-      width: 39%;
-      flex-wrap: wrap;
-
-      .right_box_top {
-        width: 100%;
-
-        .info_li {
-          width: 100%;
-          display: flex;
-          flex-wrap: nowrap;
-          // justify-content: space-between;
-          height: 10.42rem;
-
-          .card2:last-child {
-            margin-right: 0;
-          }
-
-          .card2 {
-            margin-right: 3%;
-            padding: 1.42rem 1.75rem 1.33rem;
-            position: relative;
-            width: 49%;
-            height: 10.42rem;
-            background: #fff;
-            border-radius: 0rem 0rem 0rem 0rem;
-
-            .txt {
-              font-weight: 500;
-              font-size: 1rem;
-              color: #1D252F;
-                z-index: 1;
-            }
-
-            .num {
-              margin-top: 1.08rem;
-              margin-bottom: 0.44rem;
-              font-weight: 500;
-              font-size: 1.5rem;
-              color: #1D252F;
-                z-index: 1;
-            }
-
-            .txt1 {
-              font-size: 1rem;
-              color: #1D252F;
-              line-height: 1.58rem;
-               z-index: 1;
-            }
-
-            img {
-              position: absolute;
-              right: 1.75rem;
-              top: 1.42rem;
-              width: 4.5rem;
-              height: 4.5rem;
-              z-index: 0;
-            }
-          }
-
-
-
-        }
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: space-around;
+      width: 90%;
+      height: 3rem;
+      background: #fff;
+      box-shadow: 0px 10px 64px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 10%;
+      img{
+        width: 37px;
+        height: 23.6px;
       }
+      .li_txt{
+        width: 20%;
+        font-size: 0.6rem;
+      }
+      .paim{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+         width: 37px;
+         height: 37px;
+         border-radius: 50%;
+        //  background-color: #ccc;
 
-      .car_info_box {
-        margin-top: 1.17rem;
-        padding: 0.75rem 1.67rem;
-        width: 100%;
-        height: 20.25rem;
-        background: #FFFFFF;
+      }
+    }
+  }
+  .left {
+    width: 72%;
+    .cont_box {
+      width: 100%;
+      margin-top: 1.33rem;
+      display: flex;
+      flex-wrap: nowrap;
+
+      .echart_box {
+        padding: 1.08rem;
+        margin-right: 1.17rem;
+        width: 59%;
+        height: 31.83rem;
+        background: #ffffff;
         border-radius: 0rem 0rem 0rem 0rem;
 
+        .echarts_cont {
+          width: 100%;
+          height: 27.17rem;
+          /* 可以设置为百分比或视口单位 */
+        }
+
         .tit {
           font-weight: 500;
           font-size: 1.33rem;
-          color: #1D252F;
+          color: #1d252f;
         }
+      }
 
-        .info_li {
-          margin-top: 1.25rem;
-          display: flex;
-          flex-wrap: nowrap;
+      .right_box {
+        display: flex;
+        width: 39%;
+        flex-wrap: wrap;
+
+        .right_box_top {
           width: 100%;
-          height: 40%;
-          .info_cont {
-            width: 33%;
 
-            .info_cont_top {
-              img {
-                width: 1.33rem;
-                height: 1.33rem;
-                margin-right: 0.58rem;
-                z-index: -1;
+          .info_li {
+            width: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            // justify-content: space-between;
+            height: 10.42rem;
+
+            .card2:last-child {
+              margin-right: 0;
+            }
+
+            .card2 {
+              margin-right: 3%;
+              padding: 1.42rem 1.75rem 1.33rem;
+              position: relative;
+              width: 49%;
+              height: 10.42rem;
+              background: #fff;
+              border-radius: 0rem 0rem 0rem 0rem;
+
+              .txt {
+                font-weight: 500;
+                font-size: 1rem;
+                color: #1d252f;
+                z-index: 1;
               }
 
-              display: flex;
-              flex-wrap: nowrap;
-              justify-content: center;
-              align-items: center;
-              width: 100%;
-              font-weight: 500;
-              font-size: 1rem;
-              color: #757575;
-            }
+              .num {
+                margin-top: 1.08rem;
+                margin-bottom: 0.44rem;
+                font-weight: 500;
+                font-size: 1.5rem;
+                color: #1d252f;
+                z-index: 1;
+              }
 
-            .info_cont_txt {
-              margin-top: 0.33rem;
-              width: 100%;
-              text-align: center;
-              font-weight: 500;
-              font-size: 2rem;
-              color: #3D3D3D;
+              .txt1 {
+                font-size: 1rem;
+                color: #1d252f;
+                line-height: 1.58rem;
+                z-index: 1;
+              }
+
+              img {
+                position: absolute;
+                right: 1.75rem;
+                top: 1.42rem;
+                width: 3.5rem;
+                height: 3.5rem;
+                z-index: 0;
+              }
             }
           }
         }
-      }
-    }
 
-  }
-
-  .bot_box {
-    margin-bottom: 2rem;
-    padding: 1.08rem;
-    margin-top: 1.33rem;
-    width: 100%;
-    height: 12.42rem;
-    background: #FFFFFF;
-    border-radius: 0rem 0rem 0rem 0rem;
-
-    .tit {
-      width: 100%;
-      font-weight: 500;
-      font-size: 1.33rem;
-      color: #1D252F;
-    }
-
-    .cont_box {
-      width: 100%;
-      height: 5.67rem;
-
-      .cont_li {
-        width: 16.6%;
-        height: 5.67rem;
-        border-right: 1px solid #D8D8D8;
-
-        .cont_li_top {
-          width: 100%;
-          display: flex;
-          flex-wrap: nowrap;
-          justify-content: center;
-          align-items: center;
-
-          img {
-            margin-right: 0.83rem;
-            width: 1.29rem;
-            height: 1.13rem;
-          }
-
-          font-weight: 700;
-          font-size: 1.33rem;
-          color: #3D3D3D;
-
-        }
-
-        .cont_li_bot {
+        .car_info_box {
           margin-top: 1.17rem;
+          padding: 0.75rem 1.67rem;
           width: 100%;
-          text-align: center;
-          font-weight: 500;
-          font-size: 1.67rem;
-          color: #3D3D3D;
-        }
+          height: 20.25rem;
+          background: #ffffff;
+          border-radius: 0rem 0rem 0rem 0rem;
 
+          .tit {
+            font-weight: 500;
+            font-size: 1.33rem;
+            color: #1d252f;
+          }
+
+          .info_li {
+            margin-top: 1.25rem;
+            display: flex;
+            flex-wrap: nowrap;
+            width: 100%;
+            height: 40%;
+            .info_cont {
+              width: 33%;
+
+              .info_cont_top {
+                img {
+                  width: 1.33rem;
+                  height: 1.33rem;
+                  margin-right: 0.58rem;
+                  z-index: -1;
+                }
+
+                display: flex;
+                flex-wrap: nowrap;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                font-weight: 500;
+                font-size: 1rem;
+                color: #757575;
+              }
+
+              .info_cont_txt {
+                margin-top: 0.33rem;
+                width: 100%;
+                text-align: center;
+                font-weight: 500;
+                font-size: 2rem;
+                color: #3d3d3d;
+              }
+            }
+          }
+        }
       }
     }
-  }
 
-  .info_li {
-    display: flex;
-    flex-wrap: nowrap;
-    // justify-content: space-between;
-    height: 10.42rem;
-   width: 100%;
-   .card2 {
-  margin-right: 1%;
-  padding: 1.42rem 1.75rem 1.33rem;
-  position: relative;
-  width: 20%;
-  height: 10.42rem;
-  background: #fff;
-  border-radius: 0rem 0rem 0rem 0rem;
-
-  .txt, .num, .txt1 {
-    font-weight: 500;
-    position: relative; // 确保文字相对于父容器定位
-    z-index: 10; // 确保文字在图片上方
-    color: #1D252F;
-  }
-
-  .txt {
-    font-size: 1rem;
-  }
-
-  .num {
-    margin-top: 1.08rem;
-    margin-bottom: 0.44rem;
-    font-size: 1.5rem;
-  }
-
-  .txt1 {
-    font-size: 1rem;
-    line-height: 1.58rem;
-  }
-
-  img {
-    position: absolute;
-    right: 1.75rem;
-    top: 1.42rem;
-    width: 4.5rem;
-    height: 4.5rem;
-    z-index: 0; // 确保图片在文字下方
-  }
-}
-
-
-    .card1 {
-      margin-right: 1%;
-      padding: 1.42rem 1.75rem 1.33rem;
-      position: relative;
-      width: 20%;
-      height: 10.42rem;
-      background: linear-gradient(270deg, #60ADFD 0%, rgba(148, 198, 250, 0.5) 100%);
+    .bot_box {
+      margin-bottom: 2rem;
+      padding: 1.08rem;
+      margin-top: 1.33rem;
+      width: 100%;
+      height: 12.42rem;
+      background: #ffffff;
       border-radius: 0rem 0rem 0rem 0rem;
 
-      .txt {
+      .tit {
+        width: 100%;
         font-weight: 500;
         font-size: 1.33rem;
-        color: #FFFFFF;
+        color: #1d252f;
       }
 
-      .num {
-        margin-top: 1.08rem;
-        margin-bottom: 0.44rem;
-        font-weight: 500;
-        font-size: 2rem;
-        color: #FFFFFF;
-      }
+      .cont_box {
+        width: 100%;
+        height: 5.67rem;
 
-      .txt1 {
-        font-size: 1.17rem;
-        color: #FFFFFF;
-        line-height: 1.58rem;
-      }
+        .cont_li {
+          width: 16.6%;
+          height: 5.67rem;
+          border-right: 1px solid #d8d8d8;
 
-      img {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        width: 7rem;
-        height: 7.25rem;
+          .cont_li_top {
+            width: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              margin-right: 0.83rem;
+              width: 1.29rem;
+              height: 1.13rem;
+            }
+
+            font-weight: 700;
+            font-size: 1.33rem;
+            color: #3d3d3d;
+          }
+
+          .cont_li_bot {
+            margin-top: 1.17rem;
+            width: 100%;
+            text-align: center;
+            font-weight: 500;
+            font-size: 1.67rem;
+            color: #3d3d3d;
+          }
+        }
       }
     }
 
-  }
-  }
+    .info_li {
+      display: flex;
+      flex-wrap: nowrap;
+      // justify-content: space-between;
+      height: 10.42rem;
+      width: 100%;
+      .card2 {
+        margin-right: 1%;
+        padding: 1.42rem 1.75rem 1.33rem;
+        position: relative;
+        width: 20%;
+        height: 10.42rem;
+        background: #fff;
+        border-radius: 0rem 0rem 0rem 0rem;
 
+        .txt,
+        .num,
+        .txt1 {
+          font-weight: 500;
+          position: relative; // 确保文字相对于父容器定位
+          z-index: 10; // 确保文字在图片上方
+          color: #1d252f;
+        }
+
+        .txt {
+          font-size: 1rem;
+        }
+
+        .num {
+          margin-top: 1.08rem;
+          margin-bottom: 0.44rem;
+          font-size: 1.5rem;
+        }
+
+        .txt1 {
+          font-size: 1rem;
+          line-height: 1.58rem;
+        }
+
+        img {
+          position: absolute;
+          right: 1.25rem;
+          top: 1.42rem;
+          width: 3.5rem;
+          height: 3.5rem;
+          z-index: 0; // 确保图片在文字下方
+        }
+      }
+
+      .card1 {
+        margin-right: 1%;
+        padding: 1.42rem 1.75rem 1.33rem;
+        position: relative;
+        width: 20%;
+        height: 10.42rem;
+        background: linear-gradient(
+          270deg,
+          #60adfd 0%,
+          rgba(148, 198, 250, 0.5) 100%
+        );
+        border-radius: 0rem 0rem 0rem 0rem;
+
+        .txt {
+          font-weight: 500;
+          font-size: 1.33rem;
+          color: #ffffff;
+        }
+
+        .num {
+          margin-top: 1.08rem;
+          margin-bottom: 0.44rem;
+          font-weight: 500;
+          font-size: 2rem;
+          color: #ffffff;
+        }
+
+        .txt1 {
+          font-size: 1.17rem;
+          color: #ffffff;
+          line-height: 1.58rem;
+        }
+
+        img {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 7rem;
+          height: 7.25rem;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/system/area/areaRange.vue b/src/views/system/area/areaRange.vue
new file mode 100644
index 0000000..5de3229
--- /dev/null
+++ b/src/views/system/area/areaRange.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="page">
+    11111111
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang='scss'>
+.page{
+    margin-top: 200rpx;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
index 2aef0c5..841a8a0 100644
--- a/src/views/system/area/index.vue
+++ b/src/views/system/area/index.vue
@@ -95,6 +95,13 @@
             <span>去设置</span>
           </router-link>
         </template>
+      </el-table-column>
+       <el-table-column label="运营区区域范围设置" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <router-link :to="'/system/areaRange/index/'  + scope.row.areaId" class="link-type">
+          <span>去设置</span>
+          </router-link>
+        </template>
       </el-table-column>
       <el-table-column label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true" />
       <!--      <el-table-column label="联系人" align="center" prop="contact" />-->
diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue
index 5b8bbad..78f7df9 100644
--- a/src/views/system/device/index.vue
+++ b/src/views/system/device/index.vue
@@ -1,8 +1,21 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <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" filterable placeholder="选择运营商"  style="width: 120px;" clearable>
+        <el-select
+          v-model="queryParams.deptId"
+          filterable
+          placeholder="选择运营商"
+          style="width: 120px"
+          clearable
+        >
           <el-option
             v-for="item in deptOptions"
             :key="item.deptId"
@@ -12,7 +25,13 @@
         </el-select>
       </el-form-item>
       <el-form-item label="运营区" prop="areaId" v-if="userName == 'admin'">
-        <el-select v-model="queryParams.areaId" filterable placeholder="选择运营区"  style="width: 120px;" clearable>
+        <el-select
+          v-model="queryParams.areaId"
+          filterable
+          placeholder="选择运营区"
+          style="width: 120px"
+          clearable
+        >
           <el-option
             v-for="item in areaOptions"
             :key="item.areaId"
@@ -22,7 +41,8 @@
         </el-select>
       </el-form-item>
       <el-form-item label="MAC" prop="mac">
-        <el-input style="width: 120px"
+        <el-input
+          style="width: 120px"
           v-model="queryParams.mac"
           placeholder="请输入mac"
           clearable
@@ -30,7 +50,8 @@
         />
       </el-form-item>
       <el-form-item label="SN号" prop="sn">
-        <el-input style="width: 120px"
+        <el-input
+          style="width: 120px"
           v-model="queryParams.sn"
           placeholder="请输入SN号"
           clearable
@@ -38,7 +59,8 @@
         />
       </el-form-item>
       <el-form-item label="车牌号" prop="vehicleNum">
-        <el-input style="width: 120px"
+        <el-input
+          style="width: 120px"
           v-model="queryParams.vehicleNum"
           placeholder="请输入车牌号"
           clearable
@@ -46,7 +68,8 @@
         />
       </el-form-item>
       <el-form-item label="硬件版本" prop="hardwareVersion">
-        <el-input style="width: 120px"
+        <el-input
+          style="width: 120px"
           v-model="queryParams.hardwareVersion"
           placeholder="请输入硬件版本"
           clearable
@@ -54,7 +77,8 @@
         />
       </el-form-item>
       <el-form-item label="软件版本" prop="version">
-        <el-input style="width: 120px"
+        <el-input
+          style="width: 120px"
           v-model="queryParams.version"
           placeholder="请输入软件版本"
           clearable
@@ -62,7 +86,12 @@
         />
       </el-form-item>
       <el-form-item label="在线状态" prop="onlineStatus">
-        <el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态"  style="width: 100px;" 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"
@@ -72,7 +101,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态"  style="width: 100px;" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          style="width: 100px"
+          clearable
+        >
           <el-option
             v-for="dict in statusOptions"
             :key="dict.dictValue"
@@ -82,7 +116,12 @@
         </el-select>
       </el-form-item>
       <el-form-item label="锁状态" prop="status">
-        <el-select v-model="queryParams.lockStatus" placeholder="请选择锁状态"  style="width: 100px;" 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"
@@ -92,8 +131,16 @@
         </el-select>
       </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-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>
 
@@ -106,7 +153,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:device:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -117,7 +165,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:device:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -128,7 +177,8 @@
           :disabled="multiple"
           @click="oneClickOnline"
           v-hasPermi="['system:device:edit']"
-        >一键解禁</el-button>
+          >一键解禁</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -139,7 +189,8 @@
           :disabled="multiple"
           @click="oneClickOffline"
           v-hasPermi="['system:device:edit']"
-        >一键禁用</el-button>
+          >一键禁用</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -150,7 +201,8 @@
           :disabled="multiple"
           @click="oneClickListing"
           v-hasPermi="['system:device:edit']"
-        >一键出仓</el-button>
+          >一键出仓</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -161,7 +213,8 @@
           :disabled="multiple"
           @click="oneClickWarehousing"
           v-hasPermi="['system:device:edit']"
-        >一键入仓</el-button>
+          >一键入仓</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -172,7 +225,8 @@
           :disabled="multiple"
           @click="refresh"
           v-hasPermi="['system:device:edit']"
-        >更新</el-button>
+          >更新</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -183,7 +237,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:device:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -193,161 +248,309 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:device:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+        :columns="columns"
+      ></right-toolbar>
     </el-row>
 
-    <el-table ref="tableSort" v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange"  :default-sort="defaultSort"
-              @sort-change="handleSortChange"
-            class="el-table">
+    <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' && 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">
+      <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>
+          <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">
+      <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>
+          <span>{{
+            parseTime(scope.row.lastLocationTime, "{y}-{m}-{d} {h}:{i}:{s}")
+          }}</span>
         </template>
       </el-table-column>
-      <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">
+      <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"/>
+          <dict-tag
+            :options="dict.type.as_device_status"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="锁" align="center" prop="status" width="60" v-if="columns[14].visible">
+      <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"/>
+          <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" width="60" v-if="columns[15].visible">
+      <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"/>
+          <dict-tag
+            :options="dict.type.as_online_status"
+            :value="scope.row.onlineStatus"
+          />
         </template>
       </el-table-column>
       <el-table-column label="二维码" align="center" v-if="columns[16].visible">
         <template slot-scope="d">
-          <el-popover
-            placement="top"
-            width="180"
-            trigger="hover">
+          <el-popover placement="top" width="180" trigger="hover">
             <div class="qr-code-box">
               <qr-code :text="d.row.qrText" :width="150" :height="150" />
             </div>
-            <el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
+            <el-button slot="reference" type="text" icon="el-icon-picture"
+              >查看</el-button
+            >
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[17].visible">
+      <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>
+          <span>{{
+            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
+          }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="320" 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"
-             type="text"
-             icon="el-icon-view"
-             @click="handleView(scope.row)"
-             v-hasPermi="['system:fault:query']"
-          >详情</el-button>
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            v-hasPermi="['system:fault:query']"
+            >详情</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:device:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-upload"
             @click="handleListing(scope.row)"
             v-hasPermi="['system:fault:edit']"
-          >{{ scope.row.status === '0' ? '出仓' : '回仓' }}</el-button>
-          <el-button v-if="scope.row.status!= '3'"
+            >{{ scope.row.status === "0" ? "出仓" : "回仓" }}</el-button
+          >
+          <el-button
+            v-if="scope.row.status != '3'"
             size="mini"
             type="text"
             icon="el-icon-unlock"
             @click="handleUnlocking(scope.row)"
             v-hasPermi="['system:device:unlocking']"
-          >开锁</el-button>
+            >开锁</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-lock"
             @click="handleLock(scope.row)"
             v-hasPermi="['system:device:unlocking']"
-          >关锁</el-button>
-          <el-button v-if="scope.row.status!= '0'"
+            >关锁</el-button
+          >
+          <el-button
+            v-if="scope.row.status != '0'"
             size="mini"
             type="text"
             icon="el-icon-check"
             @click="handleOnline(scope.row)"
             v-hasPermi="['system:device:online']"
-          >{{ scope.row.status === '8' ? '解禁' : '禁用' }}</el-button>
+            >{{ scope.row.status === "8" ? "解禁" : "禁用" }}</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-bell"
             @click="ring(scope.row)"
             v-hasPermi="['system:device:ring']"
-          >响铃</el-button>
+            >响铃</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-unlock"
             @click="seatCushionLock(scope.row)"
             v-hasPermi="['system:device:ring']"
-          >坐垫锁</el-button>
+            >坐垫锁</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-document"
             @click="toLog(scope.row)"
             v-hasPermi="['system:device:log']"
-          >日志</el-button>
+            >日志</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-refresh"
             @click="reboot(scope.row)"
             v-hasPermi="['system:device:reboot']"
-          >重启</el-button>
+            >重启</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
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:device:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -355,16 +558,29 @@
     />
 
     <!-- 添加或修改设备对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="1000px"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-col :span="8">
           <el-form-item label="MAC" prop="mac">
-            <el-input v-model="form.mac" placeholder="请输入设备MAC" :disabled="title=='修改设备'" />
+            <el-input
+              v-model="form.mac"
+              placeholder="请输入设备MAC"
+              :disabled="title == '修改设备'"
+            />
           </el-form-item>
         </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">
@@ -374,7 +590,11 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="运营商" prop="operator">
-            <el-select v-model="form.deptId" clearable placeholder="请选择运营商">
+            <el-select
+              v-model="form.deptId"
+              clearable
+              placeholder="请选择运营商"
+            >
               <el-option
                 v-for="item in deptOptions"
                 :key="item.deptId"
@@ -385,8 +605,12 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="运营区" prop="areaId" >
-            <el-select v-model="form.areaId" clearable placeholder="请选择运营区">
+          <el-form-item label="运营区" prop="areaId">
+            <el-select
+              v-model="form.areaId"
+              clearable
+              placeholder="请选择运营区"
+            >
               <el-option
                 v-for="item in areaOptions"
                 :key="item.areaId"
@@ -397,8 +621,12 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="车辆型号" prop="modelId" >
-            <el-select v-model="form.modelId" clearable placeholder="请选择车辆型号">
+          <el-form-item label="车辆型号" prop="modelId">
+            <el-select
+              v-model="form.modelId"
+              clearable
+              placeholder="请选择车辆型号"
+            >
               <el-option
                 v-for="item in modelOptions"
                 :key="item.modelId"
@@ -414,8 +642,17 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="硬件版本" prop="deviceName" v-if="hardwareVersionOptions.length > 0">
-            <el-select v-model="form.hardwareVersionId" clearable placeholder="请选择硬件版本" :disabled="userName != 'admin'">
+          <el-form-item
+            label="硬件版本"
+            prop="deviceName"
+            v-if="hardwareVersionOptions.length > 0"
+          >
+            <el-select
+              v-model="form.hardwareVersionId"
+              clearable
+              placeholder="请选择硬件版本"
+              :disabled="userName != 'admin'"
+            >
               <el-option
                 v-for="item in hardwareVersionOptions"
                 :key="item.id"
@@ -425,33 +662,49 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <div v-if="title=='修改设备'">
+        <div v-if="title == '修改设备'">
           <el-col :span="8">
             <el-form-item label="剩余电量" prop="remainingPower">
-              <el-input v-model="form.remainingPower" placeholder="请输入剩余电量" disabled/>
+              <el-input
+                v-model="form.remainingPower"
+                placeholder="请输入剩余电量"
+                disabled
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="电压" prop="voltage">
-              <el-input v-model="form.voltage" placeholder="请输入剩余电量" disabled/>
+              <el-input
+                v-model="form.voltage"
+                placeholder="请输入剩余电量"
+                disabled
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="经度" prop="longitude">
-              <el-input v-model="form.longitude" placeholder="请输入经度" disabled/>
+              <el-input
+                v-model="form.longitude"
+                placeholder="请输入经度"
+                disabled
+              />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="纬度" prop="latitude">
-              <el-input v-model="form.latitude" placeholder="请输入纬度" disabled/>
+              <el-input
+                v-model="form.latitude"
+                placeholder="请输入纬度"
+                disabled
+              />
             </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>
+            <span style="color: red; font-weight: 600">
+              {{ versionDescription }}
+            </span>
           </el-form-item>
         </el-col>
       </el-form>
@@ -462,57 +715,104 @@
     </el-dialog>
 
     <!-- 设备详情对话框 -->
-    <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-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="车辆状态：" style="color: #12d2ac;font-weight: 700">{{ form.statusStr }}</el-form-item>
+            <el-form-item
+              label="车辆状态："
+              style="color: #12d2ac; font-weight: 700"
+              >{{ form.statusStr }}</el-form-item
+            >
           </el-col>
           <el-col :span="8">
-            <el-form-item label="分区：" style="color:#4c97e7;font-weight: 700">{{ form.areaName }}</el-form-item>
-            <el-form-item label="剩余电量：" >{{ form.remainingPower }}%</el-form-item>
+            <el-form-item
+              label="分区："
+              style="color: #4c97e7; font-weight: 700"
+              >{{ form.areaName }}</el-form-item
+            >
+            <el-form-item label="剩余电量："
+              >{{ form.remainingPower }}%</el-form-item
+            >
           </el-col>
           <el-col :span="8">
             <el-form-item label="二维码：">
               <template>
-                  <el-popover
-                    placement="top"
-                    width="180"
-                    trigger="hover">
-                    <div class="qr-code-box">
-                      <qr-code :text="form.qrText" :width="150" :height="150" />
-                    </div>
-                    <el-button slot="reference" type="text" icon="el-icon-picture">查看</el-button>
-                  </el-popover>
+                <el-popover placement="top" width="180" trigger="hover">
+                  <div class="qr-code-box">
+                    <qr-code :text="form.qrText" :width="150" :height="150" />
+                  </div>
+                  <el-button slot="reference" type="text" icon="el-icon-picture"
+                    >查看</el-button
+                  >
+                </el-popover>
               </template>
             </el-form-item>
-            <el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线' }}</el-form-item>
+            <el-form-item
+              label="网络状态："
+              style="color: #ffcc00; font-weight: 700"
+              >{{ form.onlineStatus == 1 ? "在线" : "离线" }}</el-form-item
+            >
           </el-col>
         </el-row>
         <el-row>
-          <h2 style="font-weight: bold;font-size: 18px;padding: 0;margin: 0">定位更新</h2>
+          <h2 style="font-weight: bold; font-size: 18px; padding: 0; margin: 0">
+            定位更新1
+          </h2>
           <el-col :span="6">
             <el-form-item label="经度：">{{ form.longitude }}</el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="纬度：">{{ form.latitude }}</el-form-item>
           </el-col>
-          <el-col :span="8" >
-            <el-form-item label="最后更新时间：" label-width="120">{{ form.lastLocationTime }}</el-form-item>
+          <el-col :span="8">
+            <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">
-              当前无gps信号
-            </span>
+            <span style="color: red; font-weight: 700"> 当前无gps信号 </span>
           </el-col>
           <el-col :span="24">
-            <el-row v-if="selected != null" style="margin-bottom: 0.5em" >
-              当前选择： {{selected.address}}, {{selected.lng}}, {{selected.lat}}
+            <el-row v-if="selected != null" style="margin-bottom: 0.5em">
+              当前选择： {{ selected.address }}, {{ selected.lng }},
+              {{ selected.lat }}
             </el-row>
+
+            <el-row style="margin-bottom: 0.5em">
+              开始时间
+              <el-date-picker
+                v-model="startTime"
+                type="datetime"
+                placeholder="选择日期时间"
+                format="yyyy-MM-dd HH:mm"
+                @change="startTimecg"
+              >
+              </el-date-picker>
+              结束时间
+              <el-date-picker
+                v-model="endTime"
+                type="datetime"
+                placeholder="选择日期时间"
+                format="yyyy-MM-dd HH:mm"
+                @change="endTimecg"
+              >
+              </el-date-picker>
+            </el-row>
+            <!-- <el-row style="margin-bottom: 0.5em">
+            
+            </el-row> -->
             <location-map
-              v-if="showPlaceSearchMap"
+              v-if="showPlaceSearchMap&&tripRouteStr!=''"
               ref="map"
               height="400px"
               :key="key"
@@ -524,23 +824,41 @@
               :online-status="form.onlineStatus"
               :device-sn="form.sn"
               :areaId="form.areaId"
+              :trip-route-str="tripRouteStr"
             />
           </el-col>
         </el-row>
         <el-row>
           <div class="nav-container">
-            <el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal" @select="handleSelect">
-              <el-menu-item index="1" >使用记录</el-menu-item>
-              <el-menu-item index="2" >维修记录</el-menu-item>
-              <el-menu-item index="3" >换电记录</el-menu-item>
+            <el-menu
+              :default-active="activeIndex"
+              class="el-menu-demo nav-menu"
+              mode="horizontal"
+              @select="handleSelect"
+            >
+              <el-menu-item index="1">使用记录</el-menu-item>
+              <el-menu-item index="2">维修记录</el-menu-item>
+              <el-menu-item index="3">换电记录</el-menu-item>
             </el-menu>
             <div class="line"></div>
           </div>
         </el-row>
         <el-row>
-          <order-record v-if="activeIndex == '1'" :key="orderRecordKey" :sn="form.sn"/>
-          <repair-record v-if="activeIndex == '2'" :key="repairRecordKey" :sn="form.sn"/>
-          <replacement-record v-if="activeIndex == '3'" :key="replacementRecordKey" :sn="form.sn"/>
+          <order-record
+            v-if="activeIndex == '1'"
+            :key="orderRecordKey"
+            :sn="form.sn"
+          />
+          <repair-record
+            v-if="activeIndex == '2'"
+            :key="repairRecordKey"
+            :sn="form.sn"
+          />
+          <replacement-record
+            v-if="activeIndex == '3'"
+            :key="replacementRecordKey"
+            :sn="form.sn"
+          />
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -551,55 +869,73 @@
 </template>
 
 <script>
-  import {
-    listDevice,
-    getDevice,
-    delDevice,
-    addDevice,
-    updateDevice,
-    handleLock,
-    handleUnlocking,
-    ring,
-    oneClickOnline,
-    oneClickOffline,
-    reboot,
-    oneClickListing,
-    oneClickWarehousing,
-    seatCushionLock, refreshDevice
-  } from '@/api/system/device'
+import {
+  listDevice,
+  getDevice,
+  delDevice,
+  addDevice,
+  updateDevice,
+  handleLock,
+  handleUnlocking,
+  ring,
+  oneClickOnline,
+  oneClickOffline,
+  reboot,
+  oneClickListing,
+  oneClickWarehousing,
+  seatCushionLock,
+  refreshDevice,
+  gettrajectory,
+} from "@/api/system/device";
 import Map from "@/components/Map";
 import OrderRecord from "@/views/system/device/components/orderRecord.vue";
 import RepairRecord from "@/views/system/device/components/repairRecord.vue";
 import ReplacementRecord from "@/views/system/device/components/replacementRecord.vue";
-import PlaceSearchDialog from '@/components/Map/location/PlaceSearchDialog';
-import { parseTime } from '../../../utils/ruoyi';
-import LocationMap from '@/components/Map/location/LocationMap.vue';
-import { getModel, listModel } from '@/api/system/model'
+import PlaceSearchDialog from "@/components/Map/location/PlaceSearchDialog";
+import { parseTime } from "../../../utils/ruoyi";
+import LocationMap from "@/components/Map/location/LocationMaps.vue";
+import { getModel, listModel } from "@/api/system/model";
 import QrCode from "@/components/QrCode/index.vue";
-  import { listArea, selectAreaListByDeptId, selectDeptByAreaId } from '@/api/system/area'
-  import {  listDept2 } from '@/api/system/dept'
-  import { getHardwareVersion, listHardwareVersion } from '@/api/system/hardwareVersion'
-import Treeselect from '@riophae/vue-treeselect'
+import {
+  listArea,
+  selectAreaListByDeptId,
+  selectDeptByAreaId,
+} from "@/api/system/area";
+import { listDept2 } from "@/api/system/dept";
+import {
+  getHardwareVersion,
+  listHardwareVersion,
+} from "@/api/system/hardwareVersion";
+import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Device",
-  dicts: ['as_online_status', 'as_device_status','et_device_lock_status'],
-  components: { Map, OrderRecord, RepairRecord, ReplacementRecord, QrCode, PlaceSearchDialog, LocationMap,Treeselect },
+  dicts: ["as_online_status", "as_device_status", "et_device_lock_status"],
+  components: {
+    Map,
+    OrderRecord,
+    RepairRecord,
+    ReplacementRecord,
+    QrCode,
+    PlaceSearchDialog,
+    LocationMap,
+    Treeselect,
+  },
   props: {
     initLng: {
       type: Number,
-      default: 120.356031
+      default: 120.356031,
     },
     initLat: {
       type: Number,
-      default: 26.94088
+      default: 26.94088,
     },
   },
   data() {
     return {
       userName: undefined,
-      activeIndex: '1',
+      activeIndex: "1",
       // 遮罩层
       loading: true,
       loading2: true,
@@ -609,7 +945,7 @@ export default {
       key: 0,
       // 非单个禁用
       single: true,
-      versionDescription: '',
+      versionDescription: "",
       // 非多个禁用
       multiple: true,
       statusOptions: [],
@@ -618,7 +954,7 @@ export default {
       // 总条数
       total: 0,
       // 默认排序
-      defaultSort: {prop: 'sn', order: 'ascending'},
+      defaultSort: { prop: "sn", order: "ascending" },
       // 设备表格数据
       deviceList: [],
       // 弹出层标题
@@ -634,7 +970,7 @@ export default {
       areaOptions: [],
       // 通过key重新渲染area-map组件
       // key: 0,
-      orderRecordKey: 0,  // 初始值
+      orderRecordKey: 0, // 初始值
       repairRecordKey: 0,
       replacementRecordKey: 0,
       // 查询参数
@@ -675,49 +1011,49 @@ export default {
       selected: null,
       // 表单参数
       form: {},
+      startTime: "2024-08-20 20:22",
+      endTime: "2024-08-22 16:00",
       // 表单校验
       rules: {
         // modelId: [
         //   { required: true, message: "型号不能为空", trigger: "blur" }
         // ],
-        sn: [
-          { required: true, message: "SN不能为空", trigger: "blur" }
-        ],
-        mac: [
-          { required: true, message: "MAC不能为空", trigger: "blur" }
-        ],
-      }
+        sn: [{ required: true, message: "SN不能为空", trigger: "blur" }],
+        mac: [{ required: true, message: "MAC不能为空", trigger: "blur" }],
+      },
     };
   },
-  mounted() { //添加监听滚动条事件
-    window.addEventListener('scroll', this.handleScroll, true)
+  mounted() {
+    //添加监听滚动条事件
+    window.addEventListener("scroll", this.handleScroll, true);
   },
-  destroyed() { //移除（跳转页面后移除）
-    window.removeEventListener('scroll', this.handleScroll, true)
+  destroyed() {
+    //移除（跳转页面后移除）
+    window.removeEventListener("scroll", this.handleScroll, true);
   },
   created() {
-    listHardwareVersion(this.queryParams).then(response => {
+    listHardwareVersion(this.queryParams).then((response) => {
       this.hardwareVersionOptions = response.rows;
       this.loading2 = false;
     });
-    console.log("当前用户信息：",this.$store.state.user.name)
+    console.log("当前用户信息：", this.$store.state.user.name);
     const sn = this.$route.params && this.$route.params.sn;
     const vehicleNum = this.$route.params && this.$route.params.vehicleNum;
-    console.log("sn------",sn)
-    console.log("vehicleNum------",vehicleNum)
-    this.$eventBus.$on('close-all-dialogs', this.closeDialog);
+    console.log("sn------", sn);
+    console.log("vehicleNum------", vehicleNum);
+    this.$eventBus.$on("close-all-dialogs", this.closeDialog);
     if (sn != null) {
       this.queryParams.sn = sn;
     }
     if (vehicleNum != null) {
       this.queryParams.vehicleNum = vehicleNum;
     }
-    this.getDicts("as_device_status").then(response => {
+    this.getDicts("as_device_status").then((response) => {
       // console.log("response.data------",response.data)
       let options = response.data;
-      let mergedObj = { dictValue: '34', dictLabel: '使用中' };
-      options = options.filter(option => {
-        return option.dictValue !== '3' && option.dictValue !== '4';
+      let mergedObj = { dictValue: "34", dictLabel: "使用中" };
+      options = options.filter((option) => {
+        return option.dictValue !== "3" && option.dictValue !== "4";
       });
       options.splice(4, 0, mergedObj);
       this.statusOptions = options;
@@ -725,77 +1061,94 @@ export default {
     });
     this.userName = this.$store.state.user.name;
     this.getList();
-    if(this.userName === 'admin'){
-      listDept2({status: '0',pageNum:1,pageSize:999  }).then(response => {
+    if (this.userName === "admin") {
+      listDept2({ status: "0", pageNum: 1, pageSize: 999 }).then((response) => {
         this.deptOptions = response.rows;
       });
-      listArea(this.queryParams).then(response => {
+      listArea(this.queryParams).then((response) => {
         this.areaOptions = response.rows;
       });
     }
   },
   watch: {
-    'form.modelId': function(newVal) {
+    "form.modelId": function (newVal) {
       this.fetchData(newVal);
     },
-    'form.deptId': function(newVal) {
+    "form.deptId": function (newVal) {
       this.fetchData2(newVal);
     },
-    'form.areaId': function(newVal) {
+    "form.areaId": function (newVal) {
       this.fetchData3(newVal);
     },
-    'form.hardwareVersionId': function(hardwareVersionId) {
-      if(hardwareVersionId){
+    "form.hardwareVersionId": function (hardwareVersionId) {
+      if (hardwareVersionId) {
         this.selectHardwareVersion(hardwareVersionId);
       }
     },
     open2(val) {
       if (!val) {
-        console.log("========关闭地图=============")
+        console.log("========关闭地图=============");
         this.showPlaceSearchMap = false; // 关闭地图
       } else {
-        console.log("========打开地图=============")
+        console.log("========打开地图=============");
         this.showPlaceSearchMap = true; // 打开地图
       }
-    }
+    },
+    
   },
   beforeDestroy() {
-    this.$eventBus.$off('close-all-dialogs', this.closeDialog);
+    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');
-      // console.log("scrollTop------",scrollTop)
-      // console.log("heightTop------",heightTop)
-      if (scrollTop >= (heightTop+ 160)) { // 表头到达页面顶部固定表头
-        let top = scrollTop - (heightTop + 160);
-        // console.log("top------",top)
-        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 = '';
+    startTimecg(value) {
+      console.log("start变化", value);
+      if(this.startTime!=''&&this.endTime!=''){
+          this.gettj()
       }
     },
-    formatVersion(versionId){
+    endTimecg(value) {
+      console.log("start变化", value);
+      if(this.startTime!=''&&this.endTime!=''){
+        this.gettj()
+      }
+    },
+    handleScroll() {
+      let scrollTop = window.scrollY;
+      let heightTop = this.$refs["tableSort"].$parent.$parent.$el.offsetTop; // 距离顶部高度
+      const headerWrapper = document.querySelector(".el-table__header-wrapper");
+      // console.log("scrollTop------",scrollTop)
+      // console.log("heightTop------",heightTop)
+      if (scrollTop >= heightTop + 160) {
+        // 表头到达页面顶部固定表头
+        let top = scrollTop - (heightTop + 160);
+        // console.log("top------",top)
+        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 && this.hardwareVersionOptions.length > 0) {
-        const versionItem = this.hardwareVersionOptions.find(item => item.id === versionId);
+        const versionItem = this.hardwareVersionOptions.find(
+          (item) => item.id === versionId
+        );
         if (versionItem) {
           return versionItem.version;
         }
       }
       return "";
     },
-    selectHardwareVersion(hardwareVersionId){
-      getHardwareVersion(hardwareVersionId).then(response => {
-        this.versionDescription =response.data.instructions;
+    selectHardwareVersion(hardwareVersionId) {
+      getHardwareVersion(hardwareVersionId).then((response) => {
+        this.versionDescription = response.data.instructions;
       });
     },
     closeDialog() {
@@ -803,35 +1156,41 @@ export default {
     },
     /** 当选择车型时调用 */
     fetchData(modelId) {
-      if(modelId){
-        getModel(modelId).then(response => {
+      if (modelId) {
+        getModel(modelId).then((response) => {
           // console.log("根据车型id查询运营商=========",response.data)
           this.areaOptions = response.data.areaList;
           let areaOptions = response.data.areaList;
-          if(response.data.operator){
+          if (response.data.operator) {
             this.form.deptId = response.data.operator;
-          }else{
+          } else {
             this.form.deptId = null;
           }
-          areaOptions.length > 0 ? this.form.areaId = areaOptions[0].areaId : this.form.areaId = null;
+          areaOptions.length > 0
+            ? (this.form.areaId = areaOptions[0].areaId)
+            : (this.form.areaId = null);
         });
-      }else{
+      } else {
         this.reset2();
       }
     },
     /** 当选择运营商时  根据运营商id，获取运营区和型号 */
     fetchData2(deptId) {
-      if(deptId){
-        selectAreaListByDeptId(deptId).then(response => {
-          console.log("根据运营商id，获取运营区和型号=========",response.data)
+      if (deptId) {
+        selectAreaListByDeptId(deptId).then((response) => {
+          console.log("根据运营商id，获取运营区和型号=========", response.data);
           this.areaOptions = response.data.areaList;
           let areaOptions = response.data.areaList;
-          areaOptions.length > 0 ? this.form.areaId = areaOptions[0].areaId : this.form.areaId = null;
+          areaOptions.length > 0
+            ? (this.form.areaId = areaOptions[0].areaId)
+            : (this.form.areaId = null);
           this.modelOptions = response.data.modelList;
           let modelOptions = response.data.modelList;
-          modelOptions.length > 0 ? this.form.modelId = modelOptions[0].modelId : this.form.modelId = null;
+          modelOptions.length > 0
+            ? (this.form.modelId = modelOptions[0].modelId)
+            : (this.form.modelId = null);
         });
-      }else{
+      } else {
         this.reset2();
         // this.form.areaId = null;
         // this.form.modelId = null;
@@ -839,18 +1198,20 @@ export default {
     },
     /** 当选择运营区时  根据运营区id，获取运营商和型号 */
     fetchData3(areaId) {
-      if(areaId){
-        selectDeptByAreaId(areaId).then(response => {
-          console.log("根据运营商id，获取运营区和型号=========",response.data)
+      if (areaId) {
+        selectDeptByAreaId(areaId).then((response) => {
+          console.log("根据运营商id，获取运营区和型号=========", response.data);
           this.form.deptId = response.data.sysDept.deptId;
-            // this.areaOptions = response.data.areaList;
+          // this.areaOptions = response.data.areaList;
           // let areaOptions = response.data.areaList;
           // areaOptions.length > 0 ? this.form.areaId = areaOptions[0].areaId : this.form.areaId = null;
           this.modelOptions = response.data.modelList;
           let modelOptions = response.data.modelList;
-          modelOptions.length > 0 ? this.form.modelId = modelOptions[0].modelId : this.form.modelId = null;
+          modelOptions.length > 0
+            ? (this.form.modelId = modelOptions[0].modelId)
+            : (this.form.modelId = null);
         });
-      }else{
+      } else {
         this.reset2();
       }
     },
@@ -860,89 +1221,110 @@ export default {
       this.queryParams.isAsc = column.order;
       this.getList();
     },
-    formatVoltage(row){
-      if(row == undefined || row.voltage == null){
+    formatVoltage(row) {
+      if (row == undefined || row.voltage == null) {
         return "";
       }
-      return row.voltage + 'V';
+      return row.voltage + "V";
     },
-    formatPower(row){
-      if(row == undefined || row.remainingPower == null){
+    formatPower(row) {
+      if (row == undefined || row.remainingPower == null) {
         return "";
       }
-      return row.remainingPower + '%';
+      return row.remainingPower + "%";
     },
-    oneClickOnline(row){
+    oneClickOnline(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键解禁？').then(function() {
-        return oneClickOnline(deviceIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm("确认一键解禁？")
+        .then(function () {
+          return oneClickOnline(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("操作成功");
+        })
+        .catch(() => {});
     },
-    oneClickOffline(row){
+    oneClickOffline(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键禁用？').then(function() {
-        return oneClickOffline(deviceIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm("确认一键禁用？")
+        .then(function () {
+          return oneClickOffline(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("操作成功");
+        })
+        .catch(() => {});
     },
     /** 一键出仓*/
-    oneClickListing(row){
+    oneClickListing(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键出仓？').then(function() {
-        return oneClickListing(deviceIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm("确认一键出仓？")
+        .then(function () {
+          return oneClickListing(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("操作成功");
+        })
+        .catch(() => {});
     },
     /** 更新*/
-    refresh(row){
+    refresh(row) {
       const deviceIds = row.deviceId || this.ids;
-      refreshDevice(deviceIds).then(response => {
+      refreshDevice(deviceIds).then((response) => {
         this.getList();
         this.$modal.msgSuccess("操作成功");
       });
     },
     /** 一键入仓*/
-    oneClickWarehousing(row){
+    oneClickWarehousing(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('确认一键入仓？').then(function() {
-        return oneClickWarehousing(deviceIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("操作成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm("确认一键入仓？")
+        .then(function () {
+          return oneClickWarehousing(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("操作成功");
+        })
+        .catch(() => {});
     },
     onMapGeo(data, lat, lng) {
-      console.log("onMapGeo", data)
+      console.log("onMapGeo", data);
       let component = data.regeocode.addressComponent;
       this.selected = {
         address: data.regeocode.formattedAddress,
         lng: lat,
         lat: lng,
         province: component.province,
-        city: component.city === '' ? '市辖区' : component.city,
+        city: component.city === "" ? "市辖区" : component.city,
         county: component.district,
-        name: component.street + component.streetNumber
-      }
+        name: component.street + component.streetNumber,
+      };
     },
     onSelectChange(addr) {
-      console.log("onSelectChange", addr)
+      console.log("onSelectChange", addr);
       let data = addr.selected.data;
       this.selected = {
-        address: data.pname + (data.cityname === data.pname ? '' : data.cityname) + data.adname + data.address + data.name,
+        address:
+          data.pname +
+          (data.cityname === data.pname ? "" : data.cityname) +
+          data.adname +
+          data.address +
+          data.name,
         lng: data.location.lng,
         lat: data.location.lat,
         province: data.pname,
-        city: data.cityname === data.pname ? '市辖区' : data.cityname,
+        city: data.cityname === data.pname ? "市辖区" : data.cityname,
         county: data.adname,
         name: data.address + data.name,
-      }
+      };
     },
     parseTime,
     // onSubmitAddress(addr) {
@@ -959,20 +1341,20 @@ export default {
       console.log(key, keyPath);
 
       // 强制刷新所有组件
-      if (key === '1') {
+      if (key === "1") {
         this.orderRecordKey += 1;
       }
-      if (key === '2') {
+      if (key === "2") {
         this.repairRecordKey += 1;
       }
-      if (key === '3') {
+      if (key === "3") {
         this.replacementRecordKey += 1;
       }
     },
     /** 查询设备列表 */
     getList() {
       this.loading = true;
-      listDevice(this.queryParams).then(response => {
+      listDevice(this.queryParams).then((response) => {
         this.deviceList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -1009,35 +1391,40 @@ export default {
         remainingPower: null,
         qrcode: null,
         longitude: null,
-        latitude: null
+        latitude: null,
+        tripRouteStr: '',
       };
       this.resetForm("form");
-      if(this.userName === 'admin'){
-        listDept2({status: '0',pageNum:1,pageSize:999  }).then(response => {
-          this.deptOptions = response.rows;
-        });
+      if (this.userName === "admin") {
+        listDept2({ status: "0", pageNum: 1, pageSize: 999 }).then(
+          (response) => {
+            this.deptOptions = response.rows;
+          }
+        );
       }
-      listModel(this.queryParams).then(response => {
+      listModel(this.queryParams).then((response) => {
         this.modelOptions = response.rows;
       });
-      listArea(this.queryParams).then(response => {
+      listArea(this.queryParams).then((response) => {
         this.areaOptions = response.rows;
       });
     },
     reset2() {
-      console.log(11111)
+      console.log(11111);
       this.form.areaId = null;
       this.form.deptId = null;
       this.form.modelId = null;
-      if(this.userName === 'admin'){
-        listDept2({status: '0',pageNum:1,pageSize:999  }).then(response => {
-          this.deptOptions = response.rows;
-        });
+      if (this.userName === "admin") {
+        listDept2({ status: "0", pageNum: 1, pageSize: 999 }).then(
+          (response) => {
+            this.deptOptions = response.rows;
+          }
+        );
       }
-      listModel(this.queryParams).then(response => {
+      listModel(this.queryParams).then((response) => {
         this.modelOptions = response.rows;
       });
-      listArea(this.queryParams).then(response => {
+      listArea(this.queryParams).then((response) => {
         this.areaOptions = response.rows;
       });
     },
@@ -1053,9 +1440,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.deviceId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.deviceId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -1066,20 +1453,45 @@ export default {
     /** 详情按钮 */
     handleView(row) {
       this.open2 = true;
-      console.log("row======"+JSON.stringify(row))
+      console.log("row======" + JSON.stringify(row));
       this.form.areaId = row.areaId;
 
       this.form = row;
-      console.log(this.form,'this.formthis.formthis.form');
+      console.log(this.form, "this.formthis.formthis.form");
       this.showPlaceSearchMap = true;
       this.key++;
       this.orderRecordKey += 1;
+      this.gettj()
+    },
+    gettj() {
+      let data = {
+        sn: this.form.sn,
+        startTime: this.formatDate(this.startTime),
+        endTime: this.formatDate(this.endTime),
+      };
+      gettrajectory(data).then((response) => {
+        this.tripRouteStr = response.data;
+        // this.re
+        this.$refs.map.trajectory();
+       
+        // console.log(this.tripRouteStr,'this.tripRouteStr');
+      });
+    },
+    formatDate(dateStr) {
+      const date = new Date(dateStr);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以加1
+      const day = String(date.getDate()).padStart(2, "0");
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+
+      return `${year}-${month}-${day} ${hours}:${minutes}`;
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改设备";
@@ -1087,81 +1499,97 @@ export default {
     },
     handleListing(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         let form1 = response.data;
-        let text = form1.status === '0'? '出仓': '回仓';
-        form1.status = form1.status === '0'? '1': '0';
-        if(form1.areaId == null){
-          this.$modal.msgError("未绑定运营区，无法出仓！")
-        }else{
-          this.$modal.confirm('是否确认'+text+'设备MAC为"' + form1.mac + '"的设备吗？').then(function() {
-            return updateDevice(form1);
-          }).then(() => {
-            this.getList();
-            this.$modal.msgSuccess("操作成功");
-          }).catch(() => {
-          });
+        let text = form1.status === "0" ? "出仓" : "回仓";
+        form1.status = form1.status === "0" ? "1" : "0";
+        if (form1.areaId == null) {
+          this.$modal.msgError("未绑定运营区，无法出仓！");
+        } else {
+          this.$modal
+            .confirm(
+              "是否确认" + text + '设备MAC为"' + form1.mac + '"的设备吗？'
+            )
+            .then(function () {
+              return updateDevice(form1);
+            })
+            .then(() => {
+              this.getList();
+              this.$modal.msgSuccess("操作成功");
+            })
+            .catch(() => {});
         }
       });
     },
     handleOnline(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         let form1 = response.data;
-        let text = form1.status === '8'? '解禁': '禁用';
-        form1.status = form1.status === '8'? '1': '8';
-        if(form1.areaId == null){
-          this.$modal.msgError("未绑定运营区，无法解禁！")
-        }else{
-          this.$modal.confirm('是否确认'+text+'设备MAC为"' + form1.mac + '"的设备吗？').then(function() {
-            return updateDevice(form1);
-          }).then(() => {
-            this.getList();
-            this.$modal.msgSuccess("操作成功");
-          }).catch(() => {
-          });
+        let text = form1.status === "8" ? "解禁" : "禁用";
+        form1.status = form1.status === "8" ? "1" : "8";
+        if (form1.areaId == null) {
+          this.$modal.msgError("未绑定运营区，无法解禁！");
+        } else {
+          this.$modal
+            .confirm(
+              "是否确认" + text + '设备MAC为"' + form1.mac + '"的设备吗？'
+            )
+            .then(function () {
+              return updateDevice(form1);
+            })
+            .then(() => {
+              this.getList();
+              this.$modal.msgSuccess("操作成功");
+            })
+            .catch(() => {});
         }
       });
     },
     handleUnlocking(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         let form1 = response.data;
-        this.$modal.confirm('是否确认开锁吗？').then(function() {
-          return handleUnlocking(form1);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("操作成功");
-        }).catch(() => {
-        });
+        this.$modal
+          .confirm("是否确认开锁吗？")
+          .then(function () {
+            return handleUnlocking(form1);
+          })
+          .then(() => {
+            this.getList();
+            this.$modal.msgSuccess("操作成功");
+          })
+          .catch(() => {});
       });
     },
     handleLock(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         let form1 = response.data;
-        this.$modal.confirm('是否确认关锁吗？').then(function() {
-          return handleLock(form1);
-        }).then(() => {
-          this.getList();
-          this.$modal.msgSuccess("操作成功");
-        }).catch(() => {
-        });
+        this.$modal
+          .confirm("是否确认关锁吗？")
+          .then(function () {
+            return handleLock(form1);
+          })
+          .then(() => {
+            this.getList();
+            this.$modal.msgSuccess("操作成功");
+          })
+          .catch(() => {});
       });
     },
-    toLog(row){
+    toLog(row) {
       this.$router.push(`/system/commandLog/index/${row.sn}`);
     },
     ring(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         let form1 = response.data;
-        ring(form1).then(response => {
+        ring(form1).then((response) => {
           this.getList();
           this.$modal.msgSuccess("操作成功");
         });
@@ -1169,10 +1597,10 @@ export default {
     },
     seatCushionLock(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         let form1 = response.data;
-        seatCushionLock(form1).then(response => {
+        seatCushionLock(form1).then((response) => {
           this.getList();
           this.$modal.msgSuccess("操作成功");
         });
@@ -1180,10 +1608,10 @@ export default {
     },
     reboot(row) {
       this.reset();
-      const deviceId = row.deviceId || this.ids
-      getDevice(deviceId).then(response => {
+      const deviceId = row.deviceId || this.ids;
+      getDevice(deviceId).then((response) => {
         let form1 = response.data;
-        reboot(form1).then(response => {
+        reboot(form1).then((response) => {
           this.getList();
           this.$modal.msgSuccess("操作成功");
         });
@@ -1191,16 +1619,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.deviceId != null) {
-            updateDevice(this.form).then(response => {
+            updateDevice(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addDevice(this.form).then(response => {
+            addDevice(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -1212,50 +1640,63 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const deviceIds = row.deviceId || this.ids;
-      this.$modal.confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？').then(function() {
-        return delDevice(deviceIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除设备编号为"' + deviceIds + '"的数据项？')
+        .then(function () {
+          return delDevice(deviceIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/device/export', {
-        ...this.queryParams
-      }, `device_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "system/device/export",
+        {
+          ...this.queryParams,
+        },
+        `device_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>
 <style lang="scss">
-  .el-select {
-    .el-input__inner{
-      color: red;
-    }
+.el-select {
+  .el-input__inner {
+    color: red;
+  }
+}
 
+.el-input {
+  .el-input__inner {
+    color: red;
   }
-  .el-input{
-    .el-input__inner{
-      color: red;
-    }
-  }
-  .nav-container {
-    display: flex;
-    justify-content: center;
-  }
-  .nav-menu {
-    /* 如果需要清除默认样式 */
-    margin: 0;
-    padding: 0;
-  }
-  .el-dialog__body{
-    padding: 10px 20px;
-  }
-  .el-dialog:not(.is-fullscreen) {
-    margin-top: 1vh !important;
-  }
-  .el-dialog__header {
-    padding: 10px 20px !important;
-  }
+}
+
+.nav-container {
+  display: flex;
+  justify-content: center;
+}
+
+.nav-menu {
+  /* 如果需要清除默认样式 */
+  margin: 0;
+  padding: 0;
+}
+
+.el-dialog__body {
+  padding: 10px 20px;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 1vh !important;
+}
+
+.el-dialog__header {
+  padding: 10px 20px !important;
+}
 </style>