yy_rms_39zhiyao_duizhao/src/views/reagent/report/index.vue

<template>
  <div class="content">
    <div class="left">
      <div class="info">
        <div class="info-text title text">库存信息统计</div>
        <div class="info-item">
          <div @click="$router.push('/reagent/report/storeinfo')"><img src="@/assets/4-报表统计/库存信息总览.png" alt=""></div>
          <div @click="$router.push('/reagent/report/warehousinginfo')"><img src="@/assets/4-报表统计/入库信息查询.png" alt=""></div>
          <div @click="$router.push('/reagent/report/reagentinfo')"><img src="@/assets/4-报表统计/试剂信息详情.png" alt=""></div>
        </div>
      </div>
      <div class="use-info">
        <div class="title text">试剂使用统计</div>
        <div class="use-info-content">
          <div class="user-info-text">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/使用频率.png"></div>
            <div class="title text" style="color:#FF9B02 ">使用频率</div>
            <div class="use-count">5,037</div>
            <div class="use-info-total">合计使用频率(次)</div>
            <div>已领用183次，归还180次</div>
            <div>乙醇</div>
          </div>
          <div class="user-info-text">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/入库记录.png"></div>
            <div class="title text" style="color:#409EFF ">入库记录</div>
            <div class="use-count">5,037</div>
            <div class="use-info-total">入库历史记录(条)</div>
            <div>已领用183次，归还180次</div>
            <div>乙醇</div>
          </div>
          <div class="user-info-text">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/领用记录.png"></div>
            <div class="title text" style="color: #1ADCE9">领用记录</div>
            <div class="use-count">5,037</div>
            <div class="use-info-total">领用历史记录(条)</div>
            <div>已领用183次，归还180次</div>
            <div>乙醇</div>
          </div>
          <div class="user-info-text">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/归还记录.png"></div>
            <div class="title text" style="color: #5DDC1D">归还记录</div>
            <div class="use-count">5,037</div>
            <div class="use-info-total">归还历史记录(条)</div>
            <div>已领用183次，归还180次</div>
            <div>乙醇</div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="consume-title title text">试剂消耗用量</div>
      <div class="consume">
        <el-card class="box-card">
          <div slot="header" class="clearfix" @click="$router.push('/reagent/report/inventoryconsuminfo')">
            <span class="text">试剂库存消耗</span>
            <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
          </div>
          <div class="count text">5140</div>
          <div class="desc">截至目前试剂入库总量</div>
          <div style="display: flex;line-height: 30px;text-align: center">
            <div :style="instock"><span>20%</span></div>
            <div :style="lending"><span>20%</span></div>
            <div :style="consume"><span>60%</span></div>
          </div>
          <div class="data-count">
            <div :style="{borderBottom:'4px solid '+ instock.background}">
              <span>在库量</span>
              <span :style="{color:instock.background,float:'right'}">{{ instock.count }}</span>
            </div>
            <div :style="{borderBottom:'4px solid '+ lending.background}">
              <span>借出量</span>
              <span :style="{color:lending.background,float:'right'}">{{ lending.count }}</span>
            </div>
            <div :style="{borderBottom:'4px solid '+ consume.background}">
              <span>消耗量</span>
              <span :style="{color:consume.background,float:'right'}">{{ consume.count }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="consume">
        <el-card class="box-card">
          <div slot="header" class="clearfix" @click="$router.push('/reagent/report/reagentconsuminfo')">
            <span class="text">试剂用量消耗</span>
            <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
          </div>
          <div style="text-align: center;width: 100%">
            <el-progress size="small" type="dashboard" :percentage="percentage" :color="colors" />
          </div>
        </el-card>
      </div>
      <div class="consume">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="text">人员用量消耗</span>
            <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
          </div>
          <div v-for="o in 4" :key="o" class="item">
            {{ '列表内容 ' + o }}
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Report',
  data() {
    return {
      instock: {
        'background': '#409EFF',
        'width': '20%',
        'count': 12485
      },
      lending: {
        'background': '#5DDC1D',
        'width': '20%',
        'count': 12485
      },
      consume: {
        'background': '#FF9B02',
        'width': '60%',
        'count': 12485
      },
      percentage: 10,
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  .left{
    width: 1080px;
    .info{
      .info-item{
        display: flex;
        justify-content: space-between;
        img{
          width: 21.25rem;
        }
      }
    }
    .use-info{
      margin-top: 1rem;
    }
  }
  .right{
    .consume-title{
      margin-left: 1rem;
    }
    .consume{
      margin-bottom: 1rem;
      margin-left: 1rem;
      .box-card{
        width: 33.125rem;
      }
    }
  }
}
.title{
  margin-bottom: 1rem;
}
.text{
  font-size: 1rem;
  font-weight: bold;
  color: #303133
}
.count{
  font-size: 2rem;
  font-weight: bold;
  color: #303133;
}
.desc{
  font-size: 1rem;
  font-weight: 400;
  color: #909399;
  margin-bottom: 1rem;
}
.data-count{
  width: 100%;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  div{
    width: 30%;
  }
}
.user-info-img{
  img{
    width: 3rem;
  }
}
.user-info-text{
  width: 32.5rem;
  background: white;
  padding: 2rem;
  margin-bottom: 2rem;
  div{
    margin-bottom: 0.5rem;
  }
}
.use-info-content{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.use-info-total{
  font-size: 0.7rem;
  font-weight: bold;
  color: #303133;
  padding-bottom: 1rem;
}
.use-count{
  font-size: 2rem;
  font-weight: bold;
  color: #303133;
}
</style>