From 479bcb4c870f92285b3fa5fe3ac242214905e0e6 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 5 Nov 2021 20:19:26 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1174=20fix:=20=E5=9C=B0=E5=9B=BE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/js/validate.js      | 15 ++++
 .../src/components/common/latlngPicker.vue    | 65 ++++++++-------
 .../src/components/common/rightBox/dcBox.vue  | 80 +++++++++----------
 .../src/components/page/config/dc.vue         | 11 ++-
 .../src/components/page/config/system.vue     | 63 ++++++---------
 5 files changed, 118 insertions(+), 116 deletions(-)

diff --git a/nezha-fronted/src/components/common/js/validate.js b/nezha-fronted/src/components/common/js/validate.js
index c58066919..4433fd9f6 100644
--- a/nezha-fronted/src/components/common/js/validate.js
+++ b/nezha-fronted/src/components/common/js/validate.js
@@ -86,6 +86,21 @@ export function noSpecialChar (rule, value, callback) {
   }, 100)
 }
 
+export function latlng (rule, value, callback) {
+  const lngReg = /^[\-\+]?(0?\d{1,2}\.\d{1,7}|1[0-7]?\d{1}\.\d{1,7}|180\.0{1,7})$/
+  const latReg = /^[\-\+]?([1-8]?\d{1}\.\d{1,7}|90\.0{1,7})$/
+  setTimeout(() => {
+    const lnglat = value.split(',')
+    if (!lnglat || lnglat.length !== 2) {
+      callback(new Error(vm.$t('tip.lnglatError')))
+    } else if (!lngReg.test(lnglat[0]) || !latReg.test(lnglat[1])) {
+      callback(new Error(vm.$t('tip.lnglatError')))
+    } else {
+      callback()
+    }
+  }, 100)
+}
+
 export function integer (rule, value, callback) {
   setTimeout(() => {
     if (isNaN(Number(value))) {
diff --git a/nezha-fronted/src/components/common/latlngPicker.vue b/nezha-fronted/src/components/common/latlngPicker.vue
index 94c721d8e..8f188d9f5 100644
--- a/nezha-fronted/src/components/common/latlngPicker.vue
+++ b/nezha-fronted/src/components/common/latlngPicker.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="latlng">
     <div class="input-box">
-      <div class="input-box-item">
-        <el-input  v-model="lnglat" @change="setLatlng" @focus="oldlnglat = lnglat" @blur="changeLnglat">
+      <div class="input-box-item" style="display: none;">
+        <el-input v-model="lnglat" @blur="setLatlng" @change="setLatlng">
           <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 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 v-model="zoom" :max="mapParam.maxZoom" :min="mapParam.minZoom" :step="1"  controls-position="right">
+          <template v-if="showZoom" slot="prepend">{{$t('config.system.basic.zoom')}}</template>
         </el-input>
       </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-weizhi" style="color:rgb(238, 157, 63)"></i></div>
@@ -39,28 +39,25 @@ export default {
       mapParam: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 },
       map: null,
       marker: null,
-      mapConfigVisible: false
+      mapConfigVisible: false,
+      changeZoom: false,
+      zoom: null
     }
   },
   watch: {
     initData: {
       immediate: true,
-      handler () {
-        if (this.initData) {
-          this.mapParam = JSON.parse(JSON.stringify(this.initData))
+      handler (n) {
+        this.queryDefaultMapConfig(n).then(() => {
           this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude
-        } else {
-          this.queryDefaultMapConfig().then(() => {
-            this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude
-          })
-        }
+        })
       }
     }
   },
   mounted () {
   },
   methods: {
-    initMap: function () {
+    initMap () {
       if (this.map) {
         this.map.remove()
         this.map = null
@@ -107,24 +104,26 @@ export default {
       this.map = map
       this.marker = marker
     },
-    mapClose: function () {
+    mapClose () {
+      this.changZoom = true
       this.mapConfigVisible = false
       const latlng = this.marker.getLatLng()
-      this.mapParam.longitude = latlng.lng.toFixed(3)
-      this.mapParam.latitude = latlng.lat.toFixed(3)
+      this.mapParam.longitude = latlng.lng.toFixed(7)
+      this.mapParam.latitude = latlng.lat.toFixed(7)
       this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude
-
-      this.mapParam.zoom = this.map.getZoom()
+      this.zoom = this.map.getZoom()
+      this.setLatlng()
     },
-    setLatlng: function () {
+    setLatlng () {
       const lnglat = this.lnglat.split(',')
       this.mapParam.longitude = lnglat[0]
       this.mapParam.latitude = lnglat[1]
+      this.$emit('lnglatChange', this.lnglat, this.zoom)
     },
-    getAttribute: function () {
-      return JSON.parse(JSON.stringify(this.mapParam))
+    getAttribute () {
+      return JSON.parse(JSON.stringify({ ...this.mapParam, zoom: this.zoom }))
     },
-    setLnglat: function (lat, lng) {
+    setLnglat (lat, lng) {
       if (lat && lng) {
         this.mapParam.latitude = lat
         this.mapParam.longitude = lng
@@ -134,23 +133,31 @@ export default {
     changeLnglat () {
       const lnglat = this.lnglat.split(',')
       if (lnglat.length !== 2) {
-        this.lnglat = this.oldlnglat
         this.$message.error(this.$t('tip.lnglatError'))
         return false
       }
-      const lngReg = /^[\-\+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/
-      const latReg = /^[\-\+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/
+      const lngReg = /^[\-\+]?(0?\d{1,2}\.\d{0,7}|1[0-7]?\d{1}\.\d{1,7}|180\.0{0,7})$/
+      const latReg = /^[\-\+]?([0-8]?\d{1}\.\d{0,7}|90\.0{0,7})$/
       if (!lngReg.test(lnglat[0]) || !latReg.test(lnglat[1])) {
-        this.lnglat = this.oldlnglat
+        // this.lnglat = this.oldlnglat
         this.$message.error(this.$t('tip.lnglatError'))
         return false
       }
     },
-    queryDefaultMapConfig: function () {
+    queryDefaultMapConfig (data) {
       return new Promise(resolve => {
         this.$get('/sysConfig?paramKey=map_center_config').then(response => {
           if (response.code == 200) {
-            this.mapParam = JSON.parse(response.data.paramKey.map_center_config)
+            const mapParam = JSON.parse(response.data.paramKey.map_center_config)
+            if (data) {
+              const coord = data.split(',')
+              this.mapParam = { ...mapParam, longitude: coord[0], latitude: coord[1] }
+            } else {
+              this.mapParam = { ...mapParam }
+            }
+            if (!this.zoom) {
+              this.zoom = mapParam.zoom
+            }
             resolve()
           }
         })
diff --git a/nezha-fronted/src/components/common/rightBox/dcBox.vue b/nezha-fronted/src/components/common/rightBox/dcBox.vue
index a23782d13..58944dd31 100644
--- a/nezha-fronted/src/components/common/rightBox/dcBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/dcBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-box right-box-dc" v-clickoutside="{obj:editDc,func:clickOutside}">
+  <div v-clickoutside="{obj:editDc, func:clickOutside}" class="right-box right-box-dc">
       <!-- begin--标题-->
       <div class="right-box__header">
         <div class="header__title">{{editDc.id ? ($t("config.dc.editDc")) : $t("config.dc.createDc")}}</div>
@@ -27,15 +27,17 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <!--<el-form-item :label='$t("config.dc.area")' prop="area">-->
-              <!--<select-area ref="selectArea" :areaData="areaData" :placement="'bottom-start'" @selectArea="selectArea" :currentArea="editDc.area.id">-->
-                <!--<template v-slot:trigger>-->
-                  <!--<el-input placeholder="" v-model="editDc.area.name" size="small" readonly="readonly" @click.native="toSelectArea"></el-input>-->
-                <!--</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" :init-data= ' editDc.latitude? {latitude:editDc.latitude,longitude:editDc.longitude} : "" '></latlng-picker>
+            <el-form-item :label="$t('config.dc.lnglat')" prop="lnglat">
+              <div style="display: flex">
+                <el-input v-model="editDc.lnglat" maxlength="256" placeholder="" size="small" style="width: calc(100% - 50px);margin-right: 20px;"></el-input>
+                <latlng-picker
+                  ref="latlngPicker"
+                  :append-to-body="false"
+                  :init-data='editDc.lnglat'
+                  :show-zoom="false"
+                  @lnglatChange="lnglatChange"
+                ></latlng-picker>
+              </div>
             </el-form-item>
             <el-form-item :label='$t("config.dc.state")' prop="state">
               <el-switch
@@ -66,7 +68,7 @@
 <script>
 import latlngPicker from '../latlngPicker'
 import editRigthBox from '../mixin/editRigthBox'
-import { noSpecialChar } from '@/components/common/js/validate'
+import { noSpecialChar, latlng } from '@/components/common/js/validate'
 
 const regNum = /^[0-9]+.?[0-9]*/
 
@@ -86,11 +88,12 @@ export default {
       rules: {
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-          { validator: noSpecialChar, trigger: 'change' }
+          { validator: noSpecialChar, trigger: 'blur' }
+        ],
+        lnglat: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: latlng, trigger: 'blur' }
         ]
-        // state: [
-        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        // ]
       },
       areaData: [],
       coordinateFlag: false
@@ -105,16 +108,12 @@ export default {
     clickOutside () {
       this.esc(false)
     },
-    // /* 弹出选择area弹框 */
-    // toSelectArea () {
-    //   this.$refs.selectArea.openBox(this.editDc.area)
-    // },
 
     /* 保存 */
     save () {
       if (this.prevent_opt.save) {
         return
-      };
+      }
       this.prevent_opt.save = true
       this.$refs.dcForm.validate((valid) => {
         if (valid) {
@@ -162,9 +161,12 @@ export default {
         }
       })
     },
+    lnglatChange (lnglat) {
+      this.editDc.lnglat = lnglat
+    },
     /* 删除 */
     del () {
-      if (this.prevent_opt.save) { return } ;
+      if (this.prevent_opt.save) { return }
       this.prevent_opt.save = true
       this.$confirm(this.$t('tip.confirmDelete'), {
         confirmButtonText: this.$t('tip.yes'),
@@ -184,25 +186,9 @@ export default {
         this.prevent_opt.save = false
       })
     },
-    // getAreaData() {
-    //   this.$get('area', {pid: 0}).then(response => {
-    //     if (response.code === 200) {
-    //       this.areaData = response.data.list;
-    //     }
-    //   });
-    // },
-
     selectArea (area) {
       this.editDc.area.id = area.id
       this.editDc.area.name = area.name
-    },
-    coordinateChange (val, str) { // 经纬度改变
-      if (regNum.test(this.editDc.longitude) || regNum.test(this.editDc.latitude)) {
-        this.coordinateFlag = true
-      } else {
-        this.coordinateFlag = false
-        this.$refs.dcForm.clearValidate(['longitude', 'latitude'])
-      }
     }
   },
   watch: {
@@ -211,10 +197,22 @@ export default {
       deep: true,
       handler (n, o) {
         this.isEdit = true
-        this.editDc = JSON.parse(JSON.stringify(n))
-        this.$nextTick(() => {
-          this.$refs.latlngPicker.setLnglat(this.editDc.latitude, this.editDc.longitude)
-        })
+        if (!n.id) {
+          this.$get('/sysConfig?paramKey=map_center_config').then(response => {
+            if (response.code === 200) {
+              const mapParam = JSON.parse(response.data.paramKey.map_center_config)
+              this.editDc = { ...JSON.parse(JSON.stringify(n)), lnglat: `${mapParam.longitude},${mapParam.latitude}` }
+              this.$nextTick(() => {
+                this.$refs.latlngPicker.setLnglat(this.editDc.latitude, this.editDc.longitude)
+              })
+            }
+          })
+        } else {
+          this.editDc = { ...JSON.parse(JSON.stringify(n)), lnglat: `${n.longitude},${n.latitude}` }
+          this.$nextTick(() => {
+            this.$refs.latlngPicker.setLnglat(this.editDc.latitude, this.editDc.longitude)
+          })
+        }
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index a685b418f..970e51138 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -160,7 +160,6 @@ import bus from '@/libs/bus'
 export default {
   name: 'dc',
   components: {
-    trafficSettingBox,
     dcBox,
     deleteButton,
     nzDataList,
@@ -168,10 +167,9 @@ export default {
     cabinetBox,
     topToolMoreOptions,
     nzDetailView,
-    dcDetail,
-    detailViewTopSearch
+    dcDetail
   },
-  mixins: [dataListMixin,detailViewMixin],
+  mixins: [dataListMixin, detailViewMixin],
   data () {
     return {
       url: 'dc',
@@ -183,8 +181,9 @@ export default {
         tel: '',
         principal: '',
         state: 'ON',
-        longitude: undefined,
-        latitude: undefined
+        longitude: '',
+        latitude: '',
+        lnglat: ''
       },
       cabinet: {
         id: '',
diff --git a/nezha-fronted/src/components/page/config/system.vue b/nezha-fronted/src/components/page/config/system.vue
index 42f9072f5..219bde5bc 100644
--- a/nezha-fronted/src/components/page/config/system.vue
+++ b/nezha-fronted/src/components/page/config/system.vue
@@ -1,24 +1,10 @@
 <template>
   <div class="system">
-    <el-tabs style="overflow: auto" type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" :class="{'full-table':activeTab == 'notification'||activeTab == 'link'||activeTab == 'apiKey'}">
+    <el-tabs v-model="activeTab" :class="{'full-table':activeTab == 'notification'||activeTab == 'link'||activeTab === 'apiKey'}" class="system-tabs" style="overflow: auto" type="border-card" @tab-click="selectTab">
       <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
         <div class="system-config-form basicForm" v-if="activeTab === 'basic'">
           <el-form :model="basic"  label-width="180px" size="small" ref="basicForm" :rules="basicRules" :validate-on-rule-change="false">
             <div class="system-title">{{$t('config.system.basic.title')}}</div>
-<!--            <el-form-item :label="$t('config.system.basic.sysLogo')" prop="system_logo">-->
-<!--              <el-upload-->
-<!--                class="avatar-uploader"-->
-<!--                action=""-->
-<!--                type=".jpg,.jpeg,.png"-->
-<!--                :auto-upload="false"-->
-<!--                :show-file-list="false"-->
-<!--                :on-change="handleLogoChange"-->
-<!--                >-->
-<!--                <img v-if="basic.system_logo" :src="basic.system_logo" class="avatar">-->
-<!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
-<!--                <div slot="tip" v-if="imageFormatErr" class="logo-upload-tip">{{$t('config.system.basic.logoTip')}}</div>-->
-<!--              </el-upload>-->
-<!--            </el-form-item>-->
             <el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
               <el-input v-model="basic.system_name" id="system-baisc-system_name"></el-input>
             </el-form-item>
@@ -31,7 +17,6 @@
               <el-input v-model.number="basic.default_cabinet_usize" id="system-baisc-default_cabinet_usize"></el-input>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
-              <!--                <el-input v-model.number="basic.timezone" ></el-input>-->
               <el-select v-model="basic.timezone" id="system-baisc-timezone" filterable popper-class="right-box-select-top">
                 <el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.name" :value="item.name" >
                   <div style="display: flex;justify-content: space-between;padding: 5px;">
@@ -41,8 +26,13 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item :label="$t('config.system.basic.mapConfig')" >
-              <latlng-picker :init-data="basic.map_center_config" ref="latlngPicker" :show-zoom="true"></latlng-picker>
+            <el-form-item :label="$t('config.system.basic.mapConfig')" class="basic-lnglat" prop="lnglat">
+              <div style="display: flex">
+                <el-input v-model="basic.lnglat" maxlength="256" placeholder="" style="width: calc(100% - 50px); padding-right: 50px;">
+                  <template slot="prepend">{{$t('config.system.basic.lnglat')}}</template>
+                </el-input>
+                <latlng-picker ref="latlngPicker" :init-data="basic.lnglat" :show-zoom="true" @lnglatChange="lnglatChange"></latlng-picker>
+              </div>
             </el-form-item>
             <el-form-item :label="$t('config.system.basic.snmpTrapPort')" prop="snmp_trap_listen_port">
               <el-input v-model="basic.snmp_trap_listen_port"   id="system-baisc-snmp_trap_listen_port"></el-input>
@@ -313,17 +303,6 @@
           <div class="system-title">{{$t('config.system.basic.title')}}</div>
           <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
             <el-form-item  prop="type" :label="$t('config.system.reset.type')">
-<!--              <div class="el-checkbox-group">-->
-<!--                <div v-for="(item,index) in resetOptions" :key="item.value+index" >-->
-<!--                  <label class="el-checkbox sys-reset-label" :for="item.value" >-->
-<!--                    <span class="el-checkbox__label" style="width: 100px;text-align: right;margin-right: 10px">{{item.label}}</span>-->
-<!--                    <span class="el-checkbox__input">-->
-<!--                      <input type="checkbox" name="resetType" :value="item.value" class="el-checkbox__original" aria-hidden="true" :id="item.value" @change="resetCheckBoxChange"/>-->
-<!--                      <span class="el-checkbox__inner"></span>-->
-<!--                    </span>-->
-<!--                  </label>-->
-<!--                </div>-->
-<!--              </div>-->
               <el-select v-model="reset.type" :placeholder="$t('el.select.placeholder')" multiple popper-class="right-box-select-top">
                 <template v-for="item in resetOptions" >
                   <el-option :label="item.label" :value="item.value" :key="item.label"></el-option>
@@ -344,7 +323,7 @@
 </template>
 
 <script>
-import { positiveInteger, port, hostPlus, host, uSize } from '../../common/js/validate'
+import { positiveInteger, port, hostPlus, host, uSize, latlng } from '../../common/js/validate'
 import latlngPicker from '../../common/latlngPicker'
 import bus from '../../../libs/bus'
 import draggable from 'vuedraggable'
@@ -373,6 +352,7 @@ export default {
         default_scrape_interval: '60',
         default_scrape_timeout: '30',
         snmp_trap_listen_port: 162,
+        lnglat: '',
         map_center_config: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 }
       },
       basicCopy: null,
@@ -387,7 +367,11 @@ export default {
         snmp_trap_listen_port: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: port, trigger: 'blur' }],
         timezone: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
         default_cabinet_usize: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }, { validator: uSize, trigger: 'blur' }],
-        query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+        query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
+        lnglat: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          { validator: latlng, trigger: 'blur' }
+        ]
       },
       timezoneOption: [],
       email: {
@@ -534,6 +518,13 @@ export default {
     }
   },
   methods: {
+    lnglatChange (lnglat, zoom) {
+      const lnglatData = lnglat.split('.')
+      this.basic.map_center_config.longitude = lnglatData[0]
+      this.basic.map_center_config.latitude = lnglatData[1]
+      this.basic.map_center_config.zoom = zoom
+      this.basic.lnglat = lnglat
+    },
     selectTab: function (tab) {
       this.querySetInfo(tab.name)
     },
@@ -564,6 +555,7 @@ export default {
             localStorage.setItem('nz-sys-default-cabinet-usize', this.basic.default_cabinet_usize)
             localStorage.setItem('nz-unsaved-change', this.basic.unsaved_change)
             this.basic.map_center_config = JSON.parse(this.basic.map_center_config)
+            this.basic.lnglat = `${this.basic.map_center_config.longitude},${this.basic.map_center_config.latitude}`
           } else if (type == 'terminal') {
             localStorage.setItem('nz-sys-terminal-timeout', this.terminal.terminal_timeout)
             localStorage.setItem('nz-sys-terminal-telnet-user-tip', this.terminal.terminal_telnet_user_tip)
@@ -1193,11 +1185,6 @@ export default {
     width:512px;
     text-align: left;
   }
-  .system-config-form .el-input__inner{
-    height: 28px;
-    line-height: 28px;
-    /*width: 512px;*/
-  }
   .system-tabs {
     box-shadow: unset !important;
     border:unset;
@@ -1222,10 +1209,6 @@ export default {
   .reset-form .el-checkbox-group{
     margin-left: -28px !important;
   }
-  .linkBox .el-input--small .el-input__inner{
-    height: 28px;
-    line-height: 28px;
-  }
   .linkName .el-input__inner{
     width: 100px;
   }