From e44d28da1263f40fb4112926e3a3568f320bed9d Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 24 Apr 2025 18:05:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home-space-gas.js                     |  62 +++++
 .../components/right-two-model.vue            |   2 +-
 .../components/left-three-model.vue           |  15 +-
 .../components/left-two-model.vue             |  15 +-
 .../components/right-one-model.vue            |   2 +-
 .../components/right-two-model.vue            |   2 +-
 src/views/home-foundation-pit/index.vue       |  14 +-
 .../components/center-one-model.vue           |  48 +++-
 .../components/center-three-model.vue         |  67 ++++--
 .../components/center-two-model.vue           |  69 ++++--
 .../components/left-one-model.vue             |  72 +++---
 .../components/left-three-model.vue           |  68 ++++--
 .../components/left-two-model.vue             |  62 ++++-
 .../components/right-one-model.vue            | 221 ++++++------------
 src/views/home-space-gas/index.vue            |  24 +-
 vue.config.js                                 |   4 +-
 16 files changed, 494 insertions(+), 253 deletions(-)
 create mode 100644 src/api/home-space-gas.js

diff --git a/src/api/home-space-gas.js b/src/api/home-space-gas.js
new file mode 100644
index 0000000..2eb607e
--- /dev/null
+++ b/src/api/home-space-gas.js
@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 有限空间气体监测 ---- 设备列表接口  左1
+export function getHomeSpaceGasListAPI(data) {
+    return request({
+        url: '/smart-site/excavationDetection/getMassConcreteList',
+        method: 'post',
+        data,
+    })
+}
+// 有限空间气体监测 ---- 一氧化碳浓度接口  左2
+export function getCarbonMonoxideByIdAPI(data) {
+    return request({
+        url: '/smart-site/confinedSpaceGas/getCurveGraph',
+        method: 'post',
+        data,
+    })
+}
+// 有限空间气体监测 ---- 甲烷浓度接口  左3
+export function getMethaneDataByIdAPI(data) {
+    return request({
+        url: '/smart-site/confinedSpaceGas/getCurveGraph',
+        method: 'post',
+        data,
+    })
+}
+
+// 有限空间气体监测 ---- 实时数据变化接口  中1
+export function getRealDataByIdAPI(data) {
+    return request({
+        url: '/smart-site/confinedSpaceGas/realData',
+        method: 'post',
+        data,
+    })
+}
+
+// 有限空间气体监测 ---- 硫化氢浓度接口  中2
+export function getHydrogenSulfideDataByIdAPI(data) {
+    return request({
+        url: '/smart-site/confinedSpaceGas/getCurveGraph',
+        method: 'post',
+        data,
+    })
+}
+
+// 有限空间气体监测 ---- 氧气浓度接口  中3
+export function getOxygenDataByIdAPI(data) {
+    return request({
+        url: '/smart-site/confinedSpaceGas/getCurveGraph',
+        method: 'post',
+        data,
+    })
+}
+
+// 有限空间气体监测 ---- 报警信息接口  右1
+export function getWarningInfoAPI(data = {}) {
+    return request({
+        url: '/smart-site/excavationDetection/concreteAlarmList',
+        method: 'post',
+        data,
+    })
+}
diff --git a/src/views/home-concrete/components/right-two-model.vue b/src/views/home-concrete/components/right-two-model.vue
index 27f0d1c..00a8755 100644
--- a/src/views/home-concrete/components/right-two-model.vue
+++ b/src/views/home-concrete/components/right-two-model.vue
@@ -166,7 +166,7 @@ export default {
 
         async getCollectDeviceAllData() {
             const { data: res } = await getCollectDeviceAllAPI({
-                typeId: '174435992023806894661',
+                typeCode: '9000200',
             })
             console.log(
                 `%c🔍 大体积混凝土 ----> 区域设备统计(右二) 数据出参 %c`,
diff --git a/src/views/home-foundation-pit/components/left-three-model.vue b/src/views/home-foundation-pit/components/left-three-model.vue
index 3c9e5e4..b5bc9d5 100644
--- a/src/views/home-foundation-pit/components/left-three-model.vue
+++ b/src/views/home-foundation-pit/components/left-three-model.vue
@@ -32,8 +32,7 @@ export default {
         // this.$nextTick(() => {
         //     this.initChart()
         // })
-
-        this.getTemperatureListData()
+        // this.getTemperatureListData()
     },
     beforeDestroy() {
         if (!this.chart) {
@@ -206,9 +205,9 @@ export default {
             }
         },
 
-        async getTemperatureListData() {
+        async getTemperatureListData(id) {
             const { data: res } = await getTemperatureListAPI({
-                typeId: '174435992023806894663',
+                id,
             })
             console.log(
                 `%c🔍 深基坑监测 ----> 监测温度变化值趋势(右三) 数据出参 %c`,
@@ -240,6 +239,14 @@ export default {
             })
         },
     },
+    watch: {
+        deviceId: {
+            handler(newValue) {
+                this.getTemperatureListData(newValue)
+            },
+            deep: true,
+        },
+    },
 }
 </script>
 
diff --git a/src/views/home-foundation-pit/components/left-two-model.vue b/src/views/home-foundation-pit/components/left-two-model.vue
index 6e6c4d5..f134b9c 100644
--- a/src/views/home-foundation-pit/components/left-two-model.vue
+++ b/src/views/home-foundation-pit/components/left-two-model.vue
@@ -8,6 +8,7 @@
                         class="device-item"
                         v-for="(item, index) in deviceList"
                         :key="index"
+                        @click="onHandleSelectDevice(index, item.id)"
                     >
                         <img
                             :src="
@@ -18,12 +19,12 @@
                             alt=""
                         />
                         <span
-                            :style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
                         >
                             {{ item.devName }}
                         </span>
                         <span
-                            :style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
                         >
                             {{ item.devCode }}
                         </span>
@@ -53,12 +54,13 @@ export default {
     data() {
         return {
             deviceList: [],
+            activeIndex: 0,
         }
     },
     methods: {
         async getMassConcreteListData() {
             const { data: res } = await getMassConcreteListAPI({
-                typeId: '174435992023806894663',
+                typeCode: '9000300',
             })
 
             console.log(
@@ -68,6 +70,13 @@ export default {
                 res,
             )
             this.deviceList = res
+            if (res.length > 0) {
+                this.$emit('handleSelectDevice', res[0].id)
+            }
+        },
+        onHandleSelectDevice(index, id) {
+            this.activeIndex = index
+            this.$emit('handleSelectDevice', id)
         },
     },
     created() {
diff --git a/src/views/home-foundation-pit/components/right-one-model.vue b/src/views/home-foundation-pit/components/right-one-model.vue
index 1f48430..b99c842 100644
--- a/src/views/home-foundation-pit/components/right-one-model.vue
+++ b/src/views/home-foundation-pit/components/right-one-model.vue
@@ -43,7 +43,7 @@ export default {
     methods: {
         async getDevStatisticsData() {
             const { data: res } = await getDevStatisticsAPI({
-                typeId: '174435992023806894663',
+                typeCode: '9000300',
             })
 
             console.log(
diff --git a/src/views/home-foundation-pit/components/right-two-model.vue b/src/views/home-foundation-pit/components/right-two-model.vue
index 9aee0bc..a225bd6 100644
--- a/src/views/home-foundation-pit/components/right-two-model.vue
+++ b/src/views/home-foundation-pit/components/right-two-model.vue
@@ -38,7 +38,7 @@ export default {
     methods: {
         async getConcreteAlarmListData() {
             const { data: res } = await getConcreteAlarmListAPI({
-                typeId: '174435992023806894663',
+                typeCode: '9000300',
             })
             console.log(
                 `%c🔍  深基坑监测 ----> 报警信息(右二) 数据出参 %c`,
diff --git a/src/views/home-foundation-pit/index.vue b/src/views/home-foundation-pit/index.vue
index ddfe5b8..7aea732 100644
--- a/src/views/home-foundation-pit/index.vue
+++ b/src/views/home-foundation-pit/index.vue
@@ -8,10 +8,10 @@
             <RightOneModel />
         </div>
         <div class="env-3">
-            <LeftTwoModel />
+            <LeftTwoModel @handleSelectDevice="handleSelectDevice" />
         </div>
         <div class="env-4">
-            <LeftThreeModel />
+            <LeftThreeModel :deviceId="deviceId" />
         </div>
         <div class="env-5">
             <RightTwoModel />
@@ -33,6 +33,16 @@ export default {
         RightOneModel,
         RightTwoModel,
     },
+    data() {
+        return {
+            deviceId: '',
+        }
+    },
+    methods: {
+        handleSelectDevice(id) {
+            this.deviceId = id
+        },
+    },
 }
 </script>
 
diff --git a/src/views/home-space-gas/components/center-one-model.vue b/src/views/home-space-gas/components/center-one-model.vue
index f82fafa..7ca686f 100644
--- a/src/views/home-space-gas/components/center-one-model.vue
+++ b/src/views/home-space-gas/components/center-one-model.vue
@@ -22,38 +22,78 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getRealDataByIdAPI } from '@/api/home-space-gas'
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             gasList: [
                 {
                     name: '一氧化碳',
-                    num: 99,
+                    num: 0,
                     unit: '/ppm',
                     imgPath: require('@/assets/image/home-space-gas/gas1.png'),
                 },
                 {
                     name: '氧气',
-                    num: 99,
+                    num: 0,
                     unit: '/%VOL',
                     imgPath: require('@/assets/image/home-space-gas/gas2.png'),
                 },
                 {
                     name: '硫化氢',
-                    num: 99,
+                    num: 0,
                     unit: '/ppm',
                     imgPath: require('@/assets/image/home-space-gas/gas3.png'),
                 },
                 {
                     name: '甲烷',
-                    num: 99,
+                    num: 0,
                     unit: '/%',
                     imgPath: require('@/assets/image/home-space-gas/gas4.png'),
                 },
             ],
         }
     },
+    methods: {
+        async getRealDataByIdData(id) {
+            const { data: res } = await getRealDataByIdAPI({ devId: id })
+            console.log(
+                `%c🔍 有限空间气体监测 ----> 实时变化数据(中一) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (Object.keys(res).length > 0) {
+                for (const key in res) {
+                    this.gasList.forEach((item) => {
+                        if (item.name === key) {
+                            item.num = res[key] || 0
+                        }
+                    })
+                }
+            } else {
+                this.gasList.forEach((item) => {
+                    item.num = 0
+                })
+            }
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getRealDataByIdData(newValue)
+            },
+            deep: true,
+        },
+    },
 }
 </script>
 
diff --git a/src/views/home-space-gas/components/center-three-model.vue b/src/views/home-space-gas/components/center-three-model.vue
index 05b959e..75d0a84 100644
--- a/src/views/home-space-gas/components/center-three-model.vue
+++ b/src/views/home-space-gas/components/center-three-model.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 氧气浓度 -->
     <div style="height: 100%">
-        <ChartsBox :boxTitle="``">
+        <ChartsBox :boxTitle="`氧气浓度`">
             <div ref="chartContainer" class="container"> </div>
         </ChartsBox>
     </div>
@@ -12,11 +12,20 @@ import ChartsBox from '@/components/ChartsBox/index'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
+import { getOxygenDataByIdAPI } from '@/api/home-space-gas'
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             chart: null,
+            xData: [],
+            yData: [],
         }
     },
     mounted() {
@@ -46,19 +55,18 @@ export default {
             this.chart.setOption({
                 xAxis: {
                     type: 'category',
-                    data: [
-                        '18：16',
-                        '20：16',
-                        '23：16',
-                        '06：16',
-                        '09：16',
-                        '15：16',
-                        '19：16',
-                        '23：16',
-                    ],
+                    data: this.xData,
                     boundaryGap: true,
                     axisTick: { show: false },
-                    axisLabel: { color: '#fff' },
+                    axisLabel: {
+                        color: '#fff',
+                        show: true, // 确保显示
+                        interval: 0, // 强制显示所有标签
+                        fontSize: 12, // 调整字体大小
+                        width: 60, // 设置标签宽度
+                        overflow: 'truncate', // 超出部分显示为...
+                        ellipsis: '...', // 自定义省略符号（可选）
+                    },
                     axisLine: { lineStyle: { color: '#4494db' } },
                     splitLine: { show: false },
                 },
@@ -93,7 +101,7 @@ export default {
                         name: '年龄分布',
                         type: 'bar',
                         barWidth: '20%', // 控制柱宽
-                        data: [10, 20, 16, 19, 21, 20, 16, 19],
+                        data: this.yData,
                         itemStyle: {
                             color: new echarts.graphic.LinearGradient(
                                 0,
@@ -156,6 +164,39 @@ export default {
                 this.chart.resize()
             }
         },
+        async getOxygenDataByIdData(devId) {
+            const { data: res } = await getOxygenDataByIdAPI({
+                attrName: '氧气',
+                devId,
+            })
+
+            console.log(
+                `%c🔍 有限空间气体监测 ----> 氧气浓度(中三) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                this.xData = res.map((e) => e.createTime)
+                this.yData = res.map((e) => e.attrVal)
+            } else {
+                this.xData = ['暂无数据']
+                this.yData = [0]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getOxygenDataByIdData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-space-gas/components/center-two-model.vue b/src/views/home-space-gas/components/center-two-model.vue
index 8e154bc..58327ee 100644
--- a/src/views/home-space-gas/components/center-two-model.vue
+++ b/src/views/home-space-gas/components/center-two-model.vue
@@ -12,11 +12,20 @@ import ChartsBox from '@/components/ChartsBox/index'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
+import { getHydrogenSulfideDataByIdAPI } from '@/api/home-space-gas'
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             chart: null,
+            xData: [],
+            yData: [],
         }
     },
     mounted() {
@@ -46,25 +55,24 @@ export default {
             this.chart.setOption({
                 xAxis: {
                     type: 'category',
-                    data: [
-                        '00:00',
-                        '03:00',
-                        '06:00',
-                        '09:00',
-                        '12:00',
-                        '15:00',
-                        '18:00',
-                        '21:00',
-                        '24:00',
-                    ],
+                    data: this.xData,
                     boundaryGap: false,
                     axisTick: { show: false },
-                    axisLabel: { color: '#4494db' },
+                    // axisLabel: { color: '#4494db' },
                     axisLine: { lineStyle: { color: '#4494db' } },
                     splitLine: {
                         // 添加x轴虚线网格线
                         show: false,
                     },
+                    axisLabel: {
+                        color: '#fff',
+                        show: true, // 确保显示
+                        interval: 0, // 强制显示所有标签
+                        fontSize: 12, // 调整字体大小
+                        width: 60, // 设置标签宽度
+                        overflow: 'truncate', // 超出部分显示为...
+                        ellipsis: '...', // 自定义省略符号（可选）
+                    },
                 },
                 yAxis: {
                     axisTick: { show: false },
@@ -117,10 +125,10 @@ export default {
                 },
                 series: [
                     {
-                        name: '甲烷浓度',
+                        name: '硫化氢浓度',
                         type: 'line',
                         // smooth: true,
-                        data: [30, 40, 35, 30, 40, 35, 30, 40, 35],
+                        data: this.yData,
                         itemStyle: { color: '#30C9C9' },
                         lineStyle: { color: '#30C9C9', width: 2 },
                         areaStyle: {
@@ -171,6 +179,39 @@ export default {
                 this.chart.resize()
             }
         },
+        async getHydrogenSulfideDataByIdData(devId) {
+            const { data: res } = await getHydrogenSulfideDataByIdAPI({
+                attrName: '硫化氢',
+                devId,
+            })
+
+            console.log(
+                `%c🔍 有限空间气体监测 ----> 硫化氢浓度(中二) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                this.xData = res.map((e) => e.createTime)
+                this.yData = res.map((e) => e.attrVal)
+            } else {
+                this.xData = ['暂无数据']
+                this.yData = [0]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getHydrogenSulfideDataByIdData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-space-gas/components/left-one-model.vue b/src/views/home-space-gas/components/left-one-model.vue
index 8075de4..f61918d 100644
--- a/src/views/home-space-gas/components/left-one-model.vue
+++ b/src/views/home-space-gas/components/left-one-model.vue
@@ -5,23 +5,28 @@
             <div class="container">
                 <div class="scroll-container">
                     <div
+                        :key="index"
                         class="device-item"
                         v-for="(item, index) in deviceList"
-                        :key="index"
+                        @click="onHandleSelectDevice(index, item.id)"
                     >
                         <img
                             :src="
-                                item.onLine
+                                item.isOnline == 1
                                     ? `${require('@/assets/image/home-space-gas/line_big.png')}`
                                     : `${require('@/assets/image/home-space-gas/offline_big.png')}`
                             "
                             alt=""
                         />
-                        <span :style="item.onLine ? 'color:#71C4FF' : ''">
-                            {{ item.name }}
+                        <span
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
+                        >
+                            {{ item.devName }}
                         </span>
-                        <span :style="item.onLine ? 'color:#71C4FF' : ''">
-                            {{ item.code }}
+                        <span
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
+                        >
+                            {{ item.devCode }}
                         </span>
                     </div>
                 </div>
@@ -39,32 +44,42 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getHomeSpaceGasListAPI } from '@/api/home-space-gas'
 export default {
     components: { ChartsBox },
     data() {
         return {
-            deviceList: [
-                { name: '1号设备', code: 'YKD-231', onLine: true },
-                { name: '2号设备', code: 'YKD-233', onLine: true },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-            ],
+            deviceList: [],
+            activeIndex: 0,
         }
     },
+    methods: {
+        async getHomeSpaceGasListData() {
+            const { data: res } = await getHomeSpaceGasListAPI({
+                typeCode: '9000500',
+            })
+
+            console.log(
+                `%c🔍 有限空间气体监测 ----> 设备列表(左二) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+            this.deviceList = res
+
+            if (res.length > 0) {
+                this.$emit('handleSelectDevice', res[0].id)
+            }
+        },
+        onHandleSelectDevice(index, id) {
+            console.log('点击')
+            this.activeIndex = index
+            this.$emit('handleSelectDevice', id)
+        },
+    },
+    created() {
+        this.getHomeSpaceGasListData()
+    },
 }
 </script>
 
@@ -73,7 +88,6 @@ export default {
     height: 100%;
     padding: 12px 0;
     display: flex;
-    // justify-content: space-around;
 
     flex-direction: column; // 改为纵向排列
 
@@ -125,7 +139,7 @@ export default {
     // transform: translateY(10px);
 
     .device-item {
-        width: calc((100% - 20px) / 6);
+        width: calc((100% - 20px) / 4);
         margin-right: 4px;
         margin-bottom: 8px;
         display: flex;
@@ -139,7 +153,7 @@ export default {
         }
     }
 
-    & .device-item:nth-child(6n) {
+    & .device-item:nth-child(4n) {
         margin-right: 0;
     }
 }
diff --git a/src/views/home-space-gas/components/left-three-model.vue b/src/views/home-space-gas/components/left-three-model.vue
index 8413724..353dce2 100644
--- a/src/views/home-space-gas/components/left-three-model.vue
+++ b/src/views/home-space-gas/components/left-three-model.vue
@@ -12,11 +12,21 @@ import ChartsBox from '@/components/ChartsBox/index'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
+import { getMethaneDataByIdAPI } from '@/api/home-space-gas'
+
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             chart: null,
+            xData: [],
+            yData: [],
         }
     },
     mounted() {
@@ -46,25 +56,24 @@ export default {
             this.chart.setOption({
                 xAxis: {
                     type: 'category',
-                    data: [
-                        '00:00',
-                        '03:00',
-                        '06:00',
-                        '09:00',
-                        '12:00',
-                        '15:00',
-                        '18:00',
-                        '21:00',
-                        '24:00',
-                    ],
+                    data: this.xData,
                     boundaryGap: false,
                     axisTick: { show: false },
-                    axisLabel: { color: '#4494db' },
+                    // axisLabel: { color: '#4494db' },
                     axisLine: { lineStyle: { color: '#4494db' } },
                     splitLine: {
                         // 添加x轴虚线网格线
                         show: false,
                     },
+                    axisLabel: {
+                        color: '#fff',
+                        show: true, // 确保显示
+                        interval: 0, // 强制显示所有标签
+                        fontSize: 12, // 调整字体大小
+                        width: 60, // 设置标签宽度
+                        overflow: 'truncate', // 超出部分显示为...
+                        ellipsis: '...', // 自定义省略符号（可选）
+                    },
                 },
                 yAxis: {
                     axisTick: { show: false },
@@ -120,7 +129,7 @@ export default {
                         name: '甲烷浓度',
                         type: 'line',
                         smooth: true,
-                        data: [30, 40, 35, 45, 50, 32, 20, 13, 49],
+                        data: this.yData,
                         itemStyle: { color: '#306FFF' },
                         lineStyle: { color: '#306FFF', width: 2 },
                         areaStyle: {
@@ -171,6 +180,39 @@ export default {
                 this.chart.resize()
             }
         },
+        async getMethaneDataByIdData(devId) {
+            const { data: res } = await getMethaneDataByIdAPI({
+                attrName: '甲烷',
+                devId,
+            })
+
+            console.log(
+                `%c🔍 有限空间气体监测 ----> 甲烷浓度(左三) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                this.xData = res.map((e) => e.createTime)
+                this.yData = res.map((e) => e.attrVal)
+            } else {
+                this.xData = ['暂无数据']
+                this.yData = [0]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getMethaneDataByIdData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-space-gas/components/left-two-model.vue b/src/views/home-space-gas/components/left-two-model.vue
index 912fcc6..263e1d3 100644
--- a/src/views/home-space-gas/components/left-two-model.vue
+++ b/src/views/home-space-gas/components/left-two-model.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- 一氧化碳浓度 -->
     <div style="height: 100%">
-        <ChartsBox :boxTitle="``">
+        <ChartsBox :boxTitle="`一氧化碳浓度`">
             <div ref="chartContainer" class="container"> </div>
         </ChartsBox>
     </div>
@@ -12,11 +12,20 @@ import ChartsBox from '@/components/ChartsBox/index'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
+import { getCarbonMonoxideByIdAPI } from '@/api/home-space-gas'
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             chart: null,
+            xData: [],
+            yData: [],
         }
     },
     mounted() {
@@ -46,12 +55,20 @@ export default {
             this.chart.setOption({
                 xAxis: {
                     type: 'category',
-                    data: ['18：16', '20：16', '23：16', '06：16', '09：16'],
+                    data: this.xData,
                     boundaryGap: true,
                     axisTick: { show: false },
-                    axisLabel: { color: '#fff' },
+                    // axisLabel: { color: '#fff' },
                     axisLine: { lineStyle: { color: '#4494db' } },
                     splitLine: { show: false },
+                    axisLabel: {
+                        color: '#fff',
+                        show: true, // 确保显示
+                        interval: 0, // 强制显示所有标签
+                        fontSize: 12, // 调整字体大小
+                        width: 80, // 设置标签宽度
+                        overflow: 'break', // 文字超出时的处理方式
+                    },
                 },
                 yAxis: {
                     axisTick: { show: false },
@@ -81,13 +98,13 @@ export default {
                 },
                 series: [
                     {
-                        name: '年龄分布',
+                        name: '一氧化碳浓度',
                         type: 'pictorialBar', // 改为象形柱图
                         symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z', // 使用三角形符号
                         symbolOffset: [0, 0], // 符号偏移（垂直向上偏移50%）
                         symbolSize: ['80%', '100%'], // 符号尺寸（宽度60%，高度100%）
                         barWidth: '100%',
-                        data: [10, 20, 16, 19, 21],
+                        data: this.yData,
                         itemStyle: {
                             color: new echarts.graphic.LinearGradient(
                                 0,
@@ -135,12 +152,47 @@ export default {
                 })
             }, 500)
         },
+
+        async getCarbonMonoxideByIdData(devId) {
+            const { data: res } = await getCarbonMonoxideByIdAPI({
+                attrName: '一氧化碳',
+                devId,
+            })
+
+            console.log(
+                `%c🔍 有限空间气体监测 ----> 一氧化碳浓度(左二) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                this.xData = res.map((e) => e.createTime)
+                this.yData = res.map((e) => e.attrVal)
+            } else {
+                this.xData = ['暂无数据']
+                this.yData = [0]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
         handleResize() {
             if (this.chart) {
                 this.chart.resize()
             }
         },
     },
+
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getCarbonMonoxideByIdData(newValue)
+            },
+            deep: true,
+        },
+    },
 }
 </script>
 
diff --git a/src/views/home-space-gas/components/right-one-model.vue b/src/views/home-space-gas/components/right-one-model.vue
index 0fa5c40..f84a763 100644
--- a/src/views/home-space-gas/components/right-one-model.vue
+++ b/src/views/home-space-gas/components/right-one-model.vue
@@ -12,179 +12,68 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
-
+import { getWarningInfoAPI } from '@/api/home-space-gas'
 export default {
     components: { ChartsBox },
     data() {
         return {
             config: {
-                data: [
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件1',
-                        'dev-1',
-                        "<span  class='colorGrass'>↑75%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件2',
-                        'dev-2',
-                        "<span  class='colorRed'>↓33%</span>",
-                    ],
-                    [
-                        "<div class='img-box'><img src='" +
-                            require('@/assets/image/pro-view/red.png') +
-                            "' class='table-img red-img'><img src='" +
-                            require('@/assets/image/pro-view/three.png') +
-                            "' class='three-img'></div>",
-                        '组件3',
-                        'dev-3',
-                        "<span  class='colorGrass'>↑100%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件4',
-                        'rea-1',
-                        "<span  class='colorGrass'>↑94%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件5',
-                        'rea-2',
-                        "<span  class='colorGrass'>↑95%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        '组件6',
-                        'fix-2',
-                        "<span  class='colorGrass'>↑63%</span>",
-                    ],
-                ],
-                rowNum: 12, //表格行数
-                headerHeight: 35,
+                data: [],
+                rowNum: 15, //表格行数
+                // headerHeight: 60,
                 headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                 oddRowBGC: '', //奇数行
                 evenRowBGC: '', //偶数行
-
-                columnWidth: [80],
                 align: ['center'],
                 hoverPause: true,
-                waitTime: 5000,
+                waitTime: 3000,
             },
         }
     },
+    methods: {
+        async getWarningInfoData() {
+            const { data: res } = await getWarningInfoAPI({
+                typeCode: '9000500',
+            })
+            console.log(
+                `%c🔍  有限空间气体监测 ----> 报警信息(右一) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                console.log('996')
+
+                const newData = res.map((e) => [
+                    `<img src="${require('@/assets/image/pro-view/blue.png')}" class="table-img">`,
+                    `<span class="colorBlue">${e.remark}</span>`,
+                    `<span class="colorBlue">${e.devName}</span>`,
+                    `<span class="time-box colorBlue">${e.createTime}</span>`,
+                ])
+
+                // 替换整个 config 对象，触发组件更新
+                this.config = {
+                    ...this.config, // 保留原有配置
+                    data: newData, // 更新数据
+                }
+            }
+        },
+    },
+    created() {
+        this.getWarningInfoData()
+    },
 }
 </script>
 
 <style lang="scss" scoped>
 .container {
     height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    color: #fff;
+    font-size: 12px;
 
     .dv-scr-board {
         width: 100%;
@@ -213,4 +102,28 @@ export default {
     align-items: center;
     justify-content: center;
 }
+
+::v-deep .colorBlue {
+    color: #6aaef3 !important;
+    font-size: 14px !important;
+}
+
+::v-deep.colorRed {
+    color: #ff5534;
+    font-size: 12px !important;
+}
+
+::v-deep .time-box {
+    font-family: 'DS-TITle';
+    display: block;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+::v-deep .dv-scroll-board .rows .ceil {
+    width: auto !important;
+    min-width: 80px; /* 最小宽度 */
+}
 </style>
diff --git a/src/views/home-space-gas/index.vue b/src/views/home-space-gas/index.vue
index c18d2f8..d481e48 100644
--- a/src/views/home-space-gas/index.vue
+++ b/src/views/home-space-gas/index.vue
@@ -2,25 +2,25 @@
     <!-- 空间气体-->
     <div class="home-real-name-system">
         <div class="env-1">
-            <LeftOneModel />
+            <LeftOneModel @handleSelectDevice="handleSelectDevice" />
         </div>
         <div class="env-2">
-            <CenterOneModel />
+            <CenterOneModel :queryId="queryId" />
         </div>
         <div class="env-3">
-            <RightOneModel />
+            <RightOneModel :queryId="queryId" />
         </div>
         <div class="env-4">
-            <LeftTwoModel />
+            <LeftTwoModel :queryId="queryId" />
         </div>
         <div class="env-5">
-            <CenterTwoModel />
+            <CenterTwoModel :queryId="queryId" />
         </div>
         <div class="env-6">
-            <LeftThreeModel />
+            <LeftThreeModel :queryId="queryId" />
         </div>
         <div class="env-7">
-            <CenterThreeModel />
+            <CenterThreeModel :queryId="queryId" />
         </div>
     </div>
 </template>
@@ -45,6 +45,16 @@ export default {
         CenterThreeModel,
         RightOneModel,
     },
+    data() {
+        return {
+            queryId: '',
+        }
+    },
+    methods: {
+        handleSelectDevice(id) {
+            this.queryId = id
+        },
+    },
 }
 </script>
 
diff --git a/vue.config.js b/vue.config.js
index affc373..57b190b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -24,8 +24,8 @@ module.exports = {
         open: true,
         proxy: {
             [process.env.VUE_APP_BASE_API]: {
-                // target: 'http://192.168.0.60:38080', // 赵福海
-                target: 'http://192.168.0.38:38080', // 郝志权
+                target: 'http://192.168.0.60:38080', // 赵福海
+                // target: 'http://192.168.0.38:38080', // 郝志权
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: '',