From 0a5698223416aca7b107de18b3a687461a13e1a8 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期二, 23 六月 2026 09:57:12 +0800
Subject: [PATCH] 首页图表财务展示更换成销售图表
---
src/views/index.vue | 264 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 162 insertions(+), 102 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 2afcb59..c8fe3bb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -265,17 +265,38 @@
:yAxis="yAxis1"
style="height: 260px"></Echarts>
</div>
- <div class="main-panel">
- <div class="section-title">鍥炴涓庡紑绁ㄥ垎鏋�</div>
- <Echarts ref="invoiceChart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="lineLegend"
- :series="lineSeries"
- :tooltip="tooltipLine"
- :xAxis="xAxis2"
- :yAxis="yAxis2"
- style="height: 270px;" />
+ <div class="main-panel product-panel">
+ <div class="product-panel__header">
+ <div class="section-title product-panel__title">閿�鍞骇鍝佹暟鎹垎鏋�</div>
+ <el-radio-group v-model="productType"
+ size="small"
+ @change="productInOutInfo">
+ <el-radio-button :value="1">鍘熸潗鏂�</el-radio-button>
+ <el-radio-button :value="3">鍗婃垚鍝�</el-radio-button>
+ <el-radio-button :value="2">鎴愬搧</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="product-panel__meta">
+ <span class="product-panel__unit">鍗曚綅锛氫欢</span>
+ <div class="product-panel__legend">
+ <span class="legend-item">
+ <i class="legend-dot legend-dot--out"></i>鍑哄簱
+ </span>
+ <span class="legend-item">
+ <i class="legend-dot legend-dot--in"></i>鍏ュ簱
+ </span>
+ </div>
+ </div>
+ <div class="product-panel__chart">
+ <Echarts ref="productChart"
+ :chartStyle="chartStyle"
+ :grid="productGrid"
+ :legend="lineLegend"
+ :series="lineSeries"
+ :tooltip="tooltipLine"
+ :xAxis="xAxis2"
+ :yAxis="yAxis2" />
+ </div>
</div>
</div>
</div>
@@ -288,8 +309,8 @@
import useUserStore from "@/store/modules/user.js";
import {
analysisCustomerContractAmounts,
- getAmountHalfYear,
getBusiness,
+ productInOutAnalysis,
homeTodos,
processDataProductionStatistics,
statisticsReceivablePayable,
@@ -389,9 +410,16 @@
show: true,
data: ["棰勪粯璐︽", "搴斾粯璐︽", "棰勬敹璐︽", "搴旀敹璐︽"],
};
+ const productType = ref(1);
+ const productGrid = {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ top: "8%",
+ containLabel: true,
+ };
const lineLegend = {
- show: true,
- data: ["寮�绁�", "鍥炴"],
+ show: false,
};
const tooltip = {
trigger: "axis",
@@ -450,32 +478,66 @@
]);
const lineSeries = ref([
{
+ name: "鍑哄簱",
type: "line",
- data: [],
- label: {
- show: true,
+ smooth: false,
+ showSymbol: true,
+ symbol: "circle",
+ symbolSize: 8,
+ lineStyle: { color: "rgba(11, 137, 254, 1)", width: 2 },
+ itemStyle: { color: "rgba(11, 137, 254, 1)", borderWidth: 0 },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "rgba(11, 137, 254, 0.40)" },
+ { offset: 1, color: "rgba(11, 137, 254, 0.05)" },
+ ]),
},
- showSymbol: true, // 鏄剧ず鍦嗙偣
+ data: [],
+ emphasis: { focus: "series" },
+ },
+ {
+ name: "鍏ュ簱",
+ type: "line",
+ smooth: false,
+ showSymbol: true,
+ symbol: "circle",
+ symbolSize: 8,
+ lineStyle: { color: "rgba(11, 249, 254, 1)", width: 2 },
+ itemStyle: { color: "rgba(11, 249, 254, 1)", borderWidth: 0 },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "rgba(11, 249, 254, 0.5)" },
+ { offset: 1, color: "rgba(11, 249, 254, 0.05)" },
+ ]),
+ },
+ data: [],
+ emphasis: { focus: "series" },
},
]);
const tooltipLine = {
trigger: "axis",
+ axisPointer: { type: "line" },
+ formatter(params) {
+ let result = params[0].axisValue + "<br/>";
+ params.forEach((item) => {
+ result += `${item.marker} ${item.seriesName}: ${item.value} 浠�<br/>`;
+ });
+ return result;
+ },
};
- const yAxis2 = ref([
+ const yAxis2 = [
{
type: "value",
+ axisLine: { show: false },
+ axisTick: { show: false },
},
- ]);
+ ];
const xAxis2 = ref([
{
type: "category",
data: [],
- axisLabel: {
- interval: 0,
- formatter: function (value) {
- return value.replace(/~/g, "\n");
- },
- },
+ axisTick: { show: false },
+ axisLine: { show: false },
},
]);
@@ -505,7 +567,7 @@
todoInfoS();
statisticsReceivable();
qualityStatisticsInfo();
- getAmountHalfYearNum();
+ productInOutInfo();
getProcessList();
});
// 鏁版嵁缁熻
@@ -594,80 +656,19 @@
});
});
};
- const getAmountHalfYearNum = async () => {
- const res = await getAmountHalfYear();
- console.log(res);
- const monthName = [];
- const receiptAmount = [];
- const invoiceAmount = [];
- res.data.forEach(item => {
- monthName.push(item.month);
- receiptAmount.push(item.receiptAmount);
- invoiceAmount.push(item.invoiceAmount);
- });
- // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
- xAxis2.value[0].data = monthName;
- xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, "\n~"));
- lineSeries.value = [
- {
- name: "寮�绁�",
- type: "line",
- data: invoiceAmount,
- stack: "Total",
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "rgba(131, 207, 255, 1)",
- },
- {
- offset: 1,
- color: "rgba(186, 228, 255, 1)",
- },
- ]),
- },
- itemStyle: {
- color: "#2D99FF",
- borderColor: "#2D99FF",
- },
- emphasis: {
- focus: "series",
- },
- lineStyle: {
- width: 0,
- },
- showSymbol: true,
- },
- {
- name: "鍥炴",
- type: "line",
- data: receiptAmount,
- stack: "Total",
- lineStyle: {
- width: 0,
- },
- itemStyle: {
- color: "#83CFFF",
- borderColor: "#83CFFF",
- },
- showSymbol: true,
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "rgba(54, 153, 255, 1)",
- },
- {
- offset: 1,
- color: "rgba(89, 169, 254, 1)",
- },
- ]),
- },
- emphasis: {
- focus: "series",
- },
- },
- ];
+ const productInOutInfo = () => {
+ productInOutAnalysis({ type: productType.value })
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const list = res.data;
+ xAxis2.value[0].data = list.map((d) => d.date);
+ lineSeries.value[0].data = list.map((d) => Number(d.outCount) || 0);
+ lineSeries.value[1].data = list.map((d) => Number(d.inCount) || 0);
+ }
+ })
+ .catch((err) => {
+ console.error("鑾峰彇閿�鍞骇鍝佹暟鎹垎鏋愬け璐�:", err);
+ });
};
// 宸ュ簭鏁版嵁鐢熶骇缁熻鏄庣粏锛堝亣鏁版嵁 + 鍥捐〃锛�
@@ -795,7 +796,7 @@
todoInfoS();
statisticsReceivable();
qualityStatisticsInfo();
- getAmountHalfYearNum();
+ productInOutInfo();
refreshProcessStats();
});
</script>
@@ -1089,6 +1090,65 @@
border-radius: 2px;
}
+ .product-panel__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 12px;
+ }
+
+ .product-panel__title {
+ margin-bottom: 0;
+ }
+
+ .product-panel__meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+ padding: 0 4px;
+ }
+
+ .product-panel__unit {
+ font-size: 13px;
+ color: rgba(0, 0, 0, 0.45);
+ }
+
+ .product-panel__legend {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ }
+
+ .legend-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 13px;
+ color: rgba(0, 0, 0, 0.65);
+ }
+
+ .legend-dot {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ .legend-dot--out {
+ background: rgba(11, 137, 254, 1);
+ }
+
+ .legend-dot--in {
+ background: rgba(11, 249, 254, 1);
+ }
+
+ .product-panel__chart {
+ flex: 1;
+ min-height: 240px;
+ height: 260px;
+ }
+
.contract-info {
display: flex;
align-items: center;
--
Gitblit v1.9.3