From 66a279f8990859e42949310e6607f0a4476c1e1b Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 18 Apr 2025 10:39:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=B1=E5=9F=BA=E5=9D=91=E7=9B=91=E6=B5=8B?=
 =?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-foundation-pit.js                |  34 +++
 .../components/left-three-model.vue           |  89 ++++--
 .../components/left-two-model.vue             | 116 +++++---
 .../components/right-one-model.vue            |  36 ++-
 .../components/right-two-model.vue            | 280 +++++-------------
 .../components/left-one-model.vue             |   4 +-
 src/views/index.vue                           |   2 -
 7 files changed, 287 insertions(+), 274 deletions(-)
 create mode 100644 src/api/home-foundation-pit.js

diff --git a/src/api/home-foundation-pit.js b/src/api/home-foundation-pit.js
new file mode 100644
index 0000000..c125bf5
--- /dev/null
+++ b/src/api/home-foundation-pit.js
@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 深基坑监测  ---- 设备列表接口  左二
+export function getMassConcreteListAPI(data) {
+    return request({
+        url: '/smart-site/excavationDetection/getMassConcreteList',
+        method: 'post',
+        data,
+    })
+}
+// 深基坑监测  ---- 设备统计接口  右一
+export function getDevStatisticsAPI(data) {
+    return request({
+        url: '/smart-site/excavationDetection/getDevStatistics',
+        method: 'post',
+        data,
+    })
+}
+// 深基坑监测  ---- 报警信息  右二
+export function getConcreteAlarmListAPI(data) {
+    return request({
+        url: '/smart-site/excavationDetection/concreteAlarmList',
+        method: 'post',
+        data,
+    })
+}
+// 深基坑监测  ---- 监测温度变化值趋势接口  右二
+export function getTemperatureListAPI(data) {
+    return request({
+        url: '/smart-site/massConcrete/temperatureList',
+        method: 'post',
+        data,
+    })
+}
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 2ec305c..3c9e5e4 100644
--- a/src/views/home-foundation-pit/components/left-three-model.vue
+++ b/src/views/home-foundation-pit/components/left-three-model.vue
@@ -1,7 +1,7 @@
 <template>
-    <!-- 监测变化值趋势 -->
+    <!-- 监测温度变化值趋势 -->
     <div style="height: 100%">
-        <ChartsBox :boxTitle="`监测变化值趋势`">
+        <ChartsBox :boxTitle="`监测温度变化值趋势`">
             <div ref="chartContainer" class="container"> </div>
         </ChartsBox>
     </div>
@@ -9,20 +9,31 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getTemperatureListAPI } from '@/api/home-foundation-pit.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()
+        // })
+
+        this.getTemperatureListData()
     },
     beforeDestroy() {
         if (!this.chart) {
@@ -46,20 +57,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 +100,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 +205,40 @@ export default {
                 this.chart.resize()
             }
         },
+
+        async getTemperatureListData() {
+            const { data: res } = await getTemperatureListAPI({
+                typeId: '174435992023806894663',
+            })
+            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()
+            })
+        },
     },
 }
 </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 3726ed1..6e6c4d5 100644
--- a/src/views/home-foundation-pit/components/left-two-model.vue
+++ b/src/views/home-foundation-pit/components/left-two-model.vue
@@ -2,28 +2,37 @@
     <!-- 设备列表 -->
     <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-foundation-pit/line_big.png')}`
-                                : `${require('@/assets/image/home-foundation-pit/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/home-foundation-pit/line_big.png')}`
+                                    : `${require('@/assets/image/home-foundation-pit/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">
@@ -37,20 +46,33 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import EmptyModel from '@/components/EmptyModel/index.vue'
+import { getMassConcreteListAPI } from '@/api/home-foundation-pit.js'
 export default {
-    components: { ChartsBox },
+    components: { ChartsBox, EmptyModel },
     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: [],
         }
     },
+    methods: {
+        async getMassConcreteListData() {
+            const { data: res } = await getMassConcreteListAPI({
+                typeId: '174435992023806894663',
+            })
+
+            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
+        },
+    },
+    created() {
+        this.getMassConcreteListData()
+    },
 }
 </script>
 
@@ -58,15 +80,41 @@ 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;
@@ -80,7 +128,7 @@ export default {
         }
     }
 
-    & .device-item:nth-child(6n) {
+    & .device-item:nth-child(4n) {
         margin-right: 0;
     }
 }
@@ -88,7 +136,7 @@ export default {
 .case {
     font-size: 12px;
     position: absolute;
-    top: 10px;
+    top: 4px;
     right: 10px;
     display: flex;
     align-items: center;
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 1133dc8..1f48430 100644
--- a/src/views/home-foundation-pit/components/right-one-model.vue
+++ b/src/views/home-foundation-pit/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,40 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getDevStatisticsAPI } from '@/api/home-foundation-pit.js'
 export default {
     components: { ChartsBox },
     data() {
-        return {}
+        return {
+            allNum: 0,
+            onLineRate: 0,
+            online: 0,
+        }
+    },
+    methods: {
+        async getDevStatisticsData() {
+            const { data: res } = await getDevStatisticsAPI({
+                typeId: '174435992023806894663',
+            })
+
+            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)
+            // this.deviceList = res
+        },
+    },
+    created() {
+        this.getDevStatisticsData()
     },
 }
 </script>
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 189596d..9aee0bc 100644
--- a/src/views/home-foundation-pit/components/right-two-model.vue
+++ b/src/views/home-foundation-pit/components/right-two-model.vue
@@ -1,237 +1,85 @@
 <template>
     <div style="height: 100%">
         <ChartsBox :boxTitle="`报警信息`">
-            <div class="container">
+            <div class="container" v-if="config.data.length > 0">
                 <!-- <div class="feel-box"></div> -->
                 <dv-scroll-board class="dv-scr-board" :config="config" />
             </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 { getConcreteAlarmListAPI } from '@/api/home-foundation-pit.js'
 export default {
-    components: { ChartsBox },
+    components: { ChartsBox, EmptyModel },
+
     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>",
-                    ],
-                ],
-                rowNum: 10, //表格行数
-                // headerHeight: 35,
+                data: [],
+                rowNum: 5, //表格行数
+                headerHeight: 35,
                 headerBGC: 'rgba(21, 53, 81, 0.2)', //表头
                 oddRowBGC: '', //奇数行
                 evenRowBGC: '', //偶数行
-
-                columnWidth: [80],
                 align: ['center'],
                 hoverPause: true,
-                waitTime: 2000,
+                waitTime: 3000,
             },
         }
     },
+    methods: {
+        async getConcreteAlarmListData() {
+            const { data: res } = await getConcreteAlarmListAPI({
+                typeId: '174435992023806894663',
+            })
+            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.getConcreteAlarmListData()
+    },
 }
 </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%;
@@ -260,4 +108,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/components/left-one-model.vue b/src/views/home-high-formwork/components/left-one-model.vue
index 7a62195..c6411dc 100644
--- a/src/views/home-high-formwork/components/left-one-model.vue
+++ b/src/views/home-high-formwork/components/left-one-model.vue
@@ -94,7 +94,7 @@ export default {
     align-items: center;
     color: #fff;
     font-size: 12px;
-    transform: translateY(10px);
+    // transform: translateY(10px);
 
     // .device-item {
     //     display: flex;
@@ -159,7 +159,7 @@ export default {
 .case {
     font-size: 12px;
     position: absolute;
-    top: 10px;
+    top: 4px;
     right: 10px;
     display: flex;
     align-items: center;
diff --git a/src/views/index.vue b/src/views/index.vue
index 1a0c10f..29f892d 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,8 +1,6 @@
 <script>
 export default {
     created() {
-        // const { params, query } = this.$route
-        // const { path } = params
         this.$router.replace({ path: `${this.$router.options.base}/login` })
     },
     render: function (h) {