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})) } }); /* 配置表和天气 温度 时间情况的整体文件 * */