<template>
|
<div class="full-screen">
|
|
<div class="page-title">
|
<div style="margin-right: 10vw">{{currentProductionInfo.productionOrder}}#</div>
|
<div>{{currentProductionInfo.productionName}}</div>
|
</div>
|
|
<div class="load-more">
|
<div @click="modalVisible=true">点击查看更多>></div>
|
</div>
|
|
<table class="plan-table">
|
<thead>
|
<tr style="position: relative">
|
<td colspan="17">
|
<span style="position: absolute;left: 10%">
|
<span class="current-date">{{getCurrentYear}}</span>年
|
<span class="current-date">{{getCurrentMonth}}</span>月
|
<span class="current-date">{{getCurrentDay}}</span>日
|
</span>
|
<span>当日生产计划</span>
|
<span style="position: absolute;right:40%;color: #f00">{{getTotalPlanQuantity}}</span>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="2">机床ID</td>
|
<td colspan="2">名称</td>
|
<td colspan="2">零件号</td>
|
<td colspan="2">零件名称</td>
|
<td>计划量</td>
|
<td>完成量</td>
|
<td>合格量</td>
|
<td>合格率</td>
|
<td colspan="2">工序号</td>
|
<td colspan="2">工单号</td>
|
<td>班组</td>
|
</tr>
|
</thead>
|
|
<tbody>
|
<tr v-for="(item,index) in todayProductionPlanList" :key="index">
|
<template v-if="index<3">
|
<td colspan="2">{{item.equipmentId}}</td>
|
<td colspan="2">{{item.equipmentName}}</td>
|
<a-tooltip :destroyTooltipOnHide="true" placement="topRight" @mouseenter="mouseEnterItem">
|
<template slot="title">
|
<span style="font-size: 1vw">{{item.productNo}}</span>
|
</template>
|
<td colspan="2">{{item.productNo}}</td>
|
</a-tooltip>
|
<td colspan="2">{{item.productName}}</td>
|
<td>{{item.planCount}}</td>
|
<td>{{item.completionCount}}</td>
|
<td>{{item.qualifiedCount}}</td>
|
<td>{{item.passRate+'%'}}</td>
|
<td colspan="2">{{item.processRoute}}</td>
|
<td colspan="2">{{item.orderId}}</td>
|
<td>{{item.clazz}}</td>
|
</template>
|
</tr>
|
</tbody>
|
</table>
|
|
<div class="device-container">
|
<div class="single-device-container" v-for="item in equipmentStatusList" :key="item.id"
|
:style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}">
|
<div class="status-image-container">
|
<img src="@/assets/page/subControlWorkshopSignage/grey.png" v-if="item.oporation===0">
|
<img src="@/assets/page/subControlWorkshopSignage/green.png" v-if="item.oporation===3">
|
<img src="@/assets/page/subControlWorkshopSignage/yellow.png" v-if="item.oporation===2">
|
<img src="@/assets/page/subControlWorkshopSignage/red.png" v-if="item.oporation===22">
|
</div>
|
<div class="device-image-container">
|
<img :src="require('@/assets/page/subControlWorkshopSignage/'+item.equipmentId+'.png')">
|
</div>
|
1
|
<div class="device-name">
|
{{item.equipmentName}}
|
</div>
|
</div>
|
</div>
|
|
<div class="bottom-container">
|
<div class="alarm-container">
|
<div class="alarm-title">报警信息</div>
|
<div class="alarm-content"></div>
|
</div>
|
|
<div class="table-container">
|
<div class="table-title">
|
<div>刀具寿命管理</div>
|
</div>
|
<div class="table-body-container">
|
<table class="manage-table">
|
<tr class="table-head">
|
<!--<td :rowspan="maxBrandToolLifeListLength*2+1" style="width: 3vw"></td>-->
|
<td></td>
|
<td v-for="(item,index) in toolLife.brandList" :key="index" colspan="2">{{item}}</td>
|
</tr>
|
|
<template v-for="(listItem,listIndex) in maxBrandToolLifeListLength">
|
<template>
|
<tr>
|
<td style="width: 7vw">额定寿命</td>
|
<template v-for="(item,index) in toolLife.brandList">
|
<td rowspan="2" style="width: 2.5vw">
|
{{toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex].tid:'':''}}
|
</td>
|
<td style="width: 5vw">
|
{{toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex].initLife:'':''}}
|
</td>
|
</template>
|
</tr>
|
|
<tr>
|
<td>当前寿命</td>
|
<template v-for="(item,index) in toolLife.brandList">
|
<td :style="{backgroundColor:getToolCurrentLifeDataBgColor(item)}">
|
{{toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex]?toolLife.lifeList[index][listIndex].currentLife:'':''}}
|
</td>
|
</template>
|
</tr>
|
</template>
|
</template>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<SignageModal :todayProductionPlanList="todayProductionPlanList" :modalVisible="modalVisible"
|
@closeModal="modalVisible=false"/>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import api from '@/api/mdc'
|
import SignageModal from './modules/SubControlWorkshopSignage/SignageModal'
|
|
export default {
|
name: 'SubControlWorkshopSignage',
|
components: { SignageModal },
|
data() {
|
return {
|
currentProductionInfo: {
|
productionId: '',
|
productionName: '',
|
productionOrder: ''
|
},
|
// todayProductionPlanList: [
|
// {
|
// machineId: '5899-8060',
|
// productionName: '桁架',
|
// partCode: '1204-1.38d.185-1-5351-SD',
|
// partName: '后传动箱壳体',
|
// planQuantity: 9,
|
// finishedQuantity: 7,
|
// qualifiedQuantity: 7,
|
// processNum: '35',
|
// orderNum: '2407093503002',
|
// groupName: '80箱体班'
|
// },
|
// {
|
// machineId: '5899-8060',
|
// productionName: '桁架',
|
// partCode: 'LY1104-3-38C-105',
|
// partName: '传动箱壳体',
|
// planQuantity: 21,
|
// finishedQuantity: 13,
|
// qualifiedQuantity: 13,
|
// processNum: '35',
|
// orderNum: '2407093503003',
|
// groupName: '80箱体班'
|
// },
|
// {
|
// machineId: '5899-8060',
|
// productionName: '桁架',
|
// partCode: '1204-1.38D.185-1',
|
// partName: '后传动箱壳体',
|
// planQuantity: 9,
|
// finishedQuantity: 0,
|
// qualifiedQuantity: 0,
|
// processNum: '35',
|
// orderNum: '2407103501002',
|
// groupName: '80箱体班'
|
// }
|
// ],
|
todayProductionPlanList: [],
|
equipmentStatusList: [
|
{
|
oporation: 0,
|
equipmentId: '5045-7076'
|
},
|
{
|
oporation: 3,
|
equipmentId: '5068-7005'
|
},
|
{
|
oporation: 22,
|
equipmentId: '5045-7157'
|
},
|
{
|
oporation: 2,
|
equipmentId: '5045-7815'
|
}
|
],
|
// toolLife: {
|
// brandList: ['北齐二', '铱 镏', '森 五', '东 曼', '西 曼', '西 德', '东 德'],
|
// lifeList: [
|
// [
|
// {
|
// period: 'T3',
|
// ratedLife: 987,
|
// currentLife: 976
|
// },
|
// {
|
// period: 'T3',
|
// ratedLife: 999,
|
// currentLife: 864
|
// },
|
// {
|
// period: 'T5',
|
// ratedLife: 879,
|
// currentLife: 657
|
// },
|
// {
|
// period: 'T10',
|
// ratedLife: 984,
|
// currentLife: 795
|
// },
|
// {
|
// period: 'T7',
|
// ratedLife: 954,
|
// currentLife: 756
|
// },
|
// {
|
// period: 'T4',
|
// ratedLife: 1080,
|
// currentLife: 785
|
// },
|
// {
|
// period: 'T7',
|
// ratedLife: 1504,
|
// currentLife: 1274
|
// }
|
// ],
|
// [
|
// {
|
// period: 'T1',
|
// ratedLife: 786,
|
// currentLife: 686
|
// },
|
// {
|
// period: 'T1',
|
// ratedLife: 934,
|
// currentLife: 854
|
// },
|
// {
|
// period: 'T8',
|
// ratedLife: 799,
|
// currentLife: 486
|
// },
|
// {
|
// period: 'T2',
|
// ratedLife: 982,
|
// currentLife: 765
|
// },
|
// {
|
// period: 'T4',
|
// ratedLife: 982,
|
// currentLife: 752
|
// },
|
// {
|
// period: 'T8',
|
// ratedLife: 1020,
|
// currentLife: 580
|
// },
|
// {
|
// period: 'T8',
|
// ratedLife: 1086,
|
// currentLife: 1075
|
// }
|
// ],
|
// [
|
// {
|
// period: 'T2',
|
// ratedLife: 654,
|
// currentLife: 465
|
// },
|
// {
|
// period: 'T5',
|
// ratedLife: 1087,
|
// currentLife: 796
|
// },
|
// {
|
// period: 'T4',
|
// ratedLife: 764,
|
// currentLife: 423
|
// },
|
// {
|
// period: 'T3',
|
// ratedLife: 1090,
|
// currentLife: 756
|
// },
|
// {
|
// period: 'T8',
|
// ratedLife: 954,
|
// currentLife: 513
|
// },
|
// {
|
// period: 'T2',
|
// ratedLife: 775,
|
// currentLife: 575
|
// },
|
// {
|
// period: 'T5',
|
// ratedLife: 1216,
|
// currentLife: 752
|
// }
|
// ],
|
// [
|
// {
|
// period: 'T6',
|
// ratedLife: 756,
|
// currentLife: 355
|
// },
|
// {
|
// period: 'T9',
|
// ratedLife: 984,
|
// currentLife: 763
|
// },
|
// {
|
// period: 'T3',
|
// ratedLife: 385,
|
// currentLife: 264
|
// },
|
// {
|
// period: 'T4',
|
// ratedLife: 952,
|
// currentLife: 752
|
// },
|
// {
|
// period: 'T3',
|
// ratedLife: 454,
|
// currentLife: 246
|
// },
|
// {
|
// period: 'T9',
|
// ratedLife: 635,
|
// currentLife: 255
|
// },
|
// {
|
// period: 'T9',
|
// ratedLife: 1300,
|
// currentLife: 670
|
// }
|
// ]
|
// ]
|
// },
|
toolLife: {
|
brandList: [],
|
lifeList: []
|
},
|
maxBrandToolLifeListLength: null,
|
modalVisible: false
|
}
|
},
|
created() {
|
this.currentProductionInfo = Object.assign({}, this.$route.query)
|
console.log('this.currentProductionInfo', this.currentProductionInfo)
|
this.getTodayProductionPlanByApi()
|
this.getEquipmentStatusByApi()
|
this.getToolLifeListByApi()
|
},
|
computed: {
|
getCurrentYear() {
|
return moment().format('YYYY')
|
},
|
getCurrentMonth() {
|
return moment().format('MM')
|
},
|
getCurrentDay() {
|
return moment().format('DD')
|
},
|
getTotalPlanQuantity() {
|
if (this.todayProductionPlanList.length > 0) return this.todayProductionPlanList.reduce((sum, item) => sum + item.planCount, 0)
|
else return 0
|
}
|
},
|
methods: {
|
getTodayProductionPlanByApi() {
|
api.getTodayProductionPlanApi(this.currentProductionInfo.productionId)
|
.then(res => {
|
if (res.success) this.todayProductionPlanList = res.result
|
})
|
},
|
|
clickToLoadMore() {
|
|
},
|
|
getEquipmentStatusByApi() {
|
api.getEquipmentStatusApi(this.currentProductionInfo.productionId)
|
.then(res => {
|
if (res.success) this.equipmentStatusList = res.result
|
})
|
},
|
|
getToolLifeListByApi() {
|
api.getToolLifeListApi(this.currentProductionInfo.productionId)
|
.then(res => {
|
console.log('res', res)
|
if (res.success && res.result.length > 0) {
|
const brandList = []
|
let lifeList = []
|
res.result.forEach(item => {
|
if (!brandList.includes(item.equipmentName)) {
|
brandList.push(item.equipmentName)
|
}
|
})
|
brandList.forEach(brand => {
|
const currentBrandLifeList = res.result.filter(item => item.equipmentName === brand)
|
lifeList.push(currentBrandLifeList)
|
})
|
this.maxBrandToolLifeListLength = Object.assign([], lifeList).sort((a, b) => b.length - a.length)[0].length
|
console.log('brandList', brandList)
|
console.log('lifeList', lifeList)
|
console.log('maxBrandToolLifeListLength', this.maxBrandToolLifeListLength)
|
this.toolLife = { brandList, lifeList }
|
}
|
})
|
},
|
|
getToolCurrentLifeDataBgColor(record) {
|
if (record.currentLife / record.ratedLife > 0.8) {
|
return '#FF9A10'
|
} else {
|
return '#218A21'
|
}
|
},
|
|
mouseEnterItem(e) {
|
if (e.target.clientWidth >= e.target.scrollWidth) {
|
e.target.style.pointerEvents = 'none' // 阻止鼠标事件 pointer-events 属性用于设置元素是否对鼠标事件做出反应。
|
}
|
},
|
|
isDeviceContinuous(productionOrder) {
|
switch (+productionOrder) {
|
case 4:
|
return true
|
case 5:
|
return true
|
default:
|
return false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.full-screen {
|
width: 100%;
|
height: 100%;
|
background-color: #000;
|
color: #fff;
|
font-weight: lighter;
|
padding: 0 1vw 0.5vw;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
cursor: default;
|
overflow: hidden;
|
|
.page-title {
|
display: flex;
|
justify-content: center;
|
font-size: 2.5vw;
|
}
|
|
.load-more {
|
display: flex;
|
justify-content: flex-end;
|
-webkit-justify-content: flex-end;
|
font-size: 1vw;
|
|
div {
|
background-color: #83BF31;
|
margin: 0 0.5% 0.5% 0;
|
padding: 0 0.3%;
|
cursor: pointer;
|
}
|
}
|
|
table {
|
td {
|
border: 0.1vw solid #fff;
|
}
|
}
|
|
.plan-table {
|
width: 100%;
|
flex: 1;
|
font-size: 1.2vw;
|
table-layout: fixed;
|
|
td {
|
height: 2.2vw;
|
text-align: center;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
.current-date {
|
color: #f00;
|
display: inline-block;
|
margin: 0 2vw;
|
}
|
}
|
}
|
|
.device-container {
|
height: 30%;
|
/*background-image: url("../../../assets/1 Line.jpg");*/
|
/*background-repeat: no-repeat;*/
|
/*background-size: 100% 100%;*/
|
display: flex;
|
justify-content: center;
|
|
.single-device-container {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding-top: 2%;
|
font-size: 1vw;
|
|
.status-image-container {
|
height: 20%;
|
}
|
|
.device-image-container {
|
height: 50%;
|
margin-bottom: 5%;
|
}
|
|
.device-name {
|
height: 10%;
|
}
|
}
|
|
img {
|
height: 100%;
|
}
|
}
|
|
.bottom-container {
|
height: 35%;
|
display: flex;
|
justify-content: space-between;
|
|
.alarm-container {
|
width: 35%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.alarm-title {
|
font-size: 1.2vw;
|
background-color: #639AFF;
|
}
|
.alarm-content {
|
flex: 1;
|
background-color: #8C8A8C;
|
}
|
}
|
|
.table-container {
|
width: 64%;
|
height: 100%;
|
display: flex;
|
|
.table-title {
|
height: 100%;
|
background-color: #639AFF;
|
writing-mode: vertical-lr;
|
font-size: 2.2vw;
|
display: flex;
|
justify-content: center;
|
border: 0.1vw solid #fff;
|
border-right: none;
|
}
|
|
.table-body-container {
|
flex: 1;
|
overflow: auto;
|
|
.manage-table {
|
width: 100%;
|
font-size: 1vw;
|
text-align: center;
|
border-collapse: separate;
|
border-spacing: 0;
|
position: relative;
|
|
.table-head {
|
height: 3vw;
|
background-color: #639AFF;
|
position: sticky;
|
position: -webkit-sticky;
|
top: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
