Skip to content

S
SuperMan
Commit 8b95fc29 authored by youjie's avatar youjie
Browse files
Options

购物报账制单

parent d96c799d
Hide whitespace changes
Inline Side-by-side
Showing with 303 additions and 358 deletions
src/components/FinancialModule/DataAnalysis/components/ShoppingCommission.vue 0 → 100644
View file @ 8b95fc29
<template>
<div style="margin-bottom: 20px;">
<h3 class="text-center" style="margin-bottom: 5px;">购物店</h3>
<el-table
:data="ShopData"
style="width: 100%"
class="LineAnalysisDataBJ">
<el-table-column
fixed
align="center"
prop="Name"
label="购物店"
width="150">
</el-table-column>
<el-table-column align="center" :label="title" v-for="(title,i) in MonthList" :key="i" :prop="`${i}`">
<el-table-column
prop=""
label="购物总金额"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].TotalMoney.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="购物占比"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].TotalRate.toFixed(2)}}%
</template>
</el-table-column>
<el-table-column
prop=""
label="返佣总金额"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].CommissionMoney.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="返佣占比"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].CommissionRate.toFixed(2)}}%
</template>
</el-table-column>
<el-table-column
prop=""
label="PIC佣金"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].PICCommission.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="领队佣金"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].LeaderCommission.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="公司佣金"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].CompanyCommission.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="导游佣金"
min-width="120" align="center">
<template slot-scope="scope">
{{scope.row.DetailList[i].GuideCommission.toFixed(2)}}
</template>
</el-table-column>
</el-table-column>
</el-table>
<div class="shopingRow">
<div class="shopingcolumn">
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">领队排名</h3>
<el-table
height="410"
:data="LeaderRankList"
style="width: 100%;"
class="LineAnalysisDataBJ LineAnalysisDataBJ2" border>
<el-table-column
fixed
prop=""
label="姓名"
width="150" align="center">
<template slot-scope="scope">
{{scope.row.Name}}
</template>
</el-table-column>
<el-table-column
prop=""
label="购物总额" align="center">
<template slot-scope="scope">
{{scope.row.TotalMoney.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="领队佣金" align="center">
<template slot-scope="scope">
{{scope.row.Commission.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="占比" align="center">
<template slot-scope="scope">
{{scope.row.Rate.toFixed(2)}}%
</template>
</el-table-column>
<el-table-column
prop=""
label="排名" align="center">
<template slot-scope="scope">
{{scope.row.Rank}}
</template>
</el-table-column>
</el-table>
</div>
<div class="shopingcolumn" style="margin-left: 5px;">
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">导游排名</h3>
<el-table
height="410"
:data="GuideRankList"
style="width: 100%;"
class="LineAnalysisDataBJ LineAnalysisDataBJ2" border>
<el-table-column
fixed
prop=""
label="姓名"
width="150" align="center">
<template slot-scope="scope">
{{scope.row.Name}}
</template>
</el-table-column>
<el-table-column
prop=""
label="购物总额" align="center">
<template slot-scope="scope">
{{scope.row.TotalMoney.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="导游佣金"align="center">
<template slot-scope="scope">
{{scope.row.Commission.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="占比"align="center">
<template slot-scope="scope">
{{scope.row.Rate.toFixed(2)}}%
</template>
</el-table-column>
<el-table-column
prop=""
label="排名"align="center">
<template slot-scope="scope">
{{scope.row.Rank}}
</template>
</el-table-column>
</el-table>
</div>
<div class="shopingcolumn" style="margin-left: 5px;">
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">佣金占比</h3>
<el-table
height="410"
:data="CommissionRateList"
style="width: 100%;"
class="LineAnalysisDataBJ LineAnalysisDataBJ2" border>
<el-table-column
fixed
prop=""
label="月份"
width="150" align="center">
<template slot-scope="scope">
{{scope.row.Month}}
</template>
</el-table-column>
<el-table-column
prop=""
label="公司佣金" align="center">
<template slot-scope="scope">
{{scope.row.Commission.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="出境日本收入" align="center">
<template slot-scope="scope">
{{scope.row.Income.toFixed(2)}}
</template>
</el-table-column>
<el-table-column
prop=""
label="占比" align="center">
<template slot-scope="scope">
{{scope.row.Rate.toFixed(2)}}%
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
props:['StatisticalData'],
data() {
return {
MonthList: [],//月份列表
ShopData: [],
LeaderRankList: [],
GuideRankList: [],
CommissionRateList: [],
}
},
mounted() {
},
methods: {
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthQuarterList//月份列表
this.ShopData = n.ShopData
this.LeaderRankList = n.LeaderRankList
this.GuideRankList = n.GuideRankList
this.CommissionRateList = n.CommissionRateList
},
deep: true,
immediate: false,
}
},
}
</script>
<style scoped>
/deep/.LineAnalysisDataBJ tr td:nth-child(1n){
background: #F5F7FA;
}
/deep/.LineAnalysisDataBJ tr td:nth-child(2n){
background: #fff;
}
/deep/.LineAnalysisDataBJ tr th{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(1n){
/* background: #fff; */
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(2n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th{
background: #fff;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(1n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(2n){
/* background: #fff; */
}
/deep/.el-table.LineAnalysisDataBJ tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
.shopingRow{
height: 400px;
display: flex;
flex-direction: row;
overflow: hidden;
}
.shopingcolumn{
flex: 1;
display: flex;
flex-direction: column;
}
</style>
src/components/FinancialModule/DataAnalysis/components/twoEchart/ActualRateChange.vue deleted 100644 → 0
View file @ d96c799d
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度实际利润变化趋势图(折线图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualMyEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额，{c} 代表数据值
},
data: x.DetailList.map(y=>{return (y.Profit/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualMyEchart','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
// selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
},
formatter: '{value}w',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
src/components/FinancialModule/DataAnalysis/components/twoEchart/WoolRateChange.vue deleted 100644 → 0
View file @ d96c799d
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利变化趋势图(折线图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="WoolMyEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额，{c} 代表数据值
},
data: x.DetailList.map(y=>{return (y.MaoLi/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('WoolMyEchart','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
// selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
},
formatter: '{value}w',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment