NEZ-2732 fix：dashboard project topology 轮播部分内容未正确显示

2023-03-24 16:58:08 +08:00
parent 57cc7f70d1
commit d77883fa6d
8 changed files with 52 additions and 29 deletions
--- a/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
+++ b/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
@@ -2,16 +2,21 @@
  <div v-my-loading="topologyLoading" class="overview">
    <transition name = "el-zoom-in-center">
      <div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
-        <el-carousel :interval="5000" :trigger="'click'" arrow="hover">
-          <el-carousel-item v-for="(item,index) in allProject" :key="index">
+        <el-carousel :interval="5000" :trigger="'click'" :autoplay="false" arrow="hover">
+          <el-carousel-item v-for="(item,index) in allProject" :key="index" style="min-height: 10px;min-width: 10px">
            <div class="maskLayer" @click="toProject(item)"></div>
 <!--            <span class="project-name">{{item.name}}</span>-->
-            <topology
-              :fromOverView="true"
-              :from-chart="true"
-              :obj="item"
+            <meta2dMain
+              :meta2dId="'autoTopology' + item.id + (isFullscreen ? 'screen' : '')"
+              :topoData="item.topoData"
+              :isPreview="true"
+              :querysArray="item.querysArray"
+              :project="item"
+              :params="item.params"
+              :show-zoom="false"
+              class="meta2d-chart"
+              :is-chart="true"
              :ref="'topology' + index"
-              :topologyIndexF="isFullscreen?('screen'+chartInfo.id+'-'+index):(chartInfo.id+'-'+index)"
            />
          </el-carousel-item>
        </el-carousel>
@@ -23,7 +28,7 @@

 <script>
 import axios from 'axios'
-import topology from '@/components/common/project/topologyL5'
+import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
 import chartMixin from '@/components/chart/chartMixin'
 import bus from '@/libs/bus'
 export default {
@@ -36,7 +41,7 @@ export default {
  },
  mixins: [chartMixin],
  components: {
-    topology
+    meta2dMain
  },
  methods: {
    initChart () {
@@ -64,6 +69,14 @@ export default {
            this.topologyLoading = false
          }
          res2.forEach((item, index) => {
+            item.topoData = item.topo || {}
+            if (item.topo.topo) {
+              item.topoData = item.topo.topo || {}
+            }
+            item.querysArray = item.topo.elements || []
+            item.params = {
+              timeType: item.topo.timeType || 5
+            }
            // temp.push(item)
            setTimeout(() => {
              this.allProject.push(item)
@@ -114,6 +127,11 @@ export default {
 }
 </script>

-<style scoped>
-
+<style scoped lang="scss">
+.meta2d-chart {
+  /deep/.meta2d-project {
+    height: 100%;
+    border: none;
+  }
+}
 </style>
--- a/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/meta2dMain.js
@@ -125,6 +125,7 @@ export default {
      // meta2d.on('add', this.appPen) // 添加新画笔·
      meta2d.on('click', this.topoClick) // click画笔·
      setTopology(this.meta2dId, meta2d)
+      this.reload()
    },
    reload () {
      this.position.show = false
@@ -132,12 +133,17 @@ export default {
      const startTime = endTime - 60 * this.params.timeType * 1000
      this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
        this.clacTopoData(this.topoData, arr).then((data) => {
-          console.log(data)
+          if (!getTopology(this.meta2dId)) {
+            return
+          }
          this.getModule()
-          console.log(this.meta2dId, getTopology(this.meta2dId))
-          getTopology(this.meta2dId).open(data)
          getTopology(this.meta2dId).resize()
+          getTopology(this.meta2dId).open(data)
+          if (this.isChart) {
+            getTopology(this.meta2dId).fitView(20)
+          } else {
            getTopology(this.meta2dId).centerView()
+          }
          getTopology(this.meta2dId).lock(1)
          this.getNodesArr()
        })
--- a/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
+++ b/nezha-fronted/src/components/common/project/meta2d/js/topoUtil.js
@@ -216,7 +216,6 @@ export default {
        pen.animateColor = mapping.color.bac
        pen.borderColor = mapping.color.border
        pen.color = mapping.color.text
-        console.log(!!pen.lineAnimateType)
        if (pen.lineAnimateType) {
          pen.autoPlay = true
        }
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dCanvas.vue
@@ -126,7 +126,6 @@ export default {
  },
  computed: {
    selectPenArrId () {
-      console.log(this.selectPenArr)
      return this.selectPenArr.active.map(item => item.id)
    }
  },
@@ -200,7 +199,6 @@ export default {
    },
    penActive (item) {
      // bus.$emit('changeSelectPens', [])
-      console.log(getTopology(this.meta2dId).store)
      this.$emit('changeActiveName')
      this.$nextTick(() => {
        getTopology(this.meta2dId).active([item])
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue
@@ -157,14 +157,18 @@ export default {
  },
  watch: {
    topoData: {
-      immediate: true,
+      immediate: false,
      handler () {
+        if (!this.isChart) {
          this.reload()
        }
      }
+    }
  },
  mounted () {
+    setTimeout(() => {
      this.init()
+    })
    bus.$on('changeSelectPens', this.pensActive)
    this.$refs.meta2dBox.addEventListener('mousemove', this.mousemove)
    // this.$refs.meta2dBox.addEventListener('mousedown', this.mousedown)
@@ -182,11 +186,13 @@ export default {
    },
    zoomMap (num) {
      getTopology(this.meta2dId).scale(getTopology(this.meta2dId).store.data.scale + num)
-    },
+    }
  },
  beforeDestroy () {
+    if (getTopology(this.meta2dId)) {
      getTopology(this.meta2dId).clear()
      setTopology(this.meta2dId, null)
+    }
    bus.$off('changeSelectPens', this.pensActive)
    this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
    this.$refs.meta2dBox.removeEventListener('mouseup', this.mouseup)
--- a/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
+++ b/nezha-fronted/src/components/common/project/meta2d/meta2dTooltip.vue
@@ -18,7 +18,6 @@
 </template>

 <script>
-import panelChart from '@/components/chart/panelChart'
 import defaultLineData from '@/components/chart/defaultLineData'
 import topoUtil from '@/components/common/project/meta2d/js/topoUtil'

@@ -34,7 +33,7 @@ export default {
    }
  },
  components: {
-    panelChart
+    panelChart: () => import('@/components/chart/panelChart')
  },
  data () {
    return {
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -376,8 +376,6 @@ export default {
        'date-range-history' + this.sign,
        JSON.stringify(this.rangeHistory)
      )
-
-      console.log(this.sign)
      this.$set(this.searchTime, 2, '')
      this.showDropdown()
      this.getRangeHistoryArr()
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/nezha-fronted/src/components/page/dashboard/dashboard.vue
@@ -1180,7 +1180,6 @@ export default {
        const add = this.$route.query.add
        this.$nextTick(() => {
          if (add) {
-            console.log(add)
            if (add === 'chart') {
              this.addChartBefore()
            }