<template>
|
<div
|
v-loading="loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
element-loading-spinner="el-icon-loading"
|
>
|
<video
|
ref="videoElement"
|
id="videoElement"
|
controls
|
width="0"
|
height="0"
|
v-show="false"
|
>
|
xxx
|
</video>
|
<div v-if="radioValue == '1'" style="width: 100%; height: 100%">
|
<div style="width: 100%; height: 30%; overflow: hidden">
|
<div class="title">
|
<el-image :src="diamondSrc" style="" class="imgSty"></el-image>
|
<p>压制效果</p>
|
</div>
|
<suppressionEffect
|
:timeValue="timeValue"
|
:frequencyValue="frequencyValue"
|
:switchValue="switchValue"
|
></suppressionEffect>
|
</div>
|
<div style="width: 100%; height: 30%; overflow-y: hidden; margin-top: 3%">
|
<div class="title">
|
<el-image :src="diamondSrc" style="" class="imgSty"></el-image>
|
<p>压制覆盖率</p>
|
</div>
|
<suppressionCoverage
|
:timeValue="timeValue"
|
:frequencyValue="frequencyValue"
|
:switchValue="switchValue"
|
></suppressionCoverage>
|
</div>
|
<div style="width: 100%; height: 30%; overflow-y: hidden; margin-top: 3%">
|
<div class="title">
|
<el-image :src="diamondSrc" style="" class="imgSty"></el-image>
|
<p>压制覆盖率</p>
|
</div>
|
<blanketCoverage
|
:timeValue="timeValue"
|
:frequencyValue="frequencyValue"
|
:switchValue="switchValue"
|
></blanketCoverage>
|
</div>
|
</div>
|
<div v-if="radioValue == '0'" style="width: 100%; height: 100%">
|
<div class="rightCover">
|
<div class="rightCoverTitle">
|
<p style="color: #409eff; line-height: 28px; font-size: 18px">
|
频率:
|
<span
|
style="margin-left: 10px"
|
v-show="!isEdit"
|
@dblclick="changeInput()"
|
>{{ nowFre }}</span
|
>
|
<el-input
|
v-model="nowFre"
|
placeholder=""
|
v-show="isEdit"
|
@blur="changeP"
|
ref="editInput"
|
style="width: 80px"
|
></el-input>
|
</p>
|
|
<el-button size="mini" type="primary" plain @click="recordAll"
|
>录制</el-button
|
>
|
</div>
|
<el-table
|
ref="multipleTable"
|
:data="rightList"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
:height="divHeight"
|
:header-cell-style="{ background: 'transparent' }"
|
:key="tableKey"
|
>
|
<el-table-column type="selection" width="40"> </el-table-column>
|
<el-table-column label="">
|
<template slot-scope="scope"
|
><span style="color: #409eff">{{
|
scope.row.monitorpointName
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="" width="55">
|
<template slot-scope="scope">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="开始直播"
|
placement="top"
|
v-if="!scope.row.isplay"
|
>
|
<i
|
class="el-icon-video-play"
|
@click="startPlay(scope)"
|
style="cursor: pointer; line-height: 40px; color: #ffffff"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="暂停直播"
|
placement="top"
|
v-else
|
>
|
<i
|
class="el-icon-video-pause"
|
@click="stopPlay(scope)"
|
style="cursor: pointer; line-height: 40px; color: #ffffff"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="" width="100">
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.assessvalue"
|
placeholder="评分"
|
size="mini"
|
:disabled="!(switchValue == 1)"
|
@change="changeAssess(scope)"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item"
|
:label="item"
|
:value="item"
|
>
|
</el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="">
|
<template slot-scope="scope">
|
<div style="color: #409eff">
|
<span>录制:{{ scope.row.main_freq }}</span>
|
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="加入录制"
|
placement="top"
|
v-if="
|
scope.row.main_freq === null || scope.row.main_freq == ''
|
"
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="add"
|
style="margin-left: 10px"
|
@click="joinRecord(3, scope.row.monitorpointId, nowFre)"
|
></svg-icon>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="停止录制"
|
placement="top"
|
v-else
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="stop"
|
@click="
|
dropRecord(scope.row.main_freq, scope.row.monitorpointId)
|
"
|
style="margin-left: 10px"
|
></svg-icon>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column label="">
|
<template slot-scope="scope">
|
<div style="color: #409eff">
|
<span>副:{{ scope.row.subsidiary_freq }}</span>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="加入录制"
|
placement="top"
|
v-if="
|
scope.row.subsidiary_freq === null ||
|
scope.row.subsidiary_freq == ''
|
"
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="add"
|
style="margin-left: 10px"
|
@click="joinRecord(2, scope.row.monitorpointId, nowFre)"
|
></svg-icon>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="停止录制"
|
placement="top"
|
v-else
|
>
|
<svg-icon
|
class="svgIcon"
|
icon-class="stop"
|
@click="
|
dropRecord(
|
scope.row.subsidiary_freq,
|
scope.row.monitorpointId
|
)
|
"
|
style="margin-left: 10px"
|
></svg-icon>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import suppressionEffect from "./suppressionEffect";
|
import suppressionCoverage from "./suppressionCoverage";
|
import blanketCoverage from "./blanketCoverage";
|
export default {
|
watch: {
|
leftSelFre: {
|
handler(n, o) {
|
this.nowFre = JSON.parse(JSON.stringify(this.leftSelFre));
|
this.getData();
|
},
|
deep: true,
|
},
|
timeValue: {
|
handler(n, o) {
|
this.getData();
|
},
|
deep: true,
|
},
|
frequencyValue: {
|
handler(n, o) {
|
this.nowFre = JSON.parse(JSON.stringify(this.frequencyValue));
|
this.getData();
|
},
|
deep: true,
|
},
|
},
|
components: { suppressionEffect, suppressionCoverage, blanketCoverage },
|
props: [
|
"rightDrawState",
|
"timeValue",
|
"frequencyValue",
|
"switchValue",
|
"radioValue",
|
"leftSelFre",
|
"userid",
|
],
|
data() {
|
return {
|
loading: false,
|
divHeight: document.body.clientHeight - 165, // 高
|
isEdit: false,
|
tableKey: false,
|
isListen: true,
|
diamondSrc: require("@/assets/diamond.png"),
|
nowFre: "",
|
rightList: [],
|
multipleSelection: [],
|
options: ["1", "2", "3", "4", "5", "无效"],
|
pointValue: "",
|
isplay: false,
|
rtsp: "",
|
player: null,
|
recordingtime: null,
|
};
|
},
|
mounted() {
|
this.nowFre = "1557";
|
this.getData();
|
},
|
methods: {
|
changeInput() {
|
this.isEdit = !this.isEdit;
|
setTimeout(() => {
|
this.$refs.editInput.focus();
|
}, 500);
|
},
|
changeP(e) {
|
this.isEdit = !this.isEdit;
|
this.getData();
|
},
|
recordAll() {
|
if (this.multipleSelection.length == 0) {
|
this.$message.warning("请先选择频率");
|
} else {
|
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 }) => {
|
let tmpMul = this.multipleSelection;
|
let sendId = [];
|
tmpMul.forEach((item) => {
|
sendId.push(item.monitorpointId);
|
});
|
let sendFre = [];
|
sendId.forEach((item) => {
|
sendFre.push(this.nowFre);
|
});
|
|
this.$emit("showLoading", "luzhi");
|
let param = new URLSearchParams();
|
param.append("method", "record");
|
param.append("key", 123456);
|
param.append("recordTimeLength", value);
|
param.append("monitorpointId", sendId);
|
param.append("frequencyValue", sendFre);
|
param.append("isUnderWay", 0);
|
|
let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${sendId}&frequencyValue=${this.nowFre}`;
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
this.$emit("hideLoading");
|
let param1 = {
|
bid: "setChannelRecord",
|
monitorpointId: sendId,
|
frequency: this.nowFre,
|
userid: this.userid,
|
requesturl: url,
|
success: res[0].success.toString(),
|
msg: res[0].msg,
|
recordminitus: value,
|
};
|
|
console.log("123")
|
this.$post(
|
window.backstageURL + "dataservice/dealData",
|
param1
|
).then((res1) => {
|
console.log(res1)
|
});
|
|
if (res.success) {
|
this.$message.success(res.msg);
|
this.getData();
|
this.tableKey = !this.tableKey;
|
} else {
|
this.$message.error(res.msg);
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入",
|
});
|
});
|
}
|
},
|
changeAssess(scope) {
|
let emitData = {
|
assessvalue: scope.row.assessvalue,
|
id: scope.row.monitorpointId,
|
};
|
this.$emit("changeAssess", emitData);
|
let sendAssess = "";
|
if (scope.row.assessvalue == "无效") {
|
sendAssess = 0;
|
} else {
|
sendAssess = scope.row.assessvalue;
|
}
|
let param = {
|
bid: "assessPress",
|
frequency: this.nowFre,
|
assessvalue: sendAssess,
|
monitorpointId: scope.row.monitorpointId,
|
taskid: scope.row.taskid,
|
userid: this.userid,
|
recording_time: this.dateFormatter(new Date()),
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {});
|
},
|
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;
|
},
|
toggleSelection(rows) {
|
if (rows) {
|
rows.forEach((row) => {
|
this.$refs.multipleTable.toggleRowSelection(row);
|
});
|
} else {
|
this.$refs.multipleTable.clearSelection();
|
}
|
},
|
handleSelectionChange(val) {
|
this.multipleSelection = val;
|
},
|
getData() {
|
this.loading = true;
|
let tmpTimeValue = JSON.parse(JSON.stringify(this.timeValue));
|
let date = tmpTimeValue.split(" ")[0];
|
let hour = this.add0(Number(tmpTimeValue.split(" ")[1].split(":")[0]));
|
this.rightList = [];
|
this.$getJSON(
|
window.backstageURL +
|
"dataservice/getNoTokenData?bid=getChannelSettingB"
|
).then((res) => {
|
let tmp = JSON.parse(JSON.stringify(res.data.data[0]));
|
tmp.forEach((item) => {
|
item.isplay = false;
|
item.taskid = "";
|
item.assessvalue = null;
|
});
|
|
let param = {
|
bid: "getPointData",
|
userid: this.userid,
|
wdate: date,
|
whour: hour,
|
frequency: this.nowFre,
|
};
|
|
console.log(param);
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
let assessArr = JSON.parse(JSON.stringify(res.data.data[0]));
|
tmp.forEach((item) => {
|
assessArr.forEach((item1) => {
|
if (item.monitorpointId == item1.monitorpointId) {
|
item.taskid = item1.taskid;
|
item.assessvalue = item1.assessvalue;
|
}
|
});
|
});
|
this.loading = false;
|
});
|
this.rightList = tmp;
|
this.tableKey = !this.tableKey;
|
});
|
},
|
|
joinRecord(channelId, id, fre) {
|
let param = {
|
bid: "checkChannel",
|
channelId: channelId,
|
monitorpointId: id,
|
};
|
this.$getJSON(
|
window.backstageURL + "dataservice/getNoTokenData",
|
param
|
).then((res) => {
|
if (res.data.data[0][0].frequencyValue === fre) {
|
} else {
|
if (res.data.data[0][0].frequencyValue) {
|
this.$confirm(
|
`是否停止录制${res.data.data[0][0].frequencyValue},并将${fre}加入录制`,
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
this.addRecording(0, res.data.data[0][0], id, fre);
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
} else {
|
this.addRecording(1, {}, id, fre);
|
}
|
}
|
});
|
},
|
|
addRecording(type, oldFre, id, fre) {
|
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 }) => {
|
if (type == 1) {
|
this.$emit("showLoading", "luzhi");
|
let param = new URLSearchParams();
|
param.append("method", "record");
|
param.append("key", 111111);
|
param.append("recordTimeLength", value);
|
param.append("monitorpointId", id);
|
param.append("frequencyValue", fre);
|
param.append("isUnderWay", 0);
|
|
let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${id}&frequencyValue=${fre}`;
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
this.$emit("hideLoading");
|
let param1 = {
|
bid: "setChannelRecord",
|
monitorpointId: id,
|
frequency: fre,
|
userid: this.userid,
|
requesturl: url,
|
success: res.success.toString(),
|
msg: res.msg,
|
recordminitus: value,
|
};
|
this.$post(
|
window.backstageURL + "dataservice/dealData",
|
param1
|
).then((res1) => {});
|
if (res.success) {
|
this.$message.success(res.msg);
|
this.getData();
|
this.tableKey = !this.tableKey;
|
} else {
|
this.$message.error(res.msg);
|
}
|
});
|
} else {
|
let param = new URLSearchParams();
|
param.append("method", "delete");
|
param.append("key", 123456);
|
param.append("monitorpointId", oldFre.monitorpointId);
|
param.append("frequencyValue", oldFre.frequencyValue);
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
if (res.success) {
|
let param1 = new URLSearchParams();
|
param1.append("method", "record");
|
param1.append("key", 111111);
|
param1.append("recordTimeLength", value);
|
param1.append("monitorpointId", id);
|
param1.append("frequencyValue", fre);
|
|
param.append("isUnderWay", 0);
|
|
let url = `${window.equipmentURL}FRP/TNewrecordtask.do?method=record&monitorpointId=${id}&frequencyValue=${fre}`;
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param1
|
).then((res1) => {
|
this.$emit("hideLoading");
|
let param2 = {
|
bid: "setChannelRecord",
|
monitorpointId: id,
|
frequency: fre,
|
userid: this.userid,
|
requesturl: url,
|
success: res1.success.toString(),
|
msg: res1.msg,
|
recordminitus: value,
|
};
|
|
this.$post(
|
window.backstageURL + "dataservice/dealData",
|
param2
|
).then((res2) => {});
|
|
if (res1.success) {
|
this.$message.success(res1.msg);
|
this.getData();
|
this.tableKey = !this.tableKey;
|
} else {
|
this.$message.error(res1.msg);
|
}
|
});
|
} else {
|
this.$message.warning(res.msg);
|
}
|
});
|
}
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "取消输入",
|
});
|
});
|
},
|
|
dropRecord(fre, id) {
|
this.$confirm("是否停止录制", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
let param = new URLSearchParams();
|
param.append("method", "delete");
|
param.append("key", 123456);
|
param.append("monitorpointId", id);
|
param.append("frequencyValue", fre);
|
this.$getJSON(window.equipmentURL +
|
"FRP/TNewrecordtask.do",
|
param
|
).then((res) => {
|
if (res.success) {
|
this.getData();
|
this.tableKey = !this.tableKey;
|
} else {
|
this.$message.warning(res.msg);
|
}
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消",
|
});
|
});
|
},
|
|
stopPlay(scope) {
|
console.log("@@@");
|
this.$emit("stopPlay");
|
scope.row.isplay = false;
|
},
|
startPlay(scope) {
|
console.log(this.rightList);
|
this.rightList.forEach((item) => {
|
item.isplay = false;
|
});
|
scope.row.isplay = true;
|
// this.$emit("jumpPoint", scope.row);
|
|
let playData = {
|
monitorpointId: scope.row.monitorpointId,
|
frequencyValue: this.nowFre,
|
};
|
console.log(playData)
|
this.$emit("startPlay", playData);
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.title {
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: row;
|
width: 96%;
|
margin-left: 2%;
|
margin-top: 20px;
|
height: 30px;
|
|
.imgSty {
|
width: 15px;
|
height: 15px;
|
margin-top: 7.5px;
|
}
|
|
p {
|
font-size: 18px;
|
color: #4dd6b6;
|
line-height: 30px;
|
margin-left: 10px;
|
}
|
}
|
|
/deep/ .el-table--fit {
|
padding: 0px !important;
|
}
|
|
.rightCover {
|
width: 96%;
|
margin-left: 2%;
|
padding-top: 20px;
|
|
.rightCoverTitle {
|
display: flex;
|
flex-wrap: nowrap;
|
justify-content: space-between;
|
}
|
|
/deep/ .el-table--fit {
|
padding: 20px;
|
}
|
/deep/ .el-table,
|
.el-table__expanded-cell {
|
background-color: transparent;
|
}
|
|
/deep/ .el-table tr {
|
background-color: transparent !important;
|
}
|
/deep/ .el-table--enable-row-transition .el-table__body td,
|
.el-table .cell {
|
background-color: transparent;
|
}
|
div::-webkit-scrollbar {
|
width: 10px;
|
height: 10px;
|
}
|
div::-webkit-scrollbar-track {
|
background: rgb(239, 239, 239);
|
border-radius: 2px;
|
}
|
div::-webkit-scrollbar-thumb {
|
background: #bfbfbf;
|
border-radius: 10px;
|
}
|
div::-webkit-scrollbar-thumb:hover {
|
background: #333;
|
}
|
div::-webkit-scrollbar-corner {
|
background: #179a16;
|
}
|
}
|
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
/*width: 0;宽度为0隐藏*/
|
width: 0px;
|
}
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
border-radius: 2px;
|
height: 50px;
|
background: #eee;
|
}
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
border-radius: 2px;
|
background: rgba(0, 0, 0, 0.4);
|
}
|
</style>
|
