diff --git a/pages.json b/pages.json
index a9290f3..f8b6a3c 100644
--- a/pages.json
+++ b/pages.json
@@ -176,6 +176,15 @@
 				// "navigationBarTextStyle": "white"
 			}
 		},
+		{
+			"path": "pages/views/shengchan/ribaoshuju/rbsjLsxq",
+			"style": {
+				// "navigationStyle": "custom"
+				"navigationBarTitleText": "历史详情",
+				"enablePullDownRefresh": false,
+				"navigationBarTextStyle": "white"
+			}
+		},
 		{
 			"path": "pages/userlist/index",
 			"style": {
diff --git a/pages/product/NatrueGas/index.vue b/pages/product/NatrueGas/index.vue
deleted file mode 100644
index c3d2a27..0000000
--- a/pages/product/NatrueGas/index.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<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>
diff --git a/pages/product/index.vue b/pages/product/index.vue
deleted file mode 100644
index 2526a18..0000000
--- a/pages/product/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-	<view>
-		<view class="nav">生产经营数据</view>
-		<view class="placeholder"></view>
-		<ng-data></ng-data>
-	</view>
-</template>
-
-<script setup>
-const res = wx.getSystemInfoSync();
-const statusHeight = res.statusBarHeight; //状态栏高度
-const cusnavbarheight = statusHeight + 44 + 'px';
-import ngData from './NatrueGas/index.vue';
-</script>
-
-<style lang="scss" scoped>
-.nav {
-	width: calc(100% - 60rpx);
-	padding: 0 30rpx;
-	height: v-bind(cusnavbarheight);
-
-	font-size: 24rpx;
-	color: #ffffff;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 99;
-	background-image: url('../../static/my/navbg.png');
-	background-repeat: no-repeat;
-	background-size: 750rpx 458rpx;
-}
-.placeholder {
-	height: v-bind(cusnavbarheight);
-}
-</style>
diff --git a/pages/views/shengchan/ribaoshuju/rbsjLsxq.vue b/pages/views/shengchan/ribaoshuju/rbsjLsxq.vue
new file mode 100644
index 0000000..a57cbad
--- /dev/null
+++ b/pages/views/shengchan/ribaoshuju/rbsjLsxq.vue
@@ -0,0 +1,20 @@
+<template>
+	<view>
+		<cxc-szcx-dateRangeSelect v-model="dateRange"></cxc-szcx-dateRangeSelect>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, nextTick, watchEffect } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+const aaa = ref({});
+const dateRange = ref([]);
+
+onLoad((options) => {
+	console.log(options);
+	aaa.value = options.data;
+});
+</script>
+
+<style></style>
diff --git a/pages/views/shengchan/ribaoshuju/trqRbsj.vue b/pages/views/shengchan/ribaoshuju/trqRbsj.vue
index 345c1e9..9eba9f7 100644
--- a/pages/views/shengchan/ribaoshuju/trqRbsj.vue
+++ b/pages/views/shengchan/ribaoshuju/trqRbsj.vue
@@ -1,6 +1,11 @@
 <template>
 	<view :class="{ gray: store.isgray == 1 }">
-		<view style="margin-left: 20rpx;"> <uni-title :title="strDate + '：生产数据'" type="h1" color="red" />
+		<view style="margin-left: 20rpx"><uni-title :title="strDate + '：生产数据'" type="h1" color="red" /></view>
+		<view class="progress-bar">
+			<!-- 动态设置宽度和颜色 -->
+			<view class="progressTime" :style="{ width: `${timePercent}%`, 'background-color': '#00aaff' }"></view>
+			<!-- 显示带符号的百分比 -->
+			<text class="progress-text">全年时间进度:{{ timePercent }}%</text>
 		</view>
 		<view class="container">
 			<view v-for="(item, index) in shishiArr" :key="index" class="card-item" @click="handleCardClick(item.gas)">
@@ -14,6 +19,12 @@
 						<text class="label">年累计</text>
 						<text class="value">{{ 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>
@@ -25,424 +36,476 @@
 					<uni-icons type="closeempty" size="24" color="#666" @click="closePopup"></uni-icons>
 				</view>
 
-				<scroll-view scroll-X="true" scroll-Y="true" class="table-container">
-					<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="th">年累计 </view>
-						</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 }}</view>
+						<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">{{ formatNumber(item.totalGas) }}</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>
-					</view>
-				</scroll-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
-	} from '@/api/shengchan.js';
-	import {
-		formatDate,
-		getDateAfterDays
-	} from '@/utils/dateTime.js';
-	import {
-		beforeJump
-	} from '@/utils/index.js';
-	import {
-		useStore
-	} from '@/store';
+import { ref, onMounted, computed, nextTick, watchEffect } 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';
+import { getYearProgress } from '@/utils/dateTime.js';
 
-	const store = useStore();
+const store = useStore();
 
-	const shishiArr = ref([{
-			gas: '气井气',
-			dailyVolume: '',
-			yearVolume: ''
-		},
-		{
-			gas: '伴生气',
-			dailyVolume: '',
-			yearVolume: ''
-		},
-		{
-			gas: '外部气',
-			dailyVolume: '',
-			yearVolume: ''
-		},
-		{
-			gas: '站输差',
-			dailyVolume: '',
-			yearVolume: ''
-		},
-		{
-			gas: '线输差',
-			dailyVolume: '',
-			yearVolume: ''
-		},
-		{
-			gas: '综合输差',
-			dailyVolume: '',
-			yearVolume: ''
+const shishiArr = ref([
+	{
+		gas: '气井气',
+		dailyVolume: '',
+		yearVolume: '',
+		yearPlan: '7500',
+		yearPerCent: ''
+	},
+	{
+		gas: '伴生气',
+		dailyVolume: '',
+		yearVolume: '',
+		yearPlan: '',
+		yearPerCent: ''
+	},
+	{
+		gas: '外部气',
+		dailyVolume: '',
+		yearVolume: '',
+		yearPlan: '',
+		yearPerCent: ''
+	},
+	{
+		gas: '站输差',
+		dailyVolume: '',
+		yearVolume: '',
+		yearPlan: '',
+		yearPerCent: ''
+	},
+	{
+		gas: '线输差',
+		dailyVolume: '',
+		yearVolume: '',
+		yearPlan: '',
+		yearPerCent: ''
+	},
+	{
+		gas: '综合输差',
+		dailyVolume: '',
+		yearVolume: '',
+		yearPlan: '100',
+		yearPerCent: ''
+	}
+]);
+
+const dataJinri = ref([]);
+const dataJinriSum = ref([]);
+const dataJinriSumUnit = ref([]);
+const selectedGas = ref('');
+const filteredData = ref([]);
+const popup = ref(null);
+const timePercent = ref(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(() => {
+	getJinriShengchansj();
+	getYearShengchansj();
+	timePercent.value = getYearProgress();
+});
+
+const strDate = ref('');
+// 数字格式化
+const formatNumber = (num) => {
+	if (typeof num !== 'number') return '-';
+	return num.toFixed(4).replace(/\.?0+$/, '');
+};
+
+// 计算属性自动分组
+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;
+});
+
+// 自动计算综合输差
+watchEffect(() => {
+	const station = shishiArr.value[3]; // 站输差
+	const line = shishiArr.value[4]; // 线输差
+	const composite = shishiArr.value[5]; // 综合输差
+
+	// 日输气量计算
+	const dailyStation = parseFloat(station.dailyVolume) || 0;
+	const dailyLine = parseFloat(line.dailyVolume) || 0;
+	composite.dailyVolume = (dailyStation + dailyLine).toFixed(4);
+
+	// 年输气量计算
+	const yearStation = parseFloat(station.yearVolume) || 0;
+	const yearLine = parseFloat(line.yearVolume) || 0;
+	composite.yearVolume = (yearStation + yearLine).toFixed(4);
+	composite.yearPerCent = calcPercent(composite.yearPlan, composite.yearVolume);
+	console.log(composite);
+});
+
+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 dataJinri = ref([]);
-	const dataJinriSum = ref([]);
-	const dataJinriSumUnit = ref([]);
-	const selectedGas = ref('');
-	const filteredData = ref([]);
-	const popup = ref(null);
-	// 点击卡片处理
-	const handleCardClick = (gas) => {
-		selectedGas.value = gas;
-		filteredData.value = dataJinriSumUnit.value.filter(item => item.gas === gas);
-		popup.value.open();
-	};
-
-	// 关闭弹窗
-	const closePopup = () => {
-		popup.value.close();
-	};
-	onMounted(() => {
-		getJinriShengchansj();
-		getYearShengchansj();
 	});
+};
+const getYearShengchansj = () => {
+	const now = new Date();
+	let year = formatDate(now).split('-')[0];
+	let queryParms = {};
+	queryParms.yearStart = year;
+	queryParms.yearEnd = year;
 
-	const strDate = ref('');
-	// 数字格式化
-	const formatNumber = (num) => {
-		if (typeof num !== 'number') return '-';
-		return num.toFixed(4).replace(/\.?0+$/, '');
-	};
+	// // 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);
+							item.yearPerCent = calcPercent(item.yearPlan, item.yearVolume);
+						}
+					});
+				});
 
-	// 计算属性自动分组
-	const groupedData = computed(() => {
-		const groups = [];
-		for (let i = 0; i < shishiArr.value.length; i += 3) {
-			groups.push(shishiArr.value.slice(i, i + 3));
+				// console.log(shishiArr);
+			} catch (error) {
+				// console.log(error);
+			}
 		}
-		return groups;
 	});
-
-	// 自动计算综合输差
-	watchEffect(() => {
-		const station = shishiArr.value[3] // 站输差
-		const line = shishiArr.value[4] // 线输差
-		const composite = shishiArr.value[5] // 综合输差
-
-		// 日输气量计算
-		const dailyStation = parseFloat(station.dailyVolume) || 0
-		const dailyLine = parseFloat(line.dailyVolume) || 0
-		composite.dailyVolume = (dailyStation + dailyLine).toFixed(4)
-
-		// 年输气量计算
-		const yearStation = parseFloat(station.yearVolume) || 0
-		const yearLine = parseFloat(line.yearVolume) || 0
-		composite.yearVolume = (yearStation + yearLine).toFixed(4)
-	})
-
-
-	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(); //再获取今年以来的数据
+};
+function goHistory(val) {
+	uni.navigateTo({
+		url: '/pages/views/shengchan/ribaoshuju/rbsjLsxq?data=' + JSON.stringify(val)
+	});
+}
+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(4)); // 转为数值
+}
+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;
 		});
-	};
-	const getYearShengchansj = () => {
-		const now = new Date();
-		let year = formatDate(now).split('-')[0];
-		let queryParms = {};
-		queryParms.yearStart = year;
-		queryParms.yearEnd = year;
+		return Object.values(summaryMap);
+	} catch (error) {
+		//TODO handle the exception
+		// console.log(error);
+	}
+}
 
-		// // 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]) {
+function sumByUnit(records) {
+	// console.log(records);
+	const summaryMap = {};
+	try {
+		records.forEach((record) => {
+			const unit = record.unit;
+			if (!unit.includes('区')) {
+				if (!summaryMap[unit]) {
 					// 初始化该 gas 类型的汇总对象
-					summaryMap[gas] = {
-						gas: gas,
+					summaryMap[unit] = {
+						unit: unit,
+						gas: record.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);
-		}
-	}
+				// 无论是否是第一次遇到该 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;
+			}
+		});
 
-	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);
-		}
+		return Object.values(summaryMap);
+	} catch (error) {
+		//TODO handle the exception
+		// console.log(error);
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.container {
+.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;
-		flex-wrap: wrap;
-		padding: 20rpx;
-		gap: 20rpx;
+		border-bottom: 2rpx solid #e8e8e8;
+
+		&.header {
+			background-color: #fafafa;
+			font-weight: 600;
+		}
+
+		&.even {
+			background-color: #f8f8f8;
+		}
 	}
 
-	.popup-content {
-		padding: 30rpx;
-		max-height: 70vh;
+	.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;
 	}
 
-	.popup-header {
+	.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: #ffffff;
+	border-radius: 16rpx;
+	padding: 10rpx;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+	.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: 30rpx;
-		padding-bottom: 20rpx;
-		border-bottom: 2rpx solid #eee;
+		margin-bottom: 10rpx;
 
-		.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;
-			}
+		&:last-child {
+			margin-bottom: 0;
 		}
 
-		.th,
-		.td {
-			flex: 1;
-			min-width: 80rpx;
-			padding: 10rpx;
-			font-size: 20rpx;
-			color: #333;
-			text-align: center;
-			white-space: nowrap;
+		.label {
+			font-size: 24rpx;
+			color: #666;
 		}
 
-		.th1,
-		.td1 {
-			flex: 1;
-			max-width: 40rpx;
-			padding: 10rpx;
-			font-size: 20rpx;
-			color: #333;
-			text-align: center;
-			white-space: nowrap;
-		}
-
-		.th {
-			background-color: #f0f0f0;
-		}
-
-		.td.negative {
-			color: #ff4444;
+		.value {
+			font-size: 28rpx;
+			color: #0000ff;
 			font-weight: 500;
 		}
 	}
+}
 
-	.empty {
-		padding: 40rpx;
-		text-align: center;
-		color: #888;
-		font-size: 16rpx;
-	}
+.progress-item {
+	margin-bottom: 20px;
+}
 
-	.card-item {
-		flex: 1 1 200rpx; // 基础宽度300rpx，自动伸缩   selectedGas  formatNumber
-		min-width: 240rpx;
-		max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
+.progress-bar {
+	position: relative;
+	height: 20px;
+	background: #f0f0f0;
+	border-radius: 10px;
+	overflow: hidden;
+}
 
-		@media (min-width: 768px) {
-			max-width: calc(33.33% - 14rpx); // 大屏显示3列
-		}
-	}
+.progress {
+	height: 100%;
+	transition: all 0.3s;
+}
+.progressTime {
+	height: 100%;
+	transition: all 0.3s;
+}
 
-	.card {
-		background: #ffffff;
-		border-radius: 16rpx;
-		padding: 10rpx;
-		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-
-		.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;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+.progress-text {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	color: red; /* 保持红色 */
+	font-size: 12px;
+	font-weight: bold;
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 提升可读性 */
+}
+</style>
diff --git a/pages/views/shengchan/ribaoshuju/yyRbsj.vue b/pages/views/shengchan/ribaoshuju/yyRbsj.vue
index eea775c..b503dc0 100644
--- a/pages/views/shengchan/ribaoshuju/yyRbsj.vue
+++ b/pages/views/shengchan/ribaoshuju/yyRbsj.vue
@@ -18,6 +18,19 @@
 						<text class="label">年累计</text>
 						<text class="value">{{ item.nl || '-' }}</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>
@@ -36,13 +49,12 @@
 							<view class="th">序号</view>
 							<view class="th">名称</view>
 							<view class="th">日油量</view>
-							<view class="th">月累计 </view>
-							<view class="th">年累计 </view>
+							<view class="th">月累计</view>
+							<view class="th">年累计</view>
 						</view>
 
 						<!-- 表格内容 -->
-						<view class="tr" v-for="(item, index) in dataJinri" :key="index"
-							:class="{ even: index % 2 === 0 }">
+						<view class="tr" v-for="(item, index) in dataJinri" :key="index" :class="{ even: index % 2 === 0 }">
 							<view class="td">{{ index }}</view>
 							<view class="td">{{ item.dw }}</view>
 							<view class="td">
@@ -55,272 +67,284 @@
 						</view>
 
 						<!-- 空数据提示 -->
-						<view v-if="!dataJinri.length" class="empty">
-							暂无相关数据
-						</view>
+						<view v-if="!dataJinri.length" class="empty">暂无相关数据</view>
 					</view>
 				</scroll-view>
 			</view>
 		</uni-popup>
-
 	</view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		onMounted,
-		computed,
-		nextTick,
-		watchEffect
-	} from 'vue';
-	import {
-		onLoad
-	} from '@dcloudio/uni-app';
-	import {
-		queryJinriYuanyouShengchansj
-	} from '@/api/shengchan.js';
-	import {
-		formatDate,
-		getDateAfterDays
-	} from '@/utils/dateTime.js';
-	import {
-		beforeJump
-	} from '@/utils/index.js';
-	import {
-		useStore
-	} from '@/store';
+import { ref, onMounted, computed, nextTick, watchEffect } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { queryJinriYuanyouShengchansj } 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 store = useStore();
+import dataCom from '@/bpm/dataCom.vue';
 
-	const shishiArr = ref([{
-			gas: '原油产量',
-			rcwy: '',
-			yl: '',
-			nl: ''
-		},
-
-	]);
-
-	const dataJinri = ref([]);
-	const dataJinriSum = ref([]);
-	const popup = ref(null);
-	// 点击卡片处理
-	const handleCardClick = () => {
-		popup.value.open();
-	};
-
-	// 关闭弹窗
-	const closePopup = () => {
-		popup.value.close();
-	};
-	onMounted(() => {
-		getJinriYuanyouShengchansj();
-		// getYearShengchansj();
-	});
-
-	const strDate = ref('');
-	// 数字格式化
-	const formatNumber = (num) => {
-		if (typeof num !== 'number') return '-';
-		return num.toFixed(4).replace(/\.?0+$/, '');
-	};
-
-
-
-
-
-	const getJinriYuanyouShengchansj = () => {
-		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 = [];
-		queryParms.scrq = strDate.value;
-		queryParms.pageSize = 100;
-		console.log(queryParms);
-		queryJinriYuanyouShengchansj(queryParms).then((res) => {
-			if (res.success) {
-				console.log(res);
-				dataJinri.value = res.result.records;
-				dataJinriSum.value = sumByOil(dataJinri.value); //包含gas  unit  rq  cq  totalGas
-
-
-				console.log(dataJinriSum.value);
-
-				nextTick();
-				shishiArr.value.forEach((item) => {
-					dataJinriSum.value.forEach((itemjinri) => {
-
-						item.rcwy = itemjinri.rcwy.toFixed(4);
-						item.nl = itemjinri.nl.toFixed(4);
-						item.yl = itemjinri.yl.toFixed(4);
-
-					});
-				});
-				// getYearShengchansj(); //再获取今年以来的数据
-			}
-		});
-	};
-
-
-	function sumByOil(records) {
-		console.log(records);
-		const summaryMap = {};
-		try {
-			records.forEach((record) => {
-				const gas = record.gas;
-				if (!summaryMap[gas]) {
-					// 初始化该 gas 类型的汇总对象
-					summaryMap[gas] = {
-						rcwy: 0,
-						yl: 0,
-						nl: 0
-					};
-				}
-				// 无论是否是第一次遇到该 gas 类型，都进行累加操作
-				summaryMap[gas].rcwy += record.rcwy || 0;
-				summaryMap[gas].yl += record.yl || 0;
-				summaryMap[gas].nl += record.nl || 0
-			});
-			return Object.values(summaryMap);
-		} catch (error) {
-			//TODO handle the exception
-			console.log(error);
-		}
+const shishiArr = ref([
+	{
+		gas: '原油产量',
+		rcwy: '',
+		yl: '',
+		nl: '',
+		yearPlan: '1500',
+		yearPerCent: ''
 	}
+]);
+
+const dataJinri = ref([]);
+const dataJinriSum = ref([]);
+const popup = ref(null);
+// 点击卡片处理
+const handleCardClick = () => {
+	popup.value.open();
+};
+
+// 关闭弹窗
+const closePopup = () => {
+	popup.value.close();
+};
+onMounted(() => {
+	getJinriYuanyouShengchansj();
+	// getYearShengchansj();
+});
+
+const strDate = ref('');
+// 数字格式化
+const formatNumber = (num) => {
+	if (typeof num !== 'number') return '-';
+	return num.toFixed(4).replace(/\.?0+$/, '');
+};
+
+const getJinriYuanyouShengchansj = () => {
+	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 = [];
+	queryParms.scrq = strDate.value;
+	queryParms.pageSize = 100;
+	console.log(queryParms);
+	queryJinriYuanyouShengchansj(queryParms).then((res) => {
+		if (res.success) {
+			console.log(res);
+			dataJinri.value = res.result.records;
+			dataJinriSum.value = sumByOil(dataJinri.value); //包含gas  unit  rq  cq  totalGas
+			// console.log(dataJinriSum.value);
+			nextTick();
+			shishiArr.value.forEach((item) => {
+				dataJinriSum.value.forEach((itemjinri) => {
+					item.rcwy = itemjinri.rcwy.toFixed(4);
+					item.nl = itemjinri.nl.toFixed(4);
+					item.yl = itemjinri.yl.toFixed(4);
+					item.yearPerCent = calcPercent(item.yearPlan, item.nl);
+				});
+			});
+			// getYearShengchansj(); //再获取今年以来的数据
+		}
+	});
+};
+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(1)); // 转为数值
+}
+function sumByOil(records) {
+	console.log(records);
+	const summaryMap = {};
+	try {
+		records.forEach((record) => {
+			const gas = record.gas;
+			if (!summaryMap[gas]) {
+				// 初始化该 gas 类型的汇总对象
+				summaryMap[gas] = {
+					rcwy: 0,
+					yl: 0,
+					nl: 0
+				};
+			}
+			// 无论是否是第一次遇到该 gas 类型，都进行累加操作
+			summaryMap[gas].rcwy += record.rcwy || 0;
+			summaryMap[gas].yl += record.yl || 0;
+			summaryMap[gas].nl += record.nl || 0;
+		});
+		return Object.values(summaryMap);
+	} catch (error) {
+		//TODO handle the exception
+		console.log(error);
+	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.container {
+.container {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 20rpx;
+	gap: 20rpx;
+}
+
+.popup-content {
+	padding: 30rpx;
+	max-height: 70vh;
+}
+
+.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;
-		flex-wrap: wrap;
-		padding: 20rpx;
-		gap: 20rpx;
+		border-bottom: 2rpx solid #e8e8e8;
+
+		&.header {
+			background-color: #fafafa;
+			font-weight: 600;
+		}
+
+		&.even {
+			background-color: #f8f8f8;
+		}
 	}
 
-	.popup-content {
-		padding: 30rpx;
-		max-height: 70vh;
+	.th,
+	.td {
+		flex: 1;
+		min-width: 80rpx;
+		padding: 10rpx;
+		font-size: 20rpx;
+		font-weight: 500;
+		color: #333;
+		text-align: center;
+		white-space: nowrap;
 	}
 
-	.popup-header {
+	.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: 200rpx;
+	max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
+
+	@media (min-width: 768px) {
+		max-width: calc(33.33% - 14rpx); // 大屏显示3列
+	}
+}
+
+.card {
+	background: #ffffff;
+	border-radius: 16rpx;
+	padding: 10rpx;
+	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+	.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: 30rpx;
-		padding-bottom: 20rpx;
-		border-bottom: 2rpx solid #eee;
+		margin-bottom: 10rpx;
 
-		.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;
-			}
+		&:last-child {
+			margin-bottom: 0;
 		}
 
-		.th,
-		.td {
-			flex: 1;
-			min-width: 80rpx;
-			padding: 10rpx;
-			font-size: 20rpx;
-			font-weight: 500;
-			color: #333;
-			text-align: center;
-			white-space: nowrap;
+		.label {
+			font-size: 24rpx;
+			color: #666;
 		}
 
-		.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: 200rpx;
-		max-width: calc(50% - 10rpx); // 最大不超过容器一半（考虑间距）
-
-		@media (min-width: 768px) {
-			max-width: calc(33.33% - 14rpx); // 大屏显示3列
-		}
-	}
-
-	.card {
-		background: #ffffff;
-		border-radius: 16rpx;
-		padding: 10rpx;
-		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
-
-		.title {
-			display: block;
+		.value {
 			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;
-			}
+			color: #0000ff;
+			font-weight: 500;
 		}
 	}
-</style>
\ No newline at end of file
+}
+.progress-item {
+	margin-bottom: 20px;
+}
+
+.progress-bar {
+	position: relative;
+	height: 20px;
+	background: #f0f0f0;
+	border-radius: 10px;
+	overflow: hidden;
+}
+
+.progress {
+	height: 100%;
+	transition: all 0.3s;
+}
+
+.progress-text {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	color: red; /* 保持红色 */
+	font-size: 12px;
+	font-weight: bold;
+	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 提升可读性 */
+}
+</style>
diff --git a/utils/dateTime.js b/utils/dateTime.js
index 9095266..8b8f8be 100644
--- a/utils/dateTime.js
+++ b/utils/dateTime.js
@@ -52,8 +52,32 @@ function getDateAfterDays(date, days) {
 	return newDate;
 }
 
+//计算当前日期占全年的进度数据
+// 示例用法
+// console.log(getYearProgress()); // 输出如 "35.42%"
+function getYearProgress() {
+	const now = new Date(); // 当前时间
+	const year = now.getFullYear();
+
+	// 关键时间点
+	const yearStart = new Date(year, 0, 1); // 当年1月1日
+	const nextYearStart = new Date(year + 1, 0, 1); // 下一年1月1日
+
+	// 计算时间差（毫秒）
+	const totalMs = nextYearStart - yearStart; // 全年总时长
+	const passedMs = now - yearStart; // 已过时长
+
+	// 计算百分比（保留2位小数）
+	const progress = ((passedMs / totalMs) * 100).toFixed(2);
+
+	return parseFloat(progress);
+}
+
+
+
 export {
 	formatDate,
 	getDateAfterDays,
-	getDaysDifference
+	getDaysDifference,
+	getYearProgress
 }
\ No newline at end of file