74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<div class="environment-wrapper">
|
|
<div class="search" @click.stop="handleSearch">
|
|
<el-select
|
|
v-model="searchData.itemId"
|
|
placeholder="请选择..."
|
|
@change="deviceChange"
|
|
:teleported="false"
|
|
>
|
|
<el-option
|
|
v-for="item in deviceList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="content">
|
|
<div class="item" v-for="item in list" :key="item.id">
|
|
<div class="name">{{ item.name }}</div>
|
|
<div class="num-con">
|
|
<div class="num">{{ item.num }}</div>
|
|
<div class="unit">{{ item.unit }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { environmentData, environmentItem } from "@/api/largeScreen";
|
|
import { onMounted } from "vue";
|
|
|
|
const props = defineProps(["buildingId"]);
|
|
const searchContent = ref("请选择...");
|
|
const searchData = ref({});
|
|
const deviceList = ref([]); //传感器list
|
|
const list = ref([
|
|
{ id: 0, name: "Ph值", num: "--", unit: "" },
|
|
{ id: 1, name: "色度", num: "--", unit: "度" },
|
|
{ id: 2, name: "浑浊度", num: "--", unit: "NTU" },
|
|
{ id: 0, name: "溶解氧", num: "--", unit: "%" },
|
|
{ id: 0, name: "细菌", num: "--", unit: "%" },
|
|
{ id: 0, name: "病毒", num: "--", unit: "%" },
|
|
]);
|
|
// el-select切换获取新数据
|
|
const deviceChange = (val) => {
|
|
getItem(val);
|
|
};
|
|
// 获取传感器下监测项
|
|
const getItem = (val) => {
|
|
environmentItem({ id: val }).then((res) => {
|
|
list.value[0].num = res.data.noise;
|
|
list.value[1].num = res.data.windSpeed;
|
|
list.value[2].num = res.data.pm25;
|
|
list.value[3].num = res.data.temperature;
|
|
list.value[4].num = res.data.humidity;
|
|
list.value[5].num = res.data.pressure;
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
// 获取传感器list
|
|
environmentData({ buildingIdList: props.buildingId }).then((res) => {
|
|
deviceList.value = res.rows;
|
|
if (res.rows.length !== 0) {
|
|
searchData.value.itemId = deviceList.value[0].id;
|
|
getItem(deviceList.value[0].id);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style> |