qsy-zdh/pages/data/coal-mining/detail/detail.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="monitor-wrap">
					<view class="left">
						<image class="icon" src="@/static/jg-icon.png" />
						<view class="tip">
							综采动态监视
						</view>
					</view>
					<image class="opera" src="@/static/right-arrow.png" />
				</view>
				<view class="data-wrap">
					<view v-for="(item, index) in basicList" :key="index" class="data-item-wrap">
						<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="'乳化泵信息'">
					<template v-slot:content>
						<view class="info-card-wrap">
							<view class="status-tip-wrap">
								<status-tip class="item" v-for="(item, index) in rhbList" :key="index" :name="item.name"
									:status="item.status" :tip="item.status ? '运行' : '停止'"></status-tip>
							</view>
						</view>
					</template>
				</page-card>
				<page-card :name="'采煤机信息'" style="margin-top: 30rpx;">
					<template v-slot:content>
						<view class="info-card-wrap">
							<view class="info-wrap">
								<view v-for="(item, index) in cardList" :key="index" class="item-wrap">
									<view class="title">
										{{ item.name }}
									</view>
									<view class="content">
										{{ item.params }}
									</view>
								</view>
							</view>
							<cmj-animation></cmj-animation>
						</view>
					</template>
				</page-card>
				<page-card :name="'顶板压力'" style="margin-top: 30rpx;">
					<template v-slot:content>
						<view class="pressure-wrap">
							<bar-chart :barType="'column'" :optSet="optLine" :data="chartData" :barHeight="'293rpx'"></bar-chart>
						</view>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basicList: [{
					name: '设计可采长度',
					params: '2159m'
				},{
					name: '开采煤层',
					params: '7'
				},{
					name: '面积',
					params: '450301㎡'
				},{
					name: '煤层总厚',
					params: '3.9m'
				},{
					name: '工作面采高',
					params: '2.6m'
				},{
					name: '支架数',
					params: '130'
				},{
					name: '循环刀数',
					params: '12'
				},{
					name: '回采月份',
					params: '2023.11'
				}],
				rhbList: [{ // 乳化泵信息
					name: '1#液泵',
					status: 0
				}, {
					name: '乳化增压泵',
					status: 1
				}, {
					name: '2#液泵',
					status: 0
				}, {
					name: '1#水泵',
					status: 0
				}, {
					name: '3#液泵',
					status: 0
				}, {
					name: '2#水泵',
					status: 0
				}, ],
				chartData: {}, // 柱状图数据
				optLine: { // 柱状图配置
					dataLabel: false, // 不显示数据标签
					color: ['#3495FA'], // 柱状图颜色
					legend: {
						show: false, // 不显示底部标签
					},
					xAxis: {
						axisLineColor: '#E5E5E5', // x轴线的颜色
						fontColor: '#A9A9A9' // x轴字体的颜色
					},
					yAxis: {
						gridColor: '#E5E5E5', // 横向数据标线的颜色
						showTitle: true, // 是否显示标题
						data: [{
							title: 'Mpa', // 标题内容
							titleFontColor: '#A9A9A9', // 标题字体颜色
							titleOffsetY: -5, // 标题纵向偏移量
							titleOffsetX: -5, // 标题横向偏移量
							axisLineColor: '#E5E5E5', // y轴线的颜色
							fontColor: '#A9A9A9' // y轴字体的颜色
						}]
					},
					extra: {
						column: {
							width: 15
						}
					}
				},
				cardList: [{
					name: '牵引速度',
					params: '0m/min'
				},{
					name: '俯仰角',
					params: '0°'
				},{
					name: '瓦斯浓度',
					params: '0°'
				},{
					name: '倾角',
					params: '0°'
				}]
			}
		},
		onLoad() {
			this.getServerData()
		},
		methods: {
			getServerData() { // 获取柱状图数据
				let res = {
					categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"],
					series: [{
						name: '顶板压力',
						data: [35, 36, 31, 33, 13, 34, 35, 36, 38, 41, 37, 45, 54, 46, 50]
					}]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			goBack() { // 返回上一頁面
				uni.navigateBack()
			}
		}
	}
</script>

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

			.basic-info-wrap {
				position: relative;
				height: 520rpx;
				padding: 25rpx 35rpx 99rpx;
				background-color: #00A1E9;
				background: url(../../../../static/page_bg.png);
				background-size: 100%;

				.monitor-wrap {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 44rpx 36rpx 44rpx 52rpx;
					height: 120rpx;
					width: 100%;
					background: url('../../../../static/opera.png');
					background-size: 100% 120rpx;
					background-repeat: no-repeat;
					margin-bottom: 60rpx;

					.left {
						display: flex;
						align-items: center;
						.icon {
							width: 37rpx;
							height: 36rpx;
							margin-right: 21rpx;
						}

						.tip {
							font-size: 34rpx;
							font-weight: 700;
							color: #fff;
						}
					}

					.opera {
						width: 16rpx;
						height: 29rpx;
					}
				}
				
				.data-wrap {
					display: flex;
					flex-wrap: wrap;
					.data-item-wrap {
						width: 25%;
						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+4){
						margin-top: 0;
					}
					.data-item-wrap:nth-child(4n) {
						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-card-wrap {
					padding: 35rpx 55rpx;

					.status-tip-wrap {
						display: flex;
						flex-wrap: wrap;

						.item {
							width: 50%;
							font-size: 26rpx;
							margin-top: 48rpx;

							/deep/ .name {
								color: #8D8D8D;
								width: 130rpx;
								margin-right: 20rpx;
							}
						}

						.item:nth-child(-n+2) {
							margin-top: 0;
						}
					}

					.info-wrap {
						display: flex;
						flex-wrap: wrap;

						.item-wrap {
							width: 50%;
							display: flex;
							font-size: 26rpx;
							margin-top: 53rpx;

							.title {
								width: 104rpx;
								margin-right: 58rpx;
								font-weight: 700;
								color: #8D8D8D;
							}

							.content {
								color: #000000;
							}
						}

						.item-wrap:nth-child(-n+2) {
							margin-top: 0;
						}
					}

					/deep/ .animation-wrap {
						margin-top: 30rpx;
					}
				}

				.pressure-wrap {
					padding: 25rpx 30rpx;
				}
			}
		}
	}
</style>