cxc-szcx-uniapp/pages/product/NatrueGas/index.vue

<template>
	<view :class="{ gray: store.isgray == 1 }">
		<view class="wrapper f-col aic">
			<view class="onduty">
				<view class="title f-row aic jcb"><uni-title :title="strDate + '：生产数据'" type="h3" color="red" /></view>
				<view class="info">
					<!-- <uni-title :title="'天然气'" type="h3" color="blue" /> -->
					<view v-for="(row, rowIndex) in groupedData" :key="rowIndex" class="data-row">
						<uni-row>
							<uni-col v-for="(item, colIndex) in row" :key="colIndex" :span="7">
								<text style="color: black; font-size: 32; font-weight: bold">{{ item.gas }}</text>
								<view class="value-group">
									<text style="color: gray; font-size: 24">当日量:</text>
									<text style="color: blue; font-size: 28; font-weight: bold">{{ item.dailyVolume }}</text>
									<text style="color: gray; font-size: 24">年累计:</text>
									<text style="color: blue; font-size: 28; font-weight: bold">{{ item.yearVolume }}</text>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

const shishiArr = ref([
	{
		gas: '气井气',
		dailyVolume: '',
		yearVolume: ''
	},
	{
		gas: '伴生气',
		dailyVolume: '',
		yearVolume: ''
	},
	{
		gas: '外部气',
		dailyVolume: '',
		yearVolume: ''
	},
	{
		gas: '站输差',
		dailyVolume: '',
		yearVolume: ''
	},
	{
		gas: '线输差',
		dailyVolume: '',
		yearVolume: ''
	},
	{
		gas: '综合输差',
		dailyVolume: '',
		yearVolume: ''
	}
]);

onMounted(() => {
	getJinriShengchansj();
	getYearShengchansj();
});

const strDate = ref('');

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

// 计算属性自动分组
const groupedData = computed(() => {
	const groups = [];
	for (let i = 0; i < shishiArr.value.length; i += 3) {
		groups.push(shishiArr.value.slice(i, i + 3));
	}
	return groups;
});
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) {
							// if (item.gas.includes('线')) {
							// 	item.dailyVolume = itemjinri.totalGas.toFixed(4);
							// } else {
							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 (!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>
// .container {
// 	padding: 20rpx;
// 	background-color: #f8f8f8;
// 	min-height: 100vh;
// }

.content {
	padding: 0 30rpx 20rpx 30rpx;
}

.card-content {
	padding-right: 5px;
}

.data-row {
	margin-bottom: 10rpx;
}

.value-group {
	background-color: aliceblue;
	display: flex;
	flex-direction: column;
	border-color: #ff00ff;
	gap: 5px;
}
.uni-col {
	margin-right: 10px;
	background-color: #f8f8f8;
	border-radius: 15rpx;
}
.wrapper {
	padding: 0 30rpx;
	// transform: translateY(-50rpx);

	.onduty {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		padding: 20rpx 24rpx 24rpx 24rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			background-size: 44rpx 12rpx;
			background-repeat: no-repeat;
			background-position: left bottom;
		}

		.info {
			background: #f8f8f8;
			border-radius: 8rpx;
			text-align: left;
			width: 642rpx;
			margin-top: 23rpx;

			.info_title {
				font-size: 24rpx;
				color: #333333;
				padding: 24rpx 0;
				border-bottom: 1px solid #efefef;

				view {
					flex: 1;
				}
			}

			.data_box {
				font-size: 24rpx;
				padding-bottom: 24rpx;
				color: #888888;

				.first {
					font-weight: bold;
					color: #333333;
				}

				.data {
					margin-top: 23rpx;

					view {
						flex: 1;
					}
				}
			}
		}
	}

	.more {
		font-size: 24rpx;
		color: #999999;
		text-align: right;

		image {
			width: 10rpx;
			height: 18rpx;
		}
	}

	.list_wrapper {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		padding: 26rpx 24rpx 24rpx 24rpx;
		position: relative;
		margin-top: 30rpx;
		width: 642rpx;

		&::after {
			position: absolute;
			top: 100rpx;
			left: 0;
			content: ' ';
			width: 100%;
			height: 1px;
			background-color: #efefef;
		}

		.zhidu {
			font-size: 24rpx;
			color: #666666;
			justify-content: flex-end;
			padding-top: 40rpx;

			view {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;

				&:first-child {
					margin-right: 40rpx;
				}
			}

			.active {
				position: relative;
				color: #3179d6;

				&::after {
					content: ' ';
					width: 120rpx;
					height: 60rpx;
					border-radius: 60rpx;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					position: absolute;
					background-color: rgba(49, 121, 214, 0.1);
				}
			}
		}

		.list_title {
			text-align: center;
			padding-bottom: 29rpx;
			font-size: 32rpx;
			color: #666666;

			.active {
				position: relative;
				color: #3179d6;

				&::after {
					content: ' ';
					width: 120rpx;
					height: 70rpx;
					border-radius: 70rpx;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					position: absolute;
					background-color: rgba(49, 121, 214, 0.1);
				}
			}
		}

		.list_box {
			margin-top: 24rpx;

			.list {
				margin-bottom: 24rpx;
				padding: 30rpx 30rpx 35rpx 30rpx;
				// width: 570rpx;
				background: #f8f8f8;
				border-radius: 8rpx;

				.topic {
					font-size: 28rpx;
					color: #333333;
				}

				.time_Box {
					font-size: 24rpx;
					color: #888888;
					margin-top: 20rpx;

					.time {
						margin-right: 62rpx;
					}

					.look {
						position: relative;

						&::before {
							position: absolute;
							left: -30rpx;
							top: 50%;
							transform: translateY(-50%);
							content: ' ';
							width: 2rpx;
							height: 20rpx;
							background: #999999;
						}
					}

					image {
						width: 28rpx;
						height: 22rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}
}
</style>