diff --git a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss b/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss index eccf023b5..5f9870cf8 100644 --- a/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss +++ b/nezha-fronted/src/assets/css/components/common/project/meta2dMain.scss @@ -22,3 +22,308 @@ right: unset; left: 0px; } +.meta2d-box { + @keyframes model-error-animation { + 0% { + transform: scale(0.7); + } + 50% { + transform: scale(1); + } + 100% { + transform: scale(0.7); + } + } + + @keyframes model-icon-animation { + 0% { + transform: scale(1.2) translateX(1px); + } + 50% { + transform: scale(0.9) translateX(0px); + } + 100% { + transform: scale(1.2) translateX(1px); + } + } + + .nz-icon-shuidi { + position: absolute; + font-size: 48px; + color: rgba(190, 233, 222, 0.45); + border-radius: 50%; + height: 48px; + width: 48px; + line-height: 48px; + } + .el-collapse-item__arrow.el-icon-arrow-right{ + display: none !important; + } + .el-collapse-item .is-active .nz-icon-arrow-right{ + transform: rotate(90deg); + color: $--color-primary; + } + .el-collapse-item .title-delete{ + display: none; + } + .el-collapse-item .nz-icon-arrow-right{ + transition: transform .3s; + color: #BEBEBE; + margin-right: 5px; + } + .el-collapse-item:hover{ + .el-collapse-item__header{ + color: $--color-primary; + } + .nz-icon-arrow-right{ + color: $--color-primary; + } + .title-delete{ + display: block; + color: $--color-primary; + } + } + .edit-topologyLine{ + //background: rgba(196,196,196,0.4) !important; + border-bottom: 1px solid $--explore-border-color-bottom; + } + .topology-scroll{ + &.v{ + display: none; + } + &.h{ + display: none; + } + } + .model-error.nz-icon-shuidi { + color: #FADED7; + animation: model-error-animation .6s infinite ease-in-out; + animation-direction: normal; + } + + .model-error-active.nz-icon-shuidi { + color: #FADED7; + } + + .nz-icon-model { + color: #23BF9A; + position: absolute; + top: -4px; + left: 15px; + font-size: 18px; + line-height: 48px; + } + + .model-error .nz-icon-model { + color: #EC7F66; + animation: model-icon-animation .6s infinite ease-in-out; + animation-direction: normal; + } + + .model-error-active .nz-icon-model { + color: #EC7F66; + } + + .scaleTool-enter-active { + animation: scaleTool-in .15s; + } + + .scaleTool-leave-active { + animation: scaleTool-in .15s reverse; + } + + @keyframes scaleTool-in { + from { + top: 0; + left: 0; + transform: scale(0.5); + } + } + + .module-rect-top{ + border-top: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-right{ + border-right: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-bottom{ + border-bottom: 4px dashed #ff8c0a; + position: absolute; + } + .module-rect-left{ + border-left: 4px dashed #ff8c0a; + position: absolute; + } + + .network-pop .nz-icon-hexagonBorder{ + position: absolute; + font-size: 48px; + color: #84d5c2; + height: 48px; + width: 48px; + line-height: 48px; + } + + .network-pop .nz-icon-hexagonBorder:hover { + transform: scale(1.1); + color: #4BB49B; + } + + .network-pop .nz-icon-hexagonBorder.error-model-stat { + color: #F5BAAC; + } + + .network-pop .nz-icon-hexagonBorder.error-model-stat:hover { + color: #EC7F66; + } + + .network-pop .nz-icon-liubianxing { + color: #e2f3ef; + font-size: 44px; + position: absolute; + top: 0px; + left: 2px; + // transform: scale(1.1); + z-index: -1; + } + .network-pop .error-model-stat .nz-icon-liubianxing { + color: #FADED7; + } + + .network-pop .nz-icon.noMove { + position: absolute; + left: 14px; + font-size: 20px; + color: #27c09c; + } + + .network-pop .error-model-stat .nz-icon.noMove { + color: #EC7F66; + } + + .network-pop .no-selPop { + color: $--color-text-secondary !important; + } + + .network-pop .no-selPop .nz-icon-liubianxing { + color: rgb(218, 218, 218); + } + + .network-pop .no-selPop .nz-icon-chart { + color: $--color-text-secondary; + } + + .network-info { + position: absolute; + right: 0; + top: 50px; + z-index: 1; + } + + .facade-top{ + min-height: 138px; + display: flex; + margin: 4px 0; + height: calc(16% - 40px); + font-size: 12px; + z-index: 10; + padding-left: 15px; + } + .facade-top > div{ + width: 18%; + min-width: 315px; + background: $--background-color-empty; + margin-right: 9px; + padding: 20px; + border: 1px solid $--background-color-empty; + box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77); + } + .facade-top-title{ + font-size: 16px; + color: $--color-text-primary; + font-weight: bold; + padding: 5px 0; + } + .facade-top-left{ + display: flex; + flex-direction: column; + justify-content: space-around; + } + .special.label{ + margin-left: 30px; + } + .facade-top .facade-top-right{ + width: auto; + min-width: 100px; + } + .facade-top-right-content{ + display: flex; + justify-content: space-around; + justify-items: center; + flex-direction: column; + height: calc(100% - 30px); + align-items: flex-start; + } + .facade-top-right-content > div{ + min-width: 84px; + height: 22px; + display: flex; + justify-content: space-between; + color: #fff; + text-align: center; + margin-bottom: 5px; + line-height: 22px; + } + .facade-top-right-content > div > div:last-child{ + text-align: center; + border-radius: 0 4px 4px 0; + flex: 1; + height: calc(100% - 2px); + padding: 0 8px; + min-width: 40px; + } + .content-P1-title{ + background: #F2866E; + border-radius: 4px 0 0 4px; + width: 40px; + height: 100%; + } + .content-P1-title + div{ + border: 1px solid #F4907A; + font-size: 12px; + color: #F4907A; + } + + .content-P2-title{ + background: #F89984; + border-radius: 4px 0 0 4px; + width: 40px; + height: 100%; + } + .content-P2-title + div{ + border: 1px solid #F9A28F; + font-size: 12px; + color: #F9A28F; + } + + .content-P3-title{ + background: #F7BA78; + border-radius: 4px 0 0 4px; + width: 40px; + height: 100%; + } + .content-P3-title + div{ + border: 1px solid #F7BA78; + font-size: 12px; + color: #F7BA78; + } + + .right-content-P1{ + border: 1px solid ; + } + .align--center{ + text-align: center; + } +} 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 26336d47f..a18a12fc7 100644 --- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js +++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js @@ -41,7 +41,44 @@ export default { top: null, bottom: null }, - setContextmenu: true + popDataShow: { + endpoint: false, + asset: false, + total: false, + other: false, + info: false, + alert: false, + main: false + }, + projectInfo: { + title: '', + id: '', + remark: '', + alertStat: [1, 2, 3], + moduleMum: 6, + loading: true + }, + setContextmenu: true, + modules: [], + allModules: [], + popData: [ + { + top: '-41px', + left: '-23px', + className: 'nz-icon-endpoint', + id: 'endpoint', + title: this.$t('project.topology.endpoint') + }, + { top: '-41px', left: '22px', className: 'nz-icon-asset', id: 'asset', title: this.$t('asset.asset') }, + { top: '-2px', left: '45px', className: '', id: 'other', title: '' }, + { top: '37px', left: '22px', className: '', id: 'other', title: '' }, + { top: '37px', left: '-23px', className: 'nz-icon-info-normal', id: 'info', title: this.$t('project.topology.info') }, + { top: '-2px', left: '-45px', className: 'nz-icon-gaojing', id: 'alert', title: this.$t('project.topology.alert') } + ], + nodesArr: [], + offsetX: 0, + offsetY: 0, + moduleId: '' } }, mixins: [topoUtil], @@ -79,6 +116,7 @@ export default { return true } meta2d.on('translate', this.topTranslate) // 平移· + meta2d.on('scale', this.topoScale) // 缩放· meta2d.on('active', this.pensActive) // 选中· // meta2d.on('translatePens', () => {}) // 移动画笔结束· // meta2d.on('translatingPens', () => {}) // 移动画笔进行中· @@ -94,10 +132,12 @@ 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) => { + this.getModule() getTopology(this.meta2dId).resize() getTopology(this.meta2dId).open(data) getTopology(this.meta2dId).centerView() getTopology(this.meta2dId).lock(1) + this.getNodesArr() }) }) }, @@ -135,6 +175,7 @@ export default { } } pen.nzName = name + pen.moduleId = '' pen.disableInput = pen.disableInput || true pen.background = pen.background || '#22222200' pen.textAlign = pen.textAlign || 'center' @@ -181,6 +222,7 @@ export default { } } pen.nzName = name + pen.moduleId = '' pen.disableInput = pen.disableInput || true pen.lineAnimateType = pen.lineAnimateType || 0 pen.animateSpan = pen.animateSpan || 1 @@ -202,7 +244,7 @@ export default { }, pensActive (pens, e) { // 选中节点 this.selectPens = pens - + this.modulesDiff(pens[0]) setTimeout(() => { this.$refs.meta2dProps && (this.$refs.meta2dProps.isUpdate = true) }) @@ -212,9 +254,21 @@ export default { this.$refs.meta2dProps.activeName = 'canvas' this.selectPens = [] } + this.showNodeTools() + this.popDataShowUpdate('', true) }, topTranslate () { this.setContextmenu = false + this.offsetX = getTopology(this.meta2dId).store.data.x + this.offsetY = getTopology(this.meta2dId).store.data.y + this.showNodeTools() + this.popDataShowUpdate('', true) + }, + topoScale () { + this.offsetX = getTopology(this.meta2dId).store.data.x + this.offsetY = getTopology(this.meta2dId).store.data.y + this.showNodeTools() + this.popDataShowUpdate('', true) }, penEnter (pen, e) { // 移入节点 if (this.timer3) { @@ -360,7 +414,120 @@ export default { top: null, bottom: null } - } + }, + // 获取module + getModule () { + this.projectInfo.loading = true + this.$get('/monitor/module?pageSize=-1&projectIds=' + this.project.id).then(response => { + if (response.code === 200) { + this.projectInfo.loading = false + this.allModules = JSON.parse(JSON.stringify(response.data.list)) + // this.modulesDiff() + } + }) + }, + // 摘除已选择的module 置灰 + modulesDiff (pen) { + this.modules = this.allModules + if (getTopology(this.meta2dId) && getTopology(this.meta2dId).store.data.pens) { + getTopology(this.meta2dId).store.data.pens.forEach(item => { + if (!item.type && item.moduleId) { + const findItem = this.modules.find(item1 => item.moduleId == item1.id) + if (findItem && pen && findItem.id !== pen.moduleId) { + findItem.disabled = true + } else { + findItem.disabled = false + } + } + }) + } + }, + // 显示module的工具 + showNodeTools (index, pen) { + this.nodesArr.forEach((item, i) => { + item.moduleData.show = i == index + }) + }, + // 具体内容点击 + nodeTools (node, tool) { + this.moduleId = node.moduleId + this.moduleName = node.moduleName + if (tool.id === 'total') { + this.popDataShowUpdate('', false, node) + return + } + const timer = setTimeout(() => { + this.popDataShowUpdate(tool.id, false, node) + clearTimeout(timer) + }, 100) + }, + selpopIs (pen, state) { // 判断是否有图表 + let flag = true + if (state.id === 'other') { + flag = false + } + if (state.id === 'total' && pen.data.expressArr.length === 0) { + flag = false + } + return flag + }, + getNodesArr () { + if (!getTopology(this.meta2dId)) return + this.offsetX = getTopology(this.meta2dId).data().x + this.offsetY = getTopology(this.meta2dId).data().y + this.nodesArr = getTopology(this.meta2dId).store.data.pens.filter(item => { + item.moduleData = { + moduleId: '', + moduleName: '', + show: false, + error: false, + expressArr: [], + expressAllArr: [], + state: { + error: false, + asset: 0, + alert: 0, + endpoint: 0 + } + } + if (!item.type && item.moduleId) { + 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 + item.moduleData.state.asset = !!module.asset + item.moduleData.state.alert = !!module.alert + item.moduleData.state.endpoint = !!module.endpoint + } + }) + } + return !item.type && item.moduleId + }) + }, + popDataShowUpdate (key, flag, node) { // key 显示对应的弹窗 flag是否不显示工具栏 + this.popDataShow = { + endpoint: false, + asset: false, + total: false, + other: false, + info: false, + alert: false, + main: false + } + if (key === 'total') { + this.chartDataInfo = { ...node.data, ...this.chartGetData.find(item => item.id === node.id) } + } + this.$nextTick(() => { + this.popDataShow[key] = true + }) + if (flag) { // 处理关闭后 缩放后显示工具按钮的问题 + this.moduleId = '' + this.showNodeTools() + } + if (key === 'asset' || key === 'alert' || key === 'endpoint') { + this.showNodeTools() + } + }, }, beforeDestroy () { } 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 1e04027c2..2355142d5 100644 --- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js +++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js @@ -7,6 +7,7 @@ export default { methods: { topoResize (id) { getTopology(id).resize() + getTopology(id).centerView() }, initEdit (id) { bus.$emit('changeSelectPens', []) @@ -18,7 +19,6 @@ export default { this.calcNode(item) }) } - getTopology(id).centerView() getTopology(id).render() }, calcNode (node) { // 处理节点数据 @@ -144,6 +144,9 @@ export default { if (!pen.nzName) { pen.nzName = '' } + if (!pen.moduleId) { + pen.moduleId = '' + } if (pen.isNz) { if (pen.data.legend && pen.data.enable.valueMapping) { const findItem = queryValues.find(query => query.name === pen.data.legend && query.parent === pen.data.parent) diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue index 47488dbfd..36f1986d7 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue @@ -124,7 +124,9 @@ export default { background: '#ffffff00', bkImage: '', bkImageId: '', - selectPenArr: {}, + selectPenArr: { + active: [] + }, nodesAlign: [// 对齐方式 { value: 'left', @@ -163,7 +165,7 @@ export default { desc: '垂直等距分布', icon: 'nz-icon-shuxiangfenbu' } - ] + ], } }, mounted () { diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue index 859e487e3..1bb6cceb2 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dElement.vue @@ -5,6 +5,15 @@
+ +
+ {{$t('overall.module')}} +
+
+ + + +
{{$t('project.topology.position')}} @@ -1022,7 +1031,8 @@ export default { }, props: { selectPens: {}, - elements: {} + elements: {}, + modules: {} }, watch: { selectPens: { diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue index bdce05f81..c1de8b3b4 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue @@ -95,9 +95,9 @@ export default { editMeta2d () { this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen)) this.$store.commit('setShowTopoScreen', true) + this.$emit('edit') + this.initEdit(this.meta2dId) setTimeout(() => { - this.$emit('edit') - this.initEdit(this.meta2dId) this.topoResize(this.meta2dId) }) }, @@ -187,8 +187,10 @@ export default { } getTopology(this.meta2dId).render() getTopology(this.meta2dId).centerView() + this.$emit('getNodesArr') }, cancelTopology () { + this.isPreview = false this.$store.commit('setShowTopoScreen', this.topoScreenState) if (this.$refs.topTool.option.map) { getTopology(this.meta2dId).hideMap() diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue index 2a497d6ab..e385444a3 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue @@ -1,5 +1,5 @@ @@ -49,6 +107,11 @@ import meta2dProps from '@/components/common/project/meta2d/meta2dProps' import meta2dMain from '@/components/common/project/meta2d/js/meta2dMain' import meta2dTooltip from '@/components/common/project/meta2d/meta2dTooltip' import CanvasContextMenu from '@/components/common/project/meta2d/CanvasContextMenu' +import popDataMain from '@/components/common/project/popData/Main' +import popDataInfo from '@/components/common/project/popData/Info' +import alertTable from '@/components/common/project/popData/alertTable' +import assetTable from '@/components/common/project/popData/assetTable' +import endpointTable from '@/components/common/project/popData/endpointTable' import { getTopology, setTopology } from '@/components/common/js/common' import topoUtil from '@/components/common/project/meta2d/js/topoUtil' import bus from '@/libs/bus' @@ -64,18 +127,23 @@ export default { }, querysArray: {}, params: {}, - project: {} + project: {}, }, computed: { isPreview () { return this.$refs.header && this.$refs.header.isPreview - } + }, }, components: { meta2dHeader, meta2dProps, meta2dTooltip, - CanvasContextMenu + CanvasContextMenu, + popDataMain, + popDataInfo, + alertTable, + assetTable, + endpointTable }, watch: { topoData: { diff --git a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue index 9c7fb3403..a0370b468 100644 --- a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue +++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue @@ -2,7 +2,7 @@
- + @@ -32,7 +32,8 @@ export default { selectPens: {}, querysArray: {}, params: {}, - meta2dId: {} + meta2dId: {}, + modules: {} }, components: { meta2dElement, diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue index bd6590d9d..6509bc98f 100644 --- a/nezha-fronted/src/components/common/project/topologyL5.vue +++ b/nezha-fronted/src/components/common/project/topologyL5.vue @@ -235,12 +235,6 @@
No data
- - - endpoint - -
@@ -257,6 +251,12 @@ + + + endpoint + +