yudao-dev/src/views/energy/monitoring/energyOverlimitLog/index.vue

<template>
  <div class="app-container energyOverlimitLog">

    <!-- 搜索工作栏 -->
    <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
    <el-tabs v-model="activeName" @tab-click="toggleTab">
      <el-tab-pane label="自动抄表" name="auto"></el-tab-pane>
      <el-tab-pane label="手动抄表" name="manual"></el-tab-pane>
    </el-tabs>
    <!-- 列表 -->
    <div v-if="activeName === 'auto'">
      <base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list"
        :max-height="tableH" />
    </div>
    <div v-if="activeName === 'manual'">
      <base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps2"
        :table-data="list2" :max-height="tableH" />
    </div>
    <pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total"
      @pagination="getList" />
  </div>
</template>

<script>
import { getEnergyOverlimitLogPage } from "@/api/monitoring/energyOverlimitLog";
import { getEnergyTypeListAll } from "@/api/base/energyType";
import { publicFormatter } from '@/utils/dict'
import { parseTime } from '@/utils/ruoyi'
const tableProps = [
  {
    prop: 'objName',
    label: '监控对象'
  },
  {
    prop: 'objCode',
    label: '对象编码'
  },
  {
    prop: 'energyType',
    label: '能源类型'
  },
  {
    prop: 'type',
    label: '监控模式'
  },
  {
    prop: 'paramName',
    label: '监控参数'
  },
  {
    prop: 'limitType',
    label: '指标类型',
    filter: publicFormatter('monitor_index_type')
  },
  {
    prop: 'realityValue',
    label: '实际值'
  },
  {
    prop: 'limitValue',
    label: '阈值'
  },
  {
    prop: 'overValue',
    label: '超出值'
  },
  {
    prop: 'time',
    label: '提醒时间',
    filter: parseTime,
    minWidth: 160
  }
]
const tableProps2 = [
  {
    prop: 'energyType',
    label: '能源类型'
  },
  {
    prop: 'limitType',
    label: '指标类型',
    filter: publicFormatter('monitor_index_type')
  },
  {
    prop: 'realityValue',
    label: '实际值'
  },
  {
    prop: 'limitValue',
    label: '阈值'
  },
  {
    prop: 'overValue',
    label: '超出值'
  },
  {
    prop: 'time',
    label: '提醒时间',
    filter: parseTime,
    minWidth: 160
  }
]
export default {
  name: "EnergyOverlimitLog",
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '能源类型',
          selectOptions: [],
          param: 'energyTypeId'
        },
        {
          type: 'select',
          label: '指标类型',
          selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE),
          labelField: 'label',
          valueField: 'value',
          param: 'indexType'
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        }
      ],
      activeName: 'auto',
      tableProps,
      tableProps2,
      tableH: this.tableHeight(260),
      total: 0,
      list: [],
      list2: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        energyTypeId: '',
        indexType: '',
        method: '1'
      },
      typeList: [
        { id: 1, name: '合并' },
        { id: 2, name: '详细' }
      ]
    };
  },
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(260)
    })
    this.getList();
    this.getTypeList()
  },
  methods: {
    buttonClick(val) {
      this.queryParams.pageNo = 1;
      this.queryParams.energyTypeId = val.energyTypeId
      this.queryParams.indexType = val.indexType
      this.getList()
    },
    /** 查询列表 */
    getList() {
      getEnergyOverlimitLogPage(this.queryParams).then(response => {
        let arr = response.data.list || [];
        arr && arr.map((item) => {
          this.typeList.map((i) => {
            if (item.type === i.id) {
              item.type = i.name
            }
          })
          if (item.minValue && item.maxValue) {
            item.limitValue = item.minValue + '-' + item.maxValue
          } else if (item.minValue) {
            item.limitValue = '最小值' + item.minValue
          } else if (item.maxValue) {
            item.limitValue = '最大值' + item.maxValue
          } else {
            item.limitValue = ''
          }
        })
        if (this.queryParams.method === '1') {
          this.list = arr
          this.list2 = []
        } else {
          this.list2 = arr
          this.list1 = []
        }
        this.total = response.data.total;
      });
    },
    getTypeList() {
      getEnergyTypeListAll().then((res) => {
        console.log(res)
        this.formConfig[0].selectOptions = res.data || []
      })
    },
    toggleTab() {
      if (this.activeName === 'auto') {
        this.queryParams.method = '1'
      } else {
        this.queryParams.method = '2'
      }
      this.queryParams.pageNo = 1
      this.getList()
    }
  }
};
</script>
<style lang='scss'>
.energyOverlimitLog {
  .el-tabs__nav::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
  }

  .el-tabs__nav-wrap::after {
    width: 0;
  }

  .el-tabs__item {
    padding: 0 10px;
  }

  .el-tabs__item:hover {
    color: rgba(0, 0, 0, 0.85);
  }

  .el-tabs__item.is-active {
    color: rgba(0, 0, 0, 0.85);
  }

  .el-tabs__item {
    color: rgba(0, 0, 0, 0.45);
  }

  .searchBarBox {
    margin-bottom: 0;
  }
}
</style>