VUE+TS使用elementUI的el-checkbox双重v-for循环做勾选-编程知识

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.lengthconsole.log('选取一级下的二级数据', childrenArray)for (var i = 0; i < len; i++) {if (sonId == childrenArray[i].tagKnowledgeId) childrenArray[i].needAlarm = eif (childrenArray[i].needAlarm == true) tickCount++if (childrenArray[i].needAlarm == false) unTickCount++}if (tickCount == len) {//子级全勾选this.cities[topIndex].checked = truethis.cities[topIndex].indeterminate = false} else if (unTickCount == len) {//子级全不勾选this.cities[topIndex].checked = falsethis.cities[topIndex].indeterminate = false} else {this.cities[topIndex].checked = falsethis.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})//如果子选项有一个勾选了，truelet checkstate = nullcheckstate = 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.lengthif (this.errInfoStateArr[index].checked == true) {// 点击全选往v-model添加选中的for (var i = 0; i < childrenArray.length; i++) this.dialogCheckedCities.push(childrenArray[i])} else {//取消全选删除重复的idthis.dialogCheckedCities = this.dialogCheckedCities.filter((item) => !childrenArray.some((ele) => ele === item))}// 如果勾选了，为trueif (item.checked) {// 把里面所有对象的needAlarm变为trueitem.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.lengthfor (var i = 0; i < len; i++) {if (sonId == childrenArray[i].tagKnowledgeId) childrenArray[i].needAlarm = eif (childrenArray[i].needAlarm == true) tickCount++if (childrenArray[i].needAlarm == false) unTickCount++}if (tickCount == len) {//子级全勾选// this.instrumentalarmOption = []this.errInfoStateArr[topIndex].checked = truethis.errInfoStateArr[topIndex].indeterminate = falseconst 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 = falsethis.errInfoStateArr[topIndex].indeterminate = falseconst 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 = falsethis.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 }}&nbsp;&nbsp;&nbsp;<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: stringparentGroupId: stringlabel: stringtype: stringindex: numberuserId: stringchildren: 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.lengthif (this.errInfoStateArr[index].checked == true) {// 点击全选往v-model添加选中的for (var i = 0; i < childrenArray.length; i++) this.dialogCheckedCities.push(childrenArray[i])} else {//取消全选删除重复的idthis.dialogCheckedCities = this.dialogCheckedCities.filter((item) => !childrenArray.some((ele) => ele === item))}// 如果勾选了，为trueif (item.checked) {// 把里面所有对象的needAlarm变为trueitem.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.lengthfor (var i = 0; i < len; i++) {if (sonId == childrenArray[i].tagKnowledgeId) childrenArray[i].needAlarm = eif (childrenArray[i].needAlarm == true) tickCount++if (childrenArray[i].needAlarm == false) unTickCount++}if (tickCount == len) {//子级全勾选// this.instrumentalarmOption = []this.errInfoStateArr[topIndex].checked = truethis.errInfoStateArr[topIndex].indeterminate = falseconst 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 = falsethis.errInfoStateArr[topIndex].indeterminate = falseconst 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 = falsethis.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 = falseprivate dialogCheckedCities: any[] = []private tagKnowledChooseItem: any[] = []public openAlarmRule(val) {// 存报警1，2，3，4this.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.communicationAlarmthis.connectionAlarmState = res.connectionAlarmres.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 = nullcheckstate = 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.idthis.alarmRulesArr.modefiedUserId = res.modefiedUserIdthis.alarmRulesArr.modifiedUserName = res.modifiedUserNamethis.alarmRulesArr.isDeleted = res.isDeletedthis.alarmRulesArr.modifiedTime = res.modifiedTimethis.alarmRulesArr.flowmeterId = res.flowmeterId}//故障/信息 1/6private errInfoStateArr: any[] = []// 超限 3private overLimitArr: any[] = []// 系数异常 4private coefficientAnomalyArr: any[] = []// 通讯报警private connectionAlarmState: boolean = falseprivate communicationdkAlarm: boolean = false//仪表报警private isIndeterminate: boolean = trueprivate checkAll: boolean = false// 系统预警private isIndeterminate2: boolean = trueprivate systemwarningOption: any[] = []private factoryZeroPoint: number = nullprivate handleCheckedsystemwarning(val) {}// 超限private overLimitOption: any[] = []private upAlarm: number = nullprivate upAlarmWarning: number = nullprivate lowAlarm: number = nullprivate lowAlarmWarning: number = nullprivate 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.idnode.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 查所有信息 ，再根据数据 找到每个点位知识库的   idprivate 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.connectionAlarmStatethis.alarmRulesArr.communicationAlarm = this.communicationdkAlarm//tagParamRulethis.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) : nullitem2.lowerAlarm = item2.lowerAlarm ? parseInt(item2.lowerAlarm) : nullitem2.lowerWarn = item2.lowerWarn ? parseInt(item2.lowerWarn) : nullitem2.upperAlarm = item2.upperAlarm ? parseInt(item2.upperAlarm) : nullitem2.upperWarn = item2.upperWarn ? parseInt(item2.upperWarn) : nullthis.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>