feat：修改样式 50%
This commit is contained in:
zhangyu
@@ -951,6 +951,7 @@ const cn = {
|
||||
selTwoNode:'请选择两个模块',
|
||||
save:'保存',
|
||||
cancel:'取消',
|
||||
preview:'预览',
|
||||
addLine:'添加连线',
|
||||
editLine:'编辑连线',
|
||||
lineName:'连线名称',
|
||||
|
||||
@@ -957,6 +957,7 @@ const en = {
|
||||
selTwoNode:'Please select two module',
|
||||
save:'save',
|
||||
cancel:'cancel',
|
||||
preview:'preview',
|
||||
addLine:'Add line',
|
||||
editLine:'Edit line',
|
||||
lineName:'Line Name',
|
||||
|
||||
@@ -107,22 +107,62 @@
|
||||
</span>
|
||||
</el-row>
|
||||
<!--value mapping-->
|
||||
<el-row class="value-mapping-title">
|
||||
<el-col>level</el-col>
|
||||
<el-col>color</el-col>
|
||||
<el-col>value</el-col>
|
||||
<el-col>animation</el-col>
|
||||
<el-col></el-col>
|
||||
</el-row>
|
||||
<el-row class="value-mapping-content">
|
||||
<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
|
||||
<el-col>level</el-col>
|
||||
<el-col>color</el-col>
|
||||
<el-col>value</el-col>
|
||||
<el-col>animation</el-col>
|
||||
<el-col></el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<!--<el-row class="value-mapping-title">-->
|
||||
<!--<el-col>level</el-col>-->
|
||||
<!--<el-col>color</el-col>-->
|
||||
<!--<el-col>value</el-col>-->
|
||||
<!--<el-col>animation</el-col>-->
|
||||
<!--<el-col></el-col>-->
|
||||
<!--</el-row>-->
|
||||
<!--<el-row class="value-mapping-content">-->
|
||||
<!--<el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">-->
|
||||
<!--<el-col>level</el-col>-->
|
||||
<!--<el-col>color</el-col>-->
|
||||
<!--<el-col>value</el-col>-->
|
||||
<!--<el-col>animation</el-col>-->
|
||||
<!--<el-col></el-col>-->
|
||||
<!--</el-row>-->
|
||||
<!--</el-row>-->
|
||||
<el-table v-model="selection.pen.data.valueMapping">
|
||||
<el-table-column
|
||||
prop="level"
|
||||
:label="'level'"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{scope.$index}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="color"
|
||||
:label="'color'"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="value"
|
||||
:label="'value'"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.value" @change="valueMappingValueChange(scope.$index, scope.row)"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="animation"
|
||||
:label="'animation'"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
<template slot="header" slot-scope="scope">
|
||||
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="valueMappingDel(scope.$index, scope.row)">Delete</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div @click="valueMappingAdd()">add</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="属性" name="4">
|
||||
@@ -506,115 +546,112 @@
|
||||
</el-tabs>
|
||||
|
||||
|
||||
<div v-if="selection.pens" class="">
|
||||
<el-collapse v-model="activeNames">
|
||||
<!--对齐方式-->
|
||||
<el-collapse-item title="对齐" name="1" v-if="selection.pens">
|
||||
<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">
|
||||
<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"
|
||||
@click="onNodesAlign(item.value)"></i>
|
||||
</label>
|
||||
</el-collapse-item>
|
||||
<!--排版-->
|
||||
<el-collapse-item title="排版" name="2" v-if="selection.pens">
|
||||
<div class="mt10">
|
||||
<div class="flex middle mb10">
|
||||
<label>最大宽度：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>节点宽度：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>节点高度：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>水平个数：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"
|
||||
v-model.number="layout.maxCount"
|
||||
title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>水平间距：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle mb10">
|
||||
<label>垂直间距：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"
|
||||
v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex middle">
|
||||
<label></label>
|
||||
<div class="full pr10">
|
||||
<button class="button primary" @click="onLayout">开始排版</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<!--选择多个节点-->
|
||||
<!--<div v-if="selection.pens" class="">-->
|
||||
<!--<el-collapse v-model="activeNames">-->
|
||||
<!--<!–对齐方式–>-->
|
||||
<!--<el-collapse-item title="对齐" name="1" v-if="selection.pens">-->
|
||||
<!--<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc">-->
|
||||
<!--<i :class="['iconfont','iconfontSize16',`icon-align-${item.value}`]"-->
|
||||
<!--@click="onNodesAlign(item.value)"></i>-->
|
||||
<!--</label>-->
|
||||
<!--</el-collapse-item>-->
|
||||
<!--<!–排版–>-->
|
||||
<!--<el-collapse-item title="排版" name="2" v-if="selection.pens">-->
|
||||
<!--<div class="mt10">-->
|
||||
<!--<div class="flex middle mb10">-->
|
||||
<!--<label>最大宽度：</label>-->
|
||||
<!--<div class="full pr10">-->
|
||||
<!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
|
||||
<!--v-model.number="layout.maxWidth" title="超出最大宽度换行"></el-input-number>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex middle mb10">-->
|
||||
<!--<label>节点宽度：</label>-->
|
||||
<!--<div class="full pr10">-->
|
||||
<!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
|
||||
<!--v-model.number="layout.nodeWidth" title="固定每个节点的宽度"></el-input-number>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex middle mb10">-->
|
||||
<!--<label>节点高度：</label>-->
|
||||
<!--<div class="full pr10">-->
|
||||
<!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
|
||||
<!--v-model.number="layout.nodeHeight" title="固定每个节点的高度"></el-input-number>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex middle mb10">-->
|
||||
<!--<label>水平个数：</label>-->
|
||||
<!--<div class="full pr10">-->
|
||||
<!--<el-input-number :precision="2" type="number" controls-position="right" class="input" size="small"-->
|
||||
<!--v-model.number="layout.maxCount"-->
|
||||
<!--title="超出最大个数，将自动计算水平间距（下面水平间距设置将无效）"></el-input-number>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex middle mb10">-->
|
||||
<!--<label>水平间距：</label>-->
|
||||
<!--<div class="full pr10">-->
|
||||
<!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
|
||||
<!--v-model.number="layout.spaceWidth" title="节点之间水平间距（px）"></el-input-number>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex middle mb10">-->
|
||||
<!--<label>垂直间距：</label>-->
|
||||
<!--<div class="full pr10">-->
|
||||
<!--<el-input-number :precision="2" controls-position="right" type="number" class="input" size="small"-->
|
||||
<!--v-model.number="layout.spaceHeight" title="节点之间垂直间距（px）"></el-input-number>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex middle">-->
|
||||
<!--<label></label>-->
|
||||
<!--<div class="full pr10">-->
|
||||
<!--<button class="button primary" @click="onLayout">开始排版</button>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</el-collapse-item>-->
|
||||
<!--</el-collapse>-->
|
||||
<!--</div>-->
|
||||
<!-- 选中为空 -->
|
||||
<div v-if="!selection.pen && !selection.pens">
|
||||
<div class="mt10">
|
||||
<div class="flex middle mb10">
|
||||
<label>文件名称：</label>
|
||||
<div class="project-title">
|
||||
Project
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<div class="project-content-title">Title</div>
|
||||
|
||||
<div class="project-content-box" style="width: 100%">
|
||||
|
||||
<div class="project-content-item">
|
||||
<label>Name：</label>
|
||||
<div class="full pr10">
|
||||
<el-input class="input" size="small" v-model="topologyData.data.name" placeholder="topo名称"></el-input>
|
||||
<el-input class="input" size="small" v-model="topologyData.data.name" placeholder="请输入名称" @change="changeTopologyOpt"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle special-select mb10">
|
||||
<label>默认线型：</label>
|
||||
<div class="full pr10">
|
||||
<el-select v-model="topologyData.data.lineName" placeholder="请选择" size="small"
|
||||
:popper-append-to-body="false"
|
||||
@change="changeTopologyOpt(topologyData.data.lineName,'lineName')">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" stroke="black" stroke-width="1">
|
||||
<path
|
||||
:d="penLineType.find((item,i)=>item.name==topologyData.data.lineName).d"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="(topologyData.data.lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
|
||||
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div class="project-content-title">Appearance</div>
|
||||
|
||||
<div class="project-content-box" style="width: 100%">
|
||||
<div class="project-content-item half">
|
||||
<label>Backgroud：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'bkColor')"
|
||||
v-model="topologyData.data.bkColor" size="mini"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<div class="project-content-item half">
|
||||
<label>Image：</label>
|
||||
<div class="full pr10 h32">
|
||||
<!--暂时是input 输入网址-->
|
||||
<el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>默认线宽：</label>
|
||||
<div class="full pr10">
|
||||
<div class="full pr10 h32">
|
||||
<el-input-number :precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
@@ -626,9 +663,63 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle special-select mb10">
|
||||
<div class="project-content-item half">
|
||||
<label>背景网格：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-switch
|
||||
v-model="topologyData.data.grid"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#ee9d3f"
|
||||
@change="changeTopologyOpt(topologyData.data.grid,'grid')">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>网格大小：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
|
||||
v-model.number="topologyData.data.gridSize"
|
||||
:readonly="readonly" required
|
||||
@change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>网格颜色：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'gridColor')"
|
||||
v-model="topologyData.data.gridColor" size="mini"
|
||||
popper-class="can-clear"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>标尺：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-switch
|
||||
v-model="topologyData.data.rule"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#ee9d3f"
|
||||
@change="changeTopologyOpt(topologyData.data.rule,'rule')">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>标尺颜色：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'ruleColor')"
|
||||
v-model="topologyData.data.ruleColor" size="mini"
|
||||
popper-class="can-clear"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-content-item half special-select">
|
||||
<label>默认开始箭头：</label>
|
||||
<div class="full pr10">
|
||||
<div class="full pr10 h32">
|
||||
<el-select v-model="topologyData.data.fromArrow" placeholder="请选择" size="small"
|
||||
:popper-append-to-body="false"
|
||||
@change="changeTopologyOpt(topologyData.data.fromArrow,'fromArrow')">
|
||||
@@ -676,9 +767,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle special-select mb10">
|
||||
<div class="project-content-item half special-select">
|
||||
<label>默认结束箭头：</label>
|
||||
<div class="full pr10">
|
||||
<div class="full pr10 h32">
|
||||
<el-select v-model="topologyData.data.toArrow" placeholder="请选择" size="small" :popper-append-to-body="false"
|
||||
@change="changeTopologyOpt('toArrow')">
|
||||
<div slot="prefix">
|
||||
@@ -724,74 +815,51 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<label>背景颜色：</label>
|
||||
<div class="full pr10">
|
||||
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'bkColor')"
|
||||
v-model="topologyData.data.bkColor" size="mini" popper-class="can-clear"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<label>背景图片：</label>
|
||||
<div class="full pr10">
|
||||
<!--暂时是input 输入网址-->
|
||||
<el-input class="input" size="small" v-model="topologyData.data.bkImage" placeholder="背景图片网址"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content-title">Appearance</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<label>背景网格：</label>
|
||||
<div class="full pr10">
|
||||
<div class="project-content-box" style="width: 100%">
|
||||
|
||||
<div class="project-content-item half">
|
||||
<label>Project Info：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-switch
|
||||
v-model="topologyData.data.grid"
|
||||
v-model="topologyData.data.projectInfo"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#ee9d3f"
|
||||
@change="changeTopologyOpt(topologyData.data.grid,'grid')">
|
||||
@change="changeTopologyOpt(topologyData.data.projectInfo,'projectInfo')">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<label>网格颜色：</label>
|
||||
<div class="full pr10">
|
||||
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'gridColor')"
|
||||
v-model="topologyData.data.gridColor" size="mini"
|
||||
popper-class="can-clear"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<label>网格大小：</label>
|
||||
<div class="full pr10">
|
||||
<el-input-number :precision="2" controls-position="right" size="small" name="x" class="input"
|
||||
v-model.number="topologyData.data.gridSize"
|
||||
:readonly="readonly" required
|
||||
@change="changeTopologyOpt(topologyData.data.gridSize,'gridSize')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<label>标尺：</label>
|
||||
<div class="full pr10">
|
||||
<div class="project-content-item half">
|
||||
<label>Alert Info：</label>
|
||||
<div class="full pr10 h32">
|
||||
<el-switch
|
||||
v-model="topologyData.data.rule"
|
||||
v-model="topologyData.data.alertInfo"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
active-color="#ee9d3f"
|
||||
@change="changeTopologyOpt(topologyData.data.rule,'rule')">
|
||||
@change="changeTopologyOpt(topologyData.data.alertInfo,'alertInfo')">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex middle mb10">
|
||||
<label>标尺颜色：</label>
|
||||
<div class="full pr10">
|
||||
<el-color-picker @active-change="(val)=>changeTopologyOpt(val,'ruleColor')"
|
||||
v-model="topologyData.data.ruleColor" size="mini"
|
||||
popper-class="can-clear"></el-color-picker>
|
||||
</div>
|
||||
|
||||
<div class="project-content-title">Link</div>
|
||||
|
||||
<div class="project-content-box" style="width: 100%">
|
||||
|
||||
<div class="project-content-item">
|
||||
<label>Url：</label>
|
||||
<div class="full pr10">
|
||||
<el-input class="input" size="small" v-model="topologyData.data.url" placeholder="请输入名称" @change="changeTopologyOpt"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -878,7 +946,7 @@
|
||||
topologyData:{
|
||||
data:{
|
||||
name:'',
|
||||
bkColor:undefined,
|
||||
bkColor:'#FFFFFF',
|
||||
bkImage:'',
|
||||
grid:false,
|
||||
gridSize:'',
|
||||
@@ -889,6 +957,9 @@
|
||||
lineWidth:1,
|
||||
fromArrow:'',
|
||||
toArrow:'triangleSolid',
|
||||
projectInfo:true,
|
||||
alertInfo:true,
|
||||
url:'',
|
||||
}
|
||||
},
|
||||
pen:{
|
||||
@@ -997,28 +1068,35 @@
|
||||
deep:true,
|
||||
immediate:true,
|
||||
},
|
||||
'topologyData.data':{
|
||||
handler(n){
|
||||
setTimeout(()=>{
|
||||
let data=getTopology(this.index).data;
|
||||
Object.keys(this.topologyData.data).forEach((key)=>{
|
||||
data[key]=this.topologyData.data[key];
|
||||
});
|
||||
getTopology(this.index).render();
|
||||
})
|
||||
// 'topologyData.data':{
|
||||
// handler(n){
|
||||
// setTimeout(()=>{
|
||||
// let dataOption=getTopology(this.index).data;
|
||||
// Object.keys(this.topologyData.data).forEach((key)=>{
|
||||
// dataOption[key]=this.topologyData.data[key];
|
||||
// });
|
||||
// getTopology(this.index).render();
|
||||
// })
|
||||
// },
|
||||
// deep:true,
|
||||
// immediate:false,
|
||||
// }
|
||||
},
|
||||
deep:true,
|
||||
immediate:true,
|
||||
}
|
||||
created(){
|
||||
let dataOption=getTopology(this.index).data;
|
||||
console.log(dataOption);
|
||||
Object.keys(this.topologyData.data).forEach((key)=>{
|
||||
console.log()
|
||||
this.topologyData.data[key]=(JSON.stringify(dataOption[key])?dataOption[key]:this.topologyData.data[key]);
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
this.queryMetrics();
|
||||
let dataOption=getTopology(this.index).data;
|
||||
Object.keys(this.topologyData.data).forEach((key)=>{
|
||||
this.topologyData.data[key]=dataOption[key]?dataOption[key]:this.topologyData.data[key]
|
||||
});
|
||||
this.topologyData.data.grid= !!getTopology(this.index).data.grid;
|
||||
this.topologyData.data.rule= !!getTopology(this.index).data.rule;
|
||||
// this.topologyData.data.grid= !!dataOption.grid;
|
||||
// this.topologyData.data.rule= !!dataOption.rule;
|
||||
// this.topologyData.data.projectInfo= !!dataOption.projectInfo;
|
||||
// this.topologyData.data.alertInfo= !!dataOption.alertInfo;
|
||||
console.log(this.topologyData);
|
||||
},
|
||||
updated(){
|
||||
if(!this.selection.pen){//没选中node line返回
|
||||
@@ -1158,11 +1236,19 @@
|
||||
this.onChange();
|
||||
},
|
||||
changeTopologyOpt(val,key){
|
||||
this.topologyData.data[key]=this.colorRGBtoHex(val);
|
||||
// this.topologyData.data[key]=this.colorRGBtoHex(val);
|
||||
// getTopology(this.index).data[key]=val;
|
||||
// getTopology(this.index).render();
|
||||
this.topologyData.data[key]=val;
|
||||
Object.keys(this.topologyData.data).forEach((key1)=>{
|
||||
getTopology(this.index).data[key1]=this.topologyData.data[key1];
|
||||
});
|
||||
// console.log(dataOption[key]);
|
||||
getTopology(this.index).render();
|
||||
console.log(123213123);
|
||||
},
|
||||
colorRGBtoHex(color){//获取颜色16进制数
|
||||
return color;
|
||||
if(!color){
|
||||
return ""
|
||||
}
|
||||
@@ -1217,6 +1303,23 @@
|
||||
});
|
||||
}
|
||||
},
|
||||
valueMappingAdd(){
|
||||
this.selection.pen.data.valueMapping.push({
|
||||
color:{
|
||||
border:'#000',
|
||||
bac:'#fff',
|
||||
text:'#000',
|
||||
},
|
||||
animation:'upDown',
|
||||
value:'',
|
||||
});
|
||||
},
|
||||
valueMappingValueChange(index,row){
|
||||
console.log(index,row)
|
||||
},
|
||||
valueMappingDel(index,row){
|
||||
console.log(index,row)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1243,6 +1346,51 @@
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.project-title{
|
||||
background: #eeeeee;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius:10px 0 0 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.project-content{
|
||||
margin: 10px;
|
||||
.project-content-title{
|
||||
background: #F6F6F6;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
height: 32px;
|
||||
line-height: 31px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.project-content-box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.half.project-content-item{
|
||||
width: calc(50% - 15px);
|
||||
height: 64px;
|
||||
}
|
||||
.project-content-item{
|
||||
padding-left: 10px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
label{
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
.h32{
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .el-tabs.el-tabs--card {
|
||||
height: 100%;
|
||||
|
||||
@@ -1281,7 +1429,6 @@
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.special-select .el-select.el-select--small {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1310,9 +1457,9 @@
|
||||
.props-box {
|
||||
position: relative;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 35px);
|
||||
padding-left: 10px;
|
||||
|
||||
height: calc(100% - 20px);
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 20px;
|
||||
.iconfont {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,28 @@
|
||||
<template>
|
||||
<div class="tool-top">
|
||||
<div class="top-tool-item" @click="undo"> 撤销 </div>
|
||||
<div class="top-tool-item" @click="redo"> 重做 </div>
|
||||
<div class="top-tool-item" @click="centerView"> 居中</div>
|
||||
<div class="top-tool-item" @click="fitView"> 自适应</div>
|
||||
<div class="top-tool-item"> 缩放大小 <el-input-number size="mini" v-model="option.scale" @change="scale" :min="0.25" :max="5" :step="0.2" :precision="2"></el-input-number> </div>
|
||||
<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>
|
||||
<div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>
|
||||
<div class="tool-top" id="tool-top">
|
||||
<div id="undo" :class="['top-tool-item',cachesIndex>0?'':'top-tool-item-disabled']" @click="undo"> <i class="nz-icon nz-icon-jiantou-left" /> </div>
|
||||
<div id="redo" :class="['top-tool-item',redoFlag?'':'top-tool-item-disabled']" @click="redo"> <i class="nz-icon nz-icon-jiantou-right" /> </div>
|
||||
<!--<div class="top-tool-item" @click="centerView"> 居中</div>-->
|
||||
<!--<div class="top-tool-item" @click="fitView"> 自适应</div>-->
|
||||
<!--<div :class="['top-tool-item',toolShow.node?'tool-item-active':'']" @click="toolShowChange('node')"> 节点工具 </div>-->
|
||||
<!--<div :class="['top-tool-item',toolShow.attr?'tool-item-active':'']" @click="toolShowChange('attr')"> 属性工具 </div>-->
|
||||
<!--<div> 保存为图片 </div>-->
|
||||
<div class="top-tool-item" @click="del"> 删除 </div>
|
||||
<div class="top-tool-item" @click="clear"> 清空画布 </div>
|
||||
<div class="top-tool-item" @click="del"> <i class="nz-icon nz-icon-delete"/> </div>
|
||||
<div class="top-tool-item top-tool-item-scale">
|
||||
<el-input-number
|
||||
size="mini"
|
||||
v-model="scaleNum"
|
||||
:max="500"
|
||||
:min="25"
|
||||
:step="20"
|
||||
:precision="0"
|
||||
id="scaleNum"
|
||||
@change="scale">
|
||||
</el-input-number>
|
||||
<span class="percent">%</span>
|
||||
</div>
|
||||
<!--<div class="top-tool-item" @click="clear"> 清空画布 </div>-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -25,8 +38,9 @@
|
||||
lineWidth:1,
|
||||
fromArrow:'',
|
||||
toArrow:'triangleSolid',
|
||||
scale:1,
|
||||
scale:100,
|
||||
},
|
||||
scaleNum:100,
|
||||
penLineType:[
|
||||
{d:'M5 14 a100,50 0 0,1 85,0',"stroke-dasharray":"",name:'curve'},
|
||||
{d:'M5 8 l40 0 l0 12 l40 0',"stroke-dasharray":"",name:'polyline'},
|
||||
@@ -40,6 +54,7 @@
|
||||
{d:'M5 14 l85 0',fill:'#000000', stroke:"",'stroke-width':"",cx:"10",cy:"14",r:"5",name:'circleSolid'},
|
||||
{d:'M5 14 l85 0',fill:'#ffffff', stroke:"#000000",'stroke-width':"1",cx:"10",cy:"14",r:"5",name:'circle'},
|
||||
],
|
||||
redoFlag:false,
|
||||
}
|
||||
},
|
||||
props:{
|
||||
@@ -54,12 +69,20 @@
|
||||
toolShow:{
|
||||
type:Object,
|
||||
require:true
|
||||
},
|
||||
cachesIndex:{
|
||||
type:Number,
|
||||
require:true,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let dataOption=getTopology(this.index).data;
|
||||
Object.keys(this.option).forEach(key=>{
|
||||
if(key==='scale'){
|
||||
this.scaleNum=(JSON.stringify(dataOption[key])?dataOption[key]*100:this.scaleNum)
|
||||
}else{
|
||||
this.option[key]=(dataOption[key]?dataOption[key]:this.option[key]);
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
@@ -69,6 +92,9 @@
|
||||
},
|
||||
undo(){//撤销
|
||||
getTopology(this.index).undo();
|
||||
setTimeout(()=>{
|
||||
this.redoFlag=true;
|
||||
},200)
|
||||
},
|
||||
redo(){//重做
|
||||
getTopology(this.index).redo();
|
||||
@@ -79,8 +105,8 @@
|
||||
fitView(){//自适应画布大小
|
||||
getTopology(this.index).fitView();
|
||||
},
|
||||
scale(){
|
||||
getTopology(this.index).scaleTo(this.option.scale);
|
||||
scale(val){
|
||||
getTopology(this.index).scaleTo(val/100);
|
||||
},
|
||||
del(){
|
||||
let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens
|
||||
@@ -99,20 +125,60 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.tool-top {
|
||||
border: 1px solid #1a1a1a;
|
||||
border-radius: 2px;
|
||||
display: inline-flex;
|
||||
.nz-icon{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
.tool-top > div{
|
||||
padding: 3px 5px;
|
||||
}
|
||||
.tool-top > div:not(:last-child){
|
||||
border-right: 1px solid #1a1a1a ;
|
||||
}
|
||||
.top-tool-item{
|
||||
cursor: pointer;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: 2px;
|
||||
padding: 8px 11px;
|
||||
line-height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.top-tool-item-scale{
|
||||
margin-left: 40px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
.percent{
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 68px;
|
||||
font-size:12px ;
|
||||
}
|
||||
/deep/ .el-input--mini{
|
||||
input{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
/deep/ .el-input-number--mini {
|
||||
width: 111px;
|
||||
}
|
||||
/deep/ .el-input-number__decrease,/deep/ .el-input-number__increase{
|
||||
border: none;
|
||||
border-radius: 100%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
/deep/ .el-input-number__decrease{
|
||||
margin-left: 5px;
|
||||
}
|
||||
/deep/ .el-input-number__increase{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.top-tool-item-disabled{
|
||||
color: #CECECE;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.tool-item-active{
|
||||
background: #1a1a1a;
|
||||
|
||||
@@ -8,51 +8,12 @@
|
||||
<div v-show="editTopologyFlag" class="edit-topologyLine">
|
||||
<!--工具栏-->
|
||||
<span class="project-topology-tool">
|
||||
<topology-top-tool v-if="editTopologyFlag" :selection.sync="props" @del="delPen" :index="topologyIndex"
|
||||
ref="topTool" @toolShowChange="toolShowChange" :toolShow="toolShow">
|
||||
|
||||
</topology-top-tool>
|
||||
</span>
|
||||
<span>
|
||||
<button @click="saveTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new"
|
||||
v-has="'project_topo_save'" :disabled="prevent_opt.save"
|
||||
:class="{'nz-btn-disabled':prevent_opt.save}">
|
||||
{{$t('project.topology.save')}}
|
||||
</button>
|
||||
<button @click="cancelTopology" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new">
|
||||
{{$t('project.topology.cancel')}}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<span class="edit-topologyLine" v-show="!editTopologyFlag">
|
||||
<button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
|
||||
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
|
||||
>
|
||||
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
|
||||
</button>
|
||||
<pick-time v-show="!editTopologyFlag" :showTimePicker="false" class="float-right pickTime"
|
||||
:refresh-data-func="refreshTopology" v-model="searchTime" :use-chart-unit="false"
|
||||
ref="pickTime"></pick-time>
|
||||
</span>
|
||||
</div>
|
||||
<div class="page">
|
||||
<!--拖拽节点-->
|
||||
<VueDraggableResizable
|
||||
v-show="editTopologyFlag&&toolShow.node"
|
||||
class="tools"
|
||||
:parent="true"
|
||||
:resizable="true"
|
||||
:draggable="dragFlag"
|
||||
:x="toolShow.nodeCord[0]"
|
||||
:y="toolShow.nodeCord[1]"
|
||||
:min-width="250"
|
||||
:min-height="200"
|
||||
:w="250"
|
||||
:h="toolShow.height-100"
|
||||
drag-handle=".drag-header"
|
||||
>
|
||||
<el-card shadow="hover" style="height:100%;width: 100%;overflow-y: auto">
|
||||
<div class="drag-header">——</div>
|
||||
<el-dropdown trigger="click" size="small" placement="bottom-start">
|
||||
<span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i class="nz-icon nz-icon-arrow-down"></i></span>
|
||||
<el-dropdown-menu slot="dropdown" @click="dropdownClick">
|
||||
<div style="height: 450px">
|
||||
<el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto" class="project-topology-add-node">
|
||||
<!--<div class="drag-header">——</div>-->
|
||||
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index">
|
||||
<el-collapse-item :title="item.group" :name="item.group">
|
||||
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons">
|
||||
@@ -70,7 +31,9 @@
|
||||
</a>
|
||||
<span v-if="item.group==='自定义图片'" class="delIcon" @click="delImg(btn)">x</span>
|
||||
</div>
|
||||
<div v-if="item.group==='自定义图片'" class="buttons">
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action=" "
|
||||
@@ -79,52 +42,110 @@
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:auto-upload="true"
|
||||
list-type="picture-card"
|
||||
style="width: 50px;height: 50px"
|
||||
style="width: 284px;height: 30px"
|
||||
>
|
||||
<div class="upload-icon-box">
|
||||
<i class="el-icon-plus"></i>
|
||||
<span style="font-size: 12px">{{$t('project.topology.upload')}}</span>
|
||||
</div>
|
||||
|
||||
<span>
|
||||
Upload custom picture
|
||||
</span>
|
||||
</el-upload>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</VueDraggableResizable>
|
||||
<!--画布部分-->
|
||||
<div id="topology-canvas" class="full"></div>
|
||||
<!--设置属性-->
|
||||
<VueDraggableResizable
|
||||
v-if="editTopologyFlag"
|
||||
v-show="toolShow.attr"
|
||||
class="props"
|
||||
:parent="true"
|
||||
:resizable="true"
|
||||
:draggable="dragFlag"
|
||||
:x="toolShow.attrCord[0]"
|
||||
:y="toolShow.attrCord[1]"
|
||||
:min-width="340"
|
||||
:max-width="340"
|
||||
:min-height="200"
|
||||
:w="340"
|
||||
:h="toolShow.height-100"
|
||||
drag-handle=".drag-header"
|
||||
:handles="['tm','bm']"
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<div class="flex middle special-select mb10" style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px">
|
||||
<div class="full pr10">
|
||||
<el-select v-model="lineName" placeholder="请选择" size="small"
|
||||
:popper-append-to-body="false"
|
||||
@change="changeTopologyOpt(lineName,'lineName')">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" stroke="black" stroke-width="1">
|
||||
<path
|
||||
:d="penLineType.find((item,i)=>item.name==lineName).d"
|
||||
>
|
||||
<el-card shadow="hover" style="height: 100%;width: 325px;overflow-y: auto;padding: 0 0 0 0">
|
||||
<div class="drag-header">——</div>
|
||||
<CanvasProps :selection.sync="props" @change="onUpdateProps" @animate="animateCanvas"
|
||||
:index="topologyIndex" @del="delPen" :modules="modules" ref="CanvasProps"></CanvasProps>
|
||||
</el-card>
|
||||
</VueDraggableResizable>
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
|
||||
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<topology-top-tool
|
||||
v-if="editTopologyFlag"
|
||||
:selection.sync="props"
|
||||
@del="delPen"
|
||||
:index="topologyIndex"
|
||||
ref="topTool"
|
||||
@toolShowChange="toolShowChange"
|
||||
:cachesIndex="cachesIndex"
|
||||
:toolShow="toolShow">
|
||||
</topology-top-tool>
|
||||
|
||||
</span>
|
||||
<span class="float-right">
|
||||
<button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
|
||||
v-has="'project_topo_save'" :disabled="prevent_opt.save"
|
||||
:class="{'nz-btn-disabled':prevent_opt.save}">
|
||||
{{$t('project.topology.preview')}}
|
||||
</button>
|
||||
<button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
|
||||
v-has="'project_topo_save'" :disabled="prevent_opt.save"
|
||||
:class="{'nz-btn-disabled':prevent_opt.save}">
|
||||
{{$t('project.topology.save')}}
|
||||
</button>
|
||||
<button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
|
||||
{{$t('project.topology.cancel')}}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<span class="edit-topologyLine float-right" style="padding-top: 5px" v-show="!editTopologyFlag">
|
||||
<button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right pickTime"
|
||||
style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button"
|
||||
>
|
||||
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
|
||||
</button>
|
||||
<pick-time v-show="!editTopologyFlag" :showTimePicker="false" class="float-right pickTime"
|
||||
:refresh-data-func="refreshTopology" v-model="searchTime" :use-chart-unit="false"
|
||||
ref="pickTime"></pick-time>
|
||||
</span>
|
||||
</div>
|
||||
<div class="page">
|
||||
<!--画布部分-->
|
||||
<div id="topology-canvas" class="full" ref="topology-canvas"></div>
|
||||
<!--设置属性-->
|
||||
<div class="props" v-if="editTopologyFlag&&toolShow.attr">
|
||||
<CanvasProps :selection.sync="props"
|
||||
@change="onUpdateProps"
|
||||
@animate="animateCanvas"
|
||||
:index="topologyIndex"
|
||||
@del="delPen"
|
||||
:modules="modules"
|
||||
ref="CanvasProps">
|
||||
</CanvasProps>
|
||||
</div>
|
||||
<!--所有节点上的小图标-->
|
||||
<div v-for="(item,index) in nodesArr"
|
||||
:style="{position: 'absolute',top:item.rect.y - 48+'px',left:item.rect.center.x - 24 +'px'}" v-if="!editTopologyFlag"
|
||||
:style="{position: 'absolute',top:item.rect.y - 48+'px',left:item.rect.center.x - 24 +'px'}"
|
||||
v-if="!editTopologyFlag"
|
||||
class="network-pop"
|
||||
>
|
||||
|
||||
<i :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.error&&!item.data.show,'model-error-active':item.data.error&&item.data.show}"
|
||||
<i
|
||||
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.error&&!item.data.show,'model-error-active':item.data.error&&item.data.show}"
|
||||
:ref="'modelTopId'+index"
|
||||
@click="showNodeTools(index)"
|
||||
>
|
||||
@@ -153,15 +174,15 @@
|
||||
<topoTooltip :chartDataParent="chartData"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-bottom" v-if="editTopologyFlag">
|
||||
<div class="title">小提示</div>
|
||||
<ul class="group">
|
||||
<li>编辑时：</li>
|
||||
<li>1.Ctrl + 鼠标移动：移动整个画布</li>
|
||||
<li>2.Ctrl + 鼠标滚轮：缩放</li>
|
||||
<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--<div class="left-bottom" v-if="editTopologyFlag">-->
|
||||
<!--<div class="title">小提示</div>-->
|
||||
<!--<ul class="group">-->
|
||||
<!--<li>编辑时：</li>-->
|
||||
<!--<li>1.Ctrl + 鼠标移动：移动整个画布</li>-->
|
||||
<!--<li>2.Ctrl + 鼠标滚轮：缩放</li>-->
|
||||
<!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
<!--悬浮network部分-->
|
||||
<div class="network-info">
|
||||
<div v-if="popDataShow.main">
|
||||
@@ -198,7 +219,20 @@
|
||||
<script>
|
||||
import {Topology,Node,Line,registerNode} from '@topology/core';
|
||||
import * as FileSaver from 'file-saver';
|
||||
import {Tools,canvasRegister,imageTemp,myShape,myAnchors,myIconRect,myTextRect,onChangeAnimate,onChangeAnimateLine,changeImage,myCubec,myCubeAnchors} from './L5/services/canvas.js';
|
||||
import {
|
||||
Tools,
|
||||
canvasRegister,
|
||||
imageTemp,
|
||||
myShape,
|
||||
myAnchors,
|
||||
myIconRect,
|
||||
myTextRect,
|
||||
onChangeAnimate,
|
||||
onChangeAnimateLine,
|
||||
changeImage,
|
||||
myCubec,
|
||||
myCubeAnchors
|
||||
} from './L5/services/canvas.js';
|
||||
// 注册到画布
|
||||
registerNode('rectangleImg',myShape,myAnchors,myIconRect,myTextRect);
|
||||
registerNode('myCube',myCubec,myCubeAnchors,null,null);
|
||||
@@ -218,6 +252,7 @@
|
||||
import topoTooltip from "./L5/topoTooltip";
|
||||
import bus from "../../../libs/bus";
|
||||
import axios from 'axios';
|
||||
|
||||
const canvasOptions={
|
||||
rotateCursor:'/img/rotate.cur',
|
||||
translateKey:'None',
|
||||
@@ -272,7 +307,13 @@
|
||||
timer3:null,//处理tooltip的显示定时器
|
||||
nodesArr:[],
|
||||
popData:[
|
||||
{top:'-40px', left:'-21px',className:'nz-icon-endpoint',id:'endpoint',title:this.$t('project.topology.endpoint')},
|
||||
{
|
||||
top:'-40px',
|
||||
left:'-21px',
|
||||
className:'nz-icon-endpoint',
|
||||
id:'endpoint',
|
||||
title:this.$t('project.topology.endpoint')
|
||||
},
|
||||
{top:'-40px',left:'19px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
|
||||
{top:'-4px',left:'40px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
|
||||
{top:'30px',left:'19px',className:'',id:'other',title:''},
|
||||
@@ -296,6 +337,14 @@
|
||||
},
|
||||
chartData:{},
|
||||
chartGetData:[],
|
||||
penLineType:[
|
||||
{d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:'curve'},
|
||||
{d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:'polyline'},
|
||||
{d:'M5 14 l40 0',"stroke-dasharray":"",name:'line'},
|
||||
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
|
||||
],
|
||||
lineName:'curve',
|
||||
cachesIndex:0,
|
||||
};
|
||||
},
|
||||
components:{
|
||||
@@ -377,12 +426,13 @@
|
||||
this.openTopologyData(data).then(()=>{
|
||||
//获取对应的值 给节点 连线添加对应动画
|
||||
console.log(data);
|
||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
||||
this.chartGetData=[];
|
||||
let axiosArr=[];
|
||||
let endTime=this.filterTime[1];
|
||||
let startTime=this.filterTime[0];
|
||||
let step=bus.getStep(startTime,endTime);
|
||||
data.pens.forEach(item=>{
|
||||
data.pens&&data.pens.forEach(item=>{
|
||||
console.log(item.id);
|
||||
this.chartGetData.push({id:item.id,res:[]});
|
||||
let arr=item.data.expressArr.map((ele)=>{
|
||||
@@ -396,11 +446,11 @@
|
||||
axios.all(axiosArr).then(all=>{
|
||||
all.forEach((obj,index)=>{
|
||||
this.chartGetData[index].res=obj.arr;
|
||||
if(obj.item.type===0){
|
||||
obj.item.animateType='warning';
|
||||
onChangeAnimate(obj.item,'warning')
|
||||
} else if(obj.item.type===1){
|
||||
onChangeAnimateLine(obj.item,'beads')
|
||||
if(obj.item.type===0){// 判断valueMapping 给相应的状态
|
||||
// obj.item.animateType='warning';
|
||||
// onChangeAnimate(obj.item,'warning')
|
||||
}else if(obj.item.type===1){// 判断valueMapping 给相应的状态
|
||||
// onChangeAnimateLine(obj.item,'beads')
|
||||
}
|
||||
})
|
||||
}).then(()=>{
|
||||
@@ -439,7 +489,7 @@
|
||||
getTopologyData(){
|
||||
return new Promise(resolve=>{
|
||||
let data=localStorage.getItem('data');
|
||||
data=data?JSON.parse(data):{};
|
||||
data=data?JSON.parse(data):{bkColor:'#FFFFFF'};
|
||||
this.saveData={...data};
|
||||
resolve(data);
|
||||
});
|
||||
@@ -555,15 +605,29 @@
|
||||
event.dataTransfer.setData('Text',JSON.stringify(node.data));
|
||||
},
|
||||
dragFlagChange(node){
|
||||
getTopology(this.topologyIndex).addNode(node.data)
|
||||
getTopology(this.topologyIndex).addNode(
|
||||
{
|
||||
...node.data,
|
||||
rect:{
|
||||
...node.data.rect,
|
||||
x:this.$refs['topology-canvas'].offsetWidth/2-50,
|
||||
y:this.$refs['topology-canvas'].offsetHeight/2-50
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
this.dragFlag=true;
|
||||
},100);
|
||||
},
|
||||
|
||||
onMessage(event,data){
|
||||
// console.log('onMessage',event,data);
|
||||
|
||||
console.log('onMessage',event,data);
|
||||
console.log(getTopology(this.topologyIndex))
|
||||
if(getTopology(this.topologyIndex)){
|
||||
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
||||
if(this.$refs.topTool){
|
||||
this.$refs.topTool.redoFlag=false
|
||||
};
|
||||
}
|
||||
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
|
||||
if(data.type===0&& !data.data){
|
||||
data.data={
|
||||
@@ -588,7 +652,8 @@
|
||||
aggregation:'last',
|
||||
}
|
||||
}else if(data.type==1&& !data.data){
|
||||
data.manualCps=true;
|
||||
//连线是否自动计算锚点
|
||||
// data.manualCps=true;
|
||||
data.data={
|
||||
animatePlay:data.animatePlay,
|
||||
strokeStyle:data.strokeStyle,
|
||||
@@ -1011,6 +1076,19 @@
|
||||
// canvas.open()
|
||||
},
|
||||
|
||||
dropdownClick(){
|
||||
|
||||
},
|
||||
|
||||
changeTopologyOpt(val,key){
|
||||
// this.topologyData.data[key]=this.colorRGBtoHex(val);
|
||||
// getTopology(this.index).data[key]=val;
|
||||
// getTopology(this.index).render();
|
||||
let dataOption=getTopology(this.topologyIndex).data;
|
||||
dataOption[key]=this.lineName;
|
||||
getTopology(this.topologyIndex).render();
|
||||
},
|
||||
//保存
|
||||
saveTopology(){
|
||||
let topologyData=getTopology(this.topologyIndex).data;
|
||||
let flag=true;
|
||||
@@ -1038,7 +1116,7 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
//取消
|
||||
cancelTopology(){
|
||||
this.editTopologyFlag=false;
|
||||
this.$nextTick(()=>{
|
||||
@@ -1049,6 +1127,10 @@
|
||||
getTopology(this.topologyIndex).canvasPos=domRect;
|
||||
});
|
||||
this.reload();
|
||||
},
|
||||
//预览
|
||||
previewTopology(){
|
||||
|
||||
},
|
||||
/*tools 方法*/
|
||||
|
||||
@@ -1060,7 +1142,9 @@
|
||||
getTopology(this.topologyIndex).centerView();
|
||||
},
|
||||
canvasMove(e){// 画布上的移动 确定tooltip的位置
|
||||
if(!this.tooltipPosition.show || this.timer3){return}
|
||||
if(!this.tooltipPosition.show||this.timer3){
|
||||
return
|
||||
}
|
||||
this.tooltipPosition.top=e.offsetY;
|
||||
this.tooltipPosition.left=e.offsetX+20;
|
||||
},
|
||||
@@ -1083,38 +1167,140 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .el-collapse-item__header {
|
||||
<style lang="scss">
|
||||
.el-dropdown-menu{
|
||||
.project-topology-add-node{
|
||||
.el-collapse-item__header {
|
||||
padding: 0 10px;
|
||||
background-color: #F9F9F9;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.el-collapse-item__header.is-active{
|
||||
background: #F6F6F6;
|
||||
ont-family: Roboto-Bold;
|
||||
font-size: 14px;
|
||||
color: #FA901C;
|
||||
font-weight: 700;
|
||||
el-collapse-item__arrow{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
padding: 0 10px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/deep/ .el-collapse-item__wrap {
|
||||
padding: 0 10px;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
/deep/ .el-collapse-item__content {
|
||||
.el-collapse-item__content {
|
||||
padding: 12px 0px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
/*justify-content: space-around;*/
|
||||
}
|
||||
|
||||
/deep/ .el-upload--picture-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 0;
|
||||
}
|
||||
/deep/ .el-card__body{
|
||||
.el-card__body {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
/deep/ .handle {
|
||||
|
||||
.handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.buttons {
|
||||
padding: 12px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width:26px;
|
||||
|
||||
.delIcon {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
background: red;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
color: #fff;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: #314659;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
line-height: 26px;
|
||||
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 26px;
|
||||
max-height: 26px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-icon-box {
|
||||
.el-icon-plus {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.buttons:hover {
|
||||
.delIcon {
|
||||
/*display: inline-block;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
.avatar-uploader{
|
||||
line-height: 30px;
|
||||
.el-icon-plus{
|
||||
font-size: 12px;
|
||||
color: #FA901C;
|
||||
margin: 0 8px 0 15px;
|
||||
}
|
||||
.el-upload--picture-card{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
.el-upload--picture-card:hover, .el-upload:focus{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.avatar-uploader:active el-upload--picture-card{
|
||||
color: #DB8B8B;
|
||||
}
|
||||
.avatar-uploader:active .el-upload--picture-card:hover,.avatar-uploader:active .el-upload:focus{
|
||||
color: #DB8B8B;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
@keyframes model-error-animation {
|
||||
0% {
|
||||
transform: scale(0.7);
|
||||
@@ -1126,6 +1312,7 @@
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes model-icon-animation {
|
||||
0% {
|
||||
transform: scale(1.2) translateX(1px);
|
||||
@@ -1137,6 +1324,7 @@
|
||||
transform: scale(1.2) translateX(1px);
|
||||
}
|
||||
}
|
||||
|
||||
.nz-icon-shuidi {
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
@@ -1146,14 +1334,17 @@
|
||||
width: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.model-error.nz-icon-shuidi {
|
||||
color: #FADED7;
|
||||
animation: model-error-animation .6s infinite ease-in-out;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
.model-error-active.nz-icon-shuidi {
|
||||
color: #FADED7;
|
||||
}
|
||||
|
||||
.nz-icon-model {
|
||||
color: #23BF9A;
|
||||
position: absolute;
|
||||
@@ -1162,20 +1353,25 @@
|
||||
font-size: 18px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.model-error .nz-icon-model {
|
||||
color: #EC7F66;
|
||||
animation: model-icon-animation .6s infinite ease-in-out;
|
||||
animation-direction: normal;
|
||||
}
|
||||
|
||||
.model-error-active .nz-icon-model {
|
||||
color: #EC7F66;
|
||||
}
|
||||
|
||||
.scaleTool-enter-active {
|
||||
animation: scaleTool-in .15s;
|
||||
}
|
||||
|
||||
.scaleTool-leave-active {
|
||||
animation: scaleTool-in .15s reverse;
|
||||
}
|
||||
|
||||
@keyframes scaleTool-in {
|
||||
from {
|
||||
top: 0px;
|
||||
@@ -1183,6 +1379,7 @@
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.network-pop .nz-icon-hexagonBorder {
|
||||
position: absolute;
|
||||
font-size: 48px;
|
||||
@@ -1191,16 +1388,20 @@
|
||||
width: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.network-pop .nz-icon-hexagonBorder:hover {
|
||||
transform: scale(1.1);
|
||||
color: #4BB49B;
|
||||
}
|
||||
|
||||
.network-pop .nz-icon-hexagonBorder.error-model-stat {
|
||||
color: #F5BAAC;
|
||||
}
|
||||
|
||||
.network-pop .nz-icon-hexagonBorder.error-model-stat:hover {
|
||||
color: #EC7F66;
|
||||
}
|
||||
|
||||
.network-pop .nz-icon-liubianxing {
|
||||
color: #e2f3ef;
|
||||
font-size: 44px;
|
||||
@@ -1210,27 +1411,34 @@
|
||||
transform: scale(0.9);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.network-pop .error-model-stat .nz-icon-liubianxing {
|
||||
color: #FADED7;
|
||||
}
|
||||
|
||||
.network-pop .nz-icon.noMove {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
font-size: 20px;
|
||||
color: #27c09c;
|
||||
}
|
||||
|
||||
.network-pop .error-model-stat .nz-icon.noMove {
|
||||
color: #EC7F66;
|
||||
}
|
||||
|
||||
.network-pop .no-selPop {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.network-pop .no-selPop .nz-icon-liubianxing {
|
||||
color: rgb(218, 218, 218);
|
||||
}
|
||||
|
||||
.network-pop .no-selPop .nz-icon-chart {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.network-info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -1238,6 +1446,22 @@
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.project-topology-tool{
|
||||
display: inline-flex;
|
||||
height: 30px;
|
||||
}
|
||||
.el-dropdown-title{
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: 2px;
|
||||
width: 66px;
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
line-height: 28px;
|
||||
.icon-cube{
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.project-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -1279,75 +1503,6 @@
|
||||
.title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 15px;
|
||||
padding-bottom: 10px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
.delIcon {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
background: red;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
color: #fff;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: #314659;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 3px;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
cursor: pointer;
|
||||
line-height: 50px;
|
||||
|
||||
.iconfont {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-icon-box {
|
||||
.el-icon-plus {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons:hover {
|
||||
.delIcon {
|
||||
/*display: inline-block;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
@@ -1356,12 +1511,50 @@
|
||||
}
|
||||
|
||||
.props {
|
||||
width: 300px;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
position: absolute;
|
||||
z-index: 1 !important;
|
||||
background-color: #f9f9f9;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.09);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
.special-select svg{
|
||||
width: 75px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.special-select .el-select.el-select--small {
|
||||
width: 100%;
|
||||
}
|
||||
.special-select /deep/ .el-select-dropdown{
|
||||
width: 75px!important;
|
||||
.el-select-dropdown__item{
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
}
|
||||
.special-select /deep/ .el-input.el-input--prefix.el-input--suffix, .line-width /deep/ .el-input.el-input--prefix.el-input--suffix {
|
||||
border: 1px solid #DCDFE6;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.special-select /deep/ .el-input__inner, .line-width /deep/ .el-input__inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.special-select /deep/ .el-input__prefix, .line-width /deep/ .el-input__prefix {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
color: #899FB7;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.special-select /deep/ .el-input__prefix > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user