<template>
<div v-loading.fullscreen.lock="fullscreenLoading">
<div class="statistically-all">
<div class="yeardate">
<el-date-picker
value-format="yyyy-MM-dd"
@change="yearchange"
style="width:200px;"
v-model="year"
type="year"
placeholder="选择年">
</el-date-picker>
</div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="营业额、成本支出、毛利润" name="first">
<div class="canvas-box">
<div id="statisticallyone" style="width: 100%;height:400px;"></div>
<div id="grossmargins" style="width: 100%;height:400px;"></div>
<div id="grossmargin" style="width: 100%;height:400px;"></div>
</div>
</el-tab-pane>
<el-tab-pane label="团组预算/实际成本" name="fourth">
<div class="Search-yscb">
<div class="Search-yscb-ul">
<label>团组名称:</label>
<el-input
size="small "
placeholder="请输入内容"
v-model="input"
clearable>
</el-input>
<el-button @click="StatisticsGroupCost" size="small " type="primary">查询</el-button>
</div>
</div>
<div class="fourth-table">
<el-table
:data="fourthData"
border
style="width: 100%">
<el-table-column
prop="rowNumber"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="groupName"
label="团组名">
</el-table-column>
<el-table-column
prop="clientUnit"
label="客户单位">
</el-table-column>
<el-table-column
prop="visitDate"
label="出访日期"
width="110">
<template slot-scope="scope">
{{ cltade(scope.row.visitDate) }}
</template>
</el-table-column>
<el-table-column
prop="visitDays"
label="天数"
width="50">
</el-table-column>
<el-table-column
prop="visitPNumber"
label="人数"
width="50">
</el-table-column>
<el-table-column
prop="budgetAmount"
label="团组预算"
width="120">
<template slot-scope="scope">
{{ townum(scope.row.budgetAmount) }}
</template>
</el-table-column>
<el-table-column
prop="realityAmount"
label="团组实际成本"
width="120">
<template slot-scope="scope">
{{ townum(scope.row.realityAmount) }}
</template>
</el-table-column>
<el-table-column
prop="excessAmount"
label="实际比预算超出金额"
width="160">
<template slot-scope="scope">
{{ townum(scope.row.excessAmount) }}
</template>
</el-table-column>
<el-table-column
prop="excessPercentage"
label="实际比预算超出百分比"
width="180">
</el-table-column>
<el-table-column
label="详细"
width="100">
<template slot-scope="scope">
<el-popover
placement="left"
width="1000"
trigger="hover">
<el-table
height="600"
:data="scope.row.details"
border
style="width: 100%;font-size:12px">
<el-table-column
prop="module"
label="模块"
width="100">
</el-table-column>
<el-table-column
prop="budgetAmountDesc"
label="该模块预算"
width="350">
</el-table-column>
<el-table-column
prop="realityAmountDesc"
label="实际费用的金额 ">
</el-table-column>
</el-table>
<span style="cursor: pointer;color: #48a2ff;" slot="reference" type="text">移上查看</span>
</el-popover>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="fourthcurrentPage"
:page-sizes="[5, 10, 20, 30]"
:page-size="fourthPagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="fourthtotal">
</el-pagination>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="国交数据统计" name="second">
<el-select style="width:200px; margin-bottom: 10px;" @change="countrieschange" v-model="value" filterable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="canvas-box">
<div v-if="value==7" style="width: 100%;">
<div id="teamCooperationbox" style="width: 100%;height:400px;"></div>
<div style="display: flex;justify-content: space-between;">
<div id="groupnumbox" style="width: 50%;height:400px;"></div>
<div id="customersNumberbox" style="width: 50%;height:400px;"></div>
</div>
<div id="scaleDrawingbox" style="width: 50%;height:400px;"></div>
</div>
<div v-else-if="value==1" style="width: 100%;">
<div id="grossmarginss" style="width: 100%;height:400px;"></div>
<div id="Airticketcitybox" style="width: 100%;height:400px;"></div>
<div id="AirPredeterminedPlatform" style="width: 100%;height:700px;"></div>
</div>
<div v-else-if="value==2" style="width: 100%;">
<div id="hoteltopten" style="width: 100%;height:400px;"></div>
<div id="hotelPredeterminedPlatform" style="width: 100%;height:400px;"></div>
</div>
<div v-else-if="value==5" style="width: 100%;">
<div id="invitationtopten" style="width: 100%;height:400px;"></div>
</div>
<div v-else-if="value==3" style="width: 100%;text-align: center;">
<div class="tabletitle">年记录</div>
<div class="yeartableul">
<div class="yeartableli">
<div>年份</div>
<div>{{TimeProcessingriY(year)}}</div>
<div>{{(TimeProcessingriY(year))-1}}</div>
</div>
<div class="yeartableli" v-for="(item,index) in tableData" :key="index">
<div>{{item.feeName}}</div>
<el-popover
placement="top"
width="600"
trigger="hover">
<!-- <div>
<div>{{TimeProcessingriY(year)}}年/{{TimeProcessingriY(year)-1}}年{{item.monthName}}{{items.feeName}}增长率：{{items.currPeriodFee}}/{{items.samePeriodFee}}({{items.yoy}} %)</div>
</div> -->
<div class="device_err">
<el-table size="small" :header-cell-style="{color: '#555',fontSize: '14px', backgroundColor: '#f0f9ff'}" border :data="item.subFeeData">
<el-table-column type="expand">
<div class="device_err" slot-scope="props">
<el-table
size="small"
height="205"
:header-cell-style="{color: '#555',fontSize: '14px', backgroundColor: '#f0f9ff'}"
border
:data="props.row.cityData"
style="width: 100%">
<el-table-column
prop="cityName"
label="城市"
width="100">
</el-table-column>
<el-table-column
label="本年费用"
width="150">
<template slot-scope="props">
{{townum(props.row.currPeriodFee)}}
</template>
</el-table-column>
<el-table-column
width="150"
label="前一年费用">
<template slot-scope="props">
{{townum(props.row.samePeriodFee)}}
</template>
</el-table-column>
<el-table-column property="yoy" label="增长率">
<template slot-scope="props">
{{props.row.yoy}} %
</template>
</el-table-column>
</el-table>
</div>
</el-table-column>
<el-table-column width="150" property="feeName" label="类型"></el-table-column>
<el-table-column width="150" property="currPeriodFee" label="本年费用">
<template slot-scope="props">
{{townum(props.row.currPeriodFee)}}
</template>
</el-table-column>
<el-table-column width="150" property="samePeriodFee" label="前一年费用">
<template slot-scope="props">
{{townum(props.row.samePeriodFee)}}
</template>
</el-table-column>
<el-table-column width="99" property="yoy" label="增长率">
<template slot-scope="props">
{{props.row.yoy}} %
</template>
</el-table-column>
</el-table>
</div>
<div class="hourbox" style="cursor: pointer;" slot="reference">{{townum(item.currPeriodFee)}}</div>
</el-popover>
<!-- <div></div> -->
<div>{{townum(item.samePeriodFee)}}</div>
</div>
</div>
<div class="tabletitle">月记录</div>
<div class="monthtableul">
<div class="monthtableli">
<div class="monthtablebox" v-for="(item,index) in tableheader" :key="index">{{item}}</div>
</div>
<div class="monthtableli" v-for="(item,index) in tableDatamonth" :key="index">
<!-- <div class="monthtablebox" v-for="(item,index) in tableheader" :key="index">{{item}}</div> -->
<div class="monthtablebox">{{item.monthName}}</div>
<div class="monthtablebox" v-for="(items,index) in item.feeDatas" :key="index">
<el-popover
placement="top"
width="600"
trigger="hover">
<div>
<div>{{TimeProcessingriY(year)}}年/{{TimeProcessingriY(year)-1}}年{{item.monthName}}{{items.feeName}}增长率：{{items.currPeriodFee}}/{{items.samePeriodFee}}({{items.yoy}} %)</div>
</div>
<div class="device_err">
<el-table size="small" :header-cell-style="{color: '#555',fontSize: '14px', backgroundColor: '#f0f9ff'}" border :data="items.subFeeData">
<el-table-column type="expand">
<div class="device_err" slot-scope="props">
<el-table
size="small"
height="205"
:header-cell-style="{color: '#555',fontSize: '14px', backgroundColor: '#f0f9ff'}"
border
:data="props.row.cityData"
style="width: 100%">
<el-table-column
prop="cityName"
label="城市"
width="100">
</el-table-column>
<el-table-column
label="本年费用"
width="150">
<template slot-scope="props">
{{townum(props.row.currPeriodFee)}}
</template>
</el-table-column>
<el-table-column
width="150"
label="前一年费用">
<template slot-scope="props">
{{townum(props.row.samePeriodFee)}}
</template>
</el-table-column>
<el-table-column property="yoy" label="增长率">
<template slot-scope="props">
{{props.row.yoy}} %
</template>
</el-table-column>
</el-table>
</div>
</el-table-column>
<el-table-column width="150" property="feeName" label="类型"></el-table-column>
<el-table-column width="150" property="currPeriodFee" label="本年费用">
<template slot-scope="props">
{{townum(props.row.currPeriodFee)}}
</template>
</el-table-column>
<el-table-column width="150" property="samePeriodFee" label="前一年费用">
<template slot-scope="props">
{{townum(props.row.samePeriodFee)}}
</template>
</el-table-column>
<el-table-column width="99" property="yoy" label="增长率">
<template slot-scope="props">
{{props.row.yoy}} %
</template>
</el-table-column>
</el-table>
</div>
<span style="cursor: pointer;" slot="reference">{{items.currPeriodFee}}/{{items.samePeriodFee}}({{items.yoy}} %)</span>
</el-popover>
</div>
</div>
</div>
<!-- <el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table> -->
</div>
</div>
</el-tab-pane>
<el-tab-pane label="地图" name="fifth">
<div id="map" style="width:100%; height: 800px;"></div>
</el-tab-pane>
<!-- <el-tab-pane label="会务数据统计" name="third">会务数据统计</el-tab-pane> -->
</el-tabs>
</div>
</div>
</template>
<script>
import { getToken } from 'mapkit-token';
import * as echarts from 'echarts';
export default {
data () {
return {
fullscreenLoading:false,
year:new Date(),
businessincome:[],
Grossprofit:[],
costing:[],
Airticketnum:[],
Airticketcity:[],
AirticketPredetermined:[],
Hoteltop:[],
hotelPredetermined:[],
invitationtop:[],
teamCooperation:[],
groupnum:[],
customersNumber:[],
scaleDrawing:[],
aaa:[
['product', '去年销售额', '今年销售额'],
['1月', 43.3, 85.8],
['2月', 83.1, 73.4],
['3月', 86.4, 65.2],
['4月', 72.4, 53.9],
['5月', 72.4, 53.9],
['6月', 72.4, 53.9],
['7月', 72.4, 53.9],
['8月', 72.4, 53.9],
['9月', 72.4, 53.9],
['10月', 72.4, 53.9],
['11月', 72.4, 53.9],
['12月', 72.4, 53.9],
],
bbb:[
['product', '毛利率',],
['1月', 43.3,],
['2月', 83.1,],
['3月', 86.4,],
['4月', 72.4,],
['5月', 72.4,],
['6月', 72.4,],
['7月', 72.4,],
['8月', 72.4,],
['9月', 72.4,],
['10月', 72.4,],
['11月', 72.4,],
['12月', 72.4,],
],
activeName: 'first',
options: [{
value: 1,
label: '机票'
}, {
value: 2,
label: '酒店'
}, {
value: 3,
label: 'OP'
}, {
value: 4,
label: '签证'
}, {
value: 5,
label: '商邀'
}, {
value: 7,
label: '团组数据'
}],
value: 1,
tableData:[],
tableDatamonth:[],
tableheader:['月份','车费','导游费','司机费','小费','接送机费','餐费','住补费','景点费','翻译费','饮料/零食/水果费','其他费用'],
fourthData:[],
fourthcurrentPage:1,
fourthPagesize:10,
fourthtotal:0,
input:'',
map:null
}
},
methods: {
handleSizeChange(val) {
this.fourthcurrentPage = 1;
this.fourthPagesize = val;
this.StatisticsGroupCost();
},
handleCurrentChange(val) {
this.fourthcurrentPage = val;
this.StatisticsGroupCost();
},
//保留两位小数
townum(val){
val=Number(val);
return val.toFixed(2);
},
//保留两位小数
cltade(val){
return val.split(" ")[0];
},
//日期处理（年）
TimeProcessingriY(val){
let datetime=new Date(val)
let newsyear=datetime.getFullYear();
// let newsMonth=datetime.getMonth() + 1<10?'0'+(datetime.getMonth() + 1):datetime.getMonth() + 1;
// let newsday=datetime.getDate()<10?'0'+datetime.getDate():datetime.getDate();
return newsyear;
},
//保留两位小数
townum(val){
val=Number(val);
return val.toFixed(2);
},
handleClick(tab, event) {
if(this.activeName=='first'){
this.StatisticsYOY()
}
if(this.activeName=='second'){
this.StatisticsAirTicket()
}
if (this.activeName=='fourth') {
this.input='';
this.StatisticsGroupCost()
}
// console.log(tab, event);
},
//处理时间
getdate(val){
var date=new Date(val);
var y=date.getFullYear();
return y
},
//团组机票
groupstatisone(){
var grossmarginss = echarts.init(document.getElementById('grossmarginss'));
grossmarginss.setOption({
title:{
text: '预订机票数量',
},
legend: {},
tooltip: {
formatter:function(params){
var html="该月总次数："+params.data[1]+"次<br/>";
for(let i=0;i<params.data[2].length;i++){
html += '团组：'+params.data[2][i].groupName+' '+'预订机票次数：' +params.data[2][i].quantity+"<br/>";
}
return html
}
},
dataset: {
source: this.Airticketnum
},
xAxis: { type: 'category' },
yAxis: {
name: '机票数量',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
var Airticketcitybox = echarts.init(document.getElementById('Airticketcitybox'));
Airticketcitybox.setOption({
title:{
text: '机票到达地数量',
},
legend: {},
tooltip: {
formatter:function(params){
var html="该月总次数："+params.data[1]+"次<br/>";
for(let i=0;i<params.data[2].length;i++){
html += '城市：'+params.data[2][i].city+' '+'到此城市次数：' +params.data[2][i].quantity+"<br/>";
}
return html
}
},
dataset: {
source: this.Airticketcity
},
xAxis: { type: 'category' },
yAxis: {
name: '到达次数',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
//预定平台
var AirPredeterminedPlatform = echarts.init(document.getElementById('AirPredeterminedPlatform'));
AirPredeterminedPlatform.setOption({
title:{
text: '机票预订平台排行',
},
legend: {},
tooltip: {
formatter:function(params){
var html=params.data[0]+"预订总次数："+params.data[1]+"次<br/>"
for(let i=0;i<params.data[2].length;i++){
html += '团组名称：'+params.data[2][i].groupName+' 次数:'+params.data[2][i].total+",<br/>";
}
return html
}
},
dataset: {
source: this.AirticketPredetermined
},
xAxis: {
type: 'category',
axisLabel: {
formatter:function(value){
value = value.replace(/\s/g,"");
return value.split("").join("\n");
} ,
},
},
grid:{
left: '1%',
right: '1%',
bottom: '7%',
top: '10%',
containLabel: true
},
yAxis: {
name: '该平台预订次数',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
},
//在线引入
getonline(){
const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js';
document.body.appendChild(oScript);
this.onlinemap();
},
//在线地图
onlinemap(){
// var token="eyJraWQiOiI1NEIyRkFLODMzIiwidHlwIjoiSldUIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJIS0YzNzJKU01LIiwiaWF0IjoxNzMzMTkxMzI2LCJvcmlnaW4iOiJvYS5wYW4tYW1lcmljYW4taW50bC5jb20ifQ.1czYQb-Nxh6n4kG9sVylQH32XawN92gBKXjn6i_SU0F2M9fpwbStM-gDRvfANEiEUDz5ogUmm_FQf9eBF8o9Zg";
// mapkit.init({
// authorization: token, // 使用获取到的token
// language: 'zh'
// });
// this.map = new mapkit.Map(document.getElementById('map'), {
// center: new mapkit.Coordinate(37.7749, -122.4194),
// zoom: 11
// });
// const token = mapkitToken.getToken(CLIENT_ID, TEAM_ID, KEY_ID, PRIVATE_KEY);
// const { getToken } = require('mapkit-token');
const token = "eyJraWQiOiI1NEIyRkFLODMzIiwidHlwIjoiSldUIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJIS0YzNzJKU01LIiwiaWF0IjoxNzMzMTkxMzI2LCJvcmlnaW4iOiJvYS5wYW4tYW1lcmljYW4taW50bC5jb20ifQ.1czYQb-Nxh6n4kG9sVylQH32XawN92gBKXjn6i_SU0F2M9fpwbStM-gDRvfANEiEUDz5ogUmm_FQf9eBF8o9Zg";
mapkit.init({
language: 'zh-CN',
authorizationCallback: function(done) {
done(token);
}
});
var map = new mapkit.Map("map");
},
//团组酒店
grouphotel(){
var hoteltopten = echarts.init(document.getElementById('hoteltopten'));
hoteltopten.setOption({
title:{
text: '预订酒店前十排行',
},
legend: {},
tooltip: {
formatter:function(params){
var html="该城市酒店预订总次数："+params.data[1]+"次<br/>"
for(let i=0;i<params.data[2].length;i++){
html += '酒店名称：'+params.data[2][i].hotelName+', '+'单人间：' +params.data[2][i].singleRoomCount+', '+'双人间：' +params.data[2][i].doubleRoomCount+', '+'套房：' +params.data[2][i].suiteRoomCount+', '+'其他房型：' +params.data[2][i].otherRoomCount+', '+'总房数：' +params.data[2][i].roomTotal+",<br/>";
}
return html
}
},
dataset: {
source: this.Hoteltop
},
xAxis: {
type: 'category' ,
axisLabel:{
rotate:30
},
},
yAxis: {
name: '预订次数',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
//预定平台
var hotelPredeterminedPlatform = echarts.init(document.getElementById('hotelPredeterminedPlatform'));
hotelPredeterminedPlatform.setOption({
title:{
text: '预订酒店平台排行',
},
legend: {},
tooltip: {
formatter:function(params){
var html="该平台预订总次数："+params.data[1]+"次<br/>"
for(let i=0;i<params.data[2].length;i++){
html += '酒店名称：'+params.data[2][i].hotelName+', '+'单人间：' +params.data[2][i].singleRoomCount+', '+'双人间：' +params.data[2][i].doubleRoomCount+', '+'套房：' +params.data[2][i].suiteRoomCount+', '+'其他房型：' +params.data[2][i].otherRoomCount+', '+'总房数：' +params.data[2][i].roomTotal+",<br/>";
}
return html
}
},
dataset: {
source: this.hotelPredetermined
},
xAxis: { type: 'category' },
yAxis: {
name: '该平台预订次数',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
},
//团组商邀
groupinvitation(){
var invitationtopten = echarts.init(document.getElementById('invitationtopten'));
invitationtopten.setOption({
title:{
text: '邀请国家数量排行',
},
legend: {},
tooltip: {
formatter:function(params){
var html=params.data[0]+"："+params.data[1]+"次<br/>";
return html
}
},
dataset: {
source: this.invitationtop
},
xAxis: { type: 'category' },
yAxis: {
name: '数量',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
},
//团组客户合作
teamhz(){
var teamCooperationbox = echarts.init(document.getElementById('teamCooperationbox'));
teamCooperationbox.setOption({
title:{
text: '团组合作客户排行',
},
legend: {},
tooltip: {
formatter:function(params){
var html="客户单位："+params.data[0]+"<br/>"+"客户负责人："+params.data[2]+"<br/>"+"合作次数："+params.data[1];
return html
}
},
dataset: {
source: this.teamCooperation
},
xAxis: { type: 'category' },
yAxis: {
name: '次数',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
},
//获取团组预算/实际成本
StatisticsGroupCost(){
var url = "/api/Statistics/StatisticsGroupCost"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
portType:1,
pageIndex:that.fourthcurrentPage,
pageSize:that.fourthPagesize,
year:that.getdate(that.year),
search:that.input,
}
}).then(function (res) {
if(res.data.code==200){
that.fourthtotal=res.data.count;
that.fourthData=res.data.data;
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//团组数量
teamsl(){
var groupnumbox = echarts.init(document.getElementById('groupnumbox'));
groupnumbox.setOption({
title:{
text: '团组数量统计',
},
legend: {},
tooltip: {},
dataset: {
source: this.groupnum
},
xAxis: { type: 'category' },
yAxis: {
name: '数量',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
},
//团组出访人数
teamrs(){
var customersNumberbox = echarts.init(document.getElementById('customersNumberbox'));
customersNumberbox.setOption({
title:{
text: '团组出访人数统计',
},
legend: {},
tooltip: {},
dataset: {
source: this.customersNumber
},
xAxis: { type: 'category' },
yAxis: {
name: '人数',
},
color:['#2e83d4'],
series: [{ type: 'bar' }]
},true);
},
//比例图
teamblt(){
var scaleDrawingbox = echarts.init(document.getElementById('scaleDrawingbox'));
scaleDrawingbox.setOption({
title: {
text: '客户类型分布表',
left: 'center'
},
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
radius: '50%',
data: this.scaleDrawing,
emphasis: {
itemStyle: {
shadowBlur: this.scaleDrawing.length,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},true);
},
statisone(){
var myChart = echarts.init(document.getElementById('statisticallyone'));
myChart.setOption({
title:{
text: '业务总营业额',
},
legend: {},
tooltip: {},
dataset: {
source: this.businessincome
},
xAxis: { type: 'category' },
yAxis: {
name: '营业额',
},
series: [{ type: 'bar' }, { type: 'bar' },]
},true);
var grossmargins = echarts.init(document.getElementById('grossmargins'));
grossmargins.setOption({
title:{
text: '成本',
},
legend: {},
tooltip: {},
dataset: {
source: this.costing
},
xAxis: { type: 'category' },
yAxis: {
name: '成本额',
},
series: [{ type: 'bar' }, { type: 'bar' },]
},true);
var grossmargin = echarts.init(document.getElementById('grossmargin'));
grossmargin.setOption({
title:{
text: '毛利润',
},
legend: {},
tooltip: {
// formatter:function(params){
// console.log(params);
// var html = params.data[0]+'毛利率'+"<br/>"+ params.data[1]+"%";
// return html
// }
},
dataset: {
source: this.Grossprofit
},
xAxis: { type: 'category' },
yAxis: {
name: '毛利额',
},
color:['#EEAD0E','#a0a7e6'],
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [{ type: 'bar' },{ type: 'bar' }]
},true);
},
//年change
yearchange(){
if(this.activeName=='first'){
this.StatisticsYOY();
}
if(this.activeName=='second'){
this.countrieschange(this.value);
}
if (this.activeName=='fourth') {
this.input='';
this.StatisticsGroupCost()
}
// this.businessincome=[];
// this.Grossprofit=[];
// this.costing=[];
},
//国交部分类型切换
countrieschange(val){
if(document.getElementById('grossmarginss')!=null){
echarts.init(document.getElementById('grossmarginss')).dispose();
echarts.init(document.getElementById('Airticketcitybox')).dispose();
echarts.init(document.getElementById('AirPredeterminedPlatform')).dispose();
}
if(document.getElementById('teamCooperationbox')!=null){
echarts.init(document.getElementById('teamCooperationbox')).dispose();
echarts.init(document.getElementById('groupnumbox')).dispose();
echarts.init(document.getElementById('customersNumberbox')).dispose();
echarts.init(document.getElementById('scaleDrawingbox')).dispose();
}
if(document.getElementById('hoteltopten')!=null){
echarts.init(document.getElementById('hoteltopten')).dispose();
echarts.init(document.getElementById('hotelPredeterminedPlatform')).dispose();
}
if(document.getElementById('invitationtopten')!=null){
echarts.init(document.getElementById('invitationtopten')).dispose();
}
if(val==1){
this.StatisticsAirTicket();
}
if(val==2){
this.StatisticsHotel();
}
if(val==5){
this.StatisticsInvitation();
}
if (val==7) {
this.StatisticsCooperativeCustomer();
this.StatisticsCooperativeCustomerType();
this.StatisticsGroupNum();
this.StatisticsGroupPeopleNum();
}
if(val==3){
this.StatisticsOP(1);
}
},
//获取营业额、成本支出、毛利润数据
StatisticsYOY(){
var url = "/api/Statistics/StatisticsYOY"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.businessincome=[];
that.Grossprofit=[];
that.costing=[];
//营业额
that.businessincome.push(['product', '前一年该月营业额', '本年该月营业额']);
for(let i=0;i<res.data.data.salesYOYData.length;i++){
that.businessincome.push([res.data.data.salesYOYData[i].month+'月',res.data.data.salesYOYData[i].lastAmount,res.data.data.salesYOYData[i].thisAmount]);
}
//毛利润
that.Grossprofit.push(['product', '前一年该月毛利润', '本年该月毛利润']);
for(let j=0;j<res.data.data.grossProfitYOYData.length;j++){
that.Grossprofit.push([res.data.data.grossProfitYOYData[j].month+'月',res.data.data.grossProfitYOYData[j].lastAmount,res.data.data.grossProfitYOYData[j].thisAmount]);
}
//成本
that.costing.push(['product', '前一年该月成本', '本年该月成本']);
for(let g=0;g<res.data.data.costYOYData.length;g++){
that.costing.push([res.data.data.costYOYData[g].month+'月',res.data.data.costYOYData[g].lastAmount,res.data.data.costYOYData[g].thisAmount]);
}
that.statisone()
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据机票
StatisticsAirTicket(){
var url = "/api/Statistics/StatisticsAirTicket"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.Airticketnum=[];
that.Airticketcity=[];
that.Airticketpred=[];
var datainfo=res.data.data;
//机票数
that.Airticketnum.push(['product','本年机票数量']);
for(let i=0;i<datainfo.airTicketNumData.length;i++){
that.Airticketnum.push([datainfo.airTicketNumData[i].month+'月',datainfo.airTicketNumData[i].quantity,datainfo.airTicketNumData[i].aitTicketInfos]);
}
//机票到达地
that.Airticketcity.push(['product','本年机票到达地']);
for(let i=0;i<datainfo.airTicketAreaData.length;i++){
that.Airticketcity.push([datainfo.airTicketAreaData[i].month+'月',datainfo.airTicketAreaData[i].quantity,datainfo.airTicketAreaData[i].cityData]);
}
//机票预订平台
that.AirticketPredetermined.push(['product','机票预订平台排行榜']);
for(let i=0;i<datainfo.airTicketPlatformData.length;i++){
that.AirticketPredetermined.push([datainfo.airTicketPlatformData[i].platform,datainfo.airTicketPlatformData[i].total,datainfo.airTicketPlatformData[i].children]);
}
that.groupstatisone()
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据酒店
StatisticsHotel(){
var url = "/api/Statistics/StatisticsHotel"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.Hoteltop=[];
that.hotelPredetermined=[];
var datainfo=res.data.data.hotelCityData;
var hotelpred=res.data.data.hotelPlatformData
//酒店预订数
that.Hoteltop.push(['product','城市酒店预订排行榜']);
for(let i=0;i<datainfo.length;i++){
that.Hoteltop.push([datainfo[i].city,datainfo[i].bookingRoomNum,datainfo[i].hotelData]);
}
//酒店预订平台
that.hotelPredetermined.push(['product','酒店预订平台排行榜']);
for(let k=0;k<hotelpred.length;k++){
that.hotelPredetermined.push([hotelpred[k].platform,hotelpred[k].bookingRoomNum,hotelpred[k].hotelData]);
}
that.grouphotel()
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据商邀
StatisticsInvitation(){
var url = "/api/Statistics/StatisticsInvitation"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.invitationtop=[];
let datainfo=res.data.data;
that.invitationtop.push(['product','商邀邀请国家数量']);
for(let i=0;i<datainfo.length;i++){
that.invitationtop.push([datainfo[i].country,datainfo[i].timeNum]);
}
that.groupinvitation()
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据团组合作
StatisticsCooperativeCustomer(){
var url = "/api/Statistics/StatisticsCooperativeCustomer"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.teamCooperation=[];
let datainfo=res.data.data;
that.teamCooperation.push(['product','团组合作前十的客户']);
for(let i=0;i<datainfo.length;i++){
that.teamCooperation.push([datainfo[i].clientUnit,datainfo[i].visitsNum,datainfo[i].clienName]);
}
that.teamhz()
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据团组数量
StatisticsGroupNum(){
var url = "/api/Statistics/StatisticsGroupNum"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.groupnum=[];
let datainfo=res.data.data;
that.groupnum.push(['product',datainfo.yearData.yearName+'团组数量']);
for(let i=0;i<datainfo.quarterData.length;i++){
that.groupnum.push([datainfo.quarterData[i].quarterName,datainfo.quarterData[i].num]);
}
that.teamsl();
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取会务数据统计
StatisticsConferenceCity(){
var url = "/api/Statistics/StatisticsConferenceCity"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
// that.customersNumber=[];
// let datainfo=res.data.data;
// that.customersNumber.push(['product',datainfo.yearData.yearName+'出访人数']);
// for(let i=0;i<datainfo.quarterData.length;i++){
// that.customersNumber.push([datainfo.quarterData[i].quarterName,datainfo.quarterData[i].num]);
// }
// that.teamrs();
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据出访人数
StatisticsGroupPeopleNum(){
var url = "/api/Statistics/StatisticsGroupPeopleNum"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.customersNumber=[];
let datainfo=res.data.data;
that.customersNumber.push(['product',datainfo.yearData.yearName+'出访人数']);
for(let i=0;i<datainfo.quarterData.length;i++){
that.customersNumber.push([datainfo.quarterData[i].quarterName,datainfo.quarterData[i].num]);
}
that.teamrs();
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据类型比例图
StatisticsCooperativeCustomerType(){
var url = "/api/Statistics/StatisticsCooperativeCustomerType"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
}
}).then(function (res) {
if(res.data.code==200){
that.scaleDrawing=[];
var newArr = res.data.data.map(item => ({
name: item.groupTypeName,
value: item.groupNum
}))
that.scaleDrawing=newArr;
that.teamblt();
}else{
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据OP(年)
StatisticsOP(val){
this.fullscreenLoading=true;
var url = "/api/Statistics/StatisticsOP"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
type:val
}
}).then(function (res) {
if(res.data.code==200){
that.tableData=[];
that.tableData=res.data.data;
that.StatisticsOPmonth(2);
}else{
that.fullscreenLoading=false;
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
//获取国交数据统计数据OP(月)
StatisticsOPmonth(val){
var url = "/api/Statistics/StatisticsOP"
var that = this
this.$axios({
method: 'post',
url: url,
headers: {
Authorization: 'Bearer '
},
data:{
year:that.getdate(that.year),
type:val
}
}).then(function (res) {
if(res.data.code==200){
that.tableDatamonth=[];
that.tableDatamonth=res.data.data;
that.fullscreenLoading=false;
}else{
that.fullscreenLoading=false;
that.$message({
message: res.data.msg,
type: 'warning'
});
}
})
},
},
watch:{
invitationtop:{
handler(val,oldval){
// this.groupinvitation()
},
deep:true
},
},
mounted(){
this.getonline();
this.StatisticsYOY();
// this.countrieschange(this.value);
// this.StatisticsOP(1);
// this.StatisticsAirTicket();
// this.StatisticsHotel();
// this.StatisticsInvitation();
}
}
</script>
<style>
.statistically-all{
background-color: #fff;
padding: 10px;
box-shadow: 0 0 5px #0005;
border-radius: 10px;
height: 100%;
min-height: 830px;
}
.canvas-box{
display: flex;
flex-wrap: wrap;
}
.yeardate{
margin-bottom: 10px;
}
.yeartableul{
width: 99.9%;
margin-bottom: 20px;
display: inline-flex;
border: 1px solid #E4E7ED;
}
.yeartableli{
width: 8.33%;
text-align: center;
}
.yeartableli div{
color: #555;
font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 8px;
}
.yeartableli div{
border-top: 1px solid #E4E7ED;
border-left: 1px solid #E4E7ED;
background-color: #fbfcff;
}
.canvas-box .yeartableli .hourbox{
border-top: 1px solid #E4E7ED;
border-left: 1px solid #E4E7ED;
background-color: #fbfcff;
font-weight:400 ;
}
.yeartableli div:nth-child(1){
border-top:none;
background-color: #f0f9ff;
color: #555;
font-weight: 600;
}
.yeartableli:nth-child(1) div{
border-left: none;
}
.monthtableul{
margin-bottom: 500px;
}
.monthtableli{
background-color: #fbfcff;
}
.canvas-box .monthtableli:nth-child(1){
background-color: #f0f9ff;
color: #555;
font-weight: 600;
}
.monthtableli{
font-size: 12px;
display: flex;
}
.monthtableli:nth-last-child(1){
border-bottom: 1px solid #E4E7ED;
}
.monthtablebox{
width: 8.3%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 8px;
border-top: 1px solid #E4E7ED;
border-left: 1px solid #E4E7ED;
}
.monthtablebox:nth-last-child(1){
border-right: 1px solid #E4E7ED;
}
.tabletitle{
font-size: 17px;
font-weight: 600;
color: #555;
margin-bottom:15px ;
}
/*设置table表格中每行的背景色 及 显示的字体颜色*/
.device_err .el-table tr {
background-color: #fbfcff !important;
font-weight: bold;
}
.el-table td.el-table__cell div{
text-align: center !important;
}
.el-table th.el-table__cell>.cell{
text-align: center !important;
}
.statistically-all .block{
margin-top: 10px;
text-align: center;
}
.Search-yscb-ul{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.Search-yscb-ul label{
width: 70px;
}
.Search-yscb-ul .el-input{
width: 200px;
margin-right: 10px;
}
</style>