qsy-zdh/pages/data/ventilation/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="detail-wrap">
					<view class="system-wrap">
						<view class="system-left">
							<image src="@/static/jg-icon.png" />
							<view class="system-center">通风智能决策及控制系统</view>
						</view>
						<view class="system-right">
							<image src="@/static/right-arrow.png" />
						</view>
					</view>
					<view class="annular-wrap">
						<view class="left">
							<bar-chart :barType="'ring'" :optSet="optRing" :data="ringChartData"
								:barHeight="'200rpx'"></bar-chart>
							<view class="title">
								有效风率
							</view>
							<view class="legend">
								<view class="left">
									<view class="name">有效风</view>
									<view class="icon"></view>
								</view>
								<view class="right">
									<view class="name">无效风</view>
									<view class="icon"></view>
								</view>
							</view>
						</view>
						<view class="right">
							<bar-chart :barType="'ring'" :optSet="optRing1" :data="ringChartData1"
								:barHeight="'200rpx'"></bar-chart>
							<view class="title">
								供需比
							</view>
							<view class="legend">
								<view class="left">
									<view class="name">有效风</view>
									<view class="icon"></view>
								</view>
								<view class="right">
									<view class="name">无效风</view>
									<view class="icon"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="info-wrap">
						<view class="item" v-for="(item, index) in infoList" :key="index">
							<view class="name">{{ item.name }}</view>
							<view class="data">{{ item.data }}</view>
						</view>
					</view>
				</view>
				<view class="radius-wrap"></view>
			</view>
			<view class="detail-info-wrap">
				<page-card v-for="(item, index) in list" :key="index" :name="item.name" :data="item"
					style="margin-bottom: 30rpx;" @goDetail="goDetail">
					<template v-slot:content>
						<view class="machine-wrap">
							<status-tip v-for="(item1, index1) in item.children" :key="index1" :name="item1.name"
								:status="item1.status" :tip="item1.status ? '运行' : '停止'"></status-tip>
						</view>
					</template>
				</page-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoList: [{
					name: '自动风门',
					data: '2扇'
				}, {
					name: '自动风窗',
					data: '2扇'
				}, {
					name: '变频风扇',
					data: '6扇'
				}],
				list: [{
					name: '东井通风机',
					children: [{
						name: '1#风机',
						status: 0
					}, {
						name: '2#风机',
						status: 1
					}]
				}, {
					name: '西井通风机',
					children: [{
						name: '1#风机',
						status: 0
					}, {
						name: '2#风机',
						status: 1
					}]
				}, {
					name: '五分区通风机',
					children: [{
						name: '1#风机',
						status: 0
					}, {
						name: '2#风机',
						status: 1
					}]
				}, {
					name: '1314通风机',
					children: [{
						name: '1#风机',
						status: 0
					}, {
						name: '2#风机',
						status: 1
					}]
				}, {
					name: '150201回风巷通风机',
					children: [{
						name: '主风机',
						status: 0
					}, {
						name: '副风机',
						status: 1
					}]
				}, {
					name: '150201机巷通风机',
					children: [{
						name: '主风机',
						status: 0
					}, {
						name: '副风机',
						status: 1
					}]
				}, {
					name: '220708辅助巷通风机',
					children: [{
						name: '主风机',
						status: 0
					}, {
						name: '副风机',
						status: 1
					}]
				}, {
					name: '220708回风巷通风机',
					children: [{
						name: '主风机',
						status: 0
					}, {
						name: '副风机',
						status: 1
					}]
				}, {
					name: '220708胶带巷通风机',
					children: [{
						name: '主风机',
						status: 0
					}, {
						name: '副风机',
						status: 1
					}]
				}, ],
				ringChartData: {},
				optRing: {
					color: ["#00FF00", "#FFFF00"], // 圆环中数据的颜色
					dataLabel: false, // 是否启用数据标签
					legend: { // 是否启用图例
						show: false
					},
					title: { // 标题内容
						name: "90%",
						fontSize: 18,
						color: "#fff"
					},
					subtitle: { // 副标题内容
						name: ""
					},
					extra: {
						ring: {
							ringWidth: 10, // 圆环宽度
							border: false, // 是否绘制数据间的边框
							centerColor: 'rgb(1, 143, 252)' // 圆环中间填充的颜色
						}
					}
				},
				ringChartData1: {},
				optRing1: {
					color: ["#51FFF1", "#FFB944"], // 圆环中数据的颜色
					dataLabel: false, // 是否启用数据标签
					legend: { // 是否启用图例
						show: false
					},
					title: { // 标题内容
						name: "1.07",
						fontSize: 18,
						color: "#fff"
					},
					subtitle: { // 副标题内容
						name: ""
					},
					extra: {
						ring: {
							ringWidth: 10, // 圆环宽度
							offsetAngle: 90,
							border: false, // 是否绘制数据间的边框
							centerColor: 'rgb(1, 143, 252)' // 圆环中间填充的颜色
						}
					}
				}
			}
		},
		onLoad() {
			this.getServerData()
		},
		methods: {
			goBack() { // 返回上一頁面
				uni.navigateBack()
			},
			getServerData() { // 获取环形图数据
				let res = {
					series: [{
						data: [{
							"name": "有效风",
							"value": 90
						}, {
							"name": "无效风",
							"value": 10
						}]
					}]
				};
				this.ringChartData = JSON.parse(JSON.stringify(res));
				let res1 = {
					series: [{
						data: [{
							"name": "供风量",
							"value": 1.07
						}, {
							"name": "需风量",
							"value": 1
						}]
					}]
				};
				this.ringChartData1 = JSON.parse(JSON.stringify(res1));
			},
			goDetail(data) {
				if (data.name === "220708胶带巷通风机") {
					uni.navigateTo({
						url: `/pages/data/ventilation/Lane-system/Lane-system?data=${JSON.stringify(data)}`,
					})
				} else {
					uni.navigateTo({
						url: `/pages/data/ventilation/air-system/air-system?data=${JSON.stringify(data)}`,
					})
				}
			}
		}
	}
</script>

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

			.basic-info-wrap {
				position: relative;
				height: 530rpx;
				padding: 25rpx 35rpx 0;
				background: url(../../../../static/page_bg.png);
				background-size: 100%;

				.detail-wrap {
					width: 100%;
					height: 447rpx;
					padding: 42rpx 50rpx;
					background: url(../../../../static/chart-bg.png);
					background-repeat: no-repeat;
					background-size: 100% 447rpx;

					.system-wrap {
						display: flex;
						justify-content: space-between;

						.system-left {
							display: flex;
							align-items: center;
							margin-right: 21rpx;

							image {
								width: 37rpx;
								height: 36rpx;
								margin-right: 21rpx;
								vertical-align: bottom;
							}
						}

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

						.system-right {
							image {
								width: 16rpx;
								height: 29rpx;
								vertical-align: middle;
							}
						}
					}

					.annular-wrap {
						display: flex;
						margin-bottom: 20rpx;

						.left {
							width: 50%;

							.title {
								text-align: center;
								margin-bottom: 10rpx;
								font-size: 26rpx;
								color: #fff;
							}

							.legend {
								display: flex;

								.left {
									display: flex;
									justify-content: center;
									align-items: center;

									.name {
										margin-right: 8rpx;
										color: #fff;
										font-size: 22rpx;
									}

									.icon {
										width: 18rpx;
										height: 18rpx;
										background-color: #00FF00;
									}
								}

								.right {
									display: flex;
									justify-content: center;
									align-items: center;

									.name {
										margin-right: 8rpx;
										color: #fff;
										font-size: 22rpx;
									}

									.icon {
										width: 18rpx;
										height: 18rpx;
										background-color: #FFFF00;
									}
								}
							}
						}

						.right {
							width: 50%;

							.title {
								text-align: center;
								margin-bottom: 10rpx;
								font-size: 26rpx;
								color: #fff;
							}

							.legend {
								display: flex;

								.left {
									display: flex;
									justify-content: center;
									align-items: center;

									.name {
										margin-right: 8rpx;
										color: #fff;
										font-size: 22rpx;
									}

									.icon {
										width: 18rpx;
										height: 18rpx;
										background-color: #51FFF1;
									}
								}

								.right {
									display: flex;
									justify-content: center;
									align-items: center;

									.name {
										margin-right: 8rpx;
										color: #fff;
										font-size: 22rpx;
									}

									.icon {
										width: 18rpx;
										height: 18rpx;
										background-color: #FFB944;
									}
								}
							}
						}
					}

					.info-wrap {
						display: flex;

						.item {
							width: 33.33%;
							display: flex;
							justify-content: center;
							font-size: 26rpx;

							.name {
								color: #fff;
								margin-right: 11rpx;
							}

							.data {
								color: #FFFF00;
							}
						}
					}
				}

				.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;

				/deep/ .card-wrap:last-child {
					margin-bottom: 0 !important;
				}

				.machine-wrap {
					display: flex;
					justify-content: space-between;
					padding: 40rpx 58rpx;

					/deep/ .tip-wrap {
						font-size: 26rpx;

						.name {
							color: #8D8D8D;
							margin-right: 40rpx;
						}
					}
				}
			}
		}
	}
</style>