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>
@import url('../../assets/css/domestic/OrderDataStati.css');
@import url('../../assets/css/domestic/OrderDataStati.css');
</style>
<template>
<div class="page_OrderDataStati">
<div class="page_OrderDataStati_top">
<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>¥{{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 class="page_OrderDataStati">
<div class="page_OrderDataStati_top">
<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="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="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 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="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>
</template>
<script>
export default {
data(){
return{
Year:new Date().getFullYear(),
Month:new Date().getMonth()+1,
date:new Date().getDate(),
YearS:new Date().getFullYear(),
MonthS:'',
clientHeight:'',
yearList:[],
MonthList:[],
dayList:[],
allRealProfit:0,
allProfit:0,
allRealProfitYear:0,
allProfitYear:0,
export default {
data() {
return {
Year: new Date().getFullYear(),
Month: new Date().getMonth() + 1,
date: new Date().getDate(),
IsInter:-1,//月统计[0-国内，1-国际]
YearS: new Date().getFullYear(),
MonthS: '',
IsInters:-1,//年统计[0-国内，1-国际]
clientHeight: '',
yearList: [],
MonthList: [],
dayList: [],
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.clientHeight = (document.documentElement.clientHeight - 300)/2;
let count = this.Year-(this.Year-8);
this.yearList.push(2018);
for(let i = 1;i<=count;i++){
this.yearList.push(this.Year-i);
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.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.getDataMonth();
this.getDataYear();
},methods:{
getDataMonth(){
this.dayList =[];
let msg = {
Year:this.Year,
Month:this.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.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:''
}
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{
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;
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
}
},null)
},
chartsMap2(ProfitList,RealProfitList){ // 画饼
var then = this;
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)
},
}
}
]
}, 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