oa-system/src/components/statistics/Statistically.vue

<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: 700px;"></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()
            }
            if (this.activeName=='fifth') {
                this.getonline();
            }
            // 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+'&nbsp;&nbsp;&nbsp;'+'预订机票次数：' +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+'&nbsp;&nbsp;&nbsp;'+'到此城市次数：' +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+'&nbsp;&nbsp;&nbsp;次数:'+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-Hans',
                authorizationCallback: function(done) {
                    done(token);
                }
            });
            // var map = new mapkit.Map('map', { center: new mapkit.Coordinate(104.096488, 30.635261) });
            // const coordinate = new mapkit.Coordinate(104.096488, 30.635261)
            // const map = new mapkit.Map("map", {
            //     center: coordinate, 
            //     countryCode: "CN",
            //     isZoomEnabled:true,
            // })
            let map = new mapkit.Map("map", {
                center: new mapkit.Coordinate(104.096488, 30.635261),
                showsMapTypeControl: true,
                showsZoomControl: true,
                showsUserLocation: true,
                zoomEnabled: true,
                region: new mapkit.CoordinateRegion(
                    new mapkit.Coordinate(104.096488, 30.635261),
                    new mapkit.CoordinateSpan(0.01, 0.01)
                )
            });
            let overlay = new mapkit.MapOverlay(map.region, {
                urlTemplate: "https://example.com/overlay/{x}/{y}/{z}.png"
            });
            map.addOverlay(overlay);
            
        },
        //团组酒店
        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+',&nbsp;&nbsp;&nbsp;'+'单人间：' +params.data[2][i].singleRoomCount+',&nbsp;&nbsp;&nbsp;'+'双人间：' +params.data[2][i].doubleRoomCount+',&nbsp;&nbsp;&nbsp;'+'套房：' +params.data[2][i].suiteRoomCount+',&nbsp;&nbsp;&nbsp;'+'其他房型：' +params.data[2][i].otherRoomCount+',&nbsp;&nbsp;&nbsp;'+'总房数：' +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+',&nbsp;&nbsp;&nbsp;'+'单人间：' +params.data[2][i].singleRoomCount+',&nbsp;&nbsp;&nbsp;'+'双人间：' +params.data[2][i].doubleRoomCount+',&nbsp;&nbsp;&nbsp;'+'套房：' +params.data[2][i].suiteRoomCount+',&nbsp;&nbsp;&nbsp;'+'其他房型：' +params.data[2][i].otherRoomCount+',&nbsp;&nbsp;&nbsp;'+'总房数：' +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',
                    axisLabel:{
                        rotate:30
                    }, 
                },
                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',
                    axisLabel:{
                        rotate:25
                    },
                 },
                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()
            }
            if (this.activeName=='fifth') {
                this.getonline();
            }
            // 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.groupByCountry;
                    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.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>