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

<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>
        部门完成情况
      </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"
        :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;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>
    </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]}`
    }))


    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.companyNo = this.cp_companies[0].value;
    this.daytime = this.transformTime();
    this.requestData();
  },
  watch: { daytime: { handler() { this.requestData() } } },
  methods: {
    addition,
    unit2TenThousand,
    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 = [];
      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 }
          }
        })


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