From 83bff199d22d380fc7e1b83bb2db0f0814385530 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 07 十二月 2023 16:11:34 +0800
Subject: [PATCH] 饼图背景优化、统计数量字体和位置调整、订单完成比率背景和颜色调整、工单进度列表修改
---
src/views/cockpitPage/components/WorkOrderProgress.vue | 17 ++--
public/cockpitPage/order-complete.png | 0
src/components/cockpitPage/BackgroundBoardLayout.vue | 10 +-
src/views/cockpitPage/components/CountView.vue | 74 ++++++++----------
src/views/cockpitPage/components/PerSonnelProductivity.vue | 17 ++--
src/views/cockpitPage/components/StatisticalBox.vue | 16 ++-
src/views/cockpitPage/components/OrderCompleteRadio.vue | 21 ++++
public/cockpitPage/machine-chart-bg.png | 0
src/views/cockpitPage/index.vue | 19 ++--
src/views/cockpitPage/components/MachineStartupRate.vue | 23 ++++-
10 files changed, 116 insertions(+), 81 deletions(-)
diff --git a/public/cockpitPage/machine-chart-bg.png b/public/cockpitPage/machine-chart-bg.png
index c29f09b..1d01e02 100644
--- a/public/cockpitPage/machine-chart-bg.png
+++ b/public/cockpitPage/machine-chart-bg.png
Binary files differ
diff --git a/public/cockpitPage/order-complete.png b/public/cockpitPage/order-complete.png
new file mode 100644
index 0000000..06a2fee
--- /dev/null
+++ b/public/cockpitPage/order-complete.png
Binary files differ
diff --git a/src/components/cockpitPage/BackgroundBoardLayout.vue b/src/components/cockpitPage/BackgroundBoardLayout.vue
index 721dd56..5342e36 100644
--- a/src/components/cockpitPage/BackgroundBoardLayout.vue
+++ b/src/components/cockpitPage/BackgroundBoardLayout.vue
@@ -53,7 +53,7 @@
// 鏁翠綋鍐呰竟璺�
$layoutPadding: 12px;
// 涓婅竟鍥哄畾楂�
-$topBlockHeight: 90px;
+$topBlockHeight: 100px;
// 宸︿晶澶撮儴鏁版嵁楂樺害
$leftHeaderHeight: 8%;
// 宸︿晶鍏叡鍙宠竟璺�
@@ -67,7 +67,7 @@
// 鍙充晶甯冨眬鍧楅珮搴�
$rightBlockHeight: calc(100vh - 120px);
// 宸︿笅涓婅竟璺�
-$leftBottomMarginTop: 30px;
+$leftBottomMarginTop: 40px;
// 宸︿笅宸︿晶鍖哄煙瀹�
$leftBottomLeftWidth: 37%;
// 宸︿笅鍙充晶鍖哄煙瀹�
@@ -77,8 +77,8 @@
background-image: url("/cockpit-bg.jpg");
background-position-x: center;
background-repeat: no-repeat;
- background-position: center center;
- background-attachment: fixed;
+ // background-position: center center;
+ // background-attachment: fixed;
background-size: cover;
display: flex;
align-items: center;
@@ -89,7 +89,7 @@
width: 100%;
text-align: center;
position: absolute;
- top: 0px;
+ top: 10px;
font-size: 32px;
color: #01f5fe;
font-weight: 700;
diff --git a/src/views/cockpitPage/components/CountView.vue b/src/views/cockpitPage/components/CountView.vue
index c2c6da9..c967bb7 100644
--- a/src/views/cockpitPage/components/CountView.vue
+++ b/src/views/cockpitPage/components/CountView.vue
@@ -7,10 +7,9 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- <span class="value-span1">
- {{ totalObject.InternalDeviceRunningAmount + "" }}
+ <span class="value-span">
+ {{ totalObject.InternalDeviceRunningAmount }}鍙�
</span>
- <span class="unit-span">鍙�</span>
</div>
</div>
</div>
@@ -20,38 +19,35 @@
</div>
<div class="value-view">
<div class="title-margin-left">
- <span class="value-span1">{{
- totalObject.ExternalDeviceRunningAmount
- }}</span>
- <span>鍙�</span>
+ <span class="value-span"
+ >{{ totalObject.ExternalDeviceRunningAmount }}鍙�</span
+ >
</div>
</div>
</div>
</div>
<div class="box">
<div class="left">
- <div class="title-view">
- <div>璁″垝澶栧姞宸ユ暟</div>
- </div>
- <div class="value-view">
- <div class="title-margin-left">
- <span class="value-span">{{
- totalObject.OutPlanProductionAmount
- }}</span>
- <span>浠�</span>
- </div>
- </div>
- </div>
- <div class="right">
<div class="title-view">
<div>璁″垝鐢熶骇鏁�</div>
</div>
<div class="value-view">
<div class="title-margin-left">
- <span class="value-span">{{
- totalObject.PlanProductionAmount
- }}</span>
- <span>浠�</span>
+ <span class="value-span"
+ >{{ totalObject.PlanProductionAmount }}浠�</span
+ >
+ </div>
+ </div>
+ </div>
+ <div class="right">
+ <div class="title-view">
+ <div>璁″垝澶栧姞宸ユ暟</div>
+ </div>
+ <div class="value-view">
+ <div class="title-margin-left">
+ <span class="value-span"
+ >{{ totalObject.OutPlanProductionAmount }}浠�</span
+ >
</div>
</div>
</div>
@@ -59,27 +55,25 @@
<div class="box">
<div class="left">
<div class="title-view">
- <div>瀹為檯澶栧姞宸ユ暟</div>
+ <div>瀹為檯鐢熶骇鏁�</div>
</div>
<div class="value-view">
<div class="title-margin-left">
- <span class="value-span">{{
- totalObject.RealExternalProductionAmount
- }}</span>
- <span>浠�</span>
+ <span class="value-span"
+ >{{ totalObject.RealProductionAmount }}浠�</span
+ >
</div>
</div>
</div>
<div class="right">
<div class="title-view">
- <div>瀹為檯鐢熶骇鏁�</div>
+ <div>瀹為檯澶栧姞宸ユ暟</div>
</div>
<div class="value-view">
<div class="title-margin-left">
- <span class="value-span">{{
- totalObject.RealProductionAmount
- }}</span>
- <span>浠�</span>
+ <span class="value-span"
+ >{{ totalObject.RealExternalProductionAmount }}浠�</span
+ >
</div>
</div>
</div>
@@ -156,7 +150,7 @@
left;
background-size: 100% 100%;
background-repeat: no-repeat;
- font-size: 20px;
+ font-size: 17px;
color: #01f7fd;
font-family: "Arial Normal", "Arial";
font-weight: 400;
@@ -168,11 +162,11 @@
// white-space: nowrap;
display: flex;
align-items: center;
- .value-span1 {
- margin-top: 5px;
- // height: 100%;
- // max-width: 3em;
- }
+ // .value-span1 {
+ // margin-top: 5px;
+ // height: 100%;
+ // max-width: 3em;
+ // }
// .value-span {
// height: 100%;
// max-width: 3em;
diff --git a/src/views/cockpitPage/components/MachineStartupRate.vue b/src/views/cockpitPage/components/MachineStartupRate.vue
index 0daa82e..8af3e2f 100644
--- a/src/views/cockpitPage/components/MachineStartupRate.vue
+++ b/src/views/cockpitPage/components/MachineStartupRate.vue
@@ -8,7 +8,7 @@
<span class="top-rate">{{ startupRate + "%" }}</span>
</div>
</div>
- <div class="chart" ref="chart"></div>
+ <div id="main" class="chart" ref="chart"></div>
</div>
</div>
</template>
@@ -40,6 +40,8 @@
}
myChart = echarts.init(chartDom);
let img = "/cockpitPage/machine-chart-bg.png";
+ let height = myChart.getHeight() / 1;
+ let width = height + 5;
let option;
if (data) {
option = {
@@ -52,11 +54,10 @@
{
type: "image",
z: 5,
- right: 25,
style: {
image: img,
- width: 240,
- height: 245,
+ width: width,
+ height: height,
opacity: 0.55,
},
left: "center",
@@ -112,6 +113,20 @@
};
option && myChart.setOption(option);
+ // window.addEventListener("resize", function () {
+ // // var chart = echarts.getInstanceByDom(document.getElementById("main"));
+ // let width = myChart.getWidth();
+ // let height = myChart.getHeight();
+ // console.log(width, height, "sssssssssss");
+ // let logo = myChart.getOption().graphic[0].elements[0];
+ // console.log(logo, "fffff");
+ // logo.style.width = width / 2;
+ // logo.style.height = height / 2;
+ // myChart.setOption({
+ // graphic: [logo],
+ // });
+ // myChart.resize();
+ // });
} else {
option = {};
myChart.setOption(option, true);
diff --git a/src/views/cockpitPage/components/OrderCompleteRadio.vue b/src/views/cockpitPage/components/OrderCompleteRadio.vue
index 9d447b0..65f3a64 100644
--- a/src/views/cockpitPage/components/OrderCompleteRadio.vue
+++ b/src/views/cockpitPage/components/OrderCompleteRadio.vue
@@ -14,7 +14,13 @@
: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>
@@ -120,6 +126,12 @@
background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
center center / cover;
}
+ .setTitle-complete .el-progress-bar__inner {
+ position: relative;
+ // background: #552d08;
+ background: url("../../../../public/cockpitPage/order-complete.png")
+ no-repeat center center / cover;
+ }
.setTitle-right .el-progress-bar__innerText {
position: absolute;
top: 2px;
@@ -129,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>
diff --git a/src/views/cockpitPage/components/PerSonnelProductivity.vue b/src/views/cockpitPage/components/PerSonnelProductivity.vue
index f9ef786..b67e410 100644
--- a/src/views/cockpitPage/components/PerSonnelProductivity.vue
+++ b/src/views/cockpitPage/components/PerSonnelProductivity.vue
@@ -236,7 +236,6 @@
},
getChartRight(chartName, data) {
let chartDom = this.$refs[chartName];
- // let myRightChart = echarts.init(chartDom);
if (
myRightChart != null &&
myRightChart != "" &&
@@ -246,6 +245,8 @@
}
myRightChart = echarts.init(chartDom);
let img = "/cockpitPage/dotted-circle.png";
+ let height = myRightChart.getHeight() / 1;
+ let width = height + 5;
let option;
if (data) {
option = {
@@ -257,11 +258,11 @@
elements: [
{
type: "image",
- z: 3,
+ // z: 3,
style: {
image: img,
- width: 240,
- height: 240,
+ width: width,
+ height: height,
},
left: "center",
top: "center",
@@ -286,8 +287,8 @@
borderRadius: 4,
formatter: function (params) {
let label =
- params.name.length > 5
- ? `${params.name.slice(0, 4)}...`
+ params.name.length > 4
+ ? `${params.name.slice(0, 3)}...`
: params.name;
return `{a|${label}} {b|${params.value + "%"}}`;
},
@@ -350,7 +351,7 @@
.chart-left {
width: calc(60% - 20px);
- height: 100%;
+ height: calc(100% - 20px);
margin-right: 20px;
float: left;
border: 1px solid #00ffff;
@@ -360,7 +361,7 @@
.chart-right {
width: 40%;
float: left;
- height: 100%;
+ height: calc(100% - 20px);
position: relative;
.chart-bg {
width: 100%;
diff --git a/src/views/cockpitPage/components/StatisticalBox.vue b/src/views/cockpitPage/components/StatisticalBox.vue
index c354d63..851656a 100644
--- a/src/views/cockpitPage/components/StatisticalBox.vue
+++ b/src/views/cockpitPage/components/StatisticalBox.vue
@@ -4,12 +4,15 @@
<div class="box">
<div class="commom-title">{{ item.label }}</div>
<div
+ v-if="item.label == '鐗╂枡涓嶈冻/寰呮帓绋�'"
+ class="commom-value redColor"
+ >
+ {{ item.value }}/{{ item.value1 }}
+ </div>
+ <div
+ v-else
class="commom-value"
- :class="
- item.label == '寤舵湡浜や粯' || item.label == '鐗╂枡涓嶈冻'
- ? 'redColor'
- : ''
- "
+ :class="item.label == '寤舵湡浜や粯' ? 'redColor' : ''"
>
{{ item.value }}
</div>
@@ -43,7 +46,8 @@
},
{
value: 10,
- label: "鐗╂枡涓嶈冻",
+ value1: 0,
+ label: "鐗╂枡涓嶈冻/寰呮帓绋� ",
},
{
value: 2,
diff --git a/src/views/cockpitPage/components/WorkOrderProgress.vue b/src/views/cockpitPage/components/WorkOrderProgress.vue
index b10bdab..72dc38e 100644
--- a/src/views/cockpitPage/components/WorkOrderProgress.vue
+++ b/src/views/cockpitPage/components/WorkOrderProgress.vue
@@ -26,6 +26,7 @@
prop="Product"
label="浜у搧"
align="center"
+ min-width="100"
show-overflow-tooltip
>
</el-table-column>
@@ -51,7 +52,7 @@
show-overflow-tooltip
>
</el-table-column>
- <el-table-column label="瀹屾垚杩涘害" align="center" min-width="160">
+ <el-table-column label="瀹屾垚杩涘害" align="center" min-width="130">
<template slot-scope="scope">
<div class="progerss-bg">
<div
@@ -71,12 +72,13 @@
</div>
</template>
</el-table-column>
- <el-table-column label="寤舵湡棰勮" align="center">
+ <el-table-column label="寤舵湡棰勮" align="center" width="90">
<template slot-scope="scope">
<div v-show="scope.row.DelayDays > 0" class="round-view">
<div class="round red-bg"></div>
<div class="title red-color">
- {{ scope.row.DelayDays + "澶�" }}
+ {{ scope.row.DelayDays > 10 ? ">10" : scope.row.DelayDays
+ }}{{ "澶�" }}
</div>
</div>
<div v-show="scope.row.DelayDays < 0" class="round-view">
@@ -198,12 +200,11 @@
.round-view {
display: flex;
justify-content: center;
-
+ align-items: center;
.round {
- width: 22px;
- height: 22px;
- border-radius: 11px;
-
+ width: 16px;
+ height: 16px;
+ border-radius: 8px;
margin-right: 5px;
}
.red-bg {
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
index 17dc483..6745256 100644
--- a/src/views/cockpitPage/index.vue
+++ b/src/views/cockpitPage/index.vue
@@ -75,7 +75,7 @@
{ value: 0, label: "鎬讳骇閲�" },
{ value: 0, label: "鐢熶骇宸ュ崟鏁�" },
{ value: 0, label: "寤舵湡浜や粯" },
- { value: 0, label: "鐗╂枡涓嶈冻" },
+ { value: 0, label: "鐗╂枡涓嶈冻/寰呮帓绋�" },
{ value: 0, label: "璁″垝杈炬垚鐜�" },
],
// 鏈哄櫒寮�鏈虹巼
@@ -165,8 +165,9 @@
item.value = data?.WorkOrderAmount ?? 0;
} else if (item.label === "寤舵湡浜や粯") {
item.value = data?.DelayWorkOrderAmount ?? 0;
- } else if (item.label === "鐗╂枡涓嶈冻") {
+ } else if (item.label === "鐗╂枡涓嶈冻/寰呮帓绋�") {
item.value = data?.MaterialMissWorkOrderAmount ?? 0;
+ item.value1 = data?.WaitSchedulingWorkOrderAmount ?? 0;
} else if (item.label === "璁″垝杈炬垚鐜�") {
let value =
typeof data?.PlanOrderFinishRate === "string"
@@ -206,7 +207,9 @@
setLeftBlock3(data) {
console.log(this.setNumbers(data?.OutPlanProductionAmount ?? 0));
this.totalObject = {
- InternalDeviceRunningAmount: data?.InternalDeviceRunningAmount ?? 0,
+ InternalDeviceRunningAmount: (
+ data?.InternalDeviceRunningAmount ?? 0
+ ).toString(),
ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
OutPlanProductionAmount: this.setNumbers(
data?.OutPlanProductionAmount ?? 0
@@ -309,10 +312,10 @@
// 璁＄畻鍔犲伐鏁� 鐢熶骇鏁�
setNumbers(val) {
if (val > 1000 && val < 10000) {
- let count = (val / 1000).toFixed(1);
+ let count = (val / 1000).toFixed(2);
return count.toString() + "鍗�";
} else if (val >= 10000 && val < 100000) {
- let count1 = (val / 10000).toFixed(1);
+ let count1 = (val / 10000).toFixed(2);
return count1.toString() + "涓�";
} else if (val >= 100000 && val < 1000000) {
let count1 = (val / 100000).toFixed(0);
@@ -324,8 +327,8 @@
let count1 = (val / 10000000).toFixed(0);
return count1.toString() + "鍗冧竾";
} else if (val >= 100000000 && val < 1000000000) {
- let count1 = (val / 100000000).toFixed(1);
- return count1.toString() + "浜�";
+ let count1 = (val / 100000000).toFixed(2);
+ return count1 + "浜�";
} else if (val >= 1000000000 && val < 10000000000) {
let count1 = (val / 1000000000).toFixed(0);
return count1.toString() + "鍗佷嚎";
@@ -339,7 +342,7 @@
let count1 = (val / 1000000000000).toFixed(0);
return count1.toString() + "涓囦嚎";
} else {
- return val;
+ return val.toString();
}
},
},
--
Gitblit v1.8.0