From db8db08adfc64cafb22ba01a4c707e1bcf12d2e9 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期五, 01 十二月 2023 19:43:36 +0800 Subject: [PATCH] Merge branch 'zwf' of http://192.168.5.5:10010/r/web/SchedulingDashboard into zwf --- 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