348 lines
10 KiB
Vue
348 lines
10 KiB
Vue
<template>
|
||
<el-dialog title="塔吊监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="elevatorDialog" @close="close">
|
||
<div class="dllm">
|
||
<div class="left">
|
||
<div class="card">
|
||
<div class="card-title">设备信息</div>
|
||
<div class="device content">
|
||
<div class="info-item">设备名称：</div>
|
||
<div class="info-item">设备编号：</div>
|
||
<div class="info-item">设备备案号：</div>
|
||
<div class="info-item">生产厂家：</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">驾驶员信息</div>
|
||
<div class="driver content">
|
||
<vue-scroll>
|
||
<div class="driver-item" v-for="(driver, index) in drivers" :key="index">
|
||
<img v-if="driver.fieldAcquisitionUrl" :src="fileUrl + driver.fieldAcquisitionUrl" />
|
||
<img v-else src="@/assets/images/profile_photo.png" />
|
||
<div class="infos">
|
||
<div class="info-item">姓名：{{ driver.workerName }}</div>
|
||
<div class="info-item">年龄：{{ driver.age }}</div>
|
||
<div class="info-item">特种证书编号：{{ driver.certificateNumber }}</div>
|
||
<div class="info-item">证件：{{ driver.idCard }}</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">报警信息</div>
|
||
<div class="alert content">
|
||
<vue-scroll>
|
||
<div v-for="(alert, index) in alerts" :key="index" class="alert-info">
|
||
<div class="alert-item">设备名称：{{ alert.devName }}</div>
|
||
<div class="alert-item">设备时间：{{ fmtDate(alert.alarmTime) }}</div>
|
||
<div class="alert-item" v-if="alert.windSpeedAlarm">风速报警</div>
|
||
<div class="alert-item" v-if="alert.environmentAlarm">环境防撞报警</div>
|
||
<div class="alert-item" v-if="alert.heightAlarm">高度上限位报警</div>
|
||
<div class="alert-item" v-if="alert.maxRangeAlarm">幅度外限位报警</div>
|
||
<div class="alert-item" v-if="alert.minRangeAlarm">幅度内限位报警</div>
|
||
<div class="alert-item" v-if="alert.momentAlarm">力矩报警</div>
|
||
<div class="alert-item" v-if="alert.multiAlarm">多机防撞报警</div>
|
||
<div class="alert-item" v-if="alert.negAngleAlarm">逆时针回转限位报警</div>
|
||
<div class="alert-item" v-if="alert.posAngleAlarm">顺时针回转限位报警</div>
|
||
<div class="alert-item" v-if="alert.speedAlarm">速度报警</div>
|
||
<div class="alert-item" v-if="alert.topAlarm">防冲顶报警</div>
|
||
<div class="alert-item" v-if="alert.weightAlarm">载重报警</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div class="x-move"></div>
|
||
<div class="box"></div>
|
||
<div class="circle"></div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="card">
|
||
<div class="card-title">
|
||
塔吊运行信息<span>当前上传时间：{{ tower.realTime || '--' }}</span>
|
||
</div>
|
||
<div class="tower content">
|
||
<div class="tower-item"><i class="el-icon-question"></i>前臂长：{{ tower.forearmLength || '--' }} m</div>
|
||
<div class="tower-item"><i class="el-icon-question"></i>塔吊高：{{ tower.towerHeight || '--' }} m</div>
|
||
<div class="tower-item"><i class="el-icon-question"></i>幅度：{{ tower.ranger || '--' }} m</div>
|
||
<div class="tower-item"><i class="el-icon-question"></i>高度：{{ tower.height || '--' }} m</div>
|
||
<div class="tower-item"><i class="el-icon-question"></i>角度：{{ tower.angle || '--' }} °</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-title">
|
||
塔吊视频
|
||
<el-select class="videoSelect" size="small" placeholder="请选择视频" @change="changeVideo">
|
||
<el-option v-for="video in videos" :key="video.id" :label="video.videoName" :value="item.id"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="video content">
|
||
<videoModule
|
||
style="width: 100%; height: 100%"
|
||
:type="'1x1'"
|
||
:value="selectList"
|
||
:displayBottomMod="false"
|
||
:winNumBer="1"
|
||
:autoplay="false"
|
||
:showCaptrue="false"
|
||
:showControl="false"
|
||
:showPlayback="false"
|
||
></videoModule>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import AreaTree from '@/components/areaTree'
|
||
import VideoModule from '@/components/videoModule/videoModule'
|
||
import { getSelectLifterBySnApi } from '@/assets/js/api/lifter'
|
||
import { getTowerAlarmListApi, getSelectTowerBySnApi } from '@/assets/js/api/towerCrane'
|
||
import moment from 'moment'
|
||
export default {
|
||
components: { AreaTree, VideoModule },
|
||
props: {
|
||
close: {
|
||
type: Function,
|
||
default: () => false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getDeviceInfo()
|
||
this.getDrivers()
|
||
this.getAlertInfo()
|
||
},
|
||
data() {
|
||
return {
|
||
projectSn: this.$store.state.projectSn,
|
||
fileUrl: this.$store.state.FILEURL,
|
||
deviceInfo: {},
|
||
drivers: [],
|
||
tower: [],
|
||
videos: [],
|
||
alerts: [],
|
||
selectList: []
|
||
}
|
||
},
|
||
methods: {
|
||
getDeviceInfo() {
|
||
getSelectLifterBySnApi({ devSn: '2DE46E53AEF7483B98C9B8825ECAA12F' }).then(res => {
|
||
if (res.code === 200) {
|
||
this.deviceInfo = res.result
|
||
}
|
||
})
|
||
},
|
||
getDrivers() {
|
||
getSelectTowerBySnApi({ devSn: '555' }).then(res => {
|
||
if (res.code == 200) {
|
||
this.drivers = res.result.driverList
|
||
this.tower = res.result.tower
|
||
this.videos = res.result.videoList
|
||
}
|
||
})
|
||
},
|
||
getAlertInfo() {
|
||
getTowerAlarmListApi({ devSn: 'A5FBF4B23B234DDF9553480DE4D26674', projectSn: this.projectSn }).then(res => {
|
||
this.alerts = res.result.records
|
||
})
|
||
},
|
||
changeVideo(val) {
|
||
for (let i = 0; i < this.videos.length; i++) {
|
||
if (val == this.videos[i].id) {
|
||
this.selectList = [this.videos[i]]
|
||
return
|
||
}
|
||
}
|
||
},
|
||
fmtDate(date) {
|
||
return moment(date).format('YYYY-MM-DD日 HH:mm:ss')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.elevatorDialog {
|
||
overflow: inherit;
|
||
.dllm {
|
||
box-sizing: border-box;
|
||
padding-top: 80px;
|
||
width: 100%;
|
||
height: 800px;
|
||
color: #fff;
|
||
background-size: 100% 100%;
|
||
z-index: 3;
|
||
display: flex;
|
||
.left {
|
||
width: 440px;
|
||
> :nth-child(2) {
|
||
margin: 20px 0;
|
||
}
|
||
}
|
||
.center {
|
||
position: relative;
|
||
flex: 1;
|
||
background: url(~@/assets/images/towericon/towerBG.png) no-repeat;
|
||
background-position-x: 20%;
|
||
background-position-y: 20%;
|
||
.x-move {
|
||
position: absolute;
|
||
left: 60%;
|
||
top: 17%;
|
||
width: 26px;
|
||
height: 12px;
|
||
background: url(~@/assets/images/towericon/1.png) no-repeat;
|
||
}
|
||
.box {
|
||
position: absolute;
|
||
left: 59%;
|
||
top: 49%;
|
||
width: 36px;
|
||
height: 74px;
|
||
background: url(~@/assets/images/towericon/hock.png) no-repeat;
|
||
}
|
||
.circle {
|
||
position: absolute;
|
||
left: 72%;
|
||
top: 65%;
|
||
width: 80px;
|
||
height: 80px;
|
||
background: url(~@/assets/images/towericon/tower.png) no-repeat;
|
||
background-position-x: 50%;
|
||
background-position-y: 50%;
|
||
border: #f5a623 3px solid;
|
||
border-radius: 50%;
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: calc(50% - 1px);
|
||
width: 2px;
|
||
height: 50%;
|
||
background-color: #f5a623;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 420px;
|
||
}
|
||
.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;
|
||
}
|
||
span {
|
||
margin-right: 30px;
|
||
margin-left: auto;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
color: #fff;
|
||
}
|
||
.videoSelect {
|
||
margin-left: auto;
|
||
/deep/.el-input__inner {
|
||
background-color: transparent;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
padding-left: 14px;
|
||
.info-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
&.device {
|
||
height: 100px;
|
||
}
|
||
&.driver {
|
||
height: 120px;
|
||
.driver-item {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
img {
|
||
margin-right: 10px;
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
}
|
||
&.alert {
|
||
height: 400px;
|
||
.alert-info {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.alert-item {
|
||
margin-bottom: 10px;
|
||
&:nth-child(odd) {
|
||
width: calc(100% - 220px);
|
||
}
|
||
&:nth-child(even) {
|
||
width: 220px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&.tower {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.tower-item {
|
||
margin-bottom: 20px;
|
||
width: 50%;
|
||
i {
|
||
margin-right: 6px;
|
||
color: #5ec6d0;
|
||
}
|
||
}
|
||
}
|
||
&.video {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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>
|