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

详情表格组件更多弹框中的表格配置数值范围



See merge request !9

@@ -116,7 +116,7 @@ export const monitorDetailTable = {
         name: 'isLine',
         required: false,
         placeholder: '',
-        value: false
+        value: true
       },
       {
         type: 'el-input-number',
@@ -132,10 +132,80 @@ export const monitorDetailTable = {
         name: 'borderColor',
         required: false,
         placeholder: '',
-        value: '#fff'
+        value: '#e6e6e6'
       },
       [
         {
+          name: '状态范围设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '一般状态',
+              name: 'ybNum',
+              required: false,
+              placeholder: '',
+              min:0,
+              max:100,
+              value: 80
+            },
+            {
+              type: 'el-input-number',
+              label: '重要状态',
+              name: 'zyNum',
+              required: false,
+              placeholder: '',
+              min:0,
+              max:100,
+              value: 85
+            },
+            {
+              type: 'el-input-number',
+              label: '严重状态',
+              name: 'yzNum',
+              required: false,
+              placeholder: '',
+              min:0,
+              max:100,
+              value: 95
+            },
+            {
+              type: 'vue-color',
+              label: '正常颜色',
+              name: 'zcColor',
+              require: false,
+              placeholder: '',
+              value: '#0d82e9',
+            },
+            {
+              type: 'vue-color',
+              label: '一般颜色',
+              name: 'ybColor',
+              require: false,
+              placeholder: '',
+              value: '#7BE00D',
+            },
+            {
+              type: 'vue-color',
+              label: '重要颜色',
+              name: 'zyColor',
+              require: false,
+              placeholder: '',
+              value: '#F5A623',
+            },
+            {
+              type: 'vue-color',
+              label: '严重颜色',
+              name: 'yzColor',
+              require: false,
+              placeholder: '',
+              value: '#D81E06',
+            },
+
+          ],
+        }
+      ],
+      [
+        {
           name: '表头设置',
           list: [
             {
@@ -298,7 +368,7 @@ export const monitorDetailTable = {
         name: 'width',
         required: false,
         placeholder: '该容器在1920px大屏中的宽度',
-        value: 600,
+        value: 1000,
       },
       {
         type: 'el-input-number',
@@ -306,7 +376,7 @@ export const monitorDetailTable = {
         name: 'height',
         required: false,
         placeholder: '该容器在1080px大屏中的高度',
-        value: 300,
+        value: 340,
       },
     ]
   }

@@ -7,7 +7,7 @@
         <span class="title-link">下载</span>
       </div>
     </div>
-    <superslide v-if="hackReset" :options="options" class="txtScroll-top">
+    <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
       <!--表头-->
       <div class="title">
         <div
@@ -27,8 +27,9 @@
               :key="idx"
               :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
             >
-              <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>
+              <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
+                    :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>
@@ -36,23 +37,11 @@
                   </template>
                   <!--                    <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->
                   <div class="info-ul" style="width:140px;" >
-                    <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue)" v-for="itemMenu in detailMenubox">
+                    <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in detailMenubox">
                       <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
                     </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>
           </li>
@@ -60,49 +49,67 @@
       </div>
     </superslide>
 <!--    <el-dialog :visible.sync="tableVisible" :title="tableStyle.tableName" width="80%" center>-->
-      <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">
-            <!--表头-->
-            <div class="title">
-              <div
-                v-for="(item, index) in headerAll"
-                :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
-                :key="index"
-              >
-                {{ item.name }}
-              </div>
+
+<!--    <el-popover
+      ref="popoverRef"
+      v-model:visible="tableVisible"
+      placement="left"
+      trigger="click"
+      :title="tableStyle.tableName"
+      virtual-triggering
+      persistent
+    >
+
+    </el-popover>-->
+    <div class="dialog-div" v-if="tableVisible" :style="heightStyle">
+      <div class="dialog-div-content" :style="marginStyle" >
+        <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>
+        <div v-if="hackReset" class="txtScroll-top" >
+          <!--表头-->
+          <div class="title" :style="borderStyle">
+            <div
+              v-for="(item, index) in headerAll"
+              :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
+              :key="index"
+            >
+              {{ item.name }}
             </div>
-            <!--数据-->
-            <div class="bd">
-              <ul class="infoList">
-                <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
-                  <div class="infoList-flex"
-                       v-for="(itemChild, idx) in headerAll"
-                       :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>
-                    <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>
-                          <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 class="bd">
+            <ul class="infoList" :style="borderStyle">
+              <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
+                <div class="infoList-flex"
+                     v-for="(itemChild, idx) in headerAll"
+                     :key="idx"
+                     :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
+                >
+                    <span  @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" :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>
+                        <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(itemMenu,item[itemChild.key].kpiValue,'dialog')" v-for="itemMenu in detailMenubox">
+                          <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
                         </div>
-                      </el-popover>
+                      </div>
+                    </el-popover>
 
-                    </div>
                   </div>
-                </li>
-              </ul>
-            </div>
-          </superslide>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+      <div class="dialog-div" v-if="dialogVisible" :style="heightStyle">
+        <div class="dialog-div-content" :style="marginStyle+widthStyle" >
+          <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="dialogVisible = false">X</span></div>
           <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
             告警设置{{pressingValue}}
           </div>
@@ -115,7 +122,6 @@
           <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}}
@@ -123,9 +129,9 @@
           <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
             纳入容量预测{{pressingValue}}
           </div>
-          <div class="dialog-footer">
-            <el-button @click="tableVisible = false">取消</el-button>
-            <el-button type="primary" @click="tableVisible = false"
+          <div class="dialog-footer" v-if="dialogName!='table' && dialogName!='performance_trends'">
+            <el-button @click="dialogVisible = false">取消</el-button>
+            <el-button type="primary" @click="dialogVisible = false"
             >确定</el-button
             >
           </div>
@@ -159,6 +165,7 @@ export default {
       headerAll:[],
       listAll:[],
       tableVisible:false,//更多表格弹框
+      dialogVisible:false,//表格下探后的弹框
       popoverVisible:false,//下探弹框
       hackReset: true,
       options: {
@@ -208,6 +215,8 @@ export default {
       pressingValue:'',//表格下探值
       trendSrc:'',//性能走势图地址
       marginStyle:'',//弹框距离顶部距离
+      heightStyle:'',//弹框遮罩层高度
+      widthStyle:';',//弹框宽度样式
 
     };
   },
@@ -234,7 +243,9 @@ export default {
         "border-color": headStyle.borderColor,
         display: headStyle.isHeader ? "block" : "none",
         color: headStyle.headColor,
-        "background-color": headStyle.headBackColor
+        "background-color": headStyle.headBackColor,
+        "border-right":'none',
+        "border-bottom":'none'
       };
     },
     bodyTableStyle() {
@@ -246,9 +257,19 @@ export default {
         "border-width": bodyStyle.borderWidth + "px",
         "border-color": bodyStyle.borderColor,
         color: bodyStyle.bodyColor,
-        "background-color": bodyStyle.tableBgColor
+        "background-color": bodyStyle.tableBgColor,
+        "border-right":'none',
+        "border-bottom":'none',
       };
     },
+    borderStyle(){
+      const bodyStyle = this.optionsSetUp;
+      return{
+        "border-right":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none',
+        "border-bottom":bodyStyle.isLine? bodyStyle.borderWidth + "px "+"solid "+bodyStyle.borderColor:'none'
+
+      }
+    },
     tableStyle(){
       const tableStyleSetup=this.optionsSetUp;
       return{
@@ -297,6 +318,37 @@ export default {
       this.hackResetFun();
     },
     // Start LSQ 2022/1/20 10:23 TODO
+    //值区间 不同颜色 0-80 正常 80-85一般 85-95重要 95-100严重
+    colorStyle (val) {
+      let textColor='';
+      const rollSet = this.optionsSetUp;
+      let ybNum=rollSet.ybNum?rollSet.ybNum:80;
+      let zyNum=rollSet.zyNum?rollSet.zyNum:85;
+      let yzNum=rollSet.yzNum?rollSet.yzNum:95;
+      console.log("color",ybNum,rollSet.zcColor)
+      if(val){
+        let value=val.split("%")
+        if(value && value.length>1){
+          if(value[0]>0 && value[0]<ybNum){
+            // textColor='#0d82e9';
+            textColor=rollSet.zcColor?rollSet.zcColor:'#0d82e9';
+          }else if(value[0]>=ybNum&& value[0]<zyNum){
+            // textColor='#7BE00D';
+            textColor=rollSet.ybColor?rollSet.ybColor:'#7BE00D';
+          }else if(value[0]>=zyNum && value[0]<yzNum){
+            // textColor='#F5A623';
+            textColor=rollSet.zyColor?rollSet.zyColor:'#F5A623';
+          }else if(value[0]>=yzNum && value[0]<=100){
+            // textColor='#D81E06';
+            textColor=rollSet.yzColor?rollSet.yzColor:'#D81E06';
+
+          }
+        }
+      }
+      return{
+        color:textColor
+      }
+    },
     handleScroll(e){
       let serviceTop = 44;
 
@@ -312,19 +364,14 @@ export default {
         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;'
+      this.heightStyle="height:"+(documentHeight+scroll)+'px;';
+      this.marginStyle+="margin-top:"+(scroll+30)+'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;
@@ -353,6 +400,7 @@ export default {
         })
         datas.push(kpi);
       })
+      console.log("col",colArr)
       if(flg=='all'){
         this.headerAll=colArr;
         this.listAll=datas;
@@ -360,6 +408,7 @@ export default {
         this.list=datas;
         this.header=colArr;
       }
+      console.log("datas",datas)
 
     },
     handlerDetailData(){
@@ -370,12 +419,23 @@ export default {
     //打开更多表格
     handlerDetailDataNoPage(){
       let headTable =getDetailTableDataNoPage();
-      this.handleHeadContent(headTable,'all')
-      this.setDialog('table');
+      this.handleHeadContent(headTable,'all');
+      this.widthStyle='';
+      // this.setDialog('table');
+      this.tableVisible=true;
     },
     //打开弹框
-    setDialog(name){
-      this.tableVisible=true;
+    setDialog(name,flg){
+      console.log("123",name,flg)
+     /* if(flg=='dialog'){
+        this.tableVisible=true;
+
+      }else{
+
+
+      }*/
+      this.dialogVisible=true;
+
       this.dialogName=name;
     },
     //点击表格内容名称事件
@@ -384,6 +444,7 @@ export default {
       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.widthStyle='';
       this.setDialog('performance_trends')
     },
     //End LSQ 2022/1/20 10:23 TODO
@@ -454,9 +515,31 @@ export default {
       return styleJson
     },
     //表格下探
-    pressingDialog(itemMenu,value){
+    pressingDialog(itemMenu,value,flg){
       this.pressingValue=value;
-      this.setDialog(itemMenu.type);
+      let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
+      if(itemMenu.type=='alarm_setting'){
+        this.widthStyle='width:70%;';
+
+      }else if(itemMenu.type=='filter_sheet_indicator'){
+        this.widthStyle=styleStr;
+
+      }else if(itemMenu.type=='filter_multiple_indicators'){
+        this.widthStyle=styleStr;
+
+      }else if(itemMenu.type=='performance_trends'){
+        this.widthStyle='';
+
+      }else if(itemMenu.type=='pressing_times'){
+        this.widthStyle=styleStr;
+
+      }else if(itemMenu.type=='include_capacity_forecast'){
+        this.widthStyle=styleStr;
+
+      }
+
+      this.setDialog(itemMenu.type,flg);
+
       let key=this.$refs.popoverMenu;
       if(key && key.length>0){
         key.map(item=>{
@@ -614,6 +697,9 @@ export default {
   background: #FFFFFF;
   position: relative;
   margin: 30px auto;
+  .dialog-div-width{
+    width: 100%;
+  }
   .txtScroll-top{
     width:100%;
     padding: 10px;
@@ -641,9 +727,10 @@ export default {
   }
   .dialog-footer{
     width: 100%;
-    padding: 15px 0;
+    padding: 15px;
     position: absolute;
     bottom: 0;
+    text-align: right;
   }
 }
 </style>