build

src/components/newResultInfo/department.vue

@@ -4,107 +4,79 @@
       <div style="float:left;line-height:30px;display:flex;align-items:center">
         <el-popover placement="top" width="200" trigger="hover" content="不含业务公司供应商端数据">
           <template #reference>
-            <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer;padding-top:5px;padding-right:5px;display:inline-block"></i>
+            <i
+              class="el-icon-warning-outline"
+              style="font-size:16px;cursor:pointer;padding-top:5px;padding-right:5px;display:inline-block"
+            ></i>
           </template>
-        </el-popover>
-        部门完成情况
+        </el-popover>部门完成情况
       </div>
 
       <div style="float:right">
-        <el-select size="small" style="margin-right:10px;width:135px" v-model="companyNo" @change="requestData"
-          :disabled="isEmpty">
-          <el-option v-for="depart in cp_companies" :key="depart.value" :label="depart.label" :value="depart.value" />
+        <el-select
+          size="small"
+          style="margin-right:10px;width:135px"
+          v-model="companyNo"
+          @change="requestData"
+          :disabled="isEmpty"
+        >
+          <el-option
+            v-for="depart in cp_companies"
+            :key="depart.value"
+            :label="depart.label"
+            :value="depart.value"
+          />
         </el-select>
 
-        <el-date-picker :disabled="isEmpty" class="fr picker no-padding" v-model="daytime"
-          :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }" style=";width:100px"
-          value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :clearable="false" placeholder="选择日期"
-          :size="'small'" align="right" type="date" />
+        <el-date-picker
+          :disabled="isEmpty"
+          class="fr picker no-padding"
+          v-model="daytime"
+          :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }"
+          style=";width:100px"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          :editable="false"
+          :clearable="false"
+          placeholder="选择日期"
+          :size="'small'"
+          align="right"
+          type="date"
+        />
       </div>
     </div>
 
     <el-row style="margin-top: 10px; display: flex;width:100%;margin-top:10px" v-if="!isEmpty">
-      <el-table border size="mini" :data="list" :header-cell-class-name="setHeaderClassName"
-        :cell-class-name="setCellClassName">
+      <el-table
+        border
+        size="mini"
+        :data="list"
+        :header-cell-class-name="setHeaderClassName"
+        :cell-class-name="setCellClassName"
+        :span-method="spanMethod"
+      >
         <!-- <el-table-column fixed="left" label="公司" prop="company" align="center" width="45px" /> -->
+
         <el-table-column fixed="left" label="部门" prop="depart" align="center" width="60px">
           <template slot-scope="scope">
-            <p style="margin:0px" v-for="(chunk, index) in scope.row.depart.split('@')" :key="index">
-              {{ chunk }}
-            </p>
+            <p
+              style="margin:0px"
+              v-for="(chunk, index) in scope.row.depart.split('@')"
+              :key="index"
+            >{{ chunk }}</p>
           </template>
         </el-table-column>
-        <el-table-column label="当日营业收入" align="center" min-width="105px">
-          <template slot-scope="scope">{{ unit2TenThousand(scope.row.dayinfo.sale_total, isTenThound) }}</template>
-        </el-table-column>
 
-        <el-table-column label="当月营收目标" align="center" min-width="115px">
-          <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips, isTenThound) }}</template>
+        <el-table-column label="业绩类型" align="center" min-width="105px">
+          <template slot-scope="scope">{{ scope.row.type }}</template>
         </el-table-column>
 
-        <el-table-column label="当月营业收入(净)" align="center" min-width="120px">
-          <template slot-scope="scope">
-            <div style="display:flex;flex-direction: column;">
-              <div style="display:flex;flex-direction: column;">
-                <el-popover placement="top" :width="200" trigger="hover">
-                  <div class="table-size">
-                    <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
-                    <p>支付渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, isTenThound) }}</p>
-                    <!-- <p>税率: {{ unit2TenThousand(scope.row.currentMonthPure[0].tax, isTenThound) }}</p> -->
-                  </div>
-                  <template #reference>
-
-                    <p
-                      :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
-                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                      {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
-                    </p>
-                  </template>
-                </el-popover>
-              </div>
-            </div>
-          </template>
+        <el-table-column label="当月销售" align="center" min-width="105px">
+          <template slot-scope="scope">{{ unit2TenThousand(scope.row.monthSale,isTenThound) }}</template>
         </el-table-column>
 
-        <el-table-column label="当月成本" align="center" min-width="120px" v-if="costField">
-          <template slot-scope="scope">
-            <div style="display:flex;flex-direction: column;">
-              <el-popover placement="top" :width="200" trigger="hover">
-                <div class="table-size">
-                  <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost, isTenThound) }}</p>
-                  <p>渠道: {{ unit2TenThousand(scope.row.qd_cost, isTenThound) }}</p>
-                </div>
-                <template #reference>
-                  <p style="text-align: center;">
-                    <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                    {{
-                      unit2TenThousand(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2), isTenThound) }}
-                  </p>
-                </template>
-              </el-popover>
-            </div>
-          </template>
-        </el-table-column>
-
-        <el-table-column align="center" label="当月毛利" min-width="120px">
-          <template slot-scope="scope">
-            <div style="display:flex;flex-direction: column;">
-              <el-popover placement="top" :width="200" trigger="hover">
-                <div class="table-size">
-                  <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross, isTenThound) }}</p>
-                  <p>支付渠道: {{ unit2TenThousand(scope.row.qd_gross, isTenThound) }}</p>
-                </div>
-                <template #reference>
-                  <p style="text-align: center;">
-                    <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                    {{
-                      unit2TenThousand(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2), isTenThound)
-                    }}
-                  </p>
-                </template>
-              </el-popover>
-            </div>
-          </template>
+        <el-table-column label="销售退货" align="center" min-width="105px">
+          <template slot-scope="scope">{{ unit2TenThousand(scope.row.monthReturn,isTenThound) }}</template>
         </el-table-column>
       </el-table>
     </el-row>
@@ -119,7 +91,7 @@
 <script>
 import asyncRequest from "@/api/newResults";
 import setHeight from "@/mixins/index";
-import { mapCompany } from "./mapCompany"
+import { mapCompany } from "./mapCompany";
 import dayjs from "dayjs";
 
 import {
@@ -132,7 +104,7 @@ import {
 
 export default {
   mixins: [setHeight],
-  props: ['companies', 'costField', 'isTenThound'],
+  props: ["companies", "costField", "isTenThound"],
   data() {
     return {
       list: [],
@@ -141,7 +113,7 @@ export default {
       loading: false,
       isEmpty: false,
       cp_companies: []
-    }
+    };
   },
   computed: {
     currentCompanyName() {
@@ -153,83 +125,105 @@ export default {
     if (this.isEmpty) return;
     this.cp_companies = this.companies.map(item => ({
       ...item,
-      label: mapCompany[item.label] === '万宇' ? `平台公司: 万宇` : `业务公司: ${mapCompany[item.label]}`
-    }))
-
-
-    let list = ['平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润','业务公司: 锦兴', '业务公司: 知事']
-
-    const cp_list = this.cp_companies.map((item) => item.label);
+      label:
+        mapCompany[item.label] === "万宇"
+          ? `平台公司: 万宇`
+          : `业务公司: ${mapCompany[item.label]}`
+    }));
+
+    let list = [
+      "平台公司: 万宇",
+      "业务公司: 百辰",
+      "业务公司: 泓源",
+      "业务公司: 普润",
+      "业务公司: 锦兴",
+      "业务公司: 知事"
+    ];
+
+    const cp_list = this.cp_companies.map(item => item.label);
     list = list.filter(item => cp_list.includes(item));
-    this.cp_companies = list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+    this.cp_companies = list.map(item => this.cp_companies.find(cp_item => cp_item.label === item));
     this.companyNo = this.cp_companies[0].value;
-
     this.companyNo = this.cp_companies[0].value;
     this.daytime = this.transformTime();
-    this.requestData();
   },
-  watch: { daytime: { handler() { this.requestData() } } },
+  watch: {
+    daytime: {
+      handler() {
+        this.requestData();
+      }
+    }
+  },
   methods: {
     addition,
     unit2TenThousand,
-    setCellClassName({ column ,row }) {
+    setCellClassName({ column, row }) {
       const { label } = column;
 
-      let base = ''
+      let base = "";
 
-      if(row.depart.indexOf('万宇') !== -1) {
-        base += 'font-bold '
+      if (row.depart.indexOf("万宇") !== -1) {
+        base += "font-bold ";
       }
 
-
-      if (label === "当月营收目标")  {
-        base += "bg__success"
-        return base
+      if (label === "当月营收目标") {
+        base += "bg__success";
+        return base;
       }
 
-      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') {
-        base += "bg__success_1"
+      if (
+        (label.indexOf("营业") !== -1 || label.indexOf("营收") !== -1) &&
+        label !== "当日营业收入"
+      ) {
+        base += "bg__success_1";
         return base;
       }
 
-
       if (label === "毛利目标") {
-        base += "bg__primary"
-        return base
+        base += "bg__primary";
+        return base;
       }
 
-      if (label.indexOf('毛利') !== -1) {
-        base += "bg__primary_1"
+      if (label.indexOf("毛利") !== -1) {
+        base += "bg__primary_1";
         return base;
       }
-      if (label.indexOf('成本') !== -1) {
-        base += "bg__warning_1"
+      if (label.indexOf("成本") !== -1) {
+        base += "bg__warning_1";
         return base;
       }
 
-      return base
+      return base;
     },
     setHeaderClassName({ column }) {
       const { label } = column;
-      if (label === "当月营收目标") return "bg__success"
-      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') return "bg__success_1"
-      if (label === "毛利目标") return "bg__primary"
-      if (label.indexOf('毛利') !== -1) return "bg__primary_1"
-      if (label.indexOf('成本') !== -1) return "bg__warning_1"
+      if (label === "当月营收目标") return "bg__success";
+      if (
+        (label.indexOf("营业") !== -1 || label.indexOf("营收") !== -1) &&
+        label !== "当日营业收入"
+      )
+        return "bg__success_1";
+      if (label === "毛利目标") return "bg__primary";
+      if (label.indexOf("毛利") !== -1) return "bg__primary_1";
+      if (label.indexOf("成本") !== -1) return "bg__warning_1";
     },
     getCurrentRateStyle(current) {
       const days = dayjs(this.daytime).daysInMonth();
       const oneDay = Number(division(100, days)).toFixed(2);
       const currentDay = dayjs(this.daytime).date();
-      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
-      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+      const currentTotalTip = Number(
+        multiplication(currentDay, oneDay)
+      ).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? "color:red" : "";
     },
     getCurrentValueStyle(current, total) {
       const days = dayjs(this.daytime).daysInMonth();
       const oneDay = Number(division(total, days)).toFixed(2);
       const currentDay = dayjs(this.daytime).date();
-      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
-      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
+      const currentTotalTip = Number(
+        multiplication(currentDay, oneDay)
+      ).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? "color: red" : "";
     },
     transformTime() {
       let time = new Date();
@@ -255,7 +249,8 @@ export default {
           spanOneArr.push(1);
         } else {
           //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
-          if (item.company === arr[index - 1].company) {
+          if (
+            (item.depart === arr[index - 1].depart)) {
             //第一列需合并相同内容的判断条件
             spanOneArr[concatOne] += 1;
             spanOneArr.push(0);
@@ -270,99 +265,56 @@ export default {
     },
     async requestData() {
       this.loading = true;
-      this.list = [];
-      const res = await asyncRequest.departmentEveryDay({ daytime: this.daytime, companyNo: this.companyNo });
+
+      const res = await asyncRequest.departmentEveryDay({
+        daytime: this.daytime,
+        companyNo: this.companyNo
+      });
 
       if (res.code === 0 && res.data && res.data.length > 0) {
-        // 非万宇 营业目标重取
-        // if (this.companyNo !== "GS2203161855277894") {
-        //   const r = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: this.companyNo });
-        //   const { total_tips, companyName } = r.data[0] || {};
-        //   res.data.forEach(item => {
-        //     const index = companyName.indexOf(item.depart);
-        //     item.total_tips = (index === -1 && !(item.depart === "普润" && this.companyNo === "GS2304031312553746")) ? '0.00' : total_tips;
-        //   })
-        // }
-
-        let list = (res.data || [])
-          .map(({ depart, msale_total, mth_total, sale_total, th_total, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mzy_cost_total, mchannel_cost_total }) => {
-            return {
-              depart, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mchannel_cost_total, mzy_cost_total,
-              dayinfo: { sale_total, th_total }, monthinfo: { msale_total, mth_total }
-            }
-          });
-
-        list = list.filter(item => Number(item.monthinfo.msale_total) !== 0)
-
-        this.total = list.reduce((prev, current) => {
-          const { total_tips = 0, day = 0, month = 0 } = current;
-          return { total_tips: addition(total_tips, prev.total_tips), month: addition(month, prev.month), day: addition(day, prev.day) }
-        },
-          { total_tips: 0, month: 0, day: 0 }
-        )
-
-        let mapDepart = list.map(({ depart }) => depart);
-
-        list = mapDepart.map(d => list.find(({ depart }) => depart === d))
-
-        const mapToDepartment = { 百辰: "客服部@百辰", 泓源: "网络部@泓源", 普润: "	项目部@普润", 平台: "	平台部@万宇" }
-
-        const company = this.companies.find(item => item.value === this.companyNo);
-        this.list = list.map(({ depart, total_tips, dayinfo, monthinfo, mchannel_sale_total, mzy_sale_total, mchannel_cost_total, mzy_cost_total }) => {
-          mzy_sale_total = Number(addition(Number(multiplication(mzy_sale_total,0.05)).toFixed(2),mzy_sale_total)).toFixed(2);
-          mchannel_sale_total = Number(addition(Number(multiplication(mchannel_sale_total,0.05)).toFixed(2),mchannel_sale_total)).toFixed(2);
-          /* 月净销售 = 月销售 - 月退货 **/
-          let monthNetSales = subtraction(monthinfo.msale_total, monthinfo.mth_total)
-          monthNetSales = Number(addition(Number(multiplication(monthNetSales,0.05)).toFixed(2),monthNetSales)).toFixed(2);
-
-
-          /* 月经销售完成率 = 月净销售 / 销售指标 **/
-          const monthProportion = multiplication(division(monthNetSales, total_tips), 100).toFixed(2)
-          return {
-            total_tips, // 营收目标
-            zy_cost: mzy_cost_total, // 自营成本
-            qd_cost: mchannel_cost_total, // 渠道成本
-            depart: mapToDepartment[depart],
-            company: company.label,
-            currentMonthPure: [
-              { zy: mzy_sale_total, // 加%5税率 
-                qd: mchannel_sale_total
-              }], // 当月营业收入(净)
-            zy_gross: Number(subtraction(mzy_sale_total, mzy_cost_total)).toFixed(2), // 自营毛利  = 自营营收 - 自营成本
-            qd_gross: Number(subtraction(mchannel_sale_total, mchannel_cost_total)).toFixed(2), // 渠道毛利 = 渠道营收 - 渠道成本
-            dayinfo: { ...dayinfo, /** 日销售额 = 日销售额 - 日退货额 */  sale_total: subtraction(dayinfo.sale_total, dayinfo.th_total) },
-            /* 占比 =  (当前部门销售额 / 各部门总销售额) / 100 **/
-            proportion: multiplication(division(monthinfo.msale_total, this.total.month) || 0, 100) || 0,
-            monthinfo: { monthNetSales, monthProportion: monthProportion }
-          }
-        })
 
-        // const wanyuIndex = this.list.findIndex(item => item.depart.indexOf('万宇') !== -1);
-        // if(wanyuIndex !== -1){
-        //   const item = this.list.splice(wanyuIndex,1);
-        //   this.list.unshift(item[0]);
-        // }
+        let list = res.data;
+
+        const mapToDepartment = {
+          百辰: "客服部@百辰",
+          泓源: "网络部@泓源",
+          普润: "项目部@普润",
+          平台: "平台部@万宇"
+        };
 
-        let l = ['万宇','百辰','泓源','普润'];
-        const cl = this.list.map(item => item.depart)
+        list  = list.map(item => {
 
+          const depart = mapToDepartment[item.depart] || '--'
 
-        l = l.filter(item => {
-          return cl.findIndex(i => i.indexOf(item)) !== -1
-        });
+          const zy = {
+            depart,
+            type:'直营/自营',
+            monthSale:item.mzy_sale_total,
+            monthReturn:item.th_total
+          };
 
-        this.list = l.map(item => {
-          return this.list.find(i => i.depart.indexOf(item) !== -1);
+          const qd = {
+            depart,
+            type:'支付渠道',
+            monthSale:item.mchannel_sale_total,
+            monthReturn:item.th_total
+          };
+
+          return [zy, qd]
         })
+          
+        this.list = [];
+        list.forEach(item => Array.isArray(item) && item.forEach(i => this.list.push(i)));
+
+        console.log(this.list);
       } else {
         this.list = [];
       }
       this.getHeight();
       this.loading = false;
-    },
-  },
-}
-
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/index.vue

@@ -14,12 +14,12 @@ export default {
   data(){
     return {
       routes:[
-        {label:'2024业绩报表-Beta1.0', link: '/?path=newResults'},
         {label:'1.业绩报表', link: '/?path=results'},
         {label:'2.利润看板', link: '/?path=report'},
         {label:'3.应收账款', link: '/?path=accountsReceivable'},
         {label:'4.订单情况', link: '/?path=newReport'},
         {label:'5.发货情况', link: '/?path=stock'},
+        {label:'2024业绩报表', link: '/?path=newResults'},
       ]
     }
   },

src/pages/newResultsInfo.vue

@@ -25,9 +25,9 @@
 
 
       <div class="container">
-        <result-company :companies="companies" :isTenThound="isTenThound" :costField="costField" />
+        <!-- <result-company :companies="companies" :isTenThound="isTenThound" :costField="costField" /> -->
         <result-department :companies="companies" :isTenThound="isTenThound" :costField="costField" />
-        <result-company-month :companies="companies" :isTenThound="isTenThound" :costField="costField" />
+        <!-- <result-company-month :companies="companies" :isTenThound="isTenThound" :costField="costField" /> -->
       </div>
     </div>
 
@@ -97,34 +97,33 @@ export default {
       this.state.loading = true
       const openid = getOpenid()
       const code = getParameterByName('code')
-      const result = await userRequest.userinfo({ ...(openid ? { openid } : { code }) })
-
-        //  const result = {
-        //   "code": 0,
-        //   "message": "获取成功",
-        //   "data": {
-        //     "openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
-        //     "subscribe_time": "2022-12-21 15:52:14",
-        //     "updatetime": "2023-05-09 16:22:33",
-        //     "addtime": "2023-04-10 18:11:17",
-        //     "is_show": ["1", "2", "4", "6", "cost_field"],
-        //     "nickname": "雪寒",
-        //     "addr": "\/\/",
-        //     "gender": "0",
-        //     "mobile": "",
-        //     "avatar": "",
-        //     "status": "1",
-        //     "id": "1",
-        //     "companyArr": [
-        //       {"companyNo": "GS2302231125079621", "companyName": "北京百辰荣达国际科贸有限公司", "info": [1, 2, 6]}, 
-        //       {"companyNo": "GS2302231323386950","companyName": "北京泓源广诚国际商贸有限公司", "info": [1, 2, 6]}, 
-        //       {"companyNo": "GS2203161855277894","companyName": "北京万宇恒通国际科贸有限公司", "info": [1, 2, 6]},
-        //       {"companyNo": "GS2304031312553746","companyName": "北京锦兴弘昌科技有限公司",  "info": [1, 2, 6]}, 
-        //       {"companyNo": "GS2302231124114965","companyName": "北京普润心堂商贸有限公司", "info": [1, 2, 6]},
-        //       {"companyNo": "GS2401181650538135","companyName": "北京知事文化产业发展有限公司", "info": [1, 2, 6]}
-        //     ]
-        // 	}
-        // }
+      // const result = await userRequest.userinfo({ ...(openid ? { openid } : { code }) })
+         const result = {
+          "code": 0,
+          "message": "获取成功",
+          "data": {
+            "openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
+            "subscribe_time": "2022-12-21 15:52:14",
+            "updatetime": "2023-05-09 16:22:33",
+            "addtime": "2023-04-10 18:11:17",
+            "is_show": ["1", "2", "4", "6", "cost_field"],
+            "nickname": "雪寒",
+            "addr": "\/\/",
+            "gender": "0",
+            "mobile": "",
+            "avatar": "",
+            "status": "1",
+            "id": "1",
+            "companyArr": [
+              {"companyNo": "GS2302231125079621", "companyName": "北京百辰荣达国际科贸有限公司", "info": [1, 2, 6]}, 
+              {"companyNo": "GS2302231323386950","companyName": "北京泓源广诚国际商贸有限公司", "info": [1, 2, 6]}, 
+              {"companyNo": "GS2203161855277894","companyName": "北京万宇恒通国际科贸有限公司", "info": [1, 2, 6]},
+              {"companyNo": "GS2304031312553746","companyName": "北京锦兴弘昌科技有限公司",  "info": [1, 2, 6]}, 
+              {"companyNo": "GS2302231124114965","companyName": "北京普润心堂商贸有限公司", "info": [1, 2, 6]},
+              {"companyNo": "GS2401181650538135","companyName": "北京知事文化产业发展有限公司", "info": [1, 2, 6]}
+            ]
+        	}
+        }
 
       this.companies = result.data.companyArr.reduce((prev, current) => {
         return current.info.includes(6) || current.info.includes('6') ? [...prev, {