标签：
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@include file="/common/taglibs.jsp" %> 3 <html:base target="_self" /> 4 <%@page import="epm.sp.syspara.para.webapp.util.ParaUtil"%> 5 <%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %> 6 <html> 7 <head> 8 <title>Insert title here</title> 9 <%@include file="/common/header.jsp"%> 10 <link rel="stylesheet" type="text/css" href="../css/css_sdjn/proscheculing.css" /> 11 <link rel="stylesheet" type="text/css" href="../css/css_sdjn/fontype.css" /> 12 <script type="text/javascript" src="../assets/FusionCharts/FusionCharts.js"></script> 13 <script type="text/javascript" src="../flexigrid/js/jquery-1.10.2.js"></script> 14 <script type="text/javascript" src="../flexigrid/js/jquery-migrate-1.2.1.js"></script> 15 16 <style> 17 .tableStyle{ 18 border:1px solid #D7D7D7; 19 cellpadding:0; 20 cellspacing:0; 21 width:720px; 22 height:480px; 23 } 24 .tableStyle tr td{ 25 height:21px; 26 border:1px solid #D7D7D7; 27 cellpadding:0; 28 cellspacing:0; 29 font-size:18px; 30 text-align:center; 31 } 32 tr.tableTitle{ 33 background-color:#E4E4E4; 34 } 35 .fontSyle{ 36 font-family: 微软雅黑; 37 color: #777777; 38 font-size:18px; 39 } 40 .tableTitle td { 41 color: #777777; 42 font-weight:bold; 43 width:90px; 44 } 45 .SD_lowerLimit { 46 position:relative; 47 left:30px; 48 width:31px; 49 height:24px; 50 background-image:url(../css/css_sdjn/images/middle/c_17.png); 51 background-repeat: no-repeat; 52 margin-top:10px; 53 } 54 .SD_upperLimit { 55 position:relative; 56 left:30px; 57 width:31px; 58 height:24px; 59 background-image:url(../css/css_sdjn/images/middle/c_14.png); 60 background-repeat: no-repeat; 61 margin-top:10px; 62 } 63 </style> 64 <%@include file="/common/header.jsp"%> 65 <% 66 String time = ParaUtil.getSysParaValue(request, "RELOAD_GRID_TIME"); 67 %> 68 </head> 69 <!-- onload="setTableBg()" --> 70 <body style="margin:0;overflow:auto;background-color:transparent;"> 71 <html:form action="/mpsm/jproscheculing/warehousing/warehousing" 72 method="post" styleId="mpsm_jproscheculing_wareHousingForm" 73 onsubmit="return validateForm(this)"> 74 75 <!-- 左上 左边 --> 76 <div style="position:absolute;top:0px;left:0px;width:730px;height:280px;"> 77 <span class="box_h535_left"></span> 78 <span class="box_h535_middle" style="width:700px;"> 79 <div class="fontType" id = "location">库存情况</div> 80 </span> 81 <span class="box_h535_right" style="left:715px"></span> 82 </div> 83 <div align="center" style="position:absolute;top:40px;left:1px;"> 84 <!-- 进度条--> 85 <div style="position:absolute;left:0px;top:20px;width:300px;height:500px;margin:0; "> 86 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="70%" height="90%" 87 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 88 id="wareRate"> 89 <param name="movie" name="usedTime" value="<%=request.getContextPath()%>/mpsm/jproscheculing/assets/flash/wareHousingRate.swf" /> 90 <param name="quality" value="high" /> 91 <param name="wmode" value="transparent" /> 92 <param name="allowScriptAccess" value="sameDomain" /> 93 <param name="allowFullScreen" value="true" /> 94 <embed src="<%=request.getContextPath()%>/mpsm/jproscheculing/assets/flash/wareHousingRate.swf" quality="high" width="100%" height="100%" 95 name="wareRate" align="middle" play="true" loop="false" quality="high" 96 allowScriptAccess="sameDomain" womode="transparent" 97 type="application/x-shockwave-flash" 98 pluginspage="http://www.adobe.com/go/getflashplayer"> 99 </embed> 100 </object> 101 </div> 102 <!-- 饼状图 --> 103 <div style="position:absolute;left:320px;top:20px;width:300px;height:500px;margin:0; "> 104 <div class="fontType2"><span id ="changePosition">二三级库房</span>库存设备构成情况</div> 105 <div id="wareEquipCategChartDiv"></div> 106 </div> 107 </div> 108 <!-- 左上 右边 --> 109 <div style="position:absolute;top:0px;left:2050px;width:730px;height:280px;"> 110 <span class="box_h535_left"></span> 111 <span class="box_h535_middle" style="width:700px;"> 112 <div id = "twoLevelWareHouseInfo" class="fontType" style="cursor:pointer" >二级库存信息</div> 113 </span> 114 <span class="box_h535_right" style="left:715px"></span> 115 </div> 116 <div style="position:absolute;top:42px;left:2054px;"> 117 118 <table id ="twoLevelWareHouseContext" class="tableStyle" border="1px" bordercolor="#D7D7D7" cellpadding="0" cellspacing="0" width="720px" height="250px "> 119 <tr class="tableTitle"> 120 <td>单位</td> 121 <td>单相</td> 122 <td>三相</td> 123 <td style="width:130px;">电流互感器</td> 124 <td style="width:130px;">电压互感器</td> 125 <td>采集器</td> 126 <td>集中器</td> 127 <td>专变终端</td> 128 </tr> 129 <tr class=‘fontSyle‘> 130 <td></td> 131 <td></td> 132 <td></td> 133 <td></td> 134 <td></td> 135 <td></td> 136 <td></td> 137 <td></td> 138 </tr> 139 <tr class=‘fontSyle‘> 140 <td></td> 141 <td></td> 142 <td></td> 143 <td></td> 144 <td></td> 145 <td></td> 146 <td></td> 147 <td></td> 148 </tr> 149 <tr class=‘fontSyle‘> 150 <td></td> 151 <td></td> 152 <td></td> 153 <td></td> 154 <td></td> 155 <td></td> 156 <td></td> 157 <td></td> 158 </tr> 159 <tr class=‘fontSyle‘> 160 <td></td> 161 <td></td> 162 <td></td> 163 <td></td> 164 <td></td> 165 <td></td> 166 <td></td> 167 <td></td> 168 </tr> 169 <tr class=‘fontSyle‘> 170 <td></td> 171 <td></td> 172 <td></td> 173 <td></td> 174 <td></td> 175 <td></td> 176 <td></td> 177 <td></td> 178 </tr> 179 <tr class=‘fontSyle‘> 180 <td></td> 181 <td></td> 182 <td></td> 183 <td></td> 184 <td></td> 185 <td></td> 186 <td></td> 187 <td></td> 188 </tr> 189 <tr class=‘fontSyle‘> 190 <td></td> 191 <td></td> 192 <td></td> 193 <td></td> 194 <td></td> 195 <td></td> 196 <td></td> 197 <td></td> 198 </tr> 199 <tr class=‘fontSyle‘> 200 <td></td> 201 <td></td> 202 <td></td> 203 <td></td> 204 <td></td> 205 <td></td> 206 <td></td> 207 <td></td> 208 </tr> 209 <tr class=‘fontSyle‘> 210 <td></td> 211 <td></td> 212 <td></td> 213 <td></td> 214 <td></td> 215 <td></td> 216 <td></td> 217 <td></td> 218 </tr> 219 <tr class=‘fontSyle‘> 220 <td></td> 221 <td></td> 222 <td></td> 223 <td></td> 224 <td></td> 225 <td></td> 226 <td></td> 227 <td></td> 228 </tr> 229 <tr class=‘fontSyle‘> 230 <td></td> 231 <td></td> 232 <td></td> 233 <td></td> 234 <td></td> 235 <td></td> 236 <td></td> 237 <td></td> 238 </tr> 239 <tr class=‘fontSyle‘> 240 <td></td> 241 <td></td> 242 <td></td> 243 <td></td> 244 <td></td> 245 <td></td> 246 <td></td> 247 <td></td> 248 </tr> 249 <tr class=‘fontSyle‘> 250 <td></td> 251 <td></td> 252 <td></td> 253 <td></td> 254 <td></td> 255 <td></td> 256 <td></td> 257 <td></td> 258 </tr> 259 <tr class=‘fontSyle‘> 260 <td></td> 261 <td></td> 262 <td></td> 263 <td></td> 264 <td></td> 265 <td></td> 266 <td></td> 267 <td></td> 268 </tr> 269 <tr class=‘fontSyle‘> 270 <td></td> 271 <td></td> 272 <td></td> 273 <td></td> 274 <td></td> 275 <td></td> 276 <td></td> 277 <td></td> 278 </tr> 279 </table> 280 </div> 281 </html:form> 282 </body> 283 284 <script type="text/javascript"> 285 var form = document.forms[0]; 286 var time = "<%=time%>"; 287 if(time == "" || time == "null"){ 288 time = "300000"; 289 } 290 window.onload=function(){ 291 //设置进度条flash的进度 292 var rate = <%=request.getAttribute("wareRate")%>; 293 document.getElementById("wareRate").setOption(rate); 294 295 //初始化饼状图 296 var wareEquipCategChartXML1 = "<%=request.getAttribute("wareEquipCateg")%>"; 297 setEquipCategInfoChartXML(wareEquipCategChartXML1); 298 299 //设置表格 300 var tableDataList = <%=request.getAttribute("tableDataList")%>; 301 initTableDate(tableDataList,0); 302 303 } 304 var twoLevelWareHouseContext = document.getElementById("twoLevelWareHouseContext"); 305 function initTableDate(tableData,num){ 306 //初始化数据 307 doCleanTable(); 308 var times = tableData.numData.length/15; 309 var startIndex = num*15; 310 //构建table并往里面填写数据 311 for(var i=1 ;num<times && i<16 && ((i-1)+startIndex) < tableData.numData.length; i++){//tableData.numData.length+1 312 313 //填充数据 314 var trData = tableData.numData[(i-1)+startIndex]; 315 316 var styleConent = " "+trData.dxf+trData.sxf+trData.dlhgqf+trData.dyhgqf+trData.zbzdf+trData.jzqf+trData.cjqf; 317 318 twoLevelWareHouseContext.rows[i].cells[0].innerHTML = "<span id=orgName"+i+" class=‘fontSyle‘>"+trData.orgName+"</span>"; 319 twoLevelWareHouseContext.rows[i].cells[1].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.dx+"</span></div>"; 320 twoLevelWareHouseContext.rows[i].cells[2].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.sx+"</span></div>"; 321 twoLevelWareHouseContext.rows[i].cells[3].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.dlhgq+"</span></div>"; 322 twoLevelWareHouseContext.rows[i].cells[4].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.dyhgq+"</span></div>"; 323 twoLevelWareHouseContext.rows[i].cells[5].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.zbzd+"</span></div>"; 324 twoLevelWareHouseContext.rows[i].cells[6].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.jzq+"</span></div>"; 325 twoLevelWareHouseContext.rows[i].cells[7].innerHTML = "<div ><span class=‘fontSyle‘>"+trData.cjq+"</span></div>"; 326 } 327 num = num+1; 328 if(num>=times){ 329 num = 0; 330 } 331 setTimeout(function(){initTableDate(tableData,num)},time); 332 } 333 334 function doCleanTable(){ 335 for(var i=1;i<16; i++){ 336 twoLevelWareHouseContext.rows[i].cells[0].innerHTML = ""; 337 twoLevelWareHouseContext.rows[i].cells[1].innerHTML = ""; 338 twoLevelWareHouseContext.rows[i].cells[2].innerHTML = ""; 339 twoLevelWareHouseContext.rows[i].cells[3].innerHTML = ""; 340 twoLevelWareHouseContext.rows[i].cells[4].innerHTML = ""; 341 twoLevelWareHouseContext.rows[i].cells[5].innerHTML = ""; 342 twoLevelWareHouseContext.rows[i].cells[6].innerHTML = ""; 343 twoLevelWareHouseContext.rows[i].cells[7].innerHTML = ""; 344 } 345 } 346 347 function setEquipCategInfoChartXML(wareEquipCategChartXML){ 348 var chart1 = new FusionCharts("../assets/FusionCharts/Pie3D.swf","myChartId1", "360", "400"); 349 //初始化的chart1不能放在setEquipCategInfoChartXML方法的外面，或出现组件中文乱码 350 chart1.setTransparent(true); 351 chart1.setDataXML(wareEquipCategChartXML); 352 chart1.render("wareEquipCategChartDiv"); 353 } 354 //根据点击的地图上不同的地市 查询出该地市的单位库存占比 355 function loadXMLDoc(org_no,orgName,levelInfo){ 356 //alert("org_no:"+org_no+"orgName:"+orgName+"levelInfo:"+levelInfo); 357 var url = "<%=request.getContextPath()%>/mpsm/jproscheculing/warehousing/twolevelwarehousing.do?action=initLeftTop&isAjax=Y&org_no="+org_no; 358 jQuery.post(url,function(data){ 359 //库存占比 进度条 360 document.getElementById("changePosition").innerHTML=orgName; 361 document.getElementById("twoLevelWareHouseInfo").innerHTML=levelInfo; 362 document.getElementById("wareRate").refresh(data.wareRate); 363 //初始化饼状图 364 var chartObj = getChartFromId("myChartId1"); 365 chartObj.setDataXML(data.wareEquipCategChartXML); 366 //setEquipCategInfoChartXML(data.wareEquipCategChartXML); 367 //设置表格 368 initTableDate(data.tableDataList,0); 369 },"json"); 370 } 371 372 </script> 373 374 </html>
该jsp主要是在2015年7月开发某个省的国网项目时写的，主要用到了里面的flash，以及funsion charts组件，以及jquery对table里的内容的定时刷新
标签：
原文地址：http://www.cnblogs.com/kissandlove/p/4720602.html
