添加空数据状态

This commit is contained in:
zhangyu
2020-08-20 11:31:51 +08:00
parent 5bca796040
commit c3bd777b38
9 changed files with 156 additions and 102 deletions

View File

@@ -20,6 +20,12 @@ Created by iconfont
/>
<missing-glyph />
<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" />
<glyph glyph-name="add-node" unicode="&#58885;" d="M846.74133333 717.84C757.25973333 806.8864 638.3296 855.9296 511.79306667 855.9296S266.28266667 806.8864 176.7936 717.84106667 37.97333333 510.2784 37.97333333 384.2496s49.30666667-244.52266667 138.8192-333.6 208.42026667-138.08853333 334.96853334-138.08853333 245.49866667 48.98986667 334.9472 138.08746666 138.8192 207.60533333 138.8192 333.63306667-49.23306667 244.48106667-138.78826667 333.5584z m-98.04373333-367.4368H545.63946667v-203.0688c0-18.69226667-15.15306667-33.8464-33.84533334-33.8464s-33.8464 15.15413333-33.8464 33.84533333V350.40426666999997H274.87786667c-18.69226667 0-33.84533333 15.15306667-33.84533334 33.84533333s15.15306667 33.8464 33.84533334 33.8464h203.0688V621.1551999999999c0 18.69226667 15.15306667 33.84533333 33.84533333 33.84533333 18.6944 0 33.8464-15.15306667 33.8464-33.84533333v-203.0688h203.05813333c18.69226667 0 33.84533333-15.15413333 33.84533334-33.84533333s-15.15306667-33.84746667-33.84533334-33.84746667v0.0096z" horiz-adv-x="1028" />
<glyph glyph-name="shuidi" unicode="&#58882;" d="M228.52096 377.5488c0.6912-2.6112 1.98144-5.02272 3.76832-7.05024l239.36-399.1552-0.03072 0 39.8848-66.50368 39.88992001 66.48832-0.05632001 0 240.90111999 401.7152c0.58368001 0.98304 1.07008 2.02752001 1.44896001 3.10272 27.52512 48.6912 42.08640001 103.70048 42.0864 159.31904 0 178.80576-145.4592 324.26496-324.28544 324.26496-178.7904 0-324.26496-145.4592-324.26496-324.26496-0.00512-55.0912 14.26432001-109.56288 41.29792-157.91616z" horiz-adv-x="1024" />

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 92 KiB

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@@ -1,25 +1,30 @@
<template>
<div class="content">
<div class="editTopology">
<span v-show="!selectNodeTitle" class="editTopologyModule">
<div class="edit-topology" >
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
Module element :
<span class="editTopologyAdd" @click="addModelShow">Add</span>
<span class="editTopologyRemove" @click="nodeDel">Remove</span>
<span class="edit-topology-add" @click="addModelShow">Add</span>
<span class="edit-topology-remove" @click="nodeDel">Remove</span>
</span>
<span v-show="!selectNodeTitle" class="editTopologyLine">
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
Line :
<span class="editTopologyAdd" @click="addLineTitleShow">Add</span>
<span class="editTopologyRemove" @click="lineDel">Remove</span>
<span class="edit-topology-add" @click="addLineTitleShow">Add</span>
<span class="edit-topology-remove" @click="lineDel">Remove</span>
</span>
<span class="editTopologyLineCancel" v-show="selectNodeTitle">Please select two nodes <span class="editTopologyCancel" @click="closeAddLine">Cancel</span></span>
<span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork">Please select two nodes <span class="edit-topologyCancel" @click="closeAddLine">Cancel</span></span>
</div>
<div class="network" ref="network" v-clickoutside="networkPopClose" @mousedown="(e)=>{modelTopMouseDown(e)}" @mouseup="(e)=>modelTopMouseUp(e)">
<!--拓扑图-->
<!--拓扑图-->
<div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
<!--空拓扑图-->
<div class="network-null" v-if="nodesArray.length===0">
<i class="nz-icon nz-icon-add-node" @click="addModelShow"></i>
<img src="./emptyData.png" width="303px" height="184px"/>
</div>
<!--拓扑图工具-->
<div
id="networkPop"
class="networkPop"
id="network-pop"
class="network-pop"
:style="{transform:'scale('+zoom+')'}"
v-show="networkPopShow"
>
@@ -30,17 +35,17 @@
<!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
</div>
<!--拓扑图选中-->
<div class="selNode" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
<div class="selNodeTop"></div>
<div class="selNodeRight"></div>
<div class="selNodeBottom"></div>
<div class="selNodeLeft"></div>
<div class="sel-node" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
<div class="sel-node-top"></div>
<div class="sel-node-right"></div>
<div class="sel-node-bottom"></div>
<div class="sel-node-left"></div>
</div>
<div class="selNode" id="nodeArr2" v-show="NodeArr[1]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
<div class="selNodeTop"></div>
<div class="selNodeRight"></div>
<div class="selNodeBottom"></div>
<div class="selNodeLeft"></div>
<div class="sel-node" id="nodeArr2" v-show="NodeArr[1]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
<div class="sel-node-top"></div>
<div class="sel-node-right"></div>
<div class="sel-node-bottom"></div>
<div class="sel-node-left"></div>
</div>
<!--图谱图右侧-->
<!--<div class="networkContent">33333</div>-->
@@ -56,6 +61,8 @@
<!--@mouseup="modelTopMouseUp(item,index)"-->
<i class="nz-icon nz-icon-model"></i>
</i>
<!--悬浮network部分-->
</div>
<transition name="right-box">
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd"></add-model>
@@ -86,6 +93,9 @@
isFullScreen:{
type:Boolean,
},
editVisNetwork:{
type:Boolean,
}
},
watch:{
NodeArr(n){
@@ -102,6 +112,13 @@
this.isLineAdd=true;
}
this.selNodeArrUpdate()
},
editVisNetwork(n){
if(!n){
this.NodeArr=[];
this.selNodeId='';
this.selectNodeTitle=false;
}
}
},
data(){
@@ -166,7 +183,7 @@
this_.nodes = new Vis.DataSet(this_.nodesArray);
this_.edges = new Vis.DataSet(this_.edgesArray);
this_.container = this.$refs.visNetwork;
this_.networkPop = document.getElementById('networkPop');
this_.networkPop = document.getElementById('network-pop');
this_.data = {
nodes: this_.nodes,
edges: this_.edges
@@ -339,11 +356,12 @@
},
networkPopClose(){//关闭节点工具栏
this.networkPopShow=false;
this.selNodeId=''
// this.selNodeId=''
this.network.unselectAll();
},
//工具栏
nodeDel(){
console.log(this.selNodeId);
let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
let edgesArray=this.edgesArray.filter((item)=>item.from!==this.selNodeId || this.to!==this.selNodeId);
this.$emit('setTopologyData',nodesArray, edgesArray);
@@ -389,6 +407,7 @@
})
},
modelTopMouseDown(e){
if(!this.index){return};
this.relativeModelTop={
x:e.clientX-(parseFloat(this.$refs['modelTopId'+this.index][0].style.left)),
y:e.clientY-(parseFloat(this.$refs['modelTopId'+this.index][0].style.top)),
@@ -544,7 +563,7 @@
.content{
height: 100%;
}
.editTopology{
.edit-topology{
width: 100%;
height: 28px;
}
@@ -554,7 +573,7 @@
position: relative;
overflow: hidden;
}
.networkPop{
.network-pop{
position: absolute;
z-index: 10;
/*border: 1px solid #e6e6e6;*/
@@ -564,12 +583,12 @@
padding: 0 3px;
line-height: 32px;
}
.networkPop .nz-icon-hexagonBorder{
.network-pop .nz-icon-hexagonBorder{
position: absolute;
font-size: 48px;
color: #84d5c2;
}
.networkPop .nz-icon-liubianxing{
.network-pop .nz-icon-liubianxing{
color:#e2f3ef;
font-size: 44px;
position: absolute;
@@ -583,15 +602,15 @@
font-size: 20px;
color: #27c09c;
}
.networkPop .nz-icon-hexagonBorder:hover{
.network-pop .nz-icon-hexagonBorder:hover{
transform: scale(1.2);
}
.networkPop .nz-icon-hexagonBorder:hover .nz-icon-liubianxing{
.network-pop .nz-icon-hexagonBorder:hover .nz-icon-liubianxing{
transform: scale(1.1);
left: 4px;
font-size: 41px;
}
.networkPop .nz-icon-hexagonBorder:hover .noMove{
.network-pop .nz-icon-hexagonBorder:hover .noMove{
transform: scale(1.1);
}
.btmTriangle{
@@ -617,10 +636,27 @@
bottom: -7px;
left: -9px;
}
#network_id{
width: 90%;
#network_id,.network-null{
width: 100%;
height: 100%;
}
.network-null{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
}
.network-null .nz-icon-add-node{
color: #23BF9A;
font-size: 50px;
margin-bottom: 24px;
cursor: pointer;
}
.network-null .nz-icon-emptypage{
color: #23BF9A;
font-size: 24px;
}
.cursorMove{
cursor: move;
}
@@ -639,28 +675,29 @@
font-size: 14px;
cursor: pointer;
}
.editTopology{
.edit-topology{
color: #1a1a1a;
font-size: 18px;
font-weight: bold;
height: 28px;
}
.editTopologyModule,.editTopologyLineCancel{
.edit-topology-module,.edit-topology-line-cancel{
margin-left: 30px;
}
.editTopologyLine{
.edit-topologyLine{
margin-left: 130px;
}
.editTopologyAdd,.editTopologyRemove,.editTopologyCancel{
.edit-topology-add,.edit-topology-remove,.edit-topologyCancel{
color: #1989fa;
margin-left: 30px;
cursor: pointer;
}
.selNode{
.sel-node{
position: absolute;
width: 0;
height: 0;
}
.selNodeTop {
.sel-node-top {
width: 120px;
height: 0;
border-top: 4px dashed yellow;
@@ -668,7 +705,7 @@
left: -60px;
top: -60px;
}
.selNodeRight {
.sel-node-right {
width: 0px;
height: 120px;
border-right: 4px dashed yellow;
@@ -676,7 +713,7 @@
left: 60px;
top: -60px;
}
.selNodeBottom {
.sel-node-bottom {
width: 120px;
height: 0;
border-bottom: 4px dashed yellow;
@@ -684,7 +721,7 @@
left: -60px;
top: 60px;
}
.selNodeLeft {
.sel-node-left {
width: 0px;
height: 120px;
border-left: 4px dashed yellow;

View File

@@ -24,14 +24,14 @@
<!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon&#45;&#45;right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
</span>
<span>
<i class="nz-icon nz-icon-edit float-right"></i>
<i class="nz-icon nz-icon-zoomin float-right"></i>
<i class="nz-icon nz-icon-exit-full-screen float-right"></i>
<i class="nz-icon nz-icon-edit float-right" @click="editVisNetwork=!editVisNetwork"></i>
<!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
<!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
</span>
</span>
</div>
<div class="vis-network-content">
<topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
<topology :editVisNetwork="editVisNetwork" :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
</div>
</div>
@@ -72,31 +72,34 @@
return {
//其他
isError:false,
nodesArray:[
{ id: 1, label: "model",
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
shape:'image',shapeProperties:{useImageSize:false},
x:1,y:-63,
imgId:0,
scaling:{min:0.5,max:10,}
},
{id: 2, imgId:1, scaling:{min:0.5,max:10,}, label: "model", x:-236,y:-163, image: a, shape:'image',shapeProperties:{useImageSize:false}},
{id: 3, imgId:2, scaling:{min:0.5,max:10,}, label: "model", x:-346,y:-155, image: b, shape:'image',shapeProperties:{useImageSize:false}},
{id: 4, imgId:3, scaling:{min:0.5,max:10,}, label: "model", x:-129,y:169, image: c, shape:'image',shapeProperties:{useImageSize:false}},
{id: 5, imgId:4, scaling:{min:0.5,max:10,}, label: "model", x:-388,y:35, image: d, shape:'image',shapeProperties:{useImageSize:false}},
{id: 6, imgId:5, scaling:{min:0.5,max:10,}, label: "model", x:-345,y:-53, image: e, shape:'image',shapeProperties:{useImageSize:false}},
{id: 7, imgId:6, scaling:{min:0.5,max:10,}, label: "model", x:316,y:22, image: f, shape:'image',shapeProperties:{useImageSize:false}},
],
edgesArray:[
{id: 0,from: 2, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
{id: 1,from: 3, to: 1, dashes:[15,15],label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 2,from: 5, to: 4, dashes:[15,15],label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 3,from: 4, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 4,from: 4, to: 6, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 5,from: 1, to: 7, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
],
// nodesArray:[
// { id: 1, label: "model",
// image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
// shape:'image',shapeProperties:{useImageSize:false},
// x:1,y:-63,
// imgId:0,
// scaling:{min:0.5,max:10,}
// },
// {id: 2, imgId:1, scaling:{min:0.5,max:10,}, label: "model", x:-236,y:-163, image: a, shape:'image',shapeProperties:{useImageSize:false}},
// {id: 3, imgId:2, scaling:{min:0.5,max:10,}, label: "model", x:-346,y:-155, image: b, shape:'image',shapeProperties:{useImageSize:false}},
// {id: 4, imgId:3, scaling:{min:0.5,max:10,}, label: "model", x:-129,y:169, image: c, shape:'image',shapeProperties:{useImageSize:false}},
// {id: 5, imgId:4, scaling:{min:0.5,max:10,}, label: "model", x:-388,y:35, image: d, shape:'image',shapeProperties:{useImageSize:false}},
// {id: 6, imgId:5, scaling:{min:0.5,max:10,}, label: "model", x:-345,y:-53, image: e, shape:'image',shapeProperties:{useImageSize:false}},
// {id: 7, imgId:6, scaling:{min:0.5,max:10,}, label: "model", x:316,y:22, image: f, shape:'image',shapeProperties:{useImageSize:false}},
// ],
// edgesArray:[
// {id: 0,from: 2, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
// {id: 1,from: 3, to: 1, dashes:[15,15],label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
// {id: 2,from: 5, to: 4, dashes:[15,15],label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
// {id: 3,from: 4, to: 1, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
// {id: 4,from: 4, to: 6, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
// {id: 5,from: 1, to: 7, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
// ],
nodesArray:[],
edgesArray:[],
dragTitleShow:false,
dropdownMenuShow:false,
editVisNetwork:false,
}
},