From e8cd7922bbd14d926c7e3e6df0b1695b499d78e4 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 01 四月 2026 11:04:42 +0800
Subject: [PATCH] 生产看板统计
---
src/assets/BI/SCbgleft.png | 0
src/views/reportAnalysis/productionStatistics/index.vue | 157 ++++++++++++++++++++++++++++++++++++++++++----------
src/assets/BI/SCbgright.png | 0
src/assets/BI/SCbg.png | 0
4 files changed, 126 insertions(+), 31 deletions(-)
diff --git a/src/assets/BI/SCbg.png b/src/assets/BI/SCbg.png
new file mode 100644
index 0000000..613bdc3
--- /dev/null
+++ b/src/assets/BI/SCbg.png
Binary files differ
diff --git a/src/assets/BI/SCbgleft.png b/src/assets/BI/SCbgleft.png
new file mode 100644
index 0000000..cb30480
--- /dev/null
+++ b/src/assets/BI/SCbgleft.png
Binary files differ
diff --git a/src/assets/BI/SCbgright.png b/src/assets/BI/SCbgright.png
new file mode 100644
index 0000000..382247b
--- /dev/null
+++ b/src/assets/BI/SCbgright.png
Binary files differ
diff --git a/src/views/reportAnalysis/productionStatistics/index.vue b/src/views/reportAnalysis/productionStatistics/index.vue
index b457e61..c188b4d 100644
--- a/src/views/reportAnalysis/productionStatistics/index.vue
+++ b/src/views/reportAnalysis/productionStatistics/index.vue
@@ -118,28 +118,29 @@
</div>
<!-- 涓棿涓績鐜� -->
<div class="center-ring">
- <!-- <div class="center-ring-box">
- <div class="center-metric m1">
- <div class="center-metric-label">椤圭洰浜ч噺</div>
- <div class="center-metric-value">{{ projectProduction }}</div>
- <div class="center-metric-unit">浠�</div>
+ <div class="center-ring-box">
+ <div class="ring-box-topright">
+ <div class="topright-label">鍥哄簾澶勭悊閲�</div>
</div>
- <div class="center-metric m2">
- <div class="center-metric-label">鍥轰綋澶勭悊閲�</div>
- <div class="center-metric-value">{{ solidWaste澶勭悊閲� }}</div>
- <div class="center-metric-unit">鍚�</div>
+ <div class="ring-box-left">
+ <div class="left-label">绮夌叅鐏�</div>
+ <div class="left-value">鏈堝鐞� <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 鍚� 骞村鐞� <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 鍚�</div>
+ <div class="left-label"
+ style="margin-top: 2vh;">鐭宠啅</div>
+ <div class="left-value">鏈堝鐞� <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 鍚� 骞村鐞� <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 鍚�</div>
</div>
- <div class="center-metric m3">
- <div class="center-metric-label">鐮屽潡浜ч噺</div>
- <div class="center-metric-value">{{ blockProduction }}</div>
- <div class="center-metric-unit">浠�</div>
+ <div class="ring-box-topleft">
+ <div class="topleft-label">椤圭洰浜ч噺</div>
</div>
- <div class="center-metric m4">
- <div class="center-metric-label">鏉挎潗浜ч噺</div>
- <div class="center-metric-value">{{ boardProduction }}</div>
- <div class="center-metric-unit">浠�</div>
+ <div class="ring-box-right">
+ <div class="right-label">鐮屽潡浜ч噺</div>
+ <div class="right-value">鏈堜骇閲� <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 鍚� 骞翠骇閲� <span style="font-weight: bold;font-size: 1.3vh;">7812
+ </span> 鍚�</div>
+ <div class="right-label"
+ style="margin-top: 2vh;">鏉挎潗浜ч噺</div>
+ <div class="right-value">鏈堜骇閲� <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 鍚� 骞翠骇閲� <span style="font-weight: bold;font-size: 1.3vh;">7812</span> 鍚�</div>
</div>
- </div> -->
+ </div>
</div>
<!-- 宸︿笅锛氱敓浜ф垚鏈崟鑰楃粺璁★紙鏉挎潗锛� -->
<div class="bi-panel bi-panel-bottom-left">
@@ -208,6 +209,8 @@
:class="{ active: customerTimeDimension === 'month' }"
@click="handleCustomerTimeDimensionChange('month')">鏈�</span>
</div>
+ <div ref="customerTrendChart"
+ class="echart-fill"></div>
<!-- <div class="bi-panel-body">
<div class="chart-unit-row chart-unit-single">
<span>鍗曚綅锛氬</span>
@@ -639,8 +642,8 @@
// 鏂板瀹㈡埛瓒嬪娍鍥捐〃閰嶇疆
const customerTrendChartOption = computed(() => {
- const customerTypes = ["鍏ㄩ儴", "鐭崇伆", "姘存偿", "閾濈矇鑶�", "鑴辨ā鍓�"];
- const colors = ["#00A4ED", "#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447"];
+ const customerTypes = ["鍏ㄩ儴", "绮夌叅鐏�", "鐭宠啅", "鐭崇伆"];
+ const colors = ["#00A4ED", "#4A8BFF", "#8A6BFF", "#C8C447"];
const year = 2024;
const periodType = customerTimeDimension.value;
@@ -1357,12 +1360,12 @@
}
/* .scroll-table tbody tr:nth-child(odd) {
- background-color: rgba(64, 158, 255, 0.05);
- }
+ background-color: rgba(64, 158, 255, 0.05);
+ }
- .scroll-table tbody tr:nth-child(even) {
- background-color: rgba(64, 158, 255, 0.1);
- } */
+ .scroll-table tbody tr:nth-child(even) {
+ background-color: rgba(64, 158, 255, 0.1);
+ } */
.oddTableTr {
background-color: rgba(64, 158, 255, 0.05);
}
@@ -1534,11 +1537,11 @@
grid-row: 1 / span 2;
position: absolute;
background: url("@/assets/BI/imageSS@2x.png") no-repeat bottom center;
- background-size: 100% 30%;
+ background-size: 80% 30%;
left: 25%;
top: 25%;
- transform: translate(-50%, -50%);
- width: 60vh;
+ transform: translate(-50%, -45%);
+ width: 50%;
height: 40.5vh;
z-index: 3;
pointer-events: none;
@@ -1546,11 +1549,103 @@
.center-ring-box {
position: absolute;
/* inset: 0; */
- height: 100%;
+ height: 88%;
width: 100%;
+ margin-top: 3%;
/* background-color: #fff; */
- background: url("@/assets/BI/imageSStop.png") no-repeat center center;
- background-size: 80% 90%;
+ background: url("@/assets/BI/SCbg.png") no-repeat center center;
+ background-size: 100% 100%;
+ }
+ .ring-box-topright {
+ position: absolute;
+ top: 6vh;
+ right: 0;
+ width: 25%;
+ height: 15%;
+ background: url("@/assets/BI/SCbgright.png") no-repeat center center;
+ background-size: 100% 100%;
+ text-align: right;
+ }
+ .ring-box-topleft {
+ position: absolute;
+ top: 6vh;
+ left: 0;
+ width: 25%;
+ height: 15%;
+ background: url("@/assets/BI/SCbgleft.png") no-repeat center center;
+ background-size: 100% 100%;
+ text-align: left;
+ }
+ .topright-label {
+ font-size: 1.8vh;
+ font-weight: 500;
+ color: rgba(234, 246, 255, 0.9);
+ margin-top: 0;
+ position: relative;
+ bottom: 3vh;
+ right: 1vh;
+ }
+
+ .topleft-label {
+ font-size: 1.8vh;
+ font-weight: 500;
+ color: rgba(234, 246, 255, 0.9);
+ margin-top: 0;
+ position: relative;
+ bottom: 3vh;
+ left: 1vh;
+ }
+ .ring-box-left {
+ /* background-color: #ebebeb; */
+ width: 30%;
+ position: absolute;
+ left: 1vh;
+ top: 56%;
+ transform: translateY(-50%);
+ }
+ .left-label {
+ font-size: 1.4vh;
+ font-weight: 500;
+ color: #0effef;
+ margin-top: 0;
+ position: relative;
+ bottom: 3vh;
+ }
+ .left-value {
+ font-size: 1.2vh;
+ font-weight: 500;
+ color: rgba(234, 246, 255, 0.9);
+ margin-top: 0;
+ position: relative;
+ bottom: 3vh;
+ margin-top: 0.4vh;
+ }
+ .ring-box-right {
+ /* background-color: #ebebeb; */
+ width: 30%;
+ float: right;
+ position: absolute;
+ right: -1vh;
+ top: 56%;
+ transform: translateY(-50%);
+ }
+ .right-label {
+ font-size: 1.4vh;
+ font-weight: 500;
+ color: #ffa60e;
+ margin-top: 0;
+ position: relative;
+ bottom: 3vh;
+ }
+
+ .right-value {
+ font-size: 1.2vh;
+ font-weight: 500;
+ color: rgba(234, 246, 255, 0.9);
+ margin-top: 0;
+ position: relative;
+ bottom: 3vh;
+ margin-top: 0.4vh;
}
.center-ring-bg {
--
Gitblit v1.9.3