cxc-szcx-uniapp/pages/views/renliziyuan/renyuanxinxi/qttongji.vue

<template>
	<view>
		<view class="container" id="top1">
			<uni-row style="margin-bottom: 10rpx;margin-left: 30rpx;margin-right: 30rpx;">
				<uni-col :span="24"><uni-title :title="'所选单位ID'" align="left" type="h4"></uni-title></uni-col>
			</uni-row>
			<uni-row style="margin-bottom: 20rpx;margin-left: 30rpx;margin-right: 30rpx;">
				<uni-col :span="24">
					<trq-depart-select v-model="selectedOrgCode" returnCodeOrID="orgCode"
						@change="onOrgCodeChange"></trq-depart-select>
				</uni-col>
			</uni-row>

			<uni-row style="margin-bottom: 20rpx;margin-left: 30rpx;margin-right: 30rpx;">
				<uni-col :span="24">
					<picker mode="selector" :range="fieldList" range-key="label" @change="onFieldChange">
						<view class="picker">选择字段: {{ selectedFieldLabel }}</view>
					</picker>
				</uni-col>
			</uni-row>

		</view>
		<!-- ECharts图表 -->
		<view class="chart-container">
			<l-echart ref="chart" @finished="initChart" @tap="onChartClick" />
		</view>


		<!-- 数据表格 -->

		<uni-row style="margin-top: 10px; margin-left: 30rpx;margin-right: 30rpx;" v-if="personnelList.length>0">
			<uni-col :span="3">
				<view class="titleStyle">
					序号
				</view>
			</uni-col>
			<uni-col :span="5">
				<view class="titleStyle">
					姓名
				</view>
			</uni-col>
			<uni-col :span="5">
				<view class="titleStyle">
					性别
				</view>
			</uni-col>
			<uni-col :span="5">
				<view class="titleStyle">
					年龄
				</view>
			</uni-col>
			<uni-col :span="6">
				<view class="titleStyle">
					操作
				</view>
			</uni-col>
		</uni-row>

		<scroll-view scroll-y :style="{height: bottomHeight + 'px' }">
			<uni-row style="margin-bottom: 10rpx;margin-left: 30rpx;margin-right: 30rpx;">
				<view v-for="(item,index) in personnelList">
					<uni-col :span="3">
						<view class="dataStyle">
							{{index+1}}
						</view>
					</uni-col>
					<uni-col :span="5">
						<view class="dataStyle">
							{{item.xm}}
						</view>
					</uni-col><uni-col :span="5">
						<view class="dataStyle">
							{{item.xb_dictText}}
						</view>
					</uni-col><uni-col :span="5">
						<view class="dataStyle">
							{{item.nl}}
						</view>
					</uni-col>
					<uni-col :span="6">
						<view class="dataStyle">
							<button size="mini" type="primary" @click="detail(item)">详情</button>
						</view>
					</uni-col>
				</view>
			</uni-row>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import * as echarts from 'echarts';
	import {
		cxcRyDatAstatistics,
		cxcRyDatAstatisticsDetails
	} from '@/api/renyuan.js';
	// 存储下方组件的高度  tableData
	const bottomHeight = ref(0);
	// 新增加载状态
	const chart = ref(null);
	const fieldList = ref([{
			label: '性别',
			value: 'xb'
		},
		{
			label: '年龄',
			value: 'nl'
		},
		{
			label: '学历',
			value: 'whcd1'
		},
	]); // 字段列表
	const selectedOrgCode = ref(''); // 当前选择的单位   orgCode
	const selectedOrgCodeLabel = ref('请选择单位'); // 当前选择的单位名称
	const selectedField = ref(''); // 当前选择的字段
	const selectedFieldLabel = ref('请选择字段'); // 当前选择的字段名称
	const chartData = ref({}); // 图表数据
	const personnelList = ref([]); // 人员列表  initChart

	const chartOption = ref({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		xAxis: {
			type: 'category',
			data: [],
		},
		yAxis: {
			type: 'value',
		},
		series: [{
			name: '数量',
			type: 'bar',
			data: [],
		}, ],
	})

	function detail(record) {
		// console.log(record)
		uni.navigateTo({
			url: "/pages/views/renliziyuan/renyuanxinxi/detail?data=" + encodeURIComponent(JSON.stringify(record))
		})
	}


	onMounted(() => {
		// #ifdef APP
		getHeight();
		// #endif
	})
	// #ifdef APP

	const getHeight = () => {
		// 获取屏幕高度
		const systemInfo = uni.getSystemInfoSync();
		const screenHeight = systemInfo.screenHeight;
		// 创建选择器查询对象
		const query = uni.createSelectorQuery();
		// 获取上方组件的高度
		query
			.select('#top1')
			.boundingClientRect((rect1) => {
				// 计算上方组件高度总和
				const topComponentsHeight = rect1.height
				// 计算下方组件的高度
				bottomHeight.value = screenHeight - topComponentsHeight - 415;
			})
			.exec();
	};

	// #endif
	// 初始化 ECharts length   departChange
	// 初始化图表
	const initChart = () => {
		setTimeout(async () => {
			if (!chart.value) return
			const myChart = await chart.value.init(echarts)
			myChart.setOption(chartOption.value)
		}, 300)
	};

	// 更新图表
	const updateChart = () => {
		if (!chartInstance) return;
		const {
			xb,
			number
		} = chartData.value;
		chartInstance.setOption({
			xAxis: {
				data: xb,
			},
			series: [{
				data: number,
			}, ],
		});
	};
	// 获取统计数据
	const fetchStatisticsData = async () => {
		if (!selectedOrgCode.value || !selectedField.value) return;
		try {
			const res = await cxcRyDatAstatistics({
				orgCode: selectedOrgCode.value,
				field: selectedField.value,
			});
			console.log(res)
			chartData.value = res.data;
			updateChart();
		} catch (error) {
			console.error('获取统计数据失败:', error);
		}
	};

	// 获取人员列表 delimiter
	const fetchPersonnelList = async (ldhthList) => {
		try {
			const res = await cxcRyDatAstatisticsDetails({
				ldhth: ldhthList
			});
			console.log(res)
			personnelList.value = res.data;
		} catch (error) {
			console.error('获取人员列表失败:', error);
		}
	};


	// 事件处理
	const onOrgCodeChange = (e) => {
		const index = e.detail.value;
		selectedOrgCode.value = orgCodeList.value[index].value;
		selectedOrgCodeLabel.value = orgCodeList.value[index].label;
		fetchStatisticsData();
	};

	const onFieldChange = (e) => {
		const index = e.detail.value;
		selectedField.value = fieldList.value[index].value;
		selectedFieldLabel.value = fieldList.value[index].label;
		fetchStatisticsData();
	};

	const onChartClick = (e) => {
		const {
			ldhth
		} = chartData.value;
		if (ldhth && ldhth.length > 0) {
			fetchPersonnelList(ldhth);
		}
	};
</script>

<style scoped>
	.container {
		margin: 20, 20, 20, 20rpx;
	}

	.input-group {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.input {
		flex: 1;
		border: 1rpx solid #ddd;
		padding: 15rpx;
		border-radius: 8rpx;
	}

	.query-btn {
		background: #007AFF;
		color: white;
		padding: 0 40rpx;
		border-radius: 8rpx;
	}

	.stats-box {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 12rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.label {
		font-size: 24rpx;
		color: #666;
	}

	.value {
		font-size: 36rpx;
		font-weight: bold;
		color: #0000ff;
	}

	.chart-container {
		height: 400rpx;
		margin-top: 20rpx;
	}

	.titleStyle {
		font-size: 12px;
		color: #747474;
		line-height: 30px;
		height: 30px;
		background: #F2F9FC;
		text-align: center;
		vertical-align: middle;
		border-left: 1px solid #919191;
		border-bottom: 1px solid #919191;
		;
	}

	/* 内容样式 */
	.dataStyle {
		max-font-size: 14px;
		/* 最大字体限制 */
		min-font-size: 10px;
		/* 最小字体限制 */
		font-size: 12px;
		color: #00007f;
		line-height: 30px;
		height: 30px;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #919191;
		border-left: 1px solid #919191;
		text-overflow: ellipsis;

	}
</style>