assess-app/pages/statistics/module/stat_capital.vue

<template>
	<view class="page-box-bg-fff m-t20 r-30 p-30">
		<!-- 标题插槽 -->
		<StatisticsTitle :genre="genre" :leftText="leftText" :is_right="false" >	</StatisticsTitle>
		<view class="row-justify-sb center p-lr20">
			<view class="capital_item">
				<view class="row-c flex">
					<view class="wh-14 r-100 m-r10" :style="{background:bgColor[leftColor]}"></view>
					<text class="size-24 text-color-576">{{tabulateData.list[0].name}}{{tabulateData.consume_num}}笔</text>
				</view>
				<view class="sys-weight-600 m-l20 m-tb10">
					<text class="size-32 text-color-081">{{tabulateData.consume_money}}</text>
					<text class="size-28 text-color-081">万</text>
				</view>
				<text class="size-28 text-color-00B sys-weight-600 m-l20"
					:style="{color:bgColor[leftColor]}">{{tabulateData.consume_ratio}}%</text>
			</view>
			<view class="chart_item column-c m-lr20">
				<CircleChart :bgColor="'#2B7DFA'" ref="tabulateObj"></CircleChart>
			</view>
			<view class="capital_item">
				<view class="row-c flex">
					<view class="wh-14 r-100 m-r10" :style="{background:bgColor[rightColor]}"></view>
					<text class="size-24 text-color-576">{{tabulateData.list[1].name}}{{tabulateData.pledge_num}}笔</text>
				</view>
				<view class="sys-weight-600 m-l20 m-tb10">
					<text class="size-32 text-color-081">{{tabulateData.pledge_money}}</text>
					<text class="size-28 text-color-081">万</text>
				</view>
				<text class="size-28 text-color-00B sys-weight-600 m-l20"
					:style="{color:bgColor[rightColor]}">{{tabulateData.pledge_ratio}}%</text>
			</view>
		</view>
	</view>
</template>

<script>
	import CircleChart from "@/common/chart/circle_chart.vue";
	import StatisticsTitle from "./statistics_title.vue";

	export default {
		name: 'capital_chart',
		components: {
			CircleChart,
			StatisticsTitle
		},
		props: {
			genre: {
				type: Number,
				default: 0
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: '同比环比'
			},
			leftColor: {
				type: Number,
				default: 0
			},
			rightColor: {
				type: Number,
				default: 0
			},
      tabulateData:{
        default: ()=>{
          return {
            consume_money: 0,
            consume_num: "0",
            consume_ratio: 0,
            pledge_money: 0,
            pledge_num: "0",
            pledge_ratio: 0,
            list:[{name: "", ratio: 0, value: 0, labelText: ""},{name: "", ratio: 0, value: 0, labelText: ""}]
          }
        }
      }
		},
		data() {
			return {
				bgColor: ['#00BF8A', '#2B7DFA', '#ED9A2C']
			};
		},
    watch:{
      'tabulateData':function () {
        this.initData()
      }
    },
    methods: {
      initData(){
        if((this.tabulateData.consume_ratio*1+this.tabulateData.pledge_ratio*1)>0){
          this.$refs.tabulateObj.setServerData(this.tabulateData.consume_ratio)
        }
      },
    },
	}
</script>

<style lang="scss" scoped>
	.capital_item {
		width: 200rpx;
		text-align: left;
	}
</style>