feat： topo重构 （40%）
This commit is contained in:
zhangyu
@@ -414,10 +414,7 @@
|
||||
}
|
||||
|
||||
.props-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
padding-bottom: 20px;
|
||||
|
||||
|
||||
.iconfont {
|
||||
cursor: pointer;
|
||||
|
||||
32
nezha-fronted/src/components/common/mixin/beforeMeta2d.js
Normal file
32
nezha-fronted/src/components/common/mixin/beforeMeta2d.js
Normal file
@@ -0,0 +1,32 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
topoData: {},
|
||||
querysArray: {},
|
||||
meta2dType: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.meta2dType === 'project') {
|
||||
setTimeout(() => {
|
||||
const res = {
|
||||
topo: {},
|
||||
elements: [],
|
||||
timeType: 4
|
||||
}
|
||||
this.topoData = res.topo
|
||||
this.querysArray = res.elements
|
||||
})
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
const res = {
|
||||
topo: {},
|
||||
elements: [],
|
||||
timeType: 4
|
||||
}
|
||||
this.topoData = res.topo
|
||||
this.querysArray = res.elements
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { Meta2d, registerNode } from '@meta2d/core'
|
||||
import { flowPens } from '@meta2d/flow-diagram'
|
||||
import { activityDiagram } from '@meta2d/activity-diagram'
|
||||
import { classPens } from '@meta2d/class-diagram'
|
||||
import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram'
|
||||
// import { chartsPens } from '@meta2d/le5le-charts'
|
||||
import {
|
||||
Tools,
|
||||
canvasRegister,
|
||||
imageTemp,
|
||||
onChangeAnimate,
|
||||
onChangeAnimateLine,
|
||||
myCubec,
|
||||
myCubeAnchors
|
||||
} from '../../L5/services/canvas.js'
|
||||
import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
selectPens: [],
|
||||
editFlag: false,
|
||||
prevFlag: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const meta2dOptions = {}
|
||||
const meta2d = new Meta2d(this.meta2dId, meta2dOptions)
|
||||
meta2d.register(flowPens())
|
||||
meta2d.register(activityDiagram())
|
||||
meta2d.register(classPens())
|
||||
meta2d.register(sequencePens())
|
||||
meta2d.registerCanvasDraw(sequencePensbyCtx())
|
||||
// meta2d.registerCanvasDraw(formPens())
|
||||
// meta2d.registerCanvasDraw(chartsPens())
|
||||
/* 画布绑定事件 */
|
||||
meta2d.beforeAddPens = (pens) => { // 添加画笔前
|
||||
console.log(pens)
|
||||
if (pens.length === 1) {
|
||||
if (!pens[0].type) {
|
||||
this.nodeInit(pens[0])
|
||||
} else {
|
||||
this.lineInit(pens[0])
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
// getTopology(this.topoData)).on('translate', this.topTranslate) // 平移·
|
||||
meta2d.on('active', this.pensActive) // 选中·
|
||||
// meta2d.on('scale', this.topoScale) // 缩放·
|
||||
// meta2d.on('translatePens', () => {}) // 移动画笔结束·
|
||||
// meta2d.on('translatingPens', () => {}) // 移动画笔进行中·
|
||||
meta2d.on('enter', this.penEnter) // 移入画笔·
|
||||
meta2d.on('leave', this.penLeave) // 移出画笔·
|
||||
// meta2d.on('add', this.appPen) // 添加新画笔·
|
||||
meta2d.on('click', this.topoClick) // click画笔·
|
||||
setTopology(this.meta2dId, meta2d)
|
||||
console.log(getTopology(this.meta2dId))
|
||||
this.clacTopoData(this.topoData).then((data) => {
|
||||
console.log(data)
|
||||
meta2d.open(data)
|
||||
meta2d.centerView()
|
||||
meta2d.lock(1)
|
||||
})
|
||||
},
|
||||
clacTopoData (data) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
|
||||
return new Promise(resolve => {
|
||||
if (!data.pens) {
|
||||
data.pens = []
|
||||
}
|
||||
resolve(data)
|
||||
})
|
||||
},
|
||||
calcNode (node) { // 处理节点数据
|
||||
node = { ...node, ...node.data.params }
|
||||
},
|
||||
nodeInit (pen) { // 初始化节点参数
|
||||
pen.data = {
|
||||
params: { // 用于编辑时 重置为节点初始状态
|
||||
background: '#22222200',
|
||||
color: '#222222ff',
|
||||
textColor: '#222222ff',
|
||||
image: ''
|
||||
},
|
||||
imageId: '',
|
||||
valueMapping: [],
|
||||
legend: '',
|
||||
statistics: '',
|
||||
enable: {
|
||||
valueMapping: true,
|
||||
tooltip: true
|
||||
},
|
||||
tooltip: {
|
||||
title: '',
|
||||
titleShow: true,
|
||||
chartType: 'line',
|
||||
content: '',
|
||||
legends: [] // {legend: '' , alias}
|
||||
}
|
||||
}
|
||||
pen.background = '#22222200'
|
||||
pen.textAlign = 'center'
|
||||
pen.textBaseline = 'middle'
|
||||
pen.color = '#222222ff'
|
||||
pen.textColor = '#222222ff'
|
||||
pen.image = ''
|
||||
pen.imageId = ''
|
||||
pen.imageRatio = false
|
||||
pen.ratio = false
|
||||
pen.rotate = 0
|
||||
pen.globalAlpha = 1
|
||||
pen.borderType = 0
|
||||
pen.lineWidth = 1
|
||||
pen.lineDash = []
|
||||
pen.borderRadius = 0
|
||||
console.log(pen)
|
||||
},
|
||||
lineInit (pen) { // 初始化连线参数
|
||||
pen.data = {
|
||||
params: {
|
||||
animateColor: '#FA901CFF',
|
||||
borderColor: '#22222200',
|
||||
color: '#222222FF'
|
||||
}
|
||||
}
|
||||
pen.lineAnimateType = 0
|
||||
pen.animateSpan = 1
|
||||
pen.animateReverse = false
|
||||
pen.fromArrow = ''
|
||||
pen.animateColor = '#FA901CFF'
|
||||
pen.borderColor = '#22222200'
|
||||
pen.borderWidth = 0
|
||||
pen.color = '#222222ff'
|
||||
pen.toArrow = ''
|
||||
pen.borderType = 0
|
||||
pen.lineWidth = 1
|
||||
pen.lineDash = []
|
||||
},
|
||||
pensActive (pens, e) { // 选中节点
|
||||
console.log(pens, 'active', e)
|
||||
this.selectPens = pens
|
||||
},
|
||||
topoClick (params, e) { // 点击节点
|
||||
console.log(this.$refs.meta2dProps)
|
||||
if (!params.pen && this.$refs.meta2dProps) {
|
||||
this.$refs.meta2dProps.activeName = 'canvas'
|
||||
this.selectPens = []
|
||||
}
|
||||
},
|
||||
penEnter (pens) { // 移入节点
|
||||
// console.log(pens)
|
||||
},
|
||||
penLeave (pens) { // 移出节点
|
||||
// console.log(pens)
|
||||
},
|
||||
updatePens (pen, key) { // 更新对应的节点
|
||||
console.log(pen, key, 'update')
|
||||
// meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false });
|
||||
const obj = { id: pen.id }
|
||||
obj[key] = pen[key]
|
||||
if (key === 'lineName') {
|
||||
getTopology(this.meta2dId).updateLineType(pen, pen[key])
|
||||
}
|
||||
getTopology(this.meta2dId).setValue(obj)
|
||||
if (key === 'lineAnimateType') {
|
||||
console.log('lineAnimateType', 'start')
|
||||
if (!pen[key]) {
|
||||
getTopology(this.meta2dId).stopAnimate(pen.id)
|
||||
return
|
||||
}
|
||||
getTopology(this.meta2dId).startAnimate(pen.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
|
||||
export default {
|
||||
methods: {
|
||||
topoResize (id) {
|
||||
getTopology(id).resize()
|
||||
},
|
||||
initEdit (id) {
|
||||
console.log(getTopology(id))
|
||||
getTopology(id).lock(0)
|
||||
getTopology(id).centerView()
|
||||
getTopology(id).stopAnimate(getTopology(id).data.pens)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
canvas
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'meta2dCanvas'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
data
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'meta2dData'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,891 @@
|
||||
<template>
|
||||
<div class="pens-data">
|
||||
<div v-if="pen.id">
|
||||
<!-- <el-input-number v-model="pen.x" @change="change('x')"/>-->
|
||||
<!-- node-->
|
||||
<div v-if="!pen.type">
|
||||
<div class="form-row-box">
|
||||
<!-- Position -->
|
||||
<div class="form-row-title">
|
||||
Position
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('position')"/>
|
||||
</div>
|
||||
<div v-show="elements.position" class="form-row-content">
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
X
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.x"
|
||||
required
|
||||
@change="change('x')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Y
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.y"
|
||||
required
|
||||
@change="change('y')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Width
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.width"
|
||||
required
|
||||
@change="change('width')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Height
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.height"
|
||||
required
|
||||
@change="change('height')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Lock aspect Ratio
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-switch
|
||||
v-model="pen.ratio"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
@change="change('ratio')"
|
||||
></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Rotate
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:min="0"
|
||||
:max="360"
|
||||
:step="1"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.rotate"
|
||||
required
|
||||
@change="change('rotate')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Border -->
|
||||
<div class="form-row-title">
|
||||
Border
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('border')"/>
|
||||
</div>
|
||||
<div v-show="elements.border" class="form-row-content">
|
||||
<div class="form-row-item ">
|
||||
<div class="form-row-key">
|
||||
Type
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select :popper-append-to-body="true" v-model="pen.borderType" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
@change="(val)=>{change('lineDash', val)}">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
|
||||
<path
|
||||
:d="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0)).d"
|
||||
:stroke-dasharray="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0))['stroke-dasharray']">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option v-for="(item,index) in penDash" :value="index" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="(pen.borderType==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
|
||||
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Width
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.lineWidth"
|
||||
required
|
||||
@change="change('lineWidth')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'color',value: pen.color}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Radius
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.borderRadius"
|
||||
required
|
||||
@change="change('borderRadius')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- backGround -->
|
||||
<div class="form-row-title">
|
||||
BackGround
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('backGround')"/>
|
||||
</div>
|
||||
<div v-show="elements.backGround" class="form-row-content">
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'background',value: pen.background}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
opacity
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
:precision="2"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.globalAlpha"
|
||||
required
|
||||
@change="change('globalAlpha')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Image
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input v-model="pen.image" size="small" @change="change('image')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
是否保留长宽比
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-switch
|
||||
v-model="pen.imageRatio"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
@change="change('imageRatio')"
|
||||
></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- text -->
|
||||
<div class="form-row-title">
|
||||
text
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('text')"/>
|
||||
</div>
|
||||
<div v-show="elements.text" class="form-row-content">
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'textColor',value: pen.textColor}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
fontSize
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:min="10"
|
||||
:step="1"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="fontSize"
|
||||
v-model.number="pen.fontSize"
|
||||
required
|
||||
@change="change('fontSize')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Align text
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
|
||||
class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
|
||||
size="mini"
|
||||
v-model="pen.textAlign" value-key="chartType" @change="change('textAlign')">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textAlignOptions">
|
||||
<span class="panel-dropdown-label-txt">{{ item.name }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Vertical text
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select :placeholder="$t('el.select.placeholder')" :popper-append-to-body="true"
|
||||
class="right-box-row-with-btn no-style-class" popper-class="chart-box-dropdown-small right-box-select-top right-public-box-dropdown-top"
|
||||
size="mini"
|
||||
v-model="pen.textBaseline" value-key="chartType" @change="change('textBaseline')">
|
||||
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in textBaselineOptions">
|
||||
<span class="panel-dropdown-label-txt">{{ item.name }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item form-row-item-full">
|
||||
<div class="form-row-key">
|
||||
Content
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input maxlength="256" show-word-limit v-model="pen.text" size="small" :rows="4" type="textarea" @change="change('text')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- valueMapping -->
|
||||
<div class="form-row-title">
|
||||
Value mappings
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('valueMapping')"/>
|
||||
</div>
|
||||
<div v-show="elements.valueMapping" class="form-row-content">
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'background',value: pen.background}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- tooltip -->
|
||||
<div class="form-row-title">
|
||||
tooltip
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
|
||||
</div>
|
||||
<div v-show="elements.tooltip" class="form-row-content">
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'background',value: pen.background}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- line-->
|
||||
<div v-if="pen.type == 1">
|
||||
<div class="form-row-box">
|
||||
<!-- Line -->
|
||||
<div class="form-row-title">
|
||||
Line
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('line')"/>
|
||||
</div>
|
||||
<div v-show="elements.line" class="form-row-content">
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
style
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select :popper-append-to-body="true" v-model="pen.borderType" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
@change="(val)=>{change('lineDash', val)}">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
|
||||
<path
|
||||
:d="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0)).d"
|
||||
:stroke-dasharray="penDash.find((item,i)=>i==(pen.borderType?pen.borderType:0))['stroke-dasharray']">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option v-for="(item,index) in penDash" :value="index" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="(pen.borderType==index)?'#ee9d3f':item.strokeColor" stroke-width="1">
|
||||
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item special-meta2d-select">
|
||||
<div class="form-row-key">
|
||||
Type
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select :popper-append-to-body="true" v-model="pen.lineName" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
@change="change('lineName')">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1">
|
||||
<path
|
||||
:d="penLineType.find((item,i)=>item.name==pen.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="(pen.lineName==item.name)?'#ee9d3f':item.strokeColor" stroke-width="1">
|
||||
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item special-meta2d-select">
|
||||
<div class="form-row-key">
|
||||
From
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select :popper-append-to-body="true" v-model="pen.fromArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
@change="change('fromArrow')">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
|
||||
:key="index" v-if="pen.fromArrow==item.name">
|
||||
<path :d="item.d"></path>
|
||||
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
|
||||
:strokeWidth="item['stroke-width']"></polygon>
|
||||
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
|
||||
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="(pen.fromArrow==item.name)?'#ee9d3f':item.strokeColor"
|
||||
stroke-width="1">
|
||||
<path :d="item.d"></path>
|
||||
<polygon
|
||||
v-if="item.points"
|
||||
:points="item.points"
|
||||
:fill="(pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
|
||||
:stroke="(pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
|
||||
:strokeWidth="item['stroke-width']"
|
||||
></polygon>
|
||||
<circle
|
||||
v-if="item.cx"
|
||||
:cx="item.cx"
|
||||
:cy="item.cy"
|
||||
:r="item.r"
|
||||
:fill="(pen.fromArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
|
||||
:stroke="(pen.fromArrow==item.name)?'#ee9d3f':item.stroke"
|
||||
:strokeWidth="item['stroke-width']"
|
||||
></circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item special-meta2d-select">
|
||||
<div class="form-row-key">
|
||||
To
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select :popper-append-to-body="true" v-model="pen.toArrow" size="small" popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
@change="change('toArrow')">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="theme === 'light' ? 'black' : '#BEBEBE'" stroke-width="1" v-for="(item,index) in penLineFromTOArrow"
|
||||
:key="index" v-if="pen.toArrow==item.name">
|
||||
<path :d="item.d"></path>
|
||||
<polygon v-if="item.points" :points="item.points" :fill="item.fill" :stroke="item.stroke"
|
||||
:strokeWidth="item['stroke-width']"></polygon>
|
||||
<circle v-if="item.cx" :cx="item.cx" :cy="item.cy" :r="item.r" :fill="item.fill"
|
||||
:stroke="item.stroke" :strokeWidth="item['stroke-width']"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-option v-for="(item,index) in penLineFromTOArrow" :value="item.name" :key="index">
|
||||
<div class="icon-item">
|
||||
<svg>
|
||||
<g fill="none" :stroke="(pen.toArrow==item.name)?'#ee9d3f':item.strokeColor"
|
||||
stroke-width="1">
|
||||
<path :d="item.d"></path>
|
||||
<polygon
|
||||
v-if="item.points"
|
||||
:points="item.points"
|
||||
:fill="(pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
|
||||
:stroke="(pen.toArrow==item.name)?'#ee9d3f':item.stroke"
|
||||
:strokeWidth="item['stroke-width']"
|
||||
></polygon>
|
||||
<circle
|
||||
v-if="item.cx"
|
||||
:cx="item.cx"
|
||||
:cy="item.cy"
|
||||
:r="item.r"
|
||||
:fill="(pen.toArrow==item.name)?(item.fill=='#ffffff'?item.fill:'#ee9d3f'):item.fill"
|
||||
:stroke="(pen.toArrow==item.name)?'#ee9d3f':item.stroke"
|
||||
:strokeWidth="item['stroke-width']"
|
||||
></circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'color',value: pen.color}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
width
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.lineWidth"
|
||||
required
|
||||
@change="change('lineWidth')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
border color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'borderColor',value: pen.borderColor}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
borderWidth
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="globalAlpha"
|
||||
class="input"
|
||||
v-model.number="pen.borderWidth"
|
||||
required
|
||||
@change="change('borderWidth')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- lineAnimate -->
|
||||
<div class="form-row-title">
|
||||
Animate
|
||||
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('lineAnimate')"/>
|
||||
</div>
|
||||
<div v-show="elements.lineAnimate" class="form-row-content">
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Type
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-select
|
||||
v-model="pen.lineAnimateType "
|
||||
:popper-append-to-body="true"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
@change="change('lineAnimateType')"
|
||||
size="small">
|
||||
<el-option
|
||||
v-for="(item,index) in lineAnimateOptions"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Speed (0 - 10)
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-input-number
|
||||
@focus="inputFocus"
|
||||
@blur="inputBlur"
|
||||
:step="1"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:precision="0"
|
||||
controls-position="right"
|
||||
size="small"
|
||||
name="animateSpan"
|
||||
class="input"
|
||||
v-model.number="pen.animateSpan"
|
||||
required
|
||||
@change="change('animateSpan')"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
color
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<nezhaColor
|
||||
:isTopo="true"
|
||||
:value-arr="[{name:'animateColor',value: pen.animateColor}]"
|
||||
@colorChange="colorChange"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row-item">
|
||||
<div class="form-row-key">
|
||||
Reverse
|
||||
</div>
|
||||
<div class="form-row-value">
|
||||
<el-switch
|
||||
v-model="pen.animateReverse"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
@change="change('animateReverse')"
|
||||
></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nezhaColor from '@/components/common/nezhaColor'
|
||||
export default {
|
||||
name: 'meta2dElement', // node 和 line 所有组件均是分开创建的 修改相同属性时 需要同时修改
|
||||
components: {
|
||||
nezhaColor
|
||||
},
|
||||
props: {
|
||||
selectPens: {},
|
||||
elements: {}
|
||||
},
|
||||
watch: {
|
||||
selectPens: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
console.log(n, 'selectPens')
|
||||
this.pen = n[0]
|
||||
// todo 判断legend 是否还存在
|
||||
// this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const theme = localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
|
||||
return {
|
||||
theme: theme,
|
||||
pen: {},
|
||||
penDash: [
|
||||
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
|
||||
{ d: 'M5 14 l85 0', 'stroke-dasharray': '5,5', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
|
||||
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
|
||||
{ d: 'M5 14 l85 0', 'stroke-dasharray': '10,10,2,10', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
|
||||
],
|
||||
penLineType: [
|
||||
{ d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
|
||||
{ d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
|
||||
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' }
|
||||
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
|
||||
],
|
||||
textAlignOptions: [
|
||||
{
|
||||
id: 'left',
|
||||
name: this.$t('overall.left')
|
||||
},
|
||||
{
|
||||
id: 'center',
|
||||
name: this.$t('project.topology.center')
|
||||
},
|
||||
{
|
||||
id: 'right',
|
||||
name: this.$t('dashboard.panel.chartForm.alignList.right')
|
||||
}
|
||||
],
|
||||
textBaselineOptions: [
|
||||
{
|
||||
id: 'top',
|
||||
name: this.$t('project.topology.topOffsetY')
|
||||
},
|
||||
{
|
||||
id: 'middle',
|
||||
name: this.$t('project.topology.middleOffsetY')
|
||||
},
|
||||
{
|
||||
id: 'bottom',
|
||||
name: this.$t('project.topology.bottomOffsetY')
|
||||
}
|
||||
],
|
||||
penLineFromTOArrow: [
|
||||
{ d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '', strokeColor: theme == 'light' ? 'black' : '#BEBEBE' },
|
||||
{
|
||||
d: 'M5 14 l85 0',
|
||||
points: '5 14,20 9,20 19',
|
||||
fill: '#000000',
|
||||
stroke: '',
|
||||
'stroke-width': '',
|
||||
name: 'triangleSolid',
|
||||
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
|
||||
|
||||
},
|
||||
{
|
||||
d: 'M5 14 l85 0',
|
||||
points: '5 14,20 9,20 19',
|
||||
fill: '#ffffff',
|
||||
stroke: '#000000',
|
||||
'stroke-width': '1',
|
||||
name: 'triangle',
|
||||
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
|
||||
},
|
||||
{
|
||||
d: 'M5 14 l85 0',
|
||||
fill: '#000000',
|
||||
stroke: '',
|
||||
'stroke-width': '',
|
||||
cx: '10',
|
||||
cy: '14',
|
||||
r: '5',
|
||||
name: 'circleSolid',
|
||||
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
|
||||
},
|
||||
{
|
||||
d: 'M5 14 l85 0',
|
||||
fill: '#ffffff',
|
||||
stroke: '#000000',
|
||||
'stroke-width': '1',
|
||||
cx: '10',
|
||||
cy: '14',
|
||||
r: '5',
|
||||
name: 'circle',
|
||||
strokeColor: theme == 'light' ? 'black' : '#BEBEBE'
|
||||
},
|
||||
],
|
||||
lineAnimateOptions: [
|
||||
{ id: 3, name: this.$t('project.topology.flow') },
|
||||
{ id: 1, name: this.$t('project.topology.beads') },
|
||||
{ id: 2, name: this.$t('project.topology.dot') },
|
||||
// { id: 'comet', name: this.$t('project.topology.comet') },
|
||||
{ id: 0, name: this.$t('project.topology.none') }
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (key) {
|
||||
if (key === 'lineDash') {
|
||||
const val = this.pen.borderType
|
||||
this.pen.lineDash = val ? (val == 1 ? [5, 5] : ((val == 2 ? [10, 10] : [10, 10, 2, 10]))) : []
|
||||
}
|
||||
this.$emit('change', key)
|
||||
},
|
||||
colorChange (val, key) {
|
||||
this.pen.data.params[key] = val
|
||||
this.pen[key] = val
|
||||
console.log(key, val)
|
||||
this.change(key)
|
||||
},
|
||||
updateShow (key) {
|
||||
this.elements[key] = !this.elements[key]
|
||||
},
|
||||
inputFocus (e) {
|
||||
e.path[2].children[0].setAttribute('tabindex', '0')
|
||||
e.path[2].children[1].setAttribute('tabindex', '1')
|
||||
},
|
||||
inputBlur (e) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-row-item{
|
||||
vertical-align: top;
|
||||
width: calc(50% - 15px);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px;
|
||||
margin-bottom: 10px;
|
||||
.form-row-key{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.special-meta2d-select {
|
||||
/deep/ .el-input.el-input--prefix.el-input--suffix{
|
||||
border: 1px solid #E7EAED;
|
||||
height: 28px;
|
||||
}
|
||||
/deep/ .el-select--small{
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .el-input__inner{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.form-row-item-full{
|
||||
width: 100%;
|
||||
}
|
||||
.form-row-item:nth-of-type(even) {
|
||||
/*margin-left: 10px;*/
|
||||
}
|
||||
.form-row-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.form-row-content{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div class="topo-header">
|
||||
<div v-if="!isChart"> {{projectName}} </div>
|
||||
<div class="tools-left">
|
||||
<div class="tools-left-drag">
|
||||
<div
|
||||
class="icon"
|
||||
draggable="true"
|
||||
@dragstart.stop="onDragstart($event)"
|
||||
@click="onTouchstart($event)"
|
||||
>
|
||||
<div>Rectangle</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tools-left-draw" @click="setDrawPen()">
|
||||
钢笔
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button v-has="'project_edit'" v-if="!isChart" class="top-tool-btn margin-r-10" type="button" @click="editMeta2d" :title="$t('overall.edit')">
|
||||
<i class="nz-icon nz-icon-edit"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
|
||||
import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
|
||||
import { deepClone } from '@meta2d/core'
|
||||
export default {
|
||||
name: 'meta2dHeader',
|
||||
mixins: [topoUtil],
|
||||
props: {
|
||||
meta2dId: {},
|
||||
isChart: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
projectName: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
topoScreenState: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
topoScreen () {
|
||||
return this.$store.getters.getShowTopoScreen
|
||||
},
|
||||
shrink () {
|
||||
return this.$store.getters.getIsShrink
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editMeta2d () {
|
||||
console.log()
|
||||
this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
|
||||
this.$store.commit('setShowTopoScreen', true)
|
||||
setTimeout(() => {
|
||||
this.topoResize(this.meta2dId)
|
||||
this.initEdit(this.meta2dId)
|
||||
this.$emit('edit')
|
||||
console.log(getTopology(this.meta2dId).data())
|
||||
})
|
||||
},
|
||||
onDragstart (e) {
|
||||
const pen = {
|
||||
name: 'rectangle',
|
||||
text: '矩形',
|
||||
width: 100,
|
||||
height: 100
|
||||
}
|
||||
e.dataTransfer.setData('Text', JSON.stringify(pen))
|
||||
},
|
||||
|
||||
// 支持鼠标单击添加图形
|
||||
onTouchstart (e) {
|
||||
const pen = {
|
||||
name: 'rectangle',
|
||||
text: '矩形',
|
||||
width: 100,
|
||||
height: 100
|
||||
}
|
||||
getTopology(this.meta2dId).canvas.addCaches = deepClone([pen])
|
||||
},
|
||||
// 开启钢笔状态
|
||||
setDrawPen () {
|
||||
console.log(123123123123)
|
||||
getTopology(this.meta2dId).drawLine('line')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.topo-header {
|
||||
height: 60px;
|
||||
box-sizing: border-box;
|
||||
padding: 14px 20px 14px 10px;
|
||||
display: flex;
|
||||
.tools-left{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="meta2d-box">
|
||||
<meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :projectName="projectName" @edit="editFlag = true"/>
|
||||
<div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'">
|
||||
<div :id="meta2dId" style="height: 100%;width: 100%"></div>
|
||||
</div>
|
||||
<meta2dProps ref="meta2dProps" :selectPens.sync="selectPens" :querysArray="querysArray" @updatePens="updatePens" v-if="editFlag"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import meta2dHeader from '@/components/common/project/meta2d/meta2dHeader'
|
||||
import meta2dProps from '@/components/common/project/meta2d/meta2dProps'
|
||||
import meta2dMain from '@/components/common/project/meta2d/js/meta2dMain'
|
||||
export default {
|
||||
name: 'meta2dMain',
|
||||
mixins: [meta2dMain],
|
||||
props: {
|
||||
meta2dId: {}, // 唯一id 不可重复
|
||||
topoData: {}, // topo图数据
|
||||
isChart: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
querysArray: {},
|
||||
projectName: {}
|
||||
},
|
||||
components: {
|
||||
meta2dHeader,
|
||||
meta2dProps
|
||||
},
|
||||
watch: {
|
||||
topoData: {
|
||||
immediate: true,
|
||||
handler () {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.meta2d-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.meta2d-main{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.meta2d-chart{
|
||||
|
||||
}
|
||||
.meta2d-project{
|
||||
height: calc(100% - 78px);
|
||||
border: 1px solid;
|
||||
border-color: #999999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="props-box props">
|
||||
<el-tabs v-model="activeName" type="card">
|
||||
<el-tab-pane label="elements" name="elements" v-if="selectPens.length === 1">
|
||||
<meta2dElement :selectPens.sync="selectPens" @change="change" :elements="elements"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="canvas" name="canvas">
|
||||
<meta2dCanvas />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="data" name="data">
|
||||
<meta2dData :querysArray="querysArray"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import meta2dElement from '@/components/common/project/meta2d/meta2dElement'
|
||||
import meta2dCanvas from '@/components/common/project/meta2d/meta2dCanvas'
|
||||
import meta2dData from '@/components/common/project/meta2d/meta2dData'
|
||||
export default {
|
||||
name: 'meta2dProps',
|
||||
props: {
|
||||
selectPens: {},
|
||||
querysArray: {}
|
||||
},
|
||||
components: {
|
||||
meta2dElement,
|
||||
meta2dCanvas,
|
||||
meta2dData
|
||||
},
|
||||
watch: {
|
||||
selectPens (n) {
|
||||
console.log(n)
|
||||
if (n.length === 1) {
|
||||
this.activeName = 'elements'
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: 'canvas',
|
||||
elements: {
|
||||
backGround: true,
|
||||
border: true,
|
||||
position: true,
|
||||
text: true,
|
||||
valueMapping: true,
|
||||
tooltip: true,
|
||||
line: true,
|
||||
lineAnimate: true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (key) {
|
||||
this.$emit('updatePens', this.selectPens[0], key)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.props-box {
|
||||
width: 500px;
|
||||
position: absolute;
|
||||
height: calc(100% - 78px);
|
||||
top: 61px;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="project">
|
||||
<topologyL5 v-if="reloadFacade" ref="facade" :obj="currentProject" :topologyIndexF="topologyIndexF" targetTab.sync="panel" @changeTopologyIndexF="changeTopologyIndexF"/>
|
||||
|
||||
<!-- <topologyL5 v-if="reloadFacade" ref="facade" :obj="currentProject" :topologyIndexF="topologyIndexF" targetTab.sync="panel" @changeTopologyIndexF="changeTopologyIndexF"/>-->
|
||||
<meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :projectName="currentProject.name"/>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<bottom-box
|
||||
v-if="bottomBox.showSubList"
|
||||
@@ -44,14 +44,19 @@
|
||||
<script>
|
||||
import bus from '@/libs/bus'
|
||||
import topologyL5 from '@/components/common/project/topologyL5'
|
||||
import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
|
||||
import beforeMeta2d from "@/components/common/mixin/beforeMeta2d";
|
||||
|
||||
export default {
|
||||
name: 'project2',
|
||||
mixins: [beforeMeta2d],
|
||||
components: {
|
||||
topologyL5
|
||||
topologyL5,
|
||||
meta2dMain
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
meta2dType: 'project',
|
||||
rightBox: {
|
||||
module: { show: false },
|
||||
addEndpoint: { show: false },
|
||||
|
||||
Reference in New Issue
Block a user