From 3548f02fa8cf8848f49bddf5799f486f7e682ef7 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 27 三月 2026 16:04:05 +0800
Subject: [PATCH] 成品检页面修改
---
src/views/reportAnalysis/productionStatistics/index.vue | 263 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 193 insertions(+), 70 deletions(-)
diff --git a/src/views/reportAnalysis/productionStatistics/index.vue b/src/views/reportAnalysis/productionStatistics/index.vue
index a168ed9..b457e61 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>
@@ -149,7 +154,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 +163,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>
@@ -209,7 +219,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 +229,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 +429,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 +530,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;
@@ -723,71 +740,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 +1357,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 +1482,6 @@
height: 24vh;
}
-
.bi-panel-bottom-right .echart-fill {
height: calc(100% - 2.8vh);
}
@@ -1632,7 +1756,7 @@
text-align: left;
color: #c3c3c3;
}
- /* 鏉愭枡淇℃伅鍗＄墖 */
+ /* 鏉愭枡淇℃伅鍗＄墖 */
.material-info-card {
display: flex;
align-items: center;
@@ -1691,5 +1815,4 @@
font-size: 1vh;
opacity: 0.7;
}
-
</style>
--
Gitblit v1.9.3