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

module 从上层传递

Browse Source
This commit is contained in:
zhangyu
2020-08-20 14:47:14 +08:00
parent c3bd777b38
commit 7a5fea7060
4 changed files with 90 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
nezha-fronted/src/components/common/project/addNode.vue
View File

@@ -2,15 +2,18 @@
<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>
<!--<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>
<div class="right-box-title">
<!--{{$t("project.endpoint.editEndpoint") + " ID：" + nodeData.id}}-->
Add Module
</div>
<!-- end--标题-->
<!-- begin--表单-->
@@ -19,9 +22,9 @@
<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"
v-for="item in moduleDataS.module"
:key="item.id"
:label="item.label"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
@@ -41,10 +44,6 @@
</el-option>
</el-select>
</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>-->
@@ -62,7 +61,7 @@
<!--@removeExpression="removeExpression"-->
<!--&gt;</promql-input>-->
<!--<el-row>-->
<!--<template v-if="editChart.type != 'singleStat'">-->
<!--<template>-->
<!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
<!--{{$t('dashboard.panel.chartForm.legend')}}&nbsp;-->
<!--<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">-->
@@ -73,18 +72,6 @@
<!--<el-input v-model="legends[index-1]" type="text" size="small"></el-input>-->
<!--</el-col>-->
<!--</template>-->
<!--<template v-else>-->
<!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
<!--{{$t('dashboard.panel.chartForm.statistics')}}&nbsp;-->
<!--</el-col>-->
<!--<el-col style="width: calc(100% - 120px);">-->
<!--<el-select popper-class="chart-box-dropdown-mini" v-model="statistics" placeholder="" size="small">-->
<!--<el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value">-->
<!--<span class="panel-dropdown-label-txt" >{{item.label}}</span>-->
<!--</el-option>-->
<!--</el-select>-->
<!--</el-col>-->
<!--</template>-->
<!--</el-row>-->
<!--</el-row>-->
</el-form>
@@ -105,20 +92,29 @@
</template>
<script>
// import promqlInput from "@compotents/page/dashboard/explore/promqlInput";
import promqlInput from "@/components/page/dashboard/explore/promqlInput";
import {getUUID,resetZIndex} from "@/components/common/js/common";
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'
var rz = {
methods: {
rz(e) {
resetZIndex(e);
}
}
};
export default {
name:"addNode",
components:{
// 'promql-input': promqlInput,
'promql-input': promqlInput,
},
props:{
nodeData:{}
nodeData:{},
moduleDataS:{}
},
watch:{
nodeData:{
@@ -130,6 +126,13 @@
},
immediate: true,
deep: true,
},
moduleDataS:{
handler(n){
console.log(n)
},
immediate: true,
deep: true,
}
},
data(){
@@ -140,6 +143,9 @@
},
promqlKeys:[],
expressions: [],
promqlCount:0,
elementIds:[],
legends:[],
rules:{
modelId:[
{ required: true, message: '请选择module', trigger: 'blur' },
@@ -169,12 +175,12 @@
{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:1,image:a},
{id:2,image:b},
{id:3,image:c},
{id:4,image:d},
{id:5,image:e},
{id:6,image:f},
// {id:7,img:'./a.png',label:'model',},
],
}
@@ -183,9 +189,10 @@
onSubmit(){
this.$refs['form'].validate((valid) => {
if (valid) {
let module=this.nodesArray.find(item=>item.id===this.form.modelId);
let module=this.moduleDataS.module.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}},);
model.label=model.name
this.$emit('addModel',model)
}
});
@@ -405,7 +412,10 @@
.z-top {
z-index: 2900;
}
.right-box-title{
font-weight: bold;
font-size: 24px;
}
</style>
<style lang="scss">

9
nezha-fronted/src/components/common/project/projectFacade.vue
View File

@@ -82,6 +82,7 @@
:panel-id="item.id"
:chart-data="item"
:chart-index="0"
:allModuleInfo="allModuleInfo"
>
</vis-network>
</div>
@@ -174,7 +175,8 @@
pending:40,
other:10,
}
}
},
allModuleInfo:[]
}
},
mounted(){
@@ -188,7 +190,8 @@
this.projectInfo.loading=true;
this.$get('project/info', {id:n.id}).then(response => {
if (response.code === 200) {
this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length}
this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
this.allModuleInfo=response.data;
this.$nextTick(()=>{
this.projectInfo.loading=false;
})
@@ -267,7 +270,7 @@
.facade-content{
flex: 1;
min-height: 800px;
width: 80%;
width: calc(100% - 20px);
}
.label{
padding: 0 15px;

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

@@ -11,6 +11,9 @@
<span class="edit-topology-add" @click="addLineTitleShow">Add</span>
<span class="edit-topology-remove" @click="lineDel">Remove</span>
</span>
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
<el-button>save</el-button>
</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)">
@@ -62,10 +65,13 @@
<i class="nz-icon nz-icon-model"></i>
</i>
<!--悬浮network部分-->
<div class="network-info">
123
</div>
</div>
<transition name="right-box">
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd"></add-model>
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="allModuleInfos"></add-model>
</transition>
<transition name="right-box">
<add-line v-if="addLineShow" @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData" :isAdd="isLineAdd" @close="closeAddLine" @del="lineDel"></add-line>
@@ -95,7 +101,8 @@
},
editVisNetwork:{
type:Boolean,
}
},
allModuleInfo:{}
},
watch:{
NodeArr(n){
@@ -119,10 +126,18 @@
this.selNodeId='';
this.selectNodeTitle=false;
}
},
allModuleInfo:{
immediate: true,
deep: true,
handler(n){
this.allModuleInfos={...n}
},
}
},
data(){
return {
allModuleInfos:[],
relativeModelTop:{},
index:'',
zoom:1,
@@ -398,7 +413,7 @@
})
})
},
selNodeArrUpdate(){// 选中狂位置更新
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});
@@ -472,10 +487,10 @@
});
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;
// this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
// this_.lineData.color=this_.lineData.color.color;
// this_.addLineShow=true;
// this_.isLineAdd=false;
});
this.network.on("dragStart", function (params) {//节点移动开始
@@ -741,4 +756,9 @@
left: 15px;
font-size: 18px;
}
.network-info{
position: absolute;
right: 0;
top: 0;
}
</style>

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

@@ -31,7 +31,17 @@
</span>
</div>
<div class="vis-network-content">
<topology :editVisNetwork="editVisNetwork" :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
<topology
:editVisNetwork="editVisNetwork"
:nodesArray="nodesArray"
:edgesArray="edgesArray"
@setTopologyData="setTopologyData"
:isFullScreen="false"
ref="topology"
:allModuleInfo="allModuleInfo"
>
</topology>
</div>
</div>
@@ -67,6 +77,7 @@
chartData: {
type: Object
},
allModuleInfo:{}
},
data () {
return {