<template>
|
<div class="YunweiBlockForm-wrap">
|
<el-dialog
|
custom-class="YunweiBlockForm-dialog"
|
title="运维详情"
|
:visible.sync="dialogVisible"
|
width="600px"
|
:close-on-click-modal="false"
|
append-to-body
|
v-dialogDrag>
|
<el-table
|
:cell-class-name="handleClickRowName"
|
style="width: 100%"
|
:data="tableData">
|
<el-table-column
|
prop="name"
|
label="名称"
|
show-overflow-tooltip
|
align="left"
|
header-align="left"
|
min-width="50">
|
</el-table-column>
|
<el-table-column
|
prop="runDate"
|
label="上次运行时间"
|
show-overflow-tooltip
|
align="left"
|
header-align="left"
|
min-width="70">
|
</el-table-column>
|
<el-table-column
|
:formatter="isRunformat"
|
prop="isRun"
|
label="是否正常运行"
|
align="left"
|
header-align="left"
|
min-width="30">
|
</el-table-column>
|
<el-table-column
|
prop="remark"
|
label="备注"
|
show-overflow-tooltip
|
align="left"
|
header-align="center"
|
min-width="70">
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {getTaskInfoById} from '@/api/daping'
|
export default {
|
name: "YunweiBlockForm",
|
data() {
|
return {
|
dialogVisible: false,
|
tableData:[{
|
name:'我是名称',
|
runDate:'2023-09-2',
|
isRun:'1',
|
remark:'我是备注信息'
|
},{
|
name:'我是名称2',
|
runDate:'2023-09-13',
|
isRun:'0',
|
remark:'我是备注信息'
|
}],
|
}
|
},
|
methods: {
|
init(id) {
|
this.dialogVisible = true
|
//this.getTaskInfoById(id)
|
},
|
getTaskInfoById(id) {
|
getTaskInfoById({id:id}).then(res => {
|
if(res.code == 0) {
|
this.tableData = res.data
|
}
|
})
|
},
|
isRunformat(row) {
|
if(row.isRun == 0 || row.isRun == null) {
|
return '正常'
|
}else if(row.isRun == 1){
|
return '异常'
|
}
|
},
|
handleClickRowName({row, column, rowIndex, columnIndex}) {
|
if(row.isRun == 1 && column.label == '是否正常运行') {
|
return 'yichangStyle'
|
}else {
|
return ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.yichangStyle{
|
.cell{
|
color: red;
|
}
|
}
|
.YunweiBlockForm-dialog{
|
height: 2.9271rem /* 562/192 */!important;
|
width: 4.1771rem /* 802/192 */!important;;
|
background: url("../../../../assets/img/kehuxinxi-detail-bj.png") no-repeat center!important;
|
background-size: 100% 100% !important;
|
}
|
.YunweiBlockForm-dialog{
|
.el-dialog__title{
|
color: #fff;
|
}
|
.el-dialog__header{
|
display: flex;
|
justify-content: center;
|
padding:20px 25px;
|
}
|
.el-dialog__body{
|
padding: 30px 25px;
|
height: calc(100% - 0.3125rem /* 60/192 */);
|
}
|
|
.el-icon-close:before{
|
content: url('../../../../assets/img/closeBtnIcon.png');
|
width: 0.125rem /* 24/192 */;
|
height: 0.125rem /* 24/192 */;
|
}
|
|
.el-table{
|
height: 100%;
|
overflow-y: auto;
|
}
|
.el-table, .el-table__expanded-cell,.el-table tr,.el-table th.el-table__cell{
|
background: transparent;
|
}
|
.el-table thead,.el-table{
|
color: #fff;
|
}
|
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
border:none;
|
}
|
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
background:rgba(0,213,255,0.08);
|
}
|
.el-table__row{
|
&:nth-child(odd) {
|
background:rgba(0,213,255,0.08);
|
}
|
}
|
.el-table::before{
|
height: 0;
|
}
|
.el-table th.el-table__cell>.cell{
|
font-size: 0.0729rem /* 14/192 */;
|
}
|
.el-table td.el-table__cell div{
|
font-size: 0.0729rem /* 14/192 */;
|
}
|
.el-table .cell,.el-table th > .cell {
|
display: inline-block;
|
white-space: nowrap;
|
width: auto;
|
}
|
.el-table .el-table__cell{
|
padding: 0.026rem /* 5/192 */ 0;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
|
</style>
|
