From c932fb4fa7ef23611ff57843c387fb629aecfb46 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期六, 30 五月 2026 15:30:07 +0800
Subject: [PATCH] 新疆马铃薯 1.首页问题：挪新系统ui，需要确认一下页面数据完整
---
src/views/index.vue | 235 +++++++++++++++-------------------------------------------
1 files changed, 63 insertions(+), 172 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index e12ded2..ea7b4ff 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -182,32 +182,6 @@
</ul>
</div>
- <div v-if="visiblePanels.quality" class="cockpit-panel quality-panel">
- <div class="panel-title-row">
- <div class="panel-title">璐ㄩ噺缁熻</div>
- <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
- <el-radio-button :value="1">鍛�</el-radio-button>
- <el-radio-button :value="2">鏈�</el-radio-button>
- <el-radio-button :value="3">瀛ｅ害</el-radio-button>
- </el-radio-group>
- </div>
- <div class="quality-cards">
- <div class="quality-card one">鍘熸潗鏂欏凡妫�鏁伴噺 <span>{{ qualityStatisticsObject.supplierNum }}浠�</span></div>
- <div class="quality-card two">杩囩▼妫�楠屾暟閲� <span>{{ qualityStatisticsObject.processNum }}浠�</span></div>
- <div class="quality-card three">鍑哄巶宸叉鏁伴噺 <span>{{ qualityStatisticsObject.factoryNum }}浠�</span></div>
- </div>
- <Echarts
- :options="chartBaseOptions"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="barLegend"
- :series="barSeries1"
- :tooltip="tooltip"
- :xAxis="xAxis1"
- :yAxis="yAxis1"
- style="height: 270px"
- />
- </div>
</div>
<div v-if="hasRightPanels" class="right-column">
@@ -294,21 +268,34 @@
</ul>
</div>
- <div v-if="visiblePanels.receipt" class="cockpit-panel receipt-panel">
- <div class="panel-title">鍥炴涓庡紑绁ㄥ垎鏋�</div>
- <Echarts
- :options="chartBaseOptions"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="lineLegend"
- :series="lineSeries"
- :tooltip="tooltipLine"
- :xAxis="xAxis2"
- :yAxis="yAxis2"
- style="height: 300px"
- />
- </div>
+ </div>
+ <!-- 璐ㄩ噺缁熻 - 鍗犳弧鏁磋 -->
+ <div v-if="visiblePanels.quality" class="cockpit-panel quality-panel full-width">
+ <div class="panel-title-row">
+ <div class="panel-title">璐ㄩ噺缁熻</div>
+ <el-radio-group v-model="qualityRange" size="small" @change="qualityStatisticsInfo">
+ <el-radio-button :value="1">鍛�</el-radio-button>
+ <el-radio-button :value="2">鏈�</el-radio-button>
+ <el-radio-button :value="3">瀛ｅ害</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="quality-cards">
+ <div class="quality-card one">鍘熸潗鏂欏凡妫�鏁伴噺 <span>{{ qualityStatisticsObject.supplierNum }}鍚�</span></div>
+ <div class="quality-card two">杩囩▼妫�楠屾暟閲� <span>{{ qualityStatisticsObject.processNum }}鍚�</span></div>
+ <div class="quality-card three">鍑哄巶宸叉鏁伴噺 <span>{{ qualityStatisticsObject.factoryNum }}鍚�</span></div>
+ </div>
+ <Echarts
+ :options="chartBaseOptions"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend"
+ :series="barSeries1"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ style="height: 270px"
+ />
</div>
</section>
@@ -360,7 +347,6 @@
import useUserStore from "@/store/modules/user.js";
import {
analysisCustomerContractAmounts,
- getAmountHalfYear,
getBusiness,
homeTodos,
processDataProductionStatistics,
@@ -368,7 +354,6 @@
productionOverview,
productionRealtimeBoard,
qualityInspectionStatistics,
- statisticsReceivablePayable,
todayProductionPlan,
} from "@/api/viewIndex.js";
import { list } from "@/api/productionManagement/productionProcess";
@@ -584,74 +569,6 @@
},
]);
-const lineLegend = {
- show: true,
- textStyle: { color: axisTextColor },
- data: ["寮�绁�", "鍥炴"],
-};
-
-const xAxis2 = ref([
- {
- type: "category",
- data: [],
- axisLine: { lineStyle: { color: axisLineColor } },
- axisLabel: {
- color: axisTextColor,
- interval: 0,
- formatter: (value) => value.replace(/~/g, "\n"),
- },
- },
-]);
-
-const yAxis2 = ref([
- {
- type: "value",
- splitLine: { lineStyle: { color: splitLineColor } },
- axisLine: { lineStyle: { color: axisLineColor } },
- axisLabel: { color: axisTextColor },
- },
-]);
-
-const tooltipLine = {
- trigger: "axis",
- backgroundColor: "rgba(255, 255, 255, 0.97)",
- borderColor: "rgba(148, 163, 184, 0.26)",
- textStyle: { color: "#334155" },
-};
-
-const lineSeries = ref([
- {
- name: "寮�绁�",
- type: "line",
- data: [],
- smooth: true,
- itemStyle: { color: "#2563eb" },
- lineStyle: { width: 2, color: "#2563eb" },
- showSymbol: true,
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "rgba(37, 99, 235, 0.24)" },
- { offset: 1, color: "rgba(37, 99, 235, 0.02)" },
- ]),
- },
- },
- {
- name: "鍥炴",
- type: "line",
- data: [],
- smooth: true,
- itemStyle: { color: "#14b8a6" },
- lineStyle: { width: 2, color: "#14b8a6" },
- showSymbol: true,
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: "rgba(20, 184, 166, 0.2)" },
- { offset: 1, color: "rgba(20, 184, 166, 0.02)" },
- ]),
- },
- },
-]);
-
const pieTooltip = reactive({
trigger: "item",
backgroundColor: "rgba(255, 255, 255, 0.97)",
@@ -820,17 +737,6 @@
trend: "搴撳瓨缁撴瀯鎸佺画浼樺寲",
icon: Box,
visible: visibleModules.value.inventory,
- },
- {
- key: "production",
- title: "鐢熶骇鎬昏",
- desc: "绱浜у嚭(浠�)",
- value: formatNumber(productionOverviewData.value.totalOutput),
- subLabel: "绱鎶ュ簾",
- subValue: formatNumber(productionOverviewData.value.totalScrap),
- trend: `鑹巼 ${Number(productionOverviewData.value.yieldRate || 0).toFixed(2)}%`,
- icon: Operation,
- visible: visibleModules.value.production,
},
].filter((item) => item.visible));
@@ -1070,16 +976,16 @@
realtime: visibleModules.value.production,
quick: quickEntries.value.length > 0,
plan: visibleModules.value.production,
- receipt: visibleModules.value.sales || visibleModules.value.finance,
+
}));
const hasLeftPanels = computed(
- () => visiblePanels.value.process || visiblePanels.value.order || visiblePanels.value.contract || visiblePanels.value.quality
+ () => visiblePanels.value.process || visiblePanels.value.order || visiblePanels.value.contract
);
const hasRightPanels = computed(
- () => visiblePanels.value.todo || visiblePanels.value.realtime || visiblePanels.value.quick || visiblePanels.value.plan || visiblePanels.value.receipt
+ () => visiblePanels.value.todo || visiblePanels.value.realtime || visiblePanels.value.quick || visiblePanels.value.plan
);
-const hasVisiblePanels = computed(() => hasLeftPanels.value || hasRightPanels.value);
+const hasVisiblePanels = computed(() => hasLeftPanels.value || hasRightPanels.value || visiblePanels.value.quality);
const quickEntries = computed(() =>
quickEntryConfigs
@@ -1305,17 +1211,6 @@
todoList.value = res.data || [];
};
-const statisticsReceivable = async () => {
- const res = await statisticsReceivablePayable({ type: 1 });
- const data = res?.data || {};
- const payableMoney = Number(data.payableMoney ?? 0);
- const receivableMoney = Number(data.receivableMoney ?? 0);
- barSeries.value[0].data = [
- { value: payableMoney, itemStyle: { color: barColors2[0] } },
- { value: receivableMoney, itemStyle: { color: barColors2[1] } },
- ];
-};
-
const qualityStatisticsInfo = async () => {
const res = await qualityInspectionStatistics({ type: qualityRange.value });
xAxis1.value[0].data = [];
@@ -1332,22 +1227,6 @@
qualityStatisticsObject.value.supplierNum = data.supplierNum || 0;
qualityStatisticsObject.value.processNum = data.processNum || 0;
qualityStatisticsObject.value.factoryNum = data.factoryNum || 0;
-};
-
-const getAmountHalfYearNum = async () => {
- const res = await getAmountHalfYear();
- const monthName = [];
- const receiptAmount = [];
- const invoiceAmount = [];
- (res.data || []).forEach((item) => {
- monthName.push(item.month);
- receiptAmount.push(item.receiptAmount);
- invoiceAmount.push(item.invoiceAmount);
- });
-
- xAxis2.value[0].data = monthName.map((item) => item.replace(/~/g, "\n~"));
- lineSeries.value[0].data = invoiceAmount;
- lineSeries.value[1].data = receiptAmount;
};
const getProcessList = async () => {
@@ -1421,10 +1300,6 @@
}
if (visiblePanels.value.quality) {
qualityStatisticsInfo();
- }
- if (visiblePanels.value.receipt) {
- statisticsReceivable();
- getAmountHalfYearNum();
}
if (visiblePanels.value.process) {
getProcessList();
@@ -1556,7 +1431,7 @@
.stats-grid {
display: grid;
- grid-template-columns: repeat(4, minmax(0, 1fr));
+ grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
@@ -1748,7 +1623,7 @@
display: flex;
flex-direction: column;
gap: 8px;
- max-height: 230px;
+ max-height: 380px;
overflow-y: auto;
}
@@ -1797,18 +1672,31 @@
}
.main-grid {
- display: grid;
- grid-template-columns: minmax(0, 1fr) 400px;
+ display: flex;
+ flex-wrap: wrap;
gap: 16px;
align-items: start;
}
-.left-column,
+.left-column {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
.right-column {
+ width: 400px;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
+}
+
+.full-width {
+ width: 100%;
+ flex-basis: 100%;
}
.process-panel {
@@ -2197,7 +2085,7 @@
}
.quick-panel {
- min-height: 0;
+ min-height: 280px;
}
.table-progress {
@@ -2239,10 +2127,6 @@
.quality-panel {
min-height: 0;
-}
-
-.receipt-panel {
- min-height: 340px;
}
.plan-list {
@@ -2397,24 +2281,31 @@
}
@media (max-width: 1600px) {
- .main-grid {
- grid-template-columns: minmax(0, 1fr) 380px;
+ .right-column {
+ width: 380px;
}
}
@media (max-width: 1366px) {
- .main-grid {
- grid-template-columns: minmax(0, 1fr) 340px;
+ .right-column {
+ width: 340px;
}
+ .stats-grid {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+}
+
+@media (max-width: 992px) {
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1200px) {
- .main-grid {
- grid-template-columns: 1fr;
+ .left-column,
+ .right-column {
+ width: 100%;
}
.right-column {
--
Gitblit v1.9.3