vue3百度地图电子地图--电子围栏实现，绘制覆盖物圆和多边形的范围，覆盖物的回显和编辑

        这篇文章主要讲的是vue3百度地图电子围栏的实现(我想发三篇有关百度地图的文章，第一是基础的地图使用，第二篇是电子轨迹回放，还有第三篇这一篇电子围栏)，一些基础的操作和百度地图展现什么的，看我发的第一篇文章。

         废话不多说，直接讲功能，根据坐标回显覆盖物、新增和编辑覆盖物，我只实现了圆和多边形的，算是够的了，原本想弄多个矩形覆盖物，但是想想多边形其实也包括了矩形，就不弄了。这边文章主要讲的是围栏的绘制什么的，涉及其他业务和功能什么的我就跳过了，你们根据我的代码把无关紧要的删掉就行，因为我直接把源码复制过来的，主要是拿到eleFenList接口，拿到坐标集合数据就可以，我会把整个代码和eleFenList接口返回到全部数据粘贴到下面。

        效果图和GIF图如下：

vue文件代码：

<template>
    <div class="container">
      <div class="sidebar commonBorder">
        <!-- 左侧搜索框 -->
        <div style="display: flex;justify-content: space-between;border-bottom: 1px solid #a8a8a8;padding-bottom: 10px;">
          <el-input style="width: 200px;"
            v-model="queryParams.condition"
            placeholder="请输入关键字搜索" clearable
          >
            <template #append>
              <el-button type="primary"  @click="_eleFenList">
                <el-icon><Search /></el-icon>
              </el-button>
            </template>
          </el-input>
            <el-icon style="color: white; font-size: 30px;font-weight: bold;cursor: pointer;" @click="addFenceVis"><Plus /></el-icon>
        </div>
        <div class="sideBox">
          <div v-for="(item, index) in FenLists" :key="item.id" :class="['item', { 'selected': selectedIndex === index }]" @click="handleItemClick(index)" v-if="sideVis==0">
            <div class="sTopBox">
              <div style="padding-top: 5px;">{{ item.name }}</div>
              <div style="display: flex;">
                    <el-switch
                        v-model="item.isEnable"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                        @change="isEnableSwitch(index,item.isEnable)"
                      ></el-switch>
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        <div class="pointer">
                          <el-icon  style="padding-top: 8px;"><MoreFilled /></el-icon>
                        </div>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item @click="editFence(index)">编辑</el-dropdown-item>
                          <el-dropdown-item  @click="checkWarn">查看警告</el-dropdown-item>
                          <el-dropdown-item @click="_delFence(item.id)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="sBottomBox">
              <div>{{ item.ruleType === 1 ? '禁止离开' : (item.ruleType === 2 ? '禁止进入' : '未设置') }}</div>
              <div>
                <div v-for="(timeSlot, idx) in item.geofencingTime" :key="idx">
                <div>{{ timeSlot.startTime }} - {{ timeSlot.endTime }}</div>
              </div>
            </div>
              
            </div>
          </div>
          <data v-if="sideVis==1">
            <div style="display: flex;justify-content: space-between;">
              <el-button size="small" @click="rebackSide">取消</el-button>
              <el-button size="small" type="primary" v-if="confirmVis==1" @click="addConfire" >确定</el-button>
              <el-button size="small" type="primary" v-if="confirmVis==2" @click="editConfire" >编辑确定</el-button>
            </div>
            <el-form label-width="90px" style="margin-top: 15px;"  label-position="left" status-icon>
              <el-form-item label="围栏名称" >
                <el-input v-model="formParam.name" style="width: 300px;" placeholder="请输入围栏姓名" clearable/>
              </el-form-item>
              <el-form-item label="围栏行为">
                <el-select v-model="formParam.ruleType" placeholder="请选择围栏行为">
                  <el-option label="未设置" :value="parseInt('0')"></el-option>
                  <el-option label="禁止离开" :value="parseInt('1')"></el-option>
                  <el-option label="禁止进入" :value="parseInt('2')"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="围栏类型">
                <el-select v-model="formParam.geoType" placeholder="请选择围栏类型" @change="selectGeoType()">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="描述">
                <el-input v-model="formParam.geoDesc" style="width: 300px;" placeholder="请输入描述内容"/>
              </el-form-item>
              <el-form-item label="使能">
                <el-switch
                        v-model="formParam.isEnable"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                      ></el-switch>
              </el-form-item>
              <el-form-item label="报警时间" style="width: 100%;">
                  <el-time-picker
                    v-model="alarmTimes"
                    is-range
                    value-format="HH:mm:ss" 
                    range-separator="-"
                    start-placeholder="开始"
                    end-placeholder="结束"
                    style="width: calc(100% - 50px);"
                  >
                </el-time-picker>
                  <el-icon style="color: #79bbff; font-size: 30px;font-weight: bold;cursor: pointer;" @click="addAlarmTime"><Plus /></el-icon>
              </el-form-item>
              
              <el-form-item v-for="(time, idx) in formParam.geofencingTime" :label="'生效时间段' + (idx + 1)" :key="idx" style="color:#fff;">
                <div style="display: flex;width: 100%">
                  <div style="width: calc(100% - 40px);" >{{ time.startTime }} - {{ time.endTime }}</div>
                  <el-link type="danger" @click="delAlarmTime(idx)" style="width: 30px;margin-left: 10px;" >删除</el-link>
                </div>
              </el-form-item>
            </el-form>
          </data>
        </div>
      </div>
      <div class="video-container commonBorder">
        <div style="width: 100%;height: 100%;position: relative;">
          
          <div class="mark" v-if="markVis">
              <div class="markText">请先选择围栏类型</div>
          </div>
          <div :class="bottomVis==0 ? 'mapBotton' : 'nomapBotton'">
            <el-button type="primary" v-if="bottomVis==1" @click="devMan()">设备管理</el-button>
            
            <div style="display: flex;margin-right: 12px;" v-if="formParam.geoType==1" >
              <el-button type="primary" @click="clearMarkersCircle()" v-if="bottomVis==2">圆形重新选择</el-button>
            </div>
            <div style="display: flex;margin-right: 12px;" v-if="formParam.geoType==2" >
              <el-button type="primary" @click="clearMarkers()" v-if="bottomVis==2">重新选择</el-button>
              <el-button type="primary" @click="newEcho()" v-if="bottomVis==2">构建围栏</el-button>
            </div>
              <el-button type="primary" v-if="bottomVis==2" @click="editStroke()">开始编辑</el-button>
              <el-button type="primary" v-if="bottomVis==2" @click="closeStroke()" >结束编辑</el-button>
          </div>
          <div :class="bottomVis==0 ? 'full' : 'nofull'">
              <div class="playback-controls">
                <div style="margin-right: 10px;">
                  <el-autocomplete popper-class="autoAddressClass" v-model="searchResults" :fetch-suggestions="searchLocation"
                    :trigger-on-focus="false" placeholder="请输入地址搜索" @select="handleSelect" clearable>
                    <template #default="{ item }">
                      <div class="autoAddressClass_item">
                        <ElIcon :size="20" color="balck">
                          <Search />
                        </ElIcon>
                        <div>
                          <div class="title">{{ item.title }}</div>
                          <span class="address ellipsis">{{ item.address }}</span>
                        </div>
                      </div>
                    </template>
                  </el-autocomplete>
                </div>
                <div v-if="formParam.geoType==1 && bottomVis==2">
                    <el-input
                        v-model="formParam.geoPosition.radius"
                        placeholder="请输入半径"
                        style="width: 200px;"
                        size="small"
                      >
                        <template #prepend style="width: 100px;">半径</template>
                        <template #append style="width: 100px;">米</template>
                    </el-input>
                </div>
              </div>
              <div class="bbox" id="map"></div>
          </div>
          
        </div>
      </div>
    </div>
    <!-- 查看警告 -->
    <!-- <el-drawer v-model="drawer" title="越区告警" :with-header="false">
      <CrosssWarningComponent ref="drawerChildRef" :dataProp="formParam" @changeValue="handleChangeValue" ></CrosssWarningComponent>
    </el-drawer> -->
    <!-- 设备绑定 -->
    <!-- <el-dialog  v-model="DeviceManagementVis" width="60%">
      <DeviceManagementComponent ref="dialogChildRef" :dataProp2="formParam"></DeviceManagementComponent>
    </el-dialog> -->
  </template>
  
  <script setup>
  import { onMounted, onBeforeUnmount, ref,watch,defineExpose,nextTick } from "vue";
  import { eleFenList,addFence,updateFence,delFence} from '@/utils/api.js'
  import { ElTree,ElMessage } from 'element-plus';
  import CrosssWarningComponent from './CrosssWarningComponent.vue';
  import DeviceManagementComponent from './DeviceManagementComponent.vue';

  onBeforeUnmount(() => {
  })
  onMounted(() => {
    _eleFenList()
    initMap()
  });
  
const bottomVis = ref(0)//地图上面按钮
const sideVis = ref(0)//列表和新增编辑的表单显示
const confirmVis = ref(1)//新增编辑的按钮显示
const drawer = ref(false)//查看警告抽屉
const DeviceManagementVis = ref(false)//设备管理弹出层
const markVis = ref(false)//设备管理弹出层
DeviceManagementVis
  const formParam = ref(
    {
      id:null,
      name: null,
      ruleType: null,//围栏规则，0：未设置；1：离开；2：进入
      geoType: 0,//围栏类型0：未设置；1：圆形；2：多边形
      geoDesc: null,//描述
      isEnable: 0,//使能，0：未使用；1：有效	
      geofencingTime: [],//时间段
      geoPosition:{
        radius:0,
        position:[]
      }
    }
  )
  //围栏列表列表
const FenLists = ref([])
const queryParams = ref({
  endTime: "",
  startTime: "",
  condition: "",
  condition2: "",
  condition3: "",
  pageNum: 1,
  pageSize: 1000
})
const selectedIndex = ref(null);
const _eleFenList = async() => {
  const data =  await eleFenList(queryParams.value)
  if(data.success==1){
    FenLists.value = data.data.records
    console.log(FenLists.value,'FenLists.value')
  }else{
    ElMessage.error(data.message ?? '数据获取异常');
  }
}
  
const editStroke = () => {
  polygon.value.enableEditing()
  if(formParam.value.geoType==1){
    polygon.value.addEventListener("lineupdate", getCircleDatas ); 
  }
  if(formParam.value.geoType==2){
    polygon.value.addEventListener("lineupdate", getPolygonDatas ); 
  }
}
const closeStroke = () => {
  polygon.value.disableEditing()
  map.value.removeEventListener("lineupdate", getCircleDatas);
  map.value.removeEventListener("lineupdate", getPolygonDatas);
}

const getCircleDatas = () => {//监听圆坐标值
        var center = polygon.value.getCenter(); // 获取圆心坐标
        var radius = polygon.value.getRadius(); // 获取圆的半径
        console.log("圆心坐标：" + center.lng + ", " + center.lat);
        console.log("圆的半径：" + radius);
        formParam.value.geoPosition.position=[{lng:center.lng,lat:center.lat}]
        formParam.value.geoPosition.radius=Math.round(polygon.value.getRadius())
  }

const getPolygonDatas = () => {//监听多边形坐标值
        var pointlist = polygon.value.getPath(); // 获取多边形坐标
        var pointArray = pointlist.map(function(point) {
            return { lng: point.lng, lat: point.lat };
        });
        console.log("多边形坐标: ", pointArray);
        formParam.value.geoPosition.position=pointArray
        formParam.value.geoPosition.radius=0
  }
const handleItemClick = (index) => {
  bottomVis.value=1
  selectedIndex.value = index;
  formParam.value=FenLists.value[index]
  console.log("点击了条目：",index, FenLists.value[index]);
  if(formParam.value.geoPosition.radius==0){
    console.log('回显多边形');
    Echo(FenLists.value[index].geoPosition.position)
  }else{
    console.log('回显圆形');
    EchoCircle(FenLists.value[index].geoPosition)

  }
  // 这里可以对点击的数据项进行其他操作，比如展示详情等
};
  
const EchoCircle = (item) => {//回显圆
  console.log('回显圆的全部数据',item);
  delExistFen()
    point.value = new BMap.Point(item.position[0].lng,item.position[0].lat);
    map.value.centerAndZoom(point.value, 14);
    polygon.value = new BMap.Marker(point.value);  // 创建标注
    polygon.value = new BMap.Circle(point.value, parseInt(item.radius), {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: "blue",
        fillOpacity: 0.3,
      });
      map.value.addOverlay(polygon.value);

}
  
const addFenceVis = () => {//新增围栏
  delExistFen()//清除已有的围栏再执行以下方法
  reset()
  confirmVis.value=1
  markVis.value=true
  sideVis.value=1
  bottomVis.value=2
  // console.log('新增围栏');
  coords.value = [];
    console.log(coords.value,'新增围栏coords.value');
  // map.value.addEventListener('click', handleMapClick)
};
const selectGeoType = () => {//选择围栏类型后，该画哪个图形
  console.log(formParam.value.geoType);
  map.value.clearOverlays();
  map.value.removeEventListener("click", showInfo);
  map.value.removeEventListener("click", handleMapClick);
  if(formParam.value.geoType==1){
    map.value.addEventListener("click", showInfo);
  }
  if(formParam.value.geoType==2){
    
    map.value.addEventListener('click', handleMapClick)
  }
  if(formParam.value.geoType==0){
    markVis.value=true
  }else{
    markVis.value=false
  }
};
const showInfo = (e) => {
  if(formParam.value.geoPosition.radius==0){
          ElMessage.warning('请输入半径')
  }else{
  }
  console.log(e.point,e.point.lng, e.point.lat);
  formParam.value.geoPosition.position=[{lng:e.point.lng,lat:e.point.lat}]
  console.log(formParam.value.geoPosition.position,'formParam.value.geoPosition.position');
  if(polygon.value){
    map.value.clearOverlays(polygon.value);
  }
  point.value = new BMap.Point(e.point.lng,e.point.lat);
  // map.value.centerAndZoom(point.value, 14);
  map.value.setViewport([point.value], {
        zoomFactor: -4,  // 这个参数可以调整视图缩放程度，负数表示缩小
        margins: [100, 100, 100, 100]  // 地图四边的空白区域，单位像素
      })
  polygon.value = new BMap.Marker(point.value);  // 创建标注
  polygon.value = new BMap.Circle(point.value, parseInt(formParam.value.geoPosition.radius), {
      strokeColor: "blue",
      strokeWeight: 2,
      strokeOpacity: 0.5,
      fillColor: "blue",
      fillOpacity: 0.3,
    });
	map.value.addOverlay(polygon.value);  
	}


const addConfire = async() => {//确定新增围栏
  console.log(formParam.value,'确定新增formParam1');
  if(formParam.value.geoType==2){
    formParam.value.geoPosition.position = coords.value.map(coord => ({ lng: coord.point.lng, lat: coord.point.lat }));
  }
  if (!formParam.value.name) {ElMessage.warning('请输入围栏名称');return;}
  if (!formParam.value.ruleType && formParam.value.ruleType!=0) {ElMessage.warning('请选择围栏规则');return;}
  // if (!formParam.value.geoDesc) {ElMessage.warning('请输入描述');return;}
  if (formParam.value.geofencingTime.length === 0) {ElMessage.warning('请选择时间段');return; }
  if (formParam.value.geoPosition.position.length === 0) {ElMessage.warning('请构建围栏');return;}
  console.log(formParam.value,'确定新增formParam2');
  const data = await addFence(formParam.value)
  console.log(data,'新增接口返回');
  if(data.success==1){
    ElMessage.success(data.message);
    _eleFenList()
    sideVis.value=0
    bottomVis.value=0
    formParam.value.geoType=0
    closeStroke()
  }else{
    ElMessage.error(data.message);
  }
};

const editFence = (index) => {//编辑围栏
  bottomVis.value=2
  confirmVis.value=2
  sideVis.value=1
  console.log('编辑围栏');
  // formParam.value=FenLists.value[index]
  // formParam.value.name=FenLists.value[index].name
  // formParam.value.ruleType=FenLists.value[index].ruleType
  // formParam.value.geoType=FenLists.value[index].geoType
  // formParam.value.geoDesc=FenLists.value[index].geoDesc
  // formParam.value.isEnable=FenLists.value[index].isEnable
  // formParam.value.geofencingTime=FenLists.value[index].geofencingTime
  // formParam.value.geoPosition = FenLists.value[index].geoPosition
};

const editConfire = async() => {//编辑确定围栏
  console.log(coords.value,"编辑时的coords.value");
  console.log(formParam.value,'编辑前formParam');
  if(coords.value.length!=0){
    formParam.value.geoPosition.position = coords.value.map(coord => ({ lng: coord.point.lng, lat: coord.point.lat }));
  }
  if (!formParam.value.name) {ElMessage.warning('请输入围栏名称');return;}
  if (!formParam.value.ruleType && formParam.value.ruleType!=0) {ElMessage.warning('请选择围栏规则');return;}
  // if (!formParam.value.geoDesc) {ElMessage.warning('请输入描述');return;}
  if (formParam.value.geofencingTime.length === 0) {ElMessage.warning('请选择时间段');return; }
  if (formParam.value.geoPosition.position.length === 0) {ElMessage.warning('请构建围栏');return;}
  console.log(formParam.value,'编辑确定围栏formParam');
  const data = await updateFence(formParam.value)
  console.log(data,'新增接口返回');
  if(data.success==1){
    ElMessage.success(data.message);
    _eleFenList()
    sideVis.value=0
    bottomVis.value=0
    closeStroke()
  }else{
    ElMessage.error(data.message);
  }
};

const _delFence = async(id) => {//删除围栏
  const params = {
    ids:[id]
  }
  const data = await delFence(params)
  console.log(data,'删除围栏');
  if(data.success==1){
    ElMessage.success('删除围栏成功');
    _eleFenList()
  }else{
    ElMessage.error(data.message);
  }
}

const isEnableSwitch = async(index,item) => {//使能按钮触发
  console.log(item,'按钮值');
  formParam.value=FenLists.value[index]
  formParam.value.isEnable=item
  const data = await updateFence(formParam.value)
  console.log(data,'按钮编辑接口返回');
  if(data.success==1){
    ElMessage.success('更改使能成功');
    _eleFenList()
  }else{
    ElMessage.error(data.message);
  }
}




const alarmTimes = ref([]); // 索引变量
const addAlarmTime = () => {//新增报警时间段
  if (!alarmTimes.value || alarmTimes.value.length !== 2 || !alarmTimes.value[0] || !alarmTimes.value[1]) {
    ElMessage.warning('请先选择开始和结束时间');
    return; // 不执行新增操作
  }
  const newTime = {
      startTime: alarmTimes.value[0],
      endTime: alarmTimes.value[1],
    };

  // 检查新增时间段与已有时间段是否重叠
  const overlap = formParam.value.geofencingTime.some(time => {
    return (
      (newTime.startTime >= time.startTime && newTime.startTime <= time.endTime) ||
      (newTime.endTime >= time.startTime && newTime.endTime <= time.endTime) ||
      (time.startTime >= newTime.startTime && time.startTime <= newTime.endTime) ||
      (time.endTime >= newTime.startTime && time.endTime <= newTime.endTime)
    );
  });

  if (overlap) {
    // 如果存在重叠，则给出提示
    ElMessage.warning('所选时间段与已有时间段存在重叠，请选择其他时间段');
  } else {
    // 否则执行新增操作
    formParam.value.geofencingTime.push(newTime);
  }
  };
  const delAlarmTime = (index) => {//删除该条时间段
      formParam.value.geofencingTime.splice(index, 1);
  };
const map = ref();
const point = ref();
const addPoint = ref();
const marker = ref();
const coords = ref([]);//新增的坐标点
const initMap = (lng = 113.456941, lat = 23.169843) => {
  // map.value.clearMap()
    map.value = new BMap.Map('map',{enableMapClick:false});//新建一个map地图实例
    point.value = new BMap.Point(lng, lat);//创建点
    marker.value = new BMap.Marker(point.value);//做标记
 
 
    map.value.centerAndZoom(point.value, 15);
    map.value.disableScrollWheelZoom(true); //滚轮缩放
    map.value.enableScrollWheelZoom();//滚轮放大缩小（有效，上面得好像有问题）
    // map.value.addOverlay(marker.value);//在地图上显示标记点

  //   // 添加地图点击事件监听器
  // map.value.addEventListener('click', (e) => {
  //   const point = e.point;
  //   addMarker(point);
  // });
}
//新增坐标点
const addMarker = () => {
    const marker = new BMap.Marker(addPoint.value);
    map.value.addOverlay(marker);
    
    // 将新的坐标点保存在数组中
    // 这里假设您已经定义了一个用于保存坐标点的数组 coords
    coords.value.push(marker);
    console.log(coords.value,'coords.value');

}

// 重新选择删除坐标点
const clearMarkers = () => {//多边形出现选择
  // 遍历坐标点数组，逐个移除地图上的标记
  map.value.removeEventListener('click', handleMapClick);
  delExistFen()//清除已有的围栏再执行以下方法
  
  // console.log(coords.value,'coords.value');
  if(coords.value){
    console.log(coords.value,'coords.value执行点');
    coords.value.forEach(marker => {
      map.value.removeOverlay(marker);
    });

    // 清空保存坐标点的数组
  }
  coords.value = [];
    console.log(coords.value,'coords.value');
  map.value.addEventListener('click', handleMapClick)
}


const clearMarkersCircle = () => {//圆重新选择
  if(formParam.value.geoPosition.radius==0){
          ElMessage.warning('请输入半径')
        }
  if(polygon.value){
    map.value.clearOverlays(polygon.value);
  }
  map.value.removeEventListener("click", showInfo);
  map.value.addEventListener("click", showInfo);
}


const handleMapClick = (e) => {//点击坐标监听
    addPoint.value = e.point;
    addMarker(addPoint.value);
};

// 电子围栏
  const polygon = ref(); // 用于存储电子围栏的变量

// 点击围栏列表展示该条围栏的图像
  const Echo = (item) => {
    console.log(item,'item');
    // 绘制电子围栏
    delExistFen()//清除已有的围栏再执行以下方法

    point.value = new BMap.Point(item[0].lng, item[0].lat);//创建点
      // map.value.centerAndZoom(point.value, 14);
    const points = item.map(coord => new BMap.Point(coord.lng, coord.lat));
    console.log(points,'points回显');
    polygon.value = new BMap.Polygon(points, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.3 });
    map.value.addOverlay(polygon.value);
    map.value.setViewport(points);

}

//把新增的坐标点生成图像
const newEcho = () => {
    console.log(coords.value,'coords.value');
  // 绘制电子围栏
  // formParam.value.geoPosition=[]
  if(coords.value.length>=3&&coords.value.length<10){//标记点至少3个且最多10个才可执行
    delExistFen()//清除已有的围栏再执行以下方法
    const points = coords.value.map(coord => new BMap.Point(coord.point.lng, coord.point.lat));
    console.log(points,'points');
    polygon.value = new BMap.Polygon(points, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "blue", fillOpacity: 0.3 });
    map.value.addOverlay(polygon.value);
    coords.value.forEach(marker => {//成功回显后删除新增坐标显示
        map.value.removeOverlay(marker);
      });
      map.value.removeEventListener('click', handleMapClick);
    }else{
      ElMessage.warning('标记点至少3个且最多10个')
    }
}
const delExistFen = () => {//清除旧的围栏
  if (polygon.value) {
    map.value.removeOverlay(polygon.value); // 如果有现有的围栏，先移除它
  }
};

const rebackSide = () => {//返回设备列表
  sideVis.value=0
  bottomVis.value=0
  markVis.value=false
  // map.value.removeEventListener('click', handleMapClick);
  reset()
  initMap()
  console.log(selectedIndex.value,'返回执行');
  if(selectedIndex.value===0 || selectedIndex.value){//如果点击过围栏列表取消新增或编辑时就回显
    bottomVis.value=1
    console.log(selectedIndex.value,'待选');
    // Echo(FenLists.value[selectedIndex.value].geoPosition.position)
    if(FenLists.value[selectedIndex.value].geoType==2){
      console.log(selectedIndex.value,'返回多边形');
      Echo(FenLists.value[selectedIndex.value].geoPosition.position)
    }
    if(FenLists.value[selectedIndex.value].geoType==1){
      console.log(selectedIndex.value,'返回圆');
      EchoCircle(FenLists.value[selectedIndex.value].geoPosition)
    }
  }
};

// 地址搜索
const searchResults = ref([]);
const searchLocation = async (str, cb) => {// 使用百度地图的地点搜索服务
  console.log(str, 'str');
  const local = new BMap.LocalSearch(map.value, {
    onSearchComplete: function (res) {
      var arr = [];
      if (local.getStatus() == BMAP_STATUS_SUCCESS) {
        for (var i = 0; i < res.getCurrentNumPois(); i++) {
          arr.push(res.getPoi(i));
        }
        cb(arr)
        console.log(res, '成功');
      } else {
        console.log(res, '失败');
        ElMessage.error('未找到相关地点，请尝试其他关键字。');
      }
    }
  });
  local.search(str);
  console.log(searchResults.value);
};
const handleSelect = (item) => {//点击搜索的点位并地图跳转到该坐标
  console.log(item)
  searchResults.value = item.address
  const point = new BMap.Point(item.point.lng, item.point.lat);
  map.value.centerAndZoom(point, 14);
  // var marker = new BMap.Marker(point);  // 创建标注
  // map.value.addOverlay(marker);               // 将标注添加到地图中
  // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //坐标跳动的动画
}




const reset = () => {//点击返回到时候清空重置一下formParam的值
  alarmTimes.value=[]
  formParam.value = {
    id: null,
    name: null,
    ruleType: null,
    geoType: 0,
    geoDesc: null,
    isEnable: 0,
    geofencingTime: [],
    geoPosition: {
      radius: 0,
      position: []
    }
  };
};

const handleChangeValue = (newValue) => {//警告组件父传子关闭
    // console.log('子传付触发',visindex.value);
    drawer.value=newValue
  };

//抽屉父传子
const drawerChildRef = ref();
const checkWarn = async() => {//第一次获取不到，第二次才可以获取
// 调用子组件的方法或者变量，通过value
  drawer.value = true
  await nextTick(() => {
    console.log(drawerChildRef.value,'drawerChildRef.value');
    drawerChildRef.value && drawerChildRef.value.reset();
  })
}

//弹出层父传子
const dialogChildRef = ref();
const devMan = async() => {//第一次获取不到，第二次才可以获取
// 调用子组件的方法或者变量，通过value
  DeviceManagementVis.value = true
  await nextTick(() => {
    console.log(dialogChildRef.value,'dialogChildRef.value');
    dialogChildRef.value && dialogChildRef.value.refresh();
  })
}

const startEditing = () => {
  // newEcho(); // 调用 newEcho 方法生成多边形
  console.log('调用编辑了');
  // 初始化 PolygonEdit 并启用编辑
  if (polygon.value) {
    polygonEdit = new BMapLib.PolygonEdit(map.value, polygon.value);
    polygonEdit.enableEditing();
  }
};
const options = [
  {
    value: 0,
    label: '未设置',
  },
  {
    value: 1,
    label: '圆形',
  },
  {
    value: 2,
    label: '多边形',
  },
]

  </script>
  
  <style scoped>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
  }
  
  .sidebar {
    width: 25%;
    padding: 20px;
    box-sizing: border-box;
    height: calc(100% - 5px);
  }
  
  .video-container {
    width: 70%;
    padding: 20px;
    height: calc(100% - 45px);
  }
  
  .sidebar input {
    width: 100%;
    margin-bottom: 10px;
  }
  
.mapBotton{
  width: 100%;
}
.nomapBotton{
  width: 100%;
  height: 40px;
  display: flex;
}
.full {
    width: 100%;
    height: calc(100%);
  }
  .nofull {
    width: 100%;
    height: calc(100% - 40px);
  }
  
  .video-js {
    width: 100% !important;
    height: 100% !important;
  }
  
  
  .commonBorder{
      box-shadow: 0 0 1.5vw #1f69b9b9 inset;
      background: linear-gradient(#33cdfa, #33cdfa) left top,
      linear-gradient(#33cdfa, #33cdfa) left top,
      linear-gradient(#33cdfa, #33cdfa) right top,
      linear-gradient(#33cdfa, #33cdfa) right top,
      linear-gradient(#33cdfa, #33cdfa) left bottom,
      linear-gradient(#33cdfa, #33cdfa) left bottom,
      linear-gradient(#33cdfa, #33cdfa) right bottom,
      linear-gradient(#33cdfa, #33cdfa) right bottom;
      background-repeat: no-repeat;
      background-size: 0.1vw 1.5vw, 1.5vw 0.1vw; 
  }
  .sideBox {
  margin-top: 5px;
  overflow: auto;
  height: calc(100% - 52px);
  border-radius: 5px;
  padding-top: 5px;
  padding-left: 5px;
  overflow-y:auto;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 13px;
}
.selected {
  background-color:#c8dce2;
}
.sTopBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.sBottomBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name {
  font-weight: bold;
}

.geoType {
  font-size: 12px;
  color: #666;
}

.createDate {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.el-switch {
  margin-right: 10px;
}

.bbox{
    width: 100%;
    height: 100%;
    border-radius: 2px;
}
::v-deep .el-form-item__label{
  color: #fff !important;
  font-size: 12px;
}
.playback-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    position: absolute;
    z-index: 2;
    margin-left: 5px;
    border-radius: 10px;
}
.mark{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10; /* 或者根据需要设置更高的值 */
  background-color: grey;
  opacity: 0.8;
  color: black;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center
}
 .markText{
  width: 100%;
  text-align: center;
 }
 .autoAddressClass li .title {
  line-height: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.autoAddressClass li .address {
  line-height: 1;
  font-size: 12px;
  color: #e9e1e1;
  margin-bottom: 5px;
}

.autoAddressClass li .autoAddressClass_item {
  overflow: hidden;
  display: flex;
  align-items: center;
}

.autoAddressClass li .autoAddressClass_item .el-icon {
  margin-right: 20px;
}
 </style>

左边列表FenLists数据集合（eleFenList接口）：

{
    "success": 1,
    "code": 1,
    "message": "",
    "data": {
        "records": [
            {
                "id": 27,
                "name": "多边形测试2",
                "ruleType": 2,
                "geoType": 2,
                "geoDesc": "12",
                "isEnable": 0,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-23 18:00:22",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-23 18:00:22",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.49476,
                            "lat": 23.245596
                        },
                        {
                            "lng": 113.49318,
                            "lat": 23.210527
                        },
                        {
                            "lng": 113.537155,
                            "lat": 23.208668
                        },
                        {
                            "lng": 113.51704,
                            "lat": 23.23165
                        },
                        {
                            "lng": 113.505394,
                            "lat": 23.222218
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 234,
                        "filterId": 27,
                        "startTime": "17:59:46",
                        "endTime": "18:59:46",
                        "isDel": 0
                    },
                    {
                        "id": 233,
                        "filterId": 27,
                        "startTime": "20:59:46",
                        "endTime": "21:59:46",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 26,
                "name": "测试圆2的",
                "ruleType": 1,
                "geoType": 1,
                "geoDesc": "2321",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-23 17:49:19",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-23 17:49:19",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 2083,
                    "position": [
                        {
                            "lng": 113.54068,
                            "lat": 23.22627
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 238,
                        "filterId": 26,
                        "startTime": "03:48:18",
                        "endTime": "12:48:18",
                        "isDel": 0
                    },
                    {
                        "id": 237,
                        "filterId": 26,
                        "startTime": "19:48:18",
                        "endTime": "23:48:18",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 25,
                "name": "多边形新增1",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "萨达as打算11",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-23 16:11:19",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-23 16:11:19",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.460144,
                            "lat": 23.178328
                        },
                        {
                            "lng": 113.46167,
                            "lat": 23.176342
                        },
                        {
                            "lng": 113.45984,
                            "lat": 23.177015
                        },
                        {
                            "lng": 113.462555,
                            "lat": 23.177929
                        },
                        {
                            "lng": 113.46307,
                            "lat": 23.179806
                        },
                        {
                            "lng": 113.46195,
                            "lat": 23.180246
                        },
                        {
                            "lng": 113.46065,
                            "lat": 23.179922
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 218,
                        "filterId": 25,
                        "startTime": "16:10:22",
                        "endTime": "17:10:22",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 24,
                "name": "圆新增测试1",
                "ruleType": 1,
                "geoType": 1,
                "geoDesc": "测试1",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-23 15:58:38",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-23 15:58:38",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 2271,
                    "position": [
                        {
                            "lng": 113.45435,
                            "lat": 23.169844
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 207,
                        "filterId": 24,
                        "startTime": "15:58:03",
                        "endTime": "16:58:03",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 23,
                "name": "范德萨",
                "ruleType": 3,
                "geoType": 2,
                "geoDesc": "12",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-22 11:09:40",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-22 11:09:40",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 111.43126,
                            "lat": 24.285587
                        },
                        {
                            "lng": 111.44764,
                            "lat": 24.281107
                        },
                        {
                            "lng": 111.46532,
                            "lat": 24.298235
                        },
                        {
                            "lng": 111.43744,
                            "lat": 24.31075
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 189,
                        "filterId": 23,
                        "startTime": "11:09:00",
                        "endTime": "12:09:00",
                        "isDel": 0
                    },
                    {
                        "id": 188,
                        "filterId": 23,
                        "startTime": "15:09:00",
                        "endTime": "21:09:00",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 22,
                "name": "weilan",
                "ruleType": 3,
                "geoType": 2,
                "geoDesc": "12",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-17 11:09:01",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-17 11:09:01",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.41576,
                            "lat": 23.197401
                        },
                        {
                            "lng": 113.44579,
                            "lat": 23.179993
                        },
                        {
                            "lng": 113.4136,
                            "lat": 23.17335
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 195,
                        "filterId": 22,
                        "startTime": "11:08:33",
                        "endTime": "12:08:33",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 20,
                "name": "511",
                "ruleType": 1,
                "geoType": 2,
                "geoDesc": "cds",
                "isEnable": 0,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-11 15:59:10",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-11 15:59:10",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.37429,
                            "lat": 23.233683
                        },
                        {
                            "lng": 113.37257,
                            "lat": 23.20366
                        },
                        {
                            "lng": 113.409935,
                            "lat": 23.198744
                        },
                        {
                            "lng": 113.44486,
                            "lat": 23.203394
                        },
                        {
                            "lng": 113.440125,
                            "lat": 23.231293
                        },
                        {
                            "lng": 113.40448,
                            "lat": 23.247763
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 179,
                        "filterId": 20,
                        "startTime": "22:00:40",
                        "endTime": "22:59:40",
                        "isDel": 0
                    },
                    {
                        "id": 178,
                        "filterId": 20,
                        "startTime": "17:31:58",
                        "endTime": "18:31:58",
                        "isDel": 0
                    },
                    {
                        "id": 177,
                        "filterId": 20,
                        "startTime": "14:54:36",
                        "endTime": "16:54:36",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 19,
                "name": "阿萨v",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-10 16:11:06",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-10 16:11:06",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.45571,
                            "lat": 23.174318
                        },
                        {
                            "lng": 113.4505,
                            "lat": 23.169168
                        },
                        {
                            "lng": 113.462975,
                            "lat": 23.166012
                        },
                        {
                            "lng": 113.4647,
                            "lat": 23.17166
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 166,
                        "filterId": 19,
                        "startTime": "01:25:52",
                        "endTime": "22:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 18,
                "name": "犯法的事",
                "ruleType": 1,
                "geoType": 2,
                "geoDesc": "as大多少发多少",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-10 10:39:56",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-10 10:39:56",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.44328,
                            "lat": 23.185059
                        },
                        {
                            "lng": 113.441635,
                            "lat": 23.176554
                        },
                        {
                            "lng": 113.455505,
                            "lat": 23.168648
                        },
                        {
                            "lng": 113.47225,
                            "lat": 23.182335
                        },
                        {
                            "lng": 113.46808,
                            "lat": 23.189377
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 100,
                        "filterId": 18,
                        "startTime": "15:39:29",
                        "endTime": "22:39:29",
                        "isDel": 0
                    },
                    {
                        "id": 99,
                        "filterId": 18,
                        "startTime": "10:39:29",
                        "endTime": "11:39:29",
                        "isDel": 0
                    },
                    {
                        "id": 98,
                        "filterId": 18,
                        "startTime": "13:39:29",
                        "endTime": "14:39:29",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 17,
                "name": "大大23123",
                "ruleType": 1,
                "geoType": 2,
                "geoDesc": "123213",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-10 09:59:51",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-10 09:59:51",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43657,
                            "lat": 23.172832
                        },
                        {
                            "lng": 113.451225,
                            "lat": 23.174627
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        },
                        {
                            "lng": 113.43851,
                            "lat": 23.180141
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 75,
                        "filterId": 17,
                        "startTime": "09:59:40",
                        "endTime": "10:59:40",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 16,
                "name": "测11试未来",
                "ruleType": 1,
                "geoType": 2,
                "geoDesc": "阿达",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-10 09:32:25",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-10 09:32:25",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.45331,
                            "lat": 23.170708
                        },
                        {
                            "lng": 113.451584,
                            "lat": 23.158945
                        },
                        {
                            "lng": 113.46445,
                            "lat": 23.157549
                        },
                        {
                            "lng": 113.4707,
                            "lat": 23.167849
                        },
                        {
                            "lng": 113.45331,
                            "lat": 23.170708
                        },
                        {
                            "lng": 113.45331,
                            "lat": 23.170708
                        },
                        {
                            "lng": 113.45331,
                            "lat": 23.170708
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 73,
                        "filterId": 16,
                        "startTime": "09:32:06",
                        "endTime": "10:32:06",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 15,
                "name": "32测试22323",
                "ruleType": 1,
                "geoType": 2,
                "geoDesc": "安师大23",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-10 09:26:44",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-10 09:26:44",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.439224,
                            "lat": 23.182236
                        },
                        {
                            "lng": 113.43822,
                            "lat": 23.174395
                        },
                        {
                            "lng": 113.45504,
                            "lat": 23.172335
                        },
                        {
                            "lng": 113.46309,
                            "lat": 23.18363
                        },
                        {
                            "lng": 113.439224,
                            "lat": 23.182236
                        },
                        {
                            "lng": 113.439224,
                            "lat": 23.182236
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 56,
                        "filterId": 15,
                        "startTime": "22:35:26",
                        "endTime": "23:26:26",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 12,
                "name": "阿达达",
                "ruleType": 1,
                "geoType": 2,
                "geoDesc": "as大大",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": null,
                "creatorName": null,
                "createDate": "2024-05-09 16:50:43",
                "updateId": null,
                "updateName": null,
                "updateDate": "2024-05-09 16:50:43",
                "orderNo": null,
                "comId": null,
                "sysId": null,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.44498,
                            "lat": 23.178082
                        },
                        {
                            "lng": 113.442604,
                            "lat": 23.165192
                        },
                        {
                            "lng": 113.46761,
                            "lat": 23.164726
                        },
                        {
                            "lng": 113.469986,
                            "lat": 23.17662
                        },
                        {
                            "lng": 113.47365,
                            "lat": 23.160673
                        },
                        {
                            "lng": 113.44498,
                            "lat": 23.178082
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 28,
                        "filterId": 12,
                        "startTime": "19:50:03",
                        "endTime": "23:50:03",
                        "isDel": 0
                    },
                    {
                        "id": 27,
                        "filterId": 12,
                        "startTime": "16:50:03",
                        "endTime": "17:50:03",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 11,
                "name": "圆形2",
                "ruleType": 0,
                "geoType": 1,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-09 11:40:42",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-09 11:40:42",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 1000,
                    "position": [
                        {
                            "lng": 113.46694,
                            "lat": 23.159843
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 158,
                        "filterId": 11,
                        "startTime": "11:25:52",
                        "endTime": "12:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 157,
                        "filterId": 11,
                        "startTime": "15:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 10,
                "name": "圆形1",
                "ruleType": 0,
                "geoType": 1,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-09 11:35:32",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-09 11:35:32",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 500,
                    "position": [
                        {
                            "lng": 113.45694,
                            "lat": 23.158842
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 162,
                        "filterId": 10,
                        "startTime": "11:25:52",
                        "endTime": "12:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 161,
                        "filterId": 10,
                        "startTime": "15:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 9,
                "name": "阿萨v",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-09 11:29:30",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-09 11:29:30",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 111.49694,
                            "lat": 24.269842
                        },
                        {
                            "lng": 111.49694,
                            "lat": 21.269842
                        },
                        {
                            "lng": 114.49694,
                            "lat": 21.269842
                        },
                        {
                            "lng": 114.49694,
                            "lat": 24.269842
                        },
                        {
                            "lng": 111.49694,
                            "lat": 24.269842
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 22,
                        "filterId": 9,
                        "startTime": "11:25:52",
                        "endTime": "12:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 21,
                        "filterId": 9,
                        "startTime": "15:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 8,
                "name": "阿萨v",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-09 11:29:26",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-09 11:29:26",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 111.49694,
                            "lat": 24.269842
                        },
                        {
                            "lng": 111.49694,
                            "lat": 21.269842
                        },
                        {
                            "lng": 114.49694,
                            "lat": 21.269842
                        },
                        {
                            "lng": 114.49694,
                            "lat": 24.269842
                        },
                        {
                            "lng": 111.49694,
                            "lat": 24.269842
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 20,
                        "filterId": 8,
                        "startTime": "11:25:52",
                        "endTime": "12:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 19,
                        "filterId": 8,
                        "startTime": "15:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 6,
                "name": "阿萨v",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-09 11:19:54",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-09 11:19:54",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 24.269842,
                            "lat": 111.49694
                        },
                        {
                            "lng": 21.269842,
                            "lat": 111.49694
                        },
                        {
                            "lng": 21.269842,
                            "lat": 114.49694
                        },
                        {
                            "lng": 24.269842,
                            "lat": 114.49694
                        },
                        {
                            "lng": 24.269842,
                            "lat": 111.49694
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 150,
                        "filterId": 6,
                        "startTime": "11:25:52",
                        "endTime": "12:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 149,
                        "filterId": 6,
                        "startTime": "15:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 5,
                "name": "阿萨v1",
                "ruleType": 1,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-09 11:07:11",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-09 11:07:11",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.41694,
                            "lat": 23.179844
                        },
                        {
                            "lng": 113.42694,
                            "lat": 23.149843
                        },
                        {
                            "lng": 113.49694,
                            "lat": 23.179844
                        },
                        {
                            "lng": 113.45694,
                            "lat": 23.189842
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 232,
                        "filterId": 5,
                        "startTime": "15:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 231,
                        "filterId": 5,
                        "startTime": "11:25:52",
                        "endTime": "12:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 4,
                "name": "阿萨v",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-07 16:29:17",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-07 16:29:17",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.445656,
                            "lat": 23.179178
                        },
                        {
                            "lng": 113.43128,
                            "lat": 23.153397
                        },
                        {
                            "lng": 113.50976,
                            "lat": 23.166952
                        },
                        {
                            "lng": 113.50565,
                            "lat": 23.189178
                        }
                    ]
                },
                "geofencingTime": [
                    {
                        "id": 174,
                        "filterId": 4,
                        "startTime": "10:25:53",
                        "endTime": "12:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 173,
                        "filterId": 4,
                        "startTime": "10:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 172,
                        "filterId": 4,
                        "startTime": "10:25:53",
                        "endTime": "12:25:52",
                        "isDel": 0
                    },
                    {
                        "id": 171,
                        "filterId": 4,
                        "startTime": "10:25:52",
                        "endTime": "16:25:52",
                        "isDel": 0
                    }
                ]
            },
            {
                "id": 3,
                "name": "阿萨v",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-07 16:25:41",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-07 16:25:41",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.41694,
                            "lat": 23.179844
                        },
                        {
                            "lng": 113.42694,
                            "lat": 23.169844
                        },
                        {
                            "lng": 113.46694,
                            "lat": 23.159843
                        },
                        {
                            "lng": 113.45694,
                            "lat": 23.189842
                        }
                    ]
                },
                "geofencingTime": []
            },
            {
                "id": 2,
                "name": "第二个",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-07 11:20:35",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-07 11:20:35",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.41694,
                            "lat": 23.189842
                        },
                        {
                            "lng": 113.42694,
                            "lat": 23.169844
                        },
                        {
                            "lng": 113.46694,
                            "lat": 23.159843
                        },
                        {
                            "lng": 113.44694,
                            "lat": 23.189842
                        }
                    ]
                },
                "geofencingTime": []
            },
            {
                "id": 1,
                "name": "第一个",
                "ruleType": 0,
                "geoType": 2,
                "geoDesc": "",
                "isEnable": 1,
                "pointStr": null,
                "creatorId": 0,
                "creatorName": "",
                "createDate": "2024-05-07 09:47:05",
                "updateId": 0,
                "updateName": "",
                "updateDate": "2024-05-07 09:47:05",
                "orderNo": 0,
                "comId": 0,
                "sysId": 0,
                "isDel": 0,
                "geoPosition": {
                    "radius": 0,
                    "position": [
                        {
                            "lng": 113.41694,
                            "lat": 23.189842
                        },
                        {
                            "lng": 113.42694,
                            "lat": 23.169844
                        },
                        {
                            "lng": 113.46694,
                            "lat": 23.159843
                        },
                        {
                            "lng": 113.44694,
                            "lat": 23.149843
                        }
                    ]
                },
                "geofencingTime": []
            }
        ],
        "total": 23,
        "size": 500,
        "current": 1,
        "orders": [],
        "optimizeCountSql": true,
        "hitCount": false,
        "searchCount": true,
        "pages": 1
    }
}