var colors = {};
|
var map;
|
var disProvince;//行政区颜色渲染
|
var deptListMap = {};
|
var allAreaMap = {};
|
var markers = [];//点标记
|
var type = "0";
|
var county = "all";
|
|
//var switch2AreaNode2;
|
|
$(function () {
|
//所有库区
|
if (deptList) {
|
for (var i = 0; i < deptList.length; i++) {
|
deptListMap[deptList[i].id] = deptList[i];
|
}
|
}
|
//所有省市
|
if (allArea) {
|
for (var i = 0; i < allArea.length; i++) {
|
allAreaMap[allArea[i].code] = allArea[i];
|
}
|
}
|
|
//初始化时间
|
initTime();
|
|
//初始化地图
|
initMap();
|
|
//左侧图表
|
pieChartLoad(
|
[
|
{value: "0.000", name: '稻谷'},
|
{value: "0.000", name: '玉米'},
|
{value: "0.000", name: '小麦'}
|
],
|
'breedChart'
|
);
|
|
//渲染部门
|
renderList();
|
|
setTimeout(function () {
|
renderAreas(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')
|
}
|
});
|
});
|
|
// 刷新时间
|
function initTime() {
|
setInterval(function () {
|
$("#navBarDate").html(formatDate('mm月dd日', new Date()));
|
$("#navBarTime").html(formatDate('HH:MM:SS', new Date()));
|
$("#navBarWeek").html(getWeekDate());
|
}, 1000);
|
}
|
|
function initMap() {
|
map = new AMap.Map('map_container', {
|
center: [83.721646, 40.627714],
|
zoom: 5.6,
|
mapStyle: 'amap://styles/41f8248740d3659ddc65dc363078592c',
|
// rotateEnable:true,
|
// pitchEnable:true,
|
// pitch: 0,
|
// rotation: 0,
|
resizeEnable: true
|
//viewMode:'3D', //开启3D视图,默认为关闭
|
});
|
|
new AMap.DistrictSearch({
|
extensions: 'all',
|
subdistrict: 0
|
}).search('新疆维吾尔自治区', function (status, result) {
|
// 外多边形坐标数组和内多边形坐标数组
|
var outer = [
|
new AMap.LngLat(-360, 90, true),
|
new AMap.LngLat(-360, -90, true),
|
new AMap.LngLat(360, -90, true),
|
new AMap.LngLat(360, 90, true),
|
];
|
var holes = result.districtList[0].boundaries
|
|
var pathArray = [
|
outer
|
];
|
pathArray.push.apply(pathArray, holes)
|
var polygon = new AMap.Polygon({
|
pathL: pathArray,
|
strokeColor: '#71B3ff',//#00eeff
|
strokeWeight: 1,
|
fillColor: '#000000',//#71B3ff
|
fillOpacity: 0.4
|
});
|
polygon.setPath(pathArray);
|
map.add(polygon);
|
})
|
|
//console.log(colors);
|
|
//-------------------------------------------------------------------------------------------------------------------------
|
|
|
//默认行政区域编码
|
// renderColor(defaultAreaCode);
|
}
|
|
/**
|
* 获取市州下库区信息
|
*/
|
function getDeptArea(province, city, county) {
|
var list = [];
|
if (deptList) {
|
//省
|
if (province && province.length > 0) {
|
var str1 = province.substring(0, 2);
|
for (var i = 0; i < deptList.length; i++){
|
if(deptList[i].xzqhdm.startsWith(str1)){
|
list.push(deptList[i]);
|
}
|
}
|
}
|
//市州
|
if (city && city.length > 0) {
|
var str2 = city.substring(0, 4);
|
for (var i = 0; i < deptList.length; i++) {
|
if(deptList[i].xzqhdm.startsWith(str2)){
|
list.push(deptList[i]);
|
}
|
}
|
}
|
//区县
|
if (county && county.length > 0) {
|
for (var i = 0; i < deptList.length; i++) {
|
if(deptList[i].xzqhdm === county){
|
list.push(deptList[i]);
|
}
|
}
|
}
|
}
|
|
return list;
|
}
|
|
/**
|
* 用户点击城市或者县级区级渲染库区点位
|
*/
|
function renderAreas(code) {
|
var d = allAreaMap[code];
|
if (d) {
|
closeInfoWindow();
|
removeColor();
|
delMarker();
|
renderColor(code);
|
var a = [];
|
//省
|
if ("1" == d.type) {
|
a = getDeptArea(code, "", "");
|
}
|
//市州
|
if ("2" == d.type) {
|
a = getDeptArea("", code, "")
|
}
|
//区县
|
if ("3" == d.type) {
|
a = getDeptArea("", "", code)
|
}
|
if (a && a.length > 0) {
|
for (var i = 0; i < a.length; i++) {
|
addMarker(a[i], false);
|
}
|
}
|
//刷新数据
|
county = code;
|
// ajaxFoodNum();
|
} else {
|
console.log("没有获取到该行政区划:" + code);
|
}
|
}
|
|
/**
|
* 渲染库区信息弹窗
|
* @param deptAreaId
|
*/
|
function showAreaInfo(deptAreaId) {
|
var d = deptListMap[deptAreaId];
|
if (d) {
|
closeInfoWindow();
|
removeColor();
|
delMarker();
|
//map.setCity(d.deptCounty);
|
// map.setZoom(10);
|
renderColor(d.deptCounty);
|
addMarker(d, true);
|
} else {
|
console.log("没有获取到该库区:" + deptAreaId);
|
}
|
}
|
|
/**
|
* 渲染库区列表
|
*/
|
function renderList() {
|
if (areaList) {
|
var html = "";
|
var childs = [];
|
var childsItem = [];
|
var areas = [];
|
for (var i = 0; i < areaList.length; i++) {
|
html += "<div style=\"width: 305px; overflow: hidden\">" +
|
"<div 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=\"renderAreas('" + 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\">" +
|
"<li>" +
|
"<div class=\"sup-menu-h\">" +
|
"<i class=\"i-icon fl\"><img src=\"/img/web/group/icon-sj.png\"/></i>" +
|
"<a href=\"###\" onclick=\"renderAreas('" + 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 j = 0; j < childsItem.length; j++) {
|
html += "<ul class=\"sup-menu-ul menu-h\">" +
|
"<li>" +
|
"<div class=\"sup-menu-h\">" +
|
"<i class=\"i-icon fl\"><img src=\"/img/web/group/icon-sj.png\"/></i>" +
|
"<a href=\"###\" onclick=\"renderAreas('" + childsItem[j].code + "')\">" +
|
"<span class=\"i-icon32 fl\"><img src=\"/img/web/group/c-i2.png\"/></span>" +
|
(childsItem[j].name ? childsItem[j].name : "") +
|
"</a>" +
|
"</div>";
|
areas = getDeptArea("","", childsItem[j].code);
|
if (areas && areas.length > 0) {
|
for (var k = 0; k < areas.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=\"showAreaInfo('" + areas[k].id + "')\">" + areas[k].kqmc + "</a>" +
|
"</p>" +
|
"</div>";
|
}
|
}
|
html += "</li>" +
|
"</ul>";
|
}
|
} else {
|
//没有子节点，直接就是库区
|
areas = getDeptArea("", "", areaList[i].code);
|
if (areas && areas.length > 0) {
|
for (var k = 0; k < areas.length; k++) {
|
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=\"renderAreas('" + areas[k].code + "')\">" +
|
"<span class=\"i-icon32 fl\"><img src=\"/img/web/group/icon-kuqu.png\"/></span>" +
|
(areas[k].name ? areas[k].name : "") +
|
"</a>" +
|
"</div>";
|
html += "<div class=\"sup-menu-box\">" +
|
"</div>";
|
html += "</li>" +
|
"</ul>";
|
|
}
|
}
|
}
|
}
|
} else {
|
//没有子节点，直接就是库区
|
areas = getDeptArea("", "",areaList[i].code);
|
if (areas && areas.length > 0) {
|
for (var k = 0; k < areas.length; k++) {
|
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=\"renderAreas('" + areas[k].code + "')\">" +
|
"<span class=\"i-icon32 fl\"><img src=\"/img/web/group/icon-kuqu.png\"/></span>" +
|
(areas[k].name ? areas[k].name : "") +
|
"</a>" +
|
"</div>";
|
html += "<div class=\"sup-menu-box\">" +
|
"</div>";
|
html += "</li>" +
|
"</ul>";
|
|
}
|
}
|
}
|
|
html += "</div>" +
|
"</div>";
|
}
|
|
$("#menuDiv").html(html);
|
}
|
}
|
|
/**
|
* 获取地图行政区域颜色
|
* @param adcode
|
* @returns {*}
|
*/
|
function getColorByAdcode(adcode) {
|
if (!colors[adcode]) {
|
var gb = Math.random() * 155 + 50;
|
colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
|
}
|
return colors[adcode];
|
};
|
|
/**
|
*
|
*增加库区点位
|
* tag 是否直接显示信息弹窗
|
*/
|
function addMarker(deptArea, tag) {
|
if (deptArea) {
|
var markerContent = " <div class=\"right-map-item right-map-item2\"style=' left: 0px !important; top: 0px !important;'>" +
|
// " <p>天府新区</p>" +
|
" <span class=\"map-round\"></span>" +
|
" </div>";
|
var position = [deptArea.jd, deptArea.wd];
|
var marker = new AMap.Marker({
|
position: position,
|
// 将 html 传给 content
|
content: markerContent,
|
// 以 icon 的 [center bottom] 为原点
|
// achor:'center',
|
offset: new AMap.Pixel(-25, -25)
|
|
});
|
markers.push(marker);
|
// 将 markers 添加到地图
|
map.add(marker);
|
|
var infoWinodw = new AMap.InfoWindow({
|
isCustom: true, //使用自定义窗体
|
content: createInfoWindow(deptArea),
|
achor: 'bottom-center',
|
offset: new AMap.Pixel(0, 0)
|
});
|
//鼠标点击marker弹出自定义的信息窗体
|
marker.on('click', function () {
|
infoWinodw.open(map, marker.getPosition());
|
});
|
if (tag) {
|
infoWinodw.open(map, marker.getPosition());
|
}
|
} else {
|
console.log("库区为空");
|
}
|
}
|
|
/**
|
*
|
*删除库区点位
|
*/
|
function delMarker() {
|
if (map) {
|
map.remove(markers);
|
}
|
}
|
|
//关闭信息窗体
|
function closeInfoWindow() {
|
if (map) {
|
map.clearInfoWindow();
|
}
|
}
|
|
/**
|
* 创建信息窗口
|
*/
|
function createInfoWindow(deptArea) {
|
var deptAreaId = deptArea.id;
|
var content = "<div class=\"BMap_bubble_pop\" style=\"padding: 0px 8px; position: relative; top:0px !important;left:0px !important;cursor: default; border: 1px solid rgb(221, 221, 221); background-color: rgb(255, 255, 255); border-radius: 10px; left: 837px; top: -46px; width: 376px;\">" +
|
"<div class=\"BMap_bubble_top\" style=\"height:31px\">" +
|
"<div class=\"BMap_bubble_title\" style=\"line-height: 30px; overflow: hidden; height: 30px; white-space: nowrap; color: rgb(51, 51, 51); width: 376px;\">" +
|
"</div>" +
|
"<div class=\"BMap_bubble_buttons\" style=\"float:right;position:absolute;top:-2px;right:0px;height:30px;\">" +
|
"<div style=\"cursor: pointer; display: none;\">" +
|
"<div style=\"position:absolute;top:9px;width:10px;height:10px;-moz-user-select:none;cursor:pointer;z-index:10000;display:none\">×</div>" +
|
"</div>" +
|
"<div style=\"cursor:pointer;width:32px;height:30px;color:#ccc\">" +
|
"<div style=\"position:absolute;top:2px;right:12px;text-align:center;line-height:30px;-moz-user-select:none;cursor:pointer;z-index:10000;font-size:20px\">×</div>" +
|
"</div>" +
|
"</div>" +
|
"</div>" +
|
"<div class=\"BMap_bubble_center\" style=\"z-index: 3; position: relative; height: 324px; width: 376px;\">" +
|
"<div class=\"BMap_bubble_content\" style=\"font-size: 14px; line-height: 24px; position: absolute; top: 2px; color: rgb(85, 85, 85); width: 364px; height: 324px; overflow: auto;\">" +
|
'<div style=\"height:100%;box-sizing:border-box;\">' +
|
'<div style="height: 34px;">' +
|
'<div style="width: 320px;float: left;">';
|
if (deptArea.kqmc.length > 17) {
|
content += '<h3 style="margin:0 0 10px 0;line-height:24px;font-size:14px;color:#fff;">' + (deptArea.kqmc ? deptArea.kqmc : "没有获取到库区信息") + '</h3>';
|
} else {
|
content += '<h3 style="margin:0 0 10px 0;line-height:24px;font-size:18px;color:#fff;">' + (deptArea.kqmc ? deptArea.kqmc : "没有获取到库区信息") + '</h3>';
|
}
|
content += '</div>' +
|
'<div style="width: 40px;float: left;">' +
|
'<img style="height: 20px;" src="/img/web/group/icon_close.png" onclick="closeInfoWindow()"></img>' +
|
'</div>' +
|
'</div>' +
|
|
'<p style="line-height:24px;font-size:12px;color:#fff;margin-right: 15px;"><img src="/img/web/group/icon-address.png" alt="" style="float:left;width: 16px;height: 16px;margin-right:3px;margin-top: 5px;"/>' + (deptArea.kqdz ? deptArea.kqdz + "(" + deptArea.jd + "," + deptArea.wd + ")" : "没有获取到库区信息") + '</P>' +
|
'<div class="right-topInfo-kd " style="height: 80px;width: 270px;margin: 5px auto 10px auto;">' +
|
'<div class="right-topInfo-kd-item">' +
|
'<h3>粮仓个数(个)</h3>' +
|
'<p>' + (deptArea.cfs ? deptArea.cfs : 0) + '</p>' +
|
'</div>' +
|
'<div class="right-topInfo-kd-item">' +
|
'<h3>油罐个数(个)</h3>' +
|
'<p>' + (deptArea.cfs ? deptArea.cfs : 0) + '</p>' +
|
'</div>' +
|
'</div>' +
|
'<ul class="right-topInfo-kd-list right-topInfo-jg sup-topInfo-list">' +
|
'<li>';
|
if (deptArea.cfs && (deptArea.cfs + "").length > 4) {
|
content += '<p style="font-size: 22px">' + (deptArea.cfs ? deptArea.cfs.toFixed(3) : 0) + '</p>';
|
} else {
|
content += '<p style="font-size: 22px">' + (deptArea.cfs ? deptArea.cfs.toFixed(3) : 0) + '</p>';
|
|
}
|
content += '<h3>粮食储量(吨)</h3>' +
|
'</li>' +
|
'<li>';
|
if (deptArea.cfs && (deptArea.cfs + "").length > 4) {
|
content += '<p style="font-size: 22px">' + (deptArea.cfs ? deptArea.cfs.toFixed(3) : 0) + '</p>';
|
} else {
|
content += '<p style="font-size: 22px">' + (deptArea.cfs ? deptArea.cfs.toFixed(3) : 0) + '</p>';
|
}
|
content += '<h3>植物油储量(吨)</h3>' +
|
'</li>' +
|
'<li>' +
|
'<p style="font-size: 22px" >' + (deptArea.zdmj ? deptArea.zdmj : 0) + '</p>' +
|
'<h3>占地面积（㎡）</h3>' +
|
'</li>' +
|
'</ul>' +
|
'<a href="javaScript:;" onclick="toHomeDetail(\'' + deptAreaId + '\')" class="sup-deatil-link"><img src="/img/web/group/spu-detail-btn.png" alt="" style="width:100%;height:100%;"/></a>' +
|
'</div>' +
|
"</div></div><div class=\"BMap_bubble_bottom\" style=\"display: block; z-index: 2; position: absolute; width: 376px;\">" +
|
"</div><img style=\"z-index: 1; position: absolute; width: 58px; height: 31px; left: 159px; bottom: -30px; top: 356px;\" src=\"http://webmap0.bdimg.com/image/api/iw_tail.png\"></div>";
|
|
return content;
|
}
|
|
/**
|
* 调用父节点方法执行，默认退出全屏并进入后台
|
* @param id
|
*/
|
function toHomeDetail(id) {
|
var url = "/index?deptId=" + id;
|
window.parent.open(url, "_self");
|
};
|
|
/**
|
* 根据行政编码渲染颜色，市级会将下面所有区渲染，区级只渲染当前区
|
* @param adcode
|
*/
|
function renderColor(adcode) {
|
switch2AreaNode(adcode);
|
}
|
|
function removeColor() {
|
// if (disProvince) {
|
// disProvince.setMap(null);
|
// }
|
}
|
|
/**
|
* 格式化日期
|
* @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;
|
}
|
|
/**
|
*获取当前星期几
|
*/
|
function getWeekDate() {
|
var now = new Date();
|
var day = now.getDay();
|
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
var week = weeks[day];
|
return week;
|
}
|
|
/**
|
* 格式化日期
|
* @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')
|
});
|
|
});
|
