修复国标配置的bug

zhangzengfei

2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09

 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>&nbsp;添加ip</span>
        </div>
        <div class="icon-btn" v-if="domains.length < 1" @click="addUrl('domain')">
          <i class="el-icon-circle-plus-outline"></i>
          <span>&nbsp;添加域名</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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' : '域名 '}}</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>&nbsp;新增</span>
        </div>
        <div class="icon-btn" v-if="dataList.length > 0" @click="cleanSet">
          <i class="el-icon-remove-outline"></i>
          <span>&nbsp;清空</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, "当前选中的事件watch");
          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);
              // 解析成ip或域名
              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() {
      // 判断保存的ip是否符合格式要求
      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的js方法
    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, '根据父id查询子参数')
              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返回对应的id
    getIdByValue(arr, id) {
      let s = arr.find(item => {
        return item.value === id;
      });
      // console.log(s, 'label')
      return s.id;
    },
    // 根据value返回对应的name
    getNameByValue(arr, value) {
      let s = arr.find(item => {
        return item.value === value;
      });
      return s.name;
    },
    // 根据字典的id查询对应的字典
    async findByParentId(id) {
      let res = await findDictionaryByID({ parentId: id });
      if (res && res.success) {
        // console.log(res, "根据字典的id查询对应的字典");
        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, "当前选中的事件mounted");
        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>&nbsp;添加接口地址</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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" }}</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>&nbsp;新增</span>

        </div>

        <div class="icon-btn" v-if="dataList.length > 0" @click="cleanSet">

          <i class="el-icon-remove-outline"></i>

          <span>&nbsp;清空</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: '摄像机ID', 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;

      }

      // 判断保存的ip是否符合格式要求

      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返回对应的name

    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>