<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:87%"
|
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>
|
</div>
|
</div>
|
<!-- <el-row>
|
<el-col :span="8">-->
|
<!-- <el-form-item label="场景模板">
|
<el-select
|
v-model="sceneForm.template_id"
|
placeholder="请选择"
|
@change="selectTemplate"
|
size="mini"
|
style="width:200px"
|
>
|
<el-option
|
v-for="item in sceneTemplates"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>-->
|
<!-- </el-col>
|
<el-col :span="8">
|
<el-form-item label="时间段">
|
<el-select
|
v-model="sceneForm.time_rule_id"
|
placeholder="请选择"
|
size="mini"
|
style="width:200px"
|
>
|
<el-option
|
v-for="item in VideoManageData.TimeRules"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>-->
|
<!-- <el-row>
|
<el-col :span="8">
|
<el-form-item label="场景名称">
|
<el-input v-model="sceneForm.scene_name" size="mini" style="width:200px"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="场景描述">
|
<el-input v-model="sceneForm.desc" type="textarea" size="mini" style="width:200px;height:180px;"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>-->
|
<!-- <el-row>
|
<el-col :span="8">
|
<el-form-item label="事件等级">
|
<el-select
|
v-model="sceneForm.alarm_level"
|
placeholder="请选择"
|
size="mini"
|
style="width:200px"
|
>
|
<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-col>
|
</el-row>-->
|
|
<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" width="50"></el-table-column>
|
<el-table-column
|
label="场景名称"
|
prop="scene_name"
|
width="120"
|
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" width="100"></el-table-column>
|
<el-table-column label="描述" prop="desc" align="center" min-width="150"></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" width="120">
|
<template slot-scope="scope">
|
<span>{{scope.row.alarm_level | alarmLevel }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" align="center" width="100">
|
<template slot-scope="scope">
|
<el-tooltip content="编辑" 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="删除" 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,
|
getCameraSceneRule,
|
deleteCameraScene
|
} from '@/api/scene'
|
import RuleEditor from "@/components/subComponents/RuleEditor";
|
import SceneEditor from "./scene/Editor";
|
|
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)
|
|
},
|
data() {
|
return {
|
editScene: false,
|
sceneTemplates: [],
|
sceneForm: {
|
alarm_level: 1,
|
enable: true,
|
scene_name: "",
|
desc: "",
|
template_id: "",
|
time_rule_id: "",
|
},
|
templateSdks: [],
|
templateRules: "",
|
ruleList: [],
|
sceneNameStore: []
|
}
|
},
|
methods: {
|
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
|
}
|
// }else if(this.sceneForm.scene_name == store[store.length-2]){
|
// //场景名称取的是上一次传过来的算法名称，则须更新为最新传来的算法名
|
// this.sceneForm.scene_name = sdk_name
|
// }
|
},
|
cleanForm() {
|
this.sceneForm = {
|
alarm_level: 1,
|
enable: true,
|
scene_name: "",
|
desc: "",
|
template_id: "",
|
time_rule_id: "",
|
};
|
this.$refs.sceneEditor.cleanRule();
|
},
|
handleCreate() {
|
|
console.log(this.DataStackPool.selectedDir.id, this.TreeDataPool.treeActiveName == 'dataStack')
|
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();
|
console.log(this.tableRuleList)
|
|
//初始化场景名称
|
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.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);
|
|
},
|
|
selectTemplate() {
|
let selectedTpl = {};
|
this.sceneTemplates.forEach((t) => {
|
if (t.id == this.sceneForm.template_id) {
|
selectedTpl = t;
|
}
|
})
|
|
// 设置默认参数, 时间规则取第一个
|
this.sceneForm.time_rule_id = this.VideoManageData.TimeRules[0].id;
|
this.sceneForm.scene_name = selectedTpl.name;
|
this.sceneForm.desc = selectedTpl.desc;
|
|
this.templateSdks = selectedTpl.sdks;
|
this.templateRules = selectedTpl.rules;
|
},
|
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) {
|
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: "删除成功"
|
});
|
|
} else {
|
this.$notify({
|
type: "error",
|
message: "删除失败！"
|
});
|
}
|
});
|
})
|
.catch(() => { });
|
},
|
cellStyle(obj) {
|
if (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: 143px;
|
}
|
}
|
.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;
|
}
|
}
|
}
|
</style>
|
