From 1e5dc53615446a620d4d0fc0068c09989686e015 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 04 十二月 2023 18:52:11 +0800
Subject: [PATCH] 设置柱状图自动滚动
---
src/views/cockpitPage/components/WorkOrderProgress.vue | 165 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 158 insertions(+), 7 deletions(-)
diff --git a/src/views/cockpitPage/components/WorkOrderProgress.vue b/src/views/cockpitPage/components/WorkOrderProgress.vue
index a2b870d..22613f6 100644
--- a/src/views/cockpitPage/components/WorkOrderProgress.vue
+++ b/src/views/cockpitPage/components/WorkOrderProgress.vue
@@ -9,7 +9,12 @@
</div>
</div>
<div class="table-box">
- <el-table :data="tableData" style="width: 100%">
+ <el-table
+ ref="table"
+ :data="tableData"
+ style="width: 100%"
+ height="100%"
+ >
<el-table-column
prop="workOrderId"
label="宸ュ崟缂栧彿"
@@ -69,8 +74,16 @@
<el-table-column label="寤舵湡棰勮" align="center">
<template slot-scope="scope">
<div v-show="scope.row.delayWarning > 0" class="round-view">
- <div class="round"></div>
- <div class="title">{{ scope.row.delayWarning + "澶�" }}</div>
+ <div class="round red-bg"></div>
+ <div class="title red-color">
+ {{ scope.row.delayWarning + "澶�" }}
+ </div>
+ </div>
+ <div v-show="scope.row.delayWarning < 0" class="round-view">
+ <div class="round green-bg"></div>
+ <div class="title green-color">
+ {{ scope.row.delayWarning + "澶�" }}
+ </div>
</div>
</template>
</el-table-column>
@@ -149,12 +162,130 @@
],
delayWarning: 0,
},
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: -2,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "A5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "BA5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
+ {
+ workOrderId: "BA5435",
+ product: "浜у搧1",
+ productSpecs: "瑙勬牸",
+ amount: "2000",
+ planTime: "02-23~05-23",
+ completeProgerss: [
+ { status: 1 },
+ { status: 1 },
+ { status: 2 },
+ { status: 0 },
+ ],
+ delayWarning: 0,
+ },
],
};
},
- mounted() {},
+ mounted() {
+ this.setAutoScroll();
+ },
watch: {},
- methods: {},
+ methods: {
+ // 瀹炵幇鑷姩婊氬姩鐨勬柟娉�
+ setAutoScroll() {
+ // 鎷垮埌琛ㄦ牸鎸傝浇鍚庣殑鐪熷疄DOM
+ const table = this.$refs.table;
+ // 鎷垮埌琛ㄦ牸涓壙杞芥暟鎹殑div鍏冪礌
+ const divData = table.bodyWrapper;
+ // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
+ setInterval(() => {
+ // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ divData.scrollTop += 1;
+ // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
+ if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
+ // 閲嶇疆table璺濈椤堕儴璺濈
+ divData.scrollTop = 0;
+ }
+ }, 200); // 婊氬姩閫熷害
+ },
+ },
};
</script>
@@ -192,6 +323,8 @@
}
.table-box {
padding: 20px 15px;
+ height: calc(100% - 75px);
+ overflow: hidden;
.progerss-bg {
width: 100%;
height: 22px;
@@ -219,13 +352,25 @@
.round-view {
display: flex;
justify-content: center;
- color: #ff0000;
+
.round {
width: 22px;
height: 22px;
border-radius: 11px;
- background: #ff0000;
+
margin-right: 5px;
+ }
+ .red-bg {
+ background: #ff0000;
+ }
+ .green-bg {
+ background: #00cc00;
+ }
+ .red-color {
+ color: #ff0000;
+ }
+ .green-color {
+ color: #00cc00;
}
}
}
@@ -251,6 +396,7 @@
// 淇敼琛ㄦ牸瀛椾綋棰滆壊
.el-table__body td {
color: #00ffff;
+ padding: 8px 0;
}
// 璁剧疆琛ㄦ牸鑳屾櫙閫忔槑
.el-table th {
@@ -285,5 +431,10 @@
.el-table::before {
display: none;
}
+ // 淇濈暀鍨傜洿婊氬姩涓旈殣钘忔粴鍔ㄦ潯
+ .el-table__body-wrapper::-webkit-scrollbar {
+ width: 0px;
+ height: 0px;
+ }
}
</style>
--
Gitblit v1.8.0