<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> 添加ip</span>
|
</div>
|
<div class="icon-btn" v-if="domains.length < 1" @click="addUrl('domain')">
|
<i class="el-icon-circle-plus-outline"></i>
|
<span> 添加域名</span>
|
</div>
|
<div v-for="(item,index) in urls" :key="item.hash" class="flex-box server-url">
|
<div>
|
<el-checkbox v-model="item.enable"></el-checkbox>
|
<span class="ml20">{{item.type =='ip' ? 'IP ' : '域名 '}}</span>
|
<!-- <el-input v-model="item.url" style="width:400px;margin-left:34px;" size="small"></el-input> -->
|
<ip-input
|
v-if="item.type == 'ip'"
|
:id="item.url"
|
:ip="item.ip"
|
:item="item"
|
:on-item-change="onIpBlur"
|
style="width: 255px"
|
></ip-input>
|
<el-input
|
v-else
|
v-model="item.domain"
|
style="width:256px;margin-left:0px;"
|
size="small"
|
></el-input>
|
<span class="ml10">端口</span>
|
<el-input v-model="item.port" style="width:100px;margin-left:5px;" size="small"></el-input>
|
</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> 新增</span>
|
</div>
|
<div class="icon-btn" v-if="dataList.length > 0" @click="cleanSet">
|
<i class="el-icon-remove-outline"></i>
|
<span> 清空</span>
|
</div>
|
</div>
|
|
<div v-for="(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" style="color:#222">取消</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>
|
