提交

src/views/goaf/map/components/VisualEditor.vue

@@ -5,7 +5,7 @@
       <!-- <div class="page-title">
         现场分布图
       </div> -->
-      <el-button size="mini" type="primary" style="margin-left:15px;" @click="submit">保存</el-button>
+      <!-- <el-button size="mini" type="primary" style="margin-left:15px;" @click="submit">保存</el-button> -->
     </nav>
     <div class="layout-map">
       <div class="left-side">
@@ -25,41 +25,42 @@
             <li>3.编辑信息保存点位</li>
           </ul>
         </div>
+
         <div v-if="type==2||type=='drage'" class="saveForm">
-          <div class="title">新增标记点</div>
+          <div class="title">{{ RtHadnTitle }}</div>
           <div class="item">
             <div class="lable">矿带：</div>
             <div class="content">
-              <el-select v-model="saveForm.goafOrebelt" class="safe-area-item" filterable clearable placeholder="矿带">
-                <el-option :value="0" label="请选择矿带" disabled />
-                <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafOrebelt" :label="item.goafOrebelt" />
+              <el-select v-model="saveForm.goafOrebelt" class="safe-area-item" filterable placeholder="矿带" @change="changeArea(1)">
+                <el-option value="" label="请选择矿带" disabled />
+                <el-option v-for="(item,index) in goafOrebelts" :key="index" :value="item.goafOrebelt" :label="item.goafOrebelt" />
               </el-select>
             </div>
           </div>
           <div class="item">
             <div class="lable">矿体：</div>
             <div class="content">
-              <el-select v-model="saveForm.goafOrebody" class="safe-area-item" filterable clearable placeholder="矿体">
-                <el-option :value="0" label="请选择矿体" disabled />
-                <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
+              <el-select v-model="saveForm.goafOrebody" class="safe-area-item" filterable placeholder="矿体" @change="changeArea(2)">
+                <el-option value="" label="请选择矿体" disabled />
+                <el-option v-for="(item,index) in goafOrebodys" :key="index" :value="item.goafOrebody" :label="item.goafOrebody" />
               </el-select>
             </div>
           </div>
           <div class="item">
             <div class="lable">中段：</div>
             <div class="content">
-              <el-select v-model="saveForm.goafOreheight" class="safe-area-item" filterable clearable placeholder="中段">
-                <el-option :value="0" label="请选择中段" disabled />
-                <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
+              <el-select v-model="saveForm.goafOreheight" class="safe-area-item" filterable placeholder="中段" @change="changeArea(3)">
+                <el-option value="" label="请选择中段" disabled />
+                <el-option v-for="(item,index) in goafOreheights" :key="index" :value="item.goafOreheight" :label="item.goafOreheight" />
               </el-select>
             </div>
           </div>
           <div class="item">
             <div class="lable">采空区：</div>
             <div class="content">
-              <el-select v-model="saveForm.goafName" class="safe-area-item" filterable clearable placeholder="采空区名称">
-                <el-option :value="0" label="请选择采空区" disabled />
-                <el-option v-for="(item,index) in goaf" :key="index" :value="item.goafName" :label="item.goafName" />
+              <el-select v-model="saveForm.goafName" class="safe-area-item" filterable placeholder="采空区名称" @change="changeArea(4)">
+                <el-option value="" label="请选择采空区" disabled />
+                <el-option v-for="item in goafNames" :key="item.goafId" :value="item.goafName" :label="item.goafName" />
               </el-select>
             </div>
           </div>
@@ -101,14 +102,13 @@ import * as L from 'leaflet'
 import '@geoman-io/leaflet-geoman-free'
 import { mapGetters } from 'vuex'
 import MapSelector from '@/components/MapSelector'
-import { getMapLayerByList } from '@/api/system/mapLayerApi'
 import { getGoafBaseInfo } from '@/api/goaf/info'
-import { getMapLayerById, createMapLayer, delMapLayer, updateMapLayer } from '@/api/goaf/layer'
+import { getMapLayerById, createMapLayer, delMapLayer, updateMapLayer, getMapLayer } from '@/api/goaf/layer'
 const markerIcon = L.icon({
   iconUrl: require('@/assets/images/icon/4.png'),
   shadowUrl: require('@/assets/images/icon/4hover.png'),
   iconSize: [60, 70],
-  shadowSize: [60, 70],
+  shadowSize: [0, 0],
   iconAnchor: [16, 52],
   popupAnchor: [1, -38]
 })
@@ -140,13 +140,14 @@ export default {
       conditions: {
         layerId: undefined
       },
+      RtHadnTitle: '标记点操作',
       saveForm: {
         'goaflayerId': '',
         'ocId': '',
         'goafId': '',
-        'goafOrebelt': 0,
-        'goafOrebody': 0,
-        'goafOreheight': 0,
+        'goafOrebelt': '',
+        'goafOrebody': '',
+        'goafOreheight': '',
         'goafName': '',
         'mapId': '',
         'layerId': '',
@@ -178,7 +179,11 @@ export default {
       layers: [],
       layerGroup: [],
       imageOverlay: undefined,
-      goaf: []
+      goaf: [],
+      goafOrebelts: [],
+      goafOrebodys: [],
+      goafOreheights: [],
+      goafNames: []
     }
   },
   computed: {
@@ -194,6 +199,7 @@ export default {
       this.initMap()
       getGoafBaseInfo().then((res) => {
         this.goaf = res.data
+        this.goafOrebelts = this.unique(res.data, 'goafOrebelt')
       })
     },
 
@@ -269,6 +275,7 @@ export default {
       this.viewData.mapId = obj.mapId
       this.formData.mapId = obj.mapId
       this.setRasterLayer()
+      this.clearLayers()
     },
     createMapLayer() {
       createMapLayer().then(() => {
@@ -324,9 +331,9 @@ export default {
     },
     // 获取地图图层数据
     getMapLayers() {
-      const obj = {}
-      obj.mapId = this.mapId
-      getMapLayerByList(obj).then((resp) => {
+      getMapLayer({
+        mapId: this.formData.mapId
+      }).then((resp) => {
         const { code, data, msg } = resp
         if (code === 0) {
           this.mapLayerList = data
@@ -346,8 +353,16 @@ export default {
 
       if (layerList != null && layerList.length > 0) {
         layerList.forEach((item) => {
-          item.layerMarker && feature.push(JSON.parse(item.layerMarker))
-          item.layerVector && feature.push(JSON.parse(item.layerVector))
+          const layerMarker = item.layerMarker && JSON.parse(item.layerMarker)
+          const layerVector = item.layerMarker && JSON.parse(item.layerVector)
+          if (layerMarker && layerMarker.properties) {
+            layerMarker.properties.layerId = item.layerId
+            feature.push(layerMarker)
+          }
+          if (layerVector && layerVector.properties) {
+            layerVector.properties.layerId = item.layerId
+            feature.push(layerVector)
+          }
         })
         L.geoJSON(feature, {
           // pointToLayer: function(_feature, latlng) {
@@ -370,6 +385,7 @@ export default {
               }
               self.type = 3
               self.layer = ev.target
+              self.deleteForm = ev.target.feature.properties
               layer.dragging.enable()
             })
             layer.on('dragstart', function(ev) {
@@ -380,13 +396,16 @@ export default {
             layer.on('dragend', function(ev) {
               self.type = 'drage'
               self.layer = ev.target
+              self.saveForm = ev.target.feature.properties
             })
           }
         }).addTo(this.layerGroup)
       }
     },
     clearLayers() {
-      this.layerGroup.clearLayers()
+      if (this.layerGroup && this.layerGroup.clearLayers) {
+        this.layerGroup.clearLayers()
+      }
     },
     submit() {
       // 图层操作完，一次导出geoJSON
@@ -407,26 +426,105 @@ export default {
       this.state = 1
       this.saveForm.icon = item.icon
       this.saveForm.name = item.name
+      this.RtHadnTitle = '新增标记点'
       this.map.pm.enableDraw('Marker', { snappable: false, tooltips: false })// tooltips: { 'placeMarker': '点击放置标记' },
     },
+    changeAreaByFilter() {
+      let goaf = this.deeepClone(this.goaf)
+      const list = ['goafOrebelt', 'goafOrebody', 'goafOreheight', 'goafName']
+      const selected = []
+      const unselected = []
+      for (let i = 0; i < 4; i++) {
+        console.log({
+          name: list[i],
+          value: this.saveForm[list[i]]
+        })
+        if (!this.saveForm[list[i]]) {
+          console.log(list[i] + 's')
+          unselected.push(list[i] + 's')
+        } else {
+          selected.push({
+            name: list[i],
+            value: this.saveForm[list[i]]
+          })
+        }
+      }
+      for (let i = 0; i < selected.length; i++) {
+        goaf = goaf.filter(item => item[selected[i].name] === selected[i].value)
+      }
+      for (let i = 0; i < unselected.length; i++) {
+        this.$set(this, unselected[i], goaf)
+      }
+    },
+    changeArea(type) {
+      const goafOrebelts = this.deeepClone(this.goafOrebelts)
+      let goafOrebodys = this.deeepClone(this.goafOrebodys)
+      let goafOreheights = this.deeepClone(this.goafOreheights)
+      let goafNames = this.deeepClone(this.goafNames)
+      if (type === 1) {
+        goafOrebodys = goafOrebelts.filter(item => item.goafOrebelt === this.saveForm.goafOrebelt)
+        goafOrebodys = this.unique(goafOrebodys, 'goafOrebelt')
+        this.goafOrebodys = goafOrebodys
+        this.goafOreheights = []
+        this.goafNames = []
+        this.saveForm.goafOrebody = ''
+        this.saveForm.goafOreheight = ''
+        this.saveForm.goafName = ''
+      } else if (type === 2) {
+        goafOreheights = goafOrebodys.filter(item => item.goafOrebody === this.saveForm.goafOrebody)
+        goafOreheights = this.unique(goafOreheights, 'goafOreheight')
+        this.goafOreheights = goafOreheights
+        this.goafNames = []
+        this.saveForm.goafOreheights = ''
+        this.saveForm.goafName = ''
+      } else if (type === 3) {
+        goafNames = goafOreheights.filter(item => item.goafOreheight === this.saveForm.goafOreheight)
+        goafNames = this.unique(goafNames, 'goafName')
+        this.goafNames = goafNames
+        this.saveForm.goafName = ''
+      } else {
+        for (let i = 0; i < goafNames.length; i++) {
+          if (this.saveForm.goafName === goafNames[i].goafName) {
+            this.saveForm.goafId = goafNames[i].goafId
+          }
+        }
+      }
+      this.$forceUpdate()
+    },
     save() {
+      const layerFeature = this.layer?.toGeoJSON()
+      if (typeof (layerFeature) === 'object') {
+        layerFeature.properties = {
+          ...layerFeature.properties,
+          'ocId': this.userData.ocId,
+          'goafId': this.saveForm.goafId,
+          'goafOrebelt': this.saveForm.goafOrebelt,
+          'goafOrebody': this.saveForm.goafOrebody,
+          'goafOreheight': this.saveForm.goafOreheight,
+          'goafName': this.saveForm.goafName
+        }
+      }
       if (this.type === 3) {
         // 删除表单里面的保存
         this.type = 1
       } else if (this.type === 'drage') {
+        if (!this.saveForm.goafId) {
+          this.$message.error('请选择采空区')
+          return
+        }
         updateMapLayer({
           // 'goaflayerId': '',
           'ocId': this.userData.ocId,
-          // 'goafId': '',
+          'goafId': this.saveForm.goafId,
           'goafOrebelt': this.saveForm.goafOrebelt,
           'goafOrebody': this.saveForm.goafOrebody,
           'goafOreheight': this.saveForm.goafOreheight,
           'goafName': this.saveForm.goafName,
           'mapId': this.formData.mapId,
-          'layerId': '',
+          'layerId': this.saveForm.layerId,
           'layerCatId': '',
           'layerTitle': '',
-          'layerMarker': this.layer?.toGeoJSON(),
+          'layerMarker': layerFeature,
           'layerVector': '',
           'layerVectorType': ''
         }).then(() => {
@@ -440,10 +538,14 @@ export default {
         })
       } else {
         // 新增
+        if (!this.saveForm.goafId) {
+          this.$message.error('请选择采空区')
+          return
+        }
         createMapLayer({
           // 'goaflayerId': '',
           'ocId': this.userData.ocId,
-          // 'goafId': '',
+          'goafId': this.saveForm.goafId,
           'goafOrebelt': this.saveForm.goafOrebelt,
           'goafOrebody': this.saveForm.goafOrebody,
           'goafOreheight': this.saveForm.goafOreheight,
@@ -452,7 +554,7 @@ export default {
           'layerId': '',
           'layerCatId': '',
           'layerTitle': '',
-          'layerMarker': this.layer?.toGeoJSON(),
+          'layerMarker': layerFeature,
           'layerVector': '',
           'layerVectorType': ''
         }).then(() => {
@@ -483,7 +585,8 @@ export default {
       }
     },
     delMarker() {
-      delMapLayer(this.veditId).then(() => {
+      // goaflayerId, mapId, layerId
+      delMapLayer(this.deleteForm.goafId, this.formData.mapId, this.deleteForm.layerId).then(() => {
         this.type = 1
         this.state = 2
         this.checkItemIndex = -1
@@ -559,6 +662,13 @@ export default {
         }
       }
       return geojson
+    },
+    unique(arr = [], name = 'name') {
+      const res = new Map()
+      return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
+    },
+    deeepClone(params) {
+      return JSON.parse(JSON.stringify(params))
     }
   }
 }