抽离组件
This commit is contained in:
zhangyu
@@ -1,35 +1,80 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
|
||||
<el-form-item label="Id">
|
||||
<el-input v-model="form.lineId"></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-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="color">
|
||||
<el-color-picker
|
||||
v-model="form.color"
|
||||
:predefine="predefineColors">
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="Label">
|
||||
<el-input v-model="form.label"></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>
|
||||
<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>
|
||||
<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-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="color">
|
||||
<el-color-picker
|
||||
v-model="form.color"
|
||||
:predefine="predefineColors">
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="Label">
|
||||
<el-input v-model="form.label"></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>
|
||||
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>
|
||||
|
||||
|
||||
@@ -1,25 +1,48 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<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>
|
||||
<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="image">
|
||||
<el-input v-model="form.image"></el-input>
|
||||
</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){
|
||||
for(let key in this.form){
|
||||
this.form[key]=n[key]
|
||||
}
|
||||
this.form.modelId=n.id;
|
||||
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>
|
||||
|
||||
@@ -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}
|
||||
edges.from=this.NodeArr[0];
|
||||
edges.to=this.NodeArr[1];
|
||||
let edgesArray =[...this.edgesArray].push(edges);
|
||||
this.$emit("setTopologyData",this.nodesArray,edgesArray,this.setNetworkData);
|
||||
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];
|
||||
}
|
||||
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,82 +300,95 @@
|
||||
},
|
||||
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(){
|
||||
setTimeout(()=>{
|
||||
let this_=this;
|
||||
this.init('modal');
|
||||
this.network.on("click", function (params) {
|
||||
let selId=params.nodes[0];
|
||||
this_.networkPopClose();
|
||||
if(selId){
|
||||
this_.selNodeId=selId;
|
||||
this_.cursorMove=true;
|
||||
this_.nodeData=this_.nodesArray.find((item)=>item.id==selId);
|
||||
this_.setPopPosition(selId,params);
|
||||
if(this_.selectNodeTitle){
|
||||
this_.NodeArr.push(selId);
|
||||
this_.network.selectNodes(this_.NodeArr,true)
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
let this_=this;
|
||||
this.init('modal');
|
||||
this.network.on("click", function (params) {
|
||||
let selId=params.nodes[0];
|
||||
this_.networkPopClose();
|
||||
if(selId){
|
||||
this_.selNodeId=selId;
|
||||
this_.cursorMove=true;
|
||||
this_.nodeData=this_.nodesArray.find((item)=>item.id==selId);
|
||||
this_.setPopPosition(selId,params);
|
||||
if(this_.selectNodeTitle){
|
||||
this_.NodeArr.push(selId);
|
||||
this_.network.selectNodes(this_.NodeArr,true)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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) {//节点移动开始
|
||||
// params.event = "[original event]";
|
||||
// document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
|
||||
// console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),params);
|
||||
// console.log( this_.network.getPositions());
|
||||
this_.networkPopShow=false;
|
||||
});
|
||||
this.network.on("dragStart", function (params) {//节点移动开始
|
||||
// params.event = "[original event]";
|
||||
// document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
|
||||
// console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),params);
|
||||
// console.log( this_.network.getPositions());
|
||||
this_.networkPopShow=false;
|
||||
});
|
||||
|
||||
this.network.on("dragging", function (params,event) {//节点移动中
|
||||
this.network.on("dragging", function (params,event) {//节点移动中
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
this.network.on("dragEnd", function (params) {//节点移动结束
|
||||
this_.viewsCenter=this_.network.getViewPosition();
|
||||
let selId=params.nodes[0];
|
||||
if(selId){
|
||||
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("dragEnd", function (params) {//节点移动结束
|
||||
this_.viewsCenter=this_.network.getViewPosition();
|
||||
let selId=params.nodes[0];
|
||||
if(selId){
|
||||
this_.setPopPosition(selId,params);
|
||||
this_.setNodePosition(selId)
|
||||
}
|
||||
});
|
||||
|
||||
this.network.on("hoverNode", function (params) {//hoverNode
|
||||
this_.cursorMove=true;
|
||||
});
|
||||
|
||||
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;
|
||||
|
||||
@@ -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(){
|
||||
|
||||
Reference in New Issue
Block a user