2.4 组件结构调整，调整会员权限判断
This commit is contained in:
尚政杰
487
pagesStock/components/cwfx-view/cwfx-view.vue
Normal file
487
pagesStock/components/cwfx-view/cwfx-view.vue
Normal file
@@ -0,0 +1,487 @@
|
||||
<template>
|
||||
<view>
|
||||
<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>
|
||||
<image src="/static/icon/home/conceptCenter/next.png" mode="widthFix"
|
||||
style="width: 13rpx; height: 22rpx;"></image>
|
||||
</view>
|
||||
<view class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
|
||||
<view :class="'item flex '+(profitabilityIndicatorIndex==index?'select':'')"
|
||||
style="justify-content: center; text-align: center;padding: 3rpx 5rpx;"
|
||||
v-for="(item,index) in profitabilityIndicatorList" :key="index" @click="clickProfitabilityIndicatorItem(index)">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
<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;">
|
||||
单季度</view>
|
||||
<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>
|
||||
<image style="width: 11rpx; height: 6rpx;" src="/pagesStock/static/icon/all-down.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 500rpx;">
|
||||
<l-echart ref="chartRef1"></l-echart>
|
||||
</view>
|
||||
</view>
|
||||
<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-2.png" mode="widthFix"
|
||||
style="width: 40rpx; height: 40rpx;"></image>
|
||||
<view class="flex1" style="margin: 0 10rpx; font-size: 28rpx;">每股指标</view>
|
||||
<image src="/static/icon/home/conceptCenter/next.png" mode="widthFix"
|
||||
style="width: 13rpx; height: 22rpx;"></image>
|
||||
</view>
|
||||
|
||||
<view class="indicatorC" style="display: grid; gap: 20rpx; grid-template-columns: repeat(4, 1fr); margin: 0 20rpx;">
|
||||
<view :class="'item flexCenter '+(perShareIndicatorIndex==index?'select':'')"
|
||||
v-for="(item,index) in perShareIndicatorList" :key="index" @click="clickPerShareIndicatorItem(index)">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="display: flex;align-items: center; 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;">
|
||||
<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>
|
||||
<image style="width: 11rpx; height: 6rpx;" src="/pagesStock/static/icon/all-down.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 500rpx;">
|
||||
<l-echart ref="chartRef2"></l-echart>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
|
||||
export default {
|
||||
name:"cwfx-view",
|
||||
data() {
|
||||
return {
|
||||
profitabilityIndicatorList:[{
|
||||
title:'净资产收益率(ROE)%',
|
||||
},
|
||||
{
|
||||
title:'净资产收益率(扣非)%',
|
||||
},
|
||||
{
|
||||
title:'净资产收益率(加权)%',
|
||||
},
|
||||
{
|
||||
title:'总资产报酬率(ROA)%',
|
||||
},
|
||||
{
|
||||
title:'毛利率%',
|
||||
},
|
||||
{
|
||||
title:'净利率%',
|
||||
},
|
||||
{
|
||||
title:'营业利润率%',
|
||||
},
|
||||
{
|
||||
title:'成本费用利润率%'
|
||||
}],
|
||||
profitabilityIndicatorIndex:0,
|
||||
perShareIndicatorList:[{
|
||||
title:'每股收益(EPS)',
|
||||
},
|
||||
{
|
||||
title:'基本每股收益',
|
||||
},
|
||||
{
|
||||
title:'稀释每股收益',
|
||||
},
|
||||
{
|
||||
title:'扣非每股收益',
|
||||
},
|
||||
{
|
||||
title:'每股净资产',
|
||||
},
|
||||
{
|
||||
title:'每股经营现金流',
|
||||
},
|
||||
{
|
||||
title:'每股资本公积',
|
||||
},
|
||||
{
|
||||
title:'每股未分配利润'
|
||||
}],
|
||||
perShareIndicatorIndex:0,
|
||||
option1:{
|
||||
legend:{
|
||||
show:true,
|
||||
data:['ROE','同比(右)']
|
||||
},
|
||||
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
|
||||
}
|
||||
]
|
||||
},
|
||||
option2:{
|
||||
legend:{
|
||||
show:true,
|
||||
data:['ROE','同比(右)']
|
||||
},
|
||||
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
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
dataList:Array,
|
||||
},
|
||||
watch:{
|
||||
dataList(newValue) {
|
||||
let category = []
|
||||
let data1 = []
|
||||
let data2 = []
|
||||
for (let item of newValue) {
|
||||
var type = item.report_type
|
||||
type = type.replace('年三季报','Q3')
|
||||
type = type.replace('年一季报','Q1')
|
||||
type = type.replace('年中报','中报')
|
||||
type = type.replace('年年报','年报')
|
||||
category.push(type)
|
||||
if(item.profitability.roe)
|
||||
{
|
||||
data1.push(item.profitability.roe.toFixed(2))
|
||||
}else
|
||||
data1.push(0)
|
||||
if(item.per_share_metrics.eps)
|
||||
{
|
||||
data2.push(item.per_share_metrics.eps.toFixed(2))
|
||||
}else
|
||||
data2.push(0)
|
||||
}
|
||||
this.option1.xAxis.data = category
|
||||
this.option1.series[0].data = data1
|
||||
this.profitabilityInit()
|
||||
this.option2.xAxis.data = category
|
||||
this.option2.series[0].data = data2
|
||||
this.perShareInit()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
async profitabilityInit() {
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef1.init(echarts);
|
||||
// chart.on('click',function (params) {
|
||||
// console.log(params)
|
||||
// })
|
||||
chart.setOption(this.option1)
|
||||
},
|
||||
async perShareInit() {
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef2.init(echarts);
|
||||
// chart.on('click',function (params) {
|
||||
// console.log(params)
|
||||
// })
|
||||
chart.setOption(this.option2)
|
||||
},
|
||||
/**
|
||||
* 切换盈利能力指标
|
||||
* @param {Object} item
|
||||
*/
|
||||
clickProfitabilityIndicatorItem(index) {
|
||||
if(this.profitabilityIndicatorIndex!=index) {
|
||||
this.profitabilityIndicatorIndex = index
|
||||
let data = []
|
||||
if(index==0) {
|
||||
//净资产收益率
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.roe)
|
||||
{
|
||||
data.push(item.profitability.roe.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
|
||||
}else if(index==1) {
|
||||
//净资产收益率(扣非)
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.roe_deducted)
|
||||
{
|
||||
data.push(item.profitability.roe_deducted.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==2) {
|
||||
//净资产收益率(加权)
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.roe_deducted)
|
||||
{
|
||||
data.push(item.profitability.roe_deducted.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==3) {
|
||||
//总资产报酬率
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.roa)
|
||||
{
|
||||
data.push(item.profitability.roa.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==4) {
|
||||
//毛利率
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.gross_margin)
|
||||
{
|
||||
data.push(item.profitability.gross_margin.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==5) {
|
||||
//净利率
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.net_profit_margin)
|
||||
{
|
||||
data.push(item.profitability.net_profit_margin.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==6) {
|
||||
//营业利润率
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.operating_profit_margin)
|
||||
{
|
||||
data.push(item.profitability.operating_profit_margin.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==7) {
|
||||
//成本费用利润率
|
||||
for (let item of this.dataList) {
|
||||
if(item.profitability.cost_profit_ratio)
|
||||
{
|
||||
data.push(item.profitability.cost_profit_ratio.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}
|
||||
this.option1.series[0].data = data
|
||||
this.profitabilityInit()
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 切换每股指标
|
||||
* @param {Object} item
|
||||
*/
|
||||
clickPerShareIndicatorItem(index) {
|
||||
if(this.perShareIndicatorIndex!=index) {
|
||||
this.perShareIndicatorIndex = index
|
||||
let data = []
|
||||
if(index==0) {
|
||||
//每股收益(EPS)
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.eps)
|
||||
{
|
||||
data.push(item.per_share_metrics.eps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==1) {
|
||||
//基本每股收益
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.basic_eps)
|
||||
{
|
||||
data.push(item.per_share_metrics.basic_eps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==2) {
|
||||
//稀释每股收益
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.diluted_eps)
|
||||
{
|
||||
data.push(item.per_share_metrics.diluted_eps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==3) {
|
||||
//扣非每股收益
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.deducted_eps)
|
||||
{
|
||||
data.push(item.per_share_metrics.deducted_eps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==4) {
|
||||
//每股净资产
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.bvps)
|
||||
{
|
||||
data.push(item.per_share_metrics.bvps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==5) {
|
||||
//每股经营现金流
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.operating_cash_flow_ps)
|
||||
{
|
||||
data.push(item.per_share_metrics.operating_cash_flow_ps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==6) {
|
||||
//每股资本公积
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.capital_reserve_ps)
|
||||
{
|
||||
data.push(item.per_share_metrics.capital_reserve_ps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}else if(index==7) {
|
||||
//每股未分配利润
|
||||
for (let item of this.dataList) {
|
||||
if(item.per_share_metrics.undistributed_profit_ps)
|
||||
{
|
||||
data.push(item.per_share_metrics.undistributed_profit_ps.toFixed(2))
|
||||
}else
|
||||
data.push(0)
|
||||
}
|
||||
}
|
||||
this.option2.series[0].data = data
|
||||
this.perShareInit()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.indicatorC
|
||||
{
|
||||
.item
|
||||
{
|
||||
background-color: #FFFFFF;
|
||||
padding: 3rpx 5rpx;
|
||||
border: 1rpx solid #D2D2D2;
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
.item.select
|
||||
{
|
||||
background-color: #FFFAF1;
|
||||
border: 1rpx solid #F2C369;
|
||||
color: #BB8520;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user