From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/datapush/index/RightEvent.vue | 1874 +++++++++++++++++++++++++++++++-------------------------- 1 files changed, 1,012 insertions(+), 862 deletions(-) diff --git a/src/pages/datapush/index/RightEvent.vue b/src/pages/datapush/index/RightEvent.vue index cc4c6f0..01ca008 100644 --- a/src/pages/datapush/index/RightEvent.vue +++ b/src/pages/datapush/index/RightEvent.vue @@ -1,862 +1,1012 @@ -<template> - <div class="s-event-push-right"> - <div class="s-right-config"> - <el-form> - <el-form-item label="鍚嶇О"> - <el-input v-model="eventData.name" placeholder="璇疯緭鍏ュ悕绉�" size="small" style="width:400px"></el-input> - </el-form-item> - - <el-form-item label="鏃堕棿"> - <el-date-picker - v-model="eventData.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="ips.length < 1" @click="addUrl('ip')"> - <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> - </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> - </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(item.type)"></i> - </div> - </div> - - <el-form-item label="鑱斿姩鏂瑰紡" style="margin-top: 20px;width:100"> - <el-select v-model="eventData.lineWay" placeholder="璇烽�夋嫨" size="small"> - <el-option - v-for="item in eventData.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="eventData.radioValue" label="1">婊¤冻鍏ㄩ儴</el-radio> - <el-radio v-model="eventData.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="(temp,index) in dataList" :key="index" style="margin-top:10px"> - <el-row :gutter="20"> - <el-col :span="4"> - <el-select - v-model="temp.polygon_id" - placeholder="璇烽�夋嫨" - @change="selectChange($event,'options1',temp)" - size="small" - > - <el-option - v-for="item in temp.options1" - :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" - placeholder="璇烽�夋嫨" - @change="selectChange($event,'options2',temp)" - size="small" - > - <el-option - v-for="item in temp.options2" - :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_arg_alias" - placeholder="璇烽�夋嫨" - @change="selectChange($event,'options3',temp)" - size="small" - > - <el-option - v-for="item in temp.options3" - :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> - <div v-if="temp.operator !== 'custom'"> - <el-select - v-model="temp.operator_type" - placeholder="璇烽�夋嫨" - @change="selectChange($event,'options5',temp)" - size="small" - > - <el-option - v-for="item in temp.options5" - :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">{{eventData.eventTxt}}</div> - </div> - <div class="save-btn"> - <el-button type="info" size="small" @click="onCancle">鍙栨秷</el-button> - <el-button type="primary" @click="eventPushsSave" size="small">淇濆瓨</el-button> - </div> - </div> - </div> -</template> -<script> -import ipInput from "@/components/subComponents/IPInput"; - -import { eventPushsSave, findByEventTopic } from "@/api/event"; -import { findDictionaryByType, findDictionaryByID } from "@/api/dictionary"; -export default { - name: "rightEvent", - components: { ipInput }, - filters: { - ipSplit(url) { - return url.split(":")[0] - }, - portSplit(url) { - return url.split(":")[1] - } - }, - props: { - eventObject: { - type: Object, - default: () => { - return {}; - } - } - }, - computed: { - urls() { - return this.eventData.urls - }, - ips() { - return this.eventData.urls.filter(item => { - return item.type === 'ip'; - }) - }, - domains() { - return this.eventData.urls.filter(item => { - return item.type === 'domain'; - }) - } - }, - watch: { - eventObject: { - 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; - this.eventData.time = [ - this.eventObject.time_start, - this.eventObject.time_end - ]; - this.eventData.serverIp = newVal.ip_ports; - this.eventData.urls = newVal.urls; - this.eventData.lineWay = newVal.link_type; - 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; - }); - } - } - } - }, - deep: true - } - }, - 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: "" - }, - dataList: [], - baseDateL: { - 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_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: "" - } - }; - }, - methods: { - addServer() { - // console.log("addServer"); - let obj = { - enable: true, - server_ip: "", - port: "" - }; - this.eventData.serverIp.push(obj); - }, - addUrl(type) { - let obj = { - 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.eventData.urls.splice(index, 1) - }, - // 淇濆瓨 - async eventPushsSave() { - // 鍒ゆ柇淇濆瓨鐨刬p鏄惁绗﹀悎鏍煎紡瑕佹眰 - if (this.eventData.urls.length < 1) { - this.$notify({ - type: "warning", - message: "璇烽厤缃嚦灏戜竴鍙版帹閫佹湇鍔″櫒" - }); - 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 (!isValid) { - this.$notify({ - type: "warning", - message: "璇疯緭鍏ユ纭牸寮忕殑鏈嶅姟鍣ㄥ湴鍧� 鍜� 绔彛" - }); - return; - } - // 鎷兼帴瀛楃涓� - - let ruleDesc = [] - this.dataList.map(i => { - let str = ""; - if (i.polygon_id) { - str += this.getNameByValue(i.options1, i.polygon_id); - } - if (i.sdk_id && i.sdk_id !== 'empty') { - str += this.getNameByValue(i.options2, i.sdk_id); - } - if (i.sdk_arg_alias === '==') { - str += '='; - } else { - // str += i.sdk_arg_alias; - str += this.getNameByValue(i.options3, i.sdk_arg_alias); - } - if (i.operator_type) { - if (i.operator === "custom") { - str += i.operator_type; - } else { - str += this.getNameByValue(i.options5, i.operator_type); - } - } - - 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; - }); - // 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, - 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.$emit("updateList", res.data.id); - this.$notify({ - type: "success", - message: "淇濆瓨鎴愬姛" - }); - } - }, - // 鏌ユ壘瀛楀吀 - 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; - } - }, - // 楠岃瘉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); - }, - isValidPort(str) { - return parseInt(str) > 0 && parseInt(str) < 65536 - }, - // 鏂板缓閰嶇疆 - createSet() { - this.dataList.push(JSON.parse(JSON.stringify(this.baseDateL))); - }, - cleanSet() { - this.dataList.splice(0, this.dataList.length); - }, - // 娣诲姞瀛愯鍒� - addRule() { - this.dataList.push(JSON.parse(JSON.stringify(this.baseDateL))); - }, - // 鍒犻櫎瀛愯鍒� - 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); - } - }); - } - } - } - 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); - } - } - } - if (type === "options3") { - return false; - } - if (type === "options4") { - return false; - } - if (type === "options5") { - return false; - } - }, - // 鏍规嵁value杩斿洖瀵瑰簲鐨刬d - getIdByValue(arr, id) { - let s = arr.find(item => { - return item.value === id; - }); - // console.log(s, 'label') - return s.id; - }, - // 鏍规嵁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() { - this.eventData = { - 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: "" - }; - this.dataList = []; - }, - onIpBlur(ip, item) { - item.ip = ip - }, - 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> -<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; - } - } - - .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; - } -} -</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" + placeholder="http://10.10.10.10:8000/dataApi" + ></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 label="璇烽�夋嫨" value=""></el-option> + <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() { + if (this.taskEditData.name.length < 1) { + this.$notify({ + type: "warning", + message: "璇峰~鍐欐帹閫佷换鍔″悕绉�", + }); + return; + } + // 鍒ゆ柇淇濆瓨鐨刬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; + } + } + if (this.dataList.length < 1) { + this.$notify({ + type: "warning", + message: "璇峰湪浠诲姟閰嶇疆涓淮鎶よ鍒欙紒", + }); + 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); + this.setOptionsDisable(rule); + } + } + }); + }, + 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 (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) { + console.log(rule); + let isAllSelect = + rule.rule_values.indexOf("鍏ㄩ儴") >= 0 || + rule.rule_values.indexOf("all*all") >= 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 = !isNullSelect; + return; + } + + opt.disabled = isAllSelect || isNullSelect; + }); + console.log(1212); + console.log(rule.ruleValueOptions); + }, + // 鏍规嵁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