Merge branch 'master-ajreport-lushangqing' into 'master'

详情表格组件下探弹框样式修改



See merge request !8

 <template>
-  <div :style="styleObj"  @click="closePressingDialog">
+  <div :style="styleObj"  @click="closePressingDialog" ref="detailTable">
     <div class="detail-table-title title-flex-between">
       <div class="title-left">{{tableStyle.tableName}}</div>
       <div class="title-right">
@@ -27,7 +27,8 @@
               :key="idx"
               :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
             >
-              <span :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">{{ item[itemChild.key].kpiValue }}</span>
+              <span @click="clickListName(item[itemChild.key])" :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">
+                {{ item[itemChild.key].kpiValue }}</span>
               <div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1">
                 <el-popover ref="popoverMenu" placement="right"  trigger="click" :auto-close="200">
                   <template #reference>
@@ -59,8 +60,8 @@
       </div>
     </superslide>
 <!--    <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>-->
-      <div class="dialog-div" v-if="tableVisible">
-        <div class="dialog-div-content">
+      <div class="dialog-div" v-if="tableVisible" :style="marginStyle">
+        <div class="dialog-div-content" >
           <div class="dialog-div-title title-flex-between">{{tableStyle.tableName}} <span class="dialog-close" @click="tableVisible = false">X</span></div>
           <superslide v-if="dialogName=='table' && hackReset" :options="options" class="txtScroll-top">
             <!--表头-->
@@ -113,6 +114,8 @@
           </div>
           <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
             性能趋势{{pressingValue}}
+            <iframe :src="trendSrc" class="layadmin-iframe"  style="height: 99.5%!important;width: 100%;"/>
+
           </div>
           <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
             压制次数{{pressingValue}}
@@ -203,12 +206,14 @@ export default {
       ],
       dialogName:'',//表格名称
       pressingValue:'',//表格下探值
+      trendSrc:'',//性能走势图地址
+      marginStyle:'',//弹框距离顶部距离
 
     };
   },
   computed: {
     styleObj() {
-      console.log(this.optionsSetUp);
+      // console.log(this.optionsSetUp);
       const allStyle = this.optionsPosition;
       return {
         position: this.ispreview ? "absolute" : "static",
@@ -275,6 +280,7 @@ export default {
       this.handlerData();
       this.visConfig();
       this.handlerDetailData();
+      window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
     },
     visConfig(){
       this.options.vis = this.optionsSetUp.vis;
@@ -290,6 +296,35 @@ export default {
       this.options = options;
       this.hackResetFun();
     },
+    // Start LSQ 2022/1/20 10:23 TODO
+    handleScroll(e){
+      let serviceTop = 44;
+
+      let hotelTop = 344;
+
+      if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {
+
+        this.selectNum = 0;
+      }
+
+      if (e.target.scrollTop > 344) {
+
+        this.selectNum = 1;
+
+      }
+      let topVal=this.$refs.detailTable.getBoundingClientRect().top;
+      let scroll=window.pageYOffset;
+      let documentHeight=document.documentElement.clientHeight;
+      console.log("123",documentHeight,scroll)
+      this.marginStyle="height:"+documentHeight+scroll+'px;'
+      this.marginStyle="margin-top:"+scroll+'px;'
+
+    },
+    setDialogMargin(){
+      let topVal=this.$refs.detailTable.getBoundingClientRect().top;
+      this.marginStyle="margin-top:"+topVal+'px;'
+      console.log("top",topVal,this.$refs.detailTable.scrollTop)
+    },
     handleHeadContent(headTable,flg){
       let data = headTable.data[0];
       let head = data.header;
@@ -327,67 +362,30 @@ export default {
       }
 
     },
-    // Start LSQ 2022/1/20 10:23 TODO
     handlerDetailData(){
       let headTable = getDetailTableData();
       this.handleHeadContent(headTable)
 
     },
+    //打开更多表格
     handlerDetailDataNoPage(){
       let headTable =getDetailTableDataNoPage();
       this.handleHeadContent(headTable,'all')
       this.setDialog('table');
     },
+    //打开弹框
     setDialog(name){
       this.tableVisible=true;
       this.dialogName=name;
     },
-   /* handlerDetailData(){
-      let headTable=getDetailTableData();
-      let data = headTable.data[0];
-      let head = data.header;
-      let content = data.content;
-      let colArr=[];
-      let fisttd = "";
-      let contentArr=[];
-
-      $.each(head, function (i, v) {
-        fisttd=v.id;
-        let columnObj={
-          name:v.name,key:v.id,width:'50%',unit:v.unit
-        }
-        colArr.push(columnObj)
-        let obj={}
-        let arr=[]
-console.log("AA1")
-        $.each(content,function(ci,cv){
-console.log("a11")
-          $.each(cv,function (cci,ccv){
-            if(ccv.kpiId==v.id){
-              console.log("b22")
-              columnObj.isWarning=ccv.isWarning;
-              columnObj.kpiIdent=ccv.kpiIdent;
-              // contentArr[fisttd]=ccv.isWarning;
-              obj[fisttd]=ccv.kpiValue
-
-            }
-          })
-          console.log('obj',obj)
-
-          arr.push(obj)
-
-
-
-        })
-        console.log('arr',arr)
-// debugger
-        contentArr.push(obj)
-      })
-
-      console.log('111',colArr)
-      console.log('222',contentArr)
-
-    },*/
+    //点击表格内容名称事件
+    clickListName(obj){
+      console.log("obj",obj)
+      let trendsParams=obj;
+      // this.trendSrc='http://127.0.0.1:8088/vue3/index.html#/vue3/pieDetailLine?resId=08586dba3a5b4a01ad88e8878eed6d53&kpiId=KPI7054BC34&flag=cpu&ident=1&trend=1&name=CPU%E4%BD%BF%E7%94%A8%E7%8E%87x&access_token=6e14ca48-4d05-42cf-b232-97981035824f'
+      this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';
+      this.setDialog('performance_trends')
+    },
     //End LSQ 2022/1/20 10:23 TODO
     handlerHead() {
       const head = this.optionsSetUp.dynamicAddTable;
@@ -465,12 +463,10 @@ console.log("a11")
           item.showPopper=false
         })
       }
-      console.log("&&&",)
       // this.$refs.popoverMenu.showPopper = false;
 
     },
     pressingTimes(index,idx){
-      console.log("albc",index,idx)
       this.pressingVisible=index+'-'+idx;
     },
     closePressingDialog(){
@@ -604,6 +600,7 @@ console.log("a11")
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 1;
 }
 .dialog-div-content{
  /* display: flex;
@@ -621,6 +618,16 @@ console.log("a11")
     width:100%;
     padding: 10px;
     margin-bottom:50px;
+    min-height: 500px;
+    max-height: 700px;
+    overflow: auto;
+    iframe{
+      border:none;
+      min-height: 600px;
+      html{
+        background: #FFFFFF;
+      }
+    }
   }
   .dialog-div-title{
     width: 100%;