|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div v-loading.fullscreen.lock="fullscreenLoading">
|
|
|
<div class="statistically-all">
|
|
|
<div class="yeardate">
|
|
|
<el-date-picker
|
|
|
@@ -47,26 +47,162 @@
|
|
|
<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>2024</div>
|
|
|
- <div>2023</div>
|
|
|
+ <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>
|
|
|
- <div>{{townum(item.currPeriodFee)}}</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">
|
|
|
- {{items.currPeriodFee}}/{{items.samePeriodFee}}({{items.yoy}} %)
|
|
|
+ <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
|
|
|
@@ -90,7 +226,7 @@
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="会务数据统计" name="third">会务数据统计</el-tab-pane>
|
|
|
- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -100,6 +236,7 @@ import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
data () {
|
|
|
return {
|
|
|
+ fullscreenLoading:false,
|
|
|
year:new Date(),
|
|
|
businessincome:[],
|
|
|
Grossprofit:[],
|
|
|
@@ -162,12 +299,21 @@ export default {
|
|
|
value: 7,
|
|
|
label: '团组数据'
|
|
|
}],
|
|
|
- value: 3,
|
|
|
+ value: 1,
|
|
|
tableData:[],
|
|
|
tableDatamonth:[],
|
|
|
+ tableheader:['月份','车费','导游费','司机费','小费','接送机费','餐费','住补费','景点费','翻译费','饮料/零食/水果费','其他费用'],
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ //日期处理（年）
|
|
|
+ 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);
|
|
|
@@ -469,6 +615,18 @@ export default {
|
|
|
echarts.init(document.getElementById('grossmarginss')).dispose();
|
|
|
echarts.init(document.getElementById('Airticketcitybox')).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();
|
|
|
+ }
|
|
|
+ if(document.getElementById('invitationtopten')!=null){
|
|
|
+ echarts.init(document.getElementById('invitationtopten')).dispose();
|
|
|
+ }
|
|
|
if(val==1){
|
|
|
this.StatisticsAirTicket();
|
|
|
}
|
|
|
@@ -484,6 +642,9 @@ export default {
|
|
|
this.StatisticsGroupNum();
|
|
|
this.StatisticsGroupPeopleNum();
|
|
|
}
|
|
|
+ if(val==3){
|
|
|
+ this.StatisticsOP(1);
|
|
|
+ }
|
|
|
},
|
|
|
//获取营业额、成本支出、毛利润数据
|
|
|
StatisticsYOY(){
|
|
|
@@ -777,6 +938,7 @@ export default {
|
|
|
},
|
|
|
//获取国交数据统计数据OP(年)
|
|
|
StatisticsOP(val){
|
|
|
+ this.fullscreenLoading=true;
|
|
|
var url = "/api/Statistics/StatisticsOP"
|
|
|
var that = this
|
|
|
this.$axios({
|
|
|
@@ -791,16 +953,11 @@ export default {
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
if(res.data.code==200){
|
|
|
+ that.tableData=[];
|
|
|
that.tableData=res.data.data;
|
|
|
- console.log(that.tableData);
|
|
|
- // that.scaleDrawing=[];
|
|
|
- // var newArr = res.data.data.map(item => ({
|
|
|
- // name: item.groupTypeName,
|
|
|
- // value: item.groupNum
|
|
|
- // }))
|
|
|
- // that.scaleDrawing=newArr;
|
|
|
- // that.teamblt();
|
|
|
+ that.StatisticsOPmonth(2);
|
|
|
}else{
|
|
|
+ that.fullscreenLoading=false;
|
|
|
that.$message({
|
|
|
message: res.data.msg,
|
|
|
type: 'warning'
|
|
|
@@ -824,11 +981,11 @@ export default {
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
if(res.data.code==200){
|
|
|
+ that.tableDatamonth=[];
|
|
|
that.tableDatamonth=res.data.data;
|
|
|
- console.log(that.tableDatamonth);
|
|
|
-
|
|
|
-
|
|
|
+ that.fullscreenLoading=false;
|
|
|
}else{
|
|
|
+ that.fullscreenLoading=false;
|
|
|
that.$message({
|
|
|
message: res.data.msg,
|
|
|
type: 'warning'
|
|
|
@@ -848,8 +1005,7 @@ export default {
|
|
|
mounted(){
|
|
|
// this.StatisticsYOY();
|
|
|
this.countrieschange(this.value);
|
|
|
- this.StatisticsOP(1);
|
|
|
- this.StatisticsOPmonth(2);
|
|
|
+ // this.StatisticsOP(1);
|
|
|
// this.StatisticsAirTicket();
|
|
|
// this.StatisticsHotel();
|
|
|
// this.StatisticsInvitation();
|
|
|
@@ -873,40 +1029,91 @@ export default {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
.yeartableul{
|
|
|
+ width: 99.9%;
|
|
|
+ margin-bottom: 20px;
|
|
|
display: inline-flex;
|
|
|
border: 1px solid #E4E7ED;
|
|
|
}
|
|
|
|
|
|
.yeartableli{
|
|
|
- width: 125px;
|
|
|
+ width: 8.33%;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.yeartableli div{
|
|
|
color: #555;
|
|
|
- font-size: 14px;
|
|
|
- padding: 5px;
|
|
|
+ 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: #f5f7fa;
|
|
|
- color: #909399;
|
|
|
+ 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: 125px;
|
|
|
+ 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;
|
|
|
}
|
|
|
</style>
|
