点位修正

2022-02-03 17:22:31 +08:00
parent 535ef79624
commit 53db46f90a
3 changed files with 218 additions and 36 deletions
--- a/src/api/ecology/noise/road-noise-place.js
+++ b/src/api/ecology/noise/road-noise-place.js
@@ -6,6 +6,10 @@ const listAllUrl = baseUri + "";
 const savePlace = function (data) {
    return axios.post("/sound/road/place",data)
 }
+// 添加
+const getPlace = function (id) {
+  return axios.get("/sound/road/place/" + id)
+}
 // 批量添加
 const savePlaceBatch = function (data) {
    return axios.post("/sound/road/place/batch",data)
@@ -37,6 +41,7 @@ export {
    removePlace,
    getColumnOptions,
    copyBatchPlace,
-    savePlaceBatch
+    savePlaceBatch,
+  getPlace

 }
--- a/src/views/sound/road/dict/place.vue
+++ b/src/views/sound/road/dict/place.vue
@@ -21,7 +21,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-space>
          </a-col>
        </a-row>
@@ -90,21 +91,17 @@
          <a-form-item label="测点纬度" name="placeLat">
            <a-input v-model:value="form.placeLat" placeholder="请输入测点纬度" allow-clear/>
          </a-form-item>
-          <a-form-item label="道路起点" name="roadStartLng">
-            <a-input-search  @search="showRoadMap('start',form.roadStartLng,form.roadStartLat)" :value="`[${form.roadStartLng},${form.roadStartLat}]`" placeholder="请选择道路起点" allow-clear>
+          <a-form-item label="修正位置" name="correctLocation">
+            <a-input-search @search="showRoadMap(form)"
+                            :value="`[${form.correctLng},${form.correctLat}]`" placeholder="`[${form.placeLng},${form.placeLat}]`" allow-clear>
              <template #enterButton>
                <a-button>选择位置</a-button>
              </template>
            </a-input-search>
          </a-form-item>
-          <a-form-item label="道路终点" name="roadEndLat">
-            <a-input-search  @search="showRoadMap('end',form.roadStartLng,form.roadStartLat)" :value="`[${form.roadEndLng},${form.roadEndLat}]`" placeholder="请选择道路终点" >
-              <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"
+
+          <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>
@@ -167,7 +164,8 @@
            >
              <a-button>导入</a-button>
            </a-upload>
-            <a-button @click="exportData" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出</a-button>
+            <a-button @click="exportData" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">导出
+            </a-button>
          </a-space>
        </template>
        <template #action="{ record }">
@@ -284,15 +282,11 @@ export default {
        where: this.where,
      });
    },
-    showRoadMap(roadAttr,lng,lat) {
+    showRoadMap(form) {
+      const {placeLng,placeLat,correctLng,correctLat} = form
      this.visibleRoadMap = true
-      if(roadAttr === "start"){
-        this.roadMapTitle = "选择道路起点"
-      }else {
-        this.roadMapTitle = "选择道路终点"
-      }
+      this.roadMapTitle = "选择修正后的道路坐标"
      this.$nextTick(() => {
-        console.log(lat,lng)
        console.log(this.$refs.roadMap)
        // eslint-disable-next-line no-undef
        var map = new BBMap.Map(this.$refs.roadMap);    // 创建Map实例
@@ -300,22 +294,18 @@ export default {
        map.addControl(new BBMap.NavigationControl());  //初始化地图控件
        map.addControl(new BBMap.ScaleControl());
        map.addControl(new BBMap.OverviewMapControl());
-        var point = new BBMap.Point(lng?lng:108.33, lat?lat:22.84);
+        var point = new BBMap.Point(correctLng?correctLng:placeLng?placeLng:108.33,correctLat?correctLat:placeLat?placeLat:22.84);
+        // var point = new BBMap.Point(form.placeLng ? form.placeLng : 108.33, form.placeLat ? form.placeLat : 22.84);
        map.centerAndZoom(point, 13);//初始化地图中心点
        var marker = new BBMap.Marker(point); //初始化地图标记
        marker.enableDragging(); //标记开启拖拽

        var gc = new BBMap.Geocoder();//地址解析类
        //添加标记拖拽监听
-        marker.addEventListener("dragend",  (e)=> {
+        marker.addEventListener("dragend", (e) => {
          //获取地址信息
-          if(roadAttr === "start"){
-            this.form['roadStartLng'] = e.point.lng
-            this.form['roadStartLat'] = e.point.lat
-          }else {
-            this.form['roadEndLng'] = e.point.lng
-            this.form['roadEndLat'] = e.point.lat
-          }
+          this.form['correctLng'] = e.point.lng
+          this.form['correctLat'] = e.point.lat

          gc.getLocation(e.point, function (rs) {
            showLocationInfo(e.point, rs);
@@ -332,11 +322,11 @@ export default {
        map.centerAndZoom(point, 15); //设置中心点坐标和地图级别
        map.addOverlay(marker); //将标记添加到地图中
        //显示地址信息窗口
-        function showLocationInfo(pt, rs){
+        function showLocationInfo(pt, rs) {
          var opts = {
-            width : 250,     //信息窗口宽度
+            width: 250,     //信息窗口宽度
            height: 100,     //信息窗口高度
-            title : ""  //信息窗口标题
+            title: ""  //信息窗口标题
          }
          var addComp = rs.addressComponents;
          var addr = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
--- a/src/views/visualiz/sound/road/index.vue
+++ b/src/views/visualiz/sound/road/index.vue
@@ -28,6 +28,71 @@
    <mapNominal :param="nominalList"></mapNominal>
    <map-table-center :rowData="levelData"></map-table-center>
    <map-table :rowData="pointData"></map-table>
+    <a-modal
+      v-model:visible="showEdit"
+      :title="form.roadNoisePlaceId !== undefined ? '修改' : '添加'"
+      :confirm-loading="loading"
+      :width="800"
+      :body-style="{ paddingBottom: '8px' }"
+      @ok="save"
+    >
+      <a-form
+        ref="form"
+        :model="form"
+        :rules="rules"
+        :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+        :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-form-item>
+        <a-form-item label="测点名称" name="placeName">
+          <a-input v-model:value="form.placeName" placeholder="请输入测点名称" allow-clear/>
+        </a-form-item>
+        <a-form-item label="点位编码" name="placeCode">
+          <a-input v-model:value="form.placeCode" placeholder="请输入点位编码" allow-clear/>
+        </a-form-item>
+        <a-form-item label="所属城区" name="area">
+          <a-input v-model:value="form.area" placeholder="请输入所属城区" allow-clear/>
+        </a-form-item>
+        <a-form-item label="所属路段" name="road">
+          <a-input v-model:value="form.road" placeholder="请输入所属路段" allow-clear/>
+        </a-form-item>
+        <a-form-item label="路长" name="roadLength">
+          <a-input type="number" v-model:value="form.roadLength" placeholder="请输入所属路长" allow-clear/>
+        </a-form-item>
+        <a-form-item label="路宽" name="roadWidth">
+          <a-input type="number" v-model:value="form.roadWidth" placeholder="请输入所属路宽" allow-clear/>
+        </a-form-item>
+        <a-form-item label="测点经度" name="placeLng">
+          <a-input v-model:value="form.placeLng" placeholder="请输入测点经度" allow-clear/>
+        </a-form-item>
+        <a-form-item label="测点纬度" name="placeLat">
+          <a-input v-model:value="form.placeLat" 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.placeLng},${form.placeLat}]`" 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="regionLevel">
+          <a-input v-model:value="form.regionLevel" placeholder="请输入点位等级" allow-clear/>
+        </a-form-item>
+
+      </a-form>
+    </a-modal>
  </div>
 </template>
 <script>
@@ -36,6 +101,7 @@ import {
  getColumnOptions,
  statisticLevelYear
 } from "@/api/ecology/noise/road-sound";
+import {getPlace, savePlace, updatePlace} from "@/api/ecology/noise/road-noise-place"
 import tipTool from "@/views/components/tipTool";
 import mapNominal from "@/views/components/mapNominal";
 import mapTable from "@/views/components/mapTable";
@@ -81,7 +147,19 @@ export default {
      value: '',
      result: [],
      searchKey: "",
-      searchId: -1
+      searchId: -1,
+      // 字典表单
+      visibleRoadMap: false,
+      roadMapTitle: "选择坐标",
+      showEdit: false,
+      form: {},
+      loading: false,
+      rules: {
+        // year: [{required: true, message: '请输入年份'}],
+        // placeName: [{required: true, message: '请选择测点名称'}],
+        // placeLng: [{required: true, message: '请输入测点经度',},],
+        // placeLat: [{required: true, message: '请输入测点纬度',},],
+      },
    };
  },
  mounted() {
@@ -192,7 +270,7 @@ export default {
          }
        })
        // eslint-disable-next-line no-undef
-        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.lng, item.lat), index, color);
+        var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(item.correctLng?item.correctLng:item.lng,item.correctLat?item.correctLat:item.lat), index, color);
        that.map.addOverlay(myCompOverlay);//将标注添加到地图中
        myCompOverlay.addEventListener('mouseover', function (e) {
          let currentId = e.target.getAttribute("id")
@@ -222,6 +300,15 @@ export default {
          that.currentY = 0
          that.tipFlag = false
        })
+        myCompOverlay.addEventListener('contextmenu',function (e){
+          console.log("右键")
+          let currentId = e.target.getAttribute("id")
+
+          getPlace(that.pointData[currentId.substring(2, currentId.length)].placeDictId).then(res=>{
+            that.form = res.data.data
+            that.showEdit = true
+          })
+        })
      })
    },
    whereChange(e) {
@@ -287,7 +374,107 @@ export default {
          return that.nominalList[index]['color']
        }
      })
+    },
+    async save() {
+      await this.$refs.form.validate();
+      const hide = this.$message.loading('请求中..', 0);
+      const form = this.form;
+      if (form.roadNoisePlaceId) {
+        updatePlace(form)
+          .then((res) => {
+            if (res.data.code == 0) {
+              this.showEdit = false;
+              this.$message.success(res.data.msg);
+              this.whereChange();
+            } else {
+              this.$message.error(res.data.msg);
            }
+          })
+          .catch((error) => {
+            this.$message.error(error.message);
+          })
+          .finally(() => {
+            hide();
+          });
+      } else {
+        savePlace(form)
+          .then((res) => {
+            if (res.data.code == 0) {
+              this.showEdit = false;
+              this.$message.success(res.data.msg);
+              this.whereChange();
+            } else {
+              this.$message.error(res.data.msg);
+            }
+          })
+          .catch((error) => {
+            this.$message.error(error.message);
+          })
+          .finally(() => {
+            hide();
+          });
+      }
+    },
+    showRoadMap(form) {
+      const {placeLng,placeLat,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:placeLng?placeLng:108.33,correctLat?correctLat:placeLat?placeLat:22.84);
+        // var point = new BBMap.Point(form.placeLng ? form.placeLng : 108.33, form.placeLat ? form.placeLat : 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>