<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 id="hotelcountry" 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 id="unitcooperation" 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">
                    <!-- <el-date-picker
                    v-model="mapdate"
                    style="width: 200px;margin-bottom:10px;"
                    type="date"
                    size="small"
                    placeholder="选择日期">
                    </el-date-picker> -->
                    <div style="font-size: 12px;color: red;font-weight: 600;">PS:地图是国外接口查看需要打开VPN,香港端口最佳！</div>
                    <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 {
    name: 'PlaceDetail',
    data () {
        return {
            fullscreenLoading:false,
            year:new Date(),
            businessincome:[],
            Grossprofit:[],
            costing:[],
            Airticketnum:[],
            Airticketcity:[],
            AirticketPredetermined:[],
            Hoteltop:[],
            hotelPredetermined:[],
            hotelcountry:[],
            invitationtop:[],
            unitcooperationtop:[],
            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,
            //
            mapdate:'',
            mapinput:'',
            mapdata:[],
            fordata:[],
        }
    }, 
    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.onlinemap();
            }
        },
        //处理时间
        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(val){
            
        },
        //获取地点数据
        async StatisticsNowCityOfGroup(){
            var url = "/api/Statistics/StatisticsNowCityOfGroup"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
                data:{
                    portType:1,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    let mapdatas=[];
                    let cityinif=res.data.data;
                    let aa=''
                    for(let i=0;i<cityinif.length;i++){
                        console.log(cityinif[i].address);
                        aa=''
                        cityinif[i].items.map((item)=>{
                            return aa += item.groupName+" "+item.client+" "+"("+item.statusText+")<br/>";
                            
                        })
                        mapdatas.push(
                            {'groupName':aa,'address':cityinif[i].address}
                        )
                        that.mapdata=mapdatas;
                        console.log(that.mapdata);
                    }
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
        },
        //在线地图
        onlinemap(){
            // this.StatisticsNowCityOfGroup()
            console.log(this.mapdata);
            
            const token = "eyJraWQiOiI1NEIyRkFLODMzIiwidHlwIjoiSldUIiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJIS0YzNzJKU01LIiwiaWF0IjoxNzMzMTkxMzI2LCJvcmlnaW4iOiJvYS5wYW4tYW1lcmljYW4taW50bC5jb20ifQ.1czYQb-Nxh6n4kG9sVylQH32XawN92gBKXjn6i_SU0F2M9fpwbStM-gDRvfANEiEUDz5ogUmm_FQf9eBF8o9Zg";
            mapkit.init({
                libraries:'services',
                language: 'zh-Hans',
                authorizationCallback: function(done) {
                    done(token);
                },
            });
            var CALLOUT_OFFSET = new DOMPoint(-148, -78);
            var landmarkAnnotationCallout = {
                calloutElementForAnnotation: function(annotation) {
                    var div = document.createElement("div");
                    div.className = "landmark";
                    var title = div.appendChild(document.createElement("h1"));
                    title.textContent = annotation.landmark.title;
                    var section = div.appendChild(document.createElement("section"));
                    var phone = section.appendChild(document.createElement("div"));
                    phone.className = "phone";
                    phone.innerHTML = annotation.landmark.phone;
                    var link = section.appendChild(document.createElement("p"));
                    link.className = "homepage";
                    var a = link.appendChild(document.createElement("a"));
                    a.href = annotation.landmark.url;
                    a.textContent = "前往详细地址";
                    return div;
                },
                calloutAnchorOffsetForAnnotation: function(annotation, element) {
                    return CALLOUT_OFFSET;
                },
                calloutAppearanceAnimationForAnnotation: function(annotation) {
                    return ".4s cubic-bezier(0.4, 0, 0, 1.5) 0s 1 normal scale-and-fadein";
                }
            };
            var geocoder = new mapkit.Geocoder({
                language: "zh-Hans",
                getsUserLocation: true
            });
            var that=this;
            that.fordata=[];
            for (let i = 0; i < this.mapdata.length; i++) {
                var listinif={}
                geocoder.lookup(this.mapdata[i].address, function (err, data) {
                    if (err) {
                        console.log(err);
                    }else{
                        listinif=data.results[0]?data.results[0]:{}
                    }
                    that.fordata.push(
                        {
                            'country':JSON.stringify(listinif)!="{}"?listinif.country:'',
                            'administrativeArea':JSON.stringify(listinif)!="{}"?listinif.administrativeArea:'',
                            'locality':JSON.stringify(listinif)!="{}"?listinif.locality:'',
                            'latitude':JSON.stringify(listinif)!="{}"?listinif.coordinate.latitude:'',
                            'longitude':JSON.stringify(listinif)!="{}"?listinif.coordinate.longitude:'',
                            'url':JSON.stringify(listinif)!="{}"?listinif._wpURL:'',
                            'groupName':that.mapdata[i].groupName,
                            // 'client':that.mapdata[i].client,
                            // 'statusText':that.mapdata[i].statusText,
                        }
                    )
                    if (that.fordata.length==that.mapdata.length) {
                        console.log(that.fordata);
                        var nonnull=[]
                        for (let j = 0; j < that.fordata.length; j++) {
                            if (that.fordata[j].latitude!='') {
                                nonnull.push(that.fordata[j])
                            }
                        }
                        console.log(nonnull);

                       let sanFranciscoLandmarks=[];
                       for (let k = 0; k < nonnull.length; k++) {
                            sanFranciscoLandmarks.push(
                                {
                                    'coordinate':new mapkit.Coordinate(Number(nonnull[k].latitude),Number(nonnull[k].longitude)),
                                    'title':nonnull[k].country+' '+nonnull[k].administrativeArea+' '+nonnull[k].locality,
                                    'phone':nonnull[k].groupName,
                                    'url':nonnull[k].url,
                                }
                            )
                        
                       }
                        var annotations = sanFranciscoLandmarks.map(function (landmark) {
                            var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
                                callout: landmarkAnnotationCallout,
                                color: "#c969e0"
                            });
                            annotation.landmark = landmark;
                            return annotation;
                        });
                        that.map = new mapkit.Map("map");
                        that.map.showItems(annotations); 
                        
                       
                    }
                })

                
            }
            
            // var sanFranciscoLandmarks = [
            //     { coordinate: new mapkit.Coordinate(52.2402, 13.0333), title: "波茨坦", phone: "水电费水电费<br/>asdasdasdasd<br/>tgtgtg", url: "http://www.transamericapyramidcenter.com/" },
            //     { coordinate: new mapkit.Coordinate(30.39, 104.04), title: "成都", phone: "+1 (415) 983-8030", url: "http://www.ferrybuildingmarketplace.com" },
            //     { coordinate: new mapkit.Coordinate(37.8083396, -122.415727), title: "Fisherman's Wharf", phone: "+1 (415) 673-3530", url: "http://visitfishermanswharf.com" },
            //     { coordinate: new mapkit.Coordinate(52.2285426,21.0128161), title: "波兰国家农业理事会 ", phone: "+1 (415) 249-0995", url: "http://sfrecpark.org/destination/telegraph-hill-pioneer-park/coit-tower/" },
            //     { coordinate: new mapkit.Coordinate(31.2203102, 121.4623931), title: "上海", phone: "+1 (415) 681-8850", url: "http://www.sutrotower.com" },
            //     { coordinate: new mapkit.Coordinate(37.779267, -122.419269), title: "City Hall", phone: "+1 (415) 701-2311", url: "http://sfgsa.org/index.aspx?page=1085" },
            //     { coordinate: new mapkit.Coordinate(37.8184493, -122.478409), title: "Golden Gate Bridge", phone: "+1 (415) 921-5858", url: "http://www.goldengatebridge.org" },
            //     { coordinate: new mapkit.Coordinate(37.7785538, -122.514035), title: "Cliff House", phone: "+1 (415) 386-3330", url: "http://www.cliffhouse.com/" },
            // ];
            // var annotations = sanFranciscoLandmarks.map(function (landmark) {
            //     var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
            //         callout: landmarkAnnotationCallout,
            //         color: "#c969e0"
            //     });
            //     annotation.landmark = landmark;
            //     return annotation;
            // });
            // this.map = new mapkit.Map("map");
            // this.map.showItems(annotations); 
            
        },
        combineAttributesByProperty(objects, property) {
            // 检查数组是否为空或属性未指定
            if (objects.length === 0 || !property) {
                return {};
            }
           
            // 存储结果的对象
            const combinedAttributes = {};

            // 检查所有对象的指定属性值是否相等
            const propertyValues = objects.map(obj => obj[property]);
            console.log(propertyValues);
            
            const uniquePropertyValues = new Set(propertyValues);
            console.log(uniquePropertyValues);
            
            // if (uniquePropertyValues.size !== 1) {
            //     // 如果属性值不唯一，返回空对象
            //     return combinedAttributes;
            // }

            // 属性值相等，遍历数组中的对象
            objects.forEach(obj => {
                // 跳过要检查的属性，将其他属性添加到结果对象中
                for (const key in obj) {
                    if (obj.hasOwnProperty(key) && key !== property) {
                        combinedAttributes[key] = obj[key];
                    }
                }
            });

            return combinedAttributes;
        },
        //团组酒店
        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);
            //预定国家
            var hotelcountry = echarts.init(document.getElementById('hotelcountry'));
            hotelcountry.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.hotelcountry
                },
                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);
            //单位合作次数前十
            var unitcooperation = echarts.init(document.getElementById('unitcooperation'));
            unitcooperation.setOption({
                title:{
                    text: '邀请单位合作次数前十',
                },
                legend: {},
                tooltip: {
                    formatter:function(params){
                        var html=params.data[0]+"："+params.data[1]+"次<br/>关联团组：<br/>";
                        for(let i=0;i<params.data[2].length;i++){
                            html += params.data[2][i]+"<br/>";
                        }
                        return html 
                    }
                },
                dataset: {
                    source: this.unitcooperationtop
                },
                xAxis: { 
                    type: 'category',
                    axisLabel:{
                        rotate:25
                    }, 
                },
                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.onlinemap();
            }
            // 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();
                echarts.init(document.getElementById('hotelcountry')).dispose();
            }
            if(document.getElementById('invitationtopten')!=null){
                echarts.init(document.getElementById('invitationtopten')).dispose();
                echarts.init(document.getElementById('unitcooperation')).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=[];
                    that.hotelcountry=[];
                    var datainfo=res.data.data.hotelCityData;
                    var hotelpred=res.data.data.hotelPlatformData
                    var hotelcountrydata=res.data.data.hotelCountryGroupByData
                    //酒店预订数
                    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.hotelcountry.push(['product','酒店预订城市排行榜']);
                    for(let l=0;l<hotelcountrydata.length;l++){
                        that.hotelcountry.push([hotelcountrydata[l].country,hotelcountrydata[l].bookingRoomNum,hotelcountrydata[l].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=[];
                    that.unitcooperationtop=[];
                    let datainfo=res.data.data.groupByCountry;
                    let datainfos=res.data.data.groupByClient;
                    that.invitationtop.push(['product','商邀邀请国家数量']);
                    for(let i=0;i<datainfo.length;i++){
                        that.invitationtop.push([datainfo[i].country,datainfo[i].timeNum]);
                    }
                    that.unitcooperationtop.push(['product','商邀单位合作次数']);
                    for(let p=0;p<datainfos.length;p++){
                        that.unitcooperationtop.push([datainfos[p].country,datainfos[p].timeNum,datainfos[p].linkGroupIds]);
                    }
                    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
        },
    },
    created(){
        this.StatisticsNowCityOfGroup();
    },
    mounted(){
        this.StatisticsYOY();
        // this.onlinemap();
        // 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;
}

a:link, a:visited {
            color: #2aaef5;
            outline: none;
            text-decoration: none;
        }
.landmark {
    width: 250px;
    padding: 7px 0 0 0;
    background: rgba(247, 247, 247, 0.75);
    border-radius: 5px;
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
    font-family: Helvetica, Arial, sans-serif;
    -webkit-transform-origin: 0 10px;
    transform-origin: 0 10px;
}

.landmark h1 {
    margin-top: 0;
    padding: 5px 15px;
    background: #2aaef5;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 300;
}

.landmark section {
    padding: 0 15px 5px;
    font-size: 14px;
}

.landmark section p {
    margin: 5px 0;
}

.landmark:after {
    content: "";
    position: absolute;
    top: 7px;
    left: -13px;
    width: 0;
    height: 0;
    margin-bottom: -13px;
    border-right: 13px solid #2aaef5;
    border-top: 13px solid rgba(0, 0, 0, 0);
    border-bottom: 13px solid rgba(0, 0, 0, 0);
}

</style>