From d8944c4764c3fc4b7baf6b5c1586cf17c88b0bb1 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 23 三月 2022 22:38:20 +0800
Subject: [PATCH] 修改ztree复选框默认为父子联动
---
src/pages/datapush/index/RightEvent.vue | 1517 ++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 909 insertions(+), 608 deletions(-)
diff --git a/src/pages/datapush/index/RightEvent.vue b/src/pages/datapush/index/RightEvent.vue
index 8448884..4af9e34 100644
--- a/src/pages/datapush/index/RightEvent.vue
+++ b/src/pages/datapush/index/RightEvent.vue
@@ -1,608 +1,909 @@
-<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="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="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="(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="eventData.eventTxt"></div>
- </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>
- </div>
-</template>
-<script>
-
-import { eventPushsSave, findByEventTopic } 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.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) {
- if (this.eventData.id !== newVal.id) {
- this.dataList = [];
-
- 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";
-
- if (!this.eventData.urls) {
- this.$set(this.eventData, "urls", [])
- }
- 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
- }
- },
- data() {
- return {
- eventData: {},
- 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: []
- },
- };
- },
- created() {
- this.reAdd();
- },
- mounted() {
- // 鍔犺浇瀛楀吀瀛楀吀
- this.findByType();
- this.getCameras();
- this.getTasks();
- },
- methods: {
- addUrl() {
- this.eventData.urls.push({
- checked: true,
- hash: Math.random().toString(36).substr(2),
- url: "",
- });
- },
- delUrl(index) {
- this.$set(this.eventData.urls, index, this.baseRule)
- this.eventData.urls.splice(index, 1)
- },
- // 淇濆瓨
- async eventPushsSave() {
- // 鍒ゆ柇淇濆瓨鐨刬p鏄惁绗﹀悎鏍煎紡瑕佹眰
- if (this.eventData.urls.length < 1) {
- this.$notify({
- type: "warning",
- message: "璇烽厤缃嚦灏戜竴鍙版帹閫佹湇鍔″櫒"
- });
- return;
- }
- for (let i = 0; i < this.eventData.urls.length; i++) {
- if (this.eventData.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 += ' = ';
- }
-
- 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.eventData.enable,
- id: this.eventData.id,
- ip_ports: this.eventData.serverIp,
- name: this.eventData.name,
- 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("<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
- }
- },
- 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) {
- 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] : []
- 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;
- },
- // 娓呯┖閲嶆柊鏂板
- 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 = [];
- },
- 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;
- }
- }
-
- .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
+ 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)
+ }
+ }
+ })
+ },
+ 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