报表设计

src/pages/quoteedit.vue

@@ -569,7 +569,7 @@
     name: 'quoteedit',
     data() {
       return {
-        ifch: 0, //选择配置 0-没有显示  1-显示 
+        ifch: 1, //选择配置 0-没有显示  1-显示 
         ifusd: 0, //0-人民币 1-美元
         ifcust: 1, //0-只显示客户编码 1-显示客户名称地址
         ifshow: 0 //0-不显示数量优惠条件 1-显示

src/pages/report/ito.vue

@@ -0,0 +1,405 @@
+// 周转率
+<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>

src/pages/report/itomx.vue

@@ -0,0 +1,307 @@
+// 周转率明细
+<template>
+  <div>
+    <div :class="colortop"></div>
+    <div style="display:flex;">
+      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==0">车间周转明细</div>
+      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==1">仓库周转明细</div>
+      <div class="reportdetail_mx_subtitle">2019年1月~2019年6月
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xuanze1"></use>
+        </svg></div>
+    </div>
+
+    <!-- 车间信息 -->
+    <div class="reportmx_main" v-if="reporttype == 0">
+      <div style="font-size:24px;font-weight:bold">转椅车间</div>
+      <!-- <div style="font-size:14px;color:#f20;margin-top:5px;display:flex">
+        <div style="flex:0 0 45%">总产值 5530 万</div>
+        <div style="margin-left:10px">月均产值 921.67万</div>
+      </div>
+      <div style="font-size:14px;color:#666;display:flex">
+        <div style="flex:0 0 45%">每平方总产值 30万</div>
+        <div style="margin-left:10px">每平方月均产值 5万</div>
+      </div>
+      <div style="font-size:14px;color:#666;display:flex">
+        <div style="flex:0 0 45%">人均总产值 7.2万</div>
+        <div style="margin-left:10px">人均月产值 1.2万</div>
+      </div> -->
+
+
+      <div style="font-size:14px;display:flex;margin: 5px 0 0 10px">
+        <div style="width:85px;text-align: right">期初金额：</div>
+        <div style="width:55px">30万</div>
+        <div style="margin-left:10px;width:95px;text-align: right;">期间进金额：</div>
+        <div >760万</div>
+      </div>
+
+      <div style="font-size:14px;display:flex;margin-left:10px">
+        <div style="width:85px;text-align: right">结余金额：</div>
+        <div style="width:55px">20万</div>
+        <div style="margin-left:10px;width:95px;text-align: right;">期间出金额：</div>
+        <div>770万</div>
+      </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="padding:0 0 20px 0">
+      <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="display:flex;font-size:13px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666"
+        v-if="reporttype == 0">
+          <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:12px;"
+        v-for="(wkpitem,index) in wkplist" :key="index" v-if="reporttype == 0">
+        <div style="flex:0 0 17%;text-align: center;">{{wkpitem.month}}</div>
+          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.totalamt}}万</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.gzamt}}万</div>
+          <div style="flex:0 0 16%;text-align: center;">{{wkpitem.ito}}</div>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        reporttype: 0, //0-车间明细 1-工组明细
+        wkplist: [{
+            month: "1月",
+            totalamt: 30,
+            areaamt: 100,
+            avgamt: 120,
+            gzamt: 10,
+            avggzamt: 6000,
+            ito:5
+          },
+          {
+            month: "2月",
+            totalamt: 10,
+            areaamt: 150,
+            avgamt: 110,
+            gzamt: 50,
+            avggzamt: 5000,
+            ito:8
+          },
+          {
+            month: "3月",
+            totalamt: 50,
+            areaamt: 120,
+            avgamt: 100,
+            gzamt: 70,
+            avggzamt: 8000,
+            ito:10
+          },
+          {
+            month: "4月",
+            totalamt: 70,
+            areaamt: 130,
+            avgamt: 160,
+            gzamt: 40,
+            avggzamt: 9000,
+            ito:8
+          },
+          {
+            month: "5月",
+            totalamt: 40,
+            areaamt: 110,
+            avgamt: 140,
+            gzamt: 10,
+            avggzamt: 10000,
+            ito:7
+          },
+          {
+            month: "6月",
+            totalamt: 10,
+            areaamt: 150,
+            avgamt: 140,
+            gzamt: 20,
+            avggzamt: 12000,
+            ito:12
+          }
+        ]
+      }
+    },
+    computed: {
+      colortop: function () {
+        return {
+          kindred: this.reporttype == 0,
+          kindblue: this.reporttype == 1,
+          kindgreen: this.reporttype == 2
+        };
+      },
+      colortitle: function () {
+        return {
+          bgred: this.reporttype == 0,
+          bgblue: this.reporttype == 1,
+          bggreen: this.reporttype == 2
+        };
+      }
+    }
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .img_wap {
+    display: flex;
+    margin-top: 20px;
+  }
+
+  .img-bingtu {
+    width: 100%;
+  }
+
+  .reportdetail_mx_bar {
+    /* border-top: 8px solid rgb(0, 132, 161); */
+  }
+
+  .kindblue {
+    border-top: 8px solid #0195da;
+  }
+
+  .kindgreen {
+    border-top: 8px solid #88b04b;
+  }
+
+  .kindred {
+    border-top: 8px solid #ff6f61;
+  }
+
+  .bgblue {
+    background-color: rgb(1, 149, 218);
+  }
+
+  .bggreen {
+    background-color: rgb(136, 176, 75);
+  }
+
+  .bgred {
+    background-color: rgb(255, 111, 97)
+  }
+
+  .reportdetail_mx_title {
+    color: white;
+    font-size: 15px;
+    font-weight: bold;
+    padding: 3px 8px;
+    margin-left: 20px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
+  .reportdetail_mx_subtitle {
+    position: absolute;
+    right: 10px;
+    padding: 3px;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 20px;
+    color: grey;
+    margin-top: 3px;
+  }
+
+  .reportmx_main {
+    margin: 5px 10px 0 20px;
+  }
+
+  .reportmx_mx {
+    margin: 0 10px 0 10px;
+    padding: 0 0 20px 0;
+  }
+
+  .liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 10px 0;
+  }
+
+  .reportdetail_mx_for {
+    display: flex;
+    /* margin: 5px 0 15px 10px; */
+    align-items: center;
+
+    padding: 5px 0 5px 0
+  }
+
+  .mx_border {
+    border-bottom: 1px solid #eee;
+  }
+
+  .reportdetail_mx_index {
+    flex: 0 0 10%;
+    text-align: center;
+    /* align-items: center; */
+    font-size: 20px;
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bold;
+
+  }
+
+  .reportdetail_mx_name {
+    flex: 0 0 80%;
+    font-size: 15px;
+    font-weight: bold
+  }
+
+  .reportdetail_mx_mode {
+    font-size: 13px;
+    color: #666
+  }
+
+  .reportdetail_mx_amt {
+    font-size: 15px;
+    font-weight: bold;
+    color: #fd7526
+  }
+
+  .reportdetail_mx_qty {
+    margin-left: 20px;
+    font-size: 15px;
+    color: #666
+  }
+
+</style>

src/pages/report/producemx.vue

@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <div :class="colortop"></div>
+    <div style="display:flex;">
+      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==0">车间明细</div>
+      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==1">工组明细</div>
+      <div class="reportdetail_mx_subtitle">2019年1月~2019年6月
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xuanze1"></use>
+        </svg></div>
+    </div>
+
+    <!-- 车间信息 -->
+    <div class="reportmx_main" v-if="reporttype == 0">
+      <div style="font-size:24px;font-weight:bold">转椅车间</div>
+      <div style="font-size:14px;color:#f20;margin-top:5px;display:flex">
+        <div style="flex:0 0 45%">总产值 5530 万</div>
+        <div style="margin-left:10px">月均产值 921.67万</div>
+      </div>
+      <div style="font-size:14px;color:#666;display:flex">
+        <div style="flex:0 0 45%">每平方总产值 30万</div>
+        <div style="margin-left:10px">每平方月均产值 5万</div>
+      </div>
+      <div style="font-size:14px;color:#666;display:flex">
+        <div style="flex:0 0 45%">人均总产值 7.2万</div>
+        <div style="margin-left:10px">人均月产值 1.2万</div>
+      </div>
+    </div>
+
+    <!-- 工组信息 -->
+    <div class="reportmx_main" v-if="reporttype == 1">
+      <div style="font-size:24px;font-weight:bold">裁剪组</div>
+      <div style="font-size:14px;color:#f20;margin-top:5px;display:flex">
+        <div style="flex:0 0 35%">总工资 48 万</div>
+        <div style="margin-left:10px">月均工资 8万</div>
+      </div>
+      <div style="font-size:14px;color:#666">
+        <span>人均月工资 8000</span>
+      </div>
+    </div>
+
+    <!-- 折线图 -->
+    <div class="img_wap">
+      <div style="flex:0 0 90%;margin: 0 auto;">
+        <img src="../../assets/zhexian_mx_0620_01.jpg" class="img-bingtu" v-if="reporttype == 0"></img>
+        <img src="../../assets/zhexian_mx_0620_02.jpg" class="img-bingtu" v-if="reporttype == 1"></img>
+      </div>
+    </div>
+
+    <div class="liubai"></div>
+
+    <div style="padding:0 0 20px 0">
+      <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="display:flex;font-size:14px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666"
+        v-if="reporttype == 0">
+        <div style="flex:0 0 25%;text-align: center;">月份</div>
+        <div style="flex:0 0 25%;text-align: center;">产值</div>
+        <div style="flex:0 0 25%;text-align: center;">每平方产值</div>
+        <div style="flex:0 0 25%;text-align: center;">人均产值</div>
+      </div>
+
+      <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:14px;"
+        v-for="(wkpitem,index) in wkplist" :key="index" v-if="reporttype == 0">
+        <div style="flex:0 0 25%;text-align: center;">{{wkpitem.month}}</div>
+        <div style="flex:0 0 25%;text-align: center;">{{wkpitem.totalamt}}万</div>
+        <div style="flex:0 0 25%;text-align: center;">{{wkpitem.areaamt}}万</div>
+        <div style="flex:0 0 25%;text-align: center;">{{wkpitem.avgamt}}万</div>
+      </div>
+
+      <!-- 工组明细 -->
+      <div style="display:flex;font-size:14px;margin-top:5px;border-bottom: 1px solid #eee;padding:0 0 5px 0;color:#666"
+        v-if="reporttype == 1">
+        <div style="flex:0 0 33%;text-align: center;">月份</div>
+        <div style="flex:0 0 33%;text-align: center;">工资</div>
+        <div style="flex:0 0 33%;text-align: center;">人均工资</div>
+      </div>
+
+      <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:14px;"
+        v-for="(wkpitem,index) in wkplist" :key="index" v-if="reporttype == 1">
+        <div style="flex:0 0 33%;text-align: center;">{{wkpitem.month}}</div>
+        <div style="flex:0 0 33%;text-align: center;">{{wkpitem.gzamt}}万</div>
+        <div style="flex:0 0 33%;text-align: center;">{{wkpitem.avggzamt}}</div>
+      </div>
+
+        <!-- <div style="color:#666;font-size:12px;margin:10px 0 0 15px">*单位：元</div> -->
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        reporttype: 0, //0-车间明细 1-工组明细
+        wkplist: [{
+            month: "1月",
+            totalamt: 900,
+            areaamt: 4,
+            avgamt: 1,
+            gzamt: 6,
+            avggzamt: 6000
+          },
+          {
+            month: "2月",
+            totalamt: 600,
+            areaamt: 3,
+            avgamt: 0.8,
+            gzamt: 5,
+            avggzamt: 5000
+          },
+          {
+            month: "3月",
+            totalamt: 1000,
+            areaamt: 5,
+            avgamt: 1.1,
+            gzamt: 8,
+            avggzamt: 8000
+          },
+          {
+            month: "4月",
+            totalamt: 1200,
+            areaamt: 6,
+            avgamt: 1.2,
+            gzamt: 9,
+            avggzamt: 9000
+          },
+          {
+            month: "5月",
+            totalamt: 1000,
+            areaamt: 5,
+            avgamt: 1.1,
+            gzamt: 10,
+            avggzamt: 10000
+          },
+          {
+            month: "6月",
+            totalamt: 830,
+            areaamt: 4,
+            avgamt: 1,
+            gzamt: 12,
+            avggzamt: 12000
+          }
+        ]
+      }
+    },
+    computed: {
+      colortop: function () {
+        return {
+          kindred: this.reporttype == 0,
+          kindblue: this.reporttype == 1,
+          kindgreen: this.reporttype == 2
+        };
+      },
+      colortitle: function () {
+        return {
+          bgred: this.reporttype == 0,
+          bgblue: this.reporttype == 1,
+          bggreen: this.reporttype == 2
+        };
+      }
+    }
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .img_wap {
+    display: flex;
+    margin-top: 20px;
+  }
+
+  .img-bingtu {
+    width: 100%;
+  }
+
+  .reportdetail_mx_bar {
+    /* border-top: 8px solid rgb(0, 132, 161); */
+  }
+
+  .kindblue {
+    border-top: 8px solid #0195da;
+  }
+
+  .kindgreen {
+    border-top: 8px solid #88b04b;
+  }
+
+  .kindred {
+    border-top: 8px solid #ff6f61;
+  }
+
+  .bgblue {
+    background-color: rgb(1, 149, 218);
+  }
+
+  .bggreen {
+    background-color: rgb(136, 176, 75);
+  }
+
+  .bgred {
+    background-color: rgb(255, 111, 97)
+  }
+
+  .reportdetail_mx_title {
+    color: white;
+    font-size: 15px;
+    font-weight: bold;
+    padding: 3px 8px;
+    margin-left: 20px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
+  .reportdetail_mx_subtitle {
+    position: absolute;
+    right: 10px;
+    padding: 3px;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 20px;
+    color: grey;
+    margin-top: 3px;
+  }
+
+  .reportmx_main {
+    margin: 5px 10px 0 20px;
+  }
+
+  .reportmx_mx {
+    margin: 0 10px 0 10px;
+    padding: 0 0 20px 0;
+  }
+
+  .liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 10px 0;
+  }
+
+  .reportdetail_mx_for {
+    display: flex;
+    /* margin: 5px 0 15px 10px; */
+    align-items: center;
+
+    padding: 5px 0 5px 0
+  }
+
+  .mx_border {
+    border-bottom: 1px solid #eee;
+  }
+
+  .reportdetail_mx_index {
+    flex: 0 0 10%;
+    text-align: center;
+    /* align-items: center; */
+    font-size: 20px;
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bold;
+
+  }
+
+  .reportdetail_mx_name {
+    flex: 0 0 80%;
+    font-size: 15px;
+    font-weight: bold
+  }
+
+  .reportdetail_mx_mode {
+    font-size: 13px;
+    color: #666
+  }
+
+  .reportdetail_mx_amt {
+    font-size: 15px;
+    font-weight: bold;
+    color: #fd7526
+  }
+
+  .reportdetail_mx_qty {
+    margin-left: 20px;
+    font-size: 15px;
+    color: #666
+  }
+
+</style>

src/pages/report/producerp.vue

@@ -0,0 +1,374 @@
+// 产值统计表
+<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:16px;font-weight:bold;color:#666;display:flex">
+        <div style="margin:0 auto">
+          <span>总产值:7900万</span>
+        </div>
+      </div>
+      <div class="img_wap">
+        <div style="flex:0 0 90%;margin: 0 auto;">
+          <img src="../../assets/zhexian_0619_02.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 16%;text-align: center;line-height:34px">车间</div>
+          <div style="flex:0 0 21%;text-align: center;line-height:34px">总产值</div>
+          <div style="flex:0 0 21%;text-align: center;line-height:34px">月均产值</div>
+          <div style="flex:0 0 21%;text-align: center">月均每平方产值</div>
+          <div style="flex:0 0 21%;text-align: center;line-height:34px">人均月产值</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 16%;text-align: center;">{{wkpitem.wkpname}}</div>
+          <div style="flex:0 0 21%;text-align: center;">{{wkpitem.totalamt}}万</div>
+          <div style="flex:0 0 21%;text-align: center;">{{wkpitem.avgtotalamt}}万</div>
+          <div style="flex:0 0 21%;text-align: center;">{{wkpitem.areaamt}}万</div>
+          <div style="flex:0 0 21%;text-align: center;">{{wkpitem.avgamt}}万</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="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 33%;text-align: center;">工组</div>
+        <div style="flex:0 0 33%;text-align: center;">总工资</div>
+        <div style="flex:0 0 33%;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 wrkgrplist" :key="index">
+        <div style="flex:0 0 33%;text-align: center;">{{wkpitem.wrkgrpname}}</div>
+        <div style="flex:0 0 33%;text-align: center;">{{wkpitem.totalamt}}万</div>
+        <div style="flex:0 0 33%;text-align: center;">{{wkpitem.avgamt}}</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: 5530,
+            avgtotalamt: 921.67,
+            areaamt: 5,
+            avgamt: 1.2
+          },
+          {
+            wkpname: "注塑车间",
+            totalamt: 2370,
+            avgtotalamt: 395,
+            areaamt: 4,
+            avgamt: 1
+          }
+        ],
+        wrkgrplist: [{
+            wrkgrpname: "裁剪组",
+            totalamt: 48,
+            avgamt: 8000
+          },
+          {
+            wrkgrpname: "缝纫组",
+            totalamt: 42,
+            avgamt: 7000
+          },
+          {
+            wrkgrpname: "木工组",
+            totalamt: 54,
+            avgamt: 9000
+          },
+          {
+            wrkgrpname: "装配组",
+            totalamt: 48,
+            avgamt: 8000
+          },
+          {
+            wrkgrpname: "配件组",
+            totalamt: 42,
+            avgamt: 7000
+          },
+          {
+            wrkgrpname: "喷漆组",
+            totalamt: 60,
+            avgamt: 10000
+          }
+        ]
+      }
+    }
+  }
+
+</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>

src/pages/report/profit.vue

@@ -0,0 +1,539 @@
+//销售订单利润统计表
+<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">销售订单利润统计表</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-weight:bold;color:#666;">
+        <div style="margin:0 15px;display:flex;font-size:14px;">
+          <div style="flex:0 0 25%;text-align: center;">销售额</div>
+          <div style="flex:0 0 25%;text-align: center;">总成本</div>
+          <div style="flex:0 0 25%;text-align: center;">总利润</div>
+          <div style="flex:0 0 25%;text-align: center;">利润率</div>
+        </div>
+        <div style="margin:0 15px;display:flex;font-size:16px;line-height:24px">
+          <div style="flex:0 0 25%;text-align: center;">6000万</div>
+          <div style="flex:0 0 25%;text-align: center;">4000万</div>
+          <div style="flex:0 0 25%;text-align: center;">2000万</div>
+          <div style="flex:0 0 25%;text-align: center;">33%</div>
+        </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="(ditem,index) in yclist"
+        :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%">交货日期：{{ditem.trqdate}}</div>
+          <div style="position: absolute;right:20px">业务员：{{ditem.saler}}</div>
+        </div>
+
+        <!-- <div style="display:flex">
+          <div style="flex:0 0 30%">销售额：100万</div>
+          <div style="flex:0 0 30%">总成本：70万</div>
+          <div style="flex:0 0 30%">利润：30万</div>
+        </div> -->
+
+        <div
+          style="display:flex;background-color: #f8f8f8;border-radius: 10px;padding:2px;align-items: center;margin:2px 0;color:#666">
+          <div style="flex:0 0 80%;">
+            <div>
+              <div style="display:flex;font-size:13px;">
+                <div style="flex:0 0 25%;text-align: center;">销售额</div>
+                <div style="flex:0 0 25%;text-align: center;">总成本</div>
+                <div style="flex:0 0 25%;text-align: center;">利润</div>
+                <div style="flex:0 0 25%;text-align: center;">利润率</div>
+              </div>
+              <div style="display:flex;font-size:13px;line-height:20px">
+                <div style="flex:0 0 25%;text-align: center;">100万</div>
+                <div style="flex:0 0 25%;text-align: center;">70万</div>
+                <div style="flex:0 0 25%;text-align: center;">30万</div>
+                <div style="flex:0 0 25%;text-align: center;">30%</div>
+              </div>
+            </div>
+          </div>
+          <div style="color: #6495ed">查看详细</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 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 v-show="ifmx==1">
+      <div class="quote_edit_mask"></div>
+
+      <div style="z-index: 9999;
+    background-color: #ffffff;
+    position: fixed;
+    bottom: 0px;
+    height: 75%;
+    width: 100%;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    padding: 10px 0;">
+        <div style="display:flex">
+          <div style="margin:0 auto;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">利润组成明细</div>
+          <div style="position: absolute;
+            right: 20px;
+            color: #ccc;
+            font-size: 12px;
+            line-height:26px;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div style="font-size:14px;margin:5px 0 ;padding:0 15px">
+          <div style="display:flex">
+            <div style="flex:0 0 60%">订单编号：SG190610009</div>
+            <div style="position: absolute;right:20px">相关号：AX1900005</div>
+          </div>
+          <div>客户名称：英国王室有限公司</div>
+          <div style="display:flex">
+            <div style="flex:0 0 70%">交货日期：2019-06-18</div>
+            <div style="position: absolute;right:20px">业务员：李小四</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="font-size:15px;padding:0 15px;font-weight:bold;color:#666">
+          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0 ">
+            <div style="width:100px">销售额</div>
+            <div style="position: absolute;right:30px;color:#888">100万</div>
+          </div>
+
+          <div style="border-bottom: 1px solid #eee;padding:0 0 10px 0 ">
+            <div style="display:flex;padding:10px 0 ">
+              <div style="width:100px">总成本 <svg class="icon" aria-hidden="true">
+                  <use xlink:href="#icon-down"></use>
+                </svg></div>
+              <div style="position: absolute;right:30px;color:#888">70万</div>
+            </div>
+
+            <div style="font-size:14px;color:#999;margin-left:30px;font-weight:400">
+              <div style="display:flex;">
+                <div>销售成本</div>
+                <div style="position: absolute;right:30px;">5万</div>
+              </div>
+
+              <div style="display:flex;">
+                <div>材料成本</div>
+                <div style="position: absolute;right:30px;">35万</div>
+              </div>
+
+              <div style="display:flex;">
+                <div>人力成本</div>
+                <div style="position: absolute;right:30px;">10万</div>
+              </div>
+
+              <div style="display:flex;">
+                <div>外协成本</div>
+                <div style="position: absolute;right:30px;">10万</div>
+              </div>
+
+              <div style="display:flex;">
+                <div>管理费用</div>
+                <div style="position: absolute;right:30px;">5万</div>
+              </div>
+
+              <div style="display:flex;">
+                <div>其它费用</div>
+                <div style="position: absolute;right:30px;">5万</div>
+              </div>
+            </div>
+          </div>
+          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0 ">
+            <div style="width:100px">利润</div>
+            <div style="position: absolute;right:30px;color:#888">30万</div>
+          </div>
+
+          <div style="display:flex;border-bottom: 1px solid #eee;padding:10px 0 ">
+            <div style="width:100px">利润率</div>
+            <div style="position: absolute;right:30px;color:#888">30%</div>
+          </div>
+        </div>
+        <div style="display:flex">
+          <div style="font-size:14px;color:#6495ed;margin: 30px auto">查看销售订单详细信息</div>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'daily',
+    data() {
+      return {
+        ifmx: 0,
+        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: "微软雅黑";
+  }
+
+  .quote_edit_mask {
+    height: 100%;
+    width: 100%;
+    background-color: #1d1d1d;
+    opacity: 0.8;
+    position: fixed;
+    top: 0px;
+    z-index: 9998;
+  }
+
+  .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: 9992;
+  }
+
+  .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: 9991;
+  }
+
+  .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: 9990;
+  }
+
+  .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: #f6f6f6;
+    margin: 10px 0;
+  }
+
+</style>

src/pages/report/reportdetail.vue

@@ -2,6 +2,7 @@
   <div>
     <div :class="colortop"></div>
     <div style="display:flex;">
+      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==0">业务员销售记录</div>      
       <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==1">客户销售记录</div>
       <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==2">产品销售记录</div>
       <div class="reportdetail_mx_subtitle">2019年1月~2019年6月
@@ -10,11 +11,18 @@
         </svg></div>
     </div>
 
+    <!-- 业务员信息 来源于0-业务员销售排名统计表 -->
+    <div class="reportmx_main" v-if="reporttype == 0">
+      <div style="font-size:24px;font-weight:bold">张小姗</div>
+      <div style="font-size:14px;color:#666;margin-top:5px">共开单 8 次，10 款产品共 4000 件</div>
+      <div style="font-size:14px;color:#f20">合计金额 4,000,000元</div>
+    </div>
+
     <!-- 客户信息 来源于1-客户销售排名统计表 -->
     <div class="reportmx_main" v-if="reporttype == 1">
       <div style="font-size:24px;font-weight:bold">沙特石油王子有限公司</div>
       <div style="font-size:15px;">业务员：张小姗</div>
-      <div style="font-size:14px;color:#666;margin-top:5px">共下单 8 次，10 款产品共 4000 件</div>
+      <div style="font-size:14px;color:#666;margin-top:5px">共开单 8 次，10 款产品共 4000 件</div>
       <div style="font-size:14px;color:#f20">合计金额 4,000,000元</div>
     </div>
 
@@ -33,7 +41,8 @@
       <div style="font-size:14px;color:#f20">合计金额 4,000,000元</div>
     </div>
 
-    <div class="img_wap" v-if="reporttype == 2">
+<!-- 柱状图 -->
+    <div class="img_wap">
       <div style="flex:0 0 90%;margin: 0 auto;">
         <img src="../../assets/zhutu_01.jpg" class="img-bingtu"></img>
       </div>
@@ -41,7 +50,7 @@
 
     <div class="liubai"></div>
 
-<!-- 业务员明细、区域明细 -->
+<!-- 业务员明细、区域明细  （客户记录模式下显示）-->
     <div v-if="reporttype==2">
       <div class="reportmx_mx" style="padding: 0px;">
         <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
@@ -64,9 +73,9 @@
 
       </div>
       <div class="liubai"></div>
-      <div class="reportmx_mx" style="padding: 0px;">
+      <div class="reportmx_mx" style="padding: 0px;"  v-if="reporttype==2">
         <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
-          <div style="margin:0 auto" v-if="reporttype==2">业务员明细</div>
+          <div style="margin:0 auto">业务员明细</div>
         </div>
 
         <div class="reportdetail_mx_for " v-for="(saleritem,index) in saleramtlist" :key="index">
@@ -87,10 +96,12 @@
       <div class="liubai"></div>
     </div>
 
-    <div class="reportmx_mx">
+
+
+<!-- 客户明细   -->
+    <div class="reportmx_mx" v-if="reporttype != 1">
       <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
-        <div style="margin:0 auto" v-if="reporttype==1">产品明细</div>
-        <div style="margin:0 auto" v-if="reporttype==2">客户明细</div>
+        <div style="margin:0 auto">客户明细</div>
       </div>
 
       <div class="reportdetail_mx_for mx_border" v-for="(saleritem,index) in saleramtlist" :key="index">
@@ -98,12 +109,9 @@
 
         <div style="padding:0 0 0 5px; ">
           <div class="reportdetail_mx_name">
-            <div v-if="reporttype==0">{{saleritem.salername}}</div>
-            <div v-if="reporttype==1">{{saleritem.mtrlname}}</div>
-            <div v-if="reporttype==2">{{saleritem.cusname}}</div>
+            <div>{{saleritem.cusname}}</div>
           </div>
 
-          <div class="reportdetail_mx_mode" v-if="reporttype==1">150*79*60cm</div>
           <div class="reportdetail_mx_mode" v-if="reporttype==2">业务员：{{saleritem.salername}}</div>
 
           <div style="display:flex;align-items: center">
@@ -115,6 +123,34 @@
       </div>
 
     </div>
+    <div class="liubai" v-if="reporttype != 1"></div>
+
+
+<!-- 产品明细 -->
+    <div class="reportmx_mx" v-if="reporttype != 2">
+      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
+        <div style="margin:0 auto">产品明细</div>
+      </div>
+
+      <div class="reportdetail_mx_for mx_border" v-for="(saleritem,index) in saleramtlist" :key="index">
+        <div class="reportdetail_mx_index">{{index+1}}</div>
+
+        <div style="padding:0 0 0 5px; ">
+          <div class="reportdetail_mx_name">
+            <div >{{saleritem.mtrlname}}</div>
+          </div>
+
+          <div class="reportdetail_mx_mode" >150*79*60cm</div>
+
+          <div style="display:flex;align-items: center">
+            <div class="reportdetail_mx_amt">{{saleritem.amt}}元</div>
+            <div class="reportdetail_mx_qty">{{saleritem.qty}}张</div>
+          </div>
+        </div>
+
+      </div>
+
+    </div>
 
   </div>
 </template>
@@ -123,7 +159,7 @@
   export default {
     data() {
       return {
-        reporttype: 1, //来源 0-业务员销售排名统计表（同时显示客户列表、产品列表） 1-客户销售排名统计表（显示产品列表） 2-产品销售排名统计表（显示客户列表）
+        reporttype: 2, //来源 0-业务员销售排名统计表（同时显示客户列表、产品列表） 1-客户销售排名统计表（显示产品列表） 2-产品销售排名统计表（显示客户列表）
         saleramtlist: [{
             salername: "张小姗",
             cusname: "沙特石油王子有限公司",
@@ -267,23 +303,31 @@
   }
 
   .reportdetail_mx_bar {
-    border-top: 8px solid dodgerblue;
+    /* border-top: 8px solid rgb(0, 132, 161); */
   }
 
   .kindblue {
-    border-top: 8px solid dodgerblue;
+    border-top: 8px solid rgb(1, 149, 218);
   }
 
   .kindgreen {
-    border-top: 8px solid yellowgreen;
+    border-top: 8px solid rgb(136, 176, 75);
+  }
+  
+  .kindred{
+    border-top: 8px solid #ff6f61;
   }
 
   .bgblue {
-    background-color: dodgerblue;
+    background-color: rgb(1, 149, 218);
   }
 
   .bggreen {
-    background-color: yellowgreen;
+    background-color: rgb(136, 176, 75);
+  }
+
+  .bgred{
+    background-color: rgb(255, 111, 97)
   }
 
   .reportdetail_mx_title {
@@ -313,7 +357,7 @@
 
   .reportmx_mx {
     margin: 0 10px 0 10px;
-    padding: 0 0 30px 0;
+    padding: 0 0 20px 0;
   }
 
   .liubai {

src/pages/report/saleintime.vue

@@ -0,0 +1,350 @@
+// 销售准交统计表
+<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>
+        </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;display:flex">
+        <div style="margin:0 auto">
+          <span>平均准交率：85%</span>
+        </div>
+      </div>
+      <div class="img_wap">
+        <div style="flex:0 0 90%;margin: 0 auto;">
+          <img src="../../assets/zhexian_mx_0620_03.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="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 16%;text-align: center;">月份</div>
+        <div style="flex:0 0 21%;text-align: center;">销售额</div>
+        <div style="flex:0 0 21%;text-align: center;">准交</div>
+        <div style="flex:0 0 21%;text-align: center;">迟交/未交</div>
+        <div style="flex:0 0 21%;text-align: center;">准交率</div>
+      </div>
+
+      <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;line-height:35px;font-size:12px;"
+        v-for="(sitem,index) in salelist" :key="index">
+        <div style="flex:0 0 16%;text-align: center;">{{sitem.month}}</div>
+        <div style="flex:0 0 21%;text-align: center;">{{sitem.totalamt}}万</div>
+        <div style="flex:0 0 21%;text-align: center;">{{sitem.inamt}}万</div>
+        <div style="flex:0 0 21%;text-align: center;">{{sitem.delayamt}}万</div>
+        <div style="flex:0 0 21%;text-align: center;">{{sitem.rate}}%</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 class="report_other_link">在进行出口订单异常统计表</div>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'daily',
+    data() {
+      return {
+        reporttype: 2, //0-业务员销售排名统计表 1-客户销售排名统计表 2-产品销售排名统计表
+        salelist: [{
+            month: "1月",
+            totalamt: 1000,
+            inamt: 900,
+            delayamt: 100,
+            rate: 90
+          },
+          {
+            month: "2月",
+            totalamt: 1200,
+            inamt: 840,
+            delayamt: 360,
+            rate: 70
+          },
+          {
+            month: "3月",
+            totalamt: 900,
+            inamt: 720,
+            delayamt: 180,
+            rate: 80
+          },
+          {
+            month: "4月",
+            totalamt: 1000,
+            inamt: 900,
+            delayamt: 100,
+            rate: 90
+          },
+          {
+            month: "5月",
+            totalamt: 1000,
+            inamt: 850,
+            delayamt: 150,
+            rate: 85
+          },
+          {
+            month: "6月",
+            totalamt: 1300,
+            inamt: 1235,
+            delayamt: 65,
+            rate: 95
+          }
+        ]
+      }
+    }
+  }
+
+</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>

src/pages/report/saletaskreport.vue

@@ -0,0 +1,400 @@
+
+<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: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>
+        </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;color:#666;display:flex">
+          <div style="margin:0 auto">
+        <span>总金额:7900万</span>
+        <span style="margin-left:10px">柜数:700</span>
+        <span style="margin-left:10px">客户数:48</span>
+        <span style="margin-left:10px">订单数:680</span>
+          </div>
+      </div>
+      <div class="img_wap">
+        <div style="flex:0 0 90%;margin: 0 auto;">
+          <img src="../../assets/zhexian_0619_01.jpg" class="img-bingtu"></img>
+        </div>
+      </div>
+
+      <div class="liubai"></div>
+
+      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
+        <div style="margin:0 auto">区域占比</div>
+      </div>
+      <div class="img_wap">
+        <div style="flex:0 0 90%;margin: 0 auto;">
+          <img src="../../assets/bingtu_0619_01.jpg" class="img-bingtu"></img>
+        </div>
+      </div>
+
+      <div class="liubai"></div>
+
+
+      <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
+        <div style="margin:0 auto">业务员占比</div>
+      </div>
+
+      <div class="daily-sale-cust">
+
+        <div class="daily-sale-cust-list" v-for="(saleritem,index) in saleramtlist" :key="index">
+          <div class="daily-sale-cust-index">
+            <div v-if="index>2">
+              {{index+1}}
+            </div>
+            <svg class="icon" aria-hidden="true" v-if="index<=2">
+              <use xlink:href="#icon-jiangpai-" v-if="index == 0"></use>
+              <use xlink:href="#icon-jiangpai-2" v-if="index == 1"></use>
+              <use xlink:href="#icon-jiangpai-1" v-if="index == 2"></use>
+            </svg>
+          </div>
+          <div class="daily-sale-cust-name">
+
+            <!-- <div v-if="reporttype==1">{{saleritem.cusname}}</div>
+            <div v-if="reporttype==2">{{saleritem.mtrlname}}</div> -->
+            <div style="display:flex;align-items: center">
+              <div style="margin-right:30px" >{{saleritem.salername}}</div>
+              <div class="daily-sale-cust-amt">{{saleritem.amt}}元</div>
+              <div class="saler_percent">占比 {{saleritem.percent}}</div>
+            </div>
+          </div>
+        </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 class="report_other_link">在进行出口订单异常统计表</div>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'daily',
+    data() {
+      return {
+        reporttype: 2, //0-业务员销售排名统计表 1-客户销售排名统计表 2-产品销售排名统计表
+        saleramtlist: [{
+            salername: "张小姗",
+            cusname: "沙特石油王子有限公司",
+            mtrlname: "经理椅 NF-8920",
+            amt: "3,000,000",
+            percent: "30%"
+          },
+          {
+            salername: "李小四",
+            cusname: "俄罗斯老铁有限公司",
+            mtrlname: "经理椅 NF-8927",
+            amt: "2,000,000",
+            percent: "20%"
+          },
+          {
+            salername: "王小五",
+            cusname: "英国王室有限公司",
+            mtrlname: "职员椅 NF-3343",
+            amt: "1,500,000",
+            percent: "15%"
+          },
+          {
+            salername: "吴小丽",
+            cusname: "法国浪漫有限公司",
+            mtrlname: "电竞椅 S-150",
+            amt: "1,000,000",
+            percent: "10%"
+          },
+          {
+            salername: "陆小六",
+            cusname: "意大利时尚有限公司",
+            mtrlname: "电竞椅 S-103",
+            amt: "500,000",
+            percent: "5%"
+          },
+          {
+            salername: "刘小七",
+            cusname: "丹麦饼匠有限公司",
+            mtrlname: "电竞椅 S-120",
+            amt: "400,000",
+            percent: "4%"
+          },
+          {
+            salername: "方小八",
+            cusname: "德国战车有限公司",
+            mtrlname: "职员椅 NF-6004M",
+            amt: "300,000",
+            percent: "3%"
+          },
+          {
+            salername: "冯小轩",
+            cusname: "澳大利亚袋鼠有限公司",
+            mtrlname: "办公布椅 NF-513V",
+            amt: "200,000",
+            percent: "2%"
+          },
+          {
+            salername: "马小梅",
+            cusname: "新加坡花园有限公司",
+            mtrlname: "办公布椅 NF-513M",
+            amt: "100,000",
+            percent: "1%"
+          },
+          {
+            salername: "高小松",
+            cusname: "美利坚老鹰有限公司",
+            mtrlname: "休闲椅 901",
+            amt: "90,000",
+            percent: "0.9%"
+          }
+        ]
+      }
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+  .img_wap {
+    display: flex;
+    margin-top: 20px;
+  }
+
+  .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>

src/pages/report/saletaskycrp.vue

@@ -0,0 +1,421 @@
+//在进行出口订单异常统计表
+<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>

src/router/index.js

@@ -21,6 +21,14 @@ import QuoteRslt from '@/pages/quote_rslt'
 import Quotehis from '@/pages/quote_his'
 import CustReport from '@/pages/report/custreport'
 import ReportDetail from '@/pages/report/reportdetail'
+import SaletaskReport from '@/pages/report/saletaskreport'
+import Producerp from '@/pages/report/producerp'
+import Producemx from '@/pages/report/producemx'
+import Saletaskycrp from '@/pages/report/saletaskycrp'
+import Saleintime from '@/pages/report/saleintime'
+import Ito from '@/pages/report/ito'
+import Itomx from '@/pages/report/itomx'
+import Profit from '@/pages/report/profit'
 
 Vue.use(Router)
 
@@ -190,6 +198,70 @@ export default new Router({
       meta: {
         title: '报表明细'
       }
+    },
+    {
+      path: '/saletaskreport',
+      name: 'SaletaskReport',
+      component: SaletaskReport,
+      meta: {
+        title: '新增销售订单统计表'
+      }
+    },
+    {
+      path: '/producerp',
+      name: 'Producerp',
+      component: Producerp,
+      meta: {
+        title: '产值统计表'
+      }
+    },
+    {
+      path: '/producemx',
+      name: 'Producemx',
+      component: Producemx,
+      meta: {
+        title: '生产类明细表'
+      }
+    },
+    {
+      path: '/saletaskycrp',
+      name: 'Saletaskycrp',
+      component: Saletaskycrp,
+      meta: {
+        title: '在进行出口订单异常统计表'
+      }
+    },
+    {
+      path: '/saleintime',
+      name: 'Saleintime',
+      component: Saleintime,
+      meta: {
+        title: '销售准交统计表'
+      }
+    },
+    {
+      path: '/ito',
+      name: 'Ito',
+      component: Ito,
+      meta: {
+        title: '周转统计表'
+      }
+    },
+    {
+      path: '/itomx',
+      name: 'Itomx',
+      component: Itomx,
+      meta: {
+        title: '周转统计表明细'
+      }
+    },
+    {
+      path: '/profit',
+      name: 'Profit',
+      component: Profit,
+      meta: {
+        title: '销售订单利润统计表'
+      }
     }
   ]
 })