uni-zhihuikuangshan/pages/production/jinfeng/substation/substation.vue

<template>
	<view>
		<view class="switch">
			<view class="img">
				<image src="./img/top.png" mode="widthFix"></image>
			</view>
			<view class="content" v-if="data">
				<view class="item" v-for="(item,index) in data.switch">
					<view class="box" :style="{backgroundColor: item.value?'#00FD05':''}"></view>
				</view>
			</view>
		</view>

		<view class="table">
			<view class="title">
				<view class="icon">
					<image src="./icon/canshu.png" mode=""></image>
				</view>
				<view class="text">运行参数</view>
			</view>

			<uni-table border emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" style="vertical-align: middle;">·</uni-th>
					<uni-th align="center" style="vertical-align: middle;" v-for="(item,index) in data.power_parameter">{{item.label}}</uni-th>
				</uni-tr>

				<uni-tr v-for="(item,index) in data.power_parameter[0].data">
					<uni-td align="center" style="vertical-align: middle;">{{item.label}}</uni-td>
					<template v-for="(item_2,index_2) in data.power_parameter">
						<template v-for="(item_3,index_3) in item_2.data" v-if="index_3 == 0">
							<uni-td align="center" style="vertical-align: middle;">{{item_3.value}}</uni-td>
						</template>
					</template>
				</uni-tr>

			</uni-table>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mine_code: "",
				system_type: "",

				// 数据刷新定时器
				data_timer: {},
				data: null
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.name
			})
			this.mine_code = option.mine_code
			this.system_type = option.system_type

			this.get_data()
			this.data_timer = setInterval(()=>{
				this.get_data()
			},5000)
		},
		onUnload() {
			clearInterval(this.data_timer)
		},
		methods: {
			get_data() {
				if (this.mine_code == "jinfeng") {
					this.$api.opcdata_getTurboData({
						mine_code: this.mine_code,
						system_type: this.system_type
					}).then((res) => {
						this.data = res.data.sys_point
						console.log(this.data)
					})
				} else {
					this.$api.unified_automation_system({
						mine_code: this.mine_code,
						system_type: this.system_type
					}).then((res) => {
						this.data = res.data
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #0B163B;
		box-sizing: border-box;
		padding: 30rpx 10rpx;
	}

	.switch {
		position: relative;

		.img {
			text-align: center;

			image {
				width: 640rpx;
			}
		}

		.content {
			.item {
				position: absolute;
				top: 168rpx;
				left: 50rpx;

				.box {
					width: 34rpx;
					height: 82rpx;
					background-color: red;
				}
			}

			.item:nth-child(2) {
				left: 100rpx;
			}

			.item:nth-child(3) {
				left: 148rpx;
			}

			.item:nth-child(4) {
				left: 200rpx;
			}

			.item:nth-child(5) {
				left: 262rpx;
			}

			.item:nth-child(6) {
				left: 326rpx;
			}

			.item:nth-child(7) {
				left: 390rpx;
			}

			.item:nth-child(8) {
				left: 454rpx;
			}

			.item:nth-child(9) {
				left: 534rpx;
			}

			.item:nth-child(10) {
				left: 590rpx;
			}

			.item:nth-child(11) {
				left: 648rpx;
			}
		}
	}

	.table {
		margin-top: 30rpx;

		.title {
			margin: 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;

			width: 230rpx;
			height: 60rpx;
			background-image: url(./icon/border.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.icon {
				margin-right: 10rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.text {
				color: #00FFF6;
				font-size: 30rpx;
			}
		}

		/deep/.uni-table {
			background-color: #06102B;
			min-width: 2600rpx !important;
			.uni-table-th {
				color: #3271A4;
			}

			.uni-table-tr {
				.uni-table-th:first-child {
					position: fixed;
					width: 140rpx;
					background-color: #06102B;
				}
				.uni-table-td:first-child {
					color: #3271A4;
					position: fixed;
					width: 140rpx;
					background-color: #06102B;
				}
				
				.uni-table-th:nth-child(2) {
					padding-left: 140rpx;
				}
				.uni-table-td:nth-child(2) {
					padding-left: 140rpx;
				}
			}

			.uni-table-td {
				color: #EDE20D;
				width: 240rpx;
			}

			.table--border {
				border-color: #3271A4;
			}
		}

		/deep/.table--border {
			border-color: #3271A4;
		}
	}
</style>