扬尘Vue

zmc

2023-08-31 013ed9283200da41902835f9fd679df13299d436

 src/sfc/ExceptionType.vue

@@ -16,7 +16,10 @@
        // 返回的所有异常类型
        exceptionType:[],
        //已勾选的异常
        checkedList: []
        checkedList: [],
        // 全选
        checkAll:false,
        isIndeterminate:false,
      }
    },
    mounted() {
@@ -26,9 +29,30 @@
        // 获取不同的异常名称
        getExceptionType(){
            this.$http.get('/dust/exceptiontype').then(response=>{   
                this.exceptionType = response.data.data
                // this.exceptionType = response.data.data
                response.data.data.forEach(item => {
                    this.exceptionType.push(item.exceptionType)

                });
                let a = ['0','1','2','3','4','5','6','7']
                a.forEach(item=>{
                  if(this.exceptionType.indexOf(item) == -1){
                    this.exceptionType.push(item)
                  }
                })
            })
        }
        },
        handleCheckAllChange (val) {
          this.checkedList = val ? this.exceptionType : []
          this.isIndeterminate = false
          this.$emit('submitValue',this.checkedList)
        },
        handleCheckedExceptionChange  (value)  {
  const checkedCount = value.length
  this.checkAll = checkedCount === this.exceptionType.length
  this.isIndeterminate = checkedCount > 0 && checkedCount < this.exceptionType.length
  this.$emit('submitValue',this.checkedList)
}
     }
}
</script>
@@ -36,17 +60,24 @@
<template>
  <div class="excption">
    <span class="exception-text">异常类型：</span>
    <el-checkbox-group  v-model="checkedList"  @change="$emit('submitValue',checkedList)">
    <el-checkbox :label="item.exceptionType"  v-for="item in exceptionType" :key="item">
     <el-checkbox
    v-model="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
    class="select-text"
    >全选</el-checkbox
  >
    <el-checkbox-group  v-model="checkedList"  @change="handleCheckedExceptionChange">
    <el-checkbox :label="item"  v-for="item in exceptionType" :key="item">
      <template #default>
        <span v-if="item.exceptionType == '0'">断电或断网</span>
        <span v-else-if="item.exceptionType == '1'">数据超低</span>
        <span v-else-if="item.exceptionType == '2'">超标</span>
        <span v-else-if="item.exceptionType == '3'">数据长时段无波动</span>
        <span v-else-if="item.exceptionType == '4'">量级突变异常</span>
        <span v-else-if="item.exceptionType == '5'">临近超标异常</span>
        <span v-else-if="item.exceptionType == '6'">单日超标次数临界异常</span>
        <span v-else-if="item.exceptionType == '7'">滑动平均值突变</span>
        <span v-if="item == '0'">断电或断网</span>
        <span v-else-if="item == '1'">数据超低</span>
        <span v-else-if="item == '2'">超标</span>
        <span v-else-if="item == '3'">数据长时段无波动</span>
        <span v-else-if="item == '4'">量级突变异常</span>
        <span v-else-if="item == '5'">临近超标异常</span>
        <span v-else-if="item == '6'">单日超标次数临界异常</span>
        <span v-else-if="item == '7'">滑动平均值突变</span>
      </template>
    </el-checkbox>
  </el-checkbox-group>
@@ -55,7 +86,7 @@

<style lang="scss" scoped>
.excption {
    display: flex;  
    display: flex; 
}
.exception-text {
  font-weight: bold;
@@ -65,4 +96,8 @@
.el-checkbox-group {
  margin-top: 5px;
}
.select-text {
  margin-top: 5px;
  margin-right: 5px;
}
</style>