feat: module新增、修改增加snmp类型等

1.module新增、修改增加snmp类型等
2.取消滚动条拖动延迟
This commit is contained in:
陈劲松
2020-04-04 21:10:52 +08:00
parent e81296fb5e
commit c98e587dfc
11 changed files with 170 additions and 101 deletions

View File

@@ -20,6 +20,15 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="table-edit" unicode="&#58955;" d="M852.736 443.272L513.16 108.59199999999998l-6.624-54.168c-5.92-48.4 28.872-82.272 77.608-76.488l54.952-1.472 339.576 334.656-125.936 132.152z m-241.128-403.144l-34.592-4.112c-10.696-1.28-12.84 0.832-11.544 11.392l4.16 34.088 283.096 279.008 41.984-41.376-283.104-279zM395.08 31.192000000000007V450.52h243.528v0.136h48.216v-0.136H930.4v0.136h48.264V675.928c0 64.888-52.784 117.672-117.64 117.672H172.656c-64.856 0-117.64-52.784-117.64-117.672v-575.36c0-64.896 52.784-117.64 117.64-117.64h222.096l0.328 48.264z m291.752 653.096h243.576v-185.512H686.832V684.288z m-291.752 0h243.528v-185.512H395.08V684.288z m-291.8 0h243.496v-185.512H103.28V684.288z m243.536-653.096h-174.16c-38.28 0-69.376 31.104-69.376 69.376V216.712h243.528v-185.52z m0 233.768H103.28V450.52h243.528V264.96000000000004z" horiz-adv-x="1024" />
<glyph glyph-name="table" unicode="&#58880;" d="M905.846 817.23H118.154c-43.323 0-78.77-35.445-78.77-78.768v-708.924c0-43.323 35.447-78.769 78.77-78.769h787.692c43.323 0 78.77 35.446 78.77 78.77V738.461c0 43.323-35.447 78.769-78.77 78.769zM630.154 462.77H393.846V659.691h236.308V462.77z m0-39.385v-196.923H393.846V423.385h236.308zM78.769 659.692h275.693V462.77H78.769V659.692z m0-236.307h275.693v-196.923H78.769V423.385z m39.385-433.231c-23.63 0-39.385 15.754-39.385 39.384V187.077h275.693v-196.923H118.154z m275.692 0V187.077h236.308v-196.923H393.846z m551.385 39.384c0-23.63-15.754-39.384-39.385-39.384H669.538V187.077h275.693v-157.539z m0 196.924H669.538V423.385h275.693v-196.923z m0 236.307H669.538V659.692h275.693V462.77z" horiz-adv-x="1024" />
<glyph glyph-name="leaf" unicode="&#58884;" d="M891.628 445.96c-23.608 80.006-59.671 147.315-107.186 200.057-46.86 52.017-106.078 91.267-176.007 116.662-66.892 24.292-145.717 36.608-234.287 36.608H125.997c-16.568 0-30-13.432-30-30v-389.733c0-0.509 0.013-1.016 0.038-1.518 0.718-54.081 11.687-106.561 32.632-156.08 20.932-49.488 50.892-93.928 89.046-132.083 38.155-38.155 82.594-68.114 132.083-89.046 51.252-21.679 105.678-32.67 161.766-32.67H759.38c0.037 0 0.075-0.004 0.113-0.004 1.017 0 2.024 0.057 3.021 0.158l0.035 0.004c0.465 0.048 0.927 0.107 1.387 0.176 0.088 0.013 0.175 0.028 0.262 0.042a30.109 30.109 0 0 1 1.535 0.286 29.973 29.973 0 0 1 2.87 0.763c0.215 0.069 0.428 0.143 0.642 0.217 0.24 0.083 0.48 0.165 0.716 0.253 0.156 0.059 0.31 0.122 0.465 0.183 0.284 0.112 0.569 0.223 0.849 0.343l0.055 0.025a29.962 29.962 0 0 1 3.328 1.693l0.17 0.097c0.279 0.167 0.553 0.342 0.826 0.518 0.117 0.075 0.234 0.148 0.35 0.224 0.24 0.159 0.475 0.324 0.711 0.489 0.146 0.103 0.293 0.205 0.437 0.311 0.209 0.153 0.415 0.31 0.62 0.468 0.168 0.13 0.336 0.26 0.501 0.394a28.392 28.392 0 0 1 1.092 0.925 28.765 28.765 0 0 1 1.066 0.994c0.119 0.117 0.239 0.232 0.356 0.351 0.234 0.236 0.461 0.477 0.687 0.721 0.083 0.09 0.169 0.179 0.251 0.27 0.27 0.299 0.533 0.604 0.791 0.913 0.035 0.042 0.072 0.083 0.107 0.126a29.937 29.937 0 0 1 3.179 4.703c0.056 0.102 0.108 0.207 0.162 0.31 0.16 0.301 0.317 0.604 0.467 0.912 0.082 0.168 0.159 0.339 0.238 0.508 0.113 0.243 0.225 0.487 0.332 0.734 0.095 0.219 0.184 0.441 0.274 0.663 0.08 0.199 0.161 0.399 0.237 0.6a31.16 31.16 0 0 1 0.732 2.191c0.038 0.132 0.076 0.263 0.112 0.396 0.092 0.332 0.179 0.666 0.26 1.003 0.027 0.111 0.052 0.223 0.077 0.334 0.081 0.353 0.156 0.707 0.224 1.065 0.021 0.108 0.039 0.217 0.058 0.326 0.063 0.355 0.123 0.711 0.174 1.07l0.017 0.105c0.783 5.624 18.544 139.473-37.015 290.462-32.833 89.23-84.51 165.829-153.594 227.67-85.677 76.693-198.122 130.369-334.21 159.539-16.2 3.469-32.149-6.846-35.622-23.046-3.472-16.201 6.846-32.149 23.046-35.622 226.347-48.515 375.476-165.274 443.247-347.034 26.641-71.452 34.678-139.171 36.729-183.397 1.025-22.099 0.7-40.702 0.042-54.434h-220.23c-196.059 0-355.564 159.506-355.564 355.565V739.288h218.152c165.203 0 284.83-43.646 365.717-133.431 84.444-93.734 127.261-242.769 127.261-442.963v-164.735c0-16.568 13.432-30 30-30s30 13.432 30 30V162.894c0.001 108.005-11.942 203.243-35.497 283.066z" horiz-adv-x="1024" />
<glyph glyph-name="cabinet" unicode="&#59082;" d="M345.6 588.8H179.2c-14.08 0-25.6-11.52-25.6-25.6v-422.4c0-14.08 11.52-25.6 25.6-25.6h166.4c14.08 0 25.6 11.52 25.6 25.6V563.2c0 14.08-11.52 25.6-25.6 25.6z m-83.2-64c17.92 0 32-14.08 32-32S280.32 460.8 262.4 460.8 230.4 474.88 230.4 492.8s14.08 32 32 32z m0-102.4c17.92 0 32-14.08 32-32S280.32 358.4 262.4 358.4 230.4 372.48 230.4 390.4s14.08 32 32 32zM320 166.39999999999998h-115.2v38.4h115.2v-38.4z m0 64h-115.2v38.4h115.2v-38.4zM588.8 652.8H422.4c-14.08 0-25.6-11.52-25.6-25.6v-486.4c0-14.08 11.52-25.6 25.6-25.6h166.4c14.08 0 25.6 11.52 25.6 25.6V627.2c0 14.08-11.52 25.6-25.6 25.6z m-83.2-64c17.92 0 32-14.08 32-32S523.52 524.8 505.6 524.8 473.6 538.88 473.6 556.8s14.08 32 32 32z m0-102.4c17.92 0 32-14.08 32-32S523.52 422.4 505.6 422.4 473.6 436.48 473.6 454.4s14.08 32 32 32zM563.2 166.39999999999998h-115.2v38.4h115.2v-38.4z m0 64h-115.2v38.4h115.2v-38.4z m0 64h-115.2v38.4h115.2v-38.4zM832 588.8H665.6c-14.08 0-25.6-11.52-25.6-25.6v-422.4c0-14.08 11.52-25.6 25.6-25.6h166.4c14.08 0 25.6 11.52 25.6 25.6V563.2c0 14.08-11.52 25.6-25.6 25.6z m-83.2-64c17.92 0 32-14.08 32-32S766.72 460.8 748.8 460.8 716.8 474.88 716.8 492.8s14.08 32 32 32z m0-102.4c17.92 0 32-14.08 32-32S766.72 358.4 748.8 358.4 716.8 372.48 716.8 390.4s14.08 32 32 32zM806.4 166.39999999999998h-115.2v38.4h115.2v-38.4z m0 64h-115.2v38.4h115.2v-38.4z" horiz-adv-x="1024" />

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 56 KiB

File diff suppressed because one or more lines are too long

View File

@@ -895,7 +895,7 @@ li{
padding-top: 0;
box-shadow: $pop-box-shadow;
z-index: 2951 !important;
border-radius: 10px;
border-radius: 5px;
}
.nz-pop2 {
padding: 0 20px 20px 20px;
@@ -1397,7 +1397,7 @@ li{
line-height: 25px !important;
}
.el-textarea textarea:not(.snmp-walk textarea) {
.el-textarea textarea {
height: 140px !important;
}
/*el-data-picker选中背景色*/
@@ -1432,7 +1432,6 @@ li{
}
.ps__thumb-y {
right: 0px;
transition: .3s background-color, .1s top;
background-color: #888;
}
.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {

View File

@@ -1,26 +1,45 @@
<template>
<el-popover :placement="placement" width="367" ref="selectWalkPopBox" v-model="popBox.show" popper-class="nz-pop nz-pop-select-area" transition="slide">
<el-popover v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="nz-pop nz-pop-select-walk" transition="slide">
<div>
<div class="pop-item-wider">
<el-scrollbar class="select-area-tree">
<el-scrollbar class="select-walk-tree" ref="scrollbar">
<el-tree
ref="walkTree"
node-key="id"
:props="{label: 'name', children: 'children'}"
node-key="objectID"
:props="{label: 'name', children: 'subTree', disabled: disabledNode}"
:data="walkData"
default-expand-all
:default-expanded-keys="expandedWalk"
:expand-on-click-node="false"
check-on-click-node
check-strictly
highlight-current
@node-click="selectWalk"
@check-change="clearOthers">
show-checkbox
@check="change"
:default-checked-keys="currentWalk"
>
<span slot-scope="{node, data}" :class="getClass(data.objectID)">
<span v-if="!data.type"><i class="el-icon-reading"></i></span>
<span v-else>
<i v-if="data.type.toUpperCase() == 'IDENTIFIER'" class="el-icon-folder-opened"></i>
<i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length > 0" class="el-icon-folder-opened"></i>
<i v-if="data.type.toUpperCase() == 'OBJECT' && data.subTree.length == 0" class="nz-icon nz-icon-leaf"></i>
<i v-if="data.type.toUpperCase() == 'ENTRY'" class="nz-icon nz-icon-table-edit"></i>
<i v-if="data.type.toUpperCase() == 'TABLE'" class="nz-icon nz-icon-table"></i>
</span>
<el-popover trigger="hover" placement="left" v-if="data.objectID" popper-class="walk-detail">
<div>
<ul>
<li><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{data.name}}</span></li>
<li><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{data.objectID}}</span></li>
<li><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(node)}}</span></li>
</ul>
</div>
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover>
{{data.name}}
</span>
</el-tree>
</el-scrollbar>
</div>
<!--<div class="">
<button class="float-right nz-btn nz-btn-size-small nz-btn-style-normal nz-btn-min-width-60" type="button" @click="selectWalk">{{$t('overall.ok')}}</button>
</div>-->
</div>
<div slot="reference">
<slot name="trigger">
@@ -34,68 +53,84 @@
name: "selectWalk",
props:{
placement: {type: String},
isEdit: {type: Boolean, default: true},
walkData: {type: Array},
currentWalk: {type: Array}
currentWalk: {type: Array},
expandedWalk: {type: Array}
},
created() {
},
mounted() {
this.$nextTick(() => {
//this.$refs.walkTree.setCurrentKey(this.currentArea);
});
},
data(){
data() {
return {
popBox: {show: false},
walk: ''
popBox: {show: false}
}
},
computed: {
getClass() {
return (value) => {
return this.currentWalk.indexOf(value) == -1 ? '' : 'walk-active';
}
},
mibName() {
return (value) => {
return this.getMibName(value);
}
}
},
methods:{
openBox(walk){
if (walk) {
this.walk = walk;
//this.$refs.walkTree.setChecked(this.area.id, true, false);
getMibName(node) {
let mibName = getMibName(node);
function getMibName(n) {
if (n.parent && n.parent.parent) {
return getMibName(n.parent);
} else if (n.parent) {
return n.data.name;
} else {
return "";
}
}
},
esc(){
this.popBox.show = false;
},
//确认选择某个节点,与父组件交互
selectWalk(data, checked, child) {
this.walk = data;
this.$emit('selectWalk', this.walk);
this.esc();
},
//tree设为单选
clearOthers(data, checked, child) {
if (checked) {
this.walk = data;
//this.$refs.walkTree.setCheckedKeys();
if (mibName) {
return mibName;
} else {
this.walk = "";
return "";
}
},
change(data, tree) {
this.$emit("selectWalk", data.objectID);
},
show() {
this.popBox.show = true;
},
disabledNode(data) {
if (data.objectID) {
return false;
}
return true;
}
},
watch:{
}
}
</script>
<style lang="scss">
.select-area-tree {
.select-walk-tree {
height: 350px;
}
.select-area-tree .el-tree-node__content {
.select-walk-tree .el-tree-node__content {
height: 34px;
line-height: 34px;
}
.select-area-tree .el-tree-node__content:hover {
color: $global-text-color-active;
}
.select-area-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
.select-walk-tree .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #F5F7FA;
font-weight: bold;
color: $global-text-color-active;
}
.select-walk-tree .el-tree .el-checkbox {
display: none;
}
.nz-pop-select-walk {
padding: 0 !important;
}
.walk-active {
color: $global-text-color-active;
}
.walk-detail {
z-index: 10000 !important;
}
</style>

View File

@@ -642,7 +642,6 @@
currentModuleCopy: {
immediate: true,
handler(n, o) {
console.info(n)
if (n.type && n.type.toLowerCase() == 'snmp') {
this.endpointTableTitle[3].show = false;
this.endpointTableTitle[4].show = false;

View File

@@ -32,13 +32,6 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.name}}</div>
</el-form-item>
<!--<el-form-item :label="$t('overall.type')" prop="type">
<el-radio-group v-model="module.type" size="small" @change="updateScrollbar" :disabled="module.id ? true : false">
<el-radio-button label="http"></el-radio-button>
<el-radio-button label="snmp"></el-radio-button>
</el-radio-group>
</el-form-item>-->
<div class="nz-tab module-box-type">
<div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : currentModule.type.toLowerCase() == 'http', 'unclickable': currentModule.id}">HTTP</div>
@@ -59,43 +52,24 @@
</el-col>
<el-col :span="18">
<el-form-item prop="walk">
<select-walk ref="selectWalk" :walkData="walkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="currentModule.walk">
<select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="currentModule.walk">
<template v-slot:trigger>
<div class="el-cascader" style="width:100%">
<div class="el-input el-input--suffix">
<div class="el-cascader">
<div class="el-input">
<input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
<span class="el-input__suffix">
<span class="el-input__suffix-inner"><i class="el-input__icon el-icon-arrow-down"></i></span>
</span>
</div>
<div class="el-cascader__tags">
<span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in currentModule.walk">
<span>{{item}}</span>
<i class="el-tag__close el-icon-close"></i>
</span>
<el-scrollbar style="height: 100%;" ref="walkScrollbar">
<span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in currentModule.walk">
<span>{{item}}</span>
<i @click.stop="removeWalk(item)" class="el-tag__close el-icon-close"></i>
</span>
</el-scrollbar>
</div>
</div>
</template>
</select-walk>
</el-form-item>
<!--<el-form-item prop="walkStr">
<el-input class="snmp-walk" v-model="currentModule.walkStr" autosize type="textarea" :placeholder="$t('tip.pressEnterToAdd')"></el-input>
</el-form-item>-->
<!--<div class="module-walk">
<div class="module-walk-box">
<div class="walk-box-item" v-for="item in currentModule.walk">
<div class="walk-box-item-txt">{{item}}</div>
<div class="walk-box-item-op">
<span><i class="nz-icon nz-icon-edit"></i></span>
<span><i class="nz-icon nz-icon-minus-square"></i></span>
</div>
</div>
<div class="walk-box-op">
<span><i class="nz-icon-create-square nz-icon"></i></span>
</div>
</div>
</div>-->
<!--<span class="el-tag el-tag&#45;&#45;info el-tag&#45;&#45;small el-tag&#45;&#45;light"><span>东南 / 浙江 / 杭州</span><i class="el-tag__close el-icon-close"></i></span>-->
</el-col>
</el-row>
@@ -343,6 +317,7 @@
data() {
return {
walkData: [],
expandedWalkData: [],
currentModule: {},
rightBox: {
show: false,
@@ -386,17 +361,37 @@
}
},
methods: {
selectWalk() {
selectWalk(walk) {
if (this.currentModule.walk.indexOf(walk) != -1) {
this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
} else {
this.currentModule.walk.push(walk);
}
this.$refs.walkScrollbar.update();
},
removeWalk(walk) {
this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false);
},
initWalk() {
this.$nextTick(() => {
this.$refs.selectWalk.show();
})
},
getWalkData() {
/*this.$get('mib/tree', {pageSize: -1, pageNo: 1}).then(response => {
this.$get('mib/tree', {pageSize: -1, pageNo: 1}).then(response => {
if (response.code === 200) {
this.walkData = response.data.list;
console.info(this.walkData);
let obj = JSON.parse(response.data);
this.walkData = [];
for (let item in obj) {
this.walkData.push({name: item, subTree: obj[item]});
}
}
});*/
});
},
show(show, isEdit) {
@@ -628,6 +623,13 @@
handler(n, o) {
if (n.type && n.type.toLowerCase() == 'snmp') {
n.port = 161;
this.expandedWalkData = [];
this.$nextTick(() => {
this.$refs.selectWalk.show();
});
for (let i = 0; i < n.walk.length; i++) {
this.expandedWalkData.push(n.walk[i].substring(0, n.walk[i].lastIndexOf(".")));
}
}
}
},
@@ -669,6 +671,16 @@
margin: 5px 0 5px 15px;
cursor: pointer;
}
.el-cascader {
width: 100%;
}
.el-cascader__tags {
height: calc(100% - 10px);
width: 100%;
}
.right-box-module .el-cascader .el-input__inner {
height: 150px;
}
</style>
<style>
.sub-label {

View File

@@ -701,6 +701,9 @@
this.initSnmpParam(this.editModule);
}
this.rightBoxHandler(2);
this.$nextTick(() => {
this.$refs.moduleBox.initWalk();
});
},
//asset弹框控制