完善事件推送应用

zhangzengfei

2020-09-28 c7095a2bce8dbba2ae1e67e27806b33442d2c27a

完善事件推送应用

 src/pages/datapush/index/App.vue

@@ -1,5 +1,5 @@
<template>
  <div class="flex-box bg-w ">
  <div class="flex-box bg-w">
    <div class="ev-left-list">
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
@@ -7,7 +7,6 @@
        <leftList
          ref="baseSync"
          listWidth="350px"
          title="同步库"
          type="1"
          :isSelected="isSelected"
          :activeId="selectedId"
@@ -98,7 +97,7 @@
</script>

<style lang="scss">
.flex-box{
.flex-box {
  height: 100%;
}
.ev-left-list {
@@ -118,7 +117,7 @@
  overflow-x: hidden;
}
.resize-bar {
  width: 310px;
  width: 370px;
  height: inherit;
  resize: horizontal;
  cursor: ew-resize;

 src/pages/datapush/index/RightEvent.vue

@@ -20,35 +20,15 @@
        </el-form-item>

        <span style="line-height: 38px;">推送服务器</span>
        <div class="icon-btn" v-if="ips.length < 1" @click="addUrl('ip')">
        <div class="icon-btn" v-if="urls.length < 1" @click="addUrl()">
          <i class="el-icon-circle-plus-outline"></i>
          <span>&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>
          <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>
            <span class="ml20">{{'URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>
            <el-input v-model="item.url" style="width:360px;margin-left:0px;" size="small"></el-input>
          </div>
          <div class="server-add">
            <i
@@ -56,7 +36,7 @@
              @click="delUrl(index)"
              style="color:red;margin-right:10px"
            />
            <i class="el-icon-circle-plus-outline" @click="addUrl(item.type)"></i>
            <i class="el-icon-circle-plus-outline" @click="addUrl()"></i>
          </div>
        </div>

@@ -91,81 +71,82 @@
        </div>
      </div>

      <div v-for="(temp,index) in dataList" :key="index" style="margin-top:10px">
      <div v-for="(rule,index) in dataList" :key="index" style="margin-top:10px">
        <el-row :gutter="20">
          <!-- 主题 -->
          <el-col :span="4">
            <el-select
              v-model="temp.polygon_id"
              v-model="rule.topic_type"
              placeholder="请选择"
              @change="selectChange($event,'options1',temp)"
              @change="selectTopic(rule, true)"
              size="small"
            >
              <el-option
                v-for="item in temp.options1"
                v-for="item in rule.topicTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <!-- 过滤值 -->
          <el-col :span="4">
            <el-select
              v-model="temp.sdk_id"
              v-model="rule.topic_arg"
              placeholder="请选择"
              @change="selectChange($event,'options2',temp)"
              @change="selectArg(rule, true)"
              size="small"
            >
              <el-option
                v-for="item in temp.options2"
                v-for="item in rule.topicArgOptions"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <!-- 操作符 -->
          <el-col :span="4">
            <el-select v-model="rule.operator" placeholder="请选择" size="small">
              <el-option label="==" value="="></el-option>
            </el-select>
          </el-col>

          <!-- 值类型 -->
          <el-col :span="4">
            <el-select
              v-model="temp.sdk_arg_alias"
              v-model="rule.operator_type"
              placeholder="请选择"
              @change="selectChange($event,'options3',temp)"
              @change="selectOperator(rule, true)"
              size="small"
            >
              <el-option
                v-for="item in temp.options3"
                v-for="item in rule.operatorTypeOpionts"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <!-- 过滤值 -->
          <el-col :span="4">
            <el-select
              v-model="temp.operator"
              placeholder="请选择"
              @change="selectChange($event,'options4',temp)"
              size="small"
            >
              <el-option
                v-for="item in temp.options4"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <div v-if="temp.operator === 'custom'">
              <el-input v-model="temp.operator_type" placeholder="请输入内容" size="small"></el-input>
            <div v-if="rule.operator_type === 'custom'">
              <el-input v-model="rule.rule_value" placeholder="请输入内容" size="small"></el-input>
            </div>
            <div v-if="temp.operator !== 'custom'">
            <div v-else>
              <el-select
                v-model="temp.operator_type"
                v-model="rule.rule_values"
                multiple
                collapse-tags
                placeholder="请选择"
                @change="selectChange($event,'options5',temp)"
                size="small"
                @change="selectValue( rule, $event)"
              >
                <el-option
                  v-for="item in temp.options5"
                  v-for="item in rule.ruleValueOptions"
                  :key="item.id"
                  :label="item.name"
                  :disabled="item.disabled"
@@ -196,7 +177,7 @@

      <div class="rule-title2">
        <b>规则</b>
        <div class="div-border">{{eventData.eventTxt}}</div>
        <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>
@@ -206,21 +187,13 @@
  </div>
</template>
<script>
import ipInput from "@/components/subComponents/IPInput";

import { eventPushsSave, findByEventTopic } from "@/api/event";
import { findDictionaryByType, findDictionaryByID } from "@/api/dictionary";
import { getTaskList } from "@/api/search";

export default {
  name: "rightEvent",
  components: { ipInput },
  filters: {
    ipSplit(url) {
      return url.split(":")[0]
    },
    portSplit(url) {
      return url.split(":")[1]
    }
  },
  props: {
    eventObject: {
      type: Object,
@@ -249,10 +222,8 @@
      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;
@@ -266,54 +237,16 @@
            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;
              });
              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);
              })
            }
          }
        }
@@ -323,170 +256,49 @@
  },
  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: ""
      },
      eventData: {},
      dataList: [],
      baseDateL: {
      dictionary: [],
      cameras: [],
      tasks: [],
      tables: [],
      baseRule: {
        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: "==",
        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: ""
      }
        rule_value: "",
        rule_values: [],
        topic_arg: "",
        topic_type: "",

        topicTypeOptions: {},
        topicArgOptions: {},
        operatorOptions: {},
        operatorTypeOpionts: {},
        ruleValueOptions: []
      },
    };
  },
  created() {
    this.reAdd();
  },
  mounted() {
    // 加载字典字典
    this.findByType();
    this.getCameras();
    this.getTasks();
  },
  methods: {
    addServer() {
      // console.log("addServer");
      let obj = {
        enable: true,
        server_ip: "",
        port: ""
      };
      this.eventData.serverIp.push(obj);
    },
    addUrl(type) {
      let obj = {
    addUrl() {
      this.eventData.urls.push({
        checked: true,
        hash: Math.random().toString(36).substr(2),
        url: "",
        ip: "",
        port: "",
        type: type,
        domain: ""
      };
      this.eventData.urls.push(obj);
      this.eventData.urls.sort(function (a, b) {
        var val1 = b.type;
        var val2 = a.type;
        if (val1 < val2) {
          return -1;
        } else if (val1 > val2) {
          return 1;
        } else {
          return 0;
        }
      })
      });
    },
    delUrl(index) {
      this.$set(this.eventData.urls, index, this.baseDateL)
      this.$set(this.eventData.urls, index, this.baseRule)
      this.eventData.urls.splice(index, 1)
    },
    // 保存
@@ -499,86 +311,64 @@
        });
        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 (this.eventData.urls[i].url.length < 1) {
          this.$notify({
            type: "warning",
            message: "接口URL地址不允许为空"
          });
          return;
        }
      }
      if (!isValid) {
        this.$notify({
          type: "warning",
          message: "请输入正确格式的服务器地址 和 端口"
        });
        return;
      }
      // 拼接字符串

      // 拼接字符串
      let ruleDesc = []
      this.dataList.map(i => {
      this.dataList.forEach(i => {
        let str = "";
        if (i.polygon_id) {
          str += this.getNameByValue(i.options1, i.polygon_id);
        if (i.topic_type) {
          str += this.getNameByValue(i.topicTypeOptions, i.topic_type);
        }
        if (i.sdk_id && i.sdk_id !== 'empty') {
          str += this.getNameByValue(i.options2, i.sdk_id);
        if (i.topic_arg) {
          str += this.getNameByValue(i.topicArgOptions, i.topic_arg);
        }
        if (i.sdk_arg_alias === '==') {
          str += '=';
        } else {
          // str += i.sdk_arg_alias;
          str += this.getNameByValue(i.options3, i.sdk_arg_alias);
        if (i.operator === '==') {
          str += ' = ';
        }
        if (i.operator_type) {
          if (i.operator === "custom") {
            str += i.operator_type;
          } else {
            str += this.getNameByValue(i.options5, i.operator_type);
          }
        }

        str += i.rule_value;

        if (str.length > 0) {
          ruleDesc.push(str)
        }
      });
      // 处理规则列表数据结构
      let list = this.dataList.map(i => {
        let obj = {};
        obj.operator = i.sdk_arg_alias;
        obj.rule_value = i.operator_type;
        obj.operator_type = i.operator;
        obj.topic_type = i.polygon_id;
        obj.topic_arg = i.sdk_id;
        return obj;
      let ruleList = this.dataList.map(i => {
        return {
          topic_type: i.topic_type,
          topic_arg: i.topic_arg,
          operator: i.operator,
          operator_type: i.operator_type,
          rule_value: i.rule_value
        }
      });
      // console.log(this.eventData)

      let json = {
        enable: this.eventData.enable,
        id: this.eventData.id,
        ip_ports: this.eventData.serverIp,
        name: this.eventData.name,
        rule_text: ruleDesc.join("，"),
        rules: list,
        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("，");
        this.eventData.eventTxt = ruleDesc.join("<br/>");
        this.$emit("updateList", res.data.id);
        this.$notify({
          type: "success",
@@ -590,118 +380,111 @@
    async findByType() {
      let res = await findDictionaryByType();
      if (res && res.success) {
        // console.log(res, "查询配置区域数据源");
        this.baseDateL.options1 = res.data.EVENTRULETOPIC;
        this.baseDateL.options3 = res.data.RULECOMPUTE;
        this.baseDateL.options4 = res.data.EVENTTYPECOMPUTE;
        this.dictionary = Object.assign(this.dictionary, res.data)
        this.baseRule.topicTypeOptions = this.dictionary.EVENTRULETOPIC
        this.baseRule.operatorTypeOpionts = this.dictionary.EVENTTYPECOMPUTE
        this.dictionary['alarmLevel'] = this.dictionary.ALARMLEVEL
      }
    },
    // 验证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);
    async getCameras() {
      let rsp = await findByEventTopic({ topic: 'camera', type: 'name' });
      if (rsp && rsp.success) {
        this.dictionary['camera'] = rsp.data
      }

      rsp = await findByEventTopic({ topic: 'dbtable' });
      if (rsp && rsp.success) {
        this.dictionary['dbtable'] = rsp.data.map(el => {
          return {
            name: el.name,
            value: el.name
          }
        })
      }
    },
    isValidPort(str) {
      return parseInt(str) > 0 && parseInt(str) < 65536
    async getTasks() {
      this.dictionary['task'] = []
      let rsp = await getTaskList();
      if (rsp && rsp.success) {
        let hash = {}
        rsp.data.forEach(task => {
          if (!task.isDelete && !hash[task.name]) {
            this.dictionary['task'].push({
              value: task.name,
              name: task.name
            })
            hash[task.name] = true
          }
        })
      }
    },
    // 新建配置
    createSet() {
      this.dataList.push(JSON.parse(JSON.stringify(this.baseDateL)));
      this.dataList.push(JSON.parse(JSON.stringify(this.baseRule)));
    },
    cleanSet() {
      this.dataList.splice(0, this.dataList.length);
    },
    // 添加子规则
    addRule() {
      this.dataList.push(JSON.parse(JSON.stringify(this.baseDateL)));
      this.dataList.push(JSON.parse(JSON.stringify(this.baseRule)));
    },
    // 删除子规则
    delRule(index) {
      this.dataList.splice(index, 1);
    },
    // 规则中下拉框的选择回调
    async selectChange(value, type, data) {
      if (type === "options1") {
        this.$set(data, "sdk_id", "");
        if (value === "dbtable" || value === "task" || value === "alarmLevel") {
          let list = [
            {
              name: "空",
              value: "empty",
              id: "000"
            }
          ];
          this.$set(data, "options2", list);
          this.$set(data, "sdk_id", "empty");
          let json = {
            topic: data.polygon_id,
            type: ""
          };
          let res = await findByEventTopic(json);
          if (res && res.success) {
            console.log(res, "根据一二级选项获取");
            this.$set(data, "options5", res.data);
          }
        } else {
          let id = this.getIdByValue(data.options1, value);
          if (id !== undefined) {
            this.findByParentId(id).then(i => {
              // console.log(i, '根据父id查询子参数')
              if (i && i.length !== 0) {
                this.$set(data, "options2", i);
              }
            });
    selectTopic(rule, resetNext = false) {
      rule.topicTypeOptions.forEach(element => {
        if (element.value === rule.topic_type) {
          rule.topicArgOptions = element.children;
          if (resetNext) {
            rule.topic_arg = rule.topicArgOptions[0].value
            this.selectArg(rule, resetNext)
          }
        }
      }
      if (type === "options2") {
        if (data.polygon_id && data.sdk_id) {
          let json = {
            topic: data.polygon_id,
            type: data.sdk_id
          };
          let res = await findByEventTopic(json);
          if (res && res.success) {
            // console.log(res, "根据一二级选项获取");
            this.$set(data, "options5", res.data);
          }
      });
    },
    selectArg(rule, resetNext = false) {
      let argInfo = rule.topicArgOptions.filter(arg => {
        return arg.value === rule.topic_arg
      })

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

      if (resetNext) {
        rule.operator_type = rule.operatorTypeOpionts[rule.operatorTypeOpionts.length - 1].value
        this.selectOperator(rule, resetNext)
      }
    },
    // 根据value返回对应的id
    getIdByValue(arr, id) {
      let s = arr.find(item => {
        return item.value === id;
      });
      // console.log(s, 'label')
      return s.id;
    selectOperator(rule, resetNext = false) {
      if (rule.operator_type === "option") {
        rule.ruleValueOptions = this.dictionary[rule.topic_type] ? this.dictionary[rule.topic_type] : []
        rule.rule_values = rule.rule_value.split(",")
      }

      if (resetNext) {
        rule.rule_value = "";
        rule.rule_values = [];
      }
    },
    selectValue(rule, val) {
      rule.rule_value = val.join(",")
    },
    // 根据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() {
@@ -733,46 +516,9 @@
      };
      this.dataList = [];
    },
    onIpBlur(ip, item) {
      item.ip = ip
    },
    onCancle(){
    onCancle() {
      this.$emit('onCancle')
    }
  },
  mounted() {
    this.findByType().then(() => {
      if (Object.keys(this.eventObject).length !== 0) {
        // console.log(this.eventObject, "当前选中的事件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>