From a3c508233dd94b50c8005ec3a5d40b91341d6434 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 29 一月 2026 17:58:30 +0800
Subject: [PATCH] Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-management into dev_New
---
src/views/reportAnalysis/financialAnalysis/components/center-center.vue | 191 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 191 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/financialAnalysis/components/center-center.vue b/src/views/reportAnalysis/financialAnalysis/components/center-center.vue
new file mode 100644
index 0000000..7d32ebd
--- /dev/null
+++ b/src/views/reportAnalysis/financialAnalysis/components/center-center.vue
@@ -0,0 +1,191 @@
+<template>
+ <div>
+ <!-- 璁惧缁熻 -->
+ <div class="equipment-stats">
+ <div class="equipment-header">
+ <img
+ src="@/assets/BI/shujutongjiicon@2x.png"
+ alt="鍥炬爣"
+ class="equipment-icon"
+ />
+ <span class="equipment-title">鏀舵敮瀵规瘮鍒嗘瀽</span>
+ </div>
+ <Echarts
+ ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="lineLegend"
+ :series="lineSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+ style="height: 260px"
+ />
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import * as echarts from 'echarts'
+import Echarts from '@/components/Echarts/echarts.vue'
+import { incomeExpenseAnalysis } from '@/api/viewIndex.js'
+
+const chartStyle = { width: '100%', height: '100%' }
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: '16%',
+ containLabel: true,
+}
+
+const lineLegend = {
+ show: true,
+ top: '2%',
+ left: 'center',
+ itemGap: 24,
+ itemWidth: 12,
+ itemHeight: 12,
+ textStyle: { color: '#B8C8E0', fontSize: 14 },
+ data: [
+ { name: '鏀跺叆', itemStyle: { color: 'rgba(11, 137, 254, 1)' } },
+ { name: '鏀嚭', itemStyle: { color: 'rgba(11, 249, 254, 1)' } },
+ ],
+}
+
+const xAxis1 = ref([
+ {
+ type: 'category',
+ data: [],
+ axisTick: { show: false },
+ axisLine: { show: false, lineStyle: { color: 'rgba(184, 200, 224, 0.3)' } },
+ axisLabel: { color: '#B8C8E0', fontSize: 12 },
+ splitLine: { show: false, lineStyle: { type: 'dashed', color: 'rgba(184, 200, 224, 0.2)' } },
+ },
+])
+
+const yAxis1 = [
+ {
+ type: 'value',
+ name: '鍗曚綅: 鍏�',
+ nameTextStyle: { color: '#B8C8E0', fontSize: 12, padding: [0, 0, 0, 0] },
+ axisLine: { show: false },
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0', fontSize: 12 },
+ splitLine: { lineStyle: { color: '#B8C8E0' } },
+ },
+]
+
+const lineSeries = ref([
+ {
+ name: '鏀跺叆',
+ type: 'line',
+ 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)' },
+ ]),
+ },
+ 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 tooltip = {
+ 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 fetchData = () => {
+ incomeExpenseAnalysis()
+ .then((res) => {
+ if (res.code === 200 && Array.isArray(res.data)) {
+ const list = res.data
+ xAxis1.value[0].data = list.map((d) => d.date)
+ lineSeries.value[0].data = list.map((d) => Number(d.income) || 0)
+ lineSeries.value[1].data = list.map((d) => Number(d.expense) || 0)
+ }
+ })
+ .catch((err) => {
+ console.error('鑾峰彇鏀舵敮瀵规瘮鍒嗘瀽澶辫触:', err)
+ })
+}
+
+onMounted(() => {
+ fetchData()
+})
+</script>
+
+<style scoped>
+.equipment-stats {
+ border: 1px solid #1a58b0;
+ padding: 0 18px 18px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.equipment-header {
+ font-weight: 500;
+ font-size: 21px;
+ display: flex;
+ border-bottom: 1px solid;
+ border-image: linear-gradient(
+ 270deg,
+ rgba(0, 126, 255, 0) 0%,
+ rgba(0, 126, 255, 0.4549) 35%,
+ #007eff 78%,
+ #007eff 100%
+ )
+ 1;
+ padding-bottom: 2px;
+}
+
+.equipment-title {
+ font-weight: 500;
+ font-size: 18px;
+ background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ line-height: 50px;
+}
+
+.equipment-icon {
+ width: 50px;
+ height: 50px;
+}
+</style>
--
Gitblit v1.9.3