<template>
|
<div id="app">
|
<router-view
|
@showRePlay="showRePlay"
|
@playVideo="playVideo"
|
@joinRecord="joinRecord"
|
@startPlay="startPlay"
|
@stopPlay="stopPlay"
|
v-loading="loading"
|
/>
|
<el-dialog
|
:title="rePlayMonitorpointName + ' ' + '回放列表'"
|
:visible.sync="showRePlayVisible"
|
width="80%"
|
@close="closeAllReplay"
|
>
|
<div class="rePlayTile">
|
<div style="width: 30%; display: flex">
|
<span style="width: 50px; line-height: 28px">频率:</span>
|
<el-input
|
placeholder="请输入频率"
|
v-model="rePlayFrequency"
|
size="mini"
|
>
|
</el-input>
|
</div>
|
|
<div style="width: 30%; display: flex">
|
<span style="width: 100px; line-height: 28px">录音方式:</span>
|
<el-select
|
v-model="isUnderWayValue"
|
placeholder="请选择录音方式"
|
size="mini"
|
>
|
<el-option label="定时录制" value="0"> </el-option>
|
<el-option label="监听录制" value="3"> </el-option>
|
<el-option label="采样录制" value="4"> </el-option>
|
</el-select>
|
</div>
|
|
<div style="width: 30%">
|
<el-date-picker
|
v-model="rePlayTimeArr"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="mini"
|
>
|
</el-date-picker>
|
</div>
|
</div>
|
<el-table
|
:data="rePlayTable"
|
style="width: 100%; margin-top: 30px"
|
:isKey="isKey"
|
v-loading="rePlayLoading"
|
:height="rePlayTableH"
|
>
|
<el-table-column prop="frequencyValue" label="频率"> </el-table-column>
|
<el-table-column prop="starttime" label="开始时间">
|
<template slot-scope="scope">
|
<div>
|
{{ dateFormatter(scope.row.starttime) }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="stoptime" label="结束时间">
|
<template slot-scope="scope">
|
<div>
|
{{ dateFormatter(scope.row.stoptime) }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="rssi" label="场强"> </el-table-column>
|
<el-table-column prop="assessvalue" label="手动评分"></el-table-column>
|
<el-table-column prop="auto_assessvalue" label="自动评分">
|
</el-table-column>
|
<el-table-column prop="" label="操作">
|
<template slot-scope="scope">
|
<div>
|
<el-button
|
size="mini"
|
type="primary"
|
@click="startRePlayVideo(scope.row)"
|
>进行回放</el-button
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div style="padding: 0 20px; margin-top: 10px">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="rePlayPageno"
|
:page-sizes="[10, 20, 30, 50]"
|
:page-size="rePlayPagesize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="rePlayTotalCount"
|
>
|
</el-pagination>
|
</div>
|
</el-dialog>
|
<el-dialog :visible.sync="rePlayRadioVisible" @close="closeReplay">
|
<div>
|
<video
|
id="rePlayVideo"
|
ref="rePlayVideo"
|
src=""
|
controls
|
preload
|
width="100%"
|
></video>
|
</div>
|
</el-dialog>
|
|
<video
|
ref="videoElement"
|
id="videoElement"
|
controls
|
width="0"
|
height="0"
|
v-show="false"
|
>
|
xxx
|
</video>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
watch: {
|
isUnderWayValue: {
|
handler(n, o) {
|
if (this.timer) {
|
clearTimeout(this.timer);
|
}
|
this.timer = setTimeout(() => {
|
this.rePlayStartTime = this.dateFormatter(this.rePlayTimeArr[0]);
|
this.rePlayEndTime = this.dateFormatter(this.rePlayTimeArr[1]);
|
this.getReplayInfo();
|
}, 500);
|
},
|
},
|
rePlayFrequency: {
|
handler(n, o) {
|
if (this.timer) {
|
clearTimeout(this.timer);
|
}
|
this.timer = setTimeout(() => {
|
this.rePlayStartTime = this.dateFormatter(this.rePlayTimeArr[0]);
|
this.rePlayEndTime = this.dateFormatter(this.rePlayTimeArr[1]);
|
this.getReplayInfo();
|
}, 500);
|
},
|
},
|
rePlayTimeArr: {
|
handler(n, o) {
|
if (this.timer) {
|
clearTimeout(this.timer);
|
}
|
this.timer = setTimeout(() => {
|
this.rePlayStartTime = this.dateFormatter(this.rePlayTimeArr[0]);
|
this.rePlayEndTime = this.dateFormatter(this.rePlayTimeArr[1]);
|
this.getReplayInfo();
|
}, 500);
|
},
|
deep: true,
|
},
|
},
|
data() {
|
return {
|
loading: false,
|
isUnderWayValue: "0",
|
timer: null,
|
isKey: false,
|
player: null,
|
recordingtime: null,
|
rtsp: null,
|
showRePlayVisible: false,
|
rePlayMonitorpointName: "",
|
rePlayMonitorpointId: "",
|
rePlayPagesize: 10,
|
rePlayPageno: 1,
|
rePlayFrequency: "",
|
rePlayEndTime: "",
|
rePlayStartTime: "",
|
rePlayTable: [],
|
rePlayTimeArr: [],
|
rePlayTotalCount: 100,
|
rePlayLoading: false,
|
rePlayVideo: null,
|
rePlayRadioVisible: false,
|
rePlayTableH: 0,
|
};
|
},
|
mounted() {
|
this.rePlayTableH = window.innerHeight - 200 + "px";
|
},
|
methods: {
|
playVideo() {},
|
closeAllReplay() {
|
this.rePlayFrequency = "";
|
this.rePlayTimeArr = [];
|
this.isUnderWayValue = 0;
|
},
|
//显示回放界面
|
showRePlay(data) {
|
this.rePlayMonitorpointId = data.monitorpointId;
|
this.rePlayMonitorpointName = data.monitorpointName;
|
this.getReplayInfo();
|
this.showRePlayVisible = true;
|
},
|
|
//获取回放列表
|
getReplayInfo() {
|
this.rePlayLoading = true;
|
let param = {
|
bid: "getRecordList",
|
isUnderWay: Number(this.isUnderWayValue),
|
monitorpointId: this.rePlayMonitorpointId,
|
start_time: this.rePlayStartTime,
|
end_time: this.rePlayEndTime,
|
frequency: this.rePlayFrequency,
|
pagesize: this.rePlayPagesize,
|
pageno: this.rePlayPageno,
|
};
|
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
this.rePlayTable = res.data.data[0];
|
this.rePlayTotalCount = res.data.data[1][0].counter;
|
this.isKey = !this.isKey;
|
this.rePlayLoading = false;
|
});
|
},
|
|
//分页改变时
|
handleSizeChange(size) {
|
this.rePlayPagesize = size;
|
this.getReplayInfo();
|
},
|
handleCurrentChange(page) {
|
this.rePlayPageno = page;
|
this.getReplayInfo();
|
},
|
|
//获取回放地址
|
startRePlayVideo(data) {
|
let param = new URLSearchParams();
|
param.append("method", "mutipleReview");
|
param.append("instruct", 1);
|
param.append("playType", 1);
|
param.append("hls", 1);
|
param.append("key", 123456);
|
param.append("monitorpointId", this.rePlayMonitorpointId);
|
param.append("frequencyValue", data.frequencyValue);
|
param.append("startTime", this.dateFormatter(data.starttime));
|
param.append("endTime", this.dateFormatter(data.stoptime));
|
|
this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
|
(res) => {
|
if (res.success == "true") {
|
//显示播放器
|
this.rePlayRadioVisible = true;
|
setTimeout(() => {
|
this.playReplay(res.url);
|
}, 1000);
|
} else {
|
this.$message.error(res.msg);
|
}
|
}
|
);
|
},
|
|
//开始回放
|
playReplay(url) {
|
this.rePlayVideo = document.getElementById("rePlayVideo");
|
if (Hls.isSupported()) {
|
var hls = new Hls();
|
hls.loadSource(url);
|
hls.attachMedia(this.rePlayVideo);
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
this.rePlayVideo.play();
|
});
|
} else if (
|
this.rePlayVideo.canPlayType("application/vnd.apple.mpegurl")
|
) {
|
this.rePlayVideo.src = url;
|
this.rePlayVideo.addEventListener("loadedmetadata", function () {
|
this.rePlayVideo.play();
|
});
|
}
|
},
|
|
//关闭播放器
|
closeReplay() {
|
if (this.rePlayVideo) {
|
this.rePlayVideo.pause();
|
this.rePlayVideo = null;
|
}
|
},
|
|
//格式化时间
|
dateFormatter(date) {
|
if (date) {
|
let time = new Date(date);
|
var year = time.getFullYear();
|
var month = time.getMonth() + 1;
|
var date = time.getDate();
|
var hour = time.getHours();
|
var minute = time.getMinutes();
|
var second = time.getSeconds();
|
return (
|
this.add0(year) +
|
"-" +
|
this.add0(month) +
|
"-" +
|
this.add0(date) +
|
" " +
|
this.add0(hour) +
|
":" +
|
this.add0(minute) +
|
":" +
|
this.add0(second)
|
);
|
} else {
|
return "";
|
}
|
},
|
|
add0(val) {
|
return val < 10 ? "0" + val : val;
|
},
|
|
//加入录制
|
joinRecord(recordData) {
|
console.log(recordData);
|
this.$prompt("请输入时间(分钟)", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
inputPattern:
|
/^([1-9]|([1-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9])|([0]{1}))$|^[3][6][0]$/,
|
inputErrorMessage: "请输入1到360的整数",
|
})
|
.then(({ value }) => {
|
this.loading = true;
|
let param = {
|
bid: "checkChannel",
|
channelId: 3,
|
monitorpointId: recordData.monitorpointId,
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
console.log(res);
|
if (
|
Number(res.data.data[0][0].frequencyValue) ===
|
Number(recordData.frequencyValue)
|
) {
|
this.loading = false;
|
} else {
|
if (res.data.data[0][0].frequencyValue) {
|
this.$confirm(
|
`是否停止录制${res.data.data[0][0].frequencyValue},并将${recordData.frequencyValue}加入录制`,
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
console.log(value);
|
this.addRecording(recordData, value);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
} else {
|
console.log(value);
|
this.addRecording(recordData, value);
|
}
|
}
|
});
|
})
|
.catch(() => {
|
this.loading = false;
|
|
this.$message({
|
type: "info",
|
message: "取消输入",
|
});
|
});
|
},
|
addRecording(recordData, value) {
|
console.log("123");
|
let param = new URLSearchParams();
|
param.append("method", "record");
|
param.append("key", 111111);
|
param.append("recordTimeLength", value);
|
param.append("monitorpointId", recordData.monitorpointId);
|
param.append("frequencyValue", recordData.frequencyValue);
|
param.append("isUnderWay", 0);
|
let url = `${window.equipmentURL}/FRP/TNewrecordtask.do?method=record&monitorpointId=${recordData.monitorpointId}&frequencyValue=${recordData.frequencyValue}`;
|
this.$getJSON(window.equipmentURL + "FRP/TNewrecordtask.do", param).then(
|
(res) => {
|
console.log(res);
|
// this.$emit("hideLoading");
|
let param1 = {
|
bid: "setChannelRecord",
|
monitorpointId: recordData.monitorpointId,
|
frequency: recordData.frequencyValue,
|
userid: JSON.parse(sessionStorage.getItem("userName")).account,
|
requesturl: url,
|
success: res[0].success.toString(),
|
msg: res[0].msg,
|
recordminitus: 180,
|
};
|
|
this.$post(window.backstageURL + "dataservice/dealData", param1).then(
|
(res1) => {}
|
);
|
|
if (res[0].success) {
|
this.loading = false;
|
this.$message.success(res[0].msg);
|
// this.getCollection();
|
// this.getFrequency(this.showInfo);
|
} else {
|
this.loading = false;
|
this.$message.error(res[0].msg);
|
}
|
}
|
);
|
},
|
|
//开始收听
|
startPlay(playData) {
|
this.loading = true;
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
let param = {
|
bid: "checkChannel",
|
channelId: 2,
|
monitorpointId: playData.monitorpointId,
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res1) => {
|
if (
|
res1.data.data[0][0].frequencyValue &&
|
res1.data.data[0][0].frequencyValue != playData.frequencyValue
|
) {
|
this.$confirm(`是否暂停副录通道1分钟，随后恢复`, "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
if (this.player) {
|
if (this.rtsp) {
|
this.recordingtime = new Date();
|
this.isplay = true;
|
this.player.play();
|
this.loading = false;
|
} else {
|
this.loading = false;
|
|
this.$message.error("无音频文件");
|
}
|
} else {
|
this.getPalyUrl(
|
playData.monitorpointId,
|
playData.frequencyValue
|
);
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
} else {
|
if (this.player) {
|
if (this.rtsp) {
|
this.isplay = true;
|
this.player.play();
|
} else {
|
this.$message.error("无音频文件");
|
this.loading = false;
|
}
|
} else {
|
this.getPalyUrl(playData.monitorpointId, playData.frequencyValue);
|
}
|
}
|
});
|
},
|
|
getPalyUrl(monitorpointId, frequencyValue) {
|
console.log(monitorpointId);
|
console.log(frequencyValue);
|
let param = new URLSearchParams();
|
param.append("method", "playLiveNew");
|
param.append("instruct", 1);
|
param.append("playType", 0);
|
param.append("hls", 0);
|
param.append("key", 123456);
|
param.append("monitorpointId", monitorpointId);
|
param.append("frequencyValue", frequencyValue);
|
|
let url = `${window.equipmentURL}FRP/ScanSignal.do?method=playLiveNew&instruct=1&playType=0&hls=0&key=123456&monitorpointId=${monitorpointId}&frequencyValue=${frequencyValue}`;
|
this.$getJSON(window.equipmentURL + "FRP/ScanSignal.do", param).then(
|
(res) => {
|
console.log(res);
|
let par = new URLSearchParams();
|
par.append("method", "record");
|
par.append("key", 111111);
|
par.append("recordTimeLength", 1);
|
par.append("monitorpointId", monitorpointId);
|
par.append("frequencyValue", frequencyValue);
|
par.append("isUnderWay", 3);
|
|
let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${monitorpointId}&frequencyValue=${frequencyValue}`;
|
this.$getJSON(
|
window.equipmentURL + "FRP/TNewrecordtask.do",
|
par
|
).then((re) => {
|
console.log(re);
|
let par1 = {
|
bid: "setTempRecord",
|
monitorpointId: monitorpointId,
|
frequency: frequencyValue,
|
userid: this.userid,
|
requesturl: url,
|
success: re[0].success.toString(),
|
msg: re[0].msg,
|
recordminitus: 1,
|
};
|
|
this.$post(window.backstageURL + "dataservice/dealData", par1).then(
|
(re1) => {}
|
);
|
|
if (re[0].success) {
|
this.$message.success(re[0].msg);
|
} else {
|
this.$message.error(re[0].msg);
|
}
|
});
|
|
this.$message.warning(res.success);
|
|
let flvurl = "";
|
if (res.url) {
|
flvurl = res.url;
|
}
|
|
let param1 = {
|
bid: "setMonitoringRecord",
|
monitorpointId: monitorpointId,
|
frequency: frequencyValue,
|
userid: this.userid,
|
requesturl: url,
|
success: res.success,
|
msg: res.msg,
|
flvurl: flvurl,
|
recordminitus: 1,
|
};
|
|
this.$getJSON(
|
window.backstageURL + "dataservice/recordMonitorOpt",
|
param1
|
).then((res1) => {});
|
|
if (res.url) {
|
this.rtsp = res.url;
|
|
let video = document.getElementById("videoElement");
|
|
if (flvjs.isSupported()) {
|
this.player = flvjs.createPlayer(
|
{
|
type: "flv",
|
isLive: true,
|
fluid: true,
|
url: this.rtsp,
|
},
|
{
|
enableStashBuffer: false,
|
fixAudioTimestampGap: false,
|
isLive: true,
|
}
|
);
|
|
this.player.attachMediaElement(video);
|
|
this.player.load(); //加载
|
this.loading = false;
|
|
if (this.rtsp) {
|
this.isplay = true;
|
this.recordingtime = new Date();
|
this.player.play();
|
} else {
|
this.$message.error("无音频文件");
|
}
|
}
|
}
|
}
|
);
|
},
|
|
//停止播放
|
stopPlay() {
|
console.log("!@#");
|
console.log(this.player);
|
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
},
|
},
|
beforeDestroy() {
|
// let param = {
|
// bid: "stopTempRecord",
|
// frequency: this.showFrequencyValue,
|
// monitorpointId: this.showInfo.monitorpointId,
|
// };
|
// this.$getJSON(window.backstageURL +
|
// "dataservice/getNoTokenData",
|
// param
|
// ).then((res) => {});
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
#app {
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
text-align: center;
|
color: #2c3e50;
|
}
|
|
html,
|
body,
|
#app {
|
height: 100%;
|
}
|
|
.rePlayTile {
|
padding: 0 20px;
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
}
|
</style>
|
