223 lines
7.4 KiB
Vue
223 lines
7.4 KiB
Vue
<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 style="text-align: center; font-size: 26rpx; color: #2B2B2B; font-weight: bold; margin: 20rpx;">
|
||
营收与利润趋势</view>
|
||
<view style="height: 400rpx;">
|
||
<l-echart ref="chartRef1"></l-echart>
|
||
</view>
|
||
<view style="text-align: left; font-size: 26rpx; color: #2B2B2B; font-weight: bold; margin: 20rpx;">主营业务
|
||
</view>
|
||
<view style="height: 400rpx;">
|
||
<l-echart ref="chartRef2"></l-echart>
|
||
</view>
|
||
<view style="text-align: left; font-size: 26rpx; color: #2B2B2B; font-weight: bold; margin: 20rpx;">
|
||
主营业务明细与历史对比</view>
|
||
<view
|
||
style="display: grid; grid-template-columns: 130rpx repeat(4, 1fr); color: #666666; font-size: 20rpx; font-weight: 500; background-color: #FAFAFC; margin: 20rpx; margin-bottom: 0; padding: 10rpx; box-sizing: border-box;">
|
||
<view v-for="(item, index) in ['业务', '毛利率', '利润', '营收', '营收']"
|
||
style="display: flex;align-items: center;justify-content: center; flex-direction: column;"
|
||
:style="{'text-align': index == 0 ? 'left' : 'center', 'align-items': index == 0 ? 'flex-start' : 'center'}">
|
||
<view>{{item}}</view>
|
||
<view v-if="['', '(2025年中报)', '(2025年中报)', '(2025年中报)', '(2024年年报)'][index].length > 0"
|
||
style="font-size: 18rpx;" :style="{'text-align': index == 0 ? 'left' : 'center'}">
|
||
{{['', '(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 style="height: 80rpx;"></view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
|
||
|
||
export default {
|
||
name: "zysj-view",
|
||
data() {
|
||
return {
|
||
option1:{
|
||
xAxis: {
|
||
type: 'category',
|
||
data: []
|
||
},
|
||
yAxis: [{
|
||
type: 'value',
|
||
name:'营收(亿)',
|
||
position:'left',
|
||
alignTicks:true,
|
||
axisLine:{
|
||
onZero:false
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name:'利润(亿)',
|
||
position:'right',
|
||
alignTicks:true,
|
||
axisLine:{
|
||
onZero:false
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
data: [],
|
||
yAxisIndex:0
|
||
},
|
||
{
|
||
type: 'line',
|
||
data: [],
|
||
yAxisIndex:1
|
||
}
|
||
]
|
||
},
|
||
option2:{
|
||
xAxis: {
|
||
type: 'category',
|
||
data: []
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
data: [120, 200, 150, 80, 70, 110, 130],
|
||
type: 'pie',
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
props: { // 0 主营数据 1 财务分析 2 财务数据
|
||
type: Number,
|
||
barCategoryList:Array,
|
||
barList:Array,
|
||
lineList:Array
|
||
},
|
||
watch:{
|
||
barList(newValue){
|
||
this.option1.series[0].data = newValue
|
||
this.barLineInit()
|
||
},
|
||
lineList(newValue){
|
||
this.option1.series[1].data = newValue
|
||
this.barLineInit()
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 柱状图，折线图初始化
|
||
*/
|
||
async barLineInit() {
|
||
// chart 图表实例不能存在data里
|
||
const chart = await this.$refs.chartRef1.init(echarts);
|
||
// chart.on('click',function (params) {
|
||
// console.log(params)
|
||
// })
|
||
let that = this
|
||
setTimeout(function() {
|
||
chart.setOption(that.option1)
|
||
}, 2000);
|
||
},
|
||
/**
|
||
* 饼状图初始化
|
||
*/
|
||
async pieInit() {
|
||
// chart 图表实例不能存在data里
|
||
const chart = await this.$refs.chartRef2.init(echarts);
|
||
// chart.on('click',function (params) {
|
||
// console.log(params)
|
||
// })
|
||
let that = this
|
||
setTimeout(function() {
|
||
chart.setOption(that.option2)
|
||
}, 2000);
|
||
},
|
||
itemClick(index) {
|
||
uni.navigateTo({
|
||
url: `/pagesStock/stockCenterDetails/cwDetails?index=${index}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
|
||
</style> |