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">
				<RingChart :bgChartColor="bgChartColor" ref="tabulateObj"></RingChart>
			</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 RingChart from "@/common/chart/ring_chart.vue";
	import StatisticsTitle from "./statistics_title.vue";

	export default {
		name: 'capital_chart',
		components: {
			RingChart,
			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: ""
						}]
					}
				}
			},
			bgChartColor: {
				type: Array,
				default: () => ["#00BF8A", "#2B7DFA"]
			}
		},
		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.list)
				}else {
          this.$refs.tabulateObj.setNoData()
        }
			},
		},
	}
</script>

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