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

NEZ-2721 fix： project topology 样式调整

Browse Source
This commit is contained in:
zhangyu
2023-03-23 18:02:03 +08:00
parent 0cbdf76619
commit b2ed837b80
10 changed files with 368 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,6 +104,7 @@
display: flex;
justify-content: space-between;
padding: 3px 10px;
cursor: pointer;
.nz-icon-shuru {
display: none;
}
@@ -171,66 +172,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 {
@@ -257,3 +198,165 @@
margin-left: 10px;
}
}
.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-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%;
}
}
}

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) {

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

@@ -132,9 +132,11 @@ 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) => {
console.log(data)
this.getModule()
getTopology(this.meta2dId).resize()
console.log(this.meta2dId, getTopology(this.meta2dId))
getTopology(this.meta2dId).open(data)
getTopology(this.meta2dId).resize()
getTopology(this.meta2dId).centerView()
getTopology(this.meta2dId).lock(1)
this.getNodesArr()

4
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)

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

@@ -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>

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 () {
}
}
}

20
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"
@@ -128,11 +129,12 @@ export default {
querysArray: {},
params: {},
project: {},
isPreview: {
type: Boolean,
default: false
}
},
computed: {
isPreview () {
return this.$refs.header && this.$refs.header.isPreview
},
},
components: {
meta2dHeader,
@@ -172,8 +174,8 @@ export default {
}
},
beforeDestroy () {
getTopology(this.meta2dId).destroy()
setTopology(this.meta2dId, null)
// getTopology(this.meta2dId).destroy()
// setTopology(this.meta2dId, null)
bus.$off('changeSelectPens', this.pensActive)
this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
this.$refs.meta2dBox.removeEventListener('mouseup', this.mouseup)

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

@@ -1,42 +1,71 @@
<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">
<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>-->
<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="baseUrl + btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
<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"
@@ -106,9 +135,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 +157,8 @@ export default {
name: '',
unit: ''
},
selectImgId: '',
selectImg: '',
unit: '',
imageName: '',
baseUrl: '',
@@ -147,12 +175,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 +199,7 @@ export default {
} else {
this.tools.push({
group: item.unit,
show: false,
children: [{
text: item.imageName,
imageName: item.imageName,
@@ -188,59 +211,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 +386,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 +397,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>

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)
}