From 2bf7aff3435c9abcb38b9ced5b6fa56957aeae89 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 13 九月 2023 15:59:56 +0800
Subject: [PATCH] 1 车间质量、仓库管理、及五个车间看板 递交
---
src/views/kanbanManager/zhkb.vue | 420 +++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 274 insertions(+), 146 deletions(-)
diff --git a/src/views/kanbanManager/zhkb.vue b/src/views/kanbanManager/zhkb.vue
index ff39bfe..0c712da 100644
--- a/src/views/kanbanManager/zhkb.vue
+++ b/src/views/kanbanManager/zhkb.vue
@@ -1,29 +1,26 @@
<template>
<div>
<div class="kb_dashboard">
- <!-- 鏄熺┖鑳屾櫙-->
- <div ref="starsRef" class="stars">
- <div v-for="(item, index) in starsCount" :key="index" class="star" />
- </div>
+
+ <div class="kb_backgroundCustom" />
<div class="kb_header">
- <div class="flex_c_c kb_header_text">
- <div id="topBarLeft" style="width:600px;height:100%" />
- 杞﹂棿缁煎悎鏁板瓧鍖栫湅鏉�
- <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
+ <div class="kb_headTime" style="top: 35px;left: 20px">
+ <span>娴欐睙姝ｆ竻鍜屾棩鐢ㄥ埗鍝佹湁闄愬叕鍙�</span>
</div>
- <div class="kb_headTime" style="left: 85px">
- <span>娴欐睙鏂板嚡杩暟瀛楃鎶�鑲′唤鏈夐檺鍏徃</span>
+ <div class="kb_headTime kb_header_text" style="top: 35px;" :style="{left:ShopArr[0]==='202'?'780px':'800px'}">
+ <span>{{ title }}鏁板瓧鍖栫湅鏉�</span>
</div>
- <div class="kb_headTime">
+ <div class="kb_headTime" style="top: 35px;right: 25px">
<span>{{ headTime }}</span>
</div>
</div>
- <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
+
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;">
<!-- 宸﹁竟-->
- <div style="width: 1400px ;height: 969px;" class="flex_c_b">
+ <div style="width: 1400px ;height: 950px;z-index: 2;margin-top:50px;justify-content:flex-start" class="flex_c_b">
<div>
<div class="smallTitle">
<svg-icon icon-class="cxjg" class="svg_class" />
@@ -102,12 +99,12 @@
</div>
</div>
- <div>
+ <div style="margin-top: 20px;">
<div class="smallTitle">
<svg-icon icon-class="cxmc" class="svg_class" />
浜х嚎鍔犲伐浠诲姟
</div>
- <div class="lineContent horn">
+ <div class="lineContent horn" style="height: 400px;">
<el-table
ref="tableDataLeftBottomRef"
:data="tableDataLeftBottom"
@@ -115,7 +112,7 @@
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
- height="428"
+ height="390"
>
<el-table-column
prop="RowNum"
@@ -171,21 +168,21 @@
<el-table-column
prop="plan_qty"
label="浠诲姟鏁伴噺"
- width="105"
+ width="106"
/>
<el-table-column
prop="good_qty"
label="瀹屽伐鏁伴噺"
- width="105"
+ width="106"
/>
<el-table-column
prop="ng_qty"
label="涓嶈壇鏁伴噺"
- width="105"
+ width="106"
/>
<el-table-column
label="瀹屾垚鐜�"
- width="105"
+ width="106"
>
<template slot-scope="{row}">
<div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
@@ -215,7 +212,7 @@
</div>
</div>
<!-- 鍙宠竟-->
- <div style="width: 450px;height: 969px;" class="flex_c_b">
+ <div style="width: 450px;height: 950px;z-index: 2;margin-top:50px;justify-content:flex-start" class="flex_c_b">
<div>
<div class="smallTitle">
<svg-icon icon-class="drwg" class="svg_class" />
@@ -264,12 +261,12 @@
</div>
</div>
- <div>
+ <div style="margin-top: 20px;">
<div class="smallTitle">
<svg-icon icon-class="top5" class="svg_class" />
涓�鍛ㄤ笉鑹疶op5
</div>
- <div class="lineContent horn">
+ <div class="lineContent horn" style="height: 400px;">
<div id="bar01" class="flex_c_c" style="width: 100%;height:100%" />
</div>
@@ -306,14 +303,26 @@
lineContent3: [],
ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
- starsCount: 800, // 鏄熸槦鏁伴噺
- distance: 900 // 闂磋窛
-
+ codeArr: [
+ { code: '202', name: '鏈哄姞宸ヨ溅闂�' },
+ { code: '205', name: '鍖呰杞﹂棿' },
+ { code: '204', name: '鍠锋秱杞﹂棿' },
+ { code: '203', name: '鎶涘厜杞﹂棿' },
+ { code: '201', name: '鍘嬮摳杞﹂棿' }
+ ],
+ title: '杞﹂棿缁煎悎'
}
},
created() {
setInterval(this.getNowTime, 1000)
+ // this.getShopSearch()
+ let code = ''
+ if (window.location.hash.indexOf('?') !== -1) {
+ code = window.location.hash.split('?')[1].split('=')[1]
+ this.title = this.codeArr.find(i => i.code === code).name
+ this.ShopArr = [code]
+ }
// 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
setInterval(() => {
window.location.reload()
@@ -324,17 +333,19 @@
window.addEventListener('online', this.updateOnlineStatus)
window.addEventListener('offline', this.updateOnlineStatus)
this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
-
- this.getTopBar()
-
- this.getShopSearch()
- this.setStarsRef()
+ this.getAllApi()
},
beforeDestroy() {
window.removeEventListener('online', this.updateOnlineStatus)
window.removeEventListener('offline', this.updateOnlineStatus)
},
methods: {
+ getAllApi() {
+ this.getShopSearchLine()
+ this.getLineSearchTopRightData()
+ this.getLeftBottomData()
+ this.getEcharts()
+ },
// 鏇存柊缃戠粶鐘舵��
updateOnlineStatus(e) {
if (e.isFirst) {
@@ -357,50 +368,155 @@
}
}
},
- setStarsRef() {
- const starNodes = Array.from(this.$refs.starsRef.children)
- starNodes.forEach(item => {
- const speed = 0.2 + Math.random() * 1
- const thisDistance = this.distance + Math.random() * 300
- item.style.transformOrigin = `0 0 ${thisDistance}px`
- item.style.transform = `
- translate3d(0,0,-${thisDistance}px)
- rotateY(${Math.random() * 360}deg)
- rotateX(${Math.random() * -50}deg)
- scale(${speed},${speed})`
- })
- },
// 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
+ // async getShopSearch() {
+ // const res1 = await ShopSearch()
+ // if (res1.code === '200') {
+ // this.ShopArr = []
+ // res1.data.forEach(item => {
+ // this.ShopArr.push(item.org_code)
+ // })
+ //
+ // if (this.ShopArr.length > 0) {
+ // this.getShopSearchLine()
+ // this.getLineSearchTopRightData()
+ // this.getLeftBottomData()
+ // this.getEcharts()
+ // }
+ // }
+ // if (this.ShopArr.length > 0) {
+ // setInterval(() => {
+ // this.ShopSearchTask = ShopSearch().then(res1 => {
+ // if (res1.code === '200') {
+ // this.ShopArr = []
+ // res1.data.forEach(item => {
+ // this.ShopArr.push(item.org_code)
+ // })
+ // }
+ // })
+ // }, 1000 * 60)
+ // }
+ // },
+ // 浜х嚎鍔犲伐涓换鍔�
+ getShopSearchLine() {
+ let length, count
+ LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.lineContent = res.data // 璋冪敤鎺ュ彛杩斿洖鐨勬暟鎹�
+ this.number1 = this.lineContent.length // 浜х嚎鍔犲伐涓换鍔� 鍗曟暟
- if (this.ShopArr.length > 0) {
- this.getShopSearchLine()
- this.getRightRightData()
- this.getLeftBottomData()
- this.getEcharts()
- }
- }
- if (this.ShopArr.length > 0) {
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
+ const newData = []
+ if (this.lineContent.length > 0) {
+ this.lineContent.forEach(item => {
+ if (item.children.length > 5) {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(0, 5)
+ })
+
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(5)
+ })
+ } else {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children
})
}
})
- }, 1000 * 60)
- }
+
+ // console.log(newData.length, 9777)
+ }
+
+ this.lineContent = newData
+ length = this.lineContent.length
+ count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
+ this.lineContent3 = this.lineContent.slice(0, 3)
+ })
+
+ let start = 0
+ this.ShopSearchLineTask = setInterval(() => {
+ if (Math.floor(start / 3) === count && count !== 0) {
+ start = 0
+ LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.lineContent = res.data // 璋冪敤鎺ュ彛杩斿洖鐨勬暟鎹�
+ this.number1 = this.lineContent.length // 浜х嚎鍔犲伐涓换鍔� 鍗曟暟
+
+ const newData = []
+ if (this.lineContent.length > 0) {
+ this.lineContent.forEach(item => {
+ if (item.children.length > 5) {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(0, 5)
+ }
+ )
+
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(5)
+ })
+ } else {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children
+ })
+ }
+ })
+ }
+
+ this.lineContent = newData
+ length = this.lineContent.length
+ count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
+ this.lineContent3 = this.lineContent.slice(0, 3)
+ })
+ } else if (count === 0) {
+ clearInterval(this.ShopSearchLineTask)
+ this.getShopSearchLine()
+ }
+
+ this.lineContent3 = this.lineContent.slice(start, start + 3)
+ start = start + 3
+ }, 1000 * 10)
},
- // 浜х嚎鍔犲伐涓换鍔�
- getShopSearchLine() {
+ // 浜х嚎鍔犲伐涓换鍔�(澶囦唤 鍘熷厛鐨勬柟娉�)
+ getShopSearchLineBack() {
let length, count
LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
this.lineContent = res.data
@@ -432,54 +548,96 @@
},
// 鑾峰彇鍙充笂鏁版嵁 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getRightRightData() {
- let startValue = 0 // 鍒濆鍊�
- const scale = 10// 鍒诲害
-
+ getLineSearchTopRightData() {
LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRightTopTemp = res.data
+ this.tableDataRightTop = res.data
+ const divData = this.$refs.tableDataRightTopRef.bodyWrapper
- this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
+ const temp = setInterval(() => {
+ divData.scrollTop += 1
- const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
- let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+ if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ divData.scrollTop = 0
+ LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.tableDataRightTop = res.data
- const timer = setInterval(() => {
- startValue = startValue + scale
- this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
- if (nowLoop === loop) {
- clearInterval(timer)
- this.getRightRightData()
+ if (this.tableDataRightTop.length > 10) {
+ clearInterval(temp)
+ this.getLineSearchTopRightData()
+ }
+ })
}
-
- nowLoop++
- }, 1000 * 10)
+ }, this.tableDataRightTop.length <= 10 ? 1000 * 15 : 300)
})
+
+ // let startValue = 0 // 鍒濆鍊�
+ // const scale = 10// 鍒诲害
+ //
+ // LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ // this.tableDataRightTopTemp = res.data
+ //
+ // this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
+ //
+ // const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ // let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+ //
+ // const timer = setInterval(() => {
+ // startValue = startValue + scale
+ // this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
+ // if (nowLoop === loop) {
+ // clearInterval(timer)
+ // this.getLineSearchTopRightData()
+ // }
+ //
+ // nowLoop++
+ // }, 1000 * 10)
+ // })
},
// 浜х嚎鍔犲伐浠诲姟 宸︿笅鏁版嵁
getLeftBottomData() {
- let startValue = 0 // 鍒濆鍊�
- const scale = 10// 鍒诲害
-
LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataLeftBottomTemp = res.data
- this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
+ this.tableDataLeftBottom = res.data
- const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
- let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+ const divData = this.$refs.tableDataLeftBottomRef.bodyWrapper
+ this.TableDataRollTask = setInterval(() => {
+ // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ divData.scrollTop += 1
+ if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ divData.scrollTop = 0
+ LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.tableDataLeftBottom = res.data
- const timer = setInterval(() => {
- startValue = startValue + scale
- this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
- nowLoop++ // 鏀惧湪杩欓噷鍙互浜嗭紝灏辩瓑寰呴浂鐐瑰嚑绉�
- if (nowLoop === loop) {
- clearInterval(timer)
- this.getLeftBottomData()
+ if (this.tableDataLeftBottom.length > 10) {
+ clearInterval(this.TableDataRollTask)
+ this.getLeftBottomData()
+ }
+ })
}
-
- // nowLoop++ //涔嬪墠鏀惧湪杩欓噷閫昏緫涓嶅锛岀浉宸簡涓�娆＄殑寰幆锛岀浉褰撲簬澶氱瓑寰呬簡10绉�
- }, 1000 * 10)
+ }, this.tableDataLeftBottom.length <= 10 ? 1000 * 15 : 200)
})
+
+ // let startValue = 0 // 鍒濆鍊�
+ // const scale = 10// 鍒诲害
+ //
+ // LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ // this.tableDataLeftBottomTemp = res.data
+ // this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
+ //
+ // const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
+ // let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+ //
+ // const timer = setInterval(() => {
+ // startValue = startValue + scale
+ // this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
+ // nowLoop++ // 鏀惧湪杩欓噷鍙互浜嗭紝灏辩瓑寰呴浂鐐瑰嚑绉�
+ // if (nowLoop === loop) {
+ // clearInterval(timer)
+ // this.getLeftBottomData()
+ // }
+ //
+ // // nowLoop++ //涔嬪墠鏀惧湪杩欓噷閫昏緫涓嶅锛岀浉宸簡涓�娆＄殑寰幆锛岀浉褰撲簬澶氱瓑寰呬簡10绉�
+ // }, 1000 * 10)
+ // })
},
getEcharts() {
@@ -499,11 +657,6 @@
})
}, 1000 * 10)
},
- // 鑾峰彇topEcharts
- getTopBar() {
- loadEcharts('topBarLeft', kbTop())
- loadEcharts('topBarRight', kbTop())
- },
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
const dt = new Date()
@@ -522,7 +675,7 @@
},
headerCellStyle() {
return {
- backgroundColor: '#000',
+ backgroundColor: 'transparent ',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
@@ -534,8 +687,8 @@
return {
padding: '7px 0',
textAlign: 'center',
- backgroundColor: '#000',
- color: '#fff',
+ backgroundColor: 'transparent ',
+ color: '#c7e7ff',
border: 'none',
fontSize: '18px'
}
@@ -549,8 +702,14 @@
$main_color: #09d8f2;
$color01: #00FFFF;
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+ background-color: transparent;
+}
+
.tableData {
- background: #000;
+ background: transparent;
}
.el-table::before {
@@ -661,39 +820,8 @@
border-radius: 50%;
}
-</style>
-
-<!--鏄熺┖-->
-<style lang="css" scoped>
-@keyframes rotate {
- 0% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
- }
- 100% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
- }
-}
-
-.stars {
- transform: perspective(500px);
- transform-style: preserve-3d;
- position: absolute;
- perspective-origin: 50% 100%;
- left: 45%;
- animation: rotate 90s infinite linear;
- bottom: 0;
- z-index: 102;
-}
-
-.star {
- width: 2px;
- height: 2px;
- /*background: #f7f7b6;*/
- background: #8edffc;
- position: absolute;
- left: 0;
- top: 0;
- backface-visibility: hidden;
- z-index: 102;
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+ /* width: 0;瀹藉害涓�0鏆楄棌 */
+ width: 0;
}
</style>
--
Gitblit v1.9.3