From 9f6bf76c6411bb7124a863e56bb35bb46b58eabb Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 31 十月 2024 17:48:40 +0800
Subject: [PATCH] 解决零部件管理表格因样式引起的表格不对齐问题
---
src/views/mdc/base/SubControlWorkshopSignage.vue | 137 +++++++++++++++++++++++++++++++++------------
1 files changed, 100 insertions(+), 37 deletions(-)
diff --git a/src/views/mdc/base/SubControlWorkshopSignage.vue b/src/views/mdc/base/SubControlWorkshopSignage.vue
index abad12b..40fcfcb 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,29 +40,48 @@
<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">
@@ -68,7 +91,7 @@
<div class="device-image-container">
<img :src="require('@/assets/page/subControlWorkshopSignage/'+item.equipmentId+'.png')">
</div>
- 1
+ {{item.equipmentId}}
<div class="device-name">
{{item.equipmentName}}
</div>
@@ -96,7 +119,7 @@
<template v-for="(listItem,listIndex) in maxBrandToolLifeListLength">
<template>
<tr>
- <td style="width: 7vw">棰濆畾瀵垮懡</td>
+ <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:'':''}}
@@ -121,16 +144,23 @@
</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: {
@@ -178,22 +208,22 @@
// ],
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: ['鍖楅綈浜�', '閾� 闀�', '妫� 浜�', '涓� 鏇�', '瑗� 鏇�', '瑗� 寰�', '涓� 寰�'],
@@ -352,7 +382,8 @@
brandList: [],
lifeList: []
},
- maxBrandToolLifeListLength: null
+ maxBrandToolLifeListLength: null,
+ modalVisible: false
}
},
created() {
@@ -384,12 +415,28 @@
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 => {
@@ -414,6 +461,7 @@
}
})
},
+
getToolCurrentLifeDataBgColor(record) {
if (record.currentLife / record.ratedLife > 0.8) {
return '#FF9A10'
@@ -462,6 +510,20 @@
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;
@@ -504,6 +566,7 @@
align-items: center;
padding-top: 2%;
font-size: 1vw;
+ cursor: pointer;
.status-image-container {
height: 20%;
--
Gitblit v1.9.3