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.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 }}
                      &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: 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>

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-25 10:46:04       106 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-25 10:46:04       116 阅读
  3. 在Django里面运行非项目文件

    2024-04-25 10:46:04       95 阅读
  4. Python语言-面向对象

    2024-04-25 10:46:04       103 阅读

热门阅读

  1. Edge 浏览器的使用心得与深度探索

    2024-04-25 10:46:04       36 阅读
  2. Elasticsearch 索引数据多了,调优,部署方案

    2024-04-25 10:46:04       42 阅读
  3. 【产品经理修炼之道】- 政务G端产品建设指南

    2024-04-25 10:46:04       40 阅读
  4. C++认知

    C++认知

    2024-04-25 10:46:04      31 阅读
  5. 【go从入门到精通】反射的限制

    2024-04-25 10:46:04       41 阅读
  6. Day2: 5道C++ 面向对象高频题整理

    2024-04-25 10:46:04       40 阅读
  7. Linux常用命令

    2024-04-25 10:46:04       40 阅读
  8. Python搭建http下载服务器

    2024-04-25 10:46:04       38 阅读
  9. 使用Python实现批量删除MYSQL数据库的全部外键

    2024-04-25 10:46:04       35 阅读
  10. Node.js中fs模块实现配置文件的读写

    2024-04-25 10:46:04       38 阅读
  11. 微前端通信机制及其实现

    2024-04-25 10:46:04       31 阅读