1.用import异常图标 2.修改飞行巡检的时间格式 3.修改了部分网络请求为api函数形式

zmc

2023-11-22 82541a55189fc3e611391ba5ff4342dbe57598dd

 src/sfc/ExceptionType.vue

@@ -1,4 +1,3 @@

<!-- 异常类型复选框组件  
    自动获取扬尘历史表中不同异常类型
    将选中的多个异常以数组形式返回给父组件 
@@ -9,86 +8,112 @@
-->

<script>
  export default {
    emits:['submitValue'],
    data() {
      return{
        // 返回的所有异常类型
        exceptionType:[],
        //已勾选的异常
        checkedList: [],
        // 全选
        checkAll:false,
        isIndeterminate:false,
import exceptionApi from '@/api/exceptionApi.js'
export default {
  props: {
    // 禁用
    isDisabled: {
      type: Boolean,
      default: false
    },
    // 异常类型
    exception: {
      type: Number,
      default:-1
    }
  },
  emits: ['submitValue'],
  data() {
    return {
      // 返回的所有异常类型
      exceptionType: [],
      //已勾选的异常
      checkedList: [],
      // 全选
      checkAll: false,
      isIndeterminate: false
    }
  },

  mounted() {
    this.$watch(() => [this.exception], () => {
      if (this.exception != -1) {
        this.checkedList.push(this.exception) 
      }
      
    });
    this.getExceptionType()
  },
  methods: {
    // 获取不同的异常名称
    getExceptionType() {
      // exceptionApi.queryExceptionType().then((response) => {
      //   response.data.data.forEach((item) => {
      //     this.exceptionType.push(item.exceptionType)
      //   })

      //   let a = ['0', '1', '2', '3', '4', '5', '6', '7','8']
      //   a.forEach((item) => {
      //     if (this.exceptionType.indexOf(item) == -1) {
      //       this.exceptionType.push(item)
      //     }
      //   })
      // })

        let a = ['0', '1', '2', '3', '4', '5', '6', '7','8']
        a.forEach((item) => {
            this.exceptionType.push(item)
        })
    },
    mounted() {
        this.getExceptionType()
    handleCheckAllChange(val) {
      this.checkedList = val ? this.exceptionType : []
      this.isIndeterminate = false
      this.$emit('submitValue', this.checkedList)
    },
    methods: {
        // 获取不同的异常名称
        getExceptionType(){
            this.$http.get('/dust/exceptiontype').then(response=>{   
                // this.exceptionType = response.data.data
                response.data.data.forEach(item => {
                    this.exceptionType.push(item.exceptionType)
                });
                // console.log('获取到的异常类型：',this.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)
}
     }
    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>

<template>
  <div class="excption">
    <h1 class="exception-text">异常类型：</h1>
     <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>
        <!-- <div style="display: flex; flex-flow: row wrap;">  -->
        <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>
      <!-- </div> -->
      </template>
    </el-checkbox>
  </el-checkbox-group>
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
      class="select-text"
     :disabled="isDisabled"
      >全选</el-checkbox
    >
    <el-checkbox-group v-model="checkedList" @change="handleCheckedExceptionChange" :disabled="isDisabled">
      <el-checkbox :label="item" v-for="item in exceptionType" :key="item"  >
        <template #default>
          <!-- <div style="display: flex; flex-flow: row wrap;">  -->
          <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>
          <span v-else-if="item == '8'">有效率异常</span>
          <!-- </div> -->
        </template>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<style lang="scss" scoped>
.excption {
    display: flex; 
  display: flex;
}
.exception-text {
  font-size: 14px;
@@ -103,4 +128,4 @@
  margin-top: 5px;
  margin-right: 5px;
}
</style>
</style>