NEZ-2802 feat： alertMessageInfo 支出 dashboard

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -16,7 +16,7 @@
   display: flex;
   position: relative;
   flex-direction: column;
-  &:hover .chart-header.chart-header--float{
+  &:hover > .chart-header.chart-header--float{
     background-color: $--chart-title-hover-background-color;
     height: 39px;
     opacity: 1;

nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss

@@ -51,16 +51,23 @@
       display: flex;
       flex-direction: column;
 
-      .nz-chart {
+      .info-box-left-top {
         height: 36%;
         margin-bottom: 20px;
         border: 1px solid $--border-color-light;
         flex: none;
+        .nz-chart{
+          height: 100%;
+        }
+      }
+      .nz-chart{
+        height: 100%;
+        padding-bottom: 0;
       }
-
       .alert-message-info-tab {
         height: 61.8%;
         flex: 1;
+        flex-shrink: 0;
 
         .alert-label-header-title3 {
           display: none;
@@ -401,6 +408,49 @@
       .alert-message-info-tab {
         .el-tabs.el-tabs--card.el-tabs--top {
           .el-tabs__content {
+            height: 100%;
+            width: 100%;
+            overflow: hidden;
+            box-sizing: border-box;
+            .el-tab-pane {
+              height: 100%;
+              width: 100%;
+              .vue-grid-layout {
+                padding-bottom: 0;
+              }
+            }
+            .alert-message-info-dashboard {
+              height: 100%;
+              width: 100%;
+              overflow: hidden;
+              box-sizing: border-box;
+              .integration-dashboard{
+                box-sizing: border-box;
+                height: 100%;
+                .dashboard-container{
+                  height: 100%;
+                  .table-list{
+                    height: 100%;
+                    .no-data {
+                      text-align: center;
+                      position: absolute;
+                      width: 100%;
+                      top: 50%;
+                      margin-top: -54px;
+                      .no-data-div {
+                        color: $--color-text-regular;
+                      }
+                    }
+                  }
+                }
+                .right-box.right-box-dashboard-temp{
+                  top: 0;
+                  height: 100%;
+                  z-index: 2001;
+                }
+              }
+            }
+
             #pane-alertRule{
               .alert-rule-nfo{
                 .alert-rule-box{

nezha-fronted/src/components/chart/chartList.vue

@@ -768,10 +768,10 @@ export default {
           // 当前设备是移动设备
           this.isPhone = true
         }
+        this.noData = !n || n.length < 1
         this.gridLayoutShow = false
         this.firstInit = true
         this.gridLayoutLoading = true
-        this.noData = !n || n.length < 1
         if (!this.isGroup) {
           const position = getLayoutPosition(n)
           this.$store.commit('setChartLastPosition', position)

nezha-fronted/src/components/common/alert/alertMessageInfo.vue

@@ -23,25 +23,28 @@
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
     <div class="alert-message-info-box">
       <div class="info-box-left">
-        <chart
+        <div class="info-box-left-top">
-          ref="chart"
+          <chart
-          v-if="chartInfo.alertRule && chartInfo.alertRule.type !== 3"
+            ref="chart"
-          :chart-data="chartData"
+            v-if="chartInfo.alertRule && chartInfo.alertRule.type !== 3"
-          :chart-info="chartInfo"
+            :chart-data="chartData"
-          :panelLock="panelLock"
+            :chart-info="chartInfo"
-          :filter="filter"
+            :panelLock="panelLock"
-          :from="from"
+            :filter="filter"
-          @refreshLogs="refreshLogs"
+            :from="from"
-          :show-header="showHeader"
+            @refreshLogs="refreshLogs"
-          :isError="isError"
+            :show-header="showHeader"
-          :loading="loading"
+            :isError="isError"
-          :minusTime="minusTime"
+            :loading="loading"
-          :multipleTime="multipleTime"
+            :minusTime="minusTime"
-          :isFullscreen="isFullscreen"
+            :multipleTime="multipleTime"
-          :showAllData="showAllData"
+            :isFullscreen="isFullscreen"
-        ></chart>
+            :showAllData="showAllData"
+          ></chart>
+        </div>
         <alertMessageInfoTab
           class="alert-message-info-tab"
+          :time="time"
           :noData="tabNoData"
           :infoData="infoData" />
       </div>

nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue

@@ -5,6 +5,9 @@
         <div v-if="item.key === 'detail' && activeName === 'detail'">
           <alert-message-info-detail :info-data="infoData"/>
         </div>
+        <div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">
+          <dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" :from="fromRoute.dashboard"></dashboard>
+        </div>
         <div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
 <!--          <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
           <alertLabel
@@ -42,6 +45,8 @@ import alertMessageInfoDetail from '@/components/common/alert/alertMessageInfoDe
 import searchItemInfo from '@/components/common/globalSearch/searchItemInfo'
 import alertLabel from '@/components/common/alert/alertLabel3'
 import alertRuleInfo from '@/components/common/alert/alertRuleInfo2'
+import dashboard from '@/components/page/integration/integration-tabs/dashboard'
+import { fromRoute } from '@/components/common/js/constants'
 // import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'alertMessageInfoTab',
@@ -49,7 +54,8 @@ export default {
     alertMessageInfoDetail,
     searchItemInfo,
     alertLabel,
-    alertRuleInfo
+    alertRuleInfo,
+    dashboard
   },
   // mixins: [alertLabelMixin],
   props: {
@@ -59,7 +65,8 @@ export default {
     nodata: {
       type: Boolean,
       default: false
-    }
+    },
+    time: {}
   },
   computed: {
     severityData () {
@@ -68,6 +75,7 @@ export default {
   },
   data () {
     return {
+      fromRoute,
       activeName: 'detail',
       cardNames: [{
         key: 'detail',
@@ -91,7 +99,8 @@ export default {
       }, {
         key: 'project',
         label: this.$t('project.project.projectName')
-      }]
+      }],
+      timeRange: []
     }
   },
   watch: {
@@ -108,6 +117,14 @@ export default {
               this.cardNames.push(item)
             }
           })
+          // && n.alertRule.dashboardId
+          if (n.alertRule) {
+            n.alertRule.dashboardId = 1487
+            this.cardNames.push({
+              key: 'dashboard',
+              label: this.$t('dashboard')
+            })
+          }
           if (n.alertRule && n.alertRule.trbShot && n.alertRule.trbShot != '<div  class="editor-core ql-container ql-snow"><div class="ql-editor"><p><br></p></div></div>') {
             this.cardNames.push({
               key: 'trbShot',
@@ -116,6 +133,14 @@ export default {
           }
         }
       }
+    },
+    time: {
+      immediate: true,
+      handler (n) {
+        if (n && n.length) {
+          this.timeRange = [n[0] * 1000, n[1] * 1000]
+        }
+      }
     }
   },
   mounted () {

nezha-fronted/src/components/common/searchBox/searchBox.vue

@@ -387,7 +387,6 @@ export default {
       this.keyShow = false // key 的下拉
       this.symbolShow = false // symbol 的下拉
       this.valueShow = false // value 的下拉
-      console.log(key)
       if (key === 'symbol') {
         this.setSymBolList()
         this.symbolShow = true
@@ -562,7 +561,6 @@ export default {
     },
     searchStr: {
       handler (n, o) {
-        console.log(n, o)
         // 2 3
         const index = this.searchStr.indexOf(':')
         if (index === -1) {

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

@@ -1,9 +1,9 @@
 <template>
   <div class="integration-dashboard">
     <div class="integration-tool" style="padding: 0 10px;">
-      <h3>{{showPanel.name}}</h3>
+      <h3 v-if="showName">{{showPanel.name}}</h3>
 
-      <button class="nz-btn el-button--small nz-btn-style-normal" @click="importFn">
+      <button class="nz-btn el-button--small nz-btn-style-normal" @click="importFn" v-if="showImport">
         <i class="nz-icon nz-icon-upload"></i>
         <span>{{$t('overall.importExcel')}}</span>
       </button>
@@ -18,13 +18,15 @@
             <chart-list
               ref="chartList"
               :variablesInit="variablesInit"
+              :timeRange="time"
               name="dashboard"
               :dashboardId="showPanel.id"
               :data-list="dataList"
               :is-export-html="false"
               :nowTimeType="nowTimeType"
-              :from="fromRoute.integration"
+              :from="from"
               :time-range="searchTime"
+              :show-tool="false"
               :loading="chartListLoading"
             ></chart-list>
           </div>
@@ -51,7 +53,24 @@ import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'integration-dashboard',
   props: {
-    tempId: Number
+    tempId: Number,
+    showImport: {
+      type: Boolean,
+      default: true
+    },
+    showName: {
+      type: Boolean,
+      default: true
+    },
+    urlType: {
+      type: String,
+      default: 'template'
+    },
+    time: {},
+    from: {
+      type: String,
+      default: fromRoute.integration
+    }
   },
   computed: {
     chartRightBoxShow () {
@@ -145,7 +164,7 @@ export default {
     },
     // 公用操作
     getTableData () {
-      this.$get('visual/dashboard', { type: 'template', ids: this.tempId }).then(response => {
+      this.$get('visual/dashboard', { type: this.urlType, ids: this.tempId }).then(response => {
         if (response.code === 200) {
           this.panelData = response.data.list
           if (this.panelData.length > 0) {
@@ -174,9 +193,22 @@ export default {
   mounted () {
     this.scrollbarWrap = this.$refs.dashboardScrollbar
     this.onScroll()
-    this.getTableData()
+    // this.getTableData()
   },
   watch: {
+    urlType: { // 判断请求的是temp 还是正常访问
+      immediate: true,
+      handler () {}
+    },
+    time: { // 时间范围
+      immediate: true,
+      handler () {
+        if (this.time) {
+          this.getTableData()
+          this.searchTime = this.time
+        }
+      }
+    },
     // 监听图表联动配置
     'showPanel.param.chartShare': {
       handler (value) {

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

@@ -9,7 +9,7 @@
       <manual v-if="tabId==='manual'"></manual>
       <!-- module -->
       <configuration v-if="tabId==='configuration'" :configuration="detailsObj.configuration"></configuration>
-      <dashboard v-if="tabId==='dashboard'" :tempId="detailsObj.tempId"></dashboard>
+      <dashboard v-if="tabId==='dashboard'" :tempId="detailsObj.tempId" :time="time"></dashboard>
 <!--      <alert v-if="tabId==='alert'" :moduleId="detailsObj.id"></alert>-->
       <metric v-if="tabId==='metric'" :moduleId="detailsObj.id"></metric>
     </div>
@@ -45,7 +45,8 @@ export default {
   data () {
     return {
       tabs: [],
-      tabId: ''
+      tabId: '',
+      time: [0, 15]
     }
   },
   methods: {

nezha-fronted/src/components/page/monitor/project/projectList.vue

@@ -134,7 +134,6 @@ export default {
   },
   methods: {
     getTableData (params) {
-      console.log('213123123')
       if (params && Object.keys(params).length > 0) {
         for (const key in params) {
           this.$set(this.searchLabel, key, params[key])
@@ -197,9 +196,7 @@ export default {
       })
     },
     delCallBack (id) {
-      console.log(id, 'id')
       if (id.indexOf(this.$store.state.currentProject.id) !== -1) {
-        console.log(123, id)
         this.$store.commit('currentProjectChange', {
           id: '',
           name: '',