| | |
| | | var nowClientWidth = document.documentElement.clientWidth; // 当前视口宽度 |
| | | var hisVarietyChart = null; // 品种柱状图 |
| | | var deptList = null; // 所有库区列表信息 |
| | | var deptCode = null; // 当前闪烁地区的编码 |
| | | var snapList = null; // 当前闪烁地区的编码 |
| | | var deptListMap = {}; |
| | | var timer; // 库区定时 |
| | | var deptNum = 0; //库区切换下标 |
| | | var mapChart = null; |
| | |
| | | // 时间 |
| | | initTime(); |
| | | |
| | | if (deptAllList) { |
| | | for (var i = 0; i < deptAllList.length; i++) { |
| | | deptListMap[deptAllList[i].id] = deptAllList[i].kqmc; |
| | | } |
| | | } |
| | | |
| | | //初始化标语 |
| | | initDicSlogan(); |
| | | |
| | |
| | | //请求监管库区信息 |
| | | ajaxDeptList(); |
| | | |
| | | //请求抓拍跟踪信息 |
| | | ajaxSnapList(); |
| | | |
| | | clearInterval(timer); |
| | | timing(); |
| | | |
| | | //TODO 请求AI事件信息 |
| | | // ajaxMsg(); |
| | | |
| | | //TODO 请求抓拍跟踪信息 |
| | | // ajaxFoodNum(); |
| | | |
| | | |
| | | |
| | | //抓拍跟踪滚动 |
| | | jQuery(".block2").slide({ mainCell: ".bd ul", autoPage: true, effect: "topLoop", autoPlay: true, vis: 4 }); |
| | | jQuery(".follow").slide({ mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: 5, interTime: 50 }); |
| | | } |
| | | |
| | | // socket信息返回處理 |
| | |
| | | } |
| | | |
| | | /** |
| | | * 请求获取库区相关信息 |
| | | */ |
| | | function ajaxSnapList() { |
| | | snapList = null; |
| | | $.ajax({ |
| | | type: "POST", |
| | | url: "/group/index-snap-list", |
| | | dataType: "json", |
| | | contentType: "application/json;charset=UTF-8", |
| | | data: JSON.stringify({ |
| | | "companyId": companyId, |
| | | "deptId": deptId |
| | | }), |
| | | success: function (result) { |
| | | if (result.code == "0000") { |
| | | snapList = result.data; |
| | | renderSnap(); |
| | | } |
| | | }, |
| | | error: function (error) { |
| | | |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function renderSnap() { |
| | | var html = ''; |
| | | if (snapList != null && snapList.length > 0) { |
| | | $.each(snapList, function (index, item) { |
| | | html += '<li style="float: left; width: 246px;">'; |
| | | html += '<div class="item">'; |
| | | html += '<div class="pic">'; |
| | | html += '<img src="' + item.imgName + '" alt="">'; |
| | | html += '</div><div class="tit">' + item.time + '</div>'; |
| | | html += '<div class="tit" style="white-space: nowrap;">' + deptListMap[item.deptId] + '</div>'; |
| | | html += '</div></li>'; |
| | | }) |
| | | } else { |
| | | $.each(deptAllList, function (index, item) { |
| | | html += '<li style="float: left; width: 246px;">'; |
| | | html += '<div class="item">'; |
| | | html += '<div class="pic">'; |
| | | html += '<img src="/img/img-fail.jpg" alt="">'; |
| | | html += '</div><div class="tit">近期暂无抓拍图</div>'; |
| | | html += '<div class="tit" style="white-space: nowrap;">' + item.kqmc + '</div>'; |
| | | html += '</div></li>'; |
| | | }) |
| | | } |
| | | $("#snapList").html(html); |
| | | |
| | | //抓拍跟踪滚动 |
| | | jQuery(".block2").slide({mainCell: ".bd ul", autoPage: true, effect: "topLoop", autoPlay: true, vis: 4}); |
| | | jQuery(".follow").slide({mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: 5, interTime: 40}); |
| | | |
| | | } |
| | | |
| | | /** |
| | | * 库区定时切换 |
| | | */ |
| | | function timing() { |
| | | timer = setInterval(function() { |
| | | if(deptNum === deptList.length){ |
| | | timer = setInterval(function () { |
| | | if (deptNum === deptList.length) { |
| | | deptNum = 0; |
| | | } |
| | | |
| | |
| | | |
| | | //加载指定地区地图和点位 |
| | | function renderMapPoints(areaName) { |
| | | if(!areaName){ |
| | | if (!areaName) { |
| | | return; |
| | | } |
| | | var names = areaName.split(","); |
| | | if(names.length < 1){ |
| | | if (names.length < 1) { |
| | | return; |
| | | } |
| | | |
| | |
| | | geoMap = []; |
| | | for (var j = 0; j < names.length; j++) { |
| | | for (var i = 0; i < all.length; i++) { |
| | | if(all[i].properties.name === names[j]){ |
| | | if (all[i].properties.name === names[j]) { |
| | | map.features.push(all[i]); |
| | | // if(all[i].properties.name === "伊犁哈萨克自治州"){ |
| | | geoMap.push({ |
| | | name: all[i].properties.centerName, |
| | | value: [all[i].properties.center[0], all[i].properties.center[1], 12] |
| | | }); |
| | | geoMap.push({ |
| | | name: all[i].properties.centerName, |
| | | value: [all[i].properties.center[0], all[i].properties.center[1], 12] |
| | | }); |
| | | // } |
| | | // renderMap(); |
| | | break; |
| | |
| | | echarts.registerMap('chinaMapOutline', map); |
| | | |
| | | var option = { |
| | | backgroundColor:'transparent', |
| | | backgroundColor: 'transparent', |
| | | tooltip: { |
| | | show: false, |
| | | trigger: 'item' |
| | |
| | | type: 'effectScatter', |
| | | coordinateSystem: 'geo', |
| | | data: geoMap, |
| | | symbolSize: function (val) { |
| | | symbolSize: function (val) { |
| | | return val[2]; |
| | | }, |
| | | rippleEffect: { |
| | |
| | | ] |
| | | }; |
| | | |
| | | myChart.setOption( option ); |
| | | myChart.setOption(option); |
| | | mapChart = {"chart": myChart, "option": option}; |
| | | } |
| | | |
| | | /** |
| | | * 请求获取动态信息 |
| | | * 更新AI动态分析 |
| | | * @param data |
| | | */ |
| | | function ajaxMsg() { |
| | | $.ajax({ |
| | | type: "POST", |
| | | url: "../../visual/index-info", |
| | | dataType: "json", |
| | | contentType: "application/json;charset=UTF-8", |
| | | data: JSON.stringify({ |
| | | "companyId": companyId |
| | | }), |
| | | success: function (result) { |
| | | if (result.code == "0000") { |
| | | renderMsg(result.data); |
| | | } |
| | | }, |
| | | error: function (error) { |
| | | |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 更新动态信息 |
| | | function renderMsg(data) { |
| | | function renderMsg() { |
| | | var html = ''; |
| | | var flag = false; |
| | | var num1 = ''; |
| | | var num7 = ''; |
| | | if (data != null && data.length > 0) { |
| | | $.each(data, function (index, item) { |
| | | var deptAreaId = item.deptAreaId; |
| | | if(item.dailyTotal === 0){ |
| | | var flag = false; |
| | | if (deptList != null && deptList.length > 0) { |
| | | $.each(deptList, function (index, item) { |
| | | if (item.dailyTotal === 0) { |
| | | num1 = '当日一切正常'; |
| | | }else{ |
| | | num1 = '当日数量'+ item.dailyTotal + '个'; |
| | | } else if (item.dailyTotal < 0) { |
| | | num1 = '未检测到网关'; |
| | | } else { |
| | | num1 = '当日数量' + item.dailyTotal + '个'; |
| | | } |
| | | if(item.warnNum7 === 0){ |
| | | if (item.warnNum7 === 0) { |
| | | num7 = '近七天一切正常'; |
| | | }else{ |
| | | num7 = '近七天数量'+ item.warnNum7 + '个'; |
| | | } else { |
| | | num7 = '近七天数量' + item.warnNum7 + '个'; |
| | | } |
| | | html += '<div class="panel-content-body-tr">'; |
| | | if (item.level && item.level === "01") { |
| | | if (item.dailyTotal > 0) { |
| | | flag = true; |
| | | // html += '<img src="../../static/images/visual/l1.png" style="width:10%; height:85%;" alt="">'; |
| | | html += '<span class="body-item sp" style="color: #bc2032;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>'; |
| | | html += '<span class="body-item sp" style="color: #bc2032;">' + num1 + '</span>'; |
| | | html += '<span class="body-item sp" style="color: #bc2032;">' + num7 + '</span>'; |
| | | // html += '<span class="body-item" style="color: #bc2032; flex: 0.3;">' + item.createTime + '</span>'; |
| | | } else if (item.level && item.level === "02") { |
| | | flag = true; |
| | | // html += '<img src="../../static/images/visual/l2.png" style="width:10%; height:85%;" alt="">'; |
| | | html += '<span class="body-item sp" style="color: #f37b3d;" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>'; |
| | | html += '<span class="body-item sp" style="color: #f37b3d;">' + num1+ '</span>'; |
| | | html += '<span class="body-item sp" style="color: #f37b3d;">' + num7 + '</span>'; |
| | | // html += '<span class="body-item" style="color: #f37b3d; flex: 0.3;">' + item.createTime + '</span>'; |
| | | } else if (item.level && item.level === "03"){ |
| | | flag = true; |
| | | // html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">'; |
| | | html += '<span class="body-item sp" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>'; |
| | | html += '<span class="body-item sp">' + num1 + '</span>'; |
| | | html += '<span class="body-item sp">' + num7 + '</span>'; |
| | | // html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>'; |
| | | }else { |
| | | flag = true; |
| | | // html += '<img src="../../static/images/visual/l3.png" style="width:10%; height:85%;" alt="">'; |
| | | html += '<span class="body-item sp" onclick=\"toAiHome('+'\''+ deptAreaId+'\'' + ')\" >' + item.deptAreaName + '</span>'; |
| | | html += '<span class="body-item sp">' + num1 + '</span>'; |
| | | html += '<span class="body-item sp">' + num7 + '</span>'; |
| | | // html += '<span class="body-item" style="flex: 0.3;">' + item.createTime + '</span>'; |
| | | } |
| | | // if (item.warnNum7 > 10) { |
| | | // flag = true; |
| | | // html += '<span class="body-item sp" style="color: #bc2032;flex: 1.5;">' + item.deptName + '</span>'; |
| | | // html += '<span class="body-item sp" style="color: #bc2032;">' + num1 + '</span>'; |
| | | // html += '<span class="body-item sp" style="color: #bc2032;">' + num7 + '</span>'; |
| | | // } else if (item.warnNum7 > 1 && item.warnNum7 < 10) { |
| | | // flag = true; |
| | | // html += '<span class="body-item sp" style="color: #f37b3d;flex: 1.5;">' + item.deptName + '</span>'; |
| | | // html += '<span class="body-item sp" style="color: #f37b3d;">' + num1+ '</span>'; |
| | | // html += '<span class="body-item sp" style="color: #f37b3d;">' + num7 + '</span>'; |
| | | // }else { |
| | | html += '<span class="body-item sp" style="flex: 1.5;">' + item.deptName + '</span>'; |
| | | html += '<span class="body-item sp">' + num1 + '</span>'; |
| | | html += '<span class="body-item sp">' + num7 + '</span>'; |
| | | // } |
| | | html += '</div>'; |
| | | }) |
| | | } else { |
| | | if (deptAreaList != null && deptAreaList.length > 0) { |
| | | $.each(deptAreaList, function (index, item) { |
| | | html += '<div class="panel-content-body-tr">'; |
| | | html += '<span class="body-item sp">' + item.name + '</span>'; |
| | | html += '<span class="body-item sp">' + '当日分析一切正常' + '</span>'; |
| | | html += '<span class="body-item" style="flex: 0.3;">' + formatDate('mm/dd', new Date()) + '</span>'; |
| | | html += '</div>'; |
| | | }); |
| | | } |
| | | } |
| | | $("#panel-title").html('监管动态信息 <i class="dot"></i>'); |
| | | if (flag) { |
| | | $("#panel-title").html('库区AI事件信息 <i class="dot"></i>'); |
| | | } |
| | | $("#inventoryInfo").html(html); |
| | | } |
| | | |
| | | /** |
| | | * 跳转至后台预警页面 |
| | | * @param deptAreaId |
| | | */ |
| | | function toAiHome(deptAreaId) { |
| | | var url = "../home?t=WarnInfo&deptAreaId="+deptAreaId; |
| | | window.parent.open(url, "_self"); |
| | | } |
| | | |
| | | /** |
| | |
| | | if (result.code == "0000") { |
| | | deptList = result.data; |
| | | renderDeptInfo(); |
| | | renderMsg(); |
| | | } |
| | | }, |
| | | error: function (error) { |
| | |
| | | |
| | | function updateDeptMap() { |
| | | var points = []; |
| | | $.each(deptList, function(index, item) { |
| | | $.each(deptList, function (index, item) { |
| | | var val = []; |
| | | var name = ''; |
| | | if(index === deptNum){ |
| | | if (index === deptNum) { |
| | | name = item.deptName; |
| | | val = [item.jd, item.wd, 17]; |
| | | }else { |
| | | } else { |
| | | val = [item.jd, item.wd, 8]; |
| | | } |
| | | points.push({ |
| | |
| | | return points; |
| | | } |
| | | |
| | | /* ---------- 获取要切换库区的数据信息 ---------- */ |
| | | function getChangeDeptArea(id) { |
| | | deptAreaList = []; |
| | | index1 = 0; |
| | | clearInterval(timer1); |
| | | |
| | | if (id) { |
| | | if (id === "511400") { |
| | | deptAreaList = deptAreaAllList; |
| | | } else { |
| | | if (deptAreaAllList != null && deptAreaAllList.length > 0) { |
| | | $.each(deptAreaAllList, function (index, item) { |
| | | if (id.length > 6 && id == item.deptCompany) { |
| | | deptAreaList.push(item); |
| | | } |
| | | if (id.length == 6 && id == item.deptCounty) { |
| | | deptAreaList.push(item); |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } else { |
| | | deptAreaList = deptAreaAllList; |
| | | } |
| | | |
| | | deptAreaSwitch(); |
| | | } |
| | | |
| | | /* ---------- 库区定时切换 ---------- */ |
| | | function deptAreaSwitch() { |
| | | timer1 = setInterval(function () { |
| | | if (index1 == deptAreaList.length) { |
| | | index1 = 0; |
| | | } |
| | | |
| | | renderDeptArea(); |
| | | |
| | | index1 += 1; |
| | | |
| | | }, 3000); |
| | | } |
| | | |
| | | // 更新库区信息 |
| | | function renderDeptArea() { |
| | | |
| | | if (deptAreaList == null || deptAreaList.length <= 0) { |
| | | return; |
| | | } |
| | | |
| | | $("#cityAndCounty").html(deptAreaList[index1].deptCityName + "-" + deptAreaList[index1].deptCountyName); |
| | | $("#deptAreaName").html(deptAreaList[index1].name); |
| | | $("#depotNum").html(deptAreaList[index1].depotNum == null ? "0" : deptAreaList[index1].depotNum); |
| | | $("#depotOilNum").html(deptAreaList[index1].depotOilNum == null ? "0" : deptAreaList[index1].depotOilNum); |
| | | |
| | | if (deptAreaList[index1].storageStr.length > 9 |
| | | || deptAreaList[index1].oilStorageStr.length > 9 |
| | | || deptAreaList[index1].areaStr.length > 9) { |
| | | $("#foodNum").css("font-size", "28px"); |
| | | $("#oilNum").css("font-size", "28px"); |
| | | $("#area").css("font-size", "28px"); |
| | | } else if(deptAreaList[index1].storageStr.length > 5 |
| | | || deptAreaList[index1].oilStorageStr.length > 5 |
| | | || deptAreaList[index1].areaStr.length > 5){ |
| | | $("#foodNum").css("font-size", "30px"); |
| | | $("#oilNum").css("font-size", "30px"); |
| | | $("#area").css("font-size", "30px"); |
| | | } else { |
| | | $("#foodNum").css("font-size", "46px"); |
| | | $("#oilNum").css("font-size", "46px"); |
| | | $("#area").css("font-size", "46px"); |
| | | } |
| | | $("#foodNum").html(deptAreaList[index1].storageStr); |
| | | $("#oilNum").html(deptAreaList[index1].oilStorageStr); |
| | | $("#area").html(deptAreaList[index1].areaStr); |
| | | |
| | | if (deptCode) { |
| | | $("#" + deptCode).removeClass("kuqu-h"); |
| | | } |
| | | deptCode = deptAreaList[index1].deptCounty; |
| | | $("#" + deptCode).addClass("kuqu-h"); |
| | | } |
| | | |
| | | /** |
| | | * 请求获取统计数量信息 |
| | |
| | | $("#depotBankNum").html(data.depotBankNum); |
| | | |
| | | /*----- 监管数量信息 -----*/ |
| | | if (data.foodSum.length > 8 || data.packFoodSum.length > 8) { |
| | | // if (data.foodSum.length > 8 || data.packFoodSum.length > 8) { |
| | | // $("#foodSum").css("font-size", "32px"); |
| | | // $("#packFoodSum").css("font-size", "32px"); |
| | | // } |
| | | if (data.foodSum.length > 8) { |
| | | $("#foodSum").css("font-size", "32px"); |
| | | $("#packFoodSum").css("font-size", "32px"); |
| | | } |
| | | $("#foodSum").html(data.foodSum); |
| | | $("#packFoodSum").html(data.packFoodSum); |
| | | // $("#packFoodSum").html(data.packFoodSum); |
| | | |
| | | /*----- 分品种柱状图 -----*/ |
| | | if (data.xaxis.length > 0 && data.seriesData.length > 0) { |
| | |
| | | function initChart() { |
| | | /* 库存图表加载 */ |
| | | allInventoryChartLoad( |
| | | ['小麦', '玉米', '稻谷', '成品粮', '成品油', '其他'], |
| | | ['小麦', '玉米', '稻谷', '成品粮', '成品油', '其他'], |
| | | [1000, 1200, 1500, 1300, 1100, 1600] |
| | | ); |
| | | } |