汇总列表样式调整

api/garbageClearance/disposeRubbishService.js

@@ -80,4 +80,10 @@ export default {
 			params: {no: no}
 		});
 	},
+	getAllOfficeDetailCollect: function () {
+		return request({
+			url: "/dispose/rubbish/getAllOfficeDetailCollect",
+			method: "get"
+		});
+	},
 };

pages/edt/TabulateStatisticsList.vue

@@ -1,74 +1,129 @@
 <template>
-	<view>
-		<text class="u-demo-block__title" style="display: flex; align-items: center; justify-content: center; font-size: 20px; margin-top: 10px; font-weight: bold;">
-			各村垃圾清运汇总统计表
-		</text>
-		<u-divider
-				text=""
-				textColor="#2979ff"
-				lineColor="#2979ff"
-		></u-divider>
-
-		<u-list
-				@scrolltolower="loadmore"
-		>
-			<u-list-item
-					v-for="(item, index) in dataList"
-					:key="index"
-			>
-				<u-cell  @click="detail(item.id)"
-						:title="`${item.name}`"
-						:value="`详情>`"
-				>
-				</u-cell>
-			</u-list-item>
-		</u-list>
+	<view class="u-content">
+		<section style="margin-top: 1.5em; overflow-x: auto;">
+			<table style="min-width: 400px;" cellspacing="0" cellpadding="5">
+				<thead>
+				<tr>
+					<th colspan="3" style="text-align: center; font-size: 20px; font-weight: bold;">
+						各村垃圾清运汇总统计表
+					</th>
+				</tr>
+				<tr>
+					<th v-for="(header, index) in tableHeaders" :key="index">{{ header }}</th>
+				</tr>
+				</thead>
+				<tbody>
+				<tr v-for="(row, rowIndex) in tableData" :key="rowIndex" :style="rowIndex % 2 === 1 ? 'background-color: #f6f8fa;' : ''">
+					<td
+							v-for="(cell, cellIndex) in row.slice(0, 3)"
+					:key="cellIndex"
+					align="center"
+					>
+					<!-- 根据 cellIndex 来判断显示内容 -->
+					<template v-if="cellIndex === 0 && row[0] !== '汇总'">
+						<a href="#" @click.prevent="detail(row[3])">{{ cell }}</a> <!-- 使用 row[3] 传递 officeId -->
+					</template>
+					<template v-else>
+						{{ cell }}
+					</template>
+					</td>
+				</tr>
+				</tbody>
+			</table>
+		</section>
 	</view>
 </template>
 
 <script>
-	import officeService from "@/api/sys/officeService";
+	import disposeRubbishService from '@/api/garbageClearance/disposeRubbishService'
+
 	export default {
 		data() {
 			return {
-				status: 'loadmore',
-				searchForm: {
-					title: ''
-				},
-				dataList: [],
-				loading: false,
-			}
-		},created() {
-			this.loadmore()
+				id: '',
+				// 表格的头部
+				tableHeaders: ["村级名称", "清运总数", "当前月清运数"], // 去掉了 "officeId"
+				// 表格的数据，二维数组表示每一行
+				tableData: []
+			};
 		},
+
+		onLoad(val) {
+			this.id = val.id;
+			this.load();
+		},
+
 		methods: {
-			loadmore() {
-				//联网加载数据
-				this.status = 'loading';
-				officeService.villageLevelList().then((data)=>{
-					console.log('获取村级数据信息：',data)
-					//追加新数据
-					this.dataList=this.dataList.concat(data);
-				})
+			load() {
+				// 根据所属村落id将所有清运数据进行统计展示
+				disposeRubbishService.getAllOfficeDetailCollect(this.id).then((data) => {
+					console.log(data);
+					this.tableData = data.map(item => [
+						item.officeName,  // 第 0 列：村级名称
+						item.all,         // 第 1 列：清运总数
+						item.month,       // 第 2 列：当前月清运数
+						item.officeId     // 第 3 列：officeId 作为隐藏的参数
+					]);
+				}).catch(error => {
+					console.error('数据加载失败:', error);
+				});
 			},
-			detail(id){
-				console.log('查看详情',id)
+
+			detail(officeId) {
+				console.log('查看详情', officeId)
 				uni.navigateTo({
-					url: `/pages/edt/TabulateStatisticsDetail?id=${id}`,
+					url: `/pages/edt/TabulateStatisticsDetail?id=${officeId}`, // 使用 officeId 作为参数
 					success: function(res) {
-						// 跳转成功后的处理
 						console.log('跳转成功');
 					},
 					fail: function(err) {
-						// 跳转失败后的处理
 						console.log('跳转失败', err);
 					},
 					complete: function() {
-						// 无论跳转成功还是失败都会执行
 						console.log('跳转完成');
 					}
 				})
-			}
+			},
 		}
+	};
+</script>
+
+
+<style lang="scss">
+	.u-content {
+		padding: 24rpx;
+		font-size: 32rpx;
+		color: #333;
+		line-height: 1.6;
+	}
+	table {
+		box-sizing: border-box;
+		border-top: 1px solid #dfe2e5;
+		border-left: 1px solid #dfe2e5;
+	}
+	th {
+		border-right: 1px solid #dfe2e5;
+		border-bottom: 1px solid #dfe2e5;
+	}
+	td {
+		border-right: 1px solid #dfe2e5;
+		border-bottom: 1px solid #dfe2e5;
+	}
+	a {
+		color: rgb(41, 121, 255); /* 设置默认链接颜色 */
+		text-decoration: none; /* 可选: 去掉下划线 */
+		font-size: 16px; /* 设置所有链接的字体大小 */
+	}
+
+	a:hover {
+		color: rgb(41, 121, 255); /* 鼠标悬停时的颜色，与默认颜色一致 */
+	}
+
+	a:visited {
+		color: rgb(41, 121, 255); /* 已访问链接的颜色，与默认颜色一致 */
+	}
+
+	a:active {
+		color: rgb(41, 121, 255); /* 点击链接时的颜色，与默认颜色一致 */
 	}
-</script>
+</style>