问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 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"
@@ -41,9 +46,9 @@
        </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"
@@ -52,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>
@@ -177,18 +182,66 @@

      <div class="rule-title2">
        <b>规则</b>
        <div class="div-border" v-html="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" 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 } from "@/api/event";
import { eventPushsSave, findByEventTopic, getPushSet } from "@/api/event";
import { findDictionaryByType, findDictionaryByID } from "@/api/dictionary";
import { getTaskList } from "@/api/search";

@@ -204,59 +257,12 @@
  },
  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
      return this.taskEditData.urls
    }
  },
  data() {
    return {
      eventData: {},
      taskEditData: {},
      dataList: [],
      dictionary: [],
      cameras: [],
@@ -271,48 +277,221 @@
        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.eventData.urls.push({
      this.taskEditData.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)
      this.$set(this.taskEditData.urls, index, this.baseRule);
      this.taskEditData.urls.splice(index, 1);
    },
    // 保存
    async eventPushsSave() {
      // 判断保存的ip是否符合格式要求
      if (this.eventData.urls.length < 1) {
      if (this.taskEditData.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) {
      for (let i = 0; i < this.taskEditData.urls.length; i++) {
        if (this.taskEditData.urls[i].url.length < 1) {
          this.$notify({
            type: "warning",
            message: "接口URL地址不允许为空"
@@ -335,10 +514,16 @@
          str += ' = ';
        }

        str += i.rule_value;
        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)
          ruleDesc.push(str);
        }
      });
      // 处理规则列表数据结构
@@ -353,22 +538,23 @@
      });

      let json = {
        enable: this.eventData.enable,
        id: this.eventData.id,
        ip_ports: this.eventData.serverIp,
        name: this.eventData.name,
        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.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
        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("<br/>");
        this.taskEditData.eventTxt = ruleDesc.join("<br/>");
        this.$emit("updateList", res.data.id);
        this.$notify({
          type: "success",
@@ -383,13 +569,18 @@
        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
        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
        this.dictionary['camera'] = rsp.data;
      }

      rsp = await findByEventTopic({ topic: 'dbtable' });
@@ -413,7 +604,7 @@
              value: task.name,
              name: task.name
            })
            hash[task.name] = true
            hash[task.name] = true;
          }
        })
      }
@@ -439,35 +630,52 @@
        if (element.value === rule.topic_type) {
          rule.topicArgOptions = element.children;
          if (resetNext) {
            rule.topic_arg = rule.topicArgOptions[0].value
            this.selectArg(rule, 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
        return arg.value === rule.topic_arg;
      })

      if (argInfo.length > 0) {
        let desc = argInfo[0].description.split(",")
        let desc = argInfo[0].description.split(",");
        if (desc.length > 0) {
          rule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE.filter(el => {
            return desc.indexOf(el.value) >= 0
            return desc.indexOf(el.value) >= 0;
          })
        }
      }

      if (resetNext) {
        rule.operator_type = rule.operatorTypeOpionts[rule.operatorTypeOpionts.length - 1].value
        this.selectOperator(rule, 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(",")
        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) {
@@ -476,7 +684,44 @@
      }
    },
    selectValue(rule, val) {
      rule.rule_value = val.join(",")
      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返回对应的name
    getNameByValue(arr, value) {
@@ -488,7 +733,7 @@
    },
    // 清空重新新增
    reAdd() {
      this.eventData = {
      this.taskEditData = {
        id: "",
        name: "",
        time: [
@@ -512,7 +757,8 @@
          }
        ],
        radioValue: "1",
        eventTxt: ""
        eventTxt: "",
        push_set: this.pushFields
      };
      this.dataList = [];
    },
@@ -574,7 +820,12 @@
      margin-left: 895px;
    }
  }

  .config-item {
    margin: 20px 0;
    b {
      margin-right: 10px;
    }
  }
  .el-button--text {
    text-decoration: unset;
  }
@@ -604,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>