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;
}