emsfront/src/views/ems/dzjk/tjbb/dbbb/index.vue

<template>
  <div style="width:100%" v-loading="loading">
    <!--    搜索栏-->
    <el-form :inline="true" class="select-container">
      <el-form-item label="电表">
        <el-select v-model="search.deviceId" placeholder="请选择"  loading-text="正在加载数据">
          <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in deviceOptions" :key="index+'dbOptions'"></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="日报">-->
<!--        <el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!--          <el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="时间选择">
        <el-date-picker
          v-model="search.date"
          type="date"
          :picker-options="pickerOptions"
          :default-value="defaultDate">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset" native-type="button">重置</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table
          class="common-table"
          :data="tableData"
          stripe
          style="width: 100%;margin-top:25px;">
<!--        汇总列-->
          <el-table-column label="汇总">
            <el-table-column
              prop="dataTime"
              label="日期"
              width="120">
              <template slot-scope="scope">
                <span>{{scope.row.dataTime}}{{scope.row.dataTime === '汇总' ? '' : ':00'}}</span>
              </template>
            </el-table-column>
          </el-table-column>
<!--充电量列-->
          <el-table-column  label="充电量">
            <el-table-column
              prop="activePeakKwh"
              label="尖">
            </el-table-column>
            <el-table-column
              prop="activeHighKwh"
              label="峰">
            </el-table-column>
            <el-table-column
              prop="activeFlatKwh"
              label="平">
            </el-table-column>
            <el-table-column
              prop="activeValleyKwh"
              label="谷">
            </el-table-column>
            <el-table-column
              prop="activeTotalKwh"
              label="总">
            </el-table-column>
          </el-table-column>
        <!--充电量列-->
          <el-table-column  label="放电量">
            <el-table-column
              prop="reActivePeakKwh"
              label="尖">
            </el-table-column>
            <el-table-column
              prop="reActiveHighKwh"
              label="峰">
            </el-table-column>
            <el-table-column
              prop="reActiveFlatKwh"
              label="平">
            </el-table-column>
            <el-table-column
              prop="reActiveValleyKwh"
              label="谷">
            </el-table-column>
            <el-table-column
              prop="reActiveTotalKwh"
              label="总">
            </el-table-column>
          </el-table-column>
<!--        效率-->
          <el-table-column label="效率(%)">
            <el-table-column
              prop="effect">
            </el-table-column>
          </el-table-column>
        </el-table>
  </div>
</template>


<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterData, getLoadNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
export default {
  name:'DzjkTjbbDbbb',
  mixins: [getQuerySiteId],
  data() {
    return {
      loading:false,
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultDate:'',//默认展示的时间
      search:{deviceId:'',date:''},
      deviceOptions:[],
      // rbOptions:[
      //   {name:'日报1',id:1},
      //   {name:'日报2',id:2},
      // ],
      tableData:[]
    }
  },
  methods:{
    // 搜索
    onSearch(){
      this.getData()
    },
    // 重置
    onReset(){
      this.search.date = ''
      this.getData()
    },
    // 获取数据
    getData(){
      if(!this.search.deviceId) return
      this.loading=true
      getAmmeterData({siteId:this.siteId,deviceId:this.search.deviceId,dateTime:formatDate(this.search.date)}).then(response=>{
        this.tableData=response?.data || [];
      }).finally(()=> {
        this.loading = false
      })
    },
    getDbList(){
      return getLoadNameList(this.siteId).then(response=>{
        this.deviceOptions=response?.data || [];
        this.deviceOptions.length > 0 && (this.search.deviceId = this.deviceOptions[0].id);
      })
    },
    init(){
      this.loading = true
      this.deviceOptions = []
      this.search.deviceId=''
      this.search.date=''
      this.tableData=[]
      this.getDbList().then(()=>{
        if(this.search.deviceId){
          this.onReset()
        }else{
          this.loading = false
        }
      })
    },
  },

  mounted(){
    this.defaultDate = new Date()
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .common-table.el-table .el-table__header-wrapper th, .common-table.el-table .el-table__fixed-header-wrapper th{
    border-bottom: 1px solid #dfe6ec;
  }
}

</style>