From 53db46f90ab005f5c8556092e891ecda730c2df5 Mon Sep 17 00:00:00 2001
From: weicw <594098497@qq.com>
Date: Thu, 3 Feb 2022 17:22:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E4=BD=8D=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ecology/noise/road-noise-place.js |   7 +-
 src/views/sound/road/dict/place.vue       |  54 +++---
 src/views/visualiz/sound/road/index.vue   | 193 +++++++++++++++++++++-
 3 files changed, 218 insertions(+), 36 deletions(-)

diff --git a/src/api/ecology/noise/road-noise-place.js b/src/api/ecology/noise/road-noise-place.js
index 594f91a..fae5729 100644
--- 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
 
 }
diff --git a/src/views/sound/road/dict/place.vue b/src/views/sound/road/dict/place.vue
index fb8fb05..5c258b0 100644
--- 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,22 +91,18 @@
           <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>
               <a-button key="submit" type="primary" @click="visibleRoadMap = false">确定</a-button>
@@ -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/>";
diff --git a/src/views/visualiz/sound/road/index.vue b/src/views/visualiz/sound/road/index.vue
index c5e2437..aa2de41 100644
--- 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>