From c7095a2bce8dbba2ae1e67e27806b33442d2c27a Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期一, 28 九月 2020 19:45:29 +0800 Subject: [PATCH] 完善事件推送应用 --- src/pages/datapush/index/RightEvent.vue | 616 ++++++++++++++++--------------------------------------- 1 files changed, 181 insertions(+), 435 deletions(-) diff --git a/src/pages/datapush/index/RightEvent.vue b/src/pages/datapush/index/RightEvent.vue index dd24196..8448884 100644 --- a/src/pages/datapush/index/RightEvent.vue +++ b/src/pages/datapush/index/RightEvent.vue @@ -20,35 +20,15 @@ </el-form-item> <span style="line-height: 38px;">鎺ㄩ�佹湇鍔″櫒</span> - <div class="icon-btn" v-if="ips.length < 1" @click="addUrl('ip')"> + <div class="icon-btn" v-if="urls.length < 1" @click="addUrl()"> <i class="el-icon-circle-plus-outline"></i> - <span> 娣诲姞ip</span> - </div> - <div class="icon-btn" v-if="domains.length < 1" @click="addUrl('domain')"> - <i class="el-icon-circle-plus-outline"></i> - <span> 娣诲姞鍩熷悕</span> + <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">{{item.type =='ip' ? 'IP ' : '鍩熷悕 '}}</span> - <!-- <el-input v-model="item.url" style="width:400px;margin-left:34px;" size="small"></el-input> --> - <ip-input - v-if="item.type == 'ip'" - :id="item.url" - :ip="item.ip" - :item="item" - :on-item-change="onIpBlur" - style="width: 255px" - ></ip-input> - <el-input - v-else - v-model="item.domain" - style="width:256px;margin-left:0px;" - size="small" - ></el-input> - <span class="ml10">绔彛</span> - <el-input v-model="item.port" style="width:100px;margin-left:5px;" size="small"></el-input> + <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 @@ -56,7 +36,7 @@ @click="delUrl(index)" style="color:red;margin-right:10px" /> - <i class="el-icon-circle-plus-outline" @click="addUrl(item.type)"></i> + <i class="el-icon-circle-plus-outline" @click="addUrl()"></i> </div> </div> @@ -91,81 +71,82 @@ </div> </div> - <div v-for="(temp,index) in dataList" :key="index" style="margin-top:10px"> + <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="temp.polygon_id" + v-model="rule.topic_type" placeholder="璇烽�夋嫨" - @change="selectChange($event,'options1',temp)" + @change="selectTopic(rule, true)" size="small" > <el-option - v-for="item in temp.options1" + 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="temp.sdk_id" + v-model="rule.topic_arg" placeholder="璇烽�夋嫨" - @change="selectChange($event,'options2',temp)" + @change="selectArg(rule, true)" size="small" > <el-option - v-for="item in temp.options2" + 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="temp.sdk_arg_alias" + v-model="rule.operator_type" placeholder="璇烽�夋嫨" - @change="selectChange($event,'options3',temp)" + @change="selectOperator(rule, true)" size="small" > <el-option - v-for="item in temp.options3" + 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"> - <el-select - v-model="temp.operator" - placeholder="璇烽�夋嫨" - @change="selectChange($event,'options4',temp)" - size="small" - > - <el-option - v-for="item in temp.options4" - :key="item.id" - :label="item.name" - :value="item.value" - ></el-option> - </el-select> - </el-col> - <el-col :span="4"> - <div v-if="temp.operator === 'custom'"> - <el-input v-model="temp.operator_type" placeholder="璇疯緭鍏ュ唴瀹�" size="small"></el-input> + <div v-if="rule.operator_type === 'custom'"> + <el-input v-model="rule.rule_value" placeholder="璇疯緭鍏ュ唴瀹�" size="small"></el-input> </div> - <div v-if="temp.operator !== 'custom'"> + <div v-else> <el-select - v-model="temp.operator_type" + v-model="rule.rule_values" + multiple + collapse-tags placeholder="璇烽�夋嫨" - @change="selectChange($event,'options5',temp)" size="small" + @change="selectValue( rule, $event)" > <el-option - v-for="item in temp.options5" + v-for="item in rule.ruleValueOptions" :key="item.id" :label="item.name" :disabled="item.disabled" @@ -196,7 +177,7 @@ <div class="rule-title2"> <b>瑙勫垯</b> - <div class="div-border">{{eventData.eventTxt}}</div> + <div class="div-border" v-html="eventData.eventTxt"></div> </div> <div class="save-btn"> <el-button type="info" size="small" @click="onCancle" style="color:#222">鍙栨秷</el-button> @@ -206,21 +187,13 @@ </div> </template> <script> -import ipInput from "@/components/subComponents/IPInput"; import { eventPushsSave, findByEventTopic } from "@/api/event"; import { findDictionaryByType, findDictionaryByID } from "@/api/dictionary"; +import { getTaskList } from "@/api/search"; + export default { name: "rightEvent", - components: { ipInput }, - filters: { - ipSplit(url) { - return url.split(":")[0] - }, - portSplit(url) { - return url.split(":")[1] - } - }, props: { eventObject: { type: Object, @@ -249,10 +222,8 @@ handler(newVal, oldVal) { this.eventData.enable = this.eventObject.enable; if (newVal !== oldVal) { - // console.log(newVal, "褰撳墠閫変腑鐨勪簨浠秝atch"); if (this.eventData.id !== newVal.id) { this.dataList = []; - // console.log(this.eventObject.enable) this.eventData.id = newVal.id; this.eventData.name = newVal.name; @@ -266,54 +237,16 @@ this.eventData.eventTxt = newVal.rule_text; this.eventData.radioValue = newVal.is_satisfy_all ? "1" : "2"; - // urls鍙嶈В鏋� - let ipSum = 0, domainSum = 0; if (!this.eventData.urls) { this.$set(this.eventData, "urls", []) } - for (let i = 0; i < this.eventData.urls.length; i++) { - let item = this.eventData.urls[i] - item.hash = Math.random().toString(36).substr(2); - // 瑙f瀽鎴恑p鎴栧煙鍚� - let addr = item.url.split(":")[0] - if (this.isValidIP(addr)) { - item.ip = addr - this.$set(item, "domain", "") - this.$set(item, "type", "ip") - ipSum++ - } else { - this.$set(item, "domain", addr) - this.$set(item, "type", "domain") - item.ip = "" - domainSum++ - } - // item.port = - this.$set(item, "port", item.url.split(":")[1]) - } - this.eventData.urls.sort(function (a, b) { - var val1 = b.type; - var val2 = a.type; - if (val1 < val2) { - return -1; - } else if (val1 > val2) { - return 1; - } else { - return 0; - } - }) if (newVal.rules) { - newVal.rules.map((i, index) => { - this.dataList.push(JSON.parse(JSON.stringify(this.baseDateL))); - this.dataList[index].id = i.id; - this.dataList[index].event_push_id = i.event_push_id; - this.dataList[index].polygon_id = i.topic_type; - this.selectChange(i.topic_type, "options1", this.dataList[index]); - this.dataList[index].sdk_id = i.topic_arg; - this.selectChange(i.topic_arg, "options2", this.dataList[index]); - this.dataList[index].operator_type = i.rule_value; - this.dataList[index].sdk_arg_alias = i.operator; - this.dataList[index].operator = i.operator_type; - }); + 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); + }) } } } @@ -323,170 +256,49 @@ }, data() { return { - eventData: { - enable: false, - 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: [ - { - enable: true, - url: "http://" - } - ], - lineWay: "", - lineOptions: [ - { - value: "001", - label: "IP骞挎挱" - } - ], - radioValue: "1", - eventTxt: "" - }, + eventData: {}, dataList: [], - baseDateL: { + dictionary: [], + cameras: [], + tasks: [], + tables: [], + baseRule: { event_push_id: "", id: "", - options1: [ - { - id: "all", - name: "鍏ㄩ儴鍖哄煙" - }, - { - id: "002", - name: "鐭╁舰1" - } - ], - polygon_id: "", - options2: [ - { - value: "001", - label: "鍏ㄩ儴绠楁硶" - }, - { - value: "002", - label: "绠楁硶1" - }, - { - value: "003", - label: "绠楁硶2" - } - ], - sdk_id: "", - options3: [ - { - value: "001", - label: "浜烘暟" - }, - { - value: "002", - label: "鏁忔劅搴�" - }, - { - value: "003", - label: "鎸佺画鏃堕棿" - } - ], - sdk_arg_alias: "", - unit: "", - options4: [ - { - value: "001", - label: ">" - }, - { - value: "002", - label: "<" - }, - { - value: "003", - label: "==" - } - ], - operator: "", - options5: [ - { - value: "001", - label: "鍊�" - }, - { - value: "002", - label: "澶囬�夐」" - } - ], + operator: "==", operator_type: "", - options6: [ - { - value: "001", - label: "鍊�" - }, - { - value: "002", - label: "澶囬�夐」" - } - ], - select_time_rule: "", - sdk_arg_value: "", - options7: [ - { - value: "001", - label: "浠诲姟1" - }, - { - value: "002", - label: "浠诲姟2" - } - ], - select_task: "" - } + rule_value: "", + rule_values: [], + topic_arg: "", + topic_type: "", + + topicTypeOptions: {}, + topicArgOptions: {}, + operatorOptions: {}, + operatorTypeOpionts: {}, + ruleValueOptions: [] + }, }; }, + created() { + this.reAdd(); + }, + mounted() { + // 鍔犺浇瀛楀吀瀛楀吀 + this.findByType(); + this.getCameras(); + this.getTasks(); + }, methods: { - addServer() { - // console.log("addServer"); - let obj = { - enable: true, - server_ip: "", - port: "" - }; - this.eventData.serverIp.push(obj); - }, - addUrl(type) { - let obj = { + addUrl() { + this.eventData.urls.push({ checked: true, hash: Math.random().toString(36).substr(2), url: "", - ip: "", - port: "", - type: type, - domain: "" - }; - this.eventData.urls.push(obj); - this.eventData.urls.sort(function (a, b) { - var val1 = b.type; - var val2 = a.type; - if (val1 < val2) { - return -1; - } else if (val1 > val2) { - return 1; - } else { - return 0; - } - }) + }); }, delUrl(index) { - this.$set(this.eventData.urls, index, this.baseDateL) + this.$set(this.eventData.urls, index, this.baseRule) this.eventData.urls.splice(index, 1) }, // 淇濆瓨 @@ -499,86 +311,64 @@ }); return; } - let isValid = true; for (let i = 0; i < this.eventData.urls.length; i++) { - let item = this.eventData.urls[i] - if (item.type == 'ip') { - if (this.isValidIP(item.ip) && this.isValidPort(item.port)) { - item.url = item.ip + ":" + item.port - } else { - isValid = false - } - } else { - if (item.domain.length > 0 && this.isValidPort(item.port)) { - item.url = item.domain + ":" + item.port - } else { - isValid = false - } + if (this.eventData.urls[i].url.length < 1) { + this.$notify({ + type: "warning", + message: "鎺ュ彛URL鍦板潃涓嶅厑璁镐负绌�" + }); + return; } } - if (!isValid) { - this.$notify({ - type: "warning", - message: "璇疯緭鍏ユ纭牸寮忕殑鏈嶅姟鍣ㄥ湴鍧� 鍜� 绔彛" - }); - return; - } - // 鎷兼帴瀛楃涓� + // 鎷兼帴瀛楃涓� let ruleDesc = [] - this.dataList.map(i => { + this.dataList.forEach(i => { let str = ""; - if (i.polygon_id) { - str += this.getNameByValue(i.options1, i.polygon_id); + if (i.topic_type) { + str += this.getNameByValue(i.topicTypeOptions, i.topic_type); } - if (i.sdk_id && i.sdk_id !== 'empty') { - str += this.getNameByValue(i.options2, i.sdk_id); + if (i.topic_arg) { + str += this.getNameByValue(i.topicArgOptions, i.topic_arg); } - if (i.sdk_arg_alias === '==') { - str += '='; - } else { - // str += i.sdk_arg_alias; - str += this.getNameByValue(i.options3, i.sdk_arg_alias); + if (i.operator === '==') { + str += ' = '; } - if (i.operator_type) { - if (i.operator === "custom") { - str += i.operator_type; - } else { - str += this.getNameByValue(i.options5, i.operator_type); - } - } + + str += i.rule_value; if (str.length > 0) { ruleDesc.push(str) } }); // 澶勭悊瑙勫垯鍒楄〃鏁版嵁缁撴瀯 - let list = this.dataList.map(i => { - let obj = {}; - obj.operator = i.sdk_arg_alias; - obj.rule_value = i.operator_type; - obj.operator_type = i.operator; - obj.topic_type = i.polygon_id; - obj.topic_arg = i.sdk_id; - return obj; + 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 + } }); - // console.log(this.eventData) + let json = { enable: this.eventData.enable, id: this.eventData.id, ip_ports: this.eventData.serverIp, name: this.eventData.name, - rule_text: ruleDesc.join("锛�"), - rules: list, + rule_text: ruleDesc.join("<br/>"), + rules: ruleList, time_start: this.eventData.time[0], time_end: this.eventData.time[1], urls: this.eventData.urls, is_satisfy_all: this.eventData.radioValue === "1", link_type: this.eventData.lineWay }; + let res = await eventPushsSave(json); if (res && res.success) { - this.eventData.eventTxt = ruleDesc.join("锛�"); + this.eventData.eventTxt = ruleDesc.join("<br/>"); this.$emit("updateList", res.data.id); this.$notify({ type: "success", @@ -590,118 +380,111 @@ async findByType() { let res = await findDictionaryByType(); if (res && res.success) { - // console.log(res, "鏌ヨ閰嶇疆鍖哄煙鏁版嵁婧�"); - this.baseDateL.options1 = res.data.EVENTRULETOPIC; - this.baseDateL.options3 = res.data.RULECOMPUTE; - this.baseDateL.options4 = res.data.EVENTTYPECOMPUTE; + 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 } }, - // 楠岃瘉ip鐨刯s鏂规硶 - isValidIP(str) { - // let reg = /^(http:\/\/|https:\/\/)(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])(\/)([a-zA-Z0-9_/]+)$/ - /* eslint-disable */ - let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/; - return reg.test(str); + 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 + } + }) + } }, - isValidPort(str) { - return parseInt(str) > 0 && parseInt(str) < 65536 + 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.baseDateL))); + 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.baseDateL))); + this.dataList.push(JSON.parse(JSON.stringify(this.baseRule))); }, // 鍒犻櫎瀛愯鍒� delRule(index) { this.dataList.splice(index, 1); }, // 瑙勫垯涓笅鎷夋鐨勯�夋嫨鍥炶皟 - async selectChange(value, type, data) { - if (type === "options1") { - this.$set(data, "sdk_id", ""); - if (value === "dbtable" || value === "task" || value === "alarmLevel") { - let list = [ - { - name: "绌�", - value: "empty", - id: "000" - } - ]; - this.$set(data, "options2", list); - this.$set(data, "sdk_id", "empty"); - let json = { - topic: data.polygon_id, - type: "" - }; - let res = await findByEventTopic(json); - if (res && res.success) { - console.log(res, "鏍规嵁涓�浜岀骇閫夐」鑾峰彇"); - this.$set(data, "options5", res.data); - } - } else { - let id = this.getIdByValue(data.options1, value); - if (id !== undefined) { - this.findByParentId(id).then(i => { - // console.log(i, '鏍规嵁鐖秈d鏌ヨ瀛愬弬鏁�') - if (i && i.length !== 0) { - this.$set(data, "options2", i); - } - }); + 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) } } - } - if (type === "options2") { - if (data.polygon_id && data.sdk_id) { - let json = { - topic: data.polygon_id, - type: data.sdk_id - }; - let res = await findByEventTopic(json); - if (res && res.success) { - // console.log(res, "鏍规嵁涓�浜岀骇閫夐」鑾峰彇"); - this.$set(data, "options5", res.data); - } + }); + }, + selectArg(rule, resetNext = false) { + 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 (type === "options3") { - return false; - } - if (type === "options4") { - return false; - } - if (type === "options5") { - return false; + + if (resetNext) { + rule.operator_type = rule.operatorTypeOpionts[rule.operatorTypeOpionts.length - 1].value + this.selectOperator(rule, resetNext) } }, - // 鏍规嵁value杩斿洖瀵瑰簲鐨刬d - getIdByValue(arr, id) { - let s = arr.find(item => { - return item.value === id; - }); - // console.log(s, 'label') - return s.id; + 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(",") + } + + if (resetNext) { + rule.rule_value = ""; + rule.rule_values = []; + } + }, + selectValue(rule, val) { + rule.rule_value = val.join(",") }, // 鏍规嵁value杩斿洖瀵瑰簲鐨刵ame getNameByValue(arr, value) { let s = arr.find(item => { return item.value === value; }); + return s.name; - }, - // 鏍规嵁瀛楀吀鐨刬d鏌ヨ瀵瑰簲鐨勫瓧鍏� - async findByParentId(id) { - let res = await findDictionaryByID({ parentId: id }); - if (res && res.success) { - // console.log(res, "鏍规嵁瀛楀吀鐨刬d鏌ヨ瀵瑰簲鐨勫瓧鍏�"); - let list = JSON.parse(JSON.stringify(res.data)); - return list; - } }, // 娓呯┖閲嶆柊鏂板 reAdd() { @@ -733,46 +516,9 @@ }; this.dataList = []; }, - onIpBlur(ip, item) { - item.ip = ip - }, - onCancle(){ + onCancle() { this.$emit('onCancle') } - }, - mounted() { - this.findByType().then(() => { - if (Object.keys(this.eventObject).length !== 0) { - // console.log(this.eventObject, "褰撳墠閫変腑鐨勪簨浠秏ounted"); - this.eventData.enable = this.eventObject.enable; - this.eventData.id = this.eventObject.id; - this.eventData.name = this.eventObject.name; - this.eventData.time = [ - this.eventObject.time_start, - this.eventObject.time_end - ]; - this.eventData.serverIp = this.eventObject.ip_ports; - this.eventData.urls = this.eventObject.urls; - this.eventData.lineWay = this.eventObject.link_type; - this.eventData.eventTxt = this.eventObject.rule_text; - this.eventData.radioValue = this.eventObject.is_satisfy_all ? "1" : "2"; - - if (this.eventObject.rules) { - this.eventObject.rules.map((i, index) => { - this.dataList.push(JSON.parse(JSON.stringify(this.baseDateL))); - this.dataList[index].id = i.id; - this.dataList[index].event_push_id = i.event_push_id; - this.dataList[index].polygon_id = i.topic_type; - this.selectChange(i.topic_type, "options1", this.dataList[index]); - this.dataList[index].sdk_id = i.topic_arg; - this.selectChange(i.topic_arg, "options2", this.dataList[index]); - this.dataList[index].sdk_arg_alias = i.operator; - this.dataList[index].operator = i.operator_type; - this.dataList[index].operator_type = i.rule_value; - }); - } - } - }); } }; </script> -- Gitblit v1.8.0