修正页面

WebChart_2.0/css/index.css

 
 /*首页样式开始 */
 
+#ac_rat{
+	width:20px;
+	height:640px;
+	/*background:#001F6C;*/
+	position: absolute;
+	top:140px;
+	left:400px;
+	z-index: 999;
+
+}
+#det_ult{
+	width:280px;
+	height:640px;
+	/*overflow: auto;
+	overflow-y:scroll;*/
+	
+	
+	white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 0.1rem;
+    margin-bottom: -.2rem;
+    overflow: -moz-scrollbars-none;
+    overflow: -moz-scrollbars-none;
+
+}
+.orderCon_right {
+	
+}
+#det_ult::-webkit-scrollbar{
+	display: none;
+}
+
+
+#right_ri{
+	width:280px;
+	height:640px;
+	/*overflow: auto;
+	overflow-y:scroll;*/
+	
+	
+	white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 0.1rem;
+    margin-bottom: -.2rem;
+    overflow: -moz-scrollbars-none;
+    overflow: -moz-scrollbars-none;
+}
+#right_ri::-webkit-scrollbar{
+	display: none;
+}
+
+
 #nav {
 	width: 100%;
 }
 }
 
 .slide_middle {
-	width: 50%;
+	width: 49%;
 }
 
 .orderStatistic>.orderCon_middle {
 	box-sizing: border-box;
 	padding-left: 137px;
 }
+.orderStatistic>.orderCon_right{
+	box-sizing: border-box;
+	padding-right: 137px;
+}
 
 .orderStatistic>div>ul li {
 	height: 80px;

WebChart_2.0/index.html

 				
 			}
 			.slide_right .twotimeWarp {
-				top: -149px;
-				left: -22px;
+				top: -69px;
+				left: 10px;
 			}
 			
 			.slide_right .lasttimeWrap {
 						<div class="orderStatistic slideCon_bg clearfix">
 							<p class="slide_title slide_title1"></p>
 							<div class="orderCon_left slide_left">
-								<ul>
-									<li>
+								<ul id="det_ult" style="">
+									<!--<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
 											<span>永城市</span>
 											<span class="order_count4" id="xyx_count">0</span>
 										</p>
+									</li>-->
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>演集镇</span>
+											<span class="order_count4" id="hc_count">0</span>
+										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>程庄镇</span>
+											<span>芒山镇</span>
 											<span class="order_count4" id="hh_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>孙六镇</span>
+											<span>酂城镇</span>
 											<span class="order_count6" id="cjx_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>龙塘镇</span>
+											<span>高庄镇</span>
 											<span class="order_count1" id="sgx_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>白云寺镇</span>
+											<span>十八里镇</span>
 											<span class="order_count2" id="szx_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>双塔镇</span>
+											<span>薛湖镇</span>
 											<span class="order_count3" id="wjz_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>人和镇</span>
+											<span>马桥镇</span>
 											<span class="order_count5" id="xdpz_count">0</span>
 										</p>
 									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>裴桥镇</span>
+											<span class="order_count5" id="xdpz_pqzh">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>陈集镇</span>
+											<span class="order_count5" id="xdpz_cjzh">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>蒋口镇</span>
+											<span class="order_count5" id="xdpz_jkozh">0</span>
+										</p>
+									</li>
 									<!--<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="6.5s">-->
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>太丘镇</span>
+											<span class="order_count5" id="xdpz_tqizh">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>李寨镇</span>
+											<span class="order_count5" id="xdpz_lzhaizh">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>顺和镇</span>
+											<span class="order_count5" id="xdpz_shzhe">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>苗桥镇</span>
+											<span class="order_count5" id="xdpz_mizhen">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>茴村镇</span>
+											<span class="order_count5" id="xdpz_huczhen">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>卧龙镇</span>
+											<span class="order_count5" id="xdpz_wolzhe">0</span>
+										</p>
+									</li>
 									
 									
 								</ul>
 										日期<input type="text" id="time1" class="times" />
 									</div>
 								</div>
-								<ul>
+								<ul id="right_ri">
 									<!--<li class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="4s">-->
 
 									<!--<li class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="4.5s">-->
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>王桥镇</span>
+											<span>酂阳镇</span>
 											<span class="order_count1" id="wzz_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>北关镇</span>
+											<span>马牧镇</span>
 											<span class="order_count2" id="fjx_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>王庄镇</span>
+											<span>龙岗镇</span>
 											<span class="order_count3" id="wxz_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>野岗乡</span>
+											<span>王集镇</span>
 											<span class="order_count3" id="qgmx_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>花园乡</span>
+											<span>刘河镇</span>
 											<span class="order_count4" id="wzz_count1">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>伯党乡</span>
+											<span>双桥镇</span>
 											<span class="order_count5" id="syz_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>胡集乡</span>
+											<span>条河镇</span>
 											<span class="order_count6" id="lhpz_count">0</span>
 										</p>
 									</li>
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>林七乡</span>
+											<span>新桥镇</span>
 											<span class="order_count6" id="saz_count">0</span>
 										</p>
 									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>陈官庄乡</span>
+											<span class="order_count6" id="saz_chgzxia">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>黄口乡</span>
+											<span class="order_count6" id="saz_hkouxian">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>城厢乡</span>
+											<span class="order_count6" id="saz_cexiang">0</span>
+										</p>
+									</li>
+									<li>
+										<img src="img/num_icon.png" alt="" />
+										<p class="num_word">
+											<span>候岭乡</span>
+											<span class="order_count6" id="saz_hlxiang">0</span>
+										</p>
+									</li>
 									<!-- 施庵镇、前高庙乡 -->
 								</ul>
 							</div>
 						<div class="slideCon_bg orderType clearfix">
 							<p class="slide_title slide_title3"></p>
 							<div class="timeWrap twotimeWarp" style="float: right; margin-right: 200px;">
-								<div class="time_box pull-right form-inline time_box_three">
+								<div class="time_box pull-right form-inline time_box_three" style="margin-top: -86px;">
 									日期<input type="text" id="time3" class="times" />
 								</div>
 							</div>

WebChart_2.0/js/sourceChannel.js

 									var str='<li>' +
 									'<span class="type_name">' + n.AreaName + '</span>   <span class="type_count">' + n.Count + '</span>' +
 									'</li>'
-									if(i<=7){
+									if(i<=12){
 										$(str).appendTo('.complaint_typeL');
-									}else if(i<=15){
+									}else if(i<=24){
 											$(str).appendTo('.complaint_typeR');
 									}
 								}

WebChart_2.0/sourceChannel.html

 			}
 			.bottom_right ul.complaint_typeL li{
 				text-align: right;
-					margin-left: 30px;
+			    margin-left: 30px;
 			}
 			.bottom_right ul.complaint_typeR li{
 					text-align: left;
 				background: url(img/sbx_line4.png) no-repeat;
 			}
 			.bottom_right ul.complaint_typeR li:nth-of-type(5) {
-				background: url(img/sbx_liner4.png) no-repeat;
+				background: url(img/sbx_liner0.png) no-repeat;
 			}
 			.bottom_right ul li:nth-of-type(6) {
-				background: url(img/sbx_line5.png) no-repeat;
+				background: url(img/sbx_line1.png) no-repeat;
 			}
 			.bottom_right ul li:nth-of-type(7) {
-				background: url(img/sbx_line5.png) no-repeat;
+				background: url(img/sbx_line2.png) no-repeat;
 			}
 			.bottom_right ul li:nth-of-type(8) {
+				background: url(img/sbx_line3.png) no-repeat;
+			}
+			.bottom_right ul li:nth-of-type(9) {
+				background: url(img/sbx_line4.png) no-repeat;
+			}
+			.bottom_right ul li:nth-of-type(10) {
 				background: url(img/sbx_line5.png) no-repeat;
 			}
+			.bottom_right ul li:nth-of-type(11) {
+				background: url(img/sbx_line0.png) no-repeat;
+			}
+			.bottom_right ul li:nth-of-type(12) {
+				background: url(img/sbx_line1.png) no-repeat;
+			}
+			.bottom_right ul li:nth-of-type(13) {
+				background: url(img/sbx_line2.png) no-repeat;
+			}
 			.bottom_right ul.complaint_typeR li:nth-of-type(6) {
-				background: url(img/sbx_liner5.png) no-repeat;
+				background: url(img/sbx_liner2.png) no-repeat;
 			}
 			.bottom_right ul.complaint_typeR li:nth-of-type(7) {
-				background: url(img/sbx_liner5.png) no-repeat;
+				background: url(img/sbx_liner0.png) no-repeat;
 			}
 			.bottom_right ul.complaint_typeR li:nth-of-type(8) {
-				background: url(img/sbx_liner5.png) no-repeat;
+				background: url(img/sbx_liner3.png) no-repeat;
+			}
+			.bottom_right ul.complaint_typeR li:nth-of-type(9) {
+				background: url(img/sbx_liner4.png) no-repeat;
+			}
+			.bottom_right ul.complaint_typeR li:nth-of-type(10) {
+				background: url(img/sbx_liner1.png) no-repeat;
+			}
+			.bottom_right ul.complaint_typeR li:nth-of-type(11) {
+				background: url(img/sbx_liner2.png) no-repeat;
+			}
+			.bottom_right ul.complaint_typeR li:nth-of-type(12) {
+				background: url(img/sbx_liner3.png) no-repeat;
 			}
 			.type_name {
 				color: #00e9ff;
 			.time_box_posi:before{
 				left: 195px;
 			}
+			
+			
+			.complaint_typeL{
+				height:355px;
+				/*background:red;*/
+				white-space: nowrap;
+			    -webkit-overflow-scrolling: touch;
+			    overflow-y: auto;
+			    overflow-x: hidden;
+			    padding: 0 0.1rem;
+			    margin-bottom: -.2rem;
+			    overflow: -moz-scrollbars-none;
+			    overflow: -moz-scrollbars-none;
+			}
+			.complaint_typeL::-webkit-scrollbar{
+				display: none;
+			}
+			.complaint_typeR{
+				height:355px;
+				/*background:red;*/
+				
+				
+				white-space: nowrap;
+			    -webkit-overflow-scrolling: touch;
+			    overflow-y: auto;
+			    overflow-x: hidden;
+			    padding: 0 0.1rem;
+			    margin-bottom: -.2rem;
+			    overflow: -moz-scrollbars-none;
+			    overflow: -moz-scrollbars-none;
+			}
+			.complaint_typeR::-webkit-scrollbar{
+				display: none;
+			}
 		</style>
 	</head>
 
 		<!--导航栏结束-->
 		<div id="wrap" class="container">
 			<div class="phone_top">
-				<div class="legend_bar clearfix " style="position: relative;">
+				<div class="legend_bar clearfix " style="position: relative; top:52px;">
 					<div class="title_word pull-left">
 						<span class="col-line"></span> 受理群众区域统计
 					</div>
 							<span class="col-line"></span> 受理区域统计
 						</div>
 					</div>
-					<div class="clearfix">
+					<div class="clearfix" style="position: relative;">
 						<ul class="pull-left complaint_typeL" style=" width:25%;">
 							<li>
 								<span class="type_name">咨询</span> <span class="type_count">0</span>
 							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
 							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
 							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
-							li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
 						</ul>
 						<!--投诉分类统计-->
 						<div class="pull-left" id="part3" style=" width: 50%;height: 340px;"></div>
 						
-						<ul class="pull-left complaint_typeR" style=" width:25%;">
+						<ul class="pull-left complaint_typeR" style=" width:25%; position: absolute;right: -18px;">
 							<li>
 								<span class="type_name">咨询</span> <span class="type_count">0</span>
 							</li>
 							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
 							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
 							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
+							<li> <span class="type_name">咨询</span> <span class="type_count">0</span></li>
 						</ul>
 					</div>
 				</div>