298 lines
8.4 KiB
Vue
298 lines
8.4 KiB
Vue
<template>
|
||
<div class="app-container print-work">
|
||
<!--消防控制室-->
|
||
<div class="level-title">
|
||
<h1>基础信息</h1>
|
||
</div>
|
||
<table class="table-ui">
|
||
<tr>
|
||
<td class="bbg-transparent">指标源</td>
|
||
<td colspan="2">{{ pd.INDICATORSOURCE }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">报警阈值</td>
|
||
<td colspan="2">{{ pd.ALARMTHRESHOLD }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">经纬度</td>
|
||
<td colspan="2">{{ pd.LONGITUDE + '-' + pd.LATITUDE }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">接受报警人</td>
|
||
<td colspan="2">{{ pd.RECIPIENT_NAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">修改时间</td>
|
||
<td colspan="2">{{ pd.OPERATE_TIME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">类型</td>
|
||
<td colspan="2">{{ pd.TYPE === '0' ? '指标分析' : pd.TYPE === '1' ? '报警源接入' : '未定义' }}</td>
|
||
</tr>
|
||
</table>
|
||
<div v-show="alarmInfoList != null && alarmInfoList.length > 0" class="table-ui">
|
||
<div class="level-title" style="position: relative; top: 25px">
|
||
<h1>报警信息</h1>
|
||
</div>
|
||
<div v-for="(item,index) in alarmInfoList" :key="index" style="position: relative; top: 25px">
|
||
<div class="item">
|
||
<table class="table-ui">
|
||
<div>{{ '报警信息' + (index+1) + '：' }}</div>
|
||
<tr>
|
||
<td class="bbg-transparent">报警值</td>
|
||
<td>{{ item.SOURCE_VALUE }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">报警时间</td>
|
||
<td>{{ item.CREATE_TIME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">是否报警信息</td>
|
||
<td>{{ item.IS_ALARM === '1' ? '是' : item.IS_ALARM === '2' ? '否' : '未审核' }}</td>
|
||
</tr>
|
||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||
<td class="bbg-transparent">报警人姓名</td>
|
||
<td>{{ item.INFORMANT_NAME }}</td>
|
||
</tr>
|
||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||
<td class="bbg-transparent">报警人电话</td>
|
||
<td>{{ item.INFORMANT_PHONE }}</td>
|
||
</tr>
|
||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||
<td class="bbg-transparent">详细地址</td>
|
||
<td>{{ item.ADDRESS }}</td>
|
||
</tr>
|
||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||
<td class="bbg-transparent">报警内容</td>
|
||
<td>{{ item.CONTENT }}</td>
|
||
</tr>
|
||
<tr v-show="item.IS_ALARM === '1' && !item.INFORMANT_NAME">
|
||
<td class="bbg-transparent">报警信息</td>
|
||
<td> 待填报 </td>
|
||
</tr>
|
||
<tr v-show="item.IS_ALARM === '2' && item.REASON">
|
||
<td class="bbg-transparent">REASON</td>
|
||
<td>{{ item.REASON }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<table class="table-ui">
|
||
<div class="level-title" style="position: relative; top: 50px">
|
||
<h1>附近摄像头</h1>
|
||
</div>
|
||
<div v-for="(item,index) in videoList" :key="index" style="position: relative; top: 50px">
|
||
<div class="item">
|
||
<table class="table-ui">
|
||
<div>{{ '摄像头' + (index+1) + '：' }}</div>
|
||
<tr>
|
||
<td class="bbg-transparent">摄像头名称</td>
|
||
<td>{{ item.VIDEO_NAME }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">摄像头位置</td>
|
||
<td>{{ item.LONGITUDE + '-' + item.LATITUDE }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="bbg-transparent">播放视频</td>
|
||
<td><el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(item)">播放</el-button></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</table>
|
||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :append-to-body="true" title="视频2" width="600px">
|
||
<iframe :src="VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay;fullscreen;microphone" style="position: relative;border:none"/>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="back">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { requestFN } from '@/utils/request'
|
||
import moment from 'moment'
|
||
export default {
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default() {
|
||
return ''
|
||
}
|
||
},
|
||
type: {
|
||
type: String,
|
||
default() {
|
||
return ''
|
||
}
|
||
},
|
||
gangkou: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
config: config,
|
||
FIRERESOURCES_NAME: '',
|
||
pd: {},
|
||
videoList: [],
|
||
images: [],
|
||
pumpRoomList: [],
|
||
dialogVideo: false,
|
||
alarmInfoList: [],
|
||
VIDEOURL: ''
|
||
}
|
||
},
|
||
watch: {
|
||
'id': function(now, old) {
|
||
if (now) {
|
||
this.getData()
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getData()
|
||
this.getAlarmInfo()
|
||
this.getVideoData()
|
||
},
|
||
methods: {
|
||
back() {
|
||
if (this.dialogVideo) this.dialogVideo = false
|
||
},
|
||
// 五分钟关闭视频播放页面定时任务
|
||
start() {
|
||
console.log('定时器开启')
|
||
this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟
|
||
},
|
||
over() {
|
||
// 定时器手动关闭
|
||
console.log('定时器自动关闭')
|
||
this.$message.warning('单次播放时长已到5分钟自动关闭')
|
||
clearInterval(this.timer)
|
||
},
|
||
closeVideoStart() {
|
||
this.dialogVideo = false
|
||
this.dialogVideoHLS = false
|
||
this.dialogVideoBack = false
|
||
this.dialogVideoAll = false
|
||
this.over()
|
||
},
|
||
// 播放
|
||
handleBack() {
|
||
if (this.dialogVideoAll) {
|
||
for (let i = 0; i < this.playerList.length; i++) {
|
||
this.playerList[i].dispose()
|
||
}
|
||
this.dialogVideoAll = false
|
||
}
|
||
if (this.dialogVideoHLS) {
|
||
this.player.dispose()
|
||
this.dialogVideoHLS = false
|
||
}
|
||
},
|
||
showVideo(row) {
|
||
this.$message.warning('单次播放最多五分钟')
|
||
this.start()
|
||
if (row.VIDEO_TYPE === '0') {
|
||
this.VIDEOURL = row.VIDEO_URL
|
||
this.dialogVideo = true
|
||
} else {
|
||
requestFN(
|
||
'/platformvideomanagement/getHlsPath',
|
||
{
|
||
INDEXCODE: row.CODE
|
||
}
|
||
).then((res) => {
|
||
this.dialogVideoHLS = true
|
||
this.$nextTick(() => {
|
||
// eslint-disable-next-line no-undef
|
||
this.player = new Aliplayer({
|
||
'id': 'aLiVideoPlayer',
|
||
'source': res.data.url,
|
||
'width': '100%',
|
||
'height': '500px',
|
||
'autoplay': true,
|
||
'isLive': true,
|
||
'rePlay': false,
|
||
'playsinline': true,
|
||
'preload': true,
|
||
'controlBarVisibility': 'hover',
|
||
'useH5Prism': true
|
||
}, function(player) {
|
||
console.log('The player is created')
|
||
})
|
||
})
|
||
}).catch((e) => {
|
||
this.over()
|
||
this.listLoading = false
|
||
})
|
||
}
|
||
},
|
||
formatDate(date, format) {
|
||
if (date) {
|
||
return moment(date).format(format)
|
||
} else {
|
||
return ''
|
||
}
|
||
},
|
||
getData() {
|
||
requestFN(
|
||
'/alarmDeviceMaintenance/getById',
|
||
{
|
||
ALARMDEVICEMAINTENANCE_ID: this.id,
|
||
GANGKOU: this.gangkou
|
||
}
|
||
).then((data) => {
|
||
this.pd = data.pageData
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
getAlarmInfo() {
|
||
requestFN(
|
||
'/alarmInformation/getAlarmInfoById',
|
||
{
|
||
ALARMDEVICEMAINTENANCE_ID: this.id,
|
||
GANGKOU: this.gangkou
|
||
}
|
||
).then((data) => {
|
||
this.alarmInfoList = data.alarmInfoList
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
getVideoData() {
|
||
requestFN(
|
||
'/alarmDeviceMaintenance/getVideoById',
|
||
{
|
||
ALARMDEVICEMAINTENANCE_ID: this.id,
|
||
GANGKOU: this.gangkou
|
||
}
|
||
).then((data) => {
|
||
this.videoList = data.videoList
|
||
}).catch((e) => {
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.img {
|
||
display: flex;
|
||
|
||
.img_item {
|
||
margin-left: 10px;
|
||
|
||
&:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
img {
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|