From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/datapush/index/RightEvent.vue | 1038 ++++++++++++++++++++++++++++++--------------------------- 1 files changed, 551 insertions(+), 487 deletions(-) diff --git a/src/pages/datapush/index/RightEvent.vue b/src/pages/datapush/index/RightEvent.vue index cc4c6f0..f4dce22 100644 --- a/src/pages/datapush/index/RightEvent.vue +++ b/src/pages/datapush/index/RightEvent.vue @@ -3,12 +3,17 @@ <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-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="eventData.time" + v-model="taskEditData.time" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" @@ -20,35 +25,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,14 +41,14 @@ @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> <el-form-item label="鑱斿姩鏂瑰紡" style="margin-top: 20px;width:100"> - <el-select v-model="eventData.lineWay" placeholder="璇烽�夋嫨" size="small"> + <el-select v-model="taskEditData.lineWay" placeholder="璇烽�夋嫨" size="small"> <el-option - v-for="item in eventData.lineOptions" + v-for="item in taskEditData.lineOptions" :key="item.value" :label="item.label" :value="item.value" @@ -72,8 +57,8 @@ </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-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> @@ -91,81 +76,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,31 +182,71 @@ <div class="rule-title2"> <b>瑙勫垯</b> - <div class="div-border">{{eventData.eventTxt}}</div> + <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">鍙栨秷</el-button> + <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 ipInput from "@/components/subComponents/IPInput"; -import { eventPushsSave, findByEventTopic } from "@/api/event"; +import { eventPushsSave, findByEventTopic, getPushSet } 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, @@ -231,354 +257,304 @@ }, 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'; - }) + 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.eventData.enable = this.eventObject.enable; + this.taskEditData.enable = this.eventObject.enable; if (newVal !== oldVal) { - // console.log(newVal, "褰撳墠閫変腑鐨勪簨浠秝atch"); - if (this.eventData.id !== newVal.id) { + if (this.taskEditData.id !== newVal.id) { this.dataList = []; - // console.log(this.eventObject.enable) - this.eventData.id = newVal.id; - this.eventData.name = newVal.name; - this.eventData.time = [ + this.taskEditData.id = newVal.id; + this.taskEditData.name = newVal.name; + this.taskEditData.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"; + 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"; - // urls鍙嶈В鏋� - let ipSum = 0, domainSum = 0; - if (!this.eventData.urls) { - this.$set(this.eventData, "urls", []) + if (!this.taskEditData.urls) { + this.$set(this.taskEditData, "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.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) } - 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); + }) } } } }, 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 } }, - 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: "" - } - }; + created() { + this.reAdd(); + }, + mounted() { + // 鍔犺浇瀛楀吀 + this.findByType(); + this.getCameras(); + this.getTasks(); + this.getPushFields(); }, methods: { - addServer() { - // console.log("addServer"); - let obj = { - enable: true, - server_ip: "", - port: "" - }; - this.eventData.serverIp.push(obj); + openPushSetDialog() { + this.pushFieldDialog = true; + this.tempPushSet = JSON.parse(JSON.stringify(this.taskEditData.push_set)); + this.checkFlag() }, - addUrl(type) { - let obj = { + 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: "", - 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) + this.$set(this.taskEditData.urls, index, this.baseRule); + this.taskEditData.urls.splice(index, 1); }, // 淇濆瓨 async eventPushsSave() { // 鍒ゆ柇淇濆瓨鐨刬p鏄惁绗﹀悎鏍煎紡瑕佹眰 - if (this.eventData.urls.length < 1) { + if (this.taskEditData.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 - } + 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 (!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 += '='; + if (i.operator === '==') { + str += ' = '; + } + + if (i.rule_value === "all*all") { + str += "鍏ㄩ儴"; + } else if (i.rule_value === "null*null") { + 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); - } + str += i.rule_value; } if (str.length > 0) { - ruleDesc.push(str) + 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, - 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 + 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.eventData.eventTxt = ruleDesc.join("锛�"); + this.taskEditData.eventTxt = ruleDesc.join("<br/>"); this.$emit("updateList", res.data.id); this.$notify({ type: "success", @@ -590,122 +566,174 @@ 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.map(el => { + return { + name: el.name, + value: el.name + } + }) } }, - // 楠岃瘉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) { + 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 (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] : []; + + 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; - }, - // 鏍规嵁瀛楀吀鐨刬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 = { + this.taskEditData = { id: "", name: "", time: [ @@ -729,50 +757,14 @@ } ], radioValue: "1", - eventTxt: "" + eventTxt: "", + push_set: this.pushFields }; 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> @@ -795,7 +787,7 @@ height: 10px; background-color: #e9ebf2; width: 100%; - position: absolute; + //position: absolute; } .s-right-rule { @@ -828,7 +820,12 @@ margin-left: 895px; } } - + .config-item { + margin: 20px 0; + b { + margin-right: 10px; + } + } .el-button--text { text-decoration: unset; } @@ -858,5 +855,72 @@ 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