大屏页面初始化

screen-vue/src/views/desktop/screen/Erp/components/ChartV08.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="chart-card">
+    <div class="chart-card-header">
+      <span class="chart-card-title">年度收支分析</span>
+    </div>
+    <div class="bar-line-chart-container" ref="chartRef"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import { getItemInfoList } from '@/api/bizApi'
+
+const vList = ref([])
+const chartRef = ref(null)
+let chartInstance = null
+
+const resizeHandler = () => {
+  chartInstance?.resize()
+}
+
+async function getList() {
+  try {
+    const params = {
+      itemCode: 'ERP_YEARPMOM_M001',
+    }
+    const res = await getItemInfoList(params)
+    vList.value = res || []
+  } catch (error) {
+    console.error(error)
+    vList.value = []
+  }
+}
+
+function initChart() {
+  const el = chartRef.value
+  if (!el) return
+
+  if (!chartInstance) {
+    chartInstance = echarts.init(el)
+  }
+
+  const xData = vList.value.map(item => item.xaxis || '')
+  const index01Yuan = vList.value.map(item => item.index01 || 0)
+  const index02Yuan = vList.value.map(item => item.index02 || 0)
+  const index03 = vList.value.map(item => item.index03 || 0)
+  const index04 = vList.value.map(item => item.index04 || 0)
+
+  const index01Wan = index01Yuan.map(val => (val / 10000).toFixed(2))
+  const index02Wan = index02Yuan.map(val => (val / 10000).toFixed(2))
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'cross' },
+      backgroundColor: 'rgba(145, 200, 255, 0.9)',
+      borderColor: '#409EFF',
+      borderWidth: 1,
+      textStyle: { color: '#0a3b70' },
+      padding: [8, 12],
+      borderRadius: 6,
+      formatter: params => {
+        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>
+  </tr>
+  <tr>
+    <td style="border:1px solid #409EFF;padding:4px">${index01Yuan[idx]}</td>
+    <td style="border:1px solid #409EFF;padding:4px">${index02Yuan[idx]}</td>
+    <td style="border:1px solid #409EFF;padding:4px">${index03[idx]}</td>
+    <td style="border:1px solid #409EFF;padding:4px">${index04[idx]}</td>
+  </tr>
+</table>`
+      }
+    },
+    legend: {
+      top: '10',
+      left: 'center',
+      textStyle: { fontSize: 12, color: '#e0e6ff' },
+      data: ['收入', '支出', '利润率', '占比']
+    },
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '10%',
+      top: '15%',
+      containLabel: true
+    },
+    xAxis: [{
+      type: 'category',
+      data: xData,
+      axisLabel: { fontSize: 11, interval: 0, color: '#b4c7e7' },
+      axisLine: { lineStyle: { color: '#1a508b' } },
+      boundaryGap: true
+    }],
+    yAxis: [
+      {
+        type: 'value',
+        name: '金额 (万元)',
+        nameTextStyle: { fontSize: 12, color: '#b4c7e7' },
+        axisLabel: { formatter: '{value}', color: '#b4c7e7' },
+        axisLine: { lineStyle: { color: '#1a508b' } },
+        splitLine: { lineStyle: { color: 'rgba(26, 80, 139, 0.3)' } }
+      },
+      {
+        type: 'value',
+        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
+      }
+    ],
+    series: [
+      {
+        name: '收入',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: index01Wan,
+        barWidth: '10%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset:0, color:'#85E868' },
+            { offset:1, color:'#67C23A' }
+          ]),
+          borderRadius: [8,8,0,0]
+        },
+        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
+      },
+      {
+        name: '支出',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: index02Wan,
+        barWidth: '10%',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0,0,0,1,[
+            { offset:0, color:'#FF8A8A' },
+            { offset:1, color:'#F56C6C' }
+          ]),
+          borderRadius: [8,8,0,0]
+        },
+        label: { show:true, position:'top', fontSize:10, color:'#fff', formatter:'{c}' }
+      },
+      {
+        name: '利润率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: index03,
+        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] },
+        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)' }
+          ])
+        }
+      },
+      {
+        name: '占比',
+        type: 'line',
+        yAxisIndex: 1,
+        data: index04,
+        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] },
+        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)' }
+          ])
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option, true)
+}
+
+onMounted(async () => {
+  await getList()
+  initChart()
+  window.addEventListener('resize', resizeHandler)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeHandler)
+  chartInstance?.dispose()
+  chartInstance = null
+})
+</script>
+
+<style scoped>
+.chart-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.chart-card-header {
+  height: 40px;
+  line-height: 40px;
+  padding: 0 16px;
+  background-color: rgba(26, 80, 139, 0.5);
+  border-bottom: 1px solid #1a508b;
+  display: flex;
+  align-items: center;
+}
+.chart-card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  letter-spacing: 0.5px;
+}
+.bar-line-chart-container {
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
+}
+</style>

screen-vue/src/views/desktop/screen/Erp/index.vue

@@ -15,7 +15,7 @@
       </div>
       <div class="erp-col erp-col-1-3">
         <div class="erp-card">
-          
+          <ChartV08 />
         </div>
       </div>
       <div class="erp-col erp-col-1-3">
@@ -80,6 +80,7 @@ import ChartV04 from './components/ChartV04.vue';
 import ChartV05 from './components/ChartV05.vue';
 import ChartV06 from './components/ChartV06.vue';
 import ChartV07 from './components/ChartV07.vue';
+import ChartV08 from './components/ChartV08.vue';
 
 const props = defineProps({
   formParams: {

src/main/java/com/mini/mybigscreen/biz/controller/ItemInfoController.java

@@ -1,5 +1,6 @@
 package com.mini.mybigscreen.biz.controller;
 
+import cn.hutool.core.util.StrUtil;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.mini.mybigscreen.Model.Result;
 import com.mini.mybigscreen.biz.domain.ItemInfo;
@@ -30,10 +31,10 @@ public class ItemInfoController {
 
 
     @GetMapping("list")
-    public Result<List<ItemInfo>> getList(String itemCode,String reqParam) {
+    public Result<List<ItemInfo>> getList(String itemCode, String reqParam) {
         QueryWrapper<ItemInfo> query = new QueryWrapper<>();
         query.eq("item_code", itemCode)
-                .eq("req_param", reqParam)
+                .eq(StrUtil.isNotBlank(reqParam), "req_param", reqParam)
                 .eq("ym", DateUtil.dsValue())
         ;
         return Result.success(infoService.list(query));