<template>
|
<!-- :style="{ height: expand ? '550px' : '300px' }" -->
|
<div class="flex_item" :style="{ height: expand ? 'auto' : '300px' }">
|
<!-- 设备状态 展开 -->
|
<div class="content_flex">
|
<div class="content_prop" :style="{color:getStatusColor(content.equipmentCurrentState)}" >{{ content.equipmentCurrentState|getStatusName(EnumEquipmentCurrentStateDisplay) }}</div>
|
<div class="content_flex_expand content_flex_common" @click="expand = !expand">
|
{{ expand ? '收起' : '展开' }}
|
</div>
|
</div>
|
<!-- 设备编号 -->
|
<div class="content_flex">
|
<div class="content_prop">设备编号</div>
|
<div class="content_flex_common">{{ content.equipmentID }}</div>
|
</div>
|
<!-- 设备名称 -->
|
<div class="content_flex">
|
<div class="content_prop">设备名称</div>
|
<div class="content_flex_common">{{ content.equipmentName }}</div>
|
</div>
|
<!-- 工件ID -->
|
<div class="content_flex">
|
<div class="content_prop">工件ID</div>
|
<div class="content_flex_common">{{ content.workPieceID }}</div>
|
</div>
|
<!-- 工序 -->
|
<div class="content_flex">
|
<div class="content_prop">工序</div>
|
<div class="content_flex_common">{{ content.workingProcedure }}</div>
|
</div>
|
<!-- 上线时间 -->
|
<div class="content_flex">
|
<div class="content_prop">上线时间</div>
|
<div class="content_flex_common">{{ content.onlineTime }}</div>
|
</div>
|
<!-- 加工时长 -->
|
<!-- <div class="content_flex">
|
<div class="content_prop">加工时长</div>
|
<div class="content_flex_common">{{ content.workTime }}小时</div>
|
</div> -->
|
<!-- 特殊字段 -->
|
<div class="content_flex" v-for="(item, index) in currentQualityData" :key="index" :style="{color:isFaultOrWarn==true?'red':''}">
|
<div class="content_prop_expand" style="height:40px;line-height:40px">{{ item.title }}</div>
|
<div style="white-space:pre-wrap" class="content_flex_common">{{ content[item.dataIndex] }}</div>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
const qualityDataAll = {
|
EOP10: [
|
// {
|
// title: '主轴负载',
|
// align: 'center',
|
// sorter: true,
|
// dataIndex: 'qualityOP10To1'
|
// }
|
],
|
EOP70: [
|
// {
|
// title: '清洗液更换时间',
|
// align: 'center',
|
// sorter: true,
|
// dataIndex: 'qualityOP10To1'
|
// }
|
],
|
EOP05: [
|
// {
|
// title: '无特殊字段',
|
// align: 'center',
|
// sorter: true,
|
// dataIndex: 'qualityOP10To1'
|
// }
|
]
|
}
|
export default {
|
name: 'FlexItem',
|
props: {
|
content: { type: Object, required: true }
|
},
|
data() {
|
return {
|
expand: false,
|
EnumEquipmentCurrentStateDisplay: [
|
{ code: 1, title: '生产' },
|
{ code: 2, title: '完成' },
|
{ code: 3, title: '待机' },
|
{ code: 4, title: '警告' },
|
{ code: 5, title: '故障' },
|
{ code: 6, title: '离线' }
|
],
|
statusColor: [
|
{ code: 1, color: 'green' },
|
{ code: 2, color: '#9DA19D' },
|
{ code: 3, color: 'blue' },
|
{ code: 4, color: '#E3DF86' },
|
{ code: 5, color: 'red' },
|
{ code: 6, color: 'gray' }
|
],
|
qualityDataAll: qualityDataAll,
|
currentQualityData: []
|
}
|
},
|
created() {
|
// this.EnumEquipmentCurrentStateDisplay = this.$options.filters['dictData']('enum_equipment_current_state_display')
|
this.setCurrentQualityData()
|
},
|
computed: {
|
isFaultOrWarn() {
|
return this.content.equipmentCurrentState == 4 || this.content.equipmentCurrentState == 5
|
}
|
},
|
methods: {
|
setCurrentQualityData() {
|
const { content } = this
|
const EOP10 = ['EOP10', 'EOP40', 'EOP20', 'EOP30', 'EOP50', 'EOP60']
|
if (content.equipmentCurrentState == 4) {
|
this.currentQualityData = [
|
{
|
title: '告警时间',
|
align: 'center',
|
sorter: true,
|
dataIndex: 'warnTime'
|
},
|
{
|
title: '告警信息',
|
align: 'center',
|
sorter: true,
|
dataIndex: 'warnmsg'
|
}
|
]
|
} else if (content.equipmentCurrentState == 5) {
|
this.currentQualityData = [
|
{
|
title: '故障时间',
|
align: 'center',
|
sorter: true,
|
dataIndex: 'alertTime'
|
},
|
{
|
title: '故障信息',
|
align: 'center',
|
sorter: true,
|
dataIndex: 'alertmsg'
|
}
|
]
|
} else if (EOP10.indexOf(content.equipmentID) != -1) {
|
this.currentQualityData = this.qualityDataAll['EOP10']
|
} else if (content.equipmentID == 'EOP70') {
|
this.currentQualityData = this.qualityDataAll['EOP70']
|
} else {
|
this.currentQualityData = this.qualityDataAll['EOP05']
|
}
|
},
|
getStatusColor(code) {
|
const result = this.statusColor.filter(item => item.code == code)
|
return result.length > 0 ? result[0].color : ''
|
}
|
},
|
filters: {
|
getStatusName(code, EnumEquipmentCurrentStateDisplay) {
|
const result = EnumEquipmentCurrentStateDisplay.filter(item => item.code == code)
|
return result.length > 0 ? result[0].title : ''
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.flex_item {
|
padding: 10px 20px;
|
box-sizing: border-box;
|
width: 30%;
|
border: 1px solid #1890ff;
|
overflow: hidden;
|
transition: all 0.3s;
|
border-radius: 10px;
|
margin-bottom: 10px;
|
.content_flex {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-bottom: 1px solid #ccc;
|
font-size: 16px;
|
.content_prop {
|
text-align: left;
|
font-weight: 700;
|
width: 50%;
|
height: 40px;
|
line-height: 40px;
|
}
|
|
.content_prop_expand{
|
text-align: left;
|
font-weight: 700;
|
width: 50%;
|
}
|
.content_flex_expand {
|
cursor: pointer;
|
color: #1890ff;
|
text-decoration: underline;
|
}
|
.content_flex_common {
|
width: 60%;
|
text-align: right;
|
font-weight: 550;
|
}
|
}
|
}
|
</style>
|
