<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ include file="/common/taglibs.jsp" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>xxxx</title> <link href="${ctx}/jsp/tips/tip.css" rel="stylesheet" type="text/css" /> <link href="${ctx}/css/three-color-control.css" rel="stylesheet" type="text/css" /> <link href="${ctx}/js/artDialog4.1.6/skins/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ctx}/js/jquery/jquery-1.7.1.js"></script> <script type="text/javascript" src="${ctx}/js/artDialog4.1.6/artDialog.js"></script> <script type="text/javascript" src="${ctx}/js/artDialog4.1.6/plugins/iframeTools.js"></script> <script type="text/javascript" src="${ctx}/js/ImageMapster/ jquery.imagemapster.js"></script> </head> <body> <div class="info"> <div id="event_act_list" class="info_list"> <ul> <li> <img id="areaImg" src="<%=basePath%>/images/home/fq.bmp" usemap="#planetmap" style="float: left; margin-right: 20px;" /> <map name="planetmap" id="planetmap"> <area name="xl" shape="circ" coords="120,180,30" href="#" alt="xlpcs" style='background-color: black; border-color: black' /> <area name="af" shape="circ" coords="260,250,30" href="#" alt="afpcs" /> <area name="jc" shape="circ" coords="0,0,110,260" href="#" alt="jcpcs" /> <area name="cj" shape="circ" coords="0,0,110,260" href="#" alt="cjpcs" /> <area name="fc" shape="circ" coords="0,0,110,260" href="#" alt="fcpcs"/> </map> <div id="xl" style="border-radius: 10px;"></div> <div id="af" style="border-radius: 10px;"></div> <div id="jc" style="border-radius: 10px;"></div> <div id="cj" style="border-radius: 10px;"></div> <div id="fc" style="border-radius: 10px;"></div> </li> </ul> </div> </div> <script type="text/javascript"> (function($) { $("div").css('background', "write"); //设置辖区div元素默认加载为透明色,防止系统发生异常。 $.each($('ul li:nth-child(1)'), function(obj){ if($(this).children.length > 0) { $(this).find('div').css('background', '#FFF'); } } ); var _regionParent = ""; $.ajax({ url : '${ctx}/threecolor/three-color-rule!getHighColorsByRegion.action', //异步提交。 data:{'regionParent' :_regionParent, 'op' : 'ajax'}, //后期可根据父级机构进行扩展。 cache : false, async : true, //设置与服务器交互方式为异步方式。 type : "POST", //POST提交。 dataType : 'json', success : function (result){ if(result != "") { var _jsonObj = result; //根据预警分析情况,获取每个区域的最高预警色。 $.each(_jsonObj, function(ele) { var _areaObj = _jsonObj[ele]; if(_areaObj != null && _areaObj.regionCode != undefined && _areaObj.HIGHCOLOR != undefined) { $("#" + _areaObj.regionCode).css('background', _areaObj.HIGHCOLOR); //根据实际结果来显示自定义的色块背景色. } }); } } }); //弹出透明提示框 var x = 10,y = -30,systitle = ''; //绑定图片所示特定区域鼠标移动和点击事件. $("#event_act_list area[shape*=circ]").bind('mouseover', function(e) { //根据移动不同县区,获取当前焦点所处县区。 var _regionType = $(this).attr('alt'); var _regionParams = ""; if(_regionType.indexOf('')) { _regionParams = ''; }else if(_regionType.indexOf('')) { _regionParams = ''; }else if(_regionType.indexOf('')) { _regionParams = ''; }else if(_regionType.indexOf('')) { _regionParams = ''; }else if(_regionType.indexOf('')) { _regionParams = ''; } //根据不同的区域热点,动态加载改区域热点及时数据。(注意:不同区域其预警信息数据值不一致) $.ajax({ url : '${ctx}/threecolor/three-color-rule!getColorsByRegion.action', //异步提交。 data:{'regionParams' :_regionParams, 'op' : 'ajax'}, cache : false, async : true, //设置与服务器交互方式为异步方式。 type : "POST", //POST提交。 dataType : 'json', success : function (result){ if(result != "") { var resJsonObj = result; if(resJsonObj != null) { resJson = "预警信息|"; $.each(resJsonObj, function(index) { if(resJsonObj[index].MODEL != undefined && resJsonObj[index].COLOR != undefined) { resJson += resJsonObj[index].MODEL + '|' + resJsonObj[index].COLOR + '|'; } }); }else { resJson = "预警信息|"; } $.each($('ul li:nth-child(1)'), function(obj) { if($(this).children().length > 0) { $(this).find('a').remove(); $(this).find('img').before('<a id="content" data="' + resJson + '" class="has-tip" href="#"></a>'); } }) systitle = $('#content').attr('data'); this.selfTitle = systitle.split('|'); arrData = this.selfTitle; var showtip = []; showtip[0] = "<div id='popbox' class='popup'><div class='popup_in'><div class='popup_font'><h4>" + arrData[0] + "</h4>"; for (var i = 1,l = arrData.length; i < l; i = i + 2) { if (!arrData[i]) { arrData[i] = ''; } if (arrData[i] != 'undefined') { if (arrData[i + 1] == undefined) { arrData[i + 1] = '' } if(arrData[i+1] != undefined && arrData[i+1] != "") { showtip.push("<p class='c'><span class='l'>" + arrData[i] + "</span><span class='r' style='width:15px; height: 15px;background-color: " + arrData[i+1] + ";border-radius: 10px;'></span></p>"); } } } showtip.push("</div></div></div>"); $("body").append(showtip.join('')); $("#popbox").css({"opacity":"0.95","top":(e.pageY + y) + "px","left":(e.pageX + x) + "px"}).show("fast"); } } }); }).bind('mouseout', function() { $("#popbox").remove(); }).bind('mousemove', function(e) { $("#popbox").css({"top":(e.pageY + y) + "px","left":(e.pageX + x) + "px"}); }).bind('click', function() { //按区域统计预警情况报表 var _regionParams = $(this).attr('alt'); window.open ('${ctx}/threecolor/three-color-rule!jqblAlalys.action?regionParams=' + encodeURIComponent(_regionParams), 'newwindow', 'height=800, width=1500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'); }); })(jQuery) </script> </body> </html>
?