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

feat： topo 重构 （80%）

Browse Source
This commit is contained in:
zhangyu
2023-02-21 19:05:49 +08:00
parent e468be83e1
commit 22b6043478
15 changed files with 662 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss
View File

@@ -18,3 +18,7 @@
border: 1px solid;
border-color: $--border-color-light;
}
.meta2d-map {
right: unset;
left: 0px;
}

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

@@ -38,6 +38,12 @@
.form-row-item-full{
width: 100%;
}
.form-row-value {
.el-select--small{
width: 100%;
}
}
.form-row-item:nth-of-type(even) {
/*margin-left: 10px;*/
}
@@ -59,4 +65,20 @@
.right-box__container .el-form{
padding-top: 0;
}
.pen-tools{
background: $--background-color-1;
margin-bottom: 10px;
border-radius: 2px;
display: flex;
justify-content: space-between;
padding: 3px 10px
}
.promqlInput .el-cascader-menu{
width: 200px;
}
.element-item .el-row {
.el-cascader--small,.el-select--small {
width: 100%;
}
}
}

14
nezha-fronted/src/components/common/mixin/beforeMeta2d.js
View File

@@ -4,7 +4,7 @@ export default {
topoData: {},
querysArray: [],
meta2dType: '',
timeType: 1
params: {}
}
},
watch: {
@@ -22,11 +22,19 @@ export default {
if (res.data && res.data.topo) {
this.topoData = res.data.topo.topo || {}
this.querysArray = res.data.topo.elements || []
this.timeType = res.data.topo.timeType || 1
this.params = {
timeType: res.data.topo.timeType || 1,
unit: res.data.topo.unit || 1,
statistic: res.data.topo.statistic || 'last',
}
} else {
this.topoData = {}
this.querysArray = []
this.timeType = 1
this.params = {
timeType: 1,
unit: 1,
statistic: 'last'
}
}
})
}

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

@@ -14,7 +14,9 @@ import {
myCubeAnchors
} from '../../L5/services/canvas.js'
import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
import { getMetricTypeValue } from '@/components/common/js/tools'
import bus from '@/libs/bus'
import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
export default {
data () {
return {
@@ -24,9 +26,13 @@ export default {
meta2dLoading: true
}
},
mixins: [topoUtil],
methods: {
init () {
const meta2dOptions = {}
const meta2dOptions = {
minScale: 0.25,
maxScale: 2
}
const meta2d = new Meta2d(this.meta2dId, meta2dOptions)
meta2d.register(flowPens())
meta2d.register(activityDiagram())
@@ -53,7 +59,6 @@ export default {
}
// 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) // 移入画笔·
@@ -68,7 +73,6 @@ export default {
const startTime = endTime - 60 * 5 * 1000
this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
this.clacTopoData(this.topoData, arr).then((data) => {
console.log(data)
getTopology(this.meta2dId).resize()
getTopology(this.meta2dId).open(data)
getTopology(this.meta2dId).centerView()
@@ -76,23 +80,6 @@ export default {
})
})
},
clacTopoData (data, queryValues) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
return new Promise(resolve => {
if (!data.pens) {
data.pens = []
}
data.pens.forEach(pen => {
if (pen.isNz) {
if (pen.data.legend) {
}
} else {
// 处理加载数据
}
})
resolve(data)
})
},
nodeInit (pen) { // 初始化节点参数
if (pen.data && pen.data.params) {
return
@@ -102,12 +89,13 @@ export default {
background: pen.background || '#22222200',
color: pen.color || '#222222ff',
textColor: pen.textColor || '#222222ff',
image: ''
},
imageId: '',
valueMapping: [],
legend: '',
statistic: '',
statistic: 'last',
parent: '',
value: '',
enable: {
valueMapping: true,
tooltip: true
@@ -143,6 +131,7 @@ export default {
pen.visible = pen.visible || true
pen.isNz = true
pen.locked = pen.locked || 0
pen.isBottom = true
},
lineInit (pen) { // 初始化连线参数
if (pen.data && pen.data.params) {
@@ -156,7 +145,9 @@ export default {
},
valueMapping: [],
legend: '',
statistic: '',
statistic: 'last',
parent: '',
value: '',
enable: {
valueMapping: true,
tooltip: true
@@ -178,16 +169,15 @@ export default {
pen.isNz = pen.isNz || true
pen.visible = pen.visible || true
pen.locked = pen.locked || 0
pen.isBottom = true
},
pensActive (pens, e) { // 选中节点
this.selectPens = pens
setTimeout(() => {
this.$refs.meta2dProps.isUpdate = true
this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true)
})
console.log(pens, 'active')
},
topoClick (params, e) { // 点击节点
console.log('click')
if (!params.pen && this.$refs.meta2dProps) {
this.$refs.meta2dProps.activeName = 'canvas'
this.selectPens = []

78
nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
View File

@@ -1,6 +1,7 @@
import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
import bus from '@/libs/bus'
import axios from 'axios'
import {getMetricTypeValue} from "@/components/common/js/tools";
export default {
methods: {
topoResize (id) {
@@ -8,10 +9,9 @@ export default {
},
initEdit (id) {
getTopology(id).lock(0)
getTopology(id).stopAnimate(getTopology(id).data.pens)
console.log(getTopology(id).data.pens)
if (getTopology(id).data.pens) {
getTopology(id).data.pens.forEach(item => {
getTopology(id).stopAnimate()
if (getTopology(id).data().pens) {
getTopology(id).data().pens.forEach(item => {
this.calcNode(item)
})
}
@@ -19,7 +19,7 @@ export default {
getTopology(id).centerView()
},
calcNode (node) { // 处理节点数据
node = { ...node, ...node.data.params }
node = { id: node.id, ...node.data.params }
getTopology(this.meta2dId)._setValue(node)
},
getQueryValues (elements, startTime, endTime) {
@@ -29,7 +29,6 @@ export default {
endTime = parseInt(endTime / 1000)
startTime = parseInt(startTime / 1000)
const urlPre = '/prom'
console.log(endTime, startTime)
elements = elements.filter(item => item.state && item.expression)
const requests = elements.map((element) => {
// query_range
@@ -42,7 +41,6 @@ export default {
return this.$get(query)
})
axios.all(requests).then((res) => {
console.log(res)
const arr = []
res.forEach((request, index) => {
arr.push({
@@ -77,7 +75,8 @@ export default {
type: 'item',
id: rindex + elements[index].name + JSON.stringify(r.metric),
name: this.handleLegendAlias(legend, elements[index].legend, r.metric),
values: r.values
values: r.values,
parent: elements[index].name
}
arr.push(obj)
})
@@ -129,6 +128,69 @@ export default {
}
return aliasExpression
}
},
clacTopoData (data, queryValues) { // 主要处理 属性为原始属性 处理动画属性对原始属性的影响
console.log(this.params)
return new Promise(resolve => { // 处理加载数据
if (!data.pens) {
data.pens = []
}
data.pens.forEach(pen => {
if (pen.isNz) {
if (pen.data.legend) {
const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)
pen.data.value = getMetricTypeValue(findItem.values, pen.data.statistic || 'last')
this.selectMapping(pen)
}
} else {
// 处理 le5le的数据
}
})
resolve(data)
})
},
selectMapping (pen) {
let mapping = ''
const show = pen.data.enable.valueMapping
const valueMapping = pen.data.valueMapping
const value = pen.data.value
if (show && valueMapping) {
valueMapping.forEach(item => {
if (item.type === 'value') {
if (value == item.value) {
mapping = item
}
}
if (item.type === 'range') {
if (value >= item.from && value < item.to) {
mapping = item
}
}
if (item.type === 'regx') {
const reg = new RegExp(item.regx)
if (reg.test(value)) {
mapping = item
}
}
})
if (mapping) {
this.drawPen(pen, mapping)
}
}
},
drawPen (pen, mapping) {
if (!pen.type) {
pen.background = mapping.color.bac
pen.color = mapping.color.border
pen.textColor = mapping.color.text
} else {
pen.animateColor = mapping.color.bac
pen.borderColor = mapping.color.border
pen.color = mapping.color.text
if (pen.lineAnimateType) {
pen.autoPlay = true
}
}
},
}
}

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

@@ -48,7 +48,7 @@
handle: '.drag-sort'
}">
<div v-for="item in elements" :key="item.id" @click.stop="penActive(item)">
<div class="pen-tools" style="background: #999;margin-bottom: 10px;border-radius: 2px;display: flex;justify-content: space-between;padding: 3px 10px">
<div class="pen-tools" style="">
<span>
<i v-if="item.type !== 1" class="nz-icon nz-icon-zhengfangxing" />
<i v-else class="nz-icon nz-icon-compare" />
@@ -117,10 +117,14 @@ export default {
this.canvasProps[key] = !this.canvasProps[key]
},
penActive (item) {
// bus.$emit('changeSelectPens', [])
this.$emit('changeActiveName')
this.$nextTick(() => {
getTopology(this.meta2dId).active([item])
getTopology(this.meta2dId).setValue(item)
getTopology(this.meta2dId).render()
// getTopology(this.meta2dId).setValue(item)
bus.$emit('changeSelectPens', [item])
})
},
penChange (item, key) {
const obj = {
@@ -129,27 +133,29 @@ export default {
if (key === 'visible') {
obj.visible = !item.visible
if (!item.visible) {
if (item.id === getTopology(this.meta2dId).store.active[0].id) {
if (getTopology(this.meta2dId).store.active.length && item.id === getTopology(this.meta2dId).store.active[0].id) {
bus.$emit('changeSelectPens', [])
}
} else {
this.$emit('changeActiveName')
getTopology(this.meta2dId).active([item])
getTopology(this.meta2dId).setValue(item)
getTopology(this.meta2dId).render()
// getTopology(this.meta2dId).setValue(item)
bus.$emit('changeSelectPens', [item])
}
}
if (key === 'locked') {
if (!item.locked) {
obj.locked = 10
if (item.id === getTopology(this.meta2dId).store.active[0].id) {
if (getTopology(this.meta2dId).store.active.length && item.id === getTopology(this.meta2dId).store.active[0].id) {
bus.$emit('changeSelectPens', [])
}
} else {
obj.locked = 0
this.$emit('changeActiveName')
getTopology(this.meta2dId).active([item])
getTopology(this.meta2dId).setValue(item)
getTopology(this.meta2dId).render()
// getTopology(this.meta2dId).setValue(item)
bus.$emit('changeSelectPens', [item])
}
}
@@ -163,7 +169,7 @@ export default {
getTopology(this.meta2dId).addPen(obj, true)
},
delPen (item) {
if (item.id === getTopology(this.meta2dId).store.active[0].id) {
if (getTopology(this.meta2dId).store.active.length && item.id === getTopology(this.meta2dId).store.active[0].id) {
bus.$emit('changeSelectPens', [])
}
getTopology(this.meta2dId).delete([item])
@@ -177,7 +183,6 @@ export default {
this.bkImage = image.image
this.bkImageId = image.id
getTopology(this.meta2dId).setBackgroundImage(image.image)
console.log(getTopology(this.meta2dId).data())
}
}
}

128
nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
View File

@@ -1,13 +1,42 @@
<template>
<div class="pens-data right-box__container">
<div class="form-row-box chart-config">
<div class="form-row-item">
<div class="form-row-item form-row-item-full">
<div class="form-row-key">
Time Range
</div>
<div class="form-row-value">
<el-select v-model="dataTimeType"/>
<el-select v-model="dataTimeType" size="small" style="width: 100%">
<el-option v-for="item in timeData" :key="item.id" :value="item.id" :label="$t(item.text)"></el-option>
</el-select>
</div>
<el-row style="margin-top: 18px;display: flex">
<div class="form-row-item">
<div class="form-row-key">
Statistics
</div>
<div class="form-row-value">
<el-select v-model="dataStatistic" size="small">
<el-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='$t(item.label)'></el-option>
</el-select>
</div>
</div>
<div class="form-row-item">
<div class="form-row-key">
Unit
</div>
<div class="form-row-value">
<el-cascader :id="'columns-unit'" v-model="dataUnit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
size="small"
style="flex: 1"
@change="unitSelected"
>
</el-cascader>
</div>
</div>
</el-row>
</div>
<div class="form-row-item form-row-item-full">
<div
@@ -123,11 +152,12 @@
<script>
import promqlInput from '@/components/page/dashboard/explore/promqlInput'
import promqlInputMixin from '@/components/common/mixin/promqlInput.js'
import {isStat} from "@/components/chart/chart/tools";
import {ColorReverse, randomcolor} from "@/components/common/js/radomcolor/randomcolor";
import {getUUID, resetZIndex} from "@/components/common/js/common";
import lodash from "lodash";
import { isStat } from '@/components/chart/chart/tools'
import { ColorReverse, randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import { getUUID, resetZIndex } from '@/components/common/js/common'
import lodash from 'lodash'
import draggable from 'vuedraggable'
import chartDataFormat from '@/components/chart/chartDataFormat'
const rz = {
methods: {
rz (e) {
@@ -140,7 +170,7 @@ export default {
mixins: [promqlInputMixin, rz],
props: {
querysArray: {},
timeType: {}
params: {},
},
components: {
draggable,
@@ -160,7 +190,79 @@ export default {
'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z'
],
dataTimeType: 1
dataTimeType: 1,
dataStatistic: 'last',
dataUnit: 1,
statisticsList: this.$CONSTANTS.statisticsList,
unitOptions: chartDataFormat.unitOptions(),
timeData: [
{
id: 1,
text: this.$t('dashboard.panel.lastFiveMin'),
type: 'minute',
value: 5
},
{
id: 2,
text: this.$t('dashboard.panel.lastFifteenMin'),
type: 'minute',
value: 15
},
{
id: 3,
text: this.$t('dashboard.panel.lastThirtyMin'),
type: 'minute',
value: 30
},
{
id: 4,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
},
{
id: 5,
text: this.$t('dashboard.panel.lastThreeHour'),
type: 'hour',
value: 3
},
{
id: 6,
text: this.$t('dashboard.panel.lastSixHour'),
type: 'hour',
value: 6
},
{
id: 7,
text: this.$t('dashboard.panel.lastTwelveHour'),
type: 'hour',
value: 12
},
{
id: 8,
text: this.$t('dashboard.panel.lastTwentyFourHour'),
type: 'hour',
value: 24
},
{
id: 9,
text: this.$t('dashboard.panel.lastTwoDay'),
type: 'date',
value: 2
},
{
id: 10,
text: this.$t('dashboard.panel.lastSevenDay'),
type: 'date',
value: 7
},
{
id: 11,
text: this.$t('dashboard.panel.lastThirtyDay'),
type: 'date',
value: 30
}
],
}
},
mounted () {
@@ -176,6 +278,8 @@ export default {
expression: expr,
type: 'expert',
legend: this.expressionsShow[i].legend,
unit: this.expressionsShow[i].unit || 1,
statistic: this.expressionsShow[i].statistic || 'last',
name: this.expressionName[i],
state: this.expressionsShow[i].state,
orderNum: i
@@ -250,6 +354,8 @@ export default {
oldName: expressionName,
error: '',
legend: '',
unit: 1,
statistic: 'last',
elementId: '',
state: 1
})
@@ -264,6 +370,8 @@ export default {
error: '',
elementId: item.id,
legend: item.legend,
unit: item.unit || 1,
statistic: item.statistic || 'last',
state: item.state
})
}
@@ -363,7 +471,9 @@ export default {
this.expressionsShow = []
this.expressionName = []
this.elements = this.$loadsh.cloneDeep(this.querysArray)
this.dataTimeType = this.timeType
this.dataTimeType = this.params.timeType || 1
this.dataStatistic = this.params.statistic || 'last'
this.dataUnit = this.params.unit || 1
if (!this.elements.length) {
this.addExpression()
} else {

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

@@ -677,27 +677,24 @@
</span>
</div>
<transition name="el-zoom-in-top">
<div class="el-form" v-show="elements.valueMapping">
<div class="el-form" v-show="elements.valueMapping && pen.data.enable.valueMapping">
<div class="form-row-content">
<div class="form-row-item">
<div class="form-row-item form-row-item-full">
<div class="form-row-key">
Legend
</div>
<div class="form-row-value">
<div style="display: inline-block;width: calc(50% - 3px)">
<el-select v-model="pen.data.parent" size="small">
<el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select>
</div>
<div style="display: inline-block;width: calc(50% - 3px)">
<el-select v-model="pen.data.legend" size="small">
<el-option v-for="item in queryValues" :key="item.id" :value="item.id" :label='item.name'></el-option>
<el-option v-for="item in queryValues.filter(query => (query.parent === pen.data.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select>
</div>
</div>
<div class="form-row-item">
<div class="form-row-key">
Statistics
</div>
<div class="form-row-value">
<el-select v-model="pen.data.statistic" size="small">
<el-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='item.label'></el-option>
</el-select>
</div>
</div>
<div class="form-row-item form-row-item-full chart-config">
<el-row class="el-form">

92
nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
View File

@@ -2,18 +2,12 @@
<div class="topo-header top-tools">
<div v-if="!isChart && !editFlag"> {{project && project.name}} </div>
<div class="tools-left" v-if="editFlag">
<div class="tools-left-drag">
<div
draggable="true"
@dragstart.stop="onDragstart($event)"
@click="onTouchstart($event)"
<topology-top-tool
v-if="editFlag&&toolShow"
:meta2dId="meta2dId"
ref="topTool"
>
<i class="nz-icon nz-icon-zhengfangxing" />
</div>
</div>
<div class="tools-left-draw" @click="setDrawPen()">
<i class="nz-icon nz-icon-compare" />
</div>
</topology-top-tool>
</div>
<div v-if="!editFlag" class="top-tool-right">
<pick-time
@@ -60,10 +54,15 @@
import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
import { getTopology, setTopology, dealImg, topologyImg } from '@/components/common/js/common'
import { deepClone } from '@meta2d/core'
import bus from "@/libs/bus";
import bus from '@/libs/bus'
import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
export default {
name: 'meta2dHeader',
mixins: [topoUtil],
components: {
topologyTopTool
},
props: {
meta2dId: {},
isChart: {
@@ -71,13 +70,17 @@ export default {
default: false
},
project: {},
editFlag: {}
editFlag: {
type: Boolean,
default: false
}
},
data () {
return {
topoScreenState: '',
isPreview: false,
searchTime: bus.getTimezontDateRange(),
toolShow: true
}
},
computed: {
@@ -98,31 +101,10 @@ export default {
this.$emit('edit')
})
},
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 () {
getTopology(this.meta2dId).drawLine('line')
},
saveMeta2d () {
if (this.$refs.topTool.option.map) {
getTopology(this.meta2dId).hideMap()
}
if (this.isChart) {
this.saveChart()
} else {
@@ -134,11 +116,15 @@ export default {
},
saveProject () {
const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
console.log(elements)
const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
const unit = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataUnit
const statistic = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataStatistic
const params = {
topo: getTopology(this.meta2dId).data(),
elements: elements,
timeType: ''
timeType: timeType || 1,
unit: unit || 1,
statistic: statistic || 'last',
}
this.$put('monitor/project/topo', { topo: JSON.stringify(params), projectId: this.project.id }).then(res => {
@@ -168,12 +154,36 @@ export default {
},
changeScreen () {
this.$store.commit('setShowTopoScreen', !this.topoScreen)
this.$nextTick(() => {
getTopology(this.meta2dId).resize()
getTopology(this.meta2dId).centerView()
})
},
previewTopology () {
this.isPreview = true
const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
const endTime = new Date().getTime()
const startTime = endTime - 60 * 5 * 1000
this.getQueryValues(elements, startTime, endTime).then(arr => {
this.clacTopoData(getTopology(this.meta2dId).data(), arr).then((data) => {
getTopology(this.meta2dId).resize()
getTopology(this.meta2dId).open(data)
getTopology(this.meta2dId).centerView()
getTopology(this.meta2dId).lock(1)
})
})
},
previewExit () {
this.isPreview = false
getTopology(this.meta2dId).lock(0)
getTopology(this.meta2dId).stopAnimate()
if (getTopology(this.meta2dId).data().pens) {
getTopology(this.meta2dId).data().pens.forEach(item => {
this.calcNode(item)
})
}
getTopology(this.meta2dId).render()
getTopology(this.meta2dId).centerView()
},
cancelTopology () {
this.$emit('exitEdit', true)

4
nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
View File

@@ -9,7 +9,7 @@
ref="meta2dProps"
:selectPens.sync="selectPens"
:querysArray="querysArray"
:timeType="timeType"
:params="params"
:meta2dId="meta2dId"
@updatePens="updatePens"
/>
@@ -34,7 +34,7 @@ export default {
default: false
},
querysArray: {},
timeType: {},
params: {},
project: {}
},
components: {

4
nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
View File

@@ -8,7 +8,7 @@
<meta2dCanvas :canvasProps="canvasProps" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
</el-tab-pane>
<el-tab-pane label="data" name="data">
<meta2dData :querysArray.sync="querysArray" :timeType.sync="timeType" ref="meta2dData"/>
<meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData"/>
</el-tab-pane>
</el-tabs>
</div>
@@ -31,7 +31,7 @@ export default {
props: {
selectPens: {},
querysArray: {},
timeType: {},
params: {},
meta2dId: {}
},
components: {

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

@@ -1,17 +1,41 @@
<template>
<div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
<div @click="selectBoxShow = !selectBoxShow">
<img :src="selectImage" v-if="selectImage" class="image-box">
<div @click="selectBoxShow = !selectBoxShow" style="position: relative">
<div v-if="selectImage" class="image-box">
<img :src="selectImage" class="image-box">
</div>
<div v-else class="image-box image-box-null" />
<i class="nz-icon nz-icon-close" style="position: absolute;top: 0;right: 0;font-size: 10px" @click.stop="selectImageChange({image: '', id: ''})"/>
</div>
<div class="image-select-box" v-if="selectBoxShow">
<div class="image-box-item" @click="selectImageChange({image: '', id: ''})">
<img :src="imageNull" class="imag-src"/>
<div class="img-text text-ellipsis">kong</div>
<!-- <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">-->
<!-- <img :src="item.image" class="imag-src"/>-->
<!-- <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
<!-- </div>-->
<div style="height: 450px" v-my-loading="imgageLoading">
<el-card shadow="hover" style="height:420px;width:100%;overflow-y: auto"
class="project-topology-add-node">
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
<el-collapse-item :title="item.group" :name="item.group">
<template slot="title">
<div style="display: flex;width: 100%;">
<div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
</div>
<div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">
<img :src="item.image" class="imag-src"/>
</template>
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item">
<img :src="btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
<div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>
<i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click.stop="tooltipDelete(btn)"></i>
</div>
</el-collapse-item>
</el-collapse>
</el-card>
<div class="upload-pic-box" @click="uploadPicChange">
<i class="el-icon-plus"></i>
<span>
{{ $t('overall.uploadCustomPicture') }}
</span>
</div>
</div>
</div>
</div>
@@ -19,6 +43,7 @@
<script>
import { dealImg, topologyImg } from '@/components/common/js/common'
import { imageTemp } from '@/components/common/project/L5/services/canvas'
export default {
name: 'meta2dSelectImage',
@@ -31,7 +56,8 @@ export default {
imgageLoading: false,
iconArray: [],
selectBoxShow: false,
imageNull: ''
imageNull: '',
activeNames: []
}
},
mounted () {
@@ -54,7 +80,31 @@ export default {
this.iconArray = [...res.data.list]
this.iconArray.forEach((item, index) => {
item.image = res2[index].data
const group = this.tools.find(tool => tool.group === item.unit)
if (group) {
group.children.push({
text: item.imageName,
imageName: item.imageName,
image: res2[index].data,
imageId: item.id,
id: item.id,
unit: item.unit,
})
} else {
this.tools.push({
group: item.unit,
children: [{
text: item.imageName,
imageName: item.imageName,
image: res2[index].data,
imageId: item.id,
id: item.id,
unit: item.unit,
}]
})
}
})
this.imgInit = true
this.imgageLoading = false
imgArr = null
@@ -67,6 +117,48 @@ export default {
},
selectImageChange (item) {
this.$emit('updateImage', item)
},
tooltipDelete (item) {
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.delImg(item)
})
},
tooltipDeleteTitle (item) {
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.delCollpseTitle(item)
})
},
delImg (item) {
this.$delete('monitor/project/topo/icon?ids=' + item.imageId).then(res => {
if (res.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
const findItem = this.tools.find(group => group.group === item.unit)
findItem.children = findItem.children.filter(child => child.imageId !== item.imageId)
} else {
this.$message.error(res.msg)
}
})
},
delCollpseTitle (item) {
this.$delete('monitor/project/topo/iconUnit?unit=' + item.group).then(res => {
if (res.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.tools = this.tools.filter(group => group.group !== item.unit)
} else {
this.$message.error(res.msg)
}
})
},
uploadPicChange () {
}
}
}
@@ -82,38 +174,46 @@ export default {
.image-box-null {
border: 1px solid #999999;
box-sizing: border-box;
border-radius: 2px;
}
.image-select-box {
text-align: center;
width: 254px;
max-height: 300px;
overflow-y: auto;
width: 225px;
z-index: 1;
padding: 10px 0px 0px 10px;
padding: 5px 0px 0px 0px;
position: absolute;
top: 26px;
background: #ffffff;
border: 1px solid #999999;
border-radius: 4px;
left: 0;
/deep/ .el-card__body {
padding: 0;
}
.image-box-item {
width: 50px;
height: 70px;
width: 30px;
height: 50px;
margin: 0 10px 10px 0;
flex-direction: column;
align-items: center;
display: inline-block;
.imag-src{
width: 50px;
height: 50px;
position: relative;
.image-src{
width: 30px;
height: 30px;
}
.img-text {
.image-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.delIcon{
position: absolute;
right: 0;
top: 0;
}
}
}
}

215
nezha-fronted/src/components/common/project/meta2d/topologyTopTool.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<div class="tool-top" id="tool-top">
<div id="tools-left-drag" class="top-tool-item" :title="'add node'">
<div
draggable="true"
@dragstart.stop="onDragstart($event)"
@click="onTouchstart($event)"
>
<i class="nz-icon nz-icon-zhengfangxing" />
</div>
</div>
<div id="tools-left-draw" class="top-tool-item" @click="setDrawPen()" :title="'add line'">
<i class="nz-icon nz-icon-compare" />
</div>
<div id="undo" :class="['top-tool-item',]" @click="undo"> <i class="nz-icon nz-icon-revoke" :title="$t('overall.revocation')"/> </div>
<div id="redo" :class="['top-tool-item',]" @click="redo"> <i class="nz-icon nz-icon-revoke1" :title="$t('overall.redo')"/> </div>
<!--<div> 保存为图片 </div>-->
<div class="top-tool-item" @click="del" :title="$t('overall.delete')"> <i class="nz-icon nz-icon-delete"/> </div>
<div class="top-tool-item top-tool-item-scale">
<span class="scale-number">
<span class="scale-number-minus scale-number-symbol" @click="changeScale(-25)">-</span>
<el-popover
placement="bottom"
width="111"
trigger="hover"
class="scale-number-box"
popper-class="scale-number-popover no-style-class"
>
<div class="scale-num-pop" style=" width: 91px;min-width: 91px">
<div>缩放级别</div>
<div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
<div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
<div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
</div>
<span class="scale-number-content" slot="reference">{{scaleNum}}%</span>
</el-popover>
<span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
</span>
</div>
<div class="top-tool-item top-tool-item-switch">
<label>{{$t('project.topology.grids')}}</label>
<el-switch
v-model="option.grid"
:active-value="true"
:inactive-value="false"
@change="changeOption('grid')">
</el-switch>
</div>
<div class="top-tool-item top-tool-item-switch">
<label>{{$t('project.topology.rule')}}</label>
<el-switch
v-model="option.rule"
:active-value="true"
:inactive-value="false"
@change="changeOption('rule')">
</el-switch>
</div>
<div class="top-tool-item top-tool-item-switch">
<label>{{$t('Thumbnail')}}</label>
<el-switch
v-model="option.map"
:active-value="true"
:inactive-value="false"
@change="showMap()">
</el-switch>
</div>
</div>
</template>
<script>
import { getTopology } from '../../js/common'
import bus from '@/libs/bus'
import { deepClone } from '@meta2d/core'
export default {
name: 'topologyTopTool',
data () {
return {
option: {
lineName: 'curve',
lineWidth: 1,
fromArrow: '',
toArrow: 'triangleSolid',
scale: 100,
grid: false,
rule: false,
map: false
},
scaleNum: 100,
penLineType: [
{ d: 'M5 14 a100,50 0 0,1 85,0', 'stroke-dasharray': '', name: 'curve' },
{ d: 'M5 8 l40 0 l0 12 l40 0', 'stroke-dasharray': '', name: 'polyline' },
{ d: 'M5 14 l85 0', 'stroke-dasharray': '', name: 'line' },
{ d: 'M5 20 C0,8 50,0 85,0', 'stroke-dasharray': '', name: 'mind' }
],
penLineFromTOArrow: [
{ d: 'M5 14 l85 0', points: '', fill: '', stroke: '', 'stroke-width': '', name: '' },
{ d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#000000', stroke: '', 'stroke-width': '', name: 'triangleSolid' },
{ d: 'M5 14 l85 0', points: '5 14,20 9,20 19', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', name: 'triangle' },
{ d: 'M5 14 l85 0', fill: '#000000', stroke: '', 'stroke-width': '', cx: '10', cy: '14', r: '5', name: 'circleSolid' },
{ d: 'M5 14 l85 0', fill: '#ffffff', stroke: '#000000', 'stroke-width': '1', cx: '10', cy: '14', r: '5', name: 'circle' }
],
redoFlag: false
}
},
props: {
meta2dId: {
require: true
}
},
mounted () {
const dataOption = getTopology(this.meta2dId).store.data
Object.keys(this.option).forEach(key => {
if (key === 'scale') {
this.scaleNum = (dataOption[key] ? parseInt(dataOption[key] * 100) : this.scaleNum)
} else {
this.option[key] = (JSON.stringify(dataOption[key]) ? dataOption[key] : this.option[key])
}
})
getTopology(this.meta2dId).on('scale', this.topoScale) // 缩放·
},
methods: {
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 () {
getTopology(this.meta2dId).drawLine('line')
},
changeOption (key) {
// getTopology(this.meta2dId).data[key] = this.option[key]
const obj = {}
obj[key] = this.option[key]
if (key === 'grid') {
getTopology(this.meta2dId).setGrid(obj)
} else {
getTopology(this.meta2dId).setRule(obj)
}
getTopology(this.meta2dId).render()
},
showMap () { // 显示鹰眼
if (this.option.map) {
getTopology(this.meta2dId).showMap()
} else {
getTopology(this.meta2dId).hideMap()
}
},
undo () { // 撤销
getTopology(this.meta2dId).undo()
// getTopology(this.meta2dId).inactive()
bus.$emit('changeSelectPens', [])
},
redo () { // 重做
getTopology(this.meta2dId).redo()
// getTopology(this.meta2dId).inactive()
bus.$emit('changeSelectPens', [])
},
centerView () { // 居中显示
getTopology(this.meta2dId).centerView()
},
fitView () { // 自适应画布大小
getTopology(this.meta2dId).fitView()
},
changeScale (num) {
this.scaleNum += num
if (this.scaleNum < 25) {
this.scaleNum = 25
}
if (this.scaleNum > 400) {
this.scaleNum = 400
}
this.scale(this.scaleNum)
},
scale (val) {
this.scaleNum = val
getTopology(this.meta2dId).scale(val / 100)
},
del () {
bus.$emit('changeSelectPens', [])
getTopology(this.meta2dId).delete(getTopology(this.meta2dId).store.active)
},
clear () {
const data = { ...getTopology(this.meta2dId).data }
data.pens = []
getTopology(this.meta2dId).open({})
},
toolShowChange (attr) {
this.$emit('toolShowChange', attr)
},
changeOpt (key, val) {
},
topoScale (num) {
this.scaleNum = parseInt(num * 100)
}
}
}
</script>

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

@@ -170,17 +170,9 @@ export default {
this.getNodesArr()
},
topoScale (num) {
this.moduleId = ''
getTopology(this.topologyIndex).centerView()
this.showNodeTools('')
this.popDataShowUpdate('', false)
if (!this.editTopologyFlag) {
getTopology(this.topologyIndex)
}
if (this.$refs.topTool) {
this.$refs.topTool.scaleNum = parseInt(num * 100)
}
this.getNodesArr()
},
topoClick (pointAndPen) {
this.showNodeTools('')

2
nezha-fronted/src/components/page/monitor/project/project.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="project">
<!-- <topologyL5 v-if="reloadFacade" ref="facade" :obj="currentProject" :topologyIndexF="topologyIndexF" targetTab.sync="panel" @changeTopologyIndexF="changeTopologyIndexF"/>-->
<meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :project="currentProject" :timeType="timeType" @reload="reload"/>
<meta2dMain :meta2dId="'projectId'" :topoData="topoData" :querysArray="querysArray" :project="currentProject" :params="params" @reload="reload"/>
<transition name="el-zoom-in-bottom">
<bottom-box
v-if="bottomBox.showSubList"