项目初始化

web-api/src/main/java/com/jeesite/modules/apps/web/ErpScreenController.java

@@ -261,6 +261,63 @@ public class ErpScreenController {
         return chartDataItems;
     }
 
+    @RequestMapping(value = "getErpYearChart")
+    @ResponseBody
+    public List<ChartDataItem> getErpYearChart(ErpTransactionFlow erpTransactionFlow) {
+        List<ChartDataItem> chartDataItems = new ArrayList<>();
+        List<ErpTransactionFlow> flowList = erpTransactionFlowService.findList(erpTransactionFlow);
+        Map<String, Map<String, Object>> yearMap = flowList.stream()
+                .collect(Collectors.groupingBy(
+                        ErpTransactionFlow::getYearDate,  // 这里改成年
+                        Collectors.collectingAndThen(Collectors.toList(), list -> {
+                            BigDecimal sumValue01 = list.stream()
+                                    .filter(flow -> flow.getFlowType().equals("2"))
+                                    .map(ErpTransactionFlow::getAmount)
+                                    .reduce(BigDecimal.ZERO, BigDecimal::add);
+                            BigDecimal sumValue02 = list.stream()
+                                    .filter(flow -> flow.getFlowType().equals("1"))
+                                    .map(ErpTransactionFlow::getAmount)
+                                    .reduce(BigDecimal.ZERO, BigDecimal::add);
+                            BigDecimal sumValue04 = BigDecimalUtils.subtract(sumValue01, sumValue02);
+                            BigDecimal sumValue03 = BigDecimalUtils.percent(sumValue04, sumValue01);
+                            return Map.of(
+                                    "sumValue01", sumValue01,
+                                    "sumValue02", sumValue02,
+                                    "sumValue03", sumValue03,
+                                    "sumValue04", sumValue04
+                            );
+                        })
+                ));
+        List<String> sortedYears = new ArrayList<>(yearMap.keySet());
+        Collections.sort(sortedYears);
+        for (int i = 0; i < sortedYears.size(); i++) {
+            String currentYear = sortedYears.get(i);
+            Map<String, Object> current = yearMap.get(currentYear);
+            BigDecimal income = (BigDecimal) current.get("sumValue01");
+            BigDecimal expend = (BigDecimal) current.get("sumValue02");
+            BigDecimal profitRate = (BigDecimal) current.get("sumValue03");
+            BigDecimal profit = (BigDecimal) current.get("sumValue04");
+            BigDecimal lastIncome = BigDecimal.ZERO;
+            BigDecimal lastExpend = BigDecimal.ZERO;
+            if (i > 0) {
+                String lastYear = sortedYears.get(i - 1);
+                Map<String, Object> lastData = yearMap.get(lastYear);
+                lastIncome = (BigDecimal) lastData.get("sumValue01");
+                lastExpend = (BigDecimal) lastData.get("sumValue02");
+            }
+            ChartDataItem item = new ChartDataItem();
+            item.setAxisName(currentYear);  // 年份作为X轴
+            item.setValue01(income.toString());        // 本年收入
+            item.setValue02(expend.toString());        // 本年支出
+            item.setValue03(profitRate.toString());    // 利润率
+            item.setValue04(profit.toString());        // 净利润
+            item.setValue05(lastIncome.toString());     // 上年收入
+            item.setValue06(lastExpend.toString());    // 上年支出
+            chartDataItems.add(item);
+        }
+        return chartDataItems;
+    }
+
     /**
      * 季度收支
      */

web-vue/packages/core/layouts/screen/welcome/Erp/components/ChartV02.vue

@@ -7,50 +7,69 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+  import { ref, onMounted, onUnmounted } from 'vue';
-import * as echarts from 'echarts'
+  import * as echarts from 'echarts';
-// import { getItemInfoList } from '@/api/bizApi'
+  import { ChartDataItem, ErpYearChart } from '@jeesite/erp/api/erp/screen';
 
-const vList = ref([])
+  const vList = ref<ChartDataItem[]>([]);
-const chartRef = ref(null)
+  const chartRef = ref<HTMLDivElement | null>(null);
-let chartInstance = null
+  let chartInstance: echarts.ECharts | null = null;
+
+  const parseAmount = (value?: string | number) => {
+    const parsed = Number(value ?? 0);
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+
+  const parseRate = (value?: string | number) => {
+    const parsed = Number(value ?? 0);
+    return Number.isFinite(parsed) ? Number(parsed.toFixed(2)) : 0;
+  };
 
   const resizeHandler = () => {
-  chartInstance?.resize()
+    chartInstance?.resize();
-}
+  };
 
   async function getList() {
     try {
-    const params = {
+      const res = await ErpYearChart({});
-      itemCode: 'ERP_YEARPMOM_M001',
+      vList.value = res || [];
-    }
-    const res = await getItemInfoList(params)
-    vList.value = res || []
     } catch (error) {
-    console.error(error)
+      console.error(error);
-    vList.value = []
+      vList.value = [];
     }
   }
 
   function initChart() {
-  const el = chartRef.value
+    const el = chartRef.value;
-  if (!el) return
+    if (!el) return;
 
     if (!chartInstance) {
-    chartInstance = echarts.init(el)
+      chartInstance = echarts.init(el);
     }
 
-  const xData = vList.value.map(item => item.xaxis || '')
+    const xData = vList.value.map((item) => {
-  const index01Yuan = vList.value.map(item => item.index01 || 0)
+      const axisName = item.axisName || '';
-  const index02Yuan = vList.value.map(item => item.index02 || 0)
+      return axisName.includes('年') ? axisName : `${axisName}年`;
-  const index03 = vList.value.map(item => item.index03 || 0)
+    });
-  const index04 = vList.value.map(item => item.index04 || 0)
+    const currentIncomeYuan = vList.value.map((item) => parseAmount(item.value01));
+    const currentExpenseYuan = vList.value.map((item) => parseAmount(item.value02));
+    const profitRate = vList.value.map((item) => parseRate(item.value03));
+    const netProfitYuan = vList.value.map((item) => parseAmount(item.value04));
+    const lastYearIncomeYuan = vList.value.map((item) => parseAmount(item.value05));
+    const lastYearExpenseYuan = vList.value.map((item) => parseAmount(item.value06));
 
-  const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
+    const currentIncomeWan = currentIncomeYuan.map((val) => Number((val / 10000).toFixed(2)));
-  const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
+    const currentExpenseWan = currentExpenseYuan.map((val) => Number((val / 10000).toFixed(2)));
+    const netProfitWan = netProfitYuan.map((val) => Number((val / 10000).toFixed(2)));
+    const lastYearIncomeWan = lastYearIncomeYuan.map((val) => Number((val / 10000).toFixed(2)));
+    const lastYearExpenseWan = lastYearExpenseYuan.map((val) => Number((val / 10000).toFixed(2)));
 
-  const option = {
+    const option: echarts.EChartsOption & {
+      tooltip: echarts.TooltipComponentOption;
+      xAxis: Array<echarts.XAXisComponentOption & { data: string[] }>;
+      series: echarts.SeriesOption[];
+    } = {
       tooltip: {
         trigger: 'axis',
         axisPointer: { type: 'cross' },
@@ -60,46 +79,52 @@ function initChart() {
         textStyle: { color: '#0a3b70' },
         padding: [8, 12],
         borderRadius: 6,
-      formatter: params => {
+        formatter: (params) => {
-        const idx = params[0].dataIndex
+          const idx = params[0].dataIndex;
           return `
 		<div style="text-align:center;font-weight:bold;margin-bottom:6px">${params[0].axisValue}</div>
 		<table style="width:100%;border-collapse:collapse;text-align:center">
 		  <tr>
-    <td style="border:1px solid #409EFF;padding:4px;font-weight:bold">收入(元)</td>
+			<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">本年收入(元)</td>
-    <td style="border:1px solid #409EFF;padding:4px;font-weight:bold">支出(元)</td>
+			<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">本年支出(元)</td>
 			<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">利润率(%)</td>
-    <td style="border:1px solid #409EFF;padding:4px;font-weight:bold">占比(%)</td>
+			<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">净利润(元)</td>
+			<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">上年收入(元)</td>
+			<td style="border:1px solid #409EFF;padding:4px;font-weight:bold">上年支出(元)</td>
 		  </tr>
 		  <tr>
-    <td style="border:1px solid #409EFF;padding:4px">${index01Yuan[idx]}</td>
+			<td style="border:1px solid #409EFF;padding:4px">${currentIncomeYuan[idx]}</td>
-    <td style="border:1px solid #409EFF;padding:4px">${index02Yuan[idx]}</td>
+			<td style="border:1px solid #409EFF;padding:4px">${currentExpenseYuan[idx]}</td>
-    <td style="border:1px solid #409EFF;padding:4px">${index03[idx]}</td>
+			<td style="border:1px solid #409EFF;padding:4px">${profitRate[idx]}</td>
-    <td style="border:1px solid #409EFF;padding:4px">${index04[idx]}</td>
+			<td style="border:1px solid #409EFF;padding:4px">${netProfitYuan[idx]}</td>
+			<td style="border:1px solid #409EFF;padding:4px">${lastYearIncomeYuan[idx]}</td>
+			<td style="border:1px solid #409EFF;padding:4px">${lastYearExpenseYuan[idx]}</td>
 		  </tr>
-</table>`
+		</table>`;
-      }
+        },
       },
       legend: {
         top: '10',
         left: 'center',
         textStyle: { fontSize: 12, color: '#e0e6ff' },
-      data: ['收入', '支出', '利润率', '占比']
+        data: ['本年收入', '本年支出', '利润率', '净利润', '上年收入', '上年支出'],
       },
       grid: {
         left: '5%',
         right: '5%',
         bottom: '10%',
         top: '15%',
-      containLabel: true
+        containLabel: true,
       },
-    xAxis: [{
+      xAxis: [
+        {
           type: 'category',
           data: xData,
           axisLabel: { fontSize: 11, interval: 0, color: '#b4c7e7' },
           axisLine: { lineStyle: { color: '#1a508b' } },
-      boundaryGap: true
+          boundaryGap: true,
-    }],
+        },
+      ],
       yAxis: [
         {
           type: 'value',
@@ -107,102 +132,158 @@ function initChart() {
           nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
           axisLabel: { formatter: '{value}', color: '#b4c7e7' },
           axisLine: { lineStyle: { color: '#1a508b' } },
-        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+          splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } },
         },
         {
           type: 'value',
-        name: '比率 (%)',
+          name: '利润率 (%)',
           nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
           axisLabel: { formatter: '{value} %', color: '#b4c7e7' },
           axisLine: { lineStyle: { color: '#1a508b' } },
           splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.2)' } },
           min: 'dataMin',
           max: 'dataMax',
-        scale: true
+          scale: true,
-      }
+        },
       ],
       series: [
         {
-        name: '收入',
+          name: '本年收入',
-        type: 'bar',
+          type: 'line',
           yAxisIndex: 0,
-        data: index01Wan,
+          data: currentIncomeWan,
-        barWidth: '10%',
+          smooth: true,
           itemStyle: {
-          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            color: '#67C23A',
-            { offset:0, color:'#85E868' },
+          },
-            { offset:1, color:'#67C23A' }
+          lineStyle: { width: 2, color: '#67C23A' },
-          ]),
+          symbol: 'circle',
-          borderRadius: [8,8,0,0]
+          symbolSize: 5,
+          label: { show: true, position: 'top', fontSize: 10, color: '#fff', formatter: '{c}' },
+          emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
+          blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(103,194,58,0.22)' },
+              { offset: 1, color: 'rgba(103,194,58,0)' },
+            ]),
           },
-        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
         },
         {
-        name: '支出',
+          name: '本年支出',
-        type: 'bar',
+          type: 'line',
           yAxisIndex: 0,
-        data: index02Wan,
+          data: currentExpenseWan,
-        barWidth: '10%',
+          smooth: true,
           itemStyle: {
-          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            color: '#F56C6C',
-            { offset:0, color:'#FF8A8A' },
+          },
-            { offset:1, color:'#F56C6C' }
+          lineStyle: { width: 2, color: '#F56C6C' },
-          ]),
+          symbol: 'circle',
-          borderRadius: [8,8,0,0]
+          symbolSize: 5,
+          label: { show: true, position: 'top', fontSize: 10, color: '#fff', formatter: '{c}' },
+          emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
+          blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(245,108,108,0.2)' },
+              { offset: 1, color: 'rgba(245,108,108,0)' },
+            ]),
           },
-        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
         },
         {
           name: '利润率',
           type: 'line',
           yAxisIndex: 1,
-        data: index03,
+          data: profitRate,
           smooth: true,
           lineStyle: { width: 1.5, color: '#FCC367' },
           symbol: 'circle',
           symbolSize: 5,
-        label: { show:true, position:'outside', fontSize:10, color:'#FCC367', formatter:'{c}', offset:[0,-5] },
+          label: { show: true, position: 'top', fontSize: 10, color: '#FCC367', formatter: '{c}', offset: [0, -5] },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(252,195,103,0.3)' },
-            { offset:1, color:'rgba(252,195,103,0)' }
+              { offset: 1, color: 'rgba(252,195,103,0)' },
-          ])
+            ]),
-        }
+          },
+          emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
+          blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
         },
         {
-        name: '占比',
+          name: '净利润',
           type: 'line',
-        yAxisIndex: 1,
+          yAxisIndex: 0,
-        data: index04,
+          data: netProfitWan,
           smooth: true,
           lineStyle: { width: 1.5, color: '#409EFF' },
           symbol: 'circle',
           symbolSize: 5,
-        label: { show:true, position:'outside', fontSize:10, color:'#409EFF', formatter:'{c}', offset:[0,-5] },
+          label: { show: true, position: 'top', fontSize: 10, color: '#409EFF', formatter: '{c}', offset: [0, -5] },
           areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(64,158,255,0.3)' },
-            { offset:1, color:'rgba(64,158,255,0)' }
+              { offset: 1, color: 'rgba(64,158,255,0)' },
-          ])
+            ]),
-        }
+          },
-      }
+          emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
-    ]
+          blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
-  }
+        },
+        {
+          name: '上年收入',
+          type: 'line',
+          yAxisIndex: 0,
+          data: lastYearIncomeWan,
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#36CFC9' },
+          symbol: 'circle',
+          symbolSize: 5,
+          label: { show: true, position: 'top', fontSize: 10, color: '#36CFC9', formatter: '{c}', offset: [0, -5] },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(54,207,201,0.25)' },
+              { offset: 1, color: 'rgba(54,207,201,0)' },
+            ]),
+          },
+          emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
+          blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
+        },
+        {
+          name: '上年支出',
+          type: 'line',
+          yAxisIndex: 0,
+          data: lastYearExpenseWan,
+          smooth: true,
+          lineStyle: { width: 1.5, color: '#FF9D28' },
+          symbol: 'circle',
+          symbolSize: 5,
+          label: { show: true, position: 'top', fontSize: 10, color: '#FF9D28', formatter: '{c}', offset: [0, -5] },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(255,157,40,0.25)' },
+              { offset: 1, color: 'rgba(255,157,40,0)' },
+            ]),
+          },
+          emphasis: { focus: 'series', blurScope: 'coordinateSystem' },
+          blur: { lineStyle: { opacity: 0.12 }, itemStyle: { opacity: 0.12 }, label: { opacity: 0 } },
+        },
+      ],
+    };
 
-  chartInstance.setOption(option, true)
+    chartInstance.setOption(option, true);
   }
 
   onMounted(async () => {
-  await getList()
+    await getList();
-  initChart()
+    initChart();
-  window.addEventListener('resize', resizeHandler)
+    window.addEventListener('resize', resizeHandler);
-})
+  });
 
   onUnmounted(() => {
-  window.removeEventListener('resize', resizeHandler)
+    window.removeEventListener('resize', resizeHandler);
-  chartInstance?.dispose()
+    chartInstance?.dispose();
-  chartInstance = null
+    chartInstance = null;
-})
+  });
 </script>
 
 <style scoped>
@@ -212,7 +293,7 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-  background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
+    background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/box/16.png') no-repeat;
     background-size: 100% 100%;
   }
   .chart-card-header {
@@ -223,13 +304,13 @@ onUnmounted(() => {
     border-bottom: 1px solid #1a508b;
     display: flex;
     align-items: center;
-  background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/03.png") no-repeat;
+    background: rgba(0, 0, 0, 0.1) url('@jeesite/assets/chart/title/03.png') no-repeat;
     background-size: 100% 100%;
   }
   .chart-card-title {
     font-size: 16px;
     font-weight: 600;
-  color: #409EFF;
+    color: #409eff;
     letter-spacing: 0.5px;
   }
   .bar-line-chart-container {

web-vue/packages/erp/api/erp/screen.ts

@@ -52,6 +52,9 @@ export interface ChartDataItem extends BasicModel<ChartDataItem> {
   indexMin: number;        // 指标最小
 }
 
+export const ErpYearChart = (params?: ErpTransactionFlow | any) =>
+  defHttp.get<ChartDataItem[]>({ url: adminPath + '/erp/screen/getErpYearChart', params }); 
+  
 export const ErpMonthChart = (params?: ErpTransactionFlow | any) =>
   defHttp.get<ChartDataItem[]>({ url: adminPath + '/erp/screen/getErpMonthChart', params });