Merge branch 'dongjian' into develop
This commit is contained in:
+1
-1
@@ -303,7 +303,7 @@ export default {
|
||||
id: 12,
|
||||
title: "财务",
|
||||
url: '/static/mine/tool_cw.png',
|
||||
path: "/pages/finance/finance",
|
||||
path: "/pages/user/finance",
|
||||
}, {
|
||||
id: 11,
|
||||
title: "股东行权",
|
||||
|
||||
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<TopSafe></TopSafe>
|
||||
<Header :isMid="true" borderWidth="1rpx" >
|
||||
<template v-slot:mid>
|
||||
<view class="top-view">
|
||||
<view class="top-box-view flex-c" :style="{
|
||||
background:topSelect == index ? '#7934F6' : 'rgba(0,0,0,0)'
|
||||
}"
|
||||
v-for="(item,index) in topList" :key="index" @click="onTop(index)">
|
||||
<text class="text-28 " :style="{
|
||||
color:topSelect == index ? '#fff' : '#333'
|
||||
}">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</Header>
|
||||
<view class="contract-view">
|
||||
<view class="tu-view" id="chart" v-if="topSelect == 0"></view>
|
||||
<view class="bottom-panel" v-if="topSelect == 0">
|
||||
<view class="flex-col mt-24" style="width:50%" v-for="(item,index) in data" :key="item">
|
||||
<view class="flex-r">
|
||||
<view class="yuan" :style="{background:dataColor[index]}"></view>
|
||||
<text class="text-28 text-zu" style="margin-left:10rpx">{{item.name}}</text>
|
||||
</view>
|
||||
<text class="text-24 text-fu" style="margin-top:12rpx">
|
||||
总营收分红占比:
|
||||
<text :style="{color:dataColor[index]}">{{item.value}}%</text>
|
||||
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="tu-view" id="chartTwo" v-if="topSelect == 1"></view>
|
||||
<view class="bottom-panel" v-if="topSelect == 1">
|
||||
<view class="flex-col mt-24" style="width:50%" v-for="(item,index) in dataTwo" :key="item">
|
||||
<view class="flex-r">
|
||||
<view class="yuan" :style="{background:dataTwoColor[index]}"></view>
|
||||
<text class="text-28 text-zu" style="margin-left:10rpx">{{item.name}}</text>
|
||||
</view>
|
||||
<text class="text-24 text-fu" style="margin-top:12rpx">
|
||||
占比:
|
||||
<text :style="{color:dataTwoColor[index]}">{{item.value}}%</text>
|
||||
|
||||
</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/common/header.vue';
|
||||
import TopSafe from '@/components/common/top-safe.nvue'
|
||||
import * as echarts from 'echarts'
|
||||
import func from '@/utils/func.js';
|
||||
|
||||
export default {
|
||||
components: { Header,TopSafe },
|
||||
data() {
|
||||
return {
|
||||
topSelect:0,
|
||||
topList:[
|
||||
'股权架构','营收数据'
|
||||
],
|
||||
myChart:null,
|
||||
myChartTwo:null,
|
||||
data: [
|
||||
{ value: '51', name: '股东' },
|
||||
{ value: '29', name: '推广' },
|
||||
{ value: '10', name: '团队' },
|
||||
{ value: '10', name: '基金会' },
|
||||
|
||||
],
|
||||
dataColor:['#FC5E05', '#BC52FD', '#FCC139', '#0474E0'],
|
||||
dataTwo:[
|
||||
{ value: '25', name: '成本' },
|
||||
{ value: '15', name: '分红' },
|
||||
{ value: '13', name: '销售增值税' },
|
||||
{ value: '12', name: '市场激励' },
|
||||
{ value: '10.5', name: '年终分红' },
|
||||
{ value: '10', name: 'RWA市值管理' },
|
||||
{ value: '5', name: '股标护盘' },
|
||||
{ value: '5', name: '交易激励' },
|
||||
{ value: '4.5', name: '年终分红' },
|
||||
],
|
||||
dataTwoColor:['#FF8400','#6136FF', '#19CEB3', '#F1B900', '#AE9BF5'
|
||||
,'#94F7A1','#006EFF','#FF2440','#00A776'],
|
||||
|
||||
};
|
||||
},
|
||||
onReady(){
|
||||
|
||||
|
||||
// this.initTwo();
|
||||
},
|
||||
onLoad() {
|
||||
setTimeout(()=>{
|
||||
this.init()
|
||||
},500)
|
||||
},
|
||||
methods: {
|
||||
onTop(index){
|
||||
if(this.topSelect !== index){
|
||||
this.topSelect = index;
|
||||
if(index == 0){
|
||||
setTimeout(()=>{
|
||||
this.init()
|
||||
},500)
|
||||
}else{
|
||||
setTimeout(()=>{
|
||||
this.initTwo()
|
||||
},500)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
init(){
|
||||
let chartDom = document.getElementById('chart');
|
||||
this.myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
color: this.dataColor,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
// legend: {
|
||||
// top: '5%',
|
||||
// left: 'center'
|
||||
// },
|
||||
label:{
|
||||
formatter: ' {d}% '
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '股权架构',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
// avoidLabelOverlap: false,
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'center'
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 24,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
};
|
||||
this.myChart.setOption(option);
|
||||
},
|
||||
initTwo(){
|
||||
let chartDomTwo = document.getElementById('chartTwo');
|
||||
this.myChartTwo = echarts.init(chartDomTwo);
|
||||
const option = {
|
||||
color: this.dataTwoColor,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
// legend: {
|
||||
// top: '0',
|
||||
// left: 'center'
|
||||
// },
|
||||
label:{
|
||||
formatter: '{d}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '营收数据',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
// avoidLabelOverlap: false,
|
||||
// selectedMode: 'single',
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'center'
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 24,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
data: this.dataTwo
|
||||
}
|
||||
]
|
||||
};
|
||||
this.myChartTwo.setOption(option);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-view{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height:72rpx;
|
||||
background-color: #eee;
|
||||
border-radius: 36rpx;
|
||||
.top-box-view{
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
height:100%;
|
||||
border-radius: 36rpx;
|
||||
|
||||
}
|
||||
}
|
||||
.contract-view{
|
||||
width:100%;
|
||||
height:calc(100% - 88rpx - var(--status-bar-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
.tu-view{
|
||||
margin:32rpx 0;
|
||||
display: flex;
|
||||
width:100%;
|
||||
min-height:calc(100vw - 64rpx);
|
||||
}
|
||||
.bottom-panel{
|
||||
display: flex;
|
||||
width:100%;
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0rpx 0rpx 29rpx 0rpx #E5E5E5;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
.yuan{
|
||||
border-radius: 50%;
|
||||
width:28rpx;
|
||||
min-height:28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user