From ff935b560e4dba134ef098acdc03d3d139e8afa0 Mon Sep 17 00:00:00 2001
From: xuyuncong <3422692813@qq.com>
Date: Fri, 10 Oct 2025 17:54:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/statistics/statislist.vue | 700 +++++++++++---------------------
 1 file changed, 241 insertions(+), 459 deletions(-)

diff --git a/pages/statistics/statislist.vue b/pages/statistics/statislist.vue
index 96b6ce9..59f1f66 100644
--- a/pages/statistics/statislist.vue
+++ b/pages/statistics/statislist.vue
@@ -4,148 +4,114 @@
 			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
 		</headersVue>
 		<view class="ail">
-			<view class="ahhh">
+			<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 class="ping-bottom">
-        <view class="dinga">客户来源统计</view>
-        <view class="dinga">更多<uni-icons type="right" size="12"></uni-icons></view>
-      </view> -->
-			<view v-if="id == 1">
-				<view class="jsy" v-if="datas.length == 0">
-					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
-				</view>
-				<view class="top-box" v-for="(item,index) in datas" :key="index">
-					<view class="t-top">
-						<view class="sys">
-							<view class="t-title">客户来源</view>
-							<view class="t-num">{{ item.customerSource || '' }}</view>
-						</view>
-						<view class="sys">
-							<view class="t-title">车型</view>
-							<view class="t-num">{{ item.goodsTitle || '' }}</view>
-						</view>
-						<view class="sys">
-							<view class="t-title">数量</view>
-							<view class="t-num">{{ item.theNum || '' }}</view>
-						</view>
-						<view class="sys">
-							<view class="t-title">公示金额</view>
-							<view class="t-num">{{ item.theAmount || '' }}</view>
-						</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">
-				<view class="jsy" v-if="datas.length == 0">
-					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
-				</view>
-				<view class="waigg">
-					<view class="top-boxx" v-for="(item,index) in datas" :key="index">
-						<view class="t-top">
-							<view class="t-title">{{ item.goodsTitle || '' }}</view>
-							<view class="t-num">{{ item.theNum || '' }}</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">
-				<view class="jsy" v-if="datas.length == 0">
-					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
+			<!-- 代收款 -->
+			<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 class="waigg">
-					<view class="top-boxx" v-for="(item,index) in datas" :key="index">
-						<view class="t-top">
+			</view>
 
-							<view class="t-title" style="display: flex; align-items: center; ">{{ item.theName || '' }}:
+			<!-- 检测类型统计 -->
+			<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="t-num">{{ item.theAmount || '' }}</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 == 4">
-				<view class="jsy" v-if="datas.length == 0">
-					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
-				</view>
-				<view class="waigg">
-					<view class="top-boxx" v-for="(item,index) in datas" :key="index">
-						<view class="t-top">
-
-							<view class="t-title" style="display: flex; align-items: center; ">{{ item.skuName || '' }}:
-							</view>
-							<view class="t-num">{{ item.orderCount || 0 }}</view>
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<view v-if="id == 5">
-				<view class="jsy" v-if="datas.length == 0">
-					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
-				</view>
-				<view class="waigg">
-					<view class="top-boxx" v-for="(item,index) in datas" :key="index" @click="goProjectList(item)">
-						<view class="t-top">
-
-							<view class="t-title" style="display: flex; align-items: center; ">{{ item.name || '' }}:
-							</view>
-							<view class="t-num">{{ item.theNum || 0 }}</view>
-						</view>
-					</view>
-				</view>
-			</view>
-
-			<view v-if="id == 6">
-				<view class="jsy" v-if="datas.length == 0">
-					<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
-				</view>
-				<view class="">
-					<view class="top-boxx2" v-for="(item,index) in datas" :key="index"
-						style="display: flex;padding: 15rpx;justify-content: space-between;">
-						<view class="" style="">
-							<view class="" style=" ">
-								资料名称：{{ item.fileName || '' }}
-							</view>
-							<view style="margin-top: 20rpx;">{{ type=='add' ? '新增时间' : '修改时间' }}
-								{{formatDate(item.createTime)}}
-							</view>
-							<view class="" style="margin-top: 20rpx;">类型： {{ item.type == 2 ?'文件' :'文件夹' }}</view>
-						</view>
-						<view v-if="item.type=='2'" style="color: #3D89FC;" @click="viewFile(item.filePath)">查看文件</view>
-					</view>
-				</view>
-			</view>
-
-			<view class="jsy" v-if="datas.length == 0">
-				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
-			</view>
-
-			<view v-if="id == 7">
-				<view class="waigg">
-					<view class="top-boxx" v-for="(item,index) in datas" :key="index"
+			<!-- 来源-待收款 -->
+			<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="t-top">
-
-							<view class="t-title" style="display: flex; align-items: center; ">
-								{{ item.sourceName || '' }}:
-							</view>
-							<view class="t-num">{{ item.pendingAmountYuan || 0 }}</view>
+						<view class="statistic-row">
+							<view class="statistic-label">来源</view>
+							<view class="statistic-value">{{ item.sourceName || '' }}</view>
 						</view>
-						<view class="t-top">
-
-							<view class="t-title" style="display: flex; align-items: center; ">
-								台次
-							</view>
-							<view class="t-num">{{ item.pendingCount || 0 }}</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>
@@ -455,364 +421,180 @@
 </script>
 
 <style scoped lang="scss">
-	.jsy {
-		width: 90%;
-		margin: 40px auto;
-	}
-
 	.content {
 		width: 100%;
 		height: calc(100vh);
 		background-color: #F7F8FC;
 		box-sizing: border-box;
-		// padding-top: 45px;
-	}
-
-	.ping-bottom {
-		width: 100%;
-		display: flex;
-		justify-content: space-between;
-		box-sizing: border-box;
-		padding: 0px 15px;
-	}
-
-	.c-top {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 15px;
-		padding-top: 55px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background-color: white;
-	}
-
-	.c-title {
-		font-size: 18px;
-		font-weight: bold
 	}
 
 	.ail {
 		width: 100%;
-		background-color: #F6F6F6;
+		background-color: #F7F8FC;
 		box-sizing: border-box;
 		padding-bottom: 20px;
+		min-height: calc(100vh - 100px);
 	}
 
-	.top-box {
-		width: 95%;
-		border-radius: 5px;
-		box-sizing: border-box;
-		// padding: 18px;
-		background-color: white;
-		margin: 10px auto;
-	}
-
-	.top-boxx {
-		width: 47%;
-		border-radius: 5px;
-		box-sizing: border-box;
-		// padding: 18px;
-		background-color: white;
-		margin-top: 10px;
-
-
-	}
-
-	.top-boxx2 {
-		border-radius: 5px;
-		box-sizing: border-box;
-		// padding: 18px;
-		background-color: white;
-		margin-top: 10px;
-
-
-	}
-
-	.cont-box {
-		width: 100%;
-		border-radius: 5px;
-		box-sizing: border-box;
-		padding: 18px;
-		background-color: white;
-		margin: 10px auto;
-	}
-
-	.charts-box {
-		width: 100%;
-		height: 300px;
-	}
-
-	.t-bottom {
-		width: 100%;
-		height: 130px;
-		border-top: 1px solid #EEEEEE;
-		box-sizing: border-box;
-		// padding: 20px;
-	}
-
-	.t-top {
-		width: 100%;
-		// height: 130px;
-		display: flex;
-
-		justify-content: center;
-		box-sizing: border-box;
-		padding: 15px;
-	}
-
-	.sis {
-		width: 33%;
-	}
-
-	.dinga {
-		// margin-left: 25px;
-		font-size: 14px;
-		font-weight: bold;
-	}
-
-	.sys {
-		width: 25%;
-	}
-
-	.t-title {
-		width: 100%;
-		text-align: center;
-		font-size: 14px;
-		font-weight: 400;
-		color: #333333;
-		line-height: 14px;
-	}
-
-	.t-num {
-		width: 100%;
-		text-align: center;
-		font-size: 22px;
-		font-weight: bold;
-		color: #0D2E8D;
-		line-height: 26px;
-		margin: 5px auto;
-	}
-
-	.cont-title {
-		font-size: 16px;
-		font-weight: 500;
-		color: #333333;
-	}
-
-	.charts-box {
-		width: 100%;
-		height: 300px;
-	}
-
-	.wrap-box {
-		width: 100%;
-		box-sizing: border-box;
-		display: flex;
-		flex-wrap: wrap;
-		margin: 10px auto;
-	}
-
-	.w-box {
-		width: 33%;
-		box-sizing: border-box;
-		text-align: center;
-		margin-bottom: 10px;
-	}
-
-	.imgicon {
-		width: 33px;
-		height: 28px;
-		margin: 0 auto;
-
-		image {
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	.t-zhong {
-		font-size: 14px;
-		font-weight: 400;
-		color: #333333;
-		margin: 3px auto;
-	}
-
-	.lanbnum {
-		font-size: 26px;
-		font-weight: bold;
-		color: #0D2E8D;
-	}
-
-	.b-title {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		font-size: 14px;
-		font-weight: 400;
-		color: #666666;
-		margin-bottom: 10px;
-	}
-
-	.b-zuo {
-		width: 20%;
-	}
-
-	.b-zhong {
-		text-align: left;
-		width: 60%;
-		display: flex;
-		align-items: center;
-	}
-
-	.b-you {
-		width: 20%;
-	}
-
-	.touxiang {
-		width: 40px;
-		height: 40px;
-		border-radius: 50%;
-		background-color: salmon;
-		overflow: hidden;
-		margin-right: 10px;
-
-		image {
-			width: 100%;
-			height: 100%;
-		}
-	}
-
-	.one {
-		width: 24px;
-		height: 24px;
-		border-radius: 50%;
-		background: #FEB947;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: white;
-
-	}
-
-	.dis-t {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin: 10px auto;
-	}
-
-	.lank {
-		width: 102px;
-		height: 27px;
-		border-radius: 14px;
-		border: 1px solid #0D2E8D;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 15px;
-		font-weight: 400;
-		color: #0D2E8D;
-	}
-
-	.lan-you {
-		display: flex;
-		align-items: center;
-	}
-
-	.yi {
-		font-size: 15px;
-		font-weight: 400;
-		color: #666666;
-		line-height: 15px;
-		margin-right: 15px;
-	}
-
-	.er {
-		width: 25px;
-		height: 25px;
-		background: #0D2E8D;
-		border-radius: 3px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: white !important;
-	}
-
-	// ----------------------
-	.popup-box {
-		overflow: hidden;
-		border-radius: 8px;
-		box-sizing: border-box;
-		padding: 15px;
-		width: 100%;
-		background-color: white;
-	}
-
-	.sousuo {
-		width: 95%;
-		margin: 0 auto;
-		margin-left: 0px;
-		height: 30px;
-		background: #F0F0F0;
-		border-radius: 50px;
-		color: #999999;
-		box-sizing: border-box;
-		padding: 0 10px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		input {
-			width: 80%;
-		}
-	}
-
-	.list-box {
-		width: 100%;
-		height: 300px;
-		overflow: hidden;
-		box-sizing: border-box;
-
-	}
-
-	.list_scroll {
-		height: 100%; // 需设置高度
-		display: flex;
-		flex-direction: column;
-
-	}
-
-	.list-qiu {
-		width: 95%;
-		border-bottom: 1px solid #EEEEEE;
-		box-sizing: border-box;
-		padding: 10px 5px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.tel {
-		margin-left: 5px;
-		font-size: 15px;
-		font-weight: 400;
-		color: #666666;
-	}
-
-	.ahhh {
+	.time-selector {
 		width: 90%;
 		margin: 10px auto;
 	}
 
-	.waigg {
+	/* 空状态样式 */
+	.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;
-		flex-wrap: wrap;
-		box-sizing: border-box;
-		padding: 10px;
+		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>
\ No newline at end of file