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

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

		</view>
		<view class="content">
			<view class="info f-col aic">
				<view class="item_box">
					<dataCom title="实时输差" :list="shishiArr"></dataCom>
					<dataCom title="偏远计量点" :list="shishiArr"></dataCom>
					<dataCom title="生产实时数据" :list="productArr"></dataCom>

					<view class="item">
						<view class="title_box other f-row aic jcb">
							<view class="title">
								其他信息
							</view>
						</view>
						<view class="other_box f-row aic">
							<view class="data" v-for="other,i in otherArr" :key="i" @click="jump(other.path)">
								<view class="f-col aic">
									<image :src="other.img" mode=""></image>
									<view class="">
										{{other.text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		indexChartScdtDataApi
	} from '@/api/api.js';
	import {
		beforeJump
	} from '@/utils/index.js';
	import {
		useStore
	} from '@/store';
	const store = useStore();
	import dataCom from '@/component/dataCom.vue';
	const shishiArr = [{
		gas: '今日进气总量',
		dailyVolume: '28392'
	}, {
		gas: '今日进气总量',
		dailyVolume: '28392'
	}, {
		gas: '今日输差百分数',
		dailyVolume: '0.32'
	}, {
		gas: '实时进气总量',
		dailyVolume: '28392'
	}, {
		gas: '实时进气总量',
		dailyVolume: '28392'
	}, {
		gas: '实时输差百分数',
		dailyVolume: '0.32'
	}, ]
	const productArr = ref([])
	let otherArr
	onLoad(() => {
		indexChartScdtData()
	})
	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>
	page {
		background-color: #F8F8F8;
	}
</style>
<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;
	}

	.content {
		padding: v-bind(cusnavbarheight) 0 42rpx 0;
	}

	.info {
		.item_box {

			.item {
				width: 690rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
				border-radius: 16rpx;
				padding: 30rpx 0;
				margin-top: 24rpx;

				.title_box {
					padding: 0 30rpx;
					margin-bottom: -20rpx;
				}

				.title {
					font-size: 28rpx;
					color: #333333;
					background-image: url('../../static/index/line.png');
					background-size: 44rpx 13rpx;
					background-repeat: no-repeat;
					background-position: left bottom;

				}

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

					text {
						margin-right: 6rpx;
					}
				}

				.data_box {
					.data {
						width: 33.33%;
						margin-top: 60rpx;
					}

					flex-wrap: wrap;

					view {
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 8rpx;
					}

					text {
						font-size: 24rpx;
						color: #333333;
					}
				}

				.other {
					margin-bottom: -10rpx;
				}

				.other_box {
					flex-wrap: wrap;

					.data {
						width: 25%;
						margin-top: 40rpx;
						font-size: 28rpx;
						color: #333333;

						image {
							width: 98rpx;
							height: 98rpx;
							margin-bottom: 20rpx;
						}
					}
				}
			}
		}
	}
</style>