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

feat：去除DataCenter area的选项 添加经纬度 以及状态的选项

Browse Source
This commit is contained in:
zhangyu
2020-11-11 13:59:37 +08:00
parent e7e0d180af
commit 29e617b4a9
6 changed files with 138 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/components/common/js/constants.js
View File

@@ -140,6 +140,7 @@ export const intervalList = [
export const setting = {
DcState:[
{value:1,label: i18n.t('setting.usable')}
{value:'ON',label: i18n.t('config.dc.usable')},
{value:'OFF',label: i18n.t('config.dc.suspended')}
]
};

3
nezha-fronted/src/components/common/language/cn.js
View File

@@ -626,6 +626,9 @@ const cn = {
editCabinet: "编辑机柜",
usable:'可用',
suspended:'停用',
state:'状态',
longitude:'经度',
latitude:'纬度',
},
model: {
model: "资产型号",

3
nezha-fronted/src/components/common/language/en.js
View File

@@ -602,6 +602,9 @@ const en = {
},
usable:'Usable',
suspended:'Suspended',
state:'State',
longitude:'Longitude',
latitude:'Latitude',
},
model: {
model: 'Asset model',

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

@@ -32,12 +32,43 @@
</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 :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.state")' prop="state">
<el-select value-key="value" popper-class="config-dropdown" v-model="editDc.state" placeholder="" size="small">
<el-option @click.native="" v-for="item in $CONSTANTS.setting.DcState" :key="item.value" :label="item.label" :value="item.value" :id="'dc-principal-op-'+item.value">
<span>{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label='$t("config.dc.longitude")' prop="longitude">
<el-input-number
placeholder=""
v-model="editDc.longitude"
size="small"
controls-position="right"
:min="-180"
:max="180"
:step="0.00001"
:precision="5"
/>
</el-form-item>
<el-form-item :label='$t("config.dc.latitude")' prop="latitude">
<el-input-number
placeholder=""
v-model="editDc.latitude"
size="small"
controls-position="right"
:min="-90"
:max="90"
:step="0.00001"
:precision="5"
/>
</el-form-item>
</el-form>
</el-scrollbar>
@@ -57,6 +88,7 @@
<script>
import selectArea from "../popBox/selectArea"; //dc弹框
var regNum = /^[0-9]+.?[0-9]*/;
export default {
name: "dcBox",
props: {
@@ -73,6 +105,9 @@
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
state:[
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
]
},
areaData: [],
}
@@ -95,10 +130,18 @@
this.$refs.dcForm.validate((valid) => {
if (valid) {
if (this.editDc.id) {
if (this.editDc.area) {
this.editDc.areaId = this.editDc.area.id;
let param={...this.editDc};
if (param.area) {
param.areaId = param.area.id;
}
this.$put('idc', this.editDc).then(response => {
if(!regNum.test(param.longitude)){
param.longitude=''
}
if(!regNum.test(param.latitude)){
param.latitude=''
}
this.$put('idc', param).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
@@ -107,10 +150,17 @@
}
});
} else {
if (this.editDc.area) {
this.editDc.areaId = this.editDc.area.id;
let param={...this.editDc}
if (param.area) {
param.areaId = param.area.id;
}
this.$post('idc', this.editDc).then(response => {
if(!regNum.test(param.longitude)){
param.longitude=''
}
if(!regNum.test(param.latitude)){
param.latitude=''
}
this.$post('idc', param).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
@@ -141,13 +191,13 @@
});
});
},
getAreaData() {
this.$get('area', {pid: 0}).then(response => {
if (response.code === 200) {
this.areaData = response.data.list;
}
});
},
// 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;
@@ -155,7 +205,7 @@
}
},
mounted() {
this.getAreaData();
// this.getAreaData();
},
watch: {
dc: {

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

@@ -59,7 +59,7 @@
v-if="item.show"
:key="`col-${index}`"
:label="item.label"
:sortable="$tableSet.sortableShow(item.prop,'dc')"
:sortable="sortableShow(item.prop,'dc')"
:prop="$tableSet.propTitle(item.prop,'dc')"
>
<template slot-scope="scope" :column="item">
@@ -78,8 +78,16 @@
</template>
<template v-else>-</template>
</template>
<template v-else-if="item.prop == 'area'">
<template v-if="scope.row.area">{{scope.row.area.name}}</template>
<template v-else-if="item.prop == 'state'">
<template v-if="scope.row.state">{{$CONSTANTS.setting.DcState.find(val=>val.value===scope.row.state).label}}</template>
<template v-else>-</template>
</template>
<template v-else-if="item.prop == 'longitude'">
<template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template>
<template v-else>-</template>
</template>
<template v-else-if="item.prop == 'latitude'">
<template v-if="regNumTest(scope.row.latitude)">{{scope.row.latitude}}</template>
<template v-else>-</template>
</template>
<template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
@@ -135,6 +143,7 @@
import dcBox from "../../common/rightBox/dcBox"; //dc弹框
import trafficSettingBox from "../../common/rightBox/trafficSetting/trafficSettingBox";
import deleteButton from "../../common/deleteButton";
var regNum = /^[0-9]+.?[0-9]*/;
export default {
name: "dc",
components:{
@@ -174,10 +183,13 @@
location: '',
tel: '',
principal: '',
area: {
id: 0,
name: ''
}
// area: {
// id: 0,
// name: ''
// }
state:'ON',
longitude:undefined,
latitude:undefined,
},
rightBox: {
dc: {show: false},
@@ -199,8 +211,16 @@
prop: 'name',
show: true,
}, {
label: this.$t('config.dc.area'),
prop: 'area',
label: this.$t('config.dc.state'),
prop: 'state',
show: true
}, {
label: this.$t('config.dc.longitude'),
prop: 'longitude',
show: true
}, {
label: this.$t('config.dc.latitude'),
prop: 'latitude',
show: true
}, {
label: this.$t("asset.location"),
@@ -263,6 +283,12 @@
},
edit(u) {
this.dc = JSON.parse(JSON.stringify(u));
if(!regNum.test(this.dc.longitude)){
this.dc.longitude=undefined
}
if(!regNum.test(this.dc.latitude)){
this.dc.latitude=undefined
}
if (!this.dc.area) {
this.$set(this.dc, 'area', {id: '', name: ''});
}
@@ -406,6 +432,12 @@
this.bottomBox.dc = JSON.parse(JSON.stringify(dc));
this.bottomBox.showSubList = true;
},
sortableShow(label,form){
if(label==='state'){
return false
}
return this.$tableSet.sortableShow(label,form)
},
// 数据排序
tableDataSort(item){
let orderBy = '';
@@ -418,7 +450,9 @@
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
regNumTest(val){//校验是否是数字
return regNum.test(val)
},
initEvent() {
bus.$on("dc-list-change", () => {
this.getTableData();

24
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -208,7 +208,7 @@
var tooltipEndpointChart;
var tooltipPrometheusChart;
var regNum = /^[0-9]+.?[0-9]*/
export default {
name: "overview2",
components:{
@@ -859,8 +859,8 @@
let dcInfo = idcInfos.find((item) => {
return item.id == dcId;
})
let areaInfo = dcInfo.area;
if (areaInfo) {
let areaInfo = dcInfo;
if (regNum.test(dcInfo.latitude)&&regNum.test(dcInfo.longitude)) {
let areaName = '';
if (areaInfo.i18n) {
areaName = JSON.parse(areaInfo.i18n)[language];
@@ -876,11 +876,15 @@
}else{
symbolSize=smallScatter;
}
let marker=null;
if(dcInfo.state==='ON'){
let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
let marker=L.circleMarker([areaInfo.latitude,areaInfo.longitude], {color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'error-item':''})
marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {color: hasAlert?'#DE5D3F':'#23BF9A',opacity:0.42,fillColor: hasAlert?'#DE5D3F':'#23BF9A',fillOpacity: 0.5, radius: symbolSize,className:hasAlert?'error-item':''});
marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
} else{
marker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {color: '#010101',opacity:0.35,fillColor: '#010101',fillOpacity: 0.35, radius: symbolSize});
marker.bindTooltip(this.mapTooltipFormatter(dcStat), {sticky: false, pane: "myPane", direction: "left", data: dcStat});
}
marker.on("mouseover", (param) => {
//console.info(param);
let pane = document.querySelector(".leaflet-pane.leaflet-my-pane");
@@ -895,7 +899,7 @@
}
}
res();
});
})
})
},
queryDataCenterMapData() {
@@ -930,8 +934,8 @@
let dcInfo=idcInfos.find((item)=>{
return item.id == dcId ;
})
let areaInfo=dcInfo.area;
if(areaInfo){
let areaInfo=dcInfo;
if(regNum.test(dcInfo.latitude)&&regNum.test(dcInfo.longitude)){
let areaName='';
if(areaInfo.i18n){
areaName=JSON.parse(areaInfo.i18n)[language];
@@ -949,7 +953,7 @@
seriesDatas.push({
name:areaName,
value:[areaInfo.longitude,areaInfo.latitude,dcStat],
value:[dcInfo.longitude,dcInfo.latitude,dcStat],
symbolSize:symbolSize,
});
}