detection-business/pages/statistics/statislist.vue

<template>
	<view class="content">
		<headersVue :titles="titles" style="position: static !important;">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="ail">
			<view class="time-selector">
				<common-time-select v-model="range" @subsection-change="maskClick"></common-time-select>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="datas.length == 0 && id !== 6">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
				<text class="empty-text">暂无数据</text>
			</view>

			<!-- 客户来源统计 -->
			<view v-if="id == 1" class="statistics-container">
				<view class="statistics-grid" v-for="(item,index) in datas" :key="index">
					<view class="statistic-item">
						<view class="statistic-label">客户来源</view>
						<view class="statistic-value">{{ item.customerSource || '' }}</view>
					</view>
					<view class="statistic-item">
						<view class="statistic-label">车型</view>
						<view class="statistic-value">{{ item.goodsTitle || '' }}</view>
					</view>
					<view class="statistic-item">
						<view class="statistic-label">数量</view>
						<view class="statistic-value">{{ item.theNum || '' }}</view>
					</view>
					<view class="statistic-item">
						<view class="statistic-label">公示金额</view>
						<view class="statistic-value">{{ item.theAmount || '' }}</view>
					</view>
				</view>
			</view>

			<!-- 检测车型统计 -->
			<view v-if="id == 2" class="statistics-container">
				<view class="statistics-grid compact">
					<view class="statistic-card" v-for="(item,index) in datas" :key="index">
						<view class="statistic-label">{{ item.goodsTitle || '' }}</view>
						<view class="statistic-value">{{ item.theNum || '' }}</view>
					</view>
				</view>
			</view>

			<!-- 代收款 -->
			<view v-if="id == 3" class="statistics-container">
				<view class="statistics-grid compact">
					<view class="statistic-card" v-for="(item,index) in datas" :key="index">
						<view class="statistic-label">{{ item.theName || '' }}</view>
						<view class="statistic-value">{{ item.theAmount || '' }}</view>
					</view>
				</view>
			</view>

			<!-- 检测类型统计 -->
			<view v-if="id == 4" class="statistics-container">
				<view class="statistics-grid compact">
					<view class="statistic-card" v-for="(item,index) in datas" :key="index">
						<view class="statistic-label">{{ item.skuName || '' }}</view>
						<view class="statistic-value">{{ item.orderCount || 0 }}</view>
					</view>
				</view>
			</view>

			<!-- 客户来源统计(可点击) -->
			<view v-if="id == 5" class="statistics-container">
				<view class="statistics-grid compact">
					<view class="statistic-card clickable" v-for="(item,index) in datas" :key="index"
						@click="goProjectList(item)">
						<view class="statistic-label">{{ item.name || '' }}</view>
						<view class="statistic-value">{{ item.theNum || 0 }}</view>
					</view>
				</view>
			</view>

			<!-- 资料统计 -->
			<view v-if="id == 6" class="statistics-container">
				<view class="empty-state" v-if="datas.length == 0">
					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
					<text class="empty-text">暂无数据</text>
				</view>
				<view class="file-list" v-else>
					<view class="file-item" v-for="(item,index) in datas" :key="index">
						<view class="file-info">
							<view class="file-name">资料名称：{{ item.fileName || '' }}</view>
							<view class="file-time">{{ type=='add' ? '新增时间' : '修改时间' }} {{formatDate(item.createTime)}}
							</view>
							<view class="file-type">类型：{{ item.type == 2 ?'文件' :'文件夹' }}</view>
						</view>
						<view v-if="item.type=='2'" class="file-action" @click="viewFile(item.filePath)">查看文件</view>
					</view>
				</view>
			</view>

			<!-- 来源-待收款 -->
			<view v-if="id == 7" class="statistics-container">
				<view class="statistics-grid compact">
					<view class="statistic-card clickable" v-for="(item,index) in datas" :key="index"
						@click="goProjectListByType(item)">
						<view class="statistic-row">
							<view class="statistic-label">来源</view>
							<view class="statistic-value">{{ item.sourceName || '' }}</view>
						</view>
						<view class="statistic-row">
							<view class="statistic-label">金额</view>
							<view class="statistic-value">{{ item.pendingAmountYuan || 0 }}</view>
						</view>
						<view class="statistic-row">
							<view class="statistic-label">台次</view>
							<view class="statistic-value">{{ item.pendingCount || 0 }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	import * as utils from '../../utils/utils';
	import headersVue from "@/components/header/headers.vue";
	import CommonTimeSelect from "@/components/commonTimeSelect.vue";

	export default {
		components: {
			headersVue,
			CommonTimeSelect
		},
		data() {
			return {
				id: 1,
				datas: [],
				remark: '未知类别',
				range: ['2023-9-28', '2023-10-7'],
				titles: '',
				businessId: '',
				type: '',
			}

		},
		watch: {
			range(newval) {
				if (this.id == 1) {
					this.getone()
				}
				if (this.id == 2) {
					this.gettwo()
				}
				if (this.id == 3) {
					this.getthree()
				}
				if (this.id == 4) {
					this.getfour()
				}
			},
		},
		onLoad(option) {
			this.gettime()
			this.id = option.id
			if (this.id == 1) {
				this.remark = option.remark
				this.getone()
				this.titles = '客户来源统计'
			}
			if (this.id == 2) {
				this.gettwo()
				this.titles = '检测车型统计'
			}
			if (this.id == 3) {
				this.getthree()
				this.titles = '代收款'
			}
			if (this.id == 4) {
				this.getfour()
				this.titles = '检测类型统计'
			}
			if (this.id == 5) {
				this.businessId = option.dataId
				this.getCustomerSourceCount()
				this.titles = '客户来源统计'
			}
			if (this.id == 6) {
				this.getMonth()
				this.getFileBytype()
				this.type = option.type
				this.titles = '资料统计'
			}
			if (this.id == 7) {
				this.type = option.type
				this.channelMoneyStaticsByBusi()
				this.titles = '来源-待收款'
			}
		},
		onShow() {

		},
		methods: {
			formatDate(time) {
				return utils.formatDateTimeToMinute(time);
			},
			gettime() {
				// 获取当前时间
				var now = new Date();

				// 获取年份
				var year = now.getFullYear();

				// 获取月份
				var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
				if (month < 10) {
					var month = "0" + month
				}

				// 获取日期
				var date = now.getDate();

				// 格式化时间
				var currentTime = year + '-' + month + '-' + date
				this.range[0] = currentTime
				this.range[1] = currentTime

			},
			getMonth() {
				// 获取当前时间
				const now = new Date();

				// 获取年份和月份
				const year = now.getFullYear();
				let month = now.getMonth() + 1; // 月份从 0 开始

				// 补零处理
				const formatNumber = (num) => (num < 10 ? '0' + num : num);

				// 本月第一天
				const firstDay = `${year}-${formatNumber(month)}-01`;

				// 获取本月最后一天
				const lastDate = new Date(year, month, 0).getDate();
				const lastDay = `${year}-${formatNumber(month)}-${formatNumber(lastDate)}`;

				// 设置范围
				this.range[0] = firstDay;
				this.range[1] = lastDay;
			},
			async getone() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1],
					remark: this.remark
				}
				let res = await request({
					url: '/partnerOwn/partner/staticsTable3Detail',
					method: 'get',
					params: data
				})
				this.datas = res.data
			},
			async gettwo() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1]
				}
				let res = await request({
					url: '/partnerOwn/partner/staticsTable4',
					method: 'get',
					params: data
				})
				this.datas = res.data

			},
			goProjectList(data) {
				uni.navigateTo({
					url: `/pages/index/staffProjectList/staffProjectList?customerSource=${data.name}&range=${encodeURIComponent(JSON.stringify(this.range))}`
				})
			},
			goProjectListByType(data) {
				uni.navigateTo({
					url: `/pages/index/staffProjectList/staffProjectList?customerSource=${data.sourceName}&type=1&range=${encodeURIComponent(JSON.stringify(this.range))}`
				})
			},
			async getthree() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1]
				}
				let res = await request({
					url: '/partnerOwn/partner/staticsTable5',
					method: 'get',
					params: data
				})
				this.datas = res.data

			},
			viewFile(filePath) {
				let url = ''
				//判断地址是否包含http如果包含就不拼接前缀
				if (filePath.indexOf('http') === -1) {
					url = this.$baseImageUrl + '/' + filePath
				} else {
					url = filePath
				}
				uni.downloadFile({
					url: url,
					success: (res) => { // 使用箭头函数
						var filePath = res.tempFilePath;
						this.isLoading = false;

						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: (res) => {
								console.log("文件打开成功");
							},
							fail: (err) => {
								console.error("文件打开失败", err);
								uni.showToast({
									title: '文件打开失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						console.error("文件下载失败", err);
					}
				});
			},
			async getfour() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1]
				}
				let res = await request({
					url: '/partnerOwn/partner/queryInspectionSkuList',
					method: 'get',
					params: data
				})
				this.datas = res.data

			},
			async getCustomerSourceCount() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1],
					businessId: this.businessId
				}
				let res = await request({
					url: '/partnerOwn/partner/customerSourceCount',
					method: 'get',
					params: data
				})
				this.datas = res.data
			},
			async getFileBytype() {
				let data = {
					startTime: this.range[0],
					endTime: this.range[1],
					servicePackageId: 'jiance'
				}
				let res = await request({
					url: '/partnerOwn/partner/getFileByType',
					method: 'get',
					params: data
				})
				this.datas = []
				if (this.type == 'add') {
					this.datas = res.data.insertFile
				} else {
					this.datas = res.data.updateFile
				}
			},
			async channelMoneyStaticsByBusi() {
				console.log('type', this.type);
				let data = {
					startTime: this.range[0],
					endTime: this.range[1],
					busi: this.type
				}
				let res = await request({
					url: '/partnerOwn/partner/channelMoneyStaticsByBusi',
					method: 'get',
					params: data
				})
				this.datas = res.data
			},
			maskClick(e) {
				if (this.id == 1) {
					this.remark = option.remark
					this.getone()
				}
				if (this.id == 2) {
					this.gettwo()
				}
				if (this.id == 3) {
					this.getthree()
				}
				if (this.id == 4) {
					this.getfour()
				}
				if (this.id == 5) {
					this.getCustomerSourceCount()
				}
				if (this.id == 6) {
					this.getFileBytype()
				}
				if (this.id == 7) {
					this.channelMoneyStaticsByBusi()
				}
			},
			getback() {
				uni.navigateBack()
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F7F8FC;
		box-sizing: border-box;
	}

	.ail {
		width: 100%;
		background-color: #F7F8FC;
		box-sizing: border-box;
		padding-bottom: 20px;
		min-height: calc(100vh - 100px);
	}

	.time-selector {
		width: 90%;
		margin: 10px auto;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	/* 统计容器 */
	.statistics-container {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	/* 统计网格布局 */
	.statistics-grid {
		width: 100%;

		&.compact {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 20rpx;
		}
	}

	/* 统计项样式 */
	.statistic-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}
	}

	/* 统计卡片样式 */
	.statistic-card {
		width: calc(50% - 10rpx);
		background-color: white;
		border-radius: 12rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;

		&.clickable {
			transition: all 0.2s;

			&:active {
				transform: scale(0.98);
				background-color: #f8f9fa;
			}
		}
	}

	.statistic-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.statistic-label {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.statistic-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #0D2E8D;
		line-height: 1.2;
		margin-top: 10rpx;
	}

	/* 文件列表样式 */
	.file-list {
		width: 100%;
	}

	.file-item {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		background-color: white;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.file-info {
		flex: 1;
	}

	.file-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 15rpx;
	}

	.file-time,
	.file-type {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.file-action {
		color: #3D89FC;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
		background-color: rgba(61, 137, 252, 0.1);
		white-space: nowrap;
		margin-left: 20rpx;
	}

	/* 响应式调整 */
	@media (max-width: 750px) {
		.statistic-card {
			width: 100%;
		}

		.file-item {
			flex-direction: column;
		}

		.file-action {
			margin-left: 0;
			margin-top: 20rpx;
			align-self: flex-end;
		}
	}
</style>