build

src/components/newEarningReport/calc.js

@@ -0,0 +1,188 @@
+export const amountData = {
+  "companyNo": "yyyt",
+  "companyName": "合计-元隆雅图",
+  "cost_tips": "0",
+  "total_tips": "0",
+  "info": [
+      {
+          "0": {
+              "type": "自营",
+              "dayinfo": {
+                  "sale_total": "0.00",
+                  "th_total": "0.00",
+                  "type": "1",
+                  "cgd_total": "0.00",
+                  "cgd_th_total": "0.00"
+              },
+              "monthinfo": {
+                  "0": {
+                      "msale_total": "0.00",
+                      "mth_total": "0.00",
+                      "mcgd_total": "0.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "1"
+                  },
+                  "1": {
+                      "msale_total": "0.00",
+                      "mth_total": "0.00",
+                      "mcgd_total": "0.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "2"
+                  },
+                  "2": {
+                      "msale_total": "0.00",
+                      "mth_total": "0.00",
+                      "mcgd_total": "0.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "3"
+                  },
+                  "3": {
+                      "msale_total": "0.00",
+                      "mth_total": "0.00",
+                      "mcgd_total": "618.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "4"
+                  },
+                  "msale_total": "0.00",
+                  "mcost_total": "0.00"
+              }
+          },
+          "1": {
+              "type": "渠道",
+              "dayinfo": {
+                  "sale_total": "0.00",
+                  "th_total": "0.00",
+                  "type": "2",
+                  "cgd_total": "327.60",
+                  "cgd_th_total": "0.00"
+              },
+              "monthinfo": {
+                  "0": {
+                      "msale_total": "5868465.56",
+                      "mth_total": "44010.00",
+                      "mcgd_total": "5680337.10",
+                      "mcgd_th_total": "42689.70",
+                      "type": "1"
+                  },
+                  "1": {
+                      "msale_total": "3545201.62",
+                      "mth_total": "1901822.96",
+                      "mcgd_total": "3352074.44",
+                      "mcgd_th_total": "1799760.03",
+                      "type": "2"
+                  },
+                  "2": {
+                      "msale_total": "1951934.40",
+                      "mth_total": "0.00",
+                      "mcgd_total": "0.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "3"
+                  },
+                  "3": {
+                      "msale_total": "0.00",
+                      "mth_total": "0.00",
+                      "mcgd_total": "618.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "4"
+                  },
+                  "msale_total": "1643378.66",
+                  "mcost_total": "1552314.41"
+              }
+          },
+          "2": {
+              "type": "供应商端",
+              "dayinfo": {
+                  "sale_total": "0.00",
+                  "th_total": "0.00",
+                  "type": "3",
+                  "cgd_total": "0.00",
+                  "cgd_th_total": "0.00"
+              },
+              "monthinfo": {
+                  "0": {
+                      "msale_total": "5868465.56",
+                      "mth_total": "44010.00",
+                      "mcgd_total": "5680337.10",
+                      "mcgd_th_total": "42689.70",
+                      "type": "1"
+                  },
+                  "1": {
+                      "msale_total": "3545201.62",
+                      "mth_total": "1901822.96",
+                      "mcgd_total": "3352074.44",
+                      "mcgd_th_total": "1799760.03",
+                      "type": "2"
+                  },
+                  "2": {
+                      "msale_total":0,
+                      "mth_total": "0.00",
+                      "mcgd_total": "0.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "3"
+                  },
+                  "3": {
+                      "msale_total": "0.00",
+                      "mth_total": "0.00",
+                      "mcgd_total": "618.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "4"
+                  },
+                  "msale_total": 0,
+                  "mcost_total": "0.00"
+              }
+          },
+          "3": {
+              "type": "物流费用",
+              "dayinfo": {
+                  "sale_total": "0.00",
+                  "th_total": "0.00",
+                  "type": "4",
+                  "cgd_total": "0.00",
+                  "cgd_th_total": "0.00"
+              },
+              "monthinfo": {
+                  "0": {
+                      "msale_total": 0,
+                      "mth_total": 0,
+                      "mcgd_total": 0,
+                      "mcgd_th_total": 0,
+                      "type": "1"
+                  },
+                  "1": {
+                      "msale_total":0,
+                      "mth_total": 0,
+                      "mcgd_total":0,
+                      "mcgd_th_total": 0,
+                      "type": "2"
+                  },
+                  "2": {
+                      "msale_total": 0,
+                      "mth_total": "0.00",
+                      "mcgd_total": "0.00",
+                      "mcgd_th_total": "0.00",
+                      "type": "3"
+                  },
+                  "3": {
+                      "msale_total": "0.00",
+                      "mth_total": "0.00",
+                      "mcgd_total": 0,
+                      "mcgd_th_total": "0.00",
+                      "type": "4"
+                  },
+                  "msale_total": 0,
+                  "mcost_total":0
+              }
+          }
+      }
+  ],
+  "sale_total": 0,
+  "cost_total": 0,
+  "msale_total": 0,
+  "mcost_total":0,
+  "gross_completion": 0,
+  "completion_rate":0,
+  "gross_completion_rate": 0,
+  "gross_sale_completion_rate": "0.00"
+}
+
+export function calcAmount(){}

src/components/newEarningReport/company-bu.vue

@@ -0,0 +1,443 @@
+<template>
+  <div v-loading="loading">
+    <div class="search clear" style="align-items: center;;">
+      <div style="float:left;line-height:30px;display:flex;align-items:center">
+        <el-tooltip placement="top" width="50px" trigger="hover" content="业务公司">
+            <i
+              class="el-icon-warning-outline"
+              style="font-size:16px;cursor:pointer;;display:inline-block;padding-right: 5px"
+            ></i>
+        </el-tooltip>
+
+        <span style="font-size: 15px;">月度完成情况</span>
+      </div>
+
+      <div style="float:right">
+        <el-date-picker 
+          class="fr picker no-padding" 
+          v-model="daytime" 
+          style="width:95px" 
+          value-format="yyyy-MM-dd"
+          :editable="false" 
+          :disabled="isEmpty" 
+          :clearable="false" 
+          :size="'small'" 
+          format="yyyy-MM-dd" 
+          type="date"
+          align="right"
+          placeholder="选择日期"
+          @change="requestData"
+          :picker-options="{ disabledDate(time) { return time.getTime() > Date.now(); } }"
+        />
+      </div>
+    </div>
+
+    <el-row style="margin-top:10px;margin-top:10px" v-if="!isEmpty">
+      <el-table border size="mini" :data="tableData" :header-cell-class-name="setHeaderClassName"
+        :cell-class-name="setCellClassName">
+        <el-table-column fixed="left" label="公司" prop="companyName" align="center" width="65px">
+          <template slot-scope="scope">
+            <div v-if="scope.row.companyName.indexOf('普润') === -1">
+              {{ mapCompany[scope.row.companyName] || scope.row.companyName }}
+            </div>
+
+            <div v-else>
+              <el-popover placement="right" width="200" trigger="hover" content="普润&锦兴&知事">
+                <template #reference>
+                  <i class="el-icon-warning-outline" style="font-size:14px;cursor:pointer"></i>
+                  普润
+                </template>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="当日营业收入" align="center" width="95px">
+          <template slot-scope="scope">
+            {{ unit2TenThousand(scope.row.sale_total, isTenThound) }}
+          </template>
+        </el-table-column>
+
+          <el-table-column label="营收目标" align="center" min-width="95px">
+            <template slot-scope="scope">
+              {{ unit2TenThousand(scope.row.total_tips, isTenThound) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营业收入(净)" align="center" min-width="115px">
+            <template slot-scope="scope">
+              <div style="display:flex;justify-content:center" :style="`${getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
+               {{ unit2TenThousand(scope.row.msale_total, isTenThound) }}
+                <el-popover placement="right" :width="200" trigger="click">
+                  <div class="table-size">
+                    <p>直营/自营: {{ unit2TenThousand(scope.row.info[0][0].monthinfo.msale_total, isTenThound) }}</p>
+                    <p>支付渠道: {{ unit2TenThousand(scope.row.info[0][1].monthinfo.msale_total, isTenThound) }}</p>
+                    <p>供应商端: {{ unit2TenThousand(scope.row.info[0][2].monthinfo.msale_total, isTenThound) }}</p>
+                  </div>
+
+                  <template #reference>
+                    <div :style="`${getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
+                      <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
+                    </div>
+                  </template>
+                </el-popover>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营收完成%" align="center" min-width="85px">
+            <template slot-scope="scope">
+              <div :style="`${getCurrentRateStyle(scope.row.completion_rate)}`">{{ (String(scope.row.completion_rate) === 'NaN' ? 0 :  scope.row.completion_rate) + "%" }}
+              </div>
+            </template>
+          </el-table-column>
+
+
+          <template v-if="costField">
+            <el-table-column label="毛利目标" align="center" min-width="90px">
+              <template slot-scope="scope">
+                {{ costField ? unit2TenThousand(scope.row.cost_tips, isTenThound) : '***' }}
+              </template>
+            </el-table-column>
+
+            <el-table-column label="毛利完成" align="center" min-width="90px">
+              <template slot-scope="scope">
+                <div :style="`${getCurrentValueStyle(scope.row.gross_completion, scope.row.cost_tips)}`">
+                  {{ costField ? unit2TenThousand(scope.row.gross_completion, isTenThound) : '***' }}
+                </div>
+              </template>
+            </el-table-column>
+            </template>
+
+
+            <el-table-column label="毛利完成%" align="center" min-width="85px">
+              <template slot-scope="scope">
+                <div :style="getCurrentRateStyle(scope.row.gross_completion_rate)">
+                  {{ scope.row.gross_completion_rate + '%' }}
+                </div>
+              </template>
+            </el-table-column>
+
+          <template v-if="costField">
+            <el-table-column label="成本合计" align="center" min-width="125px">
+              <template slot-scope="scope">
+                <div style="display:flex;justify-content:center" v-if="costField">
+                  {{ unit2TenThousand(scope.row.mcost_total, isTenThound) }}
+                  <el-popover placement="right" :width="200" trigger="click">
+                    <div class="table-size">
+                      <p>直营/自营: {{ unit2TenThousand(scope.row.info[0][0].monthinfo.mcost_total, isTenThound) }}</p>
+                      <p>支付渠道: {{ unit2TenThousand(scope.row.info[0][1].monthinfo.mcost_total, isTenThound) }}</p>
+                      <p>供应商端: {{ unit2TenThousand(scope.row.info[0][2].monthinfo.mcost_total, isTenThound) }}</p>
+                      <p>物流费用: {{ unit2TenThousand(scope.row.info[0][3].monthinfo.mcost_total, isTenThound) }}</p>
+                    </div>
+
+                    <template #reference>
+                      <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
+                    </template>
+                  </el-popover>
+                </div>
+
+                <p v-else>***</p>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="实际毛利率" align="center" width="85px">
+              <template slot-scope="scope">
+                <!-- <div :style="`${getCurrentRateStyle(scope.row.gross_sale_completion_rate)}`"> -->
+                {{ costField ? unit2TenThousand(scope.row.gross_sale_completion_rate) + "%" : '***' }}
+                <!-- </div> -->
+              </template>
+            </el-table-column>
+          </template>
+      </el-table>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+    <!--  -->
+  </div>
+</template>
+
+
+<script>
+import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
+import asyncRequest from "@/api/newResults";
+import { mapCompany } from "./mapCompany";
+import dayjs from "dayjs"
+
+export default {
+  props: ['companies', 'costField', 'isTenThound'],
+  data() {
+    return {
+      daytime: "",
+      loading: false,
+      tableData: [],
+      companyNo: "",
+      plat_cp_companies:[],
+      cp_companies: [],
+      isEmpty: false,
+      mapCompany
+    }
+  },
+  mounted() {
+    let hasCompose = false;
+    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
+    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");
+    const zsIndex = this.companies.findIndex((item) => item.label === "北京知事文化产业发展有限公司");
+
+    if (jxIndex !== -1 || prIndex !== -1 || zsIndex !== -1) hasCompose = true;
+    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司" && item.label !== "北京知事文化产业发展有限公司")
+    if (hasCompose) this.cp_companies = [...this.cp_companies, { value: "GS2302231124114965", label: "普润&锦兴&知事" }]
+
+    this.isEmpty = this.cp_companies.length === 0;
+    if (this.isEmpty) return;
+
+    this.cp_companies = this.cp_companies.map((item, index) => {
+      let label = '';
+
+
+      if (item.label === '北京万宇恒通国际科贸有限公司') {
+        label = '平台公司: 万宇'
+      }
+
+      if (item.label === '北京泰文创供应链管理有限公司') {
+        label = '平台公司: 泰文创'
+      }
+
+      if (item.label === '北京元隆雅图文化传播股份有限公司') {
+        label = '平台公司: 元隆'
+      }
+
+      if (item.label === '结算单E企购') {
+        label = '结算单E企购'
+      }
+
+      if (item.label === "普润&锦兴&知事") label = `业务公司: 普润&锦兴&知事`
+      if (label === '') label = `业务公司: ${mapCompany[item.label]}`;
+      return ({ ...item, label })
+    })
+
+
+    let plat_list = ['所有业务公司','业务公司: 百辰', '业务公司: 泓源', '业务公司: 普润&锦兴&知事']
+
+    // let bu_list = ['所有业务公司','平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润&锦兴&知事', '平台公司: 泰文创'];
+    
+    const plat_cp_list = this.cp_companies.map((item) => item.label);
+    plat_list = plat_list.filter(item => plat_cp_list.includes(item));
+    this.plat_cp_companies = plat_list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+
+
+    if(this.plat_cp_companies.length === 3){
+      this.plat_cp_companies =  [{ value: "", label: "所有业务公司" }, ...this.plat_cp_companies]
+    }
+
+    this.companyNo = this.plat_cp_companies[0].value;
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  methods: {
+    unit2TenThousand,
+    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' : ''
+    },
+    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' : '';
+    },
+    addDataToCompany(c1, c2) {
+      // Number(addition(c1.total_tips,c2.total_tips)).toFixed(2)
+
+      return {
+        companyName: '普润',
+        cost_tips: Number(c1.cost_tips).toFixed(2),
+        total_tips: Number(c1.total_tips).toFixed(2),
+        monthinfo: c1.monthinfo.map((item, index) => ({
+          mcgd_th_total: Number(addition(item.mcgd_th_total, c2.monthinfo[index].mcgd_th_total)).toFixed(2),
+          mcgd_total: Number(addition(item.mcgd_total, c2.monthinfo[index].mcgd_total)).toFixed(2),
+          msale_total: Number(addition(item.msale_total, c2.monthinfo[index].msale_total)).toFixed(2),
+          mth_total: Number(addition(item.mth_total, c2.monthinfo[index].mth_total)).toFixed(2),
+          type: item.type
+        })),
+        dayinfo: c1.dayinfo.map((item, index) => {
+          return {
+            cgd_th_total: Number(addition(item.cgd_th_total, c2.dayinfo[index].cgd_th_total)).toFixed(2),
+            cgd_total: Number(addition(item.cgd_total, c2.dayinfo[index].cgd_total)).toFixed(2),
+            sale_total: Number(addition(item.sale_total, c2.dayinfo[index].sale_total)).toFixed(2),
+            th_total: Number(addition(item.th_total, c2.dayinfo[index].th_total)).toFixed(2),
+            type: item.type
+          }
+        }),
+      }
+    },
+    setCellClassName({ column, row }) {
+      const { label } = column;
+      let base = ''
+
+      if(row.companyName === "北京万宇恒通国际科贸有限公司") {
+        base += 'font-bold '
+      }
+
+
+      if (label === "营收目标")  {
+        base += "bg__success"
+        return base
+      }
+
+      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') {
+        base += "bg__success_1"
+        return base;
+      }
+
+
+      if (label === "毛利目标") {
+        base += "bg__primary"
+        return base
+      }
+
+      if (label.indexOf('毛利') !== -1) {
+        base += "bg__primary_1"
+        return base;
+      }
+      if (label.indexOf('成本') !== -1) {
+        base += "bg__warning_1"
+        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"
+    },
+    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);
+    },
+    async requestData() {
+      this.loading = true;
+      this.tableData = [];
+      const res = await asyncRequest.companyEveryMonth({ daytime: this.daytime });
+
+      if (res.code === 0 && res.data && res.data.length > 0) {
+        res.data.forEach(({ companyName,companyNo, monthinfo, dayinfo, total_tips, cost_tips }) => {
+          const mapResponseType = { '1': '自营', '2': '渠道', '3': '供应商端' ,'4' : '物流费用'}
+          const types = Object.keys(mapResponseType)
+          let prev_sale_total = 0;
+          let prev_msale_total = 0;
+          let prev_cost_total = 0;
+          let prev_mcost_total = 0;
+
+          const item = types.map(type => {
+            const _monthinfo = monthinfo.find(month => String(month.type) === type) || {}
+            const _dayinfo = dayinfo.find(day => String(day.type) === type) || {}
+
+            /** 月营业收入 = 月销售额 - 月退货额  */
+            let msale_total = 0;
+            if(Number(type) !== 4){ msale_total = subtraction(_monthinfo.msale_total, _monthinfo.mth_total) || 0 }
+            /** 日营业收入 = 日销售额 - 日退货额 */
+            const sale_total = subtraction(_dayinfo.sale_total, _dayinfo.th_total) || 0;
+            /** 日成本 = 日采购额 - 日退货额 */
+            const cost_total = subtraction(_dayinfo.cgd_total, _dayinfo.cgd_th_total) || 0;
+            /** 月成本 = 月采购额 - 月退货额 */
+            let mcost_total = 0;
+            if(Number(type) !== 4){
+              mcost_total = subtraction(_monthinfo.mcgd_total, _monthinfo.mcgd_th_total) || 0;
+            }else{
+              mcost_total = Number(_monthinfo.mcgd_total || 0).toFixed(2);
+            }
+
+            prev_sale_total = Number(addition(prev_sale_total, sale_total)).toFixed(2);
+            prev_msale_total = Number(addition(prev_msale_total, msale_total)).toFixed(2);
+            prev_cost_total = Number(addition(prev_cost_total, cost_total)).toFixed(2);
+            prev_mcost_total = Number(addition(prev_mcost_total, mcost_total)).toFixed(2);
+
+            return {
+              type: mapResponseType[type],
+              dayinfo: { ..._dayinfo, sale_total },
+              monthinfo: { ...monthinfo, msale_total, mcost_total }
+            }
+          })
+
+          const gross_completion = Number(subtraction(prev_msale_total, prev_mcost_total)).toFixed(2) //当月毛利完成 = 月营收 - 月成本
+
+
+          this.tableData = [
+            ...this.tableData,
+            {
+              companyNo,
+              companyName,  // 公司名称
+              cost_tips, // 当月成本指标
+              total_tips, // 当月营收目标
+              info: [{ ...item }], // 直营..渠道 销售
+              sale_total: prev_sale_total, // 当日营业收入
+              cost_total: prev_cost_total, // 当日成本总额
+              msale_total: prev_msale_total, // 当月营业收入
+              mcost_total: prev_mcost_total,// 当月成本总额
+              gross_completion, //当月毛利完成 = 月营收 - 月成本
+              completion_rate: multiplication(division(prev_msale_total, total_tips), 100).toFixed(2), // 当月应收完成率
+              gross_completion_rate: Number(cost_tips) === 0 ? 0 : multiplication(division(gross_completion, cost_tips) || 0, 100).toFixed(2), // 当月毛利完成率
+              gross_sale_completion_rate: Number(multiplication(division(gross_completion, prev_msale_total) || 0, 100)).toFixed(2), // 本月毛利率 =  当月毛利完成 / 当月营业收入
+            }
+          ]
+        })
+
+        let i = ["北京百辰荣达国际科贸有限公司", '北京泓源广诚国际商贸有限公司' ,"北京普润心堂商贸有限公司", ""];
+        const l = this.tableData.map(item => item.companyName);
+
+        const values = this.plat_cp_companies.map(({value}) => value)
+        i = i.filter(item => l.includes(item));
+        this.tableData = i.map(item => this.tableData.find(l => l.companyName === item));
+        this.tableData  = this.tableData.filter(({companyNo}) => values.includes(companyNo))
+      } else {
+        this.tableData = [];
+      }
+      // this.getHeight();
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+  }
+}
+
+.table-size {
+  display: flex;
+  width: 200px;
+  border: 1px solid #ebeef5;
+  flex-direction: column;
+
+  p {
+    flex: 1;
+    border-bottom: 1px solid #ebeef5;
+    padding: 5px 10px;
+    margin: 0px;
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
+</style>
+

src/components/newEarningReport/company-month.vue

@@ -0,0 +1,365 @@
+<template>
+  <div v-loading="loading">
+    <div class="search" style="align-items: center;">
+      <div style="float:left;font-size:15px;line-height:30px">
+        年度完成情况
+      </div>
+
+      <div style="float:right">
+        <el-select size="small" style="margin-right:10px;width:160px" v-model="companyNo" @change="requestData"
+          :disabled="isEmpty">
+          <el-option v-for="depart in cp_companies" :key="depart.id" :value="depart.value" :label="depart.label" />
+        </el-select>
+
+        <el-date-picker class="fr picker no-padding" v-model="daytime" style="width:65px" value-format="yyyy"
+          :editable="false" :disabled="isEmpty" :clearable="false" :size="'small'" type="year" format="yyyy" align="right"
+          placeholder="选择日期" :picker-options="{ disabledDate(time) { return time.getTime() > Date.now(); } }"
+          @change="requestData" />
+      </div>
+    </div>
+
+    <el-row style="margin-top:10px;margin-top:10px" v-if="!isEmpty">
+      <el-table border size="mini" :data="tableData" :header-cell-class-name="setHeaderClassName" :row-class-name="setRowClassName"
+        :cell-class-name="setCellClassName">
+        <el-table-column fixed="left" label="月度" prop="month" align="center" width="70px" />
+        <el-table-column label="营收目标" align="center" min-width="115px">
+          <template slot-scope="scope">
+            {{ unit2TenThousand(scope.row.total_tips, isTenThound) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="营业收入(净)" align="center" min-width="115px">
+          <template slot-scope="scope">
+            <div :style="getCurrentValueStyle(scope.row.pure_sale, scope.row.total_tips, scope.row.month)">
+              {{ unit2TenThousand(scope.row.pure_sale, isTenThound) }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="营收完成%" align="center" min-width="95px">
+          <template slot-scope="scope">
+            <div :style="getCurrentRateStyle(scope.row.completion_rate, scope.row.month)">
+              {{ Number(scope.row.completion_rate).toFixed(2) + "%" }}
+            </div>
+          </template>
+        </el-table-column>
+
+        <template v-if="costField">
+          <el-table-column label="毛利目标" align="center" min-width="115px">
+            <template slot-scope="scope">
+              {{  costField ? unit2TenThousand(scope.row.cost_tips, isTenThound) : '***' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="毛利完成" align="center" min-width="115px">
+            <template slot-scope="scope">
+              <div :style="getCurrentValueStyle(scope.row.pure_profit, scope.row.cost_tips, scope.row.month)">
+                {{ costField ? unit2TenThousand(scope.row.pure_profit, isTenThound) : '***' }}
+              </div>
+            </template>
+          </el-table-column>
+        </template>
+
+          <el-table-column label="毛利完成%" align="center" min-width="95px">
+            <template slot-scope="scope">
+              <div :style="getCurrentRateStyle(scope.row.cost_rate, scope.row.month)">
+                {{ Number(scope.row.cost_rate).toFixed(2) + "%" }}
+              </div>
+            </template>
+          </el-table-column>
+      </el-table>
+      <div style="height:100px"></div>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+  </div>
+</template>
+
+
+<script>
+import asyncRequest from "@/api/newResults";
+import { unit2TenThousand, subtraction, multiplication, division, addition } from "../newReport/src/_utils";
+import { mapCompany } from "./mapCompany";
+import dayjs from "dayjs"
+
+export default {
+  props: ['companies', 'costField', 'isTenThound'],
+  data() {
+    return {
+      loading: false,
+      daytime: "",
+      tableData: [],
+      companyNo: "",
+      cp_companies: [],
+      isEmpty: false
+    }
+  },
+  mounted() {
+    let hasCompose = false;
+    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
+    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");
+    const zsIndex = this.companies.findIndex((item) => item.label === "北京知事文化产业发展有限公司");
+
+    if (jxIndex !== -1 || prIndex !== -1 || zsIndex !== -1) hasCompose = true;
+    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司" && item.label !== "北京知事文化产业发展有限公司")
+    if (hasCompose) this.cp_companies = [...this.cp_companies, { value: "GS2401181650538135", label: "普润&锦兴&知事" }]
+
+    this.isEmpty = this.cp_companies.length === 0;
+    if (this.isEmpty) return;
+
+    this.cp_companies = this.cp_companies.map((item,index) => {
+      let label = '';
+      
+      if (item.label === '所有公司') {
+        label = '所有公司'
+      }
+
+      if (item.label === '北京万宇恒通国际科贸有限公司') {
+        label = '平台公司: 万宇'
+      }
+
+      if (item.label === '北京泰文创供应链管理有限公司') {
+        label = '平台公司: 泰文创'
+      }
+
+      if (item.label === '北京元隆雅图文化传播股份有限公司') {
+        label = '预订单E企购'
+      }
+
+      if (item.label === '结算单E企购') {
+        label = '结算单E企购'
+      }
+
+
+      if (item.label === "普润&锦兴&知事") label = `业务公司: 普润&锦兴&知事`
+      if (label === '') label = `业务公司: ${mapCompany[item.label]}`;
+      return ({ ...item, label })
+    })
+
+    let list = ['所有公司','平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润&锦兴&知事','平台公司: 泰文创', '预订单E企购', '结算单E企购']
+    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));
+
+    // if(this.cp_companies.length >= 4){
+    //   this.cp_companies = [{
+    //     value:'',
+    //     label:'所有公司'
+    //   },...this.cp_companies];
+    // }
+
+
+    this.companyNo = this.cp_companies[0].value;
+
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  methods: {
+    unit2TenThousand,
+    setRowClassName({row}){
+      if(row.month === '合计') return 'table-header-color'
+      if(row.month === '当前合计') return 'font-bold'
+    },
+    getCurrentRateStyle(current, month) {
+      const days = dayjs().daysInMonth();
+      const currentMonth = dayjs().month() + 1;
+      if (Number(month) > Number(currentMonth)) return;
+      if (month === '合计') return;
+      const oneDay = Number(division(100, days)).toFixed(2);
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+    },
+    getCurrentValueStyle(current, total, month) {
+      const days = dayjs().daysInMonth();
+      const currentMonth = dayjs().month() + 1;
+      if (Number(month) > Number(currentMonth)) return;
+      if (month === '合计') return;
+      const oneDay = Number(division(total, days)).toFixed(2);
+      // console.log(month,oneDay)
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
+    },
+    setCellClassName({ column,row }) {
+      if(row.month === '合计') return;
+      const { label } = column;
+      // if (label === "营业收入(净)" || label === '当月成本合计') return "pure__cell";
+      if (label === "营收目标") return "bg__success"
+      if (label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) 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"
+    },
+    setHeaderClassName({ column }) {
+      const { label } = column;
+      if (label === "营收目标") return "bg__success"
+      if (label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) 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"
+    },
+    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);
+    },
+    async requestData() {
+      this.loading = true;
+
+
+      const result = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: this.companyNo })
+
+      // if(this.companyNo === "GS2302231124114965"){
+      //   const jxResult = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: "GS2304031312553746" })
+      //   result.data = result.data.map((_,index) => {
+      //     const prItem = result.data[index];
+      //     const jxItem = jxResult.data[index];
+
+      //     return {
+      //       month:prItem.month,
+      //       cgd_th_total: Number(addition(prItem['cgd_th_total'],jxItem['cgd_th_total'])).toFixed(2),
+      //       cgd_total:Number(addition(prItem['cgd_total'],jxItem['cgd_total'])).toFixed(2),
+      //       cost_tips:Number(addition(prItem['cost_tips'],jxItem['cost_tips'])).toFixed(2),
+      //       sale_total:Number(addition(prItem['sale_total'],jxItem['sale_total'])).toFixed(2),
+      //       th_total:Number(addition(prItem['th_total'],jxItem['th_total'])).toFixed(2),
+      //       total_tips:Number(prItem['total_tips']).toFixed(2),
+      //     }
+      //   })
+      // };
+      // if(this.companyNo === ""){
+      //   result.data.forEach((item) => item.total_tips = 0);
+      //   for(const c of this.cp_companies.filter(({value}) => value !== "")){
+      //     const res = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: c.value });
+      //     result.data = result.data.reduce((prev,curr,index) => {
+      //       return [
+      //         ...prev,
+      //         {
+      //           ...curr,
+      //           total_tips:Number(addition(Number(curr.total_tips).toFixed(2),Number(res.data[index].total_tips).toFixed(2))).toFixed(2)
+      //         }
+      //       ]
+      //     },[])
+      //   }
+      // }
+
+
+      switch (Number(result.code)) {
+        case 0:
+          this.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 {
+              pure_sale,
+              pure_purch,
+              pure_profit,
+              completion_rate,
+              pure_interest_rate,
+              month: tableItem.month,
+              cost_tips: tableItem.cost_tips,
+              total_tips: tableItem.total_tips,
+              cost_rate: Number(tableItem.cost_tips) === 0 ? 0 : multiplication(division(pure_profit, tableItem.cost_tips) || 0, 100).toFixed(2)
+            }
+          })
+
+
+          const currentTotal = new Array(Number(dayjs().format('M'))).fill(0).reduce((prev,_,index) => {
+            return {
+              pure_sale: Number(addition(prev.pure_sale, this.tableData[index].pure_sale)).toFixed(2),
+              pure_purch: Number( addition(prev.pure_purch,  this.tableData[index].pure_purch)).toFixed(2),
+              pure_profit: Number(addition(prev.pure_profit,  this.tableData[index].pure_profit)).toFixed(2),
+              completion_rate:Number( addition(prev.completion_rate,  this.tableData[index].completion_rate)).toFixed(2),
+              pure_interest_rate:Number( addition(prev.pure_interest_rate,  this.tableData[index].pure_interest_rate)).toFixed(2),
+              total_tips:Number( addition(prev.total_tips,  this.tableData[index].total_tips)).toFixed(2),
+              cost_tips:Number( addition(prev.cost_tips,  this.tableData[index].cost_tips)).toFixed(2),
+              cost_rate:Number( addition(prev.cost_rate,  this.tableData[index].cost_rate)).toFixed(2),
+              month: '当前合计',
+            }
+          },{
+            pure_sale: 0,
+            pure_purch: 0,
+            pure_profit: 0,
+            completion_rate: 0,
+            pure_interest_rate: 0,
+            month: '当前合计',
+            cost_tips: 0,
+            total_tips: 0,
+            cost_rate: 0
+          })
+
+          currentTotal.completion_rate = multiplication(division(currentTotal.pure_sale, currentTotal.total_tips) || 0, 100)
+          currentTotal.cost_rate = Number(currentTotal.cost_tips) === 0 ? 0 : multiplication(division(currentTotal.pure_profit, currentTotal.cost_tips) || 0, 100).toFixed(2)
+
+
+          const totalItem = this.tableData.reduce((prev, curr) => {
+            return {
+              pure_sale: Number(addition(prev.pure_sale, curr.pure_sale)).toFixed(2),
+              pure_purch: Number( addition(prev.pure_purch, curr.pure_purch)).toFixed(2),
+              pure_profit: Number(addition(prev.pure_profit, curr.pure_profit)).toFixed(2),
+              completion_rate:Number( addition(prev.completion_rate, curr.completion_rate)).toFixed(2),
+              pure_interest_rate:Number( addition(prev.pure_interest_rate, curr.pure_interest_rate)).toFixed(2),
+              total_tips:Number( addition(prev.total_tips, curr.total_tips)).toFixed(2),
+              cost_tips:Number( addition(prev.cost_tips, curr.cost_tips)).toFixed(2),
+              cost_rate:Number( addition(prev.cost_rate, curr.cost_rate)).toFixed(2),
+              month: '合计',
+            }
+          }, {
+            pure_sale: 0,
+            pure_purch: 0,
+            pure_profit: 0,
+            completion_rate: 0,
+            pure_interest_rate: 0,
+            month: '合计',
+            cost_tips: 0,
+            total_tips: 0,
+            cost_rate: 0
+          })
+
+          totalItem.completion_rate = multiplication(division(totalItem.pure_sale, totalItem.total_tips) || 0, 100)
+          totalItem.cost_rate = Number(totalItem.cost_tips) === 0 ? 0 : multiplication(division(totalItem.pure_profit, totalItem.cost_tips) || 0, 100).toFixed(2)
+          this.tableData = [currentTotal,...this.tableData, totalItem];
+
+          // 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;
+    }
+  }
+}
+</script>
+
+
+
+<style lang="scss" scoped>
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px
+  }
+}
+</style>
+

src/components/newEarningReport/company.vue

@@ -0,0 +1,543 @@
+<template>
+  <div v-loading="loading">
+    <div class="search clear" style="align-items: center;">
+      <el-tooltip placement="top" width="50px" trigger="hover" content="平台公司">
+            <i
+              class="el-icon-warning-outline"
+              style="font-size:16px;cursor:pointer;;display:inline-block;padding-right: 5px"
+            ></i>
+        </el-tooltip>
+
+        <span style="font-size: 15px;">月度完成情况</span>
+
+      <div style="float:right">
+        <el-date-picker class="fr picker no-padding" v-model="daytime" style="width:95px" value-format="yyyy-MM-dd"
+          :editable="false" :disabled="isEmpty" :clearable="false" :size="'small'" format="yyyy-MM-dd" type="date"
+          align="right" placeholder="选择日期"
+          :picker-options="{ disabledDate(time) { return time.getTime() > Date.now(); } }" @change="requestData" />
+      </div>
+    </div>
+
+    <el-row style="margin-top:10px;margin-top:10px" v-if="!isEmpty">
+      <el-table 
+        border 
+        size="mini" 
+        :data="tableData" 
+        :header-cell-class-name="setHeaderClassName"
+        :cell-class-name="setCellClassName"
+        row-key="companyNo"
+        default-expand-all
+        :load="load"
+        lazy
+       >
+
+        <el-table-column fixed="left" label="公司" prop="companyName" align="center" width="120px">
+          <template slot-scope="scope">
+            <span v-if="scope.row.companyName.indexOf('元隆雅图') === -1">
+              {{ mapCompany[scope.row.companyName] || scope.row.companyName }}
+            </span>
+
+            <span v-else>
+              预定单E企购
+            </span>
+          </template>
+        </el-table-column>
+
+
+        <el-table-column label="当日营业收入" align="center" width="95px">
+          <template slot-scope="scope">
+            {{ scope.row.companyName === '合计-元隆雅图' ? unit2TenThousand(calcAmount('sale_total'), isTenThound)  : unit2TenThousand(scope.row.sale_total, isTenThound) }}
+          </template>
+        </el-table-column>
+
+          <el-table-column label="营收目标" align="center" min-width="95px">
+            <template slot-scope="scope">
+              {{ scope.row.companyName === '合计-元隆雅图' ? unit2TenThousand(calcAmount('total_tips'), isTenThound)  : unit2TenThousand(scope.row.total_tips, isTenThound) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营业收入(净)" align="center" min-width="115px">
+            <template slot-scope="scope">
+              <div style="display:flex;justify-content:center" :style="`${scope.row.companyName === '合计-元隆雅图' ? '' :getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
+               {{ 
+                  scope.row.companyName === '合计-元隆雅图' 
+                  ? unit2TenThousand(calcAmount('msale_total'), isTenThound)
+                  : unit2TenThousand(scope.row.msale_total, isTenThound) 
+                }}
+                <el-popover placement="right" :width="200" trigger="click">
+                  <div class="table-size">
+                    <p>直营/自营: {{ 
+                    scope.row.companyName === '合计-元隆雅图' 
+                        ? unit2TenThousand(calcAmount('0.0.monthinfo.msale_total', true), isTenThound) 
+                        : unit2TenThousand(scope.row.info[0].monthinfo.msale_total, isTenThound) 
+                      }}</p>
+                    <p>支付渠道: {{ 
+                    scope.row.companyName === '合计-元隆雅图' 
+                       ? unit2TenThousand(calcAmount('0.1.monthinfo.msale_total', true), isTenThound)
+                       : unit2TenThousand(scope.row.info[1].monthinfo.msale_total, isTenThound) 
+                      }}</p>
+                    <p v-if="scope.row.companyName !== '预订单E企购' && scope.row.companyName !== '结算单E企购'">供应商端: {{ 
+                      scope.row.companyName === '合计-元隆雅图' 
+                      ?  unit2TenThousand(calcAmount('0.2.monthinfo.msale_total', true), isTenThound)
+                      :  unit2TenThousand(scope.row.info[2].monthinfo.msale_total, isTenThound) }}
+                    </p>
+                  </div>
+
+                  <template #reference>
+                    <div :style="`${getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
+                      <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
+                    </div>
+                  </template>
+                </el-popover>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营收完成%" align="center" min-width="85px">
+            <template slot-scope="scope">
+              <div :style="`${scope.row.companyName === '合计-元隆雅图' ? '' : getCurrentRateStyle(scope.row.completion_rate)}`">
+                {{ scope.row.companyName === '合计-元隆雅图' ? calcAmountCompletionRate() : (String(scope.row.completion_rate) === 'NaN' ? 0 :  scope.row.completion_rate) + "%" }}
+              </div>
+            </template>
+          </el-table-column>
+
+
+          <template v-if="costField">
+            <el-table-column label="毛利目标" align="center" min-width="90px">
+              <template slot-scope="scope">
+                {{ 
+                  costField 
+                  ? scope.row.companyName === '合计-元隆雅图' ? unit2TenThousand(calcAmount('cost_tips'), isTenThound) : unit2TenThousand(scope.row.cost_tips, isTenThound) 
+                  : '***' 
+                }}
+              </template>
+            </el-table-column>
+
+            <el-table-column label="毛利完成" align="center" min-width="90px">
+              <template slot-scope="scope">
+                <div :style="`${scope.row.companyName === '合计-元隆雅图' ? '' : getCurrentValueStyle(scope.row.gross_completion, scope.row.cost_tips)}`">
+                  {{ costField 
+                    ?  scope.row.companyName === '合计-元隆雅图' ? unit2TenThousand(calcAmount('gross_completion'), isTenThound) : unit2TenThousand(scope.row.gross_completion, isTenThound) 
+                    : '***' 
+                  }}
+                </div>
+              </template>
+            </el-table-column>
+            </template>
+
+            <el-table-column label="毛利完成%" align="center" min-width="85px">
+              <template slot-scope="scope">
+                <div :style="scope.row.companyName === '合计-元隆雅图' ? '' : getCurrentRateStyle(scope.row.gross_completion_rate)">
+                  {{  scope.row.companyName === '合计-元隆雅图' ? calcAmountGrossCompletionRate() : scope.row.gross_completion_rate + '%' }}
+                </div>
+              </template>
+            </el-table-column>
+
+          <template v-if="costField">
+            <el-table-column label="成本合计" align="center" min-width="125px">
+              <template slot-scope="scope">
+                <div style="display:flex;justify-content:center" v-if="costField">
+                  {{ scope.row.companyName === '合计-元隆雅图'
+                    ? unit2TenThousand(calcAmount('mcost_total'), isTenThound) 
+                    : unit2TenThousand(scope.row.mcost_total, isTenThound) 
+                  }}
+                  <el-popover placement="right" :width="200" trigger="click">
+                    <div class="table-size">
+                      <p>直营/自营: 
+                        {{
+                          scope.row.companyName === '合计-元隆雅图'
+                          ? unit2TenThousand(calcAmount('0.0.monthinfo.mcost_total',true),isTenThound)
+                          : unit2TenThousand(scope.row.info[0].monthinfo.mcost_total, isTenThound) 
+                        }}
+                      </p>
+                      <p>支付渠道: 
+                        {{ 
+                          scope.row.companyName ==='合计-元隆雅图'
+                          ? unit2TenThousand(calcAmount('0.1.monthinfo.mcost_total', true), isTenThound)
+                          : unit2TenThousand(scope.row.info[1].monthinfo.mcost_total, isTenThound)
+                        }}</p>
+                      <p  v-if="scope.row.companyName !== '预订单E企购' && scope.row.companyName !== '结算单E企购'">供应商端: 
+                        {{ 
+                         scope.row.companyName === '合计-元隆雅图'
+                          ? unit2TenThousand(calcAmount('0.2.monthinfo.mcost_total', true),isTenThound)
+                          : unit2TenThousand(scope.row.info[2].monthinfo.mcost_total, isTenThound)  
+                        }}</p>
+                      <p>物流费用: 
+                        {{
+                          scope.row.companyName === '合计-元隆雅图'
+                           ? unit2TenThousand(calcAmount('0.3.monthinfo.mcost_total', true), isTenThound)
+                           : unit2TenThousand(scope.row.info[3].monthinfo.mcost_total, isTenThound)
+                        }}
+                      </p>
+                    </div>
+
+                    <template #reference>
+                      <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
+                    </template>
+                  </el-popover>
+                </div>
+
+                <p v-else>***</p>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="实际毛利率" align="center" width="85px">
+              <template slot-scope="scope">
+                {{ costField 
+                  ?  scope.row.companyName === '合计-元隆雅图' ? calcAmountRealRate()  : unit2TenThousand(scope.row.gross_sale_completion_rate) + "%" 
+                  : '***' 
+                }}
+              </template>
+            </el-table-column>
+          </template>
+      </el-table>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+    <!--  -->
+  </div>
+</template>
+
+
+<script>
+import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
+import asyncRequest from "@/api/newResults";
+import { mapCompany } from "./mapCompany";
+
+import { amountData } from "./calc"
+import dayjs from "dayjs"
+
+export default {
+  props: ['companies', 'costField', 'isTenThound'],
+  data() {
+    return {
+      daytime: "",
+      loading: false,
+      tableData: [],
+      companyNo: "",
+      plat_cp_companies:[],
+      cp_companies: [],
+      isEmpty: false,
+      mapCompany
+    }
+  },
+  mounted() {
+    let hasCompose = false;
+    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
+    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");
+    const zsIndex = this.companies.findIndex((item) => item.label === "北京知事文化产业发展有限公司");
+
+    if (jxIndex !== -1 || prIndex !== -1 || zsIndex !== -1) hasCompose = true;
+    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司" && item.label !== "北京知事文化产业发展有限公司")
+    if (hasCompose) this.cp_companies = [...this.cp_companies, { value: "GS2302231124114965", label: "普润&锦兴&知事" }]
+
+    this.isEmpty = this.cp_companies.length === 0;
+    if (this.isEmpty) return;
+
+    const mapLabel = {
+       '北京万宇恒通国际科贸有限公司': '平台公司: 万宇',
+       '北京泰文创供应链管理有限公司': '平台公司: 泰文创',
+       '北京元隆雅图文化传播股份有限公司': '预订单E企购',
+    }
+
+    this.cp_companies = this.cp_companies.map((item, index) => {
+      const label = mapLabel[item.label] || item.label
+      return ({ ...item, label })
+    })
+
+
+    let plat_list = ['所有平台公司','平台公司: 万宇', '平台公司: 泰文创', '预订单E企购', '结算单E企购']
+    const plat_cp_list = this.cp_companies.map((item) => item.label);
+    plat_list = plat_list.filter(item => plat_cp_list.includes(item));
+    this.plat_cp_companies = plat_list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+
+    if(this.plat_cp_companies.length === 4){ this.plat_cp_companies =  [{ value: "", label: "所有平台公司" }, ...this.plat_cp_companies] }
+
+    this.companyNo = this.plat_cp_companies[0].value;
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  methods: {
+    calcAmountRealRate(){
+      const msale_total = this.calcAmount('msale_total')
+      const gross_completion = this.calcAmount('gross_completion') 
+      return Number(multiplication(Number(division(gross_completion, msale_total)).toFixed(2), 100)).toFixed(2) + '%'
+    },
+    calcAmountGrossCompletionRate(){
+      const gross_completion = this.calcAmount('gross_completion')
+      const cost_tips = this.calcAmount('cost_tips')
+      return Number(multiplication(Number(division(gross_completion, cost_tips)).toFixed(2), 100)).toFixed(2) + '%'
+    },
+    calcAmountCompletionRate(){
+      const msale_total = this.calcAmount('msale_total')
+      const total_tips = this.calcAmount('total_tips')
+      return Number(multiplication(Number(division(msale_total, total_tips)).toFixed(2), 100)).toFixed(2) + '%'
+    },
+    calcAmount(prop, isInfo = false){
+      const sourceData = this.tableData.find(({companyName}) => companyName === '合计-元隆雅图')
+      if(!isInfo){
+        return sourceData.children.reduce((prev,current) => {
+          const value = Number(addition(prev,isNaN(current[prop]) ? 0 : current[prop]))
+          return value === 0 ? 0 : value.toFixed(2)
+        }, 0)
+      } else {
+        const [i1, i2,i3, i4] = prop.split('.') 
+        return sourceData.children.reduce((prev,current) => {
+          const value = Number(addition(prev, isNaN(current.info[i1][i2][i3][i4]) ? 0 : current.info[i1][i2][i3][i4]))
+          return value === 0 ? 0 : value.toFixed(2)
+        }, 0)
+      }
+    },
+    unit2TenThousand,
+    load(_1,_2,resolve){
+      const ylBusiness = this.tableData.find(({companyName}) => companyName.indexOf('元隆雅图') !== -1)
+      resolve(ylBusiness ? ylBusiness.children : [])
+    },
+    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' : ''
+    },
+    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' : '';
+    },
+    addDataToCompany(c1, c2) {
+      return {
+        companyName: '普润',
+        cost_tips: Number(c1.cost_tips).toFixed(2),
+        total_tips: Number(c1.total_tips).toFixed(2),
+        monthinfo: c1.monthinfo.map((item, index) => ({
+          mcgd_th_total: Number(addition(item.mcgd_th_total, c2.monthinfo[index].mcgd_th_total)).toFixed(2),
+          mcgd_total: Number(addition(item.mcgd_total, c2.monthinfo[index].mcgd_total)).toFixed(2),
+          msale_total: Number(addition(item.msale_total, c2.monthinfo[index].msale_total)).toFixed(2),
+          mth_total: Number(addition(item.mth_total, c2.monthinfo[index].mth_total)).toFixed(2),
+          type: item.type
+        })),
+        dayinfo: c1.dayinfo.map((item, index) => {
+          return {
+            cgd_th_total: Number(addition(item.cgd_th_total, c2.dayinfo[index].cgd_th_total)).toFixed(2),
+            cgd_total: Number(addition(item.cgd_total, c2.dayinfo[index].cgd_total)).toFixed(2),
+            sale_total: Number(addition(item.sale_total, c2.dayinfo[index].sale_total)).toFixed(2),
+            th_total: Number(addition(item.th_total, c2.dayinfo[index].th_total)).toFixed(2),
+            type: item.type
+          }
+        }),
+      }
+    },
+    setCellClassName({ column ,row }) {
+      const { label } = column;
+      let base = ''
+
+      if(row.companyName === "北京万宇恒通国际科贸有限公司") {
+        base += 'font-bold '
+      }
+
+      if (label === "营收目标")  {
+        base += "bg__success"
+        return base
+      }
+
+      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') {
+        base += "bg__success_1"
+        return base;
+      }
+
+      if (label === "毛利目标") {
+        base += "bg__primary"
+        return base
+      }
+
+      if (label.indexOf('毛利') !== -1) {
+        base += "bg__primary_1"
+        return base;
+      }
+      if (label.indexOf('成本') !== -1) {
+        base += "bg__warning_1"
+        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"
+    },
+    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);
+    },
+
+    async getData({ isChildren } = { isChildren: false }){
+      this.loading = true;
+
+      const api = isChildren ? asyncRequest.platform : asyncRequest.companyEveryMonth
+      const res = await api({ daytime: this.daytime });
+      this.loading = false;
+      let sourceData = []
+
+      if ((isChildren ? res.code === 1 : res.code === 0) && res.data && res.data.length > 0) {
+        res.data.forEach(({
+          platform_name,
+          platform_id,
+          companyName, 
+          companyNo , 
+          monthinfo = [], 
+          dayinfo = [], 
+          total_tips = 0, 
+          cost_tips = 0
+        }) => {
+          const mapResponseType = { '1': '自营', '2': '渠道', '3': '供应商端' ,'4' : '物流费用'}
+          const types = Object.keys(mapResponseType)
+
+          let prev_sale_total = 0;
+          let prev_msale_total = 0;
+          let prev_cost_total = 0;
+          let prev_mcost_total = 0;
+
+          const item = types.map(type => {
+            let _monthinfo = (Array.isArray(monthinfo) ? monthinfo : [monthinfo]).find(month => String(month.type) === type) 
+            let _dayinfo = (Array.isArray(dayinfo) ? dayinfo : [dayinfo]).find(day => String(day.type) === type)
+
+            const defaultMonthInfo = { mcgd_th_total :  "0.00", mcgd_total:"0.00", msale_total: "0.00", mth_total: "0.00", type }
+            const defaultDayinfo = { "sale_total": "0.00", "th_total": "0.00", "type": "1", "cgd_total": "0.00", "cgd_th_total": "0.00" }
+
+            if(!_monthinfo) _monthinfo = defaultMonthInfo
+            if(!_dayinfo) _dayinfo = defaultDayinfo
+
+            // 映射接口的字段
+            if(isChildren && 'sum_sale_total' in _dayinfo){
+              _dayinfo = {
+                cgd_total: _dayinfo.sum_cgd_total,
+                sale_total: _dayinfo.sum_sale_total,
+                cgd_th_total: _dayinfo.sum_cgd_th_total,
+                th_total: _dayinfo.sum_th_total,
+                type
+              }
+            }
+
+            /** 月营业收入 = 月销售额 - 月退货额  */
+            let msale_total = 0;
+            if(Number(type) !== 4){ msale_total = subtraction(_monthinfo.msale_total, _monthinfo.mth_total) || 0 }
+
+            /** 日营业收入 = 日销售额 - 日退货额 */
+            const sale_total = subtraction(_dayinfo.sale_total, _dayinfo.th_total) || 0;
+            /** 日成本 = 日采购额 - 日退货额 */
+            const cost_total = subtraction(_dayinfo.cgd_total, _dayinfo.cgd_th_total) || 0;
+            /** 月成本 = 月采购额 - 月退货额 */
+            let mcost_total = 0;
+
+            if(Number(type) !== 4){
+              mcost_total = subtraction(_monthinfo.mcgd_total, _monthinfo.mcgd_th_total) || 0;
+            }else{
+              mcost_total = Number(_monthinfo.mcgd_total || 0).toFixed(2);
+            }
+
+            prev_sale_total = Number(addition(prev_sale_total, sale_total)).toFixed(2);
+            prev_msale_total = Number(addition(prev_msale_total, msale_total)).toFixed(2);
+            prev_cost_total = Number(addition(prev_cost_total, cost_total)).toFixed(2);
+            prev_mcost_total = Number(addition(prev_mcost_total, mcost_total)).toFixed(2);
+
+            return {
+              type: mapResponseType[type],
+              dayinfo: { ..._dayinfo, sale_total },
+              monthinfo: { ...monthinfo, msale_total, mcost_total }
+            }
+          })
+
+          const gross_completion = Number(subtraction(prev_msale_total, prev_mcost_total)).toFixed(2) //当月毛利完成 = 月营收 - 月成本
+
+
+          sourceData = [
+            ...sourceData,
+            {
+              companyNo: isChildren ? platform_id : companyNo,
+              companyName: isChildren ? platform_name : companyName,  // 公司名称
+              cost_tips, // 当月成本指标
+              total_tips, // 当月营收目标
+              info: item, // 直营..渠道 销售
+              sale_total: prev_sale_total, // 当日营业收入
+              cost_total: prev_cost_total, // 当日成本总额
+              msale_total: prev_msale_total, // 当月营业收入
+              mcost_total: prev_mcost_total,// 当月成本总额
+              gross_completion, //当月毛利完成 = 月营收 - 月成本
+              completion_rate: multiplication(division(prev_msale_total, total_tips), 100).toFixed(2), // 当月应收完成率
+              gross_completion_rate: Number(cost_tips) === 0 ? 0 : multiplication(division(gross_completion, cost_tips) || 0, 100).toFixed(2), // 当月毛利完成率
+              gross_sale_completion_rate: Number(multiplication(division(gross_completion, prev_msale_total) || 0, 100)).toFixed(2), // 本月毛利率 =  当月毛利完成 / 当月营业收入
+            }
+          ]
+        })
+      }else{
+        sourceData = []
+      }
+
+      return sourceData
+    },
+    async requestData() {
+      let platformlist = await this.getData()
+
+      //  显示的公司列表
+      let displayedCompanylist = ["北京万宇恒通国际科贸有限公司", '北京泰文创供应链管理有限公司' ,"北京元隆雅图文化传播股份有限公司"];
+      let values = this.plat_cp_companies.map(({value}) => value)
+      const l = platformlist.map(item => item.companyName);
+      displayedCompanylist = displayedCompanylist.filter(item => l.includes(item));
+      platformlist = displayedCompanylist.map(item => platformlist.find(l => l.companyName === item));
+      platformlist  = platformlist.filter(({ companyNo }) => values.includes(companyNo))
+      const composeCompanyIndex = platformlist.findIndex(({ companyNo }) => companyNo === 'GS2404151642335170')
+  
+      if(composeCompanyIndex !== -1){
+        const children = (await this.getData({ isChildren: true })).filter(({companyName}) => companyName !== '结算单E企购')
+        const [composeCompany] = platformlist.splice(composeCompanyIndex, 1)
+        platformlist.unshift({ hasChildren: true, children ,...composeCompany })
+      }
+
+      this.tableData = platformlist
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+  }
+}
+
+.table-size {
+  display: flex;
+  width: 200px;
+  border: 1px solid #ebeef5;
+  flex-direction: column;
+
+  p {
+    flex: 1;
+    border-bottom: 1px solid #ebeef5;
+    padding: 5px 10px;
+    margin: 0px;
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
+</style>
+

src/components/newEarningReport/department.vue

@@ -0,0 +1,583 @@
+<template>
+  <div v-loading="loading">
+    <div class="search clear">
+      <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>
+          </template>
+        </el-popover>
+
+        <span style="font-size: 15px;">部门完成情况</span>
+      </div>
+
+      <div style="float:right">
+        <el-select
+          size="small"
+          style="margin-right:10px;width:165px"
+          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"
+        />
+      </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-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>
+          </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>
+
+        <el-table-column label="当月营业收入(净)" align="center" min-width="120px">
+          <template slot-scope="scope">
+            <div style="display:flex;flex-direction: column;">
+              <div style="display:flex;justify-content:center;align-items:center" :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
+                {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
+                <el-popover placement="right" :width="200" trigger="click">
+                  <div class="table-size">
+                    <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
+                    <p>支付渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, 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 trigger-hover"
+                        style="font-size:16px;cursor:pointer;margin-left:5px"
+                      ></i>
+                    </p>
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+       <template v-if="costField">
+         <el-table-column label="当月成本" align="center" min-width="120px">
+          <template slot-scope="scope">
+            <div style="display:flex;justify-content:center;align-items:center"  v-if="costField">
+              {{
+              unit2TenThousand(Number(addition(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2),scope.row.post_fee)).toFixed(2), isTenThound) }}
+              <el-popover placement="right" :width="200" trigger="click">
+                <div class="table-size">
+                  <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost, isTenThound) }}</p>
+                  <p>渠道: {{ unit2TenThousand(scope.row.qd_cost, isTenThound) }}</p>
+                  <p>物流费用: {{ unit2TenThousand(scope.row.post_fee, isTenThound) }}</p>
+                </div>
+                <template #reference>
+                  <p style="text-align: center;">
+                    <i
+                      class="el-icon-warning-outline trigger-hover"
+                      style="font-size:16px;cursor:pointer;margin-left:5px"
+                    ></i>
+                  </p>
+                </template>
+              </el-popover>
+            </div>
+
+            <p v-else>***</p>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="当月毛利" min-width="120px">
+          <template slot-scope="scope">
+            <div style="display:flex;justify-content:center;align-items:center" v-if="costField">
+              {{unit2TenThousand(Number(subtraction(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2),scope.row.post_fee)).toFixed(2), isTenThound)}}
+              <el-popover placement="right" :width="200" trigger="click">
+                <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 trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
+                  </p>
+                </template>
+              </el-popover>
+            </div>
+
+            <p v-else>***</p>
+          </template>
+        </el-table-column>
+       </template>
+      </el-table>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+  </div>
+</template>
+
+
+<script>
+import asyncRequest from "@/api/newResults";
+import setHeight from "@/mixins/index";
+import { mapCompany } from "./mapCompany";
+import dayjs from "dayjs";
+
+import {
+  addition,
+  division,
+  subtraction,
+  multiplication,
+  unit2TenThousand
+} from "../newReport/src/_utils";
+
+export default {
+  mixins: [setHeight],
+  props: ["companies", "costField", "isTenThound"],
+  data() {
+    return {
+      list: [],
+      daytime: "",
+      companyNo: "",
+      loading: false,
+      isEmpty: false,
+      cp_companies: []
+    };
+  },
+  computed: {
+    currentCompanyName() {
+      return this.companies.find(item => item.value === this.companyNo).label;
+    }
+  },
+  mounted() {
+    this.isEmpty = this.companies.length === 0;
+    if (this.isEmpty) return;
+
+    this.cp_companies = this.companies.map(item => ({
+      ...item,
+      label:
+        mapCompany[item.label] === "万宇"
+          ? `平台公司: 万宇`
+          : mapCompany[item.label] === "泰文创"
+          ? `平台公司: 泰文创`
+          : mapCompany[item.label] === "预订单E企购"
+          ? `预订单E企购`
+          : mapCompany[item.label] === "结算单E企购"
+          ? `结算单E企购`
+          : `业务公司: ${mapCompany[item.label]}`
+    }));
+
+    let list = [
+      "平台公司: 万宇",
+      "业务公司: 百辰",
+      "业务公司: 泓源",
+      "业务公司: 普润",
+      "业务公司: 锦兴",
+      "业务公司: 知事",
+      "平台公司: 泰文创",
+      '预订单E企购',
+      '结算单E企购'
+    ];
+
+    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));
+
+    if(this.hasCompose()){
+      this.cp_companies.unshift({ value: '', label: '万宇 + 预算单E企购' })
+    }
+
+    this.companyNo = this.cp_companies[0].value;
+
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  watch: {
+    daytime: {
+      handler() {
+        this.requestData();
+      }
+    }
+  },
+  methods: {
+    addition,
+    subtraction,
+    unit2TenThousand,
+    hasCompose(){
+      const hasWANYU = this.cp_companies.findIndex(({value}) => value === 'GS2203161855277894')
+      const hasTwo = this.cp_companies.findIndex(({value}) => value === 'GS2404151642335170')
+      return hasWANYU !== -1 && hasTwo !== -1
+    },
+    setCellClassName({ column, row }) {
+      const { label } = column;
+
+      let base = "";
+
+      if (row.depart.indexOf("泰文创") !== -1) {
+        base += "font-bold ";
+      }
+
+      if (label === "当月营收目标") {
+        base += "bg__success";
+        return base;
+      }
+
+      if (
+        (label.indexOf("营业") !== -1 || label.indexOf("营收") !== -1) &&
+        label !== "当日营业收入"
+      ) {
+        base += "bg__success_1";
+        return base;
+      }
+
+      if (label === "毛利目标") {
+        base += "bg__primary";
+        return base;
+      }
+
+      if (label.indexOf("毛利") !== -1) {
+        base += "bg__primary_1";
+        return base;
+      }
+      if (label.indexOf("成本") !== -1) {
+        base += "bg__warning_1";
+        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";
+    },
+    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" : "";
+    },
+    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" : "";
+    },
+    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);
+    },
+    /* 表格合并列和行 */
+    spanMethod({ rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        const _row = this.flitterData(this.list).one[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return { rowspan: _row, colspan: _col };
+      }
+    },
+    /**合并表格的第一列，处理表格数据 */
+    flitterData(arr) {
+      let spanOneArr = [];
+      let concatOne = 0;
+      arr.forEach((item, index) => {
+        if (index === 0) {
+          spanOneArr.push(1);
+        } else {
+          //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
+          if (item.company === arr[index - 1].company) {
+            //第一列需合并相同内容的判断条件
+            spanOneArr[concatOne] += 1;
+            spanOneArr.push(0);
+          } else {
+            spanOneArr.push(1);
+            concatOne = index;
+          }
+        }
+      });
+
+      return { one: spanOneArr };
+    },
+    async requestData() {
+      this.loading = true;
+      this.list = [];
+
+
+      let res = {}
+      // 预算单 + 万宇
+      if(this.companyNo === ''){
+        res = await asyncRequest.departmentEveryDay({ daytime: this.daytime,  companyNo: 'GS2203161855277894' })
+        const two = await asyncRequest.departmentEveryDay({ daytime: this.daytime,  companyNo: 'GS2404151642335170' }) 
+
+        const { data: data1 } = res
+        const { data: data2 } = two
+
+
+
+        const newData = []
+        data1.forEach(item => {
+          const twoItem = data2.find(({depart}) => depart === item.depart)
+          const keys = Object.keys(item)
+          const newItem = keys.reduce((prev,current) => ({
+            ...prev,
+            [current]: current === 'depart' ? item.depart : current === 'total_tips' ? item.total_tips : Number(addition(item[current],twoItem[current])).toFixed(2)
+          }),{})
+          newData.push(newItem)
+        })
+
+        
+        res.data = newData
+      }else {
+        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,
+            mpost_fee: post_fee
+          }) => ({
+              depart,
+              total_tips,
+              mzy_sale_total,
+              mchannel_sale_total,
+              channel_cost_total,
+              zy_cost_total,
+              mchannel_cost_total,
+              mzy_cost_total,
+              post_fee,
+              dayinfo: { sale_total, th_total },
+              monthinfo: { msale_total, mth_total }
+          }));
+
+        list = list.filter(item => Number(item.monthinfo.msale_total) !== 0 || Number(item.post_fee) !== 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,
+            post_fee,
+            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, // 渠道成本
+              post_fee: post_fee,
+              depart: mapToDepartment[depart],
+              company: company ? company.label : '--',
+              currentMonthPure: [
+                {
+                  zy: mzy_sale_total, 
+                  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 l = [ "百辰", "泓源", "普润",'泰文创'];
+        const cl = this.list.map(item => item.depart);
+
+        l = l.filter(item => {
+          return cl.findIndex(i => i.indexOf(item)) !== -1;
+        });
+
+        this.list = l.map(item => {
+          return this.list.find(i => i.depart.indexOf(item) !== -1);
+        });
+      } else {
+        this.list = [];
+      }
+      this.getHeight();
+      this.loading = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+}
+
+.table-size {
+  display: flex;
+  width: 200px;
+  border: 1px solid #ebeef5;
+  flex-direction: column;
+
+  p {
+    flex: 1;
+    border-bottom: 1px solid #ebeef5;
+    padding: 5px 10px;
+    margin: 0px;
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
+</style>
+

src/components/newEarningReport/mapCompany.js

@@ -0,0 +1,23 @@
+export const mapCompany = {
+  "北京百辰荣达国际科贸有限公司":"百辰",
+  "北京泓源广诚国际商贸有限公司":"泓源",
+  "北京万宇恒通国际科贸有限公司":"万宇",
+  "北京锦兴弘昌科技有限公司":"锦兴",
+  "北京普润心堂商贸有限公司":"普润",
+  "北京知事文化产业发展有限公司": "知事",
+  "北京泰文创供应链管理有限公司": "泰文创",
+  "北京元隆雅图文化传播股份有限公司": "北京元隆雅图文化传播股份有限公司",
+  "结算单E企购": "结算单E企购",
+}
+
+
+export const mapCompany2 = {
+  "北京百辰荣达国际科贸有限公司":"百辰荣达",
+  "北京泓源广诚国际商贸有限公司":"泓源广诚",
+  "北京万宇恒通国际科贸有限公司":"万宇恒通",
+  "北京锦兴弘昌科技有限公司":"锦兴弘昌",
+  "北京普润心堂商贸有限公司":"普润心堂",
+  "北京知事文化产业发展有限公司": "知事文化",
+  "湖北泽仁文化发展有限公司": "泽仁文化"
+}
+

src/components/newEarningReport/supplier.vue

@@ -0,0 +1,552 @@
+<template>
+  <div v-loading="loading">
+    <div class="search clear" style="align-items: center;">
+      <span style="font-size: 15px;">结算单E企购-月度完成情况</span>
+
+      <div style="float:right">
+        <el-date-picker 
+          class="fr picker no-padding" 
+          v-model="daytime" 
+          style="width:95px" 
+          value-format="yyyy-MM-dd"
+          :editable="false" 
+          :disabled="isEmpty" 
+          :clearable="false" 
+          :size="'small'" 
+          format="yyyy-MM-dd" 
+          type="date"
+          align="right" 
+          placeholder="选择日期"
+          :picker-options="{ disabledDate: time => time.getTime() > Date.now() }"
+          @change="requestData"
+        />
+      </div>
+    </div>
+
+    <el-row style="margin-top:10px;margin-top:10px" v-if="!isEmpty">
+      <el-table 
+        border 
+        size="mini" 
+        :data="[...totalAmount, ...selfSupport.companyArr, ...otherSupport.companyAmount]"
+        :header-cell-class-name="setHeaderClassName"
+        :cell-class-name="setCellClassName"
+        row-key="companyNo"
+        :load="load"
+        lazy
+       >
+       <el-table-column type="" fixed="left" label="" prop="order_type" align="center" width="120px">
+        <template slot-scope="scope">
+          {{ scope.row.order_type }}
+        </template>
+       </el-table-column>
+
+
+        <el-table-column label="公司" prop="companyName" align="center" width="120px">
+          <template slot-scope="scope">
+            <span v-if="scope.row.companyName.indexOf('合计-') === -1">
+              {{ mapCompany2[scope.row.companyName] || scope.row.companyName }}
+            </span>
+            <span v-else>
+              元隆雅图
+            </span>
+          </template>
+        </el-table-column>
+
+
+        <el-table-column label="当日营业收入" align="center" width="95px">
+          <template slot-scope="scope">
+            {{ 
+                isAmountProp(scope.row.companyName) 
+                  ? unit2TenThousand(calcAmount('sale_total', scope.row.companyNo), isTenThound)  
+                  : unit2TenThousand(scope.row.sale_total, isTenThound) 
+            }}
+          </template>
+        </el-table-column>
+
+          <el-table-column label="营收目标" align="center" min-width="95px">
+            <template slot-scope="scope">
+              {{ 
+                isAmountProp(scope.row.companyName)
+                  ? unit2TenThousand(calcAmount('total_tips',scope.row.companyNo), isTenThound)  
+                  : unit2TenThousand(scope.row.total_tips, isTenThound)
+              }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营业收入(净)" align="center" min-width="115px">
+            <template slot-scope="scope">
+              <div style="display:flex;justify-content:center" :style="`${isAmountProp(scope.row.companyName) ? '' :getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
+               {{ 
+                isAmountProp(scope.row.companyName)
+                  ? unit2TenThousand(calcAmount('msale_total', scope.row.companyNo), isTenThound)
+                  : unit2TenThousand(scope.row.msale_total, isTenThound) 
+                }}
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营收完成%" align="center" min-width="85px">
+            <template slot-scope="scope">
+              <div :style="`${isAmountProp(scope.row.companyName) ? '' : getCurrentRateStyle(scope.row.completion_rate)}`">
+                {{ 
+                    isAmountProp(scope.row.companyName) 
+                    ? calcAmountCompletionRate(scope.row.companyNo) 
+                    : (String(scope.row.completion_rate) === 'NaN' || Math.abs(scope.row.completion_rate) === Infinity ? 0 :  scope.row.completion_rate) + "%"
+                    }}
+              </div>
+            </template>
+          </el-table-column>
+
+
+          <template v-if="costField">
+            <el-table-column label="毛利目标" align="center" min-width="90px">
+              <template slot-scope="scope">
+                {{ 
+                  costField 
+                  ? isAmountProp(scope.row.companyName) ? unit2TenThousand(calcAmount('cost_tips',scope.row.companyNo), isTenThound) : unit2TenThousand(scope.row.cost_tips, isTenThound) 
+                  : '***' 
+                }}
+              </template>
+            </el-table-column>
+
+            <el-table-column label="毛利完成" align="center" min-width="90px">
+              <template slot-scope="scope">
+                <div :style="`${isAmountProp(scope.row.companyName) ? '' : getCurrentValueStyle(scope.row.gross_completion, scope.row.cost_tips)}`">
+                  {{ costField 
+                    ?  isAmountProp(scope.row.companyName) ? unit2TenThousand(calcAmount('gross_completion', scope.row.companyNo), isTenThound) : unit2TenThousand(scope.row.gross_completion, isTenThound) 
+                    : '***' 
+                  }}
+                </div>
+              </template>
+            </el-table-column>
+            </template>
+
+            <el-table-column label="毛利完成%" align="center" min-width="85px">
+              <template slot-scope="scope">
+                <div :style="isAmountProp(scope.row.companyName) ? '' : getCurrentRateStyle(scope.row.gross_completion_rate)">
+                  {{  isAmountProp(scope.row.companyName) ? calcAmountGrossCompletionRate(scope.row.companyNo) : scope.row.gross_completion_rate + '%' }}
+                </div>
+              </template>
+            </el-table-column>
+
+          <template v-if="costField">
+            <el-table-column label="成本合计" align="center" min-width="125px">
+              <template slot-scope="scope">
+                <div style="display:flex;justify-content:center" v-if="costField">
+                  {{  
+                    isAmountProp(scope.row.companyName)
+                      ? unit2TenThousand(calcAmount('mcost_total', scope.row.companyNo), isTenThound) 
+                      : unit2TenThousand(scope.row.mcost_total, isTenThound) 
+                  }}
+                </div>
+
+                <p v-else>***</p>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="实际毛利率" align="center" width="85px">
+              <template slot-scope="scope">
+                {{ costField 
+                  ? isAmountProp(scope.row.companyName) ? calcAmountRealRate(scope.row.companyNo)  : unit2TenThousand(scope.row.gross_sale_completion_rate) + "%" 
+                  : '***' 
+                }}
+              </template>
+            </el-table-column>
+          </template>
+      </el-table>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+    <!--  -->
+  </div>
+</template>
+
+
+<script>
+import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
+import asyncRequest from "@/api/newResults";
+import { mapCompany2 } from "./mapCompany";
+
+import { amountData } from "./calc"
+import dayjs from "dayjs"
+
+export default {
+  props: ['companies', 'costField', 'isTenThound'],
+  data() {
+    return {
+      totalAmount:[],
+      selfSupport:{ companyArr: [] },
+      otherSupport: { companyArr: [], companyAmount: [] },
+      daytime: "",
+      loading: false,
+      tableData: [],
+      companyNo: "",
+      plat_cp_companies:[],
+      cp_companies: [],
+      isEmpty: false,
+      mapCompany2,
+     composeCompanies: ['QS2206011447553544', 'QS2304031312553756', 'QS2203150147012961'],
+     otherCompanise: [],
+     notOtherCompanise: ['QS2206011447553544', 'QS2304031312553756', 'QS2203150147012961','QS2203150147013805','QS2203150147015222','QS2206011103304501']
+    }
+  },
+  mounted() {
+    let hasCompose = false;
+    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
+    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");
+    const zsIndex = this.companies.findIndex((item) => item.label === "北京知事文化产业发展有限公司");
+
+    if (jxIndex !== -1 || prIndex !== -1 || zsIndex !== -1) hasCompose = true;
+    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司" && item.label !== "北京知事文化产业发展有限公司")
+    if (hasCompose) this.cp_companies = [...this.cp_companies, { value: "GS2302231124114965", label: "普润&锦兴&知事" }]
+
+    this.isEmpty = this.cp_companies.length === 0;
+    if (this.isEmpty) return;
+
+    this.cp_companies = this.cp_companies.map((item, index) => {
+      let label = '';
+      if (item.label === '北京万宇恒通国际科贸有限公司') { label = '平台公司: 万宇' }
+      if (item.label === '北京泰文创供应链管理有限公司') { label = '平台公司: 泰文创' }
+      if (item.label === '北京元隆雅图文化传播股份有限公司') { label = '预订单E企购' }
+      if (item.label === '结算单E企购') { label = '结算单E企购' }
+      if (item.label === "普润&锦兴&知事") label = `业务公司: 普润&锦兴&知事`
+      if (label === '') label = `业务公司: ${mapCompany2[item.label]}`;
+      return ({ ...item, label })
+    })
+
+
+    let plat_list = ['所有平台公司','平台公司: 万宇', '平台公司: 泰文创', '预订单E企购', '结算单E企购']
+    const plat_cp_list = this.cp_companies.map((item) => item.label);
+    plat_list = plat_list.filter(item => plat_cp_list.includes(item));
+    this.plat_cp_companies = plat_list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+
+    if(this.plat_cp_companies.length === 4){ this.plat_cp_companies =  [{ value: "", label: "所有平台公司" }, ...this.plat_cp_companies] }
+
+    this.companyNo = this.plat_cp_companies[0].value;
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  methods: {
+    calcAmountRealRate(companyNo){
+      const msale_total = this.calcAmount('msale_total',companyNo)
+      const gross_completion = this.calcAmount('gross_completion',companyNo) 
+      return Number(multiplication(Number(division(gross_completion, msale_total)).toFixed(2), 100)).toFixed(2) + '%'
+    },
+    calcAmountGrossCompletionRate(companyNo){
+       if(companyNo === 'selfSupportOrderPR') return '-%'
+       let cost_tips = ''
+
+       if(companyNo === 'selfSupportOrderAmount'){
+        cost_tips = this.selfSupport.cost_tips
+       } else if(companyNo === 'otherSupportOrderAmount'){
+        cost_tips = this.otherSupport.cost_tips
+       }else {
+         cost_tips = this.calcAmount('cost_tips', companyNo)
+       }
+
+      const gross_completion = this.calcAmount('gross_completion', companyNo)
+      return Number(multiplication(Number(division(gross_completion, cost_tips)).toFixed(2), 100)).toFixed(2) + '%'
+    },
+    calcAmountCompletionRate(companyNo){
+      const msale_total = this.calcAmount('msale_total', companyNo)
+      const total_tips = this.calcAmount('total_tips', companyNo)
+      return Number(multiplication(Number(division(msale_total, total_tips)).toFixed(2), 100)).toFixed(2) + '%'
+    },
+    calcAmount(prop, companyNo){
+      let sourceData = []
+
+      if(companyNo === 'totalAmount'){
+        const selfTotal = this.calcAmount(prop, 'selfSupportOrderAmount')
+        const otherTotal = this.calcAmount(prop, 'otherSupportOrderAmount')
+        return Number(addition(selfTotal, otherTotal)).toFixed(2)
+      }
+
+      if(companyNo === 'selfSupportOrderPR') {
+        sourceData = this.selfSupport.companyArr.find(({companyName}) => companyName === '普润').children
+        if(prop === 'total_tips' || prop === 'cost_tips'){ return sourceData[0][prop]  }
+      }
+
+
+      if(companyNo === 'otherSupportOrderAmount'){
+        if(prop === 'total_tips'){
+          return this.otherSupport.total_tips
+        }
+
+        if(prop === 'cost_tips'){
+          return this.otherSupport.cost_tips
+        }
+
+        sourceData = this.otherSupport.companyArr
+      }
+
+      if(companyNo === 'selfSupportOrderAmount') {
+        const children = this.selfSupport.companyArr.find(({companyName}) => companyName === '普润').children
+
+        if(prop === 'cost_tips'){
+          return this.selfSupport.cost_tips
+        }
+
+        if(prop === 'total_tips'){
+          return this.selfSupport.total_tips
+        }
+
+        sourceData = [...this.selfSupport.companyArr, ...children]
+        if(prop === 'cost_tips') { return '-' }
+      }
+
+
+      return sourceData.reduce((prev, current) => {
+        const value = Number(addition(prev,isNaN(current[prop]) ? 0 : current[prop]))
+        return value === 0 ? 0 : value.toFixed(2)
+      }, 0)
+    },
+    isAmountProp(companyName){
+      return companyName === '普润' || companyName === '其他' || companyName === '合计'
+    },
+    load(_1,_2,resolve){
+      const ylBusiness = this.tableData.find(({companyNo}) => companyNo === 'compoeseSupplier')
+      resolve(ylBusiness ? ylBusiness.children : [])
+    },
+    unit2TenThousand,
+    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' : ''
+    },
+    handleData(data){
+      let companyArr = []
+
+      data.companyArr.forEach(({ 
+          supplierName,
+          supplierNo,
+          total_tips = '-',
+          monthinfo, 
+          cost_tips = '-',
+          dayinfo,
+          is_sup
+         }) => {
+          const mapResponseType = { '1': '自营' }
+          const types = Object.keys(mapResponseType)
+          let prev_sale_total = 0;
+          let prev_msale_total = 0;
+          let prev_cost_total = 0;
+          let prev_mcost_total = 0;
+
+          const item = types.map(type => {
+            let _monthinfo = (Array.isArray(monthinfo) ? monthinfo : [monthinfo])[0]
+            let _dayinfo = (Array.isArray(dayinfo) ? dayinfo : dayinfo)[0]
+            const defaultMonthInfo = { mcgd_th_total :  "0.00", mcgd_total:"0.00", msale_total: "0.00", mth_total: "0.00", type }
+            const defaultDayinfo = { "sale_total": "0.00", "th_total": "0.00", "type": "1", "cgd_total": "0.00", "cgd_th_total": "0.00" }
+            if(!_monthinfo) _monthinfo = defaultMonthInfo
+            if(!_dayinfo) _dayinfo = defaultDayinfo
+            /** 月营业收入 = 月销售额 - 月退货额  */
+            let msale_total = 0;
+            if('msale_th_total' in _monthinfo){ _monthinfo.mth_total = _monthinfo.msale_th_total }
+            // if(Number(type) !== 4){
+              msale_total = subtraction(_monthinfo.msale_total, _monthinfo.mth_total) || 0
+            // }
+            /** 日营业收入 = 日销售额 - 日退货额 */
+            const sale_total = subtraction(_dayinfo.sale_total, _dayinfo.th_total) || 0;
+            /** 日成本 = 日采购额 - 日退货额 */
+            const cost_total = subtraction(_dayinfo.cgd_total, _dayinfo.cgd_th_total) || 0;
+            /** 月成本 = 月采购额 - 月退货额 */
+            let mcost_total = 0;
+            // if(Number(type) !== 4){
+              mcost_total = subtraction(_monthinfo.mcgd_total, _monthinfo.mcgd_th_total) || 0;
+            // }else{
+            //   mcost_total = Number(_monthinfo.mcgd_total || 0).toFixed(2);
+            // }
+            prev_sale_total = Number(addition(prev_sale_total, sale_total)).toFixed(2);
+            prev_msale_total = Number(addition(prev_msale_total, msale_total)).toFixed(2);
+            prev_cost_total = Number(addition(prev_cost_total, cost_total)).toFixed(2);
+            prev_mcost_total = Number(addition(prev_mcost_total, mcost_total)).toFixed(2);
+
+            return {
+              type: mapResponseType[type],
+              dayinfo: { ..._dayinfo, sale_total },
+              monthinfo: { ...monthinfo, msale_total, mcost_total }
+            }
+          })
+
+          const gross_completion = Number(subtraction(prev_msale_total, prev_mcost_total)).toFixed(2) //当月毛利完成 = 月营收 - 月成本
+
+          companyArr = [
+            ...companyArr,
+            {
+              is_sup,
+              companyNo: supplierNo,
+              companyName: supplierName,  // 公司名称
+              cost_tips, // 当月成本指标
+              total_tips, // 当月营收目标
+              info: item[0], // 直营..渠道 销售
+              sale_total: prev_sale_total, // 当日营业收入
+              cost_total: prev_cost_total, // 当日成本总额
+              msale_total: prev_msale_total, // 当月营业收入
+              mcost_total: prev_mcost_total,// 当月成本总额
+              gross_completion, //当月毛利完成 = 月营收 - 月成本
+              completion_rate: total_tips === '-' ? '-' : multiplication(division(prev_msale_total, total_tips), 100).toFixed(2), // 当月应收完成率
+              gross_completion_rate: cost_tips === '-' ? '-' :Number(cost_tips) === 0 ? 0 : multiplication(division(gross_completion, cost_tips) || 0, 100).toFixed(2), // 当月毛利完成率
+              gross_sale_completion_rate: Number(multiplication(division(gross_completion, prev_msale_total) || 0, 100)).toFixed(2), // 本月毛利率 =  当月毛利完成 / 当月营业收入
+            }
+          ]
+       })
+
+      return companyArr
+    },
+    getCurrentValueStyle(current, total = 0) {
+      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' : '';
+    },
+    setCellClassName({ column, row }) {
+      const { label } = column;
+      let base = ''
+
+      if(row.companyName === "北京万宇恒通国际科贸有限公司") {
+        base += 'font-bold '
+      }
+
+      if (label === "营收目标")  {
+        base += "bg__success"
+        return base
+      }
+
+      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') {
+        base += "bg__success_1"
+        return base;
+      }
+
+      if (label === "毛利目标") {
+        base += "bg__primary"
+        return base
+      }
+
+      if (label.indexOf('毛利') !== -1) {
+        base += "bg__primary_1"
+        return base;
+      }
+      if (label.indexOf('成本') !== -1) {
+        base += "bg__warning_1"
+        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" }
+    },
+    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);
+    },
+    async requestData() {
+      this.loading = true;
+      this.tableData = [];
+      const res = await asyncRequest.supplier({ daytime: this.daytime });
+      let sourceData = []
+
+      if (res.code === 1 && res.data) {
+        let { '2': selfSupport, '3': otherSupport } = JSON.parse(JSON.stringify(res.data))
+        selfSupport.companyArr = this.handleData(selfSupport) 
+        otherSupport.companyArr = this.handleData(otherSupport)
+
+        this.otherSupport = otherSupport
+        this.selfSupport = selfSupport
+
+
+        const children = this.selfSupport.companyArr.filter(({companyNo}) => this.composeCompanies.includes(companyNo))
+        this.selfSupport.companyArr = this.selfSupport.companyArr.filter(({companyNo}) => !this.composeCompanies.includes(companyNo))
+
+        this.selfSupport.companyArr = [
+          {
+            ...amountData,
+            order_type: '自营订单',
+            companyNo: 'selfSupportOrderAmount',
+            companyName: '合计'
+          },
+          {
+            ...amountData,
+            companyNo: 'selfSupportOrderPR',
+            companyName: '普润',
+            children
+          },
+          ...this.selfSupport.companyArr
+        ]
+
+        this.otherSupport.companyAmount = [
+          {
+            ...amountData,
+            order_type: '地推订单',
+            companyName: '合计',
+            companyNo: 'otherSupportOrderAmount'
+          }
+        ]
+
+
+        this.totalAmount = [{
+          ...amountData,
+          companyNo: 'totalAmount',
+          order_type: '结算单E企购',
+          companyName: '合计'
+        }]
+
+        // this.otherCompanise = sourceData.filter(({is_sup}) => is_sup === 1)
+        // sourceData = sourceData.filter(({companyNo}) =>  !this.composeCompanies.includes(companyNo) && this.notOtherCompanise.includes(companyNo))
+        // , hasChildren: true, children
+        // this.tableData = sourceData
+      } else {
+        this.tableData = [];
+      }
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+  }
+}
+
+.table-size {
+  display: flex;
+  width: 200px;
+  border: 1px solid #ebeef5;
+  flex-direction: column;
+
+  p {
+    flex: 1;
+    border-bottom: 1px solid #ebeef5;
+    padding: 5px 10px;
+    margin: 0px;
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
+</style>
+

src/pages/index.vue

@@ -21,7 +21,8 @@ export default {
         {label:'5.发货情况', link: '/?path=stock'},
         {label:'6.库存情况', link:'?path=newStock'},
         {label:'1.业绩报表(2023版)', link: '/?path=results'},
-        {label: '测试', link: '/?path=newResultInfo'}
+        {label: '测试', link: '/?path=newResultInfo'},
+        {label: '7.', link: '/?path=newEarningReport'},
       ]
     }
   },

src/pages/newEarningReport.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="new-results" v-loading="state.loading" style="min-height: 300px">
+    <div v-if="!state.error && isShow && hasPermission">
+      <div
+        style="
+          color:red;
+          width:100%;
+          display: flex;
+          padding:5px 10px;
+          align-items: center;
+          box-sizing:border-box;
+          justify-content: space-between
+        ">
+        <ElPopover
+          :width="200" 
+          trigger="hover"
+          placement="top-start"
+          content=" 以下报表一小时更新一次"
+        >
+          <template #reference>
+            <i class="el-icon-warning-outline" style="font-size:22px;cursor:pointer" />
+          </template>
+        </ElPopover>
+
+        <ElSwitch 
+          v-model="isTenThound" 
+          active-text="万元" 
+          inactive-text="元" 
+        />
+      </div>
+
+
+      <div class="container">
+        <result-company 
+          :companies="companies"
+          :costField="costField" 
+          :isTenThound="isTenThound" 
+        />
+
+        <result-supplier 
+          :companies="companies" 
+          :costField="costField" 
+          :isTenThound="isTenThound" 
+        />
+      </div>
+    </div>
+
+    <template v-else-if="!state.loading">
+      <div style="color:red;display:flex;justify-content:center;align-items:center;margin-top:10px">
+         <i class="el-icon-warning-outline" style="font-size:18px;margin-right:5px"></i>
+        该报表为信息部内部报表,暂不对外开放
+      </div>
+      <!-- <unusual-state :hasPermission="isShow" :message="state.message" path="newReport" /> -->
+    </template>
+  </div>
+</template>
+
+<script>
+import PeriodDatePicker from "../components/period-date-picker";
+import ResultCompany from "@/components/newEarningReport/company.vue"
+import ResultSupplier from "@/components/newEarningReport/supplier.vue"
+
+import { getOpenid, getParameterByName, removeOpenid, setOpenid } from "../utils/auth";
+import userRequest from "@/api/index";
+
+export default {
+  name: "newReportsInfo",
+  components: {
+    ResultCompany,
+    ResultSupplier,
+    PeriodDatePicker
+  },
+  data() {
+    return {
+      state: { message: '', error: false, loading: false },
+      hasPermission:false,
+      isTenThound: false,
+      isDisplay: false,
+      costField: false,
+      companies: [],
+      daytime: "",
+      zxTotal: 0
+    };
+  },
+  mounted() {
+    if (!getParameterByName('code')) {
+      this.login()
+    } else {
+      this.requestUserinfo()
+    }
+  },
+  methods: {
+    async time(e) {
+      const { startTime, endTime } = e;
+      this.start = startTime || "";
+      this.end = endTime || "";
+      const { start, end } = this;
+      if (
+        (start !== "" && end === "") || 
+        (start === "" && end !== "")
+      ) {
+        this.$message.warning("时间区间不完整！");
+        this.date = []
+        return;
+      }
+
+
+      if (this.start && this.end) {
+        this.date = [this.start + " 00:00:00", this.end + " 23:59:59"]
+      } else {
+        this.date = [this.start, this.end]
+      }
+    }, 
+    async requestUserinfo() {
+      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": "8",
+      //   "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 permissions = [
+        'oOpc26KiZFBKIm7SB8knFGvov1qg',
+        'oOpc26KDBFTU71t-vWvJ_jTOPhGU',
+        'oOpc26LU21JoejLExJxOmjG7_E2I',
+        'oOpc26GnkwTcASDd1kHGd6TR23PE',
+        'oOpc26P6UZxE9eIwdQ4EXxKv1lRA'
+      ];
+
+      this.hasPermission = permissions.includes(result.data.openid);
+      this.companies = result.data.companyArr.reduce((prev, current) => {
+        return current.info.includes(6) || current.info.includes('6') ? [...prev, {
+          value: current.companyNo,
+          label: current.companyName
+        }] : prev
+      }, [])
+
+      this.state.loading = false
+      switch (Number(result.code)) {
+        case 0:
+          this.isShow = (result.data.is_show || []).includes(6) || (result.data.is_show || []).includes('6')
+          this.costField = (result.data.is_show || []).includes('cost_field')
+          setOpenid(result.data.openid)
+          break
+        default:
+          this.state.error = true;
+          openid && removeOpenid();
+          this.state.message = result.message;
+          break;
+      }
+    },
+    login() {
+      const redirect_url = encodeURIComponent('http://stat.caixiao365.com/accountsReceivable')
+      var state = 'wx_' + Math.random().toString(36).substr(2, 15)
+      const scope = 'snsapi_userinfo'
+      const baseUrl = "https://open.weixin.qq.com/connect/oauth2/authorize";
+      const url = `${baseUrl}?appid=${config.appId}&redirect_uri=${redirect_url}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
+      window.location.href = url;
+    },
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.new-results {
+  // width: 100vw;
+  width: calc(100vw - 20px);
+  height: 100vh;
+  position: fixed;
+  overflow: auto;
+
+  .container {
+    height:calc(100vh - 40px);
+    padding:10px;
+    overflow:auto;
+    background:white;
+  }
+}
+</style>

src/router/index.js

@@ -9,6 +9,7 @@ import Index from "../pages/index.vue"
 import NewResultChart from "../pages/newResultsChart.vue"
 import NewResultInfo from "../pages/newResultsInfo.vue"
 import NewStock from "../pages/newStock.vue"
+import NewEarningReport from "../pages/newEarningReport.vue"
 
 import { getParameterByName } from "../utils/auth"
 
@@ -23,7 +24,7 @@ const routes = [
   { path:'/newResults', component: NewResult },
   { path:'/newResultChart', component: NewResultChart },
   { path:'/newResultInfo', component: NewResultInfo },
-  { path:'/newStock', component: NewStock },
+  { path:'/newEarningReport', component: NewEarningReport },
 ]
 
 const router = new VueRouter({routes, mode:'hash'})