<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.camera_name + ":" + polygon.name,
|
cameraId: camera.camera_id
|
})
|
})
|
})
|
} 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) {
|
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
|
console.log(121212)
|
console.log(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)
|
tempObj.ruleDes = defaultArgDesc + optArgDesc
|
console.log(tempObj.ruleDes)
|
|
if (this.editSdk) {
|
tempObj.icon_blob = this.editSdk.icon_blob
|
tempObj.group_id = this.editSdk.group_id
|
tempObj.sort = this.editSdk.sort
|
tempObj.id = this.editSdk.id
|
tempObj.icon_blob = this.editSdk.icon_blob
|
tempObj.icon_blob2 = this.editSdk.icon_blob2
|
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: 100px;
|
height: 32px;
|
|
input {
|
width: 100px;
|
height: 32px;
|
}
|
}
|
|
.el-select {
|
width: 100px;
|
}
|
|
.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: flex-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>
|
