monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit 8bc655a8f2a73040520b40c2e17d884f8c62e845 1 parent 9707ebd8 master ... master-500-dev master-500-dev-LH master-500-dev-lushangqing master-500-dev-lzc master-500-prod master-ajreport-XuHaoJie master-ajreport-lushangqing master-mj master-mj-joke master-prod master-v330 master_AjReport_LH

详情表格组件功能完善-文字超出悬浮提示，

Inline Side-by-side
Showing 5 changed files with 273 additions and 94 deletions
@@ -77,3 +77,9 @@ @@ -77,3 +77,9 @@
77 .el-table td { 77 .el-table td {
78 padding: 6px 0; 78 padding: 6px 0;
79 } 79 }
  80 +.alarm-li{
  81 + .el-input .el-input__inner{
  82 + height: 50px;
  83 + }
  84 +}
  85 +
@@ -260,7 +260,6 @@ export default { @@ -260,7 +260,6 @@ export default {
260 arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index}) 260 arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index})
261 }) 261 })
262 this.formData=arr; 262 this.formData=arr;
263 - console.log("formadata",this.formData)  
264 this.dialogVisible = false; 263 this.dialogVisible = false;
265 } else { 264 } else {
266 // 编辑 265 // 编辑
@@ -287,7 +286,7 @@ export default { @@ -287,7 +286,7 @@ export default {
287 } 286 }
288 }) 287 })
289 this.multipleSelection.splice(indexId, 1); 288 this.multipleSelection.splice(indexId, 1);
290 - console.log("*/*/*",this.multipleSelection) 289 +
291 this.tableData.map(item=>{ 290 this.tableData.map(item=>{
292 if(item.kpiId==kpiId){ 291 if(item.kpiId==kpiId){
293 setTimeout(()=>{ 292 setTimeout(()=>{
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="basic-img"> 3 <div class="basic-img">
4 - <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200"> 4 + <el-popover ref="popoverMenu" placement="right" trigger="click" auto-close="200" >
5 <template #reference> 5 <template #reference>
6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()"> 6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
7 </template> 7 </template>
8 <div class="info-ul" style="width:140px;" > 8 <div class="info-ul" style="width:140px;" >
9 - <div class="basic-pressing-times" @click="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox"> 9 + <div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox">
10 <i class="el-icon-link icon-div"></i>{{itemMenu.name}} 10 <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
11 </div> 11 </div>
12 </div> 12 </div>
@@ -17,7 +17,32 @@ @@ -17,7 +17,32 @@
17 > 17 >
18 <template v-slot> 18 <template v-slot>
19 <div v-if="dialogName=='alarm_setting'" class="txtScroll-top"> 19 <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
20 - 告警设置{{pressingValue}} 20 +<!-- 告警设置{{pressingValue}}-->
  21 + <div class="alarm-li flex-center">
  22 + <div class="alarm-li-label">告警策略</div>
  23 + <el-select v-model="strategyValue" filterable class="m-2 alarm-li-select" placeholder="选择告警策略">
  24 + <el-option
  25 + v-for="item in strategyData"
  26 + :key="item.value"
  27 + :label="item.label"
  28 + :value="item.value"
  29 + >
  30 + </el-option>
  31 + </el-select>
  32 + </div>
  33 + <div class="alarm-li flex-center">
  34 + <div class="alarm-li-label">告警列表</div>
  35 + <el-select v-model="alarmListValue" multiple filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
  36 + <el-option
  37 + v-for="item in alarmListData"
  38 + :key="item.value"
  39 + :label="item.label"
  40 + :value="item.value"
  41 + >
  42 + </el-option>
  43 + </el-select>
  44 + </div>
  45 +
21 </div> 46 </div>
22 <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top"> 47 <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
23 过滤单指标{{pressingValue}} 48 过滤单指标{{pressingValue}}
@@ -112,6 +137,19 @@ export default { @@ -112,6 +137,19 @@ export default {
112 // trendSrc:'',//性能走势图地址 137 // trendSrc:'',//性能走势图地址
113 // pressingVisible:'', 138 // pressingVisible:'',
114 pressingValue:'', 139 pressingValue:'',
  140 + strategyData: [{
  141 + label:'策略一',
  142 + value:'001'
  143 + }],//告警策略数据
  144 + strategyValue:'',//告警策略值
  145 + alarmListData:[{
  146 + label:'告警列表一',
  147 + value:'001'
  148 + },{
  149 + label:'告警列表二',
  150 + value:'002'
  151 + },],//告警列表数据
  152 + alarmListValue:[],//告警列表值
115 153
116 } 154 }
117 }, 155 },
@@ -122,6 +160,12 @@ export default { @@ -122,6 +160,12 @@ export default {
122 160
123 }, 161 },
124 deep: true 162 deep: true
  163 + },
  164 + tableName:{
  165 + handler(val){
  166 + console.log("titlename",val)
  167 + },
  168 + deep:true
125 } 169 }
126 }, 170 },
127 mounted() { 171 mounted() {
@@ -165,8 +209,14 @@ export default { @@ -165,8 +209,14 @@ export default {
165 209
166 this.setDialog(itemMenu.type,flg); 210 this.setDialog(itemMenu.type,flg);
167 211
  212 + this.closePopoverMenu();
  213 +
  214 + this.$emit("closeProbeDown",'')
  215 + // this.$refs.popoverMenu.showPopper = false;
  216 +
  217 + },
  218 + closePopoverMenu(){
168 let key=this.$refs.popoverMenu; 219 let key=this.$refs.popoverMenu;
169 - console.log("key",key)  
170 if(key && key.length>0){ 220 if(key && key.length>0){
171 key.map(item=>{ 221 key.map(item=>{
172 item.showPopper=false 222 item.showPopper=false
@@ -175,10 +225,6 @@ export default { @@ -175,10 +225,6 @@ export default {
175 key.showPopper=false 225 key.showPopper=false
176 226
177 } 227 }
178 -  
179 - this.$emit("closeProbeDown",'')  
180 - // this.$refs.popoverMenu.showPopper = false;  
181 -  
182 }, 228 },
183 //打开弹框 229 //打开弹框
184 setDialog(name,flg){ 230 setDialog(name,flg){
@@ -235,4 +281,29 @@ export default { @@ -235,4 +281,29 @@ export default {
235 } 281 }
236 282
237 } 283 }
  284 +.alarm-li{
  285 + width:100%;
  286 + padding:0 10px;
  287 + margin-bottom: 30px;
  288 + .alarm-li-label{
  289 + height:50px;
  290 + line-height: 50px;
  291 + background: #fbfbfb;
  292 + padding:10px;
  293 + display: flex;
  294 + align-items: center;
  295 + border:1px solid #e6e6e6;
  296 + }
  297 + .alarm-li-select{
  298 + flex:1;
  299 +
  300 + }
  301 +}
  302 +.el-input .el-input__inner{
  303 + height: 40px;
  304 +}
  305 +.flex-center{
  306 + display: flex;
  307 + justify-content: center;
  308 +}
238 </style> 309 </style>
@@ -134,56 +134,119 @@ export const monitorDetailTable = { @@ -134,56 +134,119 @@ export const monitorDetailTable = {
134 placeholder: '', 134 placeholder: '',
135 value: '#e6e6e6' 135 value: '#e6e6e6'
136 }, 136 },
  137 +
  138 + [
  139 + {
  140 + name:'下探列表设置',
  141 + list:[
  142 + {
  143 + type: 'el-switch',
  144 + label: '告警设置',
  145 + name: 'alarm_setting',
  146 + required: false,
  147 + placeholder: '',
  148 + value: true
  149 + },
  150 + {
  151 + type: 'el-switch',
  152 + label: '过滤单指标',
  153 + name: 'filter_sheet_indicator',
  154 + required: false,
  155 + placeholder: '',
  156 + value: true
  157 + },
  158 + {
  159 + type: 'el-switch',
  160 + label: '过滤多指标',
  161 + name: 'filter_multiple_indicators',
  162 + required: false,
  163 + placeholder: '',
  164 + value: true
  165 + },
  166 + {
  167 + type: 'el-switch',
  168 + label: '性能趋势',
  169 + name: 'performance_trends',
  170 + required: false,
  171 + placeholder: '',
  172 + value: true
  173 + },
  174 + {
  175 + type: 'el-switch',
  176 + label: '压制次数',
  177 + name: 'pressing_times',
  178 + required: false,
  179 + placeholder: '',
  180 + value: true
  181 + },
  182 + {
  183 + type: 'el-switch',
  184 + label: '纳入容量预测',
  185 + name: 'include_capacity_forecast',
  186 + required: false,
  187 + placeholder: '',
  188 + value: true
  189 + }
  190 + ]
  191 + }
  192 + ],
137 { 193 {
138 type: 'el-switch', 194 type: 'el-switch',
139 - label: '告警设置',  
140 - name: 'alarm_setting',  
141 - required: false,  
142 - placeholder: '',  
143 - value: true  
144 - },  
145 - {  
146 - type: 'el-switch',  
147 - label: '过滤单指标',  
148 - name: 'filter_sheet_indicator',  
149 - required: false,  
150 - placeholder: '',  
151 - value: true  
152 - },  
153 - {  
154 - type: 'el-switch',  
155 - label: '过滤多指标',  
156 - name: 'filter_multiple_indicators',  
157 - required: false,  
158 - placeholder: '',  
159 - value: true  
160 - },  
161 - {  
162 - type: 'el-switch',  
163 - label: '性能趋势',  
164 - name: 'performance_trends',  
165 - required: false,  
166 - placeholder: '',  
167 - value: true  
168 - },  
169 - {  
170 - type: 'el-switch',  
171 - label: '压制次数',  
172 - name: 'pressing_times',  
173 - required: false,  
174 - placeholder: '',  
175 - value: true  
176 - },  
177 - {  
178 - type: 'el-switch',  
179 - label: '纳入容量预测',  
180 - name: 'include_capacity_forecast', 195 + label: '弹框默认名称',
  196 + name: 'nameDefault',
181 required: false, 197 required: false,
182 placeholder: '', 198 placeholder: '',
183 value: true 199 value: true
184 }, 200 },
185 [ 201 [
186 { 202 {
  203 + name: '弹框名称设置',
  204 + list: [
  205 + {
  206 + type: 'el-switch',
  207 + label: '资源类型',
  208 + name: 'nameResType',
  209 + required: false,
  210 + placeholder: '',
  211 + value: false
  212 + },
  213 + {
  214 + type: 'el-switch',
  215 + label: 'IP地址',
  216 + name: 'nameIPAddress',
  217 + required: false,
  218 + placeholder: '',
  219 + value: false
  220 + },
  221 + {
  222 + type: 'el-switch',
  223 + label: '资源名称',
  224 + name: 'nameResName',
  225 + required: false,
  226 + placeholder: '',
  227 + value: false
  228 + },
  229 + {
  230 + type: 'el-switch',
  231 + label: '指标名称',
  232 + name: 'nameKpiName',
  233 + required: false,
  234 + placeholder: '',
  235 + value: false
  236 + },
  237 + {
  238 + type: 'el-switch',
  239 + label: '指标标识',
  240 + name: 'nameKpiFlg',
  241 + required: false,
  242 + placeholder: '',
  243 + value: false
  244 + }
  245 + ],
  246 + }
  247 + ],
  248 + [
  249 + {
187 name: '状态范围设置', 250 name: '状态范围设置',
188 list: [ 251 list: [
189 { 252 {
1 <template> 1 <template>
2 - <div :style="styleObj" @click="closePressingDialog" ref="detailTable"> 2 + <div :style="styleObj" @mouseleave.stop="closePressingDialog" ref="detailTable">
3 <div class="detail-table-title title-flex-between"> 3 <div class="detail-table-title title-flex-between">
4 <div class="title-left">{{tableStyle.tableName}}</div> 4 <div class="title-left">{{tableStyle.tableName}}</div>
5 <div class="title-right"> 5 <div class="title-right">
6 <span class="title-link" @click="handlerDetailDataNoPage()">更多</span> 6 <span class="title-link" @click="handlerDetailDataNoPage()">更多</span>
7 - <span class="title-link">下载</span> 7 + <span class="title-link" @click="downloadTableList">下载</span>
8 </div> 8 </div>
9 </div> 9 </div>
10 <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle"> 10 <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 v-for="(item, index) in header" 15 v-for="(item, index) in header"
16 :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]" 16 :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
17 :key="index" 17 :key="index"
18 - :class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}" 18 + :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
19 > 19 >
20 {{ item.name }} 20 {{ item.name }}
21 <!-- <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>--> 21 <!-- <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>-->
@@ -31,34 +31,30 @@ @@ -31,34 +31,30 @@
31 <li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" > 31 <li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
32 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]"> 32 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
33 {{ index+1 }}</div> 33 {{ index+1 }}</div>
34 - <div class="infoList-flex" 34 + <div class="infoList-flex text-overflow padding-10"
35 v-for="(itemChild, idx) in header" 35 v-for="(itemChild, idx) in header"
36 :key="idx" 36 :key="idx"
37 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 37 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
38 @mouseenter="pressingTimes(index,idx)" 38 @mouseenter="pressingTimes(index,idx)"
  39 + :ref="'headerRef'+index+'-'+idx"
  40 + :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)"
39 > 41 >
40 - <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"  
41 - :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">  
42 - {{ item[itemChild.key].kpiValue}} </span>  
43 - <!-- <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">  
44 - <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">  
45 - <template #reference>  
46 - <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">  
47 - </template>-->  
48 - <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->  
49 - <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"  
50 - :detailMenubox="calcDetailMenubox"  
51 - :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"  
52 - :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])" 42 + <el-tooltip :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" >
  43 + <template #content>
  44 + <span>{{ item[itemChild.key].kpiValue}}</span>
  45 + </template>
  46 + <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
  47 + :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  48 + {{ item[itemChild.key].kpiValue}}
  49 + </span>
  50 + </el-tooltip>
53 51
54 - ></customMenuBox>  
55 -<!-- <div class="info-ul" style="width:140px;" >  
56 - <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in calcDetailMenubox">  
57 - <i class="el-icon-link icon-div"></i>{{itemMenu.name}}  
58 - </div>  
59 - </div>-->  
60 -<!-- </el-popover>  
61 - </div>--> 52 + <customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
  53 + :detailMenubox="calcDetailMenubox"
  54 + :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
  55 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
  56 +
  57 + ></customMenuBox>
62 </div> 58 </div>
63 </li> 59 </li>
64 </ul> 60 </ul>
@@ -261,11 +257,11 @@ export default { @@ -261,11 +257,11 @@ export default {
261 sortVal:'bottom',//排序方式 257 sortVal:'bottom',//排序方式
262 sortBy:'',//排序参数 258 sortBy:'',//排序参数
263 sortCaret:'',//正序倒序 259 sortCaret:'',//正序倒序
  260 + isEllipsis:[],//是否文字超出
264 }; 261 };
265 }, 262 },
266 computed: { 263 computed: {
267 styleObj() { 264 styleObj() {
268 - // console.log(this.optionsSetUp);  
269 const allStyle = this.optionsPosition; 265 const allStyle = this.optionsPosition;
270 return { 266 return {
271 position: this.ispreview ? "absolute" : "static", 267 position: this.ispreview ? "absolute" : "static",
@@ -469,7 +465,6 @@ export default { @@ -469,7 +465,6 @@ export default {
469 this.marginStyle+="margin-top:"+(230)+'px;'; 465 this.marginStyle+="margin-top:"+(230)+'px;';
470 466
471 } 467 }
472 - console.log("123",documentHeight,scroll)  
473 }else{ 468 }else{
474 //ajreport中弹框位置样式 469 //ajreport中弹框位置样式
475 this.heightStyle="height:"+(documentHeight+scroll)+'px;'; 470 this.heightStyle="height:"+(documentHeight+scroll)+'px;';
@@ -652,6 +647,16 @@ export default { @@ -652,6 +647,16 @@ export default {
652 } 647 }
653 return styleJson 648 return styleJson
654 }, 649 },
  650 + //列最大宽
  651 + tableFiledMaxWidth(obj,index,idx){
  652 + let that=this;
  653 + this.$nextTick(() => {
  654 + let isOverflow=that.$refs[obj];
  655 + let cWidth = isOverflow[0].parentElement.scrollWidth;//.scrollWidth;
  656 + let sWidth = isOverflow[0].scrollWidth;
  657 + that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
  658 + })
  659 + },
655 //列是否排序 660 //列是否排序
656 tableFiledSort(index){ 661 tableFiledSort(index){
657 let isSort=false; 662 let isSort=false;
@@ -667,12 +672,14 @@ export default { @@ -667,12 +672,14 @@ export default {
667 this.header.map(v=>{ 672 this.header.map(v=>{
668 if(item.key==v.key){ 673 if(item.key==v.key){
669 v.columnSort=item.columnSort; 674 v.columnSort=item.columnSort;
  675 + v.sort=item.sort?item.sort:false;
670 } 676 }
671 }) 677 })
672 if(this.headerAll && this.headerAll.length>0){ 678 if(this.headerAll && this.headerAll.length>0){
673 this.headerAll.map(v=>{ 679 this.headerAll.map(v=>{
674 if(item.key==v.key){ 680 if(item.key==v.key){
675 v.columnSort=item.columnSort; 681 v.columnSort=item.columnSort;
  682 + v.sort=item.sort?item.sort:false;
676 } 683 }
677 }) 684 })
678 } 685 }
@@ -680,7 +687,6 @@ export default { @@ -680,7 +687,6 @@ export default {
680 }) 687 })
681 this.header.sort(this.compare('columnSort')) 688 this.header.sort(this.compare('columnSort'))
682 this.headerAll.sort(this.compare('columnSort')) 689 this.headerAll.sort(this.compare('columnSort'))
683 - console.log("&&&",this.header)  
684 }, 690 },
685 compare(property){ 691 compare(property){
686 return function(a,b){ 692 return function(a,b){
@@ -728,7 +734,7 @@ export default { @@ -728,7 +734,7 @@ export default {
728 this.pressingVisible=index+'-'+idx; 734 this.pressingVisible=index+'-'+idx;
729 }, 735 },
730 closePressingDialog(){ 736 closePressingDialog(){
731 - this.pressingVisible=false; 737 + // this.pressingVisible=false;
732 }, 738 },
733 //弹框关闭确定 739 //弹框关闭确定
734 hideDialog(){ 740 hideDialog(){
@@ -761,7 +767,6 @@ export default { @@ -761,7 +767,6 @@ export default {
761 }else{ 767 }else{
762 //不排序 768 //不排序
763 } 769 }
764 - console.log('sort',item.key)  
765 // this.handlerDetailData('',item.key) 770 // this.handlerDetailData('',item.key)
766 // this.handlerDetailDataNoPage(); 771 // this.handlerDetailDataNoPage();
767 }, 772 },
@@ -769,7 +774,6 @@ export default { @@ -769,7 +774,6 @@ export default {
769 handleSizeChange(val){ 774 handleSizeChange(val){
770 // 切换页码重置初始页 775 // 切换页码重置初始页
771 this.currentPage = 1 776 this.currentPage = 1
772 - // console.log(`每页 ${val} 条`)  
773 //props.pageSize = val; 777 //props.pageSize = val;
774 this.pageSize = val; 778 this.pageSize = val;
775 this.handlerDetailDataNoPage(); 779 this.handlerDetailDataNoPage();
@@ -777,14 +781,12 @@ export default { @@ -777,14 +781,12 @@ export default {
777 781
778 // 切换页码 782 // 切换页码
779 handleCurrentChange(val){ 783 handleCurrentChange(val){
780 - // console.log(`当前页: ${val}`)  
781 //props.currentPage = val; 784 //props.currentPage = val;
782 this.currentPage = val; 785 this.currentPage = val;
783 this.handlerDetailDataNoPage(); 786 this.handlerDetailDataNoPage();
784 }, 787 },
785 // 切换页码 788 // 切换页码
786 prePage(val) { 789 prePage(val) {
787 - // console.log(`当前页: ${val}`)  
788 // props.currentPage = val - 1; 790 // props.currentPage = val - 1;
789 this.currentPage = val-1; 791 this.currentPage = val-1;
790 this.handlerDetailDataNoPage(); 792 this.handlerDetailDataNoPage();
@@ -792,20 +794,40 @@ export default { @@ -792,20 +794,40 @@ export default {
792 794
793 // 切换页码 795 // 切换页码
794 nextPage(val){ 796 nextPage(val){
795 - // console.log(`当前页: ${val}`)  
796 // props.currentPage = val + 1; 797 // props.currentPage = val + 1;
797 this.currentPage = val+1; 798 this.currentPage = val+1;
798 this.handlerDetailDataNoPage(); 799 this.handlerDetailDataNoPage();
799 }, 800 },
800 //计算弹框名称 801 //计算弹框名称
801 - dialogNameStyle(obj){  
802 - const tableStyleSetup=this.optionsSetUp;  
803 - let kpiName=obj.kpiName?'+'+obj.kpiName:'';  
804 - let dialogName=tableStyleSetup.tableName+kpiName;  
805 - this.dialogName=dialogName;  
806 - return dialogName; 802 + dialogNameStyle(obj) {
  803 + const tableStyleSetup = this.optionsSetUp;
  804 + let kpiName = obj.kpiName ? '+' + obj.kpiName : '';
  805 + let dialogName = tableStyleSetup.tableName + kpiName;
  806 + if (tableStyleSetup.nameDefault) {
  807 + dialogName = tableStyleSetup.tableName + kpiName;
807 808
  809 + } else {
  810 + let nameResType = tableStyleSetup.nameResType ? obj.resType ? obj.resType + '|' : '' : '';
  811 + let nameIPAddress = tableStyleSetup.nameIPAddress ? obj.ipAddr ? obj.ipAddr + '|' : '' : '';
  812 + let nameResName = tableStyleSetup.nameResName ? obj.resName ? obj.resName + '|' : '' : '';
  813 + let nameKpiName = tableStyleSetup.nameKpiName ? obj.kpiName ? obj.kpiName + '|' : '' : '';
  814 + let nameKpiFlg = tableStyleSetup.nameKpiFlg ? obj.flag ? obj.flag + '|' : '' : '';
  815 + let name = nameResType + nameIPAddress + nameIPAddress + nameResName + nameKpiName + nameKpiFlg;
  816 + dialogName = name.substring(0, name.length - 1);
  817 + }
  818 + this.dialogName = dialogName;
  819 + return dialogName;
808 }, 820 },
  821 + //下载
  822 + downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order){
  823 + let kpiIdArr=[];
  824 + this.header.map(item=>{
  825 + if(item.sort){
  826 + kpiIdArr.push(item.key)
  827 + }
  828 + })
  829 + console.log("kpiIdArr",kpiIdArr)
  830 + }
809 } 831 }
810 }; 832 };
811 </script> 833 </script>
@@ -997,7 +1019,7 @@ export default { @@ -997,7 +1019,7 @@ export default {
997 flex-direction: column; 1019 flex-direction: column;
998 align-items: center; 1020 align-items: center;
999 height: 14px; 1021 height: 14px;
1000 - width: 24px; 1022 + width: 14px;
1001 vertical-align: middle; 1023 vertical-align: middle;
1002 cursor: pointer; 1024 cursor: pointer;
1003 overflow: initial; 1025 overflow: initial;
@@ -1008,7 +1030,7 @@ export default { @@ -1008,7 +1030,7 @@ export default {
1008 height: 0; 1030 height: 0;
1009 border: solid 5px transparent; 1031 border: solid 5px transparent;
1010 position: absolute; 1032 position: absolute;
1011 - left: 7px; 1033 + left: 1px;
1012 } 1034 }
1013 .title .sort-caret.ascending { 1035 .title .sort-caret.ascending {
1014 border-bottom-color: #c0c4cc; 1036 border-bottom-color: #c0c4cc;
@@ -1024,4 +1046,22 @@ export default { @@ -1024,4 +1046,22 @@ export default {
1024 .title .descending .sort-caret.descending { 1046 .title .descending .sort-caret.descending {
1025 border-top-color: #409eff; 1047 border-top-color: #409eff;
1026 } 1048 }
  1049 +.text-overflow{
  1050 + white-space:nowrap;
  1051 + overflow:hidden;
  1052 + text-overflow:ellipsis;
  1053 +
  1054 + /*word-break: break-all;
  1055 + text-overflow: ellipsis;
  1056 + overflow: hidden;
  1057 + display: -webkit-box;
  1058 + -webkit-line-clamp: 2;
  1059 + -webkit-box-orient: vertical;*/
  1060 +}
  1061 +.width-80{
  1062 + max-width:80%;
  1063 +}
  1064 +.padding-10{
  1065 + padding:5px;
  1066 +}
1027 </style> 1067 </style>