LandSurveyApplet/pages/investigator/index.vue

<template>
	<view class="min-h-screen bg-gray-50">
		<!-- 顶部导航栏 -->
		<view class="flex items-center justify-between bg-white p-4 border-b">
			<text class="text-xl font-bold">常德市</text>

		</view>
		<!-- 主要内容区域 -->
		<view class="p-4">
			<!-- 第一行数据卡片 -->
			<view class="grid grid-cols-2 md-grid-cols-4 gap-4 mb-6">
				<!-- 抽离配置项，通过循环渲染（减少重复代码） -->
				<view v-for="(item, index) in statCardList" :key="index" class="rounded-lg p-4 shadow-sm"
					:class="`bg-${item.bgColor}`" @click="handleIconClick(urbanDistrictData[item.dataKey],item)">
					<text class="text-gray-500 text-sm block mb-1">{{ item.name }}</text>
					<text class="text-xl font-bold">{{ urbanDistrictData[item.dataKey] }}</text>
				</view>
			</view>
			<!-- 第二行数据卡片 -->
			<view class="grid grid-cols-3 gap-4 mb-6">
				<view class="rounded-lg p-4 shadow-sm bg-[#F8FAFF]" @click="householdsPage()">
					<text class="text-gray-500 text-sm block mb-1">总户数</text>
					<text class="text-sm font-bold">统计中</text>
				</view>
				<view class="rounded-lg p-4 shadow-sm bg-[#F7FFF9]" @click="householdsPage()">
					<text class="text-gray-500 text-sm block mb-1">已上报</text>
					<text class="text-sm font-bold">统计中</text>
				</view>
				<view class="rounded-lg p-4 shadow-sm bg-[#FFF7F7]">
					<text class="text-gray-500 text-sm block mb-1" @click="householdsPage()">未上报</text>
					<text class="text-sm font-bold text-red-500">统计中</text>
				</view>
			</view>
			<!-- 第三行数据卡片 -->
			<view class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
				<!-- 待审核 -->
				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-pink-50"
					@click="toBeReviewedTotal()">
					<text class="text-gray-500 text-sm block mb-1">待审核</text>
					<text class="text-xl font-bold text-pink-500">统计中</text>
				</view>
				<!-- 未通过 -->
				<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-orange-50">
					<text class="text-gray-500 text-sm block mb-1">未通过</text>
					<text class="text-xl font-bold text-orange-500">统计中</text>
				</view>
				<!-- 待公示 -->
				<!-- 	<view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-amber-50">
					<text class="text-gray-500 text-sm block mb-1">待公示</text>
					<text class="text-xl font-bold text-amber-500">暂未统计</text>
				</view> -->
				<!-- 已公示 -->
				<!-- <view class="rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-300 bg-green-50">
					<text class="text-gray-500 text-sm block mb-1">已公示</text>
					<text class="text-xl font-bold text-green-500">暂未统计</text>
				</view> -->
			</view>
			<!-- 功能按钮区域 -->
			<!-- 			<view class="grid grid-cols-2 gap-4 mb-6">
				<view
					class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
					@click="goToTask()">
					<text class="font-medium text-blue-600 underline">现场调查任务</text>
					<uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
				</view>
				<view
					class="bg-white rounded-lg p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow"
					@click="goArchive">
					<text class="font-medium text-blue-600 underline">档案资料</text>
					<uni-icons type="right" color="#3B82F6" size="18"></uni-icons>
				</view>
			</view> -->
			<!-- 乡镇数据列表 -->
			<view class="space-y-4">
				<view class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"
					v-for="(item,index) in townData" :key="index" @click="jumpTown(item)">
					<text class="font-medium text-base mb-3 block">{{item.nameAll}}</text>
					<view class="grid grid-cols-4 gap-2 text-sm">
						<view>
							<text class="text-gray-500 block">总户数</text>
							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">统计中</text>
						</view>
						<view>
							<text class="text-gray-500 block">未上报</text>
							<text class="font-medium text-red-500 bg-red-50 px-2 py-1 rounded inline-block">统计中</text>
						</view>
						<view>
							<text class="text-gray-500 block">已上报</text>
							<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">统计中</text>
						</view>
						<view class="flex items-end justify-between">
							<view>
								<text class="text-gray-500 block">已完成</text>
								<text class="font-medium bg-gray-100 px-2 py-1 rounded inline-block">统计中</text>
							</view>
							<uni-icons type="right" color="#999" size="16"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getbuildTree } from '@/api/region.js';
	import { getTotalLauncher } from '@/api/employer.js';
	
	const pageType = ref(null)
	// 无需额外逻辑，直接展示静态数据
	const urbanDistrictData = {
		mainEmployer: ref(),
		notStarted: 0,
		underInvestigation: 6698,
		underPublicity: 0
	}
	// 状态卡片配置（统一管理，便于维护）
	const statCardList = [
		{
			name: '总发包方',
			dataKey: 'mainEmployer',
			type: 'mainEmployer',
			bgColor: 'fffaff' // 对应原 bg-[#FFFAFF]
		},
		{
			name: '未开始',
			dataKey: 'notStarted',
			type: 'notStarted',
			bgColor: 'fff7f8' // 对应原 bg-[#FFF7F8]
		},
		{
			name: '摸底中',
			dataKey: 'underInvestigation',
			type: 'underInvestigation',
			bgColor: 'fffef9' // 对应原 bg-[#FFFEF9]
		},
		{
			name: '公示中',
			dataKey: 'underPublicity',
			type: 'underPublicity',
			bgColor: 'fffeb2' // 对应原 bg-[#FFFEB2]
		}
	];

	//获取到所有石门县下的镇数据
	const townData = ref([]);
	async function getList() {
		try {
			// 传入参数
			const res = await getbuildTree({
				qsdwdm: '430726'
			});
			townData.value = res.data;
		} catch (err) {
			console.error('获取失败：', err);
		}
	}
	//暂时获取所有发包方统计数
	//暂时获取所有发包方的total
	async function getTotal() {
		let data = uni.getStorageSync('investigator_FBFBM');
		console.log(data)
		try {
			// 传入参数
			const res = await getTotalLauncher({
				fbfbm: data,
				fbfmc: '',
				pageNum: '1',
				pageSize: '10'
			});
			console.log(res.data.total)
			urbanDistrictData.mainEmployer.value = res.data.total;
		} catch (err) {
			console.error('获取失败：', err);
		}
	}

	const jumpTown = (value) => {
		uni.navigateTo({
			url: `/pages/investigator/employerModule/index?groupInfo=${encodeURIComponent(JSON.stringify(value))}`
		})
	}


	const handleIconClick = (e, value) => {
		if (e === 0) {
			uni.showToast({
				title: '暂无数据',
				icon: 'none',
			});
		} else {
			uni.navigateTo({
				url: `/pages/investigator/employerModule/index?groupInfo=${encodeURIComponent(JSON.stringify(value))}`
			})
		}
	}


	const toBeReviewedTotal = () => {
		console.log(1123,pageType.value)
		uni.navigateTo({
			url: `/pages/official/index_totalSHlist?type=` + pageType.value
		})
		// uni.navigateTo({
		// 	url: `/pages/investigator/Households/index`
		// })
	}

	const householdsPage = () => {
		uni.navigateTo({
			url: `/pages/investigator/Households/index`
		})
	}
	// 跳转现场调查任务跳转现场调查任务跳转现场调查任务
	// 跳转现场调查任务跳转现场调查任务跳转现场调查任务
	const goToTask = () => {
		uni.navigateTo({
			url: '/pages/task/index'
		});
	};
	// ==================== 入口 ====================
	onLoad(async (options) => {
		pageType.value = options.type;
		getList()
	});

	// getTotal()
</script>

<style>
	/* 统一定义背景色（避免行内样式，提升可维护性） */
	.bg-fffaff {
		background-color: #FFFAFF;
	}

	.bg-fff7f8 {
		background-color: #FFF7F8;
	}

	.bg-fffef9 {
		background-color: #FFFEF9;
	}

	.bg-fffeb2 {
		background-color: #FFFEB2;
	}
</style>