update table 等级

This commit is contained in:
lb 2022-11-09 09:51:14 +08:00
parent 073478f34f
commit 25e5150e35
2 changed files with 122 additions and 32 deletions

View File

@ -12,8 +12,13 @@
>
<el-table-column label="设备名称" prop="eqName" align="center" />
<el-table-column label="所属产线" prop="pl" align="center" />
<el-table-column label="提示等级" prop="warningLevel" align="center" />
<el-table-column label="提示等级" prop="checkContent" align="center" />
<el-table-column label="提示等级" prop="warningLevel" align="center">
<template slot-scope="scope">
<!-- <component :is="PriorityComponent"></component> -->
<PriorityComponent :injectData="scope.row"></PriorityComponent>
</template>
</el-table-column>
<el-table-column label="巡检内容" prop="checkContent" align="center" />
</el-table>
</div>
<!-- <div class="el-table-wrapper">
@ -35,36 +40,70 @@
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
const PriorityComponent = {
name: 'PriorityComponent',
props: {
injectData: Object
},
computed: {
bgColor() {
const colors = ['#9c4048', '#ffbd43', '#0b58ff', '#90dd48', '#449028', '#091238']
return colors[this.injectData.priority - 1]
},
priorityText() {
return ['一级', '二级', '三级', '四级', '五级'][this.injectData.priority - 1]
}
},
methods: {},
render: function(h) {
return h(
'span',
{
style: {
display: 'inline-block',
borderRadius: '2px',
padding: '2px 6px',
color: '#fff',
opacity: '0.6',
fontSize: '12px',
lineHeight: 1,
backgroundColor: this.bgColor
}
},
this.priorityText
)
}
}
const tableProps = [
{ prop: 'eqName', label: '设备名称', width: 120, resizable: false },
{ prop: 'pl', label: '所属产线', width: 120, resizable: false },
{ prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
{ prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
]
// const tableProps = [
// { prop: 'eqName', label: '', width: 120, resizable: false },
// { prop: 'pl', label: '线', width: 120, resizable: false },
// { prop: 'warningLevel', label: '', width: 120, resizable: false },
// { prop: 'checkContent', label: '', width: 120, resizable: false }
// ]
const tableData = [
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
// { eqName: '', pl: '线3', warningLevel: 3, checkContent: '' },
// { eqName: '', pl: '线2', warningLevel: 2, checkContent: '' }
]
const tableData2 = [
{ eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
{ eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
{ eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' }
// { eqName: '', pl: '线3', warningLevel: 3, checkContent: '' },
// { eqName: '', pl: '线2', warningLevel: 2, checkContent: '' }
]
// const tableData2 = [
// { eqName: 'A', pl: '线1', warningLevel: 1, checkContent: '' },
// { eqName: 'B', pl: '线1', warningLevel: 1, checkContent: '' }
// { eqName: '', pl: '线3', warningLevel: 3, checkContent: '' },
// { eqName: '', pl: '线2', warningLevel: 2, checkContent: '' }
// ]
export default {
name: 'LeftContentEquipmentCheck',
components: {},
components: { PriorityComponent },
data() {
return { tableProps, tableData, tableData2 }
return { tableData }
},
created() {},
mounted() {},

View File

@ -7,9 +7,26 @@
:data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
>
<el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" align="center" />
<el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" align="center" />
<el-table-column label="故障等级" prop="level" :resizable="true" align="center" />
<el-table-column
label="设备名称"
prop="eqName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column
label="所属产线"
prop="plName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
<template slot-scope="scope">
<!-- <component :is="PriorityComponent"></component> -->
<PriorityComponent :injectData="scope.row"></PriorityComponent>
</template>
</el-table-column>
<el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
</el-table>
@ -20,18 +37,52 @@
<script>
// import TechyFakeTable from './TechyFakeTable.vue'
// import TechyTable from './TechyTable.vue'
const PriorityComponent = {
name: 'PriorityComponent',
props: {
injectData: Object
},
computed: {
bgColor() {
const colors = ['#9c4048', '#ffbd43', '#0b58ff', '#90dd48', '#449028', '#091238']
return colors[this.injectData.priority - 1]
},
priorityText() {
return ['一级', '二级', '三级', '四级', '五级'][this.injectData.priority - 1]
}
},
methods: {},
render: function(h) {
return h(
'span',
{
style: {
display: 'inline-block',
borderRadius: '2px',
padding: '2px 6px',
color: '#fff',
opacity: '0.6',
fontSize: '12px',
lineHeight: 1,
backgroundColor: this.bgColor
}
},
this.priorityText
)
}
}
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 }
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
{ eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: 30 },
{ eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: 1 },
{ eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: 2 }
]
export default {
name: 'RightContentAlert',
components: {},
components: { PriorityComponent },
data() {
return { tableData }
},