feat：dc添加详细视图优化module 以及 alertRule的显示

2021-10-21 10:04:01 +08:00
parent 1e75f7bc70
commit 1e017d3060
6 changed files with 393 additions and 8 deletions
--- a/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
@@ -8,7 +8,7 @@
      :layout="['searchInput', 'elementSet']"
      :search-msg="searchMsg"
      :tabs="tabs"
-      :show-title="showTtile"
+      :show-title="showTitle"
      @search="search"
      @changeTab="changeTab"
    >
@@ -85,6 +85,9 @@ export default {
    cabinetTable,
    topToolMoreOptions
  },
+  props: {
+    showTitle: {}
+  },
  data () {
    return {
      url: 'dc/cabinet',
--- a/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue
@@ -23,7 +23,15 @@
        class="detail-row"
        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
        @click="detailViewRightShow(item)">
-        <div class="detail-row-info">
+        <el-popover
+          placement="right"
+          popper-class="alert-message-tooltip"
+          style="position: relative"
+          @show="alertMessageHover(item, true)"
+          @hide="alertMessageHover(item, false)"
+          trigger="hover">
+          <alertRuleInfo v-if="item.loading" :id="item.id" :severity-data="severityData" :that="item" @showText="showText(item)"></alertRuleInfo>
+          <div class="detail-row-info" slot="reference">
          <div class="asset-manageIp">
            <i class="nz-icon nz-icon-overview-alert" :class="item.alertNum>0?'colorEF7458':'color23BF9A'"/>
            {{item.name}}
@@ -37,8 +45,23 @@
            </span>
          </div>
        </div>
+        </el-popover>
      </li>
    </ul>
+    <el-dialog class="nz-dialog table-chart-dialog" :title="$t('alert.config.trbShot')"
+               :visible.sync="dialogShowText"
+               width="96%"  @close="dialogShowText = false" :modal-append-to-body="false">
+      <div slot="title">
+        <span class="nz-dialog-title">{{$t('alert.config.trbShot')}}</span>
+      </div>
+      <div class="rich-text-screen-container"  >
+        <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
+          <el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
+            <div style="height: 100%;" v-html="dialogText" ></div>
+          </el-scrollbar>
+        </div>
+      </div>
+    </el-dialog>
  </div>
 </template>

@@ -46,11 +69,13 @@

 import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
 import alertLabel from '@/components/common/alert/alertLabel'
+import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
 export default {
  name: 'alertRuleDetail',
  mixins: [detailViewLeftMixin],
  components: {
-    alertLabel
+    alertLabel,
+    alertRuleInfo
  },
  data () {
    return {
@@ -133,9 +158,15 @@ export default {
          minWidth: 100,
          sortable: 'custom'
        }
-      ]
+      ],
+      severityData: [],
+      dialogText: '',
+      dialogShowText: false
    }
  },
+  mounted () {
+    this.getSeverityData()
+  },
  methods: {
    // label 鼠标划入
    labelHover (item, type, loading, e) {
@@ -170,6 +201,28 @@ export default {
        // }
      })
      return str
+    },
+    getSeverityData () {
+      this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
+        if (response.code == 200) {
+          this.severityData = response.data.list
+        }
+      })
+    },
+    // alertName鼠标划入
+    alertMessageHover (item, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // item.loading = true;
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    showText (row) {
+      this.dialogShowText = true
+      this.dialogText = row.trbShot
    }
  }
 }
--- a/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="detail-left-box">
+    <div class="order-box">
+      <el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
+        <el-option
+          v-for="item in tableTitle"
+          v-if="item.sortable==='custom'"
+          :key="item.prop"
+          :label="$t('asset.detail.orderByLabel',{label:item.label})"
+          :value="item.prop">
+          {{item.label}}
+        </el-option>
+      </el-select>
+      <button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
+        <i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
+        <i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
+      </button>
+    </div>
+    <ul class="detail-row-box" ref="dataTable">
+      <li
+        v-for="(item,index) in tableData"
+        :key="index"
+        class="detail-row"
+        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
+        @click="detailViewRightShow(item)"
+        @mouseenter="labelHover(item, 'dc', true, $event)"
+        @mouseleave="labelHover(item, 'dc', false)">
+        <div class="detail-row-info">
+          <div class="asset-manageIp">
+            <i class="nz-icon nz-icon-overview-alert" :class="item.alertNum>0?'colorEF7458':'color23BF9A'"/>
+            {{item.name}}
+          </div>
+          <div class="asset-name">
+            <span>{{item.location?item.location:'-'}}</span>
+          </div>
+        </div>
+        <alertLabel
+          v-if="item && item.loading"
+          :id="item.id"
+          :that="item"
+          :type="'dc'"
+        ></alertLabel>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+
+import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
+import alertLabel from '@/components/common/alert/alertLabel'
+export default {
+  name: 'dcDetail',
+  mixins: [detailViewLeftMixin],
+  components: {
+    alertLabel
+  },
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('project.module.moduleName'),
+          prop: 'name',
+          show: true,
+          minWidth: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('project.project.projectName'),
+          prop: 'project',
+          show: true,
+          width: 200,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('project.endpoint.endpoint'),
+          prop: 'endpointNum',
+          show: true,
+          width: 200,
+          sortable: 'custom'
+        }, {
+          label: this.$t('project.module.alerts'),
+          prop: 'alertNum',
+          show: true,
+          width: 200,
+          sortable: 'custom'
+        },
+        {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true,
+          minWidth: 150
+        }
+      ]
+    }
+  },
+  methods: {
+    // label 鼠标划入
+    labelHover (item, type, loading, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.$set(item, 'position', position)
+      }
+      this.$set(item, 'loading', loading)
+      // this.$set(this.tableData,index,item);// 调用父组件
+    },
+    suspendedStr (status) { // 10进制转为2进制 分别给对应的状态
+      if (!status || status === 1 || status == 0) { return '' }
+      const arr = status.toString(2).split('')
+      while (arr.length < 4) {
+        arr.unshift('0')
+      }
+      arr.pop()
+      let str = ''
+      arr.forEach((item, index) => {
+        if (index === 0) {
+          str += `<div><div class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></div> DC</div>`
+        }
+        if (index === 1) {
+          str += `<div><div class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></div> ASSET</div>`
+        }
+        if (index === 2) {
+          str += `<div><div class="active-icon inline-block ${item == '0' ? 'gray-bg' : 'green-bg'}"></div> ENDPOINT</div>`
+        }
+        // if (index === 3) {
+        //   str += `<div>PROMETHEUS <div class="active-icon inline-block ${item == '0' ? 'red-bg' : 'green-bg'}"></div></div>`
+        // }
+      })
+      return str
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .order-box{
+    display: flex;
+    height:40px;
+    padding: 0 15px;
+    line-height: 40px;
+    align-items: center;
+    /*.detail-select{*/
+    /*  height: 30px;*/
+    /*  line-height: 30px;*/
+    /*  flex: 1;*/
+    /*  /deep/ .el-input--small{*/
+    /*    height: 30px;*/
+    /*    line-height: 30px;*/
+    /*    background-color: rgba(9,30,66,0.08);*/
+    /*    border: none;*/
+    /*    color: #344563;*/
+    /*    input{*/
+    /*      height: 30px;*/
+    /*      line-height: 30px;*/
+    /*      background-color: rgba(9,30,66,0.08);*/
+    /*      border: none;*/
+    /*      color: #344563;*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-select:hover{*/
+    /*  /deep/ .el-input--small{*/
+    /*    input{*/
+    /*      background-color: rgba(9,30,66,0.13);*/
+    /*    }*/
+    /*  }*/
+    /*}*/
+    /*.detail-button{*/
+    /*  height: 28px;*/
+    /*  line-height: 28px;*/
+    /*  background-color: rgba(9,30,66,0.08);*/
+    /*  border: none;*/
+    /*  .nz-icon{*/
+    /*    color: #344563;*/
+    /*  }*/
+    /*}*/
+    /*.detail-button:hover{*/
+    /*  background-color: rgba(9,30,66,0.13);*/
+    /*}*/
+  }
+  .detail-row-box{
+    height: calc(100% - 40px);
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .detail-row{
+    width: 245px;
+    padding: 0px 0 0px 15px;
+    height: 60px;
+    border-bottom: 1px solid #E7EAED;
+    cursor: pointer;
+  }
+  .detail-row:last-of-type{
+    border-bottom: none
+  }
+  .detail-row-info{
+    display: flex;
+    height: 100%;
+    width: calc(100% - 15px);
+    justify-content:center;
+    flex-direction: column;
+    > div{
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  .asset-manageIp{
+    font-size: 16px;
+    color: #333333;
+    font-weight: 400;
+  }
+    .asset-name {
+      padding-left: 22px;
+      width: calc(100% - 22px);
+      font-size: 14px;
+      color: #999999;
+      font-weight: 400;
+    }
+  }
+  .selected{
+    background: #FFFBF6;
+  }
+  .colorEF7458{
+    color: #EF7458;
+  }
+  .color23BF9A{
+    color: #23BF9A;
+  }
+  .colorFA901C{
+    color: #fa901c;
+  }
+</style>
--- a/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
+++ b/nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue
@@ -22,7 +22,9 @@
        :key="index"
        class="detail-row"
        :class="item.id === detailViewRightObj.id ? 'selected' : ''"
-        @click="detailViewRightShow(item)">
+        @click="detailViewRightShow(item)"
+        @mouseenter="labelHover(item, 'module', true, $event)"
+        @mouseleave="labelHover(item, 'module', false)">
        <div class="detail-row-info">
          <div class="asset-manageIp">
            <i class="nz-icon nz-icon-overview-alert" :class="item.alertNum>0?'colorEF7458':'color23BF9A'"/>
@@ -32,6 +34,12 @@
            <span>{{item.project?item.project.name:'-'}}</span>
          </div>
        </div>
+        <alertLabel
+          v-if="item && item.loading"
+          :id="item.id"
+          :that="item"
+          :type="'module'"
+        ></alertLabel>
      </li>
    </ul>
  </div>
--- a/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
+++ b/nezha-fronted/src/components/common/detailView/view/detailViewRight.vue
@@ -297,6 +297,8 @@ export default {
        this.targetTab = 'endpoint'
      } else if (this.from === fromRoute.alertRule) {
        this.targetTab = 'alertRuleAlertMessage'
+      } else if (this.from === fromRoute.dc) {
+        this.targetTab = 'cabinet'
      }
    }
  }
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -1,13 +1,85 @@
 <template>
  <div>
+    <nzDetailView
+      v-loading="detailViewLoading || tools.loading"
+      v-if="detailType !== 'list'"
+      :api="url"
+      ref="detailList"
+      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
+      :from="fromRoute.dc"
+      :search-msg="searchMsg"
+      :detailType="detailType"
+      :detailViewRightObj="detailViewRightObj"
+      :dataLength="tableData.length"
+      @search="search"
+      @changeDetailType="changeDetailType"
+    >
+      <template v-slot:top-tool-left>
+        <!--        <detailViewTopSearch :selectValue.sync="selectValue" :detailSearchList="detailSearchList" @reload="reloadTable" />-->
+      </template>
+      <template v-slot:top-tool-right>
+        <button id="asset-create-asset" v-has="'asset_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="add">
+          <i class="nz-icon nz-icon-create-square"></i>
+        </button>
+        <top-tool-more-options
+          ref="export"
+          id="model"
+          :params="searchLabel"
+          :params2="searchCheckBox"
+          :permissions="{
+                  import: 'asset_add',
+                  export: 'asset_view'
+                }"
+          class="top-tool-export margin-l-10 margin-r-10"
+          export-file-name="asset"
+          export-url="/asset/asset/export"
+          import-url="/asset/asset/import"
+          @afterImport="getTableData"
+        >
+        </top-tool-more-options>
+      </template>
+      <template v-slot:nz-detail-view-list>
+        <dc-detail
+          class="data-detail"
+          ref="dataDetail"
+          :orderByFa="orderBy"
+          v-loading="tools.loading"
+          :detailViewRightObj="detailViewRightObj"
+          :api="url"
+          :table-data="tableData"
+          @detailViewRightShow = 'detailViewRightShow'
+          @orderDetail="orderDetail"
+        >
+        </dc-detail>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <el-pagination
+          @current-change="pageNo"
+          :current-page.sync="pageObj.pageNo"
+          :page-size="20"
+          :total="pageObj.total"
+          layout="prev, slot, next"
+          small
+        >
+          <template>
+            <el-input-number ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
+            <span class="jump-pages">/&nbsp{{pageObj.pages}}</span>
+          </template>
+        </el-pagination>
+      </template>
+    </nzDetailView>
    <nz-data-list
      ref="dataList"
      :api="url"
-      :layout="['searchInput', 'elementSet', 'pagination']"
+      :layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
      :custom-table-title.sync="tools.customTableTitle"
      :from="fromRoute.dc"
      :search-msg="searchMsg"
      @search="search"
+      :detailType="detailType"
+      @changeDetailType="changeDetailType"
+      @getTableData="getTableData"
    >
      <template v-slot:top-tool-right>
        <button id="dc-add" v-has="'dc_add'" :title="$t('overall.createDatacenter')" class="top-tool-btn margin-r-10"
@@ -76,6 +148,11 @@ import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import dcTable from '@/components/common/table/settings/dcTable'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import nzDetailView from '@/components/common/detailView/nzDetailView'
+import detailViewMixin from '@/components/common/mixin/detailViewMixin'
+import dcDetail from '@/components/common/detailView/list/dc/dcDetail'
+import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'
+
 export default {
  name: 'dc',
  components: {
@@ -85,9 +162,12 @@ export default {
    nzDataList,
    dcTable,
    cabinetBox,
-    topToolMoreOptions
+    topToolMoreOptions,
+    nzDetailView,
+    dcDetail,
+    detailViewTopSearch
  },
-  mixins: [dataListMixin],
+  mixins: [dataListMixin,detailViewMixin],
  data () {
    return {
      url: 'dc',