cxc-szcx-uniapp/pages/views/shengchan/index.vue

<template>
	<view>
		<view class="nav"></view>
		<view class="placeholder"></view>
		<view style="width: 100%; display: grid; place-items: center">
			<uni-title :title="dateDate + '：生产经营情况'" type="h1" color="blue" />
		</view>
		<view style="margin: 0 10px;">
			<uni-segmented-control style="margin-top: 10px;margin-bottom: 10px" :current="current" :values="items"
				@clickItem="onClickItem" styleType="button" activeColor="#0055ff"></uni-segmented-control>
		</view>
		<view class="content">
			<view v-show="current === 0">
				<view style="padding: 0 10px">
					<view class="progress-bartime">
						<!-- 动态设置宽度和颜色 -->
						<view class="progressTime" :style="{ width: `${timePercent}%`, 'background-color': '#0055ff' }">
						</view>
						<!-- 显示带符号的百分比 -->
						<text class="progress-text">全年时间进度:{{ timePercent }}%</text>
					</view>
				</view>
				<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
					<trq-data></trq-data>
					<yy-data></yy-data>
				</scroll-view>
			</view>
			<view v-show="current === 1">
				<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
					<sssjForm></sssjForm>
				</scroll-view>
			</view>
			<view v-show="current === 2">
				<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
					选项卡2的内容
				</scroll-view>

			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		formatDate,
		getDateAfterDays
	} from '@/utils/dateTime.js';
	import {
		getYearProgress
	} from '@/utils/dateTime.js';

	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watchEffect,
		onUnmounted
	} from 'vue';
	const items = ref(['日报数据', '实时数据', '经营数据'])
	const current = ref(0)
	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = statusHeight + 44 + 'px';

	const scrollViewHeight = ref(0); //状态栏高度


	const timePercent = ref(0);
	const dateDate = ref('');

	import trqData from './ribaoshuju/trqRbsj.vue';
	import yyData from './ribaoshuju/yyRbsj.vue';
	import sssjForm from './shishishuju/index.vue';

	function onClickItem(e) {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}

	const strDate = () => {
		const now = new Date();
		if (now.getHours() < 11) {
			return formatDate(getDateAfterDays(now, -1)); //11点之前  头一天的数据
		} else {
			return formatDate(now);
		}
	};
	onMounted(() => {
		dateDate.value = strDate();
		timePercent.value = getYearProgress();
		calculateScrollViewHeight();
		// 监听窗口大小变化事件，当窗口大小改变时重新计算高度
		window.addEventListener('resize', calculateScrollViewHeight);
	});

	onUnmounted(() => {
		// 移除窗口大小变化事件监听器
		window.removeEventListener('resize', calculateScrollViewHeight);
	});

	const calculateScrollViewHeight = () => {
		// 获取屏幕的总高度
		const screenHeight = uni.getSystemInfoSync().windowHeight;
		// 创建一个选择器查询对象
		const query = uni.createSelectorQuery();
		// 选择所有需要计算高度的元素
		query
			.select('.nav')
			.boundingClientRect();
		query
			.select('.placeholder')
			.boundingClientRect();
		query
			.select('.uni-title')
			.boundingClientRect();
		query
			.select('.uni-segmented-control')
			.boundingClientRect();
		query
			.select('.progress-bartime')
			.boundingClientRect();
		// 执行查询操作
		query.exec((res) => {
			let totalHeight = 0;
			res.forEach((element) => {
				if (element) {
					totalHeight += element.height;
				}
			});
			// 计算 scroll-view 的高度
			scrollViewHeight.value = screenHeight - totalHeight - 80;
		});
	};
</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);
	}

	.progress-bartime {
		position: relative;
		height: 25px;
		background: #f0f0f0;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.progress {
		height: 100%;
		transition: all 0.3s;
	}

	.progressTime {
		height: 100%;
		transition: all 0.3s;
		padding: 0 20px;
	}

	.progress-text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: red;
		/* 保持红色 */
		font-size: 16px;
		font-weight: bold;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		/* 提升可读性 */
	}
</style>