var colors = {};
|
var map;
|
var type = "0";
|
var county = "all";
|
var breedChart = null;
|
var foodNumPerColors = ["0, 255, 255", "50, 255, 50", "255, 215, 0", "255, 69, 0", "0, 191, 255", "30, 144, 255", "255, 20, 147", "255, 105, 180", "0, 255, 127", "255, 165, 0", "255, 218, 185", "255, 255, 0", "0, 250, 155", "255, 99, 71"];
|
//var switch2AreaNode2;
|
|
|
let iframe = document.getElementById("gisFrame");
|
|
// ============ 接收iframe消息 ============
|
window.addEventListener("message", function (event) {
|
// 生产环境建议校验 event.origin
|
const data = event.data;
|
|
if (data && data.type === "CLICK_BUILDING") {
|
// alert(`点击了仓库 ${data.data.uid}`);
|
renderDepotMess(data.data.uid);
|
}
|
});
|
|
$(function () {
|
//初始化时间
|
initTime();
|
initDicSlogan();
|
|
//初始化左侧图表
|
pieChartLoad(
|
[
|
{value: "0", name: '伊宁市'},
|
{value: "0", name: '奎屯市'},
|
{value: "0", name: '霍尔果斯市'},
|
{value: "0", name: '伊宁县'},
|
{value: "0", name: '察布查尔锡伯自治县'},
|
{value: "0", name: '霍城县'},
|
{value: "0", name: '巩留县'},
|
{value: "0", name: '新源县'},
|
{value: "0", name: '昭苏县'},
|
{value: "0", name: '特克斯县'},
|
{value: "0", name: '尼勒克县'}
|
],
|
'breedChart'
|
);
|
window.onresize = function (e) {
|
if (breedChart) {
|
breedChart.resize();
|
}
|
}
|
|
//渲染部门
|
renderList();
|
|
renderNum();
|
//定位到新疆省
|
setTimeout(function () {
|
positioning("650000");
|
}, 2000);
|
|
$('.sup-menu-title').click(function () {
|
var kai = $(this).parent(".sup-menu-group")
|
if (kai.hasClass('menu-group')) {
|
kai.removeClass('menu-group')
|
} else {
|
kai.addClass('menu-group')
|
}
|
});
|
$('.sup-menu-h').click(function () {
|
var kai2 = $(this).parents(".sup-menu-ul")
|
if (kai2.hasClass('menu-h')) {
|
kai2.removeClass('menu-h')
|
} else {
|
kai2.addClass('menu-h')
|
}
|
});
|
|
// 初始化WebSocket
|
// initWS(companyId, bizType, bizTag, userId);
|
|
renderDeptMess(defaultDeptId);
|
});
|
|
function renderDeptMess(deptId) {
|
for (let i = 0; i < deptList.length; i++) {
|
if( deptId == deptList[i].deptId){
|
let htmlMess=`
|
<div class="panel-title">库点信息</div>
|
<div class="right-topInfo-address">
|
<i class="i-icon32"><img th:src="@{/img/web/group/icon-address.png}" alt=""></i>
|
<span >${deptList[i].county}</span>
|
</div>
|
<div class="panel-content">
|
<h2 class="right-topInfo-kd-h" >${deptList[i].deptName}</h2>
|
<div class="right-topInfo-kd">
|
<div class="right-topInfo-kd-item">
|
<h3>当日入库单数（个）</h3>
|
<p >${deptList[i].inNum}</p>
|
</div>
|
<div class="right-topInfo-kd-item">
|
<h3>当日出库单数（个）</h3>
|
<p >${deptList[i].outNum}</p>
|
</div>
|
</div>
|
<ul class="right-topInfo-kd-list right-topInfo-jg">
|
<li>
|
<p >${deptList[i].depotNumber}</p>
|
<h3>仓库数（个）</h3>
|
</li>
|
<li>
|
<p >${deptList[i].depotBankNumber}</p>
|
<h3>质押仓数（个）</h3>
|
</li>
|
<li>
|
<p >${deptList[i].storageNum}</p>
|
<h3>库存数（吨）</h3>
|
</li>
|
</ul>
|
</div>`;
|
$("#areaInformation").html(htmlMess);
|
}
|
}
|
}
|
|
|
function renderDepotMess(depotId) {
|
for (let i = 0; i < depotList.length; i++) {
|
if( depotId == depotList[i].depotId){
|
|
let htmlMess=`
|
<div class="panel-title">库点信息</div>
|
<div class="right-topInfo-address">
|
<i class="i-icon32"><img th:src="@{/img/web/group/icon-address.png}" alt=""></i>
|
<span>${depotList[i].county}</span>
|
</div>
|
<div class="panel-content">
|
<h2 class="right-topInfo-kd-h">${depotList[i].deptName}</h2>
|
<div class="modeling-left-topInfo-kd">
|
<div class="modeling-left-topInfo-ck">
|
<h1>${depotList[i].depotName}</h1>
|
</div>
|
</div>
|
<ul class="modeling-left-topInfo-kd-list right-topInfo-jg">
|
<li>
|
<p>${depotList[i].storageNum}</p>
|
<h3>库存数（吨）</h3>
|
</li>
|
</ul>
|
</div>
|
`;
|
$("#areaInformation").html(htmlMess);
|
}
|
}
|
|
}
|
|
function socketOnMessage(pocket) {
|
//console.log(pocket);
|
if (pocket.bizId == "slogan") {
|
var data = pocket.data;
|
dicSlogan = data;
|
initDicSlogan();
|
}
|
}
|
|
// 刷新时间
|
function positioning(code) {
|
|
var kai = $("#prov");
|
if (kai.hasClass('menu-group')) {
|
kai.removeClass('menu-group')
|
} else {
|
kai.addClass('menu-group')
|
}
|
|
// renderAreas(code);
|
}
|
|
// 刷新时间
|
function initTime() {
|
setInterval(function () {
|
$("#navBarDate").html(formatDate('mm月dd日', new Date()));
|
$("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
|
$("#navBarWeek").html(getWeekDate());
|
}, 1000);
|
}
|
|
|
//库区点击事件
|
function clickDept(deptid) {
|
// 方案一：通知iframe切换库区
|
if (iframe.contentWindow) {
|
iframe.contentWindow.postMessage(
|
{
|
type: "CHANGE_AREA",
|
data: {uid: deptid},
|
},
|
"*", // 生产环境建议替换为具体域名
|
);
|
}
|
// 方案二：直接修改src（会重新加载页面）
|
// iframe.src = `http://172.67.157.132:5000?uid=${uid}`;
|
//切换库区的库点信息
|
renderDeptMess(deptid);
|
}
|
|
/**
|
* 渲染库区列表
|
*/
|
function renderList() {
|
if (areaList) {
|
var html = "";
|
var childs = [];
|
var childsItem = [];
|
var areas = [];
|
for (var i = 0; i < areaList.length; i++) {
|
html += "<div style=\"width: 340px; overflow: hidden\">" +
|
"<div id='prov' class=\"sup-menu-group menu-group\">" +
|
"<div class=\"sup-menu-title\">" +
|
"<i class=\"i-icon fl\"><img src=\"/img/web/group/icon-sj.png\"/></i>" +
|
"<a href=\"###\" onclick=\"clickDept('" + areaList[i].code + "')\">" +
|
// "<span class=\"i-icon32 fl\"><img src=\"/img/web/group/c-i2.png\"/></span>" +
|
(areaList[i].name ? areaList[i].name : "") +
|
"</a>" +
|
"</div>";
|
if (areaList[i].children && areaList[i].children.length > 0) {
|
childs = areaList[i].children;
|
for (var j = 0; j < childs.length; j++) {
|
//默认关闭库区
|
// html += "<ul class=\"sup-menu-ul menu-h\">" +
|
//默认展开库区
|
html += "<ul class=\"sup-menu-ul \">" +
|
"<li>" +
|
"<div class=\"sup-menu-h\">" +
|
"<i class=\"i-icon fl\"><img src=\"/img/web/group/icon-sj.png\"/></i>" +
|
"<a href=\"###\" onclick=\"clickDept('" + childs[j].code + "')\">" +
|
// "<span class=\"i-icon32 fl\"><img src=\"/img/web/group/c-i2.png\"/></span>" +
|
(childs[j].name ? childs[j].name : "") +
|
"</a>" +
|
"</div>";
|
if (childs[j].children && childs[j].children.length > 0) {
|
childsItem = childs[j].children;
|
for (var k = 0; k < childsItem.length; k++) {
|
html += "<div class=\"sup-menu-box\">" +
|
"<p>" +
|
"<span class=\"i-icon32 fl\"><img src=\"/img/web/group/icon-kuqu.png\"/></span>" +
|
"<a href=\"#\" onclick=\"clickDept('" + childsItem[k].code + "')\">" + childsItem[k].name + "</a>" +
|
"</p>" +
|
"</div>";
|
}
|
}
|
html += "</li>" +
|
"</ul>";
|
}
|
}
|
html += "</div>" +
|
"</div>";
|
}
|
|
$("#menuDiv").html(html);
|
}
|
}
|
|
|
function renderNum() {
|
$("#foodSum").html(gisData.deptNum);
|
|
let deptNum = 0;
|
var foodNumPerHtml = '';
|
for (var i = 0; i < gisData.deptList.length; i++) {
|
if ('0.0' != gisData.deptList[i].percent) {
|
foodNumPerHtml += '<li><div class="con" style="background-color: rgba(' + foodNumPerColors[i] + ',.05);">';
|
foodNumPerHtml += '<div class="dot" style="background-color: rgb(' + foodNumPerColors[i] + ');"></div>';
|
foodNumPerHtml += '<div class="num" style="color: rgb(' + foodNumPerColors[i] + ');">' + gisData.deptList[i].percent + '%</div>';
|
foodNumPerHtml += '<div class="type">' + gisData.deptList[i].name + '</div>';
|
foodNumPerHtml += '</div></li>';
|
deptNum += 1;
|
}
|
|
}
|
$("#foodSum").html(deptNum);
|
$("#foodNumPer").html(foodNumPerHtml);
|
if (gisData.deptList.length > 0) {
|
var varietyChart = breedChart;
|
varietyChart.option.series[0].data = gisData.deptList;
|
varietyChart.option.color = getHexColorsFromRGB(foodNumPerColors, gisData.deptList.length);
|
varietyChart.chart.setOption(varietyChart.option, true);
|
breedChart = varietyChart;
|
}
|
modelingBarChartLoad("ss");
|
}
|
|
|
/**
|
* 将 RGB 格式颜色转换为十六进制格式
|
* @param rgbColors RGB 颜色数组
|
* @param count 需要的颜色数量
|
* @returns {Array} 十六进制颜色数组
|
*/
|
function getHexColorsFromRGB(rgbColors, count) {
|
var hexColors = [];
|
for (var i = 0; i < count && i < rgbColors.length; i++) {
|
var rgb = rgbColors[i].split(',');
|
var r = parseInt(rgb[0]);
|
var g = parseInt(rgb[1]);
|
var b = parseInt(rgb[2]);
|
var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
hexColors.push(hex);
|
}
|
return hexColors;
|
}
|
|
|
|
|
/**
|
* 格式化日期
|
* @param fmt
|
* @param date
|
* @return {*}
|
*/
|
function formatDate(fmt, date) {
|
var ret;
|
const 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;
|
}
|
|
|
/**
|
* 格式化日期
|
* @param fmt
|
* @param date
|
* @return {*}
|
*/
|
function formatDate(fmt, date) {
|
var ret;
|
const 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 (let 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;
|
}
|
|
var navBarDateDom = document.getElementById('navBarDate');
|
var navBarTimeDom = document.getElementById('navBarTime');
|
var navBarWeekDom = document.getElementById('navBarWeek');
|
|
/*刷新时间*/
|
setInterval(function () {
|
navBarDateDom.innerHTML = formatDate('mm月dd日', new Date());
|
navBarTimeDom.innerHTML = formatDate('HH:MM:SS', new Date());
|
navBarWeekDom.innerHTML = getWeekDate();
|
}, 1000)
|
|
$(function () {
|
$('.m-nav .tit').click(function () {
|
$(this).siblings('.sub').stop().slideToggle();
|
|
});
|
$('.c-left .close').on('click', function () {
|
$('.c-left').addClass('hidden')
|
});
|
$('.c-left .o-btn').on('click', function () {
|
$('.c-left').removeClass('hidden')
|
});
|
$('.c-right .close').on('click', function () {
|
$('.c-right').addClass('hidden')
|
});
|
$('.c-right .o-btn').on('click', function () {
|
$('.c-right').removeClass('hidden')
|
});
|
|
});
|
