<template>
<!--规则列表 - 编辑界面-->
<div id="ruleModel">
<h2 class="text-center sectionH2">
<span class='pull-left' @click='gohistory'>
< 返回 </span> {{modelH}} </h2> <el-form status-icon :model="ruleForm" :rules="rules" ref="ruleForm"
label-width="120px" class="demo-ruleForm">
<el-row class="basicB">
<p class="formJcDoc">基本信息</p>
<el-col :span='15' class="m-t-20 p-l-22">
<el-form-item label="规则名称：" style='margin:5px 0 17px 0' prop='ruleName'>
<el-input v-model="ruleForm.ruleName" :disabled="disabledInput" placeholder="请输入规则名称"></el-input>
</el-form-item>
</el-col>
<el-col :span='15' class="p-l-22">
<el-form-item label="规则描述：">
<el-input type="textarea" v-model="ruleForm.ruleDescription" :disabled="disabledInput"
placeholder="请输入规则描述"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 检测源头 -->
<el-row class="basicB m-t-24">
<p class="formJcDoc">检测源</p>
<el-col :span='7' class="p-l-22 m-t-20">
<el-form-item label="消息队列：" prop='ruleDataSourceParams.queueName'>
<el-select :disabled="disabledInput" @change='sqlSourceShow'
v-model="ruleForm.ruleDataSourceParams.queueName" placeholder="请选择消息队列">
<el-option v-for='(item,index) in datasSources' :key='item.value+199' :label="item.value"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='7' class="m-t-20 p-l-22">
<el-form-item label="主题：" prop='ruleDataSourceParams.queueTopic'>
<el-select :disabled="disabledInput" v-model="ruleForm.ruleDataSourceParams.queueTopic"
placeholder="请选择主题">
<el-option v-for='(item,index) in addSourceValue1' :key='index+1999' :label="item.value"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='1' class="m-t-20 p-l-22 text-right">
<el-button type="text" @click='ruleTests("ruleForm")'>测试</el-button>
</el-col>
<el-col :span='15' class="p-l-22 m-b-10" v-show='ruleTest'>
<el-form-item label="输入值：">
<el-input type='textarea' v-model='ruleTestData.values' placeholder="请输入值，为JSON格式"></el-input>
</el-form-item>
</el-col>
<el-col :span='15' class="p-l-22 m-b-10" v-show='stackShow'>
<el-form-item label="输出值：">
<el-input type='textarea' v-model='stackValue' placeholder="堆栈信息" readonly></el-input>
</el-form-item>
</el-col>
<el-col :span='15' class="text-right m-b-10" v-show='ruleTest'>
<el-button type="primary" size='mini' @click="ruleTestModel('ruleTestData')">测 试</el-button>
<el-button size='mini' @click="ruleTest = false,stackShow = false">取 消</el-button>
</el-col>
<div v-for='(items,indexs) in ruleForm.ruleDataSourceParams.params' :key='indexs+1199' class="clear">
<el-col :span='6' class="p-r-10 p-l-22">
<el-form-item label="过滤条件：">
<el-input :disabled="disabledInput" v-model.trim="items.attributeName" placeholder="属性名称"></el-input>
</el-form-item>
</el-col>
<el-col :span='4' class="p-r-10 l-h-40">
<el-select :disabled="disabledInput" v-model="items.comparison" placeholder="类型">
<el-option v-for='(item,index) in symbolNum' :key='index+1099' :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
<el-col :span='4' class="l-h-40">
<el-input :disabled="disabledInput" v-model.trim="items.attributeValue" placeholder="属性值">
</el-input>
</el-col>
<el-col :span='1' class="text-right m-t-10" v-if='!disabledInput'>
<i @click='deleteIcons(indexs)' class="iconfont icon-qiyong deleteIcon"></i>
</el-col>
</div>
<!-- 过滤条件 -->
<el-col :span='24' class="aboutType conditiona" v-if='!disabledInput'>
<el-tooltip class="item" effect="dark" content="过滤条件，为不同站点进行过滤" placement="bottom-start">
<span @click='filterCondition'><i class="iconfont icon-jia"></i>添加过滤条件</span>
</el-tooltip>
</el-col>
</el-row>
<!-- 检测规划 -->
<el-row class="m-t-24 basicB">
<p class="formJcDoc">检测规则</p>
<el-col :span="14" class="p-l-22 m-t-20">
<el-form-item label='检测方式：' prop='ruleDataProcess.processType'>
<el-select :disabled="disabledInput" @change='processTypes'
v-model="ruleForm.ruleDataProcess.processType" placeholder="
阈值检测">
<el-option v-for='(item,index) in testJC' :key='index+991' :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='1' class="text-right m-t-30">
<div class="aboutType" v-show='ruleContent'>
<el-tooltip class="item" effect="dark"
content="阈值检测是需要指定异常值的范围，阈值检测将使用随机值替换异常值；自动检测只需要指定检测字段，由系统自动根据算法检测异常值，将使用预测值替换异常值"
placement="top-start">
<span><i class="iconfont icon-49"></i>
</span>
</el-tooltip>
</div>
</el-col>
<!-- 阈值检测 -->
<el-col :span='24' v-if='ruleContent' v-for='(items,indexs) in ruleForm.ruleDataProcess.alarmParams'
:key='indexs+987'>
<el-col :span='7' class="p-l-22">
<el-form-item label="检测字段：">
<el-input :disabled="disabledInput" v-model="items.field" placeholder="请输入检测字段"></el-input>
</el-form-item>
</el-col>
<el-col :span='7' class="yzFlex l-h-40">
<span class="fzs addendumNames " style='margin-top:0px'>取值范围：</span>
<el-input :disabled="disabledInput" type='number' v-model.number="items.minVal" placeholder="下限值">
</el-input>
<span style='padding:0 10px;' class="addendumNames"> ~ </span>
<el-input :disabled="disabledInput" type='number' v-model.number="items.maxVal" placeholder="上限值">
</el-input>
</el-col>
<el-col :span='1' class="addendumNames text-right m-t-10" v-if='!disabledInput'>
<i @click='deleteRule(indexs)' class="iconfont icon-qiyong deleteIcon"></i>
</el-col>
</el-col>
<!-- 自动检测 -->
<el-col :span='24' v-if='ruleContentAuto'>
<el-col :span='7' class="p-l-22">
<el-form-item label="标识属性：" prop='ruleDataProcess.markField'>
<el-input :disabled="disabledInput" v-model="ruleForm.ruleDataProcess.markField"
placeholder="请输入标识属性">
</el-input>
</el-form-item>
</el-col>
<el-col :span='8' class="p-l-22">
<el-form-item label="时间属性：" prop='ruleDataProcess.TT'>
<el-input :disabled="disabledInput" v-model="ruleForm.ruleDataProcess.TT" placeholder="请输入时间属性">
</el-input>
</el-form-item>
</el-col>
</el-col>
<el-col :span='24' v-show='ruleContentAuto' v-for='(items,indexs) in autoMapList' :key='indexs+99'>
<el-col :span='7' style='padding-left:22px;'>
<el-form-item label="检测字段：">
<el-input :disabled="disabledInput" v-model="items.factor" placeholder="请输入检测字段"></el-input>
</el-form-item>
</el-col>
<el-col :span='7' class="p-l-22">
<el-form-item label="关联字段：">
<el-input :disabled="disabledInput" v-model="items.multiples" placeholder="请输入关联字段"></el-input>
</el-form-item>
</el-col>
<el-col :span='1' class="addendumNames text-right m-t-10" v-if='!disabledInput'>
<i @click='deleteAutoIcons("autoMapList",indexs)' class="iconfont icon-qiyong deleteIcon"></i>
</el-col>
</el-col>
<el-col :span='24' v-show='ruleContentAuto' class="aboutType conditiona">
<p class="text-left" style='color:#c3c3c3;'>示例：多个关联属性之间使用逗号分隔(sdl,z...)</p>
</el-col>
<!-- 条件检测 -->
<el-col :span='24' class="p-l-22" v-show='condition'>
<el-col :span='14'>
<el-form-item label="异常条件：">
<el-input :disabled="disabledInput" v-model="ruleForm.ruleDataProcess.abnormalCondition"
placeholder="请输入异常条件"></el-input>
</el-form-item>
</el-col>
<el-col :span='1' class="text-right">
<div class="aboutType m-t-10">
<el-tooltip class="item" effect="dark" content="异常条件指定了异常数据的判定条件" placement="top-start">
<span><i class="iconfont icon-49"></i>
</span>
</el-tooltip>
</div>
</el-col>
</el-col>
<el-col :span='24' class="p-l-22" v-show='condition'
v-for='(items,indexs) in ruleForm.ruleDataProcess.conditionList' :key='indexs+399'>
<el-col :span='7'>
<el-form-item label="更新字段：">
<el-input :disabled="disabledInput" v-model="items.updateField" placeholder="请输入更新字段"></el-input>
</el-form-item>
</el-col>
<el-col :span='7' class="p-l-22">
<el-form-item label="更新值：" class="multiSelected">
<el-input :disabled="disabledInput" v-model="items.updateValue" placeholder="请输入更新值"></el-input>
</el-form-item>
</el-col>
<el-col :span='1' class="addendumNames text-right m-t-10">
<i @click='deleteAutoIcon("conditionList",indexs)' class="iconfont icon-qiyong deleteIcon"></i>
</el-col>
</el-col>
<el-col :span='24' class="aboutType conditiona" v-show='ruleContentAuto'>
<span v-if='!disabledInput' @click='filterAutoCondition'><i class="iconfont icon-jia"></i>添加自动检测字段</span>
</el-col>
<el-col :span='24' class="aboutType conditiona" v-if='ruleContent'>
<span v-if='!disabledInput' @click='filterRule'><i class="iconfont icon-jia"></i>添加检测规则</span>
</el-col>
<el-col :span='24' class="aboutType conditiona" v-if='condition'>
<span v-if='!disabledInput' @click='conditionAdd'><i class="iconfont icon-jia"></i>添加检测规则</span>
</el-col>
<el-col :span='15' class="p-l-22">
<el-form-item label="处理动作：" prop='ruleDataProcess.processAction'>
<el-select :disabled="disabledInput" v-model="ruleForm.ruleDataProcess.processAction"
placeholder="处理动作">
<el-option v-for='(item,index) in outliner' :key='index+599' :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row class="basicB m-t-24">
<p class="formJcDoc">告警通知</p>
<el-col :span='15' class="p-l-22 m-t-20">
<el-form-item label="报警方式：" prop='ruleDataProcess.alarmType'>
<el-radio-group :disabled="disabledInput" v-model="ruleForm.ruleDataProcess.alarmType"
@change="radioChange">
<el-radio :label="item.value" v-for='item in emailCall' :key='item.value'>{{item.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span='15' v-if='radioNotice' class="p-l-22">
<el-form-item label="通知对象：" prop='ruleDataProcess.notice'>
<el-select :disabled="disabledInput" v-model="ruleForm.ruleDataProcess.notice" placeholder="选择通知对象">
<el-option v-for='(item,index) in noticeUsername' :key='index+499' :label="item.username"
:value="item.username">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col v-if='radioNotice' :span='15' class="p-l-22">
<el-form-item label="报警内容：" prop='ruleDataProcess.alarmContent'>
<el-input :disabled="disabledInput" type="textarea" v-model="ruleForm.ruleDataProcess.alarmContent"
placeholder="请输入报警内容"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 数据目标 -->
<el-row class="basicB m-t-24">
<p class="formJcDoc">数据目标</p>
<el-form-item class="w60 p-l-22 m-t-20" label="数据目的地：">
<el-button class="m-b-20" v-if='!disabledInput' size="small" @click.native='dataDestination'>添加数据目的地
</el-button>
<el-table :data="ruleForm.ruleForwardList" border style="width: 100%">
<el-table-column label="类型">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ ruleTypeName(scope.row.dataType) }}</span>
</template>
</el-table-column>
<el-table-column label="连接">
<template slot-scope="scope">
<span style="margin-left: 10px">{{scope.row.dataSource}}</span>
</template>
</el-table-column>
<el-table-column label="值">
<template slot-scope="scope">
{{ scope.row.dataValue }}
</template>
</el-table-column>
<el-table-column label="操作" v-if='!disabledInput'>
<template slot-scope="scope">
<el-button style='color:#66b1ff;' title='修改' type="primary" size="mini" plain
@click.stop="handleEdits(scope.$index, scope.row)">修改</el-button>
<el-button style='color:#66b1ff;' title='删除' type="primary" size="mini" plain
@click.stop="handleDeletes(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<div class="text-left m-b-20 p-l-22 m-t-20">
<el-button type="primary" v-if='!disabledInput' v-show='editAdd' @click="submitForm('ruleForm',1)">添 加
</el-button>
<el-button type="primary" v-if='!disabledInput' v-show='!editAdd' @click="submitForm('ruleForm',2)">修 改
</el-button>
<el-button @click="gohistory">取 消</el-button>
</div>
</el-row>
</el-form>
<!-- 数据添加 -->
<el-dialog title="添加数据目的地参数" :visible.sync="dataEdit1" :close-on-click-modal='closeOnClick'
:lock-scroll='closeOnClick' width="50%" :modal='closeOnClick'>
<el-form status-icon :model="ruleForms" :rules="rules" ref="ruleForms" label-width="70px"
class="demo-ruleForm">
<el-col :span='12'>
<el-form-item label="类型：" prop='attributeName'>
<el-select @change='sqlTypeName' v-model="ruleForms.attributeName" placeholder="请选择类型">
<el-option v-for='(item,index) in datasDate' :key='index' :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='12'>
<el-form-item label="连接：" prop='attributeSource'>
<el-select @change='sqlSource' v-model="ruleForms.attributeSource" placeholder="请选择连接">
<el-option v-for='(item,index) in addSourceMap' :key='index' :label="item.value"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span='24'>
<el-form-item label="值：">
<el-select v-model="ruleForms.attributeValue" placeholder="请选择值">
<el-option v-for='(item,index) in addSourceValue' :key='index' :label="item.value"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" v-if='!editPrimary' @click="dataTables('ruleForms',1)">添 加</el-button>
<el-button type="primary" v-if='editPrimary' @click="dataTables('ruleForms',2)">修 改</el-button>
<el-button @click="dataEdit1 = false">取 消</el-button>
</span>
</el-dialog>
<!-- 消息测试窗口 -->
<el-dialog title="消息测试异常" :visible.sync="testModel" :close-on-click-modal='closeOnClick'
:lock-scroll='closeOnClick' width="50%" :modal='closeOnClick'>
<p>{{testModeltext}}</p>
<span slot="footer" class="dialog-footer">
<!-- 异常堆栈信息展示 -->
<div class="text-left m-t-10" v-show='errorTest' style='word-break: break-word;'>
{{errorText}}
</div>
<el-button type="primary" @click="testModel = false,errorTest = false" class=" m-t-10">确 定</el-button>
<el-button @click="errorTest = !errorTest">查看详情</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import project from '../../mixins/project'
import {
deepClone
} from '../../util'
import methodIntegration from '../../mixins/methods'
var moment = require('moment');
import {
notify,
getSession,
isJSON
} from '../../util/item'
/*负责导出组件*/
export default {
name: 'ruleModel',
data() {
return {
modelHead: ['添加规则信息', '修改规则信息', '规则信息'],
modelH: '',
editIndex: '',
testModeltext: '',
stackValue: '', //堆栈值
errorText: '', //异常文本
datasSources: [],
addSourceMap: [],
addSourceValue: [],
addSourceValue1: [],
editPrimaryBtn: false,
errorTest: false,
ruleContent: true,
stackShow: false, // 堆栈展示
ruleContentAuto: false,
testModel: false, // 堆栈异常展示
condition: false,
radioNotice: false,
disabledInput: false,
editPrimary: false,
dataEdit: false,
dataEdit1: false,
ruleTest: false,
center: true,
editAdd: true,
closeOnClick: false,
datasDate: [{
label: '数据库',
value: 1
}, {
label: '消息队列',
value: 2
}],
outliner: [{
label: '无',
value: 0
}, {
label: '替换异常值',
value: 1
}],
emailCall: [{
label: '无',
value: 0
}, {
label: '邮件',
value: 1
}, {
label: '邮件和短信',
value: 2
}],
testJC: [{
value: 1,
label: '阈值检测'
}, {
value: 2,
label: '自动检测'
}, {
value: 3,
label: '条件检测'
}, {
value: 4,
label: '无'
}],
autoMapList: [{
factor: '', //检测字段
multiples: '', //检测字段
}],
symbolNum: [{
label: '=',
value: '='
}],
ruleForm: {
ruleName: '',
ruleDescription: '',
status: 0,
creator: localStorage.getItem('USERNO'),
ruleDataSourceParams: {
queueName: '',
queueTopic: '',
params: [{
attributeName: '',
comparison: '',
attributeValue: '',
}]
},
ruleDataProcess: {
processType: 1, //检测方式
notice: '',
processAction: 1, //处理动作
alarmType: 0,
TT: '',
markField: '', //结构仅供参考，最终会放入alarmParams内部
alarmContent: '',
alarmParams: [{
minVal: '',
maxVal: '',
field: '',
}],
abnormalCondition: '', //异常条件
conditionList: [{
updateField: '', //更新字段
updateValue: '' //更新值
}],
},
ruleForwardList: []
},
ruleForms: {
attributeName: '',
attributeValue: '',
attributeSource: '',
},
ruleTestData: {
values: ''
},
siteDataTcs: [{
value: 'siteName',
label: '站点名称'
}],
rules: {
ruleName: [{
required: true,
message: '请输入规则名称',
trigger: 'blur'
}],
ruleDescription: [{
required: true,
message: '请输入规则描述',
trigger: 'blur'
}],
attributeValue: [{
required: true,
message: '请输入数据目的地值',
trigger: 'blur'
}],
attributeName: [{
required: true,
message: '请选择处理类型',
trigger: 'change'
}],
attributeSource: [{
required: true,
message: '请选择连接',
trigger: 'change'
}],
ruleDataSourceParams: {
queueName: [{
required: true,
message: '请选择消息队列',
trigger: 'change'
}],
queueTopic: [{
required: true,
message: '请选择主题',
trigger: 'change'
}],
params: {
attributeName: [{
required: true,
message: '请输入属性名称',
trigger: 'blue'
}],
comparison: [{
required: true,
message: '请选择类型',
trigger: 'change'
}],
attributeValue: [{
required: true,
message: '请输入属性值',
trigger: 'blue'
}],
}
},
ruleDataProcess: {
markField: [{
required: true,
message: '请输入标识属性',
trigger: 'blur'
}],
TT: [{
required: true,
message: '请输入时间属性',
trigger: 'blur'
}],
processType: [{
required: true,
message: '请选择处理类型',
trigger: 'change'
}],
alarmParams: {
field: [{
required: true,
message: '请选择检测字段',
trigger: 'change'
}],
minVal: [{
required: true,
message: '请输入下限值',
trigger: 'blur'
}],
maxVal: [{
required: true,
message: '请输入上限值',
trigger: 'blur'
}],
},
processAction: [{
required: true,
message: '请选择处理动作',
trigger: 'change'
}],
notice: [{
required: true,
message: '请选择通知对象',
trigger: 'change'
}],
alarmType: [{
required: true,
message: '请选择报警方式',
trigger: 'change'
}],
alarmContent: [{
required: true,
message: '请输入报警内容',
trigger: 'blur'
}],
},
},
}
},
mixins: [project, methodIntegration],
mounted() {
// 获取用户名称
this.getListsUsname();
this.dataSourceChanges(2);
//数据进行判断
this.startInit(this.$route.query.headTitle)
},
methods: {
async sqlTypeName(val) {
// 数据名称切换
this.ruleForms.attributeSource = ''
this.ruleForms.attributeValue = ''
this.ruleForms.addSourceValue = [];
this.dataSourceChanges(val, 1)
},
async sqlSourceShow(val) {
// 连接改变，获取值
let nowApi = '';
// 消息队列
nowApi = this.nozzle.getQueues
let datas = await this.getHttpDatas(nowApi, {
dataSourceName: val,
pageSize: 999999,
pageNo: 1
});
let nowSource = '';
if (this.ruleForms.attributeName === 1) {
nowSource = datas.list
} else {
nowSource = datas;
}
let dataBase = [];
for (let item of nowSource.values()) {
dataBase.push({
value: item
})
}
this.addSourceValue1 = dataBase;
},
async sqlSource(val) {
// 连接改变，获取值
this.ruleForms.attributeValue = ''
let nowApi = '';
if (this.ruleForms.attributeName === 1) {
// 数据库
nowApi = this.nozzle.getAllTableNameByDateSourceName;
} else {
// 消息队列
nowApi = this.nozzle.getQueues
}
let datas = await this.getHttpDatas(nowApi, {
dataSourceName: val,
pageSize: 999999,
pageNo: 1
});
let nowSource = '';
if (this.ruleForms.attributeName === 1) {
nowSource = datas.list
} else {
nowSource = datas;
}
let dataBase = [];
for (let item of nowSource.values()) {
dataBase.push({
value: item
})
}
this.addSourceValue = dataBase;
},
async dataSourceChanges(dif, dis) {
/**
* 连接列表渲染
* @param {Number} dif 区分字段
* @param {Number} dis 区分连接；无则是消息队列，有则是数据库
*/
let dbTypeName = '';
if (dif === 1) {
// 数据库
dbTypeName = 'Relational'
} else {
// 消息队列
dbTypeName = 'rabbitMq'
}
let datas = await this.getHttpDatas(this.nozzle.queryDataSrouceName, {
dbType: dbTypeName
});
let dataBase = [];
for (let item of datas.values()) {
dataBase.push({
value: item
})
}
if (dif === 2 && !dis) {
// 消息序列
this.datasSources = dataBase;
return
}
this.addSourceMap = dataBase
},
radioChange(val) {
// 是否发送邮件处理
if (val === 0) {
this.radioNotice = false;
} else {
this.radioNotice = true;
}
},
startInit(headTitle = 0) {
// 初始化进入页面，进行刷新
console.log(headTitle)
if (headTitle == 1) {
// 修改
this.handleEdit(this.$route.query.ruleId)
} else if (headTitle == 0) {
// 新增
console.log(111)
this.handleAdd();
} else {
// 查看
this.handleEdit(this.$route.query.ruleId)
this.disabledInput = true;
}
this.modelH = this.modelHead[headTitle];
},
gohistory() {
// 返回上一页
this.$router.push({
path: '/quality/ruleEngine/ruleList'
})
},
reportsNum(val) {
// 设备上报失败次数
console.log(val);
},
ruleTypeName(index) {
if (index === 1) {
return '数据库'
} else {
return '消息队列'
}
},
processTypes(val) {
/**
* 处理类型
*/
if (val === 1) {
// 阈值检测
this.ruleContent = true
this.ruleContentAuto = false
this.condition = false
} else if (val === 2) {
// 自动检测
this.ruleContent = false
this.condition = false
this.ruleContentAuto = true
} else if (val === 3) {
// 条件检测
this.ruleContent = false
this.ruleContentAuto = false
this.condition = true
} else {
// 无
this.ruleContent = false
this.condition = false
this.ruleContentAuto = false
}
},
filterRule() {
/**
* 添加规则条件
*/
this.ruleForm.ruleDataProcess.alarmParams.push({
minVal: '',
maxVal: '',
field: '',
});
},
conditionAdd() {
/**
* 添加条件检测
*/
this.ruleForm.ruleDataProcess.conditionList.push({
updateField: '',
updateValue: ''
});
},
filterAutoCondition() {
/**
* 添加检测字段，修改时刻，渲染并进行赋值
*/
this.autoMapList.push({
factor: '',
multiples: '', //检测字段
});
},
deleteAutoIcons(fieldName, index) {
// 删除字段
this[fieldName].splice(index, 1);
},
deleteAutoIcon(fieldName, index) {
// 删除表单字段
this.ruleForm.ruleDataProcess[fieldName].splice(index, 1);
},
deleteRule(index) {
// 删除规则条件
this.ruleForm.ruleDataProcess.alarmParams.splice(index, 1);
},
filterCondition() {
/**
* 添加过滤条件
*/
this.ruleForm.ruleDataSourceParams.params.push({
attributeName: '',
comparison: '',
attributeValue: '',
});
},
deleteIcons(index) {
// 删除过滤条件
this.ruleForm.ruleDataSourceParams.params.splice(index, 1);
},
dataDestination() {
/**
* 添加数据目的地
*/
this.dataEdit1 = true;
this.editPrimary = false;
this.ruleForms.attributeName = '';
this.ruleForms.attributeValue = '';
this.ruleForms.attributeSource = ''
this.addSourceMap = [];
this.addSourceValue = [];
},
handleEdits(index, row) {
// 连接数据修改，填充下拉框参数
// 填充连接下拉框参数
this.dataSourceChanges(row['dataType'], 1)
this.sqlSource(row['dataSource'])
this.dataEdit1 = true;
this.editPrimary = true;
this.editIndex = index;
this.ruleForms.attributeName = row['dataType'];
this.ruleForms.attributeValue = row['dataValue'];
this.ruleForms.attributeSource = row['dataSource'];
},
handleDeletes(index, row) {
// 表格数据删除
this.ruleForm.ruleForwardList.splice(index, 1);
},
sortDataCopy(row) {
/**
* 数据渲染
*/
for (let [key, value] of Object.entries(this.ruleForm)) {
this.ruleForm[key] = row[key];
}
},
typeQf(datas) {
// 数据处理类型区分
if (datas['ruleDataProcess']['processType'] === 2) {
// 自动检测
datas['ruleDataProcess']['alarmParams'] = [];
} else if (datas['ruleDataProcess']['processType'] === 0) {
// 无
datas['ruleDataProcess']['alarmParams'] = [];
}
return datas
},
autoAreaVal(type = null) {
/**
* 自动检测和阈值检测参数处理
* @param {Number} type 检测方式类型：0、1、2
*/
let dif = type ? type : this.ruleForm.ruleDataProcess.processType;
if (dif === 2) {
// 自动检测
let newAuto = [...this.autoMapList];
// 处理关联字段
for (let [index, items] of newAuto.entries()) {
newAuto[index]['markField'] = this.ruleForm.ruleDataProcess.markField;
newAuto[index]['TT'] = this.ruleForm.ruleDataProcess.TT;
if (typeof items['multiples'] !== 'object') {
newAuto[index]['multiples'] = items['multiples'].split(',');
}
}
this.ruleForm.ruleDataProcess.alarmParams = newAuto;
} else if (dif === 3) {
// 条件检测
let newAuto = this.ruleForm.ruleDataProcess.conditionList;
// 处理关联字段
for (let [index, items] of newAuto.entries()) {
newAuto[index]['abnormalCondition'] = this.ruleForm.ruleDataProcess.abnormalCondition;
}
this.ruleForm.ruleDataProcess.alarmParams = newAuto;
}
return this.ruleForm
},
async addParameter(api, dif = 1) {
// 新增数据传值
let datas = Object.assign({}, this.autoAreaVal());
// 新增数据传值
datas['ruleDataSourceParams'] = JSON.stringify(datas['ruleDataSourceParams']);
datas['ruleDataProcess']['alarmParams'] = JSON.stringify(datas['ruleDataProcess']['alarmParams']);
delete datas['ruleDataProcess']['TT'];
delete datas['ruleDataProcess']['markField'];
delete datas['ruleDataProcess']['abnormalCondition'];
delete datas['ruleDataProcess']['conditionList'];
if (dif === 1) {
const response = await this.$http.post(api, datas)
notify(response);
datas['ruleDataSourceParams'] = JSON.parse(datas['ruleDataSourceParams']);
datas['ruleDataProcess']['alarmParams'] = JSON.parse(datas['ruleDataProcess']['alarmParams']);
} else {
// 修改数据
datas['ruleId'] = datas['ruleDataProcess']['ruleId'];
datas['updator'] = datas['creator'];
datas['ruleDataProcess']['alarmParam'] = JSON.parse(datas['ruleDataProcess']['alarmParams']);
const response = await this.$http.put(api, datas);
notify(response);
datas['ruleDataSourceParams'] = JSON.parse(datas['ruleDataSourceParams']);
datas['ruleDataProcess']['alarmParams'] = JSON.parse(datas['ruleDataProcess']['alarmParams']);
}
this.$emit('getLists')
this.$router.push({
path: '/quality/ruleEngine/ruleList'
})
},
dataTables(formName, dif) {
// 表格数据添加
this.$refs[formName].validate((valid) => {
if (valid) {
if (dif === 1) {
// 新增
this.ruleForm.ruleForwardList.push({
type: this.datasDate[+this.ruleForms.attributeName - 1]['label'],
dataValue: this.ruleForms.attributeValue,
dataSource: this.ruleForms.attributeSource,
dataType: this.ruleForms.attributeName
})
} else {
// 修改框
this.ruleForm.ruleForwardList[this.editIndex]['type'] = this.datasDate[+this.ruleForms.attributeName -
1]['label'];
this.ruleForm.ruleForwardList[this.editIndex]['dataValue'] = this.ruleForms.attributeValue;
this.ruleForm.ruleForwardList[this.editIndex]['dataSource'] = this.ruleForms.attributeSource;
this.ruleForm.ruleForwardList[this.editIndex]['dataType'] = this.ruleForms.attributeName;
}
this.dataEdit1 = false;
return
} else {
console.log('error submit!!');
return false;
}
});
},
submitForm(formName, dif) {
// 添加数据,修改数据
let api = '';
this.correct(formName).then(() => {
if (dif === 1) {
api = this.nozzle.insertRule;
this.addParameter(api)
} else {
api = this.nozzle.updateRule;
this.addParameter(api, 2)
}
this.dataEdit = false;
})
},
statusCalculation(response) {
// 状态值计算
let newRes = response.data.data.list;
if (newRes.length !== 0) {
for (let item of newRes.values()) {
if (item['status'] === 1) {
item['statusruleAddendumEsp'] = false;
item['statusruleAddendum'] = true;
item['addendumTitle'] = '禁用';
} else {
item['statusruleAddendumEsp'] = true;
item['statusruleAddendum'] = false;
item['addendumTitle'] = '启用';
}
}
}
return response
},
handleAdd() {
// 新增按钮
console.log(111)
this.editAdd = true;
this.editPrimary = false;
this.editPrimaryBtn = false;
this.ruleForm.ruleForwardList = [];
this.dataEdit = true;
this.disabledInput = false;
console.log( this.disabledInput)
this.processTypes(1);
},
async traversalEdit(ruleId) {
// 通过修改数据进行遍历,填充修改数据窗口
this.ruleForm.ruleDataProcess.markField = ''
this.ruleForm.ruleDataProcess.TT = ''
let {
entries
} = Object;
let response = await this.$http.get(this.nozzle.selectAllRule, {
params: {
ruleName: '',
ruleId: ruleId,
pageNo: 1,
pageSize: 10000,
}
})
if (response.data.code === 200) {
let data = response.data.data.list[0];
for (let [keys, values] of entries(this.ruleForm)) {
if (keys === 'ruleDataSourceParams') {
this.ruleForm['ruleDataSourceParams'] = data['ruleDataSourceParam']
} else if (keys === 'ruleDataProcess') {
for (let [keys, items] of Object.entries(data['ruleDataProcess'])) {
this.ruleForm['ruleDataProcess'][keys] = items
}
// 区分阈值和自动检测处理
let type = data['ruleDataProcess']['processType'];
if (type === 2) {
// 自动检测
let newAuto = data['ruleDataProcess']['alarmParam']
// 对标识属性和时间属性进行赋值
this.ruleForm.ruleDataProcess.markField = data['ruleDataProcess']['alarmParam'][0]['markField']
this.ruleForm.ruleDataProcess.TT = data['ruleDataProcess']['alarmParam'][0]['TT']
for (let [index, items] of newAuto.entries()) {
newAuto[index]['multiples'] = items['multiples'].join(',')
}
this.autoMapList = newAuto;
this.ruleForm.ruleDataProcess.alarmParams = [{
minVal: '',
maxVal: '',
field: '',
}]
} else if (type === 1) {
// 阈值检测
this.ruleForm.ruleDataProcess.alarmParams = data['ruleDataProcess']['alarmParam']
} else if (type === 3) {
// 条件检测
this.ruleForm.ruleDataProcess.conditionList = data['ruleDataProcess']['alarmParam']
this.ruleForm.ruleDataProcess.abnormalCondition = data['ruleDataProcess']['alarmParam'][0][
'abnormalCondition'
]
} else {
// 无
this.ruleForm.ruleDataProcess.alarmParams = [{
minVal: '',
maxVal: '',
field: '',
}]
}
} else {
this.ruleForm[keys] = data[keys];
}
}
this.processTypes(data['ruleDataProcess']['processType'])
this.radioChange(data['ruleDataProcess']['alarmType'])
this.sqlSourceShow(data.ruleDataSourceParam.queueName)
this.ruleForm['ruleForwardList'] = data['ruleForwardList']
}
},
handleEdit(ruleId) {
// 行内点击修改
this.editAdd = false;
this.disabledInput = false;
this.dataEdit = true;
this.editPrimary = true;
this.editPrimaryBtn = true;
this.traversalEdit(ruleId);
},
ruleTests(formName) {
// 数据参数测试
this.correct(formName).then(() => {
this.ruleTestData.values = ""
this.ruleTest = true;
})
},
ruleTestModel(formName) {
// 数据测试窗口
// 判断测试值是否为json格式
if (!isJSON(this[formName]['values'])) {
this.$notifyOrType.warning('输入值应为JSON格式，请重新输入')
return
}
let datas = deepClone(this.autoAreaVal());
// 将传值字段数据进行处理
datas['ruleDataSourceParams'] = JSON.stringify(datas['ruleDataSourceParams']);
datas['ruleDataProcess'][
'alarmParams'
] = JSON.stringify(datas['ruleDataProcess']['alarmParams']);
// 添加测试字段
datas['message'] = this[formName]['values'];
delete datas['ruleDataProcess'][
'TT'
];
delete datas['ruleDataProcess']['markField'];
delete datas['ruleDataProcess'][
'abnormalCondition'
];
delete datas['ruleDataProcess']['conditionList'];
// 继承参数
this.$http.post(this.nozzle.testRuleEngine, datas).then(response => {
datas['ruleDataSourceParams'] = JSON.parse(datas['ruleDataSourceParams']);
datas['ruleDataProcess']['alarmParams'] = JSON.parse(datas['ruleDataProcess']['alarmParams']);
let code = response.data.code;
if (code === 200) {
// 成功堆栈信息
this.stackValue = response.data.message + '\r' + JSON.stringify(response.data.data);
this.stackShow = true;
} else {
// 错误堆栈信息
this.stackShow = false;
this.testModel = true;
this.testModeltext = response.data.message
this.errorText = response.data.data
}
})
}
}
}
</script>
<style>
#ruleModel {
/* background-color: #000; */
}
.deleteIcon {
cursor: pointer;
color: #f15353;
}
#ruleModel .el-button--primary.is-plain:hover {
/* background-color: #fff; */
}
.el-textarea.is-disabled .el-textarea__inner {
background-color: var(--elinputdisabled) !important;
border-color: #E4E7ED;
/* color: #C0C4CC; */
cursor: not-allowed;
}
.el-table td,
.el-table th {
padding: 0;
}
.fzs {
display: inline-block;
width: 270px;
text-align: right;
padding-right: 10px;
}
.w60 {
width: 60%;
}
#ruleModel .addendumNames {
line-height: 40px;
}
.conditiona {
padding: 0px 0 10px 144px;
}
.yzFlex {
display: flex;
justify-content: space-around;
}
.m-b-20 {
margin-bottom: 20px;
}
.m-t-10 {
margin-top: 13px;
}
.sectionH2 {
font-size: 16px;
color: #000;
padding-bottom: 12px;
}
.pull-left {
float: left;
color: #1890ff;
font-size: 14px;
line-height: 23px;
cursor: pointer;
}
.basicB {
box-shadow: 2px 2px 5px 0px gray;
/* background-color: #fff; */
}
.el-form-item {
margin-bottom: 12px;
}
</style>
