<template>
|
<div class="scene-edit-container">
|
<div class="scene-title">
|
<b style="font-size: 14px; line-height: 18px">场景</b>
|
<el-button
|
type="primary"
|
size="mini"
|
@click="handleCreate"
|
style="margin-left: 90%"
|
v-show="!editScene"
|
>+ 添加场景</el-button
|
>
|
</div>
|
|
<el-form ref="form" label-width="80px" v-show="editScene">
|
<div class="flex-form">
|
<div class="left">
|
<el-form-item label="场景名称">
|
<el-input
|
v-model="sceneForm.scene_name"
|
size="mini"
|
maxlength="15"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="事件等级">
|
<el-select
|
v-model="sceneForm.alarm_level"
|
placeholder="请选择"
|
size="mini"
|
style="width: 250px"
|
>
|
<el-option label="一级" :value="1"></el-option>
|
<el-option label="二级" :value="2"></el-option>
|
<el-option label="三级" :value="3"></el-option>
|
<el-option label="四级" :value="4"></el-option>
|
<el-option label="五级" :value="5"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间段">
|
<el-select
|
v-model="sceneForm.time_rule_id"
|
placeholder="请选择"
|
size="mini"
|
>
|
<el-option
|
v-for="item in VideoManageData.TimeRules"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div class="right">
|
<el-form-item label="场景描述">
|
<el-input
|
v-model="sceneForm.desc"
|
type="textarea"
|
size="mini"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="事件声音">
|
<el-select
|
v-model="sceneForm.voice"
|
placeholder="空"
|
size="small"
|
value-key="id"
|
@change="selSound"
|
>
|
<el-option
|
v-for="item in soundList"
|
:key="item.id"
|
:label="item.name"
|
:value="item"
|
></el-option>
|
</el-select>
|
<span
|
@click="togglePlayer"
|
style="cursor: pointer; margin-left: 20px"
|
v-show="sceneForm.voiceId.length"
|
>
|
<i
|
v-if="togglePlay"
|
class="el-icon-video-play"
|
style="font-size: 26px; vertical-align: middle; color: #409eff"
|
></i>
|
<i
|
v-else
|
class="el-icon-video-pause"
|
style="font-size: 26px; vertical-align: middle; color: #409eff"
|
></i>
|
</span>
|
</el-form-item>
|
</div>
|
</div>
|
|
<scene-editor
|
ref="sceneEditor"
|
:isLinkRule="linkRule"
|
:Cameras="seletedCameras"
|
:ruleList="templateRules"
|
@sdkNameChange="getSceneName"
|
></scene-editor>
|
|
<el-form-item style="width: 60%; min-width: 1048px">
|
<el-button size="mini" @click="editScene = false">取消</el-button>
|
<el-button type="primary" size="mini" @click="saveSceneRule"
|
>保存</el-button
|
>
|
</el-form-item>
|
</el-form>
|
|
<!-- 规则列表 -->
|
<div class="edit-rule-table" v-show="!editScene">
|
<div class="task-rules-table-box">
|
<el-table
|
:data="tableRuleList"
|
border
|
style="width: 100%"
|
:cell-style="cellStyle"
|
:header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
|
>
|
<el-table-column
|
label="序号"
|
type="index"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
label="场景名称"
|
prop="scene_name"
|
align="center"
|
show-overflow-tooltip
|
></el-table-column>
|
<el-table-column
|
label="策略"
|
prop="group_text"
|
align="center"
|
min-width="350px"
|
>
|
<template slot-scope="scope">
|
<span v-html="scope.row.group_text"></span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="时间段"
|
prop="time_name"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
label="描述"
|
prop="desc"
|
align="center"
|
min-width="120"
|
></el-table-column>
|
<!-- <el-table-column label="状态" align="center" width="90">
|
<template slot-scope="scope">
|
<el-switch v-model="scope.row.defence_state" @change="updateDefence(scope.row)"></el-switch>
|
</template>
|
</el-table-column>-->
|
<el-table-column label="事件声音" align="center">
|
<template slot-scope="scope">
|
<span>{{ getSoundById(scope.row.voiceId) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="事件等级" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.alarm_level | alarmLevel }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" align="center">
|
<template slot-scope="scope">
|
<el-tooltip
|
content="编辑"
|
:hide-after="700"
|
placement="top"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconbianji1 btn-icon"
|
style="font-size: 28px"
|
@click="handleEdit(scope.row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
content="删除"
|
:hide-after="700"
|
placement="top"
|
popper-class="atooltipgroup_"
|
>
|
<i
|
class="iconfont iconshanchu4 btn-icon"
|
style="font-size: 28px; color: red"
|
@click="handleDelScene(scope.row)"
|
></i>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { saveCameraScene, deleteCameraScene } from "@/api/scene";
|
import RuleEditor from "@/components/subComponents/RuleEditor";
|
import SceneEditor from "./scene/Editor";
|
import { getSoundList } from "@/api/event";
|
|
export default {
|
name: "SceneRuleEditor",
|
components: {
|
SceneEditor,
|
},
|
props: {
|
seletedCameras: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
tableRuleList: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
onSaveScene: {
|
type: Function,
|
default: () => false,
|
},
|
linkRule: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
filters: {
|
alarmLevel(level) {
|
switch (level) {
|
case 1:
|
return "一级";
|
case 2:
|
return "二级";
|
case 3:
|
return "三级";
|
case 4:
|
return "四级";
|
case 5:
|
return "五级";
|
}
|
},
|
},
|
watch: {
|
tableRuleList(n, o) {
|
this.editScene = false;
|
},
|
},
|
mounted() {
|
// window.addEventListener('resize', this.windowSizeChange)
|
this.getSounds();
|
this.eventAudio.addEventListener("ended", () => {
|
this.togglePlay = true;
|
});
|
},
|
data() {
|
return {
|
editScene: false,
|
sceneTemplates: [],
|
sceneForm: {
|
alarm_level: 1,
|
enable: true,
|
scene_name: "",
|
desc: "",
|
template_id: "",
|
time_rule_id: "",
|
voice: {},
|
voiceId: "",
|
},
|
templateSdks: [],
|
templateRules: "",
|
ruleList: [],
|
sceneNameStore: [],
|
eventAudio: new Audio(),
|
soundList: [],
|
togglePlay: true,
|
};
|
},
|
methods: {
|
getSoundById(id) {
|
if (id) {
|
let sound = this.soundList.find((item) => item.id == id);
|
return sound.name;
|
} else {
|
return "";
|
}
|
},
|
getSounds() {
|
let _this = this;
|
getSoundList()
|
.then((res) => {
|
if (res.success) {
|
//_this.soundList = [{ id: "", name: "空", path: "" }].concat(res.data.list)
|
_this.soundList = [{ id: "", name: "空", path: "" }].concat(
|
res.data
|
);
|
}
|
})
|
.catch((e) => console.log(e));
|
},
|
selSound(sound) {
|
this.soundPath = sound.path;
|
this.sceneForm.voiceId = sound.id;
|
this.togglePlay = true;
|
this.eventAudio.pause();
|
this.$forceUpdate();
|
// this.eventAudio.
|
},
|
togglePlayer() {
|
if (!this.soundPath) {
|
this.$notify({
|
type: "info",
|
message: "请先选择一个声音!",
|
});
|
return false;
|
}
|
debugger;
|
this.eventAudio.src = this.soundPath;
|
if (this.togglePlay) {
|
this.eventAudio.play();
|
this.togglePlay = false;
|
} else {
|
this.eventAudio.pause();
|
this.togglePlay = true;
|
}
|
// this.togglePlay = !this.togglePlay
|
},
|
bubbleSort(arr) {
|
for (var i = arr.length - 1; i > 0; i--) {
|
for (var j = 0; j < i; j++) {
|
if (arr[j] > arr[j + 1]) {
|
let temp = arr[j];
|
arr[j] = arr[j + 1];
|
arr[j + 1] = temp;
|
}
|
}
|
}
|
return arr;
|
},
|
getSceneName(sdk_name) {
|
this.sceneNameStore.push(sdk_name);
|
|
if (!this.sceneForm.scene_name.trim()) {
|
this.sceneForm.scene_name = sdk_name;
|
}
|
},
|
cleanForm() {
|
this.sceneForm = {
|
alarm_level: 1,
|
enable: true,
|
scene_name: "",
|
desc: "",
|
template_id: "",
|
time_rule_id: "",
|
voice: {},
|
voiceId: "",
|
};
|
this.$refs.sceneEditor.cleanRule();
|
this.$refs.sceneEditor.getSdkConnection();
|
},
|
handleCreate() {
|
if (this.linkRule && this.TreeDataPool.selectedNodes.length < 2) {
|
this.$notify({
|
type: "warning",
|
message: "请选择至少2个摄像机!",
|
});
|
return false;
|
} else if (
|
!this.linkRule &&
|
this.TreeDataPool.treeActiveName != "dataStack" &&
|
this.TreeDataPool.selectedNodes.length < 1
|
) {
|
this.$notify({
|
type: "warning",
|
message: `请选择1个摄像机!`,
|
});
|
return false;
|
} else if (
|
this.TreeDataPool.treeActiveName == "dataStack" &&
|
!this.DataStackPool.selectedDir.id
|
) {
|
this.$notify({
|
type: "warning",
|
message: `请先选择数据栈文件夹!`,
|
});
|
return false;
|
}
|
this.editScene = true;
|
this.cleanForm();
|
|
//初始化场景名称
|
var pattern = /^场景\s*\d+\s*$/;
|
var tempArr = [];
|
this.tableRuleList.forEach((scene) => {
|
if (pattern.test(scene.scene_name)) {
|
tempArr.push(Number(scene.scene_name.substring(2).trim()));
|
}
|
});
|
let latest =
|
tempArr.length > 0
|
? this.bubbleSort(tempArr)[tempArr.length - 1] + 1
|
: 1;
|
|
this.sceneForm.scene_name = "场景" + latest;
|
//初始化时间段
|
this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
|
},
|
handleEdit(scene) {
|
this.sceneForm = scene;
|
this.sceneForm.voice = this.soundList.find((o) => o.id === scene.voiceId);
|
|
this.editScene = true;
|
let selectedTpl = {};
|
this.sceneTemplates.forEach((t) => {
|
if (t.id == this.sceneForm.template_id) {
|
selectedTpl = t;
|
}
|
});
|
this.templateSdks = selectedTpl.sdks;
|
|
this.templateRules = JSON.stringify(scene.rules);
|
this.$refs.sceneEditor.editHandle(this.templateRules);
|
},
|
|
validateForm() {
|
if (!this.sceneForm.scene_name.trim()) {
|
this.$notify({
|
type: "warning",
|
message: "场景名不能为空",
|
});
|
return false;
|
} else if (!this.sceneForm.alarm_level) {
|
this.$notify({
|
type: "warning",
|
message: "事件等级不能为空",
|
});
|
return false;
|
} else if (!this.sceneForm.time_rule_id) {
|
this.$notify({
|
type: "warning",
|
message: "时间段不能为空",
|
});
|
return false;
|
}
|
return true;
|
},
|
saveSceneRule() {
|
if (!this.validateForm()) {
|
return;
|
}
|
let editorResp = this.$refs.sceneEditor.submitRule();
|
this.sceneForm.rules = editorResp.rules;
|
this.sceneForm.id = editorResp.id;
|
this.sceneForm.group_text = editorResp.text;
|
|
this.onSaveScene(this.sceneForm);
|
},
|
handleDelScene(groupRule) {
|
let _this = this;
|
this.$confirm("提示：删除后，该条规则将失效，是否删除？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure",
|
})
|
.then(() => {
|
deleteCameraScene(groupRule.id).then((res) => {
|
this.$emit("delete-rule");
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "删除成功",
|
});
|
_this.$root.$children[0].$children[0].querySearchAsync("camera");
|
} else {
|
this.$notify({
|
type: "error",
|
message: "删除失败！",
|
});
|
}
|
});
|
})
|
.catch(() => {});
|
},
|
cellStyle(obj) {
|
if (obj.column.label == "策略" || obj.column.label == "事件声音") {
|
return "text-align:left;padding-left:8px;";
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.scene-edit-container {
|
.scene-title {
|
height: 30px;
|
text-align: left;
|
margin: 10px 0px;
|
}
|
.flex-form {
|
display: flex;
|
width: 80%;
|
padding-left: 25px;
|
.left,
|
.right {
|
width: 43.3%;
|
min-width: 550px;
|
.el-form-item {
|
margin-bottom: 16px;
|
}
|
.el-form-item__label {
|
text-align: left;
|
}
|
.el-form-item__content {
|
text-align: left;
|
.el-input,
|
.el-select {
|
width: 400px !important;
|
}
|
}
|
textarea {
|
height: 92px;
|
}
|
}
|
.right {
|
padding-top: 6px;
|
}
|
}
|
.edit-rule-table {
|
.task-rules-table-box {
|
width: 98%;
|
padding: 0px;
|
box-sizing: border-box;
|
}
|
.el-form-item {
|
width: calc(100% - 30px);
|
}
|
.el-input__inner {
|
border: 0px !important;
|
border-radius: 2px;
|
padding: 0 22px;
|
background-color: transparent;
|
}
|
|
.el-input__suffix {
|
right: 8px;
|
}
|
span {
|
cursor: pointer;
|
}
|
.cell {
|
padding-left: 0 !important;
|
i {
|
outline: none !important;
|
}
|
}
|
}
|
}
|
</style>
|
