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

fix: NEZ-46

Browse Source 
1. issue  NEZ-46的bug
2. asset列表页打开的module弹框无法编辑的问题
3. 列表内容过长的处理
This commit is contained in:
chenjinsong
2020-01-19 18:31:18 +08:00
parent 396c03ec88
commit 2dd4decd27
11 changed files with 451 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -72,9 +72,9 @@ li{
} }
.too-long-split { .too-long-split {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
width: 100%;
} }
/* begin--按钮组件*/ /* begin--按钮组件*/
.nz-btn-min-width-35 { .nz-btn-min-width-35 {
@@ -387,40 +387,37 @@ li{
border-right: 1px solid #d4d4d4; border-right: 1px solid #d4d4d4;
box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.50); box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.50);
} }
.content-right>.el-table th:first-of-type .cell{
padding-left: 0;
}
.content-right>.el-table td .cell{ .content-right>.el-table td .cell{
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
display:flex;
}
.nav-tabel-header{
display: flex;
height: 36px;
min-width: 100px;
} }
.content-right .el-table__row td:first-of-type { .content-right .el-table__row td:first-of-type {
padding-left: 38px; padding-left: 38px;
} }
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow { /*覆盖tooltip小三角颜色*/
border-top-color: #ebeef5;
}
.nz-table-gear { .nz-table-gear {
display: block; display: inline-block;
width: 38px; width: 38px;
margin-left:-10px;
padding-left:10px;
padding-right:10px;
text-align: center; text-align: center;
border-right:2px solid #d4d4d4; border-right: 1px solid #d4d4d4;
box-sizing: border-box; box-sizing: border-box;
box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.5);
float: left;
} }
.nz-table-gear>i { .nz-table-gear>i {
cursor: pointer; cursor: pointer;
} }
.nz-table-txt{ .nz-table-txt {
padding-left:10px; display: inline-block;
display: flex;
height: 100%;
border-left:1px solid #fff; border-left:1px solid #fff;
min-width: 60px;
box-sizing: border-box; box-sizing: border-box;
padding-right:20px; float: left;
padding-left: 10px;
} }
/* end--内容*/ /* end--内容*/
@@ -585,6 +582,9 @@ li{
.pop-item-wider .el-form-item__content { .pop-item-wider .el-form-item__content {
margin-left: 80px !important; margin-left: 80px !important;
} }
.pop-item-wider .module-box-table td {
padding: 4px 0;
}
.pop-label { .pop-label {
padding-bottom: 5px; padding-bottom: 5px;
} }

68
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -91,74 +91,6 @@
<span>{{$t('overall.save')}}</span> <span>{{$t('overall.save')}}</span>
</button> </button>
</div> </div>
<!--<div class='right-box-form'>
&lt;!&ndash;project&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
<div class="right-box-form-content">
<el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
</div>
</div>
&lt;!&ndash;name&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
<div class="right-box-form-content">
<el-input placeholder="" maxlength="64" show-word-limit v-model="module.name" size="small"></el-input>
</div>
</div>
&lt;!&ndash;description&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.description")}}</div>
<div class="right-box-form-content">
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="module.remark" size="small"></el-input>
</div>
</div>
&lt;!&ndash;tip&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-content">
<div class="right-box-form-tip">
{{$t('project.module.tip.defaultEndpointSet')}}
<div class="line-100"></div>
{{$t('project.module.tip.relation')}}
</div>
</div>
</div>
&lt;!&ndash;port&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
<div class="right-box-form-content">
<el-input placeholder="" v-model="module.port" size="small"></el-input>
</div>
</div>
&lt;!&ndash;path&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
<div class="right-box-form-content">
<el-input placeholder="" v-model="module.path" size="small"></el-input>
</div>
</div>
&lt;!&ndash;param&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">
{{$t("project.endpoint.param")}}
<el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
<el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
</div>
<div class="right-box-form-content">
<div class="param-box param-box-module">
<div class="param-box-row" v-for="(item, index) in module.paramObj">
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
<span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
</div>
</div>
</div>
</div>
</div>-->
</div> </div>
</transition> </transition>
</template> </template>

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

@@ -46,14 +46,15 @@
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
show-overflow-tooltip show-overflow-tooltip
min-width="110px"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0" class='nav-tabel-header'> <template v-if="index==0">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
</div> </div>
@@ -78,16 +79,14 @@
<template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template> <template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template>
</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'"> <template v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
@click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span> @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;">{{scope.row[item.prop].name}}</span>
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" <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> @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-else>-</span> <span v-else>-</span>
</div> </template>
<div v-else-if="item.prop == 'alertName'"> <template v-else-if="item.prop == 'alertName'">{{scope.row.alertName}}</template>
<div class="too-long-split" style="max-width: 100px;">{{scope.row.alertName}}</div>
</div>
<span v-else>{{scope.row[item.prop]}}</span> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>
@@ -217,6 +216,7 @@
label: this.$t("alert.config.link"), label: this.$t("alert.config.link"),
prop: 'linkObject', prop: 'linkObject',
show: true, show: true,
width: 140
}, { }, {
label: this.$t("alert.config.for"), label: this.$t("alert.config.for"),
prop: 'last', prop: 'last',
@@ -229,11 +229,11 @@
label: this.$t('alert.description'), label: this.$t('alert.description'),
prop: 'description', prop: 'description',
show: true, show: true,
}, { }, /*{
label: this.$t('alert.config.receiver'), label: this.$t('alert.config.receiver'),
prop: 'receiver', prop: 'receiver',
show: true, show: true,
}, { }, */{
label: this.$t('alert.config.option'), label: this.$t('alert.config.option'),
prop: 'option', prop: 'option',
show: true, show: true,

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

@@ -9,16 +9,21 @@
<div class="sidebar-title">{{$t('alert.alert')}}</div> <div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info"> <div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div> <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
<div class="sidebar-info-item" @click="jumpTo('alertConfig')" id="alert-jump-config">{{$t('alert.alertConfig')}}</div> <div class="sidebar-info-item" @click="jumpTo('alertConfig')" id="alert-jump-config">
{{$t('alert.alertConfig')}}
</div>
</div> </div>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
</div> </div>
<el-table <el-table
:data="tableData" :data="tableData"
border border
tooltip-effect="light"
height="calc(100% - 65px)" height="calc(100% - 65px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
@@ -28,36 +33,52 @@
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
show-overflow-tooltip
min-width="110px"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0" class='nav-tabel-header'> <template v-if="index==0">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
</div> </div>
</template> </template>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span v-if="item.prop == 'alertRule'"> <template v-if="item.prop == 'alertRule'">
<span class="link" @click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id" v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</span> <div class="link too-long-split"
<span v-else>-</span> @click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"
</span> v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>
<template v-else>-</template>
</template>
<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>
<span v-if="scope.row[item.prop] == 2" >Module</span> <span v-if="scope.row[item.prop] == 2">Module</span>
<span v-if="scope.row[item.prop] == 3" >Device</span> <span v-if="scope.row[item.prop] == 3">Device</span>
</div> </div>
<template v-else-if="item.prop == 'summary'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template>
<template v-else-if="item.prop == 'description'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else>-</span>
</template>
<span v-else-if="item.prop == 'severity'"> <span v-else-if="item.prop == 'severity'">
<span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span> <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
<span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span> <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
<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="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])" :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span> <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)" :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span> @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</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)"
:id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
<span v-else>-</span> <span v-else>-</span>
</div> </div>
<div v-else-if="item.prop == 'state'"> <div v-else-if="item.prop == 'state'">
@@ -75,7 +96,8 @@
<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box> <alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box> <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
<module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box> <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit> <asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
ref="assetEditUnit"></asset-edit-unit>
<element-set <element-set
v-clickoutside="elementsetHide" v-clickoutside="elementsetHide"
:table-title="tableTitle" :table-title="tableTitle"
@@ -87,44 +109,49 @@
</template> </template>
<script> <script>
export default { export default {
name: "alertList", name: "alertList",
data() { data() {
return { return {
pageObj: { pageObj: {
pageNo: 1, pageNo: 1,
pageSize: 20, pageSize: 20,
total:13 total: 13
}, },
tableTitle: [ tableTitle: [
{ {
label: this.$t("alert.alertName"), label: this.$t("alert.alertName"),
prop: 'alertRule', prop: 'alertRule',
show: true show: true,
width: 180
}, { }, {
label: this.$t("alert.list.type"), label: this.$t("alert.list.type"),
prop: 'type', prop: 'type',
show: true, show: true,
width: 100
}, { }, {
label: this.$t("alert.list.linked"), label: this.$t("alert.list.linked"),
prop: 'linkObject', prop: 'linkObject',
show: true, show: true,
width: 140
}, { }, {
label: this.$t("alert.severity"), label: this.$t("alert.severity"),
prop: 'severity', prop: 'severity',
show: true, show: true,
width: 100
}, { }, {
label: this.$t('alert.summary'), label: this.$t('alert.summary'),
prop: 'summary', prop: 'summary',
show: true, show: true
}, { }, {
label: this.$t('alert.description'), label: this.$t('alert.description'),
prop: 'description', prop: 'description',
show: true, show: true
}, { }, {
label: this.$t('alert.list.state'), label: this.$t('alert.list.state'),
prop: 'state', prop: 'state',
show: true, show: true,
width: 100
}, { }, {
label: this.$t("alert.startAt"), label: this.$t("alert.startAt"),
prop: 'startAt', prop: 'startAt',
@@ -143,13 +170,13 @@ export default {
type: 'input', type: 'input',
label: 'alertName', label: 'alertName',
disabled: false disabled: false
},{ }, {
id: 3, id: 3,
name: this.$t('alert.list.type'), name: this.$t('alert.list.type'),
type: 'select', type: 'select',
label: 'alertType', label: 'alertType',
disabled: false disabled: false
},{ }, {
id: 4, id: 4,
name: this.$t('alert.severity'), name: this.$t('alert.severity'),
type: 'selectString', type: 'selectString',
@@ -198,7 +225,7 @@ export default {
}, },
viewProjectData: {id: '', name: '', remark: ''}, viewProjectData: {id: '', name: '', remark: ''},
viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
viewAssetState:false, viewAssetState: false,
} }
}, },
methods: { methods: {
@@ -221,7 +248,7 @@ export default {
e.clientY + dh <= h - 10 e.clientY + dh <= h - 10
? e.clientY - 70 ? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h); : e.clientY - 70 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony }); this.$store.commit('setPosition', {positionx, positiony});
}, },
elementsetHide() { elementsetHide() {
//悬浮点击空白隐藏 //悬浮点击空白隐藏
@@ -232,7 +259,7 @@ export default {
this.$store.commit('setHeaderTable', data); this.$store.commit('setHeaderTable', data);
this.tablelable = data; this.tablelable = data;
}, },
getAlertList: function() { getAlertList: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/message', this.searchLabel).then(response => { this.$get('alert/message', this.searchLabel).then(response => {
@@ -249,7 +276,7 @@ export default {
this.$refs['assetEditUnit'].tabView = false this.$refs['assetEditUnit'].tabView = false
} }
}, },
jumpTo(data,id) { jumpTo(data, id) {
this.$store.state.assetData.moduleData = data this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id this.$store.state.assetData.selectedData = id
this.$router.push({ this.$router.push({
@@ -267,7 +294,7 @@ export default {
this.pageObj.pageSize = val; this.pageObj.pageSize = val;
this.getAlertList(); this.getAlertList();
}, },
search: function(searchObj) { search: function (searchObj) {
this.searchLabel = {}; this.searchLabel = {};
this.pageObj.pageNo = 1; this.pageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
@@ -277,16 +304,16 @@ export default {
} }
this.getAlertList(); this.getAlertList();
}, },
viewRule:function(id){ viewRule: function (id) {
this.closeViews(); this.closeViews();
this.$get('alert/rule', {"id":id}).then(response => { this.$get('alert/rule', {"id": id}).then(response => {
if (response.code == 200) { if (response.code == 200) {
this.viewRuleData = response.data.list[0]; this.viewRuleData = response.data.list[0];
this.$refs.alertConfigBox.show(true); this.$refs.alertConfigBox.show(true);
} }
}) })
}, },
viewAlertType:function(type,typeObj){ viewAlertType: function (type, typeObj) {
this.closeViews(); this.closeViews();
switch (type) { switch (type) {
case 1: case 1:
@@ -295,7 +322,7 @@ export default {
break; break;
case 2: case 2:
// this.fillProject(typeObj); // this.fillProject(typeObj);
let tempObj=JSON.parse(typeObj.param) let tempObj = JSON.parse(typeObj.param)
this.$set(typeObj, 'paramObj', []); this.$set(typeObj, 'paramObj', []);
for (let k in tempObj) { for (let k in tempObj) {
typeObj.paramObj.push({key: k, value: tempObj[k]}); typeObj.paramObj.push({key: k, value: tempObj[k]});
@@ -305,24 +332,24 @@ export default {
this.$refs.moduleBox.show(true); this.$refs.moduleBox.show(true);
break; break;
case 3: case 3:
this.viewAssetState=true; this.viewAssetState = true;
this.$refs.assetEditUnit.getAssetData(typeObj); this.$refs.assetEditUnit.getAssetData(typeObj);
this.$refs.assetEditUnit.tabView=true; this.$refs.assetEditUnit.tabView = true;
break; break;
} }
}, },
fillProject:function(module){ fillProject: function (module) {
this.$get('project', {"id":module.projectId}).then(response => { this.$get('project', {"id": module.projectId}).then(response => {
if (response.code == 200) { if (response.code == 200) {
module.project = response.data.list[0]; module.project = response.data.list[0];
} }
}) })
}, },
closeViews:function(){ closeViews: function () {
this.$refs.alertConfigBox.show(false,false); this.$refs.alertConfigBox.show(false, false);
this.$refs.projectBox.show(false,false); this.$refs.projectBox.show(false, false);
this.$refs.moduleBox.show(false,false); this.$refs.moduleBox.show(false, false);
this.viewAssetState=false; this.viewAssetState = false;
} }
}, },
mounted() { mounted() {
@@ -334,5 +361,5 @@ export default {
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)) ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle; : this.tableTitle;
} }
} }
</script> </script>

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

@@ -1,5 +1,5 @@
<template> <template>
<div class="asset"> <div class="asset" ref="asset">
<div class="content-left"> <div class="content-left">
<div class="sidebar-title">Asset</div> <div class="sidebar-title">Asset</div>
<div class="sidebar-info"> <div class="sidebar-info">
@@ -44,21 +44,25 @@
style="width: 100%;" style="width: 100%;"
:data="tableData" :data="tableData"
border border
tooltip-effect="light"
> >
<el-table-column <el-table-column
:resizable="false"
v-for="(item, index) in tablelable" v-for="(item, index) in tablelable"
v-if="item.show" v-if="item.show"
:width="item.width" :width="item.width"
:key="`col_${index}`" :key="`col_${index}`"
:label="item.label" :label="item.label"
:show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
min-width="110px"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0" class='nav-tabel-header'> <template v-if="index==0">
<span @click.stop="elementsetShow('shezhi',$event)" id="asset-tab-set" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" id="asset-tab-set" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
</div> </div>
@@ -70,31 +74,27 @@
<div v-if="item.prop=='assetType'"> <div v-if="item.prop=='assetType'">
<span>{{scope.row.model.type.value}}</span> <span>{{scope.row.model.type.value}}</span>
</div> </div>
<div v-if="item.prop=='SN'"> <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
<el-popover trigger="hover" placement="bottom-start" :content="scope.row.sn" >
<div slot="reference" class="too-long-split" style="max-width: 110px;">{{scope.row.sn}}</div>
</el-popover>
</div>
<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=='state'"> <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'"> <template v-if="item.prop=='Module'">
<div v-if="scope.row.moduleNum > 0" > <template v-if="scope.row.moduleNum > 0" >
<module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id"> <module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
<template v-slot:optionZone> <template v-slot:optionZone>
<button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button> <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>
</template> </template>
</module-list-pop> </module-list-pop>
</div> </template>
<button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button> <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button>
</div> </template>
<div v-if="item.prop=='Alert'"> <template v-if="item.prop=='Alert'">
<button type="button" v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button> <button type="button" v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button>
<button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.alertNum}}</button> <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.alertNum}}</button>
</div> </template>
<div v-if="item.prop=='dataCenter'"> <div v-if="item.prop=='dataCenter'">
<idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'"> <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
<template v-slot:optionZone> <template v-slot:optionZone>
@@ -103,13 +103,13 @@
</idc-config-box> </idc-config-box>
<!--<span class="link">{{scope.row.idc.name}}</span>--> <!--<span class="link">{{scope.row.idc.name}}</span>-->
</div> </div>
<div v-if="item.prop=='cabinet'"> <template v-if="item.prop=='cabinet'">
<cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='--'" ref="cabinetConfigBox" placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))" @after="getAssetData(null, true)"> <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='--'" ref="cabinetConfigBox" placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))" @after="getAssetData(null, true)">
<span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span> <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>
</cabinet-config-box> </cabinet-config-box>
<span v-else>{{returnData(scope.row.cabinet)}}</span> <span v-else>{{returnData(scope.row.cabinet)}}</span>
</div> </template>
<div v-if="item.prop=='model'"> <div v-if="item.prop=='model'">
<span>{{scope.row.model.name}}</span> <span>{{scope.row.model.name}}</span>
</div> </div>
@@ -202,7 +202,7 @@
label: this.$t("asset.tableTitle.id"), label: this.$t("asset.tableTitle.id"),
prop: 'ID', prop: 'ID',
show: true, show: true,
width: 90 width: 110
}, { }, {
label: this.$t("asset.tableTitle.assetType"), label: this.$t("asset.tableTitle.assetType"),
prop: 'assetType', prop: 'assetType',
@@ -225,10 +225,12 @@
label: this.$t("asset.tableTitle.modules"), label: this.$t("asset.tableTitle.modules"),
prop: 'Module', prop: 'Module',
show: true, show: true,
width: 105
}, { }, {
label: this.$t("asset.tableTitle.alerts"), label: this.$t("asset.tableTitle.alerts"),
prop: 'Alert', prop: 'Alert',
show: true, show: true,
width: 105
}, { }, {
label: this.$t("asset.tableTitle.dataCenter"), label: this.$t("asset.tableTitle.dataCenter"),
prop: 'dataCenter', prop: 'dataCenter',
@@ -380,7 +382,19 @@
} }
}, },
openModuleBox(module) { openModuleBox(module) {
if (module.param) {
try {
let tempObj = JSON.parse(module.param);
this.$set(module, 'paramObj', []);
for (let k in tempObj) {
module.paramObj.push({key: k, value: tempObj[k]});
}
} catch (err) {
console.info(module, err);
}
}
this.module = module; this.module = module;
console.info(this.module);
this.$refs.moduleBox.show(true); this.$refs.moduleBox.show(true);
}, },
getAssetModuleList(id) { getAssetModuleList(id) {

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

@@ -376,7 +376,7 @@
</el-form-item> </el-form-item>
<!--cli--> <!--cli-->
<div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}} <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}
<el-switch style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch> <el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
</div> </div>
<div class="line-100 asset-line"></div> <div class="line-100 asset-line"></div>
<template v-if="accountSwitch"> <template v-if="accountSwitch">
@@ -390,7 +390,7 @@
<button @click.stop="sendStateData('close')" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120" id="asset-edit-cancel"> <button @click.stop="sendStateData('close')" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120" id="asset-edit-cancel">
<span>{{$t('overall.cancel')}}</span> <span>{{$t('overall.cancel')}}</span>
</button> </button>
<button @click.stop="editData('asset')" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" id="asset-edit-save"> <button v-if="!tabView" @click.stop="editData('asset')" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120" id="asset-edit-save">
<span>{{$t('overall.ok')}}</span> <span>{{$t('overall.ok')}}</span>
</button> </button>
</div> </div>
@@ -615,6 +615,21 @@
}, },
'assetData.idcId': function(n, o) { 'assetData.idcId': function(n, o) {
this.addCabinetData.idcId = n; this.addCabinetData.idcId = n;
},
accountSwitch(n) {
if (n) {
if (!this.assetData.accounts[0]) {
!this.assetData.accounts.push({
id: '',
user:"",
authType:1,
pwd:"",
port:'',
privateKey:'',
uploadFile:''
});
}
}
} }
}, },
methods: { methods: {
@@ -801,10 +816,15 @@
form.append("idcId", this.assetData.idcId); form.append("idcId", this.assetData.idcId);
form.append("cabinetId", this.assetData.cabinetId); form.append("cabinetId", this.assetData.cabinetId);
form.append("modelId", modelId); form.append("modelId", modelId);
if (!this.accountSwitch) {
this.assetData.accounts = [];
}
for(let i in this.assetData.accounts){ for(let i in this.assetData.accounts){
let account=this.assetData.accounts[i]; let account=this.assetData.accounts[i];
if(account.user){ if(account.user){
if (account.id) {
form.append("accounts["+i+"].id", account.id); form.append("accounts["+i+"].id", account.id);
}
form.append("accounts["+i+"].authType",account.authType); form.append("accounts["+i+"].authType",account.authType);
form.append("accounts["+i+"].user", account.user); form.append("accounts["+i+"].user", account.user);
form.append("accounts["+i+"].port", account.port); form.append("accounts["+i+"].port", account.port);

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

@@ -1,20 +1,22 @@
<template> <template>
<el-popover :placement="placement" width="300" @hide="hidePop" ref="moduleListPop" v-model="popBox.show"> <el-popover :placement="placement" width="300" @hide="hidePop" ref="moduleListPop" v-model="popBox.show" popper-class="nz-pop">
<div class="pop-top-btns"> <div class="pop-top-btns">
<button type="button" @click="show(false)" id="module-show" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square"> <button type="button" @click="show(false)" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span> <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button> </button>
</div> </div>
<div class="pop-title">{{$t('project.module.module')}}</div> <div class="pop-title">{{$t('project.module.module')}}</div>
<div class="pop-item-wider"> <div class="pop-item-wider">
<el-input size="mini" v-model="pageObj.name" style="margin-bottom: 10px; width: calc(100% - 30px);"></el-input> <el-input class="input-x-mini-22" v-model="pageObj.name" style="margin-bottom: 10px; width: calc(100% - 30px);"></el-input>
<button @click="getModuleList" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square" id="module-search"><i class="el-icon-search" ></i></button> <button @click="getModuleList" class="nz-btn nz-btn-size-small nz-btn-style-light" id="module-search"><i class="el-icon-search" ></i></button>
<el-table <el-table
:data="moduleList" :data="moduleList"
border border
:show-header="false" :show-header="false"
height="513px" height="513px"
style="width: 100%;" style="width: 100%;"
class="module-box-table"
> >
<el-table-column> <el-table-column>
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">

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

@@ -46,12 +46,12 @@
:label="item.label" :label="item.label"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0" class='nav-tabel-header'> <template v-if="index==0">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
</div> </div>

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

@@ -29,12 +29,12 @@
<el-table :data="tableData" border height="calc(100% - 65px)" style="width: 100%;"> <el-table :data="tableData" border height="calc(100% - 65px)" style="width: 100%;">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :key="`col-${index}`" :label="item.label"> <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :key="`col-${index}`" :label="item.label">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0" class='nav-tabel-header' > <template v-if="index==0">
<span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
<span class="nz-table-txt">{{item.label}}</span> <span class="nz-table-txt">{{item.label}}</span>
</span> </template>
<div v-else> <div v-else>
<span>{{item.label}}</span> <span>{{item.label}}</span>
</div> </div>

2
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -10,7 +10,7 @@
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button @click="toAddChart" class="nz-btn nz-btn-size-normal float-right"> <button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
<span class="top-tool-btn-txt"> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span> {{$t('overall.add')}}</span>

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

@@ -10,9 +10,11 @@
@click="changeModule(item)" @click="changeModule(item)"
:id="'project-module-'+item.id" :id="'project-module-'+item.id"
> >
<div class="sidebar-info-item-txt">
<el-popover trigger="hover" placement="right-end" :content="item.name" > <el-popover trigger="hover" placement="right-end" :content="item.name" >
<div slot="reference" class="sidebar-info-item-txt">{{item.name}}</div> <span slot="reference">{{item.name}}</span>
</el-popover> </el-popover>
</div>
<div class="side-bar-menu-edit" @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></div> <div class="side-bar-menu-edit" @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></div>
</div> </div>
</div> </div>
@@ -43,6 +45,7 @@
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
min-width="110px"
> >
<template slot-scope="scope" :column="item"> <template slot-scope="scope" :column="item">
<span>{{scope.row[item.prop]}}</span> <span>{{scope.row[item.prop]}}</span>
@@ -82,9 +85,10 @@
:width="item.width" :width="item.width"
:key="`col-${index}`" :key="`col-${index}`"
:label="item.label" :label="item.label"
min-width="110px"
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0" class='nav-tabel-header'> <span v-if="index==0">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
@@ -140,7 +144,8 @@
{ {
label: this.$t("project.endpoint.endpointId"), label: this.$t("project.endpoint.endpointId"),
prop: 'id', prop: 'id',
show: true show: true,
width: 150
},{ },{
label: this.$t("project.endpoint.asset"), label: this.$t("project.endpoint.asset"),
prop: 'asset', prop: 'asset',
@@ -172,7 +177,8 @@
}, { }, {
label: this.$t('config.account.option'), label: this.$t('config.account.option'),
prop: 'option', prop: 'option',
show: true show: true,
width: 140
} }
], ],
endpointTableData: [], endpointTableData: [],