From 377d4c4027610c69ccc9e1af913bab579a4d5e17 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 30 七月 2022 14:16:50 +0800
Subject: [PATCH] 1.仓库管理看板静态页面初步实现2.采购订单看板静态页面初步实现
---
src/views/kb/zhkb.vue | 111 +++++++++++++++++++++++++++++++------------------------
1 files changed, 63 insertions(+), 48 deletions(-)
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 4216a3b..ecea0d2 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -16,12 +16,6 @@
<!-- 1-->
<div class="kb_left_top_title01">鐢熶骇浜х嚎锛�</div>
<div class="kb_left_top kb_pd10">
- <!-- <div v-for="item in leftTopData" :key="item.id">-->
- <!-- <div class="kb_block ">-->
- <!-- <div>{{ item.name }}</div>-->
- <!-- <div style="margin-top: 10px">{{ item.value }}</div>-->
- <!-- </div>-->
- <!-- </div>-->
<div class="kb_left_top_block">
<div class="kb_block01 kb_pd10">
<div>
@@ -507,36 +501,21 @@
</div>
</div>
- <!-- <div class="kb_block03_02_content flex_c_c">-->
- <!-- <div class="content02">-->
- <!-- <div class="circle" />-->
- <!-- <div class="line" />-->
- <!-- </div>-->
- <!-- </div>-->
-
- <!-- <div class="kb_block03_02_content flex_c_c">-->
- <!-- <div class="content03">-->
- <!-- <!– <div class="circle" :class="circleMarginLeft" />–>-->
- <!-- <div class="circle" style="background-color: #fff" />-->
- <!-- <!– <div class="line" :class="lineWidth" />–>-->
- <!-- <div class="line" />-->
- <!-- </div>-->
- <!-- </div>-->
-
</div>
</div>
</div>
</div>
<!-- 2-->
- <div class="kb_left_top_title02">鍦ㄥ埗璁㈠崟锛�</div>
<div class="kb_left_bottom kb_pd10">
<div class="kb_left_bottom_content">
+ <div class="content_head">鍦ㄥ埗璁㈠崟</div>
<el-table
:data="tableData"
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
+ height="310"
>
<el-table-column
prop="xh"
@@ -617,15 +596,17 @@
<div class="content_head">褰撴棩杞﹂棿浜х嚎浜у搧鏁伴噺鎺掕</div>
<div class="content_body">
<el-table
+ ref="tableDataRank"
:data="tableDataRank"
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
+ height="400"
>
<el-table-column
prop="xh"
label="搴忓彿"
- width="70"
+ width="75"
/>
<el-table-column
prop="cj"
@@ -851,7 +832,19 @@
{ xh: 'NO.5', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
{ xh: 'NO.6', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
{ xh: 'NO.7', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
- { xh: 'NO.8', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 }
+ { xh: 'NO.8', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.9', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.10', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.11', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.12', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.13', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.14', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.15', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.16', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.17', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.18', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.19', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.20', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 }
]
}
@@ -868,8 +861,10 @@
// setInterval(this.handleData, 2000)
this.getEcharts()
+ // this.gettableDataRankRoll()
},
methods: {
+
// 澶勭悊鏁版嵁
handleData() {
console.log(this.leftTopDataCurrentNumber)
@@ -882,11 +877,25 @@
}
},
+ // 浜х嚎浜у搧鏁伴噺鎺掕婊氬姩鏁堟灉
+ gettableDataRankRoll() {
+ const divData = this.$refs.tableDataRank.bodyWrapper
+ // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
+ setInterval(() => {
+ // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ divData.scrollTop += 40
+ // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
+ if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ // 閲嶇疆table璺濈椤堕儴璺濈
+ divData.scrollTop = 0
+ console.log('璇ヨ姹傛帴鍙ｄ簡锛�')
+ }
+ }, 2000)
+ },
// 鑾峰彇echarts
getEcharts() {
loadEcharts('bar02', bar02())
},
-
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
const dt = new Date()
@@ -904,10 +913,9 @@
this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
},
headerCellStyle() {
- // return { backgroundColor: 'transparent', padding: '0', textAlign: 'center' }
return {
backgroundColor: '#000',
- padding: '17px 0',
+ padding: '10px 0',
textAlign: 'center',
color: '#fff',
borderRight: '1px solid rgba(255,255,255,0.6)'
@@ -944,12 +952,7 @@
.kb_left_top_title01 {
position: absolute;
top: -3px;
- left:15px;
- }
- .kb_left_top_title02{
- position: absolute;
- top: 483px;
- left:15px;
+ left: 15px;
}
.kb_left_top {
@@ -962,36 +965,35 @@
width: 100%;
height: 100px;
display: flex;
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
.kb_block01 {
width: 171px;
display: flex;
align-items: center;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
}
.kb_block02 {
width: 304px;
display: flex;
align-items: center;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
}
.kb_block03 {
width: 843px;
display: flex;
flex-direction: column;
- //text-align: center;
.kb_block03_content {
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
width: 200px;
height: 50px;
.content01 {
width: 50px;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
@@ -999,7 +1001,7 @@
.content02 {
width: 50px;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
.content02_1 {
display: flex;
@@ -1016,7 +1018,7 @@
}
.borderTop {
- border-top: 1px solid rgba(255,255,255,0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.6);
}
}
}
@@ -1069,8 +1071,17 @@
height: 495px;
.kb_left_bottom_content {
- border: 1px solid rgba(255,255,255,0.6);
height: 460px;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid rgba(255, 255, 255, 0.6);
+
+ .content_head {
+ line-height: 55px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ text-align: center;
+ font-size: 26px;
+ }
}
}
}
@@ -1084,16 +1095,16 @@
width: 100%;
.kb_right_top_content {
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
height: 100%;
display: flex;
flex-direction: column;
.content_head {
font-size: 26px;
- height: 76px;
- line-height: 76px;
- border-bottom: 1px solid rgba(255,255,255,0.6);
+ height: 55px;
+ line-height: 55px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
text-align: center;
}
}
@@ -1104,7 +1115,7 @@
margin-top: 8px;
.kb_right_bottom_content {
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
width: 100%;
height: 100%;
}
@@ -1112,4 +1123,8 @@
}
}
+::v-deep .el-table__body-wrapper {
+ background-color: #000;
+}
+
</style>
--
Gitblit v1.9.3