扬尘Vue代码

zmc

2023-08-30 d3d7dcf919eda40a415b6dc744fb0b347d4293a8

 src/sfc/ExceptionType.vue

@@ -16,7 +16,10 @@
        // 返回的所有异常类型
        exceptionType:[],
        //已勾选的异常
        checkedList: []
        checkedList: [],
        // 全选
        checkAll:false,
        isIndeterminate:false,
      }
    },
    mounted() {
@@ -26,8 +29,23 @@
        // 获取不同的异常名称
        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)
                });
                console.log(this.exceptionType);
            })
        },
        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)
        }
     }
}
@@ -36,17 +54,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>
@@ -65,4 +90,8 @@
.el-checkbox-group {
  margin-top: 5px;
}
.select-text {
  margin-top: 5px;
  margin-right: 5px;
}
</style>