realty/virgo.wzfrontend/console/src/views/work/iot/environment/monitor.vue

<template>
	<div class="yui-tree-box">
		<select-space></select-space>
		<div class="hui-tree-content">
			<div class="monitor box-background">
				<div class="monitor-box">
					<div class="monitor-center">
						<test-alarm></test-alarm>
						<div class="bim-box">
							<model type="enviroment-monitor" fileId="10000786668573"></model>
						</div>
					</div>
					<div class="monitor-right">
						<div class="hui-chart-title">
							环境设备列表
						</div>
						<div class="environment-list">
							<div class="smell-item">
								<div class="smell-item-title color-font">
									<span>财务室</span>
								</div>
								<div class="smell-item-box">
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">-12</div>
											<div class="smell-item-name">温度(°C)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">0.5</div>
											<div class="smell-item-name">Tvoc(ppm)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">55.3</div>
											<div class="smell-item-name">湿度(%)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">32</div>
											<div class="smell-item-name">PM2.5(ug/m3)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">589</div>
											<div class="smell-item-name">CO2(ppm)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">69</div>
											<div class="smell-item-name">PM10(ug/m3)</div>
										</div>
									</div>
								</div>
							</div>
							<div class="smell-item">
								<div class="smell-item-title color-font">
									<span>财务室</span>
								</div>
								<div class="smell-item-box">
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">-12</div>
											<div class="smell-item-name">温度(°C)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">0.5</div>
											<div class="smell-item-name">Tvoc(ppm)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">55.3</div>
											<div class="smell-item-name">湿度(%)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">32</div>
											<div class="smell-item-name">PM2.5(ug/m3)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">589</div>
											<div class="smell-item-name">CO2(ppm)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">69</div>
											<div class="smell-item-name">PM10(ug/m3)</div>
										</div>
									</div>
								</div>
							</div>
							<div class="smell-item">
								<div class="smell-item-title color-font">
									<span>财务室</span>
								</div>
								<div class="smell-item-box">
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">-12</div>
											<div class="smell-item-name">温度(°C)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">0.5</div>
											<div class="smell-item-name">Tvoc(ppm)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">55.3</div>
											<div class="smell-item-name">湿度(%)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">32</div>
											<div class="smell-item-name">PM2.5(ug/m3)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">589</div>
											<div class="smell-item-name">CO2(ppm)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">69</div>
											<div class="smell-item-name">PM10(ug/m3)</div>
										</div>
									</div>
								</div>
							</div>
							<div class="smell-item">
								<div class="smell-item-title color-font">
									<span>财务室</span>
								</div>
								<div class="smell-item-box">
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">-12</div>
											<div class="smell-item-name">温度(°C)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">0.5</div>
											<div class="smell-item-name">Tvoc(ppm)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">55.3</div>
											<div class="smell-item-name">湿度(%)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">32</div>
											<div class="smell-item-name">PM2.5(ug/m3)</div>
										</div>
									</div>
									<div class="smell-item-row">
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">589</div>
											<div class="smell-item-name">CO2(ppm)</div>
										</div>
										<div class="smell-item-label">
											<div class="smell-item-value alibaba color-green">69</div>
											<div class="smell-item-name">PM10(ug/m3)</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="pass-rate">
					<div class="hui-chart-title">
						合格率统计
					</div>
					<div class="pass-rate-box">
						<div class="pass-rate-item">
							<progress-bar title="温度合格率" :percent="70"></progress-bar>
						</div>
						<div class="pass-rate-item">
							<progress-bar title="湿度合格率" :percent="49"></progress-bar>
						</div>
						<div class="pass-rate-item">
							<progress-bar title="CO2合格率" :percent="81.12"></progress-bar>
						</div>
						<div class="pass-rate-item">
							<progress-bar title="甲醛合格率" :percent="12.6"></progress-bar>
						</div>
						<div class="pass-rate-item">
							<progress-bar title="TVOC合格率" :percent="32"></progress-bar>
						</div>
						<div class="pass-rate-item">
							<progress-bar title="PM2.5合格率" :percent="81.12"></progress-bar>
						</div>
					</div>
				</div>
				<div class="statistics-box">
					<div class="hui-chart-title">
						近24小时统计
					</div>
					<div class="statistics-chart">
						<div class="statistics-chart-item">
							<div class="chart-box">
								<div class="chart-title">
									近24小时温度
								</div>
								<div ref="chart1" class="chart-dom"></div>
							</div>
						</div>
						<div class="statistics-chart-item">
							<div class="chart-box">
								<div class="chart-title">
									近24小时湿度
								</div>
								<div ref="chart2" class="chart-dom"></div>
							</div>
						</div>
						<div class="statistics-chart-item">
							<div class="chart-box">
								<div class="chart-title">
									近24小时CO2
								</div>
								<div ref="chart3" class="chart-dom"></div>
							</div>
						</div>
						<div class="statistics-chart-item">
							<div class="chart-box">
								<div class="chart-title">
									近24小时甲醛
								</div>
								<div ref="chart4" class="chart-dom"></div>
							</div>
						</div>
						<div class="statistics-chart-item">
							<div class="chart-box">
								<div class="chart-title">
									近24小时TVOC
								</div>
								<div ref="chart5" class="chart-dom"></div>
							</div>
						</div>
						<div class="statistics-chart-item">
							<div class="chart-box">
								<div class="chart-title">
									近24小时PM2.5
								</div>
								<div ref="chart6" class="chart-dom"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import testAlarm from '@/components/work/common/testAlarm'
	import selectSpace from '@/components/work/common/selectSpace'
	import progressBar from '@/components/common/progressBar'
	import model from '@/components/work/common/model'
	export default {
		data() {
			return {}
		},
		created() {
			this.$nextTick(() => {
				this.chart(this.$refs.chart1, [1, 2, 2, 3, 2, 3], '#DE4749');
				this.chart(this.$refs.chart2, [1, 2, 2, 3, 2, 3], '#00D5FF');
				this.chart(this.$refs.chart3, [1, 2, 2, 3, 2, 3], '#A4B0D0');
				this.chart(this.$refs.chart4, [1, 2, 2, 3, 2, 3], '#8441C2');
				this.chart(this.$refs.chart5, [1, 2, 2, 3, 2, 3], '#FFC073');
				this.chart(this.$refs.chart6, [1, 2, 2, 3, 2, 3], '#49B788');
			})
		},
		components: {
			testAlarm,
			selectSpace,
			progressBar,
			model
		},
		methods: {
			chart(elem, data, color) {
				let chart = echarts.init(elem);
				let option = {
					tooltip: {
						show: true,
						trigger: 'axis',
						formatter: function() {
							return ''
						},
						backgroundColor: 'rgba(255,255,255,0)',
						borderWidth: 0,
						padding: 0,
						axisPointer: {
							lineStyle: {
								type: 'solid',
								color: '#4E5561',
							}
						}
					},
					grid: {
						left: '15',
						top: '55',
						right: '15',
						bottom: '5',
						containLabel: true
					},
					color: [color],
					xAxis: {
						type: 'category',
						data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
						axisLabel: {
							margin: 4,
							color: '#D0DEEE',
							fontSize: 10
						},
						boundaryGap: false,
						axisLine: {
							lineStyle: {
								color: '#6C8097'
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						name: '单位',
						type: 'value',
						nameTextStyle: {
							color: '#D0DEEE',
							fontSize: 10,
							align: 'right',
						},
						axisLabel: {
							margin: 10,
							color: '#D0DEEE',
							fontSize: 10
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(108,128,151,0.3)',
								type: 'dashed'
							}
						}
					},
					series: [{
						data: data,
						type: 'line',
						symbolSize: 6,
						z: 99
					}, {
						data: data,
						type: 'line',
						showSymbol: false,
						label: {
							show: true,
							color: '#D0DEEE'
						},
						z: 99
					}]
				};
				chart.setOption(option);
			}
		},
	}
</script>

<style lang="scss">
	.monitor {
		width: 100%;
		height: 100%;
		padding: 20px;
		overflow: auto;

		.monitor-box {
			width: 100%;
			height: 100%;
			min-width: 1100px;
			min-height: 699px;
			display: flex;
		}

		.monitor-center {
			flex: 1;
			width: 0;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.monitor-right {
			width: 350px;
			margin-left: 12px;
			display: flex;
			flex-direction: column;
			background: rgba(0, 4, 10, 0.3);

			.hui-chart-title {
				margin: 20px 20px 12px 20px;
			}

			.environment-list {
				padding: 0px 20px 0px 20px;
				margin-bottom: 20px;
				overflow-y: auto;
			}

			.smell-item {
				width: 100%;
				height: 160px;
				background: #181F2D;
				border-radius: 2px;
				overflow: hidden;
				margin-bottom: 12px;
				border: 1px solid rgba(97, 133, 214, 0.15);

				.smell-item-title {
					height: 40px;
					background: rgba(97, 133, 214, 0.08);
					display: flex;
					align-items: center;
					padding: 0 16px;
					font-size: 12px;
				}

				.smell-item-box {
					display: flex;
					flex-wrap: wrap;
					padding-left: 14px;
					padding-top: 10px;
				}

				.smell-item-row {
					padding-right: 14px;
				}

				.smell-item-label {
					overflow: hidden;
					height: 40px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-bottom: 14px;

					.smell-item-name {
						font-size: 12px;
					}

				}
			}

			.smell-item:last-child {
				margin-bottom: 0;
			}
		}

		.pass-rate {
			height: 326px;
			background: rgba(0, 4, 10, 0.3);
			margin-top: 12px;
			padding: 22px 20px;
			min-width: 1100px;

			.pass-rate-box {
				margin-top: 20px;
				display: flex;
			}

			.pass-rate-item {
				flex: 1;
				width: 0;
				height: 216px;
				background: #181F2D;
				display: flex;
				justify-content: center;
				padding-top: 30px;
				margin-right: 18px;
			}

			.pass-rate-item:last-child {
				margin-right: 0px;
			}
		}

		.statistics-box {
			height: 500px;
			background: rgba(0, 4, 10, 0.3);
			margin-top: 12px;
			min-width: 1100px;
			padding: 22px 20px;

			.statistics-chart {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding-top: 20px;
			}

			.statistics-chart-item {
				width: 33.3333%;
				height: 192px;
				padding-right: 20px;
				margin-bottom: 20px;
			}

			.statistics-chart-item:nth-child(3n) {
				padding-right: 0px;
			}

			.chart-box {
				width: 100%;
				height: 100%;
				background: #181F2D;
				position: relative;
			}

			.chart-title {
				position: absolute;
				top: 16px;
				width: 110px;
				text-align: center;
				height: 20px;
				font-weight: 600;
				color: #D0DEEE;
				left: 50%;
				margin-left: -44px;
			}

			.chart-dom {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>