From cdf8190c92a536dabdbd3dfd6758cf67320ff6df Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期五, 16 一月 2026 17:47:21 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New

---
 src/views/financialManagement/financialStatements/index.vue |  597 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 595 insertions(+), 2 deletions(-)

diff --git a/src/views/financialManagement/financialStatements/index.vue b/src/views/financialManagement/financialStatements/index.vue
index c272707..88aa5d2 100644
--- a/src/views/financialManagement/financialStatements/index.vue
+++ b/src/views/financialManagement/financialStatements/index.vue
@@ -1,4 +1,597 @@
-<template>
+ <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="monthrange"
+        format="YYYY-MM"
+        value-format="YYYY-MM"
+        range-separator="鑷�"
+        start-placeholder="寮�濮嬫湀浠�"
+        end-placeholder="缁撴潫鏈堜唤"
+        :disabled-date="disabledDate"
+        @change="handleDateChange"
+        class="w-full md:w-auto"
+        style="margin-right: 30px;"
+      />
+      
+      <el-button 
+        type="primary" 
+        icon="Refresh" 
+        @click="resetDateRange"
+        size="default"
+      >
+        閲嶇疆
+      </el-button>
+    </div>
+    
+    <main class="container mx-auto px-4 pb-10">
+      <!-- 璐㈠姟鎸囨爣鍗＄墖 -->
+      <div class="grid-container">
+        <!-- 鎬绘敹鍏� -->
+        <el-card class="bg1">
+          <p>鎬绘敹鍏�</p>
+          <h3>
+            楼{{ pageInfo.totalIncome }}
+          </h3>
+        </el-card>
+        
+        <!-- 鏀跺叆绗旀暟 -->
+        <el-card class="bg2">
+          <p>鏀跺叆绗旀暟</p>
+          <h3>
+            {{ pageInfo.incomeNumber }}
+          </h3>
+        </el-card>
+        
+        <!-- 鎬绘敮鍑� -->
+        <el-card class="bg3">
+          <p>鎬绘敮鍑�</p>
+          <h3>
+            楼{{ pageInfo.totalExpense }}
+          </h3>
+        </el-card>
+        
+        <!-- 鏀嚭绗旀暟 -->
+        <el-card class="bg4">
+          <p>鏀嚭绗旀暟</p>
+          <h3>
+            {{ pageInfo.expenseNumber }}
+          </h3>
+        </el-card>
+        
+        <!-- 鍑�鏀跺叆 -->
+        <el-card class="bg5">
+          <p>鍑�鏀跺叆</p>
+          <h3>
+            楼{{ pageInfo.netRevenue }}
+          </h3>
+        </el-card>
+      </div>
+      
+      <!-- 鏀跺叆缁熻鍥捐〃 -->
+      <div class="grid-layout">
+        <el-card style="margin-bottom: 20px;">
+          <h2 class="section-title">鏀跺叆缁熻(鍏�)</h2>
+          <div class="echarts">
+            <Echarts :legend="pieLegend0" :chartStyle="chartStylePie"
+										 :series="materialPieSeries0"
+										 :tooltip="pieTooltip" style="height: 260px;width: 35%;">
+                     <div class="chart-num">
+                      <span style="font-size: 22px;">鏀跺叆</span>
+                      <span style="font-size: 36px;
+    font-weight: 500;
+    font-family: 'MyCustomFont', sans-serif;">{{ pageInfo.totalIncome }}</span>
+                     </div>
+                    </Echarts>
+            <Echarts ref="chart"
+								 :chartStyle="chartStyle"
+								 :grid="grid"
+								 :legend="lineLegend"
+								 :series="lineSeries0"
+								 :tooltip="tooltip"
+								 :xAxis="xAxis0"
+								 :yAxis="yAxis0"
+								 style="height: 260px;width: 64%;"></Echarts>
+          </div>
+        </el-card>
+        
+        <!-- 鏀嚭缁熻鍥捐〃 -->
+        <el-card>
+          <h2 class="section-title">鏀嚭缁熻(鍏�)</h2>
+          <div class="echarts">
+            <Echarts ref="chart" 
+                    :legend="pieLegend1" 
+                    :chartStyle="chartStylePie"
+										 :series="materialPieSeries1"
+										 :tooltip="pieTooltip" 
+                     style="height: 260px;width: 35%;">
+                     <div class="chart-num">
+                      <span style="font-size: 22px;">鏀嚭</span>
+                      <span style="font-size: 36px;
+    font-weight: 500;
+    font-family: 'MyCustomFont', sans-serif;">{{ pageInfo.totalExpense }}</span>
+                     </div></Echarts>
+            <Echarts ref="chart"
+								 :chartStyle="chartStyle"
+								 :grid="grid"
+								 :legend="lineLegend"
+								 :series="lineSeries1"
+								 :tooltip="tooltip"
+								 :xAxis="xAxis1"
+								 :yAxis="yAxis1"
+								 style="height: 260px;width: 64%;"></Echarts>
+          </div>
+        </el-card>
+      </div>
+    </main>
+  </div>
 </template>
+
 <script setup>
-</script>
\ No newline at end of file
+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";
+import dayjs from "dayjs";
+
+// 鏃ユ湡鑼冨洿
+const dateRange = ref(null);
+const { proxy } = getCurrentInstance();
+const chartStyle = {
+	width: '100%',
+	height: '100%', // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+  position:'relative',
+}
+const grid = {
+	left: '3%',
+		right: '4%',
+		bottom: '3%',
+		containLabel: true
+}
+const lineLegend = {
+	show: false,
+}
+// 鎶樼嚎鍥炬彁绀烘
+const tooltip = reactive({
+  trigger: 'axis',
+  axisPointer: {
+    type: 'line',
+    lineStyle: { color: '#aaa' }
+  },
+  // 鑷畾涔夊唴瀹�
+  formatter: function (params) {
+    if (!params || !params.length) return ''
+    const axisLabel = params[0].axisValueLabel || params[0].axisValue || ''
+    const rows = params
+      .map(p => {
+        const colorDot = `<span style="display:inline-block;margin-right:6px;width:8px;height:8px;border-radius:50%;background:${p.color}"></span>`
+        return `${colorDot}${p.seriesName}: ${p.value}`
+      })
+      .join('<br/>')
+    return `<div>${axisLabel}</div><div>${rows}</div>`
+  }
+})
+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: [],
+  },
+]);
+const xAxis1 = ref([
+  {
+    type: 'category',
+    axisTick: { show: true, alignWithLabel: true },
+    data: [],
+  },
+]);
+const yAxis0 = [
+{
+    type: 'value',
+    name: '鏀跺叆缁熻', // 宸︿晶y杞�
+    position: 'left',
+    min: 0,
+    // 鍧愭爣杞村悕绉版牱寮�
+    nameTextStyle: {
+      color: '#000',
+      fontSize: 14,
+    },
+  }
+]
+
+const yAxis1 = [
+{
+    type: 'value',
+    name: '鏀嚭缁熻', // 宸︿晶y杞�
+    position: 'left',
+    min: 0,
+    // 鍧愭爣杞村悕绉版牱寮�
+    nameTextStyle: {
+      color: '#000',
+      fontSize: 14,
+    },
+  }
+]
+
+const chartStylePie = {
+	width: '100%',
+	height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
+const pieColors = ['#F04864','#FACC14', '#8543E0', '#1890FF', '#13C2C2','#2FC25B']; // 鍙牴鎹疄闄呰皟鏁�
+const pieData0 = ref([]);
+const pieData1 = ref([]);
+
+const pieLegend0 = computed(() => ({
+  show: true,
+  top: 'center',
+  left: '60%',
+  orient: 'vertical',
+  icon: 'circle',
+  data: (pieData0.value || []).filter(item => item && item.name).map(item => item.name),
+  formatter: function(name) {
+    if (!name) return '';
+    const item = pieData0.value.find(i => i && i.name === name);
+    if (!item) return name;
+    return `${name} | ${item.percent} ${item.amount}`;
+  },
+  textStyle: {
+    color: '#333',
+    fontSize: 14,
+    lineHeight: 26,
+  }
+}));
+const pieLegend1 = computed(() => ({
+  show: true,
+  top: 'center',
+  left: '60%',
+  orient: 'vertical',
+  icon: 'circle',
+  data: (pieData1.value || []).filter(item => item && item.name).map(item => item.name),
+  formatter: function(name) {
+    if (!name) return '';
+    const item = pieData1.value.find(i => i && i.name === name);
+    if (!item) return name;
+    return `${name} | ${item.percent} ${item.amount}`;
+  },
+  textStyle: {
+    color: '#333',
+    fontSize: 14,
+    lineHeight: 26,
+  }
+}));
+
+const materialPieSeries0 = computed(() => [
+  {
+    type: 'pie',
+    radius: ['50%', '65%'],
+    center: ['25%', '50%'],
+    avoidLabelOverlap: false,
+    itemStyle: {
+      borderColor: '#fff',
+      borderWidth: 2
+    },
+    label: {
+      show: false
+    },
+    data: (pieData0.value || []).filter(item => item && item.name),
+    color: pieColors
+  }
+]);
+const materialPieSeries1 = computed(() => [
+  {
+    type: 'pie',
+    radius: ['50%', '65%'],
+    center: ['25%', '50%'],
+    avoidLabelOverlap: false,
+    itemStyle: {
+      borderColor: '#fff',
+      borderWidth: 2
+    },
+    label: {
+      show: false
+    },
+    data: (pieData1.value || []).filter(item => item && item.name),
+    color: pieColors
+  }
+]);
+const pieTooltip = reactive({
+	trigger: 'item',
+  formatter: function(params) {
+    // 妫�鏌ユ暟鎹槸鍚﹀瓨鍦�
+    if (!params.data) return params.name;
+    // 鎷兼帴瀹屾暣鍐呭
+    return `
+      <div>
+        <div style="color:${params.color};font-size:16px;">鈼�</div>
+        <div>${params.name}</div>
+        <div>鍗犳瘮锛�${params.data.percent}</div>
+        <div>閲戦锛�${params.data.amount}</div>
+      </div>
+    `;
+  }
+})
+
+
+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 || !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, 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 || []).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({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(val => Number(val) || 0)
+      }))
+    }
+  }catch (error) {
+    console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
+  }
+  try{
+    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(val => Number(val) || 0)
+      }))
+    }
+  }catch (error) {
+    console.error('鑾峰彇璐㈠姟鎸囨爣鏁版嵁澶辫触锛�', error);
+  }
+};
+
+
+// 鍒濆鍖�
+onMounted(() => {
+  // 璁剧疆榛樿鍊间负鏈�杩戝叚涓湀
+  const defaultRange = getLastSixMonths();
+  dateRange.value = defaultRange;
+  // 浣跨敤 nextTick 纭繚缁勪欢瀹屽叏娓叉煋鍚庡啀璋冪敤
+  nextTick(() => {
+    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 = getLastSixMonths();
+  getData();
+};
+
+</script>
+
+<style scoped lang="scss">
+/* 鍩虹鏍峰紡琛ュ厖 */
+:root {
+  --el-color-primary: #4f46e5;
+}
+.el-card{
+  position: relative;
+  border-radius: 12px;
+  padding: 14px 10px 10px 10px;
+  box-shadow: 0 2px 8px #eee;
+  :deep(.el-card__body){
+    padding: 10px 20px !important;
+  }
+  &.bg1{
+    background: url(@/assets/icons/png/1.png) no-repeat 100% 100% !important;
+  }
+  &.bg2{
+    background: url(@/assets/icons/png/2.png) no-repeat 100% 100% !important;
+  }
+  &.bg3{
+    background: url(@/assets/icons/png/3.png) no-repeat 100% 100% !important;
+  }
+  &.bg4{
+    background: url(@/assets/icons/png/4.png) no-repeat 100% 100% !important;
+  }
+  &.bg5{
+    background: url(@/assets/icons/png/5.png) no-repeat 100% 100% !important;
+  }
+}
+
+.grid-container {
+  /* grid 瀹瑰櫒鍩虹鏍峰紡 */
+  display: grid;
+  gap: 1rem; /* gap-4 瀵瑰簲 1rem (16px) */
+  margin-bottom: 2rem; /* mb-8 瀵瑰簲 2rem (32px) */
+  
+  p{
+    font-size: 22px;
+    margin-top: 0px;
+    color: #fff;
+  }
+  h3{
+    font-size: 36px;
+    font-weight: 500;
+    font-family: 'MyCustomFont', sans-serif;
+    margin: 10px 0;
+    color: #fff;
+  }
+  
+}
+
+/* 绉诲姩绔粯璁ゆ牱寮� (grid-cols-1) */
+.grid-container {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+/* 灏忓睆骞曞強浠ヤ笂 (sm:grid-cols-2) */
+@media (min-width: 640px) {
+  .grid-container {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* 澶у睆骞曞強浠ヤ笂 (lg:grid-cols-5) */
+@media (min-width: 1024px) {
+  .grid-container {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+/* 鍗＄墖鎮仠鏁堟灉澧炲己 */
+.el-card:hover {
+  transform: translateY(-2px);
+}
+.echarts{
+  display: flex;
+  justify-content: space-between;
+}
+
+/* 鍥捐〃瀹瑰櫒鏍峰紡 */
+.el-chart {
+  width: 100%;
+  height: 100%;
+}
+.section-title {
+	position: relative;
+	font-size: 18px;
+	color: #333;
+	padding-left: 10px;
+	margin-bottom: 10px;
+	font-weight: 700;
+}
+
+.section-title::before {
+	position: absolute;
+	left: 0;
+	top: 0px;
+	content: '';
+	width: 4px;
+	height: 18px;
+	background-color: #002FA7;
+	border-radius: 2px;
+}
+.chart-num{
+  position: absolute;
+  z-index: 3;
+  top: 92px;
+  left: 92px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

--
Gitblit v1.9.3