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 | 89 ++++++++++++++++++++++++++++++++++----------
1 files changed, 69 insertions(+), 20 deletions(-)
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index c90a781..2e0c45d 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -4,25 +4,27 @@
<ChartTitle name="璁㈠崟瀹屾垚姣旂巼"></ChartTitle>
</div>
<div class="list-view">
- <!-- <ul> -->
<template v-for="item in tableList">
<div class="table-bg-view">
<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'
+ : item.radio == 100
+ ? 'setTitle-complete'
+ : 'setTitle-left'
+ "
></el-progress>
- <!-- <div class="container">
- <div class="item" v-for="i in 40" :key="i"></div>
- </div> -->
</div>
</div>
</template>
- <!-- </ul> -->
</div>
</div>
</template>
@@ -33,21 +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: 70 },
- { title: "DD19070049", radio: 85 },
- { title: "DD19070050", radio: 30 },
- ],
+ startIndex: 0,
+ time: 0,
};
},
mounted() {
- console.log(this.$refs.middle.$el, "sssssssss");
+ setInterval(() => {
+ this.startIndex += 4;
+ }, 5000);
},
- watch: {},
+ 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>
@@ -62,6 +91,7 @@
}
.list-view {
height: calc(100% - 20px);
+ padding-right: 5px;
.table-bg-view {
display: flex;
align-items: center;
@@ -69,15 +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;
}
}
}
@@ -89,17 +124,31 @@
}
.el-progress-bar__inner {
position: relative;
- // background: #552d08;
background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
center center / cover;
}
- .el-progress-bar__innerText {
+ .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;
top: 2px;
- right: -70px;
+ right: -66px;
text-align: left;
font-size: 18px;
width: 60px;
}
+ .setTitle-left .el-progress-bar__innerText {
+ 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