數(shù)據(jù)監(jiān)控模塊實(shí)現(xiàn)03_第1頁
數(shù)據(jù)監(jiān)控模塊實(shí)現(xiàn)03_第2頁
數(shù)據(jù)監(jiān)控模塊實(shí)現(xiàn)03_第3頁
數(shù)據(jù)監(jiān)控模塊實(shí)現(xiàn)03_第4頁
數(shù)據(jù)監(jiān)控模塊實(shí)現(xiàn)03_第5頁
已閱讀5頁，還剩57頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

數(shù)據(jù)監(jiān)控模塊實(shí)現(xiàn)

2知識(shí)目標(biāo)如何開發(fā)個(gè)人車輛屆面了解車輛管理如何查看車輛分布01學(xué)習(xí)目標(biāo)能力目標(biāo)了解人人車輛管理運(yùn)用車輛管理板塊了解車輛分布板塊023目錄01個(gè)人車輛管理模塊02企業(yè)車輛管理模塊02車輛分布模塊車輛分布模塊4任務(wù)序號(hào)任務(wù)內(nèi)容驗(yàn)證方式任務(wù)4.3.1開車輛分布地圖展示主界面車輛分布信息主界面顯示正常任務(wù)4.3.2開發(fā)條件查詢功能根據(jù)條件在地圖上正確顯示車輛信息任務(wù)4.3.3開發(fā)車輛故障情況功能正確顯示車輛故障情況任務(wù)4.3.4開發(fā)車輛省份分布車輛數(shù)量在地圖上對應(yīng)的省份分布正確任務(wù)4.3.5開發(fā)車輛省份分布分析對應(yīng)省份的車輛分析正確車輛分布模塊5車輛分布地圖展示的界面如圖。界面顯示所有車輛的分布情況，并將正常車輛和故障車輛用不同顏色區(qū)別顯示出來。車輛分布模塊6在正式編寫JSP代碼之前，我們首先分析整個(gè)網(wǎng)頁結(jié)構(gòu)。整個(gè)網(wǎng)頁由頭部、主體內(nèi)容、尾部三塊區(qū)域構(gòu)成，而主體內(nèi)容部分又可以拆分為地圖區(qū)域和車輛故障區(qū)域。頁面整體框架如下：<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><html><head> <metacharset="utf-8"/> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <metahttp-equiv="pragma"content="no-cache"> <metahttp-equiv="cache-control"content="no-cache"> <metahttp-equiv="expires"content="0"> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="Thisismypage"> <%@includefile="Head.jsp"%><title>新能源汽車智能監(jiān)控分析系統(tǒng)</title> </head><body><!--頭部區(qū)域代碼-->...<divclass="container-fluid"><!--左側(cè)地圖區(qū)域代碼-->...<!--右側(cè)故障區(qū)域代碼-->...

</div></body></html>車輛分布模塊71.引入CSS和基礎(chǔ)JavaScript文件在“<head></head>”標(biāo)簽區(qū)域，引入相關(guān)CSS樣式文件<linkhref="res/bootstrap/css/bootstrap.min.css"rel="stylesheet"/><linkrel="stylesheet"href="resources/css/style.css"/><linkrel="stylesheet"href="resources/css/page.css"/>車輛分布模塊8在“<body></body>”標(biāo)簽區(qū)域，我們引入相關(guān)js文件<scriptsrc="resources/js/jquery-1.9.1.min.js"type="text/javascript"></script><scriptsrc="res/bootstrap/js/bootstrap.min.js"type="text/javascript"></script><scriptsrc="resources/js/ajaxfileupload.js"type="text/javascript"></script><scriptsrc="<%=basePath%>resources/Widget/My97DatePicker/WdatePicker.js"type="text/javascript"></script><scriptsrc="resources/assets/js/echarts3/echarts.min.js"type="text/javascript"></script><scriptsrc="resources/assets/js/echarts3/bmap.js"type="text/javascript"></script><scriptsrc="resources/assets/js/baiduinit.js"type="text/javascript"></script><scriptsrc="resources/assets/js/baidu.js"type="text/javascript"></script>車輛分布模塊92.實(shí)現(xiàn)頭部區(qū)域引用好CSS樣式文件及js文件后，我們引用公共頭部區(qū)域。公共頭部區(qū)域Head.jsp建立在/WebContent/WEB-INF/page/ace/car下面。引用方式如下：<%@includefile="Head.jsp"%>車輛分布模塊10頭部區(qū)域代碼由兩塊內(nèi)容組成：導(dǎo)航部分和用戶顯示部分。（1）導(dǎo)航部分的實(shí)現(xiàn)<divclass="navbar-header"><aclass="navbar-brand"href="energy/login"style="color:#F0F8FD;"><imgborder="0"width="500"src="resources/images/myself/logo.png"/></a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpIndex()"href="javascript:void(0);"style="color:#F0F8FD;padding:24px;margin-left:20px">首頁</a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpCarposition()"href="javascript:void(0);"style="color:#F0F8FD;margin-left:30px;padding:24px;">車輛分布</a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpCarFriend()"href="javascript:void(0);"style="color:#F0F8FD;margin-left:30px;padding:24px;">車友圈</a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpMap()"href="javascript:void(0);"style="color:#F0F8FD;margin-left:30px;padding:24px;">地圖導(dǎo)航</a></div>車輛分布模塊11（2）用戶顯示部分的實(shí)現(xiàn)。<divclass="navbar-header"><aclass="navbar-brand"href="energy/login"style="color:#F0F8FD;"><imgborder="0"width="500"src="resources/images/myself/logo.png"/></a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpIndex()"href="javascript:void(0);"style="color:#F0F8FD;padding:24px;margin-left:20px">首頁</a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpCarposition()"href="javascript:void(0);"style="color:#F0F8FD;margin-left:30px;padding:24px;">車輛分布</a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpCarFriend()"href="javascript:void(0);"style="color:#F0F8FD;margin-left:30px;padding:24px;">車友圈</a></div><divclass="navbar-header"><aclass="navbar-brand"onclick="jumpMap()"href="javascript:void(0);"style="color:#F0F8FD;margin-left:30px;padding:24px;">地圖導(dǎo)航</a></div>車輛分布模塊123.實(shí)現(xiàn)車輛分布地圖展示區(qū)域車輛分布主要使用ECharts技術(shù)進(jìn)行數(shù)據(jù)展示，ECharts，一個(gè)純Javascript的圖表庫，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的Canvas類庫ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。車輛分布模塊13使用ECharts還需要在頁面中添加顯示<div>使用ECharts還需要在頁面中添加顯示<div><divid="main"style="height:100%"></div>varmyChart=echarts.init(document.getElementById('main'));車輛分布模塊本功能實(shí)現(xiàn)的技術(shù)原理如下：（1）視圖層：用戶通過下拉框選擇條件。（2）控制層：接收視圖層的消息，向業(yè)務(wù)層發(fā)送信息，并將業(yè)務(wù)層返回的結(jié)果發(fā)送到視圖層。（3）業(yè)務(wù)層：負(fù)責(zé)業(yè)務(wù)模塊的邏輯設(shè)計(jì)，將控制層發(fā)過來的信息傳遞給持久層，并將獲得的結(jié)果返回給控制層。（4）持久層：接收業(yè)務(wù)層傳過來的信息，并對數(shù)據(jù)庫進(jìn)行操作，并將得到的結(jié)果返回給業(yè)務(wù)層。14車輛分布模塊1.項(xiàng)目導(dǎo)入在Eclipse中導(dǎo)入工程car。2實(shí)現(xiàn)控制層在src/com/piesat/zyms/web/cms/IndexController.java下新建一個(gè)名為getFaultLocation的方法，在該方法中獲取視圖層傳遞過來的數(shù)據(jù)并進(jìn)行條件選擇邏輯判斷，并將數(shù)據(jù)返回到視圖層，具體代碼如下。15車輛分布模塊1.項(xiàng)目導(dǎo)入在Eclipse中導(dǎo)入工程car。2實(shí)現(xiàn)控制層在src/com/piesat/zyms/web/cms/IndexController.java下新建一個(gè)名為getFaultLocation的方法，在該方法中獲取視圖層傳遞過來的數(shù)據(jù)并進(jìn)行條件選擇邏輯判斷，并將數(shù)據(jù)返回到視圖層，具體代碼如下。16車輛分布模塊@RequestMapping(value="/getfaultlocation")publicvoidgetFaultLocation(HttpServletRequestreq,HttpServletResponseresp) throwsIOException,ServletException,ParseException{ Stringprovince=req.getParameter("province"); Stringcars=req.getParameter("carstatus"); StringstartTime=req.getParameter("startTime"); StringendTime=req.getParameter("endTime"); intcarstatus=0; if(cars!=null){carstatus=Integer.parseInt(cars);} Map<String,Object>mapin=newHashMap<String,Object>(); List<CarLocation>faultlocation=null; List<CarLocation>normallocation=null; List<FaultInfo>fau=null; mapin.put("province",province); mapin.put("startTime",startTime); mapin.put("endTime",endTime); if(carstatus!=0&&carstatus!=1){ mapin.put("carstatus",carstatus); faultlocation=carLocationService.getFaultCarLocation(mapin); fau=faultInfoService.getfaultcount(mapin); }elseif(carstatus==0){ mapin.put("carstatus",""); faultlocation=carLocationService.getFaultCarLocation(mapin);

17車輛分布模塊 normallocation=carLocationService.getNormalCarLocation(mapin); fau=faultInfoService.getfaultcount(mapin);

}elseif(carstatus==1){ mapin.put("carstatus",1); normallocation=carLocationService.getNormalCarLocation(mapin); } Map<String,Object>map=newHashMap<String,Object>(); map.put("faultlocation",faultlocation); map.put("normallocation",normallocation); map.put("fau",fau); Stringresult=newGson().toJson(map); Stringjsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){ result=jsonp+"("+result+")"; resp.getWriter().write(result); }else{ resp.getWriter().write(result); } }18車輛分布模塊3實(shí)現(xiàn)業(yè)務(wù)層接收控制層傳來的消息并將消息向持久層傳遞，在"src/com/piesat/zyms/service/cms/CarLocationService.java"類中增加如下代碼。publicList<CarLocation>getFaultCarLocation(Map<String,Object>map){ returncarLocationMapper.getFaultCarLocation(map);}publicList<CarLocation>getNormalCarLocation(Map<String,Object>map){returncarLocationMapper.getNormalCarLocation(map);}19車輛分布模塊4實(shí)現(xiàn)持久層（1）在src/com/piesat/zyms/persistence/cms/CarLocationMapper.java中增加如下代碼：/** *獲取故障車輛的位置和數(shù)量 *@paramuserid *@return */publicList<CarLocation>getFaultCarLocation(Map<String,Object>map);

20車輛分布模塊4實(shí)現(xiàn)持久層（1）在src/com/piesat/zyms/persistence/cms/CarLocationMapper.java中增加如下代碼：/** *獲取正常車輛的位置和數(shù)量 *@paramuserid *@return */publicList<CarLocation>getNormalCarLocation(Map<String,Object>map);21車輛分布模塊（2）在src/com/piesat/zyms/persistence/cms/CarLocationMapper.xml中增加如下代碼：<selectid="getFaultCarLocation"parameterType="java.util.Map"resultType="com.piesat.zyms.domain.core.CarLocation">select*from(select*from(select*fromtbvehlocationlorderbyl.recordtimedesc)jgroupbyj.vehID)l,(selectm.*,a.faultname,a.idasaidfromcarmessagem,faultinfof,faultawherem.vehID=f.vehIDanda.faulttype=f.faultLevelgroupbym.vehID)kwherel.vehID=k.vehID<iftest="startTime!=nullandstartTime!=''andendTime!=nullandendTime!=''">andl.recordtimebetween#{startTime,jdbcType=TIMESTAMP}and#{endTime,jdbcType=TIMESTAMP}</if><iftest="province!=nullandprovince!=''">andvince=#{province}</if><iftest="carstatus!=nullandcarstatus!=''">andk.aid=#{carstatus}</if><iftest="modid!=nullandmodid!=''">andl.modID=#{modid}</if></select>22車輛分布模塊（2）在src/com/piesat/zyms/persistence/cms/CarLocationMapper.xml中增加如下代碼：23<selectid="getNormalCarLocation"parameterType="java.util.Map"resultType="com.piesat.zyms.domain.core.CarLocation">select*from(select*from(selectl.*,g.plateNumberfromtbvehlocationl,carmessagegwhereg.vehID=l.vehIDorderbyl.recordtimedesc)jgroupbyj.vehID)lwherel.vehIDnotin(selectcarmessage.vehIDfromcarmessage,faultinfowherecarmessage.vehID=faultinfo.vehIDgroupbycarmessage.vehID)<iftest="startTime!=nullandstartTime!=''andendTime!=nullandendTime!=''">andl.recordtimebetween#{startTime,jdbcType=TIMESTAMP}and#{endTime,jdbcType=TIMESTAMP}</if><iftest="province!=nullandprovince!=''">andvince=#{province}</if><iftest="modid!=nullandmodid!=''">andl.modID=#{modid}</if></select>車輛分布模塊5.實(shí)現(xiàn)前后臺(tái)數(shù)據(jù)交互該功能依然使用AJAX與JSON方法進(jìn)行前后臺(tái)數(shù)據(jù)交換。功能驗(yàn)證測試將項(xiàng)目部署到Tomcat中并發(fā)布，項(xiàng)目運(yùn)行成功后，點(diǎn)擊頭部導(dǎo)航欄的“車輛分布”按鈕，顯示車輛分布，如圖24車輛分布模塊本功能實(shí)現(xiàn)的技術(shù)原理如下：（1）視圖層：顯示故障部件和對應(yīng)的出現(xiàn)故障的車輛數(shù)量。（2）控制層：接收視圖層的消息，向業(yè)務(wù)層發(fā)送信息，并將業(yè)務(wù)層返回的結(jié)果發(fā)送到視圖層。（3）業(yè)務(wù)層：負(fù)責(zé)業(yè)務(wù)模塊的邏輯設(shè)計(jì)，將控制層發(fā)過來的信息傳遞給持久層，并將獲得的結(jié)果返回給控制層。（4）持久層：接收業(yè)務(wù)層傳過來的信息，并對數(shù)據(jù)庫進(jìn)行操作，并將得到的結(jié)果返回給業(yè)務(wù)層。25車輛分布模塊1.項(xiàng)目導(dǎo)入在Eclipse中導(dǎo)入工程car。2.實(shí)現(xiàn)控制層在“src/com/piesat/zyms/web/cms/IndexController.java”中增加如下代碼。26@RequestMapping(value="/carposition",method=RequestMethod.GET) publicModelAndViewcarposition(HttpServletRequestrequest, HttpServletResponseresponse,ModelMapmodel){ Map<String,Object>map=newHashMap<String,Object>(); List<Distribution>dis=chartService.getDistribution(); List<Fault>fal=chartService.getFault(); List<FaultInfo>fau=faultInfoService.getfaultcount(map); ModelAndViewmv=newModelAndView(); mv.setViewName("car/carposition.jsp"); mv.addObject("dis",dis); mv.addObject("fal",fal); mv.addObject("fau",fau); returnmv; }車輛分布模塊3實(shí)現(xiàn)業(yè)務(wù)層（1）在“src/com/piesat/zyms/service/cms/ChartService.java”中增加如下代碼。27 publicList<Fault>getFault(){ returnfaultMapper.getFault(); } publicList<Distribution>getDistribution(){ returndistributionMapper.getDistribution(); }車輛分布模塊（2）在“src/com/piesat/zyms/service/cms/FaultInfoService.java”中增加如下代碼。28publicList<FaultInfo>getfaultcount(Map<String,Object>map){ returnfaultInfoMapper.getfaultcount(map); }車輛分布模塊4實(shí)現(xiàn)持久層（1）在“src/com/piesat/zyms/persistence/cms/DistributionMapper.java”類中增加如下代碼：29 publicList<Distribution>getDistribution();車輛分布模塊4實(shí)現(xiàn)持久層（2）再“src/com/piesat/zyms/persistence/cms/FaultInfoMapper.java”類中增加如下代碼：30 publicList<FaultInfo>getfaultcount(Map<String,Object>map);（3）在“src/com/piesat/zyms/persistence/cms/DistributionMapper.xml”類中增加如下代碼： <selectid="getDistribution"resultMap="distribution"> select*fromdistribution </select>車輛分布模塊（4）在“src/com/piesat/zyms/persistence/cms/FaultInfoMapper.xml”類中增加如下代碼：31 <?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-////DTDMapper3.0//EN""/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.piesat.zyms.persistence.FaultInfoMapper"><resultMapid="BaseResultMap"type="com.piesat.zyms.domain.core.FaultInfo"> <idcolumn="id"property="id"/>

車輛分布模塊32 <resultcolumn="vehID"property="vehID"/> <resultcolumn="faultID"property="faultID"/> <resultcolumn="faultState"property="faultState"/> <resultcolumn="faultLevel"property="faultLevel"/> <resultcolumn="modID"property="modID"/> <resultcolumn="realtime"property="realtime"/> <resultcolumn="remarks"property="remarks"/> <resultcolumn="count"property="count"/>

車輛分布模塊33<resultcolumn="fremarks"property="fremarks"/> <resultcolumn="fmodID"property="fmodID"/> <resultcolumn="fid"property="fid"/> <associationproperty="faultmean"javaType="Faultmean"> <idcolumn="id"property="id"/> <resultcolumn="faultmean"property="faultmean"/> </association> <associationproperty="faultsolution"javaType="FaultSolution"> <idcolumn="id"property="id"/>

車輛分布模塊34<resultcolumn="faultSolution"property="faultSolution"/> </association> </resultMap><selectid="getfaultcount"parameterType="java.util.Map"resultMap="BaseResultMap">selectcount(*)ascount,k.fid,k.faultID,k.fmodID,k.fremarks,k.faultState,k.fremarksfrom(select*from(select*fromtbvehlocationlorderbyl.recordtimedesc)jgroupbyj.vehID)l,(selectm.*,f.idasfid,f.faultID,f.faultState,f.modIDasfmodID,f.remarksasfremarks,a.faultname,a.idasaidfromcarmessagem,faultinfof,faultawherem.vehID=f.vehIDanda.faulttype=f.faultLevelgroupbym.vehID)k車輛分布模塊35wherel.vehID=k.vehID<iftest="startTime!=nullandstartTime!=''andendTime!=nullandendTime!=''">andl.recordtimebetween#{startTime,jdbcType=TIMESTAMP}and#{endTime,jdbcType=TIMESTAMP}</if><iftest="province!=nullandprovince!=''">andvince=#{province}</if><iftest="carstatus!=nullandcarstatus!=''"> andk.aid=#{carstatus}</if>車輛分布模塊36<iftest="modid!=nullandmodid!=''">andl.modID=#{modid}</if> groupbyfremarks </select></mapper>車輛分布模塊375.實(shí)現(xiàn)前后臺(tái)數(shù)據(jù)交互根據(jù)控制層“IndexController”類展示所有的方法carposition()，我們可以看到后臺(tái)列表數(shù)據(jù)是跟隨頁面一起返回的，因此在頁面中我們采用jstl中“<c:forEach>”方法循環(huán)獲取故障部件類型和對應(yīng)的故障車輛數(shù)。具體代碼如下：<c:forEachitems="${fau}"var="fau"varStatus="cs"> <divclass="rowcitylists"> <divclass="pull-leftpro">${fau.faultState}</div> <divclass="pull-leftlable"></div> <divclass="pull-leftcarnum">${fau.count}輛</div> <divclass="pull-leftcardetial"><ahref="${request.contextPath}/car/energy/fault/${fau.fmodID}">詳情>></a></div></div></c:forEach>車輛分布模塊38<divclass="pull-leftcarnum">${fau.count}輛</div> <divclass="pull-leftcardetial"><ahref="${request.contextPath}/car/energy/fault/${fau.fmodID}">詳情>></a></div></div></c:forEach>車輛分布模塊39本功能實(shí)現(xiàn)的技術(shù)原理如下：（1）視圖層：顯示車輛在各個(gè)省份的分布情況。（2）控制層：接收視圖層的消息，向業(yè)務(wù)層發(fā)送信息，并將業(yè)務(wù)層返回的結(jié)果發(fā)送到視圖層。（3）業(yè)務(wù)層：負(fù)責(zé)業(yè)務(wù)模塊的邏輯設(shè)計(jì)，將控制層發(fā)過來的信息傳遞給持久層，并將獲得的結(jié)果返回給控制層。（4）持久層：接收業(yè)務(wù)層傳過來的信息，并對數(shù)據(jù)庫進(jìn)行操作，并將得到的結(jié)果返回給業(yè)務(wù)層。車輛分布模塊401.項(xiàng)目導(dǎo)入在Eclipse中導(dǎo)入工程car。2.實(shí)現(xiàn)控制層在“src/com/piesat/zyms/web/cms/IndexController.java”中增加如下代碼。@RequestMapping(value="/getdistribution") publicvoidgetDistribution(HttpServletRequestreq,HttpServletResponseresp) throwsIOException,ServletException,ParseException{ List<Distribution>dis=車輛分布模塊41chartService.getCarDistri(); Stringresult=newGson().toJson(dis); Stringjsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){ result=jsonp+"("+result+")"; resp.getWriter().write(result); }else{ resp.getWriter().write(result); } }車輛分布模塊423.實(shí)現(xiàn)業(yè)務(wù)層在“src/com/piesat/zyms/service/cms/ChartService.java”中增加如下代碼。packagecom.piesat.zyms.service.cms;importjava.util.List;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importcom.piesat.zyms.domain.core.Distribution;importcom.piesat.zyms.persistence.DistributionMapper;@Service車輛分布模塊43（2）在“src/com/piesat/zyms/persistence/DistributionMapper.xml”類中增加如下代碼：<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-////DTDMapper3.0//EN""/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.piesat.zyms.persistence.DistributionMapper">

車輛分布模塊44<resultMaptype="com.piesat.zyms.domain.core.Distribution"id="distribution"> <idcolumn="ID"property="id"/> <resultcolumn="CARNUMBER"property="carnumber"/> <resultcolumn="LONGTUDE"property="longtude"/> <resultcolumn="LATITUDE"property="latitude"/> <resultcolumn="PROVINCE"property="province"/>

車輛分布模塊45 <resultcolumn="COUNT"property="count"/> <collectionproperty="carmessage"ofType="CarMessage"> <idcolumn="id"property="id"/> <resultcolumn="brand"property="brand"/> <resultcolumn="user_id"property="userId"/> <resultcolumn="cartype"property="cartype"/> </collection> </resultMap>

車輛分布模塊465.實(shí)現(xiàn)前后臺(tái)數(shù)據(jù)交互車輛省份分布主要也是使用ECharts技術(shù)進(jìn)行數(shù)據(jù)展示，ECharts，一個(gè)純Javascript的圖表庫，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級(jí)的Canvas類庫ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。該功能依然使用AJAX與JSON方法進(jìn)行前后臺(tái)數(shù)據(jù)交換。車輛分布模塊47本功能實(shí)現(xiàn)的技術(shù)原理如下：（1）視圖層：顯示省份的車輛故障比例，車型分析情況。（2）控制層：接收視圖層的消息，向業(yè)務(wù)層發(fā)送信息，并將業(yè)務(wù)層返回的結(jié)果發(fā)送到視圖層。（3）業(yè)務(wù)層：負(fù)責(zé)業(yè)務(wù)模塊的邏輯設(shè)計(jì)，將控制層發(fā)過來的信息傳遞給持久層，并將獲得的結(jié)果返回給控制層。（4）持久層：接收業(yè)務(wù)層傳過來的信息，并對數(shù)據(jù)庫進(jìn)行操作，并將得到的結(jié)果返回給業(yè)務(wù)層。車輛分布模塊481.項(xiàng)目導(dǎo)入在Eclipse中導(dǎo)入工程car。2.實(shí)現(xiàn)控制層在“src/com/piesat/zyms/web/cms/IndexController.java”中增加如下代碼。 @RequestMapping(value="/getcartype") publicvoidgetCarType(HttpServletRequestreq,HttpServletResponseresp) throwsIOException,ServletException,ParseException{

車輛分布模塊49intdistributionid=Integer.parseInt(req.getParameter("id")); List<CarMessage>carm=carMessageService.getCarDistri(distributionid); Stringresult=newGson().toJson(carm); Stringjsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){result=jsonp+"("+result+")";resp.getWriter().write(result); }else{resp.getWriter().write(result);}} @RequestMapping(value="/getfault")車輛分布模塊50 publicvoidgetFault(HttpServletRequestreq,HttpServletResponseresp) throwsIOException,ServletException,ParseException{ intdistributionid=Integer.parseInt(req.getParameter("id")); List<Fault>fault=chartService.getListById(distributionid); intfaultcount=0; for(Faultf:fault){faultcount+=f.getCount();} inttotal=chartService.getCountBydid(distributionid);

車輛分布模塊51 intnormalcount=total-faultcount; if(normalcount!=0){Faultnorf=newFault();norf.setCount(normalcount); norf.setFaultname("正常使用");fault.add(norf);} Stringresult=newGson().toJson(fault); Stringjsonp=req.getParameter("jsoncallback"); resp.setCharacterEncoding("UTF-8"); resp.setContentType("text/html"); if(jsonp!=null){result=jsonp+"("+result+")";resp.getWriter().write(result); }else{resp.getWriter().write(result);} }車輛分布模塊52 3.實(shí)現(xiàn)業(yè)務(wù)層（1）在“src/com/piesat/zyms/service/cms/CarMessageService.java”中增加如下代碼packagecom.piesat.zyms.service.cms;importjava.util.List;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importcom.piesat.zyms.domain.core.CarMessage;importcom.piesat.zyms.persistence.CarMessageMapper;

@Service車輛分布模塊53 publicclassCarMessageService{ @Autowired privateCarMessageMappercarMessageMapper;

publicCarMessagesave(CarMessagecarMessage){ carMessageMapper.save(carMessage); returncarMessage; } publicList<CarMessage>getCarDistri(intdistributionid){ returncarMessageMapper.getCarDistri(distributionid); }}車輛分布模塊54

（2）在“src/com/piesat/zyms/service/cms/ChartService.java”中增加如下代碼。packagecom.piesat.zyms.service.cms;importjava.util.List;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importcom.piesat.zyms.domain.core.Fault;importcom.piesat.zyms.persistence.FaultMapper;

車輛分布模塊55@Servicepubliccla

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論