fix：aseet 添加关系图（20%）

2022-03-17 16:42:56 +08:00
parent 291562452a
commit 430b8b1dce
15 changed files with 1699 additions and 17 deletions
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -4066,6 +4066,20 @@
        "d3-timer": "2",
        "d3-transition": "2",
        "d3-zoom": "2"
+      },
+      "dependencies": {
+        "d3-zoom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
+          "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+          "requires": {
+            "d3-dispatch": "1 - 2",
+            "d3-drag": "2",
+            "d3-interpolate": "1 - 2",
+            "d3-selection": "2",
+            "d3-transition": "2"
+          }
+        }
      }
    },
    "d3-array": {
@@ -4288,15 +4302,15 @@
      }
    },
    "d3-zoom": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
-      "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
      "requires": {
-        "d3-dispatch": "1 - 2",
-        "d3-drag": "2",
-        "d3-interpolate": "1 - 2",
-        "d3-selection": "2",
-        "d3-transition": "2"
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
      }
    },
    "dashdash": {
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -26,6 +26,7 @@
    "cytoscape": "^3.15.2",
    "d3": "^6.7.0",
    "d3-hexbin": "^0.2.2",
+    "d3-zoom": "^3.0.0",
    "echarts": "^5.2.2",
    "element-ui": "^2.15.3",
    "file-saver": "^2.0.2",
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -172,6 +172,15 @@
        :is-fullscreen="isFullscreen"
        @chartIsNoData="chartIsNoData"
      ></chart-clock>
+      <chart-topology
+        :ref="'chart' + chartInfo.id"
+        v-if="isTopology(chartInfo.type)"
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+        :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
+        @chartIsNoData="chartIsNoData"
+      ></chart-topology>
    </template>
  </div>
 </template>
@@ -198,7 +207,8 @@ import chartUrl from './chart/chartUrl'
 import chartValue from './chart/chartValue'
 import chartHexagonD3 from './chart/chartHexagonD3'
 import chartMap from './chart/chartMap'
-import { getOption, isTimeSeries, isHexagon, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup, isAutotopology, isMap, isAssetInfo, isEndpointInfo, isTable, isGauge, isClock } from './chart/tools'
+import chartTopology from './chart/chartTopology'
+import { getOption, isTimeSeries, isHexagon, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram, isGroup, isAutotopology, isMap, isAssetInfo, isEndpointInfo, isTable, isGauge, isClock, isTopology } from './chart/tools'
 import lodash from 'lodash'

 export default {
@@ -224,7 +234,8 @@ export default {
    chartUrl,
    chartValue,
    chartHexagonD3,
-    chartMap
+    chartMap,
+    chartTopology
  },
  props: {
    chartInfo: Object,
@@ -283,6 +294,7 @@ export default {
    isTable,
    isGauge,
    isClock,
+    isTopology,
    chartIsNoData (flag) {
      this.chartChildrenData = flag
    },
--- a/nezha-fronted/src/components/chart/chart/chartTopology.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTopology.vue
@@ -0,0 +1,287 @@
+<template>
+  <div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%">
+    <div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg"></div>
+    <div :class="`chart-canvas-tooltip-${chartId}`" :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
+      <div class="chart-canvas-tooltip-title tooltip-title">
+        {{tooltip.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>{{tooltip.value}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as d3 from 'd3'
+import chartMixin from '@/components/chart/chartMixin'
+import chartFormat from '@/components/chart/chartFormat'
+import '@svgdotjs/svg.panzoom.js'
+export default {
+  name: 'chartHexagonD3',
+  mixins: [chartMixin, chartFormat],
+  data () {
+    return {
+      timer: null,
+      HexagonData: [],
+      boxWidth: 0,
+      boxHeight: 0,
+      boxPadding: 5,
+      tooltip: {
+        x: 0,
+        y: 0,
+        title: 0,
+        value: 0,
+        show: false
+      },
+      svgDom: null,
+      spaceBetweenHexa: 3,
+      hexagonTimer: null,
+      data: {
+        nodes: [],
+        links: []
+      }
+    }
+  },
+  methods: {
+    initChart () {
+      this.initHexagon()
+    },
+    initHexagon () {
+      this.data.links.push(...this.chartData[0].links)
+      this.data.nodes.push(...this.chartData[0].nodes)
+      setTimeout(() => {
+        const dom = document.getElementById(`chart-canvas-${this.chartId}`)
+        console.log(dom, `chart-canvas-${this.chartId}`)
+        dom.append(this.ForceGraph({ nodes: this.data.nodes, links: this.data.links }))
+        const svg = document.getElementById('svgHex' + this.chartId)
+        svg.setAttribute('width', '100%')
+        svg.setAttribute('height', '100%')
+        // const bbox = svg.getBBox()
+        // svg.setAttribute('viewBox', (bbox.x - 10) + ' ' + (bbox.y - 10) + ' ' + (bbox.width + 20) + ' ' + (bbox.height + 20))
+      }, 100)
+    },
+    ForceGraph ({
+      nodes, // an iterable of node objects (typically [{id}, …])
+      links // an iterable of link objects (typically [{source, target}, …])
+    }, {
+      nodeId = d => d.id, // given d in nodes, returns a unique identifier (string)
+      nodeGroup, // given d in nodes, returns an (ordinal) value for color
+      nodeGroups, // an array of ordinal values representing the node groups
+      nodeTitle, // given d in nodes, a title string
+      nodeFill = 'currentColor', // node stroke fill (if not using a group color encoding)
+      nodeStroke = '#fff', // node stroke color
+      nodeStrokeWidth = 1.5, // node stroke width, in pixels
+      nodeStrokeOpacity = 1, // node stroke opacity
+      nodeRadius = 5, // node radius, in pixels
+      nodeStrength,
+      linkSource = ({ source }) => source, // given d in links, returns a node identifier string
+      linkTarget = ({ target }) => target, // given d in links, returns a node identifier string
+      linkStroke = '#999', // link stroke color
+      linkStrokeOpacity = 0.6, // link stroke opacity
+      linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels
+      linkStrokeLinecap = 'round', // link stroke linecap
+      linkStrength,
+      colors = d3.schemeTableau10, // an array of color strings, for the node groups
+      width = 640, // outer width, in pixels
+      height = 400, // outer height, in pixels
+      invalidation // when this promise resolves, stop the simulation
+    } = {}) {
+      console.log(nodes, nodeId)
+      const self = this
+      // Compute values.
+      const N = d3.map(nodes, nodeId).map(intern)
+      const LS = d3.map(links, linkSource).map(intern)
+      const LT = d3.map(links, linkTarget).map(intern)
+      if (nodeTitle === undefined) nodeTitle = (_, i) => N[i]
+      const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle)
+      const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern)
+      const W = typeof linkStrokeWidth !== 'function' ? null : d3.map(links, linkStrokeWidth)
+      const L = typeof linkStroke !== 'function' ? null : d3.map(links, linkStroke)
+
+      // Replace the input nodes and links with mutable objects for the simulation.
+      nodes = d3.map(nodes, (_, i) => ({ id: N[i] }))
+      links = d3.map(links, (_, i) => ({ source: LS[i], target: LT[i] }))
+
+      // Compute default domains.
+      if (G && nodeGroups === undefined) nodeGroups = d3.sort(G)
+
+      // Construct the scales.
+      const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors)
+
+      // Construct the forces.
+      const forceNode = d3.forceManyBody()
+      const forceLink = d3.forceLink(links).id(({ index: i }) => N[i])
+      // if (nodeStrength !== undefined) forceNode.strength(nodeStrength)
+      const simulation = d3.forceSimulation(nodes)
+        .force('link', forceLink)
+        .force('charge', forceNode)
+        .on('tick', ticked)
+
+      const svg = d3.create('svg')
+        .attr('id', 'svgHex' + this.chartId)
+        .attr('width', width)
+        .attr('height', height)
+        .attr('viewBox', [-width / 2, -height / 2, width, height])
+        .attr('style', 'max-width: 100%; height: auto; height: intrinsic;')
+
+      const link = svg.append('g')
+        .attr('stroke', typeof linkStroke !== 'function' ? linkStroke : null)
+        .attr('stroke-opacity', linkStrokeOpacity)
+        .attr('stroke-width', typeof linkStrokeWidth !== 'function' ? linkStrokeWidth : null)
+        .attr('stroke-linecap', linkStrokeLinecap)
+        .selectAll('line')
+        .data(links)
+        .join('line')
+
+      const node = svg.append('g')
+        .attr('fill', nodeFill)
+        .attr('stroke', nodeStroke)
+        .attr('stroke-opacity', nodeStrokeOpacity)
+        .attr('stroke-width', nodeStrokeWidth)
+        .selectAll('.node')
+        .data(nodes)
+        .enter().append('g')
+        .attr('class', 'node')
+        .attr('id', function (d) { return 'node' + d.id })
+        .call(drag(simulation))
+      node.append('circle')
+        .attr('r', nodeRadius)
+      node.append('svg') // no i18n
+        .attr('width', '5px')// No i18n
+        .attr('height', '5px')// No i18n
+        .attr('x', 5)// No i18n
+        .attr('y', 5)// No i18n
+        .attr('style', 'cursor:pointer')// No i18n
+        .attr('class', function (d) { return d.hasChildren ? 'toggle-nodes' : 'hide' })// No i18n
+        .attr('viewBox', '0 0 512 512') // No i18n
+        .append('polygon').attr('points', '508.3,204.302 508.3,94.372 232.104,94.372 232.104,119.163 2.128,119.163 2.128,148.02 103.282,148.02   103.282,395.751 104.073,395.751 104.073,395.879 231.416,395.879 231.416,433.091 507.612,433.091 507.612,323.161   231.416,323.161 231.416,365.65 135.572,365.65 135.572,148.02 232.104,148.02 232.104,204.302 ') // no i18n
+        .on('click', showChildren) // no i18n
+      node.attr('class', function (d) {
+        let cl = 'node'
+        if (d.hasChildren && (d.expanded == undefined || (d.expanded != undefined && d.expanded == false))) {
+          cl += ' closed'
+        }
+        return cl
+      })
+      node.attr('fixed', false)
+      if (W) link.attr('stroke-width', ({ index: i }) => W[i])
+      if (L) link.attr('stroke', ({ index: i }) => L[i])
+      if (G) node.attr('fill', ({ index: i }) => color(G[i]))
+      if (T) node.append('title').text(({ index: i }) => T[i])
+      function intern (value) {
+        return value !== null && typeof value === 'object' ? value.valueOf() : value
+      }
+
+      function ticked () {
+        link
+          .attr('x1', d => d.source.x)
+          .attr('y1', d => d.source.y)
+          .attr('x2', d => d.target.x)
+          .attr('y2', d => d.target.y)
+
+        node
+          .attr('transform', function (d) {
+            return 'translate(' + d.x + ',' + d.y + ')'
+          })
+      }
+
+      function drag (simulation) {
+        function dragstarted (event) {
+          if (!event.active) simulation.alphaTarget(0.3).restart()
+          // event.subject.fx = event.subject.x
+          // event.subject.fy = event.subject.y
+        }
+
+        function dragged (event, d) {
+          // event.subject.fx = event.x
+          // event.subject.fy = event.y
+          d3.select(this).raise().attr('x', d.x = event.x).attr('y', d.y = event.y)
+          d3.select(this).raise().attr('fx', d.fx = event.x).attr('fy', d.fy = event.y)
+        }
+
+        function dragended (event) {
+          if (!event.active) simulation.alphaTarget(0)
+          // event.subject.fx = null
+          // event.subject.fy = null
+        }
+
+        return d3.drag()
+          .on('start', dragstarted)
+          .on('drag', dragged)
+          .on('end', dragended)
+      }
+
+      function nodeMouseover (d) {
+        console.log(d, 'nodeMouseover')
+      }
+
+      function nodeMouseout (d) {
+        console.log(d, 'nodeMouseout')
+      }
+      function showChildren (event, d) {
+        console.log(event,d)
+      }
+      return Object.assign(svg.node(), { scales: { color } })
+    },
+    update (nodes, links) {
+      const force = d3.forceSimulation()
+      force.nodes(nodes)
+      force.force('link').links(links)//
+    },
+    hexagonOver (that, e) { // 移入六边形
+      this.tooltip.title = that.alias
+      this.tooltip.value = that.showValue
+      this.tooltip.show = true
+      this.setPosition(e)
+    },
+    hexagonMove (e) { // 六边形内移动
+      if (this.tooltip.show) {
+        this.setPosition(e)
+      }
+    },
+    hexagonOut (that) {
+      this.tooltip.show = false
+    },
+    setPosition (e) {
+      const windowWidth = window.innerWidth// 窗口宽度
+      const windowHeight = window.innerHeight// 窗口高度
+      const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+      if (box) {
+        const boxWidth = box.offsetWidth
+        const boxHeight = box.offsetHeight
+        if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
+          this.tooltip.x = e.pageX + 15
+        } else {
+          this.tooltip.x = e.pageX - boxWidth - 15
+        }
+        if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
+          this.tooltip.y = e.pageY + 15
+        } else {
+          this.tooltip.y = e.pageY - boxHeight - 10
+        }
+      } else {
+        this.tooltip.y = e.pageY + 15
+        this.tooltip.x = e.pageX + 15
+      }
+    },
+    showChildren () {
+      this.upDate()
+    },
+    upDate () {
+
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/nezha-fronted/src/components/chart/chart/options/graph.js
+++ b/nezha-fronted/src/components/chart/chart/options/graph.js
--- a/nezha-fronted/src/components/chart/chart/tools.js
+++ b/nezha-fronted/src/components/chart/chart/tools.js
@@ -51,6 +51,10 @@ export function getOption (type) {
      chartOption = lodash.cloneDeep(chartClockOption)
      break
    }
+    case chartType.topologyLink: {
+      chartOption = lodash.cloneDeep({})
+      break
+    }
    default:
      chartOption = {}
      break
@@ -114,6 +118,9 @@ export function isGauge (type) {
 export function isClock (type) {
  return type === chartType.clock
 }
+export function isTopology (type) {
+  return type === chartType.topologyLink
+}
 export function getGroupHeight (arr) {
  if (arr.length) {
    let lastItem = []
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -354,6 +354,111 @@ export default {
            }
            break
          }
+          case 'topology': {
+            this.loading = true
+            console.log(this.chartInfo)
+            const params = {
+              type: this.chartInfo.linkType,
+              id: this.chartInfo.id
+            }
+            this.$get('/stat/rel', params).then(res => {
+              this.loading = false
+              console.log(res)
+              res = {
+                msg: 'success',
+                code: 200,
+                data: {
+                  nodes: [{
+                    id: 'asset-1',
+                    type: 'asset',
+                    category: 'asset',
+                    name: 'ddd',
+                    hasChildren: false,
+                    alert: [{
+                      priority: 'P1',
+                      num: 11
+                    }]
+                  }, {
+                    id: 'endpoint-1',
+                    type: 'endpoint',
+                    category: 'endpoint',
+                    name: 'ddd',
+                    hasChildren: true,
+                    alert: [{
+                      priority: 'P1',
+                      num: 11
+                    }]
+                  },
+                  {
+                    id: 'asset-2',
+                    type: 'asset',
+                    category: 'asset',
+                    name: 'ddd',
+                    hasChildren: false,
+                    alert: [{
+                      priority: 'P1',
+                      num: 11
+                    }]
+                  }, {
+                    id: 'endpoint-2',
+                    type: 'endpoint',
+                    category: 'endpoint',
+                    name: 'ddd',
+                    hasChildren: true,
+                    alert: [{
+                      priority: 'P1',
+                      num: 11
+                    }]
+                  },
+                  {
+                    id: 'asset-3',
+                    type: 'asset',
+                    category: 'asset',
+                    name: 'ddd',
+                    hasChildren: false,
+                    alert: [{
+                      priority: 'P1',
+                      num: 11
+                    }]
+                  }, {
+                    id: 'endpoint-3',
+                    type: 'endpoint',
+                    category: 'endpoint',
+                    name: 'ddd',
+                    hasChildren: true,
+                    alert: [{
+                      priority: 'P1',
+                      num: 11
+                    }]
+                  }
+                  ],
+                  links: [{
+                    source: 'asset-1',
+                    target: 'endpoint-1'
+                  },
+                  {
+                    source: 'asset-1',
+                    target: 'endpoint-2'
+                  },
+                  {
+                    source: 'asset-1',
+                    target: 'endpoint-3'
+                  },
+                  {
+                    source: 'asset-1',
+                    target: 'asset-2'
+                  },
+                  {
+                    source: 'asset-1',
+                    target: 'asset-3'
+                  }
+                  ]
+                }
+              }
+              this.chartData = [res.data]
+            })
+            break
+          }
        }
      } catch (e) {
        this.loading = false
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -409,7 +409,8 @@ export const chartType = {
  endpointInfo: 'endpointInfo',
  topology: 'topology',
  map: 'map',
-  hexagon: 'hexagon'
+  hexagon: 'hexagon',
+  topologyLink: 'topologyLink'
 }

 export const chartLegendPlacement = {
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -2,6 +2,8 @@ import bus from '@/libs/bus'
 import { tableSet } from '@/components/common/js/tools'
 import { fromRoute } from '@/components/common/js/constants'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
+import defaultData from '@/components/chart/defaultLineData'
+import lodash from 'lodash'
 export default {
  mixins: [routerPathParams],
  props: {
@@ -305,6 +307,15 @@ export default {
      }
      this.silenceBoxShow = true
    },
+    topology (row, type) {
+      const chartInfo = lodash.cloneDeep(defaultData)
+      chartInfo.id = row.id
+      chartInfo.type = 'topologyLink'
+      chartInfo.linkType = type
+      chartInfo.datasource = 'topology'
+      chartInfo.name = '关系图'
+      this.$store.dispatch('showTopology', chartInfo)
+    },
    closeDialog () {
      this.silenceBoxShow = false
    },
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -55,8 +55,13 @@ export default {
          this.$emit('addSilence', row, param)
          break
        }
+        case 'topology': {
+          // this.$emit('copy', row)
+          this.$emit('topology', row, param)
+          break
+        }
        default:
-          this.$emit(command, row)
+          this.$emit(command, row, param)
          break
      }
    },
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -435,7 +435,6 @@ export default {
    },
    showError () {
      this.$refs.chartForm.validate((blooen, object) => {
-        console.log(blooen, object)
        Object.keys(object).forEach(item => {
          const keyArr = item.split('.')
          if (keyArr.length >= 4) {
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -142,6 +142,7 @@
              <el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
              <el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
              <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -76,6 +76,25 @@
                  @fullScreen="fullScreen"
                  @listResize="listResize" ></bottom-box>
    </transition>
+    <!-- 全屏查看 -->
+    <el-dialog
+      v-if="topologyShow"
+      :visible.sync="topologyShow"
+      :show-close="false"
+      class="nz-dialog chart-fullscreen"
+      destroy-on-close
+      fullscreen
+      :modal-append-to-body="false"
+    >
+      <panel-chart
+        :ref="'chart-fullscreen' + topologyChartInfo.id"
+        :chart-info="topologyChartInfo"
+        :from="from"
+        :time-range="timeRange"
+        :is-fullscreen="true"
+        @showFullscreen="showFullscreen"
+      ></panel-chart>
+    </el-dialog>
  </div>
 </template>

@@ -83,11 +102,12 @@
 import { fromRoute } from '@/components/common/js/constants'
 import bottomBox from '@/components/common/bottomBox/bottomBox'
 import { bottomBoxWindow } from '@/components/common/js/tools'
-
+import panelChart from '@/components/chart/panelChart'
 export default {
  name: 'nzDataList',
  components: {
-    bottomBox
+    bottomBox,
+    panelChart
  },
  props: {
    from: {
@@ -123,6 +143,12 @@ export default {
        }
      }
      return ''
+    },
+    topologyShow () {
+      return this.$store.getters.getTopologyShow
+    },
+    topologyChartInfo () {
+      return this.$store.getters.getTopologyChartInfo
    }
  },
  data () {
@@ -143,7 +169,8 @@ export default {
        tableHover: false, // 控制滚动条和top按钮同时出现
        showCustomTableTitle: false // 自定义列弹框是否显示
      },
-      showLayout: []
+      showLayout: [],
+      timeRange: [new Date(), new Date()]
    }
  },
  methods: {
@@ -178,6 +205,9 @@ export default {
    },
    changeDetailType (item) {
      this.$emit('changeDetailType', item)
+    },
+    showFullscreen (flag) {
+      this.$store.commit('setTopologyShow', flag)
    }
  },
  watch: {
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -142,6 +142,7 @@
          @reload="getTableData"
          @selectionChange="selectionChange"
          @addSilence="addSilence"
+          @topology="topology"
          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></asset-table>
      </template>
      <!-- 分页组件 -->
--- a/nezha-fronted/src/store/panel.js
+++ b/nezha-fronted/src/store/panel.js
@@ -15,7 +15,9 @@ const panel = {
    chartLastPosition: {
      x: 0,
      y: 0
-    }
+    },
+    topologyShow: false,
+    topologyChartInfo: {}
  },
  mutations: {
    setShowRightBox (state, flag) {
@@ -59,6 +61,12 @@ const panel = {
    },
    setChartListId (state, id) {
      state.chartListId = id
+    },
+    setTopologyShow (state, topologyShow) {
+      state.topologyShow = topologyShow
+    },
+    setTopologyChartInfo (state, topologyChartInfo) {
+      state.topologyChartInfo = topologyChartInfo
    }
  },
  getters: {
@@ -100,6 +108,12 @@ const panel = {
    },
    getChartListId (state, id) {
      return state.chartListId
+    },
+    getTopologyShow (state) {
+      return state.topologyShow
+    },
+    getTopologyChartInfo (state) {
+      return state.topologyChartInfo
    }
  },
  actions: {
@@ -131,6 +145,10 @@ const panel = {
    },
    clearPanel (store) {
      store.commit('cleanPanel')
+    },
+    showTopology (store, chartInfo) {
+      store.commit('setTopologyChartInfo', chartInfo)
+      store.commit('setTopologyShow', true)
    }
  }
 }