From da4f50e1008b815067cf47352747bf6d23b8b043 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期四, 27 一月 2022 13:58:54 +0800 Subject: [PATCH] bug修复 --- src/pages/datapush/index/RightEvent.vue | 1916 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 990 insertions(+), 926 deletions(-) diff --git a/src/pages/datapush/index/RightEvent.vue b/src/pages/datapush/index/RightEvent.vue index f4dce22..0edd147 100644 --- a/src/pages/datapush/index/RightEvent.vue +++ b/src/pages/datapush/index/RightEvent.vue @@ -1,926 +1,990 @@ -<template> - <div class="s-event-push-right"> - <div class="s-right-config"> - <el-form> - <el-form-item label="鍚嶇О"> - <el-input - v-model="taskEditData.name" - placeholder="璇疯緭鍏ュ悕绉�" - size="small" - style="width:400px" - ></el-input> - </el-form-item> - - <el-form-item label="鏃堕棿"> - <el-date-picker - v-model="taskEditData.time" - format="yyyy-MM-dd HH:mm:ss" - value-format="yyyy-MM-dd HH:mm:ss" - type="datetimerange" - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - size="small" - ></el-date-picker> - </el-form-item> - - <span style="line-height: 38px;">鎺ㄩ�佹湇鍔″櫒</span> - <div class="icon-btn" v-if="urls.length < 1" @click="addUrl()"> - <i class="el-icon-circle-plus-outline"></i> - <span> 娣诲姞鎺ュ彛鍦板潃</span> - </div> - <div v-for="(item,index) in urls" :key="item.hash" class="flex-box server-url"> - <div> - <el-checkbox v-model="item.enable"></el-checkbox> - <span class="ml20">{{'URL '}}</span> - <el-input v-model="item.url" style="width:360px;margin-left:0px;" size="small"></el-input> - </div> - <div class="server-add"> - <i - class="el-icon-remove-outline" - @click="delUrl(index)" - style="color:red;margin-right:10px" - /> - <i class="el-icon-circle-plus-outline" @click="addUrl()"></i> - </div> - </div> - - <el-form-item label="鑱斿姩鏂瑰紡" style="margin-top: 20px;width:100"> - <el-select v-model="taskEditData.lineWay" placeholder="璇烽�夋嫨" size="small"> - <el-option - v-for="item in taskEditData.lineOptions" - :key="item.value" - :label="item.label" - :value="item.value" - ></el-option> - </el-select> - </el-form-item> - - <el-form-item label="鏍囩"> - <el-radio v-model="taskEditData.radioValue" label="1">婊¤冻鍏ㄩ儴</el-radio> - <el-radio v-model="taskEditData.radioValue" label="2">婊¤冻浠绘剰涓�涓�</el-radio> - </el-form-item> - </el-form> - </div> - <div class="s-right-mid"></div> - <div class="s-right-rule"> - <div class="rule-title"> - <b style="margin-right:20px">浠诲姟閰嶇疆</b> - <div class="icon-btn" v-if="dataList.length === 0" @click="createSet"> - <i class="el-icon-circle-plus-outline"></i> - <span> 鏂板</span> - </div> - <div class="icon-btn" v-if="dataList.length > 0" @click="cleanSet"> - <i class="el-icon-remove-outline"></i> - <span> 娓呯┖</span> - </div> - </div> - - <div v-for="(rule,index) in dataList" :key="index" style="margin-top:10px"> - <el-row :gutter="20"> - <!-- 涓婚 --> - <el-col :span="4"> - <el-select - v-model="rule.topic_type" - placeholder="璇烽�夋嫨" - @change="selectTopic(rule, true)" - size="small" - > - <el-option - v-for="item in rule.topicTypeOptions" - :key="item.id" - :label="item.name" - :value="item.value" - ></el-option> - </el-select> - </el-col> - - <!-- 杩囨护鍊� --> - <el-col :span="4"> - <el-select - v-model="rule.topic_arg" - placeholder="璇烽�夋嫨" - @change="selectArg(rule, true)" - size="small" - > - <el-option - v-for="item in rule.topicArgOptions" - :key="item.id" - :label="item.name" - :value="item.value" - ></el-option> - </el-select> - </el-col> - - <!-- 鎿嶄綔绗� --> - <el-col :span="4"> - <el-select v-model="rule.operator" placeholder="璇烽�夋嫨" size="small"> - <el-option label="==" value="="></el-option> - </el-select> - </el-col> - - <!-- 鍊肩被鍨� --> - <el-col :span="4"> - <el-select - v-model="rule.operator_type" - placeholder="璇烽�夋嫨" - @change="selectOperator(rule, true)" - size="small" - > - <el-option - v-for="item in rule.operatorTypeOpionts" - :key="item.id" - :label="item.name" - :value="item.value" - ></el-option> - </el-select> - </el-col> - - <!-- 杩囨护鍊� --> - <el-col :span="4"> - <div v-if="rule.operator_type === 'custom'"> - <el-input v-model="rule.rule_value" placeholder="璇疯緭鍏ュ唴瀹�" size="small"></el-input> - </div> - <div v-else> - <el-select - v-model="rule.rule_values" - multiple - collapse-tags - placeholder="璇烽�夋嫨" - size="small" - @change="selectValue( rule, $event)" - > - <el-option - v-for="item in rule.ruleValueOptions" - :key="item.id" - :label="item.name" - :disabled="item.disabled" - :value="item.value" - ></el-option> - </el-select> - </div> - </el-col> - <el-col :span="4"> - <div class="rule-edit-btn"> - <i - v-show="dataList.length > 1" - class="el-icon-remove-outline" - @click="delRule(index)" - style="color:red;margin-right:10px" - /> - <i - v-show="index === dataList.length -1" - class="el-icon-circle-plus-outline" - @click="addRule()" - style="color:#3D68E1" - ></i> - </div> - </el-col> - </el-row> - <el-row></el-row> - </div> - - <div class="rule-title2"> - <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="openPushSetDialog">璁剧疆</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" @change="allCheckChange"></el-checkbox> - </div> - </div> - <div class="check-area" v-for="configObj in tempPushSet" :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" @change="checkChildren"></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" @click="canclePushFieldSet">鍙栨秷</el-button> - <el-button - size="small" - type="primary" - :disabled="disabledPushFieldSet" - @click="submitPushFieldSet" - >淇濆瓨</el-button> - </div> - </el-dialog> - </div> -</template> -<script> - -import { eventPushsSave, findByEventTopic, getPushSet } from "@/api/event"; -import { findDictionaryByType, findDictionaryByID } from "@/api/dictionary"; -import { getTaskList } from "@/api/search"; - -export default { - name: "rightEvent", - props: { - eventObject: { - type: Object, - default: () => { - return {}; - } - } - }, - computed: { - urls() { - return this.taskEditData.urls - } - }, - data() { - return { - taskEditData: {}, - dataList: [], - dictionary: [], - cameras: [], - tasks: [], - tables: [], - baseRule: { - event_push_id: "", - id: "", - operator: "==", - operator_type: "", - rule_value: "", - rule_values: [], - topic_arg: "", - topic_type: "", - topicTypeOptions: {}, - topicArgOptions: {}, - operatorOptions: {}, - operatorTypeOpionts: {}, - ruleValueOptions: [] - }, - pushFieldDialog: false, - tempPushSet: [], - pushFields: [], - allFieldChecked: false, - disabledPushFieldSet: true, - }; - }, - watch: { - eventObject: { - handler(newVal, oldVal) { - this.taskEditData.enable = this.eventObject.enable; - if (newVal !== oldVal) { - if (this.taskEditData.id !== newVal.id) { - this.dataList = []; - - this.taskEditData.id = newVal.id; - this.taskEditData.name = newVal.name; - this.taskEditData.time = [ - this.eventObject.time_start, - this.eventObject.time_end - ]; - this.taskEditData.serverIp = newVal.ip_ports; - this.taskEditData.urls = newVal.urls; - this.taskEditData.lineWay = newVal.link_type; - this.taskEditData.eventTxt = newVal.rule_text; - this.taskEditData.radioValue = newVal.is_satisfy_all ? "1" : "2"; - - if (!this.taskEditData.urls) { - this.$set(this.taskEditData, "urls", []) - } - //this.taskEditData.push_set = this.eventObject.push_set; - if (!this.eventObject.push_set.length) { - this.$set(this.taskEditData, "push_set", this.pushFields) - } else { - this.$set(this.taskEditData, "push_set", this.eventObject.push_set) - } - if (newVal.rules) { - newVal.rules.forEach(element => { - let newRule = Object.assign(JSON.parse(JSON.stringify(this.baseRule)), element) - this.dataList.push(newRule) - this.selectTopic(newRule); - this.selectOperator(newRule); - }) - } - } - } - }, - deep: true - }, - tempPushSet: { - 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() { - this.reAdd(); - }, - mounted() { - // 鍔犺浇瀛楀吀 - this.findByType(); - this.getCameras(); - this.getTasks(); - this.getPushFields(); - }, - methods: { - openPushSetDialog() { - this.pushFieldDialog = true; - this.tempPushSet = JSON.parse(JSON.stringify(this.taskEditData.push_set)); - this.checkFlag() - }, - checkFlag() { - // debugger - let flag = true - this.tempPushSet.forEach(item => { - if (item.checked == false) { - flag = false - } - }); - this.allFieldChecked = flag - }, - checkChildren(val) { - console.log(val, 12121); - if (val == false) { - this.allFieldChecked = false - } else if (val == true && this.allFieldChecked == false) { - this.$nextTick(() => { - this.checkFlag() - }) - } - - }, - varifyField(param) { - var reg = /^[A-Za-z]+[0-9-_]?$/; - if (!reg.test(param.alias)) { - this.$message('璇疯緭鍏ュ悎娉曞瓧娈靛悕'); - param.error = true; - } else { - param.error = false; - } - // this.pushFields.forEach(configObj => { - // configObj.children.find(param => param.error) - // }) - - }, - canclePushFieldSet() { - this.pushFieldDialog = false; - }, - allCheckChange(val) { - - this.tempPushSet.forEach(function (item) { - item.checked = val - item.children.forEach(function (child) { - child.checked = val - }) - }) - }, - submitPushFieldSet() { - let flag = false; - //this.pushFields.forEach(configObj => { - this.tempPushSet.forEach(configObj => { - let errorOne = configObj.children.find(param => param.checked && param.error); - if (errorOne) { - this.$notify({ - type: 'error', - message: '璇峰皢閫変腑瀛楁杈撳叆鍚堟硶瀛楁鍚�' - }) - flag = true - } - }); - if (flag) { - //NO SUBMIT - return - } - - this.taskEditData.push_set = this.tempPushSet; - this.pushFieldDialog = false; - - // 淇濆瓨瑙勫垯 - this.eventPushsSave() - }, - toggleConfigCheck(configObj) { - - configObj.children.forEach(child => { - child.checked = configObj.checked - }) - this.checkFlag() - }, - getPushFields() { - let _this = this; - getPushSet().then(res => { - _this.pushFields = res.data; - }) - // this.pushFields = [ - // { id: 'sxjxx', name: '鎽勫儚鏈轰俊鎭�', checked: false, alias: '', - // children: [ - // { name: '鎽勫儚鏈篒D', 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) { - this.$set(this.taskEditData.urls, index, this.baseRule); - this.taskEditData.urls.splice(index, 1); - }, - // 淇濆瓨 - async eventPushsSave() { - // 鍒ゆ柇淇濆瓨鐨刬p鏄惁绗﹀悎鏍煎紡瑕佹眰 - if (this.taskEditData.urls.length < 1) { - this.$notify({ - type: "warning", - message: "璇烽厤缃嚦灏戜竴鍙版帹閫佹湇鍔″櫒" - }); - return; - } - for (let i = 0; i < this.taskEditData.urls.length; i++) { - if (this.taskEditData.urls[i].url.length < 1) { - this.$notify({ - type: "warning", - message: "鎺ュ彛URL鍦板潃涓嶅厑璁镐负绌�" - }); - return; - } - } - - // 鎷兼帴瀛楃涓� - let ruleDesc = [] - this.dataList.forEach(i => { - let str = ""; - if (i.topic_type) { - str += this.getNameByValue(i.topicTypeOptions, i.topic_type); - } - if (i.topic_arg) { - str += this.getNameByValue(i.topicArgOptions, i.topic_arg); - } - if (i.operator === '==') { - str += ' = '; - } - - if (i.rule_value === "all*all") { - str += "鍏ㄩ儴"; - } else if (i.rule_value === "null*null") { - str += "绌�"; - } else { - str += i.rule_value; - } - - if (str.length > 0) { - ruleDesc.push(str); - } - }); - // 澶勭悊瑙勫垯鍒楄〃鏁版嵁缁撴瀯 - let ruleList = this.dataList.map(i => { - return { - topic_type: i.topic_type, - topic_arg: i.topic_arg, - operator: i.operator, - operator_type: i.operator_type, - rule_value: i.rule_value - } - }); - - let json = { - enable: this.taskEditData.enable, - id: this.taskEditData.id, - ip_ports: this.taskEditData.serverIp, - name: this.taskEditData.name, - rule_text: ruleDesc.join("<br/>"), - rules: ruleList, - time_start: this.taskEditData.time[0], - time_end: this.taskEditData.time[1], - urls: this.taskEditData.urls, - is_satisfy_all: this.taskEditData.radioValue === "1", - link_type: this.taskEditData.lineWay, - push_set: this.taskEditData.push_set - }; - - let res = await eventPushsSave(json); - if (res && res.success) { - this.taskEditData.eventTxt = ruleDesc.join("<br/>"); - this.$emit("updateList", res.data.id); - this.$notify({ - type: "success", - message: "淇濆瓨鎴愬姛" - }); - } - }, - // 鏌ユ壘瀛楀吀 - async findByType() { - let res = await findDictionaryByType(); - if (res && res.success) { - this.dictionary = Object.assign(this.dictionary, res.data) - this.baseRule.topicTypeOptions = this.dictionary.EVENTRULETOPIC - this.baseRule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE - this.dictionary['alarmLevel'] = this.dictionary.ALARMLEVEL.map(el => { - return { - name: el.name, - value: el.name - } - }) - } - }, - async getCameras() { - let rsp = await findByEventTopic({ topic: 'camera', type: 'name' }); - if (rsp && rsp.success) { - this.dictionary['camera'] = rsp.data; - } - - rsp = await findByEventTopic({ topic: 'dbtable' }); - if (rsp && rsp.success) { - this.dictionary['dbtable'] = rsp.data.map(el => { - return { - name: el.name, - value: el.name - } - }) - } - }, - async getTasks() { - this.dictionary['task'] = [] - let rsp = await getTaskList(); - if (rsp && rsp.success) { - let hash = {} - rsp.data.forEach(task => { - if (!task.isDelete && !hash[task.name]) { - this.dictionary['task'].push({ - value: task.name, - name: task.name - }) - hash[task.name] = true; - } - }) - } - }, - // 鏂板缓閰嶇疆 - createSet() { - this.dataList.push(JSON.parse(JSON.stringify(this.baseRule))); - }, - cleanSet() { - this.dataList.splice(0, this.dataList.length); - }, - // 娣诲姞瀛愯鍒� - addRule() { - this.dataList.push(JSON.parse(JSON.stringify(this.baseRule))); - }, - // 鍒犻櫎瀛愯鍒� - delRule(index) { - this.dataList.splice(index, 1); - }, - // 瑙勫垯涓笅鎷夋鐨勯�夋嫨鍥炶皟 - selectTopic(rule, resetNext = false) { - rule.topicTypeOptions.forEach(element => { - if (element.value === rule.topic_type) { - rule.topicArgOptions = element.children; - if (resetNext) { - rule.topic_arg = rule.topicArgOptions[0].value; - this.selectArg(rule, resetNext); - } - } - }); - }, - selectArg(rule, resetNext = false) { - debugger - let argInfo = rule.topicArgOptions.filter(arg => { - return arg.value === rule.topic_arg; - }) - - if (argInfo.length > 0) { - let desc = argInfo[0].description.split(","); - if (desc.length > 0) { - rule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE.filter(el => { - return desc.indexOf(el.value) >= 0; - }) - } - } - - if (resetNext) { - rule.operator_type = rule.operatorTypeOpionts[rule.operatorTypeOpionts.length - 1].value; - this.selectOperator(rule, resetNext); - } - }, - selectOperator(rule, resetNext = false) { - if (rule.operator_type === "option") { - rule.ruleValueOptions = this.dictionary[rule.topic_type] ? this.dictionary[rule.topic_type] : []; - - if (rule.rule_value != "") { - rule.rule_values = rule.rule_value.split(","); - } - - // 澶勭悊 鍏ㄩ儴/绌� - for (let i = 0; i < rule.rule_values.length; i++) { - if (rule.rule_values[i] === "all*all") { - rule.rule_values[i] = "鍏ㄩ儴"; - } - - if (rule.rule_values[i] === "null*null") { - rule.rule_values[i] = "绌�"; - } - } - - this.setOptionsDisable(rule); - } - - if (resetNext) { - rule.rule_value = ""; - rule.rule_values = []; - } - }, - selectValue(rule, val) { - if (rule.operator_type === "option") { - this.setOptionsDisable(rule); - - if (val.indexOf("鍏ㄩ儴") >= 0) { - rule.rule_value = "all*all"; - return; - } - - if (val.indexOf("绌�") >= 0) { - rule.rule_value = "null*null"; - return; - } - } - - rule.rule_value = val.join(","); - }, - setOptionsDisable(rule) { - let isAllSelect = (rule.rule_values.indexOf("鍏ㄩ儴") >= 0); - let isNullSelect = (rule.rule_values.indexOf("绌�") >= 0); - - rule.ruleValueOptions.forEach(opt => { - if (!rule.rule_values.length) { - opt.disabled = false; - return - } - - if (opt.name === "鍏ㄩ儴") { - opt.disabled = !isAllSelect; - return - } - - if (opt.name === "绌�") { - opt.disabled = !isNullSelect; - return - } - - opt.disabled = (isAllSelect || isNullSelect); - }) - }, - // 鏍规嵁value杩斿洖瀵瑰簲鐨刵ame - getNameByValue(arr, value) { - let s = arr.find(item => { - return item.value === value; - }); - - return s.name; - }, - // 娓呯┖閲嶆柊鏂板 - reAdd() { - this.taskEditData = { - id: "", - name: "", - time: [ - this.$moment().format("YYYY-MM-DD 00:00:00"), - this.$moment().format("YYYY-MM-DD HH:mm:ss") - ], - serverIp: [ - { - enable: true, - server_ip: "", - port: 0 - } - ], - urls: [ - ], - lineWay: "", - lineOptions: [ - { - value: "001", - label: "IP骞挎挱" - } - ], - radioValue: "1", - eventTxt: "", - push_set: this.pushFields - }; - this.dataList = []; - }, - onCancle() { - this.$emit('onCancle') - } - } -}; -</script> -<style lang="scss"> -.s-event-push-right { - text-align: left; - font-size: 14px; - i { - cursor: pointer; - } - .s-right-config { - padding: 10px 40px; - } - - .el-form-item__label { - text-align: left; - } - - .s-right-mid { - height: 10px; - background-color: #e9ebf2; - width: 100%; - //position: absolute; - } - - .s-right-rule { - padding: 20px 40px; - margin-top: 17px; - .rule-title { - border-bottom: 1px solid #e0e0e0; - } - .rule-title2 { - margin-top: 20px; - } - - .div-border { - width: 995px; - padding: 10px; - margin-top: 15px; - min-height: 80px; - background: #fafafa; - border: 1px solid #f2f2f2; - } - - .rule-edit-btn { - font-size: 18px; - line-height: 38px; - } - - .save-btn { - // float: right; - margin-top: 20px; - margin-left: 895px; - } - } - .config-item { - margin: 20px 0; - b { - margin-right: 10px; - } - } - .el-button--text { - text-decoration: unset; - } - - .icon-btn { - i { - font-size: 18px; - position: relative; - top: 2px; - } - span { - font-size: 14px; - } - display: inline; - color: #3d68e1; - line-height: 38px; - margin-left: 10px; - cursor: pointer; - } - - .server-url { - padding-top: 25px; - } - .server-add { - font-size: 18px; - margin-left: 8px; - 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> +<template> + <div class="s-event-push-right"> + <div class="s-right-config"> + <el-form> + <el-form-item label="鍚嶇О"> + <el-input + v-model="taskEditData.name" + placeholder="璇疯緭鍏ュ悕绉�" + size="small" + style="width: 400px" + ></el-input> + </el-form-item> + + <el-form-item label="鏃堕棿"> + <el-date-picker + v-model="taskEditData.time" + format="yyyy-MM-dd HH:mm:ss" + value-format="yyyy-MM-dd HH:mm:ss" + type="datetimerange" + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + size="small" + ></el-date-picker> + </el-form-item> + + <span style="line-height: 38px">鎺ㄩ�佹湇鍔″櫒</span> + <div class="icon-btn" v-if="urls.length < 1" @click="addUrl()"> + <i class="el-icon-circle-plus-outline"></i> + <span> 娣诲姞鎺ュ彛鍦板潃</span> + </div> + <div + v-for="(item, index) in urls" + :key="item.hash" + class="flex-box server-url" + > + <div> + <el-checkbox v-model="item.enable"></el-checkbox> + <span class="ml20">{{ "URL " }}</span> + <el-input + v-model="item.url" + style="width: 360px; margin-left: 0px" + size="small" + ></el-input> + </div> + <div class="server-add"> + <i + class="el-icon-remove-outline" + @click="delUrl(index)" + style="color: red; margin-right: 10px" + /> + <i class="el-icon-circle-plus-outline" @click="addUrl()"></i> + </div> + </div> + + <el-form-item label="鑱斿姩鏂瑰紡" style="margin-top: 20px; width: 100"> + <el-select + v-model="taskEditData.lineWay" + placeholder="璇烽�夋嫨" + size="small" + > + <el-option + v-for="item in taskEditData.lineOptions" + :key="item.value" + :label="item.label" + :value="item.value" + ></el-option> + </el-select> + </el-form-item> + + <el-form-item label="鏍囩"> + <el-radio v-model="taskEditData.radioValue" label="1" + >婊¤冻鍏ㄩ儴</el-radio + > + <el-radio v-model="taskEditData.radioValue" label="2" + >婊¤冻浠绘剰涓�涓�</el-radio + > + </el-form-item> + </el-form> + </div> + <div class="s-right-mid"></div> + <div class="s-right-rule"> + <div class="rule-title"> + <b style="margin-right: 20px">浠诲姟閰嶇疆</b> + <div class="icon-btn" v-if="dataList.length === 0" @click="createSet"> + <i class="el-icon-circle-plus-outline"></i> + <span> 鏂板</span> + </div> + <div class="icon-btn" v-if="dataList.length > 0" @click="cleanSet"> + <i class="el-icon-remove-outline"></i> + <span> 娓呯┖</span> + </div> + </div> + + <div + v-for="(rule, index) in dataList" + :key="index" + style="margin-top: 10px" + > + <el-row :gutter="20"> + <!-- 涓婚 --> + <el-col :span="4"> + <el-select + v-model="rule.topic_type" + placeholder="璇烽�夋嫨" + @change="selectTopic(rule, true)" + size="small" + > + <el-option + v-for="item in rule.topicTypeOptions" + :key="item.id" + :label="item.name" + :value="item.value" + ></el-option> + </el-select> + </el-col> + + <!-- 杩囨护鍊� --> + <el-col :span="4"> + <el-select + v-model="rule.topic_arg" + placeholder="璇烽�夋嫨" + @change="selectArg(rule, true)" + size="small" + > + <el-option + v-for="item in rule.topicArgOptions" + :key="item.id" + :label="item.name" + :value="item.value" + ></el-option> + </el-select> + </el-col> + + <!-- 鎿嶄綔绗� --> + <el-col :span="4"> + <el-select + v-model="rule.operator" + placeholder="璇烽�夋嫨" + size="small" + > + <el-option label="==" value="="></el-option> + </el-select> + </el-col> + + <!-- 鍊肩被鍨� --> + <el-col :span="4"> + <el-select + v-model="rule.operator_type" + placeholder="璇烽�夋嫨" + @change="selectOperator(rule, true)" + size="small" + > + <el-option + v-for="item in rule.operatorTypeOpionts" + :key="item.id" + :label="item.name" + :value="item.value" + ></el-option> + </el-select> + </el-col> + + <!-- 杩囨护鍊� --> + <el-col :span="4"> + <div v-if="rule.operator_type === 'custom'"> + <el-input + v-model="rule.rule_value" + placeholder="璇疯緭鍏ュ唴瀹�" + size="small" + ></el-input> + </div> + <div v-else> + <el-select + v-model="rule.rule_values" + multiple + collapse-tags + placeholder="璇烽�夋嫨" + size="small" + @change="selectValue(rule, $event)" + > + <el-option + v-for="item in rule.ruleValueOptions" + :key="item.id" + :label="item.name" + :disabled="item.disabled" + :value="item.value" + ></el-option> + </el-select> + </div> + </el-col> + <el-col :span="4"> + <div class="rule-edit-btn"> + <i + v-show="dataList.length > 1" + class="el-icon-remove-outline" + @click="delRule(index)" + style="color: red; margin-right: 10px" + /> + <i + v-show="index === dataList.length - 1" + class="el-icon-circle-plus-outline" + @click="addRule()" + style="color: #3d68e1" + ></i> + </div> + </el-col> + </el-row> + <el-row></el-row> + </div> + + <div class="rule-title2"> + <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="openPushSetDialog" + >璁剧疆</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" + @change="allCheckChange" + ></el-checkbox> + </div> + </div> + <div + class="check-area" + v-for="configObj in tempPushSet" + :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" + @change="checkChildren" + ></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" @click="canclePushFieldSet">鍙栨秷</el-button> + <el-button + size="small" + type="primary" + :disabled="disabledPushFieldSet" + @click="submitPushFieldSet" + >淇濆瓨</el-button + > + </div> + </el-dialog> + </div> +</template> +<script> +import { eventPushsSave, findByEventTopic, getPushSet } from "@/api/event"; +import { findDictionaryByType, findDictionaryByID } from "@/api/dictionary"; +import { getTaskList } from "@/api/search"; + +export default { + name: "rightEvent", + props: { + eventObject: { + type: Object, + default: () => { + return {}; + }, + }, + }, + computed: { + urls() { + return this.taskEditData.urls; + }, + }, + data() { + return { + taskEditData: {}, + dataList: [], + dictionary: [], + cameras: [], + tasks: [], + tables: [], + baseRule: { + event_push_id: "", + id: "", + operator: "==", + operator_type: "", + rule_value: "", + rule_values: [], + topic_arg: "", + topic_type: "", + topicTypeOptions: {}, + topicArgOptions: {}, + operatorOptions: {}, + operatorTypeOpionts: {}, + ruleValueOptions: [], + }, + pushFieldDialog: false, + tempPushSet: [], + pushFields: [], + allFieldChecked: false, + disabledPushFieldSet: true, + }; + }, + watch: { + eventObject: { + handler(newVal, oldVal) { + this.taskEditData.enable = this.eventObject.enable; + if (newVal !== oldVal) { + if (this.taskEditData.id !== newVal.id) { + this.dataList = []; + + this.taskEditData.id = newVal.id; + this.taskEditData.name = newVal.name; + this.taskEditData.time = [ + this.eventObject.time_start, + this.eventObject.time_end, + ]; + this.taskEditData.serverIp = newVal.ip_ports; + this.taskEditData.urls = newVal.urls; + this.taskEditData.lineWay = newVal.link_type; + this.taskEditData.eventTxt = newVal.rule_text; + this.taskEditData.radioValue = newVal.is_satisfy_all ? "1" : "2"; + + if (!this.taskEditData.urls) { + this.$set(this.taskEditData, "urls", []); + } + //this.taskEditData.push_set = this.eventObject.push_set; + if (!this.eventObject.push_set.length) { + this.$set(this.taskEditData, "push_set", this.pushFields); + } else { + this.$set( + this.taskEditData, + "push_set", + this.eventObject.push_set + ); + } + if (newVal.rules) { + newVal.rules.forEach((element) => { + let newRule = Object.assign( + JSON.parse(JSON.stringify(this.baseRule)), + element + ); + this.dataList.push(newRule); + this.selectTopic(newRule); + this.selectOperator(newRule); + }); + } + } + } + }, + deep: true, + }, + tempPushSet: { + 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() { + this.reAdd(); + }, + mounted() { + // 鍔犺浇瀛楀吀 + this.findByType(); + this.getCameras(); + this.getTasks(); + this.getPushFields(); + }, + methods: { + openPushSetDialog() { + this.pushFieldDialog = true; + this.tempPushSet = JSON.parse(JSON.stringify(this.taskEditData.push_set)); + this.checkFlag(); + }, + checkFlag() { + // debugger + let flag = true; + this.tempPushSet.forEach((item) => { + if (item.checked == false) { + flag = false; + } + }); + this.allFieldChecked = flag; + }, + checkChildren(val) { + console.log(val, 12121); + if (val == false) { + this.allFieldChecked = false; + } else if (val == true && this.allFieldChecked == false) { + this.$nextTick(() => { + this.checkFlag(); + }); + } + }, + varifyField(param) { + var reg = /^[A-Za-z]+[0-9-_]?$/; + if (!reg.test(param.alias)) { + this.$message("璇疯緭鍏ュ悎娉曞瓧娈靛悕"); + param.error = true; + } else { + param.error = false; + } + // this.pushFields.forEach(configObj => { + // configObj.children.find(param => param.error) + // }) + }, + canclePushFieldSet() { + this.pushFieldDialog = false; + }, + allCheckChange(val) { + this.tempPushSet.forEach(function (item) { + item.checked = val; + item.children.forEach(function (child) { + child.checked = val; + }); + }); + }, + submitPushFieldSet() { + let flag = false; + //this.pushFields.forEach(configObj => { + this.tempPushSet.forEach((configObj) => { + let errorOne = configObj.children.find( + (param) => param.checked && param.error + ); + if (errorOne) { + this.$notify({ + type: "error", + message: "璇峰皢閫変腑瀛楁杈撳叆鍚堟硶瀛楁鍚�", + }); + flag = true; + } + }); + if (flag) { + //NO SUBMIT + return; + } + + this.taskEditData.push_set = this.tempPushSet; + this.pushFieldDialog = false; + + // 淇濆瓨瑙勫垯 + this.eventPushsSave(); + }, + toggleConfigCheck(configObj) { + configObj.children.forEach((child) => { + child.checked = configObj.checked; + }); + this.checkFlag(); + }, + getPushFields() { + let _this = this; + getPushSet().then((res) => { + _this.pushFields = res.data; + }); + // this.pushFields = [ + // { id: 'sxjxx', name: '鎽勫儚鏈轰俊鎭�', checked: false, alias: '', + // children: [ + // { name: '鎽勫儚鏈篒D', 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) { + this.$set(this.taskEditData.urls, index, this.baseRule); + this.taskEditData.urls.splice(index, 1); + }, + // 淇濆瓨 + async eventPushsSave() { + // 鍒ゆ柇淇濆瓨鐨刬p鏄惁绗﹀悎鏍煎紡瑕佹眰 + if (this.taskEditData.urls.length < 1) { + this.$notify({ + type: "warning", + message: "璇烽厤缃嚦灏戜竴鍙版帹閫佹湇鍔″櫒", + }); + return; + } + for (let i = 0; i < this.taskEditData.urls.length; i++) { + if (this.taskEditData.urls[i].url.length < 1) { + this.$notify({ + type: "warning", + message: "鎺ュ彛URL鍦板潃涓嶅厑璁镐负绌�", + }); + return; + } + } + + // 鎷兼帴瀛楃涓� + let ruleDesc = []; + this.dataList.forEach((i) => { + let str = ""; + if (i.topic_type) { + str += this.getNameByValue(i.topicTypeOptions, i.topic_type); + } + if (i.topic_arg) { + str += this.getNameByValue(i.topicArgOptions, i.topic_arg); + } + if (i.operator === "==") { + str += " = "; + } + + if (i.rule_value === "all*all") { + str += "鍏ㄩ儴"; + } else if (i.rule_value === "null*null") { + str += "绌�"; + } else { + str += i.rule_value; + } + + if (str.length > 0) { + ruleDesc.push(str); + } + }); + // 澶勭悊瑙勫垯鍒楄〃鏁版嵁缁撴瀯 + let ruleList = this.dataList.map((i) => { + return { + topic_type: i.topic_type, + topic_arg: i.topic_arg, + operator: i.operator, + operator_type: i.operator_type, + rule_value: i.rule_value, + }; + }); + + let json = { + enable: this.taskEditData.enable, + id: this.taskEditData.id, + ip_ports: this.taskEditData.serverIp, + name: this.taskEditData.name, + rule_text: ruleDesc.join("<br/>"), + rules: ruleList, + time_start: this.taskEditData.time[0], + time_end: this.taskEditData.time[1], + urls: this.taskEditData.urls, + is_satisfy_all: this.taskEditData.radioValue === "1", + link_type: this.taskEditData.lineWay, + push_set: this.taskEditData.push_set, + }; + + let res = await eventPushsSave(json); + if (res && res.success) { + this.taskEditData.eventTxt = ruleDesc.join("<br/>"); + this.$emit("updateList", res.data.id); + this.$notify({ + type: "success", + message: "淇濆瓨鎴愬姛", + }); + } + }, + // 鏌ユ壘瀛楀吀 + async findByType() { + let res = await findDictionaryByType(); + if (res && res.success) { + this.dictionary = Object.assign(this.dictionary, res.data); + this.baseRule.topicTypeOptions = this.dictionary.EVENTRULETOPIC; + this.baseRule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE; + this.dictionary["alarmLevel"] = this.dictionary.ALARMLEVEL.map((el) => { + return { + name: el.name, + value: el.name, + }; + }); + } + }, + async getCameras() { + let rsp = await findByEventTopic({ topic: "camera", type: "name" }); + if (rsp && rsp.success) { + this.dictionary["camera"] = rsp.data; + } + + rsp = await findByEventTopic({ topic: "dbtable" }); + if (rsp && rsp.success) { + this.dictionary["dbtable"] = rsp.data.map((el) => { + return { + name: el.name, + value: el.name, + }; + }); + } + }, + async getTasks() { + this.dictionary["task"] = []; + let rsp = await getTaskList(); + if (rsp && rsp.success) { + let hash = {}; + rsp.data.forEach((task) => { + if (!task.isDelete && !hash[task.name]) { + this.dictionary["task"].push({ + value: task.name, + name: task.name, + }); + hash[task.name] = true; + } + }); + } + }, + // 鏂板缓閰嶇疆 + createSet() { + this.dataList.push(JSON.parse(JSON.stringify(this.baseRule))); + }, + cleanSet() { + this.dataList.splice(0, this.dataList.length); + }, + // 娣诲姞瀛愯鍒� + addRule() { + this.dataList.push(JSON.parse(JSON.stringify(this.baseRule))); + }, + // 鍒犻櫎瀛愯鍒� + delRule(index) { + this.dataList.splice(index, 1); + }, + // 瑙勫垯涓笅鎷夋鐨勯�夋嫨鍥炶皟 + selectTopic(rule, resetNext = false) { + rule.topicTypeOptions.forEach((element) => { + if (element.value === rule.topic_type) { + rule.topicArgOptions = element.children; + if (resetNext) { + rule.topic_arg = rule.topicArgOptions[0].value; + this.selectArg(rule, resetNext); + } + } + }); + }, + selectArg(rule, resetNext = false) { + debugger; + let argInfo = rule.topicArgOptions.filter((arg) => { + return arg.value === rule.topic_arg; + }); + + if (argInfo.length > 0) { + let desc = argInfo[0].description.split(","); + if (desc.length > 0) { + rule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE.filter( + (el) => { + return desc.indexOf(el.value) >= 0; + } + ); + } + } + + if (resetNext) { + rule.operator_type = + rule.operatorTypeOpionts[rule.operatorTypeOpionts.length - 1].value; + this.selectOperator(rule, resetNext); + } + }, + selectOperator(rule, resetNext = false) { + if (rule.operator_type === "option") { + rule.ruleValueOptions = this.dictionary[rule.topic_type] + ? this.dictionary[rule.topic_type] + : []; + + if (rule.rule_value != "") { + rule.rule_values = rule.rule_value.split(","); + } + + // 澶勭悊 鍏ㄩ儴/绌� + for (let i = 0; i < rule.rule_values.length; i++) { + if (rule.rule_values[i] === "all*all") { + rule.rule_values[i] = "鍏ㄩ儴"; + } + + if (rule.rule_values[i] === "null*null") { + rule.rule_values[i] = "绌�"; + } + } + console.log("-----------"); + this.setOptionsDisable(rule); + } + + if (resetNext) { + rule.rule_value = ""; + rule.rule_values = []; + } + }, + selectValue(rule, val) { + if (rule.operator_type === "option") { + this.setOptionsDisable(rule); + + if (val.indexOf("鍏ㄩ儴") >= 0) { + rule.rule_value = "all*all"; + return; + } + + if (val.indexOf("绌�") >= 0) { + rule.rule_value = "null*null"; + return; + } + } + + rule.rule_value = val.join(","); + }, + setOptionsDisable(rule) { + let isAllSelect = rule.rule_values.indexOf("鍏ㄩ儴") >= 0; + let isNullSelect = rule.rule_values.indexOf("绌�") >= 0; + console.log(rule.rule_values); + + rule.ruleValueOptions.forEach((opt) => { + if (!rule.rule_values.length) { + opt.disabled = false; + return; + } + + if (opt.name === "绌�") { + opt.disabled = !isNullSelect; + return; + } + + opt.disabled = isAllSelect || isNullSelect; + }); + }, + // 鏍规嵁value杩斿洖瀵瑰簲鐨刵ame + getNameByValue(arr, value) { + let s = arr.find((item) => { + return item.value === value; + }); + + return s.name; + }, + // 娓呯┖閲嶆柊鏂板 + reAdd() { + this.taskEditData = { + id: "", + name: "", + time: [ + this.$moment().format("YYYY-MM-DD 00:00:00"), + this.$moment().format("YYYY-MM-DD HH:mm:ss"), + ], + serverIp: [ + { + enable: true, + server_ip: "", + port: 0, + }, + ], + urls: [], + lineWay: "", + lineOptions: [ + { + value: "001", + label: "IP骞挎挱", + }, + ], + radioValue: "1", + eventTxt: "", + push_set: this.pushFields, + }; + this.dataList = []; + }, + onCancle() { + this.$emit("onCancle"); + }, + }, +}; +</script> +<style lang="scss"> +.s-event-push-right { + text-align: left; + font-size: 14px; + i { + cursor: pointer; + } + .s-right-config { + padding: 10px 40px; + } + + .el-form-item__label { + text-align: left; + } + + .s-right-mid { + height: 10px; + background-color: #e9ebf2; + width: 100%; + //position: absolute; + } + + .s-right-rule { + padding: 20px 40px; + margin-top: 17px; + .rule-title { + border-bottom: 1px solid #e0e0e0; + } + .rule-title2 { + margin-top: 20px; + } + + .div-border { + width: 995px; + padding: 10px; + margin-top: 15px; + min-height: 80px; + background: #fafafa; + border: 1px solid #f2f2f2; + } + + .rule-edit-btn { + font-size: 18px; + line-height: 38px; + } + + .save-btn { + // float: right; + margin-top: 20px; + margin-left: 895px; + } + } + .config-item { + margin: 20px 0; + b { + margin-right: 10px; + } + } + .el-button--text { + text-decoration: unset; + } + + .icon-btn { + i { + font-size: 18px; + position: relative; + top: 2px; + } + span { + font-size: 14px; + } + display: inline; + color: #3d68e1; + line-height: 38px; + margin-left: 10px; + cursor: pointer; + } + + .server-url { + padding-top: 25px; + } + .server-add { + font-size: 18px; + margin-left: 8px; + 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> -- Gitblit v1.8.0