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

<template>
  <div>
    <!--    搜索栏-->
    <div class="select-container">
      <el-form :inline="true">
        <el-form-item label="电池堆">
          <el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电池簇">
          <el-select v-model="search.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dccOptions" :key="index+'dccOptions'"></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>
    <div style="margin:30px 0;">
      <!--表格-->
      <el-table
          class="common-table"
          :data="tableData"
          stripe
          max-height="500"
          style="width: 100%;margin-top:25px;">
          <el-table-column
            prop="time"
            width="100"
            label="时间">
          </el-table-column>
          <el-table-column
            prop="maxTemp"
            label="最高温（℃）">
          </el-table-column>
          <el-table-column
            prop="maxTempDtId"
            label="单体ID">
          </el-table-column>
          <el-table-column
            prop="minTemp"
            label="最低温（℃）">
          </el-table-column>
          <el-table-column
            prop="minTempDtId"
            label="单体ID">
          </el-table-column>
          <el-table-column
            prop="maxPressure"
            label="最高压（V）">
          </el-table-column>
          <el-table-column
            prop="maxPressureDtId"
            label="单体ID">
          </el-table-column>
          <el-table-column
            prop="minTemp"
            label="最低压（V）">
          </el-table-column>
          <el-table-column
            prop="minPressureDtId"
            label="单体ID">
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>


<script>
export default {
  name:'DzjkTjbbDcwd',
  data() {
    return {
      loading:false,
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      defaultDate:'',//默认展示的时间
      search:{dcd:'',dcc:'',date:''},
      dcdOptions:[
        {name:'电池堆1',id:1},
        {name:'电池堆2',id:2},
        {name:'电池堆3',id:3},
      ],
      dccOptions:[
        {name:'电池簇1',id:1},
        {name:'电池簇2',id:2},
      ],
      tableData:[
        {time:'00:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
        {time:'01:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
        {time:'02:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
        {time:'03:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
        {time:'04:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
        {time:'05:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
        {time:'06:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
        {time:'07:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
      ]
    }
  },
  methods:{
    // 搜索
    onSearch(){
      this.getData()
    },
    // 重置
    onReset(){
      this.search={
        dcd:'',dcc:'',date:''
      }
      this.getData()
    },
    // 获取数据
    getData(){
      this.loading=false
    },
  },
  mounted(){
    this.getData()
    this.defaultDate = new Date()
  }
}
</script>

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

</style>