zhgdlarge/src/views/sevenLargeScreen/headNoise/centerTop.vue

<template>
	<div class="CenterBox">
		<div class="title"><i>实时数据</i></div>
		<div class="content">
			<div class="selectRight">
				<el-select v-model="deviceName" class="m-2" placeholder="Select" size="small">
					<el-option
						v-for="(item, index) in noiseList"
						:key="index"
						:label="item.deviceName"
						:value="item.id"
						@click="realTimeMonitor(item)"
					/>
				</el-select>
			</div>
			<div class="gifImg">
				<img src="@/assets/images/dustNoise/centerGif.gif" alt="" />
			</div>
			<div class="menListWd menu">温度:{{ plantCap.temperature ? plantCap.temperature : "--" }}℃</div>
			<div class="menListSd menu">湿度:{{ plantCap.humidity ? plantCap.humidity : "--" }}%RH</div>
			<div class="menListPm2 menu">PM2.5:{{ plantCap.pm25 ? plantCap.pm25 : "--" }}ug/m³</div>
			<div class="menListTs menu">TSP:{{ plantCap.tsp ? plantCap.tsp : "--" }}ug/m³</div>
			<div class="menListPm10 menu">PM10:{{ plantCap.pm10 ? plantCap.pm10 : "--" }}ug/m³</div>
			<div class="menListZs menu">噪声:{{ plantCap.noise ? plantCap.noise : "--" }}dB</div>
			<div class="menListFs menu">风速:{{ plantCap.windspeed ? plantCap.windspeed : "--" }}m/s</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { GlobalStore } from "@/stores";
import { environmentDevList, getRealTimeDustNoiseDataApi } from "@/api/modules/headNoise";
import mitts from "@/utils/bus"; //兄弟组件传值
import { ref, reactive, onMounted } from "vue";
const store = GlobalStore();
let deviceName = ref("");
let noiseList = ref([]);
let plantCap = ref({
	crc: "--",
	humidity: "--",
	noise: "--",
	plateHumidity: "--",
	plateTemperature: "--",
	pm10: "--",
	pm25: "--",
	pressure: "--",
	temperature: "--",
	tsp: "--",
	voltage: "--",
	winddirectionName: "--",
	windspeed: "--"
});
let currentDevDetail = reactive({});
//切换设备
const realTimeMonitor = val => {
	currentDevDetail = val;
	getRealTimeDustNoiseData();
};
//获取设备下拉
const getList = async () => {
	const res = await environmentDevList({ projectSn: store.sn });
	console.log("获取设备下拉", res);
	if (res.result.length > 0) {
		noiseList.value = res.result;
		deviceName.value = res.result[0].deviceName;
		currentDevDetail = res.result[0];
		
		getRealTimeDustNoiseData();
	}
};
//获取环境设备详情数据
const getRealTimeDustNoiseData = async () => {
	const res = await getRealTimeDustNoiseDataApi({
		deviceId: currentDevDetail.deviceId,
		projectSn: store.sn
	});
	if (res.result) {
		plantCap.value = res.result;
	} 
	// else {
	// 	plantCap.value = {
	// 		crc: "--",
	// 		humidity: "--",
	// 		noise: "--",
	// 		plateHumidity: "--",
	// 		plateTemperature: "--",
	// 		pm10: "--",
	// 		pm25: "--",
	// 		pressure: "--",
	// 		temperature: "--",
	// 		tsp: "--",
	// 		voltage: "--",
	// 		winddirectionName: "--",
	// 		windspeed: "--"
	// 	};
	// }
	//发送编号
	mitts.emit("currentDevDetail", currentDevDetail);
};
onMounted(() => {
	getList();
});
</script>

<style lang="scss" scoped>
.CenterBox {
	width: 100%;
	height: 100%;
	background: url("@/assets/images/dustNoise/centerImg.png") no-repeat;
	background-size: 100% 100%;
	.title {
		height: 7%;
		line-height: 33px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;

		i {
			margin-left: 50px;
			font-family: OPPOSansH;
		}
	}
	.content{
		position: relative;
    width: 100%;
    height: 100%;
	}

	.selectRight {
		position: absolute;
		left: 78%;
		width: 13%;
		top: 4%;
		z-index: 9;
	}

	.gifImg {
		position: absolute;
		left: 42%;
		top: 10%;

		img {
			width: 80%;
		}
	}

	.menu {
		width: 15%;
		height: 5%;
		color: #fff;
		background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
		background-size: 100% 100%;
		text-align: center;
		position: absolute;
		line-height: 28px;
		font-size: calc(100vw * 14 / 1920);
	}

	.menListWd {
		left: 13%;
		top: 30%;
	}

	.menListSd {
		top: 43%;
		left: 10%;
	}

	.menListPm2 {
		top: 57%;
		left: 20%;
	}

	.menListTs {
		top: 66%;
		left: 42%;
	}

	.menListPm10 {
		top: 58%;
		left: 64%;
	}

	.menListZs {
		top: 43%;
		left: 72%;
	}

	.menListFs {
		top: 30%;
		left: 68%;
	}
}

::v-deep .el-input__wrapper {
	background: #112d59;
}

::v-deep .el-input__inner {
	color: #fff;
}

::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
</style>