feat：点击module的信息组件添加
This commit is contained in:
zhangyu
Binary file not shown.
@@ -20,6 +20,18 @@ Created by iconfont
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="jiantou-down" unicode="" d="M532.27749995 72.77658226999995L736.50089476 379.11167386c8.69035701 15.20812491 0 34.76142863-17.38071463 34.76142927l-95.5939295 0L623.52625063 674.58381937c0 13.03553581-8.69035701 21.72589282-21.7258928 21.7258928l-173.80714439 0c-13.03553581 0-21.72589282-8.69035701-21.72589281-21.72589281l-1e-8-260.71071625-95.59392949 0c-17.38071462 0-28.24366073-19.55330372-17.380714-34.76142925L497.51607132 70.60399316999997c6.5177679-10.86294671 26.07107163-10.86294671 34.76142863 2.1725891z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="jiantou-top" unicode="" d="M491.72250005 695.2234177299999L287.49910524 388.88832614c-8.69035701-15.20812491 0-34.76142863 17.38071463-34.76142926l95.5939295 0L400.47374937 93.41618062999999c0-13.03553581 8.69035701-21.72589282 21.7258928-21.7258928l173.80714439 0c13.03553581 0 21.72589282 8.69035701 21.72589281 21.72589281l1e-8 260.71071624 95.5939295 0c17.38071462 0 28.24366072 19.55330372 17.38071399 34.76142926L526.48392868 697.39600683c-6.5177679 10.86294671-26.07107163 10.86294671-34.76142863-2.1725891z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="jiantou-right" unicode="" d="M823.22341773 404.27749995L516.88832614 608.5008947599999c-15.20812491 8.69035701-34.76142863 0-34.76142926-17.38071463l0-95.5939295L221.41618063 495.52625063c-13.03553581 0-21.72589282-8.69035701-21.7258928-21.7258928l0-173.80714439c0-13.03553581 8.69035701-21.72589282 21.72589281-21.72589281l260.71071624-1e-8 0-95.5939295c0-17.38071462 19.55330372-28.24366072 34.76142926-17.38071399L825.39600683 369.51607132000004c10.86294671 6.5177679 10.86294671 26.07107163-2.1725891 34.76142863z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="jiantou-left" unicode="" d="M200.77658227 363.72250005L507.11167386 159.49910523999995c15.20812491-8.69035701 34.76142863 0 34.76142926 17.38071463l0 95.5939295L802.58381937 272.47374936999995c13.03553581 0 21.72589282 8.69035701 21.7258928 21.7258928l0 173.80714439c0 13.03553581-8.69035701 21.72589282-21.72589281 21.72589281l-260.71071624 1e-8 0 95.5939295c0 17.38071462-19.55330372 28.24366072-34.76142926 17.38071399L198.60399317 398.48392868c-10.86294671-6.5177679-10.86294671-26.07107163 2.1725891-34.76142863z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="shujuku" unicode="" d="M1023.232 688.277333C1014.954667 805.312 793.685333 896 512 896S9.045333 805.312 0.789333 688.277333H0v-601.770666C0-33.706667 224.896-128 512-128c287.125333 0 512 94.293333 512 214.506667V688.277333h-0.768zM512 823.808c256.704 0 430.336-74.581333 436.885333-151.402667-6.464-76.992-180.181333-151.488-436.885333-151.488-256.725333 0-430.314667 74.453333-436.885333 151.402667C81.6 749.205333 255.274667 823.701333 512 823.701333v0.106667z m0-879.509333c-261.674667 0-437.525333 77.461333-437.525333 155.925333V255.573333C163.52 194.005333 324.181333 153.6 512 153.6c187.84 0 348.48 40.405333 437.525333 101.952v-155.349333c0-78.442667-175.850667-155.904-437.525333-155.904z m437.525333 448.96v-11.477334c0-78.4-175.850667-155.861333-437.525333-155.861333S74.474667 303.296 74.474667 381.696V550.613333C163.52 489.152 324.181333 448.661333 512 448.661333c187.84 0 348.48 40.426667 437.525333 101.952v-157.354666z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 97 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 618 B |
@@ -1,11 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="8px" height="32px" viewBox="0 0 8 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>矩形</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="画板" transform="translate(-114.000000, -46.000000)" fill="#2D88FA">
|
||||
<path d="M114,46 L114,46 C118.418278,46 122,49.581722 122,54 L122,70 C122,74.418278 118.418278,78 114,78 L114,46 Z" id="矩形"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 674 B |
@@ -1,302 +0,0 @@
|
||||
<template>
|
||||
<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>
|
||||
</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{
|
||||
form:{
|
||||
arrows:'',
|
||||
label:'',
|
||||
color:'#1e90ff',
|
||||
lineId:'',
|
||||
},
|
||||
predefineColors: [
|
||||
'#ff4500',
|
||||
'#ff8c00',
|
||||
'#ffd700',
|
||||
'#90ee90',
|
||||
'#00ced1',
|
||||
'#1e90ff',
|
||||
'#c71585',
|
||||
],
|
||||
rules:{
|
||||
arrows: [
|
||||
{ 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)
|
||||
},
|
||||
/*关闭弹框*/
|
||||
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,472 +0,0 @@
|
||||
<template>
|
||||
<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="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" 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>-->
|
||||
<!--<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>-->
|
||||
<!--</div>-->
|
||||
<!--<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">-->
|
||||
<!--<promql-input-->
|
||||
<!--:ref="'promql-'+(index-1)"-->
|
||||
<!--:id="promqlKeys[index-1]"-->
|
||||
<!--:key="promqlKeys[index-1]"-->
|
||||
<!--:expression-list="expressions"-->
|
||||
<!--:index="index-1"-->
|
||||
<!--:styleType="2"-->
|
||||
<!--:plugins="['metric-selector', 'metric-input', 'remove']"-->
|
||||
<!--@change="expressionChange"-->
|
||||
<!--@removeExpression="removeExpression"-->
|
||||
<!--></promql-input>-->
|
||||
<!--<el-row>-->
|
||||
<!--<template v-if="editChart.type != 'singleStat'">-->
|
||||
<!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
|
||||
<!--{{$t('dashboard.panel.chartForm.legend')}} -->
|
||||
<!--<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">-->
|
||||
<!--<i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>-->
|
||||
<!--</el-popover>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col style="width: calc(100% - 120px);">-->
|
||||
<!--<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')}} -->
|
||||
<!--</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>
|
||||
</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>
|
||||
// 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:{
|
||||
// 'promql-input': promqlInput,
|
||||
},
|
||||
props:{
|
||||
nodeData:{}
|
||||
},
|
||||
watch:{
|
||||
nodeData:{
|
||||
handler(n){
|
||||
for(let key in this.form){
|
||||
this.form[key]=n[key]
|
||||
}
|
||||
this.form.modelId=n.id;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
form:{
|
||||
modelId:'',
|
||||
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(){
|
||||
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 () {
|
||||
|
||||
},
|
||||
addExpression() {
|
||||
this.expressions.push('');
|
||||
this.legends.push('');
|
||||
this.promqlKeys.push(getUUID());
|
||||
this.elementIds.push("");
|
||||
this.promqlCount++;
|
||||
},
|
||||
removeExpression(index) {
|
||||
if (this.promqlCount > 1) {
|
||||
this.expressions.splice(index, 1);
|
||||
this.legends.splice(index, 1);
|
||||
this.promqlKeys.splice(index, 1);
|
||||
this.elementIds.splice(index, 1);
|
||||
this.promqlCount--;
|
||||
this.$nextTick(() => {
|
||||
this.expressions.forEach((ex, index) => {
|
||||
if (ex) {
|
||||
this.$refs[`promql-${index}`][0].metricChange(ex);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
/*关闭弹框*/
|
||||
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*/
|
||||
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bg-purple {
|
||||
background: white;
|
||||
}
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.common-float-left {
|
||||
float: left;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.el-inner {
|
||||
width: 200px;
|
||||
border-top-width: 0px;
|
||||
border-left-width: 0px;
|
||||
border-right-width: 0px;
|
||||
border-bottom-width: 10px;
|
||||
border-color:red;
|
||||
/*outline: medium;*/
|
||||
}
|
||||
|
||||
.element-bottom-border {
|
||||
padding-bottom: 5px;
|
||||
border-bottom: 1px solid #dfe7f2;
|
||||
margin-top: 15px;
|
||||
}
|
||||
/*metric样式--begin*/
|
||||
.element-item {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px dashed #dfe7f2;
|
||||
width: 100%;
|
||||
}
|
||||
/*metric样式--end*/
|
||||
.label-center{
|
||||
vertical-align: middle;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.z-top {
|
||||
z-index: 2900;
|
||||
}
|
||||
|
||||
</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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 825 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -122,20 +122,20 @@
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
></chart-alert-list>
|
||||
<vis-network
|
||||
v-if="item.type === 'topology'"
|
||||
@on-refresh-data="refreshChart"
|
||||
@on-search-data="searchData"
|
||||
@on-remove-chart-block="removeChart"
|
||||
@on-duplicate-chart-block="duplicateChart"
|
||||
@on-drag-chart="editChartForDrag"
|
||||
@on-edit-chart-block="editData"
|
||||
:panel-id="filter.panelId"
|
||||
:chart-data="item"
|
||||
:chart-index="index"
|
||||
>
|
||||
<!--<vis-network-->
|
||||
<!--v-if="item.type === 'topology'"-->
|
||||
<!--@on-refresh-data="refreshChart"-->
|
||||
<!--@on-search-data="searchData"-->
|
||||
<!--@on-remove-chart-block="removeChart"-->
|
||||
<!--@on-duplicate-chart-block="duplicateChart"-->
|
||||
<!--@on-drag-chart="editChartForDrag"-->
|
||||
<!--@on-edit-chart-block="editData"-->
|
||||
<!--:panel-id="filter.panelId"-->
|
||||
<!--:chart-data="item"-->
|
||||
<!--:chart-index="index"-->
|
||||
<!-->-->
|
||||
|
||||
</vis-network>
|
||||
<!--</vis-network>-->
|
||||
</div>
|
||||
</draggable>
|
||||
<el-row v-if="dataList.length === 0" class="noData"></el-row>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 551 B |
Binary file not shown.
|
Before Width: | Height: | Size: 817 B |
Binary file not shown.
|
Before Width: | Height: | Size: 858 B |
@@ -1,669 +0,0 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="editTopology">
|
||||
<span v-show="!selectNodeTitle" class="editTopologyModule">
|
||||
Module element :
|
||||
<span class="editTopologyAdd" @click="addModelShow">Add</span>
|
||||
<span class="editTopologyRemove" @click="nodeDel">Remove</span>
|
||||
</span>
|
||||
<span v-show="!selectNodeTitle" class="editTopologyLine">
|
||||
Line :
|
||||
<span class="editTopologyAdd" @click="addLineTitleShow">Add</span>
|
||||
<span class="editTopologyRemove" @click="lineDel">Remove</span>
|
||||
</span>
|
||||
<span class="editTopologyLineCancel" v-show="selectNodeTitle">Please select two nodes <span class="editTopologyCancel" @click="closeAddLine">Cancel</span></span>
|
||||
</div>
|
||||
<div class="network" v-clickoutside="networkPopClose">
|
||||
<!--图拓扑图-->
|
||||
<div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
|
||||
<!--拓扑图工具-->
|
||||
<div
|
||||
id="networkPop"
|
||||
class="networkPop"
|
||||
: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)">
|
||||
<i class="nz-icon nz-icon-liubianxing"></i>
|
||||
<i :class="[item.className,{'nz-icon':item.className},'noMove']"></i>
|
||||
</i>
|
||||
<!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
|
||||
</div>
|
||||
<!--拓扑图选中-->
|
||||
<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" :style="{transform:'scale('+zoom+')'}">
|
||||
<div class="selNodeTop"></div>
|
||||
<div class="selNodeRight"></div>
|
||||
<div class="selNodeBottom"></div>
|
||||
<div class="selNodeLeft"></div>
|
||||
</div>
|
||||
<!--图谱图右侧-->
|
||||
<!--<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 + 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>
|
||||
<transition name="right-box">
|
||||
<add-model v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd"></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>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import png from './a.png'
|
||||
import Vis from 'vis'
|
||||
import addNode from './addNode'
|
||||
import addLine from './addLine'
|
||||
export default {
|
||||
name:"topology",
|
||||
components: {
|
||||
'add-model':addNode,
|
||||
'add-line':addLine,
|
||||
},
|
||||
props:{
|
||||
nodesArray:{
|
||||
type:Array
|
||||
},
|
||||
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;
|
||||
}
|
||||
this.selNodeArrUpdate()
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
zoom:1,
|
||||
domScale:1,
|
||||
selectNodeTitle:false,
|
||||
// 拓扑图工具
|
||||
networkPopTop:0,
|
||||
networkPopLeft:0,
|
||||
networkPopShow:false,
|
||||
addNodeShow:false,
|
||||
addLineShow:false,
|
||||
NodeArrShow:false,
|
||||
cursorMove:false,
|
||||
NodeArr:[],
|
||||
selNodeId:'',
|
||||
lineData:{
|
||||
arrows:'',
|
||||
label:'',
|
||||
color:'#1e90ff',
|
||||
lineId:'',
|
||||
id:'',
|
||||
},
|
||||
isLineAdd:true,
|
||||
isNodeAdd:true,
|
||||
nodeData:{
|
||||
modelId:'',
|
||||
label:'',
|
||||
x:'',
|
||||
y:'',
|
||||
image:'',
|
||||
},
|
||||
popData:[
|
||||
{top:'-20px', left:'-17px',className:'nz-icon-edit',id:'edit'},
|
||||
{top:'-20px', left:'28px',className:'nz-icon-chart',id:'2'},
|
||||
{top:'18px', left:'52px',className:'nz-icon-chart',id:'3'},
|
||||
{top:'56px', left:'28px',className:'',id:'4'},
|
||||
{top:'56px', left:'-17px',className:'nz-icon-chart',id:'5'},
|
||||
{top:'18px', left:'-38px',className:'nz-icon-chart',id:'6'},
|
||||
],
|
||||
modelTop:[],
|
||||
//viewsCenter
|
||||
viewsCenter:{
|
||||
x:0,y:0
|
||||
},
|
||||
// 拓扑图数据
|
||||
nodes:[],
|
||||
edges:[],
|
||||
// network:null,
|
||||
container:null,
|
||||
options:{},
|
||||
data:{}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//拓扑图方法
|
||||
init(type){
|
||||
let this_ = this;
|
||||
this_.nodes = new Vis.DataSet(this_.nodesArray);
|
||||
this_.edges = new Vis.DataSet(this_.edgesArray);
|
||||
this_.container = this.$refs.visNetwork;
|
||||
this_.networkPop = document.getElementById('networkPop');
|
||||
this_.data = {
|
||||
nodes: this_.nodes,
|
||||
edges: this_.edges
|
||||
};
|
||||
this_.options = {
|
||||
autoResize: true,
|
||||
clickToUse:true,
|
||||
groups:{
|
||||
useDefaultGroups: true,
|
||||
myGroupId:{
|
||||
/*node options*/
|
||||
}
|
||||
},
|
||||
nodes: {
|
||||
shape: 'dot',
|
||||
size: 40,
|
||||
borderWidth: 2,
|
||||
font:{
|
||||
size:20,
|
||||
},
|
||||
},
|
||||
|
||||
edges: {
|
||||
width: 2,
|
||||
smooth:{ //设置两个节点之前的连线的状态
|
||||
enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
|
||||
roundness:0.5,
|
||||
type: "curvedCW",
|
||||
},
|
||||
selfReferenceSize:40,
|
||||
},
|
||||
layout:{
|
||||
randomSeed: 666,
|
||||
},
|
||||
physics: { //计算节点之前斥力，进行自动排列的属性
|
||||
enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
|
||||
barnesHut: {
|
||||
gravitationalConstant: -4000,
|
||||
centralGravity: 0.3,
|
||||
springLength: 120,
|
||||
springConstant: 0.04,
|
||||
damping: 0.09,
|
||||
avoidOverlap: 0
|
||||
}
|
||||
},
|
||||
|
||||
interaction:{
|
||||
dragNodes: true, //是否能拖动节点
|
||||
dragView: true, //是否能拖动画布
|
||||
hover: true, //鼠标移过后加粗该节点和连接线
|
||||
multiselect: false, //按 ctrl 多选
|
||||
selectable: true, //是否可以点击选择
|
||||
selectConnectedEdges: false, //选择节点后是否显示连接线
|
||||
hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
|
||||
zoomView: true, //是否能缩放画布
|
||||
navigationButtons:true,
|
||||
},
|
||||
|
||||
manipulation: { //该属性表示可以编辑，出现编辑操作按钮
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
this_.network = new Vis.Network(this_.container, this_.data, this_.options);
|
||||
this_.network.moveTo({
|
||||
position: this_.viewsCenter,
|
||||
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];
|
||||
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);
|
||||
},
|
||||
resetAllNodesStabilize() {
|
||||
let this_ = this;
|
||||
this_.resetAllNodes();
|
||||
this_.network.stabilize();
|
||||
},
|
||||
setNetworkData(nodes,edges){//动态设置拓扑图数据
|
||||
let this_ = this;
|
||||
this.nodes = new Vis.DataSet(nodes);
|
||||
this.edges = new Vis.DataSet(edges);
|
||||
this.network.setData({
|
||||
nodes:this_.nodes,
|
||||
edges: this_.edges
|
||||
});
|
||||
this_.network.moveTo({
|
||||
position: this_.viewsCenter,
|
||||
scale: this_.isFullScreen?1.5:1,
|
||||
offset: {x:0, y:0},
|
||||
});
|
||||
console.log( this.nodes,this.edges);
|
||||
if(this_.isFullScreen) {
|
||||
console.log(this_.viewsCenter)
|
||||
}
|
||||
this.$nextTick(()=>{
|
||||
this_.modelTopUpdate();
|
||||
})
|
||||
},
|
||||
addModel(model){ // 添加model
|
||||
this.addNodeShow=false;
|
||||
if(!model){return}
|
||||
let nodesArray=[...this.nodesArray];
|
||||
if(!this.isNodeAdd){
|
||||
model={...nodesArray.find(item=>item.id===model.id),...model};
|
||||
nodesArray=nodesArray.filter(item=>item.id!==model.id);
|
||||
}else{
|
||||
model={...model,...this.network.DOMtoCanvas({x:40,y:40})};
|
||||
}
|
||||
nodesArray.push(model);
|
||||
this.$emit("setTopologyData",nodesArray,this.edgesArray);
|
||||
this.setNetworkData(nodesArray,this.edgesArray);
|
||||
},
|
||||
addModelShow(){ // 显示添加节点弹窗
|
||||
this.addNodeShow=true;
|
||||
this.isNodeAdd=true;
|
||||
this.nodeData={
|
||||
modelId:'',
|
||||
label:'',
|
||||
x:'',
|
||||
y:'',
|
||||
image:'',
|
||||
}
|
||||
},
|
||||
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];
|
||||
edges.dashes=[15,15];
|
||||
}
|
||||
edgesArray.push(edges);
|
||||
console.log(edgesArray,edges);
|
||||
this.$emit("setTopologyData",this.nodesArray,edgesArray);
|
||||
this.setNetworkData(this.nodesArray,edgesArray);
|
||||
this.NodeArr=[];
|
||||
this.NodeArrShow=false;
|
||||
},
|
||||
addLineTitleShow(){ // 显示添加线弹窗
|
||||
// this.addLineShow=true;
|
||||
this.selectNodeTitle=true;
|
||||
this.NodeArrShow=true;
|
||||
},
|
||||
closeAddLine(){
|
||||
this.selectNodeTitle=false;
|
||||
this.addLineShow=false;
|
||||
this.NodeArr=[];
|
||||
this.NodeArrShow=false;
|
||||
this.network.unselectAll();
|
||||
},
|
||||
setNodePosition(selId){ // 移动节点后 设置节点坐标
|
||||
let position = this.network.getPositions([selId]);
|
||||
let selItem = this.nodesArray.find((item)=>item.id===selId);
|
||||
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){//设置节点工具栏位置
|
||||
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;
|
||||
}
|
||||
this.NodeArr=[...this.NodeArr]
|
||||
},
|
||||
networkPopClose(){//关闭节点工具栏
|
||||
this.networkPopShow=false;
|
||||
this.selNodeId=''
|
||||
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(nodesArray, edgesArray);
|
||||
this.networkPopClose();
|
||||
},
|
||||
nodeEdit(){
|
||||
this.addNodeShow=true;
|
||||
this.isNodeAdd=false;
|
||||
},
|
||||
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.nodesArray,edgesArray);
|
||||
},
|
||||
|
||||
// 工具的点击 对应的操作
|
||||
popClick(id){
|
||||
if(id=='edit'){
|
||||
this.nodeEdit()
|
||||
}
|
||||
|
||||
},
|
||||
modelTopUpdate(){//model上的图标 实时更新
|
||||
this.modelTop=[];
|
||||
this.nodesArray.forEach((item)=>{
|
||||
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,
|
||||
y:position.y,
|
||||
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(){
|
||||
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);
|
||||
console.log(this_.NodeArr.indexOf(selId));
|
||||
if(this_.NodeArr.indexOf(selId)!==-1){
|
||||
let index = this_.NodeArr.indexOf(selId);
|
||||
this_.NodeArr=this_.NodeArr.filter((item,i)=> i != index);
|
||||
return
|
||||
}
|
||||
if(this_.selectNodeTitle){
|
||||
this_.NodeArr.push(selId);
|
||||
this_.network.selectNodes(this_.NodeArr,true);
|
||||
return
|
||||
}
|
||||
this_.setPopPosition(selId,params);
|
||||
}
|
||||
});
|
||||
|
||||
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) {//节点移动开始
|
||||
this_.networkPopShow=false;
|
||||
this_.NodeArrShow=false;
|
||||
let selId=params.nodes[0];
|
||||
if(selId){
|
||||
this_.modelTop.find(item=>item.id===selId).show=false;
|
||||
}
|
||||
if(!selId){
|
||||
this_.modelTop.forEach(item=>{
|
||||
item.show=false;
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
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)
|
||||
}
|
||||
if(this_.NodeArr.length>0){
|
||||
this_.NodeArrShow=true;
|
||||
}
|
||||
this_.modelTopUpdate();
|
||||
this_.selNodeArrUpdate();
|
||||
});
|
||||
|
||||
this.network.on("hoverNode", function (params) {//hoverNode
|
||||
this_.cursorMove=true;
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content{
|
||||
height: 100%;
|
||||
}
|
||||
.editTopology{
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
}
|
||||
.network{
|
||||
display: flex;
|
||||
height: calc(100% - 30px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.networkPop{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
/*border: 1px solid #e6e6e6;*/
|
||||
border-radius: 5px;
|
||||
height: 32px;
|
||||
/*background: #fff;*/
|
||||
padding: 0 3px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder{
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
color: #84d5c2;
|
||||
}
|
||||
.networkPop .nz-icon-liubianxing{
|
||||
color:#e2f3ef;
|
||||
font-size: 44px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 2px;
|
||||
}
|
||||
.nz-icon.noMove{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 14px;
|
||||
font-size: 20px;
|
||||
color: #27c09c;
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder:hover{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder:hover .nz-icon-liubianxing{
|
||||
transform: scale(1.1);
|
||||
left: 4px;
|
||||
font-size: 41px;
|
||||
}
|
||||
.networkPop .nz-icon-hexagonBorder:hover .noMove{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.btmTriangle{
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-color:#e6e6e6 transparent transparent transparent;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.btmTriangle:after{
|
||||
content: '';
|
||||
display:block;
|
||||
width:0;
|
||||
height:0;
|
||||
border-width: 10px;
|
||||
border-style:solid;
|
||||
border-color:#fff transparent transparent transparent;
|
||||
position:absolute;
|
||||
bottom: -7px;
|
||||
left: -9px;
|
||||
}
|
||||
#network_id{
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
.cursorMove{
|
||||
cursor: move;
|
||||
}
|
||||
#network_id2{
|
||||
height: 100%;
|
||||
}
|
||||
.networkContent{
|
||||
width: 40%;
|
||||
}
|
||||
.nz-icon-delete{
|
||||
cursor: pointer;
|
||||
color: #ee6723;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.nz-icon-edit{
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.editTopology{
|
||||
color: #1a1a1a;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.editTopologyModule,.editTopologyLineCancel{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.editTopologyLine{
|
||||
margin-left: 130px;
|
||||
}
|
||||
.editTopologyAdd,.editTopologyRemove,.editTopologyCancel{
|
||||
color: #1989fa;
|
||||
margin-left: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selNode{
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.selNodeTop {
|
||||
width: 120px;
|
||||
height: 0;
|
||||
border-top: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: -60px;
|
||||
}
|
||||
.selNodeRight {
|
||||
width: 0px;
|
||||
height: 120px;
|
||||
border-right: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: -60px;
|
||||
}
|
||||
.selNodeBottom {
|
||||
width: 120px;
|
||||
height: 0;
|
||||
border-bottom: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: 60px;
|
||||
}
|
||||
.selNodeLeft {
|
||||
width: 0px;
|
||||
height: 120px;
|
||||
border-left: 4px dashed yellow;
|
||||
position: absolute;
|
||||
left: -60px;
|
||||
top: -60px;
|
||||
}
|
||||
.nz-icon-shuidi{
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
color: rgba(132,213,194,0.5);
|
||||
}
|
||||
.nz-icon-model{
|
||||
color: #23BF9A;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,442 +0,0 @@
|
||||
<template>
|
||||
<div class="nz-chart-resize">
|
||||
<div class="resize-shadow" ref="resizeShadow"></div>
|
||||
<div class="resize-box resize-box-table" ref="resizeBox">
|
||||
<div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
|
||||
<loading :ref="'localLoading'+chartIndex"></loading>
|
||||
<div class="clearfix chartTitle text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
|
||||
<el-popover
|
||||
v-if="isError"
|
||||
:close-delay=10
|
||||
placement="top-start"
|
||||
trigger="hover"
|
||||
popper-class="chart-error-popper">
|
||||
<div >{{errorContent}}</div>
|
||||
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
|
||||
<i class="nz-icon nz-icon-warning fa"></i>
|
||||
<span class="panel-info-corner-inner"></span>
|
||||
</span>
|
||||
</el-popover>
|
||||
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
|
||||
<el-dropdown-menu style="display: none"></el-dropdown-menu>
|
||||
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
|
||||
<span></span>
|
||||
<span>
|
||||
<span class="chart-title-text">{{chartData.title}}</span>
|
||||
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
|
||||
</span>
|
||||
<span>
|
||||
<i class="nz-icon nz-icon-edit float-right"></i>
|
||||
<i class="nz-icon nz-icon-zoomin float-right"></i>
|
||||
<i class="nz-icon nz-icon-exit-full-screen float-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
|
||||
<li @click="refreshChart" class="el-dropdown-menu__item">
|
||||
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
|
||||
<li @click="editChart" class="el-dropdown-menu__item">
|
||||
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
|
||||
<li @click="removeChart" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
|
||||
<li @click="showAllScreen" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
|
||||
<li @click="duplicate" class="el-dropdown-menu__item">
|
||||
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
|
||||
</ul>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="mt-10 table-container">
|
||||
<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="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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</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 './chartDataFormat'
|
||||
import loading from "../common/loading";
|
||||
import timePicker from '../common/timePicker';
|
||||
import topology from './topology'
|
||||
export default {
|
||||
name: 'visNetwork',
|
||||
components: {
|
||||
'loading': loading,
|
||||
'time-picker':timePicker,
|
||||
'topology':topology,
|
||||
},
|
||||
props:{
|
||||
chartIndex:{
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
chartData: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
//其他
|
||||
tableHeight: 0,
|
||||
data: {}, // 该图表信息,chartItem
|
||||
unit:{},
|
||||
isError:false,
|
||||
errorContent:'',
|
||||
pageSizes:[50,100,200],
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
screenPageObj:{
|
||||
pageNo: 1,
|
||||
pageSize: 50,
|
||||
total: 0
|
||||
},
|
||||
storedTableData:[],
|
||||
storedScreanTableData:[],
|
||||
seriesItem: [], // 保存信息
|
||||
seriesItemScreen:[],//全屏数据
|
||||
images: '',
|
||||
loading:Object,
|
||||
items: {
|
||||
metric_name: [], // 每条数据列名称
|
||||
xAxis: [],
|
||||
theData: [], // series数据组
|
||||
},
|
||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||
firstLoad: true, // 是否第一次加载
|
||||
chartType: 'table', // 图表类型
|
||||
screenModal: false,
|
||||
// 查询数据使用
|
||||
filter: {
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
},
|
||||
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
|
||||
firstShow: false, // 默认不显示操作按钮,
|
||||
caretShow:false,
|
||||
dragTitleShow:false,
|
||||
dropdownMenuShow:false,
|
||||
divFirstShow:false,
|
||||
columns: [
|
||||
{
|
||||
title:'Element',
|
||||
key:'element',
|
||||
sortable: true
|
||||
}
|
||||
, {
|
||||
title: '采集时间',
|
||||
key: 'time',
|
||||
width: 160,
|
||||
render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
|
||||
}, {
|
||||
title: '数值',
|
||||
key: 'value',
|
||||
width: 160,
|
||||
sortable: true,
|
||||
render: (h, params) => h('span', this.getNumStr(params.row.value)),
|
||||
}],
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
|
||||
oldSearchTime: [],
|
||||
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}},
|
||||
],
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
// 其他
|
||||
filterShowData(source,pageObj){
|
||||
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
|
||||
},
|
||||
startResize(e) {
|
||||
let vm = this;
|
||||
this.$chartResizeTool.start(vm, this.data, e);
|
||||
},
|
||||
screenPageNo(val) {
|
||||
this.screenPageObj.pageNo = val;
|
||||
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
|
||||
},
|
||||
screenPageSize(val) {
|
||||
this.screenPageObj.pageSize = val;
|
||||
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
|
||||
},
|
||||
startLoading(area){
|
||||
if(area==='screen'){
|
||||
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
|
||||
}else {
|
||||
this.$refs['localLoading'+this.chartIndex].startLoading();
|
||||
}
|
||||
},
|
||||
endLoading(area){
|
||||
if(area==='screen'){
|
||||
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
|
||||
}else {
|
||||
this.$refs['localLoading'+this.chartIndex].endLoading();
|
||||
}
|
||||
},
|
||||
resize(chartItem) {
|
||||
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
|
||||
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
|
||||
container.style.height = `calc(100% - ${deHeight*2}px)`;
|
||||
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
|
||||
this.$nextTick(() => {
|
||||
container.querySelector(".el-table__body-wrapper")._ps_.update();
|
||||
});
|
||||
},
|
||||
showLoad(chartItem) {
|
||||
//设置高度 chart-table
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem);
|
||||
});
|
||||
this.startLoading();
|
||||
this.divFirstShow = true;
|
||||
},
|
||||
// 重新请求数据 刷新操作-local
|
||||
refreshChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.startLoading();
|
||||
this.firstShow = false;
|
||||
this.$emit('on-refresh-data', this.data.id);
|
||||
},
|
||||
// 编辑图表
|
||||
editChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-edit-chart-block', this.data.id);
|
||||
},
|
||||
// 删除该图表
|
||||
removeChart() {
|
||||
this.dropdownMenuShow=false;
|
||||
this.$emit('on-remove-chart-block', this.data.id);
|
||||
},
|
||||
//全屏时间条件查询
|
||||
dateChange(time) {
|
||||
this.searchTime = [...time];
|
||||
this.seriesItemScreen = [];
|
||||
for(let i=0;i<8;i++){
|
||||
this.seriesItemScreen.push({//表格数据
|
||||
element:'',
|
||||
time: '',//采集时间
|
||||
value: '',//数值
|
||||
});
|
||||
}
|
||||
this.startLoading('screen');
|
||||
this.$emit('on-search-data', this.data.id, this.searchTime);
|
||||
},
|
||||
clickos() {
|
||||
this.dropdownMenuShow=false;
|
||||
},
|
||||
clearChart(){
|
||||
this.data = {};
|
||||
},
|
||||
duplicate(){
|
||||
this.dropdownMenuShow=false;
|
||||
const param = {id:this.data.id};
|
||||
this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
type: 'success',
|
||||
message: this.$t("tip.duplicateSuccess")
|
||||
});
|
||||
this.$emit('on-duplicate-chart-block', this.data.id,response.data);
|
||||
}else {
|
||||
if(response.msg){
|
||||
this.$message.error(response.msg);
|
||||
}else if(response.error){
|
||||
this.$message.error(response.error);
|
||||
}else {
|
||||
this.$message.error(response);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 全屏查看
|
||||
showAllScreen() {
|
||||
this.dropdownMenuShow=false;
|
||||
// 初始化同步时间
|
||||
this.searchTime = [];
|
||||
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
|
||||
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
|
||||
this.$refs.calendarPanel.setCustomTime(this.searchTime);
|
||||
|
||||
this.seriesItemScreen = this.seriesItem;
|
||||
this.screenModal = true;
|
||||
if(this.$refs.topologyFull){
|
||||
setTimeout(()=>{
|
||||
this.$refs.topologyFull.resetAllNodes();
|
||||
})
|
||||
}
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
|
||||
if(errorMsg && errorMsg!==''){
|
||||
this.isError = true;
|
||||
this.errorContent = errorMsg;
|
||||
}else {
|
||||
this.isError = false;
|
||||
this.errorContent = '';
|
||||
}
|
||||
if(area==='showFullScreen'){//全屏按时间查询
|
||||
this.data = chartItem;
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||||
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time;
|
||||
// this.seriesItemScreen = seriesItem;
|
||||
this.storedScreanTableData=seriesItem;
|
||||
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
|
||||
this.screenPageObj.total=this.storedScreanTableData.length;
|
||||
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
|
||||
this.endLoading('screen');
|
||||
} else{
|
||||
//设置高度 chart-table
|
||||
this.divFirstShow = true;
|
||||
this.$nextTick(() => {
|
||||
this.resize(chartItem);
|
||||
});
|
||||
this.firstShow = true; // 展示操作按键
|
||||
|
||||
this.panelIdInner = panelId;
|
||||
this.data = chartItem;
|
||||
this.unit = chartDataFormat.getUnit(this.data.unit);
|
||||
this.storedTableData =seriesItem;
|
||||
this.storedScreanTableData=seriesItem;
|
||||
this.storedTableData=Object.assign([],this.storedTableData.reverse());
|
||||
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
|
||||
this.pageObj.total=this.storedTableData.length;
|
||||
this.screenPageObj.total=this.storedScreanTableData.length;
|
||||
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
|
||||
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
|
||||
if (filter) { // 保存数据,用于同步时间
|
||||
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
|
||||
this.searchTime[1] = filter.end_time;
|
||||
this.oldSearchTime[0] = this.searchTime[0];
|
||||
this.oldSearchTime[1] = this.searchTime[1];
|
||||
}
|
||||
this.endLoading();
|
||||
}
|
||||
},
|
||||
dealLegendAlias:function(legend,expression){
|
||||
if(/\{\{.+\}\}/.test(expression)){
|
||||
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
|
||||
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
|
||||
let reg=new RegExp(label+'=".+?"')
|
||||
let value=null;
|
||||
if(reg.test(legend)){
|
||||
let find=legend.match(reg)[0];
|
||||
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
|
||||
}
|
||||
return value?value:label;
|
||||
})
|
||||
return labelValue
|
||||
}else{
|
||||
return expression;
|
||||
}
|
||||
},
|
||||
// 获取格式
|
||||
getNumStr(num) {
|
||||
if (num) {
|
||||
if (num >= 1000) {
|
||||
const kbNum = num / 1000;
|
||||
if (kbNum >= 1000) {
|
||||
const mbNum = kbNum / 1000;
|
||||
if (mbNum >= 1000) {
|
||||
const gbNum = mbNum / 1000;
|
||||
if (gbNum >= 1000) {
|
||||
const tbNum = gbNum / 1000;
|
||||
if (tbNum >= 1000) {
|
||||
const pbNum = tbNum / 1000;
|
||||
return `${pbNum.toFixed(2)}PB`;
|
||||
}
|
||||
return `${tbNum.toFixed(2)}TB`;
|
||||
}
|
||||
return `${gbNum.toFixed(2)}GB`;
|
||||
}
|
||||
return `${mbNum.toFixed(2)}MB`;
|
||||
}
|
||||
return `${kbNum.toFixed(2)}KB`;
|
||||
}
|
||||
return num.toFixed(2);
|
||||
}
|
||||
return num;
|
||||
},
|
||||
// 设置拓扑图数据
|
||||
setTopologyData(nodesArr,edgesArr){
|
||||
this.nodesArray=nodesArr;
|
||||
this.edgesArray=edgesArr;
|
||||
},
|
||||
//退出全屏
|
||||
exitFull(){
|
||||
this.screenModal = false;
|
||||
this.$refs.topology.resetAllNodes()
|
||||
}
|
||||
},
|
||||
|
||||
mounted(){
|
||||
this.firstLoad = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import './chart.scss';
|
||||
</style>
|
||||
<style scoped>
|
||||
.table-container{
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
.nz-icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
.resize-box .vis-network .text-right{
|
||||
text-align: right;
|
||||
}
|
||||
.resize-box .vis-network .chartTitle .chart-title{
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<div class="main-box">
|
||||
<div class="main-box-title">asset</div>
|
||||
<div class="main-box-content">
|
||||
<div class="content-box">
|
||||
<span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
|
||||
<span class="float-right">123</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title"><i class="el-icon-download colorFFF bgEC7F66"></i>down</span>
|
||||
<span class="float-right">123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-box">
|
||||
<div class="main-box-title">endpoint</div>
|
||||
<div class="main-box-content">
|
||||
<div class="content-box">
|
||||
<span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
|
||||
<span class="float-right">123</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title"><i class="el-icon-download colorFFF bgEC7F66"></i>down</span>
|
||||
<span class="float-right">123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-box">
|
||||
<div class="main-box-title">alert message</div>
|
||||
<div class="main-box-content">
|
||||
<div class="content-box">
|
||||
<span class="content-title"><i class="nz-icon nz-icon-jiantou-top colorFFF bg23BF9A"></i>up</span>
|
||||
<span class="float-right">123</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title"><i class="nz-icon nz-icon-jiantou-right colorFFF bg3C92F1"></i>down</span>
|
||||
<span class="float-right">123</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title"><i class="nz-icon nz-icon-jiantou-down colorFFF bgEC7F66"></i>down</span>
|
||||
<span class="float-right">123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"popDataMain",
|
||||
props:{
|
||||
moduleId:{},
|
||||
projectId:{},
|
||||
},
|
||||
watch:{},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.moduleId,this.projectId)
|
||||
},
|
||||
methods:{},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-content{
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.main-box{
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
width: 173px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.main-box-title{
|
||||
background: #EFEFEF;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.main-box-content{
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
padding: 12px;
|
||||
}
|
||||
.main-box-content .content-box:not(:last-child){
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.content-title{
|
||||
color: #666666;
|
||||
}
|
||||
.colorFFF{
|
||||
color: #FFFFFF;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
font-size: 10px;
|
||||
margin-right: 5px;
|
||||
line-height: 1;
|
||||
}
|
||||
.bg23BF9A{
|
||||
background: #23BF9A;
|
||||
}
|
||||
.bgEC7F66{
|
||||
background: #EC7F66;
|
||||
}
|
||||
.bg3C92F1{
|
||||
background: #3C92F1;
|
||||
}
|
||||
</style>
|
||||
@@ -9,7 +9,6 @@
|
||||
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
|
||||
</div>
|
||||
</template>
|
||||
@@ -187,5 +186,6 @@
|
||||
flex: 1;
|
||||
min-height: 800px;
|
||||
width: calc(100% - 20px);
|
||||
min-width: 1190px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -66,7 +66,11 @@
|
||||
</i>
|
||||
<!--悬浮network部分-->
|
||||
<div class="network-info">
|
||||
<div v-if="popDataShow.main">123</div>
|
||||
<div v-if="popDataShow.main">
|
||||
<popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
|
||||
</div>
|
||||
<div v-if="popDataShow.total">total</div>
|
||||
<div v-if="popDataShow.info">info</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -93,6 +97,18 @@
|
||||
@del="lineDel"
|
||||
></add-line>
|
||||
</transition>
|
||||
<!--endpoint-->
|
||||
<transition name="right-box">
|
||||
<div v-if="popDataShow.endpoint">endpoint</div>
|
||||
</transition>
|
||||
<!--endpoint-->
|
||||
<transition name="right-box">
|
||||
<div v-if="popDataShow.asset">asset</div>
|
||||
</transition>
|
||||
<!--alert-->
|
||||
<transition name="right-box">
|
||||
<div v-if="popDataShow.alert">alert</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -100,11 +116,13 @@
|
||||
import Vis from 'vis'
|
||||
import addNode from './addNode'
|
||||
import addLine from './addLine'
|
||||
import popDataMain from './popData/popDataMain'
|
||||
export default {
|
||||
name:"topology",
|
||||
components: {
|
||||
'add-model':addNode,
|
||||
'add-line':addLine,
|
||||
'popDataMain':popDataMain,
|
||||
},
|
||||
props:{
|
||||
nodesArray:{
|
||||
@@ -475,25 +493,7 @@
|
||||
this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMove);
|
||||
},
|
||||
modelTopMouseMove(e){
|
||||
let position={
|
||||
x:e.clientX-this.relativeModelTop.x,
|
||||
y:e.clientY-this.relativeModelTop.y
|
||||
};
|
||||
this.$refs['modelTopId'+this.index][0].style.top=position.y+'px';
|
||||
this.$refs['modelTopId'+this.index][0].style.left=position.x+'px';
|
||||
// {top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px'
|
||||
let cancvs=this.network.DOMtoCanvas({
|
||||
x:position.x+26,
|
||||
y:position.y+80-(50*(1-this.zoom)),
|
||||
});
|
||||
this.network.moveNode(this.selNodeId,cancvs.x,cancvs.y);
|
||||
let selItem = this.nodesArray.find((item)=>item.id===this.selNodeId);
|
||||
selItem.x=cancvs.x;
|
||||
selItem.y=cancvs.y;
|
||||
this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
|
||||
if(this.networkPopShow){
|
||||
this.setPopPosition(this.selNodeId);
|
||||
}
|
||||
|
||||
},
|
||||
modelTopClick(item,index){
|
||||
this.index=index;
|
||||
@@ -521,7 +521,7 @@
|
||||
alert:false,
|
||||
main:false,
|
||||
};
|
||||
if(key){
|
||||
if(key&&!this.editVisNetwork){
|
||||
this.popDataShow[key]=true;
|
||||
}
|
||||
},
|
||||
@@ -658,6 +658,7 @@
|
||||
/*background: #fff;*/
|
||||
padding: 0 3px;
|
||||
line-height: 32px;
|
||||
|
||||
}
|
||||
.network-pop .nz-icon-hexagonBorder{
|
||||
position: absolute;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
|
||||
</span>
|
||||
<span>
|
||||
<i class="nz-icon nz-icon-edit float-right" @click="editVisNetwork=!editVisNetwork"></i>
|
||||
<i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(!editVisNetwork)"></i>
|
||||
<!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
|
||||
<!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
|
||||
</span>
|
||||
@@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div class="vis-network-content">
|
||||
<!--project主要信息-->
|
||||
<div class="facade-top" v-if="!editVisNetwork&&nodesArray.length">
|
||||
<div class="facade-top" v-if="!editVisNetwork">
|
||||
<div class="facade-top-left" v-loading="projectInfo.loading">
|
||||
<div class="facade-top-title">
|
||||
{{projectInfo.title}}
|
||||
@@ -163,6 +163,7 @@
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
firstLoad:false,
|
||||
//其他
|
||||
isError:false,
|
||||
nodesArray:[],
|
||||
@@ -193,6 +194,9 @@
|
||||
},
|
||||
editVisNetworkChange(flag){
|
||||
this.editVisNetwork=flag;
|
||||
if(flag){
|
||||
this.$refs.topology.popDataShowUpdate();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user