perf:reset复选框调整、asset左侧筛选列表bug修复、overview 表格调整
This commit is contained in:
wangwenrui
@@ -94,7 +94,7 @@
|
||||
name:'',
|
||||
remark:'',
|
||||
seq:'',
|
||||
uSize:0
|
||||
uSize:1
|
||||
},
|
||||
showTopBtn: false, //top按钮是否显示
|
||||
loading: false,
|
||||
|
||||
@@ -436,7 +436,7 @@
|
||||
],
|
||||
panelData: [], //chart-box的panel下拉框数据,
|
||||
hideSameLabels: true,
|
||||
sameLabels:['instance','module','project','asset','job','dc'],
|
||||
sameLabels:['instance','module','project','asset','endpoint','datacenter'],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -266,11 +266,7 @@ const en = {
|
||||
fileSize:'文件过大',//File exceed max size.
|
||||
port:'Invalid Port',
|
||||
url:'Invalid URL',
|
||||
config: {
|
||||
account: {
|
||||
|
||||
}
|
||||
}
|
||||
uSize:'Must be number(1 - 47)'
|
||||
},
|
||||
search: {
|
||||
searchTip: 'Enter to search',//'点击或回车执行搜索'
|
||||
@@ -463,7 +459,7 @@ const en = {
|
||||
dataCenter: 'DC',//DC
|
||||
cabinet: 'Cabinet',//'机柜'
|
||||
model: 'Model',//'型号'
|
||||
manufacturer: 'Manufacturer',//'厂商'
|
||||
vendor: 'Vendor',//'厂商'
|
||||
procurementDate: 'Purchase date',//'购买日期'
|
||||
principal: 'Administrator',//'负责人'
|
||||
principalTel: 'Telephone',//'电话'
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{idc?idc.name:''}}</div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
|
||||
<div :class="{'right-box-form-content-txt':!rightBox.isEdit}" >{{cabinet.uSize}}</div>
|
||||
<el-slider v-model.number="cabinet.uSize" :max="47" v-if="rightBox.isEdit"></el-slider>
|
||||
<el-input v-model.number="cabinet.uSize" :max="47" ></el-input>
|
||||
<!-- <el-slider v-model.number="cabinet.uSize" :max="47" v-if="rightBox.isEdit"></el-slider>-->
|
||||
</el-form-item>
|
||||
<el-form-item :label="this.$t('config.dc.remark')">
|
||||
<el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="rightBox.isEdit"/>
|
||||
@@ -70,14 +70,15 @@
|
||||
name:'',
|
||||
remark:'',
|
||||
seq:'',
|
||||
uSize:0
|
||||
uSize:1
|
||||
},
|
||||
rules:{
|
||||
name: [
|
||||
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
|
||||
],
|
||||
uSize: [
|
||||
{required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur'}
|
||||
{required: true, message: this.$t('validate.required'), trigger: 'blur'},
|
||||
{type: 'number', min: 1, max: 47,message: this.$t('validate.uSize'),trigger: 'blur'}
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -93,7 +94,7 @@
|
||||
name:'',
|
||||
remark:'',
|
||||
seq:'',
|
||||
uSize:0
|
||||
uSize:1
|
||||
};
|
||||
},
|
||||
show(show, isEdit) {
|
||||
|
||||
@@ -391,7 +391,7 @@
|
||||
prop: 'model',
|
||||
show: true,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.manufacturer"),
|
||||
label: this.$t("asset.tableTitle.vendor"),
|
||||
prop: 'vendor',
|
||||
show: true,
|
||||
}, {
|
||||
@@ -663,7 +663,7 @@
|
||||
getPingData:function(){
|
||||
this.pingCheckListData=[
|
||||
{label:'up',value:1},
|
||||
{label:'down',value:2},
|
||||
{label:'down',value:0},
|
||||
]
|
||||
},
|
||||
getUserData() {
|
||||
@@ -819,28 +819,29 @@
|
||||
if(this.assetTypeCheckList && this.assetTypeCheckList.length > 0){
|
||||
let assetTypeIds=this.assetTypeCheckList.join(',');
|
||||
this.pageObj.typeIds=assetTypeIds;
|
||||
this.getAssetData();
|
||||
}else{
|
||||
this.pageObj.typeIds='';
|
||||
}
|
||||
this.getAssetData();
|
||||
},
|
||||
changeVendorCheckBox:function(){
|
||||
if(this.vendorCheckList && this.vendorCheckList.length > 0){
|
||||
let vendorIds=this.vendorCheckList.join(',');
|
||||
this.pageObj.vendorIds=vendorIds;
|
||||
this.getAssetData();
|
||||
|
||||
}else{
|
||||
this.pageObj.vendorIds='';
|
||||
}
|
||||
this.getAssetData();
|
||||
},
|
||||
changePingCheckBox:function(){
|
||||
if(this.pingCheckList && this.pingCheckList.length > 0){
|
||||
let pingStates=this.pingCheckList.join(',');
|
||||
this.pageObj.pingStates=pingStates;
|
||||
this.getAssetData();
|
||||
}else{
|
||||
this.pageObj.pingStates='';
|
||||
}
|
||||
this.getAssetData();
|
||||
},
|
||||
getSingleAsset() {
|
||||
let checkedCount = this.checkList.length;
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab">
|
||||
<div class="content-right system-tabs">
|
||||
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs">
|
||||
<el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="basic" label-width="180px" size="small" ref="basicForm" :rules="basic.asset_ping_switch == 'on'?basicRules:basicRules2" :validate-on-rule-change="false">
|
||||
@@ -62,7 +62,7 @@
|
||||
<div class="system-config-form">
|
||||
<el-form :model="email" label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
|
||||
<el-checkbox v-model="email.email_enable" true-label="on" false-label="off"></el-checkbox>
|
||||
<el-checkbox v-model="email.email_enable" true-label="on" false-label="off" @change="switchChange('emailForm')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
|
||||
<el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'"></el-input>
|
||||
@@ -139,7 +139,7 @@
|
||||
<el-input v-model="ldap.ldap_mapping"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
|
||||
<el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off'></el-checkbox>
|
||||
<el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('ldapForm')" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
@@ -152,13 +152,23 @@
|
||||
<el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
|
||||
<div class="system-config-form">
|
||||
<el-form :model="reset" label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false">
|
||||
<el-form-item :label="$t('config.system.reset.type')" prop="type">
|
||||
<!-- <el-select v-model="reset.type" size="small">-->
|
||||
<!-- <el-option v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-option>-->
|
||||
<!-- </el-select>-->
|
||||
<el-checkbox-group v-model="reset.type">
|
||||
<div v-for="(item,index) in resetOptions" :key="item.value+index"><el-checkbox :label="item.label" :value="item.value" ></el-checkbox></div>
|
||||
</el-checkbox-group>
|
||||
<el-form-item prop="type">
|
||||
<!-- <el-checkbox-group v-model="reset.type">-->
|
||||
<!-- <div v-for="(item,index) in resetOptions" :key="item.value+index">-->
|
||||
<!-- <el-checkbox :value="item.value" :label="item.label" ></el-checkbox>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-checkbox-group>-->
|
||||
<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;;">{{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-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</el-button>
|
||||
@@ -384,6 +394,21 @@
|
||||
break;
|
||||
}
|
||||
},
|
||||
switchChange:function(formName){
|
||||
let $temp=this;
|
||||
$temp.$refs[formName].clearValidate();
|
||||
setTimeout(()=>{
|
||||
$temp.$refs[formName].validate();
|
||||
},100)
|
||||
},
|
||||
resetCheckBoxChange:function(e){
|
||||
if(e.target.checked == true ){
|
||||
this.reset.type.push(e.target.value)
|
||||
}else{
|
||||
let index = this.reset.type.indexOf(e.target.value);
|
||||
this.reset.type.splice(index,1);
|
||||
}
|
||||
},
|
||||
jumpTo(data, id) {
|
||||
this.$router.push({
|
||||
path: "/" + data,
|
||||
@@ -420,4 +445,15 @@
|
||||
line-height: 28px;
|
||||
width: 512px;
|
||||
}
|
||||
.system-tabs .el-tabs--border-card{
|
||||
webkit-box-shadow: unset !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
.sys-reset-label .el-checkbox__original:checked + span{
|
||||
background-color: orange;
|
||||
}
|
||||
.sys-reset-label .el-checkbox__original:checked + span:after{
|
||||
-webkit-transform: rotate(45deg) scaleY(1);
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -67,6 +67,7 @@
|
||||
const mapOptions={
|
||||
geo:{
|
||||
map:'',
|
||||
|
||||
roam:true,//鼠标是否可以控制缩放
|
||||
// center:[],//当前视角的中心点，用经纬度表示
|
||||
label: { //控制显示地图名称
|
||||
@@ -78,7 +79,8 @@
|
||||
},
|
||||
} ,
|
||||
itemStyle:{
|
||||
areaColor:'lightgrey', //设置默认状态下地图颜色
|
||||
// areaColor:'lightgrey', //设置默认状态下地图颜色
|
||||
|
||||
},
|
||||
emphasis:{
|
||||
itemStyle: {
|
||||
@@ -90,6 +92,15 @@
|
||||
right:0,
|
||||
bottom:0,
|
||||
},
|
||||
dataRange:{
|
||||
x: '-1000 px', //图例横轴位置
|
||||
y: '-1000 px', //图例纵轴位置
|
||||
splitList: [
|
||||
{ start: 1, end: 1, label: 'astana', color: '#cfc5de' },
|
||||
{ start: 2, end: 2, label: '天津', color: '#f1ebd1' },
|
||||
{ start: 3, end: 3, label: '上海', color: '#feffdb' },
|
||||
]
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
type:'cross',
|
||||
|
||||
@@ -180,7 +180,7 @@
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
direction:'column',
|
||||
num:totalData.inStock,
|
||||
title:this.$t('dashboard.overview.asset.title'),
|
||||
showPopover:true,
|
||||
@@ -306,7 +306,7 @@
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
direction:'column',
|
||||
num:data.total,
|
||||
title:this.$t('dashboard.overview.project.project'),
|
||||
showPopover:false,
|
||||
@@ -378,7 +378,7 @@
|
||||
direction:'row',
|
||||
total:{ //左侧上方大图标及total信息
|
||||
show:true,
|
||||
direction:'row',
|
||||
direction:'column',
|
||||
num:data.total,
|
||||
title:this.$t('dashboard.overview.project.endpoint'),
|
||||
showPopover:false,
|
||||
|
||||
@@ -19,8 +19,10 @@
|
||||
}
|
||||
.table-screen{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.table-screen .screen-top{
|
||||
flex: 1;
|
||||
@@ -38,7 +40,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
align-items:center;
|
||||
align-items:flex-start;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -46,6 +48,21 @@
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.screen-column .screen-col{
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
.screen-col .col-box{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.screen-col .col-box div{
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
.super-icon{
|
||||
font-size:5rem !important;
|
||||
}
|
||||
@@ -83,4 +100,6 @@ popover-container{
|
||||
flex:1;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.column-flex{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="table-box" :class="{'table-column-box':showData&&showData.screen&&showData.screen.direction=='column'}">
|
||||
<loading ref="loading"></loading>
|
||||
<template v-if="showData&&showData.screen">
|
||||
<div class="table-box-left" :class="{'table-box-left-half':showData.screen.total.direction == 'column'}" v-show="showData.screen.show">
|
||||
<div class="table-box-left" :class="{'table-box-left-half':showData.screen.total.direction == 'column'&& showData.table.show && !showData.screen.stat.show}" v-show="showData.screen.show">
|
||||
<div class="table-screen" :class="{'fill-flex-cavity':!showData.screen.stat.show&&showData.screen.total.direction != 'column'&&showData.screen.direction!='column'}">
|
||||
<div class="screen-top" v-show="showData.screen.total.show" >
|
||||
<div :class="{'screen-row':showData.screen.total.direction == 'row','screen-column':showData.screen.total.direction == 'column'}">
|
||||
@@ -30,9 +30,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-bottom" v-show="showData.screen.stat.show">
|
||||
<div class="screen-row">
|
||||
<div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-up middle-icon green-icon"></i><span class="middle-font">{{showData.screen.stat.up}}</span></div>
|
||||
<div class="screen-col avg-children-space"><i class="nz-icon nz-icon-arrow-down middle-icon red-icon"></i><span class="middle-font">{{showData.screen.stat.down}}</span></div>
|
||||
<div :class="{'screen-row':showData.screen.total.direction == 'row','screen-column':showData.screen.total.direction == 'column'}">
|
||||
<div class="screen-col avg-children-space">
|
||||
<div class="col-box">
|
||||
<div>
|
||||
<div><i class="nz-icon nz-icon-arrow-up middle-icon green-icon"></i></div>
|
||||
<div><span class="middle-font">{{showData.screen.stat.up}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-col avg-children-space">
|
||||
<div class="col-box">
|
||||
<div>
|
||||
<div><i class="nz-icon nz-icon-arrow-down middle-icon red-icon"></i></div>
|
||||
<div><span class="middle-font">{{showData.screen.stat.down}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user