qsy-zdh/pages/data/driving/driving-machine/driving-machine.vue

<template>
	<view class="page-body">
		<page-header :name="'智能采煤'" :bg="'#1560e0'" :showLeft="true" @goBack="goBack()"></page-header>
		<view class="scroll-wrap">
			<view class="basic-info-wrap">
				<view class="data-wrap">
					<view class="data-item-wrap" v-for="(item, index) in dataList" :key="index">
						<view class="title">{{ item.name }}</view>
						<view class="data">{{ item.params }}</view>
					</view>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card :name="'掘进机信息'" style="margin-bottom: 30rpx;">
					<template v-slot:content>
						<view class="info-wrap">
							<view class="item-wrap">
								<view class="name">未掘进距离</view>
								<view class="data">324.8m</view>
							</view>
							<view class="item-wrap">
								<view class="name">已掘进距离</view>
								<view class="data">2344.2m</view>
							</view>
						</view>
						<view class="driving-info-wrap">
							<image src="@/static/znjj.png"/>
						</view>
					</template>
				</page-card>
				<page-card :name="'机身姿态'" :notShow="true" style="margin-bottom: 30rpx;">
					<template v-slot:content>
						<view>
							<simple-table :tableHead="tableHead" :list="bodyList"></simple-table>
						</view>
					</template>
				</page-card>
				<page-card :name="'旋臂姿态'" :notShow="true" style="margin-bottom: 30rpx;">
					<template v-slot:content>
						<view>
							<simple-table :tableHead="tableHead" :list="armList"></simple-table>
						</view>
					</template>
				</page-card>
				<page-card :name="'输入电压'" :notShow="true">
					<template v-slot:content>
						<view>
							<simple-table :tableHead="tableHead" :list="voltageList"></simple-table>
						</view>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableHead: ['名称', '参数'], // 表头名称
				dataList: [{ // 掘进机信息
					name: '工作面名称',
					params: '150201工作面胶带巷'
				},{
					name: '施工单位',
					params: '综掘二队'
				},{
					name: '生产组织模式',
					params: '二掘一修'
				},{
					name: '综掘机型号',
					params: 'EBZ200M-2A'
				},{
					name: '截割功率',
					params: '200kw'
				},{
					name: '巷道长度',
					params: '2667'
				},{
					name: '掘进断面',
					params: '23.31m²'
				},{
					name: '永久支护工艺',
					params: '锚、网、索、W钢带 桁架联合支护'
				},{
					name: '胶带机型号',
					params: 'DSJ100/40/160 胶带输送机'
				},{
					name: '胶带机控制方式',
					params: '集控'
				}],
				machineList: [{
					name: '未掘进距离',
					params: '324.8m'
				},{
					name: '已掘进距离',
					params: '2344.2m'
				}],
				bodyList: [{ // 机身姿态
					name: '俯仰角度(°)',
					params: ['-0.09']
				},{
					name: '水平角度(°)',
					params: ['91.47']
				},{
					name: '翻滚角度(°)',
					params: ['0.2']
				},{
					name: '掘进机行走速度(mm/s)',
					params: ['0']
				}],
				armList: [{ // 旋臂姿态
					name: '回旋角度(°)',
					params: ['0']
				},{
					name: '升降角度(°)',
					params: ['0']
				}],
				voltageList: [{
					name: '线线电压(V)',
					params: ['0']
				}]
			}
		},
		onLoad() {
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-body {
		.scroll-wrap {
			height: calc(100vh - 85rpx);
			overflow: scroll;

			.basic-info-wrap {
				position: relative;
				height: 810rpx;
				padding: 25rpx 35rpx 99rpx;
				background-color: #00A1E9;
				background: url(../../../../static/page_bg.png);
				background-size: 100% 110%;
				background-repeat: no-repeat;
				
				.data-wrap {
					display: flex;
					flex-wrap: wrap;
					.data-item-wrap {
						width: 33.33%;
						padding: 9rpx 0;
						min-height: 81rpx;
						text-align: center;
						margin-top: 60rpx;
						border-right: 1px solid #FFFFFF;
						.title {
							font-size: 22rpx;
							color: #FFFFFF;
							margin-bottom: 14rpx;
						}
						.data {
							font-weight: 700;
							font-size: 32rpx;
							color: #FFF600;
						}
					}
					.data-item-wrap:nth-child(-n+3){
						margin-top: 0;
					}
					.data-item-wrap:nth-child(3n) {
						border: none;
					}
				}
				
				.radius-wrap {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100vw;
					height: 30rpx;
					background-color: #fff;
					border-radius: 35rpx 35rpx 0 0;
				}
			}

			.detail-info-wrap {
				padding: 40rpx 35rpx;
				
				.info-wrap {
					display: flex;
					padding: 36rpx 35rpx 58rpx;
					.item-wrap {
						display: flex;
						font-size: 26rpx;
						width: 50%;
						.name {
							color: #8D8D8D;
							margin-right: 31rpx;
						}
						.data {
							color: #000000;
						}
					}
				}
				
				.driving-info-wrap {
					text-align: center;
					image {
						width: 427rpx;
						height: 264rpx;
						vertical-align: bottom;// 解决image背景图片下方有10rpx 的白边
						padding-bottom: 44rpx;
					}
				}
			}
		}
	}
</style>