gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-1174 fix: 地图问题

Browse Source
This commit is contained in:
chenjinsong
2021-11-05 20:19:26 +08:00
parent 3ec6838df7
commit 479bcb4c87
5 changed files with 118 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
nezha-fronted/src/components/common/js/validate.js
View File

@@ -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))) {

63
nezha-fronted/src/components/common/latlngPicker.vue
View File

@@ -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))
this.lnglat = this.mapParam.longitude + ',' + this.mapParam.latitude
} else {
this.queryDefaultMapConfig().then(() => {
handler (n) {
this.queryDefaultMapConfig(n).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()
}
})

74
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -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,7 +197,18 @@ export default {
deep: true,
handler (n, o) {
this.isEdit = true
this.editDc = JSON.parse(JSON.stringify(n))
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)
})
@@ -219,4 +216,5 @@ export default {
}
}
}
}
</script>

9
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -160,7 +160,6 @@ import bus from '@/libs/bus'
export default {
name: 'dc',
components: {
trafficSettingBox,
dcBox,
deleteButton,
nzDataList,
@@ -168,8 +167,7 @@ export default {
cabinetBox,
topToolMoreOptions,
nzDetailView,
dcDetail,
detailViewTopSearch
dcDetail
},
mixins: [dataListMixin, detailViewMixin],
data () {
@@ -183,8 +181,9 @@ export default {
tel: '',
principal: '',
state: 'ON',
longitude: undefined,
latitude: undefined
longitude: '',
latitude: '',
lnglat: ''
},
cabinet: {
id: '',

63
nezha-fronted/src/components/page/config/system.vue
View File

@@ -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;
}