diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index 12cf1b256..316e68069 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -647,6 +647,7 @@ textarea { transform: unset !important; } } + .nz-el-dropdown-menu{ .el-dropdown-menu__item{ padding: 0; diff --git a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss index 03a5ec9de..d2583fa2b 100644 --- a/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss +++ b/nezha-fronted/src/assets/css/components/common/project/meta2dProps.scss @@ -81,4 +81,65 @@ 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%; + } + } + } } diff --git a/nezha-fronted/src/components/cli/webSSHNew.vue b/nezha-fronted/src/components/cli/webSSHNew.vue index e16c6a5b1..a1c3485a8 100644 --- a/nezha-fronted/src/components/cli/webSSHNew.vue +++ b/nezha-fronted/src/components/cli/webSSHNew.vue @@ -432,8 +432,7 @@ export default { // this.$refs['console' + el.index][0].focusConsole() if (this.$refs['console' + el.index] && this.$refs['console' + el.index][0]) { setTimeout(() => { - this.$refs['console' + el.index][0].term.resize(225, 200) - this.$refs['console' + el.index][0].term.fit() + this.$refs['console' + el.index][0].resize() this.$refs['console' + el.index][0].term.scrollToBottom() this.$refs['console' + el.index][0].focusConsole() }) diff --git a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js index 34764fefd..b744ae17e 100644 --- a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js +++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js @@ -23,7 +23,7 @@ export default { this.topoData = res.data.topo.topo || {} this.querysArray = res.data.topo.elements || [] this.params = { - timeType: res.data.topo.timeType || 1, + timeType: res.data.topo.timeType || 5, unit: res.data.topo.unit || 1, statistic: res.data.topo.statistic || 'last', } @@ -31,7 +31,7 @@ export default { this.topoData = {} this.querysArray = [] this.params = { - timeType: 1, + timeType: 5, unit: 1, statistic: 'last' } diff --git a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js index 9be357287..cb5abadff 100644 --- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js +++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js @@ -25,14 +25,16 @@ export default { meta2dLoading: true, position: { top: 50, - left: 0 + left: 0, + show: false }, + timer3: null, chartParams: { chartType: 'line', content: '', legends: [], title: '', - titleShow: true, + titleShow: true } } }, @@ -80,7 +82,8 @@ export default { }, reload () { 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) => { console.log(arr) this.clacTopoData(this.topoData, arr).then((data) => { @@ -184,6 +187,7 @@ export default { }, pensActive (pens, e) { // 选中节点 this.selectPens = pens + setTimeout(() => { this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true) }) @@ -194,20 +198,76 @@ export default { this.selectPens = [] } }, - penEnter (pen) { // 移入节点 - console.log(pen, 'penEnter') - if (!pen.type) { + penEnter (pen, e) { // 移入节点 + console.log(pen, e, 'penEnter') + 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 = { ...pen.data.tooltip, unit: this.params.unit, statistic: this.params.statistic } - // this.chartParams.type = 'line' - // this.chartParams.values = pens.data.values + this.timer3 = setTimeout(() => { + 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) { // 移出节点 - // console.log(pens) + penLeave () { + 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) { // 更新对应的节点 // meta2d.setValue({ id: pen.id, text: 'new text' }, { render: false }); diff --git a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js index 89ef543b6..4d04aa39c 100644 --- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js +++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js @@ -2,6 +2,7 @@ import { getTopology, setTopology, dealImg, topologyImg } from '@/components/com import bus from '@/libs/bus' import axios from 'axios' import { getMetricTypeValue } from '@/components/common/js/tools' +import chartDataFormat from "@/components/chart/chartDataFormat"; export default { methods: { topoResize (id) { @@ -74,7 +75,7 @@ export default { const obj = { type: 'item', 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, metric: r.metric || {}, elements: elements[index], @@ -138,11 +139,12 @@ export default { } data.pens.forEach(pen => { 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) console.log(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) } } @@ -158,6 +160,7 @@ export default { const show = pen.data.enable.valueMapping const valueMapping = pen.data.valueMapping const value = pen.data.value + const showValue = pen.data.showValue if (show && valueMapping) { valueMapping.forEach(item => { if (item.type === 'value') { @@ -172,7 +175,9 @@ export default { } if (item.type === 'regx') { const reg = new RegExp(item.regx) - if (reg.test(value)) { + if (reg.test(showValue)) { + mapping = item + } else if (reg.test(value)) { mapping = item } } diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue index c1bbbf91e..59ccc7d57 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue @@ -7,36 +7,36 @@
- +
- -
-
- Statistics -
-
- - - -
-
-
-
- Unit -
-
- - -
-
- + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ Statistics +
+
+ + + +
+
+
+
+ Unit +
+
+ + +
+
+ @@ -190,7 +217,7 @@ export default { 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' ], - dataTimeType: 1, + dataTimeType: 5, dataStatistic: 'last', dataUnit: 1, statisticsList: this.$CONSTANTS.statisticsList, @@ -218,51 +245,51 @@ export default { id: 4, text: this.$t('dashboard.panel.lastOneHour'), type: 'hour', - value: 1 + value: 60 }, { id: 5, text: this.$t('dashboard.panel.lastThreeHour'), type: 'hour', - value: 3 + value: 3 * 60 }, { id: 6, text: this.$t('dashboard.panel.lastSixHour'), type: 'hour', - value: 6 + value: 6 * 60 }, { id: 7, text: this.$t('dashboard.panel.lastTwelveHour'), type: 'hour', - value: 12 + value: 12 * 60 }, { id: 8, text: this.$t('dashboard.panel.lastTwentyFourHour'), type: 'hour', - value: 24 + value: 24 * 60 }, { id: 9, text: this.$t('dashboard.panel.lastTwoDay'), type: 'date', - value: 2 + value: 2 * 24 * 60 }, { id: 10, text: this.$t('dashboard.panel.lastSevenDay'), type: 'date', - value: 7 + value: 7 * 24 * 60 }, { id: 11, text: this.$t('dashboard.panel.lastThirtyDay'), type: 'date', - value: 30 + value: 30 * 24 * 60 } - ], + ] } }, mounted () { diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue index 680a63ec5..d79d6dd0a 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue @@ -684,12 +684,12 @@ Legend
-
+
-
+
@@ -882,17 +882,31 @@ -
- tooltip - +
+ Tooltip + + + +
-
+ +
Title
-
- +
+ + +
+ + +
@@ -908,28 +922,36 @@ Content
- +
-
-
+
+
Legends
-
-
- +
+
+
-
- +
+
+
+ + + +
+
+
+ {{$t('overall.addTooltipLegend')}}
-
jia
+
diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue index 0159e3732..2a3c3aefe 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue @@ -150,7 +150,7 @@ export default { }) }, dateChange () { - + this.$emit('reload') }, changeScreen () { this.$store.commit('setShowTopoScreen', !this.topoScreen) diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue index 400bd84fc..c8e61e492 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue @@ -1,6 +1,6 @@ @@ -62,14 +68,18 @@ export default { mounted () { this.init() bus.$on('changeSelectPens', this.pensActive) + this.$refs.meta2dBox.addEventListener('mousemove', this.mousemove) }, methods: { - + mousemove (e) { + window.ePosition = e + } }, beforeDestroy () { getTopology(this.meta2dId).destroy() setTopology(this.meta2dId, null) bus.$off('changeSelectPens', this.pensActive) + this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove) } } diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue index 18762cafb..dad9dd14f 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dSelectImage.vue @@ -12,8 +12,8 @@ -
- + @@ -165,56 +165,5 @@ export default { diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue index cb3c74f78..c63192562 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue @@ -1,6 +1,6 @@