产品系列销售对比统计表设计

src/assets/iconfont/demo_index.html

@@ -30,6 +30,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe66e;</span>
+                <div class="name">右箭头</div>
+                <div class="code-name">&amp;#xe66e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe681;</span>
+                <div class="name">下拉</div>
+                <div class="code-name">&amp;#xe681;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe67a;</span>
                 <div class="name">公告</div>
@@ -1232,6 +1244,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-youjiantou"></span>
+            <div class="name">
+              右箭头
+            </div>
+            <div class="code-name">.icon-youjiantou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiala2"></span>
+            <div class="name">
+              下拉
+            </div>
+            <div class="code-name">.icon-xiala2
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-gonggao1"></span>
             <div class="name">
@@ -2989,6 +3019,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-youjiantou"></use>
+                </svg>
+                <div class="name">右箭头</div>
+                <div class="code-name">#icon-youjiantou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiala2"></use>
+                </svg>
+                <div class="name">下拉</div>
+                <div class="code-name">#icon-xiala2</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-gonggao1"></use>

src/assets/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1110453",
+      "name": "右箭头",
+      "font_class": "youjiantou",
+      "unicode": "e66e",
+      "unicode_decimal": 58990
+    },
+    {
+      "icon_id": "7637611",
+      "name": "下拉",
+      "font_class": "xiala2",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
     {
       "icon_id": "2569860",
       "name": "公告",

src/pages/report/mtrlbandmx.vue

@@ -0,0 +1,414 @@
+<template>
+  <div>
+    <div :class="colortop"></div>
+    <div style="display:flex;">
+      <div class="reportdetail_mx_title" :class="colortitle" >产品系列销售记录</div>
+      <div class="reportdetail_mx_subtitle">2019-01~2019-06
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xiala2"></use>
+        </svg></div>
+    </div>
+
+    <!-- 产品信息 来源于2-产品销售排名统计表 -->
+    <div class="reportmx_main">
+      <div style="font-size:24px;font-weight:bold">塑料网椅系列</div>
+
+      <div style="font-size:14px;color:#666;margin-top:5px">共下单 128 次，89 个客户共 98201 件</div>
+      <div style="font-size:14px;color:#f20">合计金额 300万元</div>
+    </div>
+
+<!-- 柱状图 -->
+    <div class="img_wap">
+      <div style="flex:0 0 90%;margin: 0 auto;">
+        <img src="../../assets/zhexian_2002225.jpg" class="img-bingtu"></img>
+      </div>
+    </div>
+
+    <div class="liubai"></div>
+
+        <div class="report_selection" style="margin-bottom:10px">
+          <div class='report_selection_check'>区域明细</div>
+          <div style="margin-left:20px">业务员明细</div>
+          <div style="margin-left:20px">客户明细</div>
+          <div style="margin-left:20px">产品明细</div>
+        </div>
+
+
+<!-- 业务员明细、区域明细  （客户记录模式下显示）-->
+    <div v-if="reporttype==2">
+      <div class="reportmx_mx" style="padding: 0px;">
+
+        <div class="reportdetail_mx_for " v-for="(areaitem,index) in arealist" :key="index">
+          <div class="reportdetail_mx_index">{{index+1}}</div>
+
+          <div style="padding:0 0 0 5px; ">
+            <div style="display:flex;align-items: center">
+              <div style="font-size: 15px;font-weight: bold;margin-right:20px;width:75px">{{areaitem.areaname}}</div>
+              <div class="reportdetail_mx_amt" style="width:65px">{{areaitem.amt}}元</div>
+              <div class="reportdetail_mx_qty" style="width:60px">{{areaitem.qty}}张</div>
+              <div class="reportdetail_mx_qty">{{areaitem.percent}}%</div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+<!-- 
+      <div class="liubai"></div>
+      <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">业务员明细</div>
+        </div>
+
+        <div class="reportdetail_mx_for " v-for="(saleritem,index) in saleramtlist" :key="index">
+          <div class="reportdetail_mx_index">{{index+1}}</div>
+
+          <div style="padding:0 0 0 5px; ">
+            <div style="display:flex;align-items: center">
+              <div style="font-size: 15px;font-weight: bold;margin-right:20px">{{saleritem.salername}}</div>
+              <div class="reportdetail_mx_amt">{{saleritem.amt}}元</div>
+              <div class="reportdetail_mx_qty">{{saleritem.qty}}张</div>
+              <div class="reportdetail_mx_qty">{{saleritem.percent}}%</div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+      <div class="liubai"></div> -->
+    </div>
+
+
+
+<!-- 客户明细   -->
+    <!-- <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">客户明细</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.cusname}}</div>
+          </div>
+
+          <div class="reportdetail_mx_mode" v-if="reporttype==2">业务员：{{saleritem.salername}}</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 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>
+
+<script>
+  export default {
+    data() {
+      return {
+        reporttype: 2, //来源 0-业务员销售排名统计表（同时显示客户列表、产品列表） 1-客户销售排名统计表（显示产品列表） 2-产品销售排名统计表（显示客户列表）
+        saleramtlist: [{
+            salername: "张小姗",
+            cusname: "沙特石油王子有限公司",
+            mtrlname: "经理椅 NF-8920",
+            amt: "600,000",
+            percent: "30",
+            qty: 600
+          },
+          {
+            salername: "李小四",
+            cusname: "俄罗斯老铁有限公司",
+            mtrlname: "经理椅 NF-8927",
+            amt: "500,000",
+            percent: "20",
+            qty: 500
+          },
+          {
+            salername: "王小五",
+            cusname: "英国王室有限公司",
+            mtrlname: "职员椅 NF-3343",
+            amt: "400,000",
+            percent: "15",
+            qty: 400
+          },
+          {
+            salername: "吴小丽",
+            cusname: "法国浪漫有限公司",
+            mtrlname: "电竞椅 S-150",
+            amt: "300,000",
+            percent: "10",
+            qty: 300
+          },
+          {
+            salername: "陆小六",
+            cusname: "意大利时尚有限公司",
+            mtrlname: "电竞椅 S-103",
+            amt: "250,000",
+            percent: "5",
+            qty: 250
+          },
+          {
+            salername: "刘小七",
+            cusname: "丹麦饼匠有限公司",
+            mtrlname: "电竞椅 S-120",
+            amt: "210,000",
+            percent: "4",
+            qty: 210
+          },
+          {
+            salername: "方小八",
+            cusname: "德国战车有限公司",
+            mtrlname: "职员椅 NF-6004M",
+            amt: "200,000",
+            percent: "3",
+            qty: 200
+          },
+          {
+            salername: "冯小轩",
+            cusname: "澳大利亚袋鼠有限公司",
+            mtrlname: "办公布椅 NF-513V",
+            amt: "190,000",
+            percent: "2",
+            qty: 190
+          },
+          {
+            salername: "马小梅",
+            cusname: "新加坡花园有限公司",
+            mtrlname: "办公布椅 NF-513M",
+            amt: "180,000",
+            percent: "1",
+            qty: 180
+          },
+          {
+            salername: "高小松",
+            cusname: "美利坚老鹰有限公司",
+            mtrlname: "休闲椅 901",
+            amt: "170,000",
+            percent: "0.9",
+            qty: 170
+          }
+        ],
+        arealist: [{
+          areaname: "印度尼西亚",
+          amt: "2376万",
+          qty: 24795,
+          percent:50
+        },{
+          areaname: "英国",
+          amt: "300万",
+          qty: 1000,
+          percent:30
+        },{
+          areaname: "智利",
+          amt: "50万",
+          qty: 770,
+          percent:12.5
+        },{
+          areaname: "新西兰",
+          amt: "30万",
+          qty: 600,
+          percent:7.5
+        },{
+          areaname: "墨西哥",
+          amt: "20万",
+          qty: 400,
+          percent:5
+        }]
+      }
+    },
+    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 rgb(1, 149, 218);
+  }
+
+  .kindgreen {
+    border-top: 8px solid rgb(136, 176, 75);
+  }
+  
+  .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
+  }
+  .report_selection {
+    display: flex;
+    /* align-items: center; */
+    /* margin-left: 33%; */
+    width: 315px;
+    margin: 0 auto;
+    font-size: 15px;
+    font-weight: bold;
+  }
+  .report_selection_check {
+    border-bottom: 3px solid #fd7526;
+  }
+</style>

src/pages/report/mtrlbandrp.vue

@@ -0,0 +1,465 @@
+<template>
+  <div class="daily">
+
+    <!-- 顶部标题栏 -->
+    <div class="topbar">
+      <div class="topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        <span>产品系列销售对比统计</span>
+      </div>
+      <div class="topbar_right">
+      </div>
+    </div>
+
+    <!-- 增加了 class="rpmain" 的div 包裹原有报表主体内容
+增加 class="rpdate" 的div 去实现原有的日期范围功能 -->
+    <div class="rpmain">
+      <div class="rpdate">2019.01 ~ 2019.06
+        <span style="font-size:15px">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-xiala2"></use>
+          </svg>
+        </span>
+      </div>
+
+      <div class="report_selection">
+        <div>国内</div>
+        <div style="margin-left:50px" class='report_selection_check'>国外</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">3000万</div>
+        <div style="margin-left:10px;width:95px;text-align: right;">柜数：</div>
+        <div>326</div>
+      </div>
+
+      <div style="font-size:14px;display:flex;margin-left:10px">
+        <div style="width:85px;text-align: right">客户数：</div>
+        <div style="width:55px">171</div>
+        <div style="margin-left:10px;width:95px;text-align: right;">订单数：</div>
+        <div>210</div>
+      </div>
+
+      <div class="daily-sale">
+
+        <div class="img_wap" style="margin-bottom:20px">
+          <div style="flex:0 0 90%;margin: 0 auto;">
+            <img src="../../assets/zhexian_2002225.jpg" class="img-bingtu"></img>
+          </div>
+        </div>
+
+        <div class="daily_liubai"></div>
+        <div class="report_selection">
+          <div class='report_selection_check'>金额</div>
+          <div style="margin-left:50px">销量</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 style="display:flex;align-items: center">
+                <div style="width:120px">{{saleritem.band}}</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" v-if="reporttype != 0">业务员销售排名统计表</div>
+        <div class="report_other_link" v-if="reporttype != 1">客户销售排名统计表</div>
+        <div class="report_other_link" v-if="reporttype != 2">产品销售排名统计表</div>
+        <div class="report_other_link">销售订单统计表</div>
+        <div class="report_other_link">在进行出口订单异常统计表</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'daily',
+    data() {
+      return {
+        reporttype: 0, //0-业务员销售排名统计表 1-客户销售排名统计表 2-产品销售排名统计表
+        saleramtlist: [{
+            salername: "张小姗",
+            cusname: "沙特石油王子有限公司",
+            mtrlname: "经理椅 NF-8920",
+            amt: "300万",
+            percent: "30%",
+            band: "塑料网椅系列"
+          },
+          {
+            salername: "李小四",
+            cusname: "俄罗斯老铁有限公司",
+            mtrlname: "经理椅 NF-8927",
+            amt: "200万",
+            percent: "20%",
+            band: "普通办公椅系列"
+          },
+          {
+            salername: "王小五",
+            cusname: "英国王室有限公司",
+            mtrlname: "职员椅 NF-3343",
+            amt: "100万",
+            percent: "15%",
+            band: "9系列休闲椅"
+          },
+          {
+            salername: "吴小丽",
+            cusname: "法国浪漫有限公司",
+            mtrlname: "电竞椅 S-150",
+            amt: "100万",
+            percent: "10%",
+            band: "7系列彩色吧椅"
+          },
+          {
+            salername: "陆小六",
+            cusname: "意大利时尚有限公司",
+            mtrlname: "电竞椅 S-103",
+            amt: "50万",
+            percent: "5%",
+            band: "2系列油漆酒吧椅"
+          },
+          {
+            salername: "刘小七",
+            cusname: "丹麦饼匠有限公司",
+            mtrlname: "电竞椅 S-120",
+            amt: "40万",
+            percent: "4%",
+            band: "2系列软包吧椅"
+          },
+          {
+            salername: "方小八",
+            cusname: "德国战车有限公司",
+            mtrlname: "职员椅 NF-6004M",
+            amt: "30万",
+            percent: "3%",
+            band: "沙发系列"
+          },
+          {
+            salername: "冯小轩",
+            cusname: "澳大利亚袋鼠有限公司",
+            mtrlname: "办公布椅 NF-513V",
+            amt: "20万",
+            percent: "2%",
+            band: "按摩椅"
+          }
+        ]
+      }
+    }
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9997;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    flex: 0 0 20px;
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    /* text-align: center; */
+    padding: 0 0 0 10px;
+    flex: 0 0 89%;
+  }
+
+  .topbar_right {
+    flex: 0 0 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .rpmain {
+    position: absolute;
+    top: 44px;
+    width: 100%;
+  }
+
+  .rpdate {
+    padding: 15px 20px;
+    margin: 0 0 10px 0;
+    text-align: center;
+    background-color: #f6f6f6;
+  }
+
+  .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-header {
+    width: 100%;
+    height: 150px;
+    background: linear-gradient(rgba(253, 145, 83, 1), rgba(253, 145, 83, 0))
+  }
+
+  .daily-header-logo-warp {
+    border-top: 5px solid #fd9153;
+  }
+
+  .daily-header-logo {
+    padding: 2px 5px;
+    background-color: #fd9153;
+  }
+
+  .daily-img-responsive {
+    display: inline-block;
+    height: auto;
+    max-width: 50%;
+  } */
+
+  /* .daily-header-title {
+    font-size: 25px;
+    font-weight: bold;
+    color: #000;
+    padding: 0 20px;
+    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
+  }
+
+  .daily-header-date {
+    font-size: 25px;
+    font-weight: bold;
+    color: #000;
+    padding: 0 20px;
+    text-shadow: 1px 1px 3px #FFFFFF, -1px -1px 3px #FFFFFF, 2px 2px 5px #FFFFFF, -2px -2px 5px #FFFFFF
+  } */
+
+  .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: 14px;
+    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 30%;
+    /* 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;
+  }
+
+</style>

src/pages/report/rpdatepicker.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <!-- 顶部标题栏 -->
+    <div class="topbar">
+      <div class="topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        <span>日期选择</span>
+      </div>
+      <div class="topbar_right">
+      </div>
+    </div>
+
+    <div class="pickermain">
+      <div class="picker_maintitle">自定义日期范围</div>
+      <div class="picker_warp">
+        <div class="picker_area">
+          <div class="picker_title">开始于</div>
+          <div class="picker_value">2020/02</div>
+        </div>
+        <div style="flex:0 0 10%;color:#888">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-youjiantou"></use>
+          </svg>
+        </div>
+        <div class="picker_area">
+          <div class="picker_title">结束于</div>
+          <div class="picker_value">2020/06</div>
+        </div>
+
+        <div class="picker_btn">确定</div>
+      </div>
+
+      <div class="liubai"></div>
+
+      <div class="picker_maintitle">快捷选择</div>
+
+
+      <div class="picker_item picker_item_border">本月</div>
+      <div class="picker_item ">上月</div>
+      <div class="liubai"></div>
+      <div class="picker_item picker_item_border">本季</div>
+      <div class="picker_item">上季</div>
+      <div class="liubai"></div>
+      <div class="picker_item picker_item_border">本年</div>
+      <div class="picker_item">上年</div>
+      <div class="liubai"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #ffffff;
+    font-family: "微软雅黑";
+  }
+
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9997;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    flex: 0 0 20px;
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    /* text-align: center; */
+    padding: 0 0 0 10px;
+    flex: 0 0 89%;
+  }
+
+  .topbar_right {
+    flex: 0 0 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .pickermain {
+    position: absolute;
+    top: 44px;
+    width: 100%;
+  }
+
+  .picker_maintitle {
+    padding: 10px 20px;
+    font-weight: bold;
+  }
+
+  .picker_warp {
+    display: flex;
+    align-items: center
+  }
+
+  .picker_area {
+    padding: 0 20px;
+    flex: 0 0 20%
+  }
+
+  .picker_title {
+    font-size: 13px;
+    color: #888
+  }
+
+  .picker_value {
+    padding: 5px 0 0 0;
+    font-size: 18px
+  }
+
+  .picker_btn {
+    margin-left: 5px;
+    padding: 10px 20px;
+    color: #fff;
+    background: #6495ed;
+    border-radius: 15px
+  }
+
+  .liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+    margin: 10px 0;
+  }
+
+  .picker_item{
+      padding: 10px 20px;
+      font-size: 15px;
+  }
+
+  .picker_item_border{
+      border-bottom: 1px solid #eee;
+  }
+
+</style>

src/router/index.js

@@ -30,6 +30,9 @@ 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 MtrlBandrp from '@/pages/report/mtrlbandrp'
+import MtrlBandmx from '@/pages/report/mtrlbandmx'
+import Rpdatepicker from '@/pages/report/rpdatepicker'
 import Ito from '@/pages/report/ito'
 import Itomx from '@/pages/report/itomx'
 import Profit from '@/pages/report/profit'
@@ -75,11 +78,26 @@ export default new Router({
       path: '/gonggao',
       name: 'GongGao',
       component: GongGao
-    },{
+    },
+    {
       path: '/gonggaoedit',
       name: 'GongGaoEdit',
       component: GongGaoEdit
     },
+    {
+      path: '/mtrlbandrp',
+      name: 'Mtrlbandrp',
+      component: MtrlBandrp
+    },
+    {
+      path: '/mtrlbandmx',
+      name: 'Mtrlbandmx',
+      component: MtrlBandmx
+    },{
+      path: '/rpdatepicker',
+      name: 'Rpdatepicker',
+      component: Rpdatepicker
+    },
     {
       path: '/dhb_mtrlinfo',
       name: 'Dhb_mtrlinfo',