详细表格组件修改

@@ -201,10 +201,12 @@ export const monitorDetailTable = {
         required: false,
         required: false,
         placeholder: '',
         placeholder: '',
         value: [
         value: [
-          {name: '日期', key: 'date', width: '50%'},
-          {name: '姓名', key: 'name', width: '50%'},
-          {name: '地址', key: 'address', width: '200%',
-          }]
+          {name: '文件系统挂载', key: 'fileAddress', width: '50%',kpiIdent:0,isWarning:0},
+          {name: '文件系统使用率', key: 'fileUseRate', width: '50%',isWarning:1,kpiIdent:0},
+          {name: '文件系统总大小', key: 'fileSize', width: '50%',kpiIdent:1,isWarning:0},
+          {name: '文件系统已使用大小', key: 'fileSizeUsed', width: '50%',kpiIdent:1,isWarning:0},
+          {name: '卷名称', key: 'fileAddressName', width: '50%',kpiIdent:0,isWarning:0},
+        ]
       }
       }
     ],
     ],
     data: [
     data: [
@@ -244,13 +246,12 @@ export const monitorDetailTable = {
         relactiveDom: 'dataType',
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
         relactiveDomValue: 'staticData',
         value: [
         value: [
-          {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0001'},
-          {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0002'},
-          {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0003'},
-          {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0004'},
-          {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0005'},
-          {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0006'},
-          {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄0007'},
+          {fileAddress: '/', fileUseRate: '99%', fileSize: '196.74',fileSizeUsed:'184',fileAddressName:'/dev/vda1'},
+          {fileAddress: '/dev', fileUseRate: '0%', fileSize: '15.74',fileSizeUsed:'0.00',fileAddressName:'devtmpfs'},
+          {fileAddress: '/run', fileUseRate: '1%', fileSize: '15.32',fileSizeUsed:'0.14',fileAddressName:'tmpfs'},
+          {fileAddress: '/run/user/0', fileUseRate: '0%', fileSize: '3.74',fileSizeUsed:'10',fileAddressName:'tmpfs'},
+          {fileAddress: '/run/user/0001', fileUseRate: '2', fileSize: '3.69',fileSizeUsed:'1.23',fileAddressName:'tmpfs'},
+
         ],
         ],
       },
       },
       {
       {

 <template>
 <template>
-  <div :style="styleObj">
+  <div :style="styleObj"  @click="closePressingDialog">
     <superslide v-if="hackReset" :options="options" class="txtScroll-top">
     <superslide v-if="hackReset" :options="options" class="txtScroll-top">
       <!--表头-->
       <!--表头-->
       <div class="title">
       <div class="title">
@@ -20,14 +20,30 @@
               :key="idx"
               :key="idx"
               :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
               :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
             >
             >
-              {{ item[itemChild.key] }}
-              <div class="basic-img">
-                <img src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes">
-                <div class="info-ul" v-if="pressingVisible">
-                  <div class="basic-pressing-times" @click="pressingDialog" v-for="i in 4">
-                    <i class="el-icon-link"></i>压制次数
+              <span :class="['listName',{'listName-link':itemChild.kpiIdent==1 || itemChild.isWarning==1}]">{{ item[itemChild.key] }}</span>
+              <div class="basic-img" v-if="itemChild.kpiIdent==1 || itemChild.isWarning==1">
+                <el-popover ref="popoverMenu" placement="right"  trigger="click" :auto-close="200">
+                  <template #reference>
+                    <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
+                  </template>
+                  <!--                    <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->
+                  <div class="info-ul" style="width:140px;" >
+                    <div class="basic-pressing-times" @click="pressingDialog(index,idx)" v-for="item in detailMenubox">
+                      <i class="el-icon-link icon-div"></i>{{item.name}}
+                    </div>
                   </div>
                   </div>
-                </div>
+                </el-popover>
+<!--                <el-tooltip placement="top" effect="dark" >
+                  <template #content>
+                    <div class="info-ul" style="width:140px;" >
+                      <div class="basic-pressing-times" @click="pressingDialog" v-for="item in detailMenubox">
+                        <i class="el-icon-link icon-div"></i>{{item.name}}
+                      </div>
+                    </div>
+                  </template>
+                  <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
+                </el-tooltip>-->
+
 
 
               </div>
               </div>
             </div>
             </div>
@@ -49,6 +65,7 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
+      popoverVisible:false,
       hackReset: true,
       hackReset: true,
       options: {
       options: {
         titCell: ".hd ul",
         titCell: ".hd ul",
@@ -65,8 +82,34 @@ export default {
       optionsSetUp: {},
       optionsSetUp: {},
       optionsPosition: {},
       optionsPosition: {},
       optionsData: {},
       optionsData: {},
-      pressingVisible:false,
+      pressingVisible:'',
       isHover:false,
       isHover:false,
+      detailMenubox:[
+        {
+          name:'告警设置',
+          type:'alarm_setting'
+        },
+        {
+          name:'过滤单指标',
+          type:'filter_sheet_indicator'
+        },
+        {
+          name:'过滤多指标',
+          type:'filter_multiple_indicators'
+        },
+        {
+          name:'性能趋势',
+          type:'performance_trends'
+        },
+        {
+          name:'压制次数',
+          type:'pressing_times'
+        },
+        {
+          name:'纳入容量预测',
+          type:'include_capacity_forecast'
+        }
+      ]
     };
     };
   },
   },
   computed: {
   computed: {
@@ -213,11 +256,24 @@ export default {
       return styleJson
       return styleJson
     },
     },
     //表格下探
     //表格下探
-    pressingDialog(){
+    pressingDialog(index,idx){
+      let key=this.$refs.popoverMenu;
+      if(key && key.length>0){
+        key.map(item=>{
+          item.showPopper=false
+        })
+      }
+      console.log("&&&",)
+      // this.$refs.popoverMenu.showPopper = false;
+
     },
     },
-    pressingTimes(){
-      this.pressingVisible=true;
+    pressingTimes(index,idx){
+      console.log("albc",index,idx)
+      this.pressingVisible=index+'-'+idx;
     },
     },
+    closePressingDialog(){
+      this.pressingVisible=false;
+    }
   }
   }
 };
 };
 </script>
 </script>
@@ -266,28 +322,62 @@ export default {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
+  &:hover{
+    .basic-img{
+      display:flex ;
+    }
+  }
 }
 }
 .basic-img{
 .basic-img{
-  width: 16px;
-  height: 16px;
-  display: flex;
+  /*display: flex;*/
+  display: none;
   cursor: pointer;
   cursor: pointer;
-  img{
-    width:100%;
+  .info-img{
+    width: 16px;
+    height: 16px;
+
+    img{
+      width:100%;
+    }
   }
   }
+
 }
 }
 .info-ul{
 .info-ul{
-  position: absolute;
+  /*position: absolute;*/
   border:1px solid #d2d2d2;
   border:1px solid #d2d2d2;
-  padding: 16px 20px;
-  z-index: 1;
+  /*padding: 16px 20px;*/
+  padding-bottom: 5px;
+  z-index: 999999;
   background: #ffffff;
   background: #ffffff;
   color:#666666;
   color:#666666;
   .basic-pressing-times{
   .basic-pressing-times{
+    line-height: 35px;
+    height: 35px;
+    cursor: pointer;
+    border-bottom: 1px solid #d2d2d2;
+    padding: 5px 16px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    &:last-child{
+      border-bottom: none;
+    }
     &:hover{
     &:hover{
       background: #0d82e9;
       background: #0d82e9;
       color:#f6f6f6;
       color:#f6f6f6;
     }
     }
+    .icon-div{
+      width: 14px;
+    }
   }
   }
+
+}
+.listName-link{
+  cursor: pointer;
+  color:#0d82e9;
+  text-decoration: underline;
 }
 }
 </style>
 </style>