fix：修改下弹窗显示错误的问题

2021-12-16 19:50:23 +08:00
parent 424663eb57
commit 44bb4ab27c
8 changed files with 133 additions and 36 deletions
--- a/nezha-fronted/src/components/chart/chart/chartGroup.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGroup.vue
@@ -6,7 +6,7 @@
      :class="{'show-top':showTopBtn}"
      :data-list="dataList"
      :nowTimeType="nowTimeType"
-      :from="fromRoute.panel"
+      :from="from"
      :panel-lock="panelLock"
      :isGroup="true"
      :time-range="searchTime"
@@ -25,6 +25,7 @@ export default {
  name: 'chart-group',
  props: {
    panelLock: Boolean,
+    from: String
  },
  mixins: [chartMixin, chartFormat],
  computed: {
@@ -54,6 +55,7 @@ export default {
      handler (n) {
        console.log(n)
        this.$nextTick(() => {
+          console.log(this.from)
          this.dataList = JSON.parse(JSON.stringify(n))
        })
      }
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -14,7 +14,7 @@
      :vertical-compact="true"
      :useCssTransforms="false"
      :style="{
-        'margin-top':isGroup ? '0' : (-1 * (stepWidth + 12) + 'px')
+        'margin-top':isGroup ? '0' : (-1 * (stepWidth +( from !== fromRoute.panel ? 36 : 14 )) + 'px')
      }"
    >
      <grid-item
@@ -44,6 +44,7 @@
          :ref="'chart' + item.id"
          @edit-chart="$emit('edit-chart', item)"
          :chart-info="item"
+          :from="from"
          :time-range="timeRange"
          :chart-detail-info="chartDetailInfo"
          @showFullscreen="showFullscreen"
@@ -70,6 +71,7 @@
      <panel-chart
        :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
        :chart-info="fullscreen.chartInfo"
+        :from="from"
        :is-fullscreen="true"
        @groupShow="groupShow"
        :panelLock="panelLock"
@@ -92,13 +94,13 @@ export default {
  name: 'chartList',
  props: {
    // TODO isModel
-    from: { type: String },
    panelId: {},
    chartDetailInfo: Object,
    timeRange: Array, // 时间范围
    panelLock: { type: Boolean, default: true },
    isGroup: { type: Boolean, default: false },
    groupInfo: {},
+    from: String,
    dataList: Array // 看板中所有图表信息
  },
  components: {
@@ -270,6 +272,7 @@ export default {
  },
  mounted () {
    this.init()
+    console.log(this.from,'chartList')
    if (!this.isGroup) {
      bus.$on('groupMove', this.changeGroupHeight)
      this.$store.commit('setChartListId', `chartList${this.timestamp}`)
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -18,6 +18,7 @@
      :chart-data="chartData"
      :chart-info="chartInfo"
      :panelLock="panelLock"
+      :from="from"
      :is-fullscreen="isFullscreen"
      :loading="loading"
      v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
@@ -46,7 +47,8 @@ export default {
    timeRange: Array, // 时间范围
    isFullscreen: Boolean,
    panelLock: Boolean,
-    chartDetailInfo: Object
+    chartDetailInfo: Object,
+    from: String
  },
  data () {
    return {
@@ -93,22 +95,23 @@ export default {
      this.query(elements, startTime, endTime, step)
    },
    query (elements, startTime, endTime, step) {
+      console.log(this.from, this.chartInfo.datasource,this.chartInfo.type, elements, startTime, endTime, step)
      try {
        switch (this.chartInfo.datasource) {
-          case 'metrics': {
+          case 'metrics':
+          case 'logs': {
            if (this.chartInfo.type === 'assetInfo') {
              this.$get('asset/asset/' + this.chartDetailInfo.id).then(res => {
                this.chartData = res.data
              })
+              break
            }
            if (this.chartInfo.type === 'endpointInfo') {
              this.$get('monitor/endpoint/' + this.chartDetailInfo.id).then(res => {
                this.chartData = res.data
              })
-            }
              break
            }
-          case 'logs': {
            let urlPre = ''
            if (this.chartInfo.datasource === 'metrics') {
              urlPre += '/prom'
@@ -293,6 +296,7 @@ export default {
  },
  mounted () {
    this.getChartData()
+    console.log(this.from,this.chartInfo.type)
  }
 }
 </script>
--- a/nezha-fronted/src/components/chart/tempGroup.js
+++ b/nezha-fronted/src/components/chart/tempGroup.js
@@ -7,7 +7,7 @@ const group = {
  height: 1,
  updateBy: 1,
  updateAt: '2021-12-13 08:20:04',
-  type: 'groupTemp',
+  type: 'group',
  unit: 2,
  weight: 4,
  param: {
--- a/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
@@ -105,7 +105,7 @@
              :class="{'show-top':showTopBtn}"
              :data-list="dataList"
              :nowTimeType="nowTimeType"
-              :from="fromRoute.panel"
+              :from="from"
              :panel-lock="panelLock"
              :time-range="searchTime"
              @edit-chart="editChart"
@@ -120,7 +120,22 @@
      </div>
    </nz-bottom-data-list>
    <transition name="right-box">
-      <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+<!--      <chart-box v-if="rightBox.chart.show" ref="addChartModal" :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>-->
+      <chart-right-box
+        v-if="chartRightBoxShow"
+        v-loading="rightBox.loading"
+        ref="addChartModal"
+        :chart="chart"
+        :from="from"
+        :panel-data="panelData"
+        :show-panel="showPanel"
+        @close="closeRightBox"
+        @reload="panelReload"
+        @reloadOnlyPanel="panelReloadOnlyPanel"
+        @delete-chart="delChart"
+        @on-create-success="createSuccess"
+        @on-delete-success="delChartOk"
+      ></chart-right-box>
    </transition>
    <transition name="right-box">
      <chart-temp-box v-if="rightBox.chartTemp.show" :from="from" :obj="chart" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @on-create-success="createSuccess"></chart-temp-box>
@@ -129,7 +144,8 @@
 </template>

 <script>
-import chartBox from '../../../page/dashboard/chartBox'
+// import chartBox from '../../../page/dashboard/chartBox'
+import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import chartList from '@/components/chart/chartList'
 import bus from '../../../../libs/bus'
 import subDataListMixin from '@/components/common/mixin/subDataList'
@@ -150,6 +166,14 @@ export default {
      default: 'dashboard'
    }
  },
+  computed: {
+    chartRightBoxShow () {
+      return this.$store.getters.getShowRightBox
+    },
+    delChartFlag () {
+      return this.$store.getters.getDelChart
+    }
+  },
  data () {
    return {
      fromRoute,
@@ -237,7 +261,7 @@ export default {
    }
  },
  components: {
-    chartBox,
+    chartRightBox,
    chartList,
    nzBottomDataList,
    topToolMoreOptions,
@@ -256,6 +280,25 @@ export default {
    panelReloadForDel () {
      this.getTableData(this.obj.id)
    },
+    panelReload (clearShowPanel) {
+      this.getTableData(clearShowPanel)
+    },
+    panelReloadOnlyPanel () { // 仅刷新panel数据
+      if (!this.hasButton('panel_view')) {
+        return
+      }
+      this.$get('visual/panel?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.panelData = response.data.list
+          for (let i = 0; i < this.panelData.length; i++) {
+            if (this.panelData[i].id == this.showPanel.id) {
+              this.showPanel = this.panelData[i]
+              break
+            }
+          }
+        }
+      })
+    },
    /* 图表相关操作--start */
    addChart () {
      this.chart = this.newChart()
@@ -275,6 +318,7 @@ export default {
    newChart () {
      return JSON.parse(JSON.stringify(this.blankChart))
    },
+
    // 切换tab
    changeTab (tab) {
      this.$emit('changeTab', tab)
@@ -282,6 +326,8 @@ export default {
    closeRightBox (refresh) {
      this.rightBox.chart.show = false
      this.rightBox.chartTemp.show = false
+      this.chart = {}
+      this.$store.dispatch('clearPanel')
      if (refresh) {
        this.refresh()
        if (this.from === fromRoute.chartTemp) {
@@ -357,7 +403,10 @@ export default {
        const startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss')
        params.start_time = startTimeTmp
        params.end_time = endTimeTmp
+        params.from = this.from
      }
+      console.log(this.from)
+      if (this.from !== 'chartTemp') {
        this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
          if (response.code === 200) {
            this.chartListLoading = false
@@ -370,6 +419,10 @@ export default {
            })
          }
        })
+      } else {
+        this.chartListLoading = false
+        this.dataList = this.panelDataList
+      }
    },

    /* 图表相关操作--end */
@@ -423,11 +476,6 @@ export default {
        if (this.from === this.fromRoute.chartTemp) {
          if (this.obj.type === 'group') {
            this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
-              res.data.list.forEach(item => {
-                if (!item.children) {
-                  item.children = []
-                }
-              })
              this.panelDataList = res.data.list
              if (this.panelDataList.length > 0) {
                this.showPanel.id = this.filter.panelId = 0
@@ -594,6 +642,26 @@ export default {
          this.$message.error(res.msg)
        }
      })
+    },
+    disposeChart () {
+      const chartInfo = this.$store.getters.getChart
+      const groupId = this.$store.getters.getGroupId
+      const type = this.$store.getters.getType
+      if (type === 'add') {
+        this.addChart()
+      }
+      if (type === 'edit') {
+        this.editChart(chartInfo)
+      }
+      if (type === 'addGroupItem') {
+        this.addGroupItem(groupId)
+      }
+      if (type === 'delete') {
+        this.delChart(chartInfo)
+      }
+      if (type === 'duplicate') {
+        this.editChart(chartInfo, true)
+      }
    }
  },
  mounted () {
@@ -622,7 +690,25 @@ export default {
          this.chartDetailInfo = n
        }, 500)
      }
+    },
+    chartRightBoxShow: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
        }
+      }
+    },
+    delChartFlag: {
+      immediate: false,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.disposeChart()
+        }
+      }
+    },
  },
  beforeDestroy () {
    document.querySelector('#tableList') && document.querySelector('#tableList').removeEventListener('mouseenter', this.tableListEnter)
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -153,9 +153,9 @@ export default {
  methods: {
    ...mapActions(['loginSuccess']),
    login () {
-      // if (this.loading || !this.license.valid || !this.license.token) {
-      //   return
-      // }
+      if (this.loading || !this.license.valid || !this.license.token) {
+        return
+      }
      if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
        this.loading = true
        this.$post('/sys/login', this.loginData).then(res => {
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -21,7 +21,7 @@
          <el-select
            id="chart-box-type"
            v-model="chartConfig.type"
-            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            :disabled="!!(chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length)"
            :placeholder="$t('el.select.placeholder')"
            popper-class="right-box-select-top prevent-clickoutside"
            size="small"
@@ -30,7 +30,7 @@
            <el-option
              v-for="item in chartTypeList"
              :key="item.id"
-              :disabled="item.id==='group' && chartConfig.isGroup"
+              :disabled="item.id==='group' && !!chartConfig.groupId"
              :label="item.name"
              :value="item.id">
              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -157,6 +157,7 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import { fromRoute } from '@/components/common/js/constants'
 import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
+import chartData from './testData'

 export default {
  name: 'panel',
@@ -515,6 +516,7 @@ export default {
      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
        if (response.code === 200) {
          this.chartListLoading = false
+          // response = chartData
          this.dataList = response.data.list.map(item => {
            return {
              ...item,