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

---
 src/api/common.js                             |  12 +
 src/api/home-concrete.js                      |  65 +++++
 .../components/left-three-model.vue           |  89 ++++--
 .../components/left-two-model.vue             | 136 ++++++---
 .../components/right-one-model.vue            |  44 ++-
 .../components/right-three-model.vue          | 268 +++++-------------
 .../components/right-two-model.vue            |  63 +++-
 src/views/home-concrete/index.vue             | 121 +++++++-
 .../components/right-three-model.vue          |   4 +-
 .../components/right-two-model.vue            |   2 -
 10 files changed, 519 insertions(+), 285 deletions(-)
 create mode 100644 src/api/common.js
 create mode 100644 src/api/home-concrete.js

diff --git a/src/api/common.js b/src/api/common.js
new file mode 100644
index 0000000..24c3844
--- /dev/null
+++ b/src/api/common.js
@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+/* 下拉等公共接口 */
+
+// 获取监测区域
+export const getMonitoringAreaAPI = (data) => {
+    return request({
+        url: '/smart-site/constInfo/querySelected',
+        method: 'post',
+        data,
+    })
+}
diff --git a/src/api/home-concrete.js b/src/api/home-concrete.js
new file mode 100644
index 0000000..1c1ad0c
--- /dev/null
+++ b/src/api/home-concrete.js
@@ -0,0 +1,65 @@
+import request from '@/utils/request'
+
+// 高支模监测 ---- 设备列表接口  左二
+export function getMassConcreteListAPI(data) {
+    return request({
+        url: '/smart-site/massConcrete/getCollectDeviceList',
+        method: 'post',
+        data,
+    })
+}
+// 高支模监测 ---- 监测温度变化值趋势接口  左三
+export function temperatureListAPI(data) {
+    return request({
+        url: '/smart-site/massConcrete/temperatureList',
+        method: 'post',
+        data,
+    })
+}
+// 高支模监测 ---- 设备统计接口  右一
+export function getDevStatisticsAPI(data) {
+    return request({
+        url: '/smart-site/massConcrete/getDevStatistics',
+        method: 'post',
+        data,
+    })
+}
+// 高支模监测 ---- 区域设备统计接口  右二
+export function getCollectDeviceAllAPI(data) {
+    return request({
+        url: '/smart-site/massConcrete/getCollectDeviceAll',
+        method: 'post',
+        data,
+    })
+}
+// 高支模监测 ---- 报警信息接口  右三
+export function concreteAlarmListAPI(data) {
+    return request({
+        url: '/smart-site/massConcrete/concreteAlarmList',
+        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/views/home-concrete/components/left-three-model.vue b/src/views/home-concrete/components/left-three-model.vue
index 4b27ac8..7257d81 100644
--- a/src/views/home-concrete/components/left-three-model.vue
+++ b/src/views/home-concrete/components/left-three-model.vue
@@ -9,20 +9,29 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { temperatureListAPI } from '@/api/home-concrete.js'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
 export default {
     components: { ChartsBox },
+    props: {
+        deviceId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             chart: null,
+            xData: [],
+            yData: [],
         }
     },
     mounted() {
-        this.$nextTick(() => {
-            this.initChart()
-        })
+        // this.$nextTick(() => {
+        //     this.initChart()
+        // })
     },
     beforeDestroy() {
         if (!this.chart) {
@@ -46,20 +55,16 @@ 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: true },
-                    axisLabel: { color: '#4494db' },
+                    axisLabel: {
+                        color: '#4494db',
+                        overflow: 'truncate', // 溢出时显示省略号
+                        width: 60, // 标签最大宽度（单位px）
+                        ellipsis: '...', // 自定义省略符号（可选）
+                        interval: 0, // 强制显示所有标签
+                    },
                     axisLine: {
                         lineStyle: { color: '#4494db' },
                     },
@@ -93,20 +98,10 @@ export default {
                 },
                 series: [
                     {
-                        name: '数量',
+                        name: '温度',
                         type: 'line',
                         smooth: true, // 启用平滑曲线
-                        data: [
-                            { value: 12, name: '00:00' },
-                            { value: 25, name: '03:00' },
-                            { value: 30, name: '06:00' },
-                            { value: 18, name: '09:00' },
-                            { value: 12, name: '12:00' },
-                            { value: 16, name: '15:00' },
-                            { value: 19, name: '18:00' },
-                            { value: 23, name: '21:00' },
-                            { value: 13, name: '24:00' },
-                        ],
+                        data: this.yData,
                         itemStyle: {
                             color: '#15a0c6',
                         },
@@ -208,6 +203,46 @@ export default {
                 this.chart.resize()
             }
         },
+
+        async getTemperatureListData(id) {
+            const { data: res } = await temperatureListAPI({ 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) {
+                this.xData = res.map((e) => e.createTime)
+                this.yData = res.map((e) => {
+                    return {
+                        value: e.attrVal,
+                        name: e.createTime,
+                    }
+                })
+            } else {
+                this.xData = ['24:00']
+                this.yData = [
+                    {
+                        name: '24:00',
+                        value: 0,
+                    },
+                ]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
+    },
+    watch: {
+        deviceId: {
+            handler(newValue) {
+                this.getTemperatureListData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-concrete/components/left-two-model.vue b/src/views/home-concrete/components/left-two-model.vue
index 98fe81f..d0e9dee 100644
--- a/src/views/home-concrete/components/left-two-model.vue
+++ b/src/views/home-concrete/components/left-two-model.vue
@@ -2,28 +2,39 @@
     <!-- 设备列表 -->
     <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/home-concrete/line_big.png')}`
-                                : `${require('@/assets/image/home-concrete/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
+                        :key="index"
+                        class="device-item"
+                        v-for="(item, index) in deviceList"
+                        @click="onHandleSelectDevice(index, item.id)"
+                    >
+                        <img
+                            :src="
+                                item.isOnline == 1
+                                    ? `${require('@/assets/image/home-concrete/line_big.png')}`
+                                    : `${require('@/assets/image/home-concrete/offline_big.png')}`
+                            "
+                            alt=""
+                        />
+                        <span
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
+                        >
+                            {{ item.devName }}
+                        </span>
+                        <span
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
+                        >
+                            {{ item.devLocation }}
+                        </span>
+                    </div>
                 </div>
             </div>
+
+            <div class="container" v-else>
+                <EmptyModel />
+            </div>
         </ChartsBox>
 
         <div class="case">
@@ -37,20 +48,52 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import EmptyModel from '@/components/EmptyModel/index.vue'
+import { getMassConcreteListAPI } from '@/api/home-concrete.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: '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 getMassConcreteListData(id) {
+            const { data: res } = await getMassConcreteListAPI({ 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
+            if (res.length > 0) {
+                this.$emit('handleSelectDevice', res[0].id)
+            }
+        },
+
+        onHandleSelectDevice(index, id) {
+            console.log('点击')
+            this.activeIndex = index
+            this.$emit('handleSelectDevice', id)
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getMassConcreteListData(newValue)
+            },
+            deep: true,
+        },
+    },
 }
 </script>
 
@@ -58,21 +101,46 @@ export default {
 .container {
     height: 100%;
     display: flex;
-    // justify-content: space-around;
-    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
     color: #fff;
     font-size: 12px;
 
-    // transform: translateY(10px);
+    .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;
+        }
+    }
 
     .device-item {
-        width: calc((100% - 20px) / 6);
+        width: calc((100% - 20px) / 4);
         margin-right: 4px;
         margin-bottom: 4px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        cursor: pointer;
 
         img {
             width: 30px;
@@ -80,7 +148,7 @@ export default {
         }
     }
 
-    & .device-item:nth-child(6n) {
+    & .device-item:nth-child(4n) {
         margin-right: 0;
     }
 }
diff --git a/src/views/home-concrete/components/right-one-model.vue b/src/views/home-concrete/components/right-one-model.vue
index 1133dc8..b3c9c6f 100644
--- a/src/views/home-concrete/components/right-one-model.vue
+++ b/src/views/home-concrete/components/right-one-model.vue
@@ -10,7 +10,7 @@
                     />
                     <div>
                         <span>设备总数</span>
-                        <span>9999</span>
+                        <span>{{ allNum }}</span>
                     </div>
                 </div>
                 <div class="count-box">
@@ -20,7 +20,7 @@
                     />
                     <div>
                         <span>设备在线率</span>
-                        <span>50%</span>
+                        <span>{{ onLineRate }}%</span>
                     </div>
                 </div>
             </div>
@@ -30,10 +30,48 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getDevStatisticsAPI } from '@/api/home-concrete.js'
 export default {
     components: { ChartsBox },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
-        return {}
+        return {
+            allNum: 0,
+            onLineRate: 0,
+            online: 0,
+        }
+    },
+
+    methods: {
+        async getModelListData(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 { totalQuantity, onlineQuantity } = res
+            this.allNum = totalQuantity
+            this.online = onlineQuantity
+            this.onLineRate = isNaN(onlineQuantity / totalQuantity)
+                ? 0
+                : ((onlineQuantity / totalQuantity) * 100).toFixed(2)
+        },
+    },
+    watch: {
+        queryId: {
+            handler(newValue) {
+                this.getModelListData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-concrete/components/right-three-model.vue b/src/views/home-concrete/components/right-three-model.vue
index 218c8d9..a3d6ac0 100644
--- a/src/views/home-concrete/components/right-three-model.vue
+++ b/src/views/home-concrete/components/right-three-model.vue
@@ -11,221 +11,65 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
-
+import { concreteAlarmListAPI } from '@/api/home-concrete.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>",
-                    ],
-                ],
+                data: [],
                 rowNum: 5, //表格行数
-                // headerHeight: 35,
                 headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                 oddRowBGC: '', //奇数行
                 evenRowBGC: '', //偶数行
-
-                columnWidth: [80],
                 align: ['center'],
+                columnWidth: [],
                 hoverPause: true,
                 waitTime: 2000,
             },
         }
     },
+    methods: {
+        async concreteAlarmListData(id) {
+            const { data: res } = await concreteAlarmListAPI({ 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.concreteAlarmListData(newValue)
+            },
+            deep: true,
+        },
+    },
 }
 </script>
 
@@ -260,4 +104,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-concrete/components/right-two-model.vue b/src/views/home-concrete/components/right-two-model.vue
index 0c17ffa..27f0d1c 100644
--- a/src/views/home-concrete/components/right-two-model.vue
+++ b/src/views/home-concrete/components/right-two-model.vue
@@ -2,26 +2,49 @@
     <!-- 区域设备统计 -->
     <div style="height: 100%">
         <ChartsBox :boxTitle="`区域设备统计`">
-            <div ref="chartContainer" class="container"> </div>
+            <div
+                ref="chartContainer"
+                class="container"
+                v-if="barBarNameList.length > 0"
+            >
+            </div>
+
+            <div class="container" v-else>
+                <EmptyModel />
+            </div>
         </ChartsBox>
     </div>
 </template>
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import EmptyModel from '@/components/EmptyModel/index.vue'
+import { getCollectDeviceAllAPI } from '@/api/home-concrete.js'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
 export default {
-    components: { ChartsBox },
+    components: { ChartsBox, EmptyModel },
+    props: {
+        queryId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             chart: null,
+            barBarNameList: [],
+            barBarValueList: [],
         }
     },
     mounted() {
-        this.$nextTick(() => {
-            this.initChart()
+        Promise.all([this.getCollectDeviceAllData()]).then(() => {
+            this.$nextTick(() => {
+                if (this.barBarNameList.length > 0) {
+                    this.initChart()
+                }
+            })
         })
     },
     beforeDestroy() {
@@ -46,14 +69,7 @@ export default {
             this.chart.setOption({
                 yAxis: {
                     type: 'category',
-                    data: [
-                        '区域一',
-                        '区域二',
-                        '区域三',
-                        '区域四',
-                        '区域五',
-                        '区域六区域六区域六',
-                    ],
+                    data: this.barBarNameList,
                     axisTick: { show: false }, // 隐藏刻度线
                     axisLine: { show: false }, // 完全隐藏轴线
                     axisLabel: {
@@ -89,9 +105,9 @@ export default {
                 series: [
                     {
                         // 主系列（实际数据部分）
-                        name: '区域排名',
+                        name: '数量',
                         type: 'bar',
-                        data: [30, 40, 35, 45, 50, 60],
+                        data: this.barBarValueList,
                         barWidth: '40%',
                         itemStyle: {
                             color: new echarts.graphic.LinearGradient(
@@ -147,6 +163,24 @@ export default {
                 this.chart.resize()
             }
         },
+
+        async getCollectDeviceAllData() {
+            const { data: res } = await getCollectDeviceAllAPI({
+                typeId: '174435992023806894661',
+            })
+            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 data = res.sort((a, b) => a.num - b.num)
+                this.barBarNameList = data.map((e) => e.name)
+                this.barBarValueList = data.map((e) => e.num)
+            }
+        },
     },
 }
 </script>
@@ -160,5 +194,6 @@ export default {
     align-items: center;
     color: #fff;
     z-index: 2;
+    font-size: 16px;
 }
 </style>
diff --git a/src/views/home-concrete/index.vue b/src/views/home-concrete/index.vue
index 0f2882b..bc65366 100644
--- a/src/views/home-concrete/index.vue
+++ b/src/views/home-concrete/index.vue
@@ -5,20 +5,48 @@
             <LeftOneModel />
         </div>
         <div class="env-2">
-            <RightOneModel />
+            <RightOneModel :queryId="queryId" />
         </div>
         <div class="env-3">
-            <LeftTwoModel />
+            <LeftTwoModel
+                :queryId="queryId"
+                @handleSelectDevice="handleSelectDevice"
+            />
         </div>
         <div class="env-4">
-            <LeftThreeModel />
+            <LeftThreeModel :deviceId="deviceId" />
         </div>
         <div class="env-5">
             <RightTwoModel />
         </div>
         <div class="env-6">
-            <RightThreeModel />
+            <RightThreeModel :queryId="queryId" />
         </div>
+
+        <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 areaList"
+                :key="index"
+                @click="onHandleArea(item, index)"
+                :class="index === activeIndex ? 'active' : ''"
+            >
+                <div> {{ item.name }} </div>
+                <div> 设备号： {{ item.id }} </div>
+            </div>
+        </el-drawer>
+
+        <div
+            class="floating-box"
+            @click="drawer = true"
+            v-if="areaList.length > 1"
+        />
     </div>
 </template>
 
@@ -29,6 +57,8 @@ import LeftThreeModel from './components/left-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
+
+import { getMonitoringAreaAPI } from '@/api/common.js'
 export default {
     components: {
         LeftOneModel,
@@ -38,6 +68,42 @@ export default {
         RightTwoModel,
         RightThreeModel,
     },
+    data() {
+        return {
+            drawer: false,
+            activeIndex: 0,
+            queryId: '',
+            deviceId: '',
+            areaList: [],
+        }
+    },
+    methods: {
+        handleClose() {
+            this.drawer = false
+        },
+        async getMonitoringAreaData() {
+            const { data: res } = await getMonitoringAreaAPI({
+                typeId: '174435992023806894661',
+            })
+            if (res.length > 0) {
+                this.queryId = res[0].id
+            }
+
+            this.areaList = res
+        },
+        onHandleArea(item, index) {
+            this.activeIndex = index
+            this.queryId = item.id
+            this.drawer = false
+        },
+        handleSelectDevice(id) {
+            console.log('箭头', id)
+            this.deviceId = id
+        },
+    },
+    created() {
+        this.getMonitoringAreaData()
+    },
 }
 </script>
 
@@ -77,4 +143,51 @@ export default {
         grid-row: 8/ 12;
     }
 }
+
+::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;
+    border: 1px solid #0ff;
+    // box-shadow: inset 0 0 10px 6px rgba(4, 211, 255, 0.5);
+    box-shadow: inset 5px 0 10px 4px 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;
+}
+
+.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;
+}
 </style>
diff --git a/src/views/home-high-formwork/components/right-three-model.vue b/src/views/home-high-formwork/components/right-three-model.vue
index 23ed843..48d3485 100644
--- a/src/views/home-high-formwork/components/right-three-model.vue
+++ b/src/views/home-high-formwork/components/right-three-model.vue
@@ -172,7 +172,9 @@ export default {
     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);
+    border: 1px solid #0ff;
+    // box-shadow: inset 0 0 10px 6px rgba(4, 211, 255, 0.5);
+    box-shadow: inset 5px 0 10px 4px rgba(4, 211, 255, 0.5);
     overflow-y: auto; // 垂直滚动
     scrollbar-width: thin; // Firefox滚动条样式
     scrollbar-color: rgba(255, 255, 255, 0.3) transparent; // Firefox滚动条颜色
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 eab3a79..ecbaae3 100644
--- a/src/views/home-high-formwork/components/right-two-model.vue
+++ b/src/views/home-high-formwork/components/right-two-model.vue
@@ -29,8 +29,6 @@ export default {
                 headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                 oddRowBGC: '', //奇数行
                 evenRowBGC: '', //偶数行
-
-                columnWidth: [80],
                 align: ['center'],
                 hoverPause: true,
                 waitTime: 3000,