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

NEZ-2649 feat：project topo 重构

Browse Source
This commit is contained in:
zhangyu
2023-03-08 17:25:00 +08:00
parent 846651c4f7
commit 04b6b58b80
13 changed files with 336 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4997,7 +4997,7 @@
},
"clipboard": {
"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==",
"requires": {
"good-listener": "^1.2.2",
@@ -7617,7 +7617,7 @@
},
"delegate": {
"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=="
},
"delegates": {
@@ -9951,7 +9951,7 @@
},
"good-listener": {
"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==",
"requires": {
"delegate": "^3.1.2"
@@ -17291,7 +17291,7 @@
},
"select": {
"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=="
},
"select-hose": {
@@ -19211,7 +19211,7 @@
},
"tiny-emitter": {
"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=="
},
"tinycolor2": {
@@ -19227,7 +19227,7 @@
"tmp": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
"integrity": "sha1-8lEl/w3Z2jzLDC3Tce4SiLuRKMA=",
"integrity": "sha512-89PTqMWGDva+GqClOqBV9s3SMh7MA3Mq0pJUdAoHuF65YoE7O0LermaZkVfT5/Ngfo18H4eYiyG7zKOtnEbxsw==",
"dev": true,
"requires": {
"os-tmpdir": "~1.0.1"
@@ -19928,7 +19928,7 @@
},
"vue-clipboard2": {
"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==",
"requires": {
"clipboard": "^2.0.0"

28
nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss
View File

@@ -75,6 +75,18 @@
overflow: unset;
overflow-y: unset;
}
.pens-canvas.pens-data{
height: 100%;
.form-row-box {
height: 100%;
display: flex;
flex-direction: column;
.form-row-element {
flex: 1;
overflow-y: auto;
}
}
}
.right-box__container .chart-config .thresholds-item .mapping-display-input input{
padding-left: 15px;
}
@@ -89,12 +101,24 @@
display: flex;
justify-content: space-between;
padding: 3px 10px;
&.is-active {
background: $--table-row-hover-background-color;
border: 1px solid $--table-row-hover-background-color;
color: $--color-primary;
.el-input__inner {
color: $--color-primary;
}
}
.hide-input {
.el-input__inner {
border-color: transparent;
height: 26px;
line-height: 26px;
padding: 0 10px;
}
.el-input__inner:focus {
border-color: $--border-color-base-focus;
color: $--color-text-regular;
}
}
}
@@ -194,12 +218,12 @@
padding: 0 10px;
line-height: 28px;
border: 1px solid $--border-color-light;
.nz-icon-circle-close {
.el-icon-circle-close {
display: none;
}
}
.image-input:hover {
.nz-icon-circle-close {
.el-icon-circle-close {
display: inline-block;
}
}

44
nezha-fronted/src/assets/css/font/iconfont.css
View File

File diff suppressed because one or more lines are too long

2
nezha-fronted/src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

63
nezha-fronted/src/assets/css/font/iconfont.json
View File

@@ -5,6 +5,69 @@
"css_prefix_text": "nz-icon-",
"description": "",
"glyphs": [
{
"icon_id": "8990443",
"name": "竖向分布",
"font_class": "shuxiangfenbu",
"unicode": "e786",
"unicode_decimal": 59270
},
{
"icon_id": "8990444",
"name": "横向分布",
"font_class": "hengxiangfenbu",
"unicode": "e787",
"unicode_decimal": 59271
},
{
"icon_id": "8990445",
"name": "底部对齐",
"font_class": "dibuduiqi",
"unicode": "e788",
"unicode_decimal": 59272
},
{
"icon_id": "8990446",
"name": "竖向居中对齐",
"font_class": "shuxiangjuzhongduiqi",
"unicode": "e789",
"unicode_decimal": 59273
},
{
"icon_id": "8990447",
"name": "顶部对齐",
"font_class": "dingbuduiqi",
"unicode": "e78c",
"unicode_decimal": 59276
},
{
"icon_id": "8990449",
"name": "左对齐",
"font_class": "zuoduiqi",
"unicode": "e78d",
"unicode_decimal": 59277
},
{
"icon_id": "8990453",
"name": "横向居中对齐",
"font_class": "hengxiangjuzhongduiqi",
"unicode": "e78e",
"unicode_decimal": 59278
},
{
"icon_id": "8990454",
"name": "右对齐",
"font_class": "youduiqi",
"unicode": "e79a",
"unicode_decimal": 59290
},
{
"icon_id": "8990724",
"name": "排除顶层图形",
"font_class": "paichudingcengtuxing",
"unicode": "e79b",
"unicode_decimal": 59291
},
{
"icon_id": "34318397",
"name": "矩形",

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

57
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

8
nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
View File

@@ -123,8 +123,8 @@ export default {
text: pen.text || '',
textValue: '',
enable: {
valueMapping: true,
tooltip: true
valueMapping: false,
tooltip: false
},
tooltip: {
title: '',
@@ -176,8 +176,8 @@ export default {
parent: '',
value: '',
enable: {
valueMapping: true,
tooltip: true
valueMapping: false,
tooltip: false
}
}
pen.nzName = name

200
nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
View File

@@ -1,54 +1,55 @@
<template>
<div class="pens-data">
<div class="pens-data pens-canvas">
<div class="form-row-box">
<!-- backGround -->
<div class="form-row-title">
{{$t('project.topology.bac')}}
<i class="nz-icon nz-icon-arrow-down" :class="canvasProps.backGround?'':'is-rotate'" @click="updateShow('backGround')"/>
</div>
<div v-show="canvasProps.backGround" class="form-row-content">
<div class="form-row-item">
<div class="form-row-key">
{{$t('project.topology.color')}}
<div>
<!-- backGround -->
<div class="form-row-title">
{{$t('project.topology.bac')}}
<i class="nz-icon nz-icon-arrow-down" :class="canvasProps.backGround?'':'is-rotate'" @click="updateShow('backGround')"/>
</div>
<div v-show="canvasProps.backGround" class="form-row-content">
<div class="form-row-item">
<div class="form-row-key">
{{$t('project.topology.color')}}
</div>
<div class="form-row-value">
<nezhaColor
ref="backgroundNezhaColor"
:isTopo="true"
:value-arr="[{name:'bac',value: background}]"
@colorChange="backgroundChange"/>
</div>
</div>
<div class="form-row-value">
<nezhaColor
ref="backgroundNezhaColor"
:isTopo="true"
:value-arr="[{name:'bac',value: background}]"
@colorChange="backgroundChange"/>
<div class="form-row-item">
<div class="form-row-key">
{{$t('project.topology.image')}}
</div>
<div class="form-row-value">
<meta2dSelectImage :selectImage="bkImage" :imgId="bkImageId" @updateImage="updateImage"/>
</div>
</div>
</div>
<div class="form-row-item">
<div class="form-row-key">
{{$t('project.topology.image')}}
</div>
<div class="form-row-value">
<meta2dSelectImage :selectImage="bkImage" :imgId="bkImageId" @updateImage="updateImage"/>
<!-- align -->
<div class="form-row-title" v-if="selectPenArrId.length > 1">
{{$t('project.topology.align')}}
</div>
<div v-if="selectPenArrId.length > 1" class="form-row-content">
<div class="form-row-item form-row-item-full" style="display: flex">
<label class="hover pointer mr10 iconLabel" v-for="item in nodesAlign" :title="item.desc" :key="item.value">
<i class="nz-icon" :class="item.icon"
@click="onNodesAlign(item.value)"></i>
</label>
</div>
</div>
<div class="form-row-title">
{{$t('project.topology.elements')}}
</div>
</div>
<div class="form-row-title">
{{$t('project.topology.elements')}}
</div>
<div class="form-row-content">
<div class="form-row-content form-row-element">
<div class="form-row-item form-row-item-full">
<draggable
v-model="elements"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-chart-class',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
animation: 150,
handle: '.drag-sort'
}">
<div v-for="(item, index) in elements" :key="item.id" @click.stop="penActive(item)">
<div class="pen-tools pen-item" style="">
<div v-for="(item, index) in elements" :key="item.id" @click.stop="penActive(item)">
<div class="pen-tools pen-item" :class="selectPenArrId.indexOf(item.id) !== -1 ? 'is-active' : ''">
<span class="hide-input">
<i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" style="margin-right: 3px"/>
<i v-else class="nz-icon nz-icon-xiantiao" />
@@ -59,7 +60,7 @@
v-model="item.nzName"
size="small"/>
</span>
<span>
<span>
<span @click.stop="penChange(item, 'locked')" class="pen-tools-item" :title="!item.locked?$t('overall.locked'): $t('overall.unlocked')">
<i class="nz-icon nz-icon-lock" v-if="item.locked"/>
<i class="nz-icon nz-icon-unlock" v-if="!item.locked"/>
@@ -75,11 +76,19 @@
<i class="nz-icon nz-icon-minus"/>
</span>
</span>
</div>
</div>
</div>
</draggable>
</div>
</div>
<div style="display: flex;padding: 10px 0; justify-content: space-between">
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="addNode"
style="margin-right: 20px">
{{$t('add element')}}
</button>
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="selectPenArrId.length" style="margin-right: 20px" @click="clearSelection">
{{$t('Clear selection')}}
</button>
</div>
</div>
</div>
</template>
@@ -103,12 +112,58 @@ export default {
nezhaColor,
meta2dSelectImage
},
computed: {
selectPenArrId () {
console.log(this.selectPenArr)
return this.selectPenArr.active.map(item => item.id)
}
},
data () {
return {
elements: [],
background: '#ffffff00',
bkImage: '',
bkImageId: ''
bkImageId: '',
selectPenArr: {},
nodesAlign: [// 对齐方式
{
value: 'left',
desc: this.$t('overall.left'),
icon: 'nz-icon-zuoduiqi'
}, {
value: 'right',
desc: this.$t('dashboard.panel.chartForm.alignList.right'),
icon: 'nz-icon-youduiqi'
}, {
value: 'top',
desc: this.$t('project.topology.topOffsetY'),
icon: 'nz-icon-dingbuduiqi'
}, {
value: 'bottom',
desc: this.$t('project.topology.bottomOffsetY'),
icon: 'nz-icon-dibuduiqi'
}, {
value: 'center',
desc: this.$t('project.topology.center'),
icon: 'nz-icon-shuxiangjuzhongduiqi'
}, {
value: 'middle',
desc: this.$t('project.topology.middleOffsetY'),
icon: 'nz-icon-hengxiangjuzhongduiqi'
}, {
value: 'same',
desc: '相同大小',
icon: 'nz-icon-paichudingcengtuxing'
}, {
value: 'rectCenter',
desc: '水平等距分布',
icon: 'nz-icon-hengxiangfenbu'
}, {
value: 'rectMiddle',
desc: '垂直等距分布',
icon: 'nz-icon-shuxiangfenbu'
}
]
}
},
mounted () {
@@ -117,6 +172,7 @@ export default {
pen.nzName = 'element - ' + index
}
})
this.selectPenArr = getTopology(this.meta2dId).store
this.elements = getTopology(this.meta2dId).store.data.pens
this.background = getTopology(this.meta2dId).store.data.background || '#ffffff00'
this.bkImage = getTopology(this.meta2dId).store.data.bkImage || ''
@@ -129,6 +185,7 @@ export default {
},
penActive (item) {
// bus.$emit('changeSelectPens', [])
console.log(getTopology(this.meta2dId).store)
this.$emit('changeActiveName')
this.$nextTick(() => {
getTopology(this.meta2dId).active([item])
@@ -197,6 +254,57 @@ export default {
},
focusName (event) {
console.log(event)
},
onNodesAlign (value) {
const pens = getTopology(this.meta2dId).store.active
switch (value) {
case 'left' :
case 'right' :
case 'top' :
case 'bottom' :
case 'center' :
case 'middle' :
getTopology(this.meta2dId).alignNodes(value, pens)
break
case 'rectCenter' :
getTopology(this.meta2dId).spaceBetween(pens)
break
case 'rectMiddle' :
getTopology(this.meta2dId).spaceBetweenColumn(pens)
break
case 'same' :
const findPen = getTopology(this.meta2dId).getPenRect(pens[0])
const height = findPen.height
const width = findPen.width
pens.forEach(item => {
const obj = {
id: item.id,
width: width,
height: height
}
getTopology(this.meta2dId)._setValue(obj)
})
getTopology(this.meta2dId).render()
break
}
},
addNode () {
const data = getTopology(this.meta2dId).data()
const offestX = data.x
const offestY = data.y
const pen = {
name: 'rectangle',
text: 'rectangle',
width: 100,
height: 100,
x: 100 - offestX,
y: 100 - offestY
}
getTopology(this.meta2dId).addPen(pen, true)
},
clearSelection () {
getTopology(this.meta2dId).active([])
bus.$emit('changeSelectPens', [])
}
}
}

2
nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue
View File

@@ -940,7 +940,7 @@
</span>
</div>
<transition name="el-zoom-in-top">
<div v-show="elements.tooltip" class="form-row-content" v-if="pen.type !== 1">
<div v-show="elements.tooltip && pen.data.enable.tooltip" class="form-row-content" v-if="pen.type !== 1">
<div class="form-row-item form-row-item-full">
<div class="form-row-key">
{{$t('project.topology.title')}}

2
nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue
View File

@@ -3,7 +3,7 @@
<div @click="selectBoxShow = !selectBoxShow" style="position: relative">
<div class="image-input">
<span v-if="imageName">{{unit}} / {{imageName}}</span>
<i class="nz-icon nz-icon-circle-close" style="position: absolute;top: 2px;right: 10px;font-size: 8px" @click.stop="selectImageChange({image: '', id: ''})"/>
<i class="el-icon-circle-close" style="position: absolute;top: 10px;right: 10px;font-size: 14px" @click.stop="selectImageChange({image: '', id: ''})"/>
</div>
</div>
<div class="image-select-box" v-if="selectBoxShow">