塔吊监测

src/api/home-tower-crane.js

@@ -0,0 +1,31 @@
+import request from '@/utils/request'
+
+// 塔吊监测 ---- 设备列表接口  左1+2+中间
+export function getConstDeviceListAPI(data = JSON.stringify({})) {
+    return request({
+        url: '/smart-site/towerCraneDetection/getConstDeviceList',
+        method: 'post',
+        data,
+    })
+}
+
+// 塔吊监测 ---- 设备统计接口  左3
+export function getTowerCraneRunMsgByIdAPI(data) {
+    return request({
+        url: '/smart-site/towerCraneDetection/getTowerCraneRunMsgById',
+        method: 'post',
+        data,
+    })
+}
+
+// 塔吊监测 ---- 设备统计接口  右1
+
+
+// 塔吊监测 ---- 设备统计接口  右2
+export function getTowerCraneAlarmListAPI(data = {}) {
+    return request({
+        url: '/smart-site/towerCraneDetection/getTowerCraneAlarmList',
+        method: 'post',
+        data,
+    })
+}

src/views/home-tower-crane/components/center-one-model.vue

@@ -8,14 +8,14 @@
                         <div class="box1">
                             <span>塔身高度</span>
                             <span>
-                                10
+                                {{ deviceInfo.towerHeight || '-' }}
                                 <i>m</i>
                             </span>
                         </div>
                         <div class="box2">
                             <span>其中臂长度</span>
                             <span>
-                                10
+                                {{ deviceInfo.faceMachineNum || '-' }}
                                 <i>m</i>
                             </span>
                         </div>
@@ -29,9 +29,26 @@
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
 export default {
+    props: {
+        params: {
+            type: Object,
+            default: () => {},
+        },
+    },
     components: { ChartsBox },
     data() {
-        return {}
+        return {
+            deviceInfo: {},
+        }
+    },
+    watch: {
+        params: {
+            handler(val) {
+                // console.log('🚀 ~ watch ~ val:', val)
+                this.deviceInfo = val
+            },
+            immediate: true,
+        },
     },
 }
 </script>

src/views/home-tower-crane/components/left-one-model.vue

@@ -8,19 +8,20 @@
                         class="device-item"
                         v-for="(item, index) in deviceList"
                         :key="index"
+                        @click="handleClickDevice(item)"
                     >
                         <img
                             :src="
-                                item.onLine
+                                item.isOnline
                                     ? `${require('@/assets/image/home-tower-crane/line_big.png')}`
                                     : `${require('@/assets/image/home-tower-crane/offline_big.png')}`
                             "
                             alt=""
                         />
-                        <span :style="item.onLine ? 'color:#71C4FF' : ''">
+                        <span :style="item.isOnline ? 'color:#71C4FF' : ''">
                             {{ item.name }}
                         </span>
-                        <span :style="item.onLine ? 'color:#71C4FF' : ''">
+                        <span :style="item.isOnline ? 'color:#71C4FF' : ''">
                             {{ item.code }}
                         </span>
                     </div>
@@ -39,32 +40,39 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getConstDeviceListAPI } from '@/api/home-tower-crane.js'
+
 export default {
     components: { ChartsBox },
     data() {
         return {
             deviceList: [
-                { name: '1号设备', code: 'YKD-231', onLine: true },
+                // { name: '1号设备', code: 'YKD-231', onLine: true },
-                { name: '2号设备', code: 'YKD-233', onLine: true },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
-                { name: '3号设备', code: 'YKD-232', onLine: false },
             ],
         }
     },
+    created() {
+        this.getConstDeviceList()
+    },
+    methods: {
+        async getConstDeviceList() {
+            try {
+                const { data } = await getConstDeviceListAPI()
+                // console.log('🚀 ~ getConstDeviceList ~ data:', data)
+                this.deviceList = data
+                if (data.length > 0 && data[0].towerCraneInfo) {
+                    this.$emit('getDeviceInfo', data[0])
+                }
+            } catch (error) {
+                console.log('🚀 ~ getConstDeviceList ~ error:', error)
+            }
+        },
+        // 点击设备
+        handleClickDevice(item) {
+            // console.log('🚀 ~ handleClickDevice ~ item:', item)
+            this.$emit('getDeviceInfo', item)
+        },
+    },
 }
 </script>
 
@@ -89,6 +97,7 @@ export default {
         flex-wrap: wrap;
         color: #fff;
         font-size: 12px;
+        cursor: pointer;
 
         /* Webkit浏览器滚动条样式 */
         &::-webkit-scrollbar {

src/views/home-tower-crane/components/left-three-model.vue

@@ -20,62 +20,119 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getTowerCraneRunMsgByIdAPI } from '@/api/home-tower-crane'
+
 export default {
+    props: {
+        deviceId: {
+            type: String || Number,
+            default: '',
+        },
+    },
     components: { ChartsBox },
     data() {
         return {
             craneList: [
                 {
                     name: '塔吊风速',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneA.png'),
                     unit: 'm/s',
                 },
                 {
                     name: '起吊高度',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneB.png'),
                     unit: 'm',
                 },
                 {
                     name: '小车幅度',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneC.png'),
                     unit: 'm',
                 },
                 {
                     name: '大臂回环',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneD.png'),
                     unit: '°',
                 },
                 {
                     name: '起重力矩',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneE.png'),
                     unit: '%',
                 },
                 {
                     name: '吊起重量',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneF.png'),
                     unit: 'T',
                 },
                 {
                     name: '倾角X',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneG.png'),
                     unit: '°',
                 },
                 {
                     name: '倾角Y',
-                    count: 30,
+                    count: 0,
                     iconPath: require('@/assets/image/home-tower-crane/craneH.png'),
                     unit: '°',
                 },
             ],
         }
     },
+    watch: {
+        deviceId: {
+            handler(val) {
+                // console.log('🚀 ~ handler ~ val:', val)
+                this.getTowerCraneRunMsgById(val)
+            },
+        },
+    },
+    created() {},
+    methods: {
+        async getTowerCraneRunMsgById(id) {
+            try {
+                const res = await getTowerCraneRunMsgByIdAPI({ id })
+                // console.log('🚀 ~ getTowerCraneRunMsgById ~ res:', res)
+                if (res.data && res.data.length > 0) {
+                    res.data.forEach((item) => {
+                        switch (item.name) {
+                            case '塔吊风速':
+                                this.craneList[0].count = item.value
+                                break
+                            case '起吊高度':
+                                this.craneList[1].count = item.value
+                                break
+                            case '小车幅度':
+                                this.craneList[2].count = item.value
+                                break
+                            case '大臂回环':
+                                this.craneList[3].count = item.value
+                                break
+                            case '起重力矩':
+                                this.craneList[4].count = item.value
+                                break
+                            case '吊起重量':
+                                this.craneList[5].count = item.value
+                                break
+                            case '倾角X':
+                                this.craneList[6].count = item.value
+                                break
+                            case '倾角Y':
+                                this.craneList[7].count = item.value
+                                break
+                        }
+                    })
+                }
+            } catch (error) {
+                console.log('🚀 ~ getTowerCraneRunMsgById ~ error:', error)
+            }
+        },
+    },
 }
 </script>
 

src/views/home-tower-crane/components/left-two-model.vue

@@ -15,7 +15,7 @@
                     <div v-for="(item, index) in personInfoList" :key="index">
                         <span></span>
                         <span>{{ item.name }}</span>
-                        <span>{{ item.type }}</span>
+                        <span>{{ deviceInfo[item.type] || '-' }}</span>
                     </div>
                 </div>
             </div>
@@ -26,23 +26,36 @@
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
 export default {
+    props: {
+        params: {
+            type: Object,
+            default: () => {},
+        },
+    },
     components: { ChartsBox },
     data() {
         return {
             personInfoList: [
-                { name: '设备名称', type: '中国重工机械起重机' },
+                { name: '设备名称', type: 'name' },
-                { name: '设备编号', type: '中国重工机械起重机' },
+                { name: '设备编号', type: 'num' },
-                { name: '规格型号', type: '中国重工机械起重机' },
+                { name: '规格型号', type: 'model' },
-                {
+                { name: '设备厂家', type: 'manufacturer'},
-                    name: '设备厂家',
+                { name: '安装单位', type: 'installationUnit' },
-                    type: '中国重工机械起重机机械起重机机械起重机机械起重机机械起重机',
+                { name: '所在班组', type: 'team' },
-                },
+                { name: '安装时间', type: 'installDate' },
-                { name: '安装单位', type: '中国重工机械起重机' },
-                { name: '所在班组', type: '中国重工机械起重机' },
-                { name: '安装时间', type: '中国重工机械起重机' },
             ],
+            deviceInfo: {},
         }
     },
+    watch: {
+        params: {
+            handler(val) {
+                // console.log('🚀 ~ watch ~ val:', val)
+                this.deviceInfo = val
+            },
+            immediate: true,
+        },
+    },
 }
 </script>
 

src/views/home-tower-crane/components/right-two-model.vue

@@ -11,6 +11,8 @@
 
 <script>
 import ChartsBox from '@/components/ChartsBox/index'
+import { getTowerCraneAlarmListAPI } from '@/api/home-tower-crane.js'
+import blueImg from '@/assets/image/pro-view/blue.png'
 
 export default {
     components: { ChartsBox },
@@ -18,84 +20,22 @@ export default {
         return {
             config: {
                 data: [
-                    [
+                    // [
-                        "<img src='" +
+                    //     "<img src='" + blueImg + "' class='table-img'>",
-                            require('@/assets/image/pro-view/blue.png') +
+                    //     "<span  class='colorBlue'>设备已离线</span>",
-                            "' class='table-img'>",
+                    //     "<span  class='colorBlue'>测试设备3</span>",
-                        "<span  class='colorBlue'>设备已离线</span>",
+                    //     "<span  class='time-box colorBlue'>2025-03-06 18:20:36</span>",
-                        "<span  class='colorBlue'>测试设备3</span>",
+                    // ],
-                        "<span  class='time-box colorBlue'>2025-03-06 18:20:36</span>",
+                    // [
-                    ],
+                    //     "<div class='img-box'><img src='" +
-                    [
+                    //         require('@/assets/image/pro-view/red.png') +
-                        "<img src='" +
+                    //         "' class='table-img red-img'><img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
+                    //         require('@/assets/image/pro-view/three.png') +
-                            "' class='table-img'>",
+                    //         "' class='three-img'></div>",
-                        "<span  class='colorBlue'>设备已离线</span>",
+                    //     "<span  class='colorRed'>设备故障已离线</span>",
-                        "<span  class='colorBlue'>测试设备3</span>",
+                    //     "<span  class='colorRed'>测试设备3</span>",
-                        "<span  class='time-box colorBlue'>2025-03-06 18:20:36</span>",
+                    //     "<span  class='time-box colorRed'>2025-03-06 18:20:36</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>",
-                        "<span  class='colorRed'>设备故障已离线</span>",
-                        "<span  class='colorRed'>测试设备3</span>",
-                        "<span  class='time-box colorRed'>2025-03-06 18:20:36</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        "<span  class='colorBlue'>设备已离线</span>",
-                        "<span  class='colorBlue'>测试设备3</span>",
-                        "<span  class='time-box colorBlue'>2025-03-06 18:20:36</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        "<span  class='colorBlue'>设备已离线</span>",
-                        "<span  class='colorBlue'>测试设备3</span>",
-                        "<span  class='time-box colorBlue'>2025-03-06 18:20:36</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        "<span  class='colorBlue'>设备已离线</span>",
-                        "<span  class='colorBlue'>测试设备3</span>",
-                        "<span  class='time-box colorBlue'>2025-03-06 18:20:36</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>",
-                        "<span  class='colorRed'>设备故障已离线</span>",
-                        "<span  class='colorRed'>测试设备3</span>",
-                        "<span  class='time-box colorRed'>2025-03-06 18:20:36</span>",
-                    ],
-                    [
-                        "<img src='" +
-                            require('@/assets/image/pro-view/blue.png') +
-                            "' class='table-img'>",
-                        "<span  class='colorBlue'>设备已离线</span>",
-                        "<span  class='colorBlue'>测试设备3</span>",
-                        "<span  class='time-box colorBlue'>2025-03-06 18:20:36</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>",
-                        "<span  class='colorRed'>设备故障已离线</span>",
-                        "<span  class='colorRed'>测试设备3</span>",
-                        "<span  class='time-box colorRed'>2025-03-06 18:20:36</span>",
-                    ],
                 ],
                 rowNum: 4, //表格行数
                 // headerHeight: 35,
@@ -110,6 +50,33 @@ export default {
             },
         }
     },
+    created() {
+        this.getTowerCraneAlarmList()
+    },
+    mounted() {},
+    methods: {
+        // 获取设备列表
+        async getTowerCraneAlarmList() {
+            try {
+                const res = await getTowerCraneAlarmListAPI()
+                // console.log('🚀 ~ getTowerCraneAlarmList ~ res:', res)
+                if (res.data && res.data.length > 0) {
+                    const newData = res.data.map((item) => [
+                        `<img src="${blueImg}" class='table-img'>`,
+                        `<span class='colorBlue'>${item.devName}</span>`,
+                        `<span class='colorBlue'>${item.remark}</span>`,
+                        `<span class='time-box colorBlue'>${item.createTime}</span>`,
+                    ])
+                    this.config = {
+                        ...this.config,
+                        data: newData,
+                    }
+                }
+            } catch (error) {
+                console.log('🚀 ~ getTowerCraneAlarmList ~ error:', error)
+            }
+        },
+    },
 }
 </script>
 

src/views/home-tower-crane/index.vue

@@ -2,14 +2,14 @@
     <!-- 塔吊监测-->
     <div class="home-tower-crane">
         <div class="env-1">
-            <LeftOneModel />
+            <LeftOneModel @getDeviceInfo="getDeviceInfo" />
         </div>
         <div class="env-2">
-            <CenterOneModel />
+            <CenterOneModel :params="deviceInfo" />
         </div>
         <div class="env-3"> <RightOneModel /> </div>
-        <div class="env-4"> <LeftTwoModel /> </div>
+        <div class="env-4"> <LeftTwoModel :params="deviceInfo" /> </div>
-        <div class="env-5"> <LeftThreeModel /> </div>
+        <div class="env-5"> <LeftThreeModel :deviceId="deviceId" /> </div>
         <div class="env-6"> <RightTwoModel /> </div>
     </div>
 </template>
@@ -30,6 +30,19 @@ export default {
         RightOneModel,
         RightTwoModel,
     },
+    data() {
+        return {
+            deviceId: '',
+            deviceInfo: {},
+        }
+    },
+    methods: {
+        getDeviceInfo(data) {
+            // console.log('🚀 ~ getDeviceInfo ~ data:', data)
+            this.deviceInfo = data.towerCraneInfo
+            this.deviceId = data.id
+        },
+    },
 }
 </script>