多接口请求，请求成功再显示数据

<template>
    <div class="account-data">
        <div class="account-table">
            <div class="table-main" ref="tableMiain">
                <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    :data="tableData"
                    border
                    style="width: 100%;overflow: auto;background:transparent"
                    :style="{height:tbHeight?tbHeight:'200px'}"
                >
                    <el-table-column align="center" prop="date" label="头像/昵称">
                        <template slot-scope="scope">
                            <div style="display:flex;align-items:center;margin-left:15px">
                                <img
                                    style="width:40px;height:40px;border-radius:100%"
                                    :src="scope.row.Icon"
                                    alt
                                />
                                <span style="margin-left:10px">{{scope.row.Name}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Platform" label="设备"></el-table-column>
                    <el-table-column align="center" label="性别">
                        <template slot-scope="scope">
                            <span type="danger" v-if="scope.row.Sex == '1'">男</span>
                            <span type="success" v-if="scope.row.Sex == '2'">女</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Ip" label="城市"></el-table-column>
                </el-table>
            </div>
            <div class="el-pagena">
                <el-pagination
                    :page-size="PageLimit"
                    :current-page.sync="pageNum"
                    @current-change="handleCurrentChange"
                    background
                    layout="prev, pager, next"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { schemeAccount } from '@/api/accountmanage/scheme_account';
import { schemeStat } from '@/api/accountmanage/scheme_stat';
import $ from 'jquery';
export default {
    data() {
        return {
            loading: false,
            totalNum: 0,
            PageLimit: 5,
            pageNum: 1,
            tableData: [],
            tbHeight: '',
            tempTabs: {},
            minDay: 2
        };
    },
    mounted() {
        this.tbHeight = window.getComputedStyle(this.$refs.tableMiain).height;
        this.getData();
    },
    methods: {
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getData();
        },

        getData() {
            this.loading = true;
            let that = this;
            let StartIndex = (this.pageNum - 1) * this.PageLimit;
            schemeAccount({ StartIndex: StartIndex, PageLimit: this.PageLimit }).then(res => {
                // 下面为获取到的数据，要求是把下面的网关整型ip转为常规ip，并调用腾讯ip转地址的API,转换完再显示数据
                // {
                //   "code": 0,
                //   "data": {
                //     "Count": 4,
                //     "AccountList": [
                //                  {
                //     "Id": 483337704017235968,
                //     "Name": "张亚楠",
                //     "Sex": 2,
                //     "Icon": "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLTZQgNMuo8ibgeQvXEZRTUAvjG2eyGPeSqnzlga2uPgnSI2xAotgXIChZbxFq4hHMRgOibgjOTKghQ/132",
                //     "Platform": "ios",
                //     "Ip": 1918286263,
                //     "CreateTime": 1590039576
                //   },
                //       {
                //         "Id": 483337704017235968,
                //         "Name": "张亚楠",
                //         "Sex": 2,
                //         "Icon": "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLTZQgNMuo8ibgeQvXEZRTUAvjG2eyGPeSqnzlga2uPgnSI2xAotgXIChZbxFq4hHMRgOibgjOTKghQ/132",
                //         "Platform": "ios",
                //         "Ip": 1918286263,
                //         "CreateTime": 1590039576
                //       },
                //       {
                //         "Id": 483840515725332480,
                //         "Name": "彼岸丶",
                //         "Sex": 1,
                //         "Icon": "http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eqLdONwicmL58G5PLiaNk5DYCSOD0qQ5mICVWlWGFiaMxH2goElWwEez3Jy6q6d1NAE5D9hMab0zJYwA/132",
                //         "Platform": "ios",
                //         "Ip": 1700201907,
                //         "CreateTime": 1590159456
                //       },

                //     ]
                //   },
                if (!res.code) {
                    that.totalNum = res.data.Count;
                    let ipsArr = []; // 得到ip数组
                    that.tableData = res.data.AccountList.map(item => {
                        item.Ip = that.int2iP(item.Ip); // 整型ip转为常规ip
                        ipsArr.push(item.Ip);
                        return item;
                    });
                    that.changeAddress(ipsArr);
                } else {
                    that.$message(res.message);
                    that.loading = false;
                }
            });
        },
        changeAddress(ipsArr) {
            //  ipsArr: ["114.86.185.183", "114.86.185.183", "101.87.5.179"]
            let setArr = [...new Set(ipsArr)]; // es6数组去重
            let that = this;
            let isRequest = 0; // 用来判断是否有需要请求腾讯api转换的
            for (let i = 0; i < setArr.length; i++) {
                if (!this.tempTabs.hasOwnProperty(setArr[i])) { // 为了下次得到的数据还有改ip就不要再去请求转换了
                    isRequest++;
                    this.tempTabs[setArr[i]] = {
                        ip: setArr[i],
                        isOK: false
                    };
                }
            }
            // tempTabs = {
            // "114.86.185.183":{
            // ip: "114.86.185.183",
            // isOK: false
            // }
            // }
            if (!isRequest) {
                // console.log('没有请求接口直接赋值');
                // console.log(this.tempTabs);
                that.tableData = that.tableData.map(item => {
                    let objIp = that.tempTabs[item.Ip];
                    if (objIp) {
                        item.Ip = objIp.ip;
                    }
                    return item;
                });
                that.loading = false;
            } else {
                for (var key in this.tempTabs) {
                    let tempdata = this.tempTabs[key];
                    if (!tempdata.isOK) {
                        this.getChangeIp(key);
                    }
                }
            }
        },
        getChangeIp(ip) {
            let that = this;
            $.ajax({
                type: 'get',
                data: {
                    ip: ip,
                    key: '3W7BZ-63XWU-6N3V5-2QMQV-CE3QH-YYBMJ',
                    output: 'jsonp'
                },
                dataType: 'jsonp',
                jsonp: 'callback',
                url: 'https://apis.map.qq.com/ws/location/v1/ip',
                success: function(json) {
                    if (json.status == 0) {
                        let ad_info = json.result.ad_info;
                        let address = ad_info.province + ad_info.city + ad_info.district;
                        let tempdate = that.tempTabs[ip];
                        if (tempdate) {
                            tempdate.isOK = true;
                            tempdate.ip = address;
                        }
                        that.Complete();
                    } else {
                        console.log(json);
                    }
                    //业务处理
                },
                error: function(err) {
                    console.log(err);
                    //业务处理
                }
            });
        },
        Complete() {
            let that = this;
            let all_complete = true;
            for (let key in this.tempTabs) {
                let tempdata = this.tempTabs[key];
                if (!tempdata.isOK) {
                    all_complete = false;
                    break;
                }
            }
            if (all_complete) {
                // console.log('所有完成了');
                // console.log(this.tempTabs);
                that.tableData = that.tableData.map(item => {
                    let objIp = that.tempTabs[item.Ip];
                    item.Ip = objIp.ip;
                    return item;
                });
                that.loading = false;
                console.log(that.tableData);
            }
        },
        int2iP(num) {
            var str;
            var tt = new Array();
            tt[0] = (num >>> 24) >>> 0;
            tt[1] = ((num << 8) >>> 24) >>> 0;
            tt[2] = (num << 16) >>> 24;
            tt[3] = (num << 24) >>> 24;
            str = String(tt[0]) + '.' + String(tt[1]) + '.' + String(tt[2]) + '.' + String(tt[3]);
            return str;
        }
    }
};
</script>

<style>
.account-data {
    height: 98%;
    display: flex;
    flex-direction: column;
    /* border: 1px solid red; */
}
.account-data .account-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
}
.header-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    padding: 10px 20px;
    flex: 1;
    margin: 0 20px;
    min-width: 220px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.item-icon {
    width: 52px;
    height: 52px;
}
.item-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-left: 40px;
    color: #666;
}
.item-text > span:nth-child(2) {
    font-size: 22px;
    color: #000;
}
.account-table {
    padding: 0 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 1500px;
}
.account-table .table-main {
    flex: 1;
    overflow: auto;
}
.account-data .account-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    min-width: 1500px;
}
.echarts-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.echarts-left .left-picker {
    height: 80px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    padding: 0 30px;
}
.echarts-right {
    display: flex;
    flex-direction: column;
    width: 650px;
    margin-left: 20px;
}

.echarts-right .right-item {
    height: 240px;
    width: 650px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #fff;
}
.echarts-right .right-item:nth-child(1) {
    margin-bottom: 15px;
}
.account-data .schemeCommnet {
    display: flex;
    flex-direction: column;
    max-height: 700px;
    overflow: auto;
    width: 700px;
    border: 1px solid #dfdfdf;
}
.account-data .schemeCommnet .comment-item {
    display: flex;
    flex-direction: column;
}
.account-data .schemeCommnet .comment-item .item-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    padding: 34px 20px 10px 20px;
    background: #f3f3f3;
}
.account-data .schemeCommnet .comment-item .item-content {
    display: flex;
    flex-direction: column;
    font-size: 16px;
}
.account-data .schemeCommnet .comment-item .item-content .content-item {
    border-bottom: 1px dashed #dfdfdf;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    overflow: none;
}
.account-data .schemeCommnet .comment-item .item-content .content-item .time {
    align-self: flex-end;
}
.el-pagena {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>