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

feat： topo重构

Browse Source
This commit is contained in:
zhangyu
2023-02-22 18:21:39 +08:00
parent 9caa58a76b
commit 245eb6f985
12 changed files with 271 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -647,6 +647,7 @@ textarea {
transform: unset !important; transform: unset !important;
} }
} }
.nz-el-dropdown-menu{ .nz-el-dropdown-menu{
.el-dropdown-menu__item{ .el-dropdown-menu__item{
padding: 0; padding: 0;

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

@@ -81,4 +81,65 @@
width: 100%; width: 100%;
} }
} }
.meta2d-image-box{
position: relative;
.image-box {
width: 30px;
height: 30px;
}
.image-box-null {
border: 1px solid $--border-color-base-focus;
box-sizing: border-box;
border-radius: 2px;
}
.image-select-box {
text-align: center;
width: 225px;
z-index: 1;
padding: 0px 0px 0px 0px;
position: absolute;
top: 26px;
background: $--background-color-empty;
border: 1px solid $--border-color-light;
border-radius: 4px;
left: 0;
.el-card {
border: none;
}
.el-card__body {
padding: 0;
}
.el-collapse-item {
margin-bottom: 2px;
}
.image-box-item {
width: 30px;
height: 30px;
margin: 5px 10px 10px 0;
flex-direction: column;
align-items: center;
display: inline-block;
position: relative;
.image-src{
width: 30px;
height: 30px;
}
.image-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.delIcon{
position: absolute;
right: -6px;
top: -8px;
}
}
.upload-pic-box{
width: 100%;
}
}
}
} }

3
nezha-fronted/src/components/cli/webSSHNew.vue
View File

@@ -432,8 +432,7 @@ export default {
// this.$refs['console' + el.index][0].focusConsole() // this.$refs['console' + el.index][0].focusConsole()
if (this.$refs['console' + el.index] && this.$refs['console' + el.index][0]) { if (this.$refs['console' + el.index] && this.$refs['console' + el.index][0]) {
setTimeout(() => { setTimeout(() => {
this.$refs['console' + el.index][0].term.resize(225, 200) this.$refs['console' + el.index][0].resize()
this.$refs['console' + el.index][0].term.fit()
this.$refs['console' + el.index][0].term.scrollToBottom() this.$refs['console' + el.index][0].term.scrollToBottom()
this.$refs['console' + el.index][0].focusConsole() this.$refs['console' + el.index][0].focusConsole()
}) })

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

@@ -23,7 +23,7 @@ export default {
this.topoData = res.data.topo.topo || {} this.topoData = res.data.topo.topo || {}
this.querysArray = res.data.topo.elements || [] this.querysArray = res.data.topo.elements || []
this.params = { this.params = {
timeType: res.data.topo.timeType || 1, timeType: res.data.topo.timeType || 5,
unit: res.data.topo.unit || 1, unit: res.data.topo.unit || 1,
statistic: res.data.topo.statistic || 'last', statistic: res.data.topo.statistic || 'last',
} }
@@ -31,7 +31,7 @@ export default {
this.topoData = {} this.topoData = {}
this.querysArray = [] this.querysArray = []
this.params = { this.params = {
timeType: 1, timeType: 5,
unit: 1, unit: 1,
statistic: 'last' statistic: 'last'
} }

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

@@ -25,14 +25,16 @@ export default {
meta2dLoading: true, meta2dLoading: true,
position: { position: {
top: 50, top: 50,
left: 0 left: 0,
show: false
}, },
timer3: null,
chartParams: { chartParams: {
chartType: 'line', chartType: 'line',
content: '', content: '',
legends: [], legends: [],
title: '', title: '',
titleShow: true, titleShow: true
} }
} }
}, },
@@ -80,7 +82,8 @@ export default {
}, },
reload () { reload () {
const endTime = new Date().getTime() const endTime = new Date().getTime()
const startTime = endTime - 60 * 5 * 1000 const startTime = endTime - 60 * this.params.timeType * 1000
console.log(startTime)
this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => { this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
console.log(arr) console.log(arr)
this.clacTopoData(this.topoData, arr).then((data) => { this.clacTopoData(this.topoData, arr).then((data) => {
@@ -184,6 +187,7 @@ export default {
}, },
pensActive (pens, e) { // 选中节点 pensActive (pens, e) { // 选中节点
this.selectPens = pens this.selectPens = pens
setTimeout(() => { setTimeout(() => {
this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true) this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true)
}) })
@@ -194,20 +198,76 @@ export default {
this.selectPens = [] this.selectPens = []
} }
}, },
penEnter (pen) { // 移入节点 penEnter (pen, e) { // 移入节点
console.log(pen, 'penEnter') console.log(pen, e, 'penEnter')
if (!pen.type) { console.log(getTopology(this.meta2dId).getPenRect(pen))
if (this.timer3) {
clearTimeout(this.timer3)
this.timer3 = null
}
this.position.show = false
if (!pen.type && pen.data.enable.tooltip) {
if (!pen.data.tooltip.legends.length) {
return
}
this.chartParams = { this.chartParams = {
...pen.data.tooltip, ...pen.data.tooltip,
unit: this.params.unit, unit: this.params.unit,
statistic: this.params.statistic statistic: this.params.statistic
} }
// this.chartParams.type = 'line' this.timer3 = setTimeout(() => {
// this.chartParams.values = pens.data.values let ePosition = window.ePosition
console.log(this.meta2dId, ePosition)
let boxWidth = this.$refs.meta2dBox.offsetWidth
let boxHeight = this.$refs.meta2dBox.offsetHeight
this.position.left = ePosition.layerX
this.position.top = ePosition.layerY
this.$nextTick(() => {
if ((boxWidth / 2) > ePosition.layerX) {
this.position.left = ePosition.layerX + 20
} else {
this.position.left = ePosition.layerX - 20 - 400
}
if (boxHeight > (ePosition.layerY + 300)) {
this.position.top = ePosition.layerY + 50
} else {
this.position.top = ePosition.layerY - 300
}
ePosition = null
boxWidth = null
boxHeight = null
})
this.position.show = true
clearTimeout(this.timer3)
}, 100)
} }
}, },
penLeave (pens) { // 移出节点 penLeave () {
// console.log(pens) if (!this.timer3) {
this.timer3 = setTimeout(() => {
this.position.show = false
this.timer3 = null
}, 50)
} else {
clearTimeout(this.timer3)
this.timer3 = null
this.timer3 = setTimeout(() => {
this.position.show = false
this.timer3 = null
}, 50)
}
},
tooltipOver () {
console.log('tooltipOver')
clearTimeout(this.timer3)
this.timer3 = null
},
tooltipOut () {
console.log('tooltipOut')
this.timer3 = setTimeout(() => {
this.position.show = false
this.timer3 = null
}, 50)
}, },
updatePens (pen, key) { // 更新对应的节点 updatePens (pen, key) { // 更新对应的节点
// meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false }); // meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false });

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

@@ -2,6 +2,7 @@ import { getTopology, setTopology, dealImg, topologyImg } from '@/components/com
import bus from '@/libs/bus' import bus from '@/libs/bus'
import axios from 'axios' import axios from 'axios'
import { getMetricTypeValue } from '@/components/common/js/tools' import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from "@/components/chart/chartDataFormat";
export default { export default {
methods: { methods: {
topoResize (id) { topoResize (id) {
@@ -74,7 +75,7 @@ export default {
const obj = { const obj = {
type: 'item', type: 'item',
id: rindex + elements[index].name + JSON.stringify(r.metric), id: rindex + elements[index].name + JSON.stringify(r.metric),
name: this.handleLegendAlias(legend, elements[index].legend, r.metric), name: this.handleLegendAlias(legend, elements[index].legend, r.metric) || legend,
values: r.values, values: r.values,
metric: r.metric || {}, metric: r.metric || {},
elements: elements[index], elements: elements[index],
@@ -138,11 +139,12 @@ export default {
} }
data.pens.forEach(pen => { data.pens.forEach(pen => {
if (pen.isNz) { if (pen.isNz) {
if (pen.data.legend) { if (pen.data.legend && pen.data.enable.valueMapping) {
const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent) const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent)
console.log(findItem) console.log(findItem)
if (findItem) { if (findItem) {
pen.data.value = getMetricTypeValue(findItem.values, this.params.statistic || 'last') pen.data.value = getMetricTypeValue(findItem.values, findItem.elements.statistic || 'last')
pen.data.showValue = chartDataFormat.getUnit(findItem.elements.unit).compute(pen.data.value, null, 2)
this.selectMapping(pen) this.selectMapping(pen)
} }
} }
@@ -158,6 +160,7 @@ export default {
const show = pen.data.enable.valueMapping const show = pen.data.enable.valueMapping
const valueMapping = pen.data.valueMapping const valueMapping = pen.data.valueMapping
const value = pen.data.value const value = pen.data.value
const showValue = pen.data.showValue
if (show && valueMapping) { if (show && valueMapping) {
valueMapping.forEach(item => { valueMapping.forEach(item => {
if (item.type === 'value') { if (item.type === 'value') {
@@ -172,7 +175,9 @@ export default {
} }
if (item.type === 'regx') { if (item.type === 'regx') {
const reg = new RegExp(item.regx) const reg = new RegExp(item.regx)
if (reg.test(value)) { if (reg.test(showValue)) {
mapping = item
} else if (reg.test(value)) {
mapping = item mapping = item
} }
} }

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

@@ -7,36 +7,36 @@
</div> </div>
<div class="form-row-value"> <div class="form-row-value">
<el-select v-model="dataTimeType" size="small" style="width: 100%"> <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-option v-for="item in timeData" :key="item.id" :value="item.value" :label="$t(item.text)"></el-option>
</el-select> </el-select>
</div> </div>
<el-row style="margin-top: 18px;display: flex"> <!-- <el-row style="margin-top: 18px;display: flex">-->
<div class="form-row-item"> <!-- <div class="form-row-item">-->
<div class="form-row-key"> <!-- <div class="form-row-key">-->
Statistics <!-- Statistics-->
</div> <!-- </div>-->
<div class="form-row-value"> <!-- <div class="form-row-value">-->
<el-select v-model="dataStatistic" size="small"> <!-- <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-option v-for="item in statisticsList" :key="item.value" :value="item.value" :label='$t(item.label)'></el-option>-->
</el-select> <!-- </el-select>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="form-row-item"> <!-- <div class="form-row-item">-->
<div class="form-row-key"> <!-- <div class="form-row-key">-->
Unit <!-- Unit-->
</div> <!-- </div>-->
<div class="form-row-value"> <!-- <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 <!-- <el-cascader :id="'columns-unit'" v-model="dataUnit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable-->
placeholder="" <!-- placeholder=""-->
popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit" <!-- popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"-->
size="small" <!-- size="small"-->
style="flex: 1" <!-- style="flex: 1"-->
@change="unitSelected" <!-- @change="unitSelected"-->
> <!-- >-->
</el-cascader> <!-- </el-cascader>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</el-row> <!-- </el-row>-->
</div> </div>
<div class="form-row-item form-row-item-full"> <div class="form-row-item form-row-item-full">
<div <div
@@ -139,6 +139,33 @@
<el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input> <el-input maxlength="512" show-word-limit size="small" type="text" v-model="expressionsShow[index-1].legend" @change="expressionChange"></el-input>
</el-col> </el-col>
</el-row> </el-row>
<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="expressionsShow[index-1].statistic" 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="expressionsShow[index-1].unit" :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>
</el-row> </el-row>
</transition> </transition>
</el-row> </el-row>
@@ -190,7 +217,7 @@ export default {
'O', 'P', 'Q', 'R', 'S', 'T', 'O', 'P', 'Q', 'R', 'S', 'T',
'U', 'V', 'W', 'X', 'Y', 'Z' 'U', 'V', 'W', 'X', 'Y', 'Z'
], ],
dataTimeType: 1, dataTimeType: 5,
dataStatistic: 'last', dataStatistic: 'last',
dataUnit: 1, dataUnit: 1,
statisticsList: this.$CONSTANTS.statisticsList, statisticsList: this.$CONSTANTS.statisticsList,
@@ -218,51 +245,51 @@ export default {
id: 4, id: 4,
text: this.$t('dashboard.panel.lastOneHour'), text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour', type: 'hour',
value: 1 value: 60
}, },
{ {
id: 5, id: 5,
text: this.$t('dashboard.panel.lastThreeHour'), text: this.$t('dashboard.panel.lastThreeHour'),
type: 'hour', type: 'hour',
value: 3 value: 3 * 60
}, },
{ {
id: 6, id: 6,
text: this.$t('dashboard.panel.lastSixHour'), text: this.$t('dashboard.panel.lastSixHour'),
type: 'hour', type: 'hour',
value: 6 value: 6 * 60
}, },
{ {
id: 7, id: 7,
text: this.$t('dashboard.panel.lastTwelveHour'), text: this.$t('dashboard.panel.lastTwelveHour'),
type: 'hour', type: 'hour',
value: 12 value: 12 * 60
}, },
{ {
id: 8, id: 8,
text: this.$t('dashboard.panel.lastTwentyFourHour'), text: this.$t('dashboard.panel.lastTwentyFourHour'),
type: 'hour', type: 'hour',
value: 24 value: 24 * 60
}, },
{ {
id: 9, id: 9,
text: this.$t('dashboard.panel.lastTwoDay'), text: this.$t('dashboard.panel.lastTwoDay'),
type: 'date', type: 'date',
value: 2 value: 2 * 24 * 60
}, },
{ {
id: 10, id: 10,
text: this.$t('dashboard.panel.lastSevenDay'), text: this.$t('dashboard.panel.lastSevenDay'),
type: 'date', type: 'date',
value: 7 value: 7 * 24 * 60
}, },
{ {
id: 11, id: 11,
text: this.$t('dashboard.panel.lastThirtyDay'), text: this.$t('dashboard.panel.lastThirtyDay'),
type: 'date', type: 'date',
value: 30 value: 30 * 24 * 60
} }
], ]
} }
}, },
mounted () { mounted () {

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

@@ -684,12 +684,12 @@
Legend Legend
</div> </div>
<div class="form-row-value"> <div class="form-row-value">
<div style="display: inline-block;width: calc(50% - 3px)"> <div style="display: inline-block;width: calc(20% - 3px)">
<el-select v-model="pen.data.parent" size="small"> <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-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select> </el-select>
</div> </div>
<div style="display: inline-block;width: calc(50% - 3px)"> <div style="display: inline-block;width: calc(80% - 3px)">
<el-select v-model="pen.data.legend" size="small"> <el-select v-model="pen.data.legend" size="small">
<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-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> </el-select>
@@ -882,17 +882,31 @@
</transition> </transition>
<!-- tooltip --> <!-- tooltip -->
<div class="form-row-title" v-if="pen.type !== 1"> <div class="form-row-title">
tooltip Tooltip
<span>
<el-switch
v-model="pen.data.enable.tooltip"
:active-value="true"
:inactive-value="false"
@change="change('data.enable.tooltip')"
></el-switch>
<i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/> <i class="nz-icon nz-icon-arrow-down" @click="updateShow('tooltip')"/>
</span>
</div> </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" class="form-row-content" v-if="pen.type !== 1">
<div class="form-row-item form-row-item-full"> <div class="form-row-item form-row-item-full">
<div class="form-row-key"> <div class="form-row-key">
Title Title
</div> </div>
<div class="form-row-value"> <div class="form-row-value" style="display: flex">
<el-input v-model="pen.data.tooltip.title" /> <el-input v-model="pen.data.tooltip.title" size="small" style="flex: 1"/>
<!-- 显示头部 -->
<div class="choose-header-btn" @click="pen.data.tooltip.titleShow = !pen.data.tooltip.titleShow" :title="$t('overall.visible')">
<i class="nz-icon nz-icon-mimakejian" v-if="pen.data.tooltip.titleShow"></i>
<i class="nz-icon nz-icon-mimabukejian" v-else></i>
</div>
</div> </div>
</div> </div>
<div class="form-row-item form-row-item-full"> <div class="form-row-item form-row-item-full">
@@ -908,28 +922,36 @@
Content Content
</div> </div>
<div class="form-row-value"> <div class="form-row-value">
<el-input v-model="pen.data.tooltip.content" /> <el-input maxlength="256" show-word-limit v-model="pen.data.tooltip.content" size="small" :rows="4" type="textarea"/>
</div> </div>
</div> </div>
<div class="form-row-item form-row-item-full"> <div class="form-row-item form-row-item-full chart-config">
<div class="form-row-key"> <div class="form-row-key" style="margin-bottom: 5px">
Legends Legends
</div> </div>
<div class="form-row-value" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend"> <div class="form-row-value" style="margin-bottom: 10px" v-for="legend in pen.data.tooltip.legends" :key="legend.parent + legend.legend">
<div style="display: inline-block;width: calc(50% - 3px)"> <div style="display: inline-block;width: calc(20% - 3px)">
<el-select v-model="legend.parent" size="small"> <el-select v-model="legend.parent" size="small" style="width: 100%">
<el-option v-for="item in queryValues.filter(query => query.type === 'title')" :key="item.id" :value="item.name" :label='item.name'></el-option> <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> </el-select>
</div> </div>
<div style="display: inline-block;width: calc(50% - 3px)"> <div style="display: inline-block;width: calc(40% - 3px)">
<el-select v-model="legend.legend" size="small"> <el-select v-model="legend.legend" size="small" style="width: 100%">
<el-option v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option> <el-option v-for="item in queryValues.filter(query => (query.parent === legend.parent) && query.type === 'item')" :key="item.id" :value="item.name" :label='item.name'></el-option>
</el-select> </el-select>
</div> </div>
</div> <div style="display: inline-block;width: calc(40% - 3px)">
<div @click="addTooltipLegend()"> jia</div> <el-input v-model="legend.alias" size="small" style="width: 100%">
<template slot="prepend">Alias</template>
</el-input>
</div> </div>
</div> </div>
<div @click="addTooltipLegend" class="thresholds-add">
{{$t('overall.addTooltipLegend')}}
</div>
</div>
</div>
</transition>
</div> </div>
</div> </div>
</template> </template>

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

@@ -150,7 +150,7 @@ export default {
}) })
}, },
dateChange () { dateChange () {
this.$emit('reload')
}, },
changeScreen () { changeScreen () {
this.$store.commit('setShowTopoScreen', !this.topoScreen) this.$store.commit('setShowTopoScreen', !this.topoScreen)

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

@@ -1,6 +1,6 @@
<template> <template>
<div class="meta2d-box list-page" v-my-loading="meta2dLoading"> <div class="meta2d-box list-page" v-my-loading="meta2dLoading" ref="meta2dBox">
<meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" :editFlag="editFlag" @edit="editFlag = true" @exitEdit="exitEdit"/> <meta2dHeader :meta2dId="meta2dId" :isChart="isChart" :project="project" :editFlag="editFlag" @edit="editFlag = true" @exitEdit="exitEdit" @reload="reload"/>
<div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'"> <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'">
<div :id="meta2dId" style="height: 100%;width: 100%"></div> <div :id="meta2dId" style="height: 100%;width: 100%"></div>
</div> </div>
@@ -13,15 +13,21 @@
:meta2dId="meta2dId" :meta2dId="meta2dId"
@updatePens="updatePens" @updatePens="updatePens"
/> />
<meta2dTooltip <div
v-show="position.show && !editFlag"
@mouseleave="tooltipOut"
@mouseenter="tooltipOver"
style="position: absolute" style="position: absolute"
:style="{ :style="{
top: position.top + 'px', top: position.top + 'px',
left: position.top + 'px', left: position.left + 'px',
}" }"
>
<meta2dTooltip
:params="chartParams" :params="chartParams"
/> />
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -62,14 +68,18 @@ export default {
mounted () { mounted () {
this.init() this.init()
bus.$on('changeSelectPens', this.pensActive) bus.$on('changeSelectPens', this.pensActive)
this.$refs.meta2dBox.addEventListener('mousemove', this.mousemove)
}, },
methods: { methods: {
mousemove (e) {
window.ePosition = e
}
}, },
beforeDestroy () { beforeDestroy () {
getTopology(this.meta2dId).destroy() getTopology(this.meta2dId).destroy()
setTopology(this.meta2dId, null) setTopology(this.meta2dId, null)
bus.$off('changeSelectPens', this.pensActive) bus.$off('changeSelectPens', this.pensActive)
this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
} }
} }

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

@@ -12,8 +12,8 @@
<!-- <img :src="item.image" class="imag-src"/>--> <!-- <img :src="item.image" class="imag-src"/>-->
<!-- <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>--> <!-- <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
<!-- </div>--> <!-- </div>-->
<div style="height: 450px" v-my-loading="imgageLoading"> <div style="height: 350px" v-my-loading="imgageLoading">
<el-card shadow="hover" style="height:420px;width:100%;overflow-y: auto" <el-card shadow="hover" style="height:320px;width:100%;overflow-y: auto"
class="project-topology-add-node"> class="project-topology-add-node">
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box"> <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"> <el-collapse-item :title="item.group" :name="item.group">
@@ -165,56 +165,5 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.meta2d-image-box{
position: relative;
.image-box {
width: 30px;
height: 30px;
}
.image-box-null {
border: 1px solid #999999;
box-sizing: border-box;
border-radius: 2px;
}
.image-select-box {
text-align: center;
width: 225px;
z-index: 1;
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: 30px;
height: 50px;
margin: 0 10px 10px 0;
flex-direction: column;
align-items: center;
display: inline-block;
position: relative;
.image-src{
width: 30px;
height: 30px;
}
.image-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.delIcon{
position: absolute;
right: 0;
top: 0;
}
}
}
}
</style> </style>

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

@@ -1,6 +1,6 @@
<template> <template>
<div style="width: 300px;height: 200px"> <div class="tooltip-box" style="width: 400px;height: 300px">
<div v-if="params.titleShow">{{params.title}}</div> <div v-if="params.titleShow && params.title">{{params.title}}</div>
<div <div
v-if="params.chartType === 'text'" v-if="params.chartType === 'text'"