crm-app-vue3/pages/index/team/index.vue

<template>
	<view>
		<view class="card_wrap">
			<view class="header_wrap">
				<view class="header_left">巨量消耗数据</view>
				<view class="haeder_right" @click="handleShowFilterQuery">
					<text>更多筛选</text>
					<u-icon name="arrow-down-fill" color="#aaa" size="10" ></u-icon>
				</view>
			</view>
			<view class="main_warp">
				<view class="promotion_stats_wrap">
					<view class="promotion_stats">
						<view class="stats_label">总消耗</view>
						<view class="stats_value">{{sumStatData.statCost}}</view>
					</view>
					<view class="promotion_stats">
						<view class="stats_label">广告线索量</view>
						<view class="stats_value">{{sumStatData.attributionConvertCnt}}</view>
					</view>
					<view class="promotion_stats">
						<view class="stats_label">广告线索成本</view>
						<view class="stats_value">{{sumStatData.conversionCost}}</view>
					</view>
					<view class="promotion_stats">
						<view class="stats_label">商机线索成本</view>
						<view class="stats_value">{{sumStatData.tboCost}}</view>
					</view>
					<view class="promotion_stats">
						<view class="stats_label">商机线索量</view>
						<view class="stats_value">{{sumStatData.tboCnt}}</view>
					</view>
					<view class="promotion_stats">
						<view class="stats_label">转商机率</view>
						<view class="stats_value">{{sumStatData.tboRate}}%</view>
					</view>
					<view class="promotion_stats">
						<view class="stats_label">无效线索量</view>
						<view class="stats_value">{{sumStatData.invalidCnt}}</view>
					</view>
					<view class="promotion_stats">
						<view class="stats_label">无效率</view>
						<view class="stats_value">{{sumStatData.invalidRate}}%</view>
					</view>
				</view>
			</view>
		</view>
		<working-achievement type="1" ref="workingAchievementRef"></working-achievement>
		<briefReport type="1" ref="teamReport"></briefReport>
		<filterQuery ref="filter" v-model="promotionStatsQueryParams" @getList="selectPromotionStats"></filterQuery>
	</view>
</template>

<script>
	import workingAchievement from "../components/workingAchievement/index.vue";
	import briefReport from "../components/briefReport/index.vue";
	import filterQuery from "../components/filterQuery/index.vue";
	import dayjs from "dayjs";
	import { cloneDeep } from "lodash";
	export default {
		components : {
			workingAchievement,
			briefReport,
			filterQuery
		},
		data() {
			return {
				
				promotionStatsQueryParams : {
					createTimeStart : dayjs().format("YYYY-MM-DD"),
					createTimeEnd : dayjs().format("YYYY-MM-DD"),
					orgId : undefined,
					orgName : undefined,
					clueOperationId : undefined,
				},
				
				sumStatData: {
					statCost: "-",
					attributionConvertCnt: "-",
					conversionCost: "-",
					tboCost: "-",
					tboCnt: "-",
					tboRate: "-",
					invalidCnt: "-",
					invalidRate: "-"
				},
				clueStateList : [],
			}
		},
		methods: {
			handleShowFilterQuery(){
				this.$refs.filter.show();
			},
			async selectPromotionStats() {
				const {
					data
				} = await uni.$u.api.selectPromotionStats(this.promotionStatsQueryParams);
				this.sumStatData = data ? data : this.$options.data().sumStatData;
			},
			async teamReportInit(){
				this.$refs.teamReport.handleInit();
			},
			handleInit(){
				this.selectPromotionStats();
			},
			refresh(){
				this.handleInit();
				this.$refs.workingAchievementRef.dateSelectChange({type : "1"});
				this.$refs.teamReport.dateSelectChange({type : "1"});
			}
		},
		mounted() {
			this.handleInit();
		}
	}
</script>

<style scoped lang="scss">
	.main_warp {
		.promotion_stats_wrap {
			display: flex;
			flex-wrap: wrap;

			.promotion_stats {
				box-sizing: border-box;
				width: 33%;
				text-align: left;
				padding: 20rpx;

				.stats_label {
					font-size: 26rpx;
					color: #666666;
				}

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