|
@@ -19,14 +19,21 @@ |
|
@@ -19,14 +19,21 @@ |
19
|
<ul class="infoList">
|
19
|
<ul class="infoList">
|
20
|
<li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" >
|
20
|
<li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" >
|
21
|
<div
|
21
|
<div
|
|
|
22
|
+ class="text-overflow"
|
22
|
v-for="(itemChild, idx) in header"
|
23
|
v-for="(itemChild, idx) in header"
|
23
|
:key="idx"
|
24
|
:key="idx"
|
24
|
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
|
25
|
:style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
|
25
|
>
|
26
|
>
|
26
|
- <span v-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='1'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >一般</span>
|
|
|
27
|
- <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='2'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >重要</span>
|
|
|
28
|
- <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='3'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >严重</span>
|
|
|
29
|
- <span v-else>{{ item[itemChild.key] }}</span>
|
27
|
+ <el-tooltip ref="elTooltip" trigger="hover" >
|
|
|
28
|
+ <template #content>
|
|
|
29
|
+ <span>{{ item[itemChild.key] }}</span>
|
|
|
30
|
+ </template>
|
|
|
31
|
+ <span v-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='1'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >一般</span>
|
|
|
32
|
+ <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='2'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >重要</span>
|
|
|
33
|
+ <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='3'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >严重</span>
|
|
|
34
|
+ <span v-else>{{ item[itemChild.key] }}</span>
|
|
|
35
|
+ </el-tooltip>
|
|
|
36
|
+
|
30
|
</div>
|
37
|
</div>
|
31
|
</li>
|
38
|
</li>
|
32
|
</ul>
|
39
|
</ul>
|
|
@@ -60,7 +67,7 @@ export default { |
|
@@ -60,7 +67,7 @@ export default { |
60
|
},
|
67
|
},
|
61
|
data() {
|
68
|
data() {
|
62
|
return {
|
69
|
return {
|
63
|
- currentPage:0,
|
70
|
+ currentPage:1,
|
64
|
pageSize:10,
|
71
|
pageSize:10,
|
65
|
pageSizes:[10,50,100, 200, 300, 400],
|
72
|
pageSizes:[10,50,100, 200, 300, 400],
|
66
|
total:20,
|
73
|
total:20,
|
|
@@ -266,14 +273,14 @@ export default { |
|
@@ -266,14 +273,14 @@ export default { |
266
|
// 切换页码
|
273
|
// 切换页码
|
267
|
prePage(val) {
|
274
|
prePage(val) {
|
268
|
// props.currentPage = val - 1;
|
275
|
// props.currentPage = val - 1;
|
269
|
- this.currentPage = val-1;
|
276
|
+ this.currentPage = val;
|
270
|
this.handleTableData();
|
277
|
this.handleTableData();
|
271
|
},
|
278
|
},
|
272
|
|
279
|
|
273
|
// 切换页码
|
280
|
// 切换页码
|
274
|
nextPage(val){
|
281
|
nextPage(val){
|
275
|
// props.currentPage = val + 1;
|
282
|
// props.currentPage = val + 1;
|
276
|
- this.currentPage = val+1;
|
283
|
+ this.currentPage = val;
|
277
|
this.handleTableData();
|
284
|
this.handleTableData();
|
278
|
},
|
285
|
},
|
279
|
//分页获取表格数据
|
286
|
//分页获取表格数据
|
|
@@ -347,6 +354,18 @@ export default { |
|
@@ -347,6 +354,18 @@ export default { |
347
|
.table-level-worst {
|
354
|
.table-level-worst {
|
348
|
background-color: #D81E06;
|
355
|
background-color: #D81E06;
|
349
|
}
|
356
|
}
|
|
|
357
|
+.text-overflow{
|
|
|
358
|
+ white-space:nowrap;
|
|
|
359
|
+ overflow:hidden;
|
|
|
360
|
+ text-overflow:ellipsis;
|
|
|
361
|
+
|
|
|
362
|
+ /*word-break: break-all;
|
|
|
363
|
+ text-overflow: ellipsis;
|
|
|
364
|
+ overflow: hidden;
|
|
|
365
|
+ display: -webkit-box;
|
|
|
366
|
+ -webkit-line-clamp: 2;
|
|
|
367
|
+ -webkit-box-orient: vertical;*/
|
|
|
368
|
+}
|
350
|
/*.txtScroll-top .infoList li:nth-child(n) {
|
369
|
/*.txtScroll-top .infoList li:nth-child(n) {
|
351
|
background: rgb(0, 59, 81);
|
370
|
background: rgb(0, 59, 81);
|
352
|
}
|
371
|
}
|