| | |
| | | <b>规则</b> |
| | | <div class="div-border" v-html="taskEditData.eventTxt"></div> |
| | | </div> |
| | | <div class="config-item"> |
| | | <b>推送字段</b> |
| | | <el-button type="primary" size="mini" @click="pushFieldDialog=true">设置</el-button> |
| | | </div> |
| | | <div class="save-btn"> |
| | | <el-button type="info" size="small" @click="onCancle" style="color:#222">取消</el-button> |
| | | <el-button type="primary" @click="eventPushsSave" size="small">保存</el-button> |
| | | </div> |
| | | </div> |
| | | <el-dialog |
| | | :visible="pushFieldDialog" |
| | | :append-to-body="false" |
| | | :close-on-click-modal="false" |
| | | class="dialog-push-field" |
| | | @close="pushFieldDialog=false" |
| | | > |
| | | <div slot="title" class="slot-title"> |
| | | <p>请选择想要推送的字段</p> |
| | | <div class="right"> |
| | | <el-checkbox v-model="allFieldChecked"></el-checkbox> |
| | | </div> |
| | | </div> |
| | | <div class="check-area" v-for="configObj in pushFields" :key="configObj.id"> |
| | | <div class="header"> |
| | | <div class="title">{{configObj.name}}</div> |
| | | <div class="right"> |
| | | <el-checkbox v-model="configObj.checked" @change="toggleConfigCheck(configObj)">全选</el-checkbox> |
| | | </div> |
| | | </div> |
| | | <div class="flex-box flex-wrap"> |
| | | <div class="param flex-box" v-for="param in configObj.children" :key="param.id"> |
| | | <el-checkbox v-model="param.checked"></el-checkbox> |
| | | <span class="param-name">{{param.name}}</span> |
| | | <el-input |
| | | v-model="param.alias" |
| | | size="mini" |
| | | :ref="`input_${param.id}`" |
| | | @input="varifyField(param)" |
| | | :style="{color:param.error?'red':'',borderColor:param.error?'red':''}" |
| | | ></el-input> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div slot="footer" class="text-center"> |
| | | <el-button size="small">取消</el-button> |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | :disabled="disabledPushFieldSet" |
| | | @click="submitPushFieldSet" |
| | | >保存</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | <script> |
| | |
| | | } |
| | | }, |
| | | computed: { |
| | | urls() { |
| | | urls () { |
| | | return this.taskEditData.urls |
| | | } |
| | | }, |
| | | data() { |
| | | data () { |
| | | return { |
| | | taskEditData: {}, |
| | | dataList: [], |
| | |
| | | operatorTypeOpionts: {}, |
| | | ruleValueOptions: [] |
| | | }, |
| | | pushFieldDialog: false, |
| | | pushFields: [], |
| | | allFieldChecked: false, |
| | | disabledPushFieldSet: true, |
| | | }; |
| | | }, |
| | | watch: { |
| | | eventObject: { |
| | | handler(newVal, oldVal) { |
| | | handler (newVal, oldVal) { |
| | | this.taskEditData.enable = this.eventObject.enable; |
| | | if (newVal !== oldVal) { |
| | | if (this.taskEditData.id !== newVal.id) { |
| | |
| | | } |
| | | }, |
| | | deep: true |
| | | }, |
| | | pushFields: { |
| | | handler (n, o) { |
| | | let _this = this; |
| | | let flag = false; |
| | | n.forEach(configObj => { |
| | | let notChecked = configObj.children.find(param => !param.checked); |
| | | if (!notChecked) { |
| | | configObj.checked = true; |
| | | } else { |
| | | configObj.checked = false; |
| | | } |
| | | let someoneChecked = configObj.children.find(param => param.checked); |
| | | if (someoneChecked) { |
| | | flag = true |
| | | } |
| | | |
| | | }); |
| | | if (flag) { |
| | | this.disabledPushFieldSet = false; |
| | | } else { |
| | | this.disabledPushFieldSet = true; |
| | | } |
| | | }, |
| | | deep: true |
| | | } |
| | | }, |
| | | created() { |
| | | created () { |
| | | this.reAdd(); |
| | | }, |
| | | mounted() { |
| | | // 加载字典字典 |
| | | mounted () { |
| | | // 加载字典 |
| | | this.findByType(); |
| | | this.getCameras(); |
| | | this.getTasks(); |
| | | this.getPushFields(); |
| | | }, |
| | | methods: { |
| | | addUrl() { |
| | | varifyField (param) { |
| | | var reg = /^[A-Za-z]+[0-9-_]?$/; |
| | | if (!reg.test(param.alias)) { |
| | | this.$message('请输入合法字段名'); |
| | | debugger |
| | | param.error = true; |
| | | } else { |
| | | param.error = false; |
| | | } |
| | | // this.pushFields.forEach(configObj => { |
| | | // configObj.children.find(param => param.error) |
| | | // }) |
| | | |
| | | }, |
| | | submitPushFieldSet () { |
| | | let flag = false; |
| | | this.pushFields.forEach(configObj => { |
| | | let errorOne = configObj.children.find(param => param.checked && param.error); |
| | | if (errorOne) { |
| | | this.$notify({ |
| | | type: 'error', |
| | | message: '请将选中字段输入合法字段名' |
| | | }) |
| | | flag = true |
| | | } |
| | | }); |
| | | if(flag){ |
| | | return |
| | | } |
| | | alert('submit') |
| | | }, |
| | | toggleConfigCheck (configObj) { |
| | | configObj.children.forEach(child => { |
| | | child.checked = configObj.checked |
| | | }) |
| | | }, |
| | | getPushFields () { |
| | | this.pushFields = [ |
| | | { id: 'sxjxx', name: '摄像机信息', checked: false, alias: '', |
| | | children: [ |
| | | { name: '摄像机ID', checked: false, alias: 'cameraID', id: 'cameraID', children: null }, |
| | | { name: '摄像机名称', checked: false, alias: 'cameraName', id: 'cameraName', children: null }, |
| | | { name: '摄像机地址', checked: false, alias: 'cameraAddr', id: 'cameraAddr', children: null }, |
| | | { name: '摄像机址', checked: false, alias: 'cameraAdr', id: 'cameraAdr', children: null } |
| | | ] }, |
| | | { id: 'cjxx', name: '场景信息', checked: false, alias: '', |
| | | children: [{ name: '场景ID', checked: false, alias: 'taskId', id: 'tskId', children: null }] }, |
| | | ]; |
| | | |
| | | }, |
| | | addUrl () { |
| | | this.taskEditData.urls.push({ |
| | | checked: true, |
| | | hash: Math.random().toString(36).substr(2), |
| | | url: "", |
| | | }); |
| | | }, |
| | | delUrl(index) { |
| | | delUrl (index) { |
| | | this.$set(this.taskEditData.urls, index, this.baseRule) |
| | | this.taskEditData.urls.splice(index, 1) |
| | | }, |
| | | // 保存 |
| | | async eventPushsSave() { |
| | | async eventPushsSave () { |
| | | // 判断保存的ip是否符合格式要求 |
| | | if (this.taskEditData.urls.length < 1) { |
| | | this.$notify({ |
| | |
| | | } |
| | | }, |
| | | // 查找字典 |
| | | async findByType() { |
| | | async findByType () { |
| | | let res = await findDictionaryByType(); |
| | | if (res && res.success) { |
| | | this.dictionary = Object.assign(this.dictionary, res.data) |
| | |
| | | }) |
| | | } |
| | | }, |
| | | async getCameras() { |
| | | async getCameras () { |
| | | let rsp = await findByEventTopic({ topic: 'camera', type: 'name' }); |
| | | if (rsp && rsp.success) { |
| | | this.dictionary['camera'] = rsp.data |
| | |
| | | }) |
| | | } |
| | | }, |
| | | async getTasks() { |
| | | async getTasks () { |
| | | this.dictionary['task'] = [] |
| | | let rsp = await getTaskList(); |
| | | if (rsp && rsp.success) { |
| | |
| | | } |
| | | }, |
| | | // 新建配置 |
| | | createSet() { |
| | | createSet () { |
| | | this.dataList.push(JSON.parse(JSON.stringify(this.baseRule))); |
| | | }, |
| | | cleanSet() { |
| | | cleanSet () { |
| | | this.dataList.splice(0, this.dataList.length); |
| | | }, |
| | | // 添加子规则 |
| | | addRule() { |
| | | addRule () { |
| | | this.dataList.push(JSON.parse(JSON.stringify(this.baseRule))); |
| | | }, |
| | | // 删除子规则 |
| | | delRule(index) { |
| | | delRule (index) { |
| | | this.dataList.splice(index, 1); |
| | | }, |
| | | // 规则中下拉框的选择回调 |
| | | selectTopic(rule, resetNext = false) { |
| | | selectTopic (rule, resetNext = false) { |
| | | rule.topicTypeOptions.forEach(element => { |
| | | if (element.value === rule.topic_type) { |
| | | rule.topicArgOptions = element.children; |
| | |
| | | } |
| | | }); |
| | | }, |
| | | selectArg(rule, resetNext = false) { |
| | | selectArg (rule, resetNext = false) { |
| | | let argInfo = rule.topicArgOptions.filter(arg => { |
| | | return arg.value === rule.topic_arg |
| | | }) |
| | |
| | | this.selectOperator(rule, resetNext) |
| | | } |
| | | }, |
| | | selectOperator(rule, resetNext = false) { |
| | | selectOperator (rule, resetNext = false) { |
| | | if (rule.operator_type === "option") { |
| | | rule.ruleValueOptions = this.dictionary[rule.topic_type] ? this.dictionary[rule.topic_type] : [] |
| | | rule.rule_values = rule.rule_value.split(",") |
| | |
| | | rule.rule_values = []; |
| | | } |
| | | }, |
| | | selectValue(rule, val) { |
| | | selectValue (rule, val) { |
| | | rule.rule_value = val.join(",") |
| | | }, |
| | | // 根据value返回对应的name |
| | | getNameByValue(arr, value) { |
| | | getNameByValue (arr, value) { |
| | | let s = arr.find(item => { |
| | | return item.value === value; |
| | | }); |
| | |
| | | return s.name; |
| | | }, |
| | | // 清空重新新增 |
| | | reAdd() { |
| | | reAdd () { |
| | | this.taskEditData = { |
| | | id: "", |
| | | name: "", |
| | |
| | | }; |
| | | this.dataList = []; |
| | | }, |
| | | onCancle() { |
| | | onCancle () { |
| | | this.$emit('onCancle') |
| | | } |
| | | } |
| | |
| | | margin-left: 895px; |
| | | } |
| | | } |
| | | |
| | | .config-item { |
| | | margin: 20px 0; |
| | | b { |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | .el-button--text { |
| | | text-decoration: unset; |
| | | } |
| | |
| | | color: #3d68e1; |
| | | line-height: 39px; |
| | | } |
| | | .dialog-push-field { |
| | | .el-button--primary.is-disabled, |
| | | .el-button--primary.is-disabled:hover { |
| | | background-color: #9eb4f0 !important; |
| | | border-color: #9eb4f0 !important; |
| | | } |
| | | .el-dialog { |
| | | width: 910px; |
| | | height: 700px; |
| | | .el-dialog__body { |
| | | padding-top: 14px; |
| | | height: 540px; |
| | | overflow-y: auto; |
| | | } |
| | | } |
| | | .text-center { |
| | | text-align: center; |
| | | } |
| | | .slot-title { |
| | | position: relative; |
| | | .right { |
| | | position: absolute; |
| | | top: 0; |
| | | right: 30px; |
| | | } |
| | | } |
| | | .check-area { |
| | | padding-bottom: 10px; |
| | | .header { |
| | | position: relative; |
| | | background: #efefef; |
| | | line-height: 30px; |
| | | margin-bottom: 14px; |
| | | font-weight: bold; |
| | | .title { |
| | | border-left: 3px solid #2481fa; |
| | | padding-left: 10px; |
| | | } |
| | | .right { |
| | | position: absolute; |
| | | top: 0; |
| | | right: 30px; |
| | | } |
| | | } |
| | | .flex-box.flex-wrap { |
| | | flex-wrap: wrap; |
| | | } |
| | | .param.flex-box { |
| | | word-break: keep-all; |
| | | align-items: center; |
| | | margin: 0 10px; |
| | | min-width: 260px; |
| | | margin-bottom: 10px; |
| | | .param-name { |
| | | margin: 0 5px; |
| | | } |
| | | .el-input { |
| | | border-color: #dcdfe6; |
| | | color: #606266; |
| | | .el-input__inner { |
| | | color: inherit; |
| | | border-color: inherit; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |