// 周转率
<template>
  <div class="daily">
    <div class="reportcom-header-wap">
      <div class="reportcom-header">
        <!-- <div class='reportcom-logo'>
          <img src="../../assets/longjoe.png" class="reportcom-img-responsive"></img>
        </div> -->
        <div class="reportcom-header-title" style="font-size:28px">周转统计表</div>
        <div class="reportcom-header-title" style="font-size:18px">2019.01 ~ 2019.06
          <span style="font-size:15px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xuanze1"></use>
            </svg>
          </span>
          <span style="font-size:12px;line-height:24px;margin-left:5px">共6个月</span>
        </div>
      </div>
      <div class="reportcom-header-sub"></div>
      <div class="reportcom-header-sub-two"></div>
    </div>

    <!-- <div class="report_selection">
      <div class='report_selection_check'>销售额</div>
      <div style="margin-left:50px">利润</div>
    </div> -->



    <div class="daily-sale">

      <div style="font-size:14px;display:flex;margin-left:15px">
        <div style="width:85px;text-align: right">期初金额：</div>
        <div style="width:55px">30万</div>
        <div style="margin-left:10px;width:85px">期间进金额：</div>
        <div style="width:85px">760万</div>
      </div>

      <div style="font-size:14px;display:flex;margin-left:15px">
        <div style="width:85px;text-align: right">结余金额：</div>
        <div style="width:55px">20万</div>
        <div style="margin-left:10px;width:85px;text-align: right;">期间出金额：</div>
        <div>770万</div>
      </div>

      <div class="img_wap">
        <div style="flex:0 0 90%;margin: 0 auto;">
          <img src="../../assets/zhutu_ito_0620_01.jpg" class="img-bingtu"></img>
        </div>
      </div>

      <div class="liubai"></div>


      <div style="font-size:14px;display:flex;margin-left:15px">
        <div style="margin: 0 auto;">周转率：10</div>
      </div>

      <div class="img_wap">
        <div style="flex:0 0 90%;margin: 0 auto;">
          <img src="../../assets/zhexian_ito_0620_01.jpg" class="img-bingtu"></img>
        </div>
      </div>

      <div class="liubai"></div>


      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">
        <div style="margin:0 auto">车间</div>
      </div>

      <div style="padding:0 10px">
        <div
          style="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666">
          <div style="flex:0 0 17%;text-align: center;">车间</div>
          <div style="flex:0 0 16%;text-align: center;">期初</div>
          <div style="flex:0 0 16%;text-align: center;">期间进</div>
          <div style="flex:0 0 16%;text-align: center;">期间出</div>
          <div style="flex:0 0 16%;text-align: center">结余</div>
          <div style="flex:0 0 16%;text-align: center;">周转率</div>
        </div>

        <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;"
          v-for="(wkpitem,index) in wkplist" :key="index">
          <div style="flex:0 0 17%;text-align: center;">{{wkpitem.wkpname}}</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.totalamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.avgtotalamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.areaamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.avgamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.ito}}</div>
        </div>
      </div>
      <div style="font-size:12px;color:#666;margin: 10px 0 10px 20px">*点击可查看各车间每月详情数据</div>

      <div class="liubai"></div>

      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">
        <div style="margin:0 auto">仓库</div>
      </div>

      <div style="padding:0 10px">
        <div
          style="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666">
          <div style="flex:0 0 17%;text-align: center;">仓库分类</div>
          <div style="flex:0 0 16%;text-align: center;">期初</div>
          <div style="flex:0 0 16%;text-align: center;">期间进</div>
          <div style="flex:0 0 16%;text-align: center;">期间出</div>
          <div style="flex:0 0 16%;text-align: center">结余</div>
          <div style="flex:0 0 16%;text-align: center;">周转率</div>
        </div>

        <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:13px;"
          v-for="(wkpitem,index) in storagelist" :key="index">
          <div style="flex:0 0 17%;text-align: center;">{{wkpitem.storagename}}</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.totalamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.avgtotalamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.areaamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.avgamt}}万</div>
          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.ito}}</div>
        </div>
      </div>
      <div style="font-size:12px;color:#666;margin: 10px 0 10px 20px">*点击可查看各仓库每月详情数据</div>

    </div>

    <div class="report_other">
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tishi"></use>
        </svg>
        您还可以查看其它报表：</div>
      <div class="report_other_link">产值统计表</div>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'daily',
    data() {
      return {
        reporttype: 2, //0-业务员销售排名统计表 1-客户销售排名统计表 2-产品销售排名统计表
        wkplist: [{
            wkpname: "转椅车间",
            totalamt: 20,
            avgtotalamt: 400,
            areaamt: 410,
            avgamt: 10,
            ito:10
          },
          {
            wkpname: "注塑车间",
            totalamt: 10,
            avgtotalamt: 360,
            areaamt: 360,
            avgamt: 10,
            ito:10
          }
        ],
        storagelist:[
            {
            storagename: "A类",
            totalamt: 20,
            avgtotalamt: 300,
            areaamt: 310,
            avgamt: 10,
            ito:10
          },
          {
            storagename: "B类",
            totalamt: 10,
            avgtotalamt: 260,
            areaamt: 260,
            avgamt: 10,
            ito:10
          },
          {
            storagename: "C类",
            totalamt: 10,
            avgtotalamt: 200,
            areaamt: 200,
            avgamt: 10,
            ito:10
          }
        ]
       
      }
    }
  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    font-family: "微软雅黑";
  }

  .img_wap {
    display: flex;
    margin-top: 10px;
  }

  .img-bingtu {
    width: 100%;
  }

  .reportcom-header-wap {
    width: 100%;
    height: 150px;
    overflow: hidden;
  }

  .reportcom-header {
    width: 120%;
    height: 100px;
    background-color: #fd9153;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    position: relative;
    left: -10%;
    padding: 10px 0;
    margin-bottom: 10px;
    z-index: 9999;
  }

  .reportcom-header-sub {
    width: 130%;
    height: 98px;
    background-color: #ffba92;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    position: relative;
    top: -120px;
    left: -23%;
    padding: 10px 0;
    margin-bottom: 10px;
    z-index: 9998;
  }

  .reportcom-header-sub-two {
    width: 140%;
    height: 98px;
    background-color: #fddecc;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    position: relative;
    top: -240px;
    left: -35%;
    padding: 10px 0;
    margin-bottom: 10px;
    z-index: 9997;
  }

  .reportcom-logo {
    width: 60%;
    position: relative;
    left: 10%;
  }

  .reportcom-img-responsive {
    display: inline-block;
    height: auto;
    max-width: 60%;
  }

  .reportcom-header-title {
    position: relative;
    left: 13%;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    /* margin: 10px 0; */
  }

  .report_selection {
    display: flex;
    /* align-items: center; */
    /* margin-left: 33%; */
    width: 150px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
  }

  .report_selection div {
    /* margin-right: 20px; */
    padding-bottom: 3px;
  }

  .report_selection_check {
    border-bottom: 5px solid #fd7526;
  }


  .daily-sale-title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 20px;
  }

  .daily-sale-amt {
    margin-left: 30px;
    font-size: 15px;
  }

  .daily-sale-amt-value {
    font-size: 18px;
    font-weight: bold;
    color: #fd7526
  }

  .daily-sale-cust {
    margin: 10px 20px;
    font-size: 16px;
    font-weight: bold;

  }

  .daily-sale-cust-list {
    display: flex;
    padding: 4px 0 4px 0;
  }

  .daily-sale-cust-title {
    font-weight: bold;
    color: #606060;
  }

  .daily-sale-cust-index {
    flex: 0 0 10%;
    text-align: center;
    font-size: 22px;
    font-family: 'Courier New', Courier, monospace
  }

  .daily-sale-cust-name {
    flex: 0 0 80%;
  }

  .daily-sale-cust-name-pz {
    font-size: 13px;
    color: #606060;
  }

  .daily-sale-cust-amt {
    flex: 0 0 45%;
    /* text-align: center; */
    color: #f5772f;
  }

  .saler_percent {
    color: #606060;
    font-size: 13px
  }

  .daily-money-account-in {
    color: #ff2f2f
  }

  .daily-money-account-out {
    color: #31b831;
    margin-left: 20px;
  }

  .daily_liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
    margin: 10px 0;
  }

  .report_other {
    background-color: rgb(246, 246, 246);
    padding: 10px 15px;
    margin: 20px 10px;
    font-size: 14px;
    border-radius: 15px;
    color: #666
  }

  .report_other div {
    padding: 4px 0 4px 0
  }

  .report_other_link {
    color: #6495ed;
    margin-left: 18px;
  }

  .liubai {
    width: 100%;
    height: 10px;
    background-color: rgb(246, 246, 246);
    margin: 10px 0;
  }

</style>
