Skip to content

S
SuperMan
Commit 0e99484e authored by 黄奎's avatar 黄奎
Browse files
Options

国内国际机票统计修改

parent 20684036
Hide whitespace changes
Inline Side-by-side
Showing with 423 additions and 392 deletions
src/components/DomesticModule/OrderDataStati.vue
View file @ 0e99484e
<style> <style>
@import url('../../assets/css/domestic/OrderDataStati.css'); @import url('../../assets/css/domestic/OrderDataStati.css');
</style> </style>
<template> <template>
<div class="page_OrderDataStati"> <div class="page_OrderDataStati">
<div class="page_OrderDataStati_top"> <div class="page_OrderDataStati_top">
<div class="_tit"> <div class="_tit">
<div> <div>
<span class="_tit_name">利润走势图（月）</span> <span class="_tit_name">利润走势图（月）</span>
<span class="_fangkuai"> <i class=""></i> 实际利润</span> <span class="_fangkuai"> <i class=""></i> 实际利润</span>
<span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span> <span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span>
</div>
<div class="_all_lirun">
<span>总预期利润 <i>¥{{allProfit}}</i></span>
<span class="margin_left_15">总实际利润 <i>¥{{allRealProfit}}</i></span>
</div>
<div class="_input">
<el-select v-model="Year" size="mini" @change="getDataMonth">
<el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select v-model="Month" size="mini" @change="getDataMonth" class="_month_input">
<el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
<div id="chartsMap" :style="{'height':clientHeight+'px','width':'100%'}"></div>
</div> </div>
<div class="page_OrderDataStati_bottom"> <div class="_all_lirun">
<div class="_tit"> <span>总预期利润 <i>¥{{allProfit}}</i></span>
<div> <span class="margin_left_15">总实际利润 <i>¥{{allRealProfit}}</i></span>
<span class="_tit_name">利润走势图（年）</span>
<span class="_fangkuai"> <i class=""></i> 实际利润</span>
<span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span>
</div>
<div class="_all_lirun">
<span>总预期利润 <i>¥{{allProfitYear}}</i></span>
<span class="margin_left_15">总实际利润 <i>¥{{allRealProfitYear}}</i></span>
</div>
<div class="_input">
<el-select v-model="YearS" size="mini" @change="getDataYear">
<el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select v-model="MonthS" size="mini" @change="getDataMonth" class="_month_input _visibility">
<el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
<div id="chartsMapYear" :style="{'height':clientHeight+'px','width':'100%'}"></div>
</div> </div>
<div class="_input">
<el-select v-model="IsInter" size="mini" @change="getDataMonth">
<el-option :key="-1" label="全部" :value="-1"></el-option>
<el-option :key="0" label="国内机票" :value="0"></el-option>
<el-option :key="1" label="国际机票" :value="1"></el-option>
</el-select>
<el-select v-model="Year" size="mini" @change="getDataMonth">
<el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select v-model="Month" size="mini" @change="getDataMonth" class="_month_input">
<el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
<div id="chartsMap" :style="{'height':clientHeight+'px','width':'100%'}"></div>
</div>
<div class="page_OrderDataStati_bottom">
<div class="_tit">
<div>
<span class="_tit_name">利润走势图（年）</span>
<span class="_fangkuai"> <i class=""></i> 实际利润</span>
<span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span>
</div>
<div class="_all_lirun">
<span>总预期利润 <i>¥{{allProfitYear}}</i></span>
<span class="margin_left_15">总实际利润 <i>¥{{allRealProfitYear}}</i></span>
</div>
<div class="_input">
<el-select v-model="IsInters" size="mini" @change="getDataYear">
<el-option :key="-1" label="全部" :value="-1"></el-option>
<el-option :key="0" label="国内机票" :value="0"></el-option>
<el-option :key="1" label="国际机票" :value="1"></el-option>
</el-select>
<el-select v-model="YearS" size="mini" @change="getDataYear">
<el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select v-model="MonthS" size="mini" @change="getDataMonth" class="_month_input _visibility">
<el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
<div id="chartsMapYear" :style="{'height':clientHeight+'px','width':'100%'}"></div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return{ return {
Year:new Date().getFullYear(),
Month:new Date().getMonth()+1, Year: new Date().getFullYear(),
date:new Date().getDate(), Month: new Date().getMonth() + 1,
YearS:new Date().getFullYear(), date: new Date().getDate(),
MonthS:'', IsInter:-1,//月统计[0-国内，1-国际]
clientHeight:'', YearS: new Date().getFullYear(),
yearList:[], MonthS: '',
MonthList:[], IsInters:-1,//年统计[0-国内，1-国际]
dayList:[], clientHeight: '',
allRealProfit:0, yearList: [],
allProfit:0, MonthList: [],
allRealProfitYear:0, dayList: [],
allProfitYear:0, allRealProfit: 0,
allProfit: 0,
allRealProfitYear: 0,
allProfitYear: 0,
}
},
created() {
this.clientHeight = (document.documentElement.clientHeight - 300) / 2;
let count = this.Year - (this.Year - 8);
for (let i = 0; i <= count; i++) {
this.yearList.push(this.Year - i);
}
},
mounted() {
this.getDataMonth();
this.getDataYear();
},
methods: {
getDataMonth() {
this.dayList = [];
let msg = {
Year: this.Year,
Month: this.Month
} }
},created(){ this.apipost('Domestic_Ticket_post_GetProfitList', msg, r => {
this.clientHeight = (document.documentElement.clientHeight - 300)/2; if (r.data.resultCode == 1) {
let count = this.Year-(this.Year-8); let data = r.data.data;
this.yearList.push(2018); let ProfitList = [];
for(let i = 1;i<=count;i++){ let RealProfitList = [];
this.yearList.push(this.Year-i); let allProfit = 0;
let allRealProfit = 0;
data.forEach(y => {
this.dayList.push(y.Day);
ProfitList.push(y.Profit);
RealProfitList.push(y.RealProfit);
allProfit = allProfit + y.Profit;
allRealProfit = allRealProfit + y.RealProfit;
})
this.allProfit = allProfit;
this.allRealProfit = allRealProfit;
this.chartsMap(ProfitList, RealProfitList);
} else {}
}, null)
},
chartsMap(ProfitList, RealProfitList) { // 画饼
var then = this;
let myChart = this.$echarts.init(document.getElementById('chartsMap'));
myChart.setOption({
title: {
left: 'left',
textStyle: {
fontWeight: 'bold',
fontSize: 14,
color: '#333333',
height: '30px'
},
padding: [
20, // 上
20, // 右
20, // 下
20, // 左
]
},
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
}
}
},
xAxis: {
type: 'category',
axisLine: {
show: false,
lineStyle: {
width: 1
}
},
axisLabel: {},
axisTick: false,
data: then.dayList,
},
grid: {
x: 25,
y: 60,
x2: 5,
y2: 20,
containLabel: true
},
yAxis: {
type: 'category',
data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
axisLine: {
show: false
},
axisTick: false,
splitLine: {
show: false
},
scale: true,
minInterval: 1,
type: 'value',
axisLabel: {
formatter: '{value} CNY'
}
},
series: [{
name: '预期利润',
type: 'line',
smooth: false,
data: ProfitList,
lineStyle: {
width: 2,
color: '#0099F7',
},
itemStyle: {
borderWidth: 2,
color: '#0099F7'
},
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
{
name: '实际利润',
type: 'line',
smooth: false,
data: RealProfitList,
lineStyle: {
width: 2,
color: '#32DBBE',
},
itemStyle: {
borderWidth: 2,
color: '#32DBBE'
},
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
]
}, true)
},
getDataYear() {
this.MonthList = [];
let msg = {
Year: this.YearS,
Month: '',
IsInter:this.IsInters
} }
},mounted(){ this.apipost('Domestic_Ticket_post_GetProfitList', msg, r => {
this.getDataMonth(); if (r.data.resultCode == 1) {
this.getDataYear(); let data = r.data.data;
},methods:{ let ProfitList = [];
getDataMonth(){ let RealProfitList = [];
this.dayList =[]; let allProfit = 0;
let msg = { let allRealProfit = 0;
Year:this.Year, data.forEach(y => {
Month:this.Month this.MonthList.push(y.Month);
} ProfitList.push(y.Profit);
this.apipost('Domestic_Ticket_post_GetProfitList',msg,r=>{ RealProfitList.push(y.RealProfit);
if(r.data.resultCode==1){ allProfit = allProfit + y.Profit;
let data = r.data.data; allRealProfit = allRealProfit + y.RealProfit;
let ProfitList = []; })
let RealProfitList = []; this.allProfitYear = allProfit;
let allProfit = 0; this.allRealProfitYear = allRealProfit;
let allRealProfit = 0; this.chartsMap2(ProfitList, RealProfitList);
data.forEach(y=>{ } else {
this.dayList.push(y.Day);
ProfitList.push(y.Profit); }
RealProfitList.push(y.RealProfit); }, null)
allProfit = allProfit + y.Profit; },
allRealProfit = allRealProfit + y.RealProfit; chartsMap2(ProfitList, RealProfitList) { // 画饼
}) var then = this;
this.allProfit = allProfit; let myChart = this.$echarts.init(document.getElementById('chartsMapYear'));
this.allRealProfit = allRealProfit; myChart.setOption({
this.chartsMap(ProfitList,RealProfitList); title: {
}else{} left: 'left',
},null) textStyle: {
}, fontWeight: 'bold',
chartsMap(ProfitList,RealProfitList){ // 画饼 fontSize: 14,
var then = this; color: '#333333',
let myChart = this.$echarts.init(document.getElementById('chartsMap')); height: '30px'
myChart.setOption({ },
title: { padding: [
left: 'left', 20, // 上
textStyle:{ 20, // 右
fontWeight:'bold', 20, // 下
fontSize:14, 20, // 左
color:'#333333', ]
height:'30px' },
}, backgroundColor: '#fff',
padding: [ tooltip: {
20, // 上 trigger: 'axis',
20, // 右 axisPointer: {
20, // 下 type: 'line',
20, // 左 animation: false,
] label: {
}, backgroundColor: '#ccc',
backgroundColor: '#fff', borderColor: '#aaa',
tooltip: { borderWidth: 1,
trigger: 'axis', shadowBlur: 0,
axisPointer: { shadowOffsetX: 0,
type: 'line', shadowOffsetY: 0,
animation: false, textStyle: {
label: { color: '#222'
backgroundColor: '#ccc', }
borderColor: '#aaa', }
borderWidth: 1, }
shadowBlur: 0, },
shadowOffsetX: 0, xAxis: {
shadowOffsetY: 0, type: 'category',
textStyle: { axisLine: {
color: '#222' show: false,
} lineStyle: {
} width: 1
} }
}, },
xAxis: { axisLabel: {},
type: 'category', axisTick: false,
axisLine: { data: then.MonthList,
show: false, },
lineStyle:{ grid: {
width:1 x: 25,
} y: 60,
}, x2: 5,
axisLabel:{}, y2: 20,
axisTick:false, containLabel: true
data: then.dayList, },
}, yAxis: {
grid: { type: 'category',
x:25, axisLine: {
y:60, show: false
x2:5, },
y2:20, axisTick: false,
containLabel: true splitLine: {
}, show: false
yAxis: { },
type: 'category', scale: true,
data:['10','20','30','40','50','60','70','80','90','100'], minInterval: 1,
axisLine: {show: false}, type: 'value',
axisTick:false, axisLabel: {
splitLine:{ formatter: '{value} CNY',
show:false },
}, },
scale: true, series: [{
minInterval:1, name: '预期利润',
type: 'value', type: 'line',
axisLabel:{formatter:'{value} CNY'} smooth: false,
}, data: ProfitList,
series: [ lineStyle: {
{ width: 2,
name: '预期利润', color: '#0099F7',
type: 'line', },
smooth:false, itemStyle: {
data:ProfitList, borderWidth: 2,
lineStyle:{ color: '#0099F7'
width:2, },
color:'#0099F7', symbol: 'none',
}, areaStyle: {
itemStyle:{ color: {
borderWidth:2, type: 'linear',
color:'#0099F7' x: 0,
}, y: 0,
symbol:'none', x2: 0,
areaStyle:{ y2: 1,
color: { colorStops: [{
type: 'linear', offset: 0,
x: 0, color: 'rgba(230,230,230,0)' // 0% 处的颜色
y: 0, }, {
x2: 0, offset: 1,
y2: 1, color: 'rgba(230,230,230,0)' // 100% 处的颜色
colorStops: [{ }],
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色 globalCoord: false // 缺省为 false
}, { }
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色 }
}], },
globalCoord: false // 缺省为 false {
} name: '实际利润',
} type: 'line',
}, smooth: false,
{ data: RealProfitList,
name: '实际利润', lineStyle: {
type: 'line', width: 2,
smooth:false, color: '#32DBBE',
data: RealProfitList, },
lineStyle:{ itemStyle: {
width:2, borderWidth: 2,
color:'#32DBBE', color: '#32DBBE'
}, },
itemStyle:{ symbol: 'none',
borderWidth:2, areaStyle: {
color:'#32DBBE' color: {
}, type: 'linear',
symbol:'none', x: 0,
areaStyle:{ y: 0,
color: { x2: 0,
type: 'linear', y2: 1,
x: 0, colorStops: [{
y: 0, offset: 0,
x2: 0, color: 'rgba(230,230,230,0)' // 0% 处的颜色
y2: 1, }, {
colorStops: [{ offset: 1,
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色 color: 'rgba(230,230,230,0)' // 100% 处的颜色
}, { }],
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色 globalCoord: false // 缺省为 false
}],
globalCoord: false // 缺省为 false
}
}
}
]
},true)
},
getDataYear(){
this.MonthList=[];
let msg = {
Year:this.YearS,
Month:''
}
this.apipost('Domestic_Ticket_post_GetProfitList',msg,r=>{
if(r.data.resultCode==1){
let data = r.data.data;
let ProfitList = [];
let RealProfitList = [];
let allProfit = 0;
let allRealProfit = 0;
data.forEach(y=>{
this.MonthList.push(y.Month);
ProfitList.push(y.Profit);
RealProfitList.push(y.RealProfit);
allProfit = allProfit + y.Profit;
allRealProfit = allRealProfit + y.RealProfit;
})
this.allProfitYear = allProfit;
this.allRealProfitYear = allRealProfit;
this.chartsMap2(ProfitList,RealProfitList);
}else{
} }
},null) }
}, }
chartsMap2(ProfitList,RealProfitList){ // 画饼 ]
var then = this; }, true)
let myChart = this.$echarts.init(document.getElementById('chartsMapYear')); },
myChart.setOption({
title: {
left: 'left',
textStyle:{
fontWeight:'bold',
fontSize:14,
color:'#333333',
height:'30px'
},
padding: [
20, // 上
20, // 右
20, // 下
20, // 左
]
},
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
}
}
},
xAxis: {
type: 'category',
axisLine: {
show: false,
lineStyle:{
width:1
}
},
axisLabel:{},
axisTick:false,
data: then.MonthList,
},
grid: {
x:25,
y:60,
x2:5,
y2:20,
containLabel: true
},
yAxis: {
type: 'category',
axisLine: {show: false},
axisTick:false,
splitLine:{
show:false
},
scale: true,
minInterval:1,
type: 'value',
axisLabel:{formatter:'{value} CNY',} ,
},
series: [
{
name: '预期利润',
type: 'line',
smooth:false,
data:ProfitList,
lineStyle:{
width:2,
color:'#0099F7',
},
itemStyle:{
borderWidth:2,
color:'#0099F7'
},
symbol:'none',
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
{
name: '实际利润',
type: 'line',
smooth:false,
data: RealProfitList,
lineStyle:{
width:2,
color:'#32DBBE',
},
itemStyle:{
borderWidth:2,
color:'#32DBBE'
},
symbol:'none',
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
]
},true)
},
} }
} }
</script> </script>
\ No newline at end of file
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