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

<template>
  <div v-loading="loading">
    <div class="search clear">
      <div style="float:left;line-height:30px">部门完成情况</div>

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

        <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" height="315px"
        :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="120px">
          <el-table-column label="营业收入" align="center">
            <template slot-scope="scope">{{ unit2TenThousand(scope.row.dayinfo.sale_total, isTenThound) }}</template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="当月" align="center">
          <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;flex-direction: column;">
                  <el-popover placement="top" :width="200" trigger="hover">
                    <div class="table-size">
                      <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
                      <p>支付渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, isTenThound) }}</p>
                    </div>
                    <template #reference>

                      <p
                        :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
                        <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
                        {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
                      </p>
                    </template>
                  </el-popover>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="成本" align="center" min-width="120px" v-if="costField">
            <template slot-scope="scope">
              <div style="display:flex;flex-direction: column;">
                <el-popover placement="top" :width="200" trigger="hover">
                  <div class="table-size">
                    <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost, isTenThound) }}</p>
                    <p>渠道: {{ unit2TenThousand(scope.row.qd_cost, isTenThound) }}</p>
                  </div>
                  <template #reference>
                    <p style="text-align: center;">
                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
                      {{
                unit2TenThousand(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2), isTenThound) }}
                    </p>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" label="毛利" min-width="120px">
            <template slot-scope="scope">
              <div style="display:flex;flex-direction: column;">
                <el-popover placement="top" :width="200" trigger="hover">
                  <div class="table-size">
                    <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross, isTenThound) }}</p>
                    <p>支付渠道: {{ unit2TenThousand(scope.row.qd_gross, isTenThound) }}</p>
                  </div>
                  <template #reference>
                    <p style="text-align: center;">
                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
                      {{
                        unit2TenThousand(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2), isTenThound)
                      }}
                    </p>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </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.companyNo = this.companies[0].value;
    this.cp_companies = this.companies.map(item => ({
      ...item,
      label: mapCompany[item.label] === '万宇' ? `平台公司: 万宇` : `业务公司: ${mapCompany[item.label]}`
    }))
    this.daytime = this.transformTime();
    this.requestData();
  },
  watch: { daytime: { handler() { this.requestData() } } },
  methods: {
    addition,
    unit2TenThousand,
    setCellClassName({ column }) {
      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"
    },
    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' : '';
    },
    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 = [];
      const res = await asyncRequest.departmentEveryDay({ daytime: this.daytime, companyNo: this.companyNo });

      if (res.code === 0 && res.data && res.data.length > 0) {
        // 非万宇 营业目标重取
        if (this.companyNo !== "GS2203161855277894") {
          const r = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: this.companyNo });
          const { total_tips, companyName } = r.data[0] || {};
          res.data.forEach(item => {
            const index = companyName.indexOf(item.depart);
            item.total_tips = (index === -1 && !(item.depart === "普润" && this.companyNo === "GS2304031312553746")) ? '0.00' : total_tips;
          })
        }

        let list = (res.data || [])
          .map(({ depart, msale_total, mth_total, sale_total, th_total, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mzy_cost_total, mchannel_cost_total }) => {
            return {
              depart, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mchannel_cost_total, mzy_cost_total,
              dayinfo: { sale_total, th_total }, monthinfo: { msale_total, mth_total }
            }
          });

        list = list.filter(item => Number(item.monthinfo.msale_total) !== 0)

        this.total = list.reduce((prev, current) => {
          const { total_tips = 0, day = 0, month = 0 } = current;
          return { total_tips: addition(total_tips, prev.total_tips), month: addition(month, prev.month), day: addition(day, prev.day) }
        },
          { total_tips: 0, month: 0, day: 0 }
        )

        let mapDepart = list.map(({ depart }) => depart);

        list = mapDepart.map(d => list.find(({ depart }) => depart === d))

        const mapToDepartment = { 百辰: "客服部@百辰", 泓源: "网络部@泓源", 普润: "	项目部@普润", 平台: "	平台部@万宇" }

        const company = this.companies.find(item => item.value === this.companyNo);
        this.list = list.map(({ depart, total_tips, dayinfo, monthinfo, mchannel_sale_total, mzy_sale_total, zy_cost_total, mchannel_cost_total, mzy_cost_total }) => {
          /* 月净销售 = 月销售 - 月退货 **/
          const monthNetSales = subtraction(monthinfo.msale_total, monthinfo.mth_total)
          /* 月经销售完成率 = 月净销售 / 销售指标 **/
          const monthProportion = multiplication(division(monthNetSales, total_tips), 100).toFixed(2)
          return {
            total_tips, // 营收目标
            zy_cost: mzy_cost_total, // 自营成本
            qd_cost: mchannel_cost_total, // 渠道成本
            depart: mapToDepartment[depart],
            company: company.label,
            currentMonthPure: [{ zy: mzy_sale_total, 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 }
          }
        })
      } 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>