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

feat：添加连线，箭头，颜色 以及宽度 修改完成

Browse Source
This commit is contained in:
zhangyu
2020-09-07 16:46:55 +08:00
parent 9573f2d9a6
commit 92d3fb967d
7 changed files with 124 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

6
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -20,6 +20,12 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="caret-right" unicode="&#59058;" d="M133.6629667-19.043833329999984l432.1617 369.985A56.699 56.699 0 0 1 586.9666667 394.66666667a56.699 56.699 0 0 1-21.142 43.7255L133.6629667 808.37716667A76.9761 76.9761 0 0 1 57.4556667 822.6960666699999 69.4803 69.4803 0 0 1 10.3666667 764.6516666699999v-739.6817a69.192 69.192 0 0 1 46.8968-58.2366 76.88 76.88 0 0 1 76.3995 14.2228z" horiz-adv-x="1024" />
<glyph glyph-name="caret-left" unicode="&#59060;" d="M911.67036663 797.7105L479.50866663 427.7255A56.699 56.699 0 0 1 458.36666663 384c0-16.7214 7.688-32.674 21.142-43.7255l432.1617-369.985a76.9761 76.9761 0 0 1 76.3034-14.3189 69.4803 69.4803 0 0 1 46.9929 58.0444V753.6967a69.192 69.192 0 0 1-46.8968 58.2366 76.88 76.88 0 0 1-76.3995-14.2228z" horiz-adv-x="1024" />
<glyph glyph-name="overview-project" unicode="&#58988;" d="M1023.06176 661.461333c0-33.066667-26.794667-59.861333-59.861333-59.861333H59.904427A59.861333 59.861333 0 0 0 0.000427 661.461333V836.096A59.861333 59.861333 0 0 0 59.904427 896h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634667zM850.13376 748.8a39.253333 39.253333 0 1 1 78.549333 0 39.253333 39.253333 0 0 1-78.549333 0zM1023.06176 297.81333299999994a59.904 59.904 0 0 0-59.861333-59.946666H59.904427A59.861333 59.861333 0 0 0 0.000427 297.81333299999994V472.533333a59.904 59.904 0 0 0 59.904 59.861334h903.253333a59.861333 59.861333 0 0 0 59.904-59.861334v-174.762666zM870.059093 385.152a39.253333 39.253333 0 1 1 78.549334 0 39.253333 39.253333 0 0 1-78.506667 0zM1023.06176-56.53333299999997a59.904 59.904 0 0 0-59.861333-59.904H59.904427A59.904 59.904 0 0 0 0.000427-56.53333299999997v174.634666a59.904 59.904 0 0 0 59.904 59.904h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634666zM878.80576 30.80533300000002a39.296 39.296 0 1 1 78.592 0 39.296 39.296 0 0 1-78.592 0z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 102 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

20
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

121
nezha-fronted/src/components/common/project/addLine.vue
View File

@@ -22,21 +22,65 @@
</el-form-item>
<el-row class="form-title">{{$t('project.topology.option')}}</el-row>
<div class="line-option">
<!--<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">-->
<!--<el-input v-model="form.width" size="small"></el-input>-->
<!--</el-form-item>-->
<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">
<el-input v-model="form.width" size="small"></el-input>
<el-select v-model="form.width" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<div :style="{height:0,width:'80%',borderTop:form.width+'px'+' solid' +' #899FB7'}"></div>
</div>
<el-option v-for="(item,index) in widthOption" :label="item+'px'" :value="item" :key="index">
<div class="width-option">
<span style="marginRight:5px">{{item}}px</span><div class="width-option-line" :style="{height:0,width:'80%',borderTop:item+'px solid #899FB7'}"></div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false" size="small">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
<img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
<img v-if="form.arrows=='from;to'" src="./image/LRArrow.png" />
<img v-if="form.arrows=='0'" src="./image/noArrow.png" />
<div class="width-option">
<div v-if='form.arrows==="from"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-right position-right" style="top: -15px;"></i>
</div>
<div v-if='form.arrows==="to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left" style="top: -15px;"></i>
</div>
<div v-if='form.arrows==="from;to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left" style="top: -15px;"></i>
<i class="nz-icon nz-icon-caret-right position-right" style="top: -15px;"></i>
</div>
<div v-if='form.arrows==="0"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
</div>
</div>
<el-option label="from" value="from"><img src="./image/leftArrow.png" /></el-option>
<el-option label="to" value="to"><img src="./image/rightArrow.png" /></el-option>
<el-option label="from;to" value="from;to"><img src="./image/LRArrow.png" /></el-option>
<el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
<el-option label="from" value="from">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-right position-right"></i>
</div>
</div>
</el-option>
<el-option label="to" value="to">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left"></i>
</div>
</div>
</el-option>
<el-option label="from;to" value="from;to">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
<i class="nz-icon nz-icon-caret-left position-left"></i>
<i class="nz-icon nz-icon-caret-right position-right"></i>
</div>
</div>
</el-option>
<el-option label="" value="0">
<div class="width-option">
<div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
</div>
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('project.topology.color')" class="color">
@@ -214,6 +258,7 @@
promqlCount:0,
elementIds:[],
legends:[],
widthOption:['1','2','3','4'],
unit:[],
rules:{
// arrows: [
@@ -370,17 +415,30 @@
font-size: 14px;
color: #666666;
}
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix,.line-width /deep/ .el-input.el-input--prefix.el-input--suffix{
border: 1px solid #DCDFE6;
height: 28px;
width: calc(100% - 60px);
width: calc(100% - 32px);
}
.arrows /deep/ .el-input__inner{
.arrows /deep/ .el-input__inner,.line-width /deep/ .el-input__inner{
display: none;
}
.arrows /deep/ .el-input__prefix{
.arrows /deep/ .el-input__prefix,.line-width /deep/ .el-input__prefix{
height: 28px;
line-height: 28px;
color: #899FB7;
}
.arrows /deep/ .el-input__prefix > div{
width: 100%;
height: 100%;
}
.line-width /deep/ .el-input__prefix{
width: 100%;
display: flex;
align-items: center;
}
.line-width /deep/ .el-input__prefix > div{
width: 100%;
}
/deep/ .el-select{
width: 262px;
@@ -395,16 +453,38 @@
.line-option .line-width .el-input{
width: clac(100% - 60px);
}
/deep/ .el-select .el-input .el-select__caret{
vertical-align: middle;
/deep/ .el-input--small .el-input__icon{
line-height: 28px;
}
.width-option-line{
position: relative;
color: #899FB7;
}
.position-left{
position: absolute;
left:-4px ;
top: -18px;
}
.position-right{
position: absolute;
right: -4px;
top: -18px;
}
/deep/ .el-select-dropdown__item.selected .width-option-line {
border-color: #ee9d3f !important;
color: #ee9d3f !important;
}
/deep/ .el-dropdown-menu__item:focus .width-option-line, .el-dropdown-menu__item:not(.is-disabled):hover .width-option-line, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover .width-option-line, .el-select-dropdown__item.hover .width-option-line, .el-select-dropdown__item:hover .width-option-line{
border-color: #ee9d3f !important;
color: #ee9d3f !important;
}
.color-arrows{
color: #C0C4CC;
position: absolute;
right: 65px;
right: 70px;
}
.color-arrows .nz-icon{
font-size: 14px;
font-size: 12px;
}
.element-item{
padding: 20px 0;
@@ -430,6 +510,13 @@
letter-spacing: 0;
line-height: 22px;
}
.width-option{
width: 195px;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.el-row {
margin-bottom: 20px;
line-height: 32px;