crm-app-vue3/pages/market/briefReport/index.vue

<template>
	<view class="bruefReport_wrap">
		<view class="staticts_wrap">
			<view class="staticts_item">
				<view class="label">新增客户</view>
				<view class="count">-</view>
			</view>
			<view class="staticts_item">
				<view class="label">新增线索</view>
				<view class="count">{{staticts.addClueCount}}</view>
			</view>
			<view class="staticts_item">
				<view class="label">新增商家</view>
				<view class="count">-</view>
			</view>
		</view>
		<view class="clue_state_wrap">
			<view class="header_wrap">
				<view class="header_left">线索阶段</view>
				<view class="haeder_right" @click="handleToClue">
					<text>全部</text>
					<u-icon name="arrow-right" color="#aaa"></u-icon>
				</view>
			</view>
			<view class="charts-box">
			  <qiun-data-charts 
			    type="ring"
			    :opts="opts"
			    :chartData="chartData"
			  />
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props : {
			queryParams : {
				type : Object,
				default : ()=>{}
			},
			type : {
				type : Number,
				required : true
			},
		},
		data() {
			return {
				staticts: {
					addClueCount: 0,
				},

				chartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4","#ea7ccc"],
					padding: [5,5,5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25,
					},
					title: {
						name: "线索量",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "0",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 16,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 1,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		methods: {
			handleToClue(){
				uni.navigateTo({
					url : "/pages/clue/index?type=" + this.type
				});
			},
			handleInit(){
				this.getServerData();
				this.statisticsAddClueCount();
			},
			async statisticsAddClueCount(){
				const { data } = await uni.$u.api.statisticsAddClueCount({type : this.type,...this.queryParams});
				this.staticts = data;
			},
			async getServerData() {
				const { data } = await uni.$u.api.statisticsCaseState({type : this.type,...this.queryParams});
			 	const seriesData = data.map(v=>({
					name:v.clueStateName + "(" + v.count + ")",
					value:v.count
				}));
			 	const totalCount = data.reduce((acc,cur)=>{
					return acc + cur.count;
				},0);
				this.opts.subtitle.name = totalCount;
				this.chartData = { series : [ { data : seriesData } ] };
			},
		}
	};
</script>

<style scoped lang="scss">
	.header_wrap {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ddd;
		background-color: #fff;
		.header_left {
			font-size: 18px;
		}
		.haeder_right {
			display: flex;
			align-items: center;
			text {
				font-size: 14px;
				color: #b8b8b8;
				margin-right: 10px;
			}
			::v-deep .u-icon__icon {
				font-size: 12px !important;
			}
		}
	}
	.clue_state_wrap {
		margin:0 20px;
		background-color: #fff;
	}

	.staticts_wrap {
		display: flex;
		justify-content: center;
		background: #fff;
		margin: 20px;
		border-radius: 10px;

		.staticts_item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 33%;
			padding: 20px;

			.label {
				color: #aaa;
				font-size: 16px;
			}

			.count {
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>