common.js

var cp = ColorPicker(
    document.getElementById('slide'),
    document.getElementById('picker'),
    function (hex, hsv, rgb, mousePicker, mouseSlide) {
        ColorPicker.positionIndicators(
            document.getElementById('slide-indicator'),
            document.getElementById('picker-indicator'),
            mouseSlide, mousePicker
        );
        if(document.getElementById('colorType').value == 'font') {
            document.body.style.color = hex;
        }else{
            document.body.style.backgroundColor = hex;
        }
        document.getElementById('colorPickerBtn').style.backgroundColor = hex;
    }
)
cp.setHex('#f0f3f9');
// 全局变量
var apiUrl = window._vionConfig.apiUrl
    , date = formatterDate(new Date())
    , refreshTime = ''
    , globalMallId = null
    , globalChartId = null
    , timer = null
    , fontSize = 0;
var loginAtoken = '';
// console.log(Cookies.get('atoken'))


document.addEventListener('click', (ev) => {
    var e = ev || window.event;
    var panel = document.getElementById('colorPickerBtn');
    var panel2 = document.getElementById('color-picker')
    if (!panel == e.target || !panel.contains(e.target) && !panel2.contains(e.target)) {
        try {
            document.getElementById('color-picker').style.display = '';
        } catch (error) { }
    } else {
        document.getElementById('color-picker').style.display = 'block';
    }
})

// 调用ajax 
function loginUser() {
    var params = {
        loginName: window.loginName,
        password: window.password
    }
    $.ajax({
        type: 'post',
        url:  apiUrl + '/users/login',
        contentType:'application/json;charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(params),
        success: function (res) {
            var result = res;
            if(result.code == 200) {
                loginAtoken = result.data.atoken
                getAccounts()
            }
        },
        error: function (err) {
            console.log(err)
        }
    })
}
function getAccounts() {
    var accountId = '';
    $.ajax({
        method: 'get',
        url:  apiUrl + '/accounts',
        data: {
            _t: Date.parse(new Date()) / 1000
        },
        headers: {
            'Authorization': loginAtoken ? loginAtoken : Cookies.get('atoken') 
        },
        success: function (res) {
            var result = res.data;
            if(result.length > 0) {
                accountId = result[0].id;
                getMalls(accountId);
            }
        },
        error: function (err) {
            console.log(err)
        }
    })
}

function getMalls(accountId) {
    $.ajax({
        method: 'get',
        url: apiUrl + '/malls',
        data: {
            accountId: accountId,
            status: 1,
            _t: Date.parse(new Date()) / 1000
        },
        headers: {
            'Authorization': loginAtoken ? loginAtoken : Cookies.get('atoken')
        },
        success: function (res) {
            var result = res.data;
            if(result.length > 0) {
                globalMallId = result[0].id;
                getReportChartKey();
            }
        },
        error: function (err) {
            console.log(err)
        }
    })
}

function getReportChartKey() {
    $.ajax({
        method: 'get',
        url: apiUrl + '/reportCharts',
        data: {
            report: 'BasicDayReport',
            _t: Date.parse(new Date()) / 1000
        },
        headers: {
            'Authorization': loginAtoken ? loginAtoken : Cookies.get('atoken')
        },
        success: function (res) {
            var result = res.data;
            for (var i = 0; i < result.length; i++) {
                if (result[i].key === 'detailData') {
                    globalChartId = result[i].id;
                }
            }
            getChartData()
        },
        error: function (err) {
            console.log(err)
        }
    })
}

// 
function getChartData() {
    var kpiOption = [];
    $.ajax({
        method: 'get',
        url: apiUrl + '/report/basics/day/mall',
        data: {
            orgIds: globalMallId,
            date: formatterDate(new Date()),
            chartIds: globalChartId,
            option: 'TAB_TABLE',
            _t: Date.parse(new Date()) / 1000
        },
        headers: {
            'Authorization': loginAtoken ? loginAtoken : Cookies.get('atoken')
        },
        success: function (res) {
            var result = res;
            if(result.ecode == 401) {
                loginUser()
            }else{
                var bodyData = result.data.body;
                if (bodyData['detailData']) {
                    var keys = bodyData['detailData'].xaxis.data;
                    keys.shift();
                    for (var i = 0; i < keys.length; i++) {
                        kpiOption.push({
                            key: keys[i],
                            value: null
                        })
                    }
                    var values = bodyData['detailData'].series[0].data;
                    values.shift();
                    for (var i = 0; i < kpiOption.length; i++) {
                        kpiOption[i].value = values[i] ? values[i] + '人' : '--' + '人';
                    }
                    var htmls = '';
                    for (var i = 0; i < kpiOption.length; i++) {
                        htmls += '<p class="content-item"><span class="text-left">' + kpiOption[i].key + ':</span><span class="text-right">' + kpiOption[i].value + '</span></p>'
                    }
                    document.querySelector('.main-wrapper').innerHTML = htmls;
                }  
            }
            if(refreshTime) {
                clearInterval(timer);
                timer = setInterval(function() {
                    getChartData();
                }, refreshTime * 1000)
            }
        },
        error: function (err) {
            console.log(err)
        }
    })
}

// 日期格式化
function formatterDate(date) {
    var _year = date.getFullYear();
    var _month = date.getMonth() + 1;
    var _day = date.getDate();
    _month = autoPrefixed(_month);
    _day = autoPrefixed(_day);
    return _year + '-' + _month + '-' + _day;
}

// 补零
function autoPrefixed(n) {
    return (n + '').replace(/(?=\b\d\b)/g, '0')
}

document.querySelector('#refreshTime').addEventListener('change', function(e) {
    var ev = e || window.event;
    console.log(ev.target.value)
    refreshTime = ev.target.value;
    clearInterval(timer);
    timer = setInterval(function() {
        getChartData();
    }, refreshTime * 1000)
})

document.querySelector('#decrease').addEventListener('click', function(e) {
    fontSize -= 2;
    document.querySelector('.size-number').innerText = fontSize;
    document.querySelector('.main-wrapper').style.fontSize = fontSize + 'px';
})
document.querySelector('#inscrease').addEventListener('click', function(e) {
    fontSize += 2;
    document.querySelector('.size-number').innerText = fontSize;
    document.querySelector('.main-wrapper').style.fontSize = fontSize + 'px';
})

window.onload = function() {
    refreshTime = document.querySelector('#refreshTime').value;
    fontSize = 30;
    document.querySelector('.size-number').innerText = fontSize;
    document.querySelector('.main-wrapper').style.fontSize = fontSize + 'px';
    if(window.loginName && window.password) {
        loginUser();
    }else{
        getAccounts();
    }
}