<template>
|
<div class="SdkSettingBox">
|
<div class="title">配置算法</div>
|
<div class="close iconfont" @click="close()"></div>
|
|
<div class="content scroll">
|
<div class="top_line">
|
<div class="label">选择区域</div>
|
<el-select
|
v-model="sdkItem.polygonObj"
|
v-if="!isTemplate"
|
value-key="polygonId"
|
placeholder="选择区域"
|
@change="selectPolygonOption(sdkItem)"
|
class="h32"
|
>
|
<el-option
|
v-for="subitem in allPolygonData"
|
:key="subitem.id"
|
:label="subitem.name"
|
:value="subitem"
|
:title="subitem.name"
|
></el-option>
|
</el-select>
|
</div>
|
|
<div v-for="(arg, index) in sdkItem.defaultArg" :key="arg.sort">
|
<div class="argums-item" v-show="arg.config.isShow">
|
<div class="arg-name">
|
<el-select
|
class="h32"
|
v-model="arg.name"
|
size="mini"
|
:disabled="true"
|
>
|
<el-option
|
:label="arg.name"
|
:title="arg.name"
|
:value="arg"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="operator-name">
|
<el-select
|
:disabled="arg.operators.length == 1"
|
v-model="arg.operator"
|
size="mini"
|
class="h32"
|
>
|
<el-option
|
v-for="operator in arg.operators"
|
:key="operator.operator"
|
:value="operator.operator"
|
:label="operator.name"
|
:title="operator.name"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="arg-val">
|
<div class="arg-content" v-if="arg.operator == 'range'">
|
<el-input
|
class="range-min"
|
v-model="arg.min"
|
@input="rangeInput(arg)"
|
@blur="validateArgVal(arg, $event)"
|
></el-input>
|
<span class="devide"></span>
|
<el-input
|
class="range-max"
|
v-model="arg.max"
|
@input="rangeInput(arg)"
|
@blur="validateArgVal(arg, $event)"
|
></el-input>
|
<span class="font">{{ arg.unit }}</span>
|
</div>
|
<div v-else class="arg-content">
|
<el-select
|
v-if="arg.type == 'option'"
|
v-model="arg.sdk_arg_value"
|
:multiple="arg.config.isMulti"
|
:class="{ multiple: arg.config.isMulti }"
|
@change="forceUpdate"
|
collapse-tags
|
size="mini"
|
class="h32"
|
>
|
<el-option
|
v-for="one in arg.valueOptions"
|
:key="one.value"
|
:value="one.value"
|
:label="one.name"
|
:title="one.name"
|
></el-option>
|
</el-select>
|
|
<el-input
|
v-if="arg.type == 'value'"
|
v-model="arg.sdk_arg_value"
|
:placeholder="arg.default_value ? arg.default_value : ''"
|
size="mini"
|
@input="forceUpdate"
|
@blur="validateArgVal(arg, $event)"
|
></el-input>
|
<span class="font">{{ arg.unit }}</span>
|
</div>
|
</div>
|
<div
|
class="optional"
|
v-if="
|
sdkItem.initAddOptional && index == sdkItem.defaultArg.length - 1
|
"
|
>
|
<span class="btn" @click="addOptionalArg()">
|
<i class="iconfont addBtn"></i>
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<div
|
class="argums-item optional-line"
|
v-for="optArgItem in sdkItem.optArg"
|
:key="optArgItem.sort"
|
>
|
<div class="arg-name">
|
<el-input
|
v-if="sdkItem.optNames.length == 1"
|
v-model="sdkItem.optNames[0].name"
|
size="mini"
|
:disabled="true"
|
></el-input>
|
<el-select
|
v-if="sdkItem.optNames.length > 1"
|
v-model="optArgItem.name"
|
size="mini"
|
@change="selOptionalArg(optArgItem)"
|
class="h32"
|
>
|
<el-option
|
v-for="optName in sdkItem.optNames"
|
:disabled="optName.isSelected"
|
:key="optName.sort"
|
:label="optName.name"
|
:title="optName.name"
|
:value="optName.name"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="operator-name">
|
<el-select
|
:disabled="optArgItem.operators.length == 1"
|
v-model="optArgItem.operator"
|
size="mini"
|
class="h32"
|
>
|
<el-option
|
v-for="operatorItem in optArgItem.operators"
|
:key="operatorItem.operator"
|
:value="operatorItem.operator"
|
:label="operatorItem.name"
|
:title="operatorItem.name"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="arg-val">
|
<el-select
|
v-if="optArgItem.type == 'option'"
|
v-model="optArgItem.sdk_arg_value"
|
:multiple="optArgItem.config.isMulti"
|
collapse-tags
|
@change="forceUpdate"
|
size="mini"
|
class="h32"
|
>
|
<el-option
|
v-for="one in optArgItem.valueOptions"
|
:key="one.value"
|
:value="one.value"
|
:label="one.name"
|
:title="one.name"
|
></el-option>
|
</el-select>
|
<el-input
|
v-if="optArgItem.type == 'value'"
|
v-model="optArgItem.sdk_arg_value"
|
size="mini"
|
@blur="($event) => validateArgVal(optArgItem, $event)"
|
@input="forceUpdate"
|
></el-input>
|
<span class="font">{{ optArgItem.unit }}</span>
|
</div>
|
<div class="optional">
|
<span
|
class="btn"
|
@click="addOptionalArg()"
|
v-show="sdkItem.isAddable"
|
>
|
<i class="iconfont addBtn"></i>
|
</span>
|
<span class="btn" @click="delOptionalArg(optArgItem)">
|
<i class="iconfont delBtn"></i>
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="btns">
|
<div class="cancelBtn button" @click="close">取消</div>
|
<div class="confirmBtn button" @click="save">
|
{{ editSdk ? "保存" : "添加" }}
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
Cameras: {
|
type: Array,
|
default: () => {
|
return [];
|
},
|
},
|
isTemplate: {
|
type: Boolean,
|
default: false,
|
},
|
|
editSdk: {},
|
|
linkEditCamera: {},
|
},
|
computed: {
|
isLinkRule() {
|
return this.Cameras.length > 1;
|
},
|
},
|
created() {
|
this.initOption();
|
},
|
data() {
|
return {
|
sdkItem: {
|
polygonObj: {},
|
is_save_anyhow: true,
|
isSpread: true,
|
argDef: [],
|
initAddOptional: false,
|
defaultArg: [],
|
optionalArg: [],
|
optArg: [],
|
optNames: [],
|
isAddable: true,
|
},
|
allPolygonData: [],
|
};
|
},
|
methods: {
|
rangeInput(arg) {
|
arg.sdk_arg_value = arg.min + "|" + arg.max;
|
this.$forceUpdate();
|
},
|
selectPolygonOption(rule) {
|
rule.polygon_id = rule.polygonObj.polygonId
|
? rule.polygonObj.polygonId
|
: rule.polygon_id;
|
rule.camera_id = rule.polygonObj.cameraId
|
? rule.polygonObj.cameraId
|
: rule.camera_id;
|
},
|
close() {
|
this.$emit("close");
|
},
|
initOption() {
|
this.initPolygon();
|
let sdkItem = null;
|
if (this.editSdk) {
|
this.TaskMange.list1.forEach((item) => {
|
if (item.id === this.editSdk.sdk_id) {
|
sdkItem = item;
|
}
|
});
|
|
if (typeof sdkItem.argDef === "string") {
|
sdkItem.argDef = JSON.parse(sdkItem.argDef);
|
}
|
|
this.sdkItem = sdkItem;
|
this.sdkItem.sdk_set = JSON.parse(JSON.stringify(this.editSdk.sdk_set));
|
this.sdkItem.polygon_id = this.editSdk.polygon_id;
|
|
this.editRule();
|
return;
|
} else {
|
sdkItem = this.$store.state.newSdk;
|
}
|
if (typeof sdkItem.argDef === "string") {
|
sdkItem.argDef = JSON.parse(sdkItem.argDef);
|
}
|
//取出默认参数
|
sdkItem.defaultArg = sdkItem.argDef.filter(
|
(arg) => !arg.config.isOptional
|
);
|
//赋默认operator/值
|
sdkItem.defaultArg.forEach((arg) => {
|
if (arg.operators.length == 1) {
|
this.$set(arg, "operator", arg.operators[0].operator);
|
|
if (arg.operators[0].operator == "range") {
|
//区间值的处理
|
}
|
}
|
|
if (arg.type == "option") {
|
this.setOptArgValueOptions(arg);
|
}
|
if (arg.default_value) {
|
this.$set(arg, "sdk_arg_value", arg.default_value);
|
}
|
});
|
sdkItem.defaultArg;
|
//取出可选参数
|
sdkItem.optionalArg = sdkItem.argDef.filter(
|
(arg) => arg.config.isOptional
|
);
|
sdkItem.optNames = sdkItem.optionalArg.map((arg) => ({
|
name: arg.name,
|
sort: arg.sort,
|
isSelected: false,
|
}));
|
|
sdkItem.initAddOptional = sdkItem.optionalArg.length > 0 ? true : false;
|
sdkItem.optArg = [];
|
|
this.sdkItem = sdkItem;
|
},
|
initPolygon() {
|
let cameras = [];
|
if (this.linkEditCamera) {
|
this.allPolygonData = [];
|
cameras = this.linkEditCamera;
|
this.linkEditCamera.forEach((camera) => {
|
camera.polygon.forEach((polygon) => {
|
this.allPolygonData.push({
|
defence_state: polygon.defenceState,
|
polygonId: polygon.id,
|
name: camera.cameraName + ":" + polygon.name,
|
cameraId: camera.cameraId,
|
});
|
});
|
});
|
} else {
|
cameras = [...this.Cameras];
|
for (let i = 0; i < cameras.length; i++) {
|
let polyOpt = cameras[i].polygonData.map((p) => {
|
return {
|
defence_state: p.defence_state,
|
polygonId: p.id,
|
name:
|
this.isLinkRule || this.linkEditCamera
|
? cameras[i].cameraName + ":" + p.name
|
: p.name,
|
|
cameraId: cameras[i].cameraId,
|
};
|
});
|
this.allPolygonData = this.allPolygonData.concat(polyOpt);
|
}
|
}
|
|
this.$forceUpdate();
|
},
|
|
editRule() {
|
let tempObj = {};
|
|
// 填充区域选项列表
|
this.allPolygonData.forEach((p) => {
|
if (p.polygonId === this.sdkItem.polygon_id) {
|
this.sdkItem.polygonObj = p;
|
}
|
});
|
|
if (!this.sdkItem.polygonObj) {
|
this.sdkItem.polygonObj = {
|
cameraId: this.sdkItem.camera_id,
|
defence_state: 1,
|
name: "未知区域",
|
polygonId: this.sdkItem.polygon_id,
|
};
|
}
|
|
// 设置区域
|
this.selectPolygonOption(this.sdkItem);
|
|
//算法对象,算法参数配置数组,(用于数据处理的)默认参数数组, 可选参数数组, 已配置的可选参数数组, (用于去重判断)存放可选参数名的数组
|
let argDef = [],
|
defaultArg = [],
|
optionalArg = [],
|
optArg = [],
|
optNames = [];
|
|
argDef = this.sdkItem.argDef;
|
|
defaultArg = argDef.filter((arg) => !arg.config.isOptional);
|
optionalArg = argDef.filter((arg) => arg.config.isOptional);
|
|
this.sdkItem.sdk_set.forEach((arg) => {
|
let optItem = optionalArg.find((oarg) => {
|
if (oarg.sort == arg.sort) {
|
return oarg;
|
}
|
});
|
if (optItem) {
|
//if (optItem.operators.length > 1) {
|
optItem.operator = arg.operator;
|
//this.selOperator(optItem)
|
//}
|
|
//赋值
|
optItem.sdk_arg_value = arg.sdk_arg_value;
|
//if(arg.sdk_arg_value.indexOf(',')>0){
|
//判断是否是多选值类型的参数
|
let isMultiOne = optionalArg.find(
|
(oarg) => oarg.sort == optItem.sort && optItem.config.isMulti
|
);
|
if (isMultiOne) {
|
optItem.sdk_arg_value = arg.sdk_arg_value.split(",");
|
}
|
|
if (optItem.type == "option") {
|
this.setOptArgValueOptions(optItem);
|
}
|
if (optItem.alias == "bForceSend") {
|
}
|
//在push之前,需要判断是否配置了这个可选项 在sdk_set配置数组里,
|
|
optArg.push(optItem);
|
} else {
|
defaultArg.forEach((d) => {
|
if (d.sort == arg.sort) {
|
if (arg.sdk_arg_value.indexOf("|") > 0) {
|
//区间值
|
d.min = arg.sdk_arg_value.split("|")[0];
|
d.max = arg.sdk_arg_value.split("|")[1];
|
d.operator = "range";
|
//} else if(arg.sdk_arg_value.indexOf(',') > 0){
|
} else if (arg.operator_type == "option") {
|
//多选类型的值
|
d.sdk_arg_value = arg.sdk_arg_value.split(",");
|
this.setOptArgValueOptions(d);
|
} else {
|
d.sdk_arg_value = arg.sdk_arg_value;
|
}
|
d.operator = arg.operator;
|
}
|
});
|
}
|
});
|
optNames = optionalArg.map((arg) => ({
|
name: arg.name,
|
sort: arg.sort,
|
isSelected: false,
|
}));
|
|
tempObj = {
|
polygonObj: this.sdkItem.polygonObj,
|
rule_with_pre: this.sdkItem.rule_with_pre,
|
is_save_anyhow: this.sdkItem.is_save_anyhow,
|
isSpread: true,
|
argDef,
|
initAddOptional: false,
|
optionalArg,
|
optArg,
|
defaultArg,
|
optNames,
|
isAddable: true,
|
camera_id: this.sdkItem.camera_id,
|
polygon_id: this.sdkItem.polygon_id,
|
sdk_id: this.editSdk.sdk_id,
|
rule_with_pre: this.editSdk.rule_with_pre,
|
is_save_anyhow: this.editSdk.is_save_anyhow,
|
icon_blob: this.editSdk.icon_blob,
|
};
|
//回显是否显示添加可选参数
|
tempObj.initAddOptional =
|
tempObj.optArg.length == 0 && tempObj.optionalArg.length > 0
|
? true
|
: false;
|
//回显是否显示可选参数添加按钮
|
if (tempObj.optArg.length < tempObj.optionalArg.length) {
|
tempObj.isAddable = true;
|
} else {
|
tempObj.isAddable = false;
|
}
|
|
this.sdkItem = tempObj;
|
this.$forceUpdate();
|
},
|
|
validateArgVal(sdkArgItem, e) {
|
console.log(sdkArgItem);
|
if (
|
typeof sdkArgItem.sdk_arg_value == "string" &&
|
sdkArgItem.sdk_arg_value == ""
|
) {
|
this.$notify({
|
type: "warning",
|
message: "参数设定值不能为空!",
|
});
|
sdkArgItem.valid = false;
|
|
return false;
|
}
|
//输入非数字
|
|
//范围是否合法
|
if (sdkArgItem.range) {
|
let leftHand = sdkArgItem.range.substr(0, 1);
|
let rightHand = sdkArgItem.range.substr(sdkArgItem.range.length - 1, 1);
|
let reg = /.*(\d+),(\d+).*/;
|
let res = sdkArgItem.range.match(reg);
|
let min = Number(res[1]),
|
max = Number(res[2]);
|
|
//判断非区间类
|
if (sdkArgItem.sdk_arg_value && sdkArgItem.operator != "range") {
|
if (leftHand == "(" && rightHand == ")") {
|
if (
|
Number(sdkArgItem.sdk_arg_value) <= min ||
|
Number(sdkArgItem.sdk_arg_value) >= max
|
) {
|
sdkArgItem.valid = false;
|
|
this.$notify({
|
type: "warning",
|
message: `参数设定值须大于${min},小于${max}`,
|
});
|
return false;
|
}
|
} else if (leftHand == "[" && rightHand == ")") {
|
if (
|
Number(sdkArgItem.sdk_arg_value) < min ||
|
Number(sdkArgItem.sdk_arg_value) >= max
|
) {
|
sdkArgItem.valid = false;
|
|
this.$notify({
|
type: "warning",
|
message: `参数设定值须大于等于${min},小于${max}`,
|
});
|
return false;
|
}
|
} else if (leftHand == "(" && rightHand == "]") {
|
if (
|
Number(sdkArgItem.sdk_arg_value) <= min ||
|
Number(sdkArgItem.sdk_arg_value) > max
|
) {
|
sdkArgItem.valid = false;
|
|
this.$notify({
|
type: "warning",
|
message: `参数设定值须大于${min},小于等于${max}`,
|
});
|
return false;
|
}
|
} else if (leftHand == "[" && rightHand == "]") {
|
if (
|
Number(sdkArgItem.sdk_arg_value) < min ||
|
Number(sdkArgItem.sdk_arg_value) > max
|
) {
|
sdkArgItem.valid = false;
|
this.showErrorColor(e);
|
this.$notify({
|
type: "warning",
|
message: `参数设定值须大于等于${min},小于等于${max}`,
|
});
|
return false;
|
}
|
}
|
} else if (sdkArgItem.min || sdkArgItem.max) {
|
//判断区间类
|
if (leftHand == "(" && rightHand == ")") {
|
if (
|
Number(sdkArgItem.min) <= min ||
|
Number(sdkArgItem.min) >= max
|
) {
|
sdkArgItem.valid = false;
|
|
this.$notify({
|
type: "warning",
|
message: `参数区间设定值须大于${min},小于${max}`,
|
});
|
return false;
|
}
|
} else if (leftHand == "[" && rightHand == ")") {
|
if (Number(sdkArgItem.min) < min || Number(sdkArgItem.max) >= max) {
|
sdkArgItem.valid = false;
|
|
this.$notify({
|
type: "warning",
|
message: `参数区间设定值须大于等于${min},小于${max}`,
|
});
|
return false;
|
}
|
} else if (leftHand == "(" && rightHand == "]") {
|
if (Number(sdkArgItem.min) <= min || Number(sdkArgItem.max) > max) {
|
sdkArgItem.valid = false;
|
|
this.$notify({
|
type: "warning",
|
message: `参数区间设定值须大于${min},小于等于${max}`,
|
});
|
return false;
|
}
|
} else if (leftHand == "[" && rightHand == "]") {
|
if (
|
Number(sdkArgItem.min) < min ||
|
Number(sdkArgItem.max) > max ||
|
Number(sdkArgItem.min) > max ||
|
Number(sdkArgItem.max) < min
|
) {
|
sdkArgItem.valid = false;
|
// this.showErrorColor(e);
|
this.$notify({
|
type: "warning",
|
message: `参数区间设定值须大于等于${min},小于等于${max}`,
|
});
|
return false;
|
}
|
}
|
}
|
}
|
e.currentTarget.style.borderColor = "";
|
return true;
|
},
|
|
addOptionalArg() {
|
this.sdkItem.initAddOptional = false;
|
this.sdkItem.optArg.forEach((arg) => {
|
this.sdkItem.optNames.forEach((name) => {
|
if (arg.sort == name.sort) {
|
name.isSelected = true;
|
}
|
});
|
}); //找到可选sdkItem.optNames的第一个对应的sdkItem.optionalArg push到sdkItem.optArg
|
let oneNotSelected = this.sdkItem.optNames.find(
|
(name) => !name.isSelected
|
);
|
if (oneNotSelected) {
|
oneNotSelected.isSelected = true;
|
}
|
|
let argTemp = this.sdkItem.optionalArg.find((arg) => {
|
return arg.sort == oneNotSelected.sort;
|
});
|
|
let copyArgTemp = JSON.parse(JSON.stringify(argTemp));
|
if (copyArgTemp.type == "option") {
|
this.setOptArgValueOptions(copyArgTemp);
|
}
|
//默认选中第一个operator
|
//if (copyArgTemp.operators.length == 1) {
|
this.$set(copyArgTemp, "operator", copyArgTemp.operators[0].operator);
|
//}
|
|
if (copyArgTemp.default_value) {
|
this.$set(copyArgTemp, "sdk_arg_value", copyArgTemp.default_value);
|
}
|
|
this.sdkItem.optArg.push(copyArgTemp);
|
this.$forceUpdate();
|
|
if (this.sdkItem.optArg.length < this.sdkItem.optionalArg.length) {
|
this.sdkItem.isAddable = true;
|
} else {
|
this.sdkItem.isAddable = false;
|
}
|
},
|
|
selOptionalArg(optArgItem) {
|
let newSort = 0;
|
this.sdkItem.optNames.forEach((name) => {
|
if (name.name == optArgItem.name) {
|
//新切换的参数名
|
name.isSelected = true;
|
newSort = name.sort;
|
} else if (name.sort == optArgItem.sort) {
|
//切换前的参数名
|
name.isSelected = false;
|
}
|
});
|
//根据新的参数sort找到其对应配置对象
|
let argObj = this.sdkItem.optionalArg.find((arg) => arg.sort == newSort);
|
if (argObj.type == "option") {
|
this.setOptArgValueOptions(argObj);
|
}
|
//默认选中第一个operator
|
//if (argObj.operators.length == 1) {
|
this.$set(argObj, "operator", argObj.operators[0].operator);
|
//}
|
//替换新的参数配置对象
|
this.sdkItem.optArg.forEach((arg, index) => {
|
if (arg.sort == optArgItem.sort) {
|
this.$set(
|
this.sdkItem.optArg,
|
index,
|
JSON.parse(JSON.stringify(argObj))
|
);
|
}
|
});
|
},
|
|
delOptionalArg(optArgItem) {
|
let index = this.sdkItem.optArg.findIndex(
|
(arg) => arg.sort == optArgItem.sort
|
);
|
this.sdkItem.optArg.splice(index, 1);
|
this.sdkItem.optNames.forEach((name) => {
|
if (name.sort == optArgItem.sort) {
|
name.isSelected = false;
|
}
|
});
|
this.sdkItem.initAddOptional =
|
this.sdkItem.optArg.length == 0 ? true : false;
|
if (this.sdkItem.optArg.length < this.sdkItem.optionalArg.length) {
|
this.sdkItem.isAddable = true;
|
} else {
|
this.sdkItem.isAddable = false;
|
}
|
this.$forceUpdate();
|
},
|
|
setOptArgValueOptions(optArg) {
|
let alias = optArg.alias;
|
optArg.valueOptions = this.VideoManageData.Dictionary[alias].map((r) => {
|
return {
|
name: r.name,
|
value: r.value,
|
};
|
});
|
},
|
|
forceUpdate() {
|
console.log(1);
|
this.$forceUpdate();
|
},
|
|
save() {
|
let warn = false;
|
|
//复制算法时检测区域不能为空
|
if (!this.sdkItem.polygon_id) {
|
console.log(1);
|
warn = true;
|
}
|
|
//处理未展示的参数的值
|
this.sdkItem.defaultArg.forEach((arg) => {
|
if (!arg.config.isShow) {
|
arg.sdk_arg_value = arg.default_value;
|
}
|
});
|
//表单提交前校验:所有算法的参数值不能为空,(有range的,要在range范围内)失焦时校验
|
let defaultArgFlag = this.sdkItem.defaultArg.find((arg) => {
|
if (arg.sdk_arg_value instanceof Array) {
|
if (arg.sdk_arg_value.length == 0) {
|
return arg;
|
}
|
} else if (!arg.sdk_arg_value) {
|
return arg;
|
}
|
});
|
if (defaultArgFlag) {
|
warn = true;
|
}
|
//查找可选参数值是否都设置(多选值为数组类型)
|
let optionalArgFlag = this.sdkItem.optArg.find((arg) => {
|
if (arg.sdk_arg_value instanceof Array) {
|
if (arg.sdk_arg_value.length == 0) {
|
return arg;
|
}
|
} else {
|
//区间类参数值最小,最大值是否都设置
|
if (arg.operator == "range") {
|
if (!arg.min.trim() && arg.max.trim()) {
|
return arg;
|
}
|
}
|
if (!arg.sdk_arg_value) {
|
return arg;
|
}
|
}
|
});
|
|
if (optionalArgFlag) {
|
warn = true;
|
}
|
|
//校验区间左侧值是否小于右侧值
|
let rangeArg = this.sdkItem.defaultArg.find(
|
(arg) => arg.operator == "range"
|
);
|
if (rangeArg) {
|
if (Number(rangeArg.max) <= Number(rangeArg.min)) {
|
warn = true;
|
}
|
}
|
|
if (warn) {
|
this.$notify({
|
type: "error",
|
message: "算法参数有误,请完善后再保存",
|
});
|
return false;
|
}
|
|
console.log(this.sdkItem);
|
|
let tempObj = {
|
sdk_id: this.editSdk ? this.sdkItem.sdk_id : this.sdkItem.id,
|
camera_id: this.sdkItem.camera_id,
|
is_save_anyhow: this.sdkItem.is_save_anyhow,
|
polygon_id: this.sdkItem.polygon_id,
|
rule_with_pre: this.sdkItem.rule_with_pre,
|
sdk_set: [],
|
};
|
|
let defaultArgs = this.sdkItem.defaultArg.map((arg) => ({
|
operator: arg.operator,
|
operator_type: arg.type,
|
sdk_arg_alias: arg.alias,
|
sdk_arg_value: arg.sdk_arg_value,
|
sort: arg.sort,
|
}));
|
|
let defaultArgDesc = "( ";
|
this.sdkItem.defaultArg.forEach((arg) => {
|
//不显示隐藏的参数配置
|
if (!arg.config.isShow) {
|
return;
|
}
|
let val = "";
|
//处理下拉选值类型
|
if (arg.type == "option") {
|
if (arg.sdk_arg_value instanceof Array) {
|
//多选值
|
let multiNames = "";
|
arg.sdk_arg_value.forEach((val) => {
|
let opV = arg.valueOptions.find((opt) => opt.value == val);
|
multiNames += opV.name + " ";
|
});
|
val = multiNames;
|
} else {
|
let res = arg.valueOptions.find(
|
(opt) => opt.value == arg.sdk_arg_value
|
);
|
val = res.name;
|
}
|
}
|
if (arg.operator == "range") {
|
let valRange = "";
|
|
valRange = arg.sdk_arg_value.replace(",", "-");
|
defaultArgDesc += `${arg.name}${arg.operators[0].name}${valRange}${
|
arg.unit || ""
|
}, `;
|
} else {
|
defaultArgDesc += `${arg.name}${arg.operators[0].name}${
|
arg.type == "option" ? val : arg.sdk_arg_value
|
}${arg.unit || ""}, `;
|
}
|
});
|
defaultArgDesc = defaultArgDesc.substring(0, defaultArgDesc.length - 2);
|
|
//defaultArgDesc = defaultArgDesc.substring(0,defaultArgDesc.length-3)+defaultArgDesc.substring(defaultArgDesc.length-1,defaultArgDesc.length);
|
//defaultArgDesc = defaultArgDesc.substring(0,defaultArgDesc.length-1);
|
|
//处理可选项参数
|
|
let optArgs = this.sdkItem.optArg.map((arg) => ({
|
operator: arg.operator,
|
operator_type: arg.type,
|
sdk_arg_alias: arg.alias,
|
sdk_arg_value: arg.sdk_arg_value,
|
sort: arg.sort,
|
}));
|
//将多选项的值拼成字符串
|
optArgs.forEach((one) => {
|
if (one.sdk_arg_value instanceof Array) {
|
one.sdk_arg_value = one.sdk_arg_value.join();
|
}
|
});
|
let optArgDesc = " ";
|
this.sdkItem.optArg.forEach((arg) => {
|
let val = "";
|
let valRange = "";
|
|
//处理下拉选值类型
|
if (arg.type == "option") {
|
if (arg.sdk_arg_value instanceof Array) {
|
//多选值
|
let multiNames = "";
|
arg.sdk_arg_value.forEach((val) => {
|
let opV = arg.valueOptions.find((opt) => opt.value == val);
|
multiNames += opV.name + " ";
|
});
|
val = multiNames;
|
} else {
|
let res = arg.valueOptions.find(
|
(opt) => opt.value == arg.sdk_arg_value
|
);
|
|
val = res.name;
|
}
|
}
|
|
let operatorSelected = arg.operators.find(
|
(opr) => opr.operator == arg.operator
|
);
|
optArgDesc += `,${arg.name}${operatorSelected.name}${
|
arg.type == "option" ? val : arg.sdk_arg_value
|
}${arg.unit || ""}, `;
|
});
|
//将多选项的值拼成字符串
|
defaultArgs.forEach((one) => {
|
if (one.sdk_arg_value instanceof Array) {
|
one.sdk_arg_value = one.sdk_arg_value.join();
|
}
|
});
|
optArgDesc =
|
optArgDesc.substring(0, optArgDesc.length - 2) +
|
optArgDesc.substring(optArgDesc.length - 1, optArgDesc.length);
|
optArgDesc += ")";
|
tempObj.sdk_set = defaultArgs.concat(optArgs);
|
|
if (this.editSdk) {
|
tempObj.icon_blob = this.editSdk.icon_blob;
|
this.$emit("getEditSdk", tempObj);
|
} else {
|
tempObj.icon_blob = this.$store.state.newSdk.iconBlob;
|
this.$emit("getNewSdk", tempObj);
|
}
|
},
|
},
|
watch: {
|
sdkItem: {
|
handler(newVal) {
|
let rangeOne = newVal.defaultArg.find(
|
(arg) => arg.operators[0].operator == "range"
|
);
|
if (rangeOne) {
|
if (
|
rangeOne.min &&
|
rangeOne.max &&
|
rangeOne.min.trim() &&
|
rangeOne.max.trim()
|
) {
|
rangeOne.sdk_arg_value = rangeOne.min + "|" + rangeOne.max;
|
} else {
|
rangeOne.sdk_arg_value = false;
|
}
|
}
|
},
|
deep: true,
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.SdkSettingBox {
|
position: fixed;
|
top: 50%;
|
right: 50%;
|
margin-top: -312px;
|
margin-right: -331px;
|
width: 662px;
|
height: 624px;
|
background-color: #fff;
|
box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);
|
z-index: 2;
|
|
.title {
|
box-sizing: border-box;
|
padding: 20px;
|
height: 64px;
|
border-bottom: 1px solid #e9ebee;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 12px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.content {
|
overflow: auto;
|
margin: 0 20px;
|
height: 490px;
|
border-bottom: 1px solid #e9ebee;
|
|
.el-select.multiple.h32 {
|
width: 162px;
|
}
|
|
.top_line {
|
margin: 30px 0;
|
display: flex;
|
align-items: center;
|
|
.label {
|
margin-right: 20px;
|
font-size: 14px;
|
color: #666666;
|
}
|
|
.el-select {
|
width: 284px;
|
}
|
}
|
|
.argums-item {
|
margin-bottom: 24px;
|
display: flex;
|
|
.arg-name {
|
margin-right: 20px;
|
width: 240px;
|
}
|
|
.operator-name {
|
margin-right: 20px;
|
width: 100px;
|
}
|
|
.font {
|
margin-left: 4px;
|
margin-right: 9px;
|
}
|
|
.addBtn {
|
line-height: 32px;
|
font-size: 16px;
|
margin-left: 8px;
|
color: #0064ff;
|
cursor: pointer;
|
}
|
|
.delBtn {
|
line-height: 32px;
|
font-size: 16px;
|
margin-left: 8px;
|
color: rgb(255, 75, 51);
|
cursor: pointer;
|
}
|
}
|
|
.arg-val {
|
display: flex;
|
align-items: center;
|
.arg-content {
|
display: flex;
|
align-items: center;
|
|
.devide {
|
display: inline-block;
|
width: 8px;
|
height: 1px;
|
background: #c5c5c5;
|
vertical-align: top;
|
margin: 0 8px;
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 50px;
|
height: 32px;
|
|
input {
|
width: 50px;
|
height: 32px;
|
}
|
}
|
|
.el-select {
|
width: 68px;
|
}
|
|
.font {
|
margin-left: 4px;
|
margin-right: 9px;
|
}
|
}
|
|
.el-select,
|
.el-input {
|
::v-deep input {
|
border-radius: 3px;
|
}
|
}
|
|
.el-select ::v-deep .el-input.is-disabled {
|
.el-input__inner {
|
background-color: #e9ebee;
|
border: 1px solid #c0c5cc;
|
}
|
}
|
}
|
|
.btns {
|
position: absolute;
|
display: flex;
|
justify-content: end;
|
align-items: center;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 72px;
|
text-align: center;
|
line-height: 32px;
|
|
.cancelBtn {
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0064ff;
|
font-size: 14px;
|
color: #0064ff;
|
}
|
|
.confirmBtn {
|
margin-left: 10px;
|
margin-right: 20px;
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0064ff;
|
font-size: 14px;
|
color: #fff;
|
background-color: #0064ff;
|
}
|
}
|
}
|
</style>
|
