qsy-zdh/pages/data/coal-mining/coal-machine/coal-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: 40rpx;">
					<status-tip class="item" v-for="(item, index) in basicList" :key="index" :name="item.name"
						:status="item.status" :tip="item.status ? '正常' : '停止'"></status-tip>
				</view>
				<view>
					<cmj-animation></cmj-animation>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card :name="'设备信息'" :notShow="true" style="margin-bottom: 30rpx;">
					<template v-slot:content>
						<view>
							<simple-table :tableHead="tableHead" :list="deviceList"></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="cmjList"></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="peopleList"></simple-table>
						</view>
					</template>
				</page-card>
				<page-card :name="'产量信息图'" :notShow="true" style="margin-bottom: 30rpx;">
					<template v-slot:content>
						<view class="product-info-wrap">
							<bar-chart :barType="'column'" :optSet="optColumn" :data="columnChartData"
								:barHeight="'274rpx'"></bar-chart>
						</view>
					</template>
				</page-card>
				<page-card :name="'综采循环作业图'" :notShow="true" style="margin-bottom: 30rpx;">
					<template v-slot:content>
						<view class="product-info-wrap">
							<bar-chart :barType="'line'" :optSet="optLine" :data="lineChartData"
								:barHeight="'242rpx'"></bar-chart>
						</view>
					</template>
				</page-card>
				<page-card :name="'采煤机牵引速度变化图'" :notShow="true">
					<template v-slot:content>
						<view class="product-info-wrap">
							<bar-chart :barType="'column'" :optSet="optColumn1" :data="columnChartData1"
								:barHeight="'287rpx'"></bar-chart>
						</view>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableHead: ['参数名称', '数值'], // 表头
				basicList: [{ // 基础信息
					name: '采煤机回路',
					status: 0
				}, {
					name: '1#液泵',
					status: 0
				}, {
					name: '转载机',
					status: 40
				}, {
					name: '2#液泵',
					status: 23
				}, {
					name: '破碎机',
					status: 22
				}, {
					name: '3#液泵',
					status: 21
				}, {
					name: '纵撕',
					status: 23
				}, {
					name: '1#水泵',
					status: 30
				}, {
					name: '烟雾',
					status: 0
				}, {
					name: '2#水泵',
					status: 0
				}, {
					name: '堆煤',
					status: 1
				}, {
					name: '通讯状态',
					status: 1
				}, ],
				deviceList: [{ // 设备信息
					name: '牵引速度(m/min)',
					params: [0]
				}, {
					name: '采煤机位置(架)',
					params: [0]
				}, {
					name: '俯仰角(°)',
					params: [0]
				}, {
					name: '倾角(°)',
					params: [0]
				}, {
					name: '瓦斯浓度(%)',
					params: [0]
				}, {
					name: '左牵引电流(A)',
					params: [0]
				}, {
					name: '左牵引温度(℃)',
					params: [0]
				}, {
					name: '左截割电流(A)',
					params: [0]
				}, {
					name: '左截割温度(℃)',
					params: [0]
				}, {
					name: '左滚筒温度(℃)',
					params: [0]
				}, {
					name: '右牵引电流(A)',
					params: [0]
				}, {
					name: '右牵引温度(℃)',
					params: [0]
				}, {
					name: '右截割电流(A)',
					params: [0]
				}, {
					name: '右截割温度(℃)',
					params: [0]
				}, {
					name: '右滚筒温度(℃)',
					params: [0]
				}, ],
				cmjList: [{ // 采煤机基础信息
						name: '机身高度(mm)',
						params: [0]
					},
					{
						name: '总装机功率(KW)',
						params: [0]
					},
					{
						name: '滚筒转速(r/min)',
						params: [0]
					},
					{
						name: '摇臂长度(mm)',
						params: [0]
					},
					{
						name: '采高范围(m)',
						params: [0]
					}
				],
				peopleList: [{ // 工作面人员环境信息
						name: '220707皮带机头CO',
						params: ['未知']
					},
					{
						name: '220707皮带机尾CO',
						params: ['未知']
					},
					{
						name: '220707工作面粉尘',
						params: ['未知']
					},
					{
						name: '220707工作面环境温度',
						params: ['未知']
					},
					{
						name: '220707回风巷15m',
						params: ['3人']
					},
					{
						name: '220707回风巷80m',
						params: ['7人']
					},
					{
						name: '220707回风巷110m',
						params: ['6人']
					},
					{
						name: '220707回风巷1250m',
						params: ['0人']
					},
				],
				columnChartData: {}, // 柱状图数据
				optColumn: { // 柱状图配置
					dataLabel: false, // 不显示数据标签
					color: ['#5C79D1'], // 柱状图颜色
					legend: {
						show: false, // 不显示底部标签
					},
					xAxis: {
						axisLineColor: '#E5E5E5', // x轴线的颜色
						fontColor: '#A9A9A9' // x轴字体的颜色
					},
					yAxis: {
						gridColor: '#E5E5E5', // 横向数据标线的颜色
						showTitle: true, // 是否显示标题
						data: [{
							title: '单位：万吨', // 标题内容
							titleFontColor: '#A9A9A9', // 标题字体颜色
							titleOffsetY: -5, // 标题纵向偏移量
							axisLineColor: '#E5E5E5', // y轴线的颜色
							fontColor: '#A9A9A9' // y轴字体的颜色
						}]
					},
					extra: {
						column: {
							width: 18 // 设置柱子的宽度
						}
					}
				},
				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轴字体的颜色
						}]
					}
				},
				columnChartData1: {}, // 柱状图数据2
				optColumn1: {
					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.getColumnData1()
			this.getLineData()
		},
		methods: {
			getColumnData() { // 获取柱状图数据
				let res = {
					categories: ["09/08", "09/09", "09/10", "09/11", "09/12", "09/13"],
					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));
			},
			getColumnData1() { // 获取柱状图数据
				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.columnChartData1 = 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: 700rpx;
				padding: 25rpx 95rpx 60rpx;
				background: url(../../../../static/page_bg.png);
				background-size: 100%;

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

					.item {
						width: calc(50% - 44rpx);
						margin-top: 23rpx;
						margin-left: 88rpx;

						/deep/ .tip-wrap {
							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;
					}
				}
				
				.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;

				.product-info-wrap {
					padding: 39rpx 22rpx 37rpx;
				}
			}
		}
	}
</style>