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

抽离组件

Browse Source
This commit is contained in:
zhangyu
2020-08-14 09:30:45 +08:00
parent 2b0022a447
commit e7b87921de
4 changed files with 683 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
nezha-fronted/src/components/charts/addLine.vue
View File

@@ -1,5 +1,21 @@
<template>
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
<div class="right-box right-box-edit-endpoint">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{$t("project.endpoint.editEndpoint") + " ID：" + lineData.id}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form ref="form" :model="form" label-width="120px" :rules="rules">
<el-form-item label="Id">
<el-input v-model="form.lineId"></el-input>
</el-form-item>
@@ -24,12 +40,41 @@
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
export default {
name:"addLine",
props:{
lineData:{},
},
watch:{
lineData:{
handler(n){
this.form={
arrows:n.arrows,
label:n.label,
color:n.color,
lineId:n.id,
}
},
immediate: true,
deep: true,
}
},
data(){
return{
@@ -47,7 +92,6 @@
'#00ced1',
'#1e90ff',
'#c71585',
'#c71585'
],
rules:{
arrows: [
@@ -58,15 +102,205 @@
},
methods:{
onSubmit(){
// {id: 0,from: 2, to: 1,label:"hahah",arrows:'from;to', color: {color:'red',highlight:'red',hover:'red',opacity:1.0},},
let model=Object.assign({id:this.form.lineId},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
this.$emit('addLine',model)
},
/*关闭弹框*/
esc(refresh) {
this.$emit("close", refresh);
},
clickOutside() {
this.esc(false);
},
del(){
this.$emit('del');
this.esc();
}
},
}
</script>
<style scoped>
.nz-btn-edit-ok{
position: absolute;
bottom: 0;
right:0;
}
.nz-btn-edit-esc{
position: absolute;
bottom: 0;
left:0;
}
/* begin--搜索框*/
.endpoint-asset-search {
display: inline-block;
position: relative;
margin-top: -16px;
}
.endpoint-asset-search button {
height: 22px !important;
}
.endpoint-asset-search-dropdown {
position: absolute;
top: 25px;
background-color: #444;
border-radius: 4px;
width: 44px;
left: 0;
}
.endpoint-asset-search-dropdown-item {
text-align: center;
line-height: 22px;
height: 22px;
cursor: default;
color: white;
font-size: 12px;
}
.endpoint-asset-label-txt {
display: inline-block;
width: 19px;
text-align: center;
}
.endpoint-asset-search-dropdown-item:first-of-type {
border-radius: 4px 4px 0 0;
}
.endpoint-asset-search-dropdown-item:last-of-type {
border-radius: 0 0 4px 4px;
}
.endpoint-asset-search-dropdown-item:hover {
background-color: #222;
color: #ff9900;
}
.endpoint-asset-search-input {
display: inline-block;
width: 150px;
vertical-align: top;
}
/* end--搜索框*/
/* begin--table*/
.endpoint-sub-table {
padding-top: 30px;
height: 440px;
}
.line-100 {
margin-bottom: 3px;
}
.endpoint-sub-table-head {
line-height: 28px;
height: 30px;
}
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
line-height: 28px;
height: 30px;
color: #656565;
}
.endpoint-sub-table-row:hover {
background-color: #dadada;
cursor: default;
}
.endpoint-sub-table-row-active {
background-color: #dadada;
}
.endpoint-sub-table-row-selected {
background-color: #656565;
color: white;
}
.endpoint-sub-table-col {
display: inline-block;
width: calc(50% - 15px);
padding-left: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.endpoint-sub-table-paginate-all {
position: absolute;
left: 10px;
bottom: 17px;
color: #5a5a5a;
}
.endpoint-sub-table-body {
font-size: 15px;
position: relative;
overflow: auto;
height: calc(100% - 34px);
}
.endpoint-sub-table-body-dialog {
width: 100%;
height: 100%;
background-color: #e9ebec;
position: absolute;
opacity: 0.2;
}
.endpoints-clear-btn {
margin: 6px 0 0 7px;
}
/* end--table*/
</style>
<style lang="scss">
.right-box-edit-endpoint .el-pagination__total {
float: left;
}
right-box-edit-endpoint .pagination {
padding-top: 12px;
text-align: center;
}
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
font-size: 13px;
min-width: 20px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
border: 1px solid rgba(154,154,154,0.20);
border-radius: 2px;
border-radius: 2px;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
color: white !important;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #666;
}
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
line-height: 20px;
}
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
line-height: 20px;
}
.right-box-edit-endpoint .el-pager li.number{
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pager li.number.active{
font-family: NotoSansSC-Regular;
color: #FFFFFF;
letter-spacing: 0;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $global-text-color-active;
border-radius: 2px;
border-radius: 2px;
}
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
height: 20px;
border-color: rgba(154,154,154,0.20);
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
border-color: rgba(154,154,154,0.20);
}
</style>

243
nezha-fronted/src/components/charts/addNode.vue
View File

@@ -1,25 +1,48 @@
<template>
<el-form ref="form" :model="form" label-width="80px">
<div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{$t("project.endpoint.editEndpoint") + " ID：" + nodeData.id}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Id">
<el-input v-model="form.modelId"></el-input>
</el-form-item>
<el-form-item label="Label">
<el-input v-model="form.label"></el-input>
</el-form-item>
<el-form-item label="x">
<el-input v-model="form.x"></el-input>
</el-form-item>
<el-form-item label="y">
<el-input v-model="form.y"></el-input>
</el-form-item>
<el-form-item label="image">
<el-input v-model="form.image"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
@@ -29,11 +52,15 @@
nodeData:{}
},
watch:{
nodeData(n){
nodeData:{
handler(n){
for(let key in this.form){
this.form[key]=n[key]
}
this.form.modelId=n.id;
},
immediate: true,
deep: true,
}
},
data(){
@@ -41,8 +68,6 @@
form:{
modelId:'',
label:'',
x:'',
y:'',
image:'',
}
}
@@ -52,11 +77,201 @@
let model=Object.assign({id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},{...this.form});
this.$emit('addModel',model)
},
/*关闭弹框*/
esc(refresh) {
this.$emit("close", refresh);
},
clickOutside() {
this.esc(false);
},
del(){
this.$emit('del');
this.esc();
}
},
}
</script>
<style scoped>
.nz-btn-edit-ok{
position: absolute;
bottom: 0;
right:0;
}
.nz-btn-edit-esc{
position: absolute;
bottom: 0;
left:0;
}
/* begin--搜索框*/
.endpoint-asset-search {
display: inline-block;
position: relative;
margin-top: -16px;
}
.endpoint-asset-search button {
height: 22px !important;
}
.endpoint-asset-search-dropdown {
position: absolute;
top: 25px;
background-color: #444;
border-radius: 4px;
width: 44px;
left: 0;
}
.endpoint-asset-search-dropdown-item {
text-align: center;
line-height: 22px;
height: 22px;
cursor: default;
color: white;
font-size: 12px;
}
.endpoint-asset-label-txt {
display: inline-block;
width: 19px;
text-align: center;
}
.endpoint-asset-search-dropdown-item:first-of-type {
border-radius: 4px 4px 0 0;
}
.endpoint-asset-search-dropdown-item:last-of-type {
border-radius: 0 0 4px 4px;
}
.endpoint-asset-search-dropdown-item:hover {
background-color: #222;
color: #ff9900;
}
.endpoint-asset-search-input {
display: inline-block;
width: 150px;
vertical-align: top;
}
/* end--搜索框*/
/* begin--table*/
.endpoint-sub-table {
padding-top: 30px;
height: 440px;
}
.line-100 {
margin-bottom: 3px;
}
.endpoint-sub-table-head {
line-height: 28px;
height: 30px;
}
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
line-height: 28px;
height: 30px;
color: #656565;
}
.endpoint-sub-table-row:hover {
background-color: #dadada;
cursor: default;
}
.endpoint-sub-table-row-active {
background-color: #dadada;
}
.endpoint-sub-table-row-selected {
background-color: #656565;
color: white;
}
.endpoint-sub-table-col {
display: inline-block;
width: calc(50% - 15px);
padding-left: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.endpoint-sub-table-paginate-all {
position: absolute;
left: 10px;
bottom: 17px;
color: #5a5a5a;
}
.endpoint-sub-table-body {
font-size: 15px;
position: relative;
overflow: auto;
height: calc(100% - 34px);
}
.endpoint-sub-table-body-dialog {
width: 100%;
height: 100%;
background-color: #e9ebec;
position: absolute;
opacity: 0.2;
}
.endpoints-clear-btn {
margin: 6px 0 0 7px;
}
/* end--table*/
</style>
<style lang="scss">
.right-box-edit-endpoint .el-pagination__total {
float: left;
}
right-box-edit-endpoint .pagination {
padding-top: 12px;
text-align: center;
}
.endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
font-size: 13px;
min-width: 20px !important;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
border: 1px solid rgba(154,154,154,0.20);
border-radius: 2px;
border-radius: 2px;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
color: white !important;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #666;
}
.right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
line-height: 20px;
}
.right-box-edit-endpoint .el-pagination .el-pager .more::before {
line-height: 20px;
}
.right-box-edit-endpoint .el-pager li.number{
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pager li.number.active{
font-family: NotoSansSC-Regular;
color: #FFFFFF;
letter-spacing: 0;
}
.endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $global-text-color-active;
border-radius: 2px;
border-radius: 2px;
}
.right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
font-family: NotoSansSC-Regular;
color: #666666;
letter-spacing: 0;
font-weight:normal;
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
height: 20px;
border-color: rgba(154,154,154,0.20);
}
.right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
border-color: rgba(154,154,154,0.20);
}
</style>

160
nezha-fronted/src/components/charts/topology.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="content">
<div class="network" v-clickoutside="networkPopClose">
<!--图拓扑图-->
<div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
@@ -15,20 +15,18 @@
<div class="btmTriangle"></div>
</div>
<!--图谱图右侧-->
<div class="networkContent">33333</div>
<!--<div class="networkContent">33333</div>-->
</div>
<button @click="addModelShow" v-show="!selectNodeTitle">add model</button>
<button @click="addLineTitleShow" v-show="!selectNodeTitle">add line</button>
<button @click="lineDel" v-show="!selectNodeTitle">remove line</button>
<span v-show="selectNodeTitle">请选择两个节点 <button @click="closeAddLine">取消</button></span>
<el-dialog
:visible.sync="addNodeShow">
<add-model @addModel="addModel" :nodeData="nodeData"></add-model>
</el-dialog>
<el-dialog
:visible.sync="addLineShow">
<add-line @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData"></add-line>
</el-dialog>
<transition name="right-box">
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel"></add-model>
</transition>
<transition name="right-box">
<add-line v-if="addLineShow" @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData" :isAdd="isLineAdd" @close="addLineShow=false" @del="lineDel"></add-line>
</transition>
</div>
</template>
@@ -50,12 +48,23 @@
edgesArray:{
type:Array
},
isFullScreen:{
type:Boolean,
},
},
watch:{
NodeArr(n){
if(n.length==2){
this.lineData={
arrows:'',
label:'',
color:'#1e90ff',
lineId:'',
id:'',
}
this.addLineShow=true;
this.selectNodeTitle=false;
this.isLineAdd=true;
}
}
},
@@ -71,8 +80,21 @@
cursorMove:false,
NodeArr:[],
selNodeId:'',
lineData:{},
nodeData:{},
lineData:{
arrows:'',
label:'',
color:'#1e90ff',
lineId:'',
id:'',
},
isLineAdd:true,
nodeData:{
modelId:'',
label:'',
x:'',
y:'',
image:'',
},
//viewsCenter
viewsCenter:{
x:0,y:0
@@ -92,7 +114,7 @@
let this_ = this;
this_.nodes = new Vis.DataSet(this_.nodesArray);
this_.edges = new Vis.DataSet(this_.edgesArray);
this_.container = document.getElementById('network_id');
this_.container = this.$refs.visNetwork;
this_.networkPop = document.getElementById('networkPop');
this_.data = {
nodes: this_.nodes,
@@ -127,8 +149,12 @@
edges: {
width: 2,
smooth:{ //设置两个节点之前的连线的状态
enabled: false //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
roundness:0.5,
type: "curvedCW",
},
selfReferenceSize:10,
},
layout:{
randomSeed: 666,
@@ -164,22 +190,26 @@
this_.network = new Vis.Network(this_.container, this_.data, this_.options);
this_.network.moveTo({
position: this_.viewsCenter,
scale: 1,
scale: this_.isFullScreen?1.5:1,
offset: {x:0, y:0},
})
});
if(this_.isFullScreen) {
console.log(this_.viewsCenter)
}
this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
},
resetAllNodes() {
let this_ = this;
this_.nodes.clear();
this_.edges.clear();
this_.nodes.add(this_.nodesArray);
this_.edges.add(this_.edgesArray);
this_.data = {
nodes: this_.nodes,
edges: this_.edges
};
this_.network = new Vis.Network(this_.container, this_.data, this_.options);
// let this_ = this;
// this_.nodes.clear();
// this_.edges.clear();
// this_.nodes.add(this_.nodesArray);
// this_.edges.add(this_.edgesArray);
// this_.data = {
// nodes: this_.nodes,
// edges: this_.edges
// };
// this_.network = new Vis.Network(this_.container, this_.data, this_.options);
this.setNetworkData(this.nodesArray,this.edgesArray);
},
resetAllNodesStabilize() {
let this_ = this;
@@ -196,32 +226,53 @@
});
this_.network.moveTo({
position: this_.viewsCenter,
scale: 1,
scale: this_.isFullScreen?1.5:1,
offset: {x:0, y:0},
})
});
console.log( this.nodes,this.edges);
if(this_.isFullScreen) {
console.log(this_.viewsCenter)
}
},
addModel(model){ // 添加model
this.addNodeShow=false;
if(!model){return}
model={...model,...this.network.DOMtoCanvas({x:model.x,y:model.y})};
model={...model,...this.network.DOMtoCanvas({x:40,y:40})};
if(!model.image){
model.image=png
}
let nodesArray=[...this.nodesArray];
nodesArray.push(model);
this.$emit("setTopologyData",nodesArray,this.edgesArray,this.setNetworkData);
this.$emit("setTopologyData",nodesArray,this.edgesArray);
this.setNetworkData(nodesArray,this.edgesArray);
},
addModelShow(){ // 显示添加节点弹窗
this.addNodeShow=true;
this.nodeData={
modelId:'',
label:'',
x:'',
y:'',
image:'',
}
},
addLine(edges){ // 添加line
addLine(edges){ // 添加或者編輯line
this.addLineShow=false;
console.log(edges);
if(!edges){return}
let edgesArray =[...this.edgesArray];
if(!this.isLineAdd){
console.log(edgesArray.find(item=>item.id ===edges.id));
edges={...edgesArray.find(item=>item.id===edges.id),...edges};
edgesArray=edgesArray.filter(item=>item.id!==edges.id);
}else{
edges.from=this.NodeArr[0];
edges.to=this.NodeArr[1];
let edgesArray =[...this.edgesArray].push(edges);
this.$emit("setTopologyData",this.nodesArray,edgesArray,this.setNetworkData);
}
edgesArray.push(edges);
console.log(edgesArray,edges);
this.$emit("setTopologyData",this.nodesArray,edgesArray);
this.setNetworkData(this.nodesArray,edgesArray);
this.NodeArr=[];
},
addLineTitleShow(){ // 显示添加线弹窗
@@ -238,6 +289,7 @@
this.nodeData = selItem;
selItem.x=position[selId].x;
selItem.y=position[selId].y;
console.log(this.nodesArray);
this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
},
setPopPosition(selId,params){//设置节点工具栏位置
@@ -248,21 +300,29 @@
},
networkPopClose(){//关闭节点工具栏
this.networkPopShow=false;
this.network.unselectAll();
},
//工具栏
nodeDel(){
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,this.setNetworkData);
this.$emit('setTopologyData',nodesArray, edgesArray);
this.setNetworkData(nodesArray, edgesArray);
this.networkPopClose();
},
nodeEdit(){
console.log('edit')
this.addNodeShow=true;
this.nodeData={
modelId:'',
label:'',
image:'',
}
},
lineDel(){
if(!this.lineData.id){return}
let edgesArray=this.edgesArray.filter((item)=>item.id!==this.lineData.id);
this.$emit('setTopologyData',this.nodesArray, edgesArray,this.setNetworkData);
this.$emit('setTopologyData',this.nodesArray, edgesArray);
this.setNetworkData(this.nodesArray,edgesArray);
},
},
mounted(){
@@ -284,9 +344,12 @@
}
});
this.network.on("selectEdge", function (params) {
this_.lineData.id=params.edges[0];
console.log(this_.lineData.id);
this.network.on("selectEdge", function (params) { // 选择边
this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
this_.lineData.color=this_.lineData.color.color;
this_.addLineShow=true;
this_.isLineAdd=false;
console.log(this_.lineData)
});
this.network.on("dragStart", function (params) {//节点移动开始
@@ -305,25 +368,27 @@
this_.viewsCenter=this_.network.getViewPosition();
let selId=params.nodes[0];
if(selId){
this_.setPopPosition(selId,params)
this_.setPopPosition(selId,params);
this_.setNodePosition(selId)
}
});
this.network.on("hoverNode", function (params) {//hoverNode
this_.cursorMove=true;
console.log(params);
});
this.network.on("blurNode", function (params) {//blurNode
this_.cursorMove=false;
// console.log(params);
});
});
this.network.on("blurNode", function (params) {//blurNode
this_.cursorMove=false;
});
})
}
}
</script>
<style scoped>
.content{
height: 100%;
}
.network{
display: flex;
height: calc(100% - 30px);
@@ -363,7 +428,8 @@
left: -9px;
}
#network_id{
width: 60%;
width: 90%;
height: 100%;
}
.cursorMove{
cursor: move;

48
nezha-fronted/src/components/charts/visNetwork.vue
View File

@@ -38,17 +38,17 @@
</el-dropdown>
</div>
<div class="mt-10 table-container">
<topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData"></topology>
<topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false" >
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="exitFull">
<div slot="title">
<!--<span class="nz-dialog-title">{{data.title}}</span>-->
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
</div>
</div>
33333
<topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="true" ref="topologyFull"></topology>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
@@ -151,22 +151,22 @@
{ 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:0,y:0,
x:1,y:-63,
},
{id: 2, label: "model", x:-254,y:-59, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 3, label: "model", x:114,y:-36, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 4, label: "model", x:-126,y:54, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 5, label: "model", x:125,y:67, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 6, label: "model", x:-211,y:0, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 7, label: "model", x:200,y:100, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 2, label: "model", x:-236,y:-163, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 3, label: "model", x:-346,y:-155, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 4, label: "model", x:-129,y:169, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 5, label: "model", x:-388,y:35, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 6, label: "model", x:-345,y:-53, image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 7, label: "model", x:316,y:22, image: png, shape:'image',shapeProperties:{useImageSize:false}},
],
edgesArray:[
{id: 0,from: 2, to: 1,label:"hahah",arrows:'from;to', color: {color:'red',highlight:'red',hover:'red',opacity:1.0},},
{id: 1,from: 3, to: 1,label:"hahah",arrows:'from'},
{id: 2,from: 5, to: 4,label:"hahah",arrows:'to'},
{id: 3,from: 4, to: 1,label:"hahah",arrows:'from;to'},
{id: 4,from: 4, to: 6,label:"hahah",arrows:'from;to'},
{id: 5,from: 1, to: 7,label:"hahah",arrows:'from;to'},
{id: 0,from: 2, to: 1,label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
{id: 1,from: 3, to: 1,label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 2,from: 5, to: 4,label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 3,from: 4, to: 1,label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 4,from: 4, to: 6,label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
{id: 5,from: 1, to: 7,label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
],
}
@@ -290,9 +290,11 @@
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
this.$nextTick(()=>{
this.init('screenModal');
if(this.$refs.topologyFull){
setTimeout(()=>{
this.$refs.topologyFull.resetAllNodes();
})
}
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
@@ -387,13 +389,15 @@
return num;
},
// 设置拓扑图数据
setTopologyData(nodesArr,edgesArr,callback){
setTopologyData(nodesArr,edgesArr){
this.nodesArray=nodesArr;
this.edgesArray=edgesArr;
if(callback){
callback(this.nodesArray,this.edgesArray);
}
},
//退出全屏
exitFull(){
this.screenModal = false;
this.$refs.topology.resetAllNodes()
}
},
mounted(){