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

<template>
	<div class="device-monitor color-font">
		<div class="device-monitor-box">
			<div class="monitor-top">
				<div class="monitor-number">
					<div class="number-all">
						<div class="test-icon">
							<i class="iconfont huifont-yunhang"></i>
						</div>
						<div class="test-label">
							<div class="test-name">设备总数</div>
							<div class="test-value alibaba">{{testCount.totalNumber}}</div>
						</div>
					</div>
					<div class="number-list">
						<div class="hui-chart-title">
							设备状态
						</div>
						<div class="number-item" style="margin-top: 16px;">
							<div class="number-icon green">
								<i class="iconfont huifont-kaiqi"></i>
							</div>
							<div class="number-label">开启</div>
							<div class="alibaba color-green">{{testCount.openNumber}}</div>
						</div>
						<div class="number-item">
							<div class="number-icon red">
								<i class="iconfont huifont-jinggao"></i>
							</div>
							<div class="number-label">故障</div>
							<div class="alibaba color-red">{{testCount.faultNumber}}</div>
						</div>
						<div class="number-item">
							<div class="number-icon gray">
								<i class="iconfont huifont-guanbi1"></i>
							</div>
							<div class="number-label">关闭</div>
							<div class="alibaba">{{testCount.closeNumber}}</div>
						</div>
					</div>
				</div>
				<div class="device-list hui-flex hui-content">
					<div class="hui-content-title">
						<div :class="'hui-title-item '+(nowDevice.id == item.id ? 'active' : '')"
							v-for="item in deviceData" :key="item.id" @click="changeDeviceSystem(item)">
							{{item.name}}
						</div>
					</div>
					<div class="hui-flex-box">
						<div class="device-type-list">
							<div class="device-type-item" v-for="(item,index) in nodeList" :key="item.id">
								<div class="device-type-title">
									<span class="label">{{item.name}}</span>
									<span class="alibaba color-cyan number">{{item.totalNumber}}</span>
								</div>
								<div class="device-type-content">
									<div class="device-types-item" v-for="(node,index) in item.children" :key="node.id">
										<div class="device-types-label">{{node.name}}</div>
										<div class="device-types-content">
											<div class="device-types-number">
												<span>开启</span>
												<span class="alibaba color-green">{{node.openNumber}}</span>
											</div>
											<div class="device-types-number">
												<span>故障</span>
												<span class="alibaba color-red">{{node.faultNumber}}</span>
											</div>
											<div class="device-types-number">
												<span>关闭</span>
												<span class="alibaba">{{node.closeNumber}}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="monitor-bottom">
				<div class="params-title">
					<div class="hui-chart-title">
						设备监测
					</div>
					<div class="params-item">
						<div class="params-date">记录时间</div>
						<div class="params-td">控制温度</div>
						<div class="params-td">供水温度(°C)</div>
						<div class="params-td">回水温度(°C)</div>
						<div class="params-td">非烟温度</div>
						<div class="params-td">介质压力</div>
						<div class="params-td">介质温度</div>
						<div class="params-td">瞬时流量</div>
						<div class="params-td">机组负荷</div>
						<div class="params-td">故障</div>
						<div class="params-td">设定温度(°C)</div>
						<div class="params-td">设启停状态</div>
					</div>
				</div>
				<div class="params-box">
					<div class="params-item params-tr" v-for="(item,index) in list" :key="item.id">
						<div class="params-date">{{item.date}}</div>
						<div class="params-td">{{item.controlTemperature}}</div>
						<div class="params-td">{{item.supplyWaterTemperature}}</div>
						<div class="params-td">{{item.backWaterTemperature}}</div>
						<div class="params-td">{{item.nonSmokingTemperature}}</div>
						<div class="params-td">{{item.mediumPressure}}</div>
						<div class="params-td">{{item.mediumTemperature}}</div>
						<div class="params-td">{{item.instantaneousFlowRate}}</div>
						<div class="params-td">{{item.unitLoad}}</div>
						<div class="params-td">{{item.fault}}</div>
						<div class="params-td">{{item.setTemperature}}</div>
						<div class="params-td">
							<div class="color-gray" v-if="!item.state">关闭</div>
							<div class="color-green" v-else-if="item.state === 1">开启</div>
							<div class="color-orange" v-else="item.state === 2">故障</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getMonitoringList,
		getDeviceLevelList
	} from '@/httpApi/test'
	export default {
		data() {
			return {
				list: [],
				deviceData: [],
				testCount: {
					totalNumber: 0,
					openNumber: 0,
					faultNumber: 0,
					closeNumber: 0
				},
				nowDevice: {},
				nodeList: []
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				getDeviceLevelList(this.$store.getters.project.id).then(res => {
					if (res.state) {
						this.changeDeviceSystem(res.data[0])
						this.deviceData = res.data;
						for (let i = 0; i < res.data.length; i++) {
							this.testCount.totalNumber += res.data[i].totalNumber;
							this.testCount.openNumber += res.data[i].openNumber;
							this.testCount.faultNumber += res.data[i].faultNumber;
							this.testCount.closeNumber += res.data[i].closeNumber;
						}
					}
				})
				getMonitoringList({
					projectId: this.$store.getters.project.id
				}).then(res => {
					if (res.state) {
						this.list = res.data;
					}
				})
			},
			changeDeviceSystem(item) {
				this.nowDevice = item;
				this.nodeList = this.nowDevice.children;
			}
		},
	}
</script>

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

		.device-monitor-box {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			min-width: 1256px;
			min-height: 700px;
		}

		.select-box {
			display: flex;

			.hui-tag {
				cursor: pointer;
			}

			.el-select {
				width: 200px;
				margin-right: 8px;
			}

			.el-range-editor--mini {
				width: 220px;
			}

			.hui-tag {
				margin-left: 8px;
			}

			.el-button {
				margin-left: 8px;
			}
		}

		.monitor-bottom {
			flex: 1;
			height: 0;
			background: #141A24;
			margin-top: 12px;
			padding: 20px 0;
			display: flex;
			flex-direction: column;

			.params-title {
				padding: 0px 20px 0px 20px;
			}

			.params-box {
				flex: 1;
				height: 0;
				padding: 0 20px;
				overflow-y: auto;
			}

			.params-item {
				height: 36px;
				display: flex;
				align-items: center;
				padding: 0 20px;
				font-size: 12px;
			}

			.params-tr {
				background: rgba(97, 133, 214, 0.05);
				margin-bottom: 4px;
			}

			.params-tr:last-child {
				margin-bottom: 0px;
			}

			.params-td {
				flex: 1;
			}

			.params-date {
				width: 140px;
			}
		}

		.device-type-item {
			font-size: 12px;
			background: #181F2D;
			border: 1px solid rgba(97, 133, 214, 0.15);
			margin-bottom: 12px;

			.device-type-title {
				height: 36px;
				background: rgba(97, 133, 214, 0.08);
				padding-left: 16px;
				display: flex;
				align-items: center;

				.label {
					margin-right: 20px;
				}

				.number {
					font-size: 16px;
				}
			}

			.device-type-content {
				padding: 3px 5px 13px 15px;
				display: flex;
				flex-wrap: wrap;
			}

			.device-types-item {
				padding: 11px;
				border: 1px solid rgba(97, 133, 214, 0.15);
				margin-right: 10px;
				margin-top: 10px;
			}

			.device-types-label {
				font-weight: 600;
			}

			.device-types-content {
				display: flex;
				margin-top: 6px;


				.device-types-number {
					margin-right: 25px;
				}

				.alibaba {
					font-size: 14px;
					margin-left: 7px;
				}
			}
		}

		.monitor-top {
			display: flex;
			height: 445px;

			.device-list {
				flex: 1;
				width: 0;
				background: #141A24;

				.hui-flex-box {
					padding: 20px 0;
				}

				.device-type-list {
					height: 100%;
					padding: 0 20px;
					overflow-y: auto;
				}
			}

			.hui-content-title {
				color: #617491;
			}

			.hui-title-item.active,
			.hui-title-item:hover {
				font-weight: 600;
			}
		}

		.monitor-number {
			width: 350px;
			margin-right: 12px;
		}

		.number-list {
			padding: 20px;
			background: #141A24;
			margin-top: 12px;

			.number-item {
				height: 68px;
				background: #181F2D;
				display: flex;
				align-items: center;
				padding: 0 24px 0 20px;
				margin-top: 12px;

				.alibaba {
					font-size: 20px;
				}
			}

			.number-label {
				flex: 1;
			}

			.number-icon {
				width: 36px;
				height: 36px;
				text-align: center;
				line-height: 36px;
				border-radius: 12px;
				margin-right: 10px;

				.iconfont {
					font-size: 25px;
				}
			}

			.green {
				background: $--color-green;
			}

			.red {
				background: $--color-red;
			}

			.gray {
				background: $--color-common;
			}
		}

		.number-all {

			height: 120px;
			background: #141A24;
			display: flex;
			align-items: center;
			padding-left: 32px;

			.test-label {
				flex: 1;
				width: 0;
				overflow: hidden;
			}

			.test-value {
				font-size: 24px;
				margin-top: 5px;
			}

			.test-icon {
				width: 56px;
				height: 56px;
				background: #3371FF;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16px;

				i {
					font-size: 32px;
					color: #e6e6e6;
				}
			}
		}
	}
</style>