NEZ-744 fix:project topo 图中各个module 的图标颜色实现 与 module 异常信息关联

nezha-fronted/src/components/common/project/popData/alertTable.vue

@@ -208,7 +208,7 @@ export default {
         delete this.searchLabel.startAt
         delete this.searchLabel.endAt
       }
-      this.$get(this.url + '?state=' + this.state, { ...this.searchLabel }).then(response => {
+      this.$get(this.url, { state: this.state, ...this.searchLabel }).then(response => {
         this.tools.loading = false
         if (response.code == 200) {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -1029,6 +1029,7 @@ export default {
     },
 
     getNodesArr () {
+      const arr = []
       if (!getTopology(this.topologyIndex)) return
       this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
         if (!item.data) {
@@ -1037,26 +1038,35 @@ export default {
             moduleName: '',
             show: false,
             error: false,
-            expressArr: []
+            expressArr: [],
+            state:{}
           }
         }
         return item.type === 0
       })
-      // this.nodesArr=this.nodesArr.map(item=>{
+      this.nodesArr.forEach(item=>{
-      //   if(!item.data){
+        item.data.error = false
-      //     item.data={
+        item.data.state = {
-      //       moduleId:'',
+          endpoint: false,
-      //       moduleName:'',
+          asset: false,
-      //       show:false,
+          total: false,
-      //       error:false,
+          other: false,
-      //       expressArr:[],
+          info: false,
-      //     }
+          alert: false,
-      //   }
+          main: false,
-      //   return {
+          error: false
-      //     rect:item.rect,
+        }
-      //     data:item.data
+        arr.push(this.$get('stat/module/abnormal',{moduleId: item.data.moduleId}))
-      //   }
+      });
-      // });
+      Promise.all(arr).then(res => {
+        this.nodesArr.forEach( (item, index) => {
+          item.data.state.error = item.data.error = !res[index].data.list[0].state
+          item.data.state.asset = !!res[index].data.list[0].asset
+          item.data.state.alert = !!res[index].data.list[0].alert
+          item.data.state.endpoint = !!res[index].data.list[0].endpoint
+        })
+        this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+      })
       // 打开动画 是否更新顶部图标
       this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
     },

nezha-fronted/src/components/common/project/topologyPrev.vue

@@ -335,9 +335,9 @@
 </template>
 
 <script>
-import { Topology, registerNode } from '@topology/core'
+  import { Topology, registerNode } from '@topology/core'
-import imgDefault from '@/components/common/project/L5/services/img'
+  import imgDefault from '@/components/common/project/L5/services/img'
-import {
+  import {
     Tools,
     canvasRegister,
     imageTemp,
@@ -349,31 +349,31 @@ import {
     onChangeAnimateLine,
     myCubec,
     myCubeAnchors
-} from './L5/services/canvas.js'
+  } from './L5/services/canvas.js'
-import { getTopology, setTopology } from '../js/common'
+  import { getTopology, setTopology } from '../js/common'
-import CanvasProps from './L5/CanvasProps'
+  import CanvasProps from './L5/CanvasProps'
-import topologyTopTool from './L5//topologyTopTool'
+  import topologyTopTool from './L5//topologyTopTool'
-import popDataMain from './popData/Main'
+  import popDataMain from './popData/Main'
-import popDataInfo from './popData/Info'
+  import popDataInfo from './popData/Info'
-import alertTable from './popData/alertTable'
+  import alertTable from './popData/alertTable'
-import assetTable from './popData/assetTable'
+  import assetTable from './popData/assetTable'
-import endpointTable from './popData/endpointTable'
+  import endpointTable from './popData/endpointTable'
-import topoTooltip from './L5/topoTooltip'
+  import topoTooltip from './L5/topoTooltip'
-import { getMetricTypeValue } from '../js/tools'
+  import { getMetricTypeValue } from '../js/tools'
-import bus from '../../../libs/bus'
+  import bus from '../../../libs/bus'
-import topologyPrev from './topologyPrev'
+  import topologyPrev from './topologyPrev'
-// 注册到画布
+  // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+  registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
-registerNode('myCube', myCubec, myCubeAnchors, null, null)
+  registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
-const canvasOptions = {
+  const canvasOptions = {
     rotateCursor: '/img/rotate.cur',
     translateKey: 'None',
     disableEmptyLine: true,
     autoExpandDistance: 0,
     minScale: 0.01
-}
+  }
-export default {
+  export default {
     name: 'topologyL5',
     data () {
       return {
@@ -1029,6 +1029,7 @@ export default {
       },
 
       getNodesArr () {
+        const arr = []
         if (!getTopology(this.topologyIndex)) return
         this.nodesArr = getTopology(this.topologyIndex).data.pens.filter(item => {
           if (!item.data) {
@@ -1037,26 +1038,35 @@ export default {
               moduleName: '',
               show: false,
               error: false,
-            expressArr: []
+              expressArr: [],
+              state:{}
             }
           }
           return item.type === 0
         })
-      // this.nodesArr=this.nodesArr.map(item=>{
+        this.nodesArr.forEach(item=>{
-      //   if(!item.data){
+          item.data.error = false
-      //     item.data={
+          item.data.state = {
-      //       moduleId:'',
+            endpoint: false,
-      //       moduleName:'',
+            asset: false,
-      //       show:false,
+            total: false,
-      //       error:false,
+            other: false,
-      //       expressArr:[],
+            info: false,
-      //     }
+            alert: false,
-      //   }
+            main: false,
-      //   return {
+            error: false
-      //     rect:item.rect,
+          }
-      //     data:item.data
+          arr.push(this.$get('stat/module/abnormal',{moduleId: item.data.moduleId}))
-      //   }
+        });
-      // });
+        Promise.all(arr).then(res => {
+          this.nodesArr.forEach( (item, index) => {
+            item.data.state.error = item.data.error = !res[index].data.list[0].state
+            item.data.state.asset = !!res[index].data.list[0].asset
+            item.data.state.alert = !!res[index].data.list[0].alert
+            item.data.state.endpoint = !!res[index].data.list[0].endpoint
+          })
+          this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
+        })
         // 打开动画 是否更新顶部图标
         this.nodesArr = JSON.parse(JSON.stringify(this.nodesArr))
       },
@@ -2090,7 +2100,7 @@ export default {
       }
       window.removeEventListener('resize', this.winResize)
     }
-}
+  }
 </script>
 <style lang="scss">
   .el-dropdown-menu {