let settings = JSON.parse(localStorage.getItem('settings')) || {};
const Cfg = {
designW: settings.designW || 1920, //设计图宽度
designH: settings.designH || 1080, //设计图高度
zoomMode: settings.zoomMode || (innerWidth < 768 ? 'cover' : 'contain'),
notebookOptim: [undefined, true].includes(settings.notebookOptim),
getWeatherPeriod: settings.getWeatherPeriod || 5, //天气预报更新周期(分)
chartRefreshPeriod: settings.chartRefreshPeriod || 10, // 图表刷新周期(秒)
colors: settings.colors || 'default',
colorData: {
default: ['lightskyblue', 'orange', 'greenyellow', 'limegreen',
'mediumturquoise', 'mediumpurple'],
spring: ['#BEDC6E', '#FA8C8C', '#FAAAC8', '#FAC8C8',
'#FFFFE6', '#6E6464'],
summer: ['#FFAE00', '#FF5200', '#007AFF', '#00BF05',
'#DCFFFF', '#505064'],
autumn: ['#c1ad2f',/*'#A5912D',*/ '#782323', '#783723', '#A05027',
'#FAE6DC', '#283C14'],
winter: ['#F5F5FA', '#96822D', '#6E5A19', '#BECDEB',
'#E1E1F0', '#281E1E'],
},
hideGesture: settings.hideGesture
};
let hasGetWeather = false;
let scale = 1;
let notebookOptim = true;
let colonShow = true;
let [pageH, pageW] = [$(window).height(), $(window).width()];
const weather2Code = {
"晴": 100,
"多云": 101,
"少云": 102,
"晴间多云": 103,
"阴": 104,
"有风": 200,
"平静": 201,
"微风": 202,
"和风": 203,
"清风": 204,
"强风/劲风": 205,
"疾风": 206,
"大风": 207,
"烈风": 208,
"风暴": 209,
"狂爆风": 210,
"飓风": 211,
"龙卷风": 212,
"热带风暴": 213,
"阵雨": 300,
"强阵雨": 301,
"雷阵雨": 302,
"强雷阵雨": 303,
"雷阵雨伴有冰雹": 304,
"小雨": 305,
"中雨": 306,
"大雨": 307,
"极端降雨": 308,
"毛毛雨/细雨": 309,
"暴雨": 310,
"大暴雨": 311,
"特大暴雨": 312,
"冻雨": 313,
"小到中雨": 314,
"中到大雨": 315,
"大到暴雨": 316,
"暴雨到大暴雨": 317,
"大暴雨到特大暴雨": 318,
"雨": 399,
"小雪": 400,
"中雪": 401,
"大雪": 402,
"暴雪": 403,
"雨夹雪": 404,
"雨雪天气": 405,
"阵雨夹雪": 406,
"阵雪": 407,
"小到中雪": 408,
"中到大雪": 409,
"大到暴雪": 410,
"雪": 499,
"薄雾": 500,
"雾": 501,
"霾": 502,
"扬沙": 503,
"浮尘": 504,
"沙尘暴": 507,
"强沙尘暴": 508,
"浓雾": 509,
"强浓雾": 510,
"中度霾": 511,
"重度霾": 512,
"严重霾": 513,
"大雾": 514,
"特强浓雾": 515,
"热": 900,
"冷": 901,
"未知": 999,
};
const Public = {
hasVal(val) {
if (val === null) {
return '-';
}
return val;
},
// 页面顶部时间
setHeaderTime() {
setTimeout(function () {
let t = new Date();
let [year, mon, date, hour, min, sec, milliSec] = [
t.getFullYear(),
t.getMonth() + 1,
t.getDate(),
t.getHours(),
t.getMinutes(),
t.getSeconds(),
t.getMilliseconds()
];
let timeHtml = `
${year}-${mon}-${date}
${hour}
${colonShow ? ' :' : ' '}
${(min + "").padStart(2, '0')}
`;
colonShow = !colonShow;
$("#headerTime").html(timeHtml);
if (!hasGetWeather) {
Public.getWeather(t);
hasGetWeather = true;
} else {
if (min % Cfg.getWeatherPeriod === 0 && sec === 0 && milliSec < 500) {
Public.getWeather(t);
}
}
Public.setHeaderTime();
}, 500)
},
// 获取天气情况
getWeather(currTime) {
// 获取地理位置
$.get({
//这里的url不能写到data对象的外面
url: 'https://api.asilu.com/weather_v2/',
dataType: 'jsonp', // 请求方式为jsonp
success: function (data) {
const city = data.forecasts[0].city;
let temperatureTxt = '';
let daily_forecast = data.forecasts[0].casts[0];
let [code, txt] = ['', ''];
if ((currTime.getHours() >= 6) && (currTime.getHours() < 18)) {
txt = daily_forecast.dayweather;
temperatureTxt = daily_forecast.nighttemp + "℃~" + daily_forecast.daytemp + "℃";
} else {
txt = daily_forecast.nightweather;
temperatureTxt = daily_forecast.daytemp + "℃~" + daily_forecast.nighttemp + "℃";
}
$("#weather").html(txt + ' ' + city);
$("#temperature").text(temperatureTxt);
$("#weatherIcon").css('background-image', `url("https://cdn.heweather.com/cond_icon/${weather2Code[txt]}.png")`);
}
})
},
//页面缩放
pageResize() {
[pageH, pageW] = [$(window).height(), $(window).width()];
let isWider = pageW / pageH > Cfg.designW / Cfg.designH;
let [scaleW, scaleH] = [pageW / Cfg.designW, pageH / Cfg.designH];
let $container = $("#container");
switch (Cfg.zoomMode) {
case "contain":
if (isWider) {
$container.css({width: pageH * Cfg.designW / Cfg.designH, height: '100%'});
} else {
$container.css({height: pageW * Cfg.designH / Cfg.designW, width: '100%'});
}
scale = isWider ? scaleH : scaleW;
break;
case 'cover':
$("html,body").css('overflow', 'initial');
if (isWider) {
$container.css({height: pageW * Cfg.designH / Cfg.designW, width: '100%'});
} else {
$container.css({width: pageH * Cfg.designW / Cfg.designH, height: '100%'});
}
scale = isWider ? scaleW : scaleH;
break;
case 'stretch':
scale = isWider ? scaleH : scaleW;
$container.css({width: '100%'}, {height: '100%'});
break;
}
$("html").css("font-size", scale * 16 + "px").css("opacity", 1);
notebookOptim = !(Cfg.notebookOptim === false || scale > .75);
},
//图表缩放
chartsResize(charts, param) {
$(window).resize(() => {
Object.keys(charts).forEach(id => {
if (param && param.notResize.includes(id)) {
return
}
charts[id].resize();
})
});
},
chartsReDraw(charts, t = Cfg.chartRefreshPeriod, noRefresh, someRefresh) {
let counter = setInterval(() => {
Object.keys(charts).forEach(item => {
if (noRefresh && noRefresh.includes(item) && !(someRefresh && someRefresh.includes(item))) return;
let chart = charts[item];
let opt = chart.getOption();
chart.clear();
chart.setOption(opt);
})
}, (t || Cfg.chartRefreshPeriod) * 1000)
},
// 自定义方法
initTools() {
$.fn.extend({
str2NumFixed: function (n, power, str = '') {
$.each($(this), function () {
$(this).text(Public.hasVal(parseFloat($(this).text() + 'e' + power).toFixed(n) + str));
})
}
})
}
};
//jsonP
function onBack(data) {
}
Public.pageResize();
let init = () => {
Public.initTools(); // 自定义方法
};
$(window).resize(() => {
Public.pageResize();
});
$(function () {
$('#container>header').load('common.html header>*', function () {
if ($('body').attr('id') === 'pb_studyPlan') {
$('header>h1').text('可视化动态数据展示')
}
Public.setHeaderTime(); // 页面顶部时间
if (Cfg.zoomMode === 'cover' && !Cfg.hideGesture) {
$('header').addClass('showGesture')
}
});
// 加载设置面板
$('body>aside').load('common.html aside >*', function () {
$("#getWeatherPeriod").val(settings.getWeatherPeriod || 5);
$("#chartRefreshPeriod").val(settings.chartRefreshPeriod || 10);
$("#notebookOptim").attr('checked', [undefined, true].includes(settings.notebookOptim));
$("#designW").val(settings.designW || 1920);
$("#designH").val(settings.designH || 1080);
$("#" + Cfg.zoomMode).prop('checked', true);
let $colors = $("body>aside .colors");
Object.keys(Cfg.colorData).forEach(item => {
$colors.append(`
`)
});
});
// 保存设置
$("body").on('click', '#saveSetting', function () {
settings = {
getWeatherPeriod: $("#getWeatherPeriod").val(),
chartRefreshPeriod: $("#chartRefreshPeriod").val(),
notebookOptim: $("#notebookOptim").is(":checked"),
designW: $("#designW").val(),
designH: $("#designH").val(),
colors: $("body>aside input[type=radio][name=colors]:checked").next().text(),
zoomMode: $("body>aside input[type=radio][name=zoomMode]:checked").next().text(),
};
localStorage.setItem('settings', JSON.stringify(settings));
window.location.reload();
}).on('click', '#container>header', function () {
if (!Cfg.hideGesture) {
$(this).removeClass('showGesture');
settings.hideGesture = true;
localStorage.setItem('settings', JSON.stringify(settings))
}
});
const sessionData = JSON.parse(sessionStorage.getItem('sessionData'));
if (!(sessionData && sessionData.settingTip) && !$('body').attr('id').startsWith('pb_')) {
alert('请把鼠标移动到屏幕左侧边靠下的位置,可以滑出设置面板。' +
'\n。');
sessionStorage.setItem('sessionData', JSON.stringify({settingTip: true}))
}
});
/*
配置表和天气 温度 时间情况的整体文件
* */