饮用水点位修正

src/api/gis/gisApi.js

@@ -61,6 +61,10 @@ const updateRiverCorrectLocation = function (data) { //
 const updateLakeCorrectLocation = function (data) { //
   return axios.post("/water/visualiz/updateLakePointLocation", data)
 }
+
+const updateDrinkCorrectLocation = function (data) { //
+  return axios.post("/water/visualiz/updateDrinkPointLocation", data)
+}
 export {
   getLakePlace,
   getAirGis,
@@ -75,5 +79,6 @@ export {
   waterCounty,
   waterVillage,
   updateRiverCorrectLocation,
-  updateLakeCorrectLocation
+  updateLakeCorrectLocation,
+  updateDrinkCorrectLocation
 }

src/views/visualiz/water/drInking/index.vue

@@ -26,10 +26,16 @@
     <mapNominal :param="nominalList"></mapNominal>
     <!--    <map-table-center :rowData="pointData"></map-table-center>-->
     <map-table :rowData="pointData"></map-table>
+    <a-modal @ok="updateCorrectLocation" :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
+             v-model:visible="visibleRoadMap" :title="roadMapTitle"
+    >
+      <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+    </a-modal>
   </div>
 </template>
 <script>
 import {
+  updateDrinkCorrectLocation,
   waterCity,
   waterCounty,
   waterVillage
@@ -72,7 +78,8 @@ export default {
       searchKey: "",
       searchId: -1,
       regionLevel: "城市",
-      nominalList: [{
+      nominalList: [
+        {
         "text": "I类",
         "color": "#80BC1C",
         "common": "I",
@@ -102,7 +109,11 @@ export default {
         "color": "#DA251C",
         "common": "劣Ⅴ",
         "desc": "劣五类"
-      }]
+      }],
+      // 字典表单
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
+      form: {},
     }
   },
   mounted() {
@@ -212,7 +223,7 @@ export default {
           }
         })
         // eslint-disable-next-line no-undef
-        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.longitude, item.latitude), index, color);
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.correctLng?item.correctLng: item.longitude, item.correctLat?item.correctLat: item.latitude), index, color);
         that.map.addOverlay(myCompOverlay);//将标注添加到地图中
         myCompOverlay.addEventListener('mouseover', function (e) {
           let currentId = e.target.getAttribute("id")
@@ -242,11 +253,19 @@ export default {
           that.currentY = 0
           that.tipFlag = false
         },true)
+
+        myCompOverlay.addEventListener('contextmenu',function (e){
+          console.log("右键")
+          let currentId = e.target.getAttribute("id")
+          const {longitude, latitude, correctLng, correctLat,pointDictId,waterSourceType} = that.pointData[currentId.substring(2, currentId.length)]
+          that.form = {longitude, latitude, correctLng, correctLat,pointDictId,waterSourceType}
+          that.showRoadMap(that.form);
+        })
       })
     },
-    whereChange(e) {
+    whereChange() {
       that.map.clearOverlays();
-      let type = e ? e.target.value : "城市"
+      let type = this.regionLevel
       if (type == "城市") {
         // eslint-disable-next-line no-undef
         that.map.centerAndZoom(new BMap.Point(108.33, 22.84), that.zoom);
@@ -297,6 +316,84 @@ export default {
           }
         })
       }
+    },
+    showRoadMap(form) {
+      const {longitude, latitude, correctLng, correctLat} = form
+      this.visibleRoadMap = true
+      // this.roadMapTitle = "选择修正后的道路坐标"
+      this.$nextTick(() => {
+        console.log(this.$refs.roadMap)
+        // eslint-disable-next-line no-undef
+        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.NavigationControl());  //初始化地图控件
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.ScaleControl());
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.OverviewMapControl());
+        // eslint-disable-next-line no-undef
+        var point = new BMap.Point(correctLng ? correctLng : longitude ? longitude : 108.33, correctLat ? correctLat : latitude ? latitude : 22.84);
+        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        // eslint-disable-next-line no-undef
+        var marker = new BMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+        // eslint-disable-next-line no-undef
+        var gc = new BMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        marker.addEventListener("dragend", (e) => {
+          //获取地址信息
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs) {
+          var opts = {
+            width: 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title: ""  //信息窗口标题
+          }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+          // eslint-disable-next-line no-undef
+          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
+    updateCorrectLocation(){
+      const {correctLng, correctLat,pointDictId,waterSourceType} =  that.form;
+      const reqData = {correctLng, correctLat,id:pointDictId};
+      if(this.regionLevel == "城市"){
+        reqData.type = "city"
+      }else if(this.regionLevel == "区县"){
+        reqData.type = "county"+waterSourceType
+      }else if(this.regionLevel == "农村"){
+        reqData.type = "village"+waterSourceType
+      }
+      updateDrinkCorrectLocation(reqData).then(res=>{
+        if(res.data.code == 0){
+          this.whereChange()
+          this.visibleRoadMap = false
+        }
+      })
+
     }
   }
 }

src/views/water/drinking-water/dict/cityWaterDict.vue

@@ -20,7 +20,8 @@
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-space>
               <a-button type="primary" @click="reload">查询</a-button>
-                            <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
+              <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
+              </a-button>
               <a-button @click="exportData" type="primary">按年份导出</a-button>
             </a-space>
           </a-col>
@@ -44,7 +45,7 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="新年份" name="nYear">
-                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
+            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -65,55 +66,73 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="年份" name="year">
-                        <a-input-number v-model:value="form.year"  :min="1970" :max="2050" />
+            <a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
           </a-form-item>
           <a-form-item label="省" name="province">
-                        <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear />
+            <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear/>
           </a-form-item>
           <a-form-item label="省份代码" name="provinceCode">
-                        <a-input v-model:value="form.provinceCode" placeholder="请输入省份代码" allow-clear />
+            <a-input v-model:value="form.provinceCode" placeholder="请输入省份代码" allow-clear/>
           </a-form-item>
           <a-form-item label="市" name="city">
-                        <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear />
+            <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear/>
           </a-form-item>
           <a-form-item label="城市代码" name="cityCode">
-                        <a-input v-model:value="form.cityCode" placeholder="请输入城市代码" allow-clear />
+            <a-input v-model:value="form.cityCode" placeholder="请输入城市代码" allow-clear/>
           </a-form-item>
           <a-form-item label="重点城市区分" name="keyCity">
-                        <a-input v-model:value="form.keyCity" placeholder="请输入重点城市区分" allow-clear />
+            <a-input v-model:value="form.keyCity" placeholder="请输入重点城市区分" allow-clear/>
           </a-form-item>
           <a-form-item label="城市方位" name="cityOrientation">
-                        <a-input v-model:value="form.cityOrientation" placeholder="请输入城市方位" allow-clear />
+            <a-input v-model:value="form.cityOrientation" placeholder="请输入城市方位" allow-clear/>
           </a-form-item>
           <a-form-item label="断面名称" name="sectionName">
-                        <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
+            <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear/>
           </a-form-item>
           <a-form-item label="断面代码" name="sectionCode">
-                        <a-input v-model:value="form.sectionCode" placeholder="请输入断面代码" allow-clear />
+            <a-input v-model:value="form.sectionCode" placeholder="请输入断面代码" allow-clear/>
           </a-form-item>
           <a-form-item label="水源名称" name="sourceWaterName">
-                        <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear />
+            <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear/>
           </a-form-item>
           <a-form-item label="水质目标" name="waterTarget">
-                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
+            <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear/>
           </a-form-item>
           <a-form-item label="所属水系" name="subordinateWater">
-                        <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear />
+            <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear/>
           </a-form-item>
           <a-form-item label="水源地性质" name="waterSourceProperty">
-                        <a-input v-model:value="form.waterSourceProperty" placeholder="请输入水源地性质" allow-clear />
+            <a-input v-model:value="form.waterSourceProperty" placeholder="请输入水源地性质" allow-clear/>
           </a-form-item>
           <a-form-item label="经度(°)" name="longitude">
-                        <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear />
+            <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear/>
           </a-form-item>
           <a-form-item label="纬度(°)" name="latitude">
-                        <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
+            <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear/>
           </a-form-item>
+          <a-form-item label="修正位置" name="correctLocation">
+            <a-input-search @search="showRoadMap(form)"
+                            :value="`[${form.correctLng},${form.correctLat}]`"
+                            placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
+              <template #enterButton>
+                <a-button>选择位置</a-button>
+              </template>
+            </a-input-search>
+          </a-form-item>
+
+          <a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
+                   v-model:visible="visibleRoadMap" :title="roadMapTitle"
+          >
+            <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+            <template #footer>
+              <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
+            </template>
+          </a-modal>
           <a-form-item label="排序" name="sortNum">
-                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+            <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear/>
           </a-form-item>
           <a-form-item label="饮用水类型，1在用、2备用" name="drinkingWaterType">
-                        <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear />
+            <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -169,7 +188,8 @@
               type="primary"
               shape="round"
               size="small"
-                        >修改</a-button
+            >修改
+            </a-button
             >
             <a-popconfirm
               :title="`确认删除这条数据吗?`"
@@ -178,7 +198,8 @@
               @confirm="remove(record)"
             >
               <a-button type="primary" danger shape="round" size="small"
-                            >删除</a-button
+              >删除
+              </a-button
               >
             </a-popconfirm>
           </a-space>
@@ -203,8 +224,9 @@ import {
   copyBatchPlace
 } from "@/api/ecology/drinking-water-dict";
 // import moment from "moment";
-  import {DownOutlined} from '@ant-design/icons-vue';
+import {DownOutlined} from '@ant-design/icons-vue';
-  import XLSX from "xlsx";
+import XLSX from "xlsx";
+
 export default {
   name: "DrinkWaterDict",
   components: {DownOutlined},
@@ -216,21 +238,28 @@ export default {
       selection: [],
       // 表格列配置
       columns: [
-                {title: "年份",dataIndex: "year",sorter: true,},
+        {title: "年份", dataIndex: "year", sorter: true,},
-                {title: "省",dataIndex: "province",sorter: true,},
+        {title: "省", dataIndex: "province", sorter: true,},
-                {title: "省份代码",dataIndex: "provinceCode",sorter: true,},
+        {title: "省份代码", dataIndex: "provinceCode", sorter: true,},
-                {title: "市",dataIndex: "city",sorter: true},
+        {title: "市", dataIndex: "city", sorter: true},
-                {title: "城市代码",dataIndex: "cityCode",sorter: true},
+        {title: "城市代码", dataIndex: "cityCode", sorter: true},
-                {title: "重点城市区分",dataIndex: "keyCity",sorter: true},
+        {title: "重点城市区分", dataIndex: "keyCity", sorter: true},
-                {title: "城市方位",dataIndex: "cityOrientation",sorter: true,},
+        {title: "城市方位", dataIndex: "cityOrientation", sorter: true,},
-                {title: "断面名称",dataIndex: "sectionName",sorter: true},
+        {title: "断面名称", dataIndex: "sectionName", sorter: true},
-                {title: "断面代码",dataIndex: "sectionCode",sorter: true,},
+        {title: "断面代码", dataIndex: "sectionCode", sorter: true,},
-                {title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
+        {title: "水源名称", dataIndex: "sourceWaterName", sorter: true,},
-                {title: "所属水系",dataIndex: "subordinateWater",sorter: true,},
+        {title: "所属水系", dataIndex: "subordinateWater", sorter: true,},
-                {title: "水源地性质",dataIndex: "waterSourceProperty",sorter: true},
+        {title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true},
-                {title: "经度(°)",dataIndex: "longitude",sorter: true,},
+        {title: "经度(°)", dataIndex: "longitude", sorter: true,},
-                {title: "纬度(°)",dataIndex: "latitude",sorter: true,},
+        {title: "纬度(°)", dataIndex: "latitude", sorter: true,},
-                {title: "饮用水类型",dataIndex: "drinkingWaterType",sorter: true,customRender: ({text})=> text == 1?"在用":"备用"},
+        {title: "修正经度", dataIndex: "correctLng"},
+        {title: "修正纬度", dataIndex: "correctLat"},
+        {
+          title: "饮用水类型",
+          dataIndex: "drinkingWaterType",
+          sorter: true,
+          customRender: ({text}) => text == 1 ? "在用" : "备用"
+        },
         {
           title: "操作",
           key: "action",
@@ -261,9 +290,11 @@ export default {
         // latitude: [{required: true,message: '请输入纬度',},],
       },
       yearOptions: [],
-            showNYear:false,
+      showNYear: false,
       cYear: undefined,
-            nYear:undefined,
+      nYear: undefined,
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
     };
   },
   mounted() {
@@ -365,7 +396,7 @@ export default {
       })
     },
 
-        getOptions(){
+    getOptions() {
       getColumnOptions("year").then(res => {
         console.log(res)
         if (res.data.code == 0) {
@@ -378,13 +409,13 @@ export default {
         }
       })
     },
-        setCYear(e){
+    setCYear(e) {
       this.cYear = e.key;
       this.showNYear = true;
     },
-        copyBatch(){
+    copyBatch() {
       const hide = this.$message.loading('请求中..', 0);
-            copyBatchPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
+      copyBatchPlace({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
         if (res.data.code === 0) {
           this.$message.success(res.data.msg);
           this.reload();
@@ -399,8 +430,8 @@ export default {
         hide();
       })
     },
-       exportData(){
+    exportData() {
-            const columns = this.columns.filter(item=>item.dataIndex);
+      const columns = this.columns.filter(item => item.dataIndex);
       const arr = [];
       const th = columns.map((item) => item.title);
       arr.push(th);
@@ -412,7 +443,67 @@ export default {
       let sheet = XLSX.utils.aoa_to_sheet(arr);
       console.log(arr);
       this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+    showRoadMap(form) {
+      const {longitude,latitude,correctLng,correctLat} = form
+      this.visibleRoadMap = true
+      this.roadMapTitle = "选择修正后的道路坐标"
+      this.$nextTick(() => {
+        console.log(this.$refs.roadMap)
+        // eslint-disable-next-line no-undef
+        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.NavigationControl());  //初始化地图控件
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.ScaleControl());
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.OverviewMapControl());
+        // eslint-disable-next-line no-undef
+        var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
+        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        // eslint-disable-next-line no-undef
+        var marker = new BMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+        // eslint-disable-next-line no-undef
+        var gc = new BMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        marker.addEventListener("dragend", (e) => {
+          //获取地址信息
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs) {
+          var opts = {
+            width: 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title: ""  //信息窗口标题
           }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+          // eslint-disable-next-line no-undef
+          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
   },
 };
 </script>

src/views/water/drinking-water/dict/countyBottomWaterDict.vue

@@ -20,7 +20,8 @@
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-space>
               <a-button type="primary" @click="reload">查询</a-button>
-                            <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
+              <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
+              </a-button>
               <!-- <a-button @click="exportData" type="primary">按年份导出</a-button> -->
             </a-space>
           </a-col>
@@ -44,7 +45,7 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="新年份" name="nYear">
-                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
+            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -65,52 +66,70 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="年份" name="year">
-                        <a-input-number v-model:value="form.year"  :min="1970" :max="2050" />
+            <a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
           </a-form-item>
           <a-form-item label="省" name="province">
-                        <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear />
+            <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear/>
           </a-form-item>
           <a-form-item label="省份代码" name="provinceCode">
-                        <a-input v-model:value="form.provinceCode" placeholder="请输入省份代码" allow-clear />
+            <a-input v-model:value="form.provinceCode" placeholder="请输入省份代码" allow-clear/>
           </a-form-item>
           <a-form-item label="市" name="city">
-                        <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear />
+            <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear/>
           </a-form-item>
           <a-form-item label="城市代码" name="cityCode">
-                        <a-input v-model:value="form.cityCode" placeholder="请输入城市代码" allow-clear />
+            <a-input v-model:value="form.cityCode" placeholder="请输入城市代码" allow-clear/>
           </a-form-item>
           <a-form-item label="县" name="countyName">
-                        <a-input v-model:value="form.countyName" placeholder="请输入县名称" allow-clear />
+            <a-input v-model:value="form.countyName" placeholder="请输入县名称" allow-clear/>
           </a-form-item>
           <a-form-item label="县域代码" name="countyCode">
-                        <a-input v-model:value="form.countyCode" placeholder="请输入县域代码" allow-clear />
+            <a-input v-model:value="form.countyCode" placeholder="请输入县域代码" allow-clear/>
           </a-form-item>
           <a-form-item label="断面名称" name="sectionName">
-                        <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
+            <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear/>
           </a-form-item>
           <a-form-item label="水源名称" name="sourceWaterName">
-                        <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear />
+            <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear/>
           </a-form-item>
           <a-form-item label="水质目标" name="waterTarget">
-                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
+            <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear/>
           </a-form-item>
           <a-form-item label="水源地代码" name="sourceWaterCode">
-                        <a-input v-model:value="form.sourceWaterCode" placeholder="请输入水源地代码" allow-clear />
+            <a-input v-model:value="form.sourceWaterCode" placeholder="请输入水源地代码" allow-clear/>
           </a-form-item>
           <a-form-item label="所属水系" name="subordinateWater">
-                        <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear />
+            <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear/>
           </a-form-item>
           <a-form-item label="水源地性质" name="waterSourceProperty">
-                        <a-input v-model:value="form.waterSourceProperty" placeholder="请输入水源地性质" allow-clear />
+            <a-input v-model:value="form.waterSourceProperty" placeholder="请输入水源地性质" allow-clear/>
           </a-form-item>
           <a-form-item label="经度(°)" name="longitude">
-                        <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear />
+            <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear/>
           </a-form-item>
           <a-form-item label="纬度(°)" name="latitude">
-                        <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
+            <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear/>
           </a-form-item>
+          <a-form-item label="修正位置" name="correctLocation">
+            <a-input-search @search="showRoadMap(form)"
+                            :value="`[${form.correctLng},${form.correctLat}]`"
+                            placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
+              <template #enterButton>
+                <a-button>选择位置</a-button>
+              </template>
+            </a-input-search>
+          </a-form-item>
+
+          <a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
+                   v-model:visible="visibleRoadMap" :title="roadMapTitle"
+          >
+            <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+            <template #footer>
+              <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
+            </template>
+          </a-modal>
           <a-form-item label="排序" name="sortNum">
-                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+            <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear/>
           </a-form-item>
           <!-- <a-form-item label="饮用水类型，1在用、2备用" name="drinkingWaterType">
               <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear />
@@ -169,7 +188,8 @@
               type="primary"
               shape="round"
               size="small"
-                        >修改</a-button
+            >修改
+            </a-button
             >
             <a-popconfirm
               :title="`确认删除这条数据吗?`"
@@ -178,7 +198,8 @@
               @confirm="remove(record)"
             >
               <a-button type="primary" danger shape="round" size="small"
-                            >删除</a-button
+              >删除
+              </a-button
               >
             </a-popconfirm>
           </a-space>
@@ -203,8 +224,9 @@ import {
   copyBatchCountyBottomPlace
 } from "@/api/ecology/drinking-water-dict";
 // import moment from "moment";
-  import {DownOutlined} from '@ant-design/icons-vue';
+import {DownOutlined} from '@ant-design/icons-vue';
-  import XLSX from "xlsx";
+import XLSX from "xlsx";
+
 export default {
   name: "DrinkWaterDict",
   components: {DownOutlined},
@@ -216,20 +238,22 @@ export default {
       selection: [],
       // 表格列配置
       columns: [
-                {title: "年份",dataIndex: "year",sorter: true},
+        {title: "年份", dataIndex: "year", sorter: true},
-                {title: "省",dataIndex: "province",sorter: true,},
+        {title: "省", dataIndex: "province", sorter: true,},
-                {title: "省份代码",dataIndex: "provinceCode",sorter: true,},
+        {title: "省份代码", dataIndex: "provinceCode", sorter: true,},
-                {title: "市",dataIndex: "city",sorter: true},
+        {title: "市", dataIndex: "city", sorter: true},
-                {title: "城市代码",dataIndex: "cityCode",sorter: true},
+        {title: "城市代码", dataIndex: "cityCode", sorter: true},
-                {title: "县",dataIndex: "countyName",sorter: true},
+        {title: "县", dataIndex: "countyName", sorter: true},
-                {title:"县域代码",dataIndex:"countyCode",sorter:true},
+        {title: "县域代码", dataIndex: "countyCode", sorter: true},
-                {title: "断面名称",dataIndex: "sectionName",sorter: true},
+        {title: "断面名称", dataIndex: "sectionName", sorter: true},
-                {title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
+        {title: "水源名称", dataIndex: "sourceWaterName", sorter: true,},
-                {title: "水源地代码",dataIndex: "sourceWaterCode",sorter: true,},
+        {title: "水源地代码", dataIndex: "sourceWaterCode", sorter: true,},
-                {title: "所属水系",dataIndex: "subordinateWater",sorter: true,},
+        {title: "所属水系", dataIndex: "subordinateWater", sorter: true,},
-                {title: "水源地性质",dataIndex: "waterSourceProperty",sorter: true},
+        {title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true},
-                {title: "经度(°)",dataIndex: "longitude",sorter: true,},
+        {title: "经度(°)", dataIndex: "longitude", sorter: true,},
-                {title: "纬度(°)",dataIndex: "latitude",sorter: true,},
+        {title: "纬度(°)", dataIndex: "latitude", sorter: true,},
+        {title: "修正经度", dataIndex: "correctLng"},
+        {title: "修正纬度", dataIndex: "correctLat"},
         // {title: "饮用水类型",dataIndex: "drinkingWaterType",sorter: true,customRender: ({text})=> text == 1?"在用":"备用"},
         {
           title: "操作",
@@ -253,7 +277,7 @@ export default {
       // 是否显示编辑弹窗
       showEdit: false,
       // 表单数据
-            form: {waterSourceType:''},
+      form: {waterSourceType: ''},
       loading: false,
       rules: {
         // year: [{required: true, message: '请输入年份'}],
@@ -262,9 +286,11 @@ export default {
         // latitude: [{required: true,message: '请输入纬度',},],
       },
       yearOptions: [],
-            showNYear:false,
+      showNYear: false,
       cYear: undefined,
-            nYear:undefined,
+      nYear: undefined,
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
     };
   },
   mounted() {
@@ -296,7 +322,7 @@ export default {
       await this.$refs.form.validate();
       const hide = this.$message.loading('请求中..', 0);
       const form = this.form;
-            form.waterSourceType='2';
+      form.waterSourceType = '2';
       console.log(form);
       if (form.drinkingWaterDictId) {
         updateDrinkingWaterCountyBottomDict(form)
@@ -368,7 +394,7 @@ export default {
       })
     },
 
-        getOptions(){
+    getOptions() {
       getCountyBottomColumnOptions("year").then(res => {
         console.log(res)
         if (res.data.code == 0) {
@@ -381,13 +407,13 @@ export default {
         }
       })
     },
-        setCYear(e){
+    setCYear(e) {
       this.cYear = e.key;
       this.showNYear = true;
     },
-        copyBatch(){
+    copyBatch() {
       const hide = this.$message.loading('请求中..', 0);
-            copyBatchCountyBottomPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
+      copyBatchCountyBottomPlace({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
         if (res.data.code === 0) {
           this.$message.success(res.data.msg);
           this.reload();
@@ -402,8 +428,8 @@ export default {
         hide();
       })
     },
-       exportData(){
+    exportData() {
-            const columns = this.columns.filter(item=>item.dataIndex);
+      const columns = this.columns.filter(item => item.dataIndex);
       const arr = [];
       const th = columns.map((item) => item.title);
       arr.push(th);
@@ -415,7 +441,67 @@ export default {
       let sheet = XLSX.utils.aoa_to_sheet(arr);
       console.log(arr);
       this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+    showRoadMap(form) {
+      const {longitude,latitude,correctLng,correctLat} = form
+      this.visibleRoadMap = true
+      this.roadMapTitle = "选择修正后的道路坐标"
+      this.$nextTick(() => {
+        console.log(this.$refs.roadMap)
+        // eslint-disable-next-line no-undef
+        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.NavigationControl());  //初始化地图控件
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.ScaleControl());
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.OverviewMapControl());
+        // eslint-disable-next-line no-undef
+        var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
+        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        // eslint-disable-next-line no-undef
+        var marker = new BMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+        // eslint-disable-next-line no-undef
+        var gc = new BMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        marker.addEventListener("dragend", (e) => {
+          //获取地址信息
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs) {
+          var opts = {
+            width: 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title: ""  //信息窗口标题
           }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+          // eslint-disable-next-line no-undef
+          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
   },
 };
 </script>

src/views/water/drinking-water/dict/countyTopWaterDict.vue

@@ -20,7 +20,8 @@
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-space>
               <a-button type="primary" @click="reload">查询</a-button>
-                            <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
+              <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
+              </a-button>
               <a-button @click="exportData" type="primary">按年份导出</a-button>
             </a-space>
           </a-col>
@@ -44,7 +45,7 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="新年份" name="nYear">
-                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
+            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -65,52 +66,70 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="年份" name="year">
-                        <a-input-number v-model:value="form.year"  :min="1970" :max="2050" />
+            <a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
           </a-form-item>
           <a-form-item label="省" name="province">
-                        <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear />
+            <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear/>
           </a-form-item>
           <a-form-item label="省份代码" name="provinceCode">
-                        <a-input v-model:value="form.provinceCode" placeholder="请输入省份代码" allow-clear />
+            <a-input v-model:value="form.provinceCode" placeholder="请输入省份代码" allow-clear/>
           </a-form-item>
           <a-form-item label="市" name="city">
-                        <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear />
+            <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear/>
           </a-form-item>
           <a-form-item label="城市代码" name="cityCode">
-                        <a-input v-model:value="form.cityCode" placeholder="请输入城市代码" allow-clear />
+            <a-input v-model:value="form.cityCode" placeholder="请输入城市代码" allow-clear/>
           </a-form-item>
           <a-form-item label="县" name="countyName">
-                        <a-input v-model:value="form.countyName" placeholder="请输入县名称" allow-clear />
+            <a-input v-model:value="form.countyName" placeholder="请输入县名称" allow-clear/>
           </a-form-item>
           <a-form-item label="县域代码" name="countyCode">
-                        <a-input v-model:value="form.countyCode" placeholder="请输入县域代码" allow-clear />
+            <a-input v-model:value="form.countyCode" placeholder="请输入县域代码" allow-clear/>
           </a-form-item>
           <a-form-item label="断面名称" name="sectionName">
-                        <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
+            <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear/>
           </a-form-item>
           <a-form-item label="水源名称" name="sourceWaterName">
-                        <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear />
+            <a-input v-model:value="form.sourceWaterName" placeholder="请输入水源名称" allow-clear/>
           </a-form-item>
           <a-form-item label="水质目标" name="waterTarget">
-                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
+            <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear/>
           </a-form-item>
           <a-form-item label="所属水系" name="subordinateWater">
-                        <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear />
+            <a-input v-model:value="form.subordinateWater" placeholder="请输入所属水系" allow-clear/>
           </a-form-item>
           <a-form-item label="水源地性质" name="waterSourceProperty">
-                        <a-input v-model:value="form.waterSourceProperty" placeholder="请输入水源地性质" allow-clear />
+            <a-input v-model:value="form.waterSourceProperty" placeholder="请输入水源地性质" allow-clear/>
           </a-form-item>
           <a-form-item label="经度(°)" name="longitude">
-                        <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear />
+            <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear/>
           </a-form-item>
           <a-form-item label="纬度(°)" name="latitude">
-                        <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
+            <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear/>
           </a-form-item>
+          <a-form-item label="修正位置" name="correctLocation">
+            <a-input-search @search="showRoadMap(form)"
+                            :value="`[${form.correctLng},${form.correctLat}]`"
+                            placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
+              <template #enterButton>
+                <a-button>选择位置</a-button>
+              </template>
+            </a-input-search>
+          </a-form-item>
+
+          <a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
+                   v-model:visible="visibleRoadMap" :title="roadMapTitle"
+          >
+            <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+            <template #footer>
+              <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
+            </template>
+          </a-modal>
           <a-form-item label="排序" name="sortNum">
-                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+            <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear/>
           </a-form-item>
           <a-form-item label="饮用水类型，1在用、2备用" name="drinkingWaterType">
-                        <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear />
+            <a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型，1或者2" allow-clear/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -166,7 +185,8 @@
               type="primary"
               shape="round"
               size="small"
-                        >修改</a-button
+            >修改
+            </a-button
             >
             <a-popconfirm
               :title="`确认删除这条数据吗?`"
@@ -175,7 +195,8 @@
               @confirm="remove(record)"
             >
               <a-button type="primary" danger shape="round" size="small"
-                            >删除</a-button
+              >删除
+              </a-button
               >
             </a-popconfirm>
           </a-space>
@@ -200,8 +221,9 @@ import {
   copyBatchCountyPlace
 } from "@/api/ecology/drinking-water-dict";
 // import moment from "moment";
-  import {DownOutlined} from '@ant-design/icons-vue';
+import {DownOutlined} from '@ant-design/icons-vue';
-  import XLSX from "xlsx";
+import XLSX from "xlsx";
+
 export default {
   name: "DrinkWaterDict",
   components: {DownOutlined},
@@ -213,20 +235,27 @@ export default {
       selection: [],
       // 表格列配置
       columns: [
-                {title: "年份",dataIndex: "year",sorter: true},
+        {title: "年份", dataIndex: "year", sorter: true},
-                {title: "省",dataIndex: "province",sorter: true,},
+        {title: "省", dataIndex: "province", sorter: true,},
-                {title: "省份代码",dataIndex: "provinceCode",sorter: true,},
+        {title: "省份代码", dataIndex: "provinceCode", sorter: true,},
-                {title: "市",dataIndex: "city",sorter: true},
+        {title: "市", dataIndex: "city", sorter: true},
-                {title: "城市代码",dataIndex: "cityCode",sorter: true},
+        {title: "城市代码", dataIndex: "cityCode", sorter: true},
-                {title: "县",dataIndex: "countyName",sorter: true},
+        {title: "县", dataIndex: "countyName", sorter: true},
-                {title:"县域代码",dataIndex:"countyCode",sorter:true},
+        {title: "县域代码", dataIndex: "countyCode", sorter: true},
-                {title: "断面名称",dataIndex: "sectionName",sorter: true},
+        {title: "断面名称", dataIndex: "sectionName", sorter: true},
-                {title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
+        {title: "水源名称", dataIndex: "sourceWaterName", sorter: true,},
-                {title: "所属水系",dataIndex: "subordinateWater",sorter: true,},
+        {title: "所属水系", dataIndex: "subordinateWater", sorter: true,},
-                {title: "水源地性质",dataIndex: "waterSourceProperty",sorter: true},
+        {title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true},
-                {title: "经度(°)",dataIndex: "longitude",sorter: true,},
+        {title: "经度(°)", dataIndex: "longitude", sorter: true,},
-                {title: "纬度(°)",dataIndex: "latitude",sorter: true,},
+        {title: "纬度(°)", dataIndex: "latitude", sorter: true,},
-                {title: "饮用水类型",dataIndex: "drinkingWaterType",sorter: true,customRender: ({text})=> text == 1?"在用":"备用"},
+        {title: "修正经度", dataIndex: "correctLng"},
+        {title: "修正纬度", dataIndex: "correctLat"},
+        {
+          title: "饮用水类型",
+          dataIndex: "drinkingWaterType",
+          sorter: true,
+          customRender: ({text}) => text == 1 ? "在用" : "备用"
+        },
         {
           title: "操作",
           key: "action",
@@ -248,7 +277,7 @@ export default {
       // 是否显示编辑弹窗
       showEdit: false,
       // 表单数据
-            form: {waterSourceType:''},
+      form: {waterSourceType: ''},
       loading: false,
       rules: {
         // year: [{required: true, message: '请输入年份'}],
@@ -257,9 +286,11 @@ export default {
         // latitude: [{required: true,message: '请输入纬度',},],
       },
       yearOptions: [],
-            showNYear:false,
+      showNYear: false,
       cYear: undefined,
-            nYear:undefined,
+      nYear: undefined,
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
     };
   },
   mounted() {
@@ -291,7 +322,7 @@ export default {
       await this.$refs.form.validate();
       const hide = this.$message.loading('请求中..', 0);
       const form = this.form;
-            form.waterSourceType='1';
+      form.waterSourceType = '1';
       console.log(form);
       if (form.drinkingWaterDictId) {
         updateDrinkingWaterCountyDict(form)
@@ -363,7 +394,7 @@ export default {
       })
     },
 
-        getOptions(){
+    getOptions() {
       getCountyColumnOptions("year").then(res => {
         console.log(res)
         if (res.data.code == 0) {
@@ -376,13 +407,13 @@ export default {
         }
       })
     },
-        setCYear(e){
+    setCYear(e) {
       this.cYear = e.key;
       this.showNYear = true;
     },
-        copyBatch(){
+    copyBatch() {
       const hide = this.$message.loading('请求中..', 0);
-            copyBatchCountyPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
+      copyBatchCountyPlace({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
         if (res.data.code === 0) {
           this.$message.success(res.data.msg);
           this.reload();
@@ -397,8 +428,8 @@ export default {
         hide();
       })
     },
-       exportData(){
+    exportData() {
-            const columns = this.columns.filter(item=>item.dataIndex);
+      const columns = this.columns.filter(item => item.dataIndex);
       const arr = [];
       const th = columns.map((item) => item.title);
       arr.push(th);
@@ -410,7 +441,67 @@ export default {
       let sheet = XLSX.utils.aoa_to_sheet(arr);
       console.log(arr);
       this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+    showRoadMap(form) {
+      const {longitude,latitude,correctLng,correctLat} = form
+      this.visibleRoadMap = true
+      this.roadMapTitle = "选择修正后的道路坐标"
+      this.$nextTick(() => {
+        console.log(this.$refs.roadMap)
+        // eslint-disable-next-line no-undef
+        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.NavigationControl());  //初始化地图控件
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.ScaleControl());
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.OverviewMapControl());
+        // eslint-disable-next-line no-undef
+        var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
+        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        // eslint-disable-next-line no-undef
+        var marker = new BMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+        // eslint-disable-next-line no-undef
+        var gc = new BMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        marker.addEventListener("dragend", (e) => {
+          //获取地址信息
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs) {
+          var opts = {
+            width: 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title: ""  //信息窗口标题
           }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+          // eslint-disable-next-line no-undef
+          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
   },
 };
 </script>

src/views/water/drinking-water/dict/villageBottomDict.vue

@@ -20,7 +20,8 @@
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-space>
               <a-button type="primary" @click="reload">查询</a-button>
-                            <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
+              <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
+              </a-button>
               <a-button @click="exportData" type="primary">按年份导出</a-button>
             </a-space>
           </a-col>
@@ -44,7 +45,7 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="新年份" name="nYear">
-                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
+            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -65,49 +66,67 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="年份" name="year">
-                        <a-input-number v-model:value="form.year"  :min="1970" :max="2050" />
+            <a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
           </a-form-item>
           <a-form-item label="断面代码" name="sectionCode">
-                        <a-input v-model:value="form.sectionCode" placeholder="请输入断面名称" allow-clear />
+            <a-input v-model:value="form.sectionCode" placeholder="请输入断面名称" allow-clear/>
           </a-form-item>
           <a-form-item label="省" name="province">
-                        <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear />
+            <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear/>
           </a-form-item>
           <a-form-item label="市" name="city">
-                        <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear />
+            <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear/>
           </a-form-item>
           <a-form-item label="县" name="county">
-                        <a-input v-model:value="form.county" placeholder="请输入县名称" allow-clear />
+            <a-input v-model:value="form.county" placeholder="请输入县名称" allow-clear/>
           </a-form-item>
           <a-form-item label="乡镇" name="township">
-                        <a-input v-model:value="form.township" placeholder="请输入乡镇名称" allow-clear />
+            <a-input v-model:value="form.township" placeholder="请输入乡镇名称" allow-clear/>
           </a-form-item>
           <a-form-item label="村名" name="village">
-                        <a-input v-model:value="form.village" placeholder="请输入村名称" allow-clear />
+            <a-input v-model:value="form.village" placeholder="请输入村名称" allow-clear/>
           </a-form-item>
           <a-form-item label="断面名称" name="sectionName">
-                        <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
+            <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear/>
           </a-form-item>
           <a-form-item label="水质目标" name="waterTarget">
-                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
+            <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear/>
           </a-form-item>
           <!-- <a-form-item label="湖库(是/否)" name="lakeLibraryFlag">
               <a-input v-model:value="form.lakeLibraryFlag" placeholder="请输入湖库(是/否)" allow-clear />
           </a-form-item> -->
           <a-form-item label="经度(°)" name="longitude">
-                        <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear />
+            <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear/>
           </a-form-item>
           <a-form-item label="纬度(°)" name="latitude">
-                        <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
+            <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear/>
           </a-form-item>
+          <a-form-item label="修正位置" name="correctLocation">
+            <a-input-search @search="showRoadMap(form)"
+                            :value="`[${form.correctLng},${form.correctLat}]`"
+                            placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
+              <template #enterButton>
+                <a-button>选择位置</a-button>
+              </template>
+            </a-input-search>
+          </a-form-item>
+
+          <a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
+                   v-model:visible="visibleRoadMap" :title="roadMapTitle"
+          >
+            <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+            <template #footer>
+              <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
+            </template>
+          </a-modal>
           <a-form-item label="排序" name="sortNum">
-                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+            <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear/>
           </a-form-item>
           <a-form-item label="服务人口数量（人）" name="numberServingPopulation">
-                        <a-input v-model:value="form.numberServingPopulation" placeholder="请输入服务人口数量（人）" allow-clear />
+            <a-input v-model:value="form.numberServingPopulation" placeholder="请输入服务人口数量（人）" allow-clear/>
           </a-form-item>
           <a-form-item label="日供水规模（吨）" name="dailyWaterSupplyScale">
-                        <a-input v-model:value="form.dailyWaterSupplyScale" placeholder="请输入日供水规模（吨）" allow-clear />
+            <a-input v-model:value="form.dailyWaterSupplyScale" placeholder="请输入日供水规模（吨）" allow-clear/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -163,7 +182,8 @@
               type="primary"
               shape="round"
               size="small"
-                        >修改</a-button
+            >修改
+            </a-button
             >
             <a-popconfirm
               :title="`确认删除这条数据吗?`"
@@ -172,7 +192,8 @@
               @confirm="remove(record)"
             >
               <a-button type="primary" danger shape="round" size="small"
-                            >删除</a-button
+              >删除
+              </a-button
               >
             </a-popconfirm>
           </a-space>
@@ -196,8 +217,9 @@ import {
   copyBatchVillageBottomPlace,
 } from "@/api/ecology/drinking-water-dict";
 // import moment from "moment";
-  import {DownOutlined} from '@ant-design/icons-vue';
+import {DownOutlined} from '@ant-design/icons-vue';
-  import XLSX from "xlsx";
+import XLSX from "xlsx";
+
 export default {
   name: "DrinkWaterDict",
   components: {DownOutlined},
@@ -210,20 +232,22 @@ export default {
       // 表格列配置
       columns: [
 
-                {title: "年份",dataIndex: "year",sorter: true},
+        {title: "年份", dataIndex: "year", sorter: true},
-                {title: "断面代码",dataIndex: "sectionCode",sorter: true},
+        {title: "断面代码", dataIndex: "sectionCode", sorter: true},
-                {title: "省",dataIndex: "province",sorter: true,},
+        {title: "省", dataIndex: "province", sorter: true,},
-                {title: "市",dataIndex: "city",sorter: true},
+        {title: "市", dataIndex: "city", sorter: true},
-                {title: "县",dataIndex: "county",sorter: true},
+        {title: "县", dataIndex: "county", sorter: true},
-                {title: "乡镇",dataIndex: "township",sorter: true,},
+        {title: "乡镇", dataIndex: "township", sorter: true,},
-                {title: "村",dataIndex: "village",sorter: true,},
+        {title: "村", dataIndex: "village", sorter: true,},
-                {title: "断面名称",dataIndex: "sectionName",sorter: true},
+        {title: "断面名称", dataIndex: "sectionName", sorter: true},
         // {title: "点位名称",dataIndex: "place",sorter: true},
         // {title: "湖库(是/否)",dataIndex: "lakeLibraryFlag",sorter: true,},
-                {title: "经度(°)",dataIndex: "longitude",sorter: true,},
+        {title: "经度(°)", dataIndex: "longitude", sorter: true,},
-                {title: "纬度(°)",dataIndex: "latitude",sorter: true,},
+        {title: "纬度(°)", dataIndex: "latitude", sorter: true,},
-                {title: "服务人口数量(人)",dataIndex: "numberServingPopulation",sorter: true,},
+        {title: "修正经度", dataIndex: "correctLng"},
-                {title: "日供水规模（吨）",dataIndex: "dailyWaterSupplyScale",sorter: true,},
+        {title: "修正纬度", dataIndex: "correctLat"},
+        {title: "服务人口数量(人)", dataIndex: "numberServingPopulation", sorter: true,},
+        {title: "日供水规模（吨）", dataIndex: "dailyWaterSupplyScale", sorter: true,},
         {
           title: "操作",
           key: "action",
@@ -254,9 +278,11 @@ export default {
         // latitude: [{required: true,message: '请输入纬度',},],
       },
       yearOptions: [],
-            showNYear:false,
+      showNYear: false,
       cYear: undefined,
-            nYear:undefined,
+      nYear: undefined,
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
     };
   },
   mounted() {
@@ -358,7 +384,7 @@ export default {
       })
     },
 
-        getOptions(){
+    getOptions() {
       getVillageBottomColumnOptions("year").then(res => {
         console.log(res)
         if (res.data.code == 0) {
@@ -371,13 +397,13 @@ export default {
         }
       })
     },
-        setCYear(e){
+    setCYear(e) {
       this.cYear = e.key;
       this.showNYear = true;
     },
-        copyBatch(){
+    copyBatch() {
       const hide = this.$message.loading('请求中..', 0);
-            copyBatchVillageBottomPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
+      copyBatchVillageBottomPlace({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
         if (res.data.code === 0) {
           this.$message.success(res.data.msg);
           this.reload();
@@ -392,8 +418,8 @@ export default {
         hide();
       })
     },
-       exportData(){
+    exportData() {
-            const columns = this.columns.filter(item=>item.dataIndex);
+      const columns = this.columns.filter(item => item.dataIndex);
       const arr = [];
       const th = columns.map((item) => item.title);
       arr.push(th);
@@ -405,7 +431,67 @@ export default {
       let sheet = XLSX.utils.aoa_to_sheet(arr);
       console.log(arr);
       this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+    showRoadMap(form) {
+      const {longitude,latitude,correctLng,correctLat} = form
+      this.visibleRoadMap = true
+      this.roadMapTitle = "选择修正后的道路坐标"
+      this.$nextTick(() => {
+        console.log(this.$refs.roadMap)
+        // eslint-disable-next-line no-undef
+        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.NavigationControl());  //初始化地图控件
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.ScaleControl());
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.OverviewMapControl());
+        // eslint-disable-next-line no-undef
+        var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
+        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        // eslint-disable-next-line no-undef
+        var marker = new BMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+        // eslint-disable-next-line no-undef
+        var gc = new BMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        marker.addEventListener("dragend", (e) => {
+          //获取地址信息
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs) {
+          var opts = {
+            width: 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title: ""  //信息窗口标题
           }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+          // eslint-disable-next-line no-undef
+          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
   },
 };
 </script>

src/views/water/drinking-water/dict/villageTopDict.vue

@@ -20,7 +20,8 @@
           <a-col :lg="6" :md="12" :sm="24" :xs="24">
             <a-space>
               <a-button type="primary" @click="reload">查询</a-button>
-                            <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
+              <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置
+              </a-button>
               <a-button @click="exportData" type="primary">按年份导出</a-button>
             </a-space>
           </a-col>
@@ -44,7 +45,7 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="新年份" name="nYear">
-                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
+            <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050"/>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -65,49 +66,67 @@
           :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
         >
           <a-form-item label="年份" name="year">
-                        <a-input-number v-model:value="form.year"  :min="1970" :max="2050" />
+            <a-input-number v-model:value="form.year" :min="1970" :max="2050"/>
           </a-form-item>
           <a-form-item label="断面代码" name="sectionCode">
-                        <a-input v-model:value="form.sectionCode" placeholder="请输入断面名称" allow-clear />
+            <a-input v-model:value="form.sectionCode" placeholder="请输入断面名称" allow-clear/>
           </a-form-item>
           <a-form-item label="省" name="province">
-                        <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear />
+            <a-input v-model:value="form.province" placeholder="请输入省名称" allow-clear/>
           </a-form-item>
           <a-form-item label="市" name="city">
-                        <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear />
+            <a-input v-model:value="form.city" placeholder="请输入市名称" allow-clear/>
           </a-form-item>
           <a-form-item label="县" name="county">
-                        <a-input v-model:value="form.county" placeholder="请输入县名称" allow-clear />
+            <a-input v-model:value="form.county" placeholder="请输入县名称" allow-clear/>
           </a-form-item>
           <a-form-item label="乡镇" name="township">
-                        <a-input v-model:value="form.township" placeholder="请输入乡镇名称" allow-clear />
+            <a-input v-model:value="form.township" placeholder="请输入乡镇名称" allow-clear/>
           </a-form-item>
           <a-form-item label="村名" name="village">
-                        <a-input v-model:value="form.village" placeholder="请输入村名称" allow-clear />
+            <a-input v-model:value="form.village" placeholder="请输入村名称" allow-clear/>
           </a-form-item>
           <a-form-item label="断面名称" name="sectionName">
-                        <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
+            <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear/>
           </a-form-item>
           <a-form-item label="水质目标" name="waterTarget">
-                        <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear />
+            <a-input v-model:value="form.waterTarget" placeholder="请输入水质目标" allow-clear/>
           </a-form-item>
           <a-form-item label="湖库(是/否)" name="lakeLibraryFlag">
-                        <a-input v-model:value="form.lakeLibraryFlag" placeholder="请输入湖库(是/否)" allow-clear />
+            <a-input v-model:value="form.lakeLibraryFlag" placeholder="请输入湖库(是/否)" allow-clear/>
           </a-form-item>
           <a-form-item label="经度(°)" name="longitude">
-                        <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear />
+            <a-input v-model:value="form.longitude" placeholder="请输入经度(°)" allow-clear/>
           </a-form-item>
           <a-form-item label="纬度(°)" name="latitude">
-                        <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear />
+            <a-input v-model:value="form.latitude" placeholder="请输入纬度(°)" allow-clear/>
           </a-form-item>
+          <a-form-item label="修正位置" name="correctLocation">
+            <a-input-search @search="showRoadMap(form)"
+                            :value="`[${form.correctLng},${form.correctLat}]`"
+                            placeholder="`[${form.longitude},${form.latitude}]`" allow-clear>
+              <template #enterButton>
+                <a-button>选择位置</a-button>
+              </template>
+            </a-input-search>
+          </a-form-item>
+
+          <a-modal :closable="false" :destroy-on-close="true" :width="1000" :body-style="{height:'700px'}"
+                   v-model:visible="visibleRoadMap" :title="roadMapTitle"
+          >
+            <div style="width: 100%;height: 100%;" ref="roadMap" id="roadMap"></div>
+            <template #footer>
+              <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
+            </template>
+          </a-modal>
           <a-form-item label="排序" name="sortNum">
-                        <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear />
+            <a-input-number v-model:value="form.sortNum" placeholder="排序" allow-clear/>
           </a-form-item>
           <a-form-item label="服务人口数量（人）" name="numberServingPopulation">
-                        <a-input v-model:value="form.numberServingPopulation" placeholder="请输入服务人口数量（人）" allow-clear />
+            <a-input v-model:value="form.numberServingPopulation" placeholder="请输入服务人口数量（人）" allow-clear/>
           </a-form-item>
           <a-form-item label="日供水规模（吨）" name="dailyWaterSupplyScale">
-                        <a-input v-model:value="form.dailyWaterSupplyScale" placeholder="请输入日供水规模（吨）" allow-clear />
+            <a-input v-model:value="form.dailyWaterSupplyScale" placeholder="请输入日供水规模（吨）" allow-clear/>
           </a-form-item>
 
         </a-form>
@@ -164,7 +183,8 @@
               type="primary"
               shape="round"
               size="small"
-                        >修改</a-button
+            >修改
+            </a-button
             >
             <a-popconfirm
               :title="`确认删除这条数据吗?`"
@@ -173,7 +193,8 @@
               @confirm="remove(record)"
             >
               <a-button type="primary" danger shape="round" size="small"
-                            >删除</a-button
+              >删除
+              </a-button
               >
             </a-popconfirm>
           </a-space>
@@ -196,8 +217,9 @@ import {
   copyBatchVillageTopPlace,
 } from "@/api/ecology/drinking-water-dict";
 // import moment from "moment";
-  import {DownOutlined} from '@ant-design/icons-vue';
+import {DownOutlined} from '@ant-design/icons-vue';
-  import XLSX from "xlsx";
+import XLSX from "xlsx";
+
 export default {
   name: "DrinkWaterDict",
   components: {DownOutlined},
@@ -210,20 +232,22 @@ export default {
       // 表格列配置
       columns: [
 
-                {title: "年份",dataIndex: "year",sorter: true},
+        {title: "年份", dataIndex: "year", sorter: true},
-                {title: "断面代码",dataIndex: "sectionCode",sorter: true},
+        {title: "断面代码", dataIndex: "sectionCode", sorter: true},
-                {title: "省",dataIndex: "province",sorter: true,},
+        {title: "省", dataIndex: "province", sorter: true,},
-                {title: "市",dataIndex: "city",sorter: true},
+        {title: "市", dataIndex: "city", sorter: true},
-                {title: "县",dataIndex: "county",sorter: true},
+        {title: "县", dataIndex: "county", sorter: true},
-                {title: "乡镇",dataIndex: "township",sorter: true,},
+        {title: "乡镇", dataIndex: "township", sorter: true,},
-                {title: "村",dataIndex: "village",sorter: true,},
+        {title: "村", dataIndex: "village", sorter: true,},
-                {title: "断面名称",dataIndex: "sectionName",sorter: true},
+        {title: "断面名称", dataIndex: "sectionName", sorter: true},
         // {title: "点位名称",dataIndex: "place",sorter: true},
-                {title: "湖库(是/否)",dataIndex: "lakeLibraryFlag",sorter: true,},
+        {title: "湖库(是/否)", dataIndex: "lakeLibraryFlag", sorter: true,},
-                {title: "经度(°)",dataIndex: "longitude",sorter: true,},
+        {title: "经度(°)", dataIndex: "longitude", sorter: true,},
-                {title: "纬度(°)",dataIndex: "latitude",sorter: true,},
+        {title: "纬度(°)", dataIndex: "latitude", sorter: true,},
-                {title: "服务人口数量(人)",dataIndex: "numberServingPopulation",sorter: true,},
+        {title: "修正经度", dataIndex: "correctLng"},
-                {title: "日供水规模（吨）",dataIndex: "dailyWaterSupplyScale",sorter: true,},
+        {title: "修正纬度", dataIndex: "correctLat"},
+        {title: "服务人口数量(人)", dataIndex: "numberServingPopulation", sorter: true,},
+        {title: "日供水规模（吨）", dataIndex: "dailyWaterSupplyScale", sorter: true,},
         {
           title: "操作",
           key: "action",
@@ -254,9 +278,11 @@ export default {
         // latitude: [{required: true,message: '请输入纬度',},],
       },
       yearOptions: [],
-            showNYear:false,
+      showNYear: false,
       cYear: undefined,
-            nYear:undefined,
+      nYear: undefined,
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
     };
   },
   mounted() {
@@ -358,7 +384,7 @@ export default {
       })
     },
 
-        getOptions(){
+    getOptions() {
       getVillageTopColumnOptions("year").then(res => {
         console.log(res)
         if (res.data.code == 0) {
@@ -371,13 +397,13 @@ export default {
         }
       })
     },
-        setCYear(e){
+    setCYear(e) {
       this.cYear = e.key;
       this.showNYear = true;
     },
-        copyBatch(){
+    copyBatch() {
       const hide = this.$message.loading('请求中..', 0);
-            copyBatchVillageTopPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
+      copyBatchVillageTopPlace({cyear: Number(this.cYear), nyear: this.nYear}).then(res => {
         if (res.data.code === 0) {
           this.$message.success(res.data.msg);
           this.reload();
@@ -392,8 +418,8 @@ export default {
         hide();
       })
     },
-       exportData(){
+    exportData() {
-            const columns = this.columns.filter(item=>item.dataIndex);
+      const columns = this.columns.filter(item => item.dataIndex);
       const arr = [];
       const th = columns.map((item) => item.title);
       arr.push(th);
@@ -405,7 +431,67 @@ export default {
       let sheet = XLSX.utils.aoa_to_sheet(arr);
       console.log(arr);
       this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+    },
+    showRoadMap(form) {
+      const {longitude,latitude,correctLng,correctLat} = form
+      this.visibleRoadMap = true
+      this.roadMapTitle = "选择修正后的道路坐标"
+      this.$nextTick(() => {
+        console.log(this.$refs.roadMap)
+        // eslint-disable-next-line no-undef
+        var map = new BMap.Map(this.$refs.roadMap);    // 创建Map实例
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.NavigationControl());  //初始化地图控件
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.ScaleControl());
+        // eslint-disable-next-line no-undef
+        map.addControl(new BMap.OverviewMapControl());
+        // eslint-disable-next-line no-undef
+        var point = new BMap.Point(correctLng?correctLng:longitude?longitude:108.33,correctLat?correctLat:latitude?latitude:22.84);
+        // var point = new BBMap.Point(form.longitude ? form.longitude : 108.33, form.latitude ? form.latitude : 22.84);
+        map.centerAndZoom(point, 13);//初始化地图中心点
+        // eslint-disable-next-line no-undef
+        var marker = new BMap.Marker(point); //初始化地图标记
+        marker.enableDragging(); //标记开启拖拽
+        // eslint-disable-next-line no-undef
+        var gc = new BMap.Geocoder();//地址解析类
+        //添加标记拖拽监听
+        marker.addEventListener("dragend", (e) => {
+          //获取地址信息
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat
+
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        //添加标记点击监听
+        marker.addEventListener("click", function (e) {
+          gc.getLocation(e.point, function (rs) {
+            showLocationInfo(e.point, rs);
+          });
+        });
+
+        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
+        map.addOverlay(marker); //将标记添加到地图中
+        //显示地址信息窗口
+        function showLocationInfo(pt, rs) {
+          var opts = {
+            width: 250,     //信息窗口宽度
+            height: 100,     //信息窗口高度
+            title: ""  //信息窗口标题
           }
+          var addComp = rs.addressComponents;
+          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
+          addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
+          // eslint-disable-next-line no-undef
+          var infoWindow = new BMap.InfoWindow(addr, opts);  //创建信息窗口对象
+          marker.openInfoWindow(infoWindow);
+        }
+      })
+
+    },
   },
 };
 </script>