优化添加 和切换project的部分
This commit is contained in:
zhangyu
BIN
nezha-fronted/src/components/common/project/LRArrow.png
Normal file
BIN
nezha-fronted/src/components/common/project/LRArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 B |
@@ -2,38 +2,50 @@
|
||||
<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>
|
||||
<!--<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>
|
||||
<div class="right-box-title">Add Line</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 label="Line Name" prop="lineName" class="line-name">
|
||||
<el-input v-model="form.lineName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头方向" prop="arrows">
|
||||
<el-select v-model="form.arrows" placeholder="请选择活动区域">
|
||||
<el-option label="from" value="from"></el-option>
|
||||
<el-option label="to" value="to"></el-option>
|
||||
<el-option label="from;to" value="from;to"></el-option>
|
||||
<el-form-item label="箭头方向" prop="arrows" @change="iconChange" class="arrows">
|
||||
<el-select v-model="form.arrows" placeholder="">
|
||||
<div slot="prefix">
|
||||
<img v-if="form.arrows=='from'" src="./leftArrow.png" />
|
||||
<img v-if="form.arrows=='to'" src="./rightArrow.png" />
|
||||
<img v-if="form.arrows=='from;to'" src="./LRArrow.png" />
|
||||
<img v-if="form.arrows=='0'" src="./noArrow.png" />
|
||||
</div>
|
||||
<el-option label="from" value="from"><img src="./leftArrow.png" /></el-option>
|
||||
<el-option label="to" value="to"><img src="./rightArrow.png" /></el-option>
|
||||
<el-option label="from;to" value="from;to"><img src="./LRArrow.png" /></el-option>
|
||||
<el-option label="" value="0"><img src="./noArrow.png" /></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="color">
|
||||
<el-form-item label="color" class="color">
|
||||
<div class="color-show" @click="colorPickerClick">
|
||||
<div class="color-show-left" :style="{background:form.color}"></div>
|
||||
<span> {{form.color}}</span>
|
||||
</div>
|
||||
<div class="color-content">
|
||||
<el-color-picker
|
||||
v-model="form.color"
|
||||
:predefine="predefineColors">
|
||||
:predefine="predefineColors"
|
||||
ref="colorPicker"
|
||||
>
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="Label">
|
||||
<el-input v-model="form.label"></el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
@@ -63,7 +75,6 @@
|
||||
handler(n){
|
||||
this.form={
|
||||
arrows:n.arrows,
|
||||
label:n.label,
|
||||
color:n.color,
|
||||
lineId:n.id,
|
||||
}
|
||||
@@ -78,6 +89,7 @@
|
||||
arrows:'',
|
||||
label:'',
|
||||
color:'#1e90ff',
|
||||
lineName:'',
|
||||
lineId:'',
|
||||
},
|
||||
predefineColors: [
|
||||
@@ -91,15 +103,23 @@
|
||||
],
|
||||
rules:{
|
||||
arrows: [
|
||||
{ required: true, message: '请输入活动名称', trigger: 'change' },
|
||||
{ required: true, message: '', trigger: 'change' },
|
||||
],
|
||||
lineName: [
|
||||
{ required: true, message: '', trigger: 'change' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
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)
|
||||
|
||||
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}});
|
||||
this.$emit('addLine',model);
|
||||
}
|
||||
});
|
||||
},
|
||||
/*关闭弹框*/
|
||||
esc(refresh) {
|
||||
@@ -111,13 +131,76 @@
|
||||
del(){
|
||||
this.$emit('del');
|
||||
this.esc();
|
||||
}
|
||||
},
|
||||
colorPickerClick(){
|
||||
console.log(this.$refs['colorPicker']);
|
||||
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>
|
||||
.color-content{
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 140px;
|
||||
}
|
||||
.color{
|
||||
position: relative;
|
||||
}
|
||||
.color-show{
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.color-show-left{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 5px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.line-name{
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.arrows{
|
||||
|
||||
}
|
||||
.arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
|
||||
border: 1px solid #DCDFE6;
|
||||
height: 41px;
|
||||
width: calc(100% - 30px);
|
||||
}
|
||||
.arrows /deep/ .el-input__inner{
|
||||
display: none;
|
||||
}
|
||||
/deep/ .el-select{
|
||||
width: 262px;
|
||||
}
|
||||
.nz-btn-edit-ok{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<!-- begin--表单-->
|
||||
<el-scrollbar class="right-box-form-box">
|
||||
<el-form ref="form" :model="form" label-width="160px" :rules="rules">
|
||||
<el-form class="right-box-form right-box-form-left" 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
|
||||
@@ -37,10 +37,10 @@
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id">
|
||||
<span style="float: left">
|
||||
<span style="float: left;width: 50%">
|
||||
<img :src="item.image" />
|
||||
</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.imageName }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -175,12 +175,12 @@
|
||||
{id: 14, label: "model14",},
|
||||
],
|
||||
iconArray:[
|
||||
{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:1,image:a,imageName:"module1"},
|
||||
{id:2,image:b,imageName:"module1"},
|
||||
{id:3,image:c,imageName:"module1"},
|
||||
{id:4,image:d,imageName:"module1"},
|
||||
{id:5,image:e,imageName:"module1"},
|
||||
{id:6,image:f,imageName:"module1"},
|
||||
// {id:7,img:'./a.png',label:'model',},
|
||||
],
|
||||
}
|
||||
@@ -412,10 +412,6 @@
|
||||
.z-top {
|
||||
z-index: 2900;
|
||||
}
|
||||
.right-box-title{
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
BIN
nezha-fronted/src/components/common/project/leftArrow.png
Normal file
BIN
nezha-fronted/src/components/common/project/leftArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 256 B |
BIN
nezha-fronted/src/components/common/project/noArrow.png
Normal file
BIN
nezha-fronted/src/components/common/project/noArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 B |
BIN
nezha-fronted/src/components/common/project/rightArrow.png
Normal file
BIN
nezha-fronted/src/components/common/project/rightArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
@@ -71,7 +71,7 @@
|
||||
|
||||
</div>
|
||||
<transition name="right-box">
|
||||
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="allModuleInfos"></add-model>
|
||||
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="moduleDataS"></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>
|
||||
@@ -132,13 +132,22 @@
|
||||
deep: true,
|
||||
handler(n){
|
||||
this.allModuleInfos={...n}
|
||||
this.arrayDiff();
|
||||
},
|
||||
}
|
||||
},
|
||||
// nodesArray:{
|
||||
// immediate: true,
|
||||
// deep: true,
|
||||
// handler(n){
|
||||
// this.setNetworkData(n,this.edgesArray);
|
||||
// },
|
||||
// },
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
allModuleInfos:[],
|
||||
relativeModelTop:{},
|
||||
moduleDataS:[],
|
||||
index:'',
|
||||
zoom:1,
|
||||
domScale:1,
|
||||
@@ -309,6 +318,7 @@
|
||||
nodesArray.push(model);
|
||||
this.$emit("setTopologyData",nodesArray,this.edgesArray);
|
||||
this.setNetworkData(nodesArray,this.edgesArray);
|
||||
this.arrayDiff();
|
||||
},
|
||||
addModelShow(){ // 显示添加节点弹窗
|
||||
this.addNodeShow=true;
|
||||
@@ -459,6 +469,14 @@
|
||||
this.index=index;
|
||||
this.selNodeId=item.id;
|
||||
this.setPopPosition(this.selNodeId);
|
||||
},
|
||||
// 数组取差集
|
||||
arrayDiff(){
|
||||
// this.moduleDataS=this.allModuleInfos-this.nodesArray
|
||||
this.moduleDataS=this.allModuleInfos;
|
||||
this.nodesArray.forEach((item)=>{
|
||||
this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
:isFullScreen="false"
|
||||
ref="topology"
|
||||
:allModuleInfo="allModuleInfo"
|
||||
v-loading="topologyLoading"
|
||||
>
|
||||
|
||||
</topology>
|
||||
@@ -50,15 +51,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 '@/components/charts/chartDataFormat'
|
||||
import loading from "@/components/common/loading";
|
||||
import timePicker from '@/components/common/timePicker';
|
||||
import topology from './topology'
|
||||
@@ -79,38 +71,25 @@
|
||||
},
|
||||
allModuleInfo:{}
|
||||
},
|
||||
watch:{
|
||||
allModuleInfo:{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(n){
|
||||
this.getNetworkData(n);
|
||||
},
|
||||
}
|
||||
},
|
||||
data () {
|
||||
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:[],
|
||||
edgesArray:[],
|
||||
dragTitleShow:false,
|
||||
dropdownMenuShow:false,
|
||||
editVisNetwork:false,
|
||||
topologyLoading:false,
|
||||
}
|
||||
|
||||
},
|
||||
@@ -121,6 +100,17 @@
|
||||
this.nodesArray=nodesArr;
|
||||
this.edgesArray=edgesArr;
|
||||
},
|
||||
getNetworkData(n){
|
||||
this.topologyLoading=true;
|
||||
setTimeout(()=>{
|
||||
this.edgesArray=[];
|
||||
this.nodesArray=[];
|
||||
setTimeout(()=>{
|
||||
this.topologyLoading=false;
|
||||
this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
|
||||
},1000)
|
||||
},500)
|
||||
}
|
||||
},
|
||||
|
||||
mounted(){
|
||||
|
||||
Reference in New Issue
Block a user