详情表格组件功能完善-更多页面的表格和表格样式保持一致

鲁尚清
Commit 5aa8595be5e7dc5429b1ac81df7028c37c982580 1 parent 127f5f04
Showing 5 changed files with 85 additions and 25 deletions
report-ui/src/api/platform.js
report-ui/src/views/report/bigscreen/designer/designerComponents/configureIndicators.vue
report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue
report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
--- a/report-ui/src/api/platform.js
View file @5aa8595
+++ b/report-ui/src/api/platform.js
View file @5aa8595
@@ -140,7 +140,7 @@ export function getDetailTableData(param){
           "kpiId": "KPIA91F44E7",
           "kpiName": "文件系统总大小",
           "flag": "fs-",
-          "kpiValue": "98.30 GB",
+          "kpiValue": "9812345678912563412588.30 GB",
           "collTime": null,
           "duration": null,
           "createTime": null,
@@ -789,7 +789,7 @@ export function getDetailTableData(param){
           "kpiId": "KPI7AC1664E",
           "kpiName": "文件系统挂载",
           "flag": "fs-runuser0",
-          "kpiValue": "/run/user/0 ",
+          "kpiValue": "/run/user/0/run1/user1/01 ",
           "collTime": null,
           "duration": null,
           "createTime": null,
@@ -2508,7 +2508,9 @@ export function getDetailTableData(param){
     "str": null,
     "totalRow": null
   }
-  if(params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'){
+  // params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'
+  let kpiIdArr=params.kpiId.split(',');
+  if(kpiIdArr.length>4){
     console.log("a1")
     tableData=detailTableData1;
   }else{
@@ -2638,7 +2640,7 @@ export  function  getDetailTableDataNoPage(){
           "kpiId": "KPIA91F44E7",
           "kpiName": "文件系统总大小",
           "flag": "fs-",
-          "kpiValue": "196.74 GB",
+          "kpiValue": "123456789987654321123456789987.74 GB",
           "collTime": null,
           "duration": null,
           "createTime": null,
@@ -3287,7 +3289,7 @@ export  function  getDetailTableDataNoPage(){
           "kpiId": "KPI7AC1664E",
           "kpiName": "文件系统挂载",
           "flag": "fs-runuser0",
-          "kpiValue": "/run/user/0 ",
+          "kpiValue": "/run/user/0/run2/user3/03 ",
           "collTime": null,
           "duration": null,
           "createTime": null,
--- a/report-ui/src/views/report/bigscreen/designer/designerComponents/configureIndicators.vue
View file @5aa8595
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/configureIndicators.vue
View file @5aa8595
@@ -286,16 +286,26 @@ export default {
           arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
         })
         this.formData=arr;
+        this.formData.sort(this.compare('columnSort'));
         this.dialogVisible = false;
       } else {
         // 编辑
         this.formData[this.indexEditor] = this.rowFormData;
         this.$set(this.formData, this.indexEditor, this.rowFormData);
+        this.formData.sort(this.compare('columnSort'));
         this.editDialogVisible = false;
       }
       this.$emit("input", this.formData);
       this.$emit("change", this.formData);
     },
+    //数组排序
+    compare(property){
+      return function(a,b){
+        let value1 = a[property];
+        let value2 = b[property];
+        return value1 - value2;
+      }
+    },
     // 删除
     handleDeleteClick(index,row) {
       this.formData.splice(index, 1);
--- a/report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue
View file @5aa8595
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/customDialog.vue
View file @5aa8595
@@ -49,7 +49,7 @@ export default {
   watch: {
     dialogVisible: {
       handler(val) {
-        console.log("dialogVisible",val)
+        // console.log("dialogVisible",val)
       },
       deep: true
     }
@@ -64,7 +64,7 @@ export default {
     },
     okFunc(){
       // this.dialogVisible = false;
-      this.$emit('okfunc');
+      this.$emit('okFunc');
     }
   }
 }
--- a/report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
View file @5aa8595
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/customMenuBox.vue
View file @5aa8595
@@ -45,17 +45,25 @@
         </div>
         <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
-          过滤单指标{{pressingValue}}
+<!--          过滤单指标{{pressingValue}}-->
+          您确定要对当前指标进行过滤处理？
         </div>
         <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
-          过滤多指标{{pressingValue}}
+<!--          过滤多指标{{pressingValue}}-->
+          您确定要对当前指标进行过滤处理？
         </div>
         <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
           <div>性能趋势{{pressingValue}}</div>
           <iframe :src="trendSrc" class="layadmin-iframe"  style="height: 99.5%!important;width: 100%;"/>
         </div>
         <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
-          压制次数{{pressingValue}}
+<!--          压制次数{{pressingValue}}-->
+          <el-input
+            v-model="pressingNum"
+            :rows="2"
+            type="textarea"
+            placeholder="压制次数（必填，建议100以内）"
+          />
         </div>
         <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
           纳入容量预测{{pressingValue}}
@@ -68,6 +76,7 @@
 <script>
 import customDialog from "./customDialog";
+import {Message} from "_element-ui@2.15.6@element-ui";
 export default {
   name: "customMenuBox",
@@ -136,7 +145,8 @@ export default {
       dialogName: '',
       // trendSrc:'',//性能走势图地址
       // pressingVisible:'',
-      pressingValue:'',
+      pressingValue:'',//压制次数
+      pressingNum:'',
       strategyData: [{
         label:'策略一',
         value:'001'
@@ -182,6 +192,11 @@ export default {
     },
     okFunc(){
       this.dialogVisible=false;
+      if(this.dialogName=='filter_sheet_indicator'){
+        this.setKpiFilter(true);
+      }else if(this.dialogName=='filter_multiple_indicators'){
+        this.setKpiFilter(false);
+      }
     },
     //表格下探
     pressingDialog(itemMenu,value,flg){
@@ -200,7 +215,7 @@ export default {
         this.widthStyle='';
       }else if(itemMenu.type=='pressing_times'){
-        this.widthStyle=styleStr;
+        this.widthStyle='width:400px;height: 200px;min-height: 200px;overflow: hidden;';
       }else if(itemMenu.type=='include_capacity_forecast'){
         this.widthStyle=styleStr;
@@ -232,6 +247,19 @@ export default {
       this.dialogName=name;
     },
+    //设置指标过滤,isOne true单指标过滤，false多指标过滤
+    setKpiFilter(isOne){
+      let params={
+        resId: '',kpiId: '',flag:'',subFlag: '',
+      }
+      let datas={resId:params.resId,kpiId:params.kpiId,flag:params.flag,isOne:isOne===true?'s':'m',subFlag:params.subFlag}
+      console.log("过滤指标",isOne,'/api-web/filterkpi/kpi/filter')
+      Message({
+        message: '过滤指标失败',
+        type: 'error',
+        duration: 3 * 1000
+      })
+    }
   }
 }
 </script>
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
View file @5aa8595
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
View file @5aa8595
@@ -17,9 +17,8 @@
           :key="index"
           :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
         >
-          {{ item.name }}
-<!--          <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':(sortBy==item.key && sortVal=='bottom'),'el-icon-caret-top':(sortBy==item.key && sortVal=='top')}]" @click="changeSort(item)"></i>-->
-          <span v-if="tableFiledSort(index)" class="caret-wrapper">
+        {{ item.name }}
+        <span v-if="tableFiledSort(index)" class="caret-wrapper">
             <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
             <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
           </span>
@@ -36,8 +35,7 @@
               :key="idx"
               :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
                  @mouseenter="pressingTimes(index,idx)"
-                 :ref="'headerRef'+index+'-'+idx"
-                 :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)"
+                 :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx,'')"
             >
               <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
                 <template #content>
@@ -74,10 +72,9 @@
               v-for="(item, index) in headerAll"
               :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
               :key="index"
-              :class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}"
+              :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
             >
               {{ item.name }}
-<!--              <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':sortVal=='bottom','el-icon-caret-top':sortVal=='top'}]" @click="changeSort(item)"></i>-->
               <span v-if="tableFiledSort(index)" class="caret-wrapper">
                 <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
                 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
@@ -90,15 +87,31 @@
               <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
                 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
                   {{ index+1 }}</div>
-                <div class="infoList-flex"
+                <div class="infoList-flex text-overflow padding-10"
                      v-for="(itemChild, idx) in headerAll"
                      :key="idx"
                      :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
                      @mouseenter="pressingTimes(index,idx)"
+                     :data-tip="tableFiledMaxWidth('isOverflow1'+index+'-'+idx,index,idx,'more')"
                 >
-                    <span  @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
+                  <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
+                    <template #content>
+                      <span>{{ item[itemChild.key].kpiValue}}</span>
+                    </template>
+                    <span  @mouseleave=""  :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
+                           :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
+                      {{ item[itemChild.key].kpiValue}}
+                    </span>
+                  </el-tooltip>
+                  <component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" />
+
+
+
+
+
+<!--                  <span  @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
                            :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
-                      {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>
+                      {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>-->
                   <customMenuBox  v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
                                   :detailMenubox="calcDetailMenubox"
                                   :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
@@ -261,6 +274,7 @@ export default {
       sortBy:'',//排序参数
       sortCaret:'',//正序倒序
       isEllipsis:[],//是否文字超出
+      isEllipsisMore:[],//是否文字超出
       componentName:'',//组件名称
     };
   },
@@ -652,14 +666,20 @@ export default {
       return styleJson
     },
     //列最大宽
-    tableFiledMaxWidth(obj,index,idx){
+    tableFiledMaxWidth(obj,index,idx,flg){
       let that=this;
        this.$nextTick(() => {
           let isOverflow=that.$refs[obj];
-          if(isOverflow && isOverflow[0]){
+         if(isOverflow && isOverflow[0]){
             let cWidth = isOverflow[0].parentElement.scrollWidth;
             let sWidth = isOverflow[0].scrollWidth;
-            that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
+            if(flg=='more'){
+              that.isEllipsisMore[index+'-'+idx]=!((sWidth+10) > cWidth);
+
+            }else {
+              that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
+
+            }
           }
       })