增加采购收货统计表 buyreport.vue,buyreportmx.vue

src/pages/report/buyreport.vue

@@ -0,0 +1,439 @@
+<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">
+        采购收货统计表
+      </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-xuanze1"></use>
+          </svg>
+        </span>
+      </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">供应商数: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_02.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;flex:0 0 20%">{{saleritem.salername}}</div>
+                <div class="daily-sale-cust-amt">{{saleritem.amt}}元</div>
+                <div class="saler_percent">占比 {{saleritem.percent}}</div>
+              </div>
+            </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 class="report_other_link">物料采购统计表</div>
+      </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: "微软雅黑";
+  }
+
+  .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;
+    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-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/buyreportmx.vue

@@ -0,0 +1,359 @@
+// 周转率明细
+<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_subtitle">2019年1月~2019年6月
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-xuanze1"></use>
+        </svg></div>
+    </div>
+
+
+    <div class="reportmx_main">
+      <div style="font-size:24px;font-weight:bold" v-if="reporttype == 0">皮类</div>
+
+        <div style="font-size:14px;color:#666;display:flex;margin: 5px 0 0 0px">
+          <div >
+            <span>总收货金额:7900万</span>
+            <span style="margin-left:10px">供应商数:48</span>
+            <span style="margin-left:10px">订单数:680</span>
+          </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/zhexian_0619_02.jpg" class="img-bingtu"></img>
+      </div>
+    </div>
+    <div class="liubai"></div>
+
+<!-- 
+    <div style="font-size:14px;display:flex;margin:15px 0 0 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">
+        <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:12px;"
+        v-for="(wkpitem,index) in wkplist" :key="index">
+        <div style="flex:0 0 25%;text-align: center;">{{wkpitem.month}}</div>
+        <div style="flex:0 0 25%;text-align: center;">{{wkpitem.qty}}</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>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        reporttype: 0, //0-供应商分类统计表  ，之后的数字待定
+        wkplist: [{
+            month: "1月",
+            totalamt: 30,
+            areaamt: '100,000',
+            avgamt: 120,
+            gzamt: 10,
+            avggzamt: 6000,
+            ito: 5,
+            qty:'50,000'
+          },
+          {
+            month: "2月",
+            totalamt: 10,
+            areaamt: '150,000',
+            avgamt: 110,
+            gzamt: 50,
+            avggzamt: 5000,
+            ito: 8,
+            qty:40000
+          },
+          {
+            month: "3月",
+            totalamt: 50,
+            areaamt: '120,000',
+            avgamt: 100,
+            gzamt: 70,
+            avggzamt: 8000,
+            ito: 10,
+            qty:55000
+          },
+          {
+            month: "4月",
+            totalamt: 70,
+            areaamt: '130,000',
+            avgamt: 160,
+            gzamt: 40,
+            avggzamt: 9000,
+            ito: 8,
+            qty:60000
+          },
+          {
+            month: "5月",
+            totalamt: 40,
+            areaamt: '110,000',
+            avgamt: 140,
+            gzamt: 10,
+            avggzamt: 10000,
+            ito: 7,
+            qty:40000
+          },
+          {
+            month: "6月",
+            totalamt: 10,
+            areaamt: '150,000',
+            avgamt: 140,
+            gzamt: 20,
+            avggzamt: 12000,
+            ito: 12,
+            qty:52000
+          }
+        ],
+        storagelist: [{
+            name: "01号仓(塑件毛坯仓)",
+            totalamt: 30,
+            areaamt: 100,
+            avgamt: 120,
+            gzamt: 10,
+            avggzamt: 6000,
+            ito: 5
+          },
+          {
+            name: "02号仓(沙发木架仓)",
+            totalamt: 10,
+            areaamt: 150,
+            avgamt: 110,
+            gzamt: 50,
+            avggzamt: 5000,
+            ito: 8
+          },
+          {
+            name: "05号仓(脚/轮子)",
+            totalamt: 50,
+            areaamt: 120,
+            avgamt: 100,
+            gzamt: 70,
+            avggzamt: 8000,
+            ito: 10
+          },
+          {
+            name: "06号仓(铁架/沙发配件)",
+            totalamt: 70,
+            areaamt: 130,
+            avgamt: 160,
+            gzamt: 40,
+            avggzamt: 9000,
+            ito: 8
+          },
+          {
+            name: "10号仓(海绵，EPE，1楼海绵)",
+            totalamt: 40,
+            areaamt: 110,
+            avgamt: 140,
+            gzamt: 10,
+            avggzamt: 10000,
+            ito: 7
+          },
+          {
+            name: "07号仓(配件仓)",
+            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/ito.vue

@@ -1,11 +1,8 @@
 // 周转率
 <template>
   <div class="daily">
-    <div class="reportcom-header-wap">
+    <!-- <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">
@@ -18,120 +15,140 @@
       </div>
       <div class="reportcom-header-sub"></div>
       <div class="reportcom-header-sub-two"></div>
-    </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 class="topbar">
+      <div class="topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
       </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 class="topbar_middle">
+        <span>仓库周转率统计表</span>
       </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 class="topbar_right">
       </div>
+    </div>
 
-      <div class="liubai"></div>
-
-
-      <div style="font-size:14px;display:flex;margin-left:15px">
-        <div style="margin: 0 auto;">周转率：10</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-xuanze1"></use>
+          </svg>
+        </span>
+        <span style="font-size:12px;line-height:24px;margin-left:5px">共6个月</span>
       </div>
+      <div class="daily-sale">
 
-      <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 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>
 
-      <div class="liubai"></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 style="display:flex;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">
-        <div style="margin:0 auto">车间</div>
-      </div>
+        <div class="liubai"></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 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_1027_01.jpg" class="img-bingtu"></img>
+          </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 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>
-      <div style="font-size:12px;color:#666;margin: 10px 0 10px 20px">*点击可查看各车间每月详情数据</div>
 
-      <div class="liubai"></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 style="display:flex;font-size:16px;font-weight:bold;color:#666;padding:0 0 5px 0">
-        <div style="margin:0 auto">仓库</div>
-      </div>
+        <div class="liubai"></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 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;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 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>
-      <div style="font-size:12px;color:#666;margin: 10px 0 10px 20px">*点击可查看各仓库每月详情数据</div>
+        <div style="font-size:12px;color:#666;margin: 10px 0 10px 20px">*点击可查看各仓库分类详情数据</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">
+        <div>
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-tishi"></use>
+          </svg>
+          您还可以查看其它报表：</div>
+        <div class="report_other_link">产值统计表</div>
+      </div>
     </div>
-
   </div>
 </template>
 <script>
@@ -146,7 +163,7 @@
             avgtotalamt: 400,
             areaamt: 410,
             avgamt: 10,
-            ito:10
+            ito: 10
           },
           {
             wkpname: "注塑车间",
@@ -154,36 +171,35 @@
             avgtotalamt: 360,
             areaamt: 360,
             avgamt: 10,
-            ito:10
+            ito: 10
           }
         ],
-        storagelist:[
-            {
-            storagename: "A类",
+        storagelist: [{
+            storagename: "成品仓",
             totalamt: 20,
             avgtotalamt: 300,
             areaamt: 310,
             avgamt: 10,
-            ito:10
+            ito: 10
           },
           {
-            storagename: "B类",
+            storagename: "半成品仓",
             totalamt: 10,
             avgtotalamt: 260,
             areaamt: 260,
             avgamt: 10,
-            ito:10
+            ito: 10
           },
           {
-            storagename: "C类",
+            storagename: "材料仓",
             totalamt: 10,
             avgtotalamt: 200,
             areaamt: 200,
             avgamt: 10,
-            ito:10
+            ito: 10
           }
         ]
-       
+
       }
     }
   }
@@ -197,6 +213,48 @@
     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;
+    background-color: #f6f6f6;
+  }
+
   .img_wap {
     display: flex;
     margin-top: 10px;

src/pages/report/itomx.vue

@@ -4,16 +4,19 @@
     <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==1">仓库分类周转明细</div>
+      <div class="reportdetail_mx_title" :class="colortitle" v-if="reporttype==2">仓库周转明细</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 class="reportmx_main">
+      <div style="font-size:24px;font-weight:bold" v-if="reporttype == 0">转椅车间</div>
+      <div style="font-size:24px;font-weight:bold" v-if="reporttype == 1">材料仓</div>
+      <div style="font-size:24px;font-weight:bold" v-if="reporttype == 2">02号仓(沙发木架仓)</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>
@@ -32,7 +35,7 @@
         <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>760万</div>
       </div>
 
       <div style="font-size:14px;display:flex;margin-left:10px">
@@ -52,7 +55,7 @@
     <div class="liubai"></div>
 
 
-    <div style="font-size:14px;display:flex;margin-left:15px">
+    <div style="font-size:14px;display:flex;margin:15px 0 0 15px">
       <div style="margin: 0 auto;">周转率：10</div>
     </div>
 
@@ -63,34 +66,64 @@
     </div>
     <div class="liubai"></div>
 
-    <div style="padding:0 0 20px 0">
+    <!-- 每月明细 -->
+    <div style="padding:0 0 20px 0" v-if="reporttype != 1">
       <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
+        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:12px;"
-        v-for="(wkpitem,index) in wkplist" :key="index" v-if="reporttype == 0">
+        v-for="(wkpitem,index) in wkplist" :key="index">
         <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 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 style="padding:0 5px 20px 10px" v-if="reporttype == 1">
+      <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 21%;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 12%;text-align: center;">周转率</div>
+      </div>
+
+      <div style="display:flex;margin-top:5px;border-bottom: 1px solid #eee;font-size:12px;padding:10px 0"
+        v-for="(wkpitem,index) in storagelist" :key="index">
+        <div style="flex:0 0 21%;text-align: center;">{{wkpitem.name}}</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 12%;text-align: center;">{{wkpitem.ito}}</div>
+      </div>
+      <div style="font-size:12px;color:#666;margin: 10px 0 10px 20px">*点击可查看各仓库每月详情数据</div>
+    </div>
+
   </div>
 </template>
 
@@ -98,7 +131,7 @@
   export default {
     data() {
       return {
-        reporttype: 0, //0-车间明细 1-工组明细
+        reporttype: 2, //0-车间明细 1-仓库类型明细 2-具体仓库明细
         wkplist: [{
             month: "1月",
             totalamt: 30,
@@ -106,7 +139,7 @@
             avgamt: 120,
             gzamt: 10,
             avggzamt: 6000,
-            ito:5
+            ito: 5
           },
           {
             month: "2月",
@@ -115,7 +148,7 @@
             avgamt: 110,
             gzamt: 50,
             avggzamt: 5000,
-            ito:8
+            ito: 8
           },
           {
             month: "3月",
@@ -124,7 +157,7 @@
             avgamt: 100,
             gzamt: 70,
             avggzamt: 8000,
-            ito:10
+            ito: 10
           },
           {
             month: "4月",
@@ -133,7 +166,7 @@
             avgamt: 160,
             gzamt: 40,
             avggzamt: 9000,
-            ito:8
+            ito: 8
           },
           {
             month: "5月",
@@ -142,7 +175,7 @@
             avgamt: 140,
             gzamt: 10,
             avggzamt: 10000,
-            ito:7
+            ito: 7
           },
           {
             month: "6月",
@@ -151,7 +184,62 @@
             avgamt: 140,
             gzamt: 20,
             avggzamt: 12000,
-            ito:12
+            ito: 12
+          }
+        ],
+        storagelist: [{
+            name: "01号仓(塑件毛坯仓)",
+            totalamt: 30,
+            areaamt: 100,
+            avgamt: 120,
+            gzamt: 10,
+            avggzamt: 6000,
+            ito: 5
+          },
+          {
+            name: "02号仓(沙发木架仓)",
+            totalamt: 10,
+            areaamt: 150,
+            avgamt: 110,
+            gzamt: 50,
+            avggzamt: 5000,
+            ito: 8
+          },
+          {
+            name: "05号仓(脚/轮子)",
+            totalamt: 50,
+            areaamt: 120,
+            avgamt: 100,
+            gzamt: 70,
+            avggzamt: 8000,
+            ito: 10
+          },
+          {
+            name: "06号仓(铁架/沙发配件)",
+            totalamt: 70,
+            areaamt: 130,
+            avgamt: 160,
+            gzamt: 40,
+            avggzamt: 9000,
+            ito: 8
+          },
+          {
+            name: "10号仓(海绵，EPE，1楼海绵)",
+            totalamt: 40,
+            areaamt: 110,
+            avgamt: 140,
+            gzamt: 10,
+            avggzamt: 10000,
+            ito: 7
+          },
+          {
+            name: "07号仓(配件仓)",
+            totalamt: 10,
+            areaamt: 150,
+            avgamt: 140,
+            gzamt: 20,
+            avggzamt: 12000,
+            ito: 12
           }
         ]
       }

src/router/index.js

@@ -24,6 +24,8 @@ 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 BuyReport from '@/pages/report/buyreport'
+import BuyReportmx from '@/pages/report/buyreportmx'
 import Producerp from '@/pages/report/producerp'
 import Producemx from '@/pages/report/producemx'
 import Saletaskycrp from '@/pages/report/saletaskycrp'
@@ -63,6 +65,16 @@ export default new Router({
       name: 'Wkpmxlist',
       component: Wkpmxlist
     },
+    {
+      path: '/buyreport',
+      name: 'BuyReport',
+      component: BuyReport
+    },
+    {
+      path: '/buyreportmx',
+      name: 'BuyReportmx',
+      component: BuyReportmx
+    },
     {
       path: '/eqfixedit',
       name: 'Eqfixedit',