feat：显示顶部详情

nezha-fronted/src/components/common/detailView/nzDetailView.vue

@@ -14,11 +14,10 @@
             <el-dropdown
               type="primary"
               v-if="showLayout.indexOf('detailViewSet') > -1"
-              class="margin-l-5"
               @command="changeDetailType">
               <button class="top-tool-btn table-column-setting"
                       type="button">
-                <i class="nz-icon nz-icon-alert-list" />
+                <i class="nz-icon nz-icon-guzhangshuju" />
               </button>
               <el-dropdown-menu slot="dropdown" >
                 <el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">列表</el-dropdown-item>

nezha-fronted/src/components/common/detailView/view/detailRightTop/detailRightTop.vue

@@ -0,0 +1,83 @@
+<template>
+  <div style="height: 100%">
+    <div v-if="from === fromRoute.asset" class="detail-title-box">
+      <div>
+        <span class="detail-title-key">Data center :</span> <span class="detail-title-value">{{obj.dc.name}}</span>
+      </div>
+      <div>
+        <span class="detail-title-key">Cabinet :</span> <span class="detail-title-value">{{obj.cabinet.name}}</span>
+      </div>
+      <div>
+        <span class="detail-title-key">Alert :</span> <span class="detail-title-value"><i :class="obj.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i> {{obj.alertNum}}</span>
+      </div>
+      <div>
+        <span class="detail-title-key">Endpoint :</span> <span class="detail-title-value"><i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> {{obj.endpointNum}}</span>
+      </div>
+      <div>
+        <span class="detail-title-key">Brand :</span> <span class="detail-title-value">{{obj.brand.name}}</span>
+      </div>
+      <div>
+        <span class="detail-title-key">Brand :</span> <span class="detail-title-value">{{obj.model.name}}</span>
+      </div>
+      <div>
+        <span class="detail-title-key">SN :</span> <span class="detail-title-value">{{obj.sn}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fromRoute } from '@/components/common/js/constants'
+export default {
+  name: 'detailRightTop',
+  props: {
+    obj: Object, // 关联的实体对象
+    from: String // 来自哪个页面
+  },
+  data () {
+    return {
+      fromRoute: fromRoute
+    }
+  },
+  watch: {
+    from: {
+      immediate: true,
+      handler (n) {
+        console.log(n === fromRoute.asset)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.detail-title-box{
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  justify-content:  flex-start;
+  align-items: center;
+  height: 100%;
+  padding-left: 15px;
+  & > div{
+    height: 100%;
+    line-height: 60px;
+    margin-right: 40px;
+  }
+  .detail-title-key{
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    line-height: 20px;
+    font-weight: 400;
+  }
+  .detail-title-value{
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+    line-height: 20px;
+    font-weight: 400;
+    margin-left: 10px;
+  }
+}
+</style>

nezha-fronted/src/components/common/detailView/view/detailViewRight.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="sub-box">
-      <div style="height: 60px;background: #FFFFFF;border: 1px solid #E7EAED;margin-bottom: 10px">
+      <div class="detail-view-right-top">
-
+        <detail-right-top :obj="obj" :from="from"></detail-right-top>
       </div>
       <div class="sub-list__tabs">
       <!--机柜-->
@@ -64,6 +64,7 @@ import terminalLogTab from '@/components/common/bottomBox/tabs/terminalLogTab'
 import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
+import detailRightTop from './detailRightTop/detailRightTop'
 
 export default {
   name: 'detailViewRight',
@@ -82,7 +83,8 @@ export default {
     endpointQuery,
     panelTabNew,
     assetTab,
-    assetSubTab
+    assetSubTab,
+    'detail-right-top': detailRightTop
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -283,6 +285,12 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+  .detail-view-right-top{
+    height: 60px;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    margin-bottom: 10px
+  }
   .sub-box{
     height: 100%;
     flex-direction: column;