![VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选-LMLPHP]( "VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选-LMLPHP")
html部分
<template>
<div class="hello">
<el-form :model="elForm">
<!-- cities对象数组形式 -->
<el-form-item v-for="(item, topIndex) in cities" :key="topIndex">
<!--item.checked 是每一个item的勾选状态，字段里可以没有 -->
<el-checkbox class="textCheck" :indeterminate="item.indeterminate" v-model="item.checked" @change="onChangeTop(topIndex, item.tagParamId, $event, item)">{{ item.tagParamName }}</el-checkbox>
<!-- dialogCheckedCities是空对象，保存勾选的每一个子选项的数据集合 -->
<el-checkbox-group v-model="dialogCheckedCities">
<!-- city.needAlarm子选项的needAlarm字段，true/false -->
<el-checkbox v-for="city in item.tagKnowledgeRule" v-model="city.needAlarm" :key="city.tagKnowledgeId" :label="city" @change="onChangeSon(topIndex, city.tagKnowledgeId, item.tagParamId, $event, item, city)">{{ city.tagKnowledgeName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-button @click="getArr">点击</el-button>
</div>
</template>
data数据部分
data() {
return {
cities: [
{
tagParamId: '1759763720885637120',
tagParamName: '报警1',
tagKnowledgeRule: [
{
tagKnowledgeId: 'fu1zi1',
tagKnowledgeName: '统计报表',
needAlarm: true
},
{
tagKnowledgeId: 'fu1zi2',
tagKnowledgeName: '统计',
needAlarm: true
},
{
tagKnowledgeId: 'fu1zi3',
tagKnowledgeName: '报表',
needAlarm: true
}
]
},
{
tagParamId: '报警2',
tagParamName: '文字档案2',
tagKnowledgeRule: [
{
tagKnowledgeId: 'fu2zi1',
tagKnowledgeName: '好好学习',
needAlarm: false
},
{
tagKnowledgeId: 'fu2zi2',
tagKnowledgeName: '学习',
needAlarm: true
}
]
},
{
tagParamId: '报警3',
tagParamName: '文字档案3',
tagKnowledgeRule: [
{
tagKnowledgeId: 'fu3zi1',
tagKnowledgeName: '上班',
needAlarm: false
},
{
tagKnowledgeId: 'fu3zi2',
tagKnowledgeName: '一直上班',
needAlarm: false
}
]
}
],
dialogCheckedCities: [],
elForm: {}
}
},
JS脚本部分/重要
<template>
<div class="hello">
<el-form :model="elForm">
<el-form-item v-for="(item, topIndex) in cities" :key="topIndex">
<el-checkbox class="textCheck" :indeterminate="item.indeterminate" v-model="item.checked" @change="onChangeTop(topIndex, item.tagParamId, $event, item)">{{ item.tagParamName }}</el-checkbox>
<el-checkbox-group v-model="dialogCheckedCities">
<el-checkbox v-for="city in item.tagKnowledgeRule" v-model="city.needAlarm" :key="city.tagKnowledgeId" :label="city" @change="onChangeSon(topIndex, city.tagKnowledgeId, item.tagParamId, $event, item, city)">{{ city.tagKnowledgeName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<el-button @click="getArr">点击</el-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
mounted() {
this.cities.forEach(item => {
// 回显为true的数据
item.tagKnowledgeRule.forEach(items => {
if (items.needAlarm) {
this.dialogCheckedCities.push(items)
}
})
//回显全选
item.checked = item.tagKnowledgeRule.every(ele => {
return ele.needAlarm === true
})
})
},
data() {
return {
cities: [
{
tagParamId: '1759763720885637120',
tagParamName: '报警1',
tagKnowledgeRule: [
{
tagKnowledgeId: 'fu1zi1',
tagKnowledgeName: '统计报表',
needAlarm: true
},
{
tagKnowledgeId: 'fu1zi2',
tagKnowledgeName: '统计',
needAlarm: true
},
{
tagKnowledgeId: 'fu1zi3',
tagKnowledgeName: '报表',
needAlarm: true
}
]
},
{
tagParamId: '报警2',
tagParamName: '文字档案2',
tagKnowledgeRule: [
{
tagKnowledgeId: 'fu2zi1',
tagKnowledgeName: '好好学习',
needAlarm: false
},
{
tagKnowledgeId: 'fu2zi2',
tagKnowledgeName: '学习',
needAlarm: true
}
]
},
{
tagParamId: '报警3',
tagParamName: '文字档案3',
tagKnowledgeRule: [
{
tagKnowledgeId: 'fu3zi1',
tagKnowledgeName: '上班',
needAlarm: false
},
{
tagKnowledgeId: 'fu3zi2',
tagKnowledgeName: '一直上班',
needAlarm: false
}
]
}
],
dialogCheckedCities: [],
elForm: {}
}
},
methods: {
//点击的''全部''(全选)
onChangeTop(index, tagParamId, e, item) {
//点击的谁的下标，对应的id，点击的true/false状态，点击的这个对象所有的数据
//父级change事件
this.cities[index].checked = e
if (e == false) this.cities[index].indeterminate = false //去掉不确定状态
//父级勾选后，子级全部勾选或者取消
//这里注意是选取一级下的二级数据，也是所有子选项的数据集合
var childrenArray = this.cities[index].tagKnowledgeRule
//某一个对象下子选项的数组集合长度
// var len = childrenArray.length
//如果某一个勾选的对象的checked状态为true，就是全选状态时
if (this.cities[index].checked == true) {
// 点击全选往v-model添加选中的
//dialogCheckedCities里面把某一个对象下的二级子选项全部放入dialogCheckedCities里，这是点击全部，勾选全部子数据的
// :label="city" 想控制全选要看你子选项的label绑定的是什么，此处我绑定的是对象，所以说下方要塞入对象
//dialogCheckedCities是存放的勾选的数据，里面有什么，就勾什么
for (var i = 0; i < childrenArray.length; i++) this.dialogCheckedCities.push(childrenArray[i])
} else {
//取消全选删除重复的id
//从 this.dialogCheckedCities 中移除那些在 childrenArray 中存在的元素。
//childrenArray.some() 意思是，如果有一项数据相同，返回true，保存，如果都不相同，返回false，过滤
// ！childrenArray.some() 意思是，如果有一项数据相同，返回false，都不相同，返回true
//dialogCheckedCities的数据过滤，如果childrenArray里的数据和它的每一项都相同，返回false，表示不保存，直接过滤掉
this.dialogCheckedCities = this.dialogCheckedCities.filter(item => !childrenArray.some(ele => ele === item))
}
},
onChangeSon(topIndex, sonId, topId, e, item, city) {
console.log('点击的儿子', topIndex, sonId, topId, e, item, city)
//子级change事件
var childrenArray = this.cities[topIndex].tagKnowledgeRule //这里注意是选取一级下的二级数据
var tickCount = 0,
unTickCount = 0,
len = childrenArray.length
console.log('选取一级下的二级数据', childrenArray)
for (var i = 0; i < len; i++) {
if (sonId == childrenArray[i].tagKnowledgeId) childrenArray[i].needAlarm = e
if (childrenArray[i].needAlarm == true) tickCount++
if (childrenArray[i].needAlarm == false) unTickCount++
}
if (tickCount == len) {
//子级全勾选
this.cities[topIndex].checked = true
this.cities[topIndex].indeterminate = false
} else if (unTickCount == len) {
//子级全不勾选
this.cities[topIndex].checked = false
this.cities[topIndex].indeterminate = false
} else {
this.cities[topIndex].checked = false
this.cities[topIndex].indeterminate = true //添加不确定状态
}
},
getArr() {
console.log('获取数据', this.dialogCheckedCities)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
以下为本人使用到的
<!-- 仪表报警 -->
<div class="instrumentalarm">
<div>仪表报警</div>
<div class="instrumentalarm_content">
<div>
<span style="color:#ff5959">故障</span>
/
<span style="color:#6e87ff">信息</span>
<span style="font-size: 15px;font-weight: normal;margin-left: 15px;">流量计点位知识库报警</span>
<div style="margin-left:20px;overflow-x: auto;">
<div style="display:flex;justify-content: space-between;">
<div style="width:30%" v-for="(item, topIndex) in errInfoStateArr" :key="topIndex">
<el-checkbox :indeterminate="item.indeterminate" v-model="item.checked" @change="onChangeTop(topIndex, item.tagParamId, $event, item)">{{ item.tagParamName }}</el-checkbox>
<div style="overflow-y: scroll;overflow-x: hidden;height:245px">
<el-checkbox-group v-model="dialogCheckedCities">
<el-checkbox v-for="item2 in item.tagKnowledgeRule" :key="item2.tagKnowledgeId" :v-model="item2.needAlarm" :label="item2" @change="onChangeSon(topIndex, item2.tagKnowledgeId, item.tagParamId, $event, item, item2)">{{ item2.tagKnowledgeName }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
//进入页面获取接口数据时需要回显勾选状态
//this.dialogCheckedCities控制的，里面放的要是和label一样的，才勾选
this.errInfoStateArr.forEach((item) => {
// 回显为true的数据
item.tagKnowledgeRule.forEach((items) => {
if (items.needAlarm) {
this.dialogCheckedCities.push(items)
}
})
//回显全选
item.checked = item.tagKnowledgeRule.every((ele) => {
return ele.needAlarm === true
})
//如果子选项有一个勾选了，true
let checkstate = null
checkstate = item.tagKnowledgeRule.some((ele) => {
return ele.needAlarm === true
})
if (checkstate) {
//把勾选了的数据push进instrumentalarmOption用于后续数据操作
this.instrumentalarmOption.push(item)
}
})
private instrumentalarmOption: any[] = []
private onChangeTop(index, tagParamId, e, item) {
console.log('点击的全部', index, tagParamId, e, item)
//父级change事件
this.errInfoStateArr[index].checked = e //父级勾选后，子级全部勾选或者取消
if (e == false) this.errInfoStateArr[index].indeterminate = false //去掉不确定状态
var childrenArray = this.errInfoStateArr[index].tagKnowledgeRule //这里注意是选取一级下的二级数据
// var len = childrenArray.length
if (this.errInfoStateArr[index].checked == true) {
// 点击全选往v-model添加选中的
for (var i = 0; i < childrenArray.length; i++) this.dialogCheckedCities.push(childrenArray[i])
} else {
//取消全选删除重复的id
this.dialogCheckedCities = this.dialogCheckedCities.filter((item) => !childrenArray.some((ele) => ele === item))
}
// 如果勾选了，为true
if (item.checked) {
// 把里面所有对象的needAlarm变为true
item.tagKnowledgeRule.forEach((item2) => {
item2.needAlarm = true
})
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
} else {
item.tagKnowledgeRule.forEach((item2) => {
item2.needAlarm = false
})
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
}
}
private onChangeSon(topIndex, sonId, topId, e, item, city) {
console.log('点击的子', e, item, city)
//子级change事件
var childrenArray = this.errInfoStateArr[topIndex].tagKnowledgeRule //这里注意是选取一级下的二级数据
var tickCount = 0,
unTickCount = 0,
len = childrenArray.length
for (var i = 0; i < len; i++) {
if (sonId == childrenArray[i].tagKnowledgeId) childrenArray[i].needAlarm = e
if (childrenArray[i].needAlarm == true) tickCount++
if (childrenArray[i].needAlarm == false) unTickCount++
}
if (tickCount == len) {
//子级全勾选
// this.instrumentalarmOption = []
this.errInfoStateArr[topIndex].checked = true
this.errInfoStateArr[topIndex].indeterminate = false
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
// this.instrumentalarmOption.push(item)
} else if (unTickCount == len) {
//子级全不勾选
this.errInfoStateArr[topIndex].checked = false
this.errInfoStateArr[topIndex].indeterminate = false
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
} else {
this.errInfoStateArr[topIndex].checked = false
this.errInfoStateArr[topIndex].indeterminate = true //添加不确定状态
}
// 判断数组中是否已存在与新对象某个字段相同的对象
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
}
一整块代码
<template>
<el-dialog :show-close="false" title="报警规则" :visible.sync="alarmRuleVisible" top="0px" width="80%" center :close-on-click-modal="false" destroy-on-close append-to-body>
<!-- 中间高度 -->
<div class="alarmMain">
<!-- 左侧规则 -->
<div class="alarmRule">
<div class="alarmRule_title">报警规则</div>
<div class="alarmRule_contetn">
<!-- 通讯报警 -->
<div class="communicationalarm">
<div>通讯报警</div>
<el-checkbox v-model="connectionAlarmState" style="color:#c50b0b">断开</el-checkbox>
<el-checkbox v-model="communicationdkAlarm" style="color:#ed5f00">通讯中断</el-checkbox>
<div>
<span style="margin-left:25px;font-size:15px;font-weight:normal">采集站无法连接到网关</span>
<span style="margin-left:35px;font-size:15px;font-weight:normal">网关未能连接到流量计</span>
</div>
<!-- <div class="disconnect">
<div>断开</div>
</div> -->
</div>
<!-- 仪表报警 -->
<div class="instrumentalarm">
<div>仪表报警</div>
<div class="instrumentalarm_content">
<div>
<span style="color:#ff5959">故障</span>
/
<span style="color:#6e87ff">信息</span>
<span style="font-size: 15px;font-weight: normal;margin-left: 15px;">流量计点位知识库报警</span>
<div style="margin-left:20px;overflow-x: auto;">
<div style="display:flex;justify-content: space-between;">
<div style="width:30%" v-for="(item, topIndex) in errInfoStateArr" :key="topIndex">
<el-checkbox :indeterminate="item.indeterminate" v-model="item.checked" @change="onChangeTop(topIndex, item.tagParamId, $event, item)">{{ item.tagParamName }}</el-checkbox>
<div style="overflow-y: scroll;overflow-x: hidden;height:245px">
<el-checkbox-group v-model="dialogCheckedCities">
<el-checkbox v-for="item2 in item.tagKnowledgeRule" :key="item2.tagKnowledgeId" :v-model="item2.needAlarm" :label="item2" @change="onChangeSon(topIndex, item2.tagKnowledgeId, item.tagParamId, $event, item, item2)">{{ item2.tagKnowledgeName }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 系统预警 -->
<div class="systemwarning">
<div>系统预警</div>
<div class="systemwarning_content">
<div>
<span style="color:#ed0f5d">系数异常</span>
<span style="font-size: 15px;font-weight: normal;margin-left: 15px;">流量计系数或组态参数发生改变</span>
<div style="margin-left:20px;height:100px">
<div style="margin: 15px 0;"></div>
<!-- id="checkbox-container" -->
<el-checkbox-group v-model="systemwarningOption" @change="handleCheckedsystemwarning">
<el-checkbox v-for="item in coefficientAnomalyArr" :label="item.tagParamName" :key="item.tagParamId">
{{ item.tagParamName }}
<span>设定值:</span>
<el-input v-model="item.settingValue" placeholder="请输入内容"></el-input>
<!-- factoryZeroPoint -->
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
<div class="overlimit_content">
<div>
<span style="color:#dbae03">超限</span>
<span style="font-size: 15px;font-weight: normal;margin-left: 15px;">流量计相关数据超过系统设置的上下限</span>
<div style="margin-left:20px;overflow-y: scroll;height:200px">
<div style="margin: 15px 0;"></div>
<el-checkbox-group id="checkbox-container" v-model="overLimitOption" @change="handleCheckedoverLimit">
<el-checkbox v-for="item in overLimitArr" :label="item.tagParamName" :key="item.tagParamId">
{{ item.tagParamName }}
<!-- <div style="display:flex">
<div class="alarmUpLow"> -->
<span v-if="overLimitOption.includes(item.tagParamName)">
<span style="margin-left:80px" class="alarmUpLow_text">上限警告:</span>
<el-input v-model="item.upperAlarm" placeholder="请输入"></el-input>
<span class="alarmUpLow_text">上限报警:</span>
<el-input v-model="item.upperWarn" placeholder="请输入"></el-input>
<span class="alarmUpLow_text">下限警告:</span>
<el-input v-model="item.lowerAlarm" placeholder="请输入"></el-input>
<span class="alarmUpLow_text">下限报警:</span>
<el-input v-model="item.lowerWarn" placeholder="请输入"></el-input>
</span>
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧发送人 -->
<div class="pusher">
<div class="alarmPush_title">报警推送人员</div>
<!-- :default-checked-keys="defaultCheckedKeys" -->
<div style="margin-top:15px;margin-left:10px;background: #5d7394">
<div style="margin-left:3px;">
<el-tree :data="treeData" ref="tree" check-on-click-node highlight-current node-key="userId" default-expand-all :default-checked-keys="defaultCheckedKeys" show-checkbox :props="defaultProps"></el-tree>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="onCancelChoose">{{ $t('i18n.cancelBtn') }}</el-button>
<el-button type="primary" @click="onSureChoose">{{ $t('i18n.sureBtn') }}</el-button>
</div>
</el-dialog>
<!-- 备用 -->
<!-- <el-form ref="form" :model="form" label-width="80px">
</el-form> -->
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import ComponentBase from '@src/views/ComponentBase'
import { Route } from 'vue-router'
import { GetByAlarmFlowmeterId, AddOrUpdateAlarmRule, GetTagParamByPackageId, GetTagKnowledgePage } from '@src/apis/flowmeterInfo'
import { GetAllOranizationInfo } from '@src/apis/userRole'
class TreeNodeDC {
id: string
parentGroupId: string
label: string
type: string
index: number
userId: string
children: TreeNodeDC[] = []
}
@Component({
components: {}
})
export default class editDialog extends ComponentBase {
mounted() {}
@Watch('dialogCheckedCities', { deep: true })
private watchdialogCheckArr(val: any) {}
private instrumentalarmOption: any[] = []
private onChangeTop(index, tagParamId, e, item) {
console.log('点击的全部', index, tagParamId, e, item)
//父级change事件
this.errInfoStateArr[index].checked = e //父级勾选后，子级全部勾选或者取消
if (e == false) this.errInfoStateArr[index].indeterminate = false //去掉不确定状态
var childrenArray = this.errInfoStateArr[index].tagKnowledgeRule //这里注意是选取一级下的二级数据
// var len = childrenArray.length
if (this.errInfoStateArr[index].checked == true) {
// 点击全选往v-model添加选中的
for (var i = 0; i < childrenArray.length; i++) this.dialogCheckedCities.push(childrenArray[i])
} else {
//取消全选删除重复的id
this.dialogCheckedCities = this.dialogCheckedCities.filter((item) => !childrenArray.some((ele) => ele === item))
}
// 如果勾选了，为true
if (item.checked) {
// 把里面所有对象的needAlarm变为true
item.tagKnowledgeRule.forEach((item2) => {
item2.needAlarm = true
})
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
} else {
item.tagKnowledgeRule.forEach((item2) => {
item2.needAlarm = false
})
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
}
}
private onChangeSon(topIndex, sonId, topId, e, item, city) {
console.log('点击的子', e, item, city)
//子级change事件
var childrenArray = this.errInfoStateArr[topIndex].tagKnowledgeRule //这里注意是选取一级下的二级数据
var tickCount = 0,
unTickCount = 0,
len = childrenArray.length
for (var i = 0; i < len; i++) {
if (sonId == childrenArray[i].tagKnowledgeId) childrenArray[i].needAlarm = e
if (childrenArray[i].needAlarm == true) tickCount++
if (childrenArray[i].needAlarm == false) unTickCount++
}
if (tickCount == len) {
//子级全勾选
// this.instrumentalarmOption = []
this.errInfoStateArr[topIndex].checked = true
this.errInfoStateArr[topIndex].indeterminate = false
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
// this.instrumentalarmOption.push(item)
} else if (unTickCount == len) {
//子级全不勾选
this.errInfoStateArr[topIndex].checked = false
this.errInfoStateArr[topIndex].indeterminate = false
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
} else {
this.errInfoStateArr[topIndex].checked = false
this.errInfoStateArr[topIndex].indeterminate = true //添加不确定状态
}
// 判断数组中是否已存在与新对象某个字段相同的对象
const index = this.instrumentalarmOption.findIndex((ele) => ele.tagParamName === item.tagParamName)
if (index !== -1) {
// 如果存在，则替换该对象
this.instrumentalarmOption.splice(index, 1, item)
} else {
// 如果不存在，则添加新对象到数组中
this.instrumentalarmOption.push(item)
}
}
private alarmRuleVisible: boolean = false
private dialogCheckedCities: any[] = []
private tagKnowledChooseItem: any[] = []
public openAlarmRule(val) {
// 存报警1，2，3，4
this.tagKnowledChooseItem = []
this.systemwarningOption = []
this.overLimitOption = []
this.getAlarmById(val)
this.initData()
this.getKnowDetail()
this.getTagParamByPackageId(val.tagPackageId)
this.alarmRuleVisible = true
}
private tablePage: any = {
total: 0,
currentPage: 1,
pageSize: 100
}
private knowDetailArr: any[] = []
private async getKnowDetail() {
let res = await GetTagKnowledgePage(this.tablePage.currentPage, this.tablePage.pageSize, '')
this.knowDetailArr = res.data
}
private lljInfoData: any[] = []
//根据id获取每个流量计的报警规则数据
private async getAlarmById(val) {
this.instrumentalarmOption = []
this.dialogCheckedCities = []
this.errInfoStateArr = []
this.overLimitArr = []
this.coefficientAnomalyArr = []
let res = await GetByAlarmFlowmeterId(val.id)
this.defaultCheckedKeys = res.notifyUserIds
// 通讯报警的勾选回显
this.communicationdkAlarm = res.communicationAlarm
this.connectionAlarmState = res.connectionAlarm
res.tagParamRule.forEach((item) => {
if (item.paramType == 4) {
this.errInfoStateArr.push(item)
} else if (item.paramType == 3) {
// 系数异常的回显
if (item.settingValue != null) {
this.systemwarningOption.push(item.tagParamName)
}
this.coefficientAnomalyArr.push(item)
} else {
// 超限的勾选回显
if (item.lowerAlarm != null && item.lowerWarn != null && item.upperAlarm != null && item.upperWarn != null) {
this.overLimitOption.push(item.tagParamName)
}
this.overLimitArr.push(item)
}
})
this.errInfoStateArr.forEach((item) => {
// 回显为true的数据
item.tagKnowledgeRule.forEach((items) => {
if (items.needAlarm) {
this.dialogCheckedCities.push(items)
}
})
//回显全选
item.checked = item.tagKnowledgeRule.every((ele) => {
return ele.needAlarm === true
})
let checkstate = null
checkstate = item.tagKnowledgeRule.some((ele) => {
return ele.needAlarm === true
})
if (checkstate) {
this.instrumentalarmOption.push(item)
}
})
console.log('一开始的instrumentalarmOption', this.instrumentalarmOption)
console.log('errInfoStateArr', this.errInfoStateArr)
this.lljInfoData = res.tagParamRule
//******************************************************************************************************
this.alarmRulesArr.id = res.id
this.alarmRulesArr.modefiedUserId = res.modefiedUserId
this.alarmRulesArr.modifiedUserName = res.modifiedUserName
this.alarmRulesArr.isDeleted = res.isDeleted
this.alarmRulesArr.modifiedTime = res.modifiedTime
this.alarmRulesArr.flowmeterId = res.flowmeterId
}
//故障/信息 1/6
private errInfoStateArr: any[] = []
// 超限 3
private overLimitArr: any[] = []
// 系数异常 4
private coefficientAnomalyArr: any[] = []
// 通讯报警
private connectionAlarmState: boolean = false
private communicationdkAlarm: boolean = false
//仪表报警
private isIndeterminate: boolean = true
private checkAll: boolean = false
// 系统预警
private isIndeterminate2: boolean = true
private systemwarningOption: any[] = []
private factoryZeroPoint: number = null
private handleCheckedsystemwarning(val) {}
// 超限
private overLimitOption: any[] = []
private upAlarm: number = null
private upAlarmWarning: number = null
private lowAlarm: number = null
private lowAlarmWarning: number = null
private handleCheckedoverLimit(val) {}
// 右侧发送人
private treeData: TreeNodeDC[] = []
private defaultCheckedKeys: any[] = []
private defaultProps: any = {
children: 'children',
label: 'label'
}
private async initData() {
let res = await GetAllOranizationInfo()
this.treeData = this.organData(res, null)
}
private organData(allData: any[], topparentId: string): TreeNodeDC[] {
let res: TreeNodeDC[] = []
let filters = allData.filter((o) => o.parentId === topparentId)
for (let index = 0; index < filters.length; index++) {
const element = filters[index]
let node: TreeNodeDC = {
id: element.id,
label: element.name,
parentGroupId: element.parentId,
index: element.index,
userId: null,
children: [],
type: 'group'
}
if (element.type === 1) {
node.type = 'people'
node.id = element.id
node.userId = element.userId
}
let nodeChildren = this.organData(allData, node.id)
node.children = nodeChildren.sort(function(a, b) {
return a.index - b.index
})
res.push(node)
}
return res
}
private flattenData: any[] = []
private flattenTree(node) {
// 将当前节点添加到扁平化数组中
this.flattenData.push(node)
// 判断当前节点是否有子节点
if (node.children && node.children.length > 0) {
// 遍历子节点，递归调用flattenTree函数
node.children.forEach((child) => {
this.flattenTree(child)
})
}
}
// 根据这个流量计绑定的点位包的id 查所有信息 ，再根据数据 找到每个点位知识库的 id
private ParamByPackageArr: any[] = []
private async getTagParamByPackageId(id) {
let res = await GetTagParamByPackageId(id)
// tagKnowledgeId 点位库id 但是没有点位库名称
this.ParamByPackageArr = res
}
// 存放最终数据的数组,
private alarmRulesArr: any = {}
// 最下方 确定/取消按钮
private async onSureChoose() {
var nodes = (this.$refs.tree as any).getCheckedNodes()
//数组扁平化
nodes.forEach((item) => {
this.flattenTree(item)
})
let peopleIdsArr = []
//去重
this.flattenData.forEach((item) => {
if (item.type == 'people') {
peopleIdsArr.push(item.userId)
}
})
//推送人员的id集合
let peopleUniqueArr = Array.from(new Set(peopleIdsArr))
this.alarmRulesArr.connectionAlarm = this.connectionAlarmState
this.alarmRulesArr.communicationAlarm = this.communicationdkAlarm
//tagParamRule
this.alarmRulesArr.tagParamRule = []
//获取推送人id集合/赛数据 //这些是我选中的报警的名称集合
let combinedArray = [...this.systemwarningOption, ...this.overLimitOption]
this.onSure(combinedArray)
combinedArray.forEach((item) => {
this.lljInfoData.forEach((item2) => {
if (item2.tagParamName === item) {
item2.settingValue = item2.settingValue ? parseInt(item2.settingValue) : null
item2.lowerAlarm = item2.lowerAlarm ? parseInt(item2.lowerAlarm) : null
item2.lowerWarn = item2.lowerWarn ? parseInt(item2.lowerWarn) : null
item2.upperAlarm = item2.upperAlarm ? parseInt(item2.upperAlarm) : null
item2.upperWarn = item2.upperWarn ? parseInt(item2.upperWarn) : null
this.alarmRulesArr.tagParamRule.push(item2)
}
})
})
this.alarmRulesArr.tagParamRule = this.alarmRulesArr.tagParamRule.concat(this.instrumentalarmOption)
// 勾选的数据 的对应的点位知识库信息
this.alarmRulesArr.notifyUserIds = peopleUniqueArr
//第一层加Id
// this.alarmRulesArr.tagParamRule.forEach((item) => {})
console.log('最终处理的数据', this.alarmRulesArr.tagParamRule)
let res = await AddOrUpdateAlarmRule(this.alarmRulesArr)
if (res) {
this.$message({
message: '规则新增成功',
type: 'success'
})
this.alarmRuleVisible = false
} else {
this.$message({
message: '规则新增失败',
type: 'warning'
})
this.alarmRuleVisible = true
}
}
private onCancelChoose() {
this.alarmRuleVisible = false
}
@Emit('onSure')
private onSure(checkArr: any[]) {}
}
</script>
<style lang="less" scoped>
.alarmMain {
height: 100%;
display: flex;
// justify-content:
}
.alarmRule {
width: 80%;
height: 100%;
}
.alarmRule_title {
font-size: 30px;
font-weight: bold;
color: black;
}
.alarmPush_title {
font-size: 20px;
font-weight: bold;
color: black;
}
.alarmRule_contetn {
width: calc(100% - 30px);
height: 100%;
overflow: hidden;
padding-left: 30px;
// box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.communicationalarm {
font-size: 24px;
height: 77px;
font-weight: bold;
color: black;
margin-top: 10px;
}
.disconnect {
width: 300px;
height: 100%px;
}
/deep/ .communicationalarm .el-checkbox:last-of-type {
margin-left: 100px;
}
/deep/ .el-checkbox__label {
display: inline-block;
padding-left: 10px;
line-height: 19px;
font-size: 16px;
font-weight: bold;
}
/deep/ .el-checkbox-group {
margin-left: 20px;
}
.instrumentalarm {
font-size: 24px;
height: 300px;
font-weight: bold;
color: black;
margin-top: 10px;
}
.instrumentalarm_content {
width: 97%;
height: 100%;
border: 1px solid gray;
margin-left: 20px;
padding-left: 5px;
overflow: hidden;
margin-top: 5px;
// box-shadow: rgba(255, 113, 73, 0.3) 0px 0px 0px 3px;
}
.systemwarning {
font-size: 24px;
height: 200px;
font-weight: bold;
color: black;
margin-top: 4%;
}
.systemwarning_content {
width: 97%;
height: 70%;
border: 1px solid gray;
margin-left: 20px;
margin-top: 5px;
padding-left: 5px;
// box-shadow: rgba(237, 15, 93, 0.3) 0px 0px 0px 3px;
}
.overlimit_content {
width: 97%;
border: 1px solid gray;
margin-left: 20px;
padding-left: 5px;
margin-top: 20px;
padding-bottom: 10px;
// box-shadow: rgba(219, 174, 3, 0.3) 0px 0px 0px 3px;
}
#checkbox-container {
display: flex;
flex-direction: column;
}
/deep/ .systemwarning_content .el-input__inner {
width: 100px !important;
height: 30px;
}
/deep/ .overlimit_content .el-input {
position: relative;
font-size: 14px;
display: inline-block;
width: 100px;
}
/deep/ .overlimit_content .el-input__inner {
width: 80px !important;
height: 30px;
}
.alarmUpLow {
display: flex;
font-size: 16px;
font-weight: normal;
margin-top: 5px;
margin-left: 20px;
}
.alarmUpLow_text {
width: 78px;
line-height: 39px;
font-size: 12px;
}
.pusher {
width: 20%;
height: 100%;
}
// /deep/.el-dialog {
// border-radius: 6px;
// }
// /deep/.el-form {
// display: flex;
// flex-wrap: wrap;
// .el-form-item {
// width: calc(50% - 10px);
// display: flex;
// align-items: center;
// justify-content: left !important;
// margin-right: 10px;
// box-sizing: border-box;
// .el-form-item__label {
// width: 35% !important;
// text-align: left;
// }
// .el-form-item__content {
// width: 100% !important;
// margin-left: 0 !important;
// }
// }
// }
</style>