feat:抽取地图选点组件

2021-03-25 19:33:48 +08:00
parent b56f166432
commit 1fa0913c64
5 changed files with 200 additions and 143 deletions
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -767,7 +767,8 @@ const cn = {
      suspended: '停用',
      state: '状态',
      longitude: '经度',
-      latitude: '纬度'
+      latitude: '纬度',
+      lnglat:'坐标'
    },
    model: {
      model: '资产型号',
@@ -839,11 +840,12 @@ const cn = {
        day: '天',
        maxSeries: 'Query max series',
        unsaved: '未保存提示',
-        mapConfig: '地图属性',
+        mapConfig: '地图中心点',
        mapTitle: '配置地图',
        lat: '纬度',
        lng: '经度',
-        zoom: '缩放'
+        zoom: '缩放',
+        lnglat:'坐标',
      },
      email: {
        email: '邮件',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -712,7 +712,8 @@ const en = {
      suspended: 'Suspended',
      state: 'State',
      longitude: 'Longitude',
-      latitude: 'Latitude'
+      latitude: 'Latitude',
+      lnglat:'Coordinate'
    },
    model: {
      model: 'Asset model',
@@ -842,11 +843,12 @@ const en = {
        day: 'day',
        maxSeries: 'Query max series',
        unsaved: 'Unsaved tip',
-        mapConfig: 'Map attribute',
+        mapConfig: 'Map center',
        mapTitle: 'Configurate map',
        lat: 'latitude',
        lng: 'longitude',
-        zoom: 'zoom'
+        zoom: 'zoom',
+        lnglat:'coordinate'
      },
      email: {
        email: 'Email',
--- a/nezha-fronted/src/components/common/latlngPicker.vue
+++ b/nezha-fronted/src/components/common/latlngPicker.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="latlng">
+    <div class="input-box">
+      <div class="input-box-item">
+        <el-input  v-model="lnglat" >
+          <template slot="prepend" v-if="showZoom">{{$t('config.system.basic.lnglat')}}</template>
+        </el-input>
+      </div>
+      <div class="input-box-item" v-if="showZoom">
+        <el-input-number controls-position="right" :min="this.mapParam.minZoom" :max="this.mapParam.maxZoom" :step="1"  v-model="mapParam.zoom">
+          <template slot="prepend">{{$t('config.system.basic.zoom')}}</template>
+        </el-input-number>
+      </div>
+      <div class="input-box-item" style="margin-right: unset !important;width: 30px !important;flex:unset;" @click="mapConfigVisible = true"><i class="nz-icon nz-icon-shuidi" style="color:rgb(238, 157, 63)"></i></div>
+    </div>
+    <el-dialog :visible.sync="mapConfigVisible" :title="$t('config.system.basic.mapTitle')" width="calc(50% - 10px)"  @close="mapClose" @opened="initMap" class=" nz-dialog map-config-dialog" :modal-append-to-body="appendToBody">
+      <div id="map" style="height: 100%; width: 100%"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
+  import 'leaflet/dist/leaflet.css'
+  import * as L from 'leaflet'
+  import icon from 'leaflet/dist/images/marker-icon.png'
+  import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+  export default {
+    name: "latlngPicker",
+    props:{
+      initData:{type:Object},
+      appendToBody:{type:Boolean,default:true},
+      showZoom:{type:Boolean,default:true}
+    },
+    data(){
+      return{
+        lnglat:"",
+        mapParam:{ longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 },
+        map: null,
+        marker: null,
+        mapConfigVisible: false,
+      }
+    },
+    created() {
+      if(this.initData){
+        this.mapParam = JSON.parse(JSON.stringify(this.initData));
+      }else{
+        this.queryDefaultMapConfig();
+      }
+      this.lnglat = this.mapParam.longitude+","+this.mapParam.latitude;
+    },
+    mounted() {
+    },
+    methods:{
+      initMap: function () {
+        if (this.map) {
+          this.map.remove()
+          this.map = null
+        }
+        this.setLatlng();
+        const DefaultIcon = L.icon({
+          iconUrl: icon,
+          iconSize: [26, 40],
+          iconAnchor: [13, 40],
+          shadowUrl: iconShadow
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        const map = L.map('map', {
+          minZoom: this.mapParam.minZoom,
+          maxZoom: this.mapParam.maxZoom,
+          attributionControl: false,
+          zoomControl: false,
+          maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
+        }).setView([this.mapParam.latitude, this.mapParam.longitude], this.mapParam.zoom)
+
+        L.tileLayer(
+          '/static/Tiles/{z}/{x}/{y}.png',
+          { noWrap: true }
+        ).addTo(map)
+
+        const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
+        attribution.addAttribution(' © OpenStreetMap contributors')
+        attribution.addTo(map)
+
+        L.control.zoom({
+          position: 'bottomright',
+          zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
+          zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
+          zoomInTitle: '',
+          zoomOutTitle: ''
+        }).addTo(map)
+
+        const marker = L.marker([this.mapParam.latitude, this.mapParam.longitude]).addTo(map)
+        map.on('click', function (e) {
+          const latitude = e.latlng.lat
+          const longitude = e.latlng.lng
+          marker.setLatLng([latitude, longitude])
+        })
+        this.map = map
+        this.marker = marker
+      },
+      mapClose: function () {
+        this.mapConfigVisible = false
+        const latlng = this.marker.getLatLng()
+        this.mapParam.longitude = latlng.lng.toFixed(3);
+        this.mapParam.latitude = latlng.lat.toFixed(3);
+        this.lnglat = this.mapParam.longitude+","+this.mapParam.latitude;
+
+        this.mapParam.zoom = this.map.getZoom();
+      },
+      setLatlng:function(){
+        let lnglat = this.lnglat.split(",");
+        this.mapParam.longitude = lnglat[0]
+        this.mapParam.latitude = lnglat[1]
+      },
+      getAttribute:function(){
+        return JSON.parse(JSON.stringify(this.mapParam));
+      },
+      setLnglat:function(lat,lng){
+        if(lat&&lng){
+          this.mapParam.latitude=lat;
+          this.mapParam.longitude =lng;
+          this.lnglat = this.mapParam.longitude+","+this.mapParam.latitude;
+        }
+      },
+      queryDefaultMapConfig:function(){
+        this.$get("/sysConfig?paramKey=map_center_config").then(response=>{
+          if(response.code == 200){
+            this.mapParam = JSON.parse(response.data.paramKey.map_center_config);
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .latlng .input-box{
+    width: 100%;
+    display: flex;
+  }
+  .latlng .input-box .input-box-item{
+    margin-right: 20px;
+    flex: 1;
+  }
+  .latlng .input-box .el-input,.latlng .input-box .el-input-number{
+    width: 100%;
+  }
+</style>
+
+<style>
+  .latlng .map-config-dialog .el-dialog{
+    height: 45%;
+  }
+  .latlng .map-config-dialog .el-dialog__body{
+    height: calc(100% - 48px) !important;
+
+  }
+  .latlng .input-box .el-input .el-input-group__prepend{
+    padding:0px 5px!important;
+  }
+</style>
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -15,7 +15,7 @@

      <!-- begin--表单-->
      <div class="right-box-form-box">
-        <el-form class="right-box-form right-box-form-left" label-width="120px" :model="editDc" label-position = "top" :rules="rules" ref="dcForm">
+        <el-form class="right-box-form right-box-form-left" label-width="120px" size="small" :model="editDc" label-position = "top" :rules="rules" ref="dcForm">
          <el-form-item :label='$t("overall.name")' prop="name">
            <el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small" id="dc-box-input-name"></el-input>
          </el-form-item>
@@ -39,6 +39,9 @@
              <!--</template>-->
            <!--</select-area>-->
          <!--</el-form-item>-->
+          <el-form-item :label="$t('config.dc.lnglat')" prop="state">
+            <latlng-picker ref="latlngPicker" :append-to-body="false" :show-zoom="false"></latlng-picker>
+          </el-form-item>
          <el-form-item :label='$t("config.dc.state")' prop="state">
            <el-switch
              id="dc-box-input-name"
@@ -49,34 +52,7 @@
            >
            </el-switch>
          </el-form-item>
-          <el-form-item :label='$t("config.dc.longitude")' prop="longitude" :rules="[{required:coordinateFlag,trigger:'blur'}]">
-            <el-input-number
-              id="dc-box-input-longitude"
-              placeholder=""
-              v-model="editDc.longitude"
-              size="small"
-              controls-position="right"
-              :min="-180"
-              :max="180"
-              :step="0.00001"
-              :precision="5"
-              @change="(val)=>{coordinateChange(val,'longitude')}"
-            />
-          </el-form-item>
-          <el-form-item :label='$t("config.dc.latitude")' prop="latitude"  :rules="[{required:coordinateFlag,trigger:'blur'}]">
-            <el-input-number
-              id="dc-box-input-latitude"
-              placeholder=""
-              v-model="editDc.latitude"
-              size="small"
-              controls-position="right"
-              :min="-90"
-              :max="90"
-              :step="0.00001"
-              :precision="5"
-              @change="(val)=>{coordinateChange(val,'latitude')}"
-            />
-          </el-form-item>
+
        </el-form>
      </div>

@@ -94,9 +70,11 @@
 </template>

 <script>
+import latlngPicker from "../latlngPicker";
 const regNum = /^[0-9]+.?[0-9]*/
 export default {
  name: 'dcBox',
+  components:{latlngPicker},
  props: {
    dc: Object,
    userData: Array
@@ -131,23 +109,19 @@ export default {
    },

    /* 保存 */
-    save () {
-      if (this.prevent_opt.save) { return } ;
+    save: function () {
+      if (this.prevent_opt.save) {
+        return
+      }
+      ;
      this.prevent_opt.save = true
      this.$refs.dcForm.validate((valid) => {
        if (valid) {
          if (this.editDc.id) {
            const param = {...this.editDc}
-            if (param.area) {
-              param.areaId = param.area.id
-            }
-            if (!regNum.test(param.longitude)) {
-              param.longitude = null
-            }
-            if (!regNum.test(param.latitude)) {
-              param.latitude = null
-            }
-
+            let attr = this.$refs.latlngPicker.getAttribute();
+            param.latitude = attr.latitude;
+            param.longitude = attr.longitude;
            this.$put('idc', param).then(response => {
              this.prevent_opt.save = false
              if (response.code === 200) {
@@ -236,6 +210,9 @@ export default {
      deep: true,
      handler (n, o) {
        this.editDc = JSON.parse(JSON.stringify(n))
+        this.$nextTick(()=>{
+          this.$refs.latlngPicker.setLnglat(this.editDc.latitude,this.editDc.longitude);
+        })
      }
    }
  }
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -43,12 +43,7 @@
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('config.system.basic.mapConfig')" >
-              <div class="system-map">
-                <div class="system-map-item"><span class="label">{{$t('config.system.basic.lat')}}</span><span><el-input width="20px" v-model="basic.map_center_config.latitude"></el-input></span></div>
-                <div class="system-map-item"><span class="label">{{$t('config.system.basic.lng')}}</span><span><el-input width="20px" v-model="basic.map_center_config.longitude"></el-input></span></div>
-                <div class="system-map-item"><span class="label">{{$t('config.system.basic.zoom')}}</span><span><el-input width="20px" v-model="basic.map_center_config.zoom"></el-input></span></div>
-                <div class="system-map-item" style="margin-right: unset !important;" @click="mapConfigVisible = true"><i class="nz-icon nz-icon-shuidi" style="color:rgb(238, 157, 63)"></i></div>
-              </div>
+              <latlng-picker :init-data="basic.map_center_config" ref="latlngPicker"></latlng-picker>
            </el-form-item>
            <el-form-item :label="$t('config.system.basic.unsaved')" prop="unsaved_change">
              <el-switch v-model.number="basic.unsaved_change" active-color="rgb(238, 157, 63)"  active-value='on' inactive-value='off' id="system-baisc-unsaved_change">
@@ -62,9 +57,6 @@
              <button id="system-basic-save" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'"  :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
            </el-form-item>
          </el-form>
-          <el-dialog :visible.sync="mapConfigVisible" :title="$t('config.system.basic.mapTitle')" width="calc(50% - 10px)"  @close="mapClose" @opened="initMap" class=" nz-dialog map-config-dialog" :modal-append-to-body="true">
-            <div id="map" style="height: 100%; width: 100%"></div>
-          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('config.system.email.email')" name="email" >
@@ -364,17 +356,13 @@

 <script>
 import { positiveInteger, port, hostPlus, host, uSize } from '../../common/js/validate'
-
+import latlngPicker from "../../common/latlngPicker";
 import bus from '../../../libs/bus'
 import draggable from 'vuedraggable'
-// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
-import 'leaflet/dist/leaflet.css'
-import * as L from 'leaflet'
-import icon from 'leaflet/dist/images/marker-icon.png'
-import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+
 export default {
  name: 'system',
-  components: { draggable },
+  components: { draggable ,latlngPicker},
  data () {
    return {
      basic: {
@@ -392,9 +380,6 @@ export default {
        unsaved_change: 'on',
        map_center_config: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 }
      },
-      mapConfigVisible: false,
-      map: null,
-      marker: null,
      basicCopy: null,
      basicRules: {
        system_name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
@@ -554,59 +539,6 @@ export default {
    }
  },
  methods: {
-    initMap: function () {
-      if (this.map) {
-        this.map.remove()
-        this.map = null
-      }
-      const DefaultIcon = L.icon({
-        iconUrl: icon,
-        iconSize: [26, 40],
-        iconAnchor: [13, 40],
-        shadowUrl: iconShadow
-      })
-      L.Marker.prototype.options.icon = DefaultIcon
-      const map = L.map('map', {
-        minZoom: this.basic.map_center_config.minZoom,
-        maxZoom: this.basic.map_center_config.maxZoom,
-        attributionControl: false,
-        zoomControl: false,
-        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
-      }).setView([this.basic.map_center_config.latitude, this.basic.map_center_config.longitude], this.basic.map_center_config.zoom)
-
-      L.tileLayer(
-        '/static/Tiles/{z}/{x}/{y}.png',
-        { noWrap: true }
-      ).addTo(map)
-
-      const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
-      attribution.addAttribution(' © OpenStreetMap contributors')
-      attribution.addTo(map)
-
-      L.control.zoom({
-        position: 'bottomright',
-        zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
-        zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
-        zoomInTitle: '',
-        zoomOutTitle: ''
-      }).addTo(map)
-
-      const marker = L.marker([this.basic.map_center_config.latitude, this.basic.map_center_config.longitude]).addTo(map)
-      map.on('click', function (e) {
-        const lat = e.latlng.lat
-        const lng = e.latlng.lng
-        marker.setLatLng([lat, lng])
-      })
-      this.map = map
-      this.marker = marker
-    },
-    mapClose: function () {
-      this.mapConfigVisible = false
-      const latlng = this.marker.getLatLng()
-      this.basic.map_center_config.latitude = latlng.lat
-      this.basic.map_center_config.longitude = latlng.lng
-      this.basic.map_center_config.zoom = this.map.getZoom()
-    },
    selectTab: function (tab) {
      this.querySetInfo(tab.name)
    },
@@ -656,6 +588,7 @@ export default {
        if (valid) {
          const param = {}
          if (type == 'basic') {
+            this.basic.map_center_config = this.$refs.latlngPicker.getAttribute();
            this.basic.map_center_config = JSON.stringify(this.basic.map_center_config)
          }
          param[type] = Object.assign({}, this[type])
@@ -1001,20 +934,7 @@ export default {
    width: 61.8% !important;
    position: relative;
  }
-  .system .system-map{
-    width: 100%;
-    display: flex;
-  }
-  .system-map .system-map-item{
-    /*display: inline-block;*/
-    margin-right: 10px;
-  }
-  .system-map .system-map-item .label{
-    margin-right: 10px;
-  }
-  .system-map .el-input{
-    width: 92px !important;
-  }
+
  .linkBox{
    max-height: 800px;
    width: 800px;
@@ -1181,13 +1101,7 @@ export default {
  .system-config-form .el-form-item__content{
    width: 512px;
  }
-  .system .map-config-dialog .el-dialog{
-    height: 45%;
-  }
-  .map-config-dialog .el-dialog__body{
-    height: calc(100% - 48px) !important;

-  }
  .system-config-form .el-input{
    width:512px;
    text-align: left;