<template>
|
<div v-loading="loading">
|
<div v-show="isShow" class="shadowDiv"></div>
|
<div
|
v-show="isShow"
|
class="scoreTask"
|
:style="{ height: windowHeight * 0.5 - 20 + 'px' }"
|
>
|
<i class="el-icon-close iconPos" @click="closeTop()"></i>
|
|
<div style="width: 90%; margin-left: 5%; margin-top: 30px; z-index: 1000">
|
<el-table
|
:data="tableData"
|
style="width: 100%"
|
:border="false"
|
:show-header="false"
|
:height="windowHeight * 0.5 - 50 + 'px'"
|
>
|
<el-table-column type="index" label="#"> </el-table-column>
|
<el-table-column prop="name" label="日期" min-width="130">
|
</el-table-column>
|
<el-table-column prop="frequency" label="姓名"> </el-table-column>
|
<el-table-column prop="taskcompletion" label="地址">
|
</el-table-column>
|
<el-table-column prop="" label="操作">
|
<template slot-scope="scope">
|
<div>
|
<el-button size="mini" type="success" @click="startScore(scope)"
|
>开始评分</el-button
|
>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div
|
v-show="showCard"
|
class="scoreTask2"
|
:style="{
|
height: windowHeight * 0.3 + 'px',
|
top: windowHeight * 0.6 + 'px',
|
}"
|
>
|
<i class="el-icon-close iconPos" @click="closeBottom()"></i>
|
|
<div>
|
<div
|
:style="{ width: '100%', height: windowHeight * 0.3 - 30 + 'px' }"
|
:key="key"
|
>
|
<div>
|
<div class="carouselDiv">
|
<div class="carouselTop">
|
<p>{{ nowTime }}</p>
|
<p>频率:{{ socketArray[nowSocketIndex].frequency }}</p>
|
|
<p>{{ nowSocketIndex + 1 }} / {{ socketArray.length }}</p>
|
|
<el-button
|
type="primary"
|
class="submit"
|
size="mini"
|
:disabled="!isCanClick"
|
@click="submitAll()"
|
>提交</el-button
|
>
|
</div>
|
<div class="carouselMid" :key="isKey">
|
<div
|
class="carouselMidHover"
|
@click="rePlay(socketArray[nowSocketIndex], nowSocketIndex)"
|
style="margin-left: 20px"
|
v-if="isHaveTime"
|
>
|
<i class="el-icon-refresh-right" style="font-size: 36px"></i>
|
<p style="margin-top: 5px; text-align: center">回放</p>
|
</div>
|
|
<div v-else>
|
<div
|
class="carouselMidHover"
|
@click="
|
pausePlay(socketArray[nowSocketIndex], nowSocketIndex)
|
"
|
v-if="isplay"
|
>
|
<i class="el-icon-video-pause" style="font-size: 36px"></i>
|
<p style="margin-top: 5px; text-align: center">暂停</p>
|
</div>
|
<div
|
class="carouselMidHover"
|
@click="
|
startPlay(socketArray[nowSocketIndex], nowSocketIndex)
|
"
|
v-else
|
>
|
<i class="el-icon-video-play" style="font-size: 36px"></i>
|
<p style="margin-top: 5px; text-align: center">播放</p>
|
</div>
|
</div>
|
</div>
|
<div class="carouselbottom">
|
<p style="line-height: 28px">请评分:</p>
|
|
<el-radio-group
|
v-model="socketArray[nowSocketIndex].assessvalue"
|
size="mini"
|
style="margin-left: 20px; height: 28px"
|
>
|
<el-radio-button label="1">1分</el-radio-button>
|
<el-radio-button label="2">2分</el-radio-button>
|
<el-radio-button label="3">3分</el-radio-button>
|
<el-radio-button label="4">4分</el-radio-button>
|
<el-radio-button label="5">5分</el-radio-button>
|
<el-radio-button label="0">无效</el-radio-button>
|
</el-radio-group>
|
</div>
|
|
<div
|
class="carouselLeft"
|
@click="jumpPrev(socketArray[nowSocketIndex], nowSocketIndex)"
|
>
|
<p><< 上一项</p>
|
</div>
|
<div
|
class="carouselRight"
|
@click="jumpNext(socketArray[nowSocketIndex], nowSocketIndex)"
|
>
|
<p>下一项 >></p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<el-dialog :visible.sync="socketPlay" width="50" @close="socketReplay">
|
<video
|
id="socketVidoPlay"
|
ref="socketVidoPlay"
|
src=""
|
controls
|
preload
|
width="100%"
|
height="300"
|
></video>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
export default {
|
watch: {
|
visible: {
|
handler(n, o) {
|
this.windowHeight = document.body.clientHeight;
|
this.isShow = this.visible;
|
if (this.visible) {
|
this.getInfo();
|
}
|
},
|
isShow: {
|
handler(n, o) {
|
if (this.isShow) {
|
this.getInfo();
|
}
|
},
|
},
|
},
|
socketArray: {
|
handler(n, o) {
|
let isShow = true;
|
|
this.socketArray.forEach((item) => {
|
if (item.assessvalue) {
|
} else {
|
isShow = false;
|
}
|
});
|
|
this.isCanClick = isShow;
|
},
|
deep: true,
|
},
|
},
|
data() {
|
return {
|
isHaveTime: false,
|
isKey: false,
|
socketPlay: false,
|
nowTime: "",
|
key: false,
|
nowSocketIndex: 0,
|
loading: false,
|
windowHeight: document.body.clientHeight,
|
tableData: [],
|
isShow: false,
|
showCard: false,
|
socketArray: [{ frequency: "", assessvalue: "" }],
|
rateValue: "",
|
nowPlayId: null,
|
isplay: true,
|
player: null,
|
isCanClick: false,
|
recordingtime: "",
|
nowScoreId: "",
|
playVideo: null,
|
};
|
},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
username: {
|
type: String,
|
default: "",
|
},
|
userid: {
|
type: String,
|
default: "",
|
},
|
isLoney: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
mounted() {},
|
methods: {
|
rePlay(data, index) {
|
if (data.update_time) {
|
let startTime = this.dateFormatter(
|
new Date(new Date(data.update_time).getTime())
|
);
|
let endTime = this.dateFormatter(
|
new Date(new Date(data.update_time).getTime() + 1000 * 60 * 180)
|
);
|
|
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", data.monitorpoint_id);
|
param.append("frequencyValue", data.frequency);
|
param.append("startTime", startTime);
|
param.append("endTime", endTime);
|
|
this.$post(window.equipmentURL + "FRP/NetRequest.do", param).then(
|
(res) => {
|
if (res.success == "true") {
|
this.socketPlay = true;
|
let url = res.url;
|
this.playVideo = this.$refs.socketVidoPlay;
|
if (Hls.isSupported()) {
|
var hls = new Hls();
|
hls.loadSource(url);
|
hls.attachMedia(this.playVideo);
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
this.playVideo.play();
|
});
|
} else if (
|
this.playVideo.canPlayType("application/vnd.apple.mpegurl")
|
) {
|
this.playVideo.src = url;
|
this.playVideo.addEventListener("loadedmetadata", function () {
|
this.playVideo.play();
|
});
|
}
|
} else {
|
this.$message.error(res.msg);
|
}
|
}
|
);
|
} else {
|
this.$message.warning("尚未有回放");
|
}
|
},
|
socketReplay() {
|
if (this.playVideo) {
|
this.playVideo.pause();
|
this.playVideo = null;
|
}
|
},
|
jumpPrev(data, index) {
|
if (data.assessvalue) {
|
if (index == 0) {
|
this.nowSocketIndex = this.socketArray.length - 1;
|
} else {
|
this.nowSocketIndex = index - 1;
|
}
|
let param = {
|
bid: "assessPress",
|
frequency: this.socketArray[index].frequency,
|
assessvalue: this.socketArray[index].assessvalue,
|
monitorpointId: this.socketArray[index].monitorpoint_id,
|
taskid: this.socketArray[index].id,
|
userid: this.userid,
|
recording_time: this.dateFormatter(new Date()),
|
};
|
|
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;
|
this.nowPlayId = null;
|
this.isplay = false;
|
|
this.getInfo();
|
|
if (this.socketArray[this.nowSocketIndex].update_time) {
|
this.isHaveTime = true;
|
} else {
|
this.isHaveTime = false;
|
this.socketArray[this.nowSocketIndex].update_time = "1";
|
this.startPlay(
|
this.socketArray[this.nowSocketIndex],
|
this.nowSocketIndex
|
);
|
}
|
this.isKey = !this.isKey;
|
} else {
|
this.$message.warning("请评分");
|
}
|
|
this.key = !this.key;
|
},
|
jumpNext(data, index) {
|
if (data.assessvalue) {
|
if (index == this.socketArray.length - 1) {
|
this.nowSocketIndex = 0;
|
} else {
|
this.nowSocketIndex = index + 1;
|
}
|
this.isKey = !this.isKey;
|
let param = {
|
bid: "assessPress",
|
frequency: this.socketArray[index].frequency,
|
assessvalue: this.socketArray[index].assessvalue,
|
monitorpointId: this.socketArray[index].monitorpoint_id,
|
taskid: this.socketArray[index].id,
|
userid: this.userid,
|
recording_time: this.dateFormatter(new Date()),
|
};
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {});
|
|
this.recordingtime = "";
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
}
|
this.player = null;
|
this.nowPlayId = null;
|
this.isplay = false;
|
|
this.getInfo();
|
if (this.socketArray[this.nowSocketIndex].update_time) {
|
this.isHaveTime = true;
|
} else {
|
this.isHaveTime = false;
|
this.socketArray[this.nowSocketIndex].update_time = "1";
|
this.startPlay(
|
this.socketArray[this.nowSocketIndex],
|
this.nowSocketIndex
|
);
|
}
|
|
this.isKey = !this.isKey;
|
} else {
|
this.$message.warning("请评分");
|
}
|
},
|
submitAll() {
|
let param = new URLSearchParams();
|
param.append("bid", "updateAssessSchedule");
|
param.append("schedule_id", this.nowScoreId);
|
param.append(
|
"complate_rate",
|
this.socketArray.length + "/" + this.socketArray.length
|
);
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
this.$message.success("提交成功");
|
}
|
});
|
},
|
getInfo() {
|
if (this.userid == "" || this.username == "") {
|
if (this.isLoney) {
|
this.$emit("showLogin");
|
} else {
|
window.location.href =window.backstageURL +
|
"ammonitor/#/passport/login";
|
}
|
} else {
|
let param = new URLSearchParams();
|
param.append("bid", "getAssessSchedule");
|
param.append("userid", this.userid);
|
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
this.tableData = JSON.parse(JSON.stringify(res.data.data[0]));
|
});
|
}
|
},
|
startScore(scope) {
|
if (this.userid == "" || this.username == "") {
|
if (this.isLoney) {
|
this.$emit("showLogin");
|
} else {
|
window.location.href =window.backstageURL +
|
"ammonitor/#/passport/login";
|
}
|
} else {
|
this.nowScoreId = scope.row.id;
|
this.nowTime = scope.row.name;
|
let param = new URLSearchParams();
|
param.append("bid", "getAssessTask");
|
param.append("userid", this.userid);
|
param.append("schedule_id", scope.row.id);
|
|
this.$getJSON(window.backstageURL +
|
"dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.code == 20000) {
|
this.socketArray = res.data.data;
|
this.showCard = true;
|
|
if (this.socketArray[this.nowSocketIndex].update_time) {
|
this.isHaveTime = true;
|
} else {
|
this.isHaveTime = false;
|
this.socketArray[this.nowSocketIndex].update_time = "1";
|
this.startPlay(
|
this.socketArray[this.nowSocketIndex],
|
this.nowSocketIndex
|
);
|
}
|
}
|
});
|
}
|
},
|
closeTop() {
|
this.isShow = false;
|
this.showCard = false;
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
this.$emit("closeIsShow");
|
},
|
closeBottom() {
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
this.player = null;
|
}
|
this.showCard = false;
|
},
|
carouselChange(index, oldindex) {
|
if (this.recordingtime && this.socketArray[oldindex].assessvalue) {
|
let param = {
|
bid: "assessPress",
|
frequency: this.socketArray[oldindex].frequency,
|
assessvalue: this.socketArray[oldindex].assessvalue,
|
monitorpointId: this.socketArray[oldindex].monitorpoint_id,
|
taskid: this.socketArray[oldindex].id,
|
userid: this.userid,
|
recording_time: this.dateFormatter(this.recordingtime),
|
};
|
|
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;
|
this.nowPlayId = null;
|
this.isplay = false;
|
} else {
|
this.$message.warning("请收听并评分");
|
|
if (this.recordingtime) {
|
let param1 = new URLSearchParams();
|
param1.append("method", "delete");
|
param1.append(
|
"monitorpointId",
|
this.socketArray[oldindex].monitorpoint_id
|
);
|
param1.append("frequencyValue", this.socketArray[oldindex].frequency);
|
param1.append("key", 123456);
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param1
|
).then((res) => {});
|
}
|
|
if (oldindex < index) {
|
this.$refs.carousel.activeIndex = this.$refs.carousel.activeIndex - 1;
|
} else {
|
this.$refs.carousel.activeIndex = this.$refs.carousel.activeIndex + 1;
|
}
|
}
|
},
|
|
startPlay(item, index) {
|
if (this.nowPlayId) {
|
if (this.nowPlayId == index) {
|
if (this.isplay) {
|
this.$message.warning("当前设备正在播放");
|
} else {
|
this.isplay = true;
|
this.recordingtime = new Date();
|
this.player.play();
|
}
|
} else {
|
}
|
} else {
|
this.nowPlayId = index;
|
this.getPalyUrl(item);
|
}
|
},
|
|
pausePlay() {
|
this.isplay = false;
|
this.player.pause();
|
},
|
stopPlay() {
|
if (this.player) {
|
this.player.pause();
|
this.player.unload();
|
this.player.detachMediaElement();
|
this.player.destroy();
|
}
|
this.player = null;
|
this.nowPlayId = null;
|
this.isplay = false;
|
},
|
|
getPalyUrl(item) {
|
this.loading = true;
|
let par = new URLSearchParams();
|
|
par.append("method", "record");
|
par.append("key", 111111);
|
par.append("recordTimeLength", 1);
|
par.append("monitorpointId", item.monitorpoint_id);
|
par.append("frequencyValue", item.frequency);
|
par.append("isUnderWay", 3);
|
|
let url1 = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${item.monitorpoint_id}&frequencyValue=${item.frequency}`;
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
par
|
).then((re) => {
|
let par1 = {
|
bid: "setTempRecord",
|
monitorpointId: item.monitorpoint_id,
|
frequency: item.frequency,
|
userid: this.userid,
|
requesturl: url1,
|
success: re.success.toString(),
|
msg: re.msg,
|
recordminitus: 1,
|
};
|
|
this.$post(window.backstageURL +
|
"dataservice/dealData",
|
par1
|
).then((re1) => {});
|
|
if (re.success) {
|
this.$message.success(re.msg);
|
} else {
|
this.$message.error(re.msg);
|
}
|
});
|
|
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", item.monitorpoint_id);
|
param.append("frequencyValue", item.frequency);
|
|
let url = `${window.equipmentURL}FRP/ScanSignal.do?method=playLiveNew&instruct=1&playType=0&hls=0&key=123456&monitorpointId=${item.monitorpoint_id}&frequencyValue=${item.frequency}`;
|
this.$getJSON(window.equipmentURL +
|
"FRP/ScanSignal.do",
|
param
|
).then((res) => {
|
if (res.success == "true") {
|
this.$message.success("获取直播成功");
|
this.loading = false;
|
|
let flvurl = "";
|
if (res.url) {
|
flvurl = res.url;
|
}
|
|
let param1 = {
|
bid: "setMonitoringRecord",
|
monitorpointId: item.monitorpoint_id,
|
frequency: item.frequency,
|
userid: this.userid,
|
requesturl: url,
|
success: res.success,
|
msg: res.msg,
|
flvurl: flvurl,
|
recordminitus: 1,
|
};
|
|
this.$getJSON(
|
"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",
|
url: this.rtsp,
|
});
|
|
this.player.attachMediaElement(video);
|
|
this.player.load(); //加载
|
|
if (this.rtsp) {
|
this.recordingtime = new Date();
|
this.isplay = true;
|
this.player.play();
|
} else {
|
this.$message.error("无音频文件");
|
}
|
}
|
} else {
|
|
}
|
} else {
|
this.$message.warning(res.msg);
|
}
|
});
|
},
|
|
dateFormatter(time) {
|
if (time) {
|
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 0;
|
}
|
},
|
|
add0(val) {
|
return val < 10 ? "0" + val : val;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.shadowDiv {
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: rgba(96, 96, 96, 0.5);
|
z-index: 998;
|
}
|
.scoreTask {
|
position: fixed;
|
width: 60%;
|
top: 10%;
|
left: 20%;
|
background-color: white;
|
z-index: 5000;
|
}
|
|
.scoreTask2 {
|
position: fixed;
|
width: 30%;
|
left: 35%;
|
background-color: white;
|
z-index: 5000;
|
}
|
|
.iconPos {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
font-size: 14px;
|
z-index: 1001;
|
}
|
|
.carouselDiv {
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: column;
|
justify-content: space-between;
|
height: 100%;
|
}
|
|
.carouselbottom {
|
position: absolute;
|
bottom: 30px;
|
display: flex;
|
justify-content: center;
|
width: 80%;
|
margin-left: 10%;
|
}
|
|
.carouselTop {
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
width: 80%;
|
margin-left: 10%;
|
position: absolute;
|
top: 0;
|
height: 50px;
|
|
p {
|
line-height: 50px;
|
font-size: 14px;
|
}
|
|
.submit {
|
width: 60px;
|
height: 30px;
|
margin-top: 10px;
|
}
|
}
|
|
.carouselLeft {
|
position: absolute;
|
top: 50px;
|
bottom: 0px;
|
width: 20%;
|
left: 0;
|
p {
|
width: 100%;
|
height: 50px;
|
line-height: 50px;
|
position: absolute;
|
top: 50%;
|
margin-top: -50px;
|
cursor: pointer;
|
}
|
}
|
|
.carouselRight {
|
position: absolute;
|
top: 50px;
|
bottom: 0px;
|
width: 20%;
|
right: 0;
|
p {
|
width: 100%;
|
height: 50px;
|
line-height: 50px;
|
position: absolute;
|
top: 50%;
|
margin-top: -50px;
|
cursor: pointer;
|
}
|
}
|
|
.carouselMid {
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: center;
|
position: absolute;
|
top: 50%;
|
margin-top: -30px;
|
width: 60%;
|
margin-left: 20%;
|
|
.carouselMidHover:hover {
|
color: #409eff;
|
margin-top: -3px;
|
cursor: pointer;
|
}
|
}
|
|
/deep/ .el-dialog__wrapper {
|
z-index: 6000 !important;
|
}
|
</style>
|
