qsy-zdh/pages/data/coal-mining/pump-machine/pump-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="status-tip-wrap" style="margin-bottom: 26rpx;">
					<status-tip :class="active === index ? 'active-item' : ''" @clickItem="tabChange" class="item" v-for="(item, index) in rhbList" :key="index" :name="item.name"
						:status="item.status" :tip="item.status ? '运行' : '停止'"></status-tip>
				</view>
				<view class="detail-wrap">
					<view class="icon">
						<image src="@/static/rhb.jpg"/>
					</view>
					<view class="info">
						<view class="item">{{ rhbList[active].name }}</view>
						<view class="item"><span>润滑油温(℃)</span>{{ rhbList[active].temperature }}</view>
						<view class="item"><span>润滑油压(Mpa)</span>{{ rhbList[active].mpa }}</view>
					</view>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card :name="'乳化泵油压变化曲线'" style="margin-bottom: 30rpx;" :notShow="true">
					<template v-slot:content>
						<view class="change-wrap">
							<bar-chart :barType="'line'" :optSet="optLine" :data="lineChartData"
								:barHeight="'249rpx'"></bar-chart>
						</view>
					</template>
				</page-card>
				<page-card :name="'乳化泵系统压力曲线图'" :notShow="true">
					<template v-slot:content>
						<view class="pressure-wrap">
							<bar-chart :barType="'column'" :optSet="optColumn" :data="columnChartData"
								:barHeight="'273rpx'"></bar-chart>
						</view>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0, // 当前活动的tab
				rhbList: [{ // 乳化泵信息
					name: '1#液泵',
					status: 0,
					temperature: 0,
					mpa: 1
				}, {
					name: '乳化增压泵',
					status: 1,
					temperature: 10,
					mpa: 23
				}, {
					name: '2#液泵',
					status: 0,
					temperature: 35,
					mpa: 26
				}, {
					name: '1#水泵',
					status: 0,
					temperature: 22,
					mpa: 56
				}, {
					name: '3#液泵',
					status: 0,
					temperature: 45,
					mpa: 67
				}, {
					name: '2#水泵',
					status: 0,
					temperature: 12,
					mpa: 32
				}, {
					name: '其他',
					status: null,
					temperature: 80,
					mpa: 1
				}, ],
				lineChartData: {}, // 折线图数据
				optLine: { // 折线图配置
					dataLabel: false, // 不显示数据标签
					color: ['#5C79D1'], // 折线图颜色
					dataPointShape: false,
					legend: {
						show: false, // 不显示底部标签
					},
					xAxis: {
						boundaryGap: 'justify', // 折线两端是否连接坐标轴
						axisLineColor: '#E5E5E5', // x轴线的颜色
						fontColor: '#A9A9A9' // x轴字体的颜色
					},
					yAxis: {
						gridColor: '#E5E5E5', // 横向数据标线的颜色
						data: [{
							axisLineColor: '#E5E5E5', // y轴线的颜色
							fontColor: '#A9A9A9' // y轴字体的颜色
						}]
					}
				},
				columnChartData: {}, // 柱状图数据
				optColumn: { // 柱状图配置
					dataLabel: false, // 不显示数据标签
					color: ['#5C79D1'], // 柱状图颜色
					legend: {
						show: false, // 不显示底部标签
					},
					xAxis: {
						axisLineColor: '#E5E5E5', // x轴线的颜色
						fontColor: '#A9A9A9' // x轴字体的颜色
					},
					yAxis: {
						gridColor: '#E5E5E5', // 横向数据标线的颜色
						showTitle: true, // 是否显示标题
						data: [{
							title: '单位：m/min', // 标题内容
							titleFontColor: '#A9A9A9', // 标题字体颜色
							titleOffsetY: -5, // 标题纵向偏移量
							axisLineColor: '#E5E5E5', // y轴线的颜色
							fontColor: '#A9A9A9' // y轴字体的颜色
						}]
					},
					extra: {
						column: {
							width: 18 // 设置柱子的宽度
						}
					}
				}
			}
		},
		onLoad() {
			this.getColumnData()
			this.getLineData()
		},
		methods: {
			tabChange(e) { // 乳化泵切换
				this.active = this.rhbList.findIndex((v) => {return v.name === e})
			},
			getColumnData() { // 获取柱状图数据
				let res = {
					categories: ["23:32", "23:32", "23:32", "23:32", "23:32", "23:32"],
					series: [{
						name: '产量:',
						data: [0.8, 0.7, 0.8, 0.9, 1.3, 1.4]
					}]
				};
				this.columnChartData = JSON.parse(JSON.stringify(res));
			},
			getLineData() { // 获取折线图数据
				let res = {
					categories: ["23:32", "23:32", "23:32", "23:32", "23:32", "23:32"],
					series: [{
						name: '综采循环作业:',
						data: [45, 0, 100, 0, 90, 0, 85]
					}]
				};
				this.lineChartData = 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: 630rpx;
				padding: 25rpx 35rpx 0;
				background: url(../../../../static/page_bg.png);
				background-size: 100%;
				.status-tip-wrap {
					display: flex;
					flex-wrap: wrap;
					border-bottom: 1rpx dashed #fff;
					padding-bottom: 42rpx;
					
					.active-item {
						background: #3495FA;
						border-radius: 14rpx;
					}
				
					.item {
						width: calc(50% - 21rpx);
						margin-left: 21rpx;
						padding: 0 47rpx;
				
						/deep/ .tip-wrap {
							padding: 23rpx 0;
							justify-content: space-between;
							color: #fff;
							font-size: 26rpx
						}
					}
				
					.item:nth-child(2n - 1) {
						margin-left: 0;
					}
				
					.item:nth-child(-n+2) {
						margin-top: 0;
					}
				}
				
				.detail-wrap {
					display: flex;
					padding: 0 76rpx;
					.icon {
						margin-right: 82rpx;
						image {
							width: 112rpx;
							height: 150rpx;
						}
					}
					.info {
						width: calc(100% - 194rpx);
						font-size: 28rpx;
						color: #fff;
						.item {
							display: flex;
							justify-content: space-between;
							margin-bottom: 20rpx;
						}
					}
				}
				
				.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;
				
				.change-wrap {
					padding: 28rpx 20rpx;
				}
				
				.pressure-wrap {
					padding: 28rpx 20rpx;
				}
			}
		}
	}
</style>