var nowClientWidth = document.documentElement.clientWidth; // 当前视口宽度
|
var hisVarietyChart = null; // 品种柱状图
|
var deptList = null; // 所有库区列表信息
|
var snapList = null; // 当前闪烁地区的编码
|
var deptListMap = {};
|
var timer; // 库区定时
|
var deptNum = 0; //库区切换下标
|
var mapChart = null;
|
var geoMap = [{name: '伊犁哈萨克自治州', value: [81.317946, 43.92186]}]; //默认点位
|
var map = chinaMapOutline; //默认加载全国地图
|
|
$(function () {
|
// 初始化页面
|
init();
|
|
// 初始化WebSocket
|
// initWS(companyId,bizType, bizTag, userId);
|
});
|
|
// 初始化页面
|
function init() {
|
// 适应屏幕大小
|
initScrollbar();
|
|
// 初始化图表
|
initChart();
|
|
//初始化地图
|
initMap();
|
|
// 时间
|
initTime();
|
|
if (deptAllList) {
|
for (var i = 0; i < deptAllList.length; i++) {
|
deptListMap[deptAllList[i].id] = deptAllList[i].kqmc;
|
}
|
}
|
|
//初始化标语
|
initDicSlogan();
|
|
//加载指定地区地图
|
renderMapPoints("乌鲁木齐市,克拉玛依市,吐鲁番市,哈密市,昌吉回族自治州,博尔塔拉蒙古自治州,巴音郭楞蒙古自治州,阿克苏地区,克孜勒苏柯尔克孜自治州,喀什地区,和田地区,伊犁哈萨克自治州,塔城地区,阿勒泰地区");
|
|
//统计相关数量信息，包含库点及粮食数量
|
ajaxFoodNum();
|
|
//请求监管库区信息
|
ajaxDeptList();
|
|
//请求抓拍跟踪信息
|
ajaxSnapList();
|
|
clearInterval(timer);
|
timing();
|
}
|
|
// socket信息返回處理
|
function socketOnMessage(pocket) {
|
if (pocket.bizId === "slogan") {
|
var data = pocket.data;
|
dicSlogan = data;
|
initDicSlogan();
|
}
|
}
|
|
/**
|
* 请求获取库区相关信息
|
*/
|
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
|
}),
|
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.snapTime+'</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){
|
deptNum = 0;
|
}
|
|
renderDeptInfo();
|
deptNum += 1;
|
}, 5000);
|
}
|
|
//加载库区地图位置
|
function renderMap() {
|
var myChart = mapChart;
|
//注入地图边界
|
echarts.registerMap('chinaMapOutline', map);
|
myChart.option.series[1].data = geoMap;
|
myChart.chart.setOption(myChart.option, true);
|
mapChart = myChart;
|
}
|
|
//加载指定地区地图和点位
|
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]);
|
// if(all[i].properties.name === "伊犁哈萨克自治州"){
|
geoMap.push({
|
name: all[i].properties.centerName,
|
value: [all[i].properties.center[0], all[i].properties.center[1], 12]
|
});
|
// }
|
// renderMap();
|
break;
|
}
|
}
|
}
|
}
|
|
/**
|
* 初始化加载地图
|
* @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};
|
}
|
|
/**
|
* 更新AI动态分析
|
* @param data
|
*/
|
function renderMsg() {
|
var html = '';
|
var num1 = '';
|
var num7 = '';
|
var flag = false;
|
if (deptList != null && deptList.length > 0) {
|
$.each(deptList, function (index, item) {
|
if(item.dailyTotal === 0){
|
num1 = '当日一切正常';
|
}else{
|
num1 = '当日数量'+ item.dailyTotal + '个';
|
}
|
if(item.warnNum7 === 0){
|
num7 = '近七天一切正常';
|
}else{
|
num7 = '近七天数量'+ item.warnNum7 + '个';
|
}
|
html += '<div class="panel-content-body-tr">';
|
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>';
|
})
|
}
|
if(flag){
|
$("#panel-title").html('库区AI事件信息 <i class="dot"></i>');
|
}
|
$("#inventoryInfo").html(html);
|
}
|
|
/**
|
* 请求获取库区相关信息
|
*/
|
function ajaxDeptList() {
|
deptList = null;
|
$.ajax({
|
type: "POST",
|
url: "/group/index-dept-list",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify({
|
"companyId": companyId
|
}),
|
success: function (result) {
|
if (result.code == "0000") {
|
deptList = result.data;
|
renderDeptInfo();
|
renderMsg();
|
}
|
},
|
error: function (error) {
|
|
}
|
});
|
}
|
|
/**
|
* 渲染库区信息
|
*/
|
function renderDeptInfo() {
|
if (deptList == null || deptList.length <= 0) {
|
return;
|
}
|
|
$("#county").html(deptList[deptNum].county);
|
$("#deptName").html(deptList[deptNum].deptName);
|
$("#inNum").html(deptList[deptNum].inNum);
|
$("#outNum").html(deptList[deptNum].outNum);
|
$("#depotNumber").html(deptList[deptNum].depotNumber);
|
$("#depotBankNumber").html(deptList[deptNum].depotBankNumber);
|
$("#storageNum").html(deptList[deptNum].storageNum);
|
|
//加载库区地图
|
geoMap = updateDeptMap();
|
renderMap();
|
}
|
|
function updateDeptMap() {
|
var points = [];
|
$.each(deptList, function(index, item) {
|
var val = [];
|
var name = '';
|
if(index === deptNum){
|
name = item.deptName;
|
val = [item.jd, item.wd, 17];
|
}else {
|
val = [item.jd, item.wd, 8];
|
}
|
points.push({
|
name: name,
|
value: val
|
});
|
});
|
return points;
|
}
|
|
|
/**
|
* 请求获取统计数量信息
|
*/
|
function ajaxFoodNum() {
|
$.ajax({
|
type: "POST",
|
url: "/group/index-num",
|
dataType: "json",
|
contentType: "application/json;charset=UTF-8",
|
data: JSON.stringify({
|
"companyId": companyId
|
}),
|
success: function (result) {
|
if (result.code === "0000") {
|
var data = result.data;
|
renderFoodNum(data);
|
}
|
},
|
error: function (error) {
|
|
}
|
});
|
}
|
|
/**
|
* 渲染统计数量信息
|
* @param data
|
*/
|
function renderFoodNum(data) {
|
|
if (!data) {
|
return;
|
}
|
|
/*----- 监管库点信息 -----*/
|
$("#companyNum").html(data.companyNum);
|
$("#deptNum").html(data.deptNum);
|
$("#depotNum").html(data.depotNum);
|
$("#depotBankNum").html(data.depotBankNum);
|
|
/*----- 监管数量信息 -----*/
|
if (data.foodSum.length > 8 || data.packFoodSum.length > 8) {
|
$("#foodSum").css("font-size", "32px");
|
$("#packFoodSum").css("font-size", "32px");
|
}
|
$("#foodSum").html(data.foodSum);
|
$("#packFoodSum").html(data.packFoodSum);
|
|
/*----- 分品种柱状图 -----*/
|
if (data.xaxis.length > 0 && data.seriesData.length > 0) {
|
var hisFoodVariety = hisVarietyChart;
|
hisFoodVariety.option.xAxis.data = data.xaxis;
|
hisFoodVariety.option.series[0].data = data.seriesData;
|
hisFoodVariety.chart.setOption(hisFoodVariety.option, true);
|
hisVarietyChart = hisFoodVariety;
|
}
|
}
|
|
// 刷新时间
|
function initTime() {
|
setInterval(function () {
|
$("#navBarDate").html(formatDate('mm月dd日', new Date()));
|
$("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
|
$("#navBarWeek").html(getWeekDate());
|
}, 1000);
|
}
|
|
/**
|
* 初始化屏幕大小
|
*/
|
function initScrollbar() {
|
|
if (hisVarietyChart) {
|
hisVarietyChart.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++;
|
}
|
}
|
}, 60);
|
}
|
|
/**
|
* 判断底部是否出现滚动条
|
*
|
* @return {boolean}
|
*/
|
function hasScrollbar() {
|
return document.getElementById('inventoryInfo').clientHeight > document.getElementById('inventoryInfoBox').clientHeight;
|
}
|
|
/**
|
* 初始化图表
|
*/
|
function initChart() {
|
/* 库存图表加载 */
|
allInventoryChartLoad(
|
['小麦', '玉米', '稻谷', '成品粮', '成品油', '其他'],
|
[1000, 1200, 1500, 1300, 1100, 1600]
|
);
|
}
|
|
/**
|
* 柱状图加载
|
*
|
* @param names
|
* @param data
|
*/
|
function allInventoryChartLoad(names, data) {
|
var dom = document.getElementById('allInventoryChart');
|
var myChart = echarts.init(dom);
|
|
var options = {
|
grid: {
|
left: '2%',
|
right: '1%',
|
bottom: '1%',
|
top: '15%',
|
containLabel: true
|
},
|
tooltip: {
|
show: true,
|
},
|
xAxis: {
|
type: 'category',
|
// 网格样式
|
splitLine: {
|
show: false,
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: "#39c9ff"
|
}
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
textStyle: {
|
color: '#ffffff',
|
fontSize: nowSize(16),
|
},
|
interval: 0,
|
margin: nowSize(15),
|
},
|
data: names,
|
},
|
yAxis: {
|
type: 'value',
|
// 网格样式
|
splitLine: {
|
show: false,
|
},
|
axisLine: {
|
show: false,
|
},
|
axisTick: {
|
show: false,
|
},
|
axisLabel: {
|
show: false,
|
},
|
},
|
series: [{
|
name: '',
|
data: data,
|
type: 'bar',
|
barWidth: '40%',
|
label: {
|
show: true,
|
position: 'top',
|
color: '#ffffff',
|
fontSize: nowSize(12),
|
distance: 0,
|
lineHeight: nowSize(25),
|
},
|
// showBackground: false,
|
// backgroundStyle: {
|
// color: 'rgba(16,52,94,0.41)',
|
// },
|
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: '#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'}]
|
),
|
new echarts.graphic.LinearGradient(
|
0, 1, 0, 0,
|
[{offset: 0, color: '#af1f2e'}, {offset: 1, color: '#ef3476'}]
|
)
|
];
|
|
return colorList[params.dataIndex]
|
}
|
}
|
}
|
}]
|
};
|
myChart.setOption(options);
|
hisVarietyChart = {"chart": myChart, "option": options};
|
}
|
|
/**
|
* 换算方法
|
*
|
* @param val
|
* @param initWidth
|
* @return {number}
|
*/
|
nowSize = function (val) {
|
var initWidth = 1920;
|
return val * (nowClientWidth / initWidth);
|
};
|
|
/**
|
* 格式化日期
|
*
|
* @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;
|
}
|
|
// 右下角提醒信息
|
function showTip(msg) {
|
layer.open({
|
// type: 1,
|
btn: null,
|
title: "提示",
|
skin: 'layui-layer-lan',
|
content: msg,
|
// offset: 'rb',
|
offset: 'rt',
|
time: 1500,
|
area: ['250px', '120px'],
|
anim: 1,
|
// shade: false,
|
shadeClose: true
|
});
|
}
|
