From fed911357bda5169f00d0c6f32f8ca011389bbf6 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 07 九月 2022 08:57:04 +0800
Subject: [PATCH] 1.车间看板优化
---
src/views/kb/zhkb.vue | 468 ++++++++++++++++++---------------------------------------
1 files changed, 150 insertions(+), 318 deletions(-)
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 4c538d4..4d3255d 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -25,151 +25,77 @@
</div>
<div class="kb_left_top kb_pd10">
-
- <div v-if="false" class="kb_left_top_block">
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent01.children !== undefined ? lineContent01.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent01.children !== undefined ? lineContent01.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent01.children !== undefined ? lineContent01.children.partname : '' }}
- </div>
-
- <div v-if="lineContent01.children&&lineContent01.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent01.children ? parseFloat(lineContent01.children.qty) : '' }}
- </div>
- </div>
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent01.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent01.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
+ <div class="kb_left_top02">
+ <div v-for="item in lineContent4" :key="item.workcode" class="kb_left_top_block">
+ <div class="kb_block02 kb_pd10">
+ <div>
+ <div>閿�鍞崟鍙�:{{ item.saleordercode }}</div>
+ <div class="kb_mt5">
+ 鍔犲伐鍗曞彿:{{ item.workcode }}
</div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
+ <div class="kb_mt5">
+ 浜у搧鍚嶇О:{{ item.partname }}
+ </div>
+ <div class="kb_mt5">
+ 浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
</div>
</div>
</div>
- <div v-if="lineContent01.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent01.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
+ <div class="kb_block03 kb_pd10 ">
+ <div v-if="item.children&&item.children.length>0" class="flex_s_c">
+ <div
+ v-for="(it,ind) in item.children"
+ :key="ind"
+ class="kb_block03_content flex_c_c"
+ >
+ <div>
+ <div class="content01">{{ it.stepname }}</div>
+ </div>
+ <div class="content02Parent">
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
+ </div>
+ </div>
</div>
</div>
- </div>
+ <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
+ <div
+ v-for="(it,ind) in item.children"
+ :key="ind"
+ class="kb_block03_02_content flex_c_c"
+ >
+ <div class="flex_c_c content01">
+ <div
+ v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
+ class="circle"
+ style="background-color: blue;"
+ />
+ <div
+ v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
+ class="circle"
+ style="background-color: rgb(255 255 255)"
+ />
+ <div
+ v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
+ class="circle"
+ />
+ <div v-else class="circleYellow" />
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
-
- <div v-for="item in lineContent4" :key="item.workcode" class="kb_left_top_block">
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ item.saleordercode }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt5">
- 浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
- </div>
- </div>
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="item.children&&item.children.length>0" class="flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ it.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
</div>
<!-- 2-->
<div class="kb_left_bottom kb_pd10">
@@ -222,7 +148,7 @@
<el-table-column
prop="wo_code"
label="鍔犲伐鍗曞彿"
- width="170"
+ width="175"
/>
<el-table-column
prop="partname"
@@ -232,7 +158,7 @@
<el-table-column
prop="partspec"
label="瑙勬牸"
- width="130"
+ width="125"
>
<template slot-scope="{row}">
<div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>
@@ -374,14 +300,6 @@
return {
headTime: '',
- lineArr: [],
- // lineContent01: {},
- lineContent01: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
-
lineContent: [],
lineContent4: [],
@@ -438,7 +356,6 @@
this.ShopArr.push(item.org_code)
})
}
- console.log(this.ShopArr, 997)
})
}, 1000 * 30)
},
@@ -450,27 +367,24 @@
length = this.lineContent.length
count = Math.ceil(length / 4) // 闇�瑕佽疆鎾殑缁勬暟 4涓负涓�缁�
this.lineContent4 = this.lineContent.slice(0, 4)
- // this.lineContent4[0].children.push({})
})
let start = 0
const task = setInterval(() => {
- if (Math.floor(start / 4) === count) {
- // clearInterval(task)
- // this.getShopSearchLine()
+ if (Math.floor(start / 4) === count && count !== 0) {
start = 0
LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
this.lineContent = res.data
length = this.lineContent.length
count = Math.ceil(length / 4) // 闇�瑕佽疆鎾殑缁勬暟 4涓负涓�缁�
this.lineContent4 = this.lineContent.slice(0, 4)
- console.log(count)
})
+ } else if (count === 0) {
+ clearInterval(task)
+ this.getShopSearchLine()
}
this.lineContent4 = this.lineContent.slice(start, start + 4)
start = start + 4
- console.log(start)
- console.log('鎵ц浜嗭紒锛侊紒')
}, 1000 * 3)
},
@@ -580,8 +494,6 @@
</script>
<style scoped lang="scss">
-//$kbBorderColor: #3A0088;
-//$kbBorderColor: #09d8f2;
$kbBorderColor: rgba(9, 216, 242, 0.4);
$kbBackgroundColor: rgba(30, 33, 46, 0.6);
.kb_content {
@@ -589,9 +501,7 @@
position: relative;
height: 990px;
width: 100%;
- //background-color: #000;
letter-spacing: 2px;
- //color: #d8d7d9;
color: #fff;
.kb_left {
@@ -621,120 +531,111 @@
display: flex;
flex-direction: column;
justify-content: flex-start;
- //justify-content: flex-end;
- //padding-top: 30px;
padding-top: 70px;
- //padding-bottom: 25px;
-
- .kb_left_top_block {
- //margin-top: 10px;
- width: 100%;
- height: 100px;
+ .kb_left_top02 {
display: flex;
- border-radius: 5px;
- font-size: 14px;
- //padding: 10px 0;
- //border: 1px solid rgba(255, 255, 255, 0.6);
- //border: 1px solid $kbBorderColor;
- //border-bottom: 1px solid $kbBorderColor;
- border-top: 1px solid $kbBorderColor;
- border-right: 1px solid $kbBorderColor;
- border-left: 1px solid $kbBorderColor;
+ flex-direction: column;
justify-content: flex-start;
+ border: 1px solid $kbBorderColor;
+ height: 400px;
+ border-radius: 5px;
+ background-color: $kbBackgroundColor;
- .kb_block02 {
- width: 304px;
+ .kb_left_top_block {
+ width: 100%;
+ height: 100px;
display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
- }
+ font-size: 14px;
+ border-bottom: 1px solid $kbBorderColor;
+ justify-content: flex-start;
- .kb_block03 {
- width: 1020px;
- //width: 100%;
- display: flex;
- flex-direction: column;
- font-size: 12px;
- background-color: $kbBackgroundColor;
- border-radius: 5px;
+ .kb_block02 {
+ width: 304px;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid $kbBorderColor;
+ }
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- //width: 152px;
- width: 180px;
- height: 50px;
- margin-right: 15px;
- //margin-right: 20px;
+ .kb_block03 {
+ width: 1020px;
+
display: flex;
flex-direction: column;
+ font-size: 12px;
+ border-radius: 5px;
- .content01 {
- //width: 50px;
- width: 100%;
- height: 18px;
- border-bottom: 1px solid $kbBorderColor;
+ .kb_block03_content {
+ border: 1px solid $kbBorderColor;
+ width: 180px;
+ height: 50px;
+ margin-right: 15px;
display: flex;
- align-items: center;
- justify-content: center;
- }
+ flex-direction: column;
- .content02Parent {
- display: flex;
- //height:30px;
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 50%;
- }
-
- .content02_2 {
- height: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
+ .content01 {
+ width: 100%;
+ height: 18px;
+ border-bottom: 1px solid $kbBorderColor;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- }
- }
- }
+ .content02Parent {
+ display: flex;
+ .content02 {
+ width: 60px;
+ border-right: 1px solid $kbBorderColor;
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
+ .content02_1 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 50%;
+ }
- .kb_block03_02_content {
- //width: 152px;
- width: 180px;
- margin-right: 15px;
+ .content02_2 {
+ height: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
+ .borderTop {
+ border-top: 1px solid $kbBorderColor;
+ }
+ }
}
}
-
}
+
+ .kb_block03_02 {
+ margin-top: 7px;
+ display: flex;
+
+ .kb_block03_02_content {
+ width: 180px;
+ margin-right: 15px;
+
+ .content01 {
+ .circle {
+ width: 26px;
+ height: 26px;
+ background-color: #00ff8b;
+ border-radius: 50%;
+ }
+
+ }
+
+ }
+ }
+
}
- }
-
- .kb_left_top_block:last-child{
- border-bottom: 1px solid $kbBorderColor;
+ .kb_left_top_block:nth-child(4n) {
+ border-bottom: none !important;
+ }
}
}
@@ -745,20 +646,10 @@
height: 460px;
display: flex;
flex-direction: column;
- //border: 1px solid $kbBorderColor;
.content_head {
- ////font-size: 26px;
- //font-size: 18px;
- //height: 55px;
- //line-height: 55px;
- ////border-bottom: 1px solid $kbBorderColor;
- ////text-align: center;
- //padding-left: 10px;
-
font-size: 18px;
line-height: 20px;
- //padding-left: 10px;
margin-bottom: 10px;
margin-top: -10px;
color: #00ffff;
@@ -783,7 +674,6 @@
width: 100%;
.kb_right_top_content {
- //border: 1px solid $kbBorderColor;
height: 430px;
display: flex;
flex-direction: column;
@@ -791,7 +681,6 @@
.content_head {
font-size: 18px;
line-height: 20px;
- //padding-left: 10px;
margin-bottom: 10px;
margin-top: -10px;
color: #00ffff;
@@ -799,7 +688,6 @@
.content_body {
border: 1px solid $kbBorderColor;
- //border-radius: 5px;
}
}
}
@@ -821,7 +709,6 @@
width: 100%;
border-radius: 5px;
background-color: $kbBackgroundColor;
- //height: 100%;
}
}
}
@@ -832,7 +719,6 @@
}
::v-deep .el-table__body-wrapper {
- //background-color: #044563;
background-color: rgba(30, 33, 46);
}
@@ -845,64 +731,10 @@
padding: 0 !important;
}
-//
-///* 瀹氫箟keyframes鍔ㄧ敾锛屽懡鍚嶄负blink*/
-//@keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-///*娣诲姞鍏煎鎬у墠缂�*/
-//@-webkit-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-o-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-moz-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-ms-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
.circleYellow {
width: 26px;
height: 26px;
background-color: rgb(255 255 0);
border-radius: 50%;
-
- //animation: blink 2s linear infinite;
- //-webkit-animation: blink 2s linear infinite;
- //-moz-animation: blink 2s linear infinite;
- //-ms-animation: blink 2s linear infinite;
- //-o-animation: blink 2s linear infinite;
}
</style>
--
Gitblit v1.9.3