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

<template>
	<view class="card_wrap">
		<view class="header_wrap">
			<view class="header_left">{{title}}</view>
			<dateSelect @confirm="dateSelectChange"></dateSelect>
		</view>
		<view class="main_warp">
			<view class="clueState_top_wrap">
				<view class="top_left_wrap">
					<view class="top_lable">
						新增线索
					</view>
					<view class="top_value">{{newClue ? newClue.count : "-"}}</view>
				</view>
				<view class="top_left_wrap">
					<view class="top_lable">
						有进展
					</view>
					<view class="top_value">{{progressState}}</view>
				</view>
			</view>
			<scroll-view scroll-x="true">
				<view class="clueState_bottom_wrap">
					<view class="clue_state" v-for="(item,index) in progressList" :key="index">
						<view class="state_label">{{item.clueStateName}}</view>
						<view class="state_value">{{item.count}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import dateSelect from "../dateSelect/index.vue";
	export default{
		components : {
			dateSelect
		},
		props : {
			type : {
				type : Number | String
			},
		},
		computed : {
			title(){
				return this.type === '1' ? "团队工作成果" : "个人工作成果"; 
			},
			newClue(){
				return this.clueStateList.find(v=>v.clueState === '1');
			},
			progressState(){
				return this.clueStateList.reduce((acc,cur)=>{
					acc += cur.isProgress ? cur.count : 0;
					return acc;
				},0);
			},
			progressList(){
				return this.clueStateList.filter(v=>v.isProgress);
			}
		},
		data(){
			return {
				clueStateList : [],
			}
		},
		methods : {
			async statisticsCaseState(queryParams) {
				const {
					data
				} = await uni.$u.api.statisticsCaseState(queryParams);
				this.clueStateList = data;
			},
			dateSelectChange(queryParams){
				queryParams.type = this.type
				this.statisticsCaseState(queryParams);
			},
			handleToClue(){
				if(this.type === "1"){
					uni.switchTab({
						url : "/pages/publicClue/index"
					});
				}else{
					uni.switchTab({
						url : "/pages/privateClue/index"
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.header_wrap{
		display: flex;
		justify-content: space-between;
	}
	.main_warp {
		padding: 30rpx;
		.clueState_top_wrap {
			display: flex;
			justify-content: space-evenly;
			width: 100%;
			.top_left_wrap {
				width: 50%;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #ddd;
				&:last-child{
					border-left: 1px solid #ddd;
					border-bottom: none;
				}
				.top_lable {
					text-align: center;
					font-size: 26rpx;
					color: #666666;
				}

				.top_value {
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}

		.clueState_bottom_wrap {
			display: flex;
			.clue_state {
				text-align: left;
				padding-right: 30rpx;
				.state_label {
					font-size: 26rpx;
					color: #666666;
					display: inline-flex;
					/* 关键改动：改为行内弹性盒子 */
					align-items: center;
					/* 垂直居中 */
					white-space: nowrap;
					/* 关键：禁止文本换行 */
				}

				.state_value {
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>