From 7f223e7c8f267cff6754f7374b7ec74b90ca2f64 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期五, 01 十二月 2023 19:20:23 +0800
Subject: [PATCH] 订单完成比
---
src/views/cockpitPage/components/CountView.vue | 11 ---
src/views/cockpitPage/components/OrderCompleteRadio.vue | 104 ++++++++++++++++++++++++++++++++++
public/cockpitPage/order-bg.png | 0
src/views/cockpitPage/index.vue | 10 ++
4 files changed, 113 insertions(+), 12 deletions(-)
diff --git a/public/cockpitPage/order-bg.png b/public/cockpitPage/order-bg.png
new file mode 100644
index 0000000..3583180
--- /dev/null
+++ b/public/cockpitPage/order-bg.png
Binary files differ
diff --git a/src/views/cockpitPage/components/CountView.vue b/src/views/cockpitPage/components/CountView.vue
index 9fc582d..29898ae 100644
--- a/src/views/cockpitPage/components/CountView.vue
+++ b/src/views/cockpitPage/components/CountView.vue
@@ -62,16 +62,7 @@
components: {},
props: {},
data() {
- return {
- allList: [
- { title: "寮�鏈哄彴鏁�", value: 200 },
- { title: "鎬讳骇閲�", value: 1200 },
- { title: "鐢熶骇宸ュ崟鏁�", value: 200 },
- { title: "寤舵湡浜や粯", value: 20 },
- { title: "鐗╂枡涓嶈冻", value: 10 },
- { title: "璁″垝杈炬垚鐜�", value: 2 },
- ],
- };
+ return {};
},
mounted() {},
watch: {},
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
new file mode 100644
index 0000000..3f964b9
--- /dev/null
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -0,0 +1,104 @@
+<template>
+ <div class="order-complete-radio">
+ <div class="title-bg-view">
+ <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"
+ :text-inside="true"
+ :percentage="item.radio"
+ :define-back-color="'#083f55'"
+ :text-color="'#fec718'"
+ ></el-progress>
+ <!-- <div class="container">
+ <div class="item" v-for="i in 40" :key="i"></div>
+ </div> -->
+ </div>
+ </div>
+ </template>
+ <!-- </ul> -->
+ </div>
+ </div>
+</template>
+
+<script>
+import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
+export default {
+ components: {
+ ChartTitle,
+ },
+ props: {},
+ data() {
+ return {
+ tableList: [
+ { title: "DD19070047", radio: 50 },
+ { title: "DD19070048", radio: 70 },
+ { title: "DD19070049", radio: 85 },
+ { title: "DD19070050", radio: 30 },
+ ],
+ };
+ },
+ mounted() {
+ console.log(this.$refs.middle.$el, "sssssssss");
+ },
+ watch: {},
+ methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.order-complete-radio {
+ width: calc(100% - 20px);
+ height: calc(100% - 20px);
+ margin-top: 10px;
+ .title-bg-view {
+ width: calc(100% - 20px);
+ }
+ .list-view {
+ height: calc(100% - 20px);
+ .table-bg-view {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ background: #083f55;
+ height: calc(20% - 10px);
+ width: 100%;
+ border-radius: 50px;
+ .left {
+ width: 20%;
+ margin: 0 10px;
+ color: #02f1fc;
+ }
+ .middle {
+ flex: 1;
+ margin: 0 10px;
+ }
+ }
+ }
+}
+::v-deep {
+ .el-progress-bar__outer,
+ .el-progress-bar__inner {
+ border-radius: inherit;
+ }
+ .el-progress-bar__inner {
+ position: relative;
+ // background: #552d08;
+ background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
+ center center / cover;
+ }
+ .el-progress-bar__innerText {
+ position: absolute;
+ top: 2px;
+ right: -50px;
+ text-align: left;
+ font-size: 18px;
+ }
+}
+</style>
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index 476bc4b..ca65da2 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -9,9 +9,13 @@
<template #leftBlock3>
<CountView></CountView>
</template>
-
+ <template #leftBlock4>
+ <OrderCompleteRadio></OrderCompleteRadio>
+ </template>
<template #leftBlock6>
- <PerSonnelProductivity @should-reload="reloadAllData"></PerSonnelProductivity>
+ <PerSonnelProductivity
+ @should-reload="reloadAllData"
+ ></PerSonnelProductivity>
</template>
<template #rightBlock1>
<DeviceChart @should-reload="reloadAllData"></DeviceChart>
@@ -34,6 +38,7 @@
import DeviceChart from "@/views/cockpitPage/components/DeviceChart.vue";
import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
+import OrderCompleteRadio from "@/views/cockpitPage/components/OrderCompleteRadio";
export default {
components: {
StatisticalBox,
@@ -44,6 +49,7 @@
BarChart,
MachineStartupRate,
CountView,
+ OrderCompleteRadio,
},
props: {},
data() {
--
Gitblit v1.8.0