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

fix：修复冲突

Browse Source
This commit is contained in:
zyh
2023-03-28 09:21:22 +08:00
parent 0566e9f24e 3e85fbde03
commit 099859d736
60 changed files with 8434 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -597,3 +597,10 @@
line-height: 1;
height: 16px;
}
.nz-table-list .el-table__body{
.el-table-remark{
word-wrap: break-word;
word-break: keep-all
}
}

17
nezha-fronted/src/assets/css/components/common/diagnosisTab.scss
View File

@@ -13,8 +13,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 30px;
padding-right: 38px;
padding: 12px 30px 12px 38px;
border-bottom: 1px solid $--border-color-light;
background: $--background-color-base;
font-size: 12px;
@@ -24,9 +23,19 @@
justify-content: start;
align-items: center;
i.nz-icon{
font-size: 72px;
color: #AEB8C2;
width: 70px;
height: 70px;
border-radius: 50%;
border: 1px solid #DCE0E5;
margin-right: 11px;
display: flex;
align-items: center;
justify-content: center;
&::before{
font-size: 42px;
color: #AEB8C2;
padding-left: 3px;
}
}
.dialog-header-name{
font-size: 14px;

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

@@ -43,6 +43,9 @@
.el-input__inner{
display: none;
}
.right-box-select-top {
width: 219px;
}
}
.form-row-item-full{
width: 100%;
@@ -104,6 +107,7 @@
display: flex;
justify-content: space-between;
padding: 3px 10px;
cursor: pointer;
.nz-icon-shuru {
display: none;
}
@@ -171,66 +175,6 @@
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 {
flex-direction: column;
align-items: center;
display: inline-block;
position: relative;
width: 47px;
height: 47px;
margin: 0;
padding: 8px;
box-sizing: border-box;
border: 1px solid transparent;
.image-src{
width: 31px;
height: 31px;
}
.image-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.delIcon{
position: absolute;
right: 0;
top: -5px;
display: none;
}
}
.image-box-item:hover {
border-color: $--color-primary;
.delIcon {
display: inline-block;
color: $--color-primary;
}
}
.upload-pic-box{
width: 100%;
}
}
}
.nz-color {
.vc-input__input {
@@ -254,6 +198,178 @@
}
}
.thresholds-from-item {
margin-left: 10px;
margin-left: 0px;
}
}
.image-select-box {
text-align: center;
width: 225px;
z-index: 1;
padding: 0px 0px 0px 0px;
background: $--background-color-empty;
border: none;
box-shadow: unset !important;
border-radius: 4px;
left: 0;
.el-card {
border: none;
box-shadow: unset !important;
}
.el-card__body {
padding: 0 10px;
}
.el-collapse-item {
margin-bottom: 2px;
}
.nz-collapse-header {
display: flex;
width: 100%;
height: 32px;
line-height: 32px;
background: #FFFFFF;
box-sizing: border-box;
padding: 0 0 0 8px;
.nz-collapse-header-content {
width: calc(100% - 130px);
flex-shrink: 0;
text-align: left;
}
.nz-icon-caret-right {
display: inline-block;
width: 30px;
flex-shrink: 0;
height: 100%;
line-height: 32px;
}
.nz-icon-caret-right {
color: #BEBEBE;
transition: all 0.3s;
}
.title-delete {
display: none;
width: 100px;
flex-shrink: 0;
text-align: right;
}
.title-all {
display: inline-block;
width: 100px;
flex-shrink: 0;
text-align: right;
}
}
.nz-collapse-header:hover,.nz-collapse-header.is-active {
background: #F6F6F6;
color: $--color-primary;
.nz-icon-caret-right {
color: #BEBEBE;
}
.title-delete {
display: inline-block;
}
.title-all {
display: none;
}
}
.nz-collapse-header:hover {
background: #FFFFFF;
}
.nz-collapse-body {
padding: 5px;
box-sizing: border-box;
text-align: left;
}
.image-box-item {
flex-direction: column;
align-items: center;
display: inline-block;
position: relative;
text-align: center;
width: 90px;
height: 90px;
margin: 5px;
padding: 10px;
box-sizing: border-box;
border: 1px solid transparent;
.image-src{
width: 50px;
height: 50px;
}
.image-text {
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
}
.delIcon{
position: absolute;
right: 4px;
top: -1px;
display: none;
}
}
.image-box-item.is-select {
border-color: $--border-select-color;
.delIcon {
display: inline-block;
color: $--color-primary;
}
}
.image-box-item:hover {
border-color: $--border-select-color;
.delIcon {
display: inline-block;
color: $--color-primary;
}
}
.rotate90 {
display:inline-block;
transform: rotate(90deg);
}
}
.nz-select-img-dialog-footer {
display: flex;
justify-content: space-between;
.el-icon-plus {
color: $--color-primary;
margin-right: 5px;
}
}
.nz-select-img-dialog {
.upload-pic-row {
width: 100%;
box-sizing: border-box;
padding: 0 20px;
.el-autocomplete{
width: 100%;
}
}
}
.nz-new-dialog{
.el-dialog__header{
padding: 16px 20px;
.el-dialog__title{
font-size: 14px;
font-weight: 600;
}
border-bottom: 1px solid $--border-color-light;
}
.el-dialog__body{
padding: 0;
}
.el-dialog__footer{
border-top: 1px solid $--border-color-light;
padding: 13px 20px;
margin-top: 0;
}
}
.is-fullscreen.nz-new-dialog.meta2d-preview {
overflow: hidden;
.el-dialog__body{
flex: 1;
.meta2d-project {
height: 100%;
}
}
}

8
nezha-fronted/src/assets/css/components/common/project/topology.scss
View File

@@ -465,7 +465,7 @@
position: absolute;
bottom: 30px;
right: 40px;
height: 90px;
height: 90px !important;
width: 35px;
border: 1px solid $--border-color-light;
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
@@ -476,6 +476,7 @@
height: 50%;
opacity: 0.42;
background: $--background-color-empty;
color: $--color-text-regular;
align-items: center;
display: flex;
justify-content: center;
@@ -519,6 +520,11 @@
display: flex;
}
}
.meta2d-box:hover {
.right-bottom-zoom{
display: flex;
}
}
.selpop {
cursor: pointer;
}

3
nezha-fronted/src/assets/css/components/common/rightBox/ipam.scss
View File

@@ -38,3 +38,6 @@
.ip-detail-available {
color:$--color-success !important;
}
.right-box-select-top.right-box-select-width {
width: 640px !important;
}

2
nezha-fronted/src/assets/css/components/common/rightBox/moduleBox.scss
View File

@@ -270,7 +270,7 @@
.ti-input {
border: 1px solid $--border-color-light;
.ti-tag.ti-valid {
background-color: $--label-background-color !important;;
background-color: $--background-color-base !important;;
color: $--color-text-primary !important;;
}
.ti-new-tag-input {

2
nezha-fronted/src/assets/css/components/page/dashboard/overview/overview2.scss
View File

@@ -774,7 +774,7 @@
position: absolute;
top: 0;
left: 0;
z-index: 10;
z-index: 11;
cursor: pointer;
}
.leaflet-container:hover{

54
nezha-fronted/src/assets/css/components/page/tool/ping.scss
View File

@@ -3,11 +3,33 @@
margin-top: 5px;
}
.ping{
.top-tools{
padding: 10px 0 0 0 !important;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.06);-moz-box-shadow:0 1px 2px rgba(0,0,0,.06);
box-shadow:0 1px 2px rgba(0,0,0,.06);
z-index: 1;
}
.top-tool-left{
box-sizing:border-box;
padding: 20px 0 0px 20px;
// align-items: center;
.tools-header{
height: 148px;
margin-top: 38px;
box-shadow: unset;
.tools-header-left>span{
margin-right: 10px !important;
}
.tools-header-center{
width: 391px;
}
.tools-header-right .right-content-text{
margin-bottom: 15px;
}
}
}
.ipInput{
width:280px;
width:240px;
min-height: 36px;
max-height: 128px;
}
@@ -22,9 +44,9 @@
overflow-y: auto;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid $--button-icon-border-color !important;
border: 1px solid $--border-color-light !important;
.ti-tag.ti-valid {
background-color: $--label-background-color !important;;
background-color: $--background-color-base !important;;
color: $--color-text-primary !important;;
}
.ti-new-tag-input {
@@ -59,11 +81,11 @@
padding: 2px 4px !important;
border-radius: 2px !important;
border-right: none !important;
background: $--label-background-color;
background: $--background-color-base;
margin-right: 5px;
color: $--color-text-primary;
i{
font-size: 14px !important;
font-size: 12px !important;
}
}
.btn{
@@ -134,6 +156,14 @@
.data-wrap{
height: 100%;
overflow: hidden;
&>span{
display: block;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
margin: 30px 0 11px 0;
}
.data-top{
width: 100%;
padding-left: 15px;
@@ -263,6 +293,7 @@
}
// 雷达
.radar {
box-sizing: border-box;
/*margin-left: 50px;*/
width: 92px;
@@ -425,9 +456,20 @@ td.el-table__expanded-cell:hover {
#pingTable{
th.el-table__expand-column{
.arrow-expand{
display: flex;
justify-content: center;
i.nz-icon{
cursor: pointer;
padding-left: 2px;
width: 14px;
height: 14px;
border: 1px solid #d9d9d9;
color: $--color-text-regular;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-left: 3px;
}
}
}

64
nezha-fronted/src/assets/css/components/page/tool/trace.scss
View File

@@ -3,11 +3,33 @@
margin-top: 5px;
}
.trace{
.top-tools{
padding: 10px 0 0 0 !important;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.06);-moz-box-shadow:0 1px 2px rgba(0,0,0,.06);
box-shadow:0 1px 2px rgba(0,0,0,.06);
z-index: 1;
}
.top-tool-left{
box-sizing:border-box;
padding: 20px 0 0px 20px;
// align-items: center;
.tools-header{
height: 148px;
margin-top: 38px;
box-shadow: unset;
.tools-header-left>span{
margin-right: 10px !important;
}
.tools-header-center{
width: 391px;
}
.tools-header-right .right-content-text{
margin-bottom: 15px;
}
}
}
.ipInput{
width:280px;
width:240px;
min-height: 36px;
max-height: 128px;
}
@@ -22,9 +44,9 @@
overflow-y: auto;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid $--button-icon-border-color !important;
border: 1px solid $--border-color-light !important;
.ti-tag.ti-valid {
background-color: $--label-background-color !important;;
background-color: $--background-color-base !important;;
color: $--color-text-primary !important;;
}
.ti-new-tag-input {
@@ -59,11 +81,11 @@
padding: 2px 4px !important;
border-radius: 2px !important;
border-right: none !important;
background: $--label-background-color;
background: $--background-color-base;
margin-right: 5px;
color: $--color-text-primary;
i{
font-size: 14px !important;
font-size: 12px !important;
}
}
.btn{
@@ -132,8 +154,24 @@
}
}
.data-wrap{
&>span{
display: block;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
margin: 30px 0 11px 0;
}
height: 100%;
overflow: hidden;
&>span{
display: block;
font-size: 14px;
color: $--color-text-regular;
letter-spacing: 0;
font-weight: 400;
margin: 30px 0 11px 0;
}
.data-top{
width: 100%;
padding-left: 15px;
@@ -162,9 +200,20 @@
}
th.el-table__expand-column{
.arrow-expand{
display: flex;
justify-content: center;
i.nz-icon{
width: 14px;
height: 14px;
cursor: pointer;
padding-left: 2px;
border: 1px solid #d9d9d9;
color: $--color-text-regular;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-left: 3px;
}
}
}
@@ -183,6 +232,9 @@
}
.el-input-group__append{
color: $--color-text-primary;
background-color: $--right-box-sub-title-background-color;
border: 1px solid $--border-color-light;
border-left: none;
}
}
.pop-tit{

7687
nezha-fronted/src/assets/css/font/demo_index.html Normal file
View File

File diff suppressed because one or more lines are too long

26
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

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

@@ -5,6 +5,41 @@
"css_prefix_text": "nz-icon-",
"description": "",
"glyphs": [
{
"icon_id": "34724146",
"name": "全部展开",
"font_class": "quanbuzhankai1",
"unicode": "e7d7",
"unicode_decimal": 59351
},
{
"icon_id": "34724147",
"name": "全部收起",
"font_class": "quanbushouqi1",
"unicode": "e7d8",
"unicode_decimal": 59352
},
{
"icon_id": "34708233",
"name": "Diagnosis result",
"font_class": "a-Diagnosisresult",
"unicode": "e7d6",
"unicode_decimal": 59350
},
{
"icon_id": "34702402",
"name": "Unlock",
"font_class": "Unlock1",
"unicode": "e7d4",
"unicode_decimal": 59348
},
{
"icon_id": "34702403",
"name": "image",
"font_class": "image",
"unicode": "e7d5",
"unicode_decimal": 59349
},
{
"icon_id": "20226387",
"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.

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

File diff suppressed because one or more lines are too long

2
nezha-fronted/src/assets/css/themes/theme-light.scss
View File

@@ -60,7 +60,7 @@ $--border-color-light-focus: darken($--border-color-light, 20%);
// 深色边框
$--explore-border-color-bottom: #DEDEDE;
// 选中边框
$--border-select-color: #FBCF9F;
$--border-select-color: #FBCF9E;
/* 5.提示色 */
// 正常绿色(覆盖element-ui内置变量)

47
nezha-fronted/src/components/chart/chart/chartAutotopology.vue
View File

@@ -2,16 +2,21 @@
<div v-my-loading="topologyLoading" class="overview">
<transition name = "el-zoom-in-center">
<div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
<el-carousel :interval="5000" :trigger="'click'" arrow="hover">
<el-carousel-item v-for="(item,index) in allProject" :key="index">
<el-carousel :interval="5000" :trigger="'click'" :autoplay="false" arrow="hover">
<el-carousel-item v-for="(item,index) in allProject" :key="index" style="min-height: 10px;min-width: 10px">
<div class="maskLayer" @click="toProject(item)"></div>
<!-- <span class="project-name">{{item.name}}</span>-->
<topology
:fromOverView="true"
:from-chart="true"
:obj="item"
<meta2dMain
:meta2dId="'autoTopology' + item.id + (isFullscreen ? 'screen' : '')"
:topoData="item.topoData"
:isPreview="true"
:querysArray="item.querysArray"
:project="item"
:params="item.params"
:show-zoom="false"
class="meta2d-chart"
:is-chart="true"
:ref="'topology' + index"
:topologyIndexF="isFullscreen?('screen'+chartInfo.id+'-'+index):(chartInfo.id+'-'+index)"
/>
</el-carousel-item>
</el-carousel>
@@ -23,7 +28,7 @@
<script>
import axios from 'axios'
import topology from '@/components/common/project/topologyL5'
import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
import chartMixin from '@/components/chart/chartMixin'
import bus from '@/libs/bus'
export default {
@@ -36,7 +41,7 @@ export default {
},
mixins: [chartMixin],
components: {
topology
meta2dMain
},
methods: {
initChart () {
@@ -64,6 +69,14 @@ export default {
this.topologyLoading = false
}
res2.forEach((item, index) => {
item.topoData = item.topo || {}
if (item.topo.topo) {
item.topoData = item.topo.topo || {}
}
item.querysArray = item.topo.elements || []
item.params = {
timeType: item.topo.timeType || 5
}
// temp.push(item)
setTimeout(() => {
this.allProject.push(item)
@@ -78,7 +91,10 @@ export default {
})
},
toProject (projectInfo) { // 跳转对应project页面
this.$store.commit('currentProjectChange', projectInfo)
this.$store.commit('currentProjectChange', {
id: projectInfo.id,
name: projectInfo.name
})
this.jumpTo('project')
},
jumpTo (data, id) {
@@ -101,7 +117,7 @@ export default {
},
resize () {
this.allProject.forEach((item, index) => {
this.$refs['topology' + index][0] && this.$refs['topology' + index][0].winResize()
this.$refs['topology' + index][0] && this.$refs['topology' + index][0].topoResize()
})
}
},
@@ -114,6 +130,11 @@ export default {
}
</script>
<style scoped>
<style scoped lang="scss">
.meta2d-chart {
/deep/.meta2d-project {
height: 100%;
border: none;
}
}
</style>

2
nezha-fronted/src/components/chart/chartDataFormat.js
View File

@@ -406,7 +406,7 @@ function timeCompute (value, unit, dot = 0) {
return `${value.toFixed(dot)} ${unit}`
}
const units = [
{ unit: 'ns', ascii: 1 },
{ unit: 'ns', ascii: 1000 },
{ unit: 'us', ascii: 1000 },
{ unit: 'ms', ascii: 1000 },
{ unit: 's', ascii: 60 },

2
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
View File

@@ -236,7 +236,7 @@ export default {
disabled: false
}, {
name: this.$t('overall.acknowledge'),
type: 'selectString',
type: 'select',
label: 'ack',
readonly: true,
disabled: false

2
nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
View File

@@ -253,7 +253,7 @@ export default {
const config = this.obj.configs.find(c => c.type === 'logs')
const hasLog = config && config.enable === 1
const tabs = [
{ prop: 'dashboardTab', name: this.$t('overall.detail') },
{ prop: 'dashboardTab', name: this.$t('overall.dashboard') },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
{ prop: 'endpointQuery', name: this.$t('overall.metrics') }
]

2
nezha-fronted/src/components/common/diagnosisTab.vue
View File

@@ -16,7 +16,7 @@
<!-- 头部 -->
<div class="dialog-header" style="vertical-align:top;">
<div class="dialog-header-l">
<i class="nz-icon nz-icon-Diagnosis1"></i>
<i class="nz-icon nz-icon-a-Diagnosisresult"></i>
<div>
<div class="dialog-header-name">{{diagnosisTabData.row.name}}</div>
<div v-html="fragment" class="dialog-header-item">

2
nezha-fronted/src/components/common/elementSet.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="pop-custom" :class="{'pop-custom-top' : tableClass || operationTrue}" v-clickoutside="esc">
<div class="pop-custom" :class="{'pop-custom-top' : tableClass || operationTrue}" v-clickoutside="esc" @click.stop>
<div class="pop-title" @click.stop>{{$t('overall.selectColumns')}}</div>
<div class="pop-box custom-labels" @click.stop>
<div style="height: 100%; overflow: auto;">

9
nezha-fronted/src/components/common/js/common.js
View File

@@ -48,6 +48,15 @@ export function setTopology (key, value) {
delete topologyCache[`topology${key}`]
}
}
export function clearTopology () {
Object.keys(topologyCache).forEach(key => {
if (topologyCache[`topology${key}`]) {
topologyCache[`topology${key}`].destroy()
topologyCache[`topology${key}`] = null
delete topologyCache[`topology${key}`]
}
})
}
export function clearTopologyCache () {
topologyCache = {}

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

@@ -19,6 +19,7 @@ export default {
reload () {
if (this.currentProject.id) {
this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
if (res.data && res.data.topo) {
this.topoData = res.data.topo || {}
if (res.data.topo.topo) {

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

@@ -125,6 +125,7 @@ export default {
// meta2d.on('add', this.appPen) // 添加新画笔·
meta2d.on('click', this.topoClick) // click画笔·
setTopology(this.meta2dId, meta2d)
this.reload()
},
reload () {
this.position.show = false
@@ -132,10 +133,17 @@ export default {
const startTime = endTime - 60 * this.params.timeType * 1000
this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
this.clacTopoData(this.topoData, arr).then((data) => {
if (!getTopology(this.meta2dId)) {
return
}
this.getModule()
getTopology(this.meta2dId).resize()
getTopology(this.meta2dId).open(data)
if (this.isChart) {
getTopology(this.meta2dId).fitView(true, 20)
} else {
getTopology(this.meta2dId).centerView()
}
getTopology(this.meta2dId).lock(1)
this.getNodesArr()
})
@@ -494,7 +502,7 @@ export default {
}
}
if (!item.type && item.moduleId) {
this.$get('stat/module/abnormal', { moduleId: item.moduleId }).then(res=>{
this.$get('stat/module/abnormal', { moduleId: item.moduleId }).then(res => {
if (res.code == 200) {
const module = res.data.list[0]
item.moduleData.state.error = item.moduleData.error = !module.state
@@ -530,7 +538,7 @@ export default {
if (key === 'asset' || key === 'alert' || key === 'endpoint') {
this.showNodeTools()
}
},
}
},
beforeDestroy () {
}

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

@@ -10,6 +10,10 @@ export default {
getTopology(id).centerView()
},
initEdit (id) {
const endTime = new Date().getTime()
const startTime = endTime - 60 * this.params.timeType * 1000
const elements = getTopology(id).data().elements
this.getQueryValues(elements, startTime, endTime)
bus.$emit('changeSelectPens', [])
getTopology(id).inactive()
getTopology(id).lock(0)
@@ -212,7 +216,6 @@ export default {
pen.animateColor = mapping.color.bac
pen.borderColor = mapping.color.border
pen.color = mapping.color.text
console.log(!!pen.lineAnimateType)
if (pen.lineAnimateType) {
pen.autoPlay = true
}

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

@@ -51,7 +51,7 @@
<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-if="item.type !== 1" class="nz-icon nz-icon-image" style="margin-right: 3px"/>
<i v-else class="nz-icon nz-icon-xiantiao" />
<el-input
:ref="'hideInput' + index"
@@ -95,10 +95,10 @@
<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')}}
{{$t('project.topology.addNode')}}
</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')}}
{{$t('project.topology.clearSelection')}}
</button>
</div>
</div>
@@ -126,7 +126,6 @@ export default {
},
computed: {
selectPenArrId () {
console.log(this.selectPenArr)
return this.selectPenArr.active.map(item => item.id)
}
},
@@ -200,7 +199,6 @@ export default {
},
penActive (item) {
// bus.$emit('changeSelectPens', [])
console.log(getTopology(this.meta2dId).store)
this.$emit('changeActiveName')
this.$nextTick(() => {
getTopology(this.meta2dId).active([item])

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

@@ -28,7 +28,7 @@
@change="change('nzName')"></el-input>
</div>
</div>
<div class="form-row-item">
<div class="form-row-item form-row-item-full">
<div class="form-row-key">
{{$t('overall.module')}}
</div>
@@ -50,7 +50,7 @@
<div v-show="elements.position" class="form-row-content">
<div class="form-row-item">
<div class="form-row-key">
X
{{$t('topology.position.x')}}
</div>
<div class="form-row-value">
<el-input-number
@@ -69,7 +69,7 @@
</div>
<div class="form-row-item">
<div class="form-row-key">
Y
{{$t('topology.position.y')}}
</div>
<div class="form-row-value">
<el-input-number

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

@@ -3,7 +3,7 @@
<div v-if="!isChart && !editFlag"> {{project && project.name}} </div>
<div class="tools-left" v-if="editFlag">
<topology-top-tool
v-if="editFlag&&toolShow&&!isPreview"
v-if="editFlag&&toolShow"
:meta2dId="meta2dId"
ref="topTool"
>
@@ -27,16 +27,16 @@
</button>
</div>
<div v-if="editFlag" class="top-tool-right float-right">
<button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
<button @click="previewTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light"
style="margin-right: 20px"
>
{{$t('overall.preview')}}
</button>
<button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
style="margin-right: 20px"
>
{{$t('project.topology.previewExit')}}
</button>
<!-- <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"-->
<!-- style="margin-right: 20px"-->
<!-- >-->
<!-- {{$t('project.topology.previewExit')}}-->
<!-- </button>-->
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
:disabled="prevent_opt.save"
:class="{'nz-btn-disabled':prevent_opt.save}"
@@ -56,12 +56,14 @@ import { getTopology, setTopology, dealImg, topologyImg } from '@/components/com
import { deepClone } from '@meta2d/core'
import bus from '@/libs/bus'
import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
import meta2dMainOther from '@/components/common/project/meta2d/meta2dMain'
export default {
name: 'meta2dHeader',
mixins: [topoUtil],
components: {
topologyTopTool
topologyTopTool,
meta2dMainOther
},
props: {
meta2dId: {},
@@ -78,9 +80,12 @@ export default {
data () {
return {
topoScreenState: '',
isPreview: false,
searchTime: bus.getTimezontDateRange(),
toolShow: true
toolShow: true,
topoData: {},
querysArray: {},
currentProject: {},
params: {}
}
},
computed: {
@@ -156,26 +161,44 @@ export default {
})
},
previewTopology () {
console.log(getTopology(this.meta2dId).data())
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)
})
})
const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
const topoData = {
...getTopology(this.meta2dId).data()
}
topoData.elements = elements
topoData.timeType = timeType
const params = {
topoData,
querysArray: topoData.elements || [],
params: {
timeType: topoData.timeType || 5
},
currentProject: {
id: this.project.id
},
show: true
}
bus.$emit('showMeta2dPreview', params)
// console.log(getTopology(this.meta2dId).data())
// 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 () {
if (this.$refs.topTool && this.$refs.topTool.option.map) {
this.$refs.topTool.option.map = false
getTopology(this.meta2dId).hideMap()
}
this.isPreview = false
// this.isPreview = false
getTopology(this.meta2dId).lock(0)
getTopology(this.meta2dId).stopAnimate()
if (getTopology(this.meta2dId).data().pens) {
@@ -188,12 +211,15 @@ export default {
this.$emit('getNodesArr')
},
cancelTopology () {
this.isPreview = false
// this.isPreview = false
this.$store.commit('setShowTopoScreen', this.topoScreenState)
if (this.$refs.topTool && this.$refs.topTool.option.map) {
getTopology(this.meta2dId).hideMap()
}
this.$emit('exitEdit', true)
},
reload () {
}
}
}

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

@@ -2,6 +2,7 @@
<div class="meta2d-box list-page" :class="editFlag ? 'topology-dialog' : ''" v-my-loading="meta2dLoading" ref="meta2dBox" v-clickoutside="showNodeTools">
<meta2dHeader
ref="header"
v-if="!isPreview"
:meta2dId="meta2dId"
:isChart="isChart"
:project="project"
@@ -12,7 +13,7 @@
@getNodesArr="getNodesArr"
/>
<div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'" @contextmenu="onContextMenu($event)" style="position: relative">
<div v-for="(item,index) in nodesArr" v-if="!editFlag&&!isPreview"
<div v-for="(item,index) in nodesArr" v-if="!editFlag"
:key="index"
v-show="(item.y + offsetY - 48 > -20) && (item.x + item.width/2 + offsetX - 24 > - 20)"
:style="{position: 'absolute',top:item.y + offsetY - 48 + 'px',left:item.x + item.width/2 + offsetX - 24 +'px', 'z-index': 10}"
@@ -44,7 +45,7 @@
<div :id="meta2dId" style="height: 100%;width: 100%"></div>
</div>
<meta2dProps
v-if="editFlag && !isPreview"
v-if="editFlag"
ref="meta2dProps"
:modules="modules"
:selectPens.sync="selectPens"
@@ -53,11 +54,11 @@
:meta2dId="meta2dId"
@updatePens="updatePens"
/>
<div class="context-menu" v-if="contextmenu.left && editFlag && !isPreview" :style="this.contextmenu">
<div class="context-menu" v-if="contextmenu.left && editFlag " :style="this.contextmenu">
<CanvasContextMenu :meta2dId="meta2dId" :selectPens.sync="selectPens"></CanvasContextMenu>
</div>
<div
v-show="position.show && (!editFlag || isPreview )"
v-show="position.show && (!editFlag)"
@mouseleave="tooltipOut"
@mouseenter="tooltipOver"
style="position: absolute"
@@ -98,6 +99,10 @@
@close="popDataShowUpdate('',true)">
</alertTable>
</transition>
<div v-if="!editFlag&&showZoom" class="right-bottom-zoom">
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)" :title="$t('overall.enlargement')"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
<div class="zoom-option" @click="zoomMap(-0.25)" :title="$t('overall.shrink')"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
</div>
</div>
</template>
@@ -128,11 +133,16 @@ export default {
querysArray: {},
params: {},
project: {},
isPreview: {
type: Boolean,
default: false
},
showZoom: {
type: Boolean,
default: true
}
},
computed: {
isPreview () {
return this.$refs.header && this.$refs.header.isPreview
},
},
components: {
meta2dHeader,
@@ -147,14 +157,18 @@ export default {
},
watch: {
topoData: {
immediate: true,
immediate: false,
handler () {
if (!this.isChart) {
this.reload()
}
}
}
},
mounted () {
setTimeout(() => {
this.init()
})
bus.$on('changeSelectPens', this.pensActive)
this.$refs.meta2dBox.addEventListener('mousemove', this.mousemove)
// this.$refs.meta2dBox.addEventListener('mousedown', this.mousedown)
@@ -169,11 +183,16 @@ export default {
setTimeout(() => {
this.setContextmenu = true
}, 100)
},
zoomMap (num) {
getTopology(this.meta2dId).scale(getTopology(this.meta2dId).store.data.scale + num)
}
},
beforeDestroy () {
getTopology(this.meta2dId).destroy()
if (getTopology(this.meta2dId)) {
getTopology(this.meta2dId).clear()
setTopology(this.meta2dId, null)
}
bus.$off('changeSelectPens', this.pensActive)
this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
this.$refs.meta2dBox.removeEventListener('mouseup', this.mouseup)

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

@@ -1,74 +1,83 @@
<template>
<div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
<div @click="selectBoxShow = !selectBoxShow" style="position: relative">
<div class="meta2d-image-box">
<div @click="changeSelectBoxShow(true)" style="position: relative">
<div class="image-input">
<span v-if="imageName">{{unit}} / {{imageName}}</span>
<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">
<!-- <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 class="image-select-box" v-if="selectBoxShow">-->
<!-- -->
<!-- </div>-->
<div style="height: 350px" v-my-loading="imgageLoading">
<el-card shadow="hover" style="height:320px;width:100%;overflow-y: auto"
<!--selectImg-->
<el-dialog
:title="$t('project.topology.image')"
custom-class="nz-select-img-dialog nz-new-dialog"
:visible.sync="selectBoxShow"
width="auto"
:append-to-body="true"
:modal-append-to-body="false"
@close="changeSelectBoxShow(false)"
destroy-on-close
>
<div class="image-select-box" style="width: 650px;height:446px;margin-top: 10px" v-my-loading="imgageLoading">
<el-card shadow="hover" style="height:446px;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 v-for="(item, index) in tools" :key="index" class="collapse-box">
<div :title="item.group" :name="item.group">
<div class="nz-collapse-header" :class="item.show ? 'is-active' : ''" @click.stop="selectGroup(item)">
<span class="nz-icon-caret-right-box">
<i class="nz-icon nz-icon-caret-right" :class="item.show ? 'rotate90': ''" />
</span>
<div class="text-ellipsis nz-collapse-header-content">{{item.group}}</div>
<i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')" />
<span class="title-all">{{item.children.length}}</span>
</div>
</template>
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item">
<transition name="el-zoom-in-top">
<div v-show="item.show" class="nz-collapse-body">
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item" :class="btn.id === selectImgId ? 'is-select':''">
<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>-->
<div class="img-text text-ellipsis" :title="btn.imageName">{{btn.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>
</div>
</transition>
</div>
</div>
</el-card>
<div class="upload-pic-box" @click="uploadPicChange">
</div>
<div slot="footer" class="nz-select-img-dialog-footer">
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="uploadPicChange">
<i class="el-icon-plus"></i>
<span>
{{ $t('overall.uploadCustomPicture') }}
</span>
</button>
<span>
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="changeSelectBoxShow(false)">
{{$t('overall.cancel')}}
</button>
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="changImage" :disabled="prevent_opt.save"
:class="{'nz-btn-disabled':prevent_opt.save}"
style="">
{{$t('el.datepicker.confirm')}}
</button>
</span>
</div>
</div>
</div>
</el-dialog>
<!--Custom picture-->
<el-dialog
:title="title"
:visible.sync="uploadPicShow"
width="auto"
custom-class="nz-select-img-dialog nz-new-dialog"
width="452px"
:append-to-body="true"
:modal-append-to-body="false"
@close="uploadPicShow = false"
destroy-on-close>
<el-row class="upload-pic-row">
<el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
<el-col :span="20">
<el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small" :placeholder="$t('project.topology.placeholderImg')"></el-input>
</el-col>
</el-row>
<el-row class="upload-pic-row">
<el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
<el-col :span="20">
<el-autocomplete
popper-class="right-box-select-top right-public-box-dropdown-top"
:maxlength="64" show-word-limit
class="inline-input"
v-model="uploadPic.unit"
:fetch-suggestions="querySearch"
size="small"
></el-autocomplete>
</el-col>
</el-row>
<el-row class="upload-pic-row">
<el-col :span="4" class="upload-pic-label"> </el-col>
<el-col :span="20">
<el-row class="upload-pic-row" style="margin-top: 20px;margin-bottom: 20px;">
<el-col :span="24">
<div class="upload-body">
<el-upload
drag
@@ -87,7 +96,26 @@
</div>
</el-col>
</el-row>
<div class="upload-pic-row" style="text-align: center">
<el-row class="upload-pic-row">
<el-col :span="4" class="upload-pic-label" style="text-align: left">{{ $t('overall.name') }}</el-col>
<el-col :span="20">
<el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small" :placeholder="$t('project.topology.placeholderImg')"></el-input>
</el-col>
</el-row>
<el-row class="upload-pic-row" style="margin-bottom: 30px">
<el-col :span="4" class="upload-pic-label" style="text-align: left">{{ $t('overall.folder') }}</el-col>
<el-col :span="20">
<el-autocomplete
popper-class="right-box-select-top right-public-box-dropdown-top"
:maxlength="64" show-word-limit
class="inline-input"
v-model="uploadPic.unit"
:fetch-suggestions="querySearch"
size="small"
></el-autocomplete>
</el-col>
</el-row>
<div slot="footer" class="upload-pic-row" style="text-align: right;margin-bottom: 0;width: 100%">
<span>
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
{{$t('project.topology.exit')}}
@@ -106,9 +134,6 @@
</template>
<script>
import { dealImg, topologyImg } from '@/components/common/js/common'
import { imageTemp } from '@/components/common/project/L5/services/canvas'
export default {
name: 'meta2dSelectImage',
props: {
@@ -131,6 +156,8 @@ export default {
name: '',
unit: ''
},
selectImgId: '',
selectImg: '',
unit: '',
imageName: '',
baseUrl: '',
@@ -147,12 +174,6 @@ export default {
this.$get('monitor/project/topo/icon').then(res => {
this.imgageLoading = true
this.tools = []
// res.data.list.forEach((item, index) => {
// item.imageName = item.name
// delete item.name
// promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
// imgArr.push({ ...item })
// })
this.iconArray = [...res.data.list]
this.iconArray.forEach((item, index) => {
item.imageName = item.name
@@ -177,6 +198,7 @@ export default {
} else {
this.tools.push({
group: item.unit,
show: false,
children: [{
text: item.imageName,
imageName: item.imageName,
@@ -188,59 +210,42 @@ export default {
})
}
})
const findItem = this.tools.find(group => group.group === this.unit)
if (findItem) {
findItem.show = true
}
this.imgInit = true
this.imgageLoading = false
// Promise.all(promiseArr).then((res2, header) => {
// this.iconArray = [...res.data.list]
// this.iconArray.forEach((item, index) => {
// item.image = res2[index].data
// if (this.imgId == item.id) {
// this.unit = item.unit
// this.imageName = item.imageName
// } else if (this.selectImage === item.image) {
// this.unit = item.unit
// this.imageName = item.imageName
// }
// 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
// promiseArr = null
// })
})
},
changeSelectBoxShow () {
this.selectBoxShow = false
changeSelectBoxShow (flag) {
this.selectBoxShow = flag
this.selectImgId = this.imgId
const findItem = this.tools.find(group => {
group.show = false
return group.group === this.unit
})
if (findItem) {
findItem.show = true
findItem.children.forEach(item=>{
if (item.id === this.selectImgId) {
this.selectImg = item
}
})
}
},
selectGroup (item) {
item.show = !item.show
},
selectImageChange (item) {
this.unit = item.unit
this.imageName = item.imageName
this.$emit('updateImage', item)
this.selectImgId = item.id
this.selectImg = item
},
changImage () {
this.unit = this.selectImg.unit
this.imageName = this.selectImg.imageName
this.$emit('updateImage', this.selectImg)
this.changeSelectBoxShow(false)
},
tooltipDelete (item) {
this.$confirm(this.$t('tip.confirmDelete'), {
@@ -380,37 +385,7 @@ export default {
if (res.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.uploadPicShow = false
this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
dealImg(`monitor/project/topo/icon/${res.data.id}/1`, res.data.id).then((data, header) => {
const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
this.iconArray.push({
...iconInfo.data.list[0],
image: `/monitor/project/topo/icon/${res.data.id}/0`
})
if (group) {
group.children.push({
text: res.data.imageName,
imageName: res.data.imageName,
image: `/monitor/project/topo/icon/${res.data.id}/0`,
imageId: res.data.id,
id: res.data.id,
unit: this.uploadPic.unit
})
} else {
this.tools.push({
group: this.uploadPic.unit,
children: [{
text: res.data.imageName,
imageName: res.data.imageName,
image: `/monitor/project/topo/icon/${res.data.id}/0`,
imageId: res.data.id,
id: res.data.id,
unit: this.uploadPic.unit
}]
})
}
})
})
this.imageInit()
} else {
this.$message.error(res.msg)
}
@@ -421,18 +396,5 @@ export default {
</script>
<style scoped lang="scss">
.image-box-item{
}
.image-box-item {
}
.image-box-item:hover {
border-color: #fa901c;
.delIcon {
display: inline-block;
color: #fa901c;
}
}
</style>

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

@@ -18,7 +18,6 @@
</template>
<script>
import panelChart from '@/components/chart/panelChart'
import defaultLineData from '@/components/chart/defaultLineData'
import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
@@ -34,7 +33,7 @@ export default {
}
},
components: {
panelChart
panelChart: () => import('@/components/chart/panelChart')
},
data () {
return {

2
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -33,7 +33,7 @@
class="element-item form-row-item thresholds-from-item"
style="margin-bottom: 10px !important"
v-for="index of chartConfig.elements.length"
:key="index"
:key="expressionName[index-1] + index"
>
<div class="chart-title chart-title-config">
<span class="chart-title-content el-form-item" :class="{

10
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -597,7 +597,15 @@ export default {
})
}
}
this.editChart = obj
if (obj.elements && obj.elements.length) {
obj.elements.forEach((item, index) => {
item.orderNum = index
delete item.seq
delete item.buildIn
delete item.chartId
})
}
this.editChart = this.$loadsh.cloneDeep(obj)
this.oldData = this.$loadsh.cloneDeep(obj)
if (this.stableTime) {
clearTimeout(this.stableTime)

14
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -434,6 +434,7 @@ export default {
if (this.expressions.length) {
this.chartConfig.elements = []
this.expressions.forEach((expr, i) => {
if (this.expressionsShow[i]) {
this.chartConfig.elements.push({
id: this.expressionsShow[i].elementId,
expression: expr,
@@ -443,6 +444,7 @@ export default {
state: this.expressionsShow[i].state,
orderNum: i
})
}
})
} else {
this.chartConfig.elements = []
@@ -551,12 +553,6 @@ export default {
elementId: ''
}
)
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
this.$refs[`promql-${index}`][0].metricChange(ex)
this.$refs[`promql-${index}`][0].promqlInputChange(ex)
})
})
this.expressionChange()
},
removeExpression (index) {
@@ -573,12 +569,6 @@ export default {
this.chartConfig.elements.forEach((item, index) => {
this.$refs.chartForm.validateField('elements.' + index + '.expression')
})
this.$nextTick(() => {
this.expressions.forEach((ex, index) => {
this.$refs[`promql-${index}`][0].metricChange(ex)
this.$refs[`promql-${index}`][0].promqlInputChange(ex)
})
})
this.expressionChange()
}
},

2
nezha-fronted/src/components/common/rightBox/ipDetailsBox.vue
View File

@@ -25,7 +25,7 @@
<el-select
v-model="editipDetails.state"
class="right-box__select"
popper-class="right-box-select-top prevent-clickoutside"
popper-class="right-box-select-top prevent-clickoutside right-box-select-width"
size="small"
:placeholder="$t('el.select.placeholder')"
value-key="id">

4
nezha-fronted/src/components/common/rightBox/ipamBox.vue
View File

@@ -21,7 +21,7 @@
placeholder=""
@change="validValueType"
:disabled="!!editipam.id"
popper-class="right-box-select-top prevent-clickoutside"
popper-class="right-box-select-top right-box__select-width prevent-clickoutside"
size="small">
<template v-for="item in typeList">
<el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
@@ -50,7 +50,7 @@
</div>
<el-form-item :label="$t('overall.dc')" prop="dc.name">
<div class="right-box-form-content">
<el-select id="prom-box-input-dc" v-model="editipam.dc" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
<el-select id="prom-box-input-dc" v-model="editipam.dc" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside right-box-select-width" size="small" value-key="id">
<el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
<span class="config-dropdown-label-txt">{{item.name}}</span>
</el-option>

6
nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
View File

@@ -51,11 +51,7 @@
</div>
</template>
<template v-else-if="item.prop === 'description'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else>-</span>
</template>
<template v-else-if="item.prop === 'remark'">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-if="scope.row[item.prop]" class="el-table-remark">{{scope.row[item.prop]}}</span>
<span v-else>-</span>
</template>
<span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">

2
nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
View File

@@ -103,7 +103,7 @@
</template>
</copy>
</template>
<span v-else-if="scope.row[item.prop]">{{
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{
scope.row[item.prop] || "-"
}}</span>
<template v-else>-</template>

2
nezha-fronted/src/components/common/table/settings/cabinetTable.vue
View File

@@ -22,7 +22,7 @@
:key="`col-${index}`"
:label="item.label">
<template slot-scope="scope" :column="item">
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>

4
nezha-fronted/src/components/common/table/settings/credentialsTable.vue
View File

@@ -61,9 +61,9 @@
<template v-else>-</template>
</template>
<template v-if="item.prop === 'remark'">
<template v-if="scope.row.remark">
<span v-if="scope.row.remark" class="el-table-remark">
{{scope.row.remark}}
</template>
</span>
<template v-else>-</template>
</template>
</template>

2
nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
View File

@@ -48,7 +48,7 @@
</template>
</copy>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop] || '-'}}</span>
<template v-else>-</template>
</template>
</el-table-column>

2
nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
View File

@@ -49,7 +49,7 @@
</template>
</copy>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop] || '-'}}</span>
<template v-else>-</template>
</template>
</el-table-column>

2
nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue
View File

@@ -49,7 +49,7 @@
{{ 'Used' }}
</div>
</template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>

2
nezha-fronted/src/components/common/table/settings/ipamTable.vue
View File

@@ -53,7 +53,7 @@
</template>
</copy>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
<span v-else>-</span>
</template>
</el-table-column>

2
nezha-fronted/src/components/common/table/settings/mibTable.vue
View File

@@ -78,7 +78,7 @@
</div>
</template>
<span v-else-if="item.prop === 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
<template v-else>-</template>
</template>
</el-table-column>

2
nezha-fronted/src/components/common/table/settings/modelTable.vue
View File

@@ -74,7 +74,7 @@
{{scope.row[item.prop]}}
</span>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
<span v-else>-</span>
</template>
</el-table-column>

2
nezha-fronted/src/components/common/table/settings/moduleTable.vue
View File

@@ -80,7 +80,7 @@
{{scope.row.dashboard ? scope.row.dashboard.name : '-'}}
</template>
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
<span v-else>-</span>
</template>
</el-table-column>

2
nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
View File

@@ -87,7 +87,7 @@
</template>
<template v-else-if="item.prop === 'remark'">
<template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
<span class="el-table-remark">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
</template>
<template v-else-if="item.prop === 'state'">
<div v-if="scope.row[item.prop] == '1'">

2
nezha-fronted/src/components/common/table/settings/roleTable.vue
View File

@@ -51,7 +51,7 @@
</copy>
</template>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
<span v-else>-</span>
</template>
</el-table-column>

4
nezha-fronted/src/components/common/table/tool/pingTable.vue
View File

@@ -11,8 +11,8 @@
<el-table-column type="expand">
<template #header>
<div class="arrow-expand" @click="toggleRowExpansion">
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai"></i>
<i v-else class="nz-icon nz-icon-quanbushouqi"></i>
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai1"></i>
<i v-else class="nz-icon nz-icon-quanbushouqi1"></i>
</div>
</template>
<template slot-scope="{ row }">

4
nezha-fronted/src/components/common/table/tool/traceTable.vue
View File

@@ -11,8 +11,8 @@
<el-table-column type="expand">
<template #header>
<div class="arrow-expand" @click="toggleRowExpansion">
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai"></i>
<i v-else class="nz-icon nz-icon-quanbushouqi"></i>
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai1"></i>
<i v-else class="nz-icon nz-icon-quanbushouqi1"></i>
</div>
</template>
<template slot-scope="{ row }">

1
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -313,7 +313,6 @@ export default {
'date-range-history' + this.sign,
JSON.stringify(this.rangeHistory)
)
this.$set(this.searchTime, 2, '')
this.showDropdown(false)
this.getRangeHistoryArr()

2
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -126,7 +126,7 @@
</div>
<div class="mib-browser-detail-row">
<div>Description</div>
<div>{{currentWalk.description}}</div>
<div class="el-table-remark">{{currentWalk.description}}</div>
</div>
</div>
</div>

4
nezha-fronted/src/components/page/config/system/selfApiKeyTable.vue
View File

@@ -52,9 +52,9 @@
<template v-if="item.prop == 'createAt'">
{{scope.row[item.prop]?utcTimeToTimezoneStr(scope.row[item.prop]):'-'}}
</template>
<template v-if="item.prop == 'remark'">
<span v-if="item.prop == 'remark'" class="el-table-remark">
{{scope.row[item.prop]?scope.row[item.prop]:'-'}}
</template>
</span>
</template>
</el-table-column>
<el-table-column

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

@@ -38,6 +38,28 @@
ref="editEndpointBox">
</edit-endpoint-box>
</transition>
<el-dialog
:title="'123'"
:visible.sync="isPreview.show"
fullscreen
custom-class="nz-new-dialog meta2d-preview"
:append-to-body="true"
:modal-append-to-body="false"
@close="isPreview.show = false"
destroy-on-close
>
<div v-if="isPreview.show" style="width: 100%;height: 100%">
<meta2dMain
:meta2dId="'projectIdIsPreview'"
:is-preview="true"
:name="'preview'"
:topoData="isPreview.topoData"
:querysArray="isPreview.querysArray"
:project="isPreview.currentProject"
:params="isPreview.params"
/>
</div>
</el-dialog>
</div>
</template>
@@ -46,6 +68,7 @@ import bus from '@/libs/bus'
import topologyL5 from '@/components/common/project/topologyL5'
import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
import { clearTopology } from '@/components/common/js/common'
export default {
name: 'project2',
@@ -62,6 +85,13 @@ export default {
addEndpoint: { show: false },
editEndpoint: { show: false }
},
isPreview: {
show: false,
topoData: {},
querysArray: {},
currentProject: {},
params: {},
},
/* 二级页面相关 */
bottomBox: {
endpoint: {}, // asset详情
@@ -556,6 +586,9 @@ export default {
bus.$on('alert-message-change', () => {
this.getEndpointTableData()
})
bus.$on('showMeta2dPreview', (params) => {
this.isPreview = params
})
},
messageStyle (e) {
if (e.column.label == 'Alerts' || e.column.label == this.$t('overall.alert')) {
@@ -668,6 +701,8 @@ export default {
bus.$off('module-list-change')
bus.$off('endpoint-list-change')
bus.$off('alert-message-change')
bus.$off('showMeta2dPreview')
clearTopology()
if (this.scrollbarWrap) {
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
}

1
nezha-fronted/src/components/page/tool/ping.vue
View File

@@ -132,6 +132,7 @@
</div>
<!-- 存在任务id时展示表格 -->
<div class="data-wrap" v-show="tid!==undefined">
<span>{{$t('ping.results')}}</span>
<div class="data-bottom">
<ping-table
ref="dataTable"

1
nezha-fronted/src/components/page/tool/trace.vue
View File

@@ -124,6 +124,7 @@
</div>
<!-- 存在任务id时展示表格 -->
<div class="data-wrap" v-show="tid!==undefined">
<span>{{$t('ping.results')}}</span>
<div class="data-bottom">
<trace-table
ref="dataTable"