|
|
@@ -0,0 +1,371 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div :class="colortop"></div>
|
|
|
+ <div style="display:flex;">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- 客户信息 来源于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:#f20">合计金额 4,000,000元</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 产品信息 来源于2-产品销售排名统计表 -->
|
|
|
+ <div class="reportmx_main" v-if="reporttype == 2">
|
|
|
+ <div style="font-size:24px;font-weight:bold">电竞椅 S-150</div>
|
|
|
+ <div style="font-size:14px;">规格 55.5*66*129CM</div>
|
|
|
+ <div style="font-size:14px;"><span>背垫尺寸 85*48CM</span><span style="margin-left:10px">坐垫尺寸 52*53CM</span></div>
|
|
|
+ <div style="font-size:14px;">
|
|
|
+ <span>座深 41CM</span>
|
|
|
+ <span style="margin-left:10px">座高 48CM</span>
|
|
|
+ <span style="margin-left:10px">净重 17.5KG</span>
|
|
|
+ <span style="margin-left:10px">毛重 19KG</span>
|
|
|
+ </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>
|
|
|
+
|
|
|
+ <div class="img_wap" v-if="reporttype == 2">
|
|
|
+ <div style="flex:0 0 90%;margin: 0 auto;">
|
|
|
+ <img src="../../assets/zhutu_01.jpg" class="img-bingtu"></img>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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;">
|
|
|
+ <div style="margin:0 auto" v-if="reporttype==2">区域明细</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <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">{{areaitem.areaname}}</div>
|
|
|
+ <div class="reportdetail_mx_amt">{{areaitem.amt}}元</div>
|
|
|
+ <div class="reportdetail_mx_qty">{{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;">
|
|
|
+ <div style="display:flex;font-size:16px;font-weight:bold;color:#666;">
|
|
|
+ <div style="margin:0 auto" v-if="reporttype==2">业务员明细</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">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <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 v-if="reporttype==0">{{saleritem.salername}}</div>
|
|
|
+ <div v-if="reporttype==1">{{saleritem.mtrlname}}</div>
|
|
|
+ <div v-if="reporttype==2">{{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">
|
|
|
+ <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: 1, //来源 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: "2,000,000",
|
|
|
+ qty: 2000,
|
|
|
+ percent:50
|
|
|
+ },{
|
|
|
+ areaname: "亚洲 ",
|
|
|
+ amt: "1,200,000",
|
|
|
+ qty: 1200,
|
|
|
+ percent:30
|
|
|
+ },{
|
|
|
+ areaname: "大洋洲",
|
|
|
+ amt: "500,000",
|
|
|
+ qty: 500,
|
|
|
+ percent:12.5
|
|
|
+ },{
|
|
|
+ areaname: "非洲 ",
|
|
|
+ amt: "300,000",
|
|
|
+ qty: 300,
|
|
|
+ percent:7.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 dodgerblue;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kindblue {
|
|
|
+ border-top: 8px solid dodgerblue;
|
|
|
+ }
|
|
|
+
|
|
|
+ .kindgreen {
|
|
|
+ border-top: 8px solid yellowgreen;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bgblue {
|
|
|
+ background-color: dodgerblue;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bggreen {
|
|
|
+ background-color: yellowgreen;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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 30px 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>
|
LongjoeDyy
