From bf3e089a7fcb4a09a692a98e53d548ac94569039 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Thu, 17 Apr 2025 13:53:26 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E6=94=AF=E6=A8=A1=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=9F=BA=E7=A1=80=E6=8E=A5=E5=8F=A3=E8=B0=83?=
 =?UTF-8?q?=E8=AF=95=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home-high-formwork.js                 |  33 ++
 src/api/project-overview.js                   |  23 ++
 src/components/EmptyModel/index.vue           |  41 +++
 src/utils/request.js                          |   3 +-
 .../components/left-one-model.vue             | 137 ++++++--
 .../components/right-one-model.vue            |  43 ++-
 .../components/right-three-model.vue          | 196 +++++++++++
 .../components/right-two-model.vue            | 317 ++++--------------
 src/views/home-high-formwork/index.vue        |  29 +-
 .../components/right-one-model.vue            |  45 ++-
 .../components/right-three-model.vue          | 112 ++++---
 .../components/right-two-model.vue            |  81 ++++-
 vue.config.js                                 |   2 +-
 13 files changed, 708 insertions(+), 354 deletions(-)
 create mode 100644 src/api/home-high-formwork.js
 create mode 100644 src/api/project-overview.js
 create mode 100644 src/components/EmptyModel/index.vue
 create mode 100644 src/views/home-high-formwork/components/right-three-model.vue

diff --git a/src/api/home-high-formwork.js b/src/api/home-high-formwork.js
new file mode 100644
index 0000000..8e95180
--- /dev/null
+++ b/src/api/home-high-formwork.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 高支模监测 ---- 设备列表接口  左一
+export function getModelListAPI(data) {
+    return request({
+        url: '/smart-site/screen/devModel/getModelList',
+        method: 'post',
+        data,
+    })
+}
+// 高支模监测 ---- 获取高支模分组
+export function getModeGroupAPI() {
+    return request({
+        url: '/smart-site/screen/devModel/getModeGroup',
+        method: 'post',
+    })
+}
+// 高支模监测 ---- 设备统计接口  右二
+export function getDevStatisticsAPI(data) {
+    return request({
+        url: '/smart-site/screen/devModel/getDevStatistics',
+        method: 'post',
+        data,
+    })
+}
+// 高支模监测 ---- 报警信息接口  右三
+export function getWarnInfoAPI(data) {
+    return request({
+        url: '/smart-site/screen/devModel/getWarnInfo',
+        method: 'post',
+        data,
+    })
+}
diff --git a/src/api/project-overview.js b/src/api/project-overview.js
new file mode 100644
index 0000000..bbaa004
--- /dev/null
+++ b/src/api/project-overview.js
@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+// 项目全览 ---- 环境监测接口  右一
+export function getEnvironmentalDetectionAPI() {
+    return request({
+        url: '/smart-site/projectOverview/environmentalDetection',
+        method: 'get',
+    })
+}
+// 项目全览 ---- 感知设备接口  右二
+export function getTtSysUserCheckListAPI() {
+    return request({
+        url: '/smart-site/projectOverview/getTtSysUserCheckList',
+        method: 'get',
+    })
+}
+// 项目全览 ---- 报警信息接口  右三
+export function getDeviceAlarmListAPI() {
+    return request({
+        url: '/smart-site/projectOverview/deviceAlarmList',
+        method: 'get',
+    })
+}
diff --git a/src/components/EmptyModel/index.vue b/src/components/EmptyModel/index.vue
new file mode 100644
index 0000000..dc1a8fa
--- /dev/null
+++ b/src/components/EmptyModel/index.vue
@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="empty-box">
+            <img :src="url" alt="" />
+            暂无{{ emptyTitle }}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        emptyTitle: {
+            type: String,
+            default: () => '数据',
+        },
+    },
+    data() {
+        return {
+            url: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABpCAYAAACqCriYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYzOUJFRDg3MURCMzExRUJBQjE5QjZBNzRCNEYxRTY4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYzOUJFRDg4MURCMzExRUJBQjE5QjZBNzRCNEYxRTY4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjM5QkVEODUxREIzMTFFQkFCMTlCNkE3NEI0RjFFNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjM5QkVEODYxREIzMTFFQkFCMTlCNkE3NEI0RjFFNjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6LooW1AAAKmElEQVR42uxd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',
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-box {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    img {
+        width: 80px;
+        height: 60px;
+        margin-bottom: 8px;
+    }
+}
+</style>
diff --git a/src/utils/request.js b/src/utils/request.js
index 4895a2d..126c6d8 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -97,7 +97,8 @@ service.interceptors.response.use(
         // 未设置状态码则默认成功状态
         const code = res.data.code || 200
         // 获取错误信息
-        const msg = errorCode[code] || res.data.msg || errorCode['default']
+        const msg =
+            errorCode[code] || res.data.msg || res.msg || errorCode['default']
         // 二进制数据则直接返回
         if (
             res.request.responseType === 'blob' ||
diff --git a/src/views/home-high-formwork/components/left-one-model.vue b/src/views/home-high-formwork/components/left-one-model.vue
index 1caef77..7a62195 100644
--- a/src/views/home-high-formwork/components/left-one-model.vue
+++ b/src/views/home-high-formwork/components/left-one-model.vue
@@ -2,28 +2,38 @@
     <!-- 设备列表 -->
     <div style="height: 100%; position: relative">
         <ChartsBox :boxTitle="`设备列表`">
-            <div class="container">
-                <div
-                    class="device-item"
-                    v-for="(item, index) in deviceList"
-                    :key="index"
-                >
-                    <img
-                        :src="
-                            item.onLine
-                                ? `${require('@/assets/image/env-img/line_big.png')}`
-                                : `${require('@/assets/image/env-img/offline_big.png')}`
-                        "
-                        alt=""
-                    />
-                    <span :style="item.onLine ? 'color:#71C4FF' : ''">
-                        {{ item.name }}
-                    </span>
-                    <span :style="item.onLine ? 'color:#71C4FF' : ''">
-                        {{ item.code }}
-                    </span>
+            <div class="container" v-if="deviceList.length > 0">
+                <div class="scroll-container">
+                    <div
+                        class="device-item"
+                        v-for="(item, index) in deviceList"
+                        :key="index"
+                    >
+                        <img
+                            :src="
+                                item.isOnline == 1
+                                    ? `${require('@/assets/image/env-img/line_big.png')}`
+                                    : `${require('@/assets/image/env-img/offline_big.png')}`
+                            "
+                            alt=""
+                        />
+                        <span
+                            :style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
+                        >
+                            {{ item.devName }}
+                        </span>
+                        <span
+                            :style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
+                        >
+                            {{ item.devCode }}
+                        </span>
+                    </div>
                 </div>
             </div>
+
+            <div class="container" v-else>
+                <EmptyModel />
+            </div>
         </ChartsBox>
 
         <div class="case">
@@ -36,19 +46,43 @@
 </template>
 
 <script>
-import ChartsBox from '@/components/ChartsBox/index'
+import ChartsBox from '@/components/ChartsBox/index.vue'
+import EmptyModel from '@/components/EmptyModel/index.vue'
+import { getModelListAPI } from '@/api/home-high-formwork.js'
 export default {
-    components: { ChartsBox },
+    components: { ChartsBox, EmptyModel },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     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: '4号设备', code: 'YKD-236', onLine: true },
-            ],
+            deviceList: [],
         }
     },
+    methods: {
+        async getModelListData(id) {
+            const { data: res } = await getModelListAPI({ id })
+            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
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getModelListData(newValue)
+            },
+            deep: true,
+        },
+    },
 }
 </script>
 
@@ -62,7 +96,50 @@ export default {
     font-size: 12px;
     transform: translateY(10px);
 
+    // .device-item {
+    //     display: flex;
+    //     flex-direction: column;
+    //     align-items: center;
+    //     justify-content: center;
+
+    //     img {
+    //         width: 30px;
+    //         height: 30px;
+    //     }
+    // }
+
+    .scroll-container {
+        flex: 1; // 占据剩余空间
+        overflow-y: auto; // 垂直滚动
+        scrollbar-width: thin; // Firefox滚动条样式
+        scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
+        z-index: 9;
+        padding: 0 12px;
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        color: #fff;
+        font-size: 12px;
+
+        /* Webkit浏览器滚动条样式 */
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
+        }
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+    }
+
+    // transform: translateY(10px);
+
     .device-item {
+        width: calc((100% - 20px) / 4);
+        margin-right: 4px;
+        margin-bottom: 8px;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -73,6 +150,10 @@ export default {
             height: 30px;
         }
     }
+
+    & .device-item:nth-child(6n) {
+        margin-right: 0;
+    }
 }
 
 .case {
diff --git a/src/views/home-high-formwork/components/right-one-model.vue b/src/views/home-high-formwork/components/right-one-model.vue
index 1133dc8..94023fd 100644
--- a/src/views/home-high-formwork/components/right-one-model.vue
+++ b/src/views/home-high-formwork/components/right-one-model.vue
@@ -10,7 +10,7 @@
                     />
                     <div>
                         <span>设备总数</span>
-                        <span>9999</span>
+                        <span>{{ allNum || 0 }}</span>
                     </div>
                 </div>
                 <div class="count-box">
@@ -20,7 +20,7 @@
                     />
                     <div>
                         <span>设备在线率</span>
-                        <span>50%</span>
+                        <span>{{ onLineRate || 0 }}%</span>
                     </div>
                 </div>
             </div>
@@ -30,10 +30,47 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getDevStatisticsAPI } from '@/api/home-high-formwork.js'
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
-        return {}
+        return {
+            allNum: 0,
+            onLineRate: 0,
+            online: 0,
+        }
+    },
+    methods: {
+        async getDevStatisticsData(id) {
+            const { data: res } = await getDevStatisticsAPI({ id })
+            console.log(
+                `%c🔍 高支模监测 ----> 设备统计(右二) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+            const { allNum, online } = res
+            this.allNum = allNum
+            this.online = online
+            this.onLineRate = isNaN(online / allNum)
+                ? 0
+                : ((online / allNum) * 100).toFixed(2)
+        },
+    },
+
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getDevStatisticsData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-high-formwork/components/right-three-model.vue b/src/views/home-high-formwork/components/right-three-model.vue
new file mode 100644
index 0000000..23ed843
--- /dev/null
+++ b/src/views/home-high-formwork/components/right-three-model.vue
@@ -0,0 +1,196 @@
+<template>
+    <!-- 天气预报 -->
+    <div style="height: 100%">
+        <ChartsBox :boxTitle="`支护详情`">
+            <div class="container">
+                <div>
+                    <span>支护名称：</span>
+                    <span>{{ groupInfo.modelName || '暂无' }}</span>
+                </div>
+                <div>
+                    <span>支护状态：</span>
+                    <span>{{
+                        (groupInfo.modelState == 1 ? '在建' : '已拆除') ||
+                        '暂无'
+                    }}</span>
+                </div>
+                <div>
+                    <span>安全等级：</span>
+                    <span>{{ levelInfo[groupInfo.modeLevel] || '暂无' }}</span>
+                </div>
+                <div>
+                    <span>施工开始时间：</span>
+                    <span>{{ groupInfo.updateTime || '暂无' }}</span>
+                </div>
+                <div>
+                    <span>备注：</span>
+                    <span>{{ groupInfo.remark || '暂无' }}</span>
+                </div>
+
+                <div class="floating-box" @click="drawer = true" />
+            </div>
+        </ChartsBox>
+
+        <el-drawer
+            :with-header="false"
+            append-to-body
+            direction="rtl"
+            :visible.sync="drawer"
+            :before-close="handleClose"
+        >
+            <div
+                class="group-item"
+                v-for="(item, index) in groupList"
+                :key="index"
+                @click="onHandleGroup(item, index)"
+                :class="index === activeIndex ? 'active' : ''"
+            >
+                <div> {{ item.modelName }} </div>
+                <div
+                    :style="
+                        item.modelState == 1
+                            ? 'color:rgb(8, 202, 86)'
+                            : 'color:rgb(255, 50, 30)'
+                    "
+                >
+                    {{ item.modelState == 1 ? '在建' : '已拆除' }}
+                </div>
+            </div>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import ChartsBox from '@/components/ChartsBox/index'
+import { getModeGroupAPI } from '@/api/home-high-formwork.js'
+export default {
+    components: { ChartsBox },
+    data() {
+        return {
+            drawer: false,
+            groupList: [],
+            activeIndex: 0,
+            groupInfo: {
+                modelName: '',
+                modelState: '',
+                modeLevel: '',
+                updateTime: '',
+                remark: '',
+            },
+
+            levelInfo: {
+                1: '一级',
+                2: '二级',
+                3: '三级',
+            },
+        }
+    },
+    methods: {
+        handleClose() {
+            this.drawer = false
+        },
+        async getModeGroupData() {
+            const { data: res } = await getModeGroupAPI()
+            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.groupInfo = res[0]
+                this.$emit('handleQueryById', res[0].id)
+            }
+
+            this.groupList = res
+        },
+
+        onHandleGroup(item, index) {
+            this.groupInfo = item
+            this.activeIndex = index
+
+            // 触发自定义事件传递id
+            this.$emit('handleQueryById', item.id)
+            this.drawer = false
+        },
+    },
+    created() {
+        this.getModeGroupData()
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    align-items: center;
+    color: #fff;
+    position: relative;
+
+    div {
+        width: 100%;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        padding: 4px 14px;
+        text-align: left;
+
+        box-shadow: inset 0 0 10px -1px rgba(4, 211, 255, 0.5);
+
+        & span:first-child {
+            margin-right: 4px;
+            color: #04d3ff;
+        }
+    }
+
+    .floating-box {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: 30px;
+        height: 70px;
+        background: url('@/assets/image/home/close_icon.png') no-repeat;
+        background-size: 100% 100%;
+        transform: translateY(-50%);
+        z-index: 100;
+        cursor: pointer;
+    }
+}
+
+::v-deep .el-drawer.rtl {
+    // height: 80%;
+    width: 22% !important;
+    padding: 12px;
+    // top: 50%;
+    // transform: translateY(-50%);
+    background: rgba(26, 79, 104, 0.8);
+    color: #fff;
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+    box-shadow: inset 0 0 10px 6px rgba(4, 211, 255, 0.5);
+    overflow-y: auto; // 垂直滚动
+    scrollbar-width: thin; // Firefox滚动条样式
+    scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
+}
+
+.group-item {
+    width: 96%;
+    margin: 0 auto 10px;
+    border: 1px solid #3089b9;
+    cursor: pointer;
+
+    div {
+        padding: 6px 8px;
+        font-size: 14px;
+    }
+}
+
+.active {
+    border: 1px solid #0ff;
+}
+</style>
diff --git a/src/views/home-high-formwork/components/right-two-model.vue b/src/views/home-high-formwork/components/right-two-model.vue
index b10f9a7..eab3a79 100644
--- a/src/views/home-high-formwork/components/right-two-model.vue
+++ b/src/views/home-high-formwork/components/right-two-model.vue
@@ -11,257 +11,20 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
-
+import { getWarnInfoAPI } from '@/api/home-high-formwork.js'
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     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>",
-                    ],
-                    [
-                        "<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: 10, //表格行数
+                data: [],
+                rowNum: 5, //表格行数
                 headerHeight: 35,
                 headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                 oddRowBGC: '', //奇数行
@@ -270,10 +33,46 @@ export default {
                 columnWidth: [80],
                 align: ['center'],
                 hoverPause: true,
-                waitTime: 2000,
+                waitTime: 3000,
             },
         }
     },
+    methods: {
+        async getWarnInfoData(id) {
+            const { data: res } = await getWarnInfoAPI({ id })
+            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, // 更新数据
+                }
+            }
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getWarnInfoData(newValue)
+            },
+            deep: true,
+        },
+    },
 }
 </script>
 
@@ -308,4 +107,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-high-formwork/index.vue b/src/views/home-high-formwork/index.vue
index 521cb80..f12e02d 100644
--- a/src/views/home-high-formwork/index.vue
+++ b/src/views/home-high-formwork/index.vue
@@ -2,13 +2,13 @@
     <!-- 高支模监测-->
     <div class="home-high-formwork">
         <div class="env-1">
-            <LeftOneModel />
+            <LeftOneModel :queryId="queryId" />
         </div>
         <div class="env-2">
             <CenterOneModel />
         </div>
         <div class="env-3">
-            <RightOneModel />
+            <RightThreeModel @handleQueryById="handleQueryById" />
         </div>
         <div class="env-4">
             <LeftTwoModel />
@@ -17,11 +17,14 @@
             <CenterTwoModel />
         </div>
         <div class="env-6">
-            <RightTwoModel />
+            <RightOneModel :queryId="queryId" />
         </div>
         <div class="env-7">
             <CenterThreeModel />
         </div>
+        <div class="env-8">
+            <RightTwoModel :queryId="queryId" />
+        </div>
     </div>
 </template>
 
@@ -35,6 +38,7 @@ import CenterThreeModel from './components/center-three-model.vue' // 中3
 
 import RightOneModel from './components/right-one-model.vue' // 右1
 import RightTwoModel from './components/right-two-model.vue' // 右2
+import RightThreeModel from './components/right-three-model.vue' // 右2
 export default {
     components: {
         LeftOneModel,
@@ -44,6 +48,17 @@ export default {
         CenterThreeModel,
         RightOneModel,
         RightTwoModel,
+        RightThreeModel,
+    },
+    data() {
+        return {
+            queryId: null,
+        }
+    },
+    methods: {
+        handleQueryById(id) {
+            this.queryId = id
+        },
     },
 }
 </script>
@@ -69,7 +84,7 @@ export default {
     }
     .env-3 {
         grid-column: 9 / 12;
-        grid-row: 1 / 4;
+        grid-row: 1 / 5;
     }
     .env-4 {
         grid-column: 1 / 4;
@@ -81,11 +96,15 @@ export default {
     }
     .env-6 {
         grid-column: 9 / 12;
-        grid-row: 4 / 13;
+        grid-row: 5 / 8;
     }
     .env-7 {
         grid-column: 4 / 9;
         grid-row: 9/ 13;
     }
+    .env-8 {
+        grid-column: 9 / 12;
+        grid-row: 8/ 13;
+    }
 }
 </style>
diff --git a/src/views/home-overview/components/right-one-model.vue b/src/views/home-overview/components/right-one-model.vue
index a55a459..29decca 100644
--- a/src/views/home-overview/components/right-one-model.vue
+++ b/src/views/home-overview/components/right-one-model.vue
@@ -13,8 +13,8 @@
                     </div>
                     <div class="env-bg">
                         <div class="count">
-                            <span> 50 </span>
-                            <span>% </span>
+                            <span> {{ item.count }} </span>
+                            <span>{{ item.unit }}</span>
                         </div>
                         <div class="title">
                             {{ item.title }}
@@ -28,6 +28,7 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getEnvironmentalDetectionAPI } from '@/api/project-overview.js'
 export default {
     components: { ChartsBox },
     data() {
@@ -36,31 +37,60 @@ export default {
                 {
                     title: '温度',
                     icon: require('@/assets/image/pro-view/env1.png'),
-                    count: 50,
+                    count: 0,
+                    unit: '℃',
                 },
                 {
                     title: '风速',
                     icon: require('@/assets/image/pro-view/env2.png'),
-                    count: 50,
+                    count: 0,
+                    unit: 'm/s',
                 },
                 {
                     title: '湿度',
                     icon: require('@/assets/image/pro-view/env3.png'),
-                    count: 50,
+                    count: 0,
+                    unit: '%',
                 },
                 {
                     title: 'PM2.5',
                     icon: require('@/assets/image/pro-view/env4.png'),
-                    count: 50,
+                    count: 0,
+                    unit: 'ug/m³',
                 },
                 {
                     title: '噪音',
                     icon: require('@/assets/image/pro-view/env5.png'),
-                    count: 50,
+                    count: 0,
+                    unit: 'DB',
                 },
             ],
         }
     },
+
+    methods: {
+        async getEnvironmentalDetectionData() {
+            const { data: res } = await getEnvironmentalDetectionAPI()
+
+            console.log(
+                `%c🔍 项目全览 ----> 环境监测(右一) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            const { temperature, windSpeed, humidity, pm, noise } = res
+            this.envList[0].count = temperature
+            this.envList[1].count = windSpeed
+            this.envList[2].count = humidity
+            this.envList[3].count = pm
+            this.envList[4].count = noise
+        },
+    },
+
+    created() {
+        this.getEnvironmentalDetectionData()
+    },
 }
 </script>
 
@@ -104,6 +134,7 @@ export default {
 
             .count {
                 margin: 14px 0 6px 0;
+                font-family: 'DS-TITle';
                 & span:first-child {
                     font-size: 18px;
                     font-weight: bold;
diff --git a/src/views/home-overview/components/right-three-model.vue b/src/views/home-overview/components/right-three-model.vue
index a017b49..ddcf413 100644
--- a/src/views/home-overview/components/right-three-model.vue
+++ b/src/views/home-overview/components/right-three-model.vue
@@ -11,77 +11,57 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getDeviceAlarmListAPI } from '@/api/project-overview.js'
 
 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>",
-                    ],
-                ],
+                data: [],
                 rowNum: 5, //表格行数
                 headerHeight: 35,
                 headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                 oddRowBGC: '', //奇数行
                 evenRowBGC: '', //偶数行
 
-                columnWidth: [80],
+                columnWidth: [],
                 align: ['center'],
                 hoverPause: true,
-                waitTime: 5000,
+                waitTime: 3000,
             },
         }
     },
+
+    methods: {
+        async getDeviceAlarmListData() {
+            const { data: res } = await getDeviceAlarmListAPI()
+            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) {
+                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.getDeviceAlarmListData()
+    },
 }
 </script>
 
@@ -116,4 +96,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-overview/components/right-two-model.vue b/src/views/home-overview/components/right-two-model.vue
index b51dec6..f5f7610 100644
--- a/src/views/home-overview/components/right-two-model.vue
+++ b/src/views/home-overview/components/right-two-model.vue
@@ -5,24 +5,27 @@
                 <div class="feel-box">
                     <div class="total item-box">
                         <div> 感知设备总数 </div>
-                        <div> 999 </div>
+                        <div> {{ totalQuantity }} </div>
                     </div>
                     <div class="total-2 item-box">
-                        <div> 感知设备总数 </div>
-                        <div> 999 </div>
+                        <div> 设备总在线数 </div>
+                        <div> {{ onlineQuantity }} </div>
                     </div>
                     <div class="err-total item-box">
-                        <div> 感知设备总数 </div>
-                        <div> 999 </div>
+                        <div> 设备异常总数 </div>
+                        <div> {{ totalExceptionCount }} </div>
                     </div>
                     <div class="warn-total item-box">
-                        <div> 感知设备总数 </div>
-                        <div> 999 </div>
+                        <div> 设备报警次数 </div>
+                        <div> {{ deviceAlarms }} </div>
                     </div>
 
                     <div class="line-total item-box">
                         <div> 设备在线率 </div>
-                        <div> 99<span style="font-size: 13px">%</span> </div>
+                        <div>
+                            {{ deviceOnLineRatio }}
+                            <span style="font-size: 13px">%</span>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -32,8 +35,69 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getTtSysUserCheckListAPI } from '@/api/project-overview.js'
 export default {
     components: { ChartsBox },
+    data() {
+        return {
+            /**
+             * 感知设备总数
+             */
+            totalQuantity: 0,
+
+            /**
+             * 设备在线总数
+             */
+            onlineQuantity: 0,
+
+            /**
+             * 设备异常总数
+             */
+            totalExceptionCount: 0,
+
+            /**
+             * 设备报警次数
+             */
+            deviceAlarms: 0,
+
+            /**
+             * 设备在线率
+             */
+            deviceOnLineRatio: 0,
+        }
+    },
+    methods: {
+        async getTtSysUserCheckListData() {
+            const { data: res } = await getTtSysUserCheckListAPI()
+            console.log(
+                `%c🔍 项目全览 ----> 感知设备(右二) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            const {
+                totalQuantity,
+                onlineQuantity,
+                totalExceptionCount,
+                deviceAlarms,
+            } = res
+            this.totalQuantity = totalQuantity
+            this.onlineQuantity = onlineQuantity
+            this.totalExceptionCount = totalExceptionCount
+            this.deviceAlarms = deviceAlarms
+
+            this.deviceOnLineRatio = isNaN(
+                (onlineQuantity / totalQuantity).toFixed(2),
+            )
+                ? 0
+                : ((onlineQuantity / totalQuantity) * 100).toFixed(2)
+        },
+    },
+
+    created() {
+        this.getTtSysUserCheckListData()
+    },
 }
 </script>
 
@@ -66,6 +130,7 @@ export default {
                 margin-top: 6px;
                 font-size: 18px;
                 font-weight: bold;
+                font-family: 'DS-TITle';
             }
         }
 
diff --git a/vue.config.js b/vue.config.js
index 1edf2ae..3925de4 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -24,7 +24,7 @@ module.exports = {
         open: true,
         proxy: {
             [process.env.VUE_APP_BASE_API]: {
-                target: 'http://192.168.0.60:38080',
+                target: 'http://192.168.0.60:38080', // 赵福海
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: '',