|
|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <div class="search clear">
|
|
|
+ <el-select size="small" style="margin-right:10px" v-model="companyName" @change="requestData">
|
|
|
+ <el-option label="所有公司" v-for="company in companies" :key="company.value" :value="company.value" :label="company.label" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-date-picker class="fr picker" v-model="daytime" style=";width:150px" value-format="yyyy-MM-dd" :editable="false"
|
|
|
+ :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>
|
|
|
+
|
|
|
+ <el-row style="margin-top:10px">
|
|
|
+ <el-table border size="mini" :data="tableData" :cell-class-name="setCellClassName">
|
|
|
+ <el-table-column fixed="left" label="业务公司" prop="companyName" align="center" width="190px" />
|
|
|
+ <el-table-column label="当日营业收入" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{unit2TenThousand(scope.row.sale_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当月营收目标" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{unit2TenThousand(scope.row.total_tips)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="当月营业收入(净)" align="center" width="400px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="display:flex;flex-direction: column;">
|
|
|
+ <p style="text-align: center;">{{unit2TenThousand(scope.row.msale_total)}}</p>
|
|
|
+ <el-table border size="mini" :data="scope.row.info">
|
|
|
+ <el-table-column align="center" label="直营/自营">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{unit2TenThousand(scope.row[0].monthinfo.msale_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column align="center" label="渠道">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ unit2TenThousand(scope.row[1].monthinfo.msale_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="供应商端">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ unit2TenThousand(scope.row[2].monthinfo.msale_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="当月营收完成%" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.completion_rate + "%"}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当月毛利完成%" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.gross_completion_rate + '%'}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当月毛利指标" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{unit2TenThousand(scope.row.cost_tips)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当月毛利完成" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{unit2TenThousand(scope.row.gross_completion)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当月实际毛利率" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{unit2TenThousand(scope.row.gross_sale_completion_rate) + "%"}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当月成本合计" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{unit2TenThousand(scope.row.mcost_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="直营/自营成本" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ unit2TenThousand(scope.row.info[0][0].monthinfo.mcost_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="渠道成本" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ unit2TenThousand(scope.row.info[0][1].monthinfo.mcost_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="供应商端成本" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ unit2TenThousand(scope.row.info[0][2].monthinfo.mcost_total)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+import asyncRequest from "@/api/newResults";
|
|
|
+import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ daytime: "",
|
|
|
+ loading: false,
|
|
|
+ tableData: [],
|
|
|
+ companyName: "",
|
|
|
+ companies:[
|
|
|
+ { value:"",label: "所有公司"},
|
|
|
+ { value:"北京百辰荣达国际科贸有限公司",label: "北京百辰荣达国际科贸有限公司"},
|
|
|
+ { value:"北京泓源广诚国际商贸有限公司",label: "北京泓源广诚国际商贸有限公司"},
|
|
|
+ { value:"北京锦兴弘昌科技有限公司&\n北京普润心堂商贸有限公司&\n北京知事文化产业发展有限公司",label: "普润&锦兴&知事"},
|
|
|
+ { value:"北京万宇恒通国际科贸有限公司",label: "北京万宇恒通国际科贸有限公司"},
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.daytime = this.transformTime();
|
|
|
+ this.requestData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ unit2TenThousand,
|
|
|
+ setCellClassName({ column }) {
|
|
|
+ const { label } = column;
|
|
|
+ return label === "当月营业收入(净)" ? "pure__cell" : "";
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ addDataToCompany(c1,c2){
|
|
|
+ return {
|
|
|
+ companyName:'北京锦兴弘昌科技有限公司&\n北京普润心堂商贸有限公司&\n北京知事文化产业发展有限公司',
|
|
|
+ cost_tips:Number(addition(c1.cost_tips,c2.cost_tips)).toFixed(2),
|
|
|
+ total_tips:Number(addition(c1.total_tips,c2.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.monthinfo.map((item,index) => ({
|
|
|
+ cgd_th_total:Number(addition(item.cgd_th_total,c2.monthinfo[index].cgd_th_total)).toFixed(2),
|
|
|
+ cgd_total:Number(addition(item.cgd_total,c2.monthinfo[index].cgd_total)).toFixed(2),
|
|
|
+ sale_total:Number(addition(item.sale_total,c2.monthinfo[index].sale_total)).toFixed(2),
|
|
|
+ th_total:Number(addition(item.th_total,c2.monthinfo[index].th_total)).toFixed(2),
|
|
|
+ type:item.type
|
|
|
+ })),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async requestData() {
|
|
|
+ this.loading = true;
|
|
|
+ this.tableData = [];
|
|
|
+
|
|
|
+ const res = await asyncRequest.companyEveryMonth({ daytime: this.daytime });
|
|
|
+ // 锦兴下标
|
|
|
+ const jx_index = res.data.findIndex(({companyName}) => companyName === "北京锦兴弘昌科技有限公司");
|
|
|
+ // 普润下标
|
|
|
+ const pr_index = res.data.findIndex(({companyName}) => companyName === "北京普润心堂商贸有限公司");
|
|
|
+ // 知事下标
|
|
|
+ const zs_index = res.data.findIndex(({companyName}) => companyName === "北京知事文化产业发展有限公司");
|
|
|
+
|
|
|
+
|
|
|
+ if(pr_index >= 0 && jx_index >= 0){
|
|
|
+ const pr_item = res.data.splice(pr_index, 1);
|
|
|
+ res.data[jx_index] = this.addDataToCompany(res.data[jx_index],pr_item[0])
|
|
|
+ }
|
|
|
+
|
|
|
+ if(zs_index >= 0 && jx_index >= 0){
|
|
|
+ const zs_item = res.data.splice(zs_index, 1);
|
|
|
+ res.data[jx_index] = this.addDataToCompany(res.data[jx_index],zs_item[0])
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(this.companyNo && companyNo === "1"){
|
|
|
+ res.data = res.data.filter(({companyName}) => companyName === "北京百辰荣达国际科贸有限公司")
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if(this.companyName){
|
|
|
+ res.data = res.data.filter(({companyName}) => companyName === this.companyName)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 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;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin-top: 10px
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
snow