emsfront/src/views/ems/dzjk/sbjk/bmsdcc/index.vue

<template>
  <div>
    <el-card shadow="always" class="bmszl-common-card-container common-card-container common-card-container-body-no-padding">
      <div slot="header">
        <span class="card-title bmszl-title">1#电池簇</span>
      </div>
      <div class="info-main">
        <el-descriptions direction="vertical" :column="3" :colon="false" border>
          <el-descriptions-item v-for="(item,index) in statusData" :key="index+'pcsStatusData'" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions direction="vertical" :column="3" :colon="false" border>
          <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{item.value}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
        </el-descriptions>
        <!--        进度-->
        <div class="process-container">
          <div class="process-line-bg">
            <div class="process-line"></div>
          </div>
          <div class="process">当前SOC : 25%</div>
        </div>
      </div>
    </el-card>
    <div class="table-container">
      <el-table
        :data="tableData"
        stripe
        max-height="500"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="簇号">
        </el-table-column>
        <el-table-column
          label="簇电压"
        >
          <template slot-scope="scope">
            <span>{{scope.row.voltage}} V</span>
          </template>
        </el-table-column>
        <el-table-column
          label="簇电流">
          <template slot-scope="scope">
            <span>{{scope.row.electric}} A</span>
          </template>
        </el-table-column>
        <el-table-column
          label="簇SOC">
          <template slot-scope="scope">
            <span>{{scope.row.soc}} %</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="maxVoltage"
          label="单体最高电压">
          <template slot-scope="scope">
            <span>{{scope.row.maxVoltage}} V</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="minVoltage"
          label="单体最低电压">
          <template slot-scope="scope">
            <span>{{scope.row.minVoltage}} V</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单体最高温度">
          <template slot-scope="scope">
            <span>{{scope.row.maxTemperature}} &#8451;</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="minTemperature"
          label="单体最低温度">
          <template slot-scope="scope">
            <span>{{scope.row.minTemperature}} &#8451;</span>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  components:{},
  data() {
    return {
      statusData:[
        {label:'工作状态',value:'',attr:''},
        {label:'与PCS通信',value:'',attr:''},
        {label:'与EMS通信',value:'',attr:''},
      ],
      infoData:[
        {label:'簇电压',value:'',attr:'',unit:'V'},
        {label:'可充电量',value:'',attr:'',unit:'kWh'},
        {label:'累计充电量',value:'',attr:'',unit:'kWh'},
        {label:'簇电流',value:'',attr:'',unit:'A'},
        {label:'可放电量',value:'',attr:'',unit:'kWh'},
        {label:'累计放电量',value:'',attr:'',unit:'kWh'},
        {label:'SOH',value:'',attr:'',unit:'%'},
        {label:'平均温度',value:'',attr:'',unit:'&#8451;'},
        {label:'绝缘电阻',value:'',attr:'',unit:'&Omega;'},
      ],
      tableData:[
        {name:'1#电池堆-1#电池簇',voltage:'742.8',electric:'-4.4',soc:'98',maxVoltage:'3.301',minVoltage:'3.102',maxTemperature:'12.8',minTemperature:'11.3'},
        {name:'1#电池堆-2#电池簇',voltage:'790.1',electric:'-4.2',soc:'90',maxVoltage:'3.391',minVoltage:'3.192',maxTemperature:'13.5',minTemperature:'11.4'},
        {name:'1#电池堆-3#电池簇',voltage:'740.3',electric:'-4.5',soc:'94',maxVoltage:'3.101',minVoltage:'3.198',maxTemperature:'10.9',minTemperature:'11.5'},
        {name:'1#电池堆-4#电池簇',voltage:'744.9',electric:'-4.5',soc:'99',maxVoltage:'3.221',minVoltage:'3.234',maxTemperature:'11.4',minTemperature:'11.6'},
      ]
    }
  },

}
</script>

<style scoped lang="scss">
.bmszl-common-card-container{
  ::v-deep{
    .el-card__header{
      background-color: transparent;
      .bmszl-title{
        font-size: 20px;
        font-weight: 500;
        line-height: 40px;
      }
    }
  }
}


//描述列表样式
.info-main{
  padding:14px;
  padding-right:300px;
  position:relative;
  ::v-deep {
    .el-descriptions{
      margin-bottom: 25px;
    }
    .el-descriptions-item__cell[colspan='1']{
      width:25%
    }
    .el-descriptions-item__label{
      line-height: 14px;
      color: #666666;
      font-size: 12px;
    }
    .el-descriptions-item__content{
      line-height: 19px;
      color: #666666;
      font-size: 16px;
      font-weight: 500;
    }
    .danger{
      color:#FC6B69;
    }
    .save{
      color:#09ADA3;
    }
    .keep{
      color:#3C81FF;
    }
  }
//  进度条样式
  .process-container{
    width:100px;
    position: absolute;
    right:70px;
    top:50%;
    transform: translateY(-50%);
    .process-line-bg{
      position: relative;
      width:100%;
      height: 110px;
      background-color:#fff2cb ;
      border-radius: 6px;
      box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
      .process-line{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 25%;
        background-color: #ffbf14;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
      }
    }
    .process{
      margin-top:15px;
      color:#666666;
    }
  }
}


//表格样式
.table-container{
  margin-top:25px;
  ::v-deep{
    .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
      border-bottom: none;
    }
    .el-table .el-table__header-wrapper th{
      background-color: #f1f5fc;
    }
    .table-head{
      color:#515a6e;
    }
  }
}
</style>