longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.28 完善主营业务模块表格，柱状图，饼状图

Browse Source
This commit is contained in:
尚政杰
2026-01-28 17:52:32 +08:00
parent da90511b86
commit 4f211dcd5f
15 changed files with 486 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
components/cwfx-view/cwfx-view.vue
View File

@@ -8,7 +8,6 @@
<image src="/static/icon/home/conceptCenter/next.png" mode="widthFix"
style="width: 13rpx; height: 22rpx;"></image>
</view>
<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
<view
style="display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20rpx; color: #999999; border: 1rpx solid #D2D2D2; padding: 3rpx 5rpx; box-sizing: border-box;"
@@ -18,14 +17,13 @@
{{item}}
</view>
</view>
<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
<view class="flex" style="padding: 20rpx; box-sizing: border-box;">
<view class="flex1" style="font-size: 28rpx;">查看详细数据</view>
<view
style="color: #F2C369; font-size: 22rpx; padding: 2rpx 10rpx; border-radius: 5rpx; border: 1rpx solid #F2C369; text-align: center; margin: 0 10rpx;">
单季度</view>
<view
style="display: flex; align-items: center; padding: 3rpx 10rpx; box-sizing: border-box; border: 1rpx solid #D2D2D2;">
<view class="flex"
style="padding: 3rpx 10rpx;border: 1rpx solid #D2D2D2;">
<image style="width: 23rpx; height: 23rpx;" src="/pagesStock/static/icon/all-icon.png"
mode="widthFix"></image>
<view style="margin: 0 10rpx; color: #999999; font-size: 22rpx;">全部</view>
@@ -34,9 +32,9 @@
</view>
</view>
<view
style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: red;">
柱状图占位 </view>
<view style="height: 500rpx;">
<l-echart ref="chartRef1"></l-echart>
</view>
</view>
@@ -73,10 +71,9 @@
mode="widthFix"></image>
</view>
</view>
<view
style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: blue;">
柱状图占位 </view>
<view style="height: 500rpx;">
<l-echart ref="chartRef2"></l-echart>
</view>
</view>
</view>
@@ -87,8 +84,74 @@
name:"cwfx-view",
data() {
return {
option1:{
legend:{
show:true,
data:['ROE','同比(右)']
},
grid:{
left:'2%',
right:'2%',
top:'5%',
bottom:'30%'
},
xAxis: {
type: 'category',
data: [],
axisLabel:{
// interval:0
}
},
yAxis: [{
type: 'value',
name:'(%)',
position:'left',
alignTicks:true,
axisLine:{
onZero:false
}
},
{
type: 'value',
name:'(%)',
position:'right',
alignTicks:true,
axisLine:{
onZero:false
}
}
],
dataZoom:[{
type:'slider'
}],
series: [
{
type: 'bar',
name:'营业收入',
data: [],
yAxisIndex:0
},
{
type: 'line',
name:'净利润',
data: [],
yAxisIndex:1
}
]
},
};
},
props: {
barCategoryList1:Array,
barList1:Array,
lineList:Array, //折线图数据
barCategoryList1:Array,
barList1:Array,
},
methods:{
clickProfitabilityIndicators(item) {
}
}
}
</script>

242
components/zysj-view/zysj-view.vue
View File

@@ -1,68 +1,60 @@
<template>
<view>
<view class="flex"
style="font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx; box-sizing: border-box ;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
<view style="width: 195rpx;">
<view style="font-weight: bold; color: #1DB26F; font-size: 30rpx;">+12.50%</view>
<view style="margin-top: 10rpx;">利润增长</view>
</view>
<view>
<view style="display: flex; align-items: center;">
<text
style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">成长能力</text>
<text
style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">增长动力</text>
</view>
<view style="margin-top: 10rpx;">
<text>营收增长</text>
<text style="color: #1DB26F; margin: 0 10rpx;">+8.20%</text>
<text style="color: #F59B38;">（稳健增长）</text>
</view>
</view>
</view>
<view
style="display: flex; align-items: center; font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx; box-sizing: border-box ;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
<view style="width: 195rpx;">
<view style="font-weight: bold; color: #F59B38; font-size: 30rpx;">16.23%</view>
<view style="margin-top: 10rpx;">ROE</view>
</view>
<view>
<view style="display: flex; align-items: center;">
<text
style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">盈利与回报</text>
<text
style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">赚钱能力</text>
</view>
<view style="margin-top: 10rpx;">
<text style="color: #F59B38;">良好</text>
<text style="margin-left: 10rpx;">净利率 32.56%|毛利率 71.92%</text>
</view>
</view>
</view>
<view class="flex"
style="display: flex; align-items: center; font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx; box-sizing: border-box ;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
<view style="width: 195rpx;">
<view style="font-weight: bold; color: #EC3440; font-size: 30rpx;">93.52%</view>
<view style="margin-top: 10rpx;">资产负债率</view>
</view>
<view>
<view style="display: flex; align-items: center;">
<text
style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">风险与运营</text>
<text
style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">安全边际</text>
</view>
<view style="margin-top: 10rpx;">
<text style="color: #EC3440;">风险</text>
<text style="margin-left: 10rpx;">流动比率 0.73|研发费用率 5.48%</text>
</view>
</view>
</view>
<view>
<block v-if="stockInfo">
<view class="flex"
style="font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx; box-sizing: border-box ;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
<view style="width: 195rpx;">
<view style="font-weight: bold; color: #1DB26F; font-size: 30rpx;">{{getChgRateStr(stockInfo.growth_rates.profit_growth)}}%</view>
<view style="margin-top: 10rpx;">利润增长</view>
</view>
<view>
<view class="flex">
<text
style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">成长能力</text>
<text
style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">增长动力</text>
</view>
<view style="margin-top: 10rpx;">
<text>营收增长</text>
<text style="color: #1DB26F; margin: 0 10rpx;">{{getChgRateStr(stockInfo.growth_rates.revenue_growth)}}%</text>
<text style="color: #F59B38;">（稳健增长）</text>
</view>
</view>
</view>
<view class="flex" style="font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx; box-sizing: border-box ;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
<view style="width: 195rpx;">
<view style="font-weight: bold; color: #F59B38; font-size: 30rpx;">{{getChgRateStr(stockInfo.key_metrics.roe)}}%</view>
<view style="margin-top: 10rpx;">ROE</view>
</view>
<view>
<view class="flex">
<text style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">盈利与回报</text>
<text style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">赚钱能力</text>
</view>
<view style="margin-top: 10rpx;">
<text style="color: #F59B38;">良好</text>
<text style="margin-left: 10rpx;">净利率 {{getChgRateStr(stockInfo.key_metrics.net_margin)}}%|毛利率 {{getChgRateStr(stockInfo.key_metrics.gross_margin)}}%</text>
</view>
</view>
</view>
<view class="flex"
style="font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
<view style="width: 195rpx;">
<view style="font-weight: bold; color: #EC3440; font-size: 30rpx;">93.52%</view>
<view style="margin-top: 10rpx;">资产负债率</view>
</view>
<view>
<view class="flex">
<text style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">风险与运营</text>
<text style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">安全边际</text>
</view>
<view style="margin-top: 10rpx;">
<text style="color: #EC3440;">风险</text>
<text style="margin-left: 10rpx;">流动比率 0.73|研发费用率 5.48%</text>
</view>
</view>
</view>
</block>
<view style="text-align: center; font-size: 26rpx; color: #2B2B2B; font-weight: bold; margin: 20rpx;">
营收与利润趋势</view>
<view style="height: 400rpx;">
@@ -86,20 +78,25 @@
{{['', '(2025年中报)', '(2025年中报)', '(2025年中报)', '(2024年年报)'][index]}}
</view>
</view>
</view>
<view v-for="(item, index) in ['零售金融业务', '批发金融业务', '其他业务']"
style="display: grid; grid-template-columns: 130rpx repeat(4, 1fr); color: #666666; font-size: 20rpx; font-weight: 500; margin: 0 20rpx; padding: 10rpx; box-sizing: border-box;"
:style="{'background-color': (index % 2 == 0 ? '#FFFFFF' : '#FAFAFC')}">
<view v-for="(item, index) in [item, '64.53%', '200.57亿', '310.81亿', '712.55亿']"
:style="{'text-align': index == 0 ? 'left' : 'center'}">{{item}}</view>
</view>
</view>
<block v-if="productClassificationList.length>0">
<view class="table" v-for="(item, index) in productClassificationList[0].products" :key="index"
style="display: grid; grid-template-columns: 130rpx repeat(4, 1fr); margin: 0 20rpx; padding: 10rpx;"
:style="{'background-color': (index % 2 == 0 ? '#FFFFFF' : '#FAFAFC')}">
<view class="item">{{item.content}}</view>
<view class="item flexCenter">{{item.profit_margin.toFixed(2)}}%</view>
<view class="item flexCenter">{{getNumStr(item.profit)}}</view>
<view class="item flexCenter">{{getNumStr(item.revenue)}}</view>
<view class="item flexCenter">{{item.content}}</view>
</view>
</block>
<view style="height: 80rpx;"></view>
</view>
</template>
<script>
import { getChgRateStr, getNumStr } from '@/utils/util.js';
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
export default {
@@ -107,9 +104,22 @@
data() {
return {
option1:{
legend:{
show:true,
data:['营业收入','净利润']
},
grid:{
left:'2%',
right:'2%',
top:'5%',
bottom:'30%'
},
xAxis: {
type: 'category',
data: []
data: [],
axisLabel:{
// interval:0
}
},
yAxis: [{
type: 'value',
@@ -130,47 +140,66 @@
}
}
],
dataZoom:[{
type:'slider'
}],
series: [
{
type: 'bar',
name:'营业收入',
data: [],
yAxisIndex:0
},
{
type: 'line',
name:'净利润',
data: [],
yAxisIndex:1
}
]
},
option2:{
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
title:{
text:'',
textStyle:{
fontSize:12
}
},
legend:{
show:true
},
grid:{
left:0,
right:0,
top:'5%',
bottom:'5%'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
data: [],
type: 'pie',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
center:['50%','50%'],
label:{
formatter:"{d}%"
}
}
]
}
]
},
getChgRateStr:getChgRateStr,
getNumStr:getNumStr
};
},
props: { // 0 主营数据 1 财务分析 2 财务数据
type: Number,
props: {
stockInfo:Object,
barCategoryList:Array,
barList:Array,
lineList:Array
lineList:Array, //折线图数据
productClassificationList:Array
},
watch:{
barCategoryList(newValue){
this.option1.xAxis.data = newValue
},
barList(newValue){
this.option1.series[0].data = newValue
this.barLineInit()
@@ -178,7 +207,22 @@
lineList(newValue){
this.option1.series[1].data = newValue
this.barLineInit()
},
productClassificationList(newValue) {
let data = newValue[0].products
this.option2.title.text = '主营业务构成（'+newValue[0].report_type+'）'
let pieList = []
for (let item of data) {
pieList.push({
name:item.content,
value:item.revenue_ratio.toFixed(2)
})
}
this.option2.series[0].data = pieList
this.pieInit()
}
},
methods: {
/**
@@ -219,5 +263,17 @@
</script>
<style lang="less">
.table
{
.item
{
font-size: 20rpx;
font-weight: 500;
color: #666666;
}
.item.center
{
text-align: center;
}
}
</style>