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

<template>
	<view :class="{'gray':store.isgray==1}">
		<view class="container">
			<uni-card class="main-card" :is-link="false">
				<uni-title title="气产量" type="h3" color="blue" />
				<view class="card-content">
					<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="8">
								<uni-title :title="item.gas" type="h5" class="data-label" />
								<view class="value-group">
									<text class="value">今日量：{{ item.dailyVolume }}</text>
									<text class="value">年累计：{{ item.dailyVolume }}</text>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		queryJinriShengchansj
	} from "@/api/shengchan.js"
	import {
		formatDate
	} 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()
	})

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

	const queryParms = 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();
		queryParms.rqDate = formatDate(now);
		queryParms.pageSize = 100
		queryJinriShengchansj(queryParms).then((res) => {
			if (res.success) {
				console.log(res.result.records)
				dataJinri.value = res.result.records;
				dataJinriSum.value = sumByGas(dataJinri.value)
				console.log(dataJinriSum.value, shishiArr.value)
				try {
					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);
								}
							}

						})
					})
				} catch (error) {
					console.log(error)

				}

				console.log(dataJinriSum.value, shishiArr.value)
			}
		})
	}

	function sumByGas(records) {
		const summaryMap = {};
		records.forEach(record => {
			const gas = record.gas;
			if (!summaryMap[gas]) {
				summaryMap[gas] = {
					gas: gas,
					rq: 0,
					sq: 0,
					totalGas: 0
				};
			}
			summaryMap[gas].rq += record.rq || 0;
			summaryMap[gas].sq += record.sq || 0;
			summaryMap[gas].totalGas += record.totalGas || 0;
		});
		return Object.values(summaryMap);
	}

	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = (statusHeight + 44) + "px";
	const indexChartScdtData = () => {
		indexChartScdtDataApi().then((res) => {
			if (res.success) {
				productArr.value = handleData(res.result.today)
				otherArr = [{
					text: '安全管理',
					img: '../../static/tab/anquan.png',
					path: '/pages/safe/manage'
				}, {
					text: '生产数据',
					img: '../../static/tab/product.png',
					path: `/pages/product/index?shishi=${JSON.stringify(shishiArr)}&product=${JSON.stringify(productArr.value)}`
				}, {
					text: '运输管理',
					img: '../../static/tab/yunshu.png',
					path: ''
				}, {
					text: '设备台账',
					img: '../../static/tab/taizhang.png',
					path: ''
				}, {
					text: '车辆派遣',
					img: '../../static/tab/cheliang.png',
					path: ''
				}, {
					text: '事项审批',
					img: '../../static/tab/shenpi.png',
					path: ''
				}]
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	const handleData = (arr) => {
		let arrMap = new Map()
		arr.forEach(el => {
			if (arrMap.has(el.gas)) {
				let obj = arrMap.get(el.gas)
				arrMap.set(el.gas, {
					...el,
					dailyVolume: Number(el.dailyVolume + +obj.dailyVolume).toFixed(4)
				})
			} else {
				arrMap.set(el.gas, el)
			}
		})
		return [...arrMap.values()]
	}
	const jump = (url) => {
		beforeJump(url, () => {
			if (!url) return
			uni.navigateTo({
				url
			})
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.main-card {
		border-radius: 20rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx;
	}

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

	.value-group {
		display: flex;
		flex-direction: column;
		gap: 5rpx;
	}

	/* 覆盖uni-col默认样式 */
	.uni-col {
		padding: 15rpx;
		background-color: #f8f8f8;
		border-radius: 15rpx;
	}
</style>