This commit is contained in:
renzhijun
2026-01-31 09:45:00 +08:00
23 changed files with 967 additions and 209 deletions

View File

@@ -67,7 +67,6 @@
<view style="height: 500rpx;">
<l-echart ref="chartRef2"></l-echart>
</view>
</view>
</view>
</template>

View File

@@ -10,16 +10,14 @@
style="width: 13rpx; height: 22rpx;"></image>
</view>
<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 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: 10rpx 10rpx; box-sizing: border-box;"
:style="{color: index == 0 ? '#BB8520' : '#999999', border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`, 'background-color': (index == 0 ? '#FFFAF1' : '#FFFFFF')}"
<view class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 1fr); margin: 0 20rpx;">
<view :class="'item flexCenter '+(cashFlowIndicatorIndex==index?'select':'')"
v-for="(item,index) in ['货币资金', '所有者权益', '关键指标']" :key="index">
{{item}}
</view>
</view>
<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
<view class="flex" style="padding: 20rpx;">
<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;">
@@ -33,49 +31,44 @@
mode="widthFix"></image>
</view>
</view>
<view
style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: red;">
折线图占位
<view style="height: 400rpx;">
<l-echart ref="chartRef1"></l-echart>
</view>
<view style="background-color: #FAFAFC; border-radius: 10rpx; margin: 0 20rpx; padding: 20rpx 0;">
<view v-if="financialBalanceList.length>0" style="background-color: #FAFAFC; border-radius: 10rpx; margin: 0 20rpx; padding: 20rpx 0;">
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">资产总计</view>
<view style="text-align: right; color: #2A2A2A;">29.21亿</view>
<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].assets.total)}}</view>
</view>
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">负债合计</view>
<view style="text-align: right; color: #2A2A2A;">17.94亿</view>
<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].liabilities.total)}}</view>
</view>
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">所有者权益</view>
<view style="text-align: right; color: #2A2A2A;">11.27亿</view>
<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.total)}}</view>
</view>
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">货币资金</view>
<view style="text-align: right; color: #2A2A2A;">5.45亿</view>
<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].assets.current_assets.cash)}}</view>
</view>
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">资本公积金</view>
<view style="text-align: right; color: #2A2A2A;">4.61亿</view>
<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.capital_reserve)}}</view>
</view>
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view class="flex between" style=" font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">盈余公积金</view>
<view style="text-align: right; color: #2A2A2A;">1.02亿</view>
<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.surplus_reserve)}}</view>
</view>
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view class="flex between" style="font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">未分配利润</view>
<view style="text-align: right; color: #2A2A2A;">1.61亿</view>
<view style="text-align: right; color: #2A2A2A;">{{getNumStr(financialBalanceList[0].equity.undistributed_profit)}}</view>
</view>
</view>
</view>
<!-- 现金流量表 -->
<view @click="itemClick(1)" style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
<view class="flex" style="padding: 20rpx;">
<image src="/pagesStock/static/icon/cwfx-1.png" mode="widthFix"
style="width: 40rpx; height: 40rpx;"></image>
<view class="flex1" style="margin: 0 10rpx; font-size: 28rpx;">现金流量表</view>
@@ -83,16 +76,13 @@
style="width: 13rpx; height: 22rpx;"></image>
</view>
<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 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: 10rpx 10rpx; box-sizing: border-box;"
:style="{color: index == 0 ? '#BB8520' : '#999999', border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`, 'background-color': (index == 0 ? '#FFFAF1' : '#FFFFFF')}"
v-for="(item,index) in ['经营现金流', '筹资现金流', '投资现金流']" :key="index">
<view class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 1fr); margin: 0 20rpx;">
<view :class="'item flexCenter '+(cashFlowIndicatorIndex==index?'select':'')" v-for="(item,index) in ['经营现金流', '筹资现金流', '投资现金流']" :key="index" @click="clickCashFlowIndicatorItem(index)">
{{item}}
</view>
</view>
<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
<view class="flex" style="padding: 20rpx;">
<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;">
@@ -106,12 +96,9 @@
mode="widthFix"></image>
</view>
</view>
<view
style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: red;">
柱状折线图占位
<view style="height: 400rpx;">
<l-echart ref="chartRef2"></l-echart>
</view>
<view style="background-color: #FAFAFC; border-radius: 10rpx; margin: 0 20rpx; padding: 20rpx 0;">
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">经营性现金流</view>
@@ -140,7 +127,7 @@
</view>
</view>
<!-- 利润表 -->
<view @click="itemClick(2)" style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
<view style="color: #2B2B2B; font-weight: 500; font-size: 24rpx;">
<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
<image src="/pagesStock/static/icon/cwfx-1.png" mode="widthFix"
style="width: 40rpx; height: 40rpx;"></image>
@@ -149,22 +136,20 @@
style="width: 13rpx; height: 22rpx;"></image>
</view>
<view style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 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: 10rpx 10rpx; box-sizing: border-box;"
:style="{color: index == 0 ? '#BB8520' : '#999999', border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`, 'background-color': (index == 0 ? '#FFFAF1' : '#FFFFFF')}"
v-for="(item,index) in ['净利润', '营业收入', '期间费用']" :key="index">
<view class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(3, 1fr); margin: 0 20rpx;">
<view :class="'item flexCenter '+(profitIndicatorIndex==index?'select':'')"
v-for="(item,index) in ['净利润', '营业收入', '期间费用']" :key="index" @click="clickProfitIndicatorItem(index)">
{{item}}
</view>
</view>
<view style="display: flex;align-items: center; padding: 20rpx; box-sizing: border-box;">
<view style="display: flex;align-items: center; padding: 20rpx;">
<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; margin-right: 10rpx;">
style="display: flex; align-items: center; padding: 3rpx 10rpx; border: 1rpx solid #D2D2D2; margin-right: 10rpx;">
<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>
@@ -172,7 +157,7 @@
mode="widthFix"></image>
</view>
<view
style="display: flex; align-items: center; padding: 3rpx 10rpx; box-sizing: border-box; border: 1rpx solid #D2D2D2;">
style="display: flex; align-items: center; 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>
@@ -182,9 +167,8 @@
</view>
<view style="height: 400rpx;">
<l-echart ref="chartRef1"></l-echart>
<l-echart ref="chartRef3"></l-echart>
</view>
<view style="background-color: #FAFAFC; border-radius: 10rpx; margin: 0 20rpx; padding: 20rpx 0;">
<view style="display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; font-weight: 500; margin: 20rpx;">
<view style="flex: 1; color: #999999; margin-right: 20rpx;">净利润</view>
@@ -216,16 +200,230 @@
</template>
<script>
import { getNumStr } from '../../utils/util';
export default {
name:"cwsj-view",
data() {
return {
profitabilityIndicatorIndex:0,
profitIndicatorIndex:0,
cashFlowIndicatorIndex:0,
option1:{
legend:{
show:true,
data:['期间费用','同比(右)']
},
grid:{
left:'2%',
right:'2%',
top:'5%',
bottom:'30%'
},
xAxis: {
type: 'category',
data: [],
axisLabel:{
rotate:45,
fontSize:10
}
},
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:'ROE',
data: [],
yAxisIndex:0
},
{
type: 'line',
name:'同比',
data: [],
yAxisIndex:1
}
]
},
option2:{
legend:{
show:true,
data:['经营现金流','同比(右)']
},
grid:{
left:'2%',
right:'2%',
top:'5%',
bottom:'30%'
},
xAxis: {
type: 'category',
data: [],
axisLabel:{
fontSize:10,
rotate:45
}
},
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:'ROE',
data: [],
yAxisIndex:0
},
{
type: 'line',
name:'同比',
data: [],
yAxisIndex:1
}
]
},
option3:{
legend:{
show:true,
data:['期间费用','同比(右)']
},
grid:{
left:'2%',
right:'2%',
top:'5%',
bottom:'30%'
},
xAxis: {
type: 'category',
data: [],
axisLabel:{
rotate:45,
fontSize:10
}
},
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:'ROE',
data: [],
yAxisIndex:0
},
{
type: 'line',
name:'同比',
data: [],
yAxisIndex:1
}
]
},
getNumStr:getNumStr
};
},
props:{
financialBalanceList:Array, //资产负债表
cashFlowList:Array, //现金流量表
incomeStatementList:Array, //利润表
},
watch:{
},
methods:{
/**
* 点击切换现金流量表指标
* @param {Object} index
*/
clickCashFlowIndicatorItem(index) {
if(this.cashFlowIndicatorIndex!=index) {
this.cashFlowIndicatorIndex = index
}
},
/**
* 点击切换利润表指标
* @param {Object} index
*/
clickProfitIndicatorItem(index) {
if(this.profitIndicatorIndex!=index) {
this.profitIndicatorIndex = index
}
}
}
}
</script>
<style>
<style lang="less">
.indicatorC
{
.item
{
padding: 10rpx;
border: 1rpx solid #D2D2D2;
font-size: 20rpx;
color: #999999;
text-align: center;
}
.item.select
{
background-color: #FFFAF1;
color: #BB8520;
border: 1rpx solid #F2C369;
}
}
</style>

View File

@@ -51,7 +51,7 @@
{{timelineInfo.negative_events}}</text>
</view>
<view class="timelineList">
<view class="item" v-for="(item,index) in timelineList" :key="index" @click="clickAction">
<view class="item" v-for="(item,index) in timelineList" :key="index" @click="clickAction(item)">
<view class="impactC flexColumnCenter">
<image v-if="item.impact_metrics.is_positive==1" class="icon" style="margin-top: 20rpx;"
src="/pagesStock/static/icon/yuan_shang.png" mode="widthFix"></image>
@@ -97,8 +97,8 @@
timelineList:Array, //发展时间线数组
},
methods: {
clickAction() {
this.$emit('detail')
clickAction(item) {
this.$emit('detail',item)
}
}
}

View File

@@ -37,10 +37,10 @@
</view>
</view>
</view>
<view class="flex"
<view v-if="financialMetricsInfo" 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="font-weight: bold; color: #EC3440; font-size: 30rpx;">{{financialMetricsInfo.solvency.asset_liability_ratio}}%</view>
<view style="margin-top: 10rpx;">资产负债率</view>
</view>
<view>
@@ -49,8 +49,8 @@
<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>
<text :style="'color: '+(getDebtStatusText(financialMetricsInfo.solvency.asset_liability_ratio).color)">{{getDebtStatusText(financialMetricsInfo.solvency.asset_liability_ratio).text}}</text>
<text style="margin-left: 10rpx;">流动比率 {{financialMetricsInfo.solvency.current_ratio}}|研发费用率 {{financialMetricsInfo.expense_ratios.rd_expense_ratio}}%</text>
</view>
</view>
</view>
@@ -189,7 +189,8 @@
};
},
props: {
stockInfo:Object,
stockInfo:Object,
financialMetricsInfo:Object,
barCategoryList:Array,
barList:Array,
lineList:Array, //折线图数据
@@ -251,6 +252,16 @@
setTimeout(function() {
chart.setOption(that.option2)
}, 2000);
},
/**
* 获取资产负债状态
*/
getDebtStatusText(value) {
if (value < 40)
return { text: '安全', color: 'green' };
if (value < 60) return { text: '适中', color: 'gold' };
if (value < 70) return { text: '偏高', color: 'orange' };
return { text: '风险', color: 'red' };
},
itemClick(index) {
uni.navigateTo({