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

perf: 增强列表提醒、增加asset列表中dc弹框

Browse Source 
1.所有列表中可操作的列文字颜色都调整为蓝色
2.增加asset搜索项：state
3.asset列表中的dc项可以点开编辑了
This commit is contained in:
chenjinsong
2020-01-09 14:57:44 +08:00
parent 14500d6a30
commit 50a8a2c878
12 changed files with 92 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/assets/css/main.css
View File

@@ -233,6 +233,10 @@ html {
.content-right-option .el-icon-view { .content-right-option .el-icon-view {
color: #60BEFF; color: #60BEFF;
} }
.link { /*有外联的字段*/
color: #1166bb;
cursor: pointer;
}
.content-right-option .el-icon-view:hover { .content-right-option .el-icon-view:hover {
color: #409EFF; color: #409EFF;
} }

6
nezha-fronted/src/components/common/dcConfig.vue
View File

@@ -3,14 +3,14 @@
<div class="pop-window-assetType-content"> <div class="pop-window-assetType-content">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="pop-top-btns"> <div class="pop-top-btns">
<button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-style-light"> <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span> <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button> </button>
<button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal"> <button type="button" @click="save" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span> <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button> </button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square"> <button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span> <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button> </button>
</div> </div>

2
nezha-fronted/src/components/common/elementSet.vue
View File

@@ -47,7 +47,7 @@ export default {
props: ["dropCol"], props: ["dropCol"],
data() { data() {
return { return {
other: this.$t("i18n.overall.other"), other: this.$t("overall.other"),
event_positiony: 0, event_positiony: 0,
event_positionx: 0, event_positionx: 0,
eventfixedVal: {}, eventfixedVal: {},

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

@@ -22,7 +22,8 @@ const en = {
signOut: 'Sign Out', signOut: 'Sign Out',
select: 'Select', select: 'Select',
ok: 'Ok', ok: 'Ok',
all: 'All' all: 'All',
other: "Other"
}, },
dashboard:{ dashboard:{
title:'Dashboard', title:'Dashboard',
@@ -278,8 +279,8 @@ const en = {
device: 'SN', device: 'SN',
host: 'Host', host: 'Host',
assetState: 'State', assetState: 'State',
module: 'Module', endpoints: 'Endpoints',
alert: 'Alert', alerts: 'Alerts',
dataCenter: 'Data Center', dataCenter: 'Data Center',
cabinet: 'Cabinet', cabinet: 'Cabinet',
model: 'Model', model: 'Model',
@@ -337,7 +338,7 @@ const en = {
endAt: "End Time", endAt: "End Time",
list: { list: {
//表头 //表头
linkedId: "Linked ID", linked: "Linked",
type: "Type", type: "Type",
state: "Status", state: "Status",
charts: "Charts", charts: "Charts",

3
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -474,6 +474,8 @@
if(val.type == 'select'){ if(val.type == 'select'){
if (val.label == 'alertType' || val.label == 'promType') { if (val.label == 'alertType' || val.label == 'promType') {
objectInfo.type = val.valnum; objectInfo.type = val.valnum;
} else if (val.label == 'assetState') {
objectInfo.state = val.valnum;
} else if(typeof(val.valnum) == "undefined"||val.valnum == ''){ } else if(typeof(val.valnum) == "undefined"||val.valnum == ''){
this.selectInfoList[val.label].forEach(item=>{ this.selectInfoList[val.label].forEach(item=>{
if(item.label == val.val){ if(item.label == val.val){
@@ -487,7 +489,6 @@
}else { }else {
objectInfo[val.label] = val.valnum; objectInfo[val.label] = val.valnum;
} }
console.info(val)
} else if(val.type == 'selectSelf'){ } else if(val.type == 'selectSelf'){
objectInfo[val.label] = val.valnum; objectInfo[val.label] = val.valnum;
} else if(val.type == 'selectAction'){ //新增日志判断 } else if(val.type == 'selectAction'){ //新增日志判断

9
nezha-fronted/src/components/common/searchSelectInfo.vue
View File

@@ -38,6 +38,15 @@
value: 3, value: 3,
label: i18n.t('alert.config.typeOption.asset') label: i18n.t('alert.config.typeOption.asset')
} }
],
assetState: [ //资产入库/出库状态
{
value: 1,
label: i18n.t('asset.createAssetTab.inStock')
}, {
value: 2,
label: i18n.t('asset.createAssetTab.notInStock')
}
] ]
}; };
export default searchSelectInfo; export default searchSelectInfo;

6
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -60,8 +60,9 @@
</span> </span>
<!-- <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>--> <!-- <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
<div v-else-if="item.prop == 'linkObject'"> <div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span> <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span> <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-else>-</span>
</div> </div>
<span v-else>{{scope.row[item.prop]}}</span> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
@@ -335,6 +336,7 @@ export default {
}, },
search: function(searchObj) { search: function(searchObj) {
this.searchLabel = {}; this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]); this.$set(this.searchLabel, item, searchObj[item]);

14
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -41,8 +41,9 @@
</div> </div>
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="item.prop == 'alertRule'" class="content-right-option" @click="viewRule(scope.row[item.prop].id)"> <span v-if="item.prop == 'alertRule'">
{{scope.row[item.prop].alertName}} <span class="link" @click="viewRule(scope.row[item.prop].id)" v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</span>
<span v-else>-</span>
</span> </span>
<div v-else-if="item.prop == 'type'" class="content-right-options"> <div v-else-if="item.prop == 'type'" class="content-right-options">
<span v-if="scope.row[item.prop] == 1" >Project</span> <span v-if="scope.row[item.prop] == 1" >Project</span>
@@ -55,8 +56,9 @@
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span> <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
</span> </span>
<div v-else-if="item.prop == 'linkObject'"> <div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span> <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span> <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-else>-</span>
</div> </div>
<div v-else-if="item.prop == 'state'"> <div v-else-if="item.prop == 'state'">
<span class=""> <span class="">
@@ -103,7 +105,7 @@ export default {
prop: 'type', prop: 'type',
show: true, show: true,
}, { }, {
label: this.$t("alert.list.linkedId"), label: this.$t("alert.list.linked"),
prop: 'linkObject', prop: 'linkObject',
show: true, show: true,
}, { }, {
@@ -260,6 +262,7 @@ export default {
}, },
search: function(searchObj) { search: function(searchObj) {
this.searchLabel = {}; this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]); this.$set(this.searchLabel, item, searchObj[item]);
@@ -277,7 +280,6 @@ export default {
}) })
}, },
viewAlertType:function(type,typeObj){ viewAlertType:function(type,typeObj){
console.log(typeObj)
this.closeViews(); this.closeViews();
switch (type) { switch (type) {
case 1: case 1:

75
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -125,34 +125,39 @@
<div v-if="item.prop=='HOST'"> <div v-if="item.prop=='HOST'">
<span>{{scope.row.host}}</span> <span>{{scope.row.host}}</span>
</div> </div>
<div v-if="item.prop=='资产状态'"> <div v-if="item.prop=='state'">
<span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span> <span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
</div> </div>
<div v-if="item.prop=='Module'"> <div v-if="item.prop=='Module'">
<div class="tab-input-square">{{scope.row.moduleNum}}</div> <div class="tab-input-square link">{{scope.row.moduleNum}}</div>
</div> </div>
<div v-if="item.prop=='Alert'"> <div v-if="item.prop=='Alert'">
<div class="tab-input-square">{{scope.row.alertNum}}</div> <div class="tab-input-square link">{{scope.row.alertNum}}</div>
</div> </div>
<div v-if="item.prop=='数据中心'"> <div v-if="item.prop=='dataCenter'">
<span>{{scope.row.idc.name}}</span> <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
<template v-slot:optionZone>
<span class="link">{{scope.row.idc.name}}</span>
</template>
</idc-config-box>
<!--<span class="link">{{scope.row.idc.name}}</span>-->
</div> </div>
<div v-if="item.prop=='机柜'"> <div v-if="item.prop=='cabinet'">
<span>{{returnData(scope.row.cabinet)}}</span> <span class="link">{{returnData(scope.row.cabinet)}}</span>
</div> </div>
<div v-if="item.prop=='型号'"> <div v-if="item.prop=='model'">
<span>{{scope.row.model.name}}</span> <span>{{scope.row.model.name}}</span>
</div> </div>
<div v-if="item.prop=='厂商'"> <div v-if="item.prop=='vendor'">
<span>{{scope.row.model.vendor.value}}</span> <span>{{scope.row.model.vendor.value}}</span>
</div> </div>
<div v-if="item.prop=='购买日期'"> <div v-if="item.prop=='购买日期'">
<span>{{scope.row.purchaseDate}}</span> <span>{{scope.row.purchaseDate}}</span>
</div> </div>
<div v-if="item.prop=='责任人'"> <div v-if="item.prop=='principal'">
<span>{{getPrincipalName(scope.row.idc.principal)}}</span> <span>{{getPrincipalName(scope.row.idc.principal)}}</span>
</div> </div>
<div v-if="item.prop=='责任人电话'"> <div v-if="item.prop=='tel'">
<span>{{scope.row.idc.tel}}</span> <span>{{scope.row.idc.tel}}</span>
</div> </div>
<div v-if="item.prop == 'option'" class="content-right-options"> <div v-if="item.prop == 'option'" class="content-right-options">
@@ -175,7 +180,7 @@
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination> <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div> </div>
<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" <asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
@sendStateData="tabControl"></asset-add-unit> @sendStateData="tabControl"></asset-add-unit>
<asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl" <asset-edit-unit :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
ref="assetEditUnit"></asset-edit-unit> ref="assetEditUnit"></asset-edit-unit>
@@ -213,6 +218,12 @@
type: 'input', type: 'input',
label: 'host', label: 'host',
disabled: false disabled: false
},{
id: 22,
name: this.$t("asset.createAssetTab.state"),
type: 'select',
label: 'assetState',
disabled: false
}], }],
}, },
searchLabel: {}, //搜索参数 searchLabel: {}, //搜索参数
@@ -240,31 +251,31 @@
width: 130 width: 130
}, { }, {
label: this.$t("asset.tableTitle.assetState"), label: this.$t("asset.tableTitle.assetState"),
prop: '资产状态', prop: 'state',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.module"), label: this.$t("asset.tableTitle.endpoints"),
prop: 'Module', prop: 'Module',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.alert"), label: this.$t("asset.tableTitle.alerts"),
prop: 'Alert', prop: 'Alert',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.dataCenter"), label: this.$t("asset.tableTitle.dataCenter"),
prop: '数据中心', prop: 'dataCenter',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.cabinet"), label: this.$t("asset.tableTitle.cabinet"),
prop: '机柜', prop: 'cabinet',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.model"), label: this.$t("asset.tableTitle.model"),
prop: '型号', prop: 'model',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.manufacturer"), label: this.$t("asset.tableTitle.manufacturer"),
prop: '厂商', prop: 'vendor',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.procurementDate"), label: this.$t("asset.tableTitle.procurementDate"),
@@ -272,11 +283,11 @@
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.principal"), label: this.$t("asset.tableTitle.principal"),
prop: '责任人', prop: 'principal',
show: true, show: true,
}, { }, {
label: this.$t("asset.tableTitle.principalTel"), label: this.$t("asset.tableTitle.principalTel"),
prop: '责任人电话', prop: 'tel',
show: true, show: true,
}, { }, {
label: this.$t('config.account.option'), label: this.$t('config.account.option'),
@@ -413,14 +424,18 @@
}); });
window.open(routeData.href); window.open(routeData.href);
}, },
getAssetData(data) { getAssetData(data, flushRightBoxDc) {
this.searchLabel = Object.assign(this.pageObj, this.searchLabel); this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
this.$get('asset', this.searchLabel).then(response => { this.$get('asset', this.searchLabel).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.tableData = response.data.list; this.tableData = response.data.list;
this.pageObj.total = response.data.total this.pageObj.total = response.data.total
} }
}) });
if (flushRightBoxDc) {
this.$refs.assetAddUnit.getIDCOptionData();
this.$refs.assetEditUnit.getIDCOptionData();
}
}, },
getIDCOptionData() { getIDCOptionData() {
this.$get('idc').then(response => { this.$get('idc').then(response => {
@@ -558,8 +573,10 @@
} else { } else {
this.pageObj.idcIds = this.checkList.join(','); this.pageObj.idcIds = this.checkList.join(',');
} }
this.getAssetData(); } else {
this.pageObj.idcIds = '';
} }
this.getAssetData();
}, },
pageNo(val) { pageNo(val) {
this.pageObj.pageNo = val; this.pageObj.pageNo = val;
@@ -595,6 +612,7 @@
}, },
search(searchObj) { search(searchObj) {
this.searchLabel = {}; this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]); this.$set(this.searchLabel, item, searchObj[item]);
@@ -646,13 +664,12 @@
} }
.tab-input-square { .tab-input-square {
border: 1px solid #aaaaaa; border: 1px solid #1166bb;
height: 25px; height: 25px;
width: 65px; width: 65px;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
line-height: 23px; line-height: 23px;
color: #aaaaaa;
} }
.account-list-option { .account-list-option {
@@ -781,4 +798,8 @@
right: 10px; right: 10px;
font-size: 16px; font-size: 16px;
} }
.cell .checkbox-edit {
position: static;
font-size: 14px;
}
</style> </style>

4
nezha-fronted/src/components/page/config/account.vue
View File

@@ -62,6 +62,7 @@
v-model="scope.row.status" v-model="scope.row.status"
active-value="1" active-value="1"
inactive-value="0" inactive-value="0"
active-color="#1166bb"
@change="(val)=>{statusChange(scope.row)}"> @change="(val)=>{statusChange(scope.row)}">
</el-switch> </el-switch>
</span> </span>
@@ -119,7 +120,7 @@
</el-form-item>--> </el-form-item>-->
<!--enable--> <!--enable-->
<el-form-item :label="$t('config.account.enable')"> <el-form-item :label="$t('config.account.enable')">
<el-switch v-model="user.status" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0"> <el-switch v-model="user.status" active-color="#1166bb" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0">
</el-switch> </el-switch>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.account.createTime')" v-if="!rightBox.isEdit"> <el-form-item :label="$t('config.account.createTime')" v-if="!rightBox.isEdit">
@@ -449,6 +450,7 @@ export default {
}, },
search: function(searchObj) { search: function(searchObj) {
this.searchLabel = {}; this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]); this.$set(this.searchLabel, item, searchObj[item]);

3
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -33,7 +33,7 @@
</div> </div>
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'">{{scope.row[item.prop].name}}</span> <span v-if="item.prop == 'idc'" class="link">{{scope.row[item.prop].name}}</span>
<span v-else-if="item.prop == 'type'"> <span v-else-if="item.prop == 'type'">
{{scope.row[item.prop] == '1' ? 'Global' : ''}} {{scope.row[item.prop] == '1' ? 'Global' : ''}}
{{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}} {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
@@ -501,6 +501,7 @@ export default {
this.getTableData(); this.getTableData();
}, },
search: function(searchObj) { search: function(searchObj) {
this.pageObj.pageNo = 1;
this.searchLabel = {}; this.searchLabel = {};
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {

4
nezha-fronted/src/components/page/project/project.vue
View File

@@ -90,7 +90,7 @@
</div> </div>
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="content-right-option" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span> <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-else-if="item.prop == 'param'"> <span v-else-if="item.prop == 'param'">
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span> <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
</span> </span>
@@ -414,6 +414,7 @@
//搜索 //搜索
endpointSearch: function(searchObj) { endpointSearch: function(searchObj) {
this.endpointSearchLabel = {}; this.endpointSearchLabel = {};
this.endpointPageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {
this.$set(this.endpointSearchLabel, item, searchObj[item]); this.$set(this.endpointSearchLabel, item, searchObj[item]);
@@ -424,6 +425,7 @@
//搜索 //搜索
metricSearch: function(searchObj) { metricSearch: function(searchObj) {
this.metricSearchLabel = {}; this.metricSearchLabel = {};
this.metricPageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {
this.$set(this.metricSearchLabel, item, searchObj[item]); this.$set(this.metricSearchLabel, item, searchObj[item]);