NEZ-2634 feat：集成详情页面dashboard更新

nezha-fronted/src/assets/css/components/page/integration/integration.scss

@@ -285,9 +285,10 @@
           }
         }
       }
-      .right-box.right-box-chart{
+      .right-box.right-box-dashboard-temp{
         top: 0;
         height: 100%;
+        z-index: 2001;
       }
     }
 

nezha-fronted/src/components/common/rightBox/dashboardTempBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-clickoutside="{obj: editDashboard, func: esc}" class="right-box right-box-dashboard-temp">
     <div class="right-box__header">
-      <div class="header__title">{{$t("dashboard.panel.createPanelTitle")}}</div>
+      <div class="header__title">{{from==='integration'?$t("overall.tempImport"):$t("dashboard.panel.createPanelTitle")}}</div>
       <div class="header__operation">
         <span v-cancel="{obj: editDashboard, func: esc}"><i class="nz-icon nz-icon-close" :title="$t('overall.close')"></i></span>
       </div>
@@ -16,6 +16,7 @@
           <!-- dashboardTemplate -->
           <el-form-item :label="$t('upload.template')" prop="tmplId">
             <v-selectpage
+              :disabled="from==='integration'"
               :data="templateList"
               :tb-columns="ChartSearchShowFields"
               :multiple="false"
@@ -75,6 +76,7 @@ import bus from '@/libs/bus'
 import editRigthBox from '../mixin/editRigthBox'
 export default {
   props: {
+    from: String
   },
   mixins: [editRigthBox],
   data () {
@@ -224,11 +226,16 @@ export default {
     }, 50),
     // 获取dashboard模板列表
     getDashboardTempData () {
-      this.$get('visual/panel', { type: 'template', pageSize: -1 }).then(response => {
+      if (this.from === 'integration') {
-        if (response.code === 200) {
+        this.editDashboard.tmplId = String(this.$parent.tempId)
-          this.templateList = response.data.list
+        this.templateList = this.$loadsh.cloneDeep(this.$parent.panelData)
-        }
+      } else {
-      })
+        this.$get('visual/panel', { type: 'template', pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.templateList = response.data.list
+          }
+        })
+      }
     },
     // 根据选中模板vartype请求数据
     getTableData () {
@@ -265,13 +272,13 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           // 模板varType ≠ 0时link有效且必填
-          if (this.templateType == 0) {
+          if (!this.templateType) {
             delete params.link
           }
           this.$post(this.url, params).then(response => {
             this.prevent_opt.save = false
             if (response.code === 200) {
-              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.$message({ duration: 1000, type: 'success', message: this.from === 'integration' ? this.$t('overall.result.successfully') : this.$t('tip.saveSuccess') })
               this.esc(true)
             } else {
               this.$message.error(response.msg)

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -389,7 +389,7 @@ export default {
       }
       this.variablesInit = false
       this.showPanel = val
-      this.variables = this.$loadsh.get(this, 'showPanel.param.variables', []) || []
+      this.variables = this.$loadsh.cloneDeep(this.$loadsh.get(this, 'showPanel.param.variables', []) || [])
       this.showPanel.type = 'dashboard'
       this.filter.panelId = this.showPanel.id
       this.panelId = this.showPanel.id

nezha-fronted/src/components/page/integration/integration-tabs/dashboard.vue

@@ -3,25 +3,10 @@
     <div class="integration-tool" style="padding: 0 10px;">
       <h3>{{showPanel.name}}</h3>
 
-      <top-tool-more-options
+      <button class="nz-btn el-button--small nz-btn-style-normal" @click="importFn">
-        type='integration'
+        <i class="nz-icon nz-icon-upload"></i>
-        ref="topTool"
+        <span>{{$t('overall.importExcel')}}</span>
-        id="integration-dashboard-tool"
+      </button>
-        :params="filter"
-        :params-type="'template'"
-        class="top-tool-export margin-r-10"
-        export-url="/visual/panel/export"
-        import-url="/visual/panel/import"
-        export-file-name="dashboard-temp"
-        @afterImport="afterImport"
-      >
-        <template>
-          <button class="nz-btn el-button--small nz-btn-style-normal" @click="importFn">
-            <i class="nz-icon nz-icon-upload"></i>
-            <span>{{$t('overall.importExcel')}}</span>
-          </button>
-        </template>
-      </top-tool-more-options>
     </div>
 
     <div class="dashboard-container">
@@ -46,6 +31,11 @@
         </div>
       </div>
     </div>
+
+    <!-- dashboard模板 -->
+    <transition name="right-box">
+      <dashboardTempBox v-if="rightBox.dashboardTemp.show" :from="fromRoute.integration" @close="closeDashboardTempBox"></dashboardTempBox>
+    </transition>
   </div>
 </template>
 
@@ -55,13 +45,13 @@ import { chartCache } from '@/components/common/js/common'
 import chartList from '@/components/chart/chartList'
 import bus from '../../../../libs/bus'
 import { fromRoute } from '@/components/common/js/constants'
-import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import panelVariables from '@/components/common/panel/panelVariables'
+import dashboardTempBox from '@/components/common/rightBox/dashboardTempBox'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'integration-dashboard',
   props: {
-    dashboardTemplate: String
+    tempId: Number
   },
   computed: {
     chartRightBoxShow () {
@@ -75,6 +65,9 @@ export default {
     return {
       fromRoute,
       chartListLoading: true,
+      rightBox: { // 面板弹出框相关
+        dashboardTemp: { show: false }
+      },
       searchTime: bus.getTimezontDateRange(),
       panel: { // 新增panel
         id: '',
@@ -83,7 +76,10 @@ export default {
       panelData: [],
       // ---图表相关参数--start
       dataList: [], // 数据列表
-      filter: {
+      filter: { // 过滤条件
+        panelId: -1,
+        start_time: '',
+        end_time: ''
       },
       showPanel: {
         name: '',
@@ -99,13 +95,19 @@ export default {
   },
   components: {
     chartList,
-    topToolMoreOptions,
+    panelVariables, // 处理panel变量的组件
-    panelVariables // 处理panel变量的组件
+    dashboardTempBox
   },
   methods: {
     importFn () {
+      this.rightBox.dashboardTemp.show = true
+      bus.$emit('clickModalClose', false)
     },
-    afterImport () {
+    closeDashboardTempBox (refresh) {
+      this.rightBox.dashboardTemp.show = false
+      setTimeout(() => {
+        bus.$emit('clickModalClose', true)
+      }, 100)
     },
     // 滚动事件触发下拉加载
     onScroll () {
@@ -126,40 +128,41 @@ export default {
       const findItem = unitsList.find(item => item.label.replace(/\s*/g, '') == type.replace(/\s*/g, ''))
       return findItem ? findItem.value : 2
     },
-    getData () {
+    getData (params) {
-      let num = 0
+      this.dataList = []
-      this.showPanel.charts.forEach(item => {
+      this.chartListLoading = true
-        item.id = ++num
+      this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
-        item.span = Number(item.span)
+        if (response.code === 200) {
-        item.height = Number(item.height)
+          this.chartListLoading = false
-        item.x = Number(item.x)
+          this.dataList = response.data.list.map(item => {
-        item.y = Number(item.y)
+            return {
-        item.type = item.type.split(' ')[0].toLowerCase()
+              ...item,
-        item.unit = this.getUnitValue(item.unit)
+              loaded: false
-        item.loaded = false
+            }
-        item.children && item.children.forEach(subItem => {
+          })
-          subItem.id = ++num
+        }
-          subItem.span = Number(subItem.span)
-          subItem.height = Number(subItem.height)
-          subItem.x = Number(subItem.x)
-          subItem.y = Number(subItem.y)
-          subItem.type = subItem.type.split(' ')[0].toLowerCase()
-          subItem.unit = this.getUnitValue(subItem.unit)
-        })
       })
-      this.dataList = this.showPanel.charts
-      this.chartListLoading = false
     },
     // 公用操作
     getTableData () {
-      this.panelData = JSON.parse(this.dashboardTemplate)
+      this.$get('visual/panel', { type: 'template', ids: this.tempId }).then(response => {
-      if (this.panelData.length > 0) {
+        if (response.code === 200) {
-        this.showPanel = this.$loadsh.cloneDeep(this.panelData[0])
+          this.panelData = response.data.list
-        this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
+          if (this.panelData.length > 0) {
-        this.getData()
+            this.filter.panelId = this.panelData[0].id
-      } else {
+            this.showPanel = this.$loadsh.cloneDeep(this.panelData[0])
+            this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
+            this.getData(this.filter)
+          }
+        }
         this.chartListLoading = false
-      }
+      }).catch((error) => {
+        this.chartListLoading = false
+        if (error) {
+          console.error(error)
+          this.$message.error(error.toString())
+        }
+      })
     },
     getPanelData () {
       this.variablesInit = true

nezha-fronted/src/components/page/integration/integration-tabs/integration-tabs.vue

@@ -9,7 +9,7 @@
       <automatic v-if="tabId==='automatic'"></automatic>
       <!-- module -->
       <configuration v-if="tabId==='configuration'" :configuration="detailsObj.configuration"></configuration>
-      <dashboard v-if="tabId==='dashboard'" :dashboardTemplate="detailsObj.dashboardTemplate"></dashboard>
+      <dashboard ref="dashboard" v-if="tabId==='dashboard'" :tempId="detailsObj.tempId"></dashboard>
       <alert v-if="tabId==='alert'" :moduleId="detailsObj.id"></alert>
       <metric v-if="tabId==='metric'" :moduleId="detailsObj.id"></metric>
     </div>

nezha-fronted/src/components/page/integration/integration-tabs/manual.vue

@@ -150,6 +150,8 @@ export default {
           const exception = JSON.parse(responseText)
           if (exception.message) {
             $self.$message.error(exception.message)
+          } else if (exception.msg) {
+            $self.$message.error(exception.msg)
           } else {
             console.error(error)
           }
@@ -190,6 +192,8 @@ export default {
           const exception = JSON.parse(responseText)
           if (exception.message) {
             $self.$message.error(exception.message)
+          } else if (exception.msg) {
+            $self.$message.error(exception.msg)
           } else {
             console.error(error)
           }

nezha-fronted/src/components/page/integration/integration.vue

@@ -28,6 +28,7 @@
       :visible.sync="dialogVisible"
       :show-close="true"
       :append-to-body="false"
+      :close-on-click-modal="clickModalClose"
       :z-index="1000"
       @close="closeDialog"
     >
@@ -43,7 +44,7 @@
       </div>
       <!-- tabs -->
       <div class="integration-dialog-content">
-        <integration-tabs  :type="type" :detailsObj="detailsObj"></integration-tabs>
+        <integration-tabs ref="tabs" :type="type" :detailsObj="detailsObj"></integration-tabs>
       </div>
     </el-dialog>
   </div>
@@ -51,6 +52,7 @@
 
 <script>
 import integrationTabs from './integration-tabs/integration-tabs.vue'
+import bus from '../../../libs/bus'
 export default {
   name: 'integration',
   components: {
@@ -67,9 +69,16 @@ export default {
       // 模块列表
       dataList: [],
       type: '',
-      detailsObj: {}
+      detailsObj: {},
+      clickModalClose: true
     }
   },
+  created () {
+    this.getDataList()
+    bus.$on('clickModalClose', (val) => {
+      this.clickModalClose = val
+    })
+  },
   methods: {
     async getDataList () {
       const res = await this.$get('/integration/module', { pageSize: -1 })
@@ -92,8 +101,8 @@ export default {
       this.dialogVisible = false
     }
   },
-  created () {
+  beforeDestroy () {
-    this.getDataList()
+    bus.$off('clickModalClose')
   }
 }
 </script>