From bb7f2e3ecbd47edfde477d742990bcbad3d601e1 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 04 十二月 2023 11:43:41 +0800
Subject: [PATCH] 接口联调及人员饼图模块样式优化
---
src/views/cockpitPage/components/CountView.vue | 42 ++++++++--
src/views/cockpitPage/components/PerSonnelProductivity.vue | 17 +++-
src/views/cockpitPage/components/StatisticalBox.vue | 47 ++++++++---
src/views/cockpitPage/index.vue | 75 +++++++++++++++++-
src/api/cockpitPage/index.js | 9 ++
5 files changed, 158 insertions(+), 32 deletions(-)
diff --git a/src/api/cockpitPage/index.js b/src/api/cockpitPage/index.js
new file mode 100644
index 0000000..0da3058
--- /dev/null
+++ b/src/api/cockpitPage/index.js
@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+// 鑾峰彇缃戠粶閰嶇疆
+export const getDashboard = () => {
+ return request({
+ url: "/v1/dashboard/dashboard",
+ method: "get",
+ });
+};
diff --git a/src/views/cockpitPage/components/CountView.vue b/src/views/cockpitPage/components/CountView.vue
index 29898ae..f8c97b5 100644
--- a/src/views/cockpitPage/components/CountView.vue
+++ b/src/views/cockpitPage/components/CountView.vue
@@ -3,10 +3,12 @@
<div class="box">
<div class="left">
<div class="title-view">
- <div>寮�鏈哄彴鏁�</div>
+ <div>鑷湁寮�鏈哄彴鏁�</div>
</div>
<div class="value-view">
- <div class="title-margin-left">200鍙�</div>
+ <div class="title-margin-left">
+ {{ totalObject.InternalDeviceRunningAmount + "鍙�" }}
+ </div>
</div>
</div>
<div class="right">
@@ -14,7 +16,9 @@
<div>澶栧姞宸ュ彴鏁�</div>
</div>
<div class="value-view">
- <div class="title-margin-left">500鍙�</div>
+ <div class="title-margin-left">
+ {{ totalObject.ExternalDeviceRunningAmount + "鍙�" }}
+ </div>
</div>
</div>
</div>
@@ -24,7 +28,9 @@
<div>璁″垝澶栧姞宸ユ暟</div>
</div>
<div class="value-view">
- <div class="title-margin-left">4000浠�</div>
+ <div class="title-margin-left">
+ {{ totalObject.OutPlanProductionAmount + "浠�" }}
+ </div>
</div>
</div>
<div class="right">
@@ -32,7 +38,9 @@
<div>璁″垝鐢熶骇鏁�</div>
</div>
<div class="value-view">
- <div class="title-margin-left">2000浠�</div>
+ <div class="title-margin-left">
+ {{ totalObject.PlanProductionAmount + "浠�" }}
+ </div>
</div>
</div>
</div>
@@ -42,7 +50,9 @@
<div>瀹為檯澶栧姞宸ユ暟</div>
</div>
<div class="value-view">
- <div class="title-margin-left">4000浠�</div>
+ <div class="title-margin-left">
+ {{ totalObject.RealExternalProductionAmount + "浠�" }}
+ </div>
</div>
</div>
<div class="right">
@@ -50,7 +60,9 @@
<div>瀹為檯鐢熶骇鏁�</div>
</div>
<div class="value-view">
- <div class="title-margin-left">2000浠�</div>
+ <div class="title-margin-left">
+ {{ totalObject.RealProductionAmount + "浠�" }}
+ </div>
</div>
</div>
</div>
@@ -60,7 +72,21 @@
<script>
export default {
components: {},
- props: {},
+ props: {
+ totalObject: {
+ type: Object,
+ default: () => {
+ return {
+ InternalDeviceRunningAmount: 0,
+ ExternalDeviceRunningAmount: 0,
+ OutPlanProductionAmount: 0,
+ PlanProductionAmount: 0,
+ RealExternalProductionAmount: 0,
+ RealProductionAmount: 0,
+ };
+ },
+ },
+ },
data() {
return {};
},
diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue
index cdd40ec..b0dbd06 100644
--- a/src/views/cockpitPage/components/PerSonnelProductivity.vue
+++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue
@@ -212,8 +212,8 @@
z: 3,
style: {
image: img,
- width: 248,
- height: 248,
+ width: 238,
+ height: 238,
},
left: "center",
top: "center",
@@ -240,8 +240,17 @@
borderWidth: 5,
borderRadius: 4,
formatter: function (params) {
- let str = params.name + params.value + "%";
- return str;
+ return `{a|${params.name}} {b|${params.value + "%"}}`;
+ },
+ rich: {
+ a: {
+ color: "#00ffff",
+ fontSize: 14,
+ },
+ b: {
+ color: "#fccd1d",
+ fontSize: 14,
+ },
},
},
},
diff --git a/src/views/cockpitPage/components/StatisticalBox.vue b/src/views/cockpitPage/components/StatisticalBox.vue
index f456aaa..c354d63 100644
--- a/src/views/cockpitPage/components/StatisticalBox.vue
+++ b/src/views/cockpitPage/components/StatisticalBox.vue
@@ -2,11 +2,11 @@
<div class="statistical-box">
<div v-for="item in allList" class="all-bg">
<div class="box">
- <div class="commom-title">{{ item.title }}</div>
+ <div class="commom-title">{{ item.label }}</div>
<div
class="commom-value"
:class="
- item.title == '寤舵湡浜や粯' || item.title == '鐗╂枡涓嶈冻'
+ item.label == '寤舵湡浜や粯' || item.label == '鐗╂枡涓嶈冻'
? 'redColor'
: ''
"
@@ -21,18 +21,39 @@
<script>
export default {
components: {},
- props: {},
- data() {
- return {
- allList: [
- { title: "寮�鏈哄彴鏁�", value: 200 },
- { title: "鎬讳骇閲�", value: 1200 },
- { title: "鐢熶骇宸ュ崟鏁�", value: 200 },
- { title: "寤舵湡浜や粯", value: 20 },
- { title: "鐗╂枡涓嶈冻", value: 10 },
- { title: "璁″垝杈炬垚鐜�", value: 2 },
+ props: {
+ allList: {
+ type: Array,
+ default: () => [
+ {
+ value: 200,
+ label: "寮�鏈哄彴鏁�",
+ },
+ {
+ value: 1200,
+ label: "鎬讳骇閲�",
+ },
+ {
+ value: 200,
+ label: "鐢熶骇宸ュ崟鏁�",
+ },
+ {
+ value: 20,
+ label: "寤舵湡浜や粯",
+ },
+ {
+ value: 10,
+ label: "鐗╂枡涓嶈冻",
+ },
+ {
+ value: 2,
+ label: "璁″垝杈炬垚鐜�",
+ },
],
- };
+ },
+ },
+ data() {
+ return {};
},
mounted() {},
watch: {},
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index 626dc4b..c090ee5 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -1,13 +1,13 @@
<template>
<BackgroundBoardLayout>
<template #leftBlock1>
- <StatisticalBox></StatisticalBox>
+ <StatisticalBox :all-list="allList"></StatisticalBox>
</template>
<template #leftBlock2>
<MachineStartupRate></MachineStartupRate>
</template>
<template #leftBlock3>
- <CountView></CountView>
+ <CountView :total-object="totalObject"></CountView>
</template>
<template #leftBlock4>
<OrderCompleteRadio></OrderCompleteRadio>
@@ -16,8 +16,7 @@
<WorkOrderProgress></WorkOrderProgress>
</template>
<template #leftBlock6>
- <PerSonnelProductivity
- ></PerSonnelProductivity>
+ <PerSonnelProductivity></PerSonnelProductivity>
</template>
<template #rightBlock1>
<DeviceChart></DeviceChart>
@@ -42,6 +41,7 @@
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
import OrderCompleteRadio from "@/views/cockpitPage/components/OrderCompleteRadio";
import WorkOrderProgress from "@/views/cockpitPage/components/WorkOrderProgress";
+import { getDashboard } from "@/api/cockpitPage/index";
export default {
components: {
StatisticalBox,
@@ -57,11 +57,72 @@
},
props: {},
data() {
- return {};
+ return {
+ allList: [
+ { value: 0, label: "寮�鏈哄彴鏁�" },
+ { value: 0, label: "鎬讳骇閲�" },
+ { value: 0, label: "鐢熶骇宸ュ崟鏁�" },
+ { value: 0, label: "寤舵湡浜や粯" },
+ { value: 0, label: "鐗╂枡涓嶈冻" },
+ { value: 0, label: "璁″垝杈炬垚鐜�" },
+ ],
+ totalObject: {},
+ };
},
- mounted() {},
+ mounted() {
+ this.getDashboard();
+ setInterval(() => {
+ this.getDashboard();
+ }, 300000);
+ },
watch: {},
- methods: {},
+ methods: {
+ async getDashboard() {
+ await getDashboard().then((res) => {
+ console.log(res);
+ // 宸︿笂鏁板�肩粺璁℃暟鎹�
+ this.setLeftBlock1(res.data);
+ // 宸︿腑鏁版嵁缁熻鍊�
+ this.setLeftBlock3(res.data);
+ });
+ },
+ // 澶勭悊宸︿笂鏁版嵁
+ setLeftBlock1(data) {
+ this.allList.map((item) => {
+ if (item.label === "寮�鏈哄彴鏁�") {
+ item.value = data?.DeviceRunningAmount ?? 0;
+ } else if (item.label === "鎬讳骇閲�") {
+ item.value = data?.TotalProductionAmount ?? 0;
+ } else if (item.label === "鐢熶骇宸ュ崟鏁�") {
+ item.value = data?.WorkOrderAmount ?? 0;
+ } else if (item.label === "寤舵湡浜や粯") {
+ item.value = data?.DelayWorkOrderAmount ?? 0;
+ } else if (item.label === "鐗╂枡涓嶈冻") {
+ item.value = data?.MaterialMissWorkOrderAmount ?? 0;
+ } else if (item.label === "璁″垝杈炬垚鐜�") {
+ item.value =
+ typeof data?.PlanOrderFinishRate === "string"
+ ? parseFloat(
+ data?.PlanOrderFinishRate.length > 0
+ ? data?.PlanOrderFinishRate
+ : "0"
+ )
+ : data?.PlanOrderFinishRate ?? 0;
+ }
+ });
+ },
+ // 宸︿腑鏁版嵁缁熻鍊�
+ setLeftBlock3(data) {
+ this.totalObject = {
+ InternalDeviceRunningAmount: data?.InternalDeviceRunningAmount ?? 0,
+ ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
+ OutPlanProductionAmount: data?.OutPlanProductionAmount ?? 0,
+ PlanProductionAmount: data?.PlanProductionAmount ?? 0,
+ RealExternalProductionAmount: data?.RealExternalProductionAmount ?? 0,
+ RealProductionAmount: data?.RealProductionAmount ?? 0,
+ };
+ },
+ },
};
</script>
--
Gitblit v1.8.0