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

<template>
  <div v-loading="loading">
    <div class="search clear" style="align-items: center;;">
      <div style="float:left">
        业绩毛利完成情况-年度
      </div>

      <div style="float:right">
        <el-switch style="margin-right: 10px;" v-model="isTenThound" active-text="万元" inactive-text="元"
          :disabled="isEmpty" />
        <el-select size="small" style="margin-right:10px;width:125px" 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" v-model="daytime" style=";width:140px" 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="70px">
          <template slot-scope="scope">
            <div v-if="scope.row.companyName.indexOf('普润') === -1">{{ mapCompany[scope.row.companyName] ||
              scope.row.companyName }}</div>
            <div v-else>
              <p style="margin:0px">普润</p>
              <p style="margin:0px">锦兴</p>
              <p style="margin:0px">知事</p>
            </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" width="95px">
          <template slot-scope="scope">
            {{ unit2TenThousand(scope.row.total_tips, isTenThound) }}
          </template>
        </el-table-column>

        <el-table-column label="当月营业收入(净)" align="center" min-width="420px">
          <template slot-scope="scope">
            <div style="display:flex;flex-direction: column;">
              <p :style="`text-align: center;${getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
                {{ unit2TenThousand(scope.row.msale_total, isTenThound) }}
              </p>

              <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>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="当月营收完成%" align="center" min-width="105px">
          <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" width="95px">
            <template slot-scope="scope">
              {{ unit2TenThousand(scope.row.cost_tips, isTenThound) }}
            </template>
          </el-table-column>

          <el-table-column label="当月毛利完成" align="center" width="95px">
            <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" width="105px">
            <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>

          <el-table-column label="当月毛利完成%" align="center" min-width="105px">
            <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" width="425px">
            <template slot-scope="scope">
              <div style="display:flex;flex-direction: column;">
                <p style="text-align: center;"> {{ unit2TenThousand(scope.row.mcost_total, isTenThound) }}</p>
                <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>
              </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 asyncRequest from "@/api/newResults";
import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
import { mapCompany } from "./mapCompany";
import dayjs from "dayjs"

export default {
  props: ['companies', 'costField'],
  data() {
    return {
      isTenThound: true,
      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 => ({ ...item, label: mapCompany[item.label] || item.label }))

    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: '普润\n锦兴\n知事',
        cost_tips: Number(addition(c1.cost_tips, c2.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 }) {
      const { label } = column;
      if (label === "当月营业收入(净)" || label === '当月成本合计') return "pure__cell";
      if (label === "当月营收目标") return "bg__yellow"
      if (label === "当月毛利目标") return "bg__red"
    },
    setHeaderClassName({ column }) {
      const { label } = column;
      if (label === "当月营收目标") return "bg__yellow"
      if (label === "当月毛利目标") return "bg__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);
    },
    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 === "北京锦兴弘昌科技有限公司");
      const prIndex = 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);
        console.log(res.data);
      }

      if (this.companyNo === "GS2302231124114965") {
        const jxResult = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: "GS2304031312553746" });
        res.data[prIndex] = this.addDataToCompany(jxResult.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), // 本月毛利率 =  当月毛利完成 / 当月营业收入
            }
          ]
        })
      } 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;
    border-top: 1px solid #ebeef5;

    p {
      flex: 1;
      border-right: 1px solid #ebeef5;
      padding: 5px 10px;
      margin: 0px;

      &:last-child {
        border: none;
      }
    }
  }
}
</style>