From f7cc97f27910c7d570f07df5d0dbd29d3f06049c Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期六, 12 十月 2024 15:14:27 +0800
Subject: [PATCH] 1、调整导航栏为侧边模式时的项目标题 2、调整页面顶部栏颜色 3、解决设备报警页面由于缩放引起的组件遮挡文字问题 4、总控车间看板右侧图表调整为自动轮播 5、分控车间看板每日生产计划仅展示3项，完整表格在右上角查看更多中查看
---
src/views/mdc/base/SubControlWorkshopSignage.vue | 727 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 446 insertions(+), 281 deletions(-)
diff --git a/src/views/mdc/base/SubControlWorkshopSignage.vue b/src/views/mdc/base/SubControlWorkshopSignage.vue
index 45ad472..9d66565 100644
--- a/src/views/mdc/base/SubControlWorkshopSignage.vue
+++ b/src/views/mdc/base/SubControlWorkshopSignage.vue
@@ -2,8 +2,12 @@
<div class="full-screen">
<div class="page-title">
- <div style="margin-right: 10vw">{{$route.params.id}}#</div>
- <div>{{getSubControlSignageName}}</div>
+ <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">
@@ -36,300 +40,340 @@
<tbody>
<tr v-for="(item,index) in todayProductionPlanList" :key="index">
- <td colspan="2">{{item.machineId}}</td>
- <td colspan="2">{{item.productionName}}</td>
- <a-tooltip :destroyTooltipOnHide="true" placement="topRight" @mouseenter="mouseEnterItem">
- <template slot="title">
- <span style="font-size: 1vw">{{item.partCode}}</span>
- </template>
- <td colspan="2">{{item.partCode}}</td>
- </a-tooltip>
- <td colspan="2">{{item.partName}}</td>
- <td>{{item.planQuantity}}</td>
- <td>{{item.finishedQuantity}}</td>
- <td>{{item.qualifiedQuantity}}</td>
- <td>{{item.finishedQuantity?(item.qualifiedQuantity/item.finishedQuantity)*100+'%':''}}</td>
- <td colspan="2">{{item.processNum}}</td>
- <td colspan="2">{{item.orderNum}}</td>
- <td>{{item.groupName}}</td>
+ <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="line-bg"></div>
+ <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>
- <table class="manage-table">
- <tr class="table-head">
- <td rowspan="9" style="width: 3vw">
- <div class="table-title">鍒�鍏峰鍛界鐞�</div>
- </td>
- <td></td>
- <td v-for="(item,index) in toolLife.brandList" :key="index" colspan="2">{{item}}</td>
- </tr>
+ <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 toolLife.lifeList">
- <tr>
- <td style="width: 7vw">棰濆畾瀵垮懡</td>
- <template v-for="(item,index) in listItem">
- <td rowspan="2" style="width: 2.5vw">{{item.period}}</td>
- <td style="width: 5vw">{{item.ratedLife}}</td>
- </template>
- </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 listItem">
- <td :style="{backgroundColor:getToolCurrentLifeDataBgColor(item)}">{{item.currentLife}}</td>
+ <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>
- </tr>
- </template>
- </table>
+ </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: {},
+ components: { SignageModal },
data() {
return {
- todayProductionPlanList: [
+ 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: [
{
- 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绠变綋鐝�'
+ oporation: 0,
+ equipmentId: '5045-7076'
},
{
- machineId: '5899-8060',
- productionName: '妗佹灦',
- partCode: 'LY1104-3-38C-105',
- partName: '浼犲姩绠卞３浣�',
- planQuantity: 21,
- finishedQuantity: 13,
- qualifiedQuantity: 13,
- processNum: '35',
- orderNum: '2407093503003',
- groupName: '80绠变綋鐝�'
+ oporation: 3,
+ equipmentId: '5068-7005'
},
{
- machineId: '5899-8060',
- productionName: '妗佹灦',
- partCode: '1204-1.38D.185-1',
- partName: '鍚庝紶鍔ㄧ澹充綋',
- planQuantity: 9,
- finishedQuantity: 0,
- qualifiedQuantity: 0,
- processNum: '35',
- orderNum: '2407103501002',
- groupName: '80绠变綋鐝�'
+ 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: [
- [
- {
- 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
- }
- ]
- ]
- }
+ 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: {
- getSubControlSignageName() {
- let subControlSignageName = ''
- switch (+this.$route.params.id) {
- case 1:
- subControlSignageName = '1024鍚庣鍔犲伐绾�'
- break
- case 2:
- subControlSignageName = '1024鍓嶇鍔犲伐绾�'
- break
- case 3:
- subControlSignageName = '鍓嶆墭鏋跺姞宸ョ嚎'
- break
- case 4:
- subControlSignageName = '80浼犲姩澹冲姞宸ョ嚎'
- break
- case 5:
- subControlSignageName = '80鍑忛�熷櫒澹充綋鍔犲伐绾�'
- break
- case 6:
- subControlSignageName = '绠变綋鍔犲伐绾�'
- break
- case 7:
- subControlSignageName = '宸�熷櫒杞存壙搴у姞宸ョ嚎'
- break
- case 8:
- subControlSignageName = '鍒跺姩鍣ㄦ椿濉炲姞宸ョ嚎'
- break
- case 9:
- subControlSignageName = '涓皬浠跺姞宸ョ嚎'
- break
- }
- return subControlSignageName
- },
getCurrentYear() {
return moment().format('YYYY')
},
@@ -340,10 +384,54 @@
return moment().format('DD')
},
getTotalPlanQuantity() {
- return this.todayProductionPlanList.reduce((sum, item) => sum + item.planQuantity, 0)
+ 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'
@@ -355,6 +443,17 @@
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
}
}
}
@@ -373,12 +472,7 @@
flex-direction: column;
justify-content: space-between;
cursor: default;
-
- table {
- td {
- border: 0.1vw solid #fff;
- }
- }
+ overflow: hidden;
.page-title {
display: flex;
@@ -386,8 +480,29 @@
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;
@@ -406,15 +521,43 @@
}
}
- .line-bg {
+ .device-container {
height: 30%;
- background-image: url("../../../assets/1 Line.jpg");
- background-repeat: no-repeat;
- background-size: 100% 100%;
+ /*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 {
- flex: 1;
+ height: 35%;
display: flex;
justify-content: space-between;
@@ -434,22 +577,44 @@
}
}
- .manage-table {
+ .table-container {
width: 64%;
- font-size: 1vw;
- text-align: center;
+ height: 100%;
+ display: flex;
- .table-head {
- height: 3vw;
+ .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-title {
- writing-mode: vertical-lr;
- font-size: 1.8vw;
+ .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>
\ No newline at end of file
--
Gitblit v1.9.3