From bbd880d66e993f80670259882f2feca1b150d1ae Mon Sep 17 00:00:00 2001
From: yaowanxin <3588231647@qq.com>
Date: 星期五, 16 一月 2026 17:58:52 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_New' into dev_New
---
src/views/financialManagement/financialStatements/index.vue | 194 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 142 insertions(+), 52 deletions(-)
diff --git a/src/views/financialManagement/financialStatements/index.vue b/src/views/financialManagement/financialStatements/index.vue
index e5f9b23..88aa5d2 100644
--- a/src/views/financialManagement/financialStatements/index.vue
+++ b/src/views/financialManagement/financialStatements/index.vue
@@ -1,16 +1,16 @@
<template>
<div style="padding: 20px;">
- <!-- 椤甸潰鏍囬鍜屾棩鏈熺瓫閫� -->
+ <!-- 椤甸潰鏍囬鍜屾湀浠界瓫閫� -->
<div class="w-full md:w-auto flex items-center gap-3" style="margin-bottom: 20px;">
<el-date-picker
v-model="dateRange"
- type="daterange"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
+ type="monthrange"
+ format="YYYY-MM"
+ value-format="YYYY-MM"
range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- clearable
+ start-placeholder="寮�濮嬫湀浠�"
+ end-placeholder="缁撴潫鏈堜唤"
+ :disabled-date="disabledDate"
@change="handleDateChange"
class="w-full md:w-auto"
style="margin-right: 30px;"
@@ -130,7 +130,7 @@
</template>
<script setup>
-import { ref, computed, onMounted, reactive } from 'vue';
+import { ref, computed, onMounted, reactive, nextTick, getCurrentInstance } from 'vue';
import 'element-plus/dist/index.css';
import Echarts from "@/components/Echarts/echarts.vue";
import { reportForms,reportIncome,reportExpense } from "@/api/financialManagement/financialStatements";
@@ -138,6 +138,7 @@
// 鏃ユ湡鑼冨洿
const dateRange = ref(null);
+const { proxy } = getCurrentInstance();
const chartStyle = {
width: '100%',
height: '100%', // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
@@ -172,22 +173,35 @@
return `<div>${axisLabel}</div><div>${rows}</div>`
}
})
-const months = ['1鏈�','2鏈�','3鏈�','4鏈�','5鏈�','6鏈�','7鏈�','8鏈�','9鏈�','10鏈�','11鏈�','12鏈�'];
const lineSeries0 = ref([])
const lineSeries1 = ref([])
+
+// 鏍规嵁鏈堜唤鑼冨洿鐢熸垚 x 杞存暟鎹�
+const generateMonthLabels = (startMonth, endMonth) => {
+ const labels = [];
+ let current = dayjs(startMonth);
+ const end = dayjs(endMonth);
+
+ while (current.isBefore(end) || current.isSame(end, 'month')) {
+ labels.push(`${current.month() + 1}鏈坄);
+ current = current.add(1, 'month');
+ }
+
+ return labels;
+};
const xAxis0 = ref([
{
type: 'category',
axisTick: { show: true, alignWithLabel: true },
- data: months,
+ data: [],
},
]);
const xAxis1 = ref([
{
type: 'category',
axisTick: { show: true, alignWithLabel: true },
- data: months,
+ data: [],
},
]);
const yAxis0 = [
@@ -232,9 +246,10 @@
left: '60%',
orient: 'vertical',
icon: 'circle',
- data: pieData0.value.map(item => item.name),
+ data: (pieData0.value || []).filter(item => item && item.name).map(item => item.name),
formatter: function(name) {
- const item = pieData0.value.find(i => i.name === name);
+ if (!name) return '';
+ const item = pieData0.value.find(i => i && i.name === name);
if (!item) return name;
return `${name} | ${item.percent} ${item.amount}`;
},
@@ -250,9 +265,10 @@
left: '60%',
orient: 'vertical',
icon: 'circle',
- data: pieData1.value.map(item => item.name),
+ data: (pieData1.value || []).filter(item => item && item.name).map(item => item.name),
formatter: function(name) {
- const item = pieData1.value.find(i => i.name === name);
+ if (!name) return '';
+ const item = pieData1.value.find(i => i && i.name === name);
if (!item) return name;
return `${name} | ${item.percent} ${item.amount}`;
},
@@ -276,7 +292,7 @@
label: {
show: false
},
- data: pieData0.value,
+ data: (pieData0.value || []).filter(item => item && item.name),
color: pieColors
}
]);
@@ -293,7 +309,7 @@
label: {
show: false
},
- data: pieData1.value,
+ data: (pieData1.value || []).filter(item => item && item.name),
color: pieColors
}
]);
@@ -318,53 +334,81 @@
const pageInfo = ref({
})
+// 鑾峰彇鏈�杩戝叚涓湀鐨勮寖鍥�
+const getLastSixMonths = () => {
+ const endMonth = dayjs().format('YYYY-MM');
+ const startMonth = dayjs().subtract(5, 'month').format('YYYY-MM');
+ return [startMonth, endMonth];
+};
+
const getData = async () => {
- if (!dateRange.value || !dateRange.value.length) {
+ if (!dateRange.value || !Array.isArray(dateRange.value) || dateRange.value.length !== 2) {
return;
}
+ const startDateStr = dateRange.value[0];
+ const endDateStr = dateRange.value[1];
+ if (!startDateStr || !endDateStr) {
+ return;
+ }
+
+ // 楠岃瘉鏃ユ湡鏍煎紡骞惰浆鎹负瀹屾暣鏃ユ湡
+ const startDate = dayjs(startDateStr);
+ const endDate = dayjs(endDateStr);
+ if (!startDate.isValid() || !endDate.isValid()) {
+ console.error('鏃犳晥鐨勬棩鏈熸牸寮�');
+ return;
+ }
+
+ // 鏇存柊 x 杞存暟鎹�
+ const monthLabels = generateMonthLabels(startDateStr, endDateStr);
+ xAxis0.value[0].data = monthLabels;
+ xAxis1.value[0].data = monthLabels;
+
+ // 寮�濮嬫湀浠芥嫾鎺ョ涓�澶╋紝缁撴潫鏈堜唤鎷兼帴鏈�鍚庝竴澶�
+ const entryDateStart = startDate.startOf('month').format('YYYY-MM-DD');
+ const entryDateEnd = endDate.endOf('month').format('YYYY-MM-DD');
+
try {
- const {code,data} = await reportForms({entryDateStart:dateRange.value[0], entryDateEnd:dateRange.value[1]});
- if(code === 200) {
- pageInfo.value = data
- pieData0.value = data.incomeType.map(item=>({
- name:item.typeName,
- value:item.account,
- percent:`${item.proportion*100}%`,
- amount:`楼${item.account}`
+ const {code,data} = await reportForms({entryDateStart, entryDateEnd});
+ if(code === 200 && data) {
+ pageInfo.value = data || {};
+ // 瀹夊叏澶勭悊鏁版嵁锛岃繃婊ゆ帀 null 鎴� undefined
+ pieData0.value = (data.incomeType || []).filter(item => item && item.typeName).map(item=>({
+ name:item.typeName || '',
+ value:item.account || 0,
+ percent:`${((item.proportion || 0) * 100).toFixed(2)}%`,
+ amount:`楼${(item.account || 0).toFixed(2)}`
}))
- pieData1.value = data.expenseType.map(item=>({
- name:item.typeName,
- value:item.account,
- percent:`${item.proportion*100}%`,
- amount:`楼${item.account}`
+ pieData1.value = (data.expenseType || []).filter(item => item && item.typeName).map(item=>({
+ name:item.typeName || '',
+ value:item.account || 0,
+ percent:`${((item.proportion || 0) * 100).toFixed(2)}%`,
+ amount:`楼${(item.account || 0).toFixed(2)}`
}))
-
}
} catch (error) {
console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
}
try{
- const {code,data} = await reportIncome();
- if(code==200){
- lineSeries0.value = data.map(item=>({
- name:item.typeName,
+ const {code,data} = await reportIncome({entryDateStart, entryDateEnd});
+ if(code==200 && data && Array.isArray(data)){
+ lineSeries0.value = data.filter(item => item && item.typeName).map(item=>({
+ name:item.typeName || '',
type: 'line',
- data:item.account.map(item=>Number(item))
+ data:(item.account || []).map(val => Number(val) || 0)
}))
-
}
}catch (error) {
console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
}
try{
- const {code,data} = await reportExpense();
- if(code==200){
- lineSeries1.value = data.map(item=>({
- name:item.typeName,
+ const {code,data} = await reportExpense({entryDateStart, entryDateEnd});
+ if(code==200 && data && Array.isArray(data)){
+ lineSeries1.value = data.filter(item => item && item.typeName).map(item=>({
+ name:item.typeName || '',
type: 'line',
- data:item.account.map(item=>Number(item))
+ data:(item.account || []).map(val => Number(val) || 0)
}))
-
}
}catch (error) {
console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
@@ -374,20 +418,66 @@
// 鍒濆鍖�
onMounted(() => {
- // 涓嶈缃粯璁ゆ棩鏈燂紝鐢辩敤鎴锋墜鍔ㄩ�夋嫨
+ // 璁剧疆榛樿鍊间负鏈�杩戝叚涓湀
+ const defaultRange = getLastSixMonths();
+ dateRange.value = defaultRange;
+ // 浣跨敤 nextTick 纭繚缁勪欢瀹屽叏娓叉煋鍚庡啀璋冪敤
+ nextTick(() => {
+ getData();
+ });
});
-// 澶勭悊鏃ユ湡鑼冨洿鍙樺寲
-const handleDateChange = (newRange) => {
- dateRange.value = newRange;
- if (newRange && newRange.length === 2) {
- getData()
+// 闄愬埗鏈堜唤閫夋嫨鑼冨洿锛堟渶澶�12涓湀锛�
+const disabledDate = (time) => {
+ // 濡傛灉娌℃湁閫夋嫨寮�濮嬫湀浠斤紝涓嶇鐢ㄤ换浣曟棩鏈�
+ if (!dateRange.value || !Array.isArray(dateRange.value) || !dateRange.value[0]) {
+ return false;
}
+
+ const startMonth = dayjs(dateRange.value[0]);
+ const currentMonth = dayjs(time);
+
+ // 濡傛灉褰撳墠鏈堜唤鍦ㄥ紑濮嬫湀浠戒箣鍓嶏紝绂佺敤
+ if (currentMonth.isBefore(startMonth, 'month')) {
+ return true;
+ }
+
+ // 璁＄畻鏈�澶у厑璁哥殑鏈堜唤锛堝紑濮嬫湀浠� + 11涓湀 = 12涓湀锛�
+ const maxMonth = startMonth.add(11, 'month');
+
+ // 绂佺敤瓒呰繃12涓湀鐨勬湀浠�
+ return currentMonth.isAfter(maxMonth, 'month');
};
-// 閲嶇疆鏃ユ湡鑼冨洿
+// 澶勭悊鏈堜唤鑼冨洿鍙樺寲
+const handleDateChange = (newRange) => {
+ if (!newRange || !Array.isArray(newRange) || newRange.length !== 2) {
+ return;
+ }
+
+ // 楠岃瘉鏈堜唤鑼冨洿涓嶈秴杩�12涓湀
+ const startDate = dayjs(newRange[0]);
+ const endDate = dayjs(newRange[1]);
+ const monthDiff = endDate.diff(startDate, 'month');
+
+ if (monthDiff > 11) {
+ proxy.$modal.msgWarning('鏈�澶氬彧鑳介�夋嫨12涓湀浠�');
+ // 鑷姩璋冩暣涓�12涓湀
+ const adjustedEnd = startDate.add(11, 'month').format('YYYY-MM');
+ dateRange.value = [newRange[0], adjustedEnd];
+ getData();
+ return;
+ }
+
+ dateRange.value = newRange;
+ getData();
+};
+
+// 閲嶇疆鏈堜唤鑼冨洿
const resetDateRange = () => {
- dateRange.value = null;
+ // 閲嶇疆涓烘渶杩戝叚涓湀
+ dateRange.value = getLastSixMonths();
+ getData();
};
</script>
--
Gitblit v1.9.3