SD-party-school/src/components/SD-school/access-control/index.vue

<template>
  <el-row class="mianBox">
    <el-row class="headerBox">
      <el-col class="title">
        <img src="../../../assets/image/arrow.png" alt="" />
         {{resInfo.typeName || ''}}
      </el-col>
    </el-row>
    <el-row class="threeBox">
      <div class="flexBoxE">
        <el-row>
          <el-col style="margin-bottom: 50px;">
            <span>进门总数</span>
            <div class="progress">
              <div class="percentage" 
              :style="{
                width: (resList.length > 0 && resList.reduce((a, b) => a + b.into, 0) / resList.reduce((a, b) => a + b.into + b.out, 0) * 100 || 0) + '%', 
                background: `linear-gradient(to right, #C41825 0%,#E4AB33 100%)`
                }"></div>
              <span class="percentageValue">{{resList.length > 0 && resList.reduce((a, b) => a + b.into, 0) || 0}}</span>
            </div>
          </el-col>
          <el-col>
            <span>出门总数</span>
            <div class="progress">
              <div class="percentage" 
              :style="{
                width: (resList.length > 0 && resList.reduce((a, b) => a + b.out, 0) / resList.reduce((a, b) => a + b.into + b.out, 0) * 100 || 0) + '%', 
                background: `linear-gradient(to right, #1C2AB0 0%,#33B8E4 100%)`
              }"></div>
              <span class="percentageValue">
                {{resList.length > 0 && resList.reduce((a, b) => a + b.out, 0) || 0}}
              </span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>
  </el-row>
</template>

<script>
export default {
  props:['resInfo'],
  data() {
    return {
      resList:[]
    };
  },
  watch: {
    resInfo(){
      this.getData()
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
    async getData(){
       let res = await this.$axios.get(this.resInfo.apiAddr + '?' +this.$qs.stringify({
        applicationCode: this.resInfo.applicationCode
      }))
      if(res.success){
        this.resList = res.data
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mianBox {
  background: url("../../../assets/image/view2.png") no-repeat;
  background-size: 100% 100%;
  .threeBox {
    width: 100%;
    flex: 1;
    padding: 0 20px;
    box-sizing: border-box;
    & > .flexBoxE {
      width: 100%;
      height: 100%;
      & > .el-row {
        width: 100%;
        height: 100%;
        font-size: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .el-col {
          display: flex;
          span {
            margin-right: 10px;
            color: #00FCF9;
          }
          .progress {
            flex: 1;
            height: 25px;
            display: flex;
            .percentage{
              height: 100%;
            }
            .percentageValue{
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}
</style>