feat:宁录更新

src/main.js

@@ -53,7 +53,7 @@ import './assets/svg'; // icon
 
 // 引入百度地图
 import BaiduMap from 'vue-baidu-map';
-import { BmPolygon, BmControl, BmMarker } from 'vue-baidu-map';
+// import { BmPolygon, BmControl, BmMarker } from 'vue-baidu-map';s
 
 // 动态网站标题
 import VueWechatTitle from 'vue-wechat-title';
@@ -180,7 +180,7 @@ Vue.use(Viewer, {
     zIndex: 9999
   }
 });
-Vue.use(BaiduMap, BmPolygon, BmControl, BmMarker, {
+Vue.use(BaiduMap, {
   ak: 'pAT8YhkMx1HVQIWOLZcYoQAty1myB4Sn'
 });
 Vue.use(VueWechatTitle);

src/pages/forecasting/xycb/xycb.vue

@@ -827,7 +827,6 @@ export default {
   },
   created() {
     this.user_tag = localStorage.getItem('user_tag')
-    this.displayType = String(localStorage.getItem('xycbListType') || '1')
   },
   mounted() {
     // this.getEquipList()
@@ -919,7 +918,6 @@ export default {
       this.getEquipList()
     },
     getDisplayType(data) {
-      this.displayType = String(data)
       localStorage.setItem('xycbListType', data)
     },
     // 获取设备列表
@@ -1340,7 +1338,7 @@ export default {
           this.$message.success('添加成功')
 
           this.setBhDialogVisible = false
-          this.getYxList()
+          this.getEquipList()
         } else {
           this.$message.warning(res.data.message)
         }

src/pages/fourMoodBase/AreaPolygon.vue

@@ -0,0 +1,530 @@
+<template>
+  <div>
+    <div class="searchBox">
+      <div style="display: flex; gap: 20px">
+        <p style="flex: 1; display: flex; align-items: center">
+          <span style="display: inline-block; width: 50px">经度</span
+          ><el-input size="mini" v-model="locationForm.lng"></el-input>
+        </p>
+        <p style="flex: 1; display: flex; align-items: center">
+          <span style="display: inline-block; width: 50px">纬度</span
+          ><el-input size="mini" v-model="locationForm.lat"></el-input>
+        </p>
+      </div>
+      <div class="search">
+        <el-input
+          placeholder="请输入位置"
+          v-model.lazy="searchAddr"
+          style="width: auto"
+          @change="searchFun"
+          clearable
+          class="input-with-select"
+        >
+          <el-button
+            style="color: white"
+            class="searchBtn"
+            slot="append"
+            icon="el-icon-search"
+            @click="searchFun"
+          >
+            搜索
+          </el-button>
+        </el-input>
+      </div>
+      <!-- <el-button v-if="!isDrawing" class="drawBtn" @click="drawFun" round icon="el-icon-star-off"
+        >开始绘制</el-button
+      >
+      <el-button v-else class="drawBtn" @click="stopDraw" round icon="el-icon-close"
+        >结束绘制</el-button
+      >
+      <el-button v-if="isEditing" class="drawBtn" @click="stopEditPolygon" round icon="el-icon-edit"
+        >停止编辑</el-button
+      >
+      <el-button
+        v-if="overlays.length > 0"
+        type="danger"
+        @click="clearArea"
+        round
+        icon="el-icon-delete"
+        >清除区域</el-button
+      > -->
+    </div>
+    <div style="height: 400px" class="amap-demo" id="mapContainer" tabindex="0"></div>
+  </div>
+</template>
+
+<script>
+import AMap from 'AMap'
+
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      default: true
+    },
+    coordinates: {
+      type: String,
+      default: '[]'
+    },
+    isVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      address: {
+        sheng: '',
+        shi: '',
+        qu: ''
+      },
+      cityValue: [],
+      isDrawing: false,
+      isEditing: false,
+      props: {
+        expandTrigger: 'hover',
+        value: 'value'
+      },
+      cropperVisible: false,
+      projectAreaTableData: [], // 项目区域列表
+      map: '',
+      searchAddr: '', // 检索的地址
+      styles: {
+        // 基地的样式 多边形
+        basePolygon: {
+          fillColor: '#000000',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: '#6FBD79',
+          fillOpacity: '0.3',
+          zIndex: 50
+        },
+        // 地块的样式 多边形
+        landPolygon: {
+          fillColor: 'red',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: '#6FBD79',
+          fillOpacity: '0.3',
+          zIndex: 50
+        },
+        // 高亮显示的地块
+        landPolygonAcitve: {
+          fillColor: 'yellow',
+          strokeWeight: 3, // 轮廓宽度
+          strokeColor: 'yellow',
+          fillOpacity: '0.3',
+          zIndex: 52
+        }
+      },
+      addBaseDialogVisible: false,
+      base_name: '',
+      basePolygon: null,
+      overlays: [],
+      addBaseTitle: '新建基地',
+      currentRowData: {},
+      polyEditor: null,
+      mouseTool: null,
+      postPolygon: [],
+      locationForm: {
+        lng: '',
+        lat: '',
+        address: ''
+      }
+    }
+  },
+  watch: {
+    isVisible: {
+      handler(val) {
+        // if (this.isAdd) {
+        //   this.clearArea()
+        // }
+      }
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {
+    this.clearArea()
+    this.$nextTick(() => {
+      this.initMap()
+    })
+  },
+  methods: {
+    stopDraw() {
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close()
+        this.map.setDefaultCursor('default')
+      }
+    },
+    stopEdit() {
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close()
+      }
+    },
+    clearArea() {
+      console.log('清除区域', this.map)
+
+      this.map && this.map.remove(this.overlays)
+      this.overlays = []
+      // 停止编辑
+      if (this.polyEditor) {
+        this.polyEditor.close()
+      }
+
+      // 停止绘制
+      if (this.mouseTool) {
+        this.isDrawing = false
+        this.mouseTool.close(true)
+        this.map.setDefaultCursor('default')
+      }
+    },
+    initMap() {
+      var map = new AMap.Map('mapContainer', {
+        center: this.center,
+        resizeEnable: true,
+        zoom: 15,
+        layers: [new AMap.TileLayer.Satellite()],
+        lang: 'en'
+      })
+      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.Geocoder'], () => {
+        map.addControl(new AMap.ToolBar())
+        map.addControl(new AMap.Scale())
+
+        this.geocoder = new AMap.Geocoder({
+          city: '全国',
+          radius: 1000
+        })
+      })
+
+      this.map = map
+      this.map.on('click', (e) => {
+        console.log('点击地图', e)
+        if (this.marker) {
+          this.map.remove(this.marker)
+        }
+        this.marker = new AMap.Marker()
+        const lng = e.lnglat.getLng()
+        const lat = e.lnglat.getLat()
+        // this.locationForm.lng = lng
+        // this.locationForm.lat = lat
+        this.marker.setPosition([lng, lat])
+        this.map.add(this.marker)
+        this.map.setFitView(this.marker)
+        const that = this
+        this.geocoder.getAddress([lng, lat], (status, result) => {
+          if (status === 'complete' && result.regeocode) {
+            const address = result.regeocode.formattedAddress
+            that.locationForm.lng = lng
+            that.locationForm.lat = lat
+            that.locationForm.address = address
+            console.log('地址', address)
+            that.$emit('locationSelected', that.locationForm)
+          } else {
+            this.$message.error('查询位置失败')
+          }
+        })
+      })
+      // this.map.plugin(['AMap.DistrictSearch'], () => {
+      //   this.setAdmin()
+      // })
+      // if (this.coordinates) {
+      //   this.editMap()
+      // }
+    },
+    drawFun() {
+      this.isDrawing = true
+      this.mouseTool = new AMap.MouseTool(this.map)
+      this.mouseTool.on('draw', this.drawBaseEnd)
+      // this.mouseTool.measureArea({
+      //   ...this.styles.basePolygon
+      // })
+      this.mouseTool.polygon({
+        ...this.styles.basePolygon
+      })
+      this.map.setDefaultCursor('crosshair')
+    },
+    stopEditPolygon() {
+      this.stopDraw()
+
+      if (this.polyEditor) {
+        this.polyEditor.close()
+        this.polyEditor = null
+      }
+      this.selectedPolygon = null
+      this.isEditing = false
+
+      // 移除多边形的点击事件
+      this.overlays.forEach((polygon) => {
+        polygon.off('click')
+      })
+    },
+    editMap() {
+      if (!this.coordinates) {
+        return
+      }
+
+      var coordinates = JSON.parse(this.coordinates)
+      coordinates.forEach((item) => {
+        let basePolygon = new AMap.Polygon({
+          path: item.path,
+          ...this.styles.basePolygon
+        })
+        this.addPolygonContextMenu(basePolygon)
+        basePolygon.on('click', (e) => {
+          // 停止之前的编辑
+          this.stopEditPolygon()
+          this.polyEditor = new AMap.PolygonEditor(this.map, basePolygon, {
+            editOptions: this.styles.landPolygon
+          })
+          this.polyEditor.open()
+          this.isEditing = true
+          this.selectedPolygon = basePolygon
+          // this.polyEditor.on('end', (event) => {
+          //   const index = this.overlays.indexOf(basePolygon)
+          //   console.log('index', index)
+          //   if (index > -1) {
+          //     this.overlays.splice(index, 1, event.target)
+          //   }
+          //   console.log(this.overlays)
+          // })
+        })
+
+        this.overlays.push(basePolygon)
+        this.map.add(basePolygon)
+      })
+
+      // this.polyEditor = new AMap.PolygonEditor(this.map, this.basePolygon, {
+      //   editOptions: this.styles.landPolygon
+      // })
+      // this.polyEditor.on('addnode', this.drawLandNode) // 增加一个节点时触发此事件
+      // this.polyEditor.on('add', this.drawLandEnd) // 创建一个覆盖物之后触发该事件
+      // // this.polyEditor.addAdsorbPolygons(this.basePolygon)
+      // this.polyEditor.open()
+      this.map.setFitView()
+    },
+    searchFun() {
+      // console.log(this.marker)
+      if (this.marker) {
+        this.map.remove(this.marker)
+      }
+      if (!this.searchAddr) {
+        return false
+      }
+      this.marker = new AMap.Marker()
+      this.geocoder.getLocation(this.searchAddr, (status, result) => {
+        if (status === 'complete' && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location
+          console.log('lnglat', lnglat)
+          this.locationForm.lng = lnglat.lng
+          this.locationForm.lat = lnglat.lat
+          this.marker.setPosition(lnglat)
+          this.map.add(this.marker)
+          this.map.setFitView(this.marker)
+        } else {
+          this.$message.error('根据地址查询位置失败')
+        }
+      })
+    },
+
+    confirmArea() {
+      this.$confirm('您当前绘制' + this.overlays.length + '个区域，确定要保存并退出吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.overlays.forEach((polygon) => {
+          let arr = polygon.getPath()
+          let path = arr.map((item) => {
+            return [item.lng, item.lat]
+          })
+          this.postPolygon.push({
+            path: path
+          })
+        })
+
+        this.$emit('drawBaseEnd', JSON.stringify(this.postPolygon))
+      })
+    },
+    drawBaseEnd(event) {
+      const polygon = event.obj
+      polygon.on('click', (e) => {
+        // 停止之前的编辑
+        this.stopEditPolygon()
+        this.polyEditor = new AMap.PolygonEditor(this.map, polygon, {
+          editOptions: this.styles.landPolygon
+        })
+        this.polyEditor.open()
+        this.isEditing = true
+        this.selectedPolygon = polygon
+      })
+      this.overlays.push(polygon)
+
+      // 添加右键菜单删除功能
+      this.addPolygonContextMenu(polygon)
+    },
+    addPolygonContextMenu(polygon) {
+      // 添加右键菜单删除功能
+      polygon.on('rightclick', (e) => {
+        this.stopDraw()
+        // 创建右键菜单
+        const menu = new AMap.ContextMenu()
+
+        menu.addItem(
+          '删除此区域',
+          () => {
+            // 从地图移除
+            polygon.setMap(null)
+            this.stopEditPolygon()
+
+            // 从数组中移除
+            const index = this.overlays.indexOf(polygon)
+            if (index > -1) {
+              this.overlays.splice(index, 1)
+            }
+          },
+          0
+        )
+
+        // 在点击位置打开菜单
+        menu.open(this.map, e.lnglat)
+      })
+    },
+    setAdmin() {
+      var city = ''
+      var tier = ''
+      if (this.address.qu != '') {
+        tier = 'district'
+        city = this.address.qu
+      } else if (this.address.shi != '') {
+        tier = 'city'
+        city = this.address.shi
+      } else if (this.address.sheng != '') {
+        tier = 'province'
+        city = this.address.sheng
+      } else {
+        return
+      }
+
+      var district = null
+      if (!district) {
+        // 实例化DistrictSearch
+        var opts = {
+          subdistrict: 0, // 获取边界不需要返回下级行政区
+          extensions: 'all', // 返回行政区边界坐标组等具体信息
+          level: 'district' // 查询行政级别为 市
+        }
+        district = new AMap.DistrictSearch(opts)
+      }
+      district.setLevel(tier)
+      district.search(city, (status, result) => {
+        if (this.polygon) {
+          this.map.remove(this.polygon) // 清除上次结果
+          this.polygon = null
+        }
+        var bounds = result.districtList[0].boundaries
+        if (bounds) {
+          // 生成行政区划polygon
+          for (var i = 0; i < bounds.length; i += 1) {
+            // 构造MultiPolygon的path
+            bounds[i] = [bounds[i]]
+          }
+          this.polygon = new AMap.Polygon({
+            strokeWeight: 2,
+            path: bounds,
+            fillOpacity: 0.2,
+            // fillColor: '#0064fc',
+            // strokeColor: '#0064fc'
+            fillColor: '#000',
+            strokeColor: '#0064fc'
+          })
+          this.map.add(this.polygon)
+          if (this.isAdd) {
+            // 新增
+            this.map.setFitView(this.polygon) // 视口自适应
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.card {
+  min-height: 80vh;
+  .form {
+    // width: 50%;
+    // 头像上传
+    .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader .el-upload:hover {
+      border-color: #409eff;
+    }
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 150px;
+      height: 150px;
+      line-height: 150px !important;
+      text-align: center;
+    }
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
+    .hint {
+      font-size: 12px;
+      color: #707070;
+    }
+    .el-input {
+      width: 220px;
+    }
+  }
+}
+
+.searchBox {
+  // position: absolute;
+  // left: 30px;
+  // top: 100px;
+  // z-index: 9;
+  // display: flex;
+  margin-bottom: 20px;
+  .search {
+    /deep/.el-input__inner {
+      border-top-left-radius: 50px;
+      border-bottom-left-radius: 50px;
+      width: 280px;
+    }
+    /deep/.el-input.is-active .el-input__inner,
+    /deep/.el-input__inner:focus {
+      border-color: #3eb984;
+      outline: 0;
+    }
+    /deep/.el-input-group__append {
+      border-top-right-radius: 50px;
+      border-bottom-right-radius: 50px;
+      overflow: hidden;
+      border: 1px solid #3eb984;
+      background-color: #3eb984;
+    }
+  }
+  .searchBtn {
+    background: #3eb984;
+    color: #fff;
+  }
+  .drawBtn {
+    background-color: #3eafb9;
+    border-radius: 18px;
+    color: #fff;
+    border-color: #3eafb9;
+    margin-left: 20px;
+  }
+}
+</style>

src/pages/fourMoodBase/baseManage copy.vue

@@ -0,0 +1,898 @@
+<template>
+  <div style="cursor: default">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>基地管理</el-breadcrumb-item>
+    </el-breadcrumb>
+    <!-- <SearchBar> -->
+    <div class="baseoperationbox">
+      <div slot="type-check">
+        <!-- <el-input
+          style="cursor: pointer"
+          placeholder="请输入基地名称"
+          size="mini"
+          suffix-icon="el-icon-search"
+          v-model="search"
+          @change="searchBase"
+          clearable
+        ></el-input> -->
+
+        <el-button
+          v-if="$QueryPermission(110)"
+          v-btnRight:added="$route.path"
+          type="primary"
+          size="mini"
+          @click="addBase('新增基地')"
+          >新增</el-button
+        >
+      </div>
+      <div slot="search-common" style="display: inline-block; margin: 0 5px 0 0">
+        <!-- <el-button
+          v-btnRight:added="$route.path"
+          type="primary"
+          size="mini"
+          @click="addBase('新增基地')"
+          >新增</el-button
+        > -->
+        <el-input
+          style="cursor: pointer; width: 240px"
+          placeholder="请输入基地名称"
+          size="mini"
+          suffix-icon="el-icon-search"
+          v-model="search"
+          @change="searchBase"
+          clearable
+        ></el-input>
+      </div>
+    </div>
+    <!-- </SearchBar> -->
+    <el-row :gutter="20">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="8"
+        :xl="8"
+        class="col-item"
+        v-for="(item, index) in baseList"
+        :key="index"
+      >
+        <el-card class="box-card boxCard">
+          <!-- 全景VR -->
+          <i class="whole-icon yficonfont icon-keshihuaquanjing" @click="wholeScene(item)"></i>
+
+          <div class="baseCard">
+            <div class="baseImg">
+              <!-- <img :src="$host + item.base_img" /> -->
+              <img :src="item.base_img" />
+            </div>
+            <div class="addBaseInfo">
+              <h2>{{ item.base_name }}</h2>
+              <div class="addBaseInfoDetails">
+                <i class="yficonfont icon-yonghu11"></i>
+                <div class="caption">负责人 ：</div>
+                <div>{{ item.base_charge }}</div>
+              </div>
+              <div class="addBaseInfoDetails">
+                <i class="yficonfont icon-dianhua2"></i>
+                <!-- <div class="caption">电&nbsp;&nbsp;&nbsp;&nbsp;话 :</div> -->
+                <div class="caption">电&nbsp;&nbsp;话 :</div>
+                <div>{{ item.base_phone }}</div>
+              </div>
+              <div class="addBaseInfoDetails">
+                <i class="yficonfont icon-mianji"></i>
+                <div class="caption">面积(亩) ：</div>
+                <div>{{ item.base_area }}</div>
+              </div>
+              <div class="addBaseInfoDetails">
+                <i class="yficonfont icon-dingwei"></i>
+                <div class="caption">地&nbsp;&nbsp;址 ：</div>
+                <!-- <div class="caption">地&nbsp;&nbsp;&nbsp;&nbsp;址 ：</div> -->
+                <div class="addr" :title="item.address">
+                  {{ (item.address || '未定位') | formatName }}
+                </div>
+                <!-- <div class="addr">{{ item.address || "未定位" }}</div> -->
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="$QueryPermission(111)"
+            v-btnRight:change="$route.path"
+            class="baseEditBox"
+            @click="editBase(item.id, '修改基地', item.address)"
+          >
+            <img src="@/assets/images/fourMoodBase/baseEditIcon.png" alt />
+          </div>
+          <div class="baseBtn">
+            <span class="detailBtn" @click="detailBase(item.id)">详情</span>
+            <span class="delBtn" @click="delBase(item.id)">删除</span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div class="expertDiagnosis_referral_units_not" v-if="baseList.length <= 0">
+      <img :src="$imghost + zanwu" alt class="expertDiagnosis_referral_units_notImg" />
+    </div>
+    <el-pagination
+      v-if="baseList.length > 0"
+      background
+      :page-size="pageSize"
+      layout="prev, pager, next, jumper"
+      :current-page="page"
+      :total="totalNum"
+      @current-change="changePage"
+    ></el-pagination>
+    <!-- 基地新增/修改 -->
+    <el-dialog
+      :title="title"
+      :visible.sync="baseAddVisible"
+      width="60%"
+      @close="addBaseDialogClosed"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="addBaseFormRef"
+        :model="addBaseInfo"
+        label-width="100px"
+        :rules="addUserFormRules"
+      >
+        <el-form-item label="基地名称:" prop="baseName">
+          <el-input v-model="addBaseInfo.baseName"></el-input>
+        </el-form-item>
+        <el-form-item label="基地图片:" prop="imgSrc">
+          <el-upload
+            class="avatar-uploader"
+            action
+            :auto-upload="false"
+            :show-file-list="false"
+            :on-change="changeUpload"
+          >
+            <img v-if="addBaseInfo.imgSrc" :src="addBaseInfo.imgSrc" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="负责人:" prop="principal">
+          <el-input v-model="addBaseInfo.principal" @input="principalinput"></el-input>
+        </el-form-item>
+        <el-form-item label="联系电话:" prop="phone">
+          <el-input v-model="addBaseInfo.phone"></el-input>
+        </el-form-item>
+        <el-form-item label="面积(亩):" prop="area">
+          <el-input type="number" min="0" v-model="addBaseInfo.area"></el-input>
+        </el-form-item>
+        <el-form-item label="绑定设备:" prop="bindEquip">
+          <!-- <el-cascader
+            filterable
+            :key="addBaseInfo.cascaderKey"
+            style="width: 100%"
+            :options="addBaseInfo.cascaderEquipArr"
+            v-model="addBaseInfo.bindEquip"
+            :props="{
+              multiple: true,
+              label: 'type_name',
+              value: 'type_name',
+              multiple: true
+            }"
+            clearable
+          ></el-cascader> -->
+          <el-row>
+            <el-col :span="22">
+              <el-tag
+                style="margin-right: 5px"
+                type="success"
+                v-for="item in addBaseInfo.bindEquip"
+                :key="item[1]"
+                >{{ `${item[0]}/${item[1]}` }}</el-tag
+              >
+            </el-col>
+            <el-col :span="2">
+              <el-button
+                type="primary"
+                size="small"
+                icon="el-icon-edit"
+                circle
+                @click="handleEditBindEquipment"
+              ></el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="基地描述:" prop="baseIntro">
+          <el-input type="textarea" v-model="addBaseInfo.baseIntro"></el-input>
+        </el-form-item>
+        <el-form-item label="基地地址:" prop="address" class="addressItem">
+          <el-input
+            type="text"
+            v-model="addBaseInfo.address"
+            disabled
+            placeholder="请定位"
+          ></el-input>
+          <el-button type="primary" size="mini" @click="goLocation">基地定位</el-button>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="baseAddVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addBaseSubm">确认</el-button>
+      </span>
+    </el-dialog>
+    <!-- vueCropper 剪裁图片实现-->
+    <el-dialog title="图片剪裁" :visible.sync="cropperVisible" append-to-body>
+      <div class="cropper-content">
+        <div style="width: 100%; height: 500px">
+          <vueCropper
+            ref="cropper"
+            :img="option.img"
+            autoCrop
+            centerBox
+            fixed
+            :fixedNumber="option.fixedNumber"
+            :outputSize="option.size"
+            :outputType="option.outputType"
+          ></vueCropper>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cropperVisible = false">取 消</el-button>
+        <el-button type="primary" @click="finish">确认</el-button>
+      </div>
+    </el-dialog>
+    <!-- 添加定位弹框 -->
+    <el-dialog
+      class="map_dialog"
+      title="添加定位"
+      v-if="addLocationDialogVisible"
+      :visible.sync="addLocationDialogVisible"
+      width="800px"
+      @closed="addLocationDialogClosed"
+    >
+      <!-- <el-form :inline="true" :model="locationForm" class="demo-form-inline" size="mini">
+        <el-form-item label="经度">
+          <el-input v-model="locationForm.lng"></el-input>
+        </el-form-item>
+        <el-form-item label="纬度">
+          <el-input v-model="locationForm.lat"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="locationSearch">定位</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-input @change="addrChange()" clearable placeholder="请输入地区检索" v-model="addr">
+            <i slot="suffix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+        </el-form-item>
+      </el-form> -->
+      <!-- <baidu-map
+        class="Bmap"
+        mapType="BMAP_HYBRID_MAP"
+        :center="center"
+        :zoom="mapZoom"
+        :scroll-wheel-zoom="true"
+        @ready="handlerBMap"
+        @click="locationPoint"
+      ></baidu-map> -->
+      <AreaPolygon @locationSelected="locationSelected" />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addLocationDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addLocationSubm">确 定</el-button>
+      </span>
+    </el-dialog>
+
+    <EquipmentDialog
+      :visible.sync="equipmentDialogVisible"
+      :baseID="addBaseInfo.base_id"
+      :bindEquipmentList="currentEquipmentList"
+      @submit="handleEquipmentBindSubmit"
+    />
+  </div>
+</template>
+<script>
+import EquipmentDialog from './components/EquipmentDialog.vue'
+import SearchBar from '@/components/SearchBar'
+import AreaPolygon from './AreaPolygon.vue'
+export default {
+  data() {
+    var checkMobile = (rule, value, callback) => {
+      const regMobile = /^1\d{10}$/
+      if (regMobile.test(value)) {
+        callback()
+      } else {
+        // 返回一个错误提示
+        callback(new Error('请输入合法的手机号码'))
+      }
+    }
+    var checkMobile2 = (rule, value, callback) => {
+      const regMobile = /^[A-Za-z0-9\u4e00-\u9fa5]+$/
+      if (regMobile.test(value)) {
+        callback()
+      } else {
+        // 返回一个错误提示
+        callback(new Error('请不要输入特殊字符！'))
+      }
+    }
+    return {
+      zanwu: '/images/expertDiagnosis/zanwu.png',
+      dialogTxt: '',
+      search: '',
+      page: 1,
+      flag: null, // 编辑基地提交为1，添加基地为2
+      totalNum: null,
+      pageSize: 6, // 设置每页显示条数
+      baseAddVisible: false,
+      cropperVisible: false,
+      title: '',
+      addBaseInfo: {
+        baseName: '',
+        imgSrc: '',
+        principal: '',
+        phone: '',
+        area: 0,
+        cascaderKey: 0, // 绑定key值，key值改变，cascader就重新渲染
+        cascaderEquipArr: [],
+        bindEquip: [],
+        baseIntro: '',
+        address: '',
+        lng: '',
+        lat: '',
+        base_id: ''
+      },
+      addUserFormRules: {
+        baseName: [
+          { required: true, message: '请输入基地名称', trigger: 'blur' },
+          { max: 20, message: '基地名称不能超过20个字符', trigger: 'blur' },
+          {
+            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
+            message: '不允许输入空格等特殊符号'
+          }
+        ],
+        imgSrc: [{ required: true, message: '请选择基地图片', trigger: 'change' }],
+        principal: [
+          { required: true, message: '请输入负责人', trigger: 'blur' },
+          {
+            max: 20,
+            message: '基地负责人名称不能超过20个字符',
+            trigger: 'blur'
+          },
+          { required: true, validator: checkMobile2, trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, trigger: 'blur', message: '手机号不能为空' },
+          { required: true, validator: checkMobile, trigger: 'blur' }
+        ],
+        cascaderEquipArr: [{ required: true, message: '请选择基地设备', trigger: 'change' }],
+        address: [{ required: true, message: '请选择基地地址', trigger: 'change' }],
+        baseIntro: [
+          { max: 700, message: '基地描述不能超过700个字符', trigger: 'blur' },
+          {
+            pattern: /^[A-Za-z0-9\u4e00-\u9fa5_,-.。;!？?]+$/,
+            message: '不允许输入空格等特殊符号'
+          }
+        ]
+      },
+      // 裁剪组件的基础配置option
+      option: {
+        img: 'https://qn-qn-kibey-../../assets-cdn.app-echo.com/goodboy-weixin.PNG', // 裁剪图片的地址
+        info: true, // 裁剪框的大小信息
+        outputSize: 0.8, // 裁剪生成图片的质量
+        outputType: 'jpeg', // 裁剪生成图片的格式
+        // canScale: false, // 图片是否允许滚轮缩放
+        // autoCrop: true, // 是否默认生成截图框
+        // autoCropWidth: 300, // 默认生成截图框宽度
+        // autoCropHeight: 200, // 默认生成截图框高度
+        // fixedBox: true, // 固定截图框大小 不允许改变
+        fixed: true, // 是否开启截图框宽高固定比例
+        fixedNumber: [10, 7], // 截图框的宽高比例
+        full: true, // 是否输出原图比例的截图
+        canMoveBox: false, // 截图框能否拖动
+        original: false, // 上传图片按照原始比例渲染
+        centerBox: false, // 截图框是否被限制在图片里面
+        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+      },
+      baseList: [],
+      // 添加基地定位
+      addLocationDialogVisible: false,
+      addr: '', // 地图检索的地址
+      locationForm: {
+        lng: '',
+        lat: ''
+      },
+      center: { lng: 113.271429, lat: 23.135336 },
+      mapZoom: 6,
+      equipmentDialogVisible: false,
+      currentEquipmentList: [] // 存储当前绑定的数据
+    }
+  },
+  filters: {
+    formatName: function (value) {
+      // 地址名称
+      if (value.length > 7) {
+        return value.slice(0, 7) + '...'
+      }
+    }
+  },
+  components: {
+    SearchBar,
+    EquipmentDialog,
+    AreaPolygon
+  },
+  created() {
+    this.getBaseList()
+  },
+  methods: {
+    locationSelected(locationForm) {
+      console.log('查询到了', locationForm)
+      this.locationForm = locationForm
+    },
+    getBaseList() {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=base.bases.base_list',
+        data: this.qs.stringify({
+          ret: 'list',
+          page_size: this.pageSize,
+          search: this.search,
+          page: this.page
+        })
+      }).then((res) => {
+        if (res.data.message == '') {
+          let data = res.data.data.data
+          let _this = this
+          this.baseList = []
+          getList(0, data.length)
+          function getList(j, length) {
+            let lat = data[j].lat
+            let lng = data[j].lng
+            // console.log(11111111111111)
+            _this
+              .$jsonp(`//restapi.amap.com/v3/geocode/regeo?output=json`, {
+                key: '78ce288400f4fc6d9458989875c833c2',
+                location: `${lng},${lat}`
+              })
+              .then((res) => {
+                // console.log(res);
+                let addressComponent = res.regeocode && res.regeocode.formatted_address
+                if (addressComponent) {
+                  data[j].address = res.regeocode.formatted_address
+                } else {
+                  data[j].address = ''
+                }
+                _this.baseList.push(data[j])
+                if (++j < length) {
+                  getList(j, length)
+                }
+              })
+          }
+          this.totalNum = res.data.data.page_size
+        }
+      })
+    },
+    searchBase() {
+      this.page = 1
+      this.getBaseList()
+    },
+    // 获取所有未绑定设备+自己已绑定的设备
+    getEquipList(id) {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=base.bases.base_equip',
+        data: this.qs.stringify({
+          base_id: id
+        })
+      }).then((res) => {
+        let data = res.data.data.data
+        this.addBaseInfo.cascaderEquipArr = data
+      })
+    },
+    changePage(val) {
+      this.page = val
+      this.getBaseList()
+    },
+    addBaseDialogClosed() {
+      this.$refs.addBaseFormRef.resetFields()
+      this.addBaseInfo.cascaderKey++
+      this.addBaseInfo.baseName = ''
+      this.addBaseInfo.baseName = ''
+      this.addBaseInfo.principal = ''
+      this.addBaseInfo.phone = ''
+      this.addBaseInfo.area = ''
+      this.addBaseInfo.imgSrc = ''
+      this.addBaseInfo.cascaderEquipArr = []
+      this.addBaseInfo.bindEquip = []
+      this.addBaseInfo.baseIntro = ''
+      this.addBaseInfo.address = ''
+      this.addBaseInfo.lat = ''
+      this.addBaseInfo.lng = ''
+      this.addBaseInfo.base_id = ''
+    },
+    // 添加/删除基地
+    addBaseSubm() {
+      this.$refs.addBaseFormRef.validate((valid) => {
+        if (valid) {
+          let arr = this.addBaseInfo.bindEquip.map((item) => {
+            return item[1]
+          })
+          if (this.flag == 1) {
+            let ret = 'modify'
+            // 编辑
+            this.baseFun(ret, arr, '修改成功')
+          } else if (this.flag == 2) {
+            let ret = 'add'
+            // 添加
+            this.baseFun(ret, arr, '添加成功')
+          }
+        } else {
+          return false
+        }
+      })
+      // this.getEquipList()
+    },
+    baseFun(ret, arr, txt) {
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=base.bases.base_list',
+        data: this.qs.stringify({
+          ret: ret,
+          base_id: this.addBaseInfo.base_id,
+          base_name: this.addBaseInfo.baseName,
+          base_charge: this.addBaseInfo.principal,
+          base_phone: this.addBaseInfo.phone,
+          base_area: this.addBaseInfo.area,
+          base_img: this.addBaseInfo.imgSrc, // 去掉/api/
+          base_equip: arr.join('#'),
+          base_describe: this.addBaseInfo.baseIntro,
+          lng: this.addBaseInfo.lng,
+          lat: this.addBaseInfo.lat
+        })
+      }).then((res) => {
+        if (res.data.message == '') {
+          this.baseAddVisible = false
+          this.getBaseList()
+          this.$message.success(txt)
+        }
+      })
+    },
+    // 上传按钮   限制图片大小
+    changeUpload(file, fileList) {
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isLt5M) {
+        this.$message.error('上传文件大小不能超过 5MB!')
+        return false
+      }
+      // 上传成功后将图片地址赋值给裁剪框显示图片
+      this.$nextTick(() => {
+        this.option.img = URL.createObjectURL(file.raw)
+        this.cropperVisible = true
+      })
+    },
+    // 点击裁剪，这一步是可以拿到处理后的地址
+    finish() {
+      // 获取截图的base64 数据
+      this.$refs.cropper.getCropBlob((data) => {
+        var form = new FormData()
+        let resFile = this.blobToFile(data, 'filename.jpg')
+        form.append('img_file', resFile)
+        this.cropperVisible = false
+        this.$axios({
+          method: 'POST',
+          url: '/api/api_gateway?method=base.bases.base_photo',
+          data: form
+        }).then((res) => {
+          if (res.data.message == '') {
+            this.addBaseInfo.imgSrc = res.data.data.src
+          }
+        })
+      })
+    },
+    // 转成blob
+    blobToFile(Blob, fileName) {
+      Blob.lastModifiedDate = new Date()
+      Blob.name = fileName
+      return Blob
+    },
+    dataURLtoFile(dataurl, filename) {
+      // 将base64转换为文件
+      var arr = dataurl.split(','),
+        mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]),
+        n = bstr.length,
+        u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+        // ie浏览器
+        return new Blob([u8arr.buffer], { type: mime })
+      } else {
+        // 主流浏览器
+        return new File([u8arr], filename, { type: mime })
+      }
+    },
+    goLocation() {
+      this.locationForm.lng = ''
+      this.locationForm.lat = ''
+      this.addr = ''
+      this.addLocationDialogVisible = true
+    },
+    addrChange() {
+      let local = new this.BMap.LocalSearch(this.map, {
+        onSearchComplete: (results) => {
+          console.log(results, ' addr change')
+          if (results.Yr && results.Yr.length) {
+            const data = results.Yr[0]
+            const { lng, lat } = data.point
+            this.locationForm.lng = lng
+            this.locationForm.lat = lat
+          }
+        },
+        renderOptions: {
+          map: this.map,
+          panel: 'r-result',
+          selectFirstResult: true
+        }
+      })
+      local.search(this.addr)
+      // const results = local.getResults();
+
+      console.log('local search results', local)
+    },
+    addLocationDialogClosed() {},
+    locationSearch() {},
+    handlerBMap({ BMap, map }) {
+      this.BMap = BMap
+      this.map = map
+    },
+    // 在地图中点击定位
+    locationPoint(e) {
+      let { point } = e
+      this.locationForm = point
+      this.map.clearOverlays()
+      this.map.addOverlay(new this.BMap.Marker(point))
+    },
+    addLocationSubm() {
+      let { lng, lat, address } = this.locationForm
+      console.log(this.locationForm)
+      this.addBaseInfo.lng = lng
+      this.addBaseInfo.lat = lat
+      this.addBaseInfo.address = address
+      this.addLocationDialogVisible = false // 关闭弹框
+    },
+    editBase(id, title, address) {
+      this.title = title
+      this.flag = 1
+      this.addBaseInfo.base_id = id
+      this.$axios({
+        method: 'POST',
+        url: '/api/api_gateway?method=base.bases.base_list',
+        data: this.qs.stringify({
+          ret: 'details',
+          base_id: id
+        })
+      }).then((res) => {
+        let item = res.data.data[0]
+        this.addBaseInfo.baseName = item.base_name
+        this.addBaseInfo.principal = item.base_charge
+        this.addBaseInfo.phone = item.base_phone
+        this.addBaseInfo.area = Number(item.base_area)
+        this.addBaseInfo.imgSrc = item.base_img
+        this.addBaseInfo.bindEquip = item.base_equip
+        this.addBaseInfo.baseIntro = item.base_describe
+        this.addBaseInfo.address = address
+        this.addBaseInfo.lat = item.lat
+        this.addBaseInfo.lng = item.lng
+        this.getEquipList(id) // 获取所有未绑定和已绑定的设备
+        this.dialogTxt = '编辑基地'
+        this.baseAddVisible = true
+      })
+    },
+    addBase(title) {
+      this.title = title
+      this.flag = 2
+      this.getEquipList('')
+      this.baseAddVisible = true
+      this.dialogTxt = '新建基地'
+    },
+    delBase(id) {
+      console.log(id)
+      this.$confirm(`确定删除基地么?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          if (this.totalNum == this.pageSize + 1) {
+            // 如果总条数与每页展示条数在加1的情况下相等，就是说当删除一条数据后页码会从2页变为1页，如果不改变当前page的话，列表会展示为空
+            this.page = 1
+          }
+          this.$axios({
+            method: 'POST',
+            url: '/api/api_gateway?method=base.bases.base_list',
+            data: this.qs.stringify({
+              ret: 'del',
+              base_id: id
+            })
+          }).then((res) => {
+            this.getBaseList()
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            })
+          })
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+    },
+    detailBase(id) {
+      this.$router.push({ path: '/index/baseShow', query: { id: id } })
+    },
+
+    // 点击进入全景
+    wholeScene(item) {
+      this.$router.push({
+        path: '/index/baseWholeimg',
+        query: {
+          img: item.base_img,
+          name: '基地管理',
+          url: '/index/fourMoodBase'
+        }
+      })
+    },
+
+    handleEditBindEquipment() {
+      this.currentEquipmentList = this.addBaseInfo.bindEquip
+      this.equipmentDialogVisible = true
+    },
+    handleEquipmentBindSubmit(data) {
+      console.log(data)
+      this.addBaseInfo.bindEquip = data || []
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.baseoperationbox {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+.boxCard {
+  position: relative;
+  .baseCard {
+    display: flex;
+    .baseImg {
+      flex: 1;
+      overflow: hidden;
+      height: 160px;
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+    .addBaseInfo {
+      flex: 1;
+      padding-left: 15px;
+      h2 {
+        font-size: 16px;
+        margin-bottom: 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 80%;
+      }
+      .addBaseInfoDetails {
+        display: flex;
+        padding-bottom: 10px;
+        color: #525252;
+        line-height: 18px;
+        font-size: 14px;
+        i {
+          font-size: 14px;
+        }
+        .caption {
+          margin-left: 5px;
+          // width: 70px;
+          width: 80px;
+          flex-grow: 0;
+          flex-shrink: 0;
+          text-align: left;
+        }
+        .addr {
+          flex-grow: 1;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          -webkit-box-orient: vertical;
+          min-height: 40px;
+        }
+      }
+    }
+  }
+  .baseEditBox {
+    position: absolute;
+    right: 20px;
+    top: 0;
+    cursor: pointer;
+    img {
+      width: 35px;
+    }
+  }
+  .baseBtn {
+    position: absolute;
+    right: 20px;
+    bottom: 10px;
+    line-height: 22px;
+    span {
+      display: inline-block;
+
+      width: 60px;
+      border-radius: 20px;
+      color: #666;
+      text-align: center;
+      cursor: pointer;
+    }
+    .delBtn {
+      background: #ddd;
+      font-size: 15px;
+    }
+    .detailBtn {
+      background: #14a478;
+      color: #fff;
+      margin-right: 10px;
+      font-size: 15px;
+    }
+  }
+}
+.avatar-uploader {
+  /deep/.el-upload {
+    .el-upload-dragge {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.col-item {
+  height: 223px;
+}
+.cropper {
+  width: auto;
+  height: 300px;
+}
+.addressItem {
+  /deep/.el-form-item__content {
+    display: flex;
+    .el-input {
+      flex: 1;
+      margin-right: 15px;
+    }
+  }
+}
+.Bmap {
+  width: 100%;
+  height: 400px;
+}
+
+.el-card {
+  position: relative;
+  .whole-icon {
+    display: none;
+    font-size: 16px;
+    position: absolute;
+    left: 25px;
+    top: 25px;
+    color: #f5f3f3;
+    cursor: pointer;
+    font-size: 35px;
+  }
+
+  &:hover {
+    .whole-icon {
+      display: block;
+    }
+  }
+}
+</style>

src/pages/fourMoodBase/baseManage.vue

@@ -265,6 +265,7 @@
         :center="center"
         :zoom="mapZoom"
         :scroll-wheel-zoom="true"
+        mapType="BMAP_HYBRID_MAP"
         @ready="handlerBMap"
         @click="locationPoint"
       ></baidu-map>
@@ -395,7 +396,8 @@ export default {
       center: { lng: 113.271429, lat: 23.135336 },
       mapZoom: 6,
       equipmentDialogVisible: false,
-      currentEquipmentList: [] // 存储当前绑定的数据
+      currentEquipmentList: [], // 存储当前绑定的数据
+      localSearch: null
     }
   },
   filters: {
@@ -605,7 +607,43 @@ export default {
       this.addLocationDialogVisible = true
     },
     addrChange() {
-      let local = new this.BMap.LocalSearch(this.map, {
+      // let local = new this.BMap.LocalSearch(this.map, {
+      //   onSearchComplete: (results) => {
+      //     console.log(results, ' addr change', results.Yr)
+      //     if (results.Yr && results.Yr.length) {
+      //       const data = results.Yr[0]
+      //       const { lng, lat } = data.point
+      //       this.locationForm.lng = lng
+      //       this.locationForm.lat = lat
+      //     }
+      //   },
+      //   renderOptions: {
+      //     map: this.map
+      //   }
+      // })
+      this.localSearch.search(this.addr)
+      // const that = this
+      // let myGeo = new this.BMap.Geocoder()
+      // myGeo.getPoint(this.addr, function (point) {
+      //   console.log(point, '----')
+      //   if (point) {
+      //     console.log(point)
+      //     that.map.centerAndZoom(point, 15)
+      //     // that.latitude = point.lat
+      //     // that.longitude = point.lng
+      //   }
+      // })
+
+      // const results = local.getResults();
+
+      console.log('local search results', this.BMap)
+    },
+    addLocationDialogClosed() {},
+    locationSearch() {},
+    handlerBMap({ BMap, map }) {
+      this.BMap = BMap
+      this.map = map
+      this.localSearch = new this.BMap.LocalSearch(this.map, {
         onSearchComplete: (results) => {
           console.log(results, ' addr change', results.Yr)
           if (results.Yr && results.Yr.length) {
@@ -616,28 +654,16 @@ export default {
           }
         },
         renderOptions: {
-          map: this.map,
-          panel: 'r-result',
-          selectFirstResult: true
+          map: this.map
         }
       })
-      local.search(this.addr)
-      // const results = local.getResults();
-
-      // console.log(results, 'local search results');
-    },
-    addLocationDialogClosed() {},
-    locationSearch() {},
-    handlerBMap({ BMap, map }) {
-      this.BMap = BMap
-      this.map = map
     },
     // 在地图中点击定位
     locationPoint(e) {
       let { point } = e
       this.locationForm = point
       this.map.clearOverlays()
-      this.map.addOverlay(new BMap.Marker(point))
+      this.map.addOverlay(new this.BMap.Marker(point))
     },
     addLocationSubm() {
       let { lng, lat } = this.locationForm

src/pages/fourMoodBase/baseShow.vue

@@ -8,7 +8,7 @@
         class="bm-view"
         :center="center"
         @ready="handler"
-        mapType="BMAP_NORMAL_MAP"
+        mapType="BMAP_HYBRID_MAP"
         :zoom="zoom"
         :scroll-wheel-zoom="true"
       >
@@ -66,9 +66,7 @@
               <div class="baseCon">
                 <div class="baseName">
                   <strong>{{ currBase.name }}</strong>
-                  <span class="lookBaseBtn" @click="lookBase(currBase.id)"
-                    >查看基地</span
-                  >
+                  <span class="lookBaseBtn" @click="lookBase(currBase.id)">查看基地</span>
                 </div>
                 <div class="baseInfoMsg">
                   <div>负 责 人 ：</div>
@@ -213,9 +211,7 @@
             </div>
           </div>
           <div class="bottomBox">
-            <el-button type="success" @click="gotoBasePage" size="mini"
-              >返回上一级</el-button
-            >
+            <el-button type="success" @click="gotoBasePage" size="mini">返回上一级</el-button>
           </div>
         </div>
       </el-card>
@@ -224,10 +220,7 @@
         <div class="caption">杀虫灯</div>
         <div>
           <div class="chart">
-            <highcharts
-              :options="scdoptions"
-              style="height: 280px"
-            ></highcharts>
+            <highcharts :options="scdoptions" style="height: 280px"></highcharts>
           </div>
         </div>
         <div class="detialCaption">
@@ -268,10 +261,7 @@
         </table>
 
         <div class="bottomBox">
-          <el-button
-            type="success"
-            @click="goEquipDetail('scdDetail', scdId)"
-            size="mini"
+          <el-button type="success" @click="goEquipDetail('scdDetail', scdId)" size="mini"
             >查看详情</el-button
           >
         </div>
@@ -359,10 +349,7 @@
         </table>
 
         <div class="bottomBox">
-          <el-button
-            type="success"
-            @click="goEquipDetail('cbdDataDetails')"
-            size="mini"
+          <el-button type="success" @click="goEquipDetail('cbdDataDetails')" size="mini"
             >查看详情</el-button
           >
         </div>
@@ -372,10 +359,7 @@
         <div class="caption">性诱测报</div>
         <div>
           <div class="chart">
-            <highcharts
-              :options="znxyoptions"
-              style="height: 230px"
-            ></highcharts>
+            <highcharts :options="znxyoptions" style="height: 230px"></highcharts>
           </div>
         </div>
         <div class="detialCaption">
@@ -418,10 +402,7 @@
         </table>
 
         <div class="bottomBox">
-          <el-button
-            type="success"
-            @click="goEquipDetail('xycbDataDetail')"
-            size="mini"
+          <el-button type="success" @click="goEquipDetail('xycbDataDetail')" size="mini"
             >查看详情</el-button
           >
         </div>
@@ -433,10 +414,7 @@
           <highcharts :options="qxzoptions" style="height: 400px"></highcharts>
         </div>
         <div class="bottomBox">
-          <el-button
-            type="success"
-            @click="goEquipDetail('historyData')"
-            size="mini"
+          <el-button type="success" @click="goEquipDetail('historyData')" size="mini"
             >查看详情</el-button
           >
         </div>
@@ -446,10 +424,7 @@
         <div class="caption">孢子仪</div>
         <div>
           <div class="chart">
-            <highcharts
-              :options="bzyoptions"
-              style="height: 230px"
-            ></highcharts>
+            <highcharts :options="bzyoptions" style="height: 230px"></highcharts>
           </div>
         </div>
         <div class="detialCaption">
@@ -516,10 +491,7 @@
         </table>
 
         <div class="bottomBox">
-          <el-button
-            type="success"
-            @click="goEquipDetail('dataDetail')"
-            size="mini"
+          <el-button type="success" @click="goEquipDetail('dataDetail')" size="mini"
             >查看详情</el-button
           >
         </div>
@@ -543,10 +515,7 @@
 				>
         </video>-->
         <div style="text-align: center; margin: 10px">
-          <el-button
-            type="primary"
-            @click="goEquipDetail('monitor')"
-            size="small"
+          <el-button type="primary" @click="goEquipDetail('monitor')" size="small"
             >进入监控详情</el-button
           >
         </div>
@@ -612,7 +581,7 @@ export default {
   },
   computed: {
     // 计算属性的 getter
-    equipPhotos: function() {
+    equipPhotos: function () {
       var len = this.equipImgs.length
 
       var n = 2 // 每行个数
@@ -659,9 +628,8 @@ export default {
             key: '78ce288400f4fc6d9458989875c833c2',
             location: `${lng},${lat}`
           })
-          .then(res => {
-            let addressComponent =
-              res.regeocode && res.regeocode.formatted_address
+          .then((res) => {
+            let addressComponent = res.regeocode && res.regeocode.formatted_address
             if (addressComponent) {
               data[index].address = res.regeocode.formatted_address
             } else {
@@ -678,7 +646,7 @@ export default {
       this.baseList = arr
     },
     getBaseInfo(baseList, id) {
-      let item2 = baseList.filter(item => {
+      let item2 = baseList.filter((item) => {
         return item.id == id
       })[0]
       this.currBase = {}
@@ -912,12 +880,12 @@ export default {
         data: this.qs.stringify({
           base_id: id
         })
-      }).then(res => {
+      }).then((res) => {
         let data = res.data.data
         let view = this.map.getViewport(data)
         this.zoom = view.zoom
         this.center = view.center
-        this.equipList = data.map(item => {
+        this.equipList = data.map((item) => {
           // 地图上渲染设备坐标
           this.iconFormat(item.equip_type, item)
           return item
@@ -1016,7 +984,7 @@ export default {
           ret: 'screen',
           page_number: 4
         })
-      }).then(res => {
+      }).then((res) => {
         if (res.data.message == '') {
           this.equipImgs = res.data.data.data
         }
@@ -1038,7 +1006,7 @@ export default {
       this.$jsonp(`//restapi.amap.com/v3/geocode/regeo?output=json`, {
         key: '78ce288400f4fc6d9458989875c833c2',
         location: `${item.lng},${item.lat}`
-      }).then(res => {
+      }).then((res) => {
         let addressComponent = res.regeocode && res.regeocode.formatted_address
         if (addressComponent) {
           this.currEquip.address = res.regeocode.formatted_address
@@ -1056,7 +1024,7 @@ export default {
             equip_id: item.device_id,
             equip_type: 2
           })
-        }).then(res => {
+        }).then((res) => {
           if (res.data.message == '') {
             let ct_data = res.data.data.ct_data
             let status = res.data.data.data[0]
@@ -1084,24 +1052,23 @@ export default {
             device_id: item.device_id
           })
         })
-          .then(res => {
+          .then((res) => {
             var data = res.data.data
             this.cbdState = data
           })
-          .catch(err => {
+          .catch((err) => {
             console.log(err)
           })
       } else if (item.equip_type == 4) {
         // 性诱测报
         this.$axios({
           method: 'POST',
-          url:
-            '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
+          url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
           data: this.qs.stringify({
             device_type_id: 4,
             d_id: item.d_id
           })
-        }).then(res => {
+        }).then((res) => {
           if (res.data.message == '') {
             let data = res.data.data
             let obj = {
@@ -1109,7 +1076,7 @@ export default {
               temperature: [],
               humidity: []
             }
-            data.forEach(item => {
+            data.forEach((item) => {
               obj.time.push(this.formatTime(item.addtime * 1000, 'MM-dd'))
               obj.temperature.push(item.temperature)
               obj.humidity.push(item.humidity)
@@ -1125,7 +1092,7 @@ export default {
             device_id: '86626204545021997',
             page_size: 1
           })
-        }).then(res => {
+        }).then((res) => {
           let dht = res.data.data.data[0].d_h_t
           this.znxyState = dht
         })
@@ -1137,7 +1104,7 @@ export default {
           data: this.qs.stringify({
             device_id: 16066009
           })
-        }).then(res => {
+        }).then((res) => {
           let arr = new Array()
           let conf = res.data.data.conf
           let dat = res.data.data.dat
@@ -1178,20 +1145,19 @@ export default {
         this.getPhoto(item.device_id)
         this.$axios({
           method: 'POST',
-          url:
-            '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
+          url: '/api/api_gateway?method=forecast.worm_lamp.device_polyline_data',
           data: this.qs.stringify({
             device_type_id: 7,
             d_id: item.d_id
           })
-        }).then(res => {
+        }).then((res) => {
           let data = res.data.data
           let obj = {
             time: [],
             temperature: [],
             humidity: []
           }
-          data.forEach(item => {
+          data.forEach((item) => {
             obj.time.unshift(this.formatTime(item.addtime * 1000, 'MM-dd'))
             obj.temperature.unshift(item.temperature)
             obj.humidity.unshift(item.humidity)
@@ -1206,7 +1172,7 @@ export default {
             device_id: item.device_id,
             page_size: 1
           })
-        }).then(res => {
+        }).then((res) => {
           let data = res.data.data.data[0].d_h_t
           this.bzyState = data
         })
@@ -1217,7 +1183,7 @@ export default {
           url: '/api/api_gateway?method=camera.camera_manage.addr_camera',
           method: 'POST',
           data: this.qs.stringify({ device_id: item.device_id })
-        }).then(res => {
+        }).then((res) => {
           if (res.data.message == '') {
             if (typeof res.data.data === 'string') {
               var data = eval('(' + res.data.data + ')')
@@ -1327,13 +1293,9 @@ export default {
           }
         })
       } else if (url == 'historyData') {
-        this.$router.push(
-          `/index/${url}/${this.currEquip.id}/${this.currEquip.d_id}`
-        )
+        this.$router.push(`/index/${url}/${this.currEquip.id}/${this.currEquip.d_id}`)
       } else {
-        this.$router.push(
-          `/index/${url}/${this.currEquip.id}/${this.currEquip.d_id}`
-        )
+        this.$router.push(`/index/${url}/${this.currEquip.id}/${this.currEquip.d_id}`)
       }
     },
     equipShowWindowOpen() {

test.html

@@ -3,200 +3,219 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vue2 高德地图地区查询与绘制</title>
+    <title>Vue2 百度地图位置搜索</title>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
-  <script src="https://webapi.amap.com/maps?v=2.0&key=b96a1c32b0bb828f1d153b219fa59ecc&plugin=AMap.ElasticMarker,AMap.PolygonEditor,AMap.DistrictSearch,AMap.ToolBar, AMap.Scale, AMap.MouseTool, AMap.Geocoder,AMap.Zoom"></script>
-
+    <script src="https://unpkg.com/vue-baidu-map"></script>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+            font-family: 'Microsoft YaHei', sans-serif;
         }
-
         body {
             background-color: #f5f7fa;
             color: #333;
             line-height: 1.6;
         }
-
         .container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
         }
-
         header {
             text-align: center;
             margin-bottom: 30px;
             padding: 20px;
-            background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
+            background: linear-gradient(135deg, #3385ff 0%, #2d6cfa 100%);
             color: white;
             border-radius: 10px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
-
         h1 {
             font-size: 2.2rem;
             margin-bottom: 10px;
         }
-
         .subtitle {
             font-size: 1.1rem;
             opacity: 0.9;
         }
-
         .app-container {
             display: flex;
-            flex-direction: column;
+            flex-wrap: wrap;
             gap: 20px;
         }
-
-        .search-panel {
+        .map-section {
+            flex: 2;
+            min-width: 300px;
+        }
+        .info-section {
+            flex: 1;
+            min-width: 300px;
             background: white;
+            border-radius: 10px;
             padding: 20px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+        .map-container {
+            width: 100%;
+            height: 500px;
             border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
-
         .search-box {
             display: flex;
-            gap: 10px;
-            margin-bottom: 15px;
+            margin-bottom: 20px;
         }
-
         .search-input {
             flex: 1;
             padding: 12px 15px;
             border: 1px solid #ddd;
-            border-radius: 6px;
+            border-radius: 5px 0 0 5px;
             font-size: 16px;
-            transition: border-color 0.3s;
+            outline: none;
+            transition: border 0.3s;
         }
-
         .search-input:focus {
-            outline: none;
-            border-color: #1e5799;
-            box-shadow: 0 0 0 2px rgba(30, 87, 153, 0.2);
+            border-color: #3385ff;
         }
-
-        .search-btn, .draw-btn, .clear-btn, .edit-btn {
-            padding: 12px 20px;
-            background: #1e5799;
+        .search-btn {
+            padding: 0 20px;
+            background: #3385ff;
             color: white;
             border: none;
-            border-radius: 6px;
+            border-radius: 0 5px 5px 0;
             cursor: pointer;
             font-size: 16px;
             transition: background 0.3s;
         }
-
-        .search-btn:hover, .draw-btn:hover, .edit-btn:hover {
-            background: #16457a;
+        .search-btn:hover {
+            background: #2d6cfa;
         }
-
-        .clear-btn {
-            background: #e74c3c;
+        .location-info {
+            margin-top: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border-left: 4px solid #3385ff;
         }
-
-        .clear-btn:hover {
-            background: #c0392b;
+        .info-title {
+            font-weight: bold;
+            margin-bottom: 10px;
+            color: #3385ff;
+            display: flex;
+            align-items: center;
         }
-
-        .edit-btn.active {
-            background: #27ae60;
+        .info-title i {
+            margin-right: 8px;
         }
-
-        .map-container {
-            height: 500px;
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        .coordinates, .address {
+            margin: 8px 0;
+            padding: 8px 0;
+            border-bottom: 1px dashed #e0e0e0;
         }
-
-        .controls {
+        .coordinates span, .address span {
+            font-weight: bold;
+            color: #555;
+        }
+        .coordinate-row {
             display: flex;
-            gap: 10px;
-            margin-top: 15px;
-            flex-wrap: wrap;
+            justify-content: space-between;
+            margin-bottom: 8px;
         }
-
-        .results-panel {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-            max-height: 200px;
+        .coordinate-system {
+            font-weight: bold;
+            color: #3385ff;
+        }
+        .coordinate-value {
+            font-family: monospace;
+            background: #eef5ff;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
+        .instruction {
+            margin-top: 20px;
+            padding: 15px;
+            background: #e8f4ff;
+            border-radius: 8px;
+            font-size: 14px;
+            color: #2c3e50;
+        }
+        .search-results {
+            margin-top: 20px;
+            max-height: 300px;
             overflow-y: auto;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
         }
-
         .result-item {
             padding: 10px 15px;
             border-bottom: 1px solid #eee;
             cursor: pointer;
             transition: background 0.2s;
         }
-
         .result-item:hover {
             background: #f0f7ff;
         }
-
         .result-item:last-child {
             border-bottom: none;
         }
-
-        .instructions {
-            background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-            margin-top: 20px;
+        .result-name {
+            font-weight: bold;
+            margin-bottom: 5px;
+            color: #3385ff;
         }
-
-        .instructions h3 {
-            color: #1e5799;
-            margin-bottom: 10px;
+        .result-address {
+            font-size: 14px;
+            color: #666;
         }
-
-        .instructions ul {
-            padding-left: 20px;
+        .result-distance {
+            font-size: 12px;
+            color: #888;
+            margin-top: 4px;
         }
-
-        .instructions li {
-            margin-bottom: 8px;
+        footer {
+            text-align: center;
+            margin-top: 30px;
+            padding: 20px;
+            color: #666;
+            font-size: 14px;
         }
-
-        .status {
-            margin-top: 10px;
+        .status-message {
             padding: 10px;
-            border-radius: 6px;
-            background: #e8f4fd;
-            color: #1e5799;
+            margin: 10px 0;
+            border-radius: 5px;
+            text-align: center;
         }
-
-        .drawing-status {
-            background: #fff8e1;
-            color: #ff9800;
+        .status-success {
+            background-color: #e8f5e9;
+            color: #2e7d32;
         }
-
-        .editing-status {
-            background: #e8f6f3;
-            color: #27ae60;
+        .status-error {
+            background-color: #ffebee;
+            color: #c62828;
         }
-
-        @media (min-width: 768px) {
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #3385ff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @media (max-width: 768px) {
             .app-container {
-                flex-direction: row;
-            }
-
-            .search-panel {
-                width: 300px;
-                flex-shrink: 0;
+                flex-direction: column;
             }
-
             .map-container {
-                flex: 1;
+                height: 300px;
             }
         }
     </style>
@@ -204,336 +223,238 @@
 <body>
     <div id="app" class="container">
         <header>
-            <h1>Vue2 高德地图地区查询与绘制</h1>
-            <p class="subtitle">搜索地区并在高德地图上绘制区域边界</p>
+            <h1>Vue2 百度地图位置搜索</h1>
+            <p class="subtitle">使用 vue-baidu-map 插件实现位置搜索功能</p>
         </header>
 
         <div class="app-container">
-            <div class="search-panel">
-                <h3>地区搜索</h3>
+            <div class="map-section">
                 <div class="search-box">
-                    <input
-                        type="text"
-                        class="search-input"
-                        placeholder="输入地区名称，如：北京市朝阳区"
-                        v-model="searchKeyword"
-                        @keyup.enter="searchPlace"
-                    >
-                    <button class="search-btn" @click="searchPlace">搜索</button>
+                    <input type="text" v-model="searchKeyword" class="search-input" placeholder="输入地点名称进行搜索..." @keyup.enter="searchPlace">
+                    <button @click="searchPlace" class="search-btn">搜索</button>
                 </div>
 
-                <div class="controls">
-                    <button class="draw-btn" @click="toggleDrawingMode">
-                        {{ drawingMode ? '退出绘制模式' : '进入绘制模式' }}
-                    </button>
-                    <button class="edit-btn" :class="{active: editingMode}" @click="toggleEditingMode">
-                        {{ editingMode ? '退出编辑模式' : '进入编辑模式' }}
-                    </button>
-                    <button class="clear-btn" @click="clearMap">清除地图</button>
+                <div v-if="statusMessage" class="status-message" :class="statusClass">
+                    {{ statusMessage }}
                 </div>
 
-                <div class="status" :class="statusClass">
-                    {{ statusMessage }}
+                <!-- 百度地图容器 -->
+                <baidu-map class="map-container"
+                          :center="mapCenter"
+                          :zoom="zoom"
+                          :scroll-wheel-zoom="true"
+                          @ready="mapReady"
+                          @click="mapClick">
+                    <!-- 地图标记 -->
+                    <bm-marker :position="markerPosition"
+                              :dragging="true"
+                              @dragend="markerDragEnd"
+                              v-if="markerPosition.lng">
+                    </bm-marker>
+
+                    <!-- 本地搜索 -->
+                    <bm-local-search :keyword="searchKeyword"
+                                   :auto-viewport="true"
+                                   :location="searchLocation"
+                                   @searchcomplete="searchComplete"
+                                   @infohtmlset="infoHtmlSet"
+                                   v-if="searchKeyword && isMapReady">
+                    </bm-local-search>
+                </baidu-map>
+            </div>
+
+            <div class="info-section">
+                <h2 class="info-title"><i>📍</i> 位置信息</h2>
+
+                <div v-if="selectedLocation" class="location-info">
+                    <div class="coordinates">
+                        <div class="coordinate-row">
+                            <span class="coordinate-system">经纬度:</span>
+                            <span class="coordinate-value">{{ selectedLocation.lng.toFixed(6) }}, {{ selectedLocation.lat.toFixed(6) }}</span>
+                        </div>
+                    </div>
+                    <div class="address">
+                        <span>详细地址：</span>
+                        {{ selectedLocation.address || '正在获取中...' }}
+                    </div>
                 </div>
 
-                <div class="results-panel" v-if="searchResults.length > 0">
-                    <h4>搜索结果 ({{ searchResults.length }})</h4>
-                    <div
-                        class="result-item"
-                        v-for="(result, index) in searchResults"
-                        :key="index"
-                        @click="selectResult(result)"
-                    >
-                        <strong>{{ result.name }}</strong><br>
-                        <small>{{ result.district }}{{ result.address }}</small>
+                <div v-else class="instruction">
+                    请点击地图上的任意位置，或使用搜索功能选择地点，此处将显示该位置的坐标信息和详细地址。
+                </div>
+
+                <div v-if="searchResults.length > 0" class="search-results">
+                    <h3>搜索结果 ({{ searchResults.length }})</h3>
+                    <div v-for="(result, index) in searchResults" :key="index"
+                         class="result-item" @click="selectSearchResult(result)">
+                        <div class="result-name">{{ result.title }}</div>
+                        <div class="result-address">{{ result.address }}</div>
+                        <div class="result-distance" v-if="result.distance">距离: {{ result.distance }}米</div>
                     </div>
                 </div>
             </div>
-
-            <div class="map-container" id="map-container"></div>
         </div>
 
-        <div class="instructions">
-            <h3>使用说明</h3>
-            <ul>
-                <li>在搜索框中输入地区名称（如"北京市朝阳区"）并点击搜索或按Enter键</li>
-                <li>点击搜索结果项可在地图上定位到该地区</li>
-                <li>点击"进入绘制模式"可手动在地图上绘制多边形区域</li>
-                <li>绘制完成后，点击第一个点或双击可完成绘制</li>
-                <li>点击"进入编辑模式"可选择并编辑已绘制的区域</li>
-                <li>点击"清除地图"可移除所有标记和绘制区域</li>
-            </ul>
-        </div>
+        <footer>
+            <p>Vue2 + 百度地图位置搜索示例 | 使用 vue-baidu-map 插件</p>
+        </footer>
     </div>
-    <script type="text/javascript">
-      window._AMapSecurityConfig = {
-        serviceHost: 'http://47.110.79.22:9000/_AMapService',
-      }
-    </script>
+
     <script>
-        // 请替换为您的高德地图API密钥
-        const AMAP_KEY = 'b96a1c32b0bb828f1d153b219fa59ecc';
+        // 配置百度地图AK（实际使用时请替换为您的AK）
+        Vue.use(window.VueBaiduMap.default, {
+            ak: '您的百度地图AK'
+        });
 
         new Vue({
             el: '#app',
             data: {
                 map: null,
+                BMap: null,
+                isMapReady: false,
+                mapCenter: {lng: 116.404, lat: 39.915}, // 默认中心点（北京）
+                zoom: 12,
                 searchKeyword: '',
+                searchLocation: '北京',
+                selectedLocation: null,
+                markerPosition: {},
                 searchResults: [],
-                drawingMode: false,
-                editingMode: false,
-                mouseTool: null,
-                polygonEditor: null,
-                polygons: [],
-                markers: [],
-                selectedPolygon: null,
-                statusMessage: '请输入地区名称进行搜索',
+                statusMessage: '',
                 statusClass: ''
             },
-            computed: {
-                statusClass() {
-                    if (this.drawingMode) return 'drawing-status';
-                    if (this.editingMode) return 'editing-status';
-                    return '';
-                }
-            },
             mounted() {
-                this.initMap();
+                // 组件挂载后，地图会在ready回调中初始化
             },
             methods: {
-                initMap() {
-                    // 初始化地图
-                    this.map = new AMap.Map('map-container', {
-                        zoom: 10,
-                        center: [116.397428, 39.90923], // 默认中心点（北京）
-                        viewMode: '3D'
-                    });
-
-                    // 添加缩放控件
-                    // this.map.addControl(new AMap.Zoom());
-
-                    // 添加比例尺控件
-                    this.map.addControl(new AMap.Scale());
-
-                    // 初始化鼠标工具
-                    this.mouseTool = new AMap.MouseTool(this.map);
-
-                    // 监听绘制完成事件
-                    this.mouseTool.on('draw', (event) => {
-                        if (event.obj instanceof AMap.Polygon) {
-                            const polygon = event.obj;
-                            this.polygons.push(polygon);
-
-                            // 添加右键菜单删除功能
-                            this.addPolygonContextMenu(polygon);
-
-                            this.statusMessage = `已绘制区域，顶点数: ${polygon.getPath().length}`;
+                // 地图初始化完成回调
+                mapReady({BMap, map}) {
+                    this.BMap = BMap;
+                    this.map = map;
+                    this.isMapReady = true;
+                    this.showStatus('地图加载完成', 'status-success');
+
+                    // 添加地图控件
+                    map.addControl(new BMap.NavigationControl());
+                    map.addControl(new BMap.ScaleControl());
+                    map.addControl(new BMap.OverviewMapControl());
+
+                    console.log('百度地图初始化完成');
+                },
 
-                            // 自动退出绘制模式
-                            this.drawingMode = false;
+                // 地图点击事件
+                mapClick(e) {
+                    if (!this.isMapReady) return;
+
+                    const point = e.point;
+                    this.markerPosition = {lng: point.lng, lat: point.lat};
+
+                    // 使用逆地理编码获取地址
+                    const geocoder = new this.BMap.Geocoder();
+                    geocoder.getLocation(point, (result) => {
+                        if (result) {
+                            this.selectedLocation = {
+                                lng: point.lng,
+                                lat: point.lat,
+                                address: result.address
+                            };
+                            this.showStatus('位置选择成功', 'status-success');
                         }
                     });
+                },
 
-                    this.statusMessage = '地图加载完成，请输入地区名称进行搜索';
+                // 标记点拖拽结束
+                markerDragEnd(e) {
+                    const point = e.point;
+                    this.markerPosition = {lng: point.lng, lat: point.lat};
+
+                    // 使用逆地理编码获取地址
+                    const geocoder = new this.BMap.Geocoder();
+                    geocoder.getLocation(point, (result) => {
+                        if (result) {
+                            this.selectedLocation = {
+                                lng: point.lng,
+                                lat: point.lat,
+                                address: result.address
+                            };
+                            this.showStatus('位置已更新', 'status-success');
+                        }
+                    });
                 },
 
+                // 执行地点搜索
                 searchPlace() {
                     if (!this.searchKeyword.trim()) {
-                        this.statusMessage = '请输入搜索关键词';
+                        this.showStatus('请输入搜索关键词', 'status-error');
                         return;
                     }
 
-                    this.statusMessage = '搜索中...';
-
-                    // 使用高德地图PlaceSearch插件进行搜索
-                    AMap.plugin('AMap.PlaceSearch', () => {
-                        const placeSearch = new AMap.PlaceSearch({
-                            pageSize: 10,
-                            pageIndex: 1,
-                            citylimit: false
-                        });
-
-                        placeSearch.search(this.searchKeyword, (status, result) => {
-                            if (status === 'complete' && result.poiList && result.poiList.pois) {
-                                this.searchResults = result.poiList.pois;
-                                this.statusMessage = `找到 ${this.searchResults.length} 个结果`;
-                            } else {
-                                this.searchResults = [];
-                                this.statusMessage = '未找到相关结果，请尝试其他关键词';
-                            }
-                        });
-                    });
-                },
-
-                selectResult(result) {
-                    // 清除之前的标记
-                    this.clearMarkers();
-
-                    // 添加标记
-                    const marker = new AMap.Marker({
-                        position: [result.location.lng, result.location.lat],
-                        title: result.name,
-                        map: this.map
-                    });
-
-                    this.markers.push(marker);
-
-                    // 移动到标记位置
-                    this.map.setZoom(15);
-                    this.map.setCenter([result.location.lng, result.location.lat]);
-
-                    this.statusMessage = `已定位到: ${result.name}`;
-                },
-
-                toggleDrawingMode() {
-                    if (this.editingMode) {
-                        this.toggleEditingMode(); // 先退出编辑模式
+                    if (!this.isMapReady) {
+                        this.showStatus('地图尚未加载完成，请稍后再试', 'status-error');
+                        return;
                     }
 
-                    this.drawingMode = !this.drawingMode;
+                    this.showStatus('搜索中...', '');
+                    console.log('搜索关键词:', this.searchKeyword);
 
-                    if (this.drawingMode) {
-                        // 进入绘制模式
-                        this.mouseTool.polygon({
-                            strokeColor: '#1e5799',
-                            strokeOpacity: 1,
-                            strokeWeight: 3,
-                            fillColor: '#1e5799',
-                            fillOpacity: 0.3,
-                            strokeStyle: 'solid'
-                        });
-
-                        this.statusMessage = '绘制模式：请在地图上点击绘制多边形区域，双击或点击第一个点完成绘制';
-                    } else {
-                        // 退出绘制模式
-                        this.mouseTool.close(true);
-                        this.statusMessage = '已退出绘制模式';
-                    }
+                    // 清空之前的结果
+                    this.searchResults = [];
                 },
 
-                toggleEditingMode() {
-                    if (this.drawingMode) {
-                        this.toggleDrawingMode(); // 先退出绘制模式
-                    }
-
-                    this.editingMode = !this.editingMode;
-
-                    if (this.editingMode) {
-                        this.statusMessage = '编辑模式：请点击要编辑的多边形区域';
-
-                        // 为所有多边形添加点击事件
-                        this.polygons.forEach(polygon => {
-                            polygon.on('click', () => {
-                                this.startEditPolygon(polygon);
-                            });
-                        });
+                // 搜索完成回调
+                searchComplete(results) {
+                    if (!results) return;
+
+                    // 将搜索结果转换为简单格式
+                    this.searchResults = results.Kr && results.Kr.map(item => {
+                        return {
+                            title: item.title,
+                            address: item.address,
+                            point: item.point,
+                            distance: item.distance || null
+                        };
+                    }) || [];
+
+                    if (this.searchResults.length > 0) {
+                        this.showStatus(`找到 ${this.searchResults.length} 个结果`, 'status-success');
                     } else {
-                        this.stopEditPolygon();
-                        this.statusMessage = '已退出编辑模式';
+                        this.showStatus('未找到相关地点', 'status-error');
                     }
-                },
-
-                startEditPolygon(polygon) {
-                    // 停止之前的编辑
-                    this.stopEditPolygon();
-
-                    // 开始编辑选中的多边形
-                    this.selectedPolygon = polygon;
-
-                    // 加载PolyEditor插件
-                    AMap.plugin('AMap.PolyEditor', () => {
-                        this.polygonEditor = new AMap.PolyEditor(this.map, polygon);
-                        this.polygonEditor.open();
 
-                        this.statusMessage = '正在编辑多边形，拖动顶点或边进行调整';
-
-                        // 监听编辑事件
-                        this.polygonEditor.on('adjust', (event) => {
-                            this.statusMessage = '正在调整多边形顶点';
-                        });
-
-                        this.polygonEditor.on('end', (event) => {
-                            this.statusMessage = `编辑完成，当前顶点数: ${polygon.getPath().length}`;
-                        });
-                    });
+                    console.log('搜索结果:', this.searchResults);
                 },
 
-                stopEditPolygon() {
-                    if (this.polygonEditor) {
-                        this.polygonEditor.close();
-                        this.polygonEditor = null;
-                    }
-                    this.selectedPolygon = null;
-
-                    // 移除多边形的点击事件
-                    this.polygons.forEach(polygon => {
-                        polygon.off('click');
-                    });
-                },
-
-                addPolygonContextMenu(polygon) {
-                    // 添加右键菜单删除功能
-                    polygon.on('rightclick', (e) => {
-                        // 创建右键菜单
-                        const menu = new AMap.ContextMenu();
-
-                        menu.addItem("删除此区域", () => {
-                            // 从地图移除
-                            polygon.setMap(null);
-
-                            // 从数组中移除
-                            const index = this.polygons.indexOf(polygon);
-                            if (index > -1) {
-                                this.polygons.splice(index, 1);
-                            }
-
-                            this.statusMessage = '已删除选中区域';
-
-                            // 如果正在编辑此多边形，停止编辑
-                            if (this.selectedPolygon === polygon) {
-                                this.stopEditPolygon();
-                                this.editingMode = false;
-                            }
-                        }, 0);
-
-                        // 在点击位置打开菜单
-                        menu.open(this.map, e.lnglat);
-                    });
+                // 信息窗口内容设置回调
+                infoHtmlSet(e) {
+                    // 可以在这里处理信息窗口内容
+                    console.log('信息窗口内容:', e);
                 },
 
-                clearMap() {
-                    // 清除所有标记
-                    this.clearMarkers();
+                // 选择搜索结果
+                selectSearchResult(result) {
+                    this.markerPosition = {lng: result.point.lng, lat: result.point.lat};
+                    this.mapCenter = this.markerPosition;
+                    this.zoom = 16;
 
-                    // 清除所有多边形
-                    this.clearPolygons();
+                    this.selectedLocation = {
+                        lng: result.point.lng,
+                        lat: result.point.lat,
+                        address: result.address
+                    };
 
-                    // 退出绘制和编辑模式
-                    if (this.drawingMode) {
-                        this.drawingMode = false;
-                        this.mouseTool.close(true);
-                    }
-
-                    if (this.editingMode) {
-                        this.editingMode = false;
-                        this.stopEditPolygon();
-                    }
-
-                    this.statusMessage = '地图已清除';
+                    this.showStatus(`已选择: ${result.title}`, 'status-success');
                 },
 
-                clearMarkers() {
-                    this.markers.forEach(marker => {
-                        marker.setMap(null);
-                    });
-                    this.markers = [];
-                },
+                // 显示状态消息
+                showStatus(message, className) {
+                    this.statusMessage = message;
+                    this.statusClass = className;
 
-                clearPolygons() {
-                    this.polygons.forEach(polygon => {
-                        polygon.setMap(null);
-                    });
-                    this.polygons = [];
+                    // 3秒后自动清除消息
+                    if (className !== '') {
+                        setTimeout(() => {
+                            this.statusMessage = '';
+                        }, 3000);
+                    }
                 }
             }
         });