build

src/components/reports/index.js

@@ -1,10 +1,12 @@
 import WanyuReport from "./src/WanyuReport.vue"
+import WanyuTypeReport from "./src/WanyuTypeReport.vue"
 import DepartmentReport from "./src/DepartmentReport.vue"
 import ControlDisplay from "./src/ControlDisplay.vue"
 
 const components = [
   WanyuReport,
   ControlDisplay,
+  WanyuTypeReport,
   DepartmentReport
 ]
 

src/components/reports/src/ControlDisplay.vue

@@ -23,7 +23,7 @@
 
         <template v-if="hasPlatformDimension">
           <h3>平台维度</h3>
-          <el-row class="myul">
+          <el-row class="myul" :gutter="20">
             <el-col 
               style="margin-bottom:20px" 
               :xs="24" 
@@ -34,6 +34,17 @@
              >
               <wanyu-report :date="date" />
             </el-col>
+
+            <el-col 
+              style="margin-bottom:20px" 
+              :xs="24" 
+              :sm="24" 
+              :md="12" 
+              :lg="12" 
+              :xl="12"
+             >
+              <wanyu-type-report :date="date" />
+            </el-col>
           </el-row>
         </template>
 

src/components/reports/src/WanyuTypeReport.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="SalesReportRejectedNew">
+    <!-- <div class="table-header">北京万宇恒通国际科贸有限公司</div> -->
+    <el-table
+      :data="tableData"
+      v-loading="loading"
+      border
+      :max-height="maxHeight"
+      :size="'mini'"
+      style="width: 100%"
+      row-key="id"
+      :span-method="objectSpanMethod"
+    >
+      <el-table-column label="部门" fixed="left" width="70" prop="depart">
+        <template slot-scope="scope">{{getCompanyLabel(scope.row.depart)}}</template>
+      </el-table-column>
+
+      <el-table-column label="业绩类型" prop="type" align="center" />
+      <el-table-column label="日净销售额" prop="day" align="center" >
+        <template slot-scope="scope">
+           {{ unit2TenThousand(scope.row.day) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="月净销售额" prop="month" align="center">
+        <template slot-scope="scope">
+          {{ unit2TenThousand(scope.row.month) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="月占比(%)" prop="proportion" align="center" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import asyncRequest from "@/api/report";
+import setHeight from "@/mixins/index";
+import { 
+  unit2TenThousand,
+  getCompanyLabel,
+  multiplication,
+  subtraction,
+  addition, 
+  division
+} from "./_utils";
+
+
+// const MOCK_DATA = {
+//     "code": 0, 
+//     "message": "获取成功", 
+//     "data": [
+//         {
+//             "depart": "泓源", 
+//             "total_tips": "9000000.00", 
+//             "sale_total": "0.00", 
+//             "th_total": "0.00", 
+//             "zy_sale_total": "0.00", 
+//             "channel_sale_total": "0.00", 
+//             "msale_total": "0.00", 
+//             "mth_total": "0.00", 
+//             "mchannel_sale_total": "10.00", 
+//             "mzy_sale_total": "9.00"
+//         }, 
+//         {
+//             "depart": "普润", 
+//             "total_tips": "13650000.00", 
+//             "sale_total": "0.00", 
+//             "th_total": "0.00", 
+//             "zy_sale_total": "0.00", 
+//             "channel_sale_total": "0.00", 
+//             "msale_total": "9000.00", 
+//             "mth_total": "0.00", 
+//             "mchannel_sale_total": "20.00", 
+//             "mzy_sale_total": "10.00"
+//         }, 
+//         {
+//             "depart": "百辰", 
+//             "total_tips": "7000000.00", 
+//             "sale_total": "0.00", 
+//             "th_total": "0.00", 
+//             "zy_sale_total": "0.00", 
+//             "channel_sale_total": "0.00", 
+//             "msale_total": "2020.00", 
+//             "mth_total": "0.00", 
+//             "mchannel_sale_total": "30.00", 
+//             "mzy_sale_total": "40.00"
+//         }, 
+//         {
+//             "depart": "平台", 
+//             "total_tips": "970000.00", 
+//             "sale_total": "0.00", 
+//             "th_total": "0.00", 
+//             "zy_sale_total": "0.00", 
+//             "channel_sale_total": "0.00", 
+//             "msale_total": "0.00", 
+//             "mth_total": "0.00", 
+//             "mchannel_sale_total": "60.00", 
+//             "mzy_sale_total": "100.00"
+//         }
+//     ]
+// }
+
+export default {
+  name: "WanyuTypeReport",
+  props: ["date"],
+  mixins: [setHeight],
+  watch: {
+    date: function(val) {
+      this.dataTime = val;
+      if (val) {
+        this.searchList();
+      }
+    }
+  },
+  data() {
+    return {
+      total:{
+        day:0,
+        month:0,
+        total_tips: 0
+      },
+      dataTime: this.date,
+      loading: false,
+      maxHeight: "0",
+      tableData: []
+    };
+  },
+  async created() {
+    window.onresize = () => {
+      this.getHeight();
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getHeight();
+    });
+    this.searchList();
+  },
+  methods: {
+    getCompanyLabel,
+    unit2TenThousand,
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        if (rowIndex % 2 === 0) {
+          return {
+            rowspan: 2,
+            colspan: 1
+          };
+        } else {
+          return {
+            rowspan: 0,
+            colspan: 0
+          };
+        }
+      }
+    },
+    async searchList() {
+      this.loading = true;
+      this.tableData = [];
+      const res = await asyncRequest.companyReport({
+        daytime: this.date
+      });
+
+      if (res.code === 0 && res.data && res.data.length > 0) {
+
+        /***
+         * depart 部门
+         * mchannel_sale_total  部门每月渠道净销售额  
+         * mzy_sale_total 部门每月直营净销售额
+         * zy_sale_total 部门每日净销售额
+         * channel_sale_total 部门每日渠道净销售额
+        */
+        const tableData = res.data.reduce((prev,current) => {
+          const {
+           mzy_sale_total,
+           zy_sale_total,
+           mchannel_sale_total,
+           channel_sale_total
+          } = current
+
+          /*  月合计 = 月渠道 + 月直营 **/
+          const monthTotal = addition(mchannel_sale_total,mzy_sale_total) || 0
+          /* 直营月销售占比 =  月直营销售额 / 月合计销售额 **/
+          const proportion_z = (division(mzy_sale_total,monthTotal) || 0).toFixed(2)
+          /* 渠道月销售占比 =  1 - 直营月销售占比 **/
+          const proportion_q = ( Number(proportion_z) === 0 ? 0 : (1 - Number(proportion_z))).toFixed(2)
+
+          return ([...prev,...([{
+            depart:current.depart,
+            type:'直营',
+            month:mzy_sale_total,
+            day:zy_sale_total,
+            proportion:proportion_z
+          },{
+            depart:current.depart,
+            type:'渠道',
+            month:mchannel_sale_total,
+            day:channel_sale_total,
+            proportion:proportion_q
+          }])])
+        },[])
+
+
+        this.tableData = tableData
+
+        console.log(this.tableData)
+
+      } else {
+        this.tableData = [];
+      }
+      this.getHeight();
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.SalesReportRejectedNew {
+}
+
+.table-header {
+  font-size: 14px;
+  border-bottom: none;
+}
+
+.table-sub__header {
+
+  span{
+    font-weight: bold !important;
+  }
+}
+</style>
+

src/pages/report.vue

@@ -30,9 +30,6 @@ export default {
   },
   async mounted(){
     this.state.loading = true;
-
-    alert(getParameterByName('code'))
-    return
     const result = await asyncRequest.userinfo(
       { code: getParameterByName('code') }
     )

src/styles/index.scss

@@ -0,0 +1,3 @@
+.el-table_14_column_58{
+
+}

src/utils/auth.js

@@ -21,4 +21,4 @@ export function getParameterByName(name) {
   if (!results) return null;
   if (!results[2]) return '';
   return decodeURIComponent(results[2].replace(/\+/g, ' '));
-}
+}