|
|
@@ -1,39 +1,23 @@
|
|
|
<template>
|
|
|
<div v-loading="loading">
|
|
|
<div class="search clear">
|
|
|
- <div style="float:left">部门业绩毛利完成情况</div>
|
|
|
+ <div style="float:left;line-height:30px">部门完成情况</div>
|
|
|
|
|
|
<div style="float:right">
|
|
|
- <el-switch
|
|
|
- :disabled="isEmpty"
|
|
|
- :inline-prompt="true"
|
|
|
- style="margin-right: 10px;"
|
|
|
- v-model="isTenThound"
|
|
|
- active-text="万元"
|
|
|
- inactive-text="元"
|
|
|
- />
|
|
|
-
|
|
|
- <el-select size="small" style="margin-right:10px;width:80px" 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 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"
|
|
|
- v-model="daytime"
|
|
|
- :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }"
|
|
|
- style=";width:140px" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :clearable="false"
|
|
|
- placeholder="选择日期"
|
|
|
- :size="'small'"
|
|
|
- align="right"
|
|
|
- type="date"
|
|
|
- />
|
|
|
+ <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"
|
|
|
+ <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">
|
|
|
@@ -43,70 +27,80 @@
|
|
|
</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>
|
|
|
-
|
|
|
- <el-table-column label="当月营收目标" align="center" width="120px">
|
|
|
- <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips, isTenThound) }}</template>
|
|
|
+ <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" 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>
|
|
|
+ <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>
|
|
|
|
|
|
- <div class="table-size">
|
|
|
- <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
|
|
|
- <p>渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, isTenThound) }}</p>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column label="成本" align="center" min-width="400px" v-if="costField">
|
|
|
-
|
|
|
- <!-- <el-table-column align="center" label="直营/自营">
|
|
|
- <template slot-scope="scope">{{unit2TenThousand(scope.row.zy_cost,isTenThound)}}</template>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column align="center" label="渠道">
|
|
|
- <template slot-scope="scope">{{unit2TenThousand(scope.row.qd_cost,isTenThound)}}</template>
|
|
|
- </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_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>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column align="center" label="毛利" min-width="400px">
|
|
|
- <!-- <el-table-column align="center" label="直营/自营">
|
|
|
- <template slot-scope="scope">{{unit2TenThousand(scope.row.zy_gross,isTenThound)}}</template>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
|
|
|
- <el-table-column align="center" label="渠道">
|
|
|
- <template slot-scope="scope">{{unit2TenThousand(scope.row.qd_gross,isTenThound)}}</template>
|
|
|
- </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>
|
|
|
- <div class="table-size">
|
|
|
- <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross, isTenThound) }}</p>
|
|
|
- <p>渠道: {{ unit2TenThousand(scope.row.qd_gross, isTenThound) }}</p>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</el-row>
|
|
|
@@ -134,15 +128,15 @@ import {
|
|
|
|
|
|
export default {
|
|
|
mixins: [setHeight],
|
|
|
- props: ['companies', 'costField'],
|
|
|
+ props: ['companies', 'costField', 'isTenThound'],
|
|
|
data() {
|
|
|
return {
|
|
|
list: [],
|
|
|
daytime: "",
|
|
|
companyNo: "",
|
|
|
loading: false,
|
|
|
- isTenThound: true,
|
|
|
- isEmpty: false
|
|
|
+ isEmpty: false,
|
|
|
+ cp_companies:[]
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -154,10 +148,10 @@ export default {
|
|
|
this.isEmpty = this.companies.length === 0;
|
|
|
if (this.isEmpty) return;
|
|
|
this.companyNo = this.companies[0].value;
|
|
|
- this.companies = this.companies.map(item => ({
|
|
|
- ...item,
|
|
|
- label: mapCompany[item.label] || item.label
|
|
|
- }))
|
|
|
+ this.cp_companies = this.companies.map(item => ({
|
|
|
+ ...item,
|
|
|
+ label: mapCompany[item.label] === '万宇' ? `平台公司: 万宇` : `业务公司: ${mapCompany[item.label]}`
|
|
|
+ }))
|
|
|
this.daytime = this.transformTime();
|
|
|
this.requestData();
|
|
|
},
|
|
|
@@ -167,14 +161,20 @@ export default {
|
|
|
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__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__yellow"
|
|
|
- if (label === "当月毛利目标") return "bg__red"
|
|
|
+ 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();
|
|
|
@@ -232,21 +232,17 @@ export default {
|
|
|
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") {
|
|
|
+ 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;
|
|
|
+ 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 {
|
|
|
@@ -255,17 +251,17 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- list = list.filter(item => Number(item.monthinfo.msale_total) !== 0)
|
|
|
+ list = list.filter(item => Number(item.monthinfo.msale_total) !== 0)
|
|
|
|
|
|
- this.total = list.reduce((prev, current) => {
|
|
|
+ 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);
|
|
|
-
|
|
|
+ let mapDepart = list.map(({ depart }) => depart);
|
|
|
+
|
|
|
list = mapDepart.map(d => list.find(({ depart }) => depart === d))
|
|
|
|
|
|
const mapToDepartment = { 百辰: "客服部@百辰", 泓源: "网络部@泓源", 普润: " 项目部@普润", 平台: " 平台部@万宇" }
|
|
|
@@ -308,25 +304,26 @@ export default {
|
|
|
height: 36px;
|
|
|
padding: 0px 10px;
|
|
|
margin-top: 10px;
|
|
|
- width:100%;
|
|
|
+ width: 100%;
|
|
|
box-sizing: border-box;
|
|
|
- justify-content:space-between;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
+.table-size {
|
|
|
+ display: flex;
|
|
|
+ width: 200px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- .table-size {
|
|
|
- display: flex;
|
|
|
- border-top: 1px solid #ebeef5;
|
|
|
-
|
|
|
- p {
|
|
|
- flex: 1;
|
|
|
- border-right: 1px solid #ebeef5;
|
|
|
- padding: 5px 10px;
|
|
|
- margin: 0px;
|
|
|
+ p {
|
|
|
+ flex: 1;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin: 0px;
|
|
|
|
|
|
- &:last-child {
|
|
|
- border: none;
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
snow