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

---
 src/api/home-high-formwork.js                 | 12 +++
 src/api/home-real-name-system.js              | 46 +++++++++++
 .../components/center-one-model.vue           | 82 ++++++++++++-------
 .../components/center-three-model.vue         | 80 ++++++++++++------
 .../components/center-two-model.vue           | 80 ++++++++++++------
 .../components/left-one-model.vue             | 28 +++----
 src/views/home-high-formwork/index.vue        | 15 +++-
 .../components/left-one-model.vue             | 20 ++++-
 vue.config.js                                 |  3 +-
 9 files changed, 262 insertions(+), 104 deletions(-)
 create mode 100644 src/api/home-real-name-system.js

diff --git a/src/api/home-high-formwork.js b/src/api/home-high-formwork.js
index 8e95180..4030f0b 100644
--- a/src/api/home-high-formwork.js
+++ b/src/api/home-high-formwork.js
@@ -15,6 +15,18 @@ export function getModeGroupAPI() {
         method: 'post',
     })
 }
+// 高支模监测 ---- 位移监测、沉降监测、重量监测接口
+/**
+ *
+ * @data  参数中有个 type字段 1、2、3 对应位移监测、沉降监测、重量监测
+ */
+export function getAttrListAPI(data) {
+    return request({
+        url: '/smart-site/screen/devModel/getAttrList',
+        method: 'post',
+        data,
+    })
+}
 // 高支模监测 ---- 设备统计接口  右二
 export function getDevStatisticsAPI(data) {
     return request({
diff --git a/src/api/home-real-name-system.js b/src/api/home-real-name-system.js
new file mode 100644
index 0000000..44c110e
--- /dev/null
+++ b/src/api/home-real-name-system.js
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 劳务实名制---- 单位人数统计接口  左一
+export function getSgUserByUnitAPI(data) {
+    return request({
+        url: '/smart-site/screen/subContract/getSgUserByUnit',
+        method: 'post',
+        data,
+    })
+}
+// 高支模监测 ---- 获取高支模分组
+// export function getModeGroupAPI() {
+//     return request({
+//         url: '/smart-site/screen/devModel/getModeGroup',
+//         method: 'post',
+//     })
+// }
+// // 高支模监测 ---- 位移监测、沉降监测、重量监测接口
+// /**
+//  *
+//  * @data  参数中有个 type字段 1、2、3 对应位移监测、沉降监测、重量监测
+//  */
+// export function getAttrListAPI(data) {
+//     return request({
+//         url: '/smart-site/screen/devModel/getAttrList',
+//         method: 'post',
+//         data,
+//     })
+// }
+// // 高支模监测 ---- 设备统计接口  右二
+// 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-high-formwork/components/center-one-model.vue b/src/views/home-high-formwork/components/center-one-model.vue
index 46a9fb9..41e9c40 100644
--- a/src/views/home-high-formwork/components/center-one-model.vue
+++ b/src/views/home-high-formwork/components/center-one-model.vue
@@ -12,18 +12,23 @@ import ChartsBox from '@/components/ChartsBox/index'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
+import { getAttrListAPI } from '@/api/home-high-formwork.js'
 export default {
     components: { ChartsBox },
+    props: {
+        queryLineId: {
+            type: [String, Number],
+            default: () => '',
+        },
+    },
     data() {
         return {
             chart: null,
+            xData: [],
+            yData: [],
         }
     },
-    mounted() {
-        this.$nextTick(() => {
-            this.initChart()
-        })
-    },
+    mounted() {},
     beforeDestroy() {
         if (!this.chart) {
             return
@@ -46,20 +51,10 @@ 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: '#fff' },
                     axisLine: {
                         lineStyle: { color: '#4494db' },
                     },
@@ -70,6 +65,7 @@ export default {
                     axisLine: {
                         lineStyle: { color: '#4494db' },
                     },
+                    axisLabel: { color: '#fff' },
                     // 添加y轴网格线虚线样式
                     splitLine: {
                         lineStyle: {
@@ -96,17 +92,7 @@ export default {
                         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: '#1AD8E6 ',
                         },
@@ -190,6 +176,46 @@ export default {
                 this.chart.resize()
             }
         },
+
+        async getAttrListData(devId) {
+            const { data: res } = await getAttrListAPI({
+                type: 1,
+                devId,
+            })
+
+            console.log(
+                `%c🔍 高支模监测 ----> 位移监测(中一) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                this.xData = res.map((e) => e.name)
+                this.yData = res
+            } else {
+                this.xData = ['暂无数据']
+                this.yData = [
+                    {
+                        name: '暂无数据',
+                        value: 0,
+                    },
+                ]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
+    },
+
+    watch: {
+        queryLineId: {
+            handler(newValue) {
+                this.getAttrListData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-high-formwork/components/center-three-model.vue b/src/views/home-high-formwork/components/center-three-model.vue
index 2ca437e..b48f45d 100644
--- a/src/views/home-high-formwork/components/center-three-model.vue
+++ b/src/views/home-high-formwork/components/center-three-model.vue
@@ -12,17 +12,26 @@ import ChartsBox from '@/components/ChartsBox/index'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
+import { getAttrListAPI } from '@/api/home-high-formwork.js'
 export default {
     components: { ChartsBox },
+    props: {
+        queryLineId: {
+            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,10 @@ 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: '#fff' },
                     axisLine: {
                         lineStyle: { color: '#4494db' },
                     },
@@ -67,6 +66,7 @@ export default {
                 },
                 yAxis: {
                     axisTick: { show: false },
+                    axisLabel: { color: '#fff' },
                     axisLine: {
                         lineStyle: { color: '#4494db' },
                     },
@@ -96,17 +96,7 @@ export default {
                         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: '#F1FF2B',
                         },
@@ -208,6 +198,44 @@ export default {
                 this.chart.resize()
             }
         },
+        async getAttrListData(devId) {
+            const { data: res } = await getAttrListAPI({
+                type: 3,
+                devId,
+            })
+
+            console.log(
+                `%c🔍 高支模监测 ----> 位移监测(中一) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                this.xData = res.map((e) => e.name)
+                this.yData = res
+            } else {
+                this.xData = ['暂无数据']
+                this.yData = [
+                    {
+                        name: '暂无数据',
+                        value: 0,
+                    },
+                ]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
+    },
+    watch: {
+        queryLineId: {
+            handler(newValue) {
+                this.getAttrListData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
diff --git a/src/views/home-high-formwork/components/center-two-model.vue b/src/views/home-high-formwork/components/center-two-model.vue
index a6676f5..f03c6a4 100644
--- a/src/views/home-high-formwork/components/center-two-model.vue
+++ b/src/views/home-high-formwork/components/center-two-model.vue
@@ -12,17 +12,26 @@ import ChartsBox from '@/components/ChartsBox/index'
 import * as echarts from 'echarts'
 // require('echarts/theme/macarons')
 import 'echarts/theme/macarons'
+import { getAttrListAPI } from '@/api/home-high-formwork.js'
 export default {
     components: { ChartsBox },
+    props: {
+        queryLineId: {
+            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,10 @@ 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: '#fff' },
                     axisLine: {
                         lineStyle: { color: '#4494db' },
                     },
@@ -67,6 +66,7 @@ export default {
                 },
                 yAxis: {
                     axisTick: { show: false },
+                    axisLabel: { color: '#fff' },
                     axisLine: {
                         lineStyle: { color: '#4494db' },
                     },
@@ -96,17 +96,7 @@ export default {
                         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: '#1A72E6',
                         },
@@ -208,6 +198,44 @@ export default {
                 this.chart.resize()
             }
         },
+        async getAttrListData(devId) {
+            const { data: res } = await getAttrListAPI({
+                type: 2,
+                devId,
+            })
+
+            console.log(
+                `%c🔍 高支模监测 ----> 位移监测(中一) 数据出参 %c`,
+                'background: linear-gradient(90deg, #FF6B6B, #4ECDC4); color: white; padding: 5px 10px; border-radius: 5px; font-weight: bold;',
+                '',
+                res,
+            )
+
+            if (res.length > 0) {
+                this.xData = res.map((e) => e.name)
+                this.yData = res
+            } else {
+                this.xData = ['暂无数据']
+                this.yData = [
+                    {
+                        name: '暂无数据',
+                        value: 0,
+                    },
+                ]
+            }
+
+            this.$nextTick(() => {
+                this.initChart()
+            })
+        },
+    },
+    watch: {
+        queryLineId: {
+            handler(newValue) {
+                this.getAttrListData(newValue)
+            },
+            deep: true,
+        },
     },
 }
 </script>
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 c6411dc..c624e10 100644
--- a/src/views/home-high-formwork/components/left-one-model.vue
+++ b/src/views/home-high-formwork/components/left-one-model.vue
@@ -8,6 +8,7 @@
                         class="device-item"
                         v-for="(item, index) in deviceList"
                         :key="index"
+                        @click="onHandleDevice(index, item.id)"
                     >
                         <img
                             :src="
@@ -18,12 +19,12 @@
                             alt=""
                         />
                         <span
-                            :style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
                         >
                             {{ item.devName }}
                         </span>
                         <span
-                            :style="item.isOnline == 1 ? 'color:#71C4FF' : ''"
+                            :style="activeIndex === index ? 'color:#0ff' : ''"
                         >
                             {{ item.devCode }}
                         </span>
@@ -60,6 +61,7 @@ export default {
     data() {
         return {
             deviceList: [],
+            activeIndex: 0,
         }
     },
     methods: {
@@ -72,8 +74,17 @@ export default {
                 res,
             )
 
+            if (res.length > 0) {
+                this.$emit('onQueryLineDataById', res[0].id)
+            }
+
             this.deviceList = res
         },
+        onHandleDevice(index, id) {
+            console.log(index, id, '996')
+            this.activeIndex = index
+            this.$emit('onQueryLineDataById', id)
+        },
     },
     watch: {
         queryId: {
@@ -94,19 +105,6 @@ export default {
     align-items: center;
     color: #fff;
     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; // 占据剩余空间
diff --git a/src/views/home-high-formwork/index.vue b/src/views/home-high-formwork/index.vue
index f12e02d..6f23320 100644
--- a/src/views/home-high-formwork/index.vue
+++ b/src/views/home-high-formwork/index.vue
@@ -2,10 +2,13 @@
     <!-- 高支模监测-->
     <div class="home-high-formwork">
         <div class="env-1">
-            <LeftOneModel :queryId="queryId" />
+            <LeftOneModel
+                :queryId="queryId"
+                @onQueryLineDataById="onQueryLineDataById"
+            />
         </div>
         <div class="env-2">
-            <CenterOneModel />
+            <CenterOneModel :queryLineId="queryLineId" />
         </div>
         <div class="env-3">
             <RightThreeModel @handleQueryById="handleQueryById" />
@@ -14,13 +17,13 @@
             <LeftTwoModel />
         </div>
         <div class="env-5">
-            <CenterTwoModel />
+            <CenterTwoModel :queryLineId="queryLineId" />
         </div>
         <div class="env-6">
             <RightOneModel :queryId="queryId" />
         </div>
         <div class="env-7">
-            <CenterThreeModel />
+            <CenterThreeModel :queryLineId="queryLineId" />
         </div>
         <div class="env-8">
             <RightTwoModel :queryId="queryId" />
@@ -53,12 +56,16 @@ export default {
     data() {
         return {
             queryId: null,
+            queryLineId: '',
         }
     },
     methods: {
         handleQueryById(id) {
             this.queryId = id
         },
+        onQueryLineDataById(id) {
+            this.queryLineId = id
+        },
     },
 }
 </script>
diff --git a/src/views/home-real-name-system/components/left-one-model.vue b/src/views/home-real-name-system/components/left-one-model.vue
index 1692e72..da01ade 100644
--- a/src/views/home-real-name-system/components/left-one-model.vue
+++ b/src/views/home-real-name-system/components/left-one-model.vue
@@ -4,7 +4,7 @@
         <ChartsBox :boxTitle="`单位人数统计`">
             <div class="container">
                 <div v-for="item in personList" :key="item.name">
-                    <span> {{ item.num }} </span>
+                    <span> {{ item.value }} </span>
                     <span> {{ item.name }} </span>
                 </div>
             </div>
@@ -14,17 +14,29 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getSgUserByUnitAPI } from '@/api/home-real-name-system.js'
 export default {
     components: { ChartsBox },
     data() {
         return {
             personList: [
-                { name: '建设单位人数', num: 99 },
-                { name: '施工单位人数', num: 99 },
-                { name: '监理单位人数', num: 99 },
+                // { name: '建设单位人数', num: 99 },
+                // { name: '施工单位人数', num: 99 },
+                // { name: '监理单位人数', num: 99 },
             ],
         }
     },
+    methods: {
+        async getSgUserByUnitData() {
+            const { data: res } = await getSgUserByUnitAPI()
+
+            this.personList = res
+            console.log('res', res)
+        },
+    },
+    created() {
+        this.getSgUserByUnitData()
+    },
 }
 </script>
 
diff --git a/vue.config.js b/vue.config.js
index 3925de4..affc373 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -24,7 +24,8 @@ module.exports = {
         open: true,
         proxy: {
             [process.env.VUE_APP_BASE_API]: {
-                target: 'http://192.168.0.60:38080', // 赵福海
+                // target: 'http://192.168.0.60:38080', // 赵福海
+                target: 'http://192.168.0.38:38080', // 郝志权
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: '',