gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：暂存 topology 升级 （未完成）

Browse Source
This commit is contained in:
zhangyu
2022-08-05 15:22:46 +08:00
parent 4923fc5db5
commit f3ea89d905
10 changed files with 2961 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
nezha-fronted/package-lock.json generated
View File

@@ -1433,44 +1433,43 @@
} }
}, },
"@topology/activity-diagram": { "@topology/activity-diagram": {
"version": "0.3.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@topology/activity-diagram/-/activity-diagram-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@topology/activity-diagram/-/activity-diagram-1.1.0.tgz",
"integrity": "sha512-9uceHdbT1MY++/2crNlZmFMVmz6sI4OqH7aUQuBT8q9RDXA7t2prFd7lx4UfaIyQqDYtYtpeCHLPlhRLsEooZg==" "integrity": "sha512-T4o/baMiTjnRgs7pPu/V2zTIMzBuBLZd8m78/dTzRkcf9CxuBrqgeh0EYDb9xgQ0DZDjdnZpZNJKLVpmCon18A=="
}, },
"@topology/chart-diagram": { "@topology/chart-diagram": {
"version": "0.3.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@topology/chart-diagram/-/chart-diagram-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@topology/chart-diagram/-/chart-diagram-1.1.0.tgz",
"integrity": "sha512-WUfb62Op0QxS976cNqrJ1Xaq+pfURwpo67H3TENWb+OhoNfiBl9IDANxTr1UIPLYfsjqgN3Y/8lxkL33jEl/aQ==" "integrity": "sha512-9b4s91FiIhv9DPm54c1cktW7PHDmL/TcREgij4Vdz/mGBtt+qg9DNjLosBcwshXDgD1/oQ8qTd24uRUcMOhWMw=="
}, },
"@topology/class-diagram": { "@topology/class-diagram": {
"version": "0.3.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@topology/class-diagram/-/class-diagram-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@topology/class-diagram/-/class-diagram-1.1.0.tgz",
"integrity": "sha512-J+qKEg/+3EyyZotP2TbZtM+NcOeRh2PIEwzBZGS6KOU5RvBi4NMRO2DQNN++q8Zpb7RG7WYGAaTB2H4+YcXJzA==" "integrity": "sha512-pFCGC7pBorMA8kPiAPKLeBp9VjHXs8FRMujTjFAUpJxQGRAZzjnuVq0pB32me9Vc/Ckp1/pH6S0JgD+poVA5CA=="
}, },
"@topology/core": { "@topology/core": {
"version": "0.5.33", "version": "1.1.32",
"resolved": "https://registry.npmmirror.com/@topology/core/download/@topology/core-0.5.33.tgz", "resolved": "https://registry.npmjs.org/@topology/core/-/core-1.1.32.tgz",
"integrity": "sha1-aS5eoCUEDbrh/TGxl2rCXmdu8ww=", "integrity": "sha512-ZpRzW0ERxBMFcdujT7VpZVY8t7B+OEMXVhuY+vQ8a++LTG/SIWT3ib8EhYw4cJM4BaIUtOOyDPYHpFk4SOl0KA==",
"requires": { "requires": {
"le5le-store": "^1.0.7",
"mitt": "^2.1.0", "mitt": "^2.1.0",
"mqtt": "^4.2.6" "mqtt": "^4.2.6"
} }
}, },
"@topology/flow-diagram": { "@topology/flow-diagram": {
"version": "0.3.0", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@topology/flow-diagram/-/flow-diagram-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@topology/flow-diagram/-/flow-diagram-1.1.1.tgz",
"integrity": "sha512-GPV+CIbclzYgCO/lMePDfLY0OzAr1+7nyzMOVdABXezvlIw/zm59+2/KYQu5XGUqBoqjvjdrd4hbN8eYAKWZQw==" "integrity": "sha512-hvlEDQ97DLTII0XIB8V3SQ55ywN+n3GqSkM8Fp9oImKXFSFYf9WYtiaMihB3fqnHJnR9EYDx57ehRFF5k5+gxA=="
}, },
"@topology/layout": { "@topology/form-diagram": {
"version": "0.3.0", "version": "1.1.32",
"resolved": "https://registry.npmjs.org/@topology/layout/-/layout-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@topology/form-diagram/-/form-diagram-1.1.32.tgz",
"integrity": "sha512-t9SSU7RroRfnKO3K5cfsB7eIfE2jW/t7O+79nVGgNqQljxaCSG8wQPWw6BqnmYJ072uHf85z1QUIjjboSEHupg==" "integrity": "sha512-omPPIyZmibjpe/cv+yB+3quSStW+4Pi43M4TO7ExV2lb7FlWJpXC8aPch+PSo6iQi06nAM9HOILSIaog7Hofug=="
}, },
"@topology/sequence-diagram": { "@topology/sequence-diagram": {
"version": "0.3.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@topology/sequence-diagram/-/sequence-diagram-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@topology/sequence-diagram/-/sequence-diagram-1.1.0.tgz",
"integrity": "sha512-qSLXKd//lW5jb/e7nMRwxRWz/bXmkourVHBmZ2cRulZPe0KTeLiE/LkYJ+ffDFNDdCIYedHBC+CeQc3PULCqRQ==" "integrity": "sha512-/DUqVXS1mCLpDJbfRQbMfduYy65OEq4QQjsqvMB6xGYD+L1+4CMRPI8lHsUyQcjOmBJrCfro5oJC0g6PWjGJDg=="
}, },
"@types/babel__core": { "@types/babel__core": {
"version": "7.1.19", "version": "7.1.19",
@@ -3988,7 +3987,7 @@
}, },
"clipboard": { "clipboard": {
"version": "2.0.11", "version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz", "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==", "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"requires": { "requires": {
"good-listener": "^1.2.2", "good-listener": "^1.2.2",
@@ -6133,7 +6132,7 @@
}, },
"delegate": { "delegate": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
}, },
"delegates": { "delegates": {
@@ -8445,7 +8444,7 @@
}, },
"good-listener": { "good-listener": {
"version": "1.2.2", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==", "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"requires": { "requires": {
"delegate": "^3.1.2" "delegate": "^3.1.2"
@@ -10993,8 +10992,8 @@
}, },
"le5le-store": { "le5le-store": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npm.taobao.org/le5le-store/download/le5le-store-1.0.7.tgz", "resolved": "https://registry.npmjs.org/le5le-store/-/le5le-store-1.0.7.tgz",
"integrity": "sha1-c0F+AMvT2KEBCzF5VJYyOt/HvEc=" "integrity": "sha512-8XnDf8RUoHsKXUQHSw2vHEbEw4UbDHGulw/r/YRXf2NA1EUvMD/UUjGvbMAB1vz3UN8smvOxR6CTyjpK/Zhn2w=="
}, },
"leaflet": { "leaflet": {
"version": "1.7.1", "version": "1.7.1",
@@ -11591,8 +11590,8 @@
}, },
"mitt": { "mitt": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.nlark.com/mitt/download/mitt-2.1.0.tgz?cache=0&sync_timestamp=1624483449786&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmitt%2Fdownload%2Fmitt-2.1.0.tgz", "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha1-90BXfCMXbGIFsSGylzUU6t4bIjA=" "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
}, },
"mixin-deep": { "mixin-deep": {
"version": "1.3.2", "version": "1.3.2",
@@ -16361,7 +16360,7 @@
}, },
"select": { "select": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==" "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
}, },
"select-hose": { "select-hose": {
@@ -17837,7 +17836,7 @@
}, },
"tiny-emitter": { "tiny-emitter": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==" "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
}, },
"tinycolor2": { "tinycolor2": {
@@ -18521,7 +18520,7 @@
}, },
"vue-clipboard2": { "vue-clipboard2": {
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz", "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
"integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==", "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
"requires": { "requires": {
"clipboard": "^2.0.0" "clipboard": "^2.0.0"

15
nezha-fronted/package.json
View File

@@ -25,13 +25,13 @@
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"@svgdotjs/svg.js": "^3.0.16", "@svgdotjs/svg.js": "^3.0.16",
"@svgdotjs/svg.panzoom.js": "^2.1.1", "@svgdotjs/svg.panzoom.js": "^2.1.1",
"@topology/activity-diagram": "^0.3.0", "@topology/activity-diagram": "^1.1.0",
"@topology/chart-diagram": "^0.3.0", "@topology/chart-diagram": "^1.1.0",
"@topology/class-diagram": "^0.3.0", "@topology/class-diagram": "^1.1.0",
"@topology/core": "0.5.33", "@topology/core": "^1.1.32",
"@topology/flow-diagram": "^0.3.0", "@topology/flow-diagram": "^1.1.1",
"@topology/layout": "^0.3.0", "@topology/form-diagram": "^1.1.32",
"@topology/sequence-diagram": "^0.3.0", "@topology/sequence-diagram": "^1.1.0",
"axios": "^0.19.0", "axios": "^0.19.0",
"codemirror-promql": "^0.19.0", "codemirror-promql": "^0.19.0",
"cytoscape": "^3.15.2", "cytoscape": "^3.15.2",
@@ -46,6 +46,7 @@
"intro.js": "^5.1.0", "intro.js": "^5.1.0",
"jspdf": "^2.5.1", "jspdf": "^2.5.1",
"jszip": "^3.9.1", "jszip": "^3.9.1",
"le5le-store": "^1.0.7",
"leaflet": "^1.7.1", "leaflet": "^1.7.1",
"moment-timezone": "^0.5.33", "moment-timezone": "^0.5.33",
"mqtt": "4.2.6", "mqtt": "4.2.6",

6
nezha-fronted/src/assets/css/common/checkbox.scss
View File

@@ -8,8 +8,8 @@
background-color: $--color-primary !important; background-color: $--color-primary !important;
} }
.el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{ .el-checkbox__input.is-checked.is-disabled .el-checkbox__inner{
background-color: $--background-color-empty !important; //background-color: $--background-color-empty !important;
border-color: $--border-color-base !important; //border-color: $--border-color-base !important;
} }
.el-checkbox__input.is-disabled .el-checkbox__inner{ .el-checkbox__input.is-disabled .el-checkbox__inner{
background-color: $--background-color-empty !important; background-color: $--background-color-empty !important;
@@ -19,7 +19,7 @@
border-color: $--border-color-base !important; border-color: $--border-color-base !important;
} }
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after { .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
display: none !important; //display: none !important;
} }
.el-checkbox__input.is-disabled{ .el-checkbox__input.is-disabled{
width: 16px !important; width: 16px !important;

34
nezha-fronted/src/components/common/ChartDiagram/diagram.vue
View File

@@ -312,21 +312,20 @@
</template> </template>
<script> <script>
import { Topology, registerNode } from '@/components/common/@topology/core/index.js' import { Topology } from '@/components/common/@topology/core/index.js'
import { Store as le5leStore } from 'le5le-store' import { Store as le5leStore } from 'le5le-store'
import imgDefault from '@/components/common/project/L5/services/img' import imgDefault from '@/components/common/project/L5/services/img'
import { import {
Tools, Tools,
canvasRegister,
imageTemp2, imageTemp2,
myShape, // myShape,
myAnchors, // myAnchors,
myIconRect2, // myIconRect2,
myTextRect2, // myTextRect2,
onChangeAnimate, // onChangeAnimate,
onChangeAnimateLine, // onChangeAnimateLine,
myCubec, // myCubec,
myCubeAnchors // myCubeAnchors
} from '../project/L5/services/canvas.js' } from '../project/L5/services/canvas.js'
import { getTopology, setTopology, dealImg, topologyImg } from '../js/common' import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
import CanvasProps from '../project/L5/CanvasProps' import CanvasProps from '../project/L5/CanvasProps'
@@ -341,8 +340,10 @@ import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
import bus from '../../../libs/bus' import bus from '../../../libs/bus'
import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu' import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
// 注册到画布 // 注册到画布
registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2) // Topology.register({ triangle });
registerNode('myCube', myCubec, myCubeAnchors, null, null) // Topology.registerAnchors({ triangle: triangleAnchors });
// registerNode('rectangleImg2', myShape, myAnchors, myIconRect2, myTextRect2)
// registerNode('myCube', myCubec, myCubeAnchors, null, null)
const canvasOptions = { const canvasOptions = {
rotateCursor: '/img/rotate.cur', rotateCursor: '/img/rotate.cur',
@@ -620,7 +621,6 @@ export default {
computed: { computed: {
}, },
created () { created () {
canvasRegister()
if (process.client) { if (process.client) {
document.onclick = event => { document.onclick = event => {
this.contextmenu = { this.contextmenu = {
@@ -950,7 +950,7 @@ export default {
pen.strokeStyle = selLevel.color.line pen.strokeStyle = selLevel.color.line
pen.bkType = 0 pen.bkType = 0
} }
onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line) // onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
} else if (pen.type === 1) { // 判断valueMapping 给相应的状态 } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel) const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
if (selLevel) { if (selLevel) {
@@ -959,13 +959,13 @@ export default {
pen.animateType = selLevel.animateType pen.animateType = selLevel.animateType
pen.fontColor = selLevel.color.text pen.fontColor = selLevel.color.text
} }
onChangeAnimateLine(pen, pen.animateType) // onChangeAnimateLine(pen, pen.animateType)
} }
} else { } else {
if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态 if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
onChangeAnimate(pen, pen.animateType) // onChangeAnimate(pen, pen.animateType)
} else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态 } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
onChangeAnimateLine(pen, pen.animateType) // onChangeAnimateLine(pen, pen.animateType)
} }
} }
}, },

8
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -1096,7 +1096,7 @@
</template> </template>
<script> <script>
import { alignNodes, spaceBetween, layout } from '@topology/layout' // import { alignNodes, spaceBetween, layout } from '@topology/layout'
import { getTopology, resetZIndex } from '../../js/common' import { getTopology, resetZIndex } from '../../js/common'
import chartDataFormat from '../../../chart/chartDataFormat' import chartDataFormat from '../../../chart/chartDataFormat'
import promqlInput from '../../../page/dashboard/explore/promqlInput' import promqlInput from '../../../page/dashboard/explore/promqlInput'
@@ -1559,15 +1559,15 @@ export default {
// 组件事件 // 组件事件
onNodesAlign (align) { // 对齐node onNodesAlign (align) { // 对齐node
alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align) // alignNodes(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect, align)
getTopology(this.index).updateProps() getTopology(this.index).updateProps()
}, },
onSpaceBetween () { onSpaceBetween () {
spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width) // spaceBetween(getTopology(this.index).activeLayer.pens, getTopology(this.index).activeLayer.rect.width)
getTopology(this.index).updateProps() getTopology(this.index).updateProps()
}, },
onLayout () { // 改变布局 onLayout () { // 改变布局
layout(getTopology(this.index).activeLayer.pens, this.layout) // layout(getTopology(this.index).activeLayer.pens, this.layout)
getTopology(this.index).updateProps() getTopology(this.index).updateProps()
}, },
onClickDash (number) { // 改变线型 onClickDash (number) { // 改变线型

777
nezha-fronted/src/components/common/project/L5/services/canvas.js
View File

@@ -1,15 +1,6 @@
import { Node, Rect, Point, Direction } from '@topology/core' import { rectInRect } from '@topology/core'
// import { register as registerClass } from './class-diagram/index'
export let canvas export let canvas
export function canvasRegister () {
// registerFlow()
// registerActivity()
// registerSequence()
// registerChart()
// registerClass()
}
export const Tools = [ export const Tools = [
{ {
group: 'General', group: 'General',
@@ -240,371 +231,419 @@ export const imageTemp2 = {
fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 } fullIconRect: { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
} }
} }
/* 自定义图片组件 */ export function rectangleImg (ctx, pen) {
export function myShape (ctx, node) { // 自定义图片组件
ctx.beginPath() ctx.beginPath()
ctx.rect(node.rect.x, node.rect.y, node.rect.width, node.rect.height) ctx.rect(pen.x, pen.y, pen.width, pen.height)
if (node.data && node.data.lineWidth <= 0) { if (pen.data && pen.data.lineWidth <= 0) {
ctx.strokeStyle = 'rgba(0,0,0,0)' ctx.strokeStyle = 'rgba(0,0,0,0)'
} }
// 必须判空再填充 // 必须判空再填充
(node.fillStyle || node.bkType) && ctx.fill() (pen.fillStyle || pen.bkType) && ctx.fill()
pen.iconHeight = pen.height - 30
console.log(pen)
// pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
// pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 }
ctx.stroke() ctx.stroke()
} }
export function myAnchors (node) { export function rectangleImgAnchors (pen) {
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left)) const anchors = []
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up)) // console.log(pen)
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right)) anchors.push({
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom)) id: '0',
} penId: pen.id,
export function myIconRect (node) { x: pen.x,
node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - 20 - (node.paddingTop + node.paddingBottom)) y: pen.y + pen.height / 4
node.fullIconRect = node.rect })
} anchors.push({
export function myTextRect (node) { id: '1',
node.textRect = new Rect( penId: pen.id,
node.rect.x + node.paddingLeft, x: pen.x + pen.width / 2,
node.rect.y + node.rect.height - 20 - node.paddingBottom, y: pen.y
node.rect.width - (node.paddingLeft + node.paddingRight), })
20 anchors.push({
) id: '2',
node.fullTextRect = node.rect penId: pen.id,
} x: pen.x + pen.width,
export function myIconRect2 (node) { y: pen.y + pen.height / 2
node.iconRect = node.rect })
node.fullIconRect = node.rect anchors.push({
} id: '3',
export function myTextRect2 (node) { penId: pen.id,
node.textRect = new Rect( x: pen.x + pen.width / 2,
node.rect.x + node.paddingLeft, y: pen.y + pen.height
node.rect.y + node.rect.height + 10, })
node.rect.width - (node.paddingLeft + node.paddingRight), return anchors
20 // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
) // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
node.fullTextRect = node.rect // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
// pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
} }
/* 自定义图片组件 */ /* 自定义图片组件 */
// export function myShape (ctx, node) { // 自定义图片组件
/* 自定义立方体 */ // ctx.beginPath()
export function myCubec (ctx, node) { //
// 立方体 // ctx.rect(pen.x, pen.y, pen.width, pen.height)
// ctx.rect(node.rect.x,node.rect.y,node.rect.width,node.rect.height); // if (pen.data && pen.data.lineWidth <= 0) {
const x = node.rect.x + 10; const y = node.rect.y + 10; const w = node.rect.width - 20; const h = node.rect.height - 20 // ctx.strokeStyle = 'rgba(0,0,0,0)'
// }
// LINE MODE // // 必须判空再填充
ctx.lineJoin = 'round' // (pen.fillStyle || pen.bkType) && ctx.fill()
// ctx.stroke()
// center face // }
ctx.beginPath() // export function myAnchors (node) {
ctx.moveTo(x, y + h / 3) // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
ctx.lineTo(x + w * 2 / 3, y + h / 3) // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
ctx.lineTo(x + w * 2 / 3, y + h) // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
ctx.lineTo(x, y + h) // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
ctx.closePath() // }
ctx.fillStyle = node.fillStyle // export function myIconRect (node) {
ctx.strokeStyle = node.strokeStyle // pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom))
ctx.stroke(); // pen.fullIconRect = pen.rect
(node.fillStyle || node.bkType) && ctx.fill() // }
// export function myTextRect (node) {
// top face // pen.textRect = new Rect(
ctx.beginPath() // pen.x + pen.paddingLeft,
ctx.moveTo(x, y + h / 3) // pen.y + pen.height - 20 - pen.paddingBottom,
ctx.lineTo(x + w / 3, y) // pen.width - (pen.paddingLeft + pen.paddingRight),
ctx.lineTo(x + w, y) // 20
ctx.lineTo(x + w * 2 / 3, y + h / 3) // )
ctx.closePath() // pen.fullTextRect = pen.rect
ctx.fillStyle = node.fillStyle // }
ctx.strokeStyle = node.strokeStyle // export function myIconRect2 (node) {
ctx.stroke(); // pen.iconRect = pen.rect
(node.fillStyle || node.bkType) && ctx.fill() // pen.fullIconRect = pen.rect
// }
// right face // export function myTextRect2 (node) {
ctx.beginPath() // pen.textRect = new Rect(
ctx.moveTo(x + w * 2 / 3, y + h / 3) // pen.x + pen.paddingLeft,
ctx.lineTo(x + w, y) // pen.y + pen.height + 10,
ctx.lineTo(x + w, y + h * 2 / 3) // pen.width - (pen.paddingLeft + pen.paddingRight),
ctx.lineTo(x + w * 2 / 3, y + h) // 20
ctx.closePath() // )
ctx.fillStyle = node.fillStyle // pen.fullTextRect = pen.rect
ctx.strokeStyle = node.strokeStyle // }
ctx.stroke(); // /* 自定义图片组件 */
(node.fillStyle || node.bkType) && ctx.fill() //
// /* 自定义立方体 */
// 必须判空再填充 // export function myCubec (ctx, node) {
} // // 立方体
export function myCubeAnchors (node) { // 立方体锚点 // // ctx.rect(pen.x,pen.y,pen.width,pen.height);
node.anchors.push(new Point(node.rect.x, node.rect.y + node.rect.height / 2, Direction.Left)) // const x = pen.x + 10; const y = pen.y + 10; const w = pen.width - 20; const h = pen.height - 20
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y, Direction.Up)) //
node.anchors.push(new Point(node.rect.x + node.rect.width, node.rect.y + node.rect.height / 2, Direction.Right)) // // LINE MODE
node.anchors.push(new Point(node.rect.x + node.rect.width / 2, node.rect.y + node.rect.height, Direction.Bottom)) // ctx.lineJoin = 'round'
} //
/* 自定义立方体 */ // // center face
// ctx.beginPath()
export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) { // ctx.moveTo(x, y + h / 3)
node.animateType = animateType // ctx.lineTo(x + w * 2 / 3, y + h / 3)
if (node.animateType === 'custom') { // ctx.lineTo(x + w * 2 / 3, y + h)
return // ctx.lineTo(x, y + h)
} // ctx.closePath()
// ctx.fillStyle = pen.fillStyle
node.animateFrames = [] // ctx.strokeStyle = pen.strokeStyle
const state = Node.cloneState(node) // ctx.stroke();
switch (animateType) { // (pen.fillStyle || pen.bkType) && ctx.fill()
case 'upDown': //
state.rect.y -= 10 // // top face
state.rect.ey -= 10 // ctx.beginPath()
node.animateFrames.push({ // ctx.moveTo(x, y + h / 3)
duration: 100, // ctx.lineTo(x + w / 3, y)
linear: true, // ctx.lineTo(x + w, y)
state // ctx.lineTo(x + w * 2 / 3, y + h / 3)
}) // ctx.closePath()
node.animateFrames.push({ // ctx.fillStyle = pen.fillStyle
duration: 100, // ctx.strokeStyle = pen.strokeStyle
linear: true, // ctx.stroke();
state: Node.cloneState(node) // (pen.fillStyle || pen.bkType) && ctx.fill()
}) //
node.animateFrames.push({ // // right face
duration: 200, // ctx.beginPath()
linear: true, // ctx.moveTo(x + w * 2 / 3, y + h / 3)
state: Node.cloneState(state) // ctx.lineTo(x + w, y)
}) // ctx.lineTo(x + w, y + h * 2 / 3)
break // ctx.lineTo(x + w * 2 / 3, y + h)
case 'leftRight': // ctx.closePath()
state.rect.x -= 10 // ctx.fillStyle = pen.fillStyle
state.rect.ex -= 10 // ctx.strokeStyle = pen.strokeStyle
node.animateFrames.push({ // ctx.stroke();
duration: 100, // (pen.fillStyle || pen.bkType) && ctx.fill()
linear: true, //
state: Node.cloneState(state) // // 必须判空再填充
}) // }
state.rect.x += 20 // export function myCubeAnchors (node) { // 立方体锚点
state.rect.ex += 20 // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left))
node.animateFrames.push({ // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up))
duration: 80, // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right))
linear: true, // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom))
state: Node.cloneState(state) // }
}) // /* 自定义立方体 */
state.rect.x -= 20 //
state.rect.ex -= 20 // export function onChangeAnimate (node, animateType, fillStyle, strokeStyle) {
node.animateFrames.push({ // pen.animateType = animateType
duration: 50, // if (pen.animateType === 'custom') {
linear: true, // return
state: Node.cloneState(state) // }
}) //
state.rect.x += 20 // pen.animateFrames = []
state.rect.ex += 20 // const state = Node.cloneState(node)
node.animateFrames.push({ // switch (animateType) {
duration: 30, // case 'upDown':
linear: true, // state.rect.y -= 10
state: Node.cloneState(state) // state.rect.ey -= 10
}) // pen.animateFrames.push({
node.animateFrames.push({ // duration: 100,
duration: 300, // linear: true,
linear: true, // state
state: Node.cloneState(node) // })
}) // pen.animateFrames.push({
break // duration: 100,
case 'heart': // linear: true,
state.rect.x -= 5 // state: Node.cloneState(node)
state.rect.ex += 5 // })
state.rect.y -= 5 // pen.animateFrames.push({
state.rect.ey += 5 // duration: 200,
state.rect.width += 5 // linear: true,
state.rect.height += 10 // state: Node.cloneState(state)
node.animateFrames.push({ // })
duration: 100, // break
linear: true, // case 'leftRight':
state // state.rect.x -= 10
}) // state.rect.ex -= 10
node.animateFrames.push({ // pen.animateFrames.push({
duration: 400, // duration: 100,
linear: true, // linear: true,
state: Node.cloneState(node) // state: Node.cloneState(state)
}) // })
break // state.rect.x += 20
case 'success': // state.rect.ex += 20
state.strokeStyle = strokeStyle || '#237804' // pen.animateFrames.push({
node.animateFrames.push({ // duration: 80,
duration: 100, // linear: true,
linear: true, // state: Node.cloneState(state)
state // })
}) // state.rect.x -= 20
node.animateFrames.push({ // state.rect.ex -= 20
duration: 100, // pen.animateFrames.push({
linear: true, // duration: 50,
state: Node.cloneState(node) // linear: true,
}) // state: Node.cloneState(state)
state.strokeStyle = '#237804' // })
node.animateFrames.push({ // state.rect.x += 20
duration: 100, // state.rect.ex += 20
linear: true, // pen.animateFrames.push({
state // duration: 30,
}) // linear: true,
node.animateFrames.push({ // state: Node.cloneState(state)
duration: 100, // })
linear: true, // pen.animateFrames.push({
state: Node.cloneState(node) // duration: 300,
}) // linear: true,
state.strokeStyle = strokeStyle || '#237804' // state: Node.cloneState(node)
state.fillStyle = fillStyle || '#389e0d22' // })
node.animateFrames.push({ // break
duration: 3000, // case 'heart':
linear: true, // state.rect.x -= 5
state // state.rect.ex += 5
}) // state.rect.y -= 5
break // state.rect.ey += 5
case 'warning': // state.rect.width += 5
state.strokeStyle = strokeStyle || '#fa8c16' // state.rect.height += 10
state.fillStyle = fillStyle || '#fa8c16' // pen.animateFrames.push({
state.lineWidth = 5 // duration: 100,
state.dash = 2 // linear: true,
node.animateFrames.push({ // state
duration: 500, // })
linear: true, // pen.animateFrames.push({
state // duration: 400,
}) // linear: true,
state.strokeStyle = strokeStyle || '#fa8c16' // state: Node.cloneState(node)
state.dash = 0 // })
state.lineWidth = 1 // break
state.fillStyle = '#ffffff' // case 'success':
node.animateFrames.push({ // state.strokeStyle = strokeStyle || '#237804'
duration: 500, // pen.animateFrames.push({
linear: true, // duration: 100,
state: Node.cloneState(state) // linear: true,
}) // state
state.strokeStyle = strokeStyle || '#fa8c16' // })
state.dash = 2 // pen.animateFrames.push({
state.lineWidth = 5 // duration: 100,
state.fillStyle = fillStyle || '#fa8c16' // linear: true,
node.animateFrames.push({ // state: Node.cloneState(node)
duration: 300, // })
linear: true, // state.strokeStyle = '#237804'
state: Node.cloneState(state) // pen.animateFrames.push({
}) // duration: 100,
break // linear: true,
case 'error': // state
state.strokeStyle = strokeStyle || '#cf1322' // })
state.fillStyle = fillStyle || '#cf132222' // pen.animateFrames.push({
state.lineWidth = 5 // duration: 100,
state.dash = 2 // linear: true,
node.animateFrames.push({ // state: Node.cloneState(node)
duration: 100, // })
linear: true, // state.strokeStyle = strokeStyle || '#237804'
state // state.fillStyle = fillStyle || '#389e0d22'
}) // pen.animateFrames.push({
state.strokeStyle = strokeStyle || '#cf1322' // duration: 3000,
state.fillStyle = '#ffffff' // linear: true,
state.dash = 0 // state
state.lineWidth = 1 // })
node.animateFrames.push({ // break
duration: 500, // case 'warning':
linear: true, // state.strokeStyle = strokeStyle || '#fa8c16'
state: Node.cloneState(state) // state.fillStyle = fillStyle || '#fa8c16'
}) // state.lineWidth = 5
state.strokeStyle = strokeStyle || '#cf1322' // state.dash = 2
state.fillStyle = fillStyle || '#cf132222' // pen.animateFrames.push({
state.dash = 2 // duration: 500,
state.lineWidth = 5 // linear: true,
node.animateFrames.push({ // state
duration: 300, // })
linear: true, // state.strokeStyle = strokeStyle || '#fa8c16'
state: Node.cloneState(state) // state.dash = 0
}) // state.lineWidth = 1
break // state.fillStyle = '#ffffff'
case 'show': // pen.animateFrames.push({
state.strokeStyle = strokeStyle || '#fa541c' // duration: 500,
state.rotate = -5 // linear: true,
node.animateFrames.push({ // state: Node.cloneState(state)
duration: 100, // })
linear: true, // state.strokeStyle = strokeStyle || '#fa8c16'
state: Node.cloneState(state) // state.dash = 2
}) // state.lineWidth = 5
state.rotate = 5 // state.fillStyle = fillStyle || '#fa8c16'
node.animateFrames.push({ // pen.animateFrames.push({
duration: 100, // duration: 300,
linear: true, // linear: true,
state: Node.cloneState(state) // state: Node.cloneState(state)
}) // })
state.rotate = 0 // break
node.animateFrames.push({ // case 'error':
duration: 100, // state.strokeStyle = strokeStyle || '#cf1322'
linear: true, // state.fillStyle = fillStyle || '#cf132222'
state: Node.cloneState(state) // state.lineWidth = 5
}) // state.dash = 2
break // pen.animateFrames.push({
case 'fade': // duration: 100,
state.strokeStyle = strokeStyle || '#fa541c' // linear: true,
state.globalAlpha = 0.3 // state
node.animateFrames.push({ // })
duration: 300, // state.strokeStyle = strokeStyle || '#cf1322'
linear: true, // state.fillStyle = '#ffffff'
state: Node.cloneState(state) // state.dash = 0
}) // state.lineWidth = 1
state.globalAlpha = 0.5 // pen.animateFrames.push({
node.animateFrames.push({ // duration: 500,
duration: 300, // linear: true,
linear: true, // state: Node.cloneState(state)
state: Node.cloneState(state) // })
}) // state.strokeStyle = strokeStyle || '#cf1322'
state.globalAlpha = 0.8 // state.fillStyle = fillStyle || '#cf132222'
node.animateFrames.push({ // state.dash = 2
duration: 300, // state.lineWidth = 5
linear: true, // pen.animateFrames.push({
state: Node.cloneState(state) // duration: 300,
}) // linear: true,
state.globalAlpha = 1 // state: Node.cloneState(state)
node.animateFrames.push({ // })
duration: 300, // break
linear: true, // case 'show':
state: Node.cloneState(state) // state.strokeStyle = strokeStyle || '#fa541c'
}) // state.rotate = -5
break // pen.animateFrames.push({
} // duration: 100,
node.animatePlay = true // linear: true,
} // state: Node.cloneState(state)
export function onChangeAnimateLine (line, type) { // })
line.animateType = type // state.rotate = 5
line.animatePlay = true // pen.animateFrames.push({
} // duration: 100,
export function changeImage (dataImg, callback) { // linear: true,
// const base64Img = document.createElement('base64Img') // state: Node.cloneState(state)
const canvas = document.createElement('canvas') // })
const context = canvas.getContext('2d') // state.rotate = 0
// 创建新图片 // pen.animateFrames.push({
const img = new Image() // duration: 100,
img.src = dataImg // linear: true,
img.addEventListener( // state: Node.cloneState(state)
'load', // })
function () { // break
// 绘制图片到canvas上 // case 'fade':
canvas.width = img.width // state.strokeStyle = strokeStyle || '#fa541c'
canvas.height = img.height // state.globalAlpha = 0.3
context.drawImage(img, 0, 0) // pen.animateFrames.push({
// duration: 300,
// 将canvas的透明背景设置成白色 // linear: true,
const imageData = context.getImageData( // state: Node.cloneState(state)
0, // })
0, // state.globalAlpha = 0.5
canvas.width, // pen.animateFrames.push({
canvas.height // duration: 300,
) // linear: true,
for (let i = 0; i < imageData.data.length; i += 4) { // state: Node.cloneState(state)
// rgb大于250的透明度y均设置成0 // })
if ( // state.globalAlpha = 0.8
imageData.data[i] > 0 && // pen.animateFrames.push({
imageData.data[i + 1] > 0 && // duration: 300,
imageData.data[i + 2] > 0 // linear: true,
) { // state: Node.cloneState(state)
imageData.data[i + 3] = 200 // })
} // state.globalAlpha = 1
} // pen.animateFrames.push({
context.putImageData(imageData, 0, 0) // duration: 300,
const baseImg = canvas.toDataURL('image/png')// 返回base64 // linear: true,
if (typeof callback !== 'undefined') { // state: Node.cloneState(state)
if (callback) callback(baseImg) // })
} // break
img.remove() // }
}, // pen.animatePlay = true
false // }
) // export function onChangeAnimateLine (line, type) {
} // line.animateType = type
// line.animatePlay = true
// }
// export function changeImage (dataImg, callback) {
// // const base64Img = document.createElement('base64Img')
// const canvas = document.createElement('canvas')
// const context = canvas.getContext('2d')
// // 创建新图片
// const img = new Image()
// img.src = dataImg
// img.addEventListener(
// 'load',
// function () {
// // 绘制图片到canvas上
// canvas.width = img.width
// canvas.height = img.height
// context.drawImage(img, 0, 0)
//
// // 将canvas的透明背景设置成白色
// const imageData = context.getImageData(
// 0,
// 0,
// canvas.width,
// canvas.height
// )
// for (let i = 0; i < imageData.data.length; i += 4) {
// // rgb大于250的透明度y均设置成0
// if (
// imageData.data[i] > 0 &&
// imageData.data[i + 1] > 0 &&
// imageData.data[i + 2] > 0
// ) {
// imageData.data[i + 3] = 200
// }
// }
// context.putImageData(imageData, 0, 0)
// const baseImg = canvas.toDataURL('image/png')// 返回base64
// if (typeof callback !== 'undefined') {
// if (callback) callback(baseImg)
// }
// img.remove()
// },
// false
// )
// }

2324
nezha-fronted/src/components/common/project/newTopologyL5.vue Normal file
View File

File diff suppressed because it is too large Load Diff

205
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -336,22 +336,37 @@
</template> </template>
<script> <script>
import { Topology, registerNode } from '@/components/common/@topology/core/index.js' import { Topology } from '@topology/core'
import { Store as le5leStore } from 'le5le-store' import { Store as le5leStore } from 'le5le-store'
import {
flowPens
} from '@topology/flow-diagram'
import {
activityDiagram
} from '@topology/activity-diagram'
import {
classPens
} from '@topology/class-diagram'
import {
sequencePens,
sequencePensbyCtx
} from '@topology/sequence-diagram'
import { formPens } from '@topology/form-diagram'
// import { Topology, registerNode } from '@topology/core' // import { Topology, registerNode } from '@topology/core'
import imgDefault from '@/components/common/project/L5/services/img' import imgDefault from '@/components/common/project/L5/services/img'
import { import {
Tools, Tools,
canvasRegister,
imageTemp, imageTemp,
myShape, rectangleImg,
myAnchors, rectangleImgAnchors
myIconRect, // myShape,
myTextRect, // myAnchors,
onChangeAnimate, // myIconRect,
onChangeAnimateLine, // myTextRect,
myCubec, // onChangeAnimate,
myCubeAnchors // onChangeAnimateLine,
// myCubec,
// myCubeAnchors
} from './L5/services/canvas.js' } from './L5/services/canvas.js'
import { getTopology, setTopology, dealImg, topologyImg } from '../js/common' import { getTopology, setTopology, dealImg, topologyImg } from '../js/common'
@@ -368,8 +383,9 @@ import { getMetricTypeValue, dealLegendAlias } from '../js/tools'
import bus from '../../../libs/bus' import bus from '../../../libs/bus'
// 注册到画布 // 注册到画布
registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
registerNode('myCube', myCubec, myCubeAnchors, null, null) // registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
// registerNode('myCube', myCubec, myCubeAnchors, null, null)
const canvasOptions = { const canvasOptions = {
rotateCursor: '/img/rotate.cur', rotateCursor: '/img/rotate.cur',
@@ -639,7 +655,7 @@ export default {
} }
}, },
created () { created () {
canvasRegister() // canvasRegister()
}, },
mounted () { mounted () {
if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度 if (!this.fromOverView) { // 从overview来的 加载相应图片 优化首页加载速度
@@ -704,6 +720,11 @@ export default {
if (!getTopology(this.topologyIndex)) { if (!getTopology(this.topologyIndex)) {
return return
} }
le5leStore.set('file', this.data)
le5leStore.set('lineName', data.lineName)
le5leStore.set('fromArrow', data.fromArrow)
le5leStore.set('toArrow', data.toArrow)
getTopology(this.topologyIndex).open()
getTopology(this.topologyIndex).open(data) getTopology(this.topologyIndex).open(data)
getTopology(this.topologyIndex).lock(1) getTopology(this.topologyIndex).lock(1)
this.objChange = false this.objChange = false
@@ -712,8 +733,8 @@ export default {
x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth, x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
} }
this.oldScale = getTopology(this.topologyIndex).data.scale this.oldScale = getTopology(this.topologyIndex).data().scale
getTopology(this.topologyIndex).data.pens.forEach(item => { getTopology(this.topologyIndex).data().pens.forEach(item => {
if (flag) { if (flag) {
return return
} }
@@ -726,9 +747,9 @@ export default {
}) })
getTopology(this.topologyIndex).resize() getTopology(this.topologyIndex).resize()
getTopology(this.topologyIndex).centerView() getTopology(this.topologyIndex).centerView()
this.penToolTipScale = getTopology(this.topologyIndex).data.scale this.penToolTipScale = getTopology(this.topologyIndex).data().scale
const timer = setTimeout(() => { const timer = setTimeout(() => {
getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens.forEach(item => { getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens.forEach(item => {
if (item.animatePlay) { if (item.animatePlay) {
item.stopAnimate() item.stopAnimate()
const timer1 = setTimeout(() => { const timer1 = setTimeout(() => {
@@ -743,7 +764,7 @@ export default {
// getTopology(this.topologyIndex).scaleTo(data.scale/2) // getTopology(this.topologyIndex).scaleTo(data.scale/2)
// } // }
// getTopology(this.topologyIndex).fitView(); // getTopology(this.topologyIndex).fitView();
this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data) this.oldTopologyData = JSON.stringify(getTopology(this.topologyIndex).data())
this.getNodesArr() this.getNodesArr()
pensPromise = null pensPromise = null
}) })
@@ -786,7 +807,7 @@ export default {
} }
data = this.$loadsh.cloneDeep(data) data = this.$loadsh.cloneDeep(data)
if (!getTopology(this.topologyIndex)) { if (!getTopology(this.topologyIndex)) {
let canvas = new Topology('topology-canvas' + this.topologyIndexF, canvasOptions) let canvas = new Topology('topology-canvas' + this.topologyIndexF)
// canvas.open(data) // canvas.open(data)
setTopology(this.topologyIndex, canvas) setTopology(this.topologyIndex, canvas)
canvas = null canvas = null
@@ -794,12 +815,19 @@ export default {
// getTopology(this.topologyIndex).open(data) // getTopology(this.topologyIndex).open(data)
} }
this.topologyLoading = false this.topologyLoading = false
if (!getTopology(this.topologyIndex).data.name) { if (!getTopology(this.topologyIndex).data().name) {
getTopology(this.topologyIndex).data.name = this.obj.name // getTopology(this.topologyIndex).data().name = this.obj.name
} }
getTopology(this.topologyIndex).data.projectId = this.obj.id // getTopology(this.topologyIndex).data().projectId = this.obj.id
// getTopology(this.topologyIndex).lock(1) // getTopology(this.topologyIndex).lock(1)
getTopology(this.topologyIndex).register(flowPens())
getTopology(this.topologyIndex).register(activityDiagram())
getTopology(this.topologyIndex).register(classPens())
getTopology(this.topologyIndex).register(sequencePens())
getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx())
getTopology(this.topologyIndex).registerCanvasDraw(formPens())
getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg })
getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors })
this.getModule()// 获取module this.getModule()// 获取module
resolve() resolve()
}) })
@@ -895,7 +923,99 @@ export default {
item.data.state.alert = false item.data.state.alert = false
} }
}) })
data.pens = data.pens.map(item => {
if (item.type === 0) {
item = {
...item,
...item.rect
}
} else {
// promiseArr.push({ type: 1 })
console.log(item)
item = {
data: item.data,
rect: item.rect,
...item.rect,
id: item.id,
tags: [
],
name: 'line',
type: 1,
fromArrow: '',
toArrow: 'triangleSolid',
anchors: [
{
id: 'd3b9bb5',
penId: 'fdde44f',
x: 0,
y: 1,
prev: {
penId: 'fdde44f',
x: -0.28768449363179044,
y: 1
},
next: {
penId: 'fdde44f',
x: 0.28768449363179044,
y: 1
}
},
{
id: '5c7f698f',
penId: 'fdde44f',
connectTo: 'f10e596',
x: 1,
y: 0,
prev: {
penId: 'fdde44f',
connectTo: 'f10e596',
x: 0.7123155063682084,
y: 0
},
next: {
penId: 'fdde44f',
connectTo: 'f10e596',
x: 1.2876844936317902,
y: 0
}
}
],
color: '#000000',
lineWidth: 2.4390243902439024,
borderColor: '#000000',
borderWidth: 0,
rotate: 0,
visible: true,
background: '',
lineHeight: 1.5,
fontSize: 12,
fontFamily: '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
fontStyle: 'normal',
fontWeight: 'normal',
textColor: '#000000',
textAlign: 'center',
textBaseline: 'middle',
textBackground: '#ffffff',
animateSpan: 1,
animateColor: '#ffffff',
animateCycle: null,
lineAnimateType: 1,
animateDotSize: 3,
animateType: 'beads',
frames: [
],
autoPlay: false,
globalAlpha: 1,
events: [
]
}
}
return item
})
console.log(data.pens)
if (!data.data) { if (!data.data) {
this.projectInfoShow = true this.projectInfoShow = true
this.projectAlertShow = true this.projectAlertShow = true
@@ -930,6 +1050,7 @@ export default {
} }
}) })
this.saveData = JSON.parse(JSON.stringify(data)) this.saveData = JSON.parse(JSON.stringify(data))
console.log(JSON.stringify(data))
resolve(data) resolve(data)
clearInterval(this.timer4) clearInterval(this.timer4)
this.timer4 = null this.timer4 = null
@@ -976,7 +1097,7 @@ export default {
pen.strokeStyle = selLevel.color.line pen.strokeStyle = selLevel.color.line
pen.bkType = 0 pen.bkType = 0
} }
onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line) // onChangeAnimate(pen, selLevel.animateType, selLevel.color.fill, selLevel.color.line)
} else if (pen.type === 1) { // 判断valueMapping 给相应的状态 } else if (pen.type === 1) { // 判断valueMapping 给相应的状态
const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel) const selLevel = pen.data.valueMapping.find(item => item.level === maxLevel)
if (selLevel) { if (selLevel) {
@@ -985,13 +1106,13 @@ export default {
pen.animateType = selLevel.animateType pen.animateType = selLevel.animateType
pen.fontColor = selLevel.color.text pen.fontColor = selLevel.color.text
} }
onChangeAnimateLine(pen, pen.animateType) // onChangeAnimateLine(pen, pen.animateType)
} }
} else { } else {
if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态 if (pen.type === 0 && pen.animatePlay) { // 判断valueMapping 给相应的状态
onChangeAnimate(pen, pen.animateType) // onChangeAnimate(pen, pen.animateType)
} else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态 } else if (pen.type === 1 && pen.animatePlay) { // 判断valueMapping 给相应的状态
onChangeAnimateLine(pen, pen.animateType) // onChangeAnimateLine(pen, pen.animateType)
} }
} }
}, },
@@ -1081,9 +1202,9 @@ export default {
getNodesArr () { getNodesArr () {
if (!getTopology(this.topologyIndex)) return if (!getTopology(this.topologyIndex)) return
let arr = [] let arr = []
this.offsetX = getTopology(this.topologyIndex).data.x this.offsetX = getTopology(this.topologyIndex).data().x
this.offsetY = getTopology(this.topologyIndex).data.y this.offsetY = getTopology(this.topologyIndex).data().y
arr = getTopology(this.topologyIndex).data.pens.filter(item => { arr = getTopology(this.topologyIndex).data().pens.filter(item => {
if (!item.data) { if (!item.data) {
item.data = { item.data = {
moduleId: '', moduleId: '',
@@ -1114,8 +1235,8 @@ export default {
// 摘除已选择的module // 摘除已选择的module
modulesDiff (data) { modulesDiff (data) {
this.modules = this.allModules this.modules = this.allModules
if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data.pens) { if (getTopology(this.topologyIndex) && getTopology(this.topologyIndex).data().pens) {
getTopology(this.topologyIndex).data.pens.forEach(item => { getTopology(this.topologyIndex).data().pens.forEach(item => {
if (item.type == 0) { if (item.type == 0) {
this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id) this.modules = this.modules.filter(item1 => item.data.moduleId !== item1.id)
} }
@@ -1907,7 +2028,7 @@ export default {
this.$store.commit('setShowTopoScreen', true) this.$store.commit('setShowTopoScreen', true)
const timer = setTimeout(() => { const timer = setTimeout(() => {
getTopology(this.topologyIndex).lock(0) getTopology(this.topologyIndex).lock(0)
getTopology(this.topologyIndex).data.pens.forEach((item, index) => { // 停止动画 以及赋值默认data getTopology(this.topologyIndex).data().pens.forEach((item, index) => { // 停止动画 以及赋值默认data
if (item.animatePlay) { if (item.animatePlay) {
item.stopAnimate() item.stopAnimate()
} }
@@ -1947,7 +2068,7 @@ export default {
}) })
getTopology(this.topologyIndex).caches = { getTopology(this.topologyIndex).caches = {
index: 0, index: 0,
list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))] list: [JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data()))]
} }
const dom = document.getElementById('topology-canvas' + this.topologyIndexF) const dom = document.getElementById('topology-canvas' + this.topologyIndexF)
const domRect = dom ? dom.getBoundingClientRect() : {} const domRect = dom ? dom.getBoundingClientRect() : {}
@@ -1973,7 +2094,7 @@ export default {
// this.topologyData.data[key]=this.colorRGBtoHex(val); // this.topologyData.data[key]=this.colorRGBtoHex(val);
// getTopology(this.index).data[key]=val; // getTopology(this.index).data[key]=val;
// getTopology(this.index).render(); // getTopology(this.index).render();
const dataOption = getTopology(this.topologyIndex).data const dataOption = getTopology(this.topologyIndex).data()
dataOption[key] = this.lineName dataOption[key] = this.lineName
getTopology(this.topologyIndex).render() getTopology(this.topologyIndex).render()
}, },
@@ -2040,8 +2161,8 @@ export default {
} }
}) })
}) })
if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) { if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
getTopology(this.topologyIndex).data.scale = this.oldScale getTopology(this.topologyIndex).data().scale = this.oldScale
} }
this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => { this.$put('monitor/project/topo', { topo: JSON.stringify(topologyData), projectId: this.projectInfo.id }).then(res => {
this.prevent_opt.save = false this.prevent_opt.save = false
@@ -2125,8 +2246,8 @@ export default {
} }
}) })
}) })
if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) { if (this.penToolTipScale == getTopology(this.topologyIndex).data().scale) {
getTopology(this.topologyIndex).data.scale = this.oldScale getTopology(this.topologyIndex).data().scale = this.oldScale
} }
this.$nextTick(() => { this.$nextTick(() => {
this.previewData = topologyData this.previewData = topologyData
@@ -2145,7 +2266,7 @@ export default {
// 联动 project // 联动 project
changeProjectTitle () { changeProjectTitle () {
const data = getTopology(this.topologyIndex).data const data = getTopology(this.topologyIndex).data()
this.topologyInfo = { this.topologyInfo = {
fontSize: data.data.fontSize, fontSize: data.data.fontSize,
align: data.data.align, align: data.data.align,
@@ -2169,7 +2290,7 @@ export default {
x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth, x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
} }
getTopology(this.topologyIndex).data.pens.forEach(item => { getTopology(this.topologyIndex).data().pens.forEach(item => {
if (flag) { if (flag) {
return return
} }
@@ -2260,7 +2381,7 @@ export default {
this.uploadPicShow = true this.uploadPicShow = true
}, },
zoomMap (num) { zoomMap (num) {
getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale + num) getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data().scale + num)
}, },
penToBottom () { penToBottom () {
getTopology(this.topologyIndex).bottom() getTopology(this.topologyIndex).bottom()

1
nezha-fronted/src/components/page/config/system/systemCommon.js
View File

@@ -1,4 +1,3 @@
import { file } from '@topology/core/src/middles/nodes/file'
import routerPathParams from '@/components/common/mixin/routerPathParams' import routerPathParams from '@/components/common/mixin/routerPathParams'
export const tableCommon = { export const tableCommon = {

2
nezha-fronted/static/config.json
View File

@@ -1 +1 @@
{"baseUrl":"/", "version": "22.05"} {"baseUrl":"http://192.168.40.42:8080/", "version": "22.05"}