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

feat:asset机柜配置&overview地图点显示优化

Browse Source
This commit is contained in:
wangwenrui
2020-04-13 18:00:41 +08:00
parent 459804aaf3
commit 763f283e04
6 changed files with 221 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,9 @@ import vm from '../../../main'
import ca from "element-ui/src/locale/lang/ca";
export function host(rule, value, callback) {
if(!value || value ==''){
callback();
}
const hostReg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
console.log(value)
setTimeout(() => {

75
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -104,6 +104,7 @@
size="small"
placeholder=""
class="right-box-row-with-btn"
@change="modelChange"
>
</el-cascader>
<div class="right-box-row-btn" v-if="!tabView" @click="addVendor"><i class="el-icon-plus"></i>
@@ -140,12 +141,12 @@
<div class="right-box-sub-title">{{$t('asset.createAssetTab.location')}}</div>
<div class="line-100 right-box-line"></div>
<!------------------------------------------IDC---------------------------------------------->
<el-form-item>
<!-- <location-cascader :default-model-u-size="temp"></location-cascader>-->
<el-form-item :label="$t('asset.createAssetTab.location')">
<location-cascader :disabled="assetData.modelId !=''?false:true" :default-model-u-size="modelSize" @change="setLocationData" :init-data="initLocationData" ref="locationCascader"></location-cascader>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
<!--<el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
<template v-if="!tabView">
<!-- <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
&lt;!&ndash; <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">&ndash;&gt;
<el-select popper-class="asset-dropdown" size="small" v-model="assetData.idcId" clearable @change="getSingleIDCData" placeholder="">
<el-option
:id="'asset-edit-idc-op-'+item.id"
@@ -157,9 +158,9 @@
<span class="asset-dropdown-label-txt">{{ item.name }}</span>
</el-option>
</el-select>
<!-- <div class="right-box-row-btn ">-->
<!-- <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
<!-- </div>-->
&lt;!&ndash; <div class="right-box-row-btn ">&ndash;&gt;
&lt;!&ndash; <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>&ndash;&gt;
&lt;!&ndash; </div>&ndash;&gt;
</template>
<span v-if="tabView">{{assetViewData.idcName}}</span>
</el-form-item>
@@ -174,10 +175,10 @@
</el-form-item>
<el-divider></el-divider>
<!------------------------------------------cabinet---------------------------------------------->
&lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;cabinet&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;
<el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
<template v-if="!tabView">
<!-- <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
&lt;!&ndash; <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"&ndash;&gt;
<el-select clearable v-model="assetData.cabinetId" clearable popper-class="asset-dropdown"
:disabled="assetData.idcId==''?true:false" size="small" placeholder=""
@change="getSingleCabinetData">
@@ -189,21 +190,21 @@
:value="item.id"
>
<span class="asset-dropdown-label-txt">{{ item.name }}</span>
<!-- <div class="asset-dropdown-label-icons">-->
<!-- <span class="asset-dropdown-btn asset-dropdown-btn-delete"-->
<!-- @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">-->
<!-- <i class="el-icon-delete"></i>-->
<!-- </span>-->
<!-- <cabinet-config-box placement="left" :post-cabinet="item" button-class="asset-dropdown-btn" @after="getCabinetOptionData">-->
<!-- <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
<!-- </cabinet-config-box>-->
<!-- </div>-->
&lt;!&ndash; <div class="asset-dropdown-label-icons">&ndash;&gt;
&lt;!&ndash; <span class="asset-dropdown-btn asset-dropdown-btn-delete"&ndash;&gt;
&lt;!&ndash; @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">&ndash;&gt;
&lt;!&ndash; <i class="el-icon-delete"></i>&ndash;&gt;
&lt;!&ndash; </span>&ndash;&gt;
&lt;!&ndash; <cabinet-config-box placement="left" :post-cabinet="item" button-class="asset-dropdown-btn" @after="getCabinetOptionData">&ndash;&gt;
&lt;!&ndash; <i slot="optionZone" class="nz-icon nz-icon-edit"></i>&ndash;&gt;
&lt;!&ndash; </cabinet-config-box>&ndash;&gt;
&lt;!&ndash; </div>&ndash;&gt;
</el-option>
</el-select>
<!-- <div class="right-box-row-btn ">-->
<!-- <cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>-->
<!-- </div>-->
&lt;!&ndash; <div class="right-box-row-btn ">&ndash;&gt;
&lt;!&ndash; <cabinet-config-box placement="left" :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>&ndash;&gt;
&lt;!&ndash; </div>&ndash;&gt;
</template>
<span v-if="tabView">{{assetViewData.cabinetName}}</span>
</el-form-item>
@@ -213,7 +214,7 @@
</el-form-item>
<el-form-item :label="$t('asset.editAssetTab.remark')">
<span>{{cabinetSelectedData.remark}}</span>
</el-form-item>
</el-form-item>-->
<!--cli-->
<div class="right-box-sub-title">{{$t('asset.createAssetTab.cli')}}
<el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
@@ -261,7 +262,6 @@
},
data() {
return {
temp:3,
visible: '',
vendorModelData: '',
assetData: {
@@ -291,6 +291,9 @@
}],
exporter: 0
},
modelSize:1,
initLocationData:null,
locationInfo:null,
accountSwitch:false,//true 开启，false 关闭
accountData: '',
assetViewData: {
@@ -525,6 +528,11 @@
}else{
this.changeProtocolSwitch=true;
}
},
locationInfo:{
deep:true,
handler(n,o){
}
}
},
methods: {
@@ -567,6 +575,16 @@
}
}
},
setLocationData:function(data){
this.locationInfo=data;
},
modelChange:function(ids){
let modelId=ids[1];
let model=this.allModelUlData.find((item,index)=>{
return modelId==item.id;
})
this.modelSize=model.usize;
},
getAssetData(data) {
if (data) {
this.pageObj.id = data;
@@ -576,8 +594,15 @@
this.assetViewData.assetType = response.data.list[0].model.type.value
this.assetViewData.vendor = response.data.list[0].model.vendor.value
this.assetViewData.model = response.data.list[0].model.name
this.modelSize=response.data.list[0].model.usize;
this.assetViewData.idcName = response.data.list[0].idc.name
this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
let initLocationData={
idc:response.data.list[0].idc,
cabinet:response.data.list[0].cabinet,
u:[response.data.list[0].cabinetStart,response.data.list[0].cabinetEnd]
}
this.$refs.locationCascader.initComponet(initLocationData)
this.assetViewData.moduleNum = response.data.list[0].moduleNum
this.assetViewData.alertNum = response.data.list[0].alertNum
this.assetViewData.cabinetName = response.data.list[0].cabinet == null ? '' : response.data.list[0].cabinet.name
@@ -766,6 +791,10 @@
if (this.assetData.modelId) {
this.assetData.modelId = this.assetData.modelId.join(',').split(',')[1];
}
this.assetData.idcId=this.locationInfo.idc.id;
this.assetData.cabinetId=this.locationInfo.cabinet.id;
this.assetData.cabinetStart=this.locationInfo.u[0];
this.assetData.cabinetEnd=this.locationInfo.u[1];
// let modelId = this.assetData.modelId.join(',').split(',')[1];
// let form = new FormData();
// form.append("id", this.pageObj.id);

155
nezha-fronted/src/components/common/rightBox/locationCascader.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="location" >
<div @click="toggleDropdown">
<el-input :placeholder="$t('overall.select')" size="small" style="position: relative" >
<el-input :placeholder="$t('overall.select')" size="small" style="position: relative" :value="inputShowInfo" :readonly="true" :disabled="disabled">
<i slot="suffix" class="el-select__caret el-input__icon el-icon-arrow-down" style="font-size: 14px" :class="{'reverse':dropDownVisible == true}"></i>
</el-input>
</div>
@@ -11,23 +11,29 @@
<el-scrollbar style="height: 100%;">
<ul v-if="idcInfos&& idcInfos.length>0">
<li v-for="(item,index) in idcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
<div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.idc&&selectedData.idc.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
<div class="container-item-content">
<div :title="item.name" class="container-item-content_label" :class="{'selected':selectedData.idc&&selectedData.idc.id == item.id}">{{item.name}}</div>
<div><i class="el-icon-arrow-right"></i></div>
</div>
</li>
</ul>
<div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
</el-scrollbar>
</div>
<div class="container-item" v-show="isShowCabinet">
<div class="container-item" v-show="isShowCabinet || selectedData.cabinet">
<el-scrollbar style="height: 100%;">
<ul v-if="showCabinetInfos&& showCabinetInfos.length>0">
<li v-for="(item,index) in showCabinetInfos" :key="item.id+'-'+index" @click="loadCabinetUInfos(item)">
<div class="container-item-content"><div class="container-item-content_label" :class="{'selected':selectedData.cabinet&&selectedData.cabinet.id == item.id}">{{item.name}}</div><div><i class="el-icon-arrow-right"></i></div></div>
<div class="container-item-content">
<div class="container-item-content_label" :class="{'selected':selectedData.cabinet&&selectedData.cabinet.id == item.id}">{{item.name}}</div>
<div><i class="el-icon-arrow-right"></i></div>
</div>
</li>
</ul>
<div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
</el-scrollbar>
</div>
<div class="container-item" v-show="isShowCabinetU" style="border-right: unset">
<div class="container-item" v-show="isShowCabinetU || uChecked.length>0" style="border-right: unset">
<el-scrollbar style="height: 100%">
<el-checkbox-group v-model="uChecked" v-if="refresh" @change="uChange">
<el-checkbox v-for="(item,index) in showUInfos" :key="index" :label="item.label" :value="item.value" :disabled="item.occupy==true" :checked="item.occupy==true||item.checked==true" :ref="'u-'+selectedData.idc.id+'-'+selectedData.cabinet.id+'-'+item.value" style="width: 50%"></el-checkbox>
@@ -45,12 +51,19 @@
name: "locationCascader",
components:{
},
model:{
prop:'value',
event:'change'
},
props:{
defaultModelUSize:{default:1}
defaultModelUSize:{default:1},
value:{default:null},
disabled:{type:Boolean}
},
data(){
return {
initData:null,
dropDownVisible:false,
idcInfos:[],
cabinetInfos:new Map(),
@@ -76,7 +89,9 @@
},
methods:{
toggleDropdown:function(){
if(this.disabled == false){
this.dropDownVisible = !this.dropDownVisible;
}
},
queryIdcInfos:function(){
this.idcInfos=[];
@@ -89,7 +104,12 @@
})
},
loadCabinetInfos:function(idc){
if(!idc){
return;
}
this.selectedData.idc=idc;
this.selectedData.cabinet=null;
this.selectedData.u=null;
let cabinetKey='idc-'+idc.name+'-'+idc.id;
this.showCabinetInfos=[];
if(this.cabinetInfos.has(cabinetKey)&&this.cabinetInfos.get(cabinetKey)&&this.cabinetInfos.get(cabinetKey).length>0){
@@ -108,11 +128,17 @@
this.isShowCabinetU=false;
this.showUInfos=[];
},
loadCabinetUInfos:function(cabinet){
loadCabinetUInfos:function(cabinet,isInit=false){
if(!cabinet){
return ;
}
this.selectedData.cabinet=cabinet;
this.selectedData.u=null;
let cabinetUKey='cabinet-'+this.selectedData.idc.id+'-'+cabinet.id
this.showUInfos=[];
this.uChecked=[];
this.oldUChecked=[];
this.occupyU=[];
if(this.uInfos.has(cabinetUKey)&&this.uInfos.get(cabinetUKey)&&this.uInfos.get(cabinetUKey).length>0){
this.showUInfos=this.uInfos.get(cabinetUKey);
}else{
@@ -133,6 +159,17 @@
us.push(u)
}
this.showUInfos=us;
if(isInit){ //回显处理
this.showUinfos=this.showUInfos.map((item,index)=>{
if(item.value >= this.initData.u[0] && item.value <= this.initData.u[1]){
item.occupy=false;//修改时，当前asset使用的u位不算占用
this.occupyU=this.occupyU.filter((t,i)=>{return t != item.value})
this.uChecked.push(item.value)
}
})
this.oldUChecked=this.uChecked
this.selectedData.u=this.initData.u;
}
this.uInfos.set(cabinetUKey,us);
}else{
console.error(response.msg);
@@ -145,15 +182,44 @@
uChange:function(data){
if(data.length < this.oldUChecked.length){ //取消选择操作
//1.判断是否仅剩下defualtModelusize 的u位选中
let checkedValue=this.findUnoccupyU(this.oldUChecked);
if(checkedValue.length <= this.defaultModelUSize){ // 刚好满足或小于默认usize
this.uChecked=[];
this.uChecked.push(this.occupyU);
let checkedValues=this.findUnoccupyU(this.oldUChecked);
if(checkedValues.length <= this.defaultModelUSize){ // 刚好满足或小于默认usize
this.clearUChecked();
}else{
let unCheckValue=this.oldUChecked.filter((item)=>{//取消选择的那个元素
return this.oldUChecked.includes(item)&&!data.includes(item);
})
//2.判断是否连续，如果不是连续取消
unCheckValue=unCheckValue[0];
//2.判断是否连续，如果不是连续取消后面的选中
let oldUCheckCopy=this.findOldCheckedMinMax()
let min=oldUCheckCopy[0];
let max=oldUCheckCopy[oldUCheckCopy.length-1];
if(unCheckValue != min && unCheckValue != max){ //非连续取消选中
debugger
// 需要留下连续的 且 满足defaultModelUsize的u位
if(unCheckValue - min >= this.defaultModelUSize){ //上方满足条件
this.clearUChecked();
for(let i = min; i<unCheckValue;i++){
this.uChecked.push(i);
}
}else if(max - unCheckValue >= this.defaultModelUSize){//下方满足条件
this.clearUChecked();
for(let i= unCheckValue+1;i<=max;i++){
this.uChecked.push(i);
}
}else{//两边都不满足条件，则优先上方
this.clearUChecked();
let counter=0;
let item=min;
while(counter < this.defaultModelUSize){
this.uChecked.push(item);
counter++;
item++;
}
}
}else{ //连续取消选中
//doNothing
}
}
}else{
let checkValues=this.findUnoccupyU(data);
@@ -163,16 +229,14 @@
if(suitU.length>0){ //有合适的u位
while(this.uChecked.length - this.occupyU.length < this.defaultModelUSize){
let popU=suitU.splice(0,1)[0]
this.uChecked.push(popU.value);
this.uChecked.push(popU);
}
}else{
this.uChecked.splice(this.uChecked.length-1,1);
}
}else{//至少已经选择了defaultCabinetUsize 个u ，这里需要处理不连续选择的情况
//1.判断是否连续
let oldUCheckCopy=Object.assign([],this.oldUChecked);
oldUCheckCopy=this.findUnoccupyU(oldUCheckCopy)
oldUCheckCopy.sort((a,b)=>{return a-b});
let oldUCheckCopy=this.findOldCheckedMinMax()
let min=oldUCheckCopy[0];
let max=oldUCheckCopy[oldUCheckCopy.length-1];
if(checkValue - max > 1 ){ //不连续
@@ -213,9 +277,32 @@
}
}
console.log('最终选择结果：')
console.log(this.uChecked)
this.oldUChecked=this.uChecked;
this.selectedData.u=this.findOldCheckedMinMax(this.uChecked);
this.$emit('change',this.selectedData);
},
clearUChecked:function(){ //取消所有选中，恢复到刚打开时的状态
this.uChecked=[];
this.uChecked=this.uChecked.concat(this.occupyU);
},
findOldCheckedMinMax:function(){
let oldUCheckCopy=Object.assign([],this.oldUChecked);
oldUCheckCopy=this.findUnoccupyU(oldUCheckCopy)
if(oldUCheckCopy&&oldUCheckCopy.length>0){
oldUCheckCopy.sort((a,b)=>{return a-b});
let min=oldUCheckCopy[0];
let max=oldUCheckCopy[oldUCheckCopy.length-1];
return [min,max]
}else{
return [];
}
},
findUnoccupyU:function(arr){
console.log('findUnoccupyU')
console.log(this.occupyU)
return arr.filter((item,index)=>{
return !this.occupyU.includes(item);
})
@@ -230,7 +317,7 @@
for(let i=0;i<left.length;i++){
let item=left[i];
if(item.occupy == false){
leftCount.push(item);
leftCount.push(item.value);
}else{
break;
}
@@ -239,7 +326,7 @@
for(let i=0;i<right.length;i++){
let item=right[i];
if(item.occupy == false){
rightCount.push(item);
rightCount.push(item.value);
}else{
break;
}
@@ -255,10 +342,42 @@
this.$nextTick(() => {
this.refresh = true
})
},
initComponet:function(initData){
this.initData=Object.assign({},initData);
if(initData){
this.selectedData.idc=initData.idc;
this.selectedData.cabinet=initData.cabinet;
this.selectedData.u=initData.u;
this.loadCabinetInfos(initData.idc);
this.loadCabinetUInfos(initData.cabinet,true);
}
}
},
mounted() {
},
computed:{
inputShowInfo:function(){
let idcName=this.selectedData.idc?this.selectedData.idc.name+'/':'';
let cabinetName=this.selectedData.cabinet?this.selectedData.cabinet.name+'/':'';
let uValues=this.selectedData.u&&this.selectedData.u.length>0?this.selectedData.u[0]+'-'+this.selectedData.u[1]:'';
if(!this.selectedData.idc){
return '';
}else if(this.selectedData.idc && !this.selectedData.cabinet){
return idcName
}else if(this.selectedData.idc && this.selectedData.cabinet && !this.selectedData.u ){
return idcName+cabinetName;
}else if(this.selectedData.idc && this.selectedData.cabinet && this.selectedData.u){
return idcName+cabinetName+uValues;
}
}
},
watch:{
}
}
</script>

5
nezha-fronted/src/components/common/rightBox/mibBox.vue
View File

@@ -27,7 +27,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.name}}</div>
</el-form-item>-->
<el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" class="add-required">
<el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
<el-cascader
v-if="rightBox.isEdit"
:options="modelOptions"
@@ -133,7 +133,8 @@
checkModels:(rule, value, callback)=>{
setTimeout(() => {
if(!$temp.currentMib.models||$temp.currentMib.models == ''){
return callback(new Error($temp.$t('validate.required')))
// return callback(new Error($temp.$t('validate.required')))
return callback();
}else{
return callback();
}

5
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -391,8 +391,8 @@
margin:2px 0 !important;
}
.mib-table td .cell{
min-height: 60px !important;
padding-bottom: 3px;
/*min-height: 60px !important;*/
/*padding-bottom: 3px;*/
}
.mib-table td .cell .detail-item-content{
height: 20px;
@@ -401,7 +401,6 @@
}
.mib-table.el-table td .cell{
height: 20px !important;
line-height: 20px !important;
}
</style>

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

@@ -795,6 +795,17 @@
dcStats=result[1].data.data.dcStat;
}
if(idcInfos && dcStats){
let dcStatsCopy=Object.assign([],dcStats);
dcStatsCopy.sort((a,b)=>{
return a.assetTotal - b.assetTotal;
});
let bigScatter=25;
let mediumScatter=20;
let smallScatter=15;
let maxAssetTotal=dcStatsCopy[dcStatsCopy.length-1].assetTotal;
let bigBoundary=Number.parseInt(maxAssetTotal/3*2);
let mediumBoundary=Number.parseInt(maxAssetTotal/3);
for(let dcStat of dcStats){
let dcId=dcStat.id;
let dcInfo=idcInfos.find((item)=>{
@@ -808,10 +819,20 @@
}else{
areaName=areaInfo.name;
}
let symbolSize=mediumScatter;
if(dcStat.assetTotal>=bigBoundary){
symbolSize=bigScatter;
}else if(dcStat.assetTotal<bigBoundary && dcStat.assetTotal>= mediumBoundary){
symbolSize=mediumScatter;
}else{
symbolSize=smallScatter;
}
console.log(dcStat.name+'-->'+ symbolSize)
seriesDatas.push({
name:areaName,
value:[areaInfo.longitude,areaInfo.latitude,dcStat],
// symbolSize:5,
symbolSize:symbolSize,
})
}
}