<template>
|
<div class="avue-logo">
|
<transition name="fade">
|
<span v-if="keyCollapse"
|
class="avue-logo_subtitle"
|
key="0">
|
{{website.logo}}
|
</span>
|
</transition>
|
<transition-group name="fade">
|
<template v-if="!keyCollapse">
|
<span class="avue-logo_title"
|
key="1">{{website.indexTitle}} </span>
|
</template>
|
</transition-group>
|
<audio ref='realAudio' loop>
|
</audio>
|
<div>
|
<el-dialog class="real-dialog" title="实时警情" center="true" :visible.sync="dialogTableVisible" top="190px" append-to-body="true" @close='closeDialog'>
|
<el-form :model="form" label-position="right" size="mini" label-width="100px">
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="报警人" >
|
<el-input disabled="true" v-model="form.alarmPeople" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="联系电话" >
|
<el-input disabled="true" v-model="form.phoneNumber" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="行政区" >
|
<el-input disabled="true" v-model="form.district" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="事发地址" >
|
<el-input disabled="true" v-model="form.place" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="警情类别" >
|
<el-input disabled="true" v-model="form.waringType" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="设备编号" >
|
<el-input disabled="true" v-model="form.deviceNumber" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="接警人" >
|
<el-input disabled="true" v-model="form.galarmPeople" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="接警时间" >
|
<el-input disabled="true" v-model="form.jjTime" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="报警时间" >
|
<el-input disabled="true" v-model="form.alarmTime" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col span="12">
|
<el-form-item label="实时视频">
|
<el-button type="primary" @click.stop="queryOldVideo(form)"
|
>查看视频</el-button>
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
<el-row>
|
<el-form-item label="报警内容" >
|
<el-input disabled="true" v-model="form.content" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="要求处置时间" >
|
<el-date-picker
|
v-model="form.czTime"
|
type="datetime"
|
value-format="yyyy-MM-dd hh:mm:ss"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="备注" >
|
<el-input v-model="form.bz" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :align='center'>
|
<el-col :offset="4">
|
<el-form-item >
|
<el-button type="success">一键呼叫</el-button>
|
<el-button type="success">视频对讲</el-button>
|
<el-button type="primary" @click.stop="generate(form)">生成警单</el-button>
|
<el-button type="warning" @click.stop="revoke(form)">警情撤销</el-button>
|
<el-button type="danger">推送110</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-dialog>
|
|
<el-dialog
|
class="ss-video-dialog"
|
:modal="false"
|
width="100%"
|
title="历史视频"
|
:visible.sync="innerVisibleVideo"
|
:close-on-press-escape="false"
|
append-to-body
|
@opened="openOldVideoBox"
|
@close="closeOldVideoBox"
|
>
|
<video
|
src=""
|
id="old_video"
|
style="width: 100%; height: 100%; object-fit:fill"
|
controls
|
></video>
|
</el-dialog>
|
</div>
|
|
|
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import axios from 'axios'
|
import Hls from "hls.js";
|
export default {
|
name: "logo",
|
data() {
|
return {
|
dialogTableVisible:false,
|
innerVisibleVideo: false,
|
deviceId:null,
|
form: {},
|
};
|
},
|
created() {
|
this.getData();
|
},
|
computed: {
|
...mapGetters(["website", "keyCollapse"])
|
},
|
methods: {
|
getData() {
|
var that = this;
|
|
axios({
|
url: '/api/blade-jfpts/alarm/alarm/getLimit',
|
method: 'get',
|
}).then(function (response) {
|
that.deviceId = response.data.data[0].id;
|
//获得最新ID，开启实时报警循环
|
that.layerRealtime();
|
});
|
|
|
},layerRealtime(){
|
var that = this;
|
window.clearTimeout(window.realTimeQuery);
|
window.realTimeQuery = setInterval(function () {
|
axios({
|
url: '/api/blade-jfpts/alarm/alarm/selecttx?id='+that.deviceId,
|
method: 'post',
|
}).then(function (response) {
|
if (response.data.data.length > 0){
|
that.deviceId = response.data.data[0].id;
|
that.form = response.data.data[0];
|
that.dialogTableVisible = true;
|
that.$refs.realAudio.src = "./realVideo/audio.mp3";
|
that.$refs.realAudio.play();
|
}
|
});
|
}, 5000);
|
|
},
|
closeDialog(){
|
//关闭窗口回调，关闭警报
|
this.$refs.realAudio.pause();
|
},
|
generate(row){
|
var that = this;
|
//关闭窗口回调，关闭警报
|
that.$refs.realAudio.pause();
|
if (row.czTime == "" || row.czTime == null){
|
this.$message({
|
message: '请选择处置时间',
|
type: 'warning'
|
});
|
}else{
|
axios({
|
url: '/api/blade-jfpts/jingdan/jingdan/submit',
|
method: 'post',
|
data: {
|
rName: row.rname,
|
galarmPeople: row.galarmPeople,
|
phoneNumber: row.phoneNumber,
|
place: row.place,
|
content: row.content,
|
galarmTime: row.alarmTime,
|
waringType: row.waringType,
|
deviceNumber: row.deviceNumber,
|
type: "0",
|
handleP: null,
|
handleTime: null,
|
handName: null,
|
level: row.level,
|
coordinate: null,
|
jd: row.jd,
|
wd: row.wd,
|
addvcd: row.district,
|
czTime: row.czTime,
|
jjTime: row.jjTime,
|
bz: row.bz,
|
}
|
})
|
.then(function (response) {
|
|
that.$message({
|
message: '生成警单成功',
|
type: 'success'
|
});
|
that.updateJtyep(row);
|
that.dialogTableVisible = false;
|
})
|
.catch(function (error) {
|
that.dialogTableVisible = false;
|
});
|
}
|
|
},
|
revoke(row){
|
var that = this;
|
axios({
|
url: '/api/blade-jfpts/alarm/alarm/deletejj?id='+row.id,
|
method: 'post',
|
}).then(function () {
|
that.dialogTableVisible = false;
|
//关闭窗口回调，关闭警报
|
that.$refs.realAudio.pause();
|
});
|
|
|
},updateJtyep(row){
|
var that = this;
|
axios({
|
url: '/api/blade-jfpts/alarm/alarm/updateJtype?id='+row.id+"&czTime="+row.czTime+"&bz="+row.bz,
|
method: 'post',
|
}).then(function () {
|
});
|
},
|
queryOldVideo(data) {
|
var newAxios = axios.create({
|
baseURL: "http://36.134.81.48:18000",
|
withCredentials: false,
|
headers: {
|
"Content-type": "application/x-www-form-urlencoded"
|
}
|
});
|
|
var time = this.beginTimeOrEndTime(data.alarmTime);
|
|
newAxios
|
.post(
|
"/api_control",
|
{},
|
{
|
params: {
|
param: JSON.stringify({ PktType: "GetAccessToken" })
|
}
|
}
|
)
|
.then(res => {
|
newAxios
|
.get(
|
`/GetPlayUrl?deviceCode=${data.channelNumber}&chl=${data.serialNumber}`
|
)
|
.then(result => {
|
this.innerVisibleVideo = true;
|
|
this.videoSource = result.data.data.m3u8;
|
});
|
|
// newAxios
|
// .post(
|
// "/api_control",
|
// {},
|
// {
|
// params: {
|
// param: JSON.stringify({
|
// PktType: "RemotePlayback",
|
// accessToken: res.data.data.accessToken,
|
// deviceCode: "001231409472",
|
// startTime: "20210130150000",
|
// endTime: "20210130160000",
|
// chl: data.serialNumber
|
// })
|
// }
|
// }
|
// )
|
// .then(result => {
|
|
// this.innerVisibleVideo = true;
|
|
// this.videoSource = result.data.data.m3u8;
|
|
// });
|
});
|
},
|
|
beginTimeOrEndTime(time) {
|
var beginTime = new Date(time);
|
|
var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);
|
|
var beginY = beginTime.getFullYear();
|
|
var beginM =
|
beginTime.getMonth() + 1 < 10
|
? "0" + (beginTime.getMonth() + 1)
|
: beginTime.getMonth() + 1;
|
|
var beginD =
|
beginTime.getDate() < 10
|
? "0" + beginTime.getDate()
|
: beginTime.getDate();
|
|
var beginH =
|
beginTime.getHours() < 10
|
? "0" + beginTime.getHours()
|
: beginTime.getHours();
|
|
var beginm =
|
beginTime.getMinutes() < 10
|
? "0" + beginTime.getMinutes()
|
: beginTime.getMinutes();
|
|
var begins =
|
beginTime.getSeconds() < 10
|
? "0" + beginTime.getSeconds()
|
: beginTime.getSeconds();
|
|
var endY = endTime.getFullYear();
|
|
var endM =
|
endTime.getMonth() + 1 < 10
|
? "0" + (endTime.getMonth() + 1)
|
: endTime.getMonth() + 1;
|
|
var endD =
|
endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();
|
|
var endH =
|
endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();
|
|
var endm =
|
endTime.getMinutes() < 10
|
? "0" + endTime.getMinutes()
|
: endTime.getMinutes();
|
|
var ends =
|
endTime.getSeconds() < 10
|
? "0" + endTime.getSeconds()
|
: endTime.getSeconds();
|
return {
|
begin: beginY + beginM + beginD + beginH + beginm + begins,
|
end: endY + endM + endD + endH + endm + ends
|
};
|
},
|
openOldVideoBox() {
|
if (Hls.isSupported()) {
|
var dom = document.getElementById("old_video");
|
|
// if (dom.volume) dom.volume = 1.0;
|
|
this.hls = new Hls();
|
|
var m3u8Url = decodeURIComponent(this.videoSource);
|
|
this.hls.loadSource(m3u8Url);
|
|
this.hls.attachMedia(dom);
|
|
this.hls.on(Hls.Events.MANIFEST_PARSED, function() {
|
dom.play();
|
});
|
}
|
},
|
closeOldVideoBox() {
|
var dom = document.getElementById("old_video");
|
|
if (dom.getAttribute("src") != "") {
|
dom.pause();
|
|
dom.setAttribute("src", "");
|
|
this.hls.destroy();
|
}
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.fade-leave-active {
|
transition: opacity 0.2s;
|
}
|
.fade-enter-active {
|
transition: opacity 2.5s;
|
}
|
.fade-enter,
|
.fade-leave-to {
|
opacity: 0;
|
}
|
.avue-logo {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 240px;
|
height: 64px;
|
line-height: 64px;
|
background-color: #20222a;
|
font-size: 20px;
|
overflow: hidden;
|
box-sizing: border-box;
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
|
color: rgba(255, 255, 255, 0.8);
|
z-index: 1024;
|
&_title {
|
display: block;
|
text-align: center;
|
font-weight: 300;
|
font-size: 20px;
|
}
|
&_subtitle {
|
display: block;
|
text-align: center;
|
font-size: 18px;
|
font-weight: bold;
|
color: #fff;
|
}
|
}
|
|
.real-dialog .el-dialog::after {
|
content: '';
|
position: absolute;
|
left: -5px;
|
top: 25px;
|
right: -5px;
|
bottom: 25px;
|
background: red;
|
border-radius: 10px;
|
filter: blur(120px);
|
mix-blend-mode: overlay;
|
pointer-events: none;
|
z-index: -1;
|
}
|
|
|
.real-dialog .el-dialog__header{
|
padding-top: 10px;
|
background: linear-gradient(45deg, #ff0000, #ff3c3c);
|
border-radius: 10px 10px 0 0;
|
}
|
|
.real-dialog .el-dialog__header .el-dialog__title{
|
color: white;
|
}
|
.real-dialog .el-dialog__header .el-dialog__headerbtn{
|
top: 15px;
|
}
|
|
.real-dialog .el-dialog{
|
border-radius: 10px 10px 10px 10px;
|
}
|
|
.ss-video-dialog {
|
position: absolute !important;
|
top: 50px !important;
|
left: auto !important;
|
right: 0px !important;
|
bottom: 0 !important;
|
margin: auto !important;
|
width: 476px !important;
|
}
|
|
.ss-video-dialog .el-dialog {
|
position: absolute !important;
|
top: 0 !important;
|
left: 0 !important;
|
right: 0 !important;
|
bottom: 0 !important;
|
margin: auto !important;
|
margin-top: 15vh !important;
|
height: 520px;
|
}
|
|
.ss-video-dialog .el-dialog .el-dialog__body {
|
height: calc(100% - 54px);
|
box-sizing: border-box;
|
}
|
|
|
</style>
|
