uni-zhihuikuangshan-2/pages/production/zaoquan/control_platform/hydrology/hydrology.vue

<template>
	<view>
		<view class="top">
			<image src="../img/top.jpg" mode="widthFix"></image>
		</view>

		<view class="container">

			<view class="info">
				<view class="item" v-for="(item,index) in info" :key="index">
					<view class="label">{{item.label}}</view>
					<view class="value">{{item.value}}</view>
				</view>
			</view>

			<view class="content">
				<view class="section">
					<view class="title">
						<view class="left">分站统计</view>
					</view>
					<view class="inner">
						<view class="charts-box">
							<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
						</view>
					</view>
				</view>

				<view class="section">
					<view class="title">
						<view class="left">近7日降雨量</view>
					</view>
					<view class="inner">
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts_2" :chartData="chartData_2" :ontouch="true" />
						</view>
					</view>
				</view>

				<view class="section" v-for="(item,index) in table" :key="index">
					<view class="title">
						<view class="left">{{item.title}}</view>
					</view>
					<view class="inner">
						<view class="table">
							<uni-table emptyText="暂无更多数据">
								<uni-tr>
									<uni-th align="center" v-for="(item_2,index_2) in item.thead"
										:key="index_2">{{item_2}}</uni-th>
								</uni-tr>
								<uni-tr v-for="(item_2,index_2) in item.tbody" :key="index_2">
									<uni-td style="text-align: center;vertical-align: middle;"
										v-for="(item_3,index_3) in item_2">{{item_3}}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
						label: "地面传感器",
						value: "92"
					},
					{
						label: "压力水位传感器",
						value: "2"
					},
					{
						label: "流量传感器",
						value: "3"
					},
					{
						label: "自动雨量站",
						value: "1"
					},
					{
						label: "地面断线传感器",
						value: "0"
					},
					{
						label: "井下断线传感器",
						value: "0"
					}
				],

				chartData: {
					series: [{
						data: []
					}]
				},
				opts: {
					legend: {
						lineHeight: 20
					}
				},
				chartData_2: {
					categories: [],
					series: [{
						name: "降雨量(mm)",
						data: []
					}]
				},
				opts_2: {
					xAxis: {
						labelCount: 5
					}
				},

				table: [{
						title: "实时数据：地面水文长观孔",
						thead: ["孔名", "含水层", "监测时间", "埋深(m)", "埋深变化量", "温度(℃)", "水位(m)"],
						tbody: [
							["BK2", "Ⅱ含水层（烧变岩）", "2024-07-17 00:00:00", "141.25", "0.01", "15.59", "1210.06"],
							["BK4", "Ⅱ含水层（烧变岩）", "2024-07-17 00:00:00", "141.25", "0.01", "15.59", "1210.06"],
							["BK5", "Ⅱ含水层（烧变岩）", "2024-07-17 00:00:00", "141.25", "0.01", "15.59", "1210.06"]
						]
					},
					{
						title: "实时数据：井下传感器",
						thead: ["传感器编号", "测点位置", "监测时间", "监测量", "监测值", "单位", "监测状态"],
						tbody: [
							["64010300100009", "湿度", "2024-07-17 15:13:00", "湿度", "24.2", "%RH", "正常"],
							["64010300100009", "湿度", "2024-07-17 15:13:00", "湿度", "24.2", "%RH", "正常"],
							["64010300100009", "湿度", "2024-07-17 15:13:00", "湿度", "24.2", "%RH", "正常"],
							["64010300100009", "湿度", "2024-07-17 15:13:00", "湿度", "24.2", "%RH", "正常"]
						]
					}
				]
			};
		},
		mounted() {
			this.getServerData()
		},
		methods: {
			getServerData() {
				// 模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "(2016款)KJ402-F系列",
								"value": 9
							}, {
								"name": "KJ402-FB-1",
								"value": 9
							}, {
								"name": "XN-流量统计分站",
								"value": 1
							}, {
								"name": "XN-水质分站",
								"value": 7
							}, {
								"name": "XPH气象站6要素",
								"value": 1
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);

				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["07-13", "07-14", "07-15", "07-16", "07-17", "07-18", "07-19"],
						series: [{
							name: "降雨量(mm)",
							data: [3.2, 3.6, 0, 0, 0, 0, 0]
						}]
					};
					this.chartData_2 = JSON.parse(JSON.stringify(res));
				}, 500);

				this.$api.zaoquan_dcs_getSupport({
					sys_code: "shuiwen"
				}).then((res) => {
					console.log(res.data)

					this.info = res.data.info
					this.table = res.data.table
					this.chartData.series = res.data.series
					this.chartData_2.categories = res.data['7day'][0].categories
					this.chartData_2.series = res.data['7day'][0].series
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.top {
		margin-top: -80rpx;

		image {
			width: 750rpx;
		}
	}

	.container {
		margin: -900rpx 0 0 0;
		position: relative;

		.info {
			margin: 40rpx 0;
			box-sizing: border-box;
			padding: 20rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 40rpx 10rpx;

			.item {
				text-align: center;
				border-right: 1rpx solid #FFFFFF80;

				.label {
					font-size: 22rpx;
					color: #FFF;
					margin-bottom: 10rpx;
				}

				.value {
					flex-wrap: wrap;
					color: #FFF600;
					font-weight: 700;
				}
			}

			.item:nth-child(3n) {
				border: none;
			}
		}


		.content {
			background-color: #F7F7F7;
			border-radius: 35rpx 35rpx 0 0;
			box-sizing: border-box;
			padding: 35rpx;

			.section {
				margin-bottom: 40rpx;
				border-radius: 14rpx;
				overflow: hidden;

				.title {
					background: linear-gradient(-90deg, #FFFFFF, #E6FAFF);

					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					box-sizing: border-box;
					padding: 24rpx;

					.left {
						border-left: 6rpx solid #33C777;
						padding-left: 10rpx;
						font-size: 34rpx;
						font-weight: 700;
						color: #343434;
					}

					.right {
						font-size: 22rpx;
						color: #3394F9;
					}
				}

				.inner {
					background-color: #FFFFFF;
					padding: 30rpx 20rpx;
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 0 40rpx;

					.charts-box {
						width: 640rpx;
						height: 550rpx;
					}

					.table {
						width: 640rpx;
						border-radius: 20rpx;
						overflow: hidden;

						/deep/.uni-table-tr {
							// background-color: #FFFFFF;
						}

						/deep/.uni-table-th {
							border: none;
							background-color: #FFFFFF;
							padding: 27rpx 20rpx;
							color: #7A7A7A;
							font-size: 28rpx;
							color: #1966E2;
							font-weight: 700;
							border-bottom: 2rpx #EBEEF5 dashed;
						}

						/deep/.uni-table-td {
							font-size: 28rpx;
							color: #010101;
							border-bottom: 2rpx #EBEEF5 dashed;
							padding: 27rpx 20rpx;
						}

						/deep/.table--border {
							border: none;
						}
					}

				}
			}
		}
	}
</style>