From 8f38a93c9c9ddaf547200a542aecced93f8857a3 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 11 十一月 2024 15:11:50 +0800
Subject: [PATCH] 报警分析页面子表格持续时间增加默认升序排序功能
---
src/views/mdc/base/SubControlWorkshopSignage.vue | 683 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 413 insertions(+), 270 deletions(-)
diff --git a/src/views/mdc/base/SubControlWorkshopSignage.vue b/src/views/mdc/base/SubControlWorkshopSignage.vue
index da2778c..49b6eda 100644
--- a/src/views/mdc/base/SubControlWorkshopSignage.vue
+++ b/src/views/mdc/base/SubControlWorkshopSignage.vue
@@ -6,6 +6,10 @@
<div>{{currentProductionInfo.productionName}}</div>
</div>
+ <div class="load-more">
+ <div @click="modalVisible=true">鐐瑰嚮鏌ョ湅鏇村>></div>
+ </div>
+
<table class="plan-table">
<thead>
<tr style="position: relative">
@@ -36,38 +40,59 @@
<tbody>
<tr v-for="(item,index) in todayProductionPlanList" :key="index">
- <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 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>
+ <template v-if="todayProductionPlanList.length<=3">
+ <tr v-for="(item,index) in 3-todayProductionPlanList.length"
+ :key="index">
+ <td colspan="2"></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>
+ </template>
</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%'}">
+ :style="{marginRight:isDeviceContinuous(currentProductionInfo.productionOrder)?'':'5%'}"
+ @click="openDetail(item)">
<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/yellow.png" v-if="item.oporation===1">
<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>
+ {{item.equipmentId}}
<div class="device-name">
{{item.equipmentName}}
</div>
@@ -80,43 +105,63 @@
<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: 5vw;min-width: 5vw">棰濆畾瀵垮懡</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(toolLife.lifeList[index][listIndex])}">
+ {{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"/>
+
+ <EquipmentDetailModal ref="equipmentDetailModal"/>
</div>
</template>
<script>
import moment from 'moment'
import api from '@/api/mdc'
+ import SignageModal from './modules/SubControlWorkshopSignage/SignageModal'
+ import EquipmentDetailModal from './modules/SubControlWorkshopSignage/EquipmentDetailModal'
export default {
name: 'SubControlWorkshopSignage',
- components: {},
+ components: { EquipmentDetailModal, SignageModal },
data() {
return {
currentProductionInfo: {
@@ -124,215 +169,222 @@
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: [
+ // {
+ // 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'
- }
+ // {
+ // 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: [
- [
- {
- 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() {
@@ -340,6 +392,7 @@
console.log('this.currentProductionInfo', this.currentProductionInfo)
this.getTodayProductionPlanByApi()
this.getEquipmentStatusByApi()
+ this.getToolLifeListByApi()
},
computed: {
getCurrentYear() {
@@ -363,18 +416,69 @@
if (res.success) this.todayProductionPlanList = res.result
})
},
+
+
+ openDetail(item) {
+ if (item.oporation == 0) {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: '璁惧澶勪簬鍏虫満鐘舵�侊紒'
+ })
+ return false
+ }
+ console.log(item)
+ this.$refs.equipmentDetailModal.initData(item.equipmentId)
+ this.$refs.equipmentDetailModal.timerModel(item.equipmentId)
+ },
+
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'
+ if (record && record.currentLife) {
+ if (record.currentLife > 10) {
+ return '#218A21'
+ } else if (record.currentLife >= 5 && record.currentLife <= 10) {
+ return '#FF9A10'
+ } else {
+ return '#f00'
+ }
}
+
+ // if (record.currentLife / record.ratedLife > 0.8) {
+ // return '#FF9A10'
+ // } else {
+ // return '#218A21'
+ // }
},
mouseEnterItem(e) {
@@ -409,12 +513,7 @@
flex-direction: column;
justify-content: space-between;
cursor: default;
-
- table {
- td {
- border: 0.1vw solid #fff;
- }
- }
+ overflow: hidden;
.page-title {
display: flex;
@@ -422,8 +521,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;
@@ -443,7 +563,7 @@
}
.device-container {
- height: 40%;
+ height: 30%;
/*background-image: url("../../../assets/1 Line.jpg");*/
/*background-repeat: no-repeat;*/
/*background-size: 100% 100%;*/
@@ -456,6 +576,8 @@
flex-direction: column;
align-items: center;
padding-top: 2%;
+ font-size: 1vw;
+ cursor: pointer;
.status-image-container {
height: 20%;
@@ -468,7 +590,6 @@
.device-name {
height: 10%;
- font-size: 1vw;
}
}
@@ -478,7 +599,7 @@
}
.bottom-container {
- flex: 1;
+ height: 35%;
display: flex;
justify-content: space-between;
@@ -498,22 +619,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