<template>
|
<div>
|
<el-dialog
|
class="real-dialog"
|
title="警情核实"
|
:visible.sync="dialogTableVisible"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
@opened="realOpenVideoDialog"
|
@close="(videoConversationReal = false), (oldVideoSatart = false)"
|
>
|
<el-dialog
|
class="ss-video-dialog"
|
:modal="false"
|
width="100%"
|
title="视频通话"
|
:visible.sync="videoConversationReal"
|
:close-on-press-escape="false"
|
append-to-body
|
@opened="openRealVideoBox"
|
@close="closeRealVideoBox"
|
>
|
<video
|
src=""
|
id="real_video_conversation"
|
style="width: 100%; height: 100%; object-fit: fill"
|
controls
|
></video>
|
</el-dialog>
|
|
<el-dialog
|
class="ss-video-dialog"
|
:modal="false"
|
width="100%"
|
title="历史回放"
|
:visible.sync="oldVideoSatart"
|
:close-on-press-escape="false"
|
append-to-body
|
@opened="openOldVideoBox"
|
@close="closeOldVideoBox"
|
>
|
<video
|
src="/oldVideo/ft.mp4"
|
muted="muted"
|
autoplay="autoplay"
|
loop
|
id="real_old_video"
|
style="width: 100%; height: 100%; object-fit: fill"
|
controls
|
></video>
|
</el-dialog>
|
|
<el-form
|
:model="form"
|
label-position="right"
|
size="mini"
|
label-width="100px"
|
>
|
<el-row>
|
<el-col span="12">
|
<audio src="" id="real_audio"></audio>
|
<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.phoneNumber"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="负责人">
|
<el-select
|
v-model="peopleName"
|
placeholder="请选择"
|
@change="peopleOrPhone"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in peopleList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="负责人电话">
|
<el-input
|
disabled="true"
|
v-model="peoplePhone"
|
autocomplete="off"
|
style="width: calc(100% - 110px)"
|
></el-input>
|
<el-button
|
type="success"
|
style="
|
margin-left: 10px;
|
padding: 0px 8px;
|
width: 100px;
|
height: 28px;
|
vertical-align: top;
|
"
|
>
|
<i class="el-icon-phone-outline"></i>
|
联系负责人
|
</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="省份" class="cityClassParams">
|
<avue-form :option="itemOption" v-model="form"></avue-form>
|
</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.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.content"
|
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
|
:class="{ active: isActive }"
|
type="success"
|
@click.stop="
|
(videoConversationReal = true), (oldVideoSatart = false)
|
"
|
@mousedown.native="aKeyToCall"
|
@mouseup.native="aKeyStopCall"
|
>视频通话
|
</el-button>
|
<el-button
|
v-show="false"
|
type="primary"
|
@click.stop="
|
(oldVideoSatart = true), (videoConversationReal = false)
|
"
|
>查看历史
|
</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<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 class="opt-btn">
|
<el-form-item>
|
<!-- <el-button
|
:class="{ active: isActive }"
|
type="success"
|
@click.stop="aKeyToCall($event, form)"
|
>查看视频
|
</el-button> -->
|
<el-button
|
type="success"
|
@click.stop="updateJtyep(form, 2, '办结')"
|
>办结
|
</el-button>
|
|
<img
|
src="/img/police-num.png"
|
style="margin-top: -20px; height: 80px; vertical-align: middle"
|
alt=""
|
@click.stop="updateJtyep(form, 1, '推送110')"
|
/>
|
|
<el-button
|
type="primary"
|
@click.stop="updateJtyep(form, 1, '派送保安')"
|
>派送保安
|
</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import Hls from "hls.js";
|
|
import axios from "axios";
|
|
import Recorder from "js-audio-recorder";
|
|
export default {
|
name: "realPopup",
|
data() {
|
return {
|
dialogTableVisible: false,
|
videoConversationReal: false,
|
oldVideoSatart: false,
|
form: {},
|
peopleList: [],
|
peopleName: "",
|
peoplePhone: "",
|
itemOption: {
|
menuBtn: false,
|
column: [
|
{
|
disabled: true,
|
row: false,
|
prop: "province",
|
type: "select",
|
placeholder: "省份",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
cascaderItem: ["city", "district"],
|
dicUrl: "/api/blade-system/region/select",
|
span: 1,
|
labelWidth: "0",
|
className: "cityClassSelect",
|
},
|
{
|
disabled: true,
|
row: false,
|
prop: "city",
|
type: "select",
|
placeholder: "地市",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
dicUrl: "/api/blade-system/region/select?code={{key}}",
|
span: 1,
|
labelWidth: "0",
|
className: "cityClassSelect",
|
},
|
{
|
disabled: true,
|
row: false,
|
prop: "district",
|
type: "select",
|
placeholder: "区县",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
dicUrl: "/api/blade-system/region/select?code={{key}}",
|
span: 1,
|
labelWidth: "0",
|
className: "cityClassSelect",
|
},
|
],
|
},
|
isActive: false,
|
};
|
},
|
methods: {
|
realOpenVideoDialog() {
|
Recorder.getPermission().then(() => {});
|
this.videoConversationReal = true;
|
},
|
// 视频通话打开关闭事件
|
openRealVideoBox() {
|
var that = this;
|
var newAxios = axios.create({
|
baseURL: "https://web.byisf.com:18000",
|
withCredentials: false,
|
headers: {
|
"Content-type": "application/x-www-form-urlencoded",
|
},
|
});
|
|
//this.form.serialNumber
|
newAxios
|
.post(
|
"/api_control",
|
{},
|
{
|
params: {
|
param: JSON.stringify({ PktType: "GetAccessToken" }),
|
},
|
}
|
)
|
.then((res) => {
|
newAxios
|
.get(
|
`https://web.byisf.com:18000/GetPlayUrl?deviceCode=${that.form.serialNumber}&chl=${this.form.channelNumber}`
|
)
|
.then((result) => {
|
that.videoSource = result.data.data.m3u8;
|
|
if (Hls.isSupported()) {
|
var dom = document.getElementById("real_video_conversation");
|
|
that.hls = new Hls();
|
|
var m3u8Url = decodeURIComponent(that.videoSource);
|
|
that.hls.loadSource(m3u8Url);
|
|
that.hls.attachMedia(dom);
|
|
that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
dom.play();
|
});
|
|
that.hls.on(Hls.Events.ERROR, function (event, data) {
|
console.log(data, 4566824159, "视频播放有问题！！！");
|
if (data.fatal) {
|
switch (data.type) {
|
case Hls.ErrorTypes.NETWORK_ERROR:
|
// try to recover network error
|
console.log(
|
"fatal network error encountered, try to recover"
|
);
|
that.hls.startLoad();
|
break;
|
case Hls.ErrorTypes.MEDIA_ERROR:
|
console.log(
|
"fatal media error encountered, try to recover"
|
);
|
that.hls.recoverMediaError();
|
break;
|
default:
|
// cannot recover
|
that.hls.destroy();
|
break;
|
}
|
}
|
});
|
}
|
});
|
});
|
},
|
closeRealVideoBox() {
|
var dom = document.getElementById("real_video_conversation");
|
|
if (dom.getAttribute("src") != "") {
|
dom.pause();
|
|
dom.setAttribute("src", "");
|
|
this.hls.destroy();
|
}
|
},
|
// 历史视频打开关闭事件
|
openOldVideoBox() {
|
var dom = document.getElementById("real_old_video");
|
dom.currentTime = 0;
|
dom.play();
|
},
|
closeOldVideoBox() {
|
var dom = document.getElementById("real_old_video");
|
dom.pause();
|
},
|
|
aKeyToCall() {
|
this.isActive = true;
|
var that = this;
|
if (this.recorder == null) {
|
this.recorder = new Recorder({
|
sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
|
sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
|
numChannels: 1, // 声道，支持 1 或 2， 默认是1
|
// compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
|
});
|
}
|
|
// 一键呼叫相关函数
|
that.recorder.start().then(
|
() => {
|
// 开始录音
|
},
|
(error) => {
|
// 出错了
|
console.log(`${error.name} : ${error.message}`);
|
}
|
);
|
},
|
|
// 序列号后期待修改
|
aKeyStopCall() {
|
this.isActive = false;
|
var newCallAxios = axios.create({
|
baseURL: "https://web.byisf.com:18000",
|
withCredentials: false,
|
headers: {
|
"Content-Type": "application/json;",
|
},
|
});
|
|
var that = this;
|
|
newCallAxios
|
.post(
|
`/api_control`,
|
{},
|
{
|
params: {
|
param: { PktType: "GetAccessToken" },
|
},
|
}
|
)
|
.then((result) => {
|
var formData = new FormData();
|
// that.recorder.downloadWAV("新文件");
|
|
var blob = that.recorder.getPCMBlob(); //获取pcm格式音频数据
|
//此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
|
var newbolb = new Blob([blob], { type: "audio/pcm" });
|
var fileOfBlob = new File([newbolb], new Date().getTime() + ".pcm");
|
formData.append("file", fileOfBlob);
|
|
var wavBlob = that.recorder.getWAVBlob();
|
|
var wavformData = new FormData();
|
var wavform = new File([wavBlob], new Date().getTime() + ".wav");
|
wavformData.append("file", wavform);
|
console.log(
|
wavBlob,
|
wavform,
|
wavformData,
|
wavformData.entries(),
|
132
|
);
|
|
axios({
|
method: "post",
|
url: "/api/xlfeedback/xlfeedback/put-objecty",
|
data: wavformData,
|
params: {
|
jid: that.form.id,
|
},
|
}).then((resdata) => {
|
console.log(resdata);
|
});
|
|
newCallAxios
|
.post(`/api_control`, blob, {
|
params: {
|
param: {
|
PktType: "Talk",
|
accessToken: result.data.data.accessToken,
|
deviceCode: this.form.serialNumber,
|
},
|
},
|
})
|
.then(() => {
|
that.recorder.destroy().then(function () {
|
that.recorder = null;
|
});
|
});
|
});
|
},
|
|
peopleOrPhone(e) {
|
this.peopleList.forEach((item) => {
|
if (item.label == e) {
|
this.peoplePhone = item.value;
|
}
|
});
|
},
|
updateJtyep(row, jtype, t) {
|
var that = this;
|
|
axios
|
.post(
|
"/api/alarm/alarm/updateJtype",
|
{},
|
{
|
params: {
|
jid: row.id,
|
jtype: jtype,
|
rid: row.alarmId,
|
bz: row.bz,
|
snumber: row.alarmId,
|
sname: row.alarmPeople,
|
zc: t,
|
zctime: that.getDate().current,
|
deviceNumber: row.deviceNumber
|
},
|
}
|
)
|
.then(function () {
|
that.dialogTableVisible = false;
|
axios({
|
method: "post",
|
url: `/api/rvideo/stop`,
|
params: {
|
jid: row.id,
|
},
|
}).then((resdata) => {});
|
// that.onLoad(that.page, that.query);
|
if (t == "办结") {
|
// location.reload();
|
that.$router.push({
|
path: "/real-popup/kongbai",
|
query: that.form,
|
});
|
setTimeout(() => {
|
that.$router.push({
|
path: "/realTimePolice/real",
|
query: that.form,
|
});
|
}, 10);
|
|
} else {
|
that.$router.push({
|
path: "/policeTracking/track",
|
query: that.form,
|
});
|
}
|
});
|
},
|
getDate() {
|
// 当前时间
|
var timestamp = Date.parse(new Date());
|
var serverDate = new Date(timestamp);
|
|
// 本周周一的时间
|
var mondayTime =
|
timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
|
var mondayData = new Date(mondayTime);
|
//年
|
var mondayY = mondayData.getFullYear();
|
//月
|
var mondayM =
|
mondayData.getMonth() + 1 < 10
|
? "0" + (mondayData.getMonth() + 1)
|
: mondayData.getMonth() + 1;
|
//日
|
var mondayD =
|
mondayData.getDate() < 10
|
? "0" + mondayData.getDate()
|
: mondayData.getDate();
|
// 当前时间
|
var currentData = new Date(timestamp);
|
//年
|
var currentY = currentData.getFullYear();
|
//月
|
var currentM =
|
currentData.getMonth() + 1 < 10
|
? "0" + (currentData.getMonth() + 1)
|
: currentData.getMonth() + 1;
|
//日
|
var currentD =
|
currentData.getDate() < 10
|
? "0" + currentData.getDate()
|
: currentData.getDate();
|
//时
|
var currenH =
|
currentData.getHours() < 10
|
? "0" + currentData.getHours()
|
: currentData.getHours();
|
//分
|
var currenM =
|
currentData.getMinutes() < 10
|
? "0" + currentData.getMinutes()
|
: currentData.getMinutes();
|
//秒
|
var currenS =
|
currentData.getSeconds() < 10
|
? "0" + currentData.getSeconds()
|
: currentData.getSeconds();
|
|
return {
|
day: {
|
beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
|
endTime:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":00",
|
},
|
week: {
|
beginTime: mondayY + "-" + mondayM + "-" + mondayD + " 00:00:00",
|
endTime:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":00",
|
},
|
month: {
|
beginTime: mondayY + "-" + mondayM + "-01 00:00:00",
|
endTime:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":00",
|
},
|
current:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":" +
|
currenS,
|
};
|
},
|
onItemGetParentData: function (row) {
|
// 该方法是用于接收父组件传递过来的参数
|
// 接收到参数后的具体操作
|
this.form = row;
|
this.peopleList = [
|
{ label: row.oneContacts, value: row.onePhone },
|
{ label: row.twoContacts, value: row.twoPhone },
|
{ label: row.threeContacts, value: row.threePhone },
|
];
|
this.peopleName = row.oneContacts;
|
this.peoplePhone = row.onePhone;
|
this.dialogTableVisible = true;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.el-button.active {
|
background: #ff0000 !important;
|
}
|
</style>
|
