<template>
|
<div class="RuleItem">
|
<div class="ruleInfo">
|
<div class="title">场景信息</div>
|
<div class="content">
|
<div class="header">
|
<div class="name">{{ rule.scene_name }}</div>
|
<i class="iconfont edit" @click="edit"></i>
|
</div>
|
<div class="des">
|
<div class="desItem">
|
<i class="iconfont"></i>等级: {{ eventName }}
|
</div>
|
<div class="desItem">
|
<i class="iconfont"></i>时间: {{ timeName }}
|
</div>
|
<div class="desItem">
|
<i class="iconfont"></i>描述:
|
{{ rule.desc ? rule.desc : "-" }}
|
</div>
|
<div class="desItem" v-if="rule.voice && rule.voice.name">
|
<i class="iconfont"></i>声音:
|
{{ rule.voice.name }}
|
</div>
|
|
<div class="desItem" v-else>
|
<i class="iconfont"></i>声音: -
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="strategy">
|
<div class="title">配置策略</div>
|
<div class="content">
|
<template v-if="rule.rules && rule.rules.length > 0">
|
<div
|
class="strategyItem"
|
v-for="(item, index) in rule.rules"
|
:key="index"
|
>
|
<div class="relation" v-if="item.rule_with_pre">
|
<el-select
|
v-model="item.rule_with_pre"
|
placeholder="选关系"
|
@change="update"
|
>
|
<el-option
|
v-for="item in sdkConnects"
|
:value="item.value"
|
:title="item.name"
|
:label="item.name"
|
:key="item.id"
|
></el-option>
|
</el-select>
|
<div>
|
<el-checkbox
|
v-show="
|
item.rule_with_pre == '=>' || item.rule_with_pre == '!=>'
|
"
|
v-model="item.is_save_anyhow"
|
@change="update"
|
>保存过程数据</el-checkbox
|
>
|
</div>
|
</div>
|
<div class="imgBox">
|
<img :src="item.icon_blob" alt="" />
|
<div class="mask">
|
<div class="mask_del">
|
<i class="iconfont" @click="delSdk(index)"></i>
|
</div>
|
<div class="mask_edit" @click="editSdk(index)">
|
<i class="iconfont"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div
|
class="addBox"
|
@dragover="dragover($event)"
|
@drop="drop"
|
v-if="showAddBox"
|
>
|
请拖动到此处
|
</div>
|
</template>
|
|
<div class="empty" @dragover="dragover($event)" @drop="drop" v-else>
|
<img src="/images/hashrate/unSdk.png" alt="" />
|
<div class="des">
|
暂未配置策略，点击上方操作面板按钮，从操作面板拖动算法到此处，即可配置
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="control">
|
<div class="title">场景操作</div>
|
<span class="close iconfont" @click="deleteRule"></span>
|
<div class="content">
|
<div class="btns">
|
<div class="button cancel" @click="backToOrigin">取消</div>
|
<div class="button submit" @click="save">保存</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
<script>
|
import bus from "@/plugin/bus";
|
import { saveLinkScene, saveCameraScene, deleteCameraScene } from "@/api/scene";
|
|
export default {
|
props: {
|
rule: {},
|
ruleType: {},
|
cameraId: {},
|
},
|
created() {
|
this.getSdkConnection();
|
bus.$on("addSdk", () => {
|
if (this.rule.rules && this.rule.rules.length < 4) {
|
this.showAddBox = true;
|
}
|
});
|
|
bus.$on("dragleave", () => {
|
this.showAddBox = false;
|
});
|
},
|
data() {
|
return {
|
sdkConnects: [],
|
btnDisabled: true, //按钮禁用
|
newSdk: null,
|
eventLevel: [
|
{
|
label: "一级",
|
value: 1,
|
},
|
{
|
label: "二级",
|
value: 2,
|
},
|
{
|
label: "三级",
|
value: 3,
|
},
|
{
|
label: "四级",
|
value: 4,
|
},
|
{
|
label: "五级",
|
value: 5,
|
},
|
],
|
showAddBox: false,
|
};
|
},
|
computed: {
|
timeName() {
|
const res = this.VideoManageData.TimeRules.filter((item) => {
|
return item.id === this.rule.time_rule_id;
|
});
|
return res[0].name;
|
},
|
eventName() {
|
const res = this.eventLevel.filter((item) => {
|
return item.value == this.rule.alarm_level;
|
});
|
return res[0].label;
|
},
|
},
|
methods: {
|
getSdkConnection() {
|
this.sdkConnects = this.VideoManageData.Dictionary[
|
"RULECOMPUTEBETWEEN"
|
].map((r) => {
|
return {
|
name: r.name,
|
value: r.value,
|
};
|
});
|
},
|
//阻止默认行为,允许存放拖拽
|
dragover(e) {
|
e.preventDefault();
|
},
|
drop() {
|
this.newSdk = this.$store.state.newSdk;
|
// this.$store.commit("setNewSdk", {});
|
this.$emit("addSdk");
|
bus.$emit("dragleave");
|
},
|
edit() {
|
this.$emit("edit");
|
},
|
delSdk(index) {
|
this.rule.rules.splice(index, 1);
|
|
if (this.rule.rules.length == 1) {
|
this.rule.rules[0].rule_with_pre = "";
|
}
|
|
this.update();
|
|
console.log(this.rule.rules);
|
},
|
backToOrigin() {
|
this.$emit("backToOrigin");
|
},
|
editSdk(index) {
|
this.$emit("editSdk", index);
|
},
|
save() {
|
if (this.ruleType === "separate") {
|
this.rule.cameraIds = [this.cameraId];
|
saveCameraScene(this.rule).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "策略保存成功！",
|
});
|
this.backToOrigin();
|
}
|
});
|
} else {
|
delete this.rule.camera_polygons;
|
saveLinkScene(this.rule).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "任务保存成功！",
|
});
|
this.backToOrigin();
|
} else {
|
this.$notify({
|
type: "error",
|
message: rsp.data,
|
});
|
}
|
});
|
}
|
},
|
async deleteRule() {
|
if (!this.rule.id) {
|
console.log("87878");
|
this.backToOrigin();
|
return;
|
}
|
const res = await deleteCameraScene(this.rule.id);
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "删除成功",
|
});
|
this.$emit("deletRule");
|
}
|
},
|
update() {
|
this.$forceUpdate();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.RuleItem {
|
overflow: hidden;
|
display: flex;
|
margin-left: 60px;
|
margin-bottom: 20px;
|
width: 1220px;
|
height: 198px;
|
border: 1px solid #c0c5cc;
|
border-radius: 5px;
|
|
.ruleInfo {
|
width: 374px;
|
|
.header {
|
display: flex;
|
margin-bottom: 6px;
|
justify-content: space-between;
|
align-items: center;
|
|
.name {
|
font-size: 14px;
|
font-weight: 700;
|
}
|
|
.edit {
|
margin-right: 20px;
|
font-size: 24px;
|
cursor: pointer;
|
}
|
}
|
|
.desItem {
|
margin-top: 7px;
|
font-size: 13px;
|
.iconfont {
|
margin-right: 10px;
|
font-size: 16px;
|
vertical-align: middle;
|
}
|
}
|
}
|
|
.strategy {
|
flex: 1;
|
|
.content {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.strategyItem {
|
display: flex;
|
align-items: center;
|
|
.imgBox {
|
position: relative;
|
img {
|
width: 60px;
|
height: 60px;
|
}
|
.mask {
|
display: none;
|
position: absolute;
|
width: 60px;
|
height: 60px;
|
top: 0;
|
left: 0;
|
line-height: 60px;
|
text-align: center;
|
|
.mask_del {
|
flex: 1;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.mask_edit {
|
flex: 1;
|
background: rgba(0, 0, 0, 0.3);
|
}
|
|
.iconfont {
|
color: #fff;
|
font-size: 16px;
|
cursor: pointer;
|
}
|
}
|
|
&:hover .mask {
|
display: flex;
|
}
|
}
|
|
.el-select {
|
margin: 0 20px;
|
width: 95px;
|
height: 24px;
|
|
::v-deep input:focus {
|
border-color: #0065ff;
|
}
|
|
::v-deep .el-input.is-focus .el-input__inner {
|
border-color: #0065ff;
|
}
|
|
::v-deep input {
|
border-radius: 0;
|
height: 24px;
|
}
|
|
::v-deep .el-input__icon {
|
line-height: 24px;
|
}
|
}
|
}
|
|
.addBox {
|
box-sizing: border-box;
|
padding: 12px 5px;
|
margin-left: 175px;
|
width: 60px;
|
height: 60px;
|
background: #eff4f9;
|
border-radius: 5px;
|
border: 1px dashed #c0c5cc;
|
line-height: 18px;
|
text-align: center;
|
color: #666666;
|
}
|
|
.empty {
|
text-align: center;
|
img {
|
margin-bottom: 2px;
|
height: 100px;
|
}
|
.des {
|
font-weight: 700;
|
color: #666;
|
}
|
}
|
}
|
}
|
|
.control {
|
position: relative;
|
width: 128px;
|
|
.close {
|
position: absolute;
|
top: 12px;
|
right: 15px;
|
font-size: 12px;
|
color: #e34d59;
|
cursor: pointer;
|
}
|
|
.btns {
|
display: flex;
|
margin-top: 68px;
|
text-align: center;
|
line-height: 24px;
|
|
.cancel {
|
margin-right: 10px;
|
width: 40px;
|
height: 24px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.submit {
|
width: 40px;
|
height: 24px;
|
color: #fff;
|
background-color: #0065ff;
|
border: 1px solid #0065ff;
|
}
|
|
&.disabled .cancel {
|
color: #999999;
|
border-color: #999999;
|
cursor: not-allowed;
|
}
|
&.disabled .submit {
|
border-color: #999999;
|
background-color: #999999;
|
cursor: not-allowed;
|
}
|
}
|
}
|
|
.title {
|
box-sizing: border-box;
|
padding-left: 20px;
|
height: 38px;
|
color: #666;
|
font-weight: 700;
|
line-height: 38px;
|
background: #f0f5fa;
|
}
|
|
.content {
|
height: 140px;
|
margin: 10px 0 10px 20px;
|
border-right: 1px solid #e9ebee;
|
}
|
|
.el-checkbox {
|
margin-top: 5px;
|
margin-left: 10px;
|
}
|
}
|
</style>
|
