var layer; var screen = true; var mapChart = null; //总库存图表 var allFoodVarietyChart = null; //总库存图表 var foodVarietyData = new Array(); var foodTypeChart = null; //粮食性质图表 var foodVarietyChart = null; //粮食品种性质图表 var foodLevelChart = null; //粮食等级性质图表 var reservesChart = null; //设计总储量图表 var areaChart = null; //设计总面积图表 var deptNum = 0; //库区切换下标 var foodNum = 0; //粮食品种切换下标 var geoMap = [{name: '北京', value: [116.405285, 39.904989]}]; //默认点位 var map = chinaMapOutline; //默认加载全国地图 var timer; $(function() { layui.use([ 'layer', 'laydate', 'form' ], function() { layer = layui.layer; // 初始页面 init(); $("body").dblclick(function() { if (screen) { requestFullScreen(); } else { exitFullscreen(); } }); }); }); //初始化页面 function init() { //初始化图表 initChart(); //初始化地图 initMap(); //时间 initTime(); //天气 initWeatherInfo(); //加载指定地区地图 renderMapPoints(null); //统计总库存信息及库区库存信息 renderDepotChart(); //加载库区信息(包含基本信息,库存分类信息以及地图信息) renderDeptInfo(); //加载警告信息 renderWarn(); clearInterval(timer); timing(); //适应屏幕大小 initScrollbar(); initWS(deptId, bizType, bizTag, userId); } //初始化图表 function initChart() { /*总库存图表*/ allInventoryChartLoad(); /*粮食性质*/ pieChartLoad([ {value: 0, name: '中储'}, {value: 0, name: '省储'}, {value: 0, name: '地储'}, {value: 0, name: '商品粮'}], 'foodTypeChart'); /*粮食品种*/ pieChartLoad([ {value: 0, name: '小麦'}, {value: 0, name: '晚稻谷'}, {value: 0, name: '大豆'}, {value: 0, name: '玉米'} ], 'foodVarietyChart'); /*粮食等级*/ pieChartLoad([ {value: 0, name: '二等'}, {value: 0, name: '三等'}, {value: 0, name: '一等'} ], 'foodLevelChart'); /*设计总储量*/ invInfoChartLoad({ value: 77, color: '#02a5f4', text: '0', subtext: '单位t'}, 'reservesChart'); /*设计总面积*/ invInfoChartLoad({ value: 77, color: '#ffb335', text: '0', subtext: '单位m²'}, 'areaChart'); } //初始化警告信息 function renderWarn() { var html = ''; console.log(warnList); if (warnList != null && warnList.length > 0) { $.each(warnList, function(index, item) { html += '
'; html += '' + getDeptName(item.deptId) + ''; html += ''+ item.info + ''; html += '' + item.time.substring(5, 10) + ''; html += '
'; }) }else { if (deptList != null && deptList.length > 0) { $.each(deptList, function(index, item) { html += '
'; html += '' + item.name + ''; html += '正常,无警告信息'; html += '' + formatDate ('mm/dd', new Date()) + ''; html += '
'; }) } } $("#inventoryInfo").html(html); } //获取库区名称 function getDeptName(deptId) { var name = deptId; if (deptList != null && deptList.length > 0) { $.each(deptList, function(index, item) { if(item.id == deptId){ name = item.name; return false; } }) } return name; } //初始化库区信息 function renderDeptInfo() { if (deptList == null || deptList.length <= 0) { return; } //库区个数 $("#deptSum").html(deptList.length); $("#deptName").html(deptList[deptNum].name); if(deptList[deptNum].province && deptList[deptNum].city){ $("#locationName").html(deptList[deptNum].province + deptList[deptNum].city); }else { $("#locationName").html(""); } //设计储量 var chartReserves = reservesChart; chartReserves.option.title.text = deptList[deptNum].storage; chartReserves.chart.setOption(chartReserves.option, true); reservesChart = chartReserves; //设计面积 var chartArea = areaChart; chartArea.option.title.text = deptList[deptNum].area; chartArea.chart.setOption(chartArea.option, true); areaChart = chartArea; //粮食等级 var chartFoodLevel = foodLevelChart; chartFoodLevel.option.series[0].data = deptList[deptNum].levelData; chartFoodLevel.chart.setOption(chartFoodLevel.option, true); foodLevelChart = chartFoodLevel; //粮食性质 var chartFoodType = foodTypeChart; chartFoodType.option.series[0].data = deptList[deptNum].typeData; chartFoodType.chart.setOption(chartFoodType.option, true); foodTypeChart = chartFoodType; //粮食品种 var chartFoodVariety = foodVarietyChart; chartFoodVariety.option.series[0].data = deptList[deptNum].varietyData; chartFoodVariety.chart.setOption(chartFoodVariety.option, true); foodVarietyChart = chartFoodVariety; //库区出入库信息 var inoutSum = deptList[deptNum].inoutSum; $("#inSumNum").html(inoutSum.inSumNum); $("#outSumNum").html(inoutSum.outSumNum); $("#inComplateNum").html(inoutSum.inComplateNum); $("#outComplateNum").html(inoutSum.outComplateNum); //加载库区地图 geoMap = updateDeptMap(); renderMap(); } /** * 仓储统计 */ function renderDepotChart() { if (listDepot == null || listDepot.length <= 0) { return; } //仓库个数 $("#depotSum").html(listDepot.length); /*----粮食分品种柱状图----*/ var foodVarietyMap = new Map(); var foodVariety = null; var depot = null; var value = 0.0; var allSum = 0; for (var i = 0; i < listDepot.length; i++) { depot = listDepot[i]; allSum += depot.storageReal; value = 0.0; // 粮食品种 foodVariety = depot.foodVariety; if (foodVariety) { if (foodVarietyMap.has(foodVariety)) { value = foodVarietyMap.get(foodVariety).value + depot.storageReal; } else { value = depot.storageReal; } foodVarietyMap.set(foodVariety, { "name" : depot.foodVarietyName, "value" : value }); } } allSum = allSum/1000; //总库存量 $("#storageSum").html(allSum.toFixed(0)); var chartFoodVarietyData = new Array(); foodVarietyMap.forEach(function(value, key) { chartFoodVarietyData.push(value); }); foodVarietyData = chartFoodVarietyData; var foodVarietyName = new Array(); var foodVarietyValue = new Array(); chartFoodVarietyData.forEach(function(item) { foodVarietyName.push(item.name); var num = item.value/1000; foodVarietyValue.push(num.toFixed(0)); }); var allFoodVariety = allFoodVarietyChart; allFoodVariety.option.xAxis.data = foodVarietyName; allFoodVariety.option.series[0].data = foodVarietyValue; allFoodVariety.chart.setOption(allFoodVariety.option, true); allFoodVarietyChart = allFoodVariety; foodVarietyTime(); /*-------- 分库区统计粮食品种、性质、等级储量 -------*/ if (deptList == null || deptList.length <= 0) { return; } for (var j = 0; j < deptList.length; j++) { //统计库区出入库信息 if(inoutMap){ deptList[j].inoutSum = inoutMap[deptList[j].id]; } //统计库区分类库存信息 var typeMap = new Map(); var type = null; var varietyMap = new Map(); var variety = null; var levelMap = new Map(); var level = null; var depotObj = null; var valueNum = 0.0; for (var i = 0; i < listDepot.length; i++) { if(deptList[j].id == listDepot[i].deptId){ depotObj = listDepot[i]; valueNum = 0.0; // 粮食性质 type = depotObj.foodType; if (type) { if (typeMap.has(type)) { valueNum = typeMap.get(type).value + depotObj.storageReal; } else { valueNum = depotObj.storageReal; } typeMap.set(type, { "name" : depotObj.foodTypeName, "value" : valueNum }); } // 粮食等级 level = depotObj.foodLevel; if (level) { if (levelMap.has(level)) { valueNum = levelMap.get(level).value + depotObj.storageReal; } else { valueNum = depotObj.storageReal; } levelMap.set(level, { "name" : depotObj.foodLevelName, "value" : valueNum }); } // 粮食品种 variety = depotObj.foodVariety; if (variety) { if (varietyMap.has(variety)) { valueNum = varietyMap.get(variety).value + depotObj.storageReal; } else { valueNum = depotObj.storageReal; } varietyMap.set(variety, { "name" : depotObj.foodVarietyName, "value" : valueNum }); } } } var chartTypeData = new Array(); var chartVarietyData = new Array(); var chartLevelData = new Array(); varietyMap.forEach(function(value, key) { chartVarietyData.push(value); }); typeMap.forEach(function(value, key) { chartTypeData.push(value); }); levelMap.forEach(function(value, key) { chartLevelData.push(value); }); if(chartVarietyData.length > 0){ deptList[j].varietyData = chartVarietyData; }else { deptList[j].varietyData = [ {value: 0, name: '小麦'}, {value: 0, name: '晚稻谷'}, {value: 0, name: '大豆'}, {value: 0, name: '玉米'}]; } if(chartLevelData.length > 0){ deptList[j].levelData = chartLevelData; }else { deptList[j].levelData = [ {value: 0, name: '二等'}, {value: 0, name: '三等'}, {value: 0, name: '一等'}]; } if(chartTypeData.length > 0){ deptList[j].typeData = chartTypeData; }else { deptList[j].typeData = [ {value: 0, name: '中储'}, {value: 0, name: '省储'}, {value: 0, name: '地储'}, {value: 0, name: '商品粮'}]; } } } //总库存更新粮食品种 function foodVarietyTime() { $("#foodVarietyName").html(foodVarietyData[foodNum].name); var num = foodVarietyData[foodNum].value/1000; $("#foodVarietyValue").html(num.toFixed(0)); } //库区定时切换 function timing() { timer = setInterval(function() { if(foodNum == foodVarietyData.length){ foodNum = 0; } if(deptNum == deptList.length){ deptNum = 0; } renderDeptInfo(); foodVarietyTime(); foodNum += 1; deptNum += 1; }, 5000); } //刷新时间 function initTime() { setInterval(function () { $("#navBarDate").html(formatDate('mm月dd日', new Date())); $("#navBarTime").html(formatDate('HH:MM:SS', new Date())); $("#navBarWeek").html(getWeekDate()); }, 1000); } //初始化气象信息 function initWeatherInfo() { console.log(weatherInfo); if (weatherInfo) { var wendu = weatherInfo.temp.replace("℃", ""); $("#weather_wendu").html(wendu); $("#weather_shidu").html(weatherInfo.humidity); $("#weather_tianqi").html(weatherInfo.weather); $("#weather_fengxiang").html(weatherInfo.windDirection); $("#weather_fengji").html(weatherInfo.windSpeed); $("#weather_time").html(weatherInfo.updateTimeStr); //切换天气图片 weatherImgSwitch(weatherInfo.weather); } } //屏幕大小 function initScrollbar() { window.onresize = function(e) { if( reservesChart.chart ) { reservesChart.chart.resize(); } if( areaChart.chart ) { areaChart.chart.resize(); } if( foodTypeChart.chart ) { foodTypeChart.chart.resize(); } if( foodVarietyChart.chart ) { foodVarietyChart.chart.resize(); } if( foodLevelChart.chart ) { foodLevelChart.chart.resize(); } if( allFoodVarietyChart.chart ) { allFoodVarietyChart.chart.resize(); } }; setInterval(function () { if ( !hasScrollbar() ) { document.getElementById('inventoryInfoBox').scrollTop = 0; } else { if( document.getElementById('inventoryInfoBox').scrollTop >= (document.getElementById('inventoryInfo').clientHeight -document.getElementById('inventoryInfoBox').clientHeight) ) { document.getElementById('inventoryInfoBox').scrollTop = 0; }else { document.getElementById('inventoryInfoBox').scrollTop++; } } }, 50); } /** * 总库存图表加载 * @param names * @param data * @author zhangwq * @QQ 1512908947 */ function allInventoryChartLoad() { var dom = document.getElementById('allFoodVarietyChart'); var myChart = echarts.init( dom ); var options = { grid: { left: '1%', right: '5%', bottom: '1%', top: '10%', containLabel: true }, tooltip: { show: false }, xAxis: { type: 'category', //网格样式 splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color : '#ffffff', fontSize: nowSize(16) }, interval: 0, margin: nowSize(3) }, data: ['小麦','水稻','菜籽油','大豆','玉米','其他'] }, yAxis: { type: 'value', //网格样式 splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false } }, series: [{ name: '', data: [0, 0, 0, 0, 0, 0], type: 'bar', barWidth: '50%', label: { show: true, position: 'top', color: '#ffffff', fontSize: nowSize(14), distance: 0, lineHeight: nowSize(25) }, itemStyle: { normal: { color: function ( params ) { var colorList = [ new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#ff5600'}, {offset: 1, color: '#f27f44'}] ), new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#ffb335'}, {offset: 1, color: '#ffcc77'}] ), new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#ecff53'}, {offset: 1, color: '#f5ffa3'}] ), new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#08e53e'}, {offset: 1, color: '#59ff81'}] ), new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#02a5f4'}, {offset: 1, color: '#60cbff'}] ), new echarts.graphic.LinearGradient( 0, 1, 0, 0, [ {offset: 0, color: '#0a43bc'}, {offset: 1, color: '#3571f0'}] ) ]; return colorList[params.dataIndex] } } } }] }; myChart.setOption( options ); allFoodVarietyChart = {"chart": myChart, "option": options}; } /** * 库存仓区统计饼图加载 * @param obj * @param id * @author zhangwq * @QQ 1512908947 */ function pieChartLoad( data, id ) { var dom = document.getElementById( id ); var pieChart = echarts.init( dom ); var option = { tooltip: { trigger: 'item' }, legend: { show: false }, color: ['#ecff53','#08e53e', '#ffb335', '#119edc', '#E066FF', '#C0FF3E'], series: [ { name: '', type: 'pie', radius: ['30%', '70%'], center: ['center', '53%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#041636', borderWidth: 8 }, label: { show: true, color: '#fff', formatter: '{b}\n{d}%', fontSize: nowSize( 16 ), lineHeight: nowSize( 25 ) }, labelLine: { show: true, lineStyle: { cap: 'round' } }, data: data } ] }; pieChart.setOption( option ); if( id === 'foodTypeChart' ) { foodTypeChart = {"chart": pieChart, "option": option}; }else if( id === 'foodVarietyChart' ) { foodVarietyChart = {"chart": pieChart, "option": option}; }else if( id === 'foodLevelChart' ) { foodLevelChart = {"chart": pieChart, "option": option}; } } /** * 库存信息饼图加载 * @param obj * @param id * @author zhangwq * @QQ 1512908947 */ function invInfoChartLoad( obj, id ) { var dom = document.getElementById( id ); var pieChart = echarts.init( dom ); var option = { title: { text: obj.text, textStyle: { color: '#ffffff', fontSize: nowSize( 24 ) }, subtext: obj.subtext, subtextStyle: { color: obj.color, fontSize: nowSize( 16 ) }, itemGap: nowSize( -15 ), // 主副标题距离 left: 'center', top: 'center' }, angleAxis: { max: 100, // 满分 clockwise: false, // 逆时针 // 隐藏刻度线 axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, radiusAxis: { type: 'category', // 隐藏刻度线 axisLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, splitLine: { show: false } }, polar: { center: ['50%', '50%'], radius: '170%' //图形大小 }, series: [{ type: 'bar', data: [{ name: '', value: obj.value, itemStyle: { normal: { color: obj.color } } }], coordinateSystem: 'polar', roundCap: true, barWidth: nowSize( 12 ), barGap: '-100%', // 两环重叠 z: 2 },{ // 灰色环 type: 'bar', data: [{ value: 100, itemStyle: { color: '#e2e2e2', shadowColor: 'rgba(0, 0, 0, 0.2)', shadowBlur: 5, shadowOffsetY: 2 } }], coordinateSystem: 'polar', roundCap: true, barWidth: nowSize( 12 ), barGap: '-100%', // 两环重叠 z: 1 }] }; pieChart.setOption( option ); if( id === 'areaChart' ) { areaChart = {"chart": pieChart, "option": option}; }else if( id === 'reservesChart' ) { reservesChart = {"chart": pieChart, "option": option}; } } //当前视口宽度 var nowClientWidth = document.documentElement.clientWidth; /** * 换算方法 * @param val * @param initWidth * @return {number} * @author zhangwq * @QQ 1512908947 */ var nowSize = function (val) { var initWidth = 1920; return val * (nowClientWidth / initWidth); }; //加载指定地区地图和点位 function renderMapPoints(areaName) { if(!areaName){ return; } var names = areaName.split(","); if(names.length < 1){ return; } //根据需要设置某个地区的地图 var all = chinaMap.features; map = { "type": "FeatureCollection", "features": [] }; //默认获取省份省会坐标 geoMap = []; for (var j = 0; j < names.length; j++) { for (var i = 0; i < all.length; i++) { if(all[i].properties.name == names[j]){ map.features.push(all[i]); geoMap.push({ name: all[i].properties.centerName, value: [all[i].properties.center[0], all[i].properties.center[1], 12] }); break; } } } } //加载库区地图位置 function renderMap() { var myChart = mapChart; //注入地图边界 echarts.registerMap('chinaMapOutline', map); myChart.option.series[1].data = geoMap; myChart.chart.setOption(myChart.option, true); mapChart = myChart; } //更新库区定位点大小信息 function updateDeptMap() { var points = []; $.each(deptList, function(index, item) { var val = []; var name = ''; if(index == deptNum){ name = item.name; val = [item.lon, item.lat, 17]; }else { val = [item.lon, item.lat, 8]; } points.push({ name: name, value: val }); }); return points; } /** * 初始化加载地图 * @param areaName 默认全国地图 */ function initMap() { var myChart = echarts.init(document.getElementById('map')); //注入地图边界 echarts.registerMap('chinaMapOutline', map); var option = { backgroundColor:'transparent', tooltip: { show: false, trigger: 'item' }, geo: { silent: true, map: 'chinaMapOutline', show: false, zoom: 0.8, top: '0%', label: { normal: { show: false, textStyle: { color: '#fff' } }, emphasis: { textStyle: { color: '#fff' } } }, roam: false, itemStyle: { normal: { areaColor: { type: 'linear-gradient', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(45,68,121,0.15)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(45,68,121,0.18)' // 100% 处的颜色 } ], global: true // 缺省为 false }, // areaColor: 'transparent', borderColor: '#83BAFF', borderWidth: 1, shadowColor: 'rgba(56,164,255,.26)', opacity: 0.5, shadowOffsetX: 5, shadowOffsetY: 5, shadowBlur: 5, show: true, // 是否显示对应地名 textStyle: { //字体颜色 color: '#797979' } }, emphasis: { color: 'transparent', //悬浮背景 textStyle: { color: '#fff' } } } }, visualMap: { type: 'piecewise', show: false, textStyle: { color: '#fff' }, color: ['#68cc5c'] }, series: [ { map: 'chinaMapOutline', silent: true, type: 'map', zoom: 1, label: { normal: { show: false, textStyle: { color: '#fff' } }, emphasis: { textStyle: { color: '#fff' } } }, top: '0%', roam: false, itemStyle: { normal: { areaColor: 'rgba(0,255,255,.02)', borderColor: '#02a5f4', borderWidth: 1.5, shadowColor: '#02a5f4', shadowOffsetX: 0, shadowOffsetY: 4, shadowBlur: 10, }, emphasis: { areaColor: 'transparent', //悬浮背景 textStyle: { color: '#fff' } } } }, { type: 'effectScatter', coordinateSystem: 'geo', data: geoMap, symbolSize: function (val) { return val[2]; }, rippleEffect: { color: '#68cc5c' }, showEffectOn: 'render', label: { normal: { show: true, position: 'top', formatter: '{b}', color: '#ffffff', fontSize: nowSize(15) }, emphasis: { show: false } }, itemStyle: { emphasis: { borderColor: '#fff', borderWidth: 1 } } } ] }; myChart.setOption( option ); mapChart = {"chart": myChart, "option": option}; } /** * 切换天气图片 * @param type */ function weatherImgSwitch( type ) { var img = "qing"; if(type.indexOf("雷") != -1){ img = "lei"; }else if(type.indexOf("晴") != -1){ img = "qing"; } else if(type.indexOf("沙尘") != -1){ img = "shachen"; } else if(type.indexOf("雾") != -1){ img = "wu"; } else if(type.indexOf("雪") != -1){ img = "xue"; } else if(type.indexOf("阴") != -1){ img = "yin"; } else if(type.indexOf("雨") != -1){ img = "yu"; } else if(type.indexOf("雨夹雪") != -1){ img = "yujiaxue"; } else if(type.indexOf("多云") != -1){ img = "yun"; } else if(type.indexOf("阵雨") != -1){ img = "zhenyu"; } document.getElementById("weatherImg").classList.remove( "yun" ); document.getElementById("weatherImg").classList.add( img ); } /** * 格式化日期 * @param fmt * @param date * @return {*} */ function formatDate (fmt, date) { var ret; var opt = { "Y+": date.getFullYear().toString(), // 年 "m+": (date.getMonth() + 1).toString(), // 月 "d+": date.getDate().toString(), // 日 "H+": date.getHours().toString(), // 时 "M+": date.getMinutes().toString(), // 分 "S+": date.getSeconds().toString() // 秒 // 有其他格式化字符需求可以继续添加,必须转化成字符串 }; for (var k in opt) { ret = new RegExp("(" + k + ")").exec(fmt); if (ret) { fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) } } return fmt; } /** *获取当前星期几 */ function getWeekDate() { var now = new Date(); var day = now.getDay(); var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); var week = weeks[day]; return week; } /** * 判断底部是否出现滚动条 * @return {boolean} */ function hasScrollbar() { return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight; } // 退出全屏 function exitFullscreen() { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } screen = true; } // 进入全屏 function requestFullScreen() { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } screen = false; }