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

<template>
  <div>
    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
      <div slot="header">
        <span class="large-title">电池堆一</span>
      </div>
      <div class="descriptions-main">
        <el-descriptions direction="vertical" :column="3" :colon="false">
          <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="1" label="工作状态" >放电</el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">正常</el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">正常</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="descriptions-main descriptions-main-bg-color">
        <el-descriptions direction="vertical" :column="3" :colon="false">
          <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" 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
        style="width: 100%;">
        <el-table-column
          prop=""
          label="名称">
          <template slot-scope="scope">
            <span v-html="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="average"
          label="单体平均值"
        >
        </el-table-column>
        <el-table-column
          prop="min"
          label="单体最小值">
        </el-table-column>
        <el-table-column
          prop="minID"
          label="单体最小值ID">
        </el-table-column>
        <el-table-column
          prop="max"
          label="单体最大值">
        </el-table-column>
        <el-table-column
          prop="maxID"
          label="单体最大值ID">
        </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:'742',attr:'',unit:'V'},
        {label:'可充电量',value:'100',attr:'',unit:'kWh'},
        {label:'累计充电量',value:'100',attr:'',unit:'kWh'},
        {label:'电池堆总电流',value:'-12.7',attr:'',unit:'A'},
        {label:'可放电量',value:'300',attr:'',unit:'kWh'},
        {label:'累计放电量',value:'300',attr:'',unit:'kWh'},
        {label:'SOH',value:'99',attr:'',unit:'%'},
        {label:'平均温度',value:'20',attr:'',unit:'&#8451;'},
        {label:'绝缘电阻',value:'1000',attr:'',unit:'&Omega;'},
      ],
      tableData:[
        {name:'电压（V）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
        {name:'温度（&#8451;）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
        {name:'SOC（%）',average:'20',min:10,minID:'1',max:'30',maxID:'2'},
      ]
    }
  },

}
</script>

<style scoped lang="scss">
::v-deep {
  //描述列表样式
  .descriptions-main {
    padding: 24px 300px 24px 24px;

    .descriptions-main-bg-color {
      padding: 14px 300px 14px 24px;
    }
  }
}
//  进度条样式
.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: #fc6c6c;
      border-radius: 0 0 6px 6px;
      box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 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;
    }
    .table-head{
      color:#515a6e;
    }
  }
}
</style>