realty/virgo.wzfrontend/yui_wx/components/device/environment.vue

<template>
	<view class="environment-index">
		<view class="environment-box">
			<view class="environment-box-title">实时数据</view>
			<div class="air-item">
				<div class="test-item">
					<div class="name">温度(°C)</div>
					<div class="number">{{realTimeData.temperature}}</div>
				</div>
				<div class="test-item line">
					<div class="name">湿度(%)</div>
					<div class="number">{{realTimeData.humidity}}</div>
				</div>
				<div class="test-item">
					<div class="name">风速(m/s)</div>
					<div class="number">{{realTimeData.windSpeed}}</div>
				</div>
			</div>
			<div class="air-item">
				<div class="test-item">
					<div class="name">粉尘(mg/m³)</div>
					<div class="number">{{realTimeData.dust}}</div>
				</div>
				<div class="test-item line">
					<div class="name">噪声(dB)</div>
					<div class="number">{{realTimeData.noise}}</div>
				</div>
				<div class="test-item">
					<div class="name">气压(Kpa)</div>
					<div class="number">{{realTimeData.pressure}}</div>
				</div>
			</div>
		</view>
		<view class="common-charts">
			<view class="common-chart-title">温度监测</view>
			<view class="common-chart-box">
				<u-echart ref="temperature"></u-echart>
			</view>
		</view>
		<view class="common-charts">
			<view class="common-chart-title">湿度监测</view>
			<view class="common-chart-box">
				<u-echart ref="humidity"></u-echart>
			</view>
		</view>
		<view class="common-charts">
			<view class="common-chart-title">粉尘监测</view>
			<view class="common-chart-box">
				<u-echart ref="dust"></u-echart>
			</view>
		</view>
	</view>
</template>

<script>
	import uEchart from './uEchart.vue'
	export default {
		data() {
			return {
				realTimeData: {
					dust: '1.2', //粉尘
					noise: '55', //噪声
					temperature: '26', //温度
					humidity: '40', //湿度
					pressure: '100', //气压
					windSpeed: '1', //风速
					windDirection: '东北' //风向
				},
				echart: [{
					ref: 'temperature',
					type: 'line',
					color: ["#1890FF"],
					categories: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
					series: [{
						name: '温度',
						data: [21.3, 24.0, 24.1, 24.1, 24.4, 24.0, 23.4, 23.3]
					}]
				}, {
					ref: 'humidity',
					type: 'line',
					color: ["#73C0DE"],
					categories: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
					series: [{
						name: '湿度',
						data: [37, 38, 38.1, 38.1, 38.4, 38.0, 36.4, 36]
					}]
				}, {
					ref: 'dust',
					type: 'line',
					color: ["#FAC858"],
					categories: ['03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
					series: [{
						name: '粉尘',
						data: [7, 8, 3.1, 8.1, 8.4, 8, 6.4, 9]
					}]
				}]
			}
		},
		mounted() {
			setTimeout(() => {
				for (var i = 0; i < this.echart.length; i++) {
					let item = this.echart[i];
					this.$refs[item.ref].initCharts({
						type: item.type,
						categories: item.categories,
						series: item.series,
						animation: true,
						background: "#FFFFFF",
						color: item.color,
						padding: [10, 5, 0, 0],
						enableScroll: false,
						legend: {
							show: false
						},
						xAxis: {
							disableGrid: true
						},
						yAxis: {
							gridType: "dash",
							dashLength: 2
						},
						extra: {
							line: {
								type: "curve",
								width: 2,
								activeType: "hollow"
							}
						}
					})
				}
			}, 500)
		},
		components: {
			uEchart
		},
	}
</script>

<style lang="scss">
	.environment-index {
		padding: 30rpx;

		.environment-box {
			background: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
		}

		.air-item {
			display: flex;
			align-items: center;
			margin: 10rpx 0;
		}

		.test-item {
			flex: 1;
			width: 0;
			overflow: hidden;
			text-align: center;
			padding: 2px 0;
			position: relative;

			.name {
				font-size: 24rpx;
				margin-bottom: 8rpx;
				line-height: 36rpx;
				color: $uni-secondary-color;
			}

			.number {
				font-size: 36rpx;
				color: $uni-success;
			}
		}

		.environment-box-title {
			padding-bottom: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
	}
</style>