湖里大屏(数字工地)：新增塔机监测弹框

src/views/projectAdmin/jlw/digitalSite/centerTop.vue

@@ -8,10 +8,11 @@
         :key="index"
         @click="handlePoint(point)"
       ></div>
-      <FaceGageDialog v-if="faceGateDialog" :close="() => (faceGateDialog = false)" :data="faceGateData" />
+      <FaceGageDialog v-if="gateDialog" :close="() => (gateDialog = false)" :data="faceGateData" />
       <EnvironmentDialog v-if="environmentDialog" :data="environmentInfo" :close="() => (environmentDialog = false)" />
       <VideoDialog v-if="videoDialog" :close="() => (videoDialog = false)" />
       <ElevatorDialog v-if="elevatorDialog" :close="() => (elevatorDialog = false)" />
+      <TowerDialog v-if="towerDialog" :close="() => (towerDialog = false)" />
     </div>
     <div class="tabs">
       <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
@@ -28,10 +29,11 @@ import FaceGageDialog from './components/FaceGageDialog.vue'
 import EnvironmentDialog from './components/EnvironmentDialog.vue'
 import VideoDialog from './components/VideoDialog.vue'
 import ElevatorDialog from './components/ElevatorDialog_.vue'
+import TowerDialog from './components/TowerDialog.vue'
 import { selectWorkerAttendanceByDevApi } from '@/assets/js/api/dataBoard'
 import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
 export default {
-  components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog, VideoDialog, ElevatorDialog },
+  components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog, VideoDialog, ElevatorDialog, TowerDialog },
   props: {
     title: {
       type: String,
@@ -48,13 +50,13 @@ export default {
       tabIndex: 0,
       tabs: [
         { label: '全部', value: 'all' },
-        { label: '塔机监测', value: 'tower-crane' },
+        { label: '塔机监测', value: 'tower' },
         { label: '升降机监测', value: 'elevator' },
         { label: '视频监测', value: 'video' },
         { label: '环境监测', value: 'environment' },
         { label: '人脸闸机', value: 'gate' }
       ],
-      faceGateDialog: false,
+      gateDialog: false,
       faceGateData: {
         list: [],
         totalAttendance: { inTotalNum: 0, outTotalNum: 0 },
@@ -63,7 +65,8 @@ export default {
       environmentDialog: false,
       environmentInfo: {},
       videoDialog: false,
-      elevatorDialog: true
+      elevatorDialog: false,
+      towerDialog: true
     }
   },
   methods: {
@@ -71,20 +74,7 @@ export default {
       this.tabIndex = index
     },
     handlePoint(point) {
-      console.log(point, 'point')
+      this[point + 'Dialog'] = true
-      switch (point) {
-        case 'gate':
-          this.faceGateDialog = true
-          break
-        case 'environment':
-          this.environmentDialog = true
-          break
-        case 'video':
-          this.videoDialog = true
-          break
-        default:
-          break
-      }
     },
     getFaceGateInfo() {
       selectWorkerAttendanceByDevApi({
@@ -104,7 +94,7 @@ export default {
   },
   computed: {
     points() {
-      return ['tower-crane', 'elevator', 'video', 'environment', 'gate'].map(tab => [tab, tab]).flat()
+      return ['tower', 'elevator', 'video', 'environment', 'gate'].map(tab => [tab, tab]).flat()
     }
   }
 }
@@ -128,7 +118,7 @@ export default {
     &.show {
       display: block;
     }
-    &.i-tower-crane {
+    &.i-tower {
       background-image: url('~@/views/projectAdmin/jlw/assets/images/digitalSite/icons/i-tower-crane.png');
     }
     &.i-elevator {

src/views/projectAdmin/jlw/digitalSite/components/TowerDialog.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-dialog title="塔吊监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="elevatorDialog" @close="close">
+    <div class="dllm"></div>
+  </el-dialog>
+</template>
+
+<script>
+import AreaTree from '@/components/areaTree'
+import VideoModule from '@/components/videoModule/videoModule'
+import { getLifterCurrentDataApi, getSelectLifterBySnApi, getLifterAlarmApi } from '@/assets/js/api/lifter'
+import moment from 'moment'
+export default {
+  components: { AreaTree, VideoModule },
+  props: {
+    close: {
+      type: Function,
+      default: () => false
+    }
+  },
+  mounted() {
+    this.getEnvironmentInfo()
+    this.getDeviceInfo()
+    this.getAlertInfo()
+  },
+  data() {
+    return {
+      projectSn: this.$store.state.projectSn,
+      videoList: [],
+      playList: [],
+      activeLiveData: { devSn: '' },
+      environmentInfo: {},
+      deviceInfo: {},
+      alerts: []
+    }
+  },
+  methods: {
+    getPlayParams(data) {
+      console.log(data, '大罗勒密河')
+      if (!this.showVideoDialog) {
+        this.videoList = data
+      } else {
+        this.playList = data
+      }
+    },
+    getEnvironmentInfo() {
+      getLifterCurrentDataApi({ devSn: '2DE46E53AEF7483B98C9B8825ECAA12F' }).then(res => {
+        if (res.code == 200) {
+          this.environmentInfo = res.result || {}
+        }
+      })
+    },
+    getDeviceInfo() {
+      getSelectLifterBySnApi({ devSn: '2DE46E53AEF7483B98C9B8825ECAA12F' }).then(res => {
+        if (res.code === 200) {
+          this.deviceInfo = res.result
+        }
+      })
+    },
+    getAlertInfo() {
+      getLifterAlarmApi({ devSn: '2DE46E53AEF7483B98C9B8825ECAA12F', projectSn: this.projectSn }).then(res => {
+        if (res.code == 200) {
+          this.alerts = res.result.records
+        }
+      })
+    },
+    fmtDate(date) {
+      return moment(date).format('YYYY-MM-DD日 HH:mm:ss')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.elevatorDialog {
+  overflow: inherit;
+  .dllm {
+    padding-top: 1px;
+    width: 100%;
+    height: 800px;
+    color: #fff;
+    background-size: 100% 100%;
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    .card {
+      .card-title {
+        margin-bottom: 20px;
+        font-size: 18px;
+        font-weight: bold;
+        color: #6ce9f0;
+        display: flex;
+        align-items: center;
+        &::before {
+          content: '';
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          margin-right: 8px;
+          background-color: #6ce9f0;
+        }
+      }
+    }
+  }
+}
+.el-dialog__wrapper {
+  /deep/ .el-dialog {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0px;
+    .el-dialog__body {
+      background: #262d47;
+    }
+    .el-dialog__header {
+      text-align: center;
+      background: #262d47;
+      .el-dialog__title {
+        color: #6ce9f0;
+        font-size: 17px;
+        font-weight: 900;
+        .el-dialog__headerbtn {
+          .el-dialog__close {
+            color: #262d47;
+          }
+        }
+      }
+      .el-dialog__title::before {
+        background: #262d47;
+      }
+    }
+  }
+}
+</style>