diff --git a/src/views/laboratory/overview/components/monitorData.vue b/src/views/laboratory/overview/components/monitorData.vue
new file mode 100644
index 0000000..54b2b9d
--- /dev/null
+++ b/src/views/laboratory/overview/components/monitorData.vue
@@ -0,0 +1,102 @@
+<!-- 监控数据组件 -->
+<script setup lang="ts" name="LabMonitorData">
+const props = defineProps({
+  background: { // 背景颜色
+    type: String,
+    default: 'rgba(247, 105, 50, 0.3)',
+  },
+  top: { // 绝对定位top
+    type: String,
+    default: '60%',
+  },
+  left: { // 绝对定位left
+    type: String,
+    default: '20%',
+  },
+  title: { // 标题
+    type: String,
+    default: '温湿度计量工作间(内)',
+  },
+  equipmentNoList: { // 设备编号数组
+    type: Array,
+    default: () => ['sbbh123455266', 'sbbh789456123'],
+  },
+  temperature: { // 温度
+    type: String,
+    default: '',
+  },
+  humidity: { // 湿度
+    type: String,
+    default: '',
+  },
+  voltage: { // 电压
+    type: String,
+    default: '',
+  },
+  smoke: { // 烟雾
+    type: String,
+    default: '',
+  },
+  oxygen: { // 氧气
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="lab-monitor-data" :style="{ background, top, left }">
+    <div class="title">
+      {{ props.title }}
+    </div>
+    <div v-for="(item, index) in props.equipmentNoList" :key="index" class="equipment-no">
+      {{ item }}
+    </div>
+    <!-- 温度  -->
+    <div v-if=" props.temperature" class="data">
+      <span>温度:ㅤ<span class="text"> {{ props.temperature }}</span></span>
+    </div>
+    <!-- 温度  -->
+    <div v-if=" props.humidity" class="data">
+      <span>温度:ㅤ<span class="text"> {{ props.humidity }}</span></span>
+    </div>
+    <!-- 电压  -->
+    <div v-if=" props.voltage" class="data">
+      <span>电压:ㅤ<span class="text"> {{ props.voltage }}</span></span>
+    </div>
+    <!-- 温度  -->
+    <div v-if=" props.smoke" class="data">
+      <span>烟雾:ㅤ<span class="text"> {{ props.smoke }}</span></span>
+    </div>
+    <!-- 氧气  -->
+    <div v-if=" props.oxygen" class="data">
+      <span>氧气:ㅤ<span class="text"> {{ props.oxygen }}</span></span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.lab-monitor-data {
+  position: absolute;
+  padding: 8px 10px;
+  border-radius: 4px;
+
+  .title {
+    font-weight: 600;
+    font-size: 11px;
+    margin-bottom: 6px;
+  }
+
+  .equipment-no {
+    font-size: 10px;
+  }
+
+  .data {
+    font-size: 11px;
+
+    .text {
+      font-weight: 600;
+    }
+  }
+}
+</style>

diff --git a/src/views/laboratory/overview/components/monitorData.vue b/src/views/laboratory/overview/components/monitorData.vue
new file mode 100644
index 0000000..54b2b9d
--- /dev/null
+++ b/src/views/laboratory/overview/components/monitorData.vue
@@ -0,0 +1,102 @@
+<!-- 监控数据组件 -->
+<script setup lang="ts" name="LabMonitorData">
+const props = defineProps({
+  background: { // 背景颜色
+    type: String,
+    default: 'rgba(247, 105, 50, 0.3)',
+  },
+  top: { // 绝对定位top
+    type: String,
+    default: '60%',
+  },
+  left: { // 绝对定位left
+    type: String,
+    default: '20%',
+  },
+  title: { // 标题
+    type: String,
+    default: '温湿度计量工作间(内)',
+  },
+  equipmentNoList: { // 设备编号数组
+    type: Array,
+    default: () => ['sbbh123455266', 'sbbh789456123'],
+  },
+  temperature: { // 温度
+    type: String,
+    default: '',
+  },
+  humidity: { // 湿度
+    type: String,
+    default: '',
+  },
+  voltage: { // 电压
+    type: String,
+    default: '',
+  },
+  smoke: { // 烟雾
+    type: String,
+    default: '',
+  },
+  oxygen: { // 氧气
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="lab-monitor-data" :style="{ background, top, left }">
+    <div class="title">
+      {{ props.title }}
+    </div>
+    <div v-for="(item, index) in props.equipmentNoList" :key="index" class="equipment-no">
+      {{ item }}
+    </div>
+    <!-- 温度  -->
+    <div v-if=" props.temperature" class="data">
+      <span>温度:ㅤ<span class="text"> {{ props.temperature }}</span></span>
+    </div>
+    <!-- 温度  -->
+    <div v-if=" props.humidity" class="data">
+      <span>温度:ㅤ<span class="text"> {{ props.humidity }}</span></span>
+    </div>
+    <!-- 电压  -->
+    <div v-if=" props.voltage" class="data">
+      <span>电压:ㅤ<span class="text"> {{ props.voltage }}</span></span>
+    </div>
+    <!-- 温度  -->
+    <div v-if=" props.smoke" class="data">
+      <span>烟雾:ㅤ<span class="text"> {{ props.smoke }}</span></span>
+    </div>
+    <!-- 氧气  -->
+    <div v-if=" props.oxygen" class="data">
+      <span>氧气:ㅤ<span class="text"> {{ props.oxygen }}</span></span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.lab-monitor-data {
+  position: absolute;
+  padding: 8px 10px;
+  border-radius: 4px;
+
+  .title {
+    font-weight: 600;
+    font-size: 11px;
+    margin-bottom: 6px;
+  }
+
+  .equipment-no {
+    font-size: 10px;
+  }
+
+  .data {
+    font-size: 11px;
+
+    .text {
+      font-weight: 600;
+    }
+  }
+}
+</style>
diff --git a/src/views/laboratory/overview/index.vue b/src/views/laboratory/overview/index.vue
index 30a6d4f..a6cf254 100644
--- a/src/views/laboratory/overview/index.vue
+++ b/src/views/laboratory/overview/index.vue
@@ -3,6 +3,7 @@
 import type { Ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import MessageCom from './components/message.vue'
+import monitorData from './components/monitorData.vue'
 import type { IList, IListQuery } from '@/views/laboratory/alarm/current/list-interface'
 import type { TableColumn } from '@/components/NormalTable/table_interface'
 import { operateAlarm } from '@/api/laboratory/alarm/current'
@@ -177,6 +178,29 @@
     })
 }
 
+// --------------------------------------图----------------------------------------------------------
+const temperatureHumidityRoomIn = ref({ // 温湿度计量工作间（内）
+  temperature: '23℃', // 温度
+  humidity: '42%', // 湿度
+  voltage: '220V', // 电压
+  smoke: '12', // 烟雾
+})
+const temperatureHumidityRoomOut = ref({ // 温湿度计量工作间(外)
+  temperature: '12℃', // 温度
+  humidity: '23%', // 湿度
+  voltage: '110V', // 电压
+})
+
+const dangerousGoodsStore = ref({ // 危险品仓库
+  smoke: '100', // 烟雾
+})
+
+const electricalMetrologyRoom = ref({ // 电学计量工作间
+  temperature: '23℃', // 温度
+  humidity: '42%', // 湿度
+  voltage: '220V', // 电压
+})
+
 // ------------------------------------钩子----------------------------------------------------------
 onMounted(() => {
   fetchData()
@@ -185,9 +209,45 @@
 
 <template>
   <message-com />
-  <div style="width: 100%; box-sizing: border-box;">
+  <div style="width: 100%; box-sizing: border-box;position: relative;">
     <img src="../../../assets/images/lab.png" style="width: 100%;margin-top: -50px;margin-left: -10px;">
     <!-- 温湿度计量工作间（内） -->
+    <monitor-data
+      title="温湿度计量工作间(内)"
+      top="9%"
+      left="78%"
+      :temperature="temperatureHumidityRoomIn.temperature"
+      :humidity="temperatureHumidityRoomIn.humidity"
+      :voltage="temperatureHumidityRoomIn.voltage"
+      :smoke="temperatureHumidityRoomIn.smoke"
+    />
+    <!-- 温湿度计量工作间（外） -->
+    <monitor-data
+      title="温湿度计量工作间(外)"
+      top="9%"
+      left="66%"
+      :temperature="temperatureHumidityRoomOut.temperature"
+      :humidity="temperatureHumidityRoomOut.humidity"
+      :voltage="temperatureHumidityRoomOut.voltage"
+      background="rgba(24, 209, 108, 0.3)"
+    />
+    <!-- 危险品仓库 -->
+    <monitor-data
+      title="危险品仓库"
+      top="9%"
+      left="56%"
+      :smoke="dangerousGoodsStore.smoke"
+    />
+    <!-- 电学计量工作间 -->
+    <monitor-data
+      title="电学计量工作间"
+      top="9%"
+      left="45%"
+      :temperature="electricalMetrologyRoom.temperature"
+      :humidity="electricalMetrologyRoom.humidity"
+      :voltage="electricalMetrologyRoom.voltage"
+      background="rgba(24, 209, 108, 0.3)"
+    />
   </div>
   <div style="padding: 0 10px 40px; box-sizing: border-box;">
     <el-radio-group v-model="current" style="margin-bottom: 20px;">