From 14101bd42ce17dfb9d951d0738abe9d303fb3fe5 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 11 十二月 2023 10:41:39 +0800
Subject: [PATCH] 机器开机率、人员技能比饼图优化
---
src/views/cockpitPage/components/OrderCompleteRadio.vue | 79 ++++++++++++++++++++++++++++++++-------
1 files changed, 64 insertions(+), 15 deletions(-)
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index 11066c7..2e0c45d 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -9,12 +9,18 @@
<div class="left">{{ item.title }}</div>
<div class="middle" ref="middle">
<el-progress
- :stroke-width="20"
+ :stroke-width="18"
:text-inside="true"
:percentage="item.radio"
:define-back-color="'#083f55'"
:text-color="'#fec718'"
- :class="item.radio < 90 ? 'setTitle-right' : 'setTitle-left'"
+ :class="
+ item.radio < 90
+ ? 'setTitle-right'
+ : item.radio == 100
+ ? 'setTitle-complete'
+ : 'setTitle-left'
+ "
></el-progress>
</div>
</div>
@@ -29,19 +35,48 @@
components: {
ChartTitle,
},
- props: {},
+ props: {
+ orderCompleteObject: {
+ type: Object,
+ default: () => {
+ return {
+ startIndex: 0,
+ orderCompleteList: [],
+ };
+ },
+ },
+ },
data() {
return {
- tableList: [
- { title: "DD19070047", radio: 50.6 },
- { title: "DD19070048", radio: 89 },
- { title: "DD19070049", radio: 100 },
- { title: "DD19070050", radio: 30 },
- ],
+ startIndex: 0,
+ time: 0,
};
},
- mounted() {},
- watch: {},
+ mounted() {
+ setInterval(() => {
+ this.startIndex += 4;
+ }, 5000);
+ },
+ computed: {
+ tableList: {
+ get() {
+ if (
+ this.startIndex >= this.orderCompleteObject.orderCompleteList.length
+ ) {
+ this.startIndex = 0;
+ }
+ return this.orderCompleteObject.orderCompleteList.slice(
+ this.startIndex,
+ this.startIndex + 4
+ );
+ },
+ },
+ },
+ watch: {
+ "orderCompleteObject.orderCompleteList"(val) {
+ this.startIndex = this.orderCompleteObject.startIndex;
+ },
+ },
methods: {},
};
</script>
@@ -56,6 +91,7 @@
}
.list-view {
height: calc(100% - 20px);
+ padding-right: 5px;
.table-bg-view {
display: flex;
align-items: center;
@@ -63,16 +99,20 @@
background: #083f55;
height: calc(20% - 10px);
width: 100%;
+ padding-right: 5px;
border-radius: 50px;
transition: all 1s ease-in-out 0s;
.left {
- width: 20%;
+ width: 23%;
margin: 0 10px;
color: #02f1fc;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.middle {
flex: 1;
- margin: 0 10px;
+ margin-right: 5px;
}
}
}
@@ -84,9 +124,13 @@
}
.el-progress-bar__inner {
position: relative;
- // background: #552d08;
background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
center center / cover;
+ }
+ .setTitle-complete .el-progress-bar__inner {
+ position: relative;
+ background: url("../../../../public/cockpitPage/order-complete.png")
+ no-repeat center center / cover;
}
.setTitle-right .el-progress-bar__innerText {
position: absolute;
@@ -97,9 +141,14 @@
width: 60px;
}
.setTitle-left .el-progress-bar__innerText {
- color: rgb(226, 146, 27) !important;
+ color: #fffb00 !important;
font-size: 18px;
width: 60px;
}
+ .setTitle-complete .el-progress-bar__innerText {
+ color: #fff !important;
+ font-size: 16px;
+ width: 60px;
+ }
}
</style>
--
Gitblit v1.8.0