2.4 组件结构调整,调整会员权限判断
This commit is contained in:
309
pagesStock/components/zysj-view/zysj-view.vue
Normal file
309
pagesStock/components/zysj-view/zysj-view.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<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;">{{stockInfo.growth_rates.profit_growth?(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:'+getGrowthStatus(stockInfo.growth_rates.profit_growth).color">({{stockInfo.growth_rates.profit_growth?(getGrowthStatus(stockInfo.growth_rates.profit_growth).text):'-'}})</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: #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: '+getROEStatus(stockInfo.key_metrics.roe).color">{{getROEStatus(stockInfo.key_metrics.roe).text}}</text>
|
||||
<text style="margin-left: 10rpx;">净利率 {{stockInfo.key_metrics.net_margin.toFixed(2)}}%|毛利率 {{stockInfo.key_metrics.gross_margin?(getChgRateStr(stockInfo.key_metrics.gross_margin)+'%'):'-'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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;">{{financialMetricsInfo.solvency.asset_liability_ratio?financialMetricsInfo.solvency.asset_liability_ratio.toFixed(2):'-'}}%</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: '+(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.solvency.current_ratio.toFixed(2):'-'}}|研发费用率 {{financialMetricsInfo.expense_ratios.rd_expense_ratio}}%</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;">
|
||||
<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 class="flexColumnCenter" v-for="(item, index) in ['业务', '毛利率', '利润', '营收', '营收']" :key="index"
|
||||
style="justify-content: center;"
|
||||
: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>
|
||||
<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 {
|
||||
name: "zysj-view",
|
||||
data() {
|
||||
return {
|
||||
option1:{
|
||||
legend:{
|
||||
show:true,
|
||||
data:['营业收入','净利润']
|
||||
},
|
||||
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
|
||||
}
|
||||
]
|
||||
},
|
||||
option2:{
|
||||
title:{
|
||||
text:'',
|
||||
textStyle:{
|
||||
fontSize:12
|
||||
}
|
||||
},
|
||||
legend:{
|
||||
show:true
|
||||
},
|
||||
grid:{
|
||||
left:0,
|
||||
right:0,
|
||||
top:'5%',
|
||||
bottom:'5%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [],
|
||||
type: 'pie',
|
||||
center:['50%','50%'],
|
||||
label:{
|
||||
formatter:"{d}%"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
getChgRateStr:getChgRateStr,
|
||||
getNumStr:getNumStr
|
||||
};
|
||||
},
|
||||
props: {
|
||||
stockInfo:Object,
|
||||
financialMetricsInfo:Object,
|
||||
barCategoryList:Array,
|
||||
barList:Array,
|
||||
lineList:Array, //折线图数据
|
||||
productClassificationList:Array
|
||||
},
|
||||
watch:{
|
||||
barCategoryList(newValue){
|
||||
this.option1.xAxis.data = newValue
|
||||
},
|
||||
barList(newValue){
|
||||
this.option1.series[0].data = newValue
|
||||
this.barLineInit()
|
||||
},
|
||||
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: {
|
||||
/**
|
||||
* 柱状图,折线图初始化
|
||||
*/
|
||||
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);
|
||||
},
|
||||
/**
|
||||
* 获取资产负债状态
|
||||
*/
|
||||
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' };
|
||||
},
|
||||
/**
|
||||
* 获取营收增长状态
|
||||
*/
|
||||
getGrowthStatus(value) {
|
||||
if(value>30) return {text:'高速增长',color:'green'};
|
||||
if(value>10) return {text:'稳健增长',color:'gold'};
|
||||
if(value>0) return {text:'低速增长',color:'orange'};
|
||||
if(value>-10)return {text:'小幅下滑',color:'orange'};
|
||||
return {text:'大幅下滑',color:'red'};
|
||||
//<=-10%14.
|
||||
},
|
||||
/**
|
||||
* 获取ROE状态
|
||||
*/
|
||||
getROEStatus(value) {
|
||||
if(value>20) return {text:'优秀',color:'green'};
|
||||
if(value>15) return {text:'良好',color:'gold'};
|
||||
if(value>10) return {text:'一般',color:'orange'};
|
||||
return {text:'较低',color:'red'};
|
||||
},
|
||||
itemClick(index) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesStock/stockCenterDetails/cwDetails?index=${index}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.table
|
||||
{
|
||||
.item
|
||||
{
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
}
|
||||
.item.center
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user