Merge branch 'dev-3.3' of git.mesalab.cn:nezha/nezha-fronted into dev-3.3

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -548,3 +548,20 @@
   justify-content: space-between;
   align-items: center;
 }
+.graph-icon-info-box{
+  position: absolute;
+  top: 50%;
+  right: 5%;
+  display: flex;
+  width: 140px;
+  flex-direction: column;
+  transform: translateY(-50%);
+  .graph-icon-content {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: $--color-monitor;
+    .graph-icon-label{
+      margin-left: 5px;
+    }
+  }
+}

nezha-fronted/src/components/chart/chart/chartTopology.vue

@@ -1,6 +1,13 @@
 <template>
   <div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;overflow: hidden">
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div>
+    <div class="graph-icon-info-box">
+      <div v-for="(item,index) in graphIconArr" :key="index">
+        <div class="graph-icon-content" @mouseenter="graphIconEnter(item)" @mouseleave="graphIconLeave(item)">
+          <i :class="item.class"/><span class="graph-icon-label">{{item.label}}</span>
+        </div>
+      </div>
+    </div>
     <alertLabel
       v-if="alertLabelShow"
       :id="alertLabelId"
@@ -59,7 +66,15 @@ export default {
       isDrag: false,
       highlightId: '',
       highlightAll: [],
-      radiusArr: [14, 20, 27]
+      radiusArr: [14, 20, 27],
+      graphIconArr: [],
+      nzIcon: [
+        { class: 'nz-icon nz-icon-overview-project', type: 'asset', label: this.$t('overall.asset') },
+        { class: 'nz-icon nz-icon-Datacenter2', type: 'datacenter', label: this.$t('overall.dc') },
+        { class: 'nz-icon nz-icon-project', type: 'project', label: this.$t('overall.project') },
+        { class: 'nz-icon nz-icon-overview-module', type: 'module', label: this.$t('overall.module') },
+        { class: 'nz-icon nz-icon-overview-endpoint', type: 'endpoint', label: this.$t('overall.endpoint') }
+      ]
     }
   },
   methods: {
@@ -452,6 +467,7 @@ export default {
             })
             nodes.push(...res.data.nodes)
             nodes = lodash.uniqBy(nodes, 'id')
+            self.data.nodes = nodes
             simulation.stop()
             node = node
               .data(nodes)
@@ -526,6 +542,7 @@ export default {
           simulation.nodes(nodes)
           simulation.force('link').links(links)
           simulation.restart().tick()
+          self.data.nodes = nodes
         }
       }
 
@@ -670,6 +687,59 @@ export default {
     },
     upDate () {
 
+    },
+    graphIconEnter (item) {
+      const svg = d3.select('#svgHex' + this.chartId)
+      const node = svg.selectAll('.node')
+      const linkCopy = svg.selectAll('line')
+      node.transition().attr('style', function (d) {
+        let str = 'opacity:'
+        if (d.type === item.type) {
+          str += 1
+        } else {
+          str += 0.05
+        }
+        return str + ';cursor:pointer'
+      }).duration(300)
+      linkCopy.transition().attr('style', function (d) {
+        let str = 'opacity:'
+        str += 0.05
+        return str + ';cursor:pointer'
+      }).duration(300)
+      console.log(svg, item, node, linkCopy)
+    },
+    graphIconLeave (item) {
+      const svg = d3.select('#svgHex' + this.chartId)
+      const node = svg.selectAll('.node')
+      const linkCopy = svg.selectAll('line')
+      node.transition().attr('style', function (d) {
+        let str = 'opacity:'
+        str += 1
+        return str + ';cursor:pointer'
+      }).duration(300)
+      linkCopy.transition().attr('style', function (d) {
+        let str = 'opacity:'
+        str += 1
+        return str + ';cursor:pointer'
+      }).duration(300)
+    }
+  },
+  watch: {
+    'data.nodes': {
+      handler (n) {
+        console.log(n, 'data.nodes')
+        this.graphIconArr = []
+        this.data.nodes.forEach(item => {
+          if (this.graphIconArr.indexOf(item.type) === -1) {
+            this.graphIconArr.push(item.type)
+          }
+        })
+        this.graphIconArr = this.graphIconArr.map(item => {
+          return this.nzIcon.find(nzIcon => nzIcon.type === item)
+        })
+      },
+      // deep: true,
+      immediate: true
     }
   },
   created () {

nezha-fronted/src/components/common/bottomBox/tabs/assetSubTab.vue

@@ -106,7 +106,8 @@ export default {
         }, {
           name: this.$t('asset.state'),
           type: 'assetState',
-          label: 'stateIds',
+          label: 'assetState',
+          id: 'stateIds',
           readonly: true,
           disabled: false
         }]

nezha-fronted/src/components/common/bottomBox/tabs/assetTab.vue

@@ -105,7 +105,7 @@ export default {
         }, {
           name: this.$t('asset.state'),
           type: 'assetState',
-          label: 'stateIds',
+          label: 'assetState',
           id: 'stateIds',
           readonly: true,
           disabled: false

nezha-fronted/src/components/common/mixin/dataList.js

@@ -313,7 +313,7 @@ export default {
       chartInfo.type = 'topologyLink'
       chartInfo.linkType = type
       chartInfo.datasource = 'topology'
-      chartInfo.name = '关系图'
+      chartInfo.name = this.$t('overall.topology')
       this.$store.dispatch('showTopology', chartInfo)
     },
     closeDialog () {

nezha-fronted/src/components/common/rightBox/asset/assetBatchEditBox.vue

@@ -316,7 +316,7 @@ export default {
           }, {
             name: this.$t('asset.state'),
             type: 'assetState',
-            label: 'stateIds',
+            label: 'assetState',
             id: 'stateIds',
             readonly: true,
             disabled: false

nezha-fronted/src/components/common/searchInput.vue

@@ -893,7 +893,7 @@ export default {
             if (val.label === 'alertType' || val.label === 'promType' || val.label === 'ipamType') {
               objectInfo.type = val.valnum
             } else if (val.label === 'assetState') {
-              objectInfo.state = val.valnum
+              objectInfo.stateIds = val.valnum
             } else if (val.label === 'assetType') {
               objectInfo.typeIds = val.valnum
             } else if (val.label === 'credentialType') {
@@ -930,7 +930,7 @@ export default {
           } else if (val.type === 'project') {
             objectInfo.projectIds = val.valnum
           } else if (val.label === 'assetState') {
-            objectInfo.state = val.valnum
+            objectInfo.stateIds = val.valnum
           } else if (val.label === 'assetType') {
             objectInfo.typeIds = val.valnum
           } else if (val.type === 'brand') {

nezha-fronted/src/components/page/asset/asset.vue

@@ -296,7 +296,7 @@ export default {
         }, {
           name: this.$t('asset.state'),
           type: 'assetState',
-          label: 'stateIds',
+          label: 'assetState',
           id: 'stateIds',
           readonly: true,
           disabled: false
@@ -885,7 +885,7 @@ export default {
         defaultJson: {
           disabled: false,
           id: 'stateIds',
-          label: 'stateIds',
+          label: 'assetState',
           name: 'State',
           readonly: true,
           type: 'assetState',