Skip to content

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

规则，柱状图

parent 54b0beaa
Hide whitespace changes
Inline Side-by-side
Showing with 530 additions and 8 deletions
src/components/FinancialModule/DataAnalysis/allEchart.vue
View file @ fd326151
......@@ -39,7 +39,7 @@
</el-col>
<el-col :span="4">
<el-form-item label="线路">
<el-select filterable v-model="msg.LineId" @change="getStatement"
<el-select filterable multiple v-model="msg.LineIdList" @change="getStatement"
clearable>
<el-option
:value="0"
......@@ -116,6 +116,8 @@
<WoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></WoolRateChange>
<ActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></ActualRateChange>
<ChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></ChangeProportion>
<WoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></WoolRateColumnar>
<ActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></ActualRateColumnar>
</div>
</div>
</template>
......@@ -126,8 +128,11 @@ import IncomeShare from "./components/Echart/IncomeShare.vue";
import WoolRateChange from "./components/Echart/WoolRateChange.vue";
import ActualRateChange from "./components/Echart/ActualRateChange.vue";
import ChangeProportion from "./components/Echart/ChangeProportion.vue";
import WoolRateColumnar from "./components/Echart/WoolRateColumnar.vue";
import ActualRateColumnar from "./components/Echart/ActualRateColumnar.vue";
export default {
components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion},
components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion,
WoolRateColumnar,ActualRateColumnar},
data() {
return {
coinGetShow: false,
......@@ -142,7 +147,9 @@ export default {
Type: '0',
DataType:'-1',
LossType:'0',
IsLastData :1
IsLastData:1,
LineIdList: [],
LineIdStr: ''
},
dateTime: [],
CompanyList: [],
......@@ -220,6 +227,12 @@ export default {
})
},
getStatement(){
if(this.msg.LineIdList[this.msg.LineIdList.length-1]==0){
this.msg.LineIdList = [0]
}else{
this.msg.LineIdList = this.msg.LineIdList.filter(x=>{return x})
}
this.msg.LineIdStr = this.msg.LineIdList.join(',')
this.loading = true
this.apipost(
"financestatistics_post_GetDataAnalysisStat",
......@@ -298,10 +311,13 @@ export default {
}
.echartsBox{
flex: 1;
min-width: 458px;
min-width: 430px;
margin: 5px;
background: #fff;
}
.echartsBox:nth-child(2){
min-width: 458px;
}
.allMyEchartBox{
height: 270px;
}
......
src/components/FinancialModule/DataAnalysis/components/Echart/ActualRateChange.vue
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度实际利率变化趋势图 %</h3>
<h3>月度实际利率变化趋势图 %(线图)</h3>
<div style="margin-left: 20px;">
......
src/components/FinancialModule/DataAnalysis/components/Echart/ActualRateColumnar.vue 0 → 100644
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度实际利率变化趋势图 %(柱状图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualMyEchartC" 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: 'bar',
itemStyle:{
barBorderRadius: 5,
},
barWidth: 5,
data: x.DetailList.map(y=>{return y.ProfitRate.toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualMyEchartC','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"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
src/components/FinancialModule/DataAnalysis/components/Echart/WoolRateChange.vue
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利率变化趋势图 %</h3>
<h3>月度毛利率变化趋势图 %(线图)</h3>
<div style="margin-left: 20px;">
......
src/components/FinancialModule/DataAnalysis/components/Echart/WoolRateColumnar.vue 0 → 100644
View file @ fd326151
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利率变化趋势图 %(柱状图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="WoolMyEchartC" 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: 'bar',
itemStyle:{
barBorderRadius: 5,
},
barWidth: 5,
data: x.DetailList.map(y=>{return y.MaoLiRate.toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('WoolMyEchartC','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"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
dataZoom: [
{
type: 'inside'
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
src/components/FinancialModule/DataAnalysis/components/lineEchart.vue
View file @ fd326151
......@@ -299,7 +299,7 @@ export default {
itemStyle:{
barBorderRadius: 5,
},
barWidth : 10,
barWidth: 10,
// stack: 'Total',
data: [],
}
......
src/components/FinancialModule/TradeCommission/CommissionRule.vue
View file @ fd326151
......@@ -44,7 +44,63 @@
</td>
</tr>
</table>
<div style="width:100%;overflow-x: auto;">
<table
class="po_content singeRowTable"
style="border:1px solid #E6E6E6;display: flex;"
cellspacing="0"
cellpadding="0"
>
<tr rowspan="3" style="min-width: 150px;width: 150px;background: #fff;font-size: 13px;padding: 10px;
display: flex;align-items: center;justify-content: center;text-align: center;height: 122px;">
<span>成都销售推广欧洲路线补充</span>
<!-- <p>未达标最低人数需要募捐，年终也需满足此规则</p> -->
</tr>
<template v-for="( son , sIndex ) in item.EuropeExtendRuleList">
<tr style="display: flex;flex-direction: column;height: 122px;">
<td colspan="3" style="line-height: 40px;">{{son.Name}}<p></p> </td>
<table class="po_content singeRowTable" style="height: 80px;"
cellspacing="0"
cellpadding="0">
<tr>
<th style="min-width: 220px;">
最低人数
</th>
<th style="min-width: 220px;">
募捐金额
</th>
<th style="min-width: 220px;">
参与销售
</th>
</tr>
<tr>
<td style="min-width: 220px;">
{{son.PeopleNum}}
</td>
<td style="min-width: 220px;">
{{son.Money}}
</td>
<td style="min-width: 220px;">
{{son.EmpNameStr}}
</td>
</tr>
</table>
</tr>
<!-- <tr>
<td style="min-width: 220px;">
{{son.PeopleNum}}
</td>
<td style="min-width: 220px;">
{{son.Money}}
</td>
<td style="min-width: 220px;">
{{son.EmpNameStr}}
</td>
</tr> -->
</template>
</table>
</div>
<div style="width:100%;overflow-x: auto;">
<table
class="po_content singeRowTable"
......@@ -201,7 +257,7 @@
<el-dialog :title="titleName" :visible.sync="ruleVisible" width="750px" @close="resetForm('form')">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<div class="ImpressionTicketing-msgbox bottom0">
<el-form-item label="规则名称" prop="Name">
<el-form-item label="方案名称" prop="Name">
<el-input v-model="form.Name" clearable></el-input>
</el-form-item>
<el-form-item label="达标人数" prop="BonusMinPNum">
......@@ -214,6 +270,66 @@
</div>
</el-form-item>
</div>
<el-form-item class="ImpressionTicketing-OuterFrame" label-width="0px">
<p class="ImpressionTicketing-title">成都销售推广欧洲路线补充(未达标最低人数需要募捐，年终也需满足此规则)</p>
<div class="ImpressionTicketing-msgbox ImpressionTicketing-msgboxBC"
v-for="(item,index) in form.EuropeExtendRuleList" :key="index">
<div>
<el-form-item
:label="form.EuropeExtendRuleList.length>0?`规则名称 ${index+1} `:` ` "
:prop="`EuropeExtendRuleList.${index}.Name`"
:rules="rules.Name"
label-width="100px"
label-position="left">
<el-input
v-model="item.Name" clearable></el-input>
</el-form-item>
</div>
<div>
<el-form-item
:label="form.EuropeExtendRuleList.length>0?`最低人数 ${index+1} `:` ` "
:prop="`EuropeExtendRuleList.${index}.PeopleNum`"
:rules="rules.PeopleNum"
label-width="100px"
label-position="left">
<el-input placeholder="最低人数" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999"
v-model="item.PeopleNum" clearable></el-input>
</el-form-item>
</div>
<div>
<el-form-item
:label="form.EuropeExtendRuleList.length>0?`募捐金额 ${index+1} `:` ` "
:prop="`EuropeExtendRuleList.${index}.Money`"
:rules="rules.Money"
label-width="100px"
label-position="left">
<el-input placeholder="募捐金额" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" :min="0" :max="99999999"
v-model="item.Money"></el-input>
</el-form-item>
</div>
<div style="flex: 0 0 630px;">
<el-form-item
:label="form.EuropeExtendRuleList.length>0?`参与销售 ${index+1} `:` ` "
:prop="`EuropeExtendRuleList.${index}.EmpIdList`"
:rules="rules.EmpIdList"
label-width="100px"
label-position="left">
<!-- collapse-tags -->
<el-select style="width: 100%;" v-model="item.EmpIdList" filterable multiple
placeholder="参与销售" @change="getEmpIds(index)">
<el-option v-for="(x,i) in EmployeeList" :label="x.EmName"
:value="x.EmployeeId"
:key="i"></el-option>
</el-select>
</el-form-item>
</div>
<div class="ImpressionTicketing-msg-but">
<span @click="addRule(item,index,8)" v-if="index==0" class="el-icon-circle-plus-outline itc-outline"></span>
<span @click="deleteRule(item,index,8)" v-else class="el-icon-delete itc-delete"></span>
</div>
</div>
</el-form-item>
<el-form-item class="ImpressionTicketing-OuterFrame" label-width="0px">
<p class="ImpressionTicketing-title">日本线人头奖励</p>
<div class="ImpressionTicketing-msgbox"
......@@ -527,6 +643,7 @@
export default {
data() {
return {
EmployeeList: [],
value:"",
rules: {
Name: [{ required: true, message: '请输入规则名称', trigger: "blur"}],
......@@ -538,6 +655,10 @@
Rate: [{ required: true, message: "请输入金额", trigger: "blur"}],
Rate2: [{ required: true, message: "请输入比例", trigger: "blur"}],
Content: [{ required: true, message: "请输入限制", trigger: "blur"}],
Name: [{ required: true, message: "请输入规则名称", trigger: "blur"}],
PeopleNum: [{ required: true, message: "请输入最低人数", trigger: "blur"}],
Money: [{ required: true, message: "请输入募捐金额", trigger: "blur"}],
EmpIdList: [{ required: true, message: '请选择参与销售', trigger: 'change'}],
},
AwardRuleList:{ StartValue:0, EndValue:null, Rate:null},
ProfitRuleList:{ StartValue:0, EndValue:null, Rate:null},
......@@ -546,6 +667,7 @@
OtherAwardRuleList:{ StartValue:0, EndValue:null, Rate:null},
OtherProfitRuleList:{ StartValue:0, EndValue:null, Rate:null},
BonusRuleList:{ StartValue:0, Rate:null},
EuropeExtendRuleList:{Name:'',PeopleNum:null,Money:null,EmpIds:'',EmpIdList:[]},
form:{
Id:0,
Name:'',
......@@ -558,6 +680,7 @@
OtherAwardRuleList:[{ StartValue:0, EndValue:null, Rate:null}],
OtherProfitRuleList:[{ StartValue:0, EndValue:null, Rate:null}],
BonusRuleList:[ { StartValue:0, Rate:null }],
EuropeExtendRuleList:[{Name:'',PeopleNum:null,Money:null,EmpIds:'',EmpIdList:[]}]
},
ruleLoading: false,
ruleVisible:false,
......@@ -569,8 +692,33 @@
created() {},
mounted() {
this.getList()
this.getEmployeeList()
},
methods: {
getEmpIds(index){
let list = this.form.EuropeExtendRuleList[index].EmpIdList
this.form.EuropeExtendRuleList[index].EmpIds = list.join(',')
},
//根据当前员工所在部门获取该部门及子部门员工信息
getEmployeeList() {
let userInfo = this.getLocalStorage();
let msg = {
GroupId: userInfo.RB_Group_id,
BranchId: "-1",
DepartmentId: "-1",
PostId: "-1",
IsLeave: "0"
};
this.apipost(
"admin_get_EmployeeGetList", {},
res => {
if (res.data.resultCode == 1) {
this.EmployeeList = res.data.data;
}
},
err => {}
);
},
// 初始化表单
resetForm(formName) {
this.$refs[formName].resetFields();
......@@ -589,6 +737,8 @@
this.form.OtherAwardRuleList.push(JSON.parse(JSON.stringify(this.OtherAwardRuleList)))
}else if(type==7){
this.form.OtherProfitRuleList.push(JSON.parse(JSON.stringify(this.OtherProfitRuleList)))
}else if(type==8){
this.form.EuropeExtendRuleList.push(JSON.parse(JSON.stringify(this.EuropeExtendRuleList)))
}else{
this.form.BonusRuleList.push(JSON.parse(JSON.stringify(this.BonusRuleList)))
}
......@@ -607,6 +757,8 @@
this.form.OtherAwardRuleList.splice(index,1)
}else if(type==7){
this.form.OtherProfitRuleList.splice(index,1)
}else if(type==8){
this.form.EuropeExtendRuleList.splice(index,1)
}else{
this.form.BonusRuleList.splice(index,1)
}
......@@ -630,6 +782,7 @@
OtherAwardRuleList:item.OtherAwardRuleList,
OtherProfitRuleList:item.OtherProfitRuleList,
BonusRuleList:item.BonusRuleList,
EuropeExtendRuleList: item.EuropeExtendRuleList?item.EuropeExtendRuleList:[this.EuropeExtendRuleList]
}
},
Delete(item){//删除
......@@ -805,4 +958,13 @@
/deep/.line-heigh .el-input-number{
line-height: 32px;
}
.ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC{
flex-wrap: wrap;
}
.ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC div{
flex: 0 0 220px;
}
.ImpressionTicketing-msgbox.ImpressionTicketing-msgboxBC div:last-child{
flex: 0 0 auto;
}
</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