feat：chart 添加topolog图

2021-06-29 14:10:41 +08:00
parent b1d1513e48
commit ae5dbcdf00
13 changed files with 3025 additions and 28 deletions
--- a/nezha-fronted/src/components/charts/chart-list-group.vue
+++ b/nezha-fronted/src/components/charts/chart-list-group.vue
@@ -146,6 +146,20 @@
                    :chart-index="item.chartIndex"
        ></text-chart>

+        <diagramChart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'diagram'"
+                      @on-refresh-data="refreshChart"
+                      @on-remove-chart-block="removeChart"
+                      @on-duplicate-chart-block="duplicateChart"
+                      @on-drag-chart="editChartForDrag"
+                      @on-edit-chart-block="editData"
+                      @sync="()=>{chartBySync(item)}"
+                      @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+                      :is-lock="panelLock"
+                      :panel-id="filter.panelId"
+                      :chart-data="item"
+                      :chart-index="index"
+        ></diagramChart>
+
        <chart-alert-list  :from="from" :ref="'editChart'+item.id"
                           :panel-id="filter.panelId"
                          :chart-index="item.chartIndex"
@@ -208,6 +222,7 @@ import draggable from 'vuedraggable'
 import chartDataFormat from './chartDataFormat'
 import chartAlertList from './chart-alert-list'
 import textChart from './text-chart'
+import diagramChart from './diagram-chart'
 import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
 import { fromRoute } from '@/components/common/js/constants'
@@ -238,7 +253,8 @@ export default {
    draggable,
    textChart,
    chartPie,
-    chartBarStatis
+    chartBarStatis,
+    diagramChart
    // visNetwork,
  },
  watch: {
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -145,6 +145,20 @@
                    :chart-index="index"
        ></text-chart>

+        <diagramChart :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'diagram'"
+                    @on-refresh-data="refreshChart"
+                    @on-remove-chart-block="removeChart"
+                    @on-duplicate-chart-block="duplicateChart"
+                    @on-drag-chart="editChartForDrag"
+                    @on-edit-chart-block="editData"
+                    @sync="()=>{chartBySync(item)}"
+                    @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+                    :is-lock="panelLock"
+                    :panel-id="filter.panelId"
+                    :chart-data="item"
+                    :chart-index="index"
+        ></diagramChart>
+
        <chart-alert-list :ref="'editChart'+item.id" :chartData="item"
                          :from="from"
                          :chart-index="index"
@@ -229,6 +243,7 @@ import draggable from 'vuedraggable'
 import chartDataFormat from './chartDataFormat'
 import chartAlertList from './chart-alert-list'
 import textChart from './text-chart'
+import diagramChart from './diagram-chart'
 import chartPie from './chart-pie'
 import chartBarStatis from './chart-bar-statistics'
 import chartGroup from './chart-group'
@@ -259,7 +274,8 @@ export default {
    textChart,
    chartPie,
    chartGroup,
-    chartBarStatis
+    chartBarStatis,
+    diagramChart
    // visNetwork,
  },
  data () {
@@ -815,6 +831,18 @@ export default {
        return
      }

+      if (chartItem.type == 'diagram') {
+        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+          if (filterType === 'showFullScreen') { // 全屏查询
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, filterType)
+          } else {
+            this.$refs['editChart' + chartItem.id][0].setData(chartItem, null,
+              this.filter.panelId, null, '')
+          }
+        }
+        return
+      }
      if (chartItem.type == 'text') {
        if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
          if (filterType === 'showFullScreen') { // 全屏查询
--- a/nezha-fronted/src/components/charts/diagram-chart.vue
+++ b/nezha-fronted/src/components/charts/diagram-chart.vue
@@ -0,0 +1,218 @@
+<style lang="scss">
+  @import './chart.scss';
+</style>
+<template>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-single" ref="resizeBox">
+      <div class="chart-text"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+        <loading  :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
+            <span class="el-dropdown-link chart-title">
+              <span class="chart-title-text">{{chartData.name}}</span>
+              <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
+                <span v-if="chartData.remark">
+                  <el-tooltip :content="chartData.remark" placement="top" effect="light">
+                     <i class="nz-icon nz-icon-info-normal"></i>
+                  </el-tooltip>
+                </span>
+                <span  v-has="'panel_chart_edit'" :title="$t('dashboard.refresh')" class="" @click="refreshChart">
+                  <i class="nz-icon nz-icon-replay"></i>
+                </span>
+                 <span  @click="showAllScreen"  v-if="from !== 'chartTemp'" class="" :title="$t('dashboard.screen')">
+                  <i class="nz-icon nz-icon-maxview"></i>
+                 </span>
+                <span><i class="el-icon-more" @click.stop="dropdownMenuShow=!dropdownMenuShow"></i></span>
+              </span>
+            </span>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="" >
+              <li  @click="editChart" class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i><span>{{$t('dashboard.edit')}}</span></li>
+              <li  v-has="'panel_chart_delete'" class="el-dropdown-menu__item" @click="removeChart">
+                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+              <li  v-has="'panel_chart_add'" class="el-dropdown-menu__item" @click="duplicate">
+                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
+              <li  v-has="'panel_chart_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
+                <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
+            </ul>
+          </el-dropdown>
+        </div>
+        <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
+          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
+            <diagram style="height: 100%;width: 100%" :topoData="chartData.param.topo" :fromChart="true" :topologyIndexF="chartData.id" ref="diagram"/>
+          </div>
+        </div>
+        <!--全屏-->
+        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
+                   :visible.sync="screenModal"
+                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
+          <div slot="title">
+            <span class="nz-dialog-title">{{data.name}}</span>
+          </div>
+          <div class="rich-text-screen-container"  >
+            <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
+              <diagram :topoData="chartData.param.topo" :fromChart="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
+            </div>
+          </div>
+          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+        </el-dialog>
+      </div>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import loading from '../common/loading'
+import 'quill/dist/quill.snow.css'
+import diagram from "@/components/common/ChartDiagram/diagram";
+export default {
+  name: 'diagram-chart',
+  components: {
+    loading: loading,
+    diagram
+  },
+  props: {
+    chartData: {
+      type: Object
+    },
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0
+    },
+    editChartId: {
+      type: String,
+      default: 'editChartId'
+    },
+    chartIndex: {
+      type: Number,
+      default: 0
+    },
+    from: { type: String },
+    isLock: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      data: {}, // 该图表信息,chartItem
+      noData: false,
+      unit: {},
+      text: '', // 保存信息
+      screenText: '', // 全屏数据
+      loading: Object,
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      screenModal: false,
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow: false,
+      dragTitleShow: false,
+      dropdownMenuShow: false,
+      divFirstShow: false
+    }
+  },
+  created () {
+  },
+  computed: {},
+  watch: {
+    dropdownMenuShow (n) {
+      this.$emit('dropmenu-change', n)
+    }
+  },
+  methods: {
+    startResize (e) {
+      const vm = this
+      this.$chartResizeTool.start(vm, this.data, e)
+    },
+    startLoading (area) {
+      if (area === 'screen') {
+        this.$refs['localLoadingScreen' + this.chartIndex].startLoading()
+      } else {
+        // this.showLoading = true;
+        this.$refs['localLoading' + this.chartIndex].startLoading()
+      }
+    },
+    endLoading (area) {
+      if (area === 'screen') {
+        // this.showLoadingScreen = false;
+        this.$refs['localLoadingScreen' + this.chartIndex].endLoading()
+      } else {
+        // this.showLoading = false;
+        this.$refs['localLoading' + this.chartIndex].endLoading()
+      }
+    },
+    showLoad (chartItem) {
+      this.$nextTick(() => {
+        const chartBox = document.getElementById('chartSingleStatDiv' + this.chartIndex)
+        let height = Math.floor(chartItem.height / 10) * 10// 图表高度四舍五入
+        if (height < this.minHeight) {
+          height = this.minHeight
+        }
+        chartBox.style.height = `${height - this.chartSpaceHeight}px`
+        const singleStatBox = document.getElementById('chartContainer' + this.chartIndex)
+        singleStatBox.style.height = `${height - this.chartSpaceHeight - this.titleHeight}px`// -75-32
+      })
+      this.startLoading()
+      this.divFirstShow = true
+    },
+    // 重新请求数据 刷新操作-local
+    refreshChart () {
+      this.dropdownMenuShow = false
+      this.startLoading()
+      this.firstShow = false
+      this.$emit('on-refresh-data', this.data.id)
+    },
+    // 编辑图表
+    editChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-edit-chart-block', this.data.id)
+    },
+    // 删除该图表
+    removeChart () {
+      this.dropdownMenuShow = false
+      this.$emit('on-remove-chart-block', this.data.id)
+    },
+    clickos () {
+      this.dropdownMenuShow = false
+    },
+    clearChart () {
+      this.data = {}
+    },
+    duplicate () {
+      this.dropdownMenuShow = false
+      this.$emit('on-duplicate-chart-block', this.data.id)
+    },
+    // 全屏查看
+    showAllScreen () {
+      this.dropdownMenuShow = false
+      this.screenModal = true
+    },
+    resize (chartItem) {
+      document.querySelector('#chartSingleStatDiv' + this.chartIndex + ' .rich-text-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
+      this.$refs.diagram.winResize()
+    },
+    // 设置数据, filter区分
+    setData (chartItem, seriesItem, panelId, filter, area) {
+      this.$nextTick(() => {
+        this.resize(chartItem)
+      })
+      this.divFirstShow = true
+
+      this.firstShow = true // 展示操作按键
+
+      this.panelIdInner = panelId
+      this.data = chartItem
+      this.text = chartItem.param.text
+      this.screenText = chartItem.param.text
+      this.endLoading()
+    }
+  },
+  mounted () {
+    this.firstLoad = false
+  },
+  beforeDestroy () {
+    this.clearChart()
+  }
+}
+</script>
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -172,6 +172,17 @@ export const statisticsList = [
  { value: 'different', label: i18n.t('dashboard.panel.chartForm.statisticsVal.different') }
 ]

+export const alignList = [
+  { value: 'left', label: i18n.t('dashboard.panel.chartForm.alignList.left') },
+  { value: 'center', label: i18n.t('dashboard.panel.chartForm.alignList.center') },
+  { value: 'right', label: i18n.t('dashboard.panel.chartForm.alignList.right') }
+]
+
+export const lockList = [
+  { value: 1, label: i18n.t('dashboard.panel.chartForm.lockList.on') },
+  { value: 0, label: i18n.t('dashboard.panel.chartForm.lockList.off') }
+]
+
 export const chart = {
  varType: [
    { value: '1', label: i18n.t('asset.asset') },
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -4,7 +4,7 @@ import i18n from '../i18n'
 import bus from '@/libs/bus'
 import moment from 'moment-timezone'
 /* 弹窗点击外部后关闭 */
-const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'topology-dialog', 'el-dropdown-menu', 'el-select-dropdown'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
  // 初始化指令
  bind (el, binding, vnode) {
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -253,6 +253,8 @@ const cn = {
        thresholds: '阈值',
        group: '组',
        remark: '描述',
+        lock: '锁',
+        align: '对齐方式',
        typeVal: {
          line: {
            label: '曲线图'
@@ -282,6 +284,9 @@ const cn = {
          text: {
            label: '文本'
          },
+          diagram: {
+            label: '示意图'
+          },
          group: {
            label: '组'
          }
@@ -297,6 +302,15 @@ const cn = {
          different: 'Different',
          null: 'None'
        },
+        alignList: {
+          left: '左对齐',
+          right: '右对齐',
+          center: '居中'
+        },
+        lockList: {
+          on: '开',
+          off: '关'
+        },
        width: '宽',
        high: '高',
        metric: '指标',
@@ -727,7 +741,7 @@ const cn = {
        download: '下载',
        osType: 'OS 类型',
        autoScript: '自动安装脚本',
-        type: 'Agent类型',
+        type: 'Agent类型'
      }
    },
    agent: {
@@ -1230,7 +1244,7 @@ const cn = {
        list: '列表',
        delete: '删除',
        save: '保存',
-        info: '信息',
+        info: '信息'
      }
    },
    project: {
@@ -1419,7 +1433,8 @@ const cn = {
      imgError: '请上传图片',
      folder: '目录',
      selMod: '请个所有节点绑定module',
-      none: '无'
+      none: '无',
+      previewExit: '继续编辑'
    },
    update: '更新'
  },
@@ -1604,13 +1619,13 @@ const cn = {
      add: '新增',
      edit: '修改',
      delete: '删除',
-      mibBrowser: 'MIB浏览器',
+      mibBrowser: 'MIB浏览器'
    },
    credential: {
      view: '查看',
      add: '新增',
      edit: '修改',
-      delete: '删除',
+      delete: '删除'
    },
    system: {
      basic: '基础设置',
@@ -1620,7 +1635,7 @@ const cn = {
      apiKey: {
        add: '新增',
        edit: '修改',
-        delete: '删除',
+        delete: '删除'
      }
    },
    terminalLog: {
@@ -1636,7 +1651,7 @@ const cn = {
      reset: '重置'
    },
    apikey: {
-      apiKey: 'Api Key',
+      apiKey: 'Api Key'
    }
  },
  ...zhLocale
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -269,6 +269,8 @@ const en = {
        thresholds: 'Thresholds',
        group: 'Group',
        remark: 'Description',
+        lock: 'Lock',
+        align: 'Align',
        typeVal: {
          line: {
            label: 'Line Chart' // "曲线图"
@@ -298,6 +300,9 @@ const en = {
          text: {
            label: 'Text'
          },
+          diagram: {
+            label: 'Diagram'
+          },
          group: {
            label: 'Group'
          }
@@ -313,6 +318,15 @@ const en = {
          different: 'Different',
          null: 'None'
        },
+        alignList: {
+          left: 'Left',
+          right: 'Right',
+          center: 'Center'
+        },
+        lockList: {
+          on: 'ON',
+          off: 'OFF'
+        },
        width: 'Width', // "宽"
        high: 'Height', // "高"
        metric: 'Metric', // "指标"
@@ -1424,7 +1438,8 @@ const en = {
      imgError: 'Please upload pictures',
      folder: 'Folder',
      selMod: 'Please bind module for all nodes',
-      none: 'None'
+      none: 'None',
+      previewExit: 'Continue'
    },
    update: '更新'
  },
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -11,7 +11,7 @@
      <el-tab-pane :label="$t('project.topology.data')" name="1">
        <el-form v-model="selection.pen.data" class="pens-data" label-position="top">
          <!--module-->
-          <el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type" class="half-form-item">
+          <el-form-item label="Module" prop="moduleId" v-if="!selection.pen.type&&!fromDiagram" class="half-form-item">
            <el-select v-model="selection.pen.data.moduleId" :placeholder="$t('el.select.placeholder')" popper-class="asset-dropdown" size="small"
                       @change="moduleIdChange" >
              <el-option
@@ -1209,7 +1209,11 @@ export default {
      require: true
    },
    modules: {},
-    imgArr: {}
+    imgArr: {},
+    fromDiagram: {
+      type: Boolean,
+      default: false
+    }
  },
  watch: {
    // 'topologyData.data':{
@@ -1232,6 +1236,16 @@ export default {
      deep: true,
      immediate: true
    },
+    fromDiagram: {
+      handler () {
+        if (this.selection.pen && this.selection.pen.data) {
+          // eslint-disable-next-line vue/no-mutating-props
+          this.selection.pen.data.iconToolState = false
+        }
+      },
+      deep: true,
+      immediate: true
+    },
    imgArr: {
      handler () {
        // this.loading = false
@@ -1241,7 +1255,7 @@ export default {
    }
  },
  created () {
-    const dataOption = getTopology(this.index).data
+    const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data
    if (!dataOption.data) {
      dataOption.data = {}
    }
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -22,9 +22,9 @@
                    :chart-data="chartData"
                    :chart-index="0"></chart-table>
    </div>
-    <div class="tooltip-box-info" v-if="!isChart">
-      <expression-info :chart-data="chartData" :filterTime="filterTime"/>
-    </div>
+<!--    <div class="tooltip-box-info" v-if="!isChart">-->
+<!--      <expression-info :chart-data="chartData" :filterTime="filterTime"/>-->
+<!--    </div>-->
  </div>
 </template>

@@ -62,7 +62,7 @@ export default {
  data () {
    return {
      tempDom: { height: 400, width: '' },
-      chartDataTemp: { id: 8832, prev: null, next: null, panelId: 0, title: '123', span: 12, height: 13, createAt: '2021-01-27 07:36:19', unit: 2, weight: 0, pid: null, buildIn: null, seq: null, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, threshold: '', url: '', nullType: 'connected' }, sync: null, asset: null, isLoaded: true, from: '__vue_devtool_undefined__', draggable: true, resizable: true, editable: true },
+      chartDataTemp: { id: 8832, prev: null, next: null, panelId: 0, title: '123', span: 12, height: 12, createAt: '2021-01-27 07:36:19', unit: 2, weight: 0, pid: null, buildIn: null, seq: null, param: { last: 0, legendValue: { total: 'off', min: 'off', avg: 'off', last: 'off', max: 'off' }, threshold: '', url: '', nullType: 'connected' }, sync: null, asset: null, isLoaded: true, from: '__vue_devtool_undefined__', draggable: true, resizable: true, editable: true },
      chartData: {},
      filter: {
        end_time: bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss'),
--- a/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
+++ b/nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
@@ -106,7 +106,7 @@ export default {
    }
  },
  mounted () {
-    const dataOption = getTopology(this.index).data
+    const dataOption = this.index == -2 ? getTopology(-1).data : getTopology(this.index).data
    Object.keys(this.option).forEach(key => {
      if (key === 'scale') {
        this.scaleNum = (JSON.stringify(dataOption[key]) ? parseInt(dataOption[key] * 100) : this.scaleNum)
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -141,6 +141,29 @@
    position: relative;
    top: 1px;
  }
+  .topology-box{
+    width: 100%;
+    height: 242px;
+    border: 1px solid #E7EAED;
+    border-radius: 2px;
+    position: relative;
+  }
+  .topology-dialog{
+    position: fixed !important;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+  .topology-mc{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+  }
 </style>
 <template>
  <div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
@@ -245,7 +268,7 @@
            </el-form-item>

            <!-- unit -->
-            <el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
+            <el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'&& editChart.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
              <el-cascader id="chart-box-unit" v-model="editChart.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
                           placeholder=""
                           popper-class="dc-dropdown prevent-clickoutside chart-box-unit"
@@ -255,6 +278,22 @@
              >
              </el-cascader>
            </el-form-item>
+            <!--Align-->
+            <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.align')" class="form-item--half-width" prop="unit">
+              <el-select id="chart-box-statistics" v-model="editChart.param.align" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
+                <el-option v-for="item in alignList" :key="item.value" :label="item.label" :value="item.value">
+                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <!--lock-->
+            <el-form-item v-if="editChart.type ==='diagram'" :label="$t('dashboard.panel.chartForm.lock')" class="form-item--half-width" prop="unit">
+              <el-select id="chart-box-statistics" v-model="editChart.param.lock" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
+                <el-option v-for="item in lockList" :key="item.value" :label="item.label" :value="item.value">
+                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>

            <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
              <el-input id="chart-box-url" v-model="editChart.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
@@ -275,11 +314,20 @@
            </el-form-item>
          </div>

+          <div class="form__sub-title" v-if="editChart.type ==='diagram'">{{$t('dashboard.panel.chartForm.content')}} <i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></div>
+          <!--topoData-->
+          <el-form-item v-if="editChart.type ==='diagram'" >
+            <div class="topology-box">
+              <div class="topology-mc"></div>
+              <diagram :topoData="editChart.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
+            </div>
+          </el-form-item>
+
          <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' class="form-item--half-width"  prop="param.threshold">
            <el-input id="chart-box-threshold" v-model="editChart.param.threshold" size="small" type="input"></el-input>
          </el-form-item>

-          <div v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'" class="form__sub-title">
+          <div v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group' && editChart.type != 'diagram'" class="form__sub-title">
            <span>{{$t('alert.config.expr')}}</span>
            <span v-if="!isSingleStat" @click="addExpression">
              <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
@@ -294,7 +342,7 @@
            <alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
          </el-row>
          <div style="margin-bottom: 20px">
-            <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'&& editChart.type != 'group'">
+            <el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'&& editChart.type != 'group' && editChart.type != 'diagram'">
              <promql-input
                :expression-list="expressions"
                :id="promqlKeys[index-1]"
@@ -432,6 +480,8 @@
    </div>
    <!--preview -->
    <chart-preview :panelId="panelId" ref="chartsPreview" :fromEndpoint="fromEndpoint"></chart-preview>
+    <!--topplogy-->
+    <diagram :topoData="editChart.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
  </div>
 </template>

@@ -448,6 +498,7 @@ import selectPanel from '../../common/popBox/selectPanel'
 import nezhaColor from '../../common/nezhaColor'
 import i18n from '../../common/i18n'
 import { fromRoute } from '@/components/common/js/constants'
+import diagram from '@/components/common/ChartDiagram/diagram'
 const rz = {
  methods: {
    rz (e) {
@@ -481,7 +532,8 @@ export default {
      },
      filterPanel: '',
      statisticsList: this.$CONSTANTS.statisticsList,
-
+      alignList: this.$CONSTANTS.alignList,
+      lockList: this.$CONSTANTS.lockList,
      promqlCount: 1,
      promqlKeys: [],
      elementIds: [],
@@ -548,6 +600,10 @@ export default {
          id: 'url',
          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
        },
+        {
+          id: 'diagram',
+          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
+        },
        {
          id: 'group',
          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
@@ -590,7 +646,8 @@ export default {
      varTypeArr: [
        { name: 'Asset', id: 1 },
        { name: 'Endpoint', id: 2 }
-      ]
+      ],
+      topologyDialog: false
      // metricStore: []
    }
  },
@@ -600,7 +657,8 @@ export default {
    'promql-input': promqlInput,
    'rich-text-editor': richTextEditor,
    selectPanel,
-    nezhaColor
+    nezhaColor,
+    diagram
  },
  mounted () {
    this.$nextTick(() => {
@@ -1398,6 +1456,12 @@ export default {
        this.editChart.span = 12
        this.editChart.height = 6
        this.setIsGroup()
+      } else if (chartType === 'diagram') {
+        this.editChart.param = {
+          lock: 0,
+          align: 'center',
+          topo: {}
+        }
      } else {
        this.setIsOtherChart()
        if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') {
@@ -1678,6 +1742,12 @@ export default {
    },
    getMetricOptions () {
      return this.metricOptions
+    },
+    topologyDialogChange (flag, data) {
+      this.topologyDialog = flag
+      if (data) {
+        this.editChart.param.topo = data
+      }
    }
  },
  created () {
--- a/nezha-fronted/static/config.json
+++ b/nezha-fronted/static/config.json
@@ -1 +1 @@
-{"baseUrl":"/", "version": "21.04"}
+{"baseUrl":"http://192.168.40.42:8080/nz-admin/", "version": "21.04"}