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

<template>
  <div>
    <!--    搜索栏-->
    <div class="select-container">
      <el-form :inline="true">
        <el-form-item label="电表">
          <el-select v-model="search.db" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dbOptions" :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="warning" @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>
    </div>
    <!--表格-->
    <el-table
          class="common-table"
          :data="tableData"
          stripe
          max-height="500"
          show-summary
          sum-text="汇总"
          style="width: 100%;margin-top:25px;">
<!--      todo汇总数据  :summary-method="getSummaries"-->
<!--        汇总列-->
          <el-table-column label="汇总">
            <el-table-column
              prop="time"
              label="日期"
              width="120">
            </el-table-column>
          </el-table-column>
<!--充电量列-->
          <el-table-column  label="充电量">
            <el-table-column
              prop="cdlJian"
              label="尖">
            </el-table-column>
            <el-table-column
              prop="cdlFeng"
              label="峰">
            </el-table-column>
            <el-table-column
              prop="cdlPing"
              label="平">
            </el-table-column>
            <el-table-column
              prop="cdlGu"
              label="谷">
            </el-table-column>
            <el-table-column
              prop="cdlZong"
              label="总">
            </el-table-column>
          </el-table-column>
        <!--充电量列-->
          <el-table-column  label="放电量">
            <el-table-column
              prop="fdlJian"
              label="尖">
            </el-table-column>
            <el-table-column
              prop="fdlFeng"
              label="峰">
            </el-table-column>
            <el-table-column
              prop="fdlPing"
              label="平">
            </el-table-column>
            <el-table-column
              prop="fdlGu"
              label="谷">
            </el-table-column>
            <el-table-column
              prop="fdlZong"
              label="总">
            </el-table-column>
          </el-table-column>
<!--        效率-->
          <el-table-column label="效率(%)">
            <el-table-column
              prop="efficiency">
            </el-table-column>
          </el-table-column>
        </el-table>
  </div>
</template>


<script>
export default {
  name:'DzjkTjbbDbbb',
  data() {
    return {
      loading:false,
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultDate:'',//默认展示的时间
      search:{db:'',rb:'',date:''},
      dbOptions:[
        {name:'电表1',id:1},
        {name:'电表2',id:2},
        {name:'电表3',id:3},
      ],
      rbOptions:[
        {name:'日报1',id:1},
        {name:'日报2',id:2},
      ],
      tableData:[
        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
      ]
    }
  },
  methods:{
    // 搜索
    onSearch(){
      this.getData()
    },
    // 重置
    onReset(){
      this.search={
        db:'',rb:'',date:''
      }
      this.getData()
    },
    // 获取数据
    getData(){
      this.loading=false
    },
    getSummaries(){

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

<style scoped lang="scss">
.select-container{
  .el-form--inline .el-form-item{
    margin-right: 20px;
  }
}
::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>