cofortest-frontend/src/pages/Statistics/components/Count.vue

<template>
  <div style="text-align:left; color: #dddddd; padding-right: 40px; padding-top: 40px; padding-bottom: 40px;">
    <el-row style="height: 30%;width: 100%;">
      <el-col :offset="2" :xs="24" :sm="24" :lg="5" style="height: 100%;">
        <p class="title1">众测工人</p>
        <p class="title2">
          <label>{{countDatas.testerCount}}</label>
          <label>人</label>
        </p>
      </el-col>
      <el-col :offset="2" :xs="24" :sm="24" :lg="5" style="height: 100%;">
        <p class="title1">注册企业</p>
        <p class="title2">
          <label>{{countDatas.companyCount}}</label>
          <label>家</label>
        </p>
      </el-col>
      <el-col :offset="2" :xs="24" :sm="24" :lg="5" style="height: 100%;">
        <p class="title1">注册机构</p>
        <p class="title2">
          <label>{{countDatas.orgCount}}</label>
          <label>家</label>
        </p>
      </el-col>
    </el-row>
    <el-row style="height: 40%;width: 100%;">
      <el-col :offset="2" :xs="24" :sm="24" :lg="5" style="height: 100%;">
        <p class="title1">众测项目</p>
        <p class="title3">
          <label>累计</label>
          <label class="title3-color1">{{countDatas.projectCount}}</label>
          <label>项</label>
        </p>
        <p class="title3">
          <label>当月新增</label>
          <label class="title3-color1">{{countDatas.newProjectCount}}</label>
          <label>项</label>
        </p>
      </el-col>
      <el-col :offset="2" :xs="24" :sm="24" :lg="5" style="height: 100%;">
        <p class="title1">众测任务</p>
        <p class="title3">
          <label>累计</label>
          <label class="title3-color1">{{countDatas.taskCount}}</label>
          <label>项</label>
        </p>
        <p class="title3">
          <label>当月新增</label>
          <label class="title3-color1">{{countDatas.newTaskCount}}</label>
          <label>项</label>
        </p>
      </el-col>
      <el-col :offset="2" :xs="24" :sm="24" :lg="6" style="height: 100%;">
        <p class="title1">参与众测人次</p>
        <p class="title3">
          <label>累计</label>
          <label class="title3-color1">{{countDatas.testerJoinCount}}</label>
          <label>人次</label>
        </p>
        <p class="title3">
          <label>当月新增</label>
          <label class="title3-color1">{{countDatas.newTesterJoinCount}}</label>
          <label>人次</label>
        </p>
      </el-col>
    </el-row>
    <el-row style="height: 40%;width: 100%;">
      <el-col :offset="2" :xs="24" :sm="24" :lg="5" style="height: 100%;">
        <p class="title1">提交测试用例</p>
        <p class="title3">
          <label>累计</label>
          <label class="title3-color2">{{countDatas.testCaseCount}}</label>
          <label>个</label>
        </p>
        <p class="title3">
          <label>当月新增</label>
          <label class="title3-color2">{{countDatas.newTestCaseCount}}</label>
          <label>个</label>
        </p>
      </el-col>
      <el-col :offset="2" :xs="24" :sm="24" :lg="5" style="height: 100%;">
        <p class="title1">提交缺陷</p>
        <p class="title3">
          <label>累计</label>
          <label class="title3-color2">{{countDatas.defectCount}}</label>
          <label>个</label>
        </p>
        <p class="title3">
          <label>当月新增</label>
          <label class="title3-color2">{{countDatas.newDefectCount}}</label>
          <label>个</label>
        </p>
      </el-col>
      <el-col :offset="2" :xs="24" :sm="24" :lg="6" style="height: 100%;">
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Count',
  data: function () {
    return {
      countDatas: {}
    }
  },
  props: {
    counts: {
      type: Object,
      required: true
    }
  },
  watch: {
    counts: {
      handler: function (nv, ov) {
        this.countDatas = nv
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.title1 {
  font-weight: bold;
  font-size: 14px;
}
.title2 {
  label:nth-child(1) {
    margin-left: 8px;
    font-weight: bold;
    font-size: 24px;
    color: #4dd9d5;
  }
  label:nth-child(2) {
    font-weight: bold;
    font-size: 6px;
  }
}
.title3 {
  label:nth-child(1) {
    font-weight: bold;
    font-size: 10px;
  }
  label:nth-child(2) {
    margin-left: 10px;
    font-weight: bold;
    font-size: 24px;
  }
  label:nth-child(3) {
    font-weight: bold;
    font-size: 6px;
  }
  .title3-color1 {
    color: red;
  }
  .title3-color2 {
    color: green;
  }
}
</style>