tj

src/utils/index.js

@@ -569,6 +569,34 @@ export function Uint8ArrayToString(fileData) {
 
   return dataString
 }
+export function NumConvertLM1(num) {
+  var aArray = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1]
+  var rArray = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']
+  var str = ''
+  for (var i = 0; i < aArray.length; i++) {
+    while (num >= aArray[i]) {
+      str += rArray[i]
+      num -= aArray[i]
+    }
+  }
+  return str
+}
+
+// 只能转换 4000 以下的正整数阿拉伯数字
+export function NumConvertLM(num) {
+  var Roman = [['', 'I', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ', 'Ⅷ', 'Ⅸ'],
+    ['', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'],
+    ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'],
+    ['', 'M', 'MM', 'MMM', '  ', ' ', '  ', '   ', '    ', '  ']]
+
+  if (isNaN(num)) return num
+  var ReverseArr = num.toString().split('').reverse()
+  var CorrectArr = []
+  for (var i = 0; i < ReverseArr.length; i++) {
+    CorrectArr.unshift(Roman[i][ReverseArr[i]])
+  }
+  return CorrectArr.join('')
+}
 // 风险类型
 export function riskType(val) {
   const strs = [

src/views/goaf/info/components/GoafInfo.vue

@@ -11,16 +11,26 @@
           <el-button slot="append" icon="el-icon-search" @click="getData()" />
         </el-input>
         <el-button type="primary" @click="handleAdd">新增</el-button>
+        <el-button type="primary" @click="batchDown">批量下载二维码</el-button>
       </el-col>
     </el-row>
 
     <el-row class="m-top-15">
       <el-table v-loading="listLoading" class="page-table" border fit :data="dataList" :span-method="arraySpanMethod">
         <!-- <el-table-column type="index" label="序号" header-align="center" align="center" width="60" /> -->
-        <el-table-column prop="goafOrebelt" label="矿带" />
-        <el-table-column prop="goafOreheight" label="中段" />
+        <el-table-column prop="goafOrebelt" label="矿带">
+          <template v-slot="{row}">
+            <span>{{ convertNum(row.goafOrebelt) }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="goafOrebody" label="矿体" />
+        <el-table-column prop="goafOreheight" label="中段" />
         <el-table-column prop="goafName" label="采空区名称" />
+        <el-table-column prop="positionName" label="二维码" header-align="center" align="center" width="70">
+          <template v-slot="{row}">
+            <span class="icon iconfont icon-erweima" @click="showQrcode(row)" />
+          </template>
+        </el-table-column>
         <el-table-column prop="goafAvexArea" label="水平断面均暴露面积" />
         <el-table-column prop="goafAvinWidth" label="平均倾向宽度" />
         <el-table-column prop="goafAvexHeight" label="平均暴露高度">
@@ -66,15 +76,24 @@
       </div>
     </el-row>
     <goaf ref="goaf" @formSuccess="getData" />
+    <QrCode ref="qrcode" />
+    <div id="qrcode" ref="qrcodeModal" style="position:fixed;top:-9999px;" />
   </div>
 </template>
 
 <script>
+import html2canvas from 'html2canvas'
+import JSZip from 'jszip'
+import saveAs from 'file-saver'
+import QRCode from 'qrcodejs2'
 import { getHazardRiskByPage, deleteHazardRiskById } from '@/api/aqpt/hazardRiskApi'
 import { Pagination } from '@/components'
 import Goaf from './Goaf'
+import { NumConvertLM } from '@/utils'
+import { QrCode } from '@/components'
+var zip = new JSZip()
 export default {
-  components: { Pagination, Goaf },
+  components: { Pagination, Goaf, QrCode },
   data() {
     return {
       dataList: [],
@@ -93,7 +112,7 @@ export default {
     const items = []
     const item = { 'goafId': 170,
       'ocId': 832,
-      'goafOrebelt': 'Ⅲ',
+      'goafOrebelt': 3,
       'goafOrebody': 289,
       'goafOreheight': 957,
       'goafName': 'rocky.bechtelar',
@@ -113,7 +132,9 @@ export default {
       'goafRemainVolume': 732,
       'goafFillMethod': 142,
       'goafIsFill': 703,
-      'goafInfoRemak': 'opiuk0' }
+      'goafInfoRemak': 'opiuk0',
+      'goafQrCode': '二维码地址-goafQrCode'
+    }
     for (let i = 0; i < 10; i++) {
       items.push(item)
     }
@@ -121,14 +142,17 @@ export default {
     this.total = 20
   },
   methods: {
+    convertNum(num) {
+      return num ? NumConvertLM(num) : '--'
+    },
     arraySpanMethod({ rowIndex, columnIndex }) {
-      if (columnIndex < 2) {
-        if (rowIndex < 1) {
-          return [this.conditions.limit || 10, 1]
-        } else {
-          return [0, 0]
-        }
-      }
+      // if (columnIndex < 2) {
+      //   if (rowIndex < 1) {
+      //     return [this.conditions.limit || 10, 1]
+      //   } else {
+      //     return [0, 0]
+      //   }
+      // }
     },
     loadData() {
       this.getData()
@@ -182,11 +206,84 @@ export default {
       }).catch(() => {
         this.$message.info('已取消删除')
       })
+    },
+    showQrcode(row) {
+      this.$refs.qrcode.draw(row.goafQrCode)
+    },
+    batchDown() { /* 点击按钮获取制作二维码素材*/
+      const content = JSON.parse(JSON.stringify(this.exportItems || this.dataList))
+      this.downloadMaterial(content)
+    },
+
+    downloadMaterial(content) { // 下载物料
+      this.batch(content, '采空区')
+    },
+
+    async batch(arr, fileName) {
+      const self = this
+      window.loading = this.$loading({
+        lock: true,
+        text: '制作二维码中!',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      zip = new JSZip()
+      for (let i = 0; i < arr.length; i++) {
+        const item = arr[i]
+        await self.drawQrcode(item.type, item.goafQrCode).catch(() => {
+          window.loading.close()
+          this.$message.error('导出失败')
+        })
+        await self.packMaterial(`${item.goafOrebelt}-${item.goafOrebody}-${item.goafOreheight}-${new Date().getTime()}`).catch(() => {
+          window.loading.close()
+          this.$message.error('导出失败')
+        })
+      }
+      zip.generateAsync({
+        type: 'blob'
+      }).then((blob) => {
+        saveAs(blob, fileName + '二维码物料.zip')
+        window.loading.close()
+      })
+    },
+    drawQrcode(type, url, sleep) { // 绘制二维码
+      this.$refs.qrcodeModal.innerHTML = ''
+      return new Promise((resolve, reject) => {
+        new QRCode('qrcode', {
+          width: 400,
+          height: 400,
+          text: url.toString()
+        })
+        setTimeout(function() {
+          resolve()
+        }, sleep || 300)
+      })
+    },
+
+    packMaterial(name) { // 打包处理
+      if (!name) name = 'xxx'
+      return new Promise((resolve, reject) => {
+        html2canvas(document.getElementById('qrcode'), {
+          backgroundColor: null,
+          useCORS: true,
+          dpi: 500,
+          scale: 5
+        }).then((canvas) => {
+          let dataURL = canvas.toDataURL('photo/png')
+          dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, '')
+          zip.file(name + '.jpg', dataURL, { base64: true })
+          resolve()
+        }).catch((e) => {
+          reject(e)
+        })
+      })
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+    @import "icon/iconfont.css";
     .content-container {
         background: #193142FF;
         margin: 10px 10px 10px 0;

src/views/goaf/info/components/icon/iconfont.css

@@ -0,0 +1,26 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1632901626051') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #3D5F76;
+}
+
+.icon-erweima:before {
+  content: "\e605";
+}
+
+.icon-weizhi:before {
+  content: "\e8ff";
+}
+
+.icon-gonggaopai:before {
+  content: "\e61f";
+}
+

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

@@ -26,7 +26,7 @@
           </ul>
         </div>
         <div v-if="type==2||type=='drage'" class="saveForm">
-          <div class="title">作业点基本信息</div>
+          <div class="title">新增标记点</div>
           <div class="item">
             <div class="lable">采空区：</div>
             <div class="content">
@@ -57,18 +57,29 @@
           </div>
         </div>
         <div v-if="type==3" class="deleteForm">
-          <div class="title">作业点基本信息</div>
+          <div class="title">删除标记点</div>
           <div class="item">
-            <div class="lable">作业项目：</div>
+            <div class="lable">采空区：</div>
             <div class="content">
-              <img class="icon" :src="deleteForm.icon" alt="">
-              <span>{{ deleteForm.name }}</span>
+              <el-select v-model="deleteForm.goafId" style="width:200px">
+                <el-option :value="0" label="采空区" />
+              </el-select>
             </div>
           </div>
           <div class="item">
-            <div class="lable">名称：</div>
+            <div class="lable">采空区：</div>
             <div class="content">
-              <span>{{ deleteForm.name }}</span>
+              <el-select v-model="deleteForm.goafId" style="width:200px">
+                <el-option :value="0" label="采空区" />
+              </el-select>
+            </div>
+          </div>
+          <div class="item">
+            <div class="lable">采空区：</div>
+            <div class="content">
+              <el-select v-model="deleteForm.goafId" style="width:200px">
+                <el-option :value="0" label="采空区" />
+              </el-select>
             </div>
           </div>
           <div class="bt-wrap">
@@ -85,6 +96,7 @@
 <script>
 import * as L from 'leaflet'
 import '@geoman-io/leaflet-geoman-free'
+import { mapGetters } from 'vuex'
 import MapSelector from '@/components/MapSelector'
 import { getMapLayerById, createMapLayer, getMapLayerByList } from '@/api/system/mapLayerApi'
 const markerIcon = L.icon({
@@ -114,6 +126,9 @@ export default {
       type: 1,
       checkItemIndex: -1,
       state: 0,
+      markerId: undefined,
+      veditId: undefined,
+      dragstartMarker: undefined,
       markerItems: [
         { icon: require('@/assets/images/icon/4.png'), name: '动火作业' }
       ],
@@ -146,7 +161,7 @@ export default {
         'goafName': '',
         'mapId': '',
         'layerId': '',
-        'layerCatId': '',
+        'layerCatId': '1',
         'layerTitle': '',
         'layerMarker': '',
         'layerVector': '',
@@ -158,7 +173,11 @@ export default {
       imageOverlay: undefined
     }
   },
-  watch: {},
+  computed: {
+    ...mapGetters([
+      'userData'
+    ])
+  },
   mounted() {
     this.initMap()
   },
@@ -179,8 +198,6 @@ export default {
         } else {
           this.$message.error(msg)
         }
-      }).catch((error) => {
-        console.log(error)
       })
     },
 
@@ -197,8 +214,8 @@ export default {
       this.map = L.map('vmap', {
         crs: L.CRS.Simple, // 一个简单的CRS，可将经度和纬度直接映射到x其中y。可用于平面地图（例如游戏地图）
         minZoom: 0,
-        maxZoom: 18,
-        zoom: 0,
+        maxZoom: 1,
+        zoom: 1,
         maxBounds: bounds, // 地图拖动到边界后自动弹回
         maxBoundsViscosity: 0.2,
         attributionControl: false,
@@ -248,7 +265,6 @@ export default {
       this.$emit('formSuccess')
     },
     mapListener() {
-      const self = this
       this.map.on('pm:drawstart', (e) => { // 绘制开始时事件
         if (e.shape === 'Marker') {
           const iconUrl = this.saveForm.icon
@@ -263,6 +279,7 @@ export default {
         }
       })
       this.map.on('pm:create', (e) => {
+        const self = this
         if (e.shape === 'Marker') {
           const iconUrl = this.saveForm.icon
           const name = this.saveForm.name
@@ -277,14 +294,16 @@ export default {
             iconSize: [60, 70]
           })
           layer.setIcon(icon)
-          layer.on('click', function(ev) {
-            self.type = 3
-            self.markerId = ev.target._leaflet_id
-            self.deleteForm.name = ev.target.options.icon.options.name
-            self.deleteForm.icon = ev.target.options.icon.options.iconUrl
-          })
           self.layer = layer
           layer.addTo(this.layerGroup)
+          layer.on('click', (ev) => {
+            if (self.type === 2) {
+              layer.dragging.enable()
+            }
+          })
+          layer.on('dragend', function(ev) {
+            self.layer = ev.target
+          })
         }
         this.map.pm.disableDraw(e.shape)
       })
@@ -301,25 +320,60 @@ export default {
         } else {
           this.$message.error(msg)
         }
-      }).catch((error) => {
-        console.log(error)
       })
     },
 
     // 初始化地图图层
     initMapLayers() {
-      var layerList = this.mapLayerList
-      console.log
+      const self = this
+      const layerList = this.mapLayerList
+      const feature = []
       this.layerGroup = L.layerGroup().addTo(this.map)
-      var vectorGeoJson = []
+
       if (layerList != null && layerList.length > 0) {
         layerList.forEach((item) => {
-          item.layerMarker && vectorGeoJson.push(JSON.parse(item.layerMarker))
-          item.layerVector && vectorGeoJson.push(JSON.parse(item.layerVector))
+          item.layerMarker && feature.push(JSON.parse(item.layerMarker))
+          item.layerVector && feature.push(JSON.parse(item.layerVector))
         })
-        L.geoJSON(vectorGeoJson, { }).addTo(this.map)
+        L.geoJSON(feature, {
+          // pointToLayer: function(_feature, latlng) {
+          //   // var smallIcon = L.Icon({
+          //   //   options: {
+          //   //     iconSize: [27, 27],
+          //   //     iconAnchor: [13, 27],
+          //   //     popupAnchor: [1, -24],
+          //   //     iconUrl: 'icone/chapel-2.png'
+          //   //   }
+          //   // })
+          //   // return L.marker(latlng, { icon: smallIcon })
+          // },
+          onEachFeature: (_feature, layer) => {
+            this.layerGroup.addLayer(layer)
+            layer.on('click', (ev) => {
+              if (self.type === 2 || self.type === 'drage') {
+                self.$message.success('请先确认当前标记点操作！')
+                return
+              }
+              self.type = 3
+              self.layer = ev.target
+              layer.dragging.enable()
+            })
+            layer.on('dragstart', function(ev) {
+              if (self.dragstartMarker === undefined) {
+                self.dragstartMarker = { layer, latlng: ev.target._latlng }
+              }
+            })
+            layer.on('dragend', function(ev) {
+              self.type = 'drage'
+              self.layer = ev.target
+            })
+          }
+        }).addTo(this.layerGroup)
       }
     },
+    clearLayers() {
+      this.layerGroup.clearLayers()
+    },
     submit() {
       // 图层操作完，一次导出geoJSON
       const layers = this.map._layers
@@ -329,76 +383,6 @@ export default {
         geoJson: this.createGeoJson()
       })
     },
-    formatlayer(data) {
-      const enums = {
-        'Marker': 'Point'
-      }
-      return {
-        'type': 'Feature',
-        'properties': {
-          'name': 'Coors Field',
-          'amenity': 'Baseball Stadium',
-          'popupContent': 'This is where the Rockies play!',
-          'subType': data.shape,
-          'radius': data.layer._radius
-        },
-        'leaflet_id': data.layer._leaflet_id,
-        'geometry': {
-          'type': enums[data.shape] || data.shape,
-          'coordinates': data.layer._latlng
-        }
-      }
-    },
-    drawLayer(params, map = this.map) {
-      var layer = null
-      const _latlng = params.geometry.coordinates.latlng
-      const latlng = Array.isArray(_latlng) ? _latlng(item => [item.lat, item.lng]) : [_latlng.lat, _latlng.lng]
-      switch (params.type) {
-        case 'Marker' :
-          layer = L.marker([latlng]).addTo(map)
-          break
-        case 'Line' :
-          layer = L.polyline([latlng]).addTo(map)
-          break
-        case 'Circle' :
-          layer = L.circle([latlng], {
-            color: 'red',
-            fillColor: '#f03',
-            fillOpacity: 0.5,
-            radius: params.properties.radius
-          }).addTo(map)
-          break
-        case 'Rectangle' :
-          layer = L.rectangle(latlng).addTo(map)
-          break
-        case 'Polygon' :
-          layer = L.polygon(latlng).addTo(map)
-          break
-      }
-      return layer
-    },
-    createGeoJson() {
-      var layerArray = []
-      this.map.eachLayer(function(layer) {
-        if (layer.pm !== 'undefined' && layer.pm != null && layer.pm !== '') {
-          if (layer.pm._enabled === false && layer.pm.options.draggable === true) {
-            layerArray.push(layer)
-          }
-        }
-      })
-      var geojson = L.layerGroup(layerArray).toGeoJSON()
-      for (var n = 0; n < geojson.features.length; n++) {
-        var nowJson = JSON.stringify(geojson.features[n])
-        for (var m = n + 1; m < geojson.features.length; m++) {
-          var nextJson = JSON.stringify(geojson.features[m])
-          if (nowJson === nextJson) {
-            geojson.features.splice(n, 1)
-          }
-        }
-      }
-      return geojson
-    },
-
     checkItem(item, index) {
       if (this.state === 1) {
         this.$message('请保存后再操作！')
@@ -406,12 +390,13 @@ export default {
       }
       this.checkItemIndex = index
       this.type = 2
+      this.state = 1
       this.saveForm.icon = item.icon
       this.saveForm.name = item.name
       this.map.pm.enableDraw('Marker', { snappable: false, tooltips: false })// tooltips: { 'placeMarker': '点击放置标记' },
-      this.state = 1
     },
     save() {
+      console.log(this.layer.toGeoJSON())
       if (this.type === 3) {
         // 删除表单里面的保存
         this.type = 1
@@ -426,21 +411,7 @@ export default {
           this.type = 1
           this.checkItemIndex = -1
           this.state = 2
-          this.saveForm = {
-            'icon': '',
-            'name': '',
-            'goaflayerId': '',
-            'ocId': '',
-            'goafId': '',
-            'goafName': '',
-            'mapId': '',
-            'layerId': '',
-            'layerCatId': '',
-            'layerTitle': '',
-            'layerMarker': '',
-            'layerVector': '',
-            'layerVectorType': ''
-          }
+          this.resetForm()
           this.$message.success('修改成功！')
           this.dragstartMarker = undefined
           // this.getLayers()
@@ -457,21 +428,7 @@ export default {
           this.type = 1
           this.checkItemIndex = -1
           this.state = 2
-          this.saveForm = {
-            'icon': '',
-            'name': '',
-            'goaflayerId': '',
-            'ocId': '',
-            'goafId': '',
-            'goafName': '',
-            'mapId': '',
-            'layerId': '',
-            'layerCatId': '',
-            'layerTitle': '',
-            'layerMarker': '',
-            'layerVector': '',
-            'layerVectorType': ''
-          }
+          this.resetForm()
           this.$message.success('新增成功！')
           // this.getLayers()
         })
@@ -480,17 +437,20 @@ export default {
     cancel() {
       this.state = 2
       this.checkItemIndex = -1
-      this.saveForm.icon = ''
-      this.saveForm.name = ''
+      this.resetForm()
       if (this.type === 'drage') {
         this.type = 1
-        this.dragstartMarker.marker.setLatLng(this.dragstartMarker._latlng)
-        this.dragstartMarker.marker.dragging.disable()
+        this.dragstartMarker.layer.setLatLng(this.dragstartMarker.latlng)
+        this.dragstartMarker.layer.dragging.disable()
         this.dragstartMarker = undefined
         return
       }
+      if (this.type === 2 && !this.layer) {
+        this.type = 1
+      }
       if (this.layer && this.layer._leaflet_id && this.map._layers[this.layer._leaflet_id]) {
         this.map.removeLayer(this.map._layers[this.layer._leaflet_id])
+        this.layer = undefined
       }
     },
     delMarker() {
@@ -498,29 +458,82 @@ export default {
         this.type = 1
         this.state = 2
         this.checkItemIndex = -1
-        this.deleteForm = {
-          'icon': '',
-          'name': '',
-          'goaflayerId': '',
-          'ocId': '',
-          'goafId': '',
-          'goafName': '',
-          'mapId': '',
-          'layerId': '',
-          'layerCatId': '',
-          'layerTitle': '',
-          'layerMarker': '',
-          'layerVector': '',
-          'layerVectorType': ''
-        }
-        if (this.map._layers[this.markerId]) {
-          this.map.removeLayer(this.map._layers[this.markerId])
-        }
+        this.resetForm()
+        // if (this.layer) {
+        //   this.map.removeLayer(this.map._layers[this.layer._leaflet_id])
+        // }
         this.$message.success('删除成功！')
         // this.getLayers()
       })
+    },
+    resetForm() {
+      const data = {
+        'icon': '',
+        'name': '',
+        'goaflayerId': '',
+        'ocId': '',
+        'goafId': '',
+        'goafName': '',
+        'mapId': '',
+        'layerId': '',
+        'layerCatId': '',
+        'layerTitle': '',
+        'layerMarker': '',
+        'layerVector': '',
+        'layerVectorType': ''
+      }
+      this.saveForm = JSON.parse(JSON.stringify(data))
+      this.deleteForm = JSON.parse(JSON.stringify(data))
+    },
+    drawLayer(params, map = this.map) {
+      var layer = null
+      const _latlng = params.geometry.coordinates.latlng
+      const latlng = Array.isArray(_latlng) ? _latlng(item => [item.lat, item.lng]) : [_latlng.lat, _latlng.lng]
+      switch (params.type) {
+        case 'Marker' :
+          layer = L.marker([latlng]).addTo(map)
+          break
+        case 'Line' :
+          layer = L.polyline([latlng]).addTo(map)
+          break
+        case 'Circle' :
+          layer = L.circle([latlng], {
+            color: 'red',
+            fillColor: '#f03',
+            fillOpacity: 0.5,
+            radius: params.properties.radius
+          }).addTo(map)
+          break
+        case 'Rectangle' :
+          layer = L.rectangle(latlng).addTo(map)
+          break
+        case 'Polygon' :
+          layer = L.polygon(latlng).addTo(map)
+          break
+      }
+      return layer
+    },
+    createGeoJson() {
+      var layerArray = []
+      this.map.eachLayer(function(layer) {
+        if (layer.pm !== 'undefined' && layer.pm != null && layer.pm !== '') {
+          if (layer.pm._enabled === false && layer.pm.options.draggable === true) {
+            layerArray.push(layer)
+          }
+        }
+      })
+      var geojson = L.layerGroup(layerArray).toGeoJSON()
+      for (var n = 0; n < geojson.features.length; n++) {
+        var nowJson = JSON.stringify(geojson.features[n])
+        for (var m = n + 1; m < geojson.features.length; m++) {
+          var nextJson = JSON.stringify(geojson.features[m])
+          if (nowJson === nextJson) {
+            geojson.features.splice(n, 1)
+          }
+        }
+      }
+      return geojson
     }
-
   }
 }
 </script>