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-19 10:16:46 +08:00
parent 31bd6475c4
commit f2436be3df
8 changed files with 153 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,18 +15,36 @@
<!-- 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 ref="form" :model="form" label-width="160px" :rules="rules">
<el-form-item label="Module Name" prop="modelId">
<el-select v-model="form.modelId" placeholder="" popper-class="asset-dropdown">
<el-option
v-for="item in nodesArray"
:key="item.id"
:label="item.label"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Label">
<el-input v-model="form.label"></el-input>
<el-form-item label="Label" prop="imgId">
<el-select v-model="form.imgId" placeholder="" popper-class="asset-dropdown">
<el-option
v-for="item in iconArray"
:key="item.id"
:label="item.label"
:value="item.id">
<span style="float: left">
<img :src="item.image" />
</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="image">
<el-input v-model="form.image"></el-input>
</el-form-item>
<!--<el-form-item label="image">-->
<!--<el-input v-model="form.image"></el-input>-->
<!--</el-form-item>-->
<!--<div class="right-box-sub-title">-->
<!--<span>{{$t('alert.config.expr')}}</span>-->
<!--<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>-->
@@ -88,6 +106,12 @@
<script>
// import promqlInput from "@compotents/page/dashboard/explore/promqlInput";
import a from './a.png'
import b from './b.png'
import c from './c.png'
import d from './d.png'
import e from './e.png'
import f from './f.png'
export default {
name:"addNode",
components:{
@@ -112,17 +136,60 @@
return{
form:{
modelId:'',
label:'',
image:'',
imgId:'',
},
promqlKeys:[],
expressions: [],
rules:{
modelId:[
{ required: true, message: '请选择module', trigger: 'blur' },
],
imgId:[
{ required: true, message: '请选择module', trigger: 'blur' },
],
},
nodesArray:[
{ id: 1, label: "model1",
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,
},
{id: 2, label: "model2", },
{id: 3, label: "model3",},
{id: 4, label: "model4", },
{id: 5, label: "model5",},
{id: 6, label: "model6",},
{id: 7, label: "model7",},
{id: 9, label: "model9", },
{id: 10, label: "model10", },
{id: 11, label: "model11",},
{id: 12, label: "model12",},
{id: 13, label: "model13",},
{id: 14, label: "model14",},
],
iconArray:[
{id:1,image:a,label:'model1',},
{id:2,image:b,label:'model2',},
{id:3,image:c,label:'model3',},
{id:4,image:d,label:'model4',},
{id:5,image:e,label:'model5',},
{id:6,image:f,label:'model6',},
// {id:7,img:'./a.png',label:'model',},
],
}
},
methods:{
onSubmit(){
let model=Object.assign({id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},{...this.form});
this.$emit('addModel',model)
this.$refs['form'].validate((valid) => {
if (valid) {
let module=this.nodesArray.find(item=>item.id===this.form.modelId);
let img=this.iconArray.find(item=>item.id===this.form.imgId);
let model=Object.assign({...this.form},{...module},{...img},{id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},);
this.$emit('addModel',model)
}
});
},
expressionChange: function () {

BIN
nezha-fronted/src/components/charts/b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 825 B

BIN
nezha-fronted/src/components/charts/c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
nezha-fronted/src/components/charts/d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 551 B

BIN
nezha-fronted/src/components/charts/e.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 817 B

BIN
nezha-fronted/src/components/charts/f.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 858 B

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

@@ -1,9 +1,6 @@
<template>
<div class="content">
<div class="editTopology">
<!--<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" class="editTopologyModule">
Module element :
<span class="editTopologyAdd" @click="addModelShow">Add</span>
@@ -23,7 +20,7 @@
<div
id="networkPop"
class="networkPop"
:style="{'top':networkPopTop,'left':networkPopLeft}"
:style="{transform:'scale('+zoom+')'}"
v-show="networkPopShow"
>
<i class="nz-icon nz-icon-hexagonBorder" v-for="item in popData" :style="{top:item.top,left:item.left}" @click="popClick(item.id)">
@@ -33,13 +30,13 @@
<!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
</div>
<!--拓扑图选中-->
<div class="selNode" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow">
<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>
<div class="selNode" id="nodeArr2" v-show="NodeArr[1]&&NodeArrShow">
<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>
@@ -48,7 +45,14 @@
<!--图谱图右侧-->
<!--<div class="networkContent">33333</div>-->
<!--model上的图标-->
<i class="nz-icon nz-icon-shuidi" v-show="item.show" v-for="(item,index) in modelTop" :style="{top:(item.y-80)+'px',left:(item.x-26)+'px'}">
<i class="nz-icon nz-icon-shuidi"
v-show="item.show"
v-for="(item,index) in modelTop"
:style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px',transform:'scale('+zoom+')'}"
:ref="'modelTopId'+index"
@mousedown="modelTopMouseDown(item,index)"
@mouseup="modelTopMouseUp(item,index)"
>
<i class="nz-icon nz-icon-model"></i>
</i>
</div>
@@ -97,17 +101,13 @@
this.selectNodeTitle=false;
this.isLineAdd=true;
}
this.NodeArr.forEach((id,index)=>{
let selNode = this.nodesArray.find(item=>item.id===id);
let position=this.network.canvasToDOM({x:selNode.x,y:selNode.y});
document.getElementById('nodeArr'+(index+1)).style.top=position.y+'px';
document.getElementById('nodeArr'+(index+1)).style.left=position.x+'px';
})
this.selNodeArrUpdate()
}
},
data(){
return {
fangdaX:1,
zoom:1,
domScale:1,
selectNodeTitle:false,
// 拓扑图工具
networkPopTop:0,
@@ -219,7 +219,7 @@
selectable: true, //是否可以点击选择
selectConnectedEdges: false, //选择节点后是否显示连接线
hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
zoomView: false, //是否能缩放画布
zoomView: true, //是否能缩放画布
navigationButtons:true,
},
@@ -238,6 +238,8 @@
}
this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
this_.modelTopUpdate();
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
console.log(this_.zoom);
},
resetAllNodes() {
this.setNetworkData(this.nodesArray,this.edgesArray);
@@ -257,7 +259,7 @@
});
this_.network.moveTo({
position: this_.viewsCenter,
scale: this_.isFullScreen?1.5:this.fangdaX,
scale: this_.isFullScreen?1.5:1,
offset: {x:0, y:0},
});
console.log( this.nodes,this.edges);
@@ -271,9 +273,6 @@
addModel(model){ // 添加model
this.addNodeShow=false;
if(!model){return}
if(!model.image){
model.image=png
}
let nodesArray=[...this.nodesArray];
if(!this.isNodeAdd){
model={...nodesArray.find(item=>item.id===model.id),...model};
@@ -339,9 +338,11 @@
this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
},
setPopPosition(selId,params){//设置节点工具栏位置
let position=this.network.canvasToDOM(this.network.getPositions(params.nodes)[selId]);
this.networkPop.style.top = position.y - 85 +'px';
this.networkPop.style.left = position.x - 32 +'px';
console.log(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){
this.networkPopShow=true;
}
@@ -349,6 +350,7 @@
},
networkPopClose(){//关闭节点工具栏
this.networkPopShow=false;
this.selNodeId=''
this.network.unselectAll();
},
//工具栏
@@ -377,15 +379,11 @@
}
},
fangda(){
this.fangdaX+=0.3
document.getElementById('vis-content').style.transform='scale('+this.fangdaX+')';
this.setNetworkData(this.nodesArray,this.edgesArray);
},
modelTopUpdate(){
modelTopUpdate(){//model上的图标 实时更新
this.modelTop=[];
this.nodesArray.forEach((item)=>{
let position=this.network.canvasToDOM({x:item.x,y:item.y})
let position=this.network.canvasToDOM({x:item.x,y:item.y});
if(item.id===1){console.log(position)};
this.modelTop.push({
show:true,
x:position.x,
@@ -393,6 +391,25 @@
id:item.id,
})
})
},
selNodeArrUpdate(){// 选中狂位置更新
this.NodeArr.forEach((id,index)=>{
let selNode = this.nodesArray.find(item=>item.id===id);
let position=this.network.canvasToDOM({x:selNode.x,y:selNode.y});
document.getElementById('nodeArr'+(index+1)).style.top=position.y+'px';
document.getElementById('nodeArr'+(index+1)).style.left=position.x+'px';
})
},
modelTopMouseDown(item,index){
console.log(this.$refs['modelTopId'+index]);
this.$refs['modelTopId'+index][0].addEventListener('mousemove',this.modelTopMouseMove)
},
modelTopMouseUp(item,index){
console.log(this.$refs['modelTopId'+index]);
this.$refs['modelTopId'+index][0].removeEventListener('mousemove',this.modelTopMouseMove);
},
modelTopMouseMove(e){
console.log(e)
}
},
mounted(){
@@ -458,6 +475,7 @@
this_.NodeArrShow=true;
}
this_.modelTopUpdate();
this_.selNodeArrUpdate();
});
this.network.on("hoverNode", function (params) {//hoverNode
@@ -467,6 +485,18 @@
this.network.on("blurNode", function (params) {//blurNode
this_.cursorMove=false;
});
this.network.on("zoom", function (params) {//检测缩放
// this_.zoom=Math.round(params.scale*100)/100-0.1;
this_.zoom=params.scale;
// console.log(this_.nodesArray);
// console.log(this_.network.getPositions());
this_.modelTopUpdate();
this_.selNodeArrUpdate();
this_.setPopPosition(this_.selNodeId);
console.log(this_.zoom);
return false
});
})
}
}
@@ -630,7 +660,7 @@
color: rgba(132,213,194,0.5);
}
.nz-icon-model{
color: #23bf9a;
color: #23BF9A;
position: absolute;
top: 14px;
left: 15px;

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

@@ -67,7 +67,12 @@
</template>
<script>
import png from './a.png'
import a from './a.png'
import b from './b.png'
import c from './c.png'
import d from './d.png'
import e from './e.png'
import f from './f.png'
import bus from '../../libs/bus';
import {Loading} from 'element-ui';
import chartDataFormat from './chartDataFormat'
@@ -160,13 +165,15 @@
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, 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}},
{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}},