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

This commit is contained in:
Jack 2022-08-19 11:03:13 +08:00
parent 5f2f78783e
commit 079900b924
2 changed files with 144 additions and 21 deletions

View File

@ -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')
switch (point) {
case 'gate':
this.faceGateDialog = true
break
case 'environment':
this.environmentDialog = true
break
case 'video':
this.videoDialog = true
break
default:
break
}
this[point + 'Dialog'] = true
},
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 {

View File

@ -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>