cxc-szcx-uniapp/pages/views/shengchan/ribaoshuju/trqRbsj.vue

<template>
	<view :class="{ gray: store.isgray == 1 }">


		<view class="content">
			<!-- 标题行 -->
			<view class="header-row">
				<view class="title">天然气产量</view>
				<view class="more" @click="selectMore">更多>></view>
			</view>
		</view>
		<view class="container">
			<view v-for="(item, index) in shishiArrSelect" :key="index" class="card-item"
				@click="handleCardClick(item.gas)">
				<view class="card">
					<text class="title">{{ item.gas }}</text>
					<view class="content">
						<text class="label">气量</text>
						<text class="value">{{ formatNumber(item.dailyVolume) || '-' }}</text>
					</view>
					<view class="content">
						<text class="label">年累计</text>
						<text class="value">{{ formatNumber(item.yearVolume) || '-' }}</text>
					</view>
					<view class="progress-bar">
						<!-- 动态设置宽度和颜色 -->
						<view class="progress"
							:style="{ width: `${Math.abs(item.yearPerCent)}%`, 'background-color': item.yearPerCent < 0 ? '#ff4444' : '#007aff' }">
						</view>
						<!-- 显示带符号的百分比 -->
						<text v-if="!(item.yearPlan === '' || item.yearPlan === '0')"
							class="progress-text">{{ item.yearPerCent }}%</text>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popupSelect" type="top" background-color="#fff">
			<view style="margin-top: 50px">
				<view class="titlepopup">选择显示更多生产数据</view>

				<view class="popupBtn">
					<button size="mini" @click="selectDefault" style="padding: 8px 16px;">默认</button>
					<button size="mini" @click="selectAll" style="padding: 8px 16px;">全选</button>
					<button size="mini" @click="selectNo" style="padding: 8px 16px;">全不选</button>
				</view>
				<view class="popupcheckbox">
					<uni-data-checkbox style="font-size: 14px" @change="onselectionchange" :localdata="shishiArr"
						v-model="shishiArrDisplay" multiple :map="{ value: 'gas', text: 'gas' }"></uni-data-checkbox>
				</view>
			</view>
		</uni-popup>
		<!-- 数据弹窗 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="popup-content">
				<view class="popup-header">
					<text class="title">{{ selectedGas }}数据详情 单位(万立方米)</text>
					<uni-icons type="closeempty" size="24" color="#666" @click="closePopup"></uni-icons>
				</view>

				<view class="table">
					<!-- 表头 -->
					<view class="tr header">
						<view class="th1">序号</view>
						<view class="th">名称</view>
						<view class="th">日气量</view>
						<view class="th">年累计</view>
						<view class="th1">操作</view>
					</view>
					<scroll-view scroll-X="true" scroll-Y="true" class="table-container">
						<!-- 表格内容 -->
						<view class="tr" v-for="(item, index) in filteredData" :key="index"
							:class="{ even: index % 2 === 0 }">
							<view class="td1">{{ index + 1 }}</view>
							<view class="td">{{ item.unit }}</view>
							<view class="td" :class="{ negative: item.rq < 0 }">
								{{ formatNumber(item.rq) }}
							</view>
							<view class="td" :class="{ negative: item.yearVolume < 0 }">
								{{ formatNumber(item.yearVolume) }}
							</view>
							<view class="td1" style="color: red" @click="goHistory(item)">历史</view>
						</view>

						<!-- 空数据提示 -->
						<view v-if="!filteredData.length" class="empty">暂无相关数据</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watchEffect
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		queryJinriShengchansj,
		queryYearShengchansj,
		queryJinriTrqShengchansj
	} from '@/api/shengchan.js';
	import {
		formatDate,
		getDateAfterDays
	} from '@/utils/dateTime.js';
	import {
		beforeJump
	} from '@/utils/index.js';
	import {
		useStore
	} from '@/store';

	const store = useStore();

	const shishiArr = ref([]);
	const shishiArrSelect = ref([]);
	const shishiArrDisplay = ref(['气井气', '商品量', '站线综合输差']);
	const dataJinriUnit = ref([]);
	const selectedGas = ref('');
	const filteredData = ref([]);
	const popup = ref(null);
	const popupSelect = ref(null);
	const strDate = ref('');

	const dataJinri = ref([]);
	const dataJinriSum = ref([]);
	const dataJinriSumUnit = ref([]);


	const qjqNdjs = ref(7500);
	const splNdjs = ref(7220);
	const zhqNdjs = ref(300);
	const zhscNdjs = ref(50);



	// 点击卡片处理
	// const handleCardClick = (gas) => {
	// 	selectedGas.value = gas;
	// 	let queryParms = {};
	// 	filteredData.value = [];
	// 	queryParms.day = strDate.value;
	// 	queryParms.gas = gas;
	// 	queryParms.unit = '文23气田,户部寨气田';
	// 	console.log(queryParms);
	// 	queryJinriTrqShengchansj(queryParms).then((res) => {
	// 		if (res.success) {
	// 			console.log(res);
	// 			filteredData.value = res.result;
	// 		}
	// 	});

	// 	popup.value.open();
	// };




	function selectMore() {
		popupSelect.value.open();
	}

	function selectAll() {
		shishiArrDisplay.value = [];
		// console.log(9, shishiArr.value)
		shishiArr.value.forEach((item) => {
			// console.log(10, item)
			shishiArrDisplay.value.push(item.gas);
		});
		onselectionchange()
		popup.value.close();
	}

	function selectNo() {
		shishiArrDisplay.value = [];
		onselectionchange()
		popup.value.close();
	}

	function selectDefault() {
		shishiArrDisplay.value = ['气井气', '商品量', '站线综合输差'];
		onselectionchange()
		popup.value.close();
	}
	const onselectionchange = () => {
		shishiArrSelect.value = [];
		shishiArrDisplay.value.forEach((item) => {
			shishiArrSelect.value.push(shishiArr.value.filter((item1) => item1.gas === item)[0]);
		});
	};

	const handleCardClick = (gas) => {
		selectedGas.value = gas;
		filteredData.value = dataJinriSumUnit.value.filter((item) => item.gas === gas);
		popup.value.open();
	};

	// 关闭弹窗
	const closePopup = () => {
		popup.value.close();
	};
	onMounted(() => {
		getJinriTrqShengchansj();

		getJinriShengchansj();
	});

	// 数字格式化
	const formatNumber = (num) => {
		let temp = 0;
		try {
			temp = parseFloat(num);
		} catch (error) {
			//TODO handle the exception
		}

		return temp.toFixed(4).replace(/\.?0+$/, '');
	};

	// 自动计算综合输差
	function calcZhsc(tempArray) {
		let totalJinqi = {
			gas: '总进气',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		};
		let totalChuqi = {
			gas: '总出气',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		};
		const compositeZx = {
			gas: '站线综合输差',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		}; // 综合输差
		const compositeJc = {
			gas: '进出综合输差',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '100',
			yearPerCent: 0
		};
		const trqSpl = {
			gas: '商品量',
			dailyVolume: 0,
			yearVolume: 0,
			yearPlan: '7220',
			yearPerCent: 0
		};
		// 综合输差
		tempArray.forEach((item) => {
			if (item.gas === '站输差' || item.gas === '线输差') {
				compositeZx.dailyVolume += parseFloat(item.dailyVolume) || 0;
				compositeZx.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '气井气' || item.gas === '外部气' || item.gas === '返回气') {
				totalJinqi.dailyVolume += parseFloat(item.dailyVolume) || 0;
				totalJinqi.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '自耗气' || item.gas === '用户气' || item.gas === '返采油厂干气') {
				totalChuqi.dailyVolume += parseFloat(item.dailyVolume) || 0;
				totalChuqi.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '气井气' || item.gas === '站输差' || item.gas === '线输差') {
				trqSpl.dailyVolume += parseFloat(item.dailyVolume) || 0;
				trqSpl.yearVolume += parseFloat(item.yearVolume) || 0;
			}
			if (item.gas === '自耗气') {
				trqSpl.dailyVolume -= parseFloat(item.dailyVolume) || 0;
				trqSpl.yearVolume -= parseFloat(item.yearVolume) || 0;
			}
		});

		compositeZx.yearPerCent = calcPercent(compositeZx.yearPlan, compositeZx.yearVolume);

		trqSpl.yearPerCent = calcPercent(trqSpl.yearPlan, trqSpl.yearVolume);

		compositeJc.dailyVolume = (-totalJinqi.dailyVolume + totalChuqi.dailyVolume).toFixed(4);
		compositeJc.yearVolume = (-totalJinqi.yearVolume + totalChuqi.yearVolume).toFixed(4);
		compositeJc.yearPerCent = calcPercent(compositeJc.yearPlan, compositeJc.yearVolume);

		tempArray.push(compositeZx);
		tempArray.push(trqSpl);

		return tempArray;

		// console.log(composite);
	}

	const getJinriTrqShengchansj = () => {
		const now = new Date();
		if (now.getHours() < 11) {
			strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前  头一天的数据
		} else {
			strDate.value = formatDate(now).toString();
		}
		let queryParms = {};
		shishiArr.value = [];

		queryParms.day = strDate.value;
		// // console.log(queryParms);
		queryJinriTrqShengchansj(queryParms).then((res) => {
			if (res.success) {
				// console.log(1, res);
				let temp = res.result;

				temp.forEach((item) => {
					if (item.gas === '气井气') {
						item.yearPlan = 7500;
						item.yearPerCent = calcPercent(item.yearPlan, item.yearVolume);
					}
				});
				// console.log(2, temp);
				shishiArr.value = calcZhsc(temp);
				nextTick();
				onselectionchange();
				console.log(3, shishiArr.value);
				console.log(4, shishiArrSelect.value);
			}
		});
	};

	function goHistory(val) {
		uni.navigateTo({
			url: '/pages/views/shengchan/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val) + '&type=trq'
		});
	}

	function calcPercent(yearJihua, yearShiji) {
		// 计算进度百分比，避免除数为 0
		// 确保进度百分比不超过 100
		let plan = parseFloat(yearJihua === '' ? 0 : yearJihua);
		let shiji = parseFloat(yearShiji);
		let percent = 0;
		// 修改原始计算代码
		if (plan > 0) {
			percent = (shiji / plan) * 100;
			percent = Math.min(percent, 100); // 限制最大100%
		}
		return parseFloat(percent.toFixed(2)); // 转为数值
	}

	const getJinriShengchansj = () => {
		const now = new Date();
		if (now.getHours() < 11) {
			strDate.value = formatDate(getDateAfterDays(now, -1)).toString(); //11点之前  头一天的数据
		} else {
			strDate.value = formatDate(now).toString();
		}
		let queryParms = {};
		dataJinri.value = [];
		dataJinriSum.value = [];
		dataJinriSumUnit.value = [];
		queryParms.rqDate = strDate.value;
		queryParms.pageSize = 100;
		// console.log(queryParms);
		queryJinriShengchansj(queryParms).then((res) => {
			if (res.success) {
				// console.log(res);
				dataJinri.value = res.result.records;
				dataJinriSumUnit.value = sumByUnit(dataJinri.value); //包含gas  unit  rq  cq  totalGas
				// console.log(dataJinriSumUnit.value);
				// 使用 nextTick 等待 DOM 更新
				nextTick();
				getYearShengchansj(); //再获取今年以来的数据
			}
		});
	};
	const getYearShengchansj = () => {
		const now = new Date();
		let year = formatDate(now).split('-')[0];
		let queryParms = {};
		queryParms.yearStart = year;
		queryParms.yearEnd = year;

		// // console.log(2, queryParms.value);
		queryYearShengchansj(queryParms).then((res) => {
			if (res.success) {
				try {
					// // console.log(res.result);
					let yearData = res.result[year];
					// console.log(dataJinriSumUnit.value.length, dataJinriSumUnit.value, yearData.length,
					// yearData);
					dataJinriSumUnit.value.forEach((item) => {
						yearData.forEach((itemYear) => {
							// // console.log(item, itemYear);
							if (item.unit === itemYear.unit) {
								item.yearVolume = itemYear.yearSum || 0;
							}
						});
					});
					dataJinriSum.value = sumByGas(dataJinriSumUnit.value);
					// console.log(dataJinriSum.value);
					shishiArr.value.forEach((item) => {
						dataJinriSum.value.forEach((itemjinri) => {
							if (item.gas === itemjinri.gas) {
								item.dailyVolume = itemjinri.rq.toFixed(4);
								item.yearVolume = itemjinri.yearVolume.toFixed(4);
							}
						});
					});
				} catch (error) {
					// console.log(error);
				}
			}
		});
	};

	function sumByGas(records) {
		// console.log(records);
		const summaryMap = {};
		try {
			records.forEach((record) => {
				const gas = record.gas;
				if (!summaryMap[gas]) {
					// 初始化该 gas 类型的汇总对象
					summaryMap[gas] = {
						gas: gas,
						rq: 0,
						sq: 0,
						totalGas: 0,
						yearVolume: 0
					};
				}
				// 无论是否是第一次遇到该 gas 类型，都进行累加操作
				summaryMap[gas].rq += record.rq || 0;
				summaryMap[gas].sq += record.sq || 0;
				summaryMap[gas].totalGas += record.totalGas || 0;
				summaryMap[gas].yearVolume += record.yearVolume || 0;
			});
			return Object.values(summaryMap);
		} catch (error) {
			//TODO handle the exception
			// console.log(error);
		}
	}

	function sumByUnit(records) {
		// console.log(records);
		const summaryMap = {};
		try {
			records.forEach((record) => {
				const unit = record.unit;
				if (!unit.includes('区')) {
					if (!summaryMap[unit]) {
						// 初始化该 gas 类型的汇总对象
						summaryMap[unit] = {
							unit: unit,
							gas: record.gas,
							rq: 0,
							sq: 0,
							totalGas: 0,
							yearVolume: 0
						};
					}
					// 无论是否是第一次遇到该 unit 类型，都进行累加操作
					summaryMap[unit].rq += record.rq || 0;
					summaryMap[unit].sq += record.sq || 0;
					summaryMap[unit].totalGas += record.totalGas || 0;
					summaryMap[unit].yearVolume += record.yearVolume || 0;
				}
			});

			return Object.values(summaryMap);
		} catch (error) {
			//TODO handle the exception
			// console.log(error);
		}
	}
</script>

<style lang="scss" scoped>
	.header-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10 10rpx;
		border-bottom: 1rpx solid #eee;
		margin-left: 10px;
		margin-right: 10px;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.titlepopup {
		font-size: 35rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		padding: 20px;
		margin-top: 10px;
	}

	/* 给包裹按钮的容器设置样式 */
	.popupBtn {
		display: grid;
		/* 创建三个等宽的列 */
		grid-template-columns: repeat(3, 1fr);
		/* 设置列与列之间的间距 */
		gap: 2px;
		margin-bottom: 20px;
	}



	/* 添加按钮按下效果 */
	.popupBtn button:active {
		opacity: 0.8;
		transform: scale(0.98);
		transition: all 0.1s ease;
	}



	/* 给按钮设置通用样式 */
	.popupBtn button {
		border: none;
		padding: 0px 10px;
		background-color: #007BFF;
		color: white;
		border-radius: 5px;
		cursor: pointer;
	}

	/* 鼠标悬停在按钮上时的样式 */
	.popupBtn button:hover {
		background-color: #0056b3;
	}

	.more {
		font-size: 26rpx;
		color: #666;
		cursor: pointer;
	}

	.more::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		border-top: 2rpx solid #666;
		border-right: 2rpx solid #666;
		transform: rotate(45deg);
		margin-left: 8rpx;
		vertical-align: middle;
	}

	/* 鼠标悬停效果 */
	.more:hover {
		color: #007aff;
	}

	.popupcheckbox {
		/* 使用 Flexbox 布局 */
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		gap: 2px;
		/* 设置复选框之间的间距 */
		margin-left: 20px;
		margin-bottom: 10px;
	}


	.popupcheckbox .uni-data-checkbox__item {
		flex-basis: calc((100% / var(4)) - 10px);
		box-sizing: border-box;
	}


	.container {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		gap: 20rpx;
	}

	.popup-content {
		padding: 30rpx;
		max-height: 40vh;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eee;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.table-container {
		width: 100%;
		height: 30vh;
		overflow: hidden;
	}

	.table {
		min-width: 100%;
		border: 2rpx solid #e8e8e8;

		.tr {
			display: flex;
			border-bottom: 2rpx solid #e8e8e8;

			&.header {
				background-color: #fafafa;
				font-weight: 600;
			}

			&.even {
				background-color: #f8f8f8;
			}
		}

		.th,
		.td {
			flex: 1;
			min-width: 80rpx;
			padding: 10rpx;
			font-size: 22rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			white-space: nowrap;
			height: 30rpx;
			vertical-align: middle;
		}

		.th1,
		.td1 {
			flex: 1;
			max-width: 40rpx;
			padding: 10rpx;
			font-size: 22rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			white-space: nowrap;
			height: 30rpx;
			vertical-align: middle;
		}

		.th {
			background-color: #f0f0f0;
		}

		.td.negative {
			color: #ff4444;
			font-weight: 500;
		}
	}

	.empty {
		padding: 40rpx;
		text-align: center;
		color: #888;
		font-size: 16rpx;
	}

	.card-item {
		flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩   selectedGas  formatNumber
		min-width: 240rpx;
		max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）

		@media (min-width: 768px) {
			max-width: calc(33.33% - 14rpx); // 大屏显示3列
		}
	}

	.card {
		background: #ececec;
		border-radius: 16rpx;
		padding: 15rpx;
		box-shadow: 0 4rpx 12rpx rgba(179, 179, 179, 0.1);

		.title {
			display: block;
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
		}

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

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

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

			.value {
				font-size: 28rpx;
				color: #0000ff;
				font-weight: 500;
			}
		}
	}

	.progress-item {
		margin-bottom: 20px;
	}

	.progress-bar {
		position: relative;
		height: 20px;
		background: #f0f0f0;
		border-radius: 10px;
		overflow: hidden;
	}
</style>