data-dashboard/src/components/newResults/company.vue

<template>
  <div v-loading="loading">
    <div class="search clear" style="align-items: center;;">
      <div style="float:left;line-height:30px;font-size:16px">
        月度完成情况
      </div>

      <div style="float:right">
        <el-select size="small" style="margin-right:10px;width:140px" v-model="companyNo" @change="requestData"
          :disabled="isEmpty">
          <el-option v-for="company in cp_companies" :key="company.value" :value="company.value" :label="company.label" />
        </el-select>

        <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">
        <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="top" 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;flex-direction: column;">
                <el-popover placement="top" :width="200" trigger="hover">
                  <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" style="font-size:16px;cursor:pointer"></i>
                      {{ unit2TenThousand(scope.row.msale_total, isTenThound) }}
                    </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)}`">{{ 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">
                {{ 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)}`">
                  {{ unit2TenThousand(scope.row.gross_completion, isTenThound) }}
                </div>
              </template>
            </el-table-column>


            <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>

            <el-table-column label="成本合计" align="center" min-width="125px">
              <template slot-scope="scope">
                <div style="display:flex;flex-direction: column;">
                  <el-popover placement="top" :width="200" trigger="hover">
                    <div class="table-size">
                      <p>直营/自营: {{ unit2TenThousand(scope.row.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>
                    </div>

                    <template #reference>
                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
                      {{ unit2TenThousand(scope.row.mcost_total, isTenThound) }}
                    </template>
                  </el-popover>
                </div>
              </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)}`"> -->
                {{ 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: "",
      cp_companies: [],
      isEmpty: false,
      mapCompany
    }
  },
  mounted() {
    const hasCompose = false;
    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");

    if (jxIndex !== -1 || prIndex !== -1) this.hasCompose = true;
    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司")
    if (this.hasCompose) this.cp_companies = [...this.cp_companies, { value: "GS2302231124114965", label: "普润&锦兴&知事" }]
    if (this.cp_companies.length === 4) this.cp_companies = [{ value: "", label: "所有公司" }, ...this.cp_companies];

    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 (label === '') label = `业务公司: ${mapCompany[item.label]}`;
      return ({ ...item, label })
    })


    let list = ['所有公司','平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润&锦兴&知事']
    const cp_list = this.cp_companies.map((item) => item.label);
    list = list.filter(item => cp_list.includes(item));
    this.cp_companies = list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
    this.companyNo = this.cp_companies[0].value;

    this.daytime = this.transformTime();
    this.requestData();
  },
  methods: {
    unit2TenThousand,
    getCurrentRateStyle(current) {
      const days = dayjs().daysInMonth();
      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) {
      const days = dayjs().daysInMonth();
      const oneDay = Number(division(total, days)).toFixed(2);
      const currentDay = dayjs().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, companyNo: this.companyNo });

      // const jxIndex = res.data.findIndex((item) => item.companyName === "北京锦兴弘昌科技有限公司");
      // let prIndex = res.data.findIndex((item) => item.companyName === "北京普润心堂商贸有限公司");
      // let zsIndex = res.data.findIndex((item) => item.companyName === "北京知事文化产业发展有限公司")
      // if (jxIndex >= 0 && prIndex >= 0) {
      //   const jxItem = res.data[jxIndex];
      //   res.data[prIndex] = this.addDataToCompany(jxItem, res.data[prIndex]);
      //   res.data.splice(jxIndex, 1);
      // }
      // prIndex = res.data.findIndex((item) => item.companyName === "北京普润心堂商贸有限公司");
      // zsIndex = res.data.findIndex((item) => item.companyName === "北京知事文化产业发展有限公司")
      // if (zsIndex >= 0 && prIndex >= 0) {
      //   const zsItem = res.data[zsIndex];
      //   res.data[prIndex] = this.addDataToCompany(zsItem, res.data[prIndex]);
      //   res.data.splice(zsIndex, 1);
      // }
      // if (this.companyNo === "GS2302231124114965") {
      //   const jxResult = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: "GS2304031312553746" });
      //   const zsResult = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: "GS2401181650538135" });
      //   res.data[prIndex] = this.addDataToCompany(jxResult.data[0], res.data[prIndex]);
      //   if(zsResult.data.length !== 0) {
      //     res.data[prIndex] = this.addDataToCompany(zsResult.data[0], res.data[prIndex]);
      //   }
      // }
      // const isBeforeDate = this.getDiffDay() < 0 && this.companyNo === "GS2302231323386950"

      if (res.code === 0 && res.data && res.data.length > 0) {
        res.data.forEach(({ companyName, monthinfo, dayinfo, total_tips, cost_tips }) => {
          // monthinfo[1] = {
          //   ...(isBeforeDate ? {
          //     msale_total:addition(monthinfo[1].msale_total,monthinfo[2].msale_total),
          //     mth_total:addition(monthinfo[1].mth_total,monthinfo[2].mth_total),
          //     type:'2'
          //   } : monthinfo[1])
          // }

          // monthinfo[0] = {
          //   ...(isBeforeDate ? {
          //     msale_total:0,
          //     mth_total:0,
          //     type:'1'
          //   } : monthinfo[0])
          // }

          // monthinfo[2] = {
          //   ...(isBeforeDate ? {
          //     msale_total:0,
          //     mth_total:0,
          //     type:'3'
          //   } : monthinfo[2])
          // }


          // this.companyName = companyName


          const mapResponseType = { '1': '自营', '2': '渠道', '3': '供应商端' }

          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) || {}

            /** 月营业收入 = 月销售额 - 月退货额  */
            const 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;
            /** 月成本 = 月采购额 - 月退货额 */
            const mcost_total = subtraction(_monthinfo.mcgd_total, _monthinfo.mcgd_th_total) || 0;


            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,
            {
              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), // 本月毛利率 =  当月毛利完成 / 当月营业收入
            }
          ]


          // const wanyuIndex = this.tableData.findIndex(item => item.companyName === "北京万宇恒通国际科贸有限公司")
          // if(wanyuIndex !== -1) {
          //   const item = this.tableData.splice(wanyuIndex, 1);
          //   this.tableData = [...item,...this.tableData]
          // }

        })

        let i = ["北京万宇恒通国际科贸有限公司","北京百辰荣达国际科贸有限公司","北京泓源广诚国际商贸有限公司",'北京普润心堂商贸有限公司'];
        const l = this.tableData.map(item => item.companyName);
        i = i.filter(item => l.includes(item));
        this.tableData = i.map(item => this.tableData.find(l => l.companyName === item));
      } 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>