fix: 图片修改，增加组件等功能。

src/views/components/module/WaterQualityMonitor.vue

@@ -0,0 +1,74 @@
+<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>