//在进行出口订单异常统计表
<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:25px;margin-top:10px">在进行出口订单异常统计表</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>
        </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:16px;font-weight:bold;color:#666;">
        <div style="margin:0 15px">
          <span>超期单据4张 涉及2个客户 金额 200万</span>
        </div>
        <div style="margin:0 15px">
          <span>异常单据6张 涉及4个客户 金额 300万</span>
        </div>
      </div>

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

      <div style="color:#666;font-size:12px;margin:5px 0 0 15px">*超期 指已超过了订单交货日期</div>
      <div style="color:#666;font-size:12px;margin-left:15px">*异常 指未到交货日期，但订单工作任务未按时完成</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:10px 15px 5px 15px;font-size:13px;border-top: 1px solid #eee"
        v-for="(ditem,index) in delaylist" :key="index">
        <div style="display:flex">
          <div style="flex:0 0 60%">订单编号：{{ditem.taskcode}}</div>
          <div style="position: absolute;right:20px">相关号{{ditem.relcode}}</div>
        </div>
        <div>客户名称：{{ditem.cusname}}</div>
        <div style="display:flex">
          <div style="flex:0 0 70%;color:#f00">交货日期：{{ditem.rqdate}} 已超期 {{ditem.dday}} 天</div>
          <div style="position: absolute;right:20px">业务员：{{ditem.saler}}</div>
        </div>
        <div style="display:flex">
          <div>共2000件商品</div>
          <div style="position: absolute;right:20px;color:#ff6000;font-weight:bold">￥50万</div>
        </div>
        <div style="color:#888">包括：电竞椅S-150 500张；经理椅NF-8927 300张...</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:10px 15px 5px 15px;font-size:13px;border-top: 1px solid #eee" v-for="(ycitem,index) in yclist"
        :key="index">
        <div style="display:flex">
          <div style="flex:0 0 60%">订单编号：{{ycitem.taskcode}}</div>
          <div style="position: absolute;right:20px">相关号：{{ycitem.relcode}}</div>
        </div>
        <div>客户名称：{{ycitem.cusname}}</div>
        <div style="display:flex">
          <div>交货日期：2019-06-30</div>
          <div style="position: absolute;right:20px">业务员：{{ycitem.saler}}</div>
        </div>
        <div style="color:#f00">当前任务：{{ycitem.tname}} 计划{{ycitem.trqdate}}完成 已超期{{ycitem.dday}}天</div>
        <div style="color:#f00" v-if="index < 2">材料 W-76再生棉/D50 计划{{ycitem.trqdate}}到厂 已超期{{ycitem.dday}}天</div>
        <div style="display:flex">
          <div>共2000件商品</div>
          <div style="position: absolute;right:20px;color:#ff6000;font-weight:bold">￥50万</div>
        </div>
        <div style="color:#888">包括：电竞椅S-150 500张；经理椅NF-8927 300张...</div>
      </div>

      <div style="display:flex">
        <div style="font-size:14px;color:#6495ed;margin: 10px auto">查看更多销售订单信息</div>
      </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 class="report_other_link">出口订单收款统计表</div>
      <div class="report_other_link">销售准交统计表</div>

    </div>

  </div>
</template>
<script>
  export default {
    name: 'daily',
    data() {
      return {
        delaylist: [{
          taskcode: "SG190601002",
          relcode: "AX1900001",
          cusname: "英国王室有限公司",
          saler: "李小四",
          rqdate: "2019-06-16",
          dday: 4
        }, {
          taskcode: "SG190604016",
          relcode: "AX1900002",
          cusname: "德国战车有限公司",
          saler: "张小姗",
          rqdate: "2019-06-17",
          dday: 3
        }, {
          taskcode: "SG190605022",
          relcode: "AX1900003",
          cusname: "德国战车有限公司",
          saler: "张小姗",
          rqdate: "2019-06-18",
          dday: 2
        }, {
          taskcode: "SG190606009",
          relcode: "AX1900004",
          cusname: "英国王室有限公司",
          saler: "李小四",
          rqdate: "2019-06-19",
          dday: 1
        }],
        yclist: [{
          taskcode: "SG190610009",
          relcode: "AX1900005",
          cusname: "英国王室有限公司",
          saler: "李小四",
          trqdate: "2019-06-18",
          tname: "收唛头",
          dday: 2
        }, {
          taskcode: "SG190611003",
          relcode: "AX1900006",
          cusname: "英国王室有限公司",
          saler: "李小四",
          trqdate: "2019-06-18",
          tname: "收唛头",
          dday: 2
        }, {
          taskcode: "SG190611005",
          relcode: "AX1900007",
          cusname: "俄罗斯老铁有限公司",
          saler: "王小五",
          trqdate: "2019-06-18",
          tname: "报关",
          dday: 2
        }, {
          taskcode: "SG190612011",
          relcode: "AX1900008",
          cusname: "沙特石油王子有限公司",
          saler: "张小姗",
          trqdate: "2019-06-19",
          tname: "订柜",
          dday: 1
        }, {
          taskcode: "SG190612015",
          relcode: "AX1900009",
          cusname: "沙特石油王子有限公司",
          saler: "张小姗",
          trqdate: "2019-06-19",
          tname: "订柜",
          dday: 1
        }, {
          taskcode: "SG190612015",
          relcode: "AX1900010",
          cusname: "德国战车有限公司",
          saler: "张小姗",
          trqdate: "2019-06-19",
          tname: "订唛头料",
          dday: 1
        }]
      }
    }
  }

</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>
