build

src/api/report.js

@@ -4,5 +4,8 @@ import { reportApi } from "@/config";
 const api = "admin/";
 
 export default {
-  dashboard: (data, params) => http(reportApi + api + "stats", data, "post", params),
+  departDay: (data, params) => http(reportApi + api + "departEveryDay", data, "post", params),
+  departMonth: (data, params) => http(reportApi + api + "departEveryMonth", data, "post", params),
+  companyEvery: (data, params) => http(reportApi + api + "companyEvery", data, "post", params),
+  companyEveryMonth: (data, params) => http(reportApi + api + "companyEveryMonth", data, "post", params),
 };

src/components/control-display/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="app-main">
+    <div class="app-main-zhunbeixuanzhuan">
+      <div class="app-main-xuanzhuan">
+        <div class="search clear">
+            <el-date-picker
+              v-model="date"
+              style="margin-top:10px;"
+              class="fr picker"
+              :size="'small'"
+              :editable="false"
+              :clearable="false"
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+              type="date"
+              align="right"
+              placeholder="选择日期"
+              :picker-options="{disabledDate(time) { return time.getTime() > Date.now();}}"
+            >
+            </el-date-picker>
+        </div>
+
+        <h3>利润报表看板(平台维度)</h3>
+        <el-row class="myul" :gutter="20">
+          <template v-for="(item, index) in platformData">
+            <el-col
+              :key="index"
+              style="margin-bottom:20px"
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="24"
+              :xl="24"
+            >
+              <component :is="item.component" :daytime="date" :index="index" />
+            </el-col>
+          </template>
+        </el-row>
+
+        <h3>利润报表看板(公司维度)</h3>
+        <el-row class="myul" :gutter="20">
+          <template v-for="(item) in companyData">
+            <template v-for="(c,index) in companies">
+              <el-col 
+              :key="c.companyNo"
+              style="margin-bottom:20px"
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="24"
+              :xl="24"
+            >
+              <component :is="item.component" :companyNo="c.companyNo" :companyName="c.companyName" :index="index + 1" :daytime="date" />
+            </el-col>
+            </template>
+          </template>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import GrossMargin from './../reports/src/GrossMargin.vue'
+import MonthGrossMargin from "./../reports/src/MonthGrossMargin.vue"
+import CompanyGrossMargin from "./../reports/src/CompanyGrossMargin"
+import CompanyMonthGrossMargin from "./../reports/src/CompanyMonthGrossMargin"
+
+export default {
+name:'ControlDisplay',
+props:[],
+components:{ 
+  GrossMargin, 
+  MonthGrossMargin, 
+  CompanyGrossMargin, 
+  CompanyMonthGrossMargin 
+},
+data(){
+  return {
+    date:'',
+    platformData: [
+      { component: 'GrossMargin' },
+      // { component: 'MonthGrossMargin' }
+    ],
+    companyData: [
+      { component: 'CompanyGrossMargin' },
+      // { component: 'CompanyMonthGrossMargin' }
+    ],
+    companies:[
+        {
+          companyNo: "GS2302231125079621",
+          companyName: "北京百辰荣达国际科贸有限公司"
+        },
+        {
+          companyNo: "GS2302231323386950",
+          companyName: "北京泓源广诚国际商贸有限公司"
+        },
+        {
+          companyNo: "GS2304031312553746",
+          companyName: "北京锦兴弘昌科技有限公司"
+        },
+        {
+          companyNo: "GS2302231124114965",
+          companyName: "北京普润心堂商贸有限公司"
+        },
+        {
+          companyNo: "GS2203161855277894",
+          companyName: "北京万宇恒通国际科贸有限公司"
+        }
+      ]
+    }
+  },
+  mounted(){
+    this.date = this.transformTime()
+  },
+  methods:{
+    transformTime() {
+      let time = new Date();
+      let y = time.getFullYear();
+      let M = time.getMonth() + 1;
+      let d = time.getDate();
+      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
+    }
+  }
+};
+</script>
+<style lang="scss">
+html, body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.clear::after,
+.clear::before {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+
+  .app-main {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+
+    .app-main-zhunbeixuanzhuan {
+      height: 100%;
+
+      .app-main-xuanzhuan {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 16px;
+      }
+    }
+
+    .search {
+      position: relative;
+      padding: 0 0 12px 0;
+      width: 100%;
+
+      .shengxia {
+        float: left;
+        height: 33px;
+        line-height: 32px;
+        width: calc(100% - 122px);
+      }
+
+      .picker{
+        width: 112px;
+      }
+
+      .fr {
+        float: right;
+      }
+
+      .fr.my-fr {
+        width: 112px;
+        line-height: 32px;
+        text-align: right;
+
+        i {
+          font-size: 17px;
+          height: 32px;
+          line-height: 32px;
+          color: #606266;
+          display: inline-block;
+          vertical-align: top;
+        }
+
+        span {
+          display: inline-block;
+          vertical-align: top;
+          color: #606266;
+          font-size: 14px;
+          padding: 0 0 0 5px;
+        }
+      }
+    }
+
+    .title {
+      text-align: center;
+      padding: 0 0 8px 0;
+    }
+
+    .el-table .el-table__header-wrapper table thead tr th {
+      background: #f5f7fa !important;
+    }
+
+    .el-date-editor.fr.el-input.el-input--small.el-input--prefix.el-input--suffix.el-date-editor--date {
+      .el-input__inner {
+        padding-right: 0 !important;
+      }
+    }
+
+    .el-drawer__wrapper {
+      #el-drawer__title {
+        margin: 0 !important;
+        display: none !important;
+      }
+
+      .el-drawer__body {
+        .demo-drawer__content_header {
+          padding: 20px 20px 0 !important;
+          font-size: 16px !important;
+          color: #72767b !important;
+        }
+
+        ul.demo-drawer__content_body {
+          width: 100% !important;
+          box-sizing: border-box !important;
+
+          li {
+            height: 23px !important;
+            line-height: 23px !important;
+            font-size: 14px !important;
+            color: #72767b !important;
+            box-sizing: border-box !important;
+          }
+
+          li.active_e {
+            height: 23px !important;
+            line-height: 23px !important;
+            color: #409eff !important;
+            font-size: 14px !important;
+            box-sizing: border-box !important;
+          }
+        }
+      }
+    }
+
+    .myul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+
+      .myli {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+      }
+    }
+
+    .el-table .warning-row {
+      background: #f5f7fa !important;
+    }
+
+    .el-table .success-row {
+      background: #f0f9eb !important;
+    }
+  }
+}
+</style>

src/components/reports/src/CompanyGrossMargin.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="SalesReportRejectedNew">
+    <div class="table-header">{{index}}.{{companyName || '--'}}</div>
     <el-table
       :data="tableData"
       v-loading="loading"
@@ -7,29 +8,32 @@
       :size="'mini'"
       style="width: 100%"
     >
-      <el-table-column label="部门" prop="depart">
-        <template slot-scope="scope">部门</template>
+      <el-table-column label="业绩类型" prop="depart" align="center">
+        <template slot-scope="scope">{{scope.row.field}}</template>
       </el-table-column>
-      <el-table-column label="本日销售净额" prop="depart">
-        <template slot-scope="scope">本日净销售额</template>
+      <el-table-column label="本日销售净额" prop="pure_day_sale">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_day_sale)}}</template>
       </el-table-column>
-      <el-table-column label="本日毛利率" prop="depart">
-        <template slot-scope="scope">本日毛利率 = (本日净销售额 - 本日净采购额)</template>
+      <el-table-column label="本日毛利润" prop="pure_day_profit">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_day_profit)}}</template>
       </el-table-column>
-      <el-table-column label="本月销售净额" prop="depart">
-        <template slot-scope="scope">本月销售净额</template>
+      <el-table-column label="本日毛利率" prop="pure_month_interest_rate">
+        <template slot-scope="scope">{{Number(scope.row.pure_day_interest_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
-      <el-table-column label="本月销售指标" prop="depart">
-        <template slot-scope="scope">本月销售指标</template>
+      <el-table-column label="本月销售净额" prop="pure_month_sale">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_month_sale)}}</template>
       </el-table-column>
-      <el-table-column label="本月指标达成率" width="105px" prop="depart">
-        <template slot-scope="scope">本月指标达成率 = (本月销售净额 / 本月销售指标) * 100</template>
+      <el-table-column label="本月销售指标" prop="total_tips">
+        <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips) }}</template>
       </el-table-column>
-      <el-table-column label="本月毛利润" prop="depart">
-        <template slot-scope="scope">本月毛利润 = (本月销售净额 - 本月采购净额)</template>
+      <el-table-column label="本月指标达成率" width="105px" prop="month_completion_rate">
+        <template slot-scope="scope">{{ scope.row.month_completion_rate === '--' ? '--' : Number(scope.row.month_completion_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
-      <el-table-column label="本月毛利率" prop="depart">
-        <template slot-scope="scope">本月毛利率 = (本月毛利润 / 本月销售净额)</template>
+      <el-table-column label="本月毛利润" prop="pure_month_profit">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_month_profit)}}</template>
+      </el-table-column>
+      <el-table-column label="本月毛利率" prop="pure_month_interest_rate">
+        <template slot-scope="scope">{{Number(scope.row.pure_month_interest_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
     </el-table>
   </div>
@@ -43,16 +47,17 @@ import {
   getCompanyLabel,
   multiplication,
   subtraction,
-  addition, 
-  division
+  division,
+  addition,
+  createTotalItem
 } from "./_utils";
 
 export default {
   name: "CompanyGrossMargin",
-  props: ["date"],
+  props: ["date","companyNo","index",'daytime'],
   mixins: [setHeight],
   watch: {
-    date: function(val) {
+    daytime: function(val) {
       this.dataTime = val;
       if (val) {
         this.searchList();
@@ -63,7 +68,8 @@ export default {
     return {
       loading: false,
       maxHeight: "0",
-      tableData: []
+      tableData: [],
+      companyName:"",
     };
   },
   async created() {
@@ -83,7 +89,145 @@ export default {
     division,
     async searchList() {
       this.loading = true;
-      this.tableData = [{depart:11}];
+      const result = await asyncRequest.companyEveryMonth({companyNo:this.companyNo,daytime:this.daytime})
+
+      console.log(result)
+      switch(Number(result.code)){
+        case 0:
+          this.companyName = result.data[0].companyName
+          const companies = ['百辰','普润','泓源']
+          const fields = ['自营','渠道','小计','供应商端','合计']
+          
+          // 过滤三家公司数据
+          let tableData = (result.data || []).filter(({companyName}) => companies.some(company => companyName.indexOf(company) !== -1))
+          //合计三家公司的自营、渠道、供应商端数据
+          const total = tableData.reduce((prev,current) => ({
+            supplierSaleDay:addition(prev.supplierSaleDay,subtraction(current.dayinfo[2].sale_total,current.dayinfo[2].th_total)),
+            supplierSaleMonth:addition(prev.supplierSaleMonth,subtraction(current.monthinfo[2].msale_total,current.monthinfo[2].mth_total)),
+            supplierPurchDay:addition(prev.supplierPurchDay,subtraction(current.dayinfo[2].cgd_total,current.dayinfo[2].cgd_th_total)),
+            supplierPurchMonth:addition(prev.supplierPurchMonth,subtraction(current.monthinfo[2].mcgd_total,current.monthinfo[2].mcgd_th_total)),
+            
+            selfOperatedSaleDay:addition(prev.selfOperatedSaleDay,subtraction(current.dayinfo[1].sale_total,current.dayinfo[1].th_total)),
+            selfOperatedSaleMonth:addition(prev.selfOperatedSaleMonth,subtraction(current.monthinfo[1].msale_total,current.monthinfo[1].mth_total)),
+            selfOperatedPurchDay:addition(prev.selfOperatedPurchDay,subtraction(current.dayinfo[1].cgd_total,current.dayinfo[1].cgd_th_total)),
+            selfOperatedPurchMonth:addition(prev.selfOperatedPurchMonth,subtraction(current.monthinfo[1].mcgd_total,current.monthinfo[1].mcgd_th_total)),
+            
+            channelSaleDay:addition(prev.channelSaleDay,subtraction(current.dayinfo[0].sale_total,current.dayinfo[0].th_total)),
+            channelSaleMonth:addition(prev.channelSaleMonth,subtraction(current.monthinfo[0].msale_total,current.monthinfo[0].mth_total)),
+            channelPurchDay:addition(prev.channelPurchDay,subtraction(current.dayinfo[0].cgd_total,current.dayinfo[0].cgd_th_total)),
+            channelPurchMonth:addition(prev.channelPurchMonth,subtraction(current.monthinfo[0].mcgd_total,current.monthinfo[0].mcgd_th_total)),
+
+            totalTips:addition(prev.totalTips,current.total_tips)
+          }),{
+            supplierSaleDay:0,
+            supplierSaleMonth:0,
+            supplierPurchDay:0,
+            supplierPurchMonth:0,
+            selfOperatedSaleDay:0,
+            selfOperatedSaleMonth:0,
+            selfOperatedPurchDay:0,
+            selfOperatedPurchMonth:0,
+            channelSaleDay:0,
+            channelSaleMonth:0,
+            channelPurchDay:0,
+            channelPurchMonth:0,
+            totalTips:0
+          })
+
+
+          const mapFieldToTotalProperties = {
+            '供应商端':{
+                saleDay:'supplierSaleDay',
+                saleMonth:'supplierSaleMonth',
+                purchDay:'supplierPurchDay',
+                purchMonth:'supplierPurchMonth',
+            },
+            '自营':{
+                 saleDay:'selfOperatedSaleDay',
+                 saleMonth:'selfOperatedSaleMonth',
+                 purchDay:'selfOperatedPurchDay',
+                 purchMonth:'selfOperatedPurchMonth',
+            },
+            '渠道':{
+                saleDay:'channelSaleDay',
+                saleMonth:'channelSaleMonth',
+                purchDay:'channelPurchDay',
+                purchMonth:'channelPurchMonth'
+            }
+          }
+
+
+          tableData = fields.map(field => {
+            const properties = mapFieldToTotalProperties[field]
+          
+           if(!properties) {
+              return {
+                field,
+                total_tips:'--',
+                pure_day_sale:0,
+                pure_day_purch:0,
+                pure_day_profit:0,
+                pure_month_sale:0,
+                pure_month_purch:0,
+                month_completion_rate:'--',
+                pure_month_profit:0,
+                pure_month_interest_rate:0
+              }
+           }
+
+            const pure_day_sale = total[properties.saleDay]
+            const pure_day_purch = total[properties.purchDay]
+            /* 本日毛利润 = (本日净销售额 - 本日净采购额) **/
+            const pure_day_profit = subtraction(pure_day_sale,pure_day_purch)
+            const pure_day_interest_rate = multiplication(division(pure_day_profit,pure_day_sale),100)
+            const pure_month_sale = total[properties.saleMonth]
+            const pure_month_purch = total[properties.purchMonth]
+            /* 本月毛利润 = (本月销售净额 - 本月采购净额) **/
+            const pure_month_profit = subtraction(pure_month_sale,pure_month_purch)
+            /* 本月毛利率 = (本月毛利润 / 本月销售净额) * 100**/
+            const pure_month_interest_rate = multiplication(division(pure_month_profit,pure_month_sale),100)
+
+            
+            return {
+              field,
+              total_tips:'--',
+              pure_day_sale,
+              pure_day_purch,
+              pure_day_profit,
+              pure_month_sale,
+              pure_month_purch,
+              month_completion_rate:'--',
+              pure_month_profit,
+              pure_month_interest_rate,
+              pure_day_interest_rate
+            }
+          })
+
+          /* 小计 = 自营 + 渠道 **/
+          const totalItem = createTotalItem([tableData[0],tableData[1]])
+          totalItem.field = "小计"
+          totalItem.total_tips = "--"
+          totalItem.month_completion_rate = "--"
+          totalItem.pure_month_interest_rate = multiplication(division(totalItem.pure_month_profit,totalItem.pure_month_sale),100)
+          totalItem.pure_day_interest_rate = multiplication(division(totalItem.pure_day_profit,totalItem.pure_day_sale),100)
+
+          tableData[2] = totalItem
+
+          /* 合计 = 小计 + 供应商端 **/
+          const lastItem = createTotalItem([tableData[2],tableData[3]])
+          lastItem.field = "合计"
+          lastItem.total_tips = total.totalTips
+          lastItem.pure_month_interest_rate = multiplication(division(lastItem.pure_month_profit,lastItem.pure_month_sale),100)
+          /* 本月指标达成率 = (本月销售净额 / 本月销售指标) * 100 **/
+          lastItem.month_completion_rate = multiplication(division(lastItem.pure_month_sale,lastItem.total_tips),100)
+          lastItem.pure_day_interest_rate = multiplication(division(totalItem.pure_day_profit,totalItem.pure_day_sale),100)
+
+          tableData[4] = lastItem
+          this.tableData = tableData
+          break
+        default:
+          break
+      }
       this.getHeight();
       this.loading = false;
     }
@@ -93,4 +237,3 @@ export default {
 
 <style lang="scss" scoped>
 </style>
-

src/components/reports/src/CompanyMonthGrossMargin.vue

@@ -8,19 +8,22 @@
       style="width: 100%"
     >
       <el-table-column label="月份" prop="depart">
-        <template slot-scope="scope">月份</template>
+        <template slot-scope="scope">{{scope.row.month}}</template>
       </el-table-column>
-      <el-table-column label="本日销售净额" prop="depart">
-        <template slot-scope="scope">销售净额</template>
+      <el-table-column label="销售净额" prop="pure_sale">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_sale)}}</template>
       </el-table-column>
-      <el-table-column label="指标达成率" prop="depart">
-        <template slot-scope="scope">指标达成率 = (本月销售净额 / 本月销售指标) * 100</template>
+      <el-table-column label="销售指标" prop="total_tips">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.total_tips)}}</template>
       </el-table-column>
-      <el-table-column label="毛利润" prop="depart">
-        <template slot-scope="scope">毛利润 = (本月销售净额 - 本月采购净额)</template>
+      <el-table-column label="指标达成率" prop="completion_rate">
+        <template slot-scope="scope">{{Number(scope.row.completion_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
-      <el-table-column label="毛利率" prop="depart">
-        <template slot-scope="scope">毛利率 = (本月毛利润 / 本月销售净额) * 100</template>
+      <el-table-column label="毛利润" prop="pure_profit">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_profit)}}</template>
+      </el-table-column>
+      <el-table-column label="毛利率" prop="pure_interest_rate">
+        <template slot-scope="scope">{{Number(scope.row.pure_interest_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
     </el-table>
   </div>
@@ -35,11 +38,12 @@ import {
   multiplication,
   subtraction,
   addition, 
-  division
+  division,
+  createTotalItem
 } from "./_utils";
 
 export default {
-  name: "CompanyMonthGrossMargin",
+  name: "MonthGrossMargin",
   props: ["date"],
   mixins: [setHeight],
   watch: {
@@ -74,7 +78,45 @@ export default {
     division,
     async searchList() {
       this.loading = true;
-      this.tableData = [{depart:11}];
+      const result = await asyncRequest.companyEvery({})
+      switch(Number(result.code)){
+        case 0:
+          const tableData = (result.data || []).map(tableItem => {
+            /* 销售净额 = 销售额 - 退货额 **/
+            const pure_sale = subtraction(tableItem.sale_total,tableItem.th_total)
+            /* 指标达成率 = 销售净额 / 销售指标 **/
+            const completion_rate = multiplication(division(pure_sale,tableItem.total_tips),100)
+            /* 采购净额 = 采购额 - 采购退货额 **/
+            const pure_purch = subtraction(tableItem.cgd_total,tableItem.cgd_th_total)
+            /* 毛利润 = (本月销售净额 - 本月采购净额) **/
+            const pure_profit = subtraction(pure_sale,pure_purch)
+            /*  毛利率 = (本月毛利润 / 本月销售净额) * 100 **/
+            const pure_interest_rate = multiplication(division(pure_profit,pure_sale) || 0,100)
+
+            return {
+              month:tableItem.month,
+              completion_rate,
+              pure_interest_rate,
+              pure_profit,
+              pure_sale,
+              pure_purch,
+              total_tips:tableItem.total_tips
+            }
+          })
+
+          const totalItem = createTotalItem(tableData)
+          totalItem.month = "年度合计"
+          /* 年度指标达成率 = (年度销售净额 / 年度销售指标) **/
+          totalItem.completion_rate = multiplication(division(totalItem.pure_sale,totalItem.total_tips),100)
+          /* 年度毛利润 = 年度销售额 - 年度采购额 **/
+          totalItem.pure_profit = subtraction(totalItem.pure_sale,totalItem.pure_purch)
+          /* 年度毛利率 = (年度毛利润 / 年度销售额) **/
+          totalItem.pure_interest_rate = multiplication(division(totalItem.pure_profit,totalItem.pure_sale),100)
+          this.tableData = [...tableData,totalItem]
+          break
+        default:
+          break
+      }
       this.getHeight();
       this.loading = false;
     }
@@ -84,4 +126,3 @@ export default {
 
 <style lang="scss" scoped>
 </style>
-

src/components/reports/src/ControlDisplay.vue

@@ -1,239 +0,0 @@
-<template>
-    <div class="app-main">
-      <div class="app-main-zhunbeixuanzhuan">
-        <div class="app-main-xuanzhuan">
-          <h3>毛利报表看板(平台维度)</h3>
-          <el-row class="myul" :gutter="20">
-            <el-col 
-              style="margin-bottom:20px" 
-              :xs="24" 
-              :sm="24" 
-              :md="12" 
-              :lg="12" 
-              :xl="12"
-             >
-             <GrossMargin />
-            </el-col>
-
-            <el-col 
-              style="margin-bottom:20px" 
-              :xs="24" 
-              :sm="24" 
-              :md="12" 
-              :lg="12" 
-              :xl="12"
-             >
-              <MonthGrossMargin />
-            </el-col>
-          </el-row>
-
-          <h3>毛利报表看板(公司维度)</h3>
-          <el-row class="myul" :gutter="20">
-            <el-col 
-              style="margin-bottom:20px" 
-              :xs="24" 
-              :sm="24" 
-              :md="12" 
-              :lg="12" 
-              :xl="12"
-             >
-             <CompanyGrossMargin />
-            </el-col>
-
-            <el-col 
-              style="margin-bottom:20px" 
-              :xs="24" 
-              :sm="24" 
-              :md="12" 
-              :lg="12" 
-              :xl="12"
-             >
-              <CompanyMonthGrossMargin />
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-    </div>
-</template>
-<script>
-import GrossMargin from './GrossMargin.vue';
-import MonthGrossMargin from "./MonthGrossMargin.vue"
-import CompanyGrossMargin from "./CompanyGrossMargin"
-import CompanyMonthGrossMargin from "./CompanyMonthGrossMargin"
-export default {
-  name:'ControlDisplay',
-  props:[],
-  components:{ GrossMargin, MonthGrossMargin, CompanyGrossMargin, CompanyMonthGrossMargin },
-  data(){
-    return {
-      date:''
-    }
-  },
-  mounted(){
-    this.date = this.transformTime()
-  },
-  methods:{
-    transformTime() {
-      let time = new Date();
-      let y = time.getFullYear();
-      let M = time.getMonth() + 1;
-      let d = time.getDate();
-      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
-    },
-  }
-};
-</script>
-<style lang="scss">
-@mixin layout-dev {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  overflow-y: auto
-}
-html {
-  @include layout-dev;
-
-  body {
-    @include layout-dev;
-    text-align: left;
-  }
-  .clear::after,
-  .clear::before {
-    content: "";
-    display: block;
-    clear: both;
-  }
-
-  #app {
-    @include layout-dev;
-
-    padding: 0;
-    .app-main {
-      width: 100%;
-      padding: 0;
-      margin: 0;
-      box-sizing: border-box;
-      .app-main-zhunbeixuanzhuan {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        .app-main-xuanzhuan {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          // bottom: 0px;
-          box-sizing: border-box;
-          padding: 16px;
-        }
-      }
-      .search {
-        position: relative;
-        padding: 0 0 12px 0;
-        width: 100%;
-      }
-      .shengxia {
-        float: left;
-        height: 33px;
-        line-height: 32px;
-        width: calc(100% - 122px);
-      }
-      .picker{
-        width: 112px;
-      }
-      .fr {
-        float: right;
-      }
-      .fr.my-fr {
-        width: 112px;
-        line-height: 32px;
-        text-align: right;
-        i {
-          font-size: 17px;
-          height: 32px;
-          line-height: 32px;
-          color: #606266;
-          display: inline-block;
-          vertical-align: top;
-        }
-        span {
-          display: inline-block;
-          vertical-align: top;
-          color: #606266;
-          font-size: 14px;
-          padding: 0 0 0 5px;
-        }
-      }
-      .title {
-        text-align: center;
-        padding: 0 0 8px 0;
-      }
-      .el-table .el-table__header-wrapper table thead tr th {
-        background: #f5f7fa !important;
-      }
-      .el-date-editor.fr.el-input.el-input--small.el-input--prefix.el-input--suffix.el-date-editor--date {
-        .el-input__inner {
-          padding-right: 0 !important;
-        }
-      }
-      .el-drawer__wrapper {
-        #el-drawer__title {
-          margin: 0 !important;
-          display: none !important;
-        }
-        .el-drawer__body {
-          .demo-drawer__content_header {
-            padding: 20px 20px 0 !important;
-            font-size: 16px !important;
-            color: #72767b !important;
-          }
-          ul.demo-drawer__content_body {
-            width: 100% !important;
-            box-sizing: border-box !important;
-            li {
-              height: 23px !important;
-              line-height: 23px !important;
-              font-size: 14px !important;
-              color: #72767b !important;
-              box-sizing: border-box !important;
-            }
-            li.active_e {
-              height: 23px !important;
-              line-height: 23px !important;
-              color: #409eff !important;
-              font-size: 14px !important;
-              box-sizing: border-box !important;
-            }
-          }
-        }
-      }
-      .myul {
-        position: relative;
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-        width: 100%;
-        .myli {
-          position: relative;
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-          width: 100%;
-        }
-      }
-      .el-table .warning-row {
-        background: #f5f7fa !important;
-        // background: oldlace !important;
-      }
-
-      .el-table .success-row {
-        background: #f0f9eb !important;
-      }
-    }
-  }
-}
-</style>

src/components/reports/src/GrossMargin.vue

@@ -1,35 +1,38 @@
 <template>
   <div class="SalesReportRejectedNew">
     <el-table
+      border
       :data="tableData"
       v-loading="loading"
-      border
       :size="'mini'"
       style="width: 100%"
     >
-      <el-table-column label="部门" prop="depart">
-        <template slot-scope="scope">部门</template>
+      <el-table-column label="部门" width="80" prop="depart" align="center">
+        <template slot-scope="scope">{{mapResponseCompletionCompanyName[scope.row.depart]|| scope.row.depart}}</template>
       </el-table-column>
-      <el-table-column label="本日销售净额" prop="depart">
-        <template slot-scope="scope">本日净销售额</template>
+      <el-table-column label="本日销售净额" prop="pure_day_sale">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_day_sale)}}</template>
       </el-table-column>
-      <el-table-column label="本日毛利率" prop="depart">
-        <template slot-scope="scope">本日毛利率 = (本日净销售额 - 本日净采购额)</template>
+      <el-table-column label="本日毛利润" prop="pure_day_profit">
+        <template slot-scope="scope">{{scope.row.pure_day_profit}}</template>
       </el-table-column>
-      <el-table-column label="本月销售净额" prop="depart">
-        <template slot-scope="scope">本月销售净额</template>
+      <el-table-column label="本日毛利率" prop="pure_day_interest_rate">
+       <template slot-scope="scope">{{Number(scope.row.pure_day_interest_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
-      <el-table-column label="本月销售指标" prop="depart">
-        <template slot-scope="scope">本月销售指标</template>
+      <el-table-column label="本月销售净额" prop="pure_month_sale">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_month_sale)}}</template>
+      </el-table-column>
+      <el-table-column label="本月销售指标" prop="total_tips">
+        <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips) }}</template>
       </el-table-column>
       <el-table-column label="本月指标达成率" width="105px" prop="depart">
-        <template slot-scope="scope">本月指标达成率 = (本月销售净额 / 本月销售指标) * 100</template>
+        <template slot-scope="scope">{{Number(scope.row.month_completion_rate).toFixed(2) + '%'}}</template>
       </el-table-column>
-      <el-table-column label="本月毛利润" prop="depart">
-        <template slot-scope="scope">本月毛利润 = (本月销售净额 - 本月采购净额)</template>
+      <el-table-column label="本月毛利润" prop="pure_month_profit">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_month_profit)}}</template>
       </el-table-column>
-      <el-table-column label="本月毛利率" prop="depart">
-        <template slot-scope="scope">本月毛利率 = (本月毛利润 / 本月销售净额)</template>
+      <el-table-column label="本月毛利率" prop="pure_month_interest_rate">
+        <template slot-scope="scope">{{Number(scope.row.pure_month_interest_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
     </el-table>
   </div>
@@ -43,16 +46,18 @@ import {
   getCompanyLabel,
   multiplication,
   subtraction,
-  addition, 
-  division
+  division,
+  addition,
+  createTotalItem,
+  mapResponseCompletionCompanyName
 } from "./_utils";
 
 export default {
-  name: "GrossMargin",
-  props: ["date"],
+  name: "CompanyGrossMargin",
+  props: ["daytime"],
   mixins: [setHeight],
   watch: {
-    date: function(val) {
+    daytime: function(val) {
       this.dataTime = val;
       if (val) {
         this.searchList();
@@ -61,6 +66,7 @@ export default {
   },
   data() {
     return {
+      mapResponseCompletionCompanyName,
       loading: false,
       maxHeight: "0",
       tableData: []
@@ -83,7 +89,86 @@ export default {
     division,
     async searchList() {
       this.loading = true;
-      this.tableData = [{depart:11}];
+      const result = await asyncRequest.departDay({daytime:this.daytime})
+      const res = await asyncRequest.companyEveryMonth({ daytime: this.date });
+
+      // 拿到普润、百辰、锦兴、泓源的供应商端月净销售
+      const mapCompanySupplierSale = res.data.reduce((prev, current) => ({
+          ...prev,
+          [current.companyName]: {
+            supplierSaleDay: subtraction(current.dayinfo[2].sale_total, current.dayinfo[2].th_total),
+            supplierSaleMonth: subtraction(current.monthinfo[2].msale_total, current.monthinfo[2].mth_total),
+            supplierPurchDay: subtraction(current.dayinfo[2].cgd_total, current.dayinfo[2].cgd_th_total),
+            supplierPurchMonth: subtraction(current.monthinfo[2].mcgd_total, current.monthinfo[2].mcgd_th_total)
+          }
+      }), {})
+
+      if(Number(res.code) === 0 && Number(result.code) === 0){
+        const tableData= (result.data || []).map(tableItem => {
+          const supplierSalekey = Object.keys(mapCompanySupplierSale).find(key => key.includes(tableItem.depart))
+
+            /* 本日净销售额 = 日销售额 - 日销售退货 **/ 
+            let pure_day_sale = subtraction(tableItem.sale_total,tableItem.th_total)
+            /* 本日净采购额 = 日采购额 - 日采购退货 **/ 
+            let pure_day_purch = subtraction(tableItem.cgd_total,tableItem.cgd_th_total)
+
+
+            if (supplierSalekey) { // 百辰、普润、泓源 需要加上供应商端采购的数据
+              pure_day_purch = addition(pure_day_purch, mapCompanySupplierSale[supplierSalekey].supplierPurchDay)
+              pure_day_sale = addition(pure_day_sale, mapCompanySupplierSale[supplierSalekey].supplierSaleDay)
+            }
+
+            if (supplierSalekey === '北京普润心堂商贸有限公司') {  //普润的数据需要再加上锦兴的
+              pure_day_purch = addition(pure_day_purch, mapCompanySupplierSale['北京锦兴弘昌科技有限公司'].supplierPurchDay)
+              pure_day_sale = addition(pure_day_sale, mapCompanySupplierSale['北京锦兴弘昌科技有限公司'].supplierSaleDay)
+            }
+
+            /* 本日毛利润 = (本日净销售额 - 本日净采购额) **/
+            let pure_day_profit = subtraction(pure_day_sale,pure_day_purch)
+            /* 本日毛利率 = (本日毛利润 / 本日销售净额) * 100**/
+            let pure_day_interest_rate = multiplication(division(pure_day_profit,pure_day_sale),100)
+            
+            /* 本月净销售额 = 月销售额 - 月销售退货额 **/
+            let pure_month_sale = subtraction(tableItem.msale_total,tableItem.mth_total)
+            /* 本月净采购额 = 月采购额 - 月采购退货额 **/
+            let pure_month_purch = subtraction(tableItem.mcgd_total,tableItem.mcgd_th_total)
+
+            if (supplierSalekey) { // 百辰、普润、泓源 需要加上供应商端的数据
+              pure_month_sale = addition(pure_month_sale, mapCompanySupplierSale[supplierSalekey].supplierSaleMonth )
+              pure_month_purch = addition(pure_month_purch, mapCompanySupplierSale[supplierSalekey].supplierPurchMonth)
+            }
+
+            if (supplierSalekey === '北京普润心堂商贸有限公司') { //普润的数据需要再加上锦兴的
+              pure_month_sale = addition(pure_month_sale, mapCompanySupplierSale['北京锦兴弘昌科技有限公司'].supplierSaleMonth)
+              pure_month_purch = addition(pure_month_purch, mapCompanySupplierSale['北京锦兴弘昌科技有限公司'].supplierPurchMonth)
+            }
+            /* 本月指标达成率 = (本月销售净额 / 本月销售指标) * 100 **/
+            let month_completion_rate = multiplication(division(pure_month_sale,tableItem.total_tips),100)
+            /* 本月毛利润 = (本月销售净额 - 本月采购净额) **/
+            let pure_month_profit = subtraction(pure_month_sale,pure_month_purch)
+            /* 本月毛利率 = (本月毛利润 / 本月销售净额) * 100**/
+            let pure_month_interest_rate = multiplication(division(pure_month_profit,pure_month_sale),100)
+
+            return {
+              total_tips:tableItem.total_tips,
+              depart:tableItem.depart,
+              pure_day_interest_rate,
+              pure_day_sale,
+              pure_day_profit,
+              pure_month_sale,
+              month_completion_rate,
+              pure_month_profit,
+              pure_month_interest_rate
+            }
+          })
+
+          const totalItem = createTotalItem(tableData)
+          totalItem.depart = "合计"
+          totalItem.month_completion_rate = multiplication(division(totalItem.pure_day_sale,totalItem.total_tips),100)
+          totalItem.pure_month_interest_rate = multiplication(division(totalItem.pure_month_profit,totalItem.pure_month_sale),100)
+          totalItem.pure_day_interest_rate = multiplication(division(totalItem.pure_day_profit,totalItem.pure_day_sale),100)
+          this.tableData = [...tableData,totalItem]  
+      }
       this.getHeight();
       this.loading = false;
     }

src/components/reports/src/MonthGrossMargin.vue

@@ -8,19 +8,22 @@
       style="width: 100%"
     >
       <el-table-column label="月份" prop="depart">
-        <template slot-scope="scope">月份</template>
+        <template slot-scope="scope">{{scope.row.month}}</template>
       </el-table-column>
-      <el-table-column label="本日销售净额" prop="depart">
-        <template slot-scope="scope">销售净额</template>
+      <el-table-column label="销售净额" prop="pure_sale">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_sale)}}</template>
       </el-table-column>
-      <el-table-column label="指标达成率" prop="depart">
-        <template slot-scope="scope">指标达成率 = (本月销售净额 / 本月销售指标) * 100</template>
+      <el-table-column label="销售指标" prop="total_tips">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.total_tips)}}</template>
       </el-table-column>
-      <el-table-column label="毛利润" prop="depart">
-        <template slot-scope="scope">毛利润 = (本月销售净额 - 本月采购净额)</template>
+      <el-table-column label="指标达成率" prop="completion_rate">
+        <template slot-scope="scope">{{Number(scope.row.completion_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
-      <el-table-column label="毛利率" prop="depart">
-        <template slot-scope="scope">毛利率 = (本月毛利润 / 本月销售净额) * 100</template>
+      <el-table-column label="毛利润" prop="pure_profit">
+        <template slot-scope="scope">{{unit2TenThousand(scope.row.pure_profit)}}</template>
+      </el-table-column>
+      <el-table-column label="毛利率" prop="pure_interest_rate">
+        <template slot-scope="scope">{{Number(scope.row.pure_interest_rate || 0).toFixed(2) + '%'}}</template>
       </el-table-column>
     </el-table>
   </div>
@@ -34,8 +37,8 @@ import {
   getCompanyLabel,
   multiplication,
   subtraction,
-  addition, 
-  division
+  division,
+  createTotalItem
 } from "./_utils";
 
 export default {
@@ -74,7 +77,46 @@ export default {
     division,
     async searchList() {
       this.loading = true;
-      this.tableData = [{depart:11}];
+      const result = await asyncRequest.departMonth({})
+      switch(Number(result.code)){
+        case 0:
+          const tableData = (result.data || []).map(tableItem => {
+            /* 销售净额 = 销售额 - 退货额 **/
+            const pure_sale = subtraction(tableItem.sale_total,tableItem.th_total)
+            /* 指标达成率 = 销售净额 / 销售指标 **/
+            const completion_rate = multiplication(division(pure_sale,tableItem.total_tips),100)
+
+            /* 采购净额 = 采购额 - 采购退货额 **/
+            const pure_purch = subtraction(tableItem.cgd_total,tableItem.cgd_th_total)
+            /* 毛利润 = (本月销售净额 - 本月采购净额) **/
+            const pure_profit = subtraction(pure_sale,pure_purch)
+            /*  毛利率 = (本月毛利润 / 本月销售净额) * 100 **/
+            const pure_interest_rate = multiplication(division(pure_profit,pure_sale) || 0,100)
+
+            return {
+              month:tableItem.month,
+              completion_rate,
+              pure_interest_rate,
+              pure_profit,
+              pure_sale,
+              pure_purch,
+              total_tips:tableItem.total_tips
+            }
+          })
+
+          const totalItem = createTotalItem(tableData)
+          totalItem.month = "年度合计"
+          /* 年度指标达成率 = (年度销售净额 / 年度销售指标) **/
+          totalItem.completion_rate = multiplication(division(totalItem.pure_sale,totalItem.total_tips),100)
+          /* 年度毛利润 = 年度销售额 - 年度采购额 **/
+          totalItem.pure_profit = subtraction(totalItem.pure_sale,totalItem.pure_purch)
+          /* 年度毛利率 = (年度毛利润 / 年度销售额) **/
+          totalItem.pure_interest_rate = multiplication(division(totalItem.pure_profit,totalItem.pure_sale),100)
+          this.tableData = [...tableData,totalItem]
+          break
+        default:
+          break
+      }
       this.getHeight();
       this.loading = false;
     }

src/components/reports/src/_utils.js

@@ -89,7 +89,15 @@ export function subtraction(arg1, arg2) {
 }
 
 export function unit2TenThousand(value){
-  if(value === NaN || value === "NaN" || Number(value) === 0) return '0'
-  if(value < 1000 && value > 0 || value < 0 && value > -1000) return value
+  if(Number.isNaN(value) || value === "NaN" || Number(value) === 0) return '0'
+  if((value < 1000 && value > 0 || value < 0 && value > -1000) || value === '--') return value
   return division(value, 10000).toFixed(2) + 'W'
 }
+
+export function createTotalItem(values){
+  const fields = Object.keys(values[0])
+  return values.reduce((prev,current) => fields.reduce((prevObject,currentKey) =>({
+    ...prevObject,
+    [currentKey]: addition(prev[currentKey] || 0,current[currentKey])
+  }),{}),{})
+}

src/pages/report.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app" v-cloak v-loading="state.loading">
     <template v-if="!state.error">
-      <control-display />
+      <control-display :companies="companies" />
     </template>
     <template v-else>
       <unusual-state :message="state.message" />
@@ -10,16 +10,16 @@
 </template>
 <script>
 import asyncRequest from "@/api/index"
-import UnusualState from "@/components/unusual/index.vue"
 import { getParameterByName ,getOpenid, setOpenid, removeOpenid } from "../utils/auth"
-import ControlDisplay from "../components/reports/src/ControlDisplay.vue";
+import ControlDisplay from "../components/control-display/index.vue";
+import UnusualState from "@/components/unusual/index.vue"
 
 export default {
   name:'report',
   components:{ UnusualState , ControlDisplay },
   data() {
     return {
-      companyArr:[],
+      companies:[],
       hasPlatformDimension: false,
       state:{
         error:false,
@@ -37,18 +37,16 @@ export default {
       const openid = getOpenid()
       const code = getParameterByName('code')
 
-      // const result = await asyncRequest.userinfo({
-      //  // ...( openid ? { openid } :  { code })
-      //   code
-      // })
-
-      const result = {"code":0,"message":"获取成功","data":{"id":"1","openid":"oOpc26KiZFBKIm7SB8knFGvov1qg","mobile":"","gender":"0","nickname":"雪寒","avatar":"","subscribe_time":"2022-12-21 15:52:14","addr":"\/\/","status":"1","is_show":"1","companyArr":[{"companyNo":"GS2302231125079621","companyName":"北京百辰荣达国际科贸有限公司"},{"companyNo":"GS2302231323386950","companyName":"北京泓源广诚国际商贸有限公司"},{"companyNo":"GS2304031312553746","companyName":"北京锦兴弘昌科技有限公司"},{"companyNo":"GS2302231124114965","companyName":"北京普润心堂商贸有限公司"},{"companyNo":"GS2203161855277894","companyName":"北京万宇恒通国际科贸有限公司"}],"addtime":"2023-04-10 18:11:07","updatetime":"2023-04-19 17:19:07"}}
+      const result = await asyncRequest.userinfo({
+        code
+      })
 
+      // const result = {"code":0,"message":"获取成功","data":{"id":"1","openid":"oOpc26KiZFBKIm7SB8knFGvov1qg","mobile":"","gender":"0","nickname":"雪寒","avatar":"","subscribe_time":"2022-12-21 15:52:14","addr":"\/\/","status":"1","is_show":"1","companyArr":[{"companyNo":"GS2302231125079621","companyName":"北京百辰荣达国际科贸有限公司"},{"companyNo":"GS2302231323386950","companyName":"北京泓源广诚国际商贸有限公司"},{"companyNo":"GS2304031312553746","companyName":"北京锦兴弘昌科技有限公司"},{"companyNo":"GS2302231124114965","companyName":"北京普润心堂商贸有限公司"},{"companyNo":"GS2203161855277894","companyName":"北京万宇恒通国际科贸有限公司"}],"addtime":"2023-04-10 18:11:07","updatetime":"2023-04-19 17:19:07"}}
       this.state.loading = false
       switch(Number(result.code)){
         case 0:
-          this.companyArr = result.data.companyArr
-          this.hasPlatformDimension = result.data.is_show === "1"
+          this.companyArr = result.data.companyArr.filter(({info = []}) => info.includes(2) || info.includes('2'))
+          this.hasPlatformDimension = result.data.is_show === ( result.data.is_show || []).includes(2) || (result.is_show || []).includes('2')
           setOpenid(result.data.openid)
           break
         default: