feat: 增加财务报表近5年图表展示
This commit is contained in:
@@ -1,6 +1,149 @@
|
||||
import React from 'react'
|
||||
import {useParams} from 'react-router'
|
||||
import {amisRender, commonInfo, remoteMappings} from '../../util/amis.tsx'
|
||||
import {amisRender, commonInfo, readOnlyDialogOptions, remoteMappings} from '../../util/amis.tsx'
|
||||
import type {Schema} from 'amis'
|
||||
|
||||
const financePropertyLabel = (id: string | undefined, label: string, type: string, field: string): Schema => {
|
||||
if (!id) {
|
||||
return {
|
||||
type: 'tpl',
|
||||
tpl: label,
|
||||
}
|
||||
}
|
||||
let current = new Date().getFullYear()
|
||||
return {
|
||||
type: 'wrapper',
|
||||
size: 'none',
|
||||
body: [
|
||||
label,
|
||||
{
|
||||
className: 'ml-1 text-secondary',
|
||||
type: 'action',
|
||||
label: '',
|
||||
icon: 'fa fa-eye',
|
||||
level: 'link',
|
||||
size: 'xs',
|
||||
tooltip: '查看五年趋势',
|
||||
tooltipPlacement: 'top',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: `${label}五年趋势`,
|
||||
size: 'md',
|
||||
bodyClassName: 'p-0',
|
||||
...readOnlyDialogOptions(),
|
||||
body: {
|
||||
type: 'chart',
|
||||
api: `get:${commonInfo.baseUrl}/stock/finance/${id}/${type}/${field}`,
|
||||
height: 500,
|
||||
config: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderColor: '#ccc',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
padding: [10, 15],
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
top: '10%',
|
||||
bottom: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
current - 5,
|
||||
current - 4,
|
||||
current - 3,
|
||||
current - 2,
|
||||
current - 1,
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#e0e0e0',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: true,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#f0f0f0',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: '${detail || []}',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: true,
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#4096ff',
|
||||
shadowColor: 'rgba(64, 150, 255, 0.3)',
|
||||
shadowBlur: 5,
|
||||
shadowOffsetY: 2,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#4096ff',
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff',
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(64, 150, 255, 0.2)',
|
||||
}, {
|
||||
offset: 1, color: 'rgba(64, 150, 255, 0.01)',
|
||||
}],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function StockDetail() {
|
||||
const {id} = useParams()
|
||||
@@ -39,8 +182,30 @@ function StockDetail() {
|
||||
className: 'my-2',
|
||||
type: 'property',
|
||||
items: [
|
||||
{label: '总资产', content: '${balanceSheet.totalAssets}'},
|
||||
{label: '总负债', content: '${balanceSheet.totalLiabilities}'},
|
||||
{
|
||||
label: financePropertyLabel(id, '总资产', 'balanceSheet', 'totalAssets'),
|
||||
content: '${balanceSheet.totalAssets}',
|
||||
},
|
||||
{
|
||||
label: financePropertyLabel(id, '流动资产', 'balanceSheet', 'totalCurrentAssets'),
|
||||
content: '${balanceSheet.totalCurrentAssets}',
|
||||
},
|
||||
{
|
||||
label: financePropertyLabel(id, '非流动资产', 'balanceSheet', 'totalNonCurrentAssets'),
|
||||
content: '${balanceSheet.totalNonCurrentAssets}',
|
||||
},
|
||||
{
|
||||
label: financePropertyLabel(id, '总负债', 'balanceSheet', 'totalLiabilities'),
|
||||
content: '${balanceSheet.totalLiabilities}',
|
||||
},
|
||||
{
|
||||
label: financePropertyLabel(id, '流动负债', 'balanceSheet', 'totalCurrentLiabilities'),
|
||||
content: '${balanceSheet.totalCurrentLiabilities}',
|
||||
},
|
||||
{
|
||||
label: financePropertyLabel(id, '非流动负债', 'balanceSheet', 'totalNonCurrentLiabilities'),
|
||||
content: '${balanceSheet.totalNonCurrentLiabilities}',
|
||||
},
|
||||
],
|
||||
},
|
||||
'利润表',
|
||||
@@ -48,9 +213,18 @@ function StockDetail() {
|
||||
className: 'my-2',
|
||||
type: 'property',
|
||||
items: [
|
||||
{label: '营业总收入', content: '${income.totalOperatingRevenue}'},
|
||||
{label: '营业总成本', content: '${income.totalOperatingCost}'},
|
||||
{label: '营业总利润', content: '${income.totalProfit}'},
|
||||
{
|
||||
label: financePropertyLabel(id, '营业总收入', 'income', 'totalOperatingRevenue'),
|
||||
content: '${income.totalOperatingRevenue}',
|
||||
},
|
||||
{
|
||||
label: financePropertyLabel(id, '营业总成本', 'income', 'totalOperatingCost'),
|
||||
content: '${income.totalOperatingCost}',
|
||||
},
|
||||
{
|
||||
label: financePropertyLabel(id, '营业总利润', 'income', 'totalProfit'),
|
||||
content: '${income.totalProfit}',
|
||||
},
|
||||
],
|
||||
},
|
||||
'现金流量表',
|
||||
@@ -58,7 +232,10 @@ function StockDetail() {
|
||||
className: 'my-2',
|
||||
type: 'property',
|
||||
items: [
|
||||
{label: '净利润', content: '${cashFlow.netProfit}'},
|
||||
{
|
||||
label: financePropertyLabel(id, '净利润', 'cashflow', 'netProfit'),
|
||||
content: '${cashFlow.netProfit}',
|
||||
},
|
||||
],
|
||||
},
|
||||
{type: 'divider'},
|
||||
|
||||
Reference in New Issue
Block a user