|
|
@@ -0,0 +1,402 @@
|
|
|
+<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>
|
|
|
+ <span class="rpdate_ch">本年</span>
|
|
|
+ <span class="rpdate_ch">上年</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="daily-sale">
|
|
|
+
|
|
|
+ <div style="border-bottom: 1px solid #f0f0f0;padding: 10px;margin-bottom:10px;font-size:15px">
|
|
|
+ <span>部门：</span>
|
|
|
+ <span style="color:#666">开发部>>B组</span>
|
|
|
+ <span style="color: #9b9b9b;
|
|
|
+ font-size: 15px;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;">
|
|
|
+ <svg class="icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-iconfontjiantou2"></use>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="font-size:14px;color:#666;display:flex">
|
|
|
+ <div style="margin:0 auto">
|
|
|
+ <span>总预算:7200元</span>
|
|
|
+ <span style="margin-left:10px">总报销:7900元</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="img_wap">
|
|
|
+ <div style="flex:0 0 90%;margin: 0 auto;">
|
|
|
+ <img src="../../assets/zhexian_200317.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;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 50%;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:13px;"
|
|
|
+ v-for="(wkpitem,index) in wrkgrplist" :key="index">
|
|
|
+ <div style="flex:0 0 50%;text-align: center;">{{wkpitem.dayarea}}</div>
|
|
|
+ <div style="flex:0 0 25%;text-align: center;">{{wkpitem.budget}}</div>
|
|
|
+ <div style="flex:0 0 25%;text-align: center;">{{wkpitem.useamt}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'daily',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ reporttype: 2, //0-业务员销售排名统计表 1-客户销售排名统计表 2-产品销售排名统计表
|
|
|
+ wrkgrplist: [{
|
|
|
+ dayarea: "2019/1/1~1/31",
|
|
|
+ budget: 1200,
|
|
|
+ useamt: 900
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dayarea: "2019/2/1~2/28",
|
|
|
+ budget: 1200,
|
|
|
+ useamt: 1500
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dayarea: "2019/3/1~3/31",
|
|
|
+ budget: 1200,
|
|
|
+ useamt: 1000
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dayarea: "2019/4/1~4/30",
|
|
|
+ budget: 1200,
|
|
|
+ useamt: 1400
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dayarea: "2019/5/1~5/31",
|
|
|
+ budget: 1200,
|
|
|
+ useamt: 1600
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dayarea: "2019/6/1~6/30",
|
|
|
+ budget: 1200,
|
|
|
+ useamt: 1500
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rpdate_ch {
|
|
|
+ margin-left: 20px;
|
|
|
+ padding: 8px 15px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #6495ed;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
LongjoeDyy
