fix：修改 chartDiagram

2023-06-09 10:36:48 +08:00
parent 7f9d2f12a0
commit ba33fa124e
9 changed files with 132 additions and 24 deletions
--- a/nezha-fronted/src/components/chart/chart/chartDiagram.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
@@ -9,7 +9,7 @@
 <!--      :isPanel="true"-->
 <!--      ref="diagram"-->
 <!--      :chartInfo="chartInfo" />-->
-    <meta2dMain :meta2dId="chartInfo.id + '-' + isFullscreen" :topoData="chartInfo.param.topo" :querysArray="querysArray" :params="params" :iconArray="iconArray" :isChart="true"/>
+    <meta2dMain :meta2dId="chartInfo.id + '-' + isFullscreen" :topoData="chartInfo.param.topo" :querysArray="querysArray" :params="{ timeType: 5}" :iconArray="iconArray" :isChart="true"/>
  </div>
 </template>

@@ -41,7 +41,10 @@ export default {
    bus.$on('showMeta2dPreview', (params) => {
      this.isPreview = params
    })
-    console.log(JSON.stringify(this.chartInfo.param.topo))
+    this.$get('/topology/icon').then(res => {
+      this.iconArray = [...res.data.list]
+    })
+    this.reload()
  },
  methods: {
    resize () {
--- a/nezha-fronted/src/components/chart/chartHeaderMixin.js
+++ b/nezha-fronted/src/components/chart/chartHeaderMixin.js
@@ -28,7 +28,6 @@ export default {
      default: false
    },
    nowTimeType: {
-      type: Number
    },
    hiddenText: { // 隐藏图表的悬浮文字
      type: String
--- a/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
+++ b/nezha-fronted/src/components/common/mixin/beforeMeta2d.js
@@ -18,8 +18,7 @@ export default {
  },
  methods: {
    reload () {
-      console.log(123213)
-      if (this.currentProject.id) {
+      if (this.currentProject && this.currentProject.id) {
        this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
          if (res.data && res.data.topo) {
            this.topoData = res.data.topo || {}
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js
@@ -142,7 +142,7 @@ export default {
            getTopology(this.meta2dId).centerView()
          }
          getTopology(this.meta2dId).lock(1)
-          // this.getNodesArr()
+          this.getNodesArr()
        })
      })
    },
@@ -441,6 +441,9 @@ export default {
      if (isRefresh) {
        this.$emit('reload')
      }
+      if (this.isChart) {
+        this.$emit('exit', false)
+      }
    },
    beforeEdit () {
      // const endTime = new Date().getTime()
@@ -598,6 +601,9 @@ export default {
      if (key === 'asset' || key === 'alert' || key === 'endpoint') {
        this.showNodeTools()
      }
+    },
+    saveChart (params) {
+      this.$emit('save', params)
    }
  },
  beforeDestroy () {
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dData.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="pens-data right-box__container">
    <div class="form-row-box chart-config">
-      <div class="form-row-item form-row-item-full">
+      <div class="form-row-item form-row-item-full" v-if="!isChart">
        <div class="form-row-key">
          {{$t('project.topology.timeRange')}}
        </div>
@@ -197,7 +197,8 @@ export default {
  mixins: [promqlInputMixin, rz],
  props: {
    querysArray: {},
-    params: {}
+    params: {},
+    isChart: {}
  },
  components: {
    draggable,
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dHeader.vue
@@ -27,7 +27,7 @@
      </button>
    </div>
    <div v-if="editFlag" class="top-tool-right float-right">
-      <button @click="previewTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light"
+      <button @click="previewTopology" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"
              style="margin-right: 20px"
      >
        {{$t('overall.preview')}}
@@ -37,13 +37,13 @@
 <!--      >-->
 <!--        {{$t('project.topology.previewExit')}}-->
 <!--      </button>-->
-      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click="saveMeta2d"
              :disabled="prevent_opt.save"
              :class="{'nz-btn-disabled':prevent_opt.save}"
              style="margin-right: 20px">
        {{$t('overall.save')}}
      </button>
-      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" style="margin-right: 20px" @click="cancelTopology">
+      <button class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" style="margin-right: 20px" @click="cancelTopology">
        {{$t('project.topology.exit')}}
      </button>
    </div>
@@ -117,7 +117,14 @@ export default {
      }
    },
    saveChart () {
-
+      const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
+      const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
+      const params = {
+        ...getTopology(this.meta2dId).data()
+      }
+      params.elements = elements
+      params.timeType = timeType
+      this.$emit('saveChart', params)
    },
    saveProject () {
      const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
@@ -174,11 +181,13 @@ export default {
        params: {
          timeType: topoData.timeType || 5
        },
-        currentProject: {
-          id: this.project.id
-        },
        show: true
      }
+      if (this.project) {
+        params.currentProject = {
+          id: this.project.id
+        }
+      }
      bus.$emit('showMeta2dPreview', params)
      // console.log(getTopology(this.meta2dId).data())
      // const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -10,6 +10,7 @@
      @edit="beforeEdit"
      @exitEdit="exitEdit"
      @reload="reload"
+      @saveChart="saveChart"
      @getNodesArr="getNodesArr"
    />
    <div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'" @contextmenu="onContextMenu($event)" style="position: relative">
@@ -51,6 +52,7 @@
      :selectPens.sync="selectPens"
      :querysArray="querysArray"
      :params="params"
+      :is-chart="isChart"
      :meta2dId="meta2dId"
      @updatePens="updatePens"
    />
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dProps.vue
@@ -8,7 +8,7 @@
        <meta2dCanvas :canvasProps="canvasProps"  :params.sync="params" :meta2dId='meta2dId' @changeActiveName="changeActiveName" ref ='meta2dCanvas'/>
      </el-tab-pane>
      <el-tab-pane :label="$t('project.topology.data')" name="data">
-        <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData"/>
+        <meta2dData :querysArray.sync="querysArray" :params.sync="params" ref="meta2dData" :isChart="isChart"/>
      </el-tab-pane>
    </el-tabs>
  </div>
@@ -33,7 +33,8 @@ export default {
    querysArray: {},
    params: {},
    meta2dId: {},
-    modules: {}
+    modules: {},
+    isChart: {}
  },
  components: {
    meta2dElement,
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -142,11 +142,24 @@
        <div class="topology-box">
          <div class="topology-mc"></div>
 <!--          <diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>-->
-          <meta2dMain :meta2dId="'rightBoxChart'" :topoData="chartConfig.param.topo" :querysArray="[]" :params="params" :iconArray="iconArray" @reload="reload"/>
+          <meta2dMain :meta2dId="'rightBoxChart'" :topoData="chartConfig.param.topo" :querysArray="querysArray" :params="{timeType: 5}" :iconArray="iconArray" @reload="reloadTopo" :isChart="true"/>
        </div>
      </el-form-item>
      <!--topplogy-->
-      <diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
+      <meta2dMain
+        @save="saveTopo"
+        class="topology-dialog"
+        v-if="topologyDialog"
+        ref="rightBoxChartEdit"
+        :meta2dId="'rightBoxChartEdit'"
+        :topoData="chartConfig.param.topo"
+        :querysArray="querysArray"
+        :params="{timeType: 5}"
+        :iconArray="iconArray"
+        @reload="reloadTopo"
+        @exit="topologyDialogChange"
+        :isChart="true"
+      />
      <!--text-->
      <el-form-item  v-if="isText(chartConfig.type)"  :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
        <rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
@@ -291,23 +304,47 @@
      </div>

    </el-form>
+    <el-dialog
+      :title="this.chartConfig.name || 'Chart'"
+      :visible.sync="isPreview.show"
+      fullscreen
+      class="no-transform-dialog"
+      custom-class="nz-new-dialog meta2d-preview"
+      :append-to-body="false"
+      :modal-append-to-body="false"
+      @close="isPreview.show = false"
+      destroy-on-close
+    >
+      <div v-if="isPreview.show" style="width: 100%;height: 100%">
+        <meta2dMain
+          :meta2dId="'projectIdIsPreview'"
+          :is-preview="true"
+          :name="'preview'"
+          :topoData="isPreview.topoData"
+          :querysArray="isPreview.querysArray"
+          :project="isPreview.currentProject"
+          :params="isPreview.params"
+          :iconArray="iconArray"
+        />
+      </div>
+    </el-dialog>
  </div>
 </template>

 <script>
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
 import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
-import diagram from '@/components/common/ChartDiagram/diagram'
 import richTextEditor from '@/components/chart/richTextEditor'
 import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
 import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
 import { clearTopology } from '@/components/common/js/common'
+import bus from "@/libs/bus";
 export default {
  name: 'otherChartConfig',
-  mixins: [publicConfig, chartTypeShow, beforeMeta2d],
+  mixins: [publicConfig, chartTypeShow],
  components: {
-    diagram,
-    richTextEditor
+    richTextEditor,
+    meta2dMain
  },
  watch: {
    // 'chartConfig.param.text': {
@@ -350,12 +387,27 @@ export default {
          id: 'clock',
          name: this.$t('dashboard.dashboard.chartForm.typeVal.clock.label')
        }
-      ]
+      ],
+      topoData: {},
+      querysArray: [],
+      meta2dType: '',
+      iconArray: [],
+      isPreview: {
+        show: false,
+        topoData: {},
+        querysArray: {},
+        currentProject: {},
+        params: {}
+      }
    }
  },
  methods: {
    init () {
      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      this.reloadTopo()
+      bus.$on('showMeta2dPreview', (params) => {
+        this.isPreview = params
+      })
    },
    chartTypeChange (type) {
      switch (type) {
@@ -449,20 +501,56 @@ export default {
    },
    topologyDialogChange (flag, data) {
      this.topologyDialog = flag
+      if (flag) {
+        setTimeout(() => {
+          this.$refs.rightBoxChartEdit.$refs.header.editMeta2d()
+        }, 200)
+      }
      if (data) {
        this.chartConfig.param.topo = data
        this.change()
      }
    },
+    saveTopo (topo) {
+      this.topologyDialogChange(false, topo)
+    },
    textChange (val) {
      const html = `<div  class="editor-core ql-container ql-snow"><div class="ql-editor">${val}</div></div>`
      this.chartConfig.param.text = html
      this.$refs.chartForm.validateField('param.text')
      this.change()
+    },
+    reloadTopo () {
+      const res = {
+        data: this.chartConfig.param
+      }
+      if (res.data && res.data.topo) {
+        this.topoData = res.data.topo || {}
+        if (res.data.topo.topo) {
+          this.topoData = res.data.topo.topo || {}
+        }
+        this.querysArray = res.data.topo.elements || []
+        // this.params = {
+        //   timeType: res.data.topo.timeType || 5
+        // }
+      } else {
+        this.topoData = {}
+        this.querysArray = []
+        // this.params = {
+        //   timeType: 5
+        // }
+      }
    }
  },
  created () {
    this.init()
+    this.$get('/topology/icon').then(res => {
+      this.iconArray = [...res.data.list]
+    })
+  },
+  destroyed () {
+    clearTopology()
+    bus.$off('showMeta2dPreview')
  }
 }
 </script>