From e8cd7922bbd14d926c7e3e6df0b1695b499d78e4 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 01 四月 2026 11:04:42 +0800
Subject: [PATCH] 生产看板统计
---
src/views/reportAnalysis/productionStatistics/index.vue | 410 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 314 insertions(+), 96 deletions(-)
diff --git a/src/views/reportAnalysis/productionStatistics/index.vue b/src/views/reportAnalysis/productionStatistics/index.vue
index a168ed9..c188b4d 100644
--- a/src/views/reportAnalysis/productionStatistics/index.vue
+++ b/src/views/reportAnalysis/productionStatistics/index.vue
@@ -54,7 +54,7 @@
@click="handleBlockTimeDimensionChange('month')">鏈�</span>
</div>
<div class="bi-panel-body">
- <div class="chart-filter-tabs">
+ <div class="chart-filter-tabs">
<span v-for="area in salesAreas"
:key="area"
class="cf-tab"
@@ -63,7 +63,12 @@
</div>
<div class="material-info-card">
<div class="material-icon">
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+ <svg width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2">
<path d="M20 7h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z" />
<polyline points="22,7 12,13 2,7" />
</svg>
@@ -113,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">
@@ -149,7 +155,7 @@
@click="handleBoardTimeDimensionChange('month')">鏈�</span>
</div>
<div class="bi-panel-body">
- <div class="chart-filter-tabs">
+ <div class="chart-filter-tabs">
<span v-for="area in salesAreas"
:key="area"
class="cf-tab"
@@ -158,7 +164,12 @@
</div>
<div class="material-info-card">
<div class="material-icon">
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+ <svg width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2">
<path d="M20 7h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z" />
<polyline points="22,7 12,13 2,7" />
</svg>
@@ -198,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>
@@ -209,7 +222,7 @@
<!-- 鍙充笅锛氶攢閲忔帓鍚嶅垎鏋� -->
<div class="bi-panel bi-panel-bottom-right">
<PanelHeader :isFullscreen="true"
- title="鐗╂枡鐢熶骇閲忕粺璁�" />
+ title="鑳借�楃粺璁�" />
<div class="panel-tabs">
<span class="tab-item"
:class="{ active: salesTimeDimension === 'year' }"
@@ -219,15 +232,8 @@
@click="handleSalesTimeDimensionChange('month')">鏈�</span>
</div>
<div class="bi-panel-body">
- <!-- <div class="chart-filter-tabs">
- <span v-for="area in salesAreas"
- :key="area"
- class="cf-tab"
- :class="{ active: selectedArea === area }"
- @click="handleAreaChange(area)">{{ area }}</span>
- </div>
<div ref="salesRankingChart"
- class="echart-fill"></div> -->
+ class="echart-fill"></div>
</div>
</div>
</div>
@@ -426,7 +432,14 @@
// 鏉挎潗鍗曡�楀浘琛ㄩ厤缃�
const boardCostChartOption = computed(() => {
const materials = ["娑堣�楅噺"];
- const colors = ["#00A4ED", "#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447", "#FF6B6B"];
+ const colors = [
+ "#00A4ED",
+ "#34D8F7",
+ "#4A8BFF",
+ "#8A6BFF",
+ "#C8C447",
+ "#FF6B6B",
+ ];
const year = 2024;
const periodType = boardTimeDimension.value;
@@ -520,7 +533,14 @@
// 浜ч噺鍒嗘瀽鍥捐〃閰嶇疆
const productionChartOption = computed(() => {
const salesAreas = ["鍏ㄩ儴", "鐮屽潡", "鏉挎潗"];
- const colors = ["#00A4ED", "#34D8F7", "#4A8BFF", "#8A6BFF", "#C8C447", "#FF6B6B"];
+ const colors = [
+ "#00A4ED",
+ "#34D8F7",
+ "#4A8BFF",
+ "#8A6BFF",
+ "#C8C447",
+ "#FF6B6B",
+ ];
const year = 2024;
const periodType = productionTimeDimension.value;
@@ -622,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;
@@ -723,71 +743,179 @@
};
});
- // 閿�閲忔帓鍚嶅垎鏋愬浘琛ㄩ厤缃�
+ // 鑳借�楃粺璁″浘琛ㄩ厤缃�
const salesRankingChartOption = computed(() => {
- const customers = ["瀹㈡埛BB", "瀹㈡埛AA", "瀹㈡埛CC", "瀹㈡埛DD", "瀹㈡埛DD", "瀹㈡埛DD"];
- const values = [130, 120, 102, 90, 90, 70];
- const barColors = [
- "#34D8F7",
- "#4A8BFF",
- "#8A6BFF",
- "#C8C447",
- "#C8C447",
- "#C8C447",
+ const energyTypes = ["姘�", "鐢�", "钂告苯"];
+ const colors = ["#00A4ED", "#AC43C2", "#F5BC4A"];
+ const year = 2024;
+ const periodType = salesTimeDimension.value;
+
+ // 鐢熸垚鏃堕棿娈�
+ let periods = [];
+ if (periodType === "year") {
+ // 骞村害鏁版嵁锛�6涓湀
+ for (let month = 9; month <= 12; month++) {
+ periods.push(`${month}/${year.toString().slice(2)}`);
+ }
+ for (let month = 1; month <= 3; month++) {
+ periods.push(`${month}/${(year + 1).toString().slice(2)}`);
+ }
+ } else {
+ // 鏈堝害鏁版嵁锛�7澶�
+ const month = 1;
+ for (let day = 1; day <= 7; day++) {
+ periods.push(`${month}/${day}`);
+ }
+ }
+
+ // 涓烘瘡绉嶈兘婧愮被鍨嬬敓鎴愭暟鎹�
+ const waterData = periods.map(() => {
+ return periodType === "year"
+ ? Math.floor(Math.random() * 300) + 400
+ : Math.floor(Math.random() * 30) + 40;
+ });
+ const steamData = periods.map(() => {
+ return periodType === "year"
+ ? Math.floor(Math.random() * 400) + 500
+ : Math.floor(Math.random() * 40) + 50;
+ });
+ const electricityData = periods.map(() => {
+ return periodType === "year"
+ ? Math.floor(Math.random() * 200) + 300
+ : Math.floor(Math.random() * 20) + 30;
+ });
+
+ const series = [
+ {
+ name: "姘�",
+ type: "bar",
+ data: waterData,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#00A4ED" },
+ { offset: 1, color: "#0F285A" },
+ ]),
+ borderRadius: [getResponsiveValue(4), getResponsiveValue(4), 0, 0],
+ },
+ barWidth: getResponsiveValue(6),
+ },
+ {
+ name: "鐢�",
+ type: "line",
+ data: electricityData,
+ itemStyle: {
+ color: "#AC43C2",
+ },
+ lineStyle: {
+ width: getResponsiveValue(1),
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: "#AC43C2" },
+ { offset: 1, color: "#AC43C2" },
+ ]),
+ },
+ symbol: "circle",
+ symbolSize: getResponsiveValue(8),
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#AC43C250" },
+ { offset: 1, color: "#AC43C203" },
+ ]),
+ },
+ },
+ {
+ name: "钂告苯",
+ type: "bar",
+ data: steamData,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#F5BC4A" },
+ { offset: 1, color: "#591C22" },
+ ]),
+ borderRadius: [getResponsiveValue(4), getResponsiveValue(4), 0, 0],
+ },
+ barWidth: getResponsiveValue(6),
+ },
];
return {
- backgroundColor: "transparent",
tooltip: {
trigger: "axis",
- axisPointer: { type: "shadow" },
- backgroundColor: "rgba(0,0,0,0.55)",
- borderColor: "rgba(64,158,255,0.25)",
+ axisPointer: { type: "cross" },
+ backgroundColor: "rgba(0,0,0,0.7)",
+ borderColor: "rgba(64,158,255,0.5)",
borderWidth: getResponsiveValue(1),
- textStyle: { color: "#B8C8E0", fontSize: getResponsiveValue(11) },
- formatter: "{b}: {c} 绔嬫柟绫�",
+ textStyle: { color: "#B8C8E0", fontSize: getResponsiveValue(12) },
+ formatter: function (params) {
+ let result = params[0].name + "<br/>";
+ params.forEach(param => {
+ const unit = param.seriesName === "鐢�" ? "搴�" : "鍚�";
+ result += `${param.marker}${param.seriesName}: ${param.value} ${unit}<br/>`;
+ });
+ return result;
+ },
+ },
+ legend: {
+ data: energyTypes,
+ top: "5%",
+ right: "1%",
+ textStyle: {
+ color: "#B8C8E0",
+ fontSize: getResponsiveValue(10),
+ },
+ itemWidth: getResponsiveValue(12),
+ itemHeight: getResponsiveValue(12),
+ itemGap: getResponsiveValue(15),
},
grid: {
- left: "14%",
- right: "6%",
- top: "16%",
- bottom: "8%",
+ left: "1%",
+ right: "1%",
+ top: "25%",
+ bottom: "0%",
containLabel: true,
},
xAxis: {
- type: "value",
- axisLine: { show: false },
- axisLabel: { color: "#B8C8E0", fontSize: getResponsiveValue(11) },
- splitLine: { lineStyle: { color: "rgba(184,200,224,0.12)" } },
- },
- yAxis: {
type: "category",
- data: customers,
- axisTick: { show: false },
- axisLine: { show: false },
+ data: periods,
axisLabel: {
- color: "#B8C8E0",
fontSize: getResponsiveValue(11),
- margin: getResponsiveValue(8),
+ color: "#93B9FF",
+ interval: 0,
+ rotate: periodType === "month" ? 45 : 0,
},
- },
- series: [
- {
- name: "閿�閲忥紙绔嬫柟绫筹級",
- type: "bar",
- barWidth: getResponsiveValue(14),
- data: values,
- itemStyle: {
- color: params => barColors[params.dataIndex] || "#00A4ED",
- borderRadius: [
- getResponsiveValue(6),
- getResponsiveValue(6),
- getResponsiveValue(6),
- getResponsiveValue(6),
- ],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: getResponsiveValue(1),
+ color: "#305B9A",
},
},
- ],
+ axisTick: {
+ show: false,
+ },
+ },
+ yAxis: {
+ type: "value",
+ axisLabel: {
+ fontSize: getResponsiveValue(11),
+ color: "#93B9FF",
+ formatter: function (value) {
+ return value;
+ },
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#305B9A",
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "#0F2E60",
+ type: "dashed",
+ },
+ },
+ },
+ series: series,
};
});
@@ -1232,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);
}
@@ -1357,7 +1485,6 @@
height: 24vh;
}
-
.bi-panel-bottom-right .echart-fill {
height: calc(100% - 2.8vh);
}
@@ -1410,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;
@@ -1422,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 {
@@ -1632,7 +1851,7 @@
text-align: left;
color: #c3c3c3;
}
- /* 鏉愭枡淇℃伅鍗＄墖 */
+ /* 鏉愭枡淇℃伅鍗＄墖 */
.material-info-card {
display: flex;
align-items: center;
@@ -1691,5 +1910,4 @@
font-size: 1vh;
opacity: 0.7;
}
-
</style>
--
Gitblit v1.9.3