TSYWXT-CLOUD-APP/pages/realdata/rtugrounddatadetail.vue

<!--
 * @Title: 
 * @Description: 墒情详情数据
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" status-bar left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view>
			<uni-table ref="table" :loading="loading" border stripe type="" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="240" align="center">含水量</uni-th>
					<uni-th align="center">数值</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in tableData" :key="index">
					<uni-td>
						<view style="text-align: center;">{{ item.name }}</view>
					</uni-td>
					<uni-td align="center">
						<view v-if="item.value" style="text-align: center;color: coral;">{{ item.value }}</view>
						<view v-else style="text-align: center;color: coral;">--</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import http from '@/http/api.js';
	export default {
		components: {},
		onLoad(option) {
			this.selectedIndexs = [];
			this.id = option.id;
			this.getData();
		},
		data() {
			return {
				id: '',
				title: '墒情数据详情',
				tableData: [],
				loading: false,
			}
		},
		computed: {},
		onShow() {},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取数据
			getData() {
				let that = this;
				this.loading = true
				let params = {};
				params['id'] = this.id;
				http.request({
					url: '/galaxy-business/rtu/data/ground/detail',
					method: 'GET',
					data: params,
				}).then(res => {
					if (res.data != null) {
						let values = [];
						let v1 = {
							'name': '垂线平均含水量',
							'value': res.data.vtavslm
						};
						values.push(v1);
						let v2 = {
							'name': '表层含水量',
							'value': res.data.srlslm
						};
						values.push(v2);
						let slm10 = {
							'name': '10CM深度含水量',
							'value': res.data.slm10
						};
						values.push(slm10);
						let slm20 = {
							'name': '20CM深度含水量',
							'value': res.data.slm20
						};
						values.push(slm20);
						let slm30 = {
							'name': '30CM深度含水量',
							'value': res.data.slm30
						};
						values.push(slm30);
						let slm40 = {
							'name': '40CM深度含水量',
							'value': res.data.slm40
						};
						values.push(slm40);
						let slm60 = {
							'name': '60CM深度含水量',
							'value': res.data.slm60
						};
						values.push(slm60);
						let slm80 = {
							'name': '80CM深度含水量',
							'value': res.data.slm80
						};
						values.push(slm80);
						let slm100 = {
							'name': '100CM深度含水量',
							'value': res.data.slm100
						};
						values.push(slm100);
						that.tableData = values;
						that.total = values.length;
						console.log('data', values);
					}
					this.loading = false
				}).catch(err => {
					console.log(err)
					this.loading = false
				})
			},
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
		overflow: hidden;
	}
</style>