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-08-24 10:56:15 +08:00
parent edf7329165
commit 404b3f2daa
9 changed files with 103 additions and 75 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.

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

@@ -20,6 +20,15 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="shujuku" unicode="&#58945;" d="M1023.232 688.277333C1014.954667 805.312 793.685333 896 512 896S9.045333 805.312 0.789333 688.277333H0v-601.770666C0-33.706667 224.896-128 512-128c287.125333 0 512 94.293333 512 214.506667V688.277333h-0.768zM512 823.808c256.704 0 430.336-74.581333 436.885333-151.402667-6.464-76.992-180.181333-151.488-436.885333-151.488-256.725333 0-430.314667 74.453333-436.885333 151.402667C81.6 749.205333 255.274667 823.701333 512 823.701333v0.106667z m0-879.509333c-261.674667 0-437.525333 77.461333-437.525333 155.925333V255.573333C163.52 194.005333 324.181333 153.6 512 153.6c187.84 0 348.48 40.405333 437.525333 101.952v-155.349333c0-78.442667-175.850667-155.904-437.525333-155.904z m437.525333 448.96v-11.477334c0-78.4-175.850667-155.861333-437.525333-155.861333S74.474667 303.296 74.474667 381.696V550.613333C163.52 489.152 324.181333 448.661333 512 448.661333c187.84 0 348.48 40.426667 437.525333 101.952v-157.354666z" horiz-adv-x="1024" />
<glyph glyph-name="endpoint" unicode="&#59906;" d="M768-34.912H256c-128.32 0-232.736 104.416-232.736 232.736S127.68 430.56 256 430.56h186.176v-93.088H256a139.776 139.776 0 0 1-139.648-139.648A139.84 139.84 0 0 1 256 58.176h512v-93.088z m0 372.352h-139.648v93.088H768a139.776 139.776 0 0 1 139.648 139.648A139.84 139.84 0 0 1 768 709.824H256V802.912h512c128.32 0 232.736-104.416 232.736-232.736S896.32 337.44 768 337.44zM186.176 802.912a46.624 46.624 0 0 1-0.096-93.088h0.096a46.624 46.624 0 0 1 0.096 93.088h-0.096z m0-186.176a139.808 139.808 0 0 0-139.648 139.648A139.744 139.744 0 0 0 186.176 896.032a139.776 139.776 0 0 0 139.648-139.648 139.84 139.84 0 0 0-139.648-139.648z m651.648-558.56a46.624 46.624 0 0 1-0.096-93.088h0.096a46.624 46.624 0 0 1 0.096 93.088h-0.096z m0-186.176c-76.992 0-139.648 62.656-139.648 139.648s62.656 139.648 139.648 139.648 139.648-62.656 139.648-139.648S914.816-128 837.824-128z m-302.56 558.56a46.624 46.624 0 0 1-0.096-93.088h0.096a46.624 46.624 0 0 1 0.096 93.088h-0.096z m0-186.208c-77.024 0-139.648 62.592-139.648 139.648s62.592 139.648 139.648 139.648 139.648-62.592 139.648-139.648-62.592-139.648-139.648-139.648z" horiz-adv-x="1024" />
<glyph glyph-name="gaojing" unicode="&#59021;" d="M483.555556 827.733333h56.888888v-91.022222h-56.888888zM859.704889 646.826667l40.220444-40.277334-68.380444-68.380444-40.220445 40.220444zM164.295111 646.769778L232.675556 578.3893330000001l-40.220445-40.220444-68.380444 68.380444zM199.111111 48.35555599999998h625.777778V344.177778c0 176.355556-136.533333 312.888889-312.888889 312.888889S199.111111 520.5333330000001 199.111111 344.177778v-295.822222z m56.888889 295.822222c0 142.222222 113.777778 256 256 256s256-113.777778 256-256v-238.933334H381.155556v199.111112h-56.888889v-199.111112H256V344.177778zM85.333333-31.28888900000004h853.333334v-56.888889h-853.333334z" horiz-adv-x="1024" />
<glyph glyph-name="emptypage" unicode="&#58978;" d="M829.75 516.57l0.49 0.32-358.18 72.8-288.8-110.81h-0.17L92.24 326.54l381.14-98.14 108.4 156.19-273.72 64.79 287.5-67.84 155.96 89.97-156.13-90.61 88.73-145.92 260.76 150.41zM684.38 276.78l-68.07 113.09 138.77 81.36 63.63 37.43 88.46-101.86-222.79-130.02z m-85.17-269.3l-3.29 336.99 63.63-105.93c5.78-9.65 18.35-12.85 28.12-7.16l124.3 72.57 2.14-177.2-214.9-119.27z m-403.33 96.17v188.1l265.22-69.16c8.43-2.17 17.32 1.16 22.2 8.3l71.85 104.79 3.29-335.04-362.56 103.01z m-80.73 251.07l69.88 118.3 109.01-26.04 246.64-59.23-83.86-122.2-341.67 89.17z m351.2 233.02l300.9-61.83-32.88-18.88-150.12-87.54-279.52 66.88-62.48 14.97 224.1 86.4zM954.2 414.93L841.9 545.11c-2.82 5.52-8.02 9.47-14.14 10.74l-359.1 72.9c-3.9 0.8-7.96 0.46-11.67-0.98L167.27 515.33c-1.65-0.72-3.2-1.65-4.6-2.77h-0.99c-1.47-1.59-2.9-3.21-4.28-4.88L66.15 353.1a20.151 20.151 0 0 1-1.26-18.04c2.45-5.88 7.54-10.28 13.75-11.9l75.8-19.69v-214.14c0-9.04 6.03-17 14.8-19.53l404.48-115.04a20.728 20.728 0 0 1 16.44 1.79l254.86 141.57c6.54 3.62 10.58 10.48 10.52 17.9l-2.63 212.68 96.35 56.3c5.23 3.07 8.81 8.27 9.8 14.2 0.98 5.93-0.74 11.99-4.7 16.55l-0.16-0.82zM232.87 752.57l77.94-107.07 36.17 24.9-77.77 107.07-36.34-24.9z m434.08 50.45l-66.92-114.23 37.82-20.01L704.77 783l-37.82 20.02z m-209.97 17.9h45.38v-131.97h-45.38V820.92zM222.3 502.98l379.87-101.16 24.77 14.36s-57.6 61.93-172.81 185.79L222.3 502.98z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 94 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.

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

File diff suppressed because one or more lines are too long

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

@@ -1,5 +1,5 @@
<template>
<!--<div class="mc" @click.self="clickOutside">-->
<div class="mc" @click.self="clickOutside">
<div class="right-box right-box-edit-endpoint">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
@@ -24,7 +24,24 @@
<el-form-item label="width" prop="width" class="line-name">
<el-input v-model="form.width"></el-input>
</el-form-item>
<el-form-item label="箭头方向" prop="arrows" @change="iconChange" class="arrows">
<el-form-item label="roundness" class="line-name">
<el-input v-model="form.roundness"></el-input>
</el-form-item>
<el-form-item label="type" class="line-name">
<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">
<!--'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'-->
<el-option label="dynamic" value="dynamic"></el-option>
<el-option label="continuous" value="continuous"></el-option>
<el-option label="discrete" value="discrete"></el-option>
<el-option label="diagonalCross" value="diagonalCross"></el-option>
<el-option label="straightCross" value="straightCross"></el-option>
<el-option label="horizontal" value="horizontal"></el-option>
<el-option label="vertical" value="vertical"></el-option>
<el-option label="curvedCW" value="curvedCW"></el-option>
<el-option label="cubicBezier" value="cubicBezier"></el-option>
</el-select>
</el-form-item>
<el-form-item label="箭头方向" prop="arrows" class="arrows">
<el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false">
<div slot="prefix">
<img v-if="form.arrows=='from'" src="./leftArrow.png" />
@@ -67,7 +84,7 @@
</button>
</div>
</div>
<!--</div>-->
</div>
</template>
<script>
@@ -97,7 +114,9 @@
color:'#1e90ff',
lineName:'',
lineId:'',
width:''
width:'',
type:'',
roundness:'',
},
predefineColors: [
'#ff4500',
@@ -123,8 +142,12 @@
this.$refs['form'].validate((valid) => {
if (valid) {
let model=Object.assign({id:Math.random()*100},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
model.width = parseInt(model.width) || 4;
model.smooth={
roundness:model.roundness,
type:model.type ,
};
this.$emit('addLine',model);
}
});
@@ -143,36 +166,19 @@
colorPickerClick(){
this.$refs['colorPicker'].showPicker=true;
},
iconChange (val) {
// el-select实际上是两层div包裹的input
this.addModel.icon = val;
// 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el;
// 创建需要添加到其中的标签 并填充内容
const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
svgDom.setAttribute('class', 'el-input__prefix');
svgDom.innerHTML = '<span class="el-input__prefix-inner"><i class="el-input__icon el-icon-search is-reverse"><img src="a.png" /></i></span>';
// 将创建的标签添加到父节点(第二层div)
dom.children[0].appendChild(svgDom);
// 得到el-select中的input标签
const inputDom = dom.children[0].children[0];
inputDom.setAttribute('style', 'padding-left: 30px;');
// 将添加的标签放到input前面
dom.children[0].insertBefore(svgDom, inputDom);
},
},
}
</script>
<style scoped>
/*.mc{*/
/*position: fixed;*/
/*width: 100vw;*/
/*height: 100vh;*/
/*top: 0;*/
/*left: 0;*/
/*}*/
.mc{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.color-content{
height: 0;
width: 0;

77
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -196,12 +196,12 @@
image:'',
},
popData:[
{top:'-20px', left:'-17px',className:'nz-icon-edit',id:'edit'},
{top:'-20px', left:'28px',className:'nz-icon-chart',id:'2'},
{top:'-20px', left:'-17px',className:'nz-icon-endpoint',id:'1'},
{top:'-20px', left:'28px',className:'nz-icon-shujuku',id:'2'},
{top:'18px', left:'52px',className:'nz-icon-chart',id:'3'},
{top:'56px', left:'28px',className:'',id:'4'},
{top:'56px', left:'-17px',className:'nz-icon-chart',id:'5'},
{top:'18px', left:'-38px',className:'nz-icon-chart',id:'6'},
{top:'56px', left:'-17px',className:'nz-icon-info-normal',id:'5'},
{top:'18px', left:'-38px',className:'nz-icon-gaojing',id:'6'},
],
modelTop:[],
//viewsCenter
@@ -330,13 +330,14 @@
model={...nodesArray.find(item=>item.id===model.id),...model};
nodesArray=nodesArray.filter(item=>item.id!==model.id);
}else{
model={...model,...this.network.DOMtoCanvas({x:40,y:40})};
model={...model,...this.network.DOMtoCanvas({x:80,y:100})};
}
nodesArray.push(model);
this.$emit("setTopologyData",nodesArray,this.edgesArray);
this.setNetworkData(nodesArray,this.edgesArray);
this.$nextTick(()=>{
this.arrayDiff();
this.$emit('editVisNetworkChange',true);
})
},
addModelShow(){ // 显示添加节点弹窗
@@ -388,12 +389,12 @@
selItem.y=position[selId].y;
this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
},
setPopPosition(selId,params){//设置节点工具栏位置
setPopPosition(selId){//设置节点工具栏位置以及是否显示
if(!selId){return}
let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
this.networkPop.style.top = position.y - 85 + 7*(10-this.zoom*10)+'px';
this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom*1) +'px';
if(!this.isFullScreen&&this.NodeArr.length==0){
if(!this.isFullScreen&&this.NodeArr.length==0&&!this.editVisNetwork){
this.networkPopShow=true;
}
this.NodeArr=[...this.NodeArr]
@@ -464,25 +465,25 @@
this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMove);
},
modelTopMouseMove(e){
// let position={
// x:e.clientX-this.relativeModelTop.x,
// y:e.clientY-this.relativeModelTop.y
// };
// this.$refs['modelTopId'+this.index][0].style.top=position.y+'px';
// this.$refs['modelTopId'+this.index][0].style.left=position.x+'px';
// // {top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px'
// let cancvs=this.network.DOMtoCanvas({
// x:position.x+26,
// y:position.y+80-(50*(1-this.zoom)),
// });
// this.network.moveNode(this.selNodeId,cancvs.x,cancvs.y);
// let selItem = this.nodesArray.find((item)=>item.id===this.selNodeId);
// selItem.x=cancvs.x;
// selItem.y=cancvs.y;
// this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
// if(this.networkPopShow){
// this.setPopPosition(this.selNodeId);
// }
let position={
x:e.clientX-this.relativeModelTop.x,
y:e.clientY-this.relativeModelTop.y
};
this.$refs['modelTopId'+this.index][0].style.top=position.y+'px';
this.$refs['modelTopId'+this.index][0].style.left=position.x+'px';
// {top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px'
let cancvs=this.network.DOMtoCanvas({
x:position.x+26,
y:position.y+80-(50*(1-this.zoom)),
});
this.network.moveNode(this.selNodeId,cancvs.x,cancvs.y);
let selItem = this.nodesArray.find((item)=>item.id===this.selNodeId);
selItem.x=cancvs.x;
selItem.y=cancvs.y;
this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
if(this.networkPopShow){
this.setPopPosition(this.selNodeId);
}
},
modelTopClick(item,index){
this.index=index;
@@ -531,12 +532,11 @@
});
this.network.on("dragStart", function (params) {//节点移动开始
// this_.networkPopShow=false;
this_.NodeArrShow=false;
// let selId=params.nodes[0];
// if(selId){
// this_.modelTop.find(item=>item.id===selId).show=false;
// }
let selId=params.nodes[0];
if(selId){
this_.selNodeId=selId
}
// if(!selId){
// this_.modelTop.forEach(item=>{
// item.show=false;
@@ -547,11 +547,10 @@
this.network.on("dragging", function (params,event) {//节点移动中
this_.viewsCenter=this_.network.getViewPosition();
let selId=params.nodes[0];
if(selId){
this_.setNodePosition(selId)
}
if(this_.selNodeId){
this_.selNodeId=selId;
this_.setNodePosition(this_.selNodeId)
}
if(this_.selNodeId&&this_.networkPopShow){
this_.setPopPosition(this_.selNodeId);
}
if(this_.NodeArr.length>0){
@@ -563,12 +562,10 @@
this.network.on("dragEnd", function (params) {//节点移动结束
this_.viewsCenter=this_.network.getViewPosition();
let selId=params.nodes[0];
if(selId){
this_.setNodePosition(selId)
}
if(this_.selNodeId){
this_.selNodeId=selId;
this_.setNodePosition(this_.selNodeId)
}
if(this_.selNodeId&&this_.networkPopShow){
this_.setPopPosition(this_.selNodeId);
}
if(this_.NodeArr.length>0){

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

@@ -40,6 +40,7 @@
ref="topology"
:allModuleInfo="allModuleInfo"
v-loading="topologyLoading"
@editVisNetworkChange="editVisNetworkChange"
>
</topology>
@@ -110,6 +111,9 @@
this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
},1000)
},500)
},
editVisNetworkChange(flag){
this.editVisNetwork=flag;
}
},