109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="right-content-alert">
|
||
|
|
<div class="el-table-wrapper">
|
||
|
|
<el-table
|
||
|
|
key="RightContentAlertTable"
|
||
|
|
border
|
||
|
|
:data="tableData"
|
||
|
|
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
|
||
|
|
>
|
||
|
|
<el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" />
|
||
|
|
<el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" />
|
||
|
|
<el-table-column label="故障等级" prop="level" :resizable="true" />
|
||
|
|
<el-table-column label="故障内容" prop="content" :resizable="true" />
|
||
|
|
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// import TechyFakeTable from './TechyFakeTable.vue'
|
||
|
|
// import TechyTable from './TechyTable.vue'
|
||
|
|
|
||
|
|
const tableData = [
|
||
|
|
{ eqName: 'A1下片机', plName: 'A', content: '123456', level: 3, duration: 10 },
|
||
|
|
{ eqName: '磨片机', plName: 'A', content: '123456', level: 2, duration: 20 },
|
||
|
|
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', level: 1, duration: 30 },
|
||
|
|
{ eqName: '上片机', plName: 'C', content: 'xxx', level: 3, duration: 1 },
|
||
|
|
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', level: 2, duration: 2 }
|
||
|
|
]
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'RightContentAlert',
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return { tableData }
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
mounted() {},
|
||
|
|
methods: {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.left-content-equipment-check {
|
||
|
|
display: flex;
|
||
|
|
gap: calc(100vw / 1920 * 16);
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table-wrapper {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left-content-equipment-check > div {
|
||
|
|
overflow: hidden;
|
||
|
|
overflow-x: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table-wrapper >>> * {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
.el-table-wrapper >>> .el-table::before,
|
||
|
|
.el-table-wrapper >>> .el-table--group::after,
|
||
|
|
.el-table-wrapper >>> .el-table--border::after {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table-wrapper >>> .el-table {
|
||
|
|
font-size: 8px;
|
||
|
|
background-color: transparent;
|
||
|
|
color: #fff9;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table-wrapper >>> .el-table th.is-leaf,
|
||
|
|
.el-table-wrapper >>> .el-table td {
|
||
|
|
border-color: #0d1728;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table__row--striped:hover > td,
|
||
|
|
.el-table-wrapper >>> .el-table__row:hover > td {
|
||
|
|
background-color: rgba(79, 114, 136, 0.29) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table-wrapper >>> table {
|
||
|
|
border: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table-wrapper >>> thead {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.el-table-wrapper >>> tr {
|
||
|
|
background: unset;
|
||
|
|
}
|
||
|
|
.el-table-wrapper >>> tbody td > div,
|
||
|
|
.el-table-wrapper >>> thead th > div {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.el-table-wrapper >>> th,
|
||
|
|
.el-table-wrapper >>> td {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table-wrapper >>> tbody > tr:nth-child(even) {
|
||
|
|
background: rgba(76, 97, 123, 0.2);
|
||
|
|
}
|
||
|
|
</style>
|