|
|
@@ -1,68 +1,51 @@
|
|
|
<template>
|
|
|
<div v-loading="loading">
|
|
|
- <div class="search clear" style="align-items: center;">
|
|
|
- <el-switch
|
|
|
- :disabled="isEmpty"
|
|
|
- style="margin-right: 10px;"
|
|
|
- v-model="isTenThound"
|
|
|
- active-text="万元"
|
|
|
- inactive-text="元"
|
|
|
- />
|
|
|
-
|
|
|
- <el-select size="small" style="margin-right:10px;width:105px" v-model="companyNo" @change="requestData" :disabled="isEmpty">
|
|
|
- <el-option
|
|
|
- v-for="depart in companies"
|
|
|
- :key="depart.value"
|
|
|
- :label="depart.label"
|
|
|
- :value="depart.value"
|
|
|
- />
|
|
|
+ <div class="search">
|
|
|
+ <el-select size="small" style="margin-right:10px;width:230px" v-model="companyNo" @change="requestData"
|
|
|
+ :disabled="isEmpty">
|
|
|
+ <el-option v-for="depart in companies" :key="depart.value" :label="depart.label" :value="depart.value" />
|
|
|
</el-select>
|
|
|
|
|
|
- <el-date-picker
|
|
|
- :disabled="isEmpty"
|
|
|
- class="fr picker"
|
|
|
- v-model="daytime"
|
|
|
- :picker-options="{disbaledData(time) { return time.getTime() > Date.now(); }}"
|
|
|
- placeholder="选择日期"
|
|
|
- style=";width:140px"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- format="yyyy-MM-dd"
|
|
|
- :editable="false"
|
|
|
- :clearable="false"
|
|
|
- :size="'small'"
|
|
|
- align="right"
|
|
|
- type="date"
|
|
|
- />
|
|
|
+ <div style="display:flex;align-items:center">
|
|
|
+ <el-switch :disabled="isEmpty" style="margin-right: 10px;" v-model="isTenThound" active-text="万元"
|
|
|
+ inactive-text="元" />
|
|
|
+ <el-date-picker :disabled="isEmpty" class="fr picker" v-model="daytime"
|
|
|
+ :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }" placeholder="选择日期"
|
|
|
+ style=";width:140px" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :clearable="false"
|
|
|
+ :size="'small'" align="right" type="date" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<el-row style="margin-top: 10px; display: flex;" v-if="!isEmpty">
|
|
|
- <el-table border size="mini" :data="list" :span-method="spanMethod" :header-cell-class-name="setHeaderClassName" :cell-class-name="setCellClassName">
|
|
|
- <el-table-column fixed="left" label="公司" prop="company" align="center" width="45px" />
|
|
|
+ <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 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" width="120px">
|
|
|
- <template slot-scope="scope">{{ unit2TenThousand(scope.row.dayinfo.sale_total,isTenThound) }}</template>
|
|
|
+ <el-table-column label="当日营业收入" align="center" width="120px">
|
|
|
+ <template slot-scope="scope">{{ unit2TenThousand(scope.row.dayinfo.sale_total, isTenThound) }}</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
+
|
|
|
<el-table-column label="当月营收目标" align="center" width="120px">
|
|
|
- <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips,isTenThound) }}</template>
|
|
|
+ <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips, isTenThound) }}</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column label="当月营业收入(净)" align="center" min-width="400px">
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display:flex;flex-direction: column;">
|
|
|
- <p :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
|
|
|
- {{ unit2TenThousand(scope.row.monthinfo.monthNetSales,isTenThound)}}
|
|
|
+ <p
|
|
|
+ :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
|
|
|
+ {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
|
|
|
</p>
|
|
|
-
|
|
|
- <div class="table-size">
|
|
|
- <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy,isTenThound) }}</p>
|
|
|
- <p>渠道: {{unit2TenThousand(scope.row.currentMonthPure[0].qd,isTenThound)}}</p>
|
|
|
+
|
|
|
+ <div class="table-size">
|
|
|
+ <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
|
|
|
+ <p>渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, isTenThound) }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -80,10 +63,11 @@
|
|
|
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display:flex;flex-direction: column;">
|
|
|
- <p style="text-align: center;">{{ unit2TenThousand(Number(addition(scope.row.zy_cost,scope.row.qd_cost)).toFixed(2),isTenThound) }}</p>
|
|
|
+ <p style="text-align: center;">{{
|
|
|
+ unit2TenThousand(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2), isTenThound) }}</p>
|
|
|
<div class="table-size">
|
|
|
- <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost,isTenThound) }}</p>
|
|
|
- <p>渠道: {{ unit2TenThousand(scope.row.qd_cost,isTenThound)}}</p>
|
|
|
+ <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost, isTenThound) }}</p>
|
|
|
+ <p>渠道: {{ unit2TenThousand(scope.row.qd_cost, isTenThound) }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -99,10 +83,11 @@
|
|
|
</el-table-column> -->
|
|
|
<template slot-scope="scope">
|
|
|
<div style="display:flex;flex-direction: column;">
|
|
|
- <p style="text-align: center;">{{ unit2TenThousand(Number(addition(scope.row.zy_gross,scope.row.qd_gross)).toFixed(2),isTenThound) }}</p>
|
|
|
+ <p style="text-align: center;">{{
|
|
|
+ unit2TenThousand(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2), isTenThound) }}</p>
|
|
|
<div class="table-size">
|
|
|
- <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross,isTenThound) }}</p>
|
|
|
- <p>渠道: {{unit2TenThousand(scope.row.qd_gross,isTenThound)}}</p>
|
|
|
+ <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross, isTenThound) }}</p>
|
|
|
+ <p>渠道: {{ unit2TenThousand(scope.row.qd_gross, isTenThound) }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -123,18 +108,18 @@ import setHeight from "@/mixins/index";
|
|
|
import { mapCompany } from "./mapCompany"
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
-import {
|
|
|
- addition,
|
|
|
- division,
|
|
|
- subtraction,
|
|
|
- multiplication,
|
|
|
- unit2TenThousand
|
|
|
+import {
|
|
|
+ addition,
|
|
|
+ division,
|
|
|
+ subtraction,
|
|
|
+ multiplication,
|
|
|
+ unit2TenThousand
|
|
|
} from "../newReport/src/_utils";
|
|
|
|
|
|
export default {
|
|
|
- mixins: [ setHeight ],
|
|
|
- props:['companies','costField'],
|
|
|
- data(){
|
|
|
+ mixins: [setHeight],
|
|
|
+ props: ['companies', 'costField'],
|
|
|
+ data() {
|
|
|
return {
|
|
|
list: [],
|
|
|
daytime: "",
|
|
|
@@ -144,48 +129,46 @@ export default {
|
|
|
isEmpty: false
|
|
|
}
|
|
|
},
|
|
|
- computed:{
|
|
|
- currentCompanyName(){
|
|
|
+ computed: {
|
|
|
+ currentCompanyName() {
|
|
|
return this.companies.find(item => item.value === this.companyNo).label;
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.isEmpty = this.companies.length === 0;
|
|
|
- if(this.isEmpty) return;
|
|
|
+ if (this.isEmpty) return;
|
|
|
this.companyNo = this.companies[0].value;
|
|
|
- this.companies = this.companies.map(item => ({ ...item, label:mapCompany[item.label] || item.label}))
|
|
|
+ this.companies = this.companies.map(item => ({ ...item, label: item.label }))
|
|
|
this.daytime = this.transformTime();
|
|
|
this.requestData();
|
|
|
},
|
|
|
- watch:{ daytime:{ handler(){ 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__yellow"
|
|
|
- if(label === "当月毛利目标") return "bg__red"
|
|
|
+ if (label === "当月营业收入(净)" || label === '当月成本合计') return "pure__cell";
|
|
|
+ if (label === "当月营收目标") return "bg__yellow"
|
|
|
+ if (label === "当月毛利目标") return "bg__red"
|
|
|
},
|
|
|
- setHeaderClassName({ column }){
|
|
|
+ setHeaderClassName({ column }) {
|
|
|
const { label } = column;
|
|
|
- if(label === "当月营收目标") return "bg__yellow"
|
|
|
- if(label === "当月毛利目标") return "bg__red"
|
|
|
+ if (label === "当月营收目标") return "bg__yellow"
|
|
|
+ if (label === "当月毛利目标") return "bg__red"
|
|
|
},
|
|
|
- getCurrentRateStyle(current){
|
|
|
+ getCurrentRateStyle(current) {
|
|
|
const days = dayjs().daysInMonth();
|
|
|
- const oneDay = Number(division(100,days)).toFixed(2);
|
|
|
+ const oneDay = Number(division(100, days)).toFixed(2);
|
|
|
const currentDay = dayjs().date();
|
|
|
- const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
|
|
|
+ const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
|
|
|
return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
|
|
|
},
|
|
|
- getCurrentValueStyle(current,total){
|
|
|
- console.log(current,total,'---');
|
|
|
-
|
|
|
+ getCurrentValueStyle(current, total) {
|
|
|
const days = dayjs().daysInMonth();
|
|
|
- const oneDay = Number(division(total,days)).toFixed(2);
|
|
|
+ const oneDay = Number(division(total, days)).toFixed(2);
|
|
|
const currentDay = dayjs().date();
|
|
|
- const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
|
|
|
+ const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
|
|
|
return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
|
|
|
},
|
|
|
transformTime() {
|
|
|
@@ -195,36 +178,36 @@ export default {
|
|
|
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) {
|
|
|
+ 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;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
+ 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 };
|
|
|
- },
|
|
|
+ return { one: spanOneArr };
|
|
|
+ },
|
|
|
async requestData() {
|
|
|
this.loading = true;
|
|
|
this.list = [];
|
|
|
@@ -233,44 +216,47 @@ export default {
|
|
|
|
|
|
if (res.code === 0 && res.data && res.data.length > 0) {
|
|
|
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 }
|
|
|
- }
|
|
|
- });
|
|
|
+ .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 }
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- 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) }
|
|
|
- },
|
|
|
+ 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 = ["百辰","泓源","普润","平台"]
|
|
|
+ let mapDepart = list.map(({depart}) => depart);
|
|
|
+
|
|
|
list = mapDepart.map(d => list.find(({ depart }) => depart === d))
|
|
|
- const mapToDepartment = { 百辰:"客服部@百辰", 泓源:"网络部@泓源", 普润:" 项目部@普润", 平台:" 平台部@万宇" }
|
|
|
+
|
|
|
+ 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}) => {
|
|
|
+ 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)
|
|
|
+ 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) },
|
|
|
+ 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 }
|
|
|
+ proportion: multiplication(division(monthinfo.msale_total, this.total.month) || 0, 100) || 0,
|
|
|
+ monthinfo: { monthNetSales, monthProportion: monthProportion }
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
@@ -285,21 +271,24 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.new-results{
|
|
|
+.new-results {
|
|
|
.search {
|
|
|
- height:36px;
|
|
|
+ height: 36px;
|
|
|
+ padding: 0px 10px;
|
|
|
+ margin-top: 10px;
|
|
|
display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- padding:0px 10px;
|
|
|
- margin-top:10px
|
|
|
+ align-items: center;
|
|
|
+ width:100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content:space-between;
|
|
|
}
|
|
|
|
|
|
- .table-size{
|
|
|
+ .table-size {
|
|
|
display: flex;
|
|
|
border-top: 1px solid #ebeef5;
|
|
|
|
|
|
p {
|
|
|
- flex:1;
|
|
|
+ flex: 1;
|
|
|
border-right: 1px solid #ebeef5;
|
|
|
padding: 5px 10px;
|
|
|
margin: 0px;
|
snow