monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 5aa8595be5e7dc5429b1ac81df7028c37c982580 1 parent 127f5f04

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

Inline Side-by-side
Showing 5 changed files with 85 additions and 25 deletions
... ... @@ -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,
... ...
... ... @@ -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);
... ...
... ... @@ -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');
}
}
}
... ...
... ... @@ -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>
... ...
... ... @@ -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);
}
}
})
... ...