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

<template>
	<view class="bruefReport_wrap">
		<view class="clue_state_wrap">
			<view class="header_wrap">
				<view class="header_left">线索阶段</view>
				<dateSelect @confirm="dateSelectChange"></dateSelect>
			</view>
			<view class="charts-box">
			  <qiun-data-charts 
			    type="ring"
			    :opts="opts"
			    :chartData="chartData"
			  />
			</view>
		</view>

	</view>
</template>

<script>
	import dateSelect from "../dateSelect/index.vue";
	export default {
		components : {
			dateSelect
		},
		props : {
			type : {
				type: [Number, String]
			},
		},
		data() {
			return {
				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: 10,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 16,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 1,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		methods: {
			dateSelectChange(queryParams){
				queryParams.type = this.type;
				this.getServerData(queryParams);
			},
			handleToClue(){
				if(this.type === "1"){
					uni.switchTab({
						url : "/pages/publicClue/index"
					});
				}else{
					uni.switchTab({
						url : "/pages/privateClue/index"
					});
				}
			},
			async getServerData(queryParams) {
				const { data } = await uni.$u.api.statisticsCaseState(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>