大屏页面添加与修改

WebChart_2.0/css/index.css

 
 .orderSource ul li {
 	margin-bottom: 20px;
-	margin-top: 50px;
+	margin-top: 40px;
 }
 
 .source_kuang {
 	margin-left: 130px;
 	margin-top: 50px;
 }
+.table_date_time,
 .table_box_key{
 	width: 490px;
 	height: 510px;
 	padding: 10px;
 	color: #00E9FF;
 }
+#list>tbody>tr:nth-of-type{
+	background-color:rgba(255, 255, 255, 0);
+}
+.table_date_time table{
+	table-layout:fixed;
+}
+.table_date_time table thead tr td{
+	width: 25%;
+	font-size: 18px;
+	line-height: 32px;
+}
+#list tbody{
+	overflow: hidden;
+}
+.table_date_time table tbody tr td{
+	width: 25%;
+	color: #27B723;
+}
+.table_date_time table tbody {
+	table-layout: fixed;
+}
+/*.table_date_time table tbody tr td:first-child{
+	width: 20%;
+	white-space: nowrap;
+　　overflow: hidden;
+　　text-overflow: ellipsis;
+}*/
 .table_box_key table thead tr td{
 	width: 33%;
 	font-size: 18px;
 	right: 10px;
 	z-index: 777777;
 }
+.time_box_six img{
+	left: 240px !important;
+}
+.over_date_list{
+	margin-top: 85px !important;
+	margin-left: 1%;
+}
 #bor_dere img{
 	 width:20px;
     height:20px;

WebChart_2.0/index.html

 				top: 56px;
 				left: -63px;
 			}
-			.timeWrapPosi{
+			
+			.timeWrapPosi {
 				top: 160px !important;
-				
 			}
+			
 			.slide_right .twotimeWarp {
 				top: -68px;
 				left: 0px;
 				<div class="swiper-wrapper">
 					<!--第一屏  工单统计-->
 					<div class="swiper-slide">
-						
+
 						<div class="orderStatistic slideCon_bg clearfix">
 							<p class="slide_title slide_title1"></p>
 							<div class="orderCon_left slide_left">
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										<p class="num_word">
-											<span>城关镇</span>
+											<span>绿洲</span>
 											<span class="order_count4" id="hc_count">0</span>
 										</p>
 									</li>
 										</p>
 									</li>
 									<!--<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="5.5s">-->
-									
+
 									<!--<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="6s">-->
 									<li>
 										<img src="img/num_icon.png" alt="" />
 										</p>
 									</li>-->
 									<!--<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="6.5s">-->
-									
-									
+
 								</ul>
 							</div>
 							<div class="orderCon_middle slide_middle">
 								<div class="timeWrap">
 									<div class="time_box pull-right form-inline">
 										日期<input type="text" id="time1" class="times" />
-										<img src="img/rili.png" class="data-input-icon1"/>
+										<img src="img/rili.png" class="data-input-icon1" />
 									</div>
 								</div>
 								<ul id="right_ri">
 									<li class="clearfix">
 										<div class="line_wrap line four_line fourLeft_line"></div>
 									</li>
+									<li class="clearfix">
+										<div class="line_wrap line four_line fiveLeft_line"></div>
+									</li>
 								</ul>
 							</div>
 							<div class="source_middle slide_middle">
 								<div class="timeWrap twotimeWarp">
 									<div class="time_box pull-right form-inline">
 										日期<input type="text" id="time2" class="times" />
-										<img src="img/rili.png" class="data-input-icon2"/>
+										<img src="img/rili.png" class="data-input-icon2" />
 									</div>
 								</div>
 								<ul>
 							<div class="timeWrap twotimeWarp" style="float: right; margin-right: 200px; margin-top: -85px;">
 								<div class="time_box pull-right form-inline time_box_three">
 									日期<input type="text" id="time3" class="times" />
-									<img src="img/rili.png" class="data-input-icon3"/>
+									<img src="img/rili.png" class="data-input-icon3" />
 								</div>
 							</div>
 							<div class="orderTtype_Con">
 
 					<!--第四屏  工单状态-->
 					<div class="swiper-slide">
-						
+
 						<div class="slideCon_bg orderState clearfix">
 							<p class="slide_title slide_title4"></p>
 
 
 								</ul>
 							</div>
-							
+
 							<div class="orderCon_middle slide_middle">
 
 								<div class="earth_box">
 									<div class="earth"></div>
 								</div>
 							</div>
-							
+
 							<div class="orderCon_right slide_right">
 								<div class="timeWrap" style="left: 5px;">
 									<div class="time_box pull-right form-inline">
 										日期<input type="text" id="time4" class="times" />
-										<img src="img/rili.png" class="data-input-icon4"/>
+										<img src="img/rili.png" class="data-input-icon4" />
 									</div>
 								</div>
 								<ul class="orderState_ul">
 										</div>
 									</li>
 								</ul>
-								
+
 							</div>
 						</div>
-						
+
 					</div>
 
 					<!--第五屏  话务量统计-->
 					<div class="swiper-slide">
-						
-						
+
 						<div class="slideCon_bg trafficVolume clearfix">
 							<p class="slide_title slide_title5"></p>
 							<div class="orderCon_left slide_left">
 								<div class="timeWrap lasttimeWrap timeWrapPosi">
 									<div class="time_box pull-right form-inline" id="bor_dere">
 										日期
-										<input type="text" id="test6" class="times lasttime" style="margin-right: 50px;"/>
-										<img src="img/rili.png" class="data-input-icon5"/>
-										部门
+										<input type="text" id="test6" class="times lasttime" style="margin-right: 50px;" />
+										<img src="img/rili.png" class="data-input-icon5" /> 部门
 										<select class="depart selects"></select>
 									</div>
 								</div>
-								
+
 								<div class="keyBottom_left pull-left">
 									<div class="table_box table_box_key">
 										<table class="table">
 							</div>
 						</div>
 					</div>
-					
-					
+
+					<!--第六屏  办理情况统计-->
+					<div class="swiper-slide">
+
+						<div class="slideCon_bg orderState clearfix">
+							<p class="slide_title slide_title4"></p>
+
+							<div class="orderCon_left slide_left" style="width:50%;">
+								<div class="timeWrap" style="left: 5px;margin-top: 5px;">
+									<div class="time_box pull-left form-inline time_box_six">
+										日期<input type="text" id="time6" class="times" style="width: 195px;" />
+										<img src="img/rili.png" class="data-input-icon6" /> 部门
+										<select class="depart_six selects"></select>
+									</div>
+								</div>
+								<div class="keyBottom_left pull-left" style="margin-left: 0;">
+									<div class="table_box table_date_time" style="width: 570px;">
+										<table class="table">
+											<colgroup>
+												<col style="width: 120px;" />
+												<col/>
+											</colgroup>
+											<thead class="thead">
+												<tr>
+													<td>部门名称</td>
+													<td>延期数量</td>
+													<td>超期数量</td>
+													<td>不满意数量</td>
+												</tr>
+											</thead>
+										</table>
+										<div class="scroll_table_list" style="width: 100%;height: 460px; overflow: hidden;">
+											<table class="table">
+												<colgroup>
+													<col style="width: 120px;" />
+													<col/>
+												</colgroup>
+												<tbody>
+												</tbody>
+											</table>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div class=" pull-left over_date_list" >
+								<div class="table_box table_box_key" style="width: 570px;">
+									<table class="table">
+										<colgroup>
+											<col style="width: 120px;" />
+											<col/>
+										</colgroup>
+										<thead class="thead">
+											<tr>
+												<td>工单编号</td>
+												<td>举办单位</td>
+												<td>超时时长</td>
+											</tr>
+										</thead>
+									</table>
+									<div class="scroll_table_right" style="width: 100%;height: 460px; overflow: hidden;">
+										<table class="table">
+											<colgroup>
+												<col style="width: 120px;" />
+												<col/>
+											</colgroup>
+											<tbody>
+											</tbody>
+										</table>
+									</div>
+								</div>
+
+							</div>
+						</div>
+
+					</div>
 				</div>
-				
+
 				<div class="swiper-button-prev"></div>
 				<div class="swiper-pagination"></div>
 				<div class="swiper-button-next"></div>
-				
+
 			</div>
-			
+
 		</div>
 		<script src="js/swiper.min.js"></script>
 		<script src="js/swiper.animate1.0.3.min.js"></script>
+		<script src="js/jquery.min.js"></script>
 		<script src="js/countUp.js"></script>
 		<script src="plugins/numbergd/index.js"></script>
 		<script src="js/tagcloud.js"></script>

WebChart_2.0/js/index.js

 	})
 	Ajax();
 	deprtment();// 第五屏部门下拉
+	deprtment_six();// 第六屏部门下拉
 	laydate.render({
 					elem: '#time1',
 					eventElem:'.data-input-icon1',
 						fiveScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1])
 					}
 				});
+	laydate.render({
+					elem: '#time6',
+					eventElem:'.data-input-icon6',
+		            trigger:'click',
+					range: '~',
+					format: 'yyyy-MM-dd',
+					theme: '#114a97',
+					done: function(value, date) {
+						sixScreen(value && value.split(' ~ ')[0], value && value.split(' ~ ')[1])
+					}
+				});
 })
 var cityObj = {
 		ele1: "xyx_count",
 			}
 		});
 	}
-	
+	//第六屏js
+	function sixScreen(sd,ed) {
+        workOrder(sd, ed);
+        workOrder_right(sd,ed)
+	} 
+	$(".depart_six").change(function() {
+        workOrder($('#time6').val() && $('#time6').val().split(' ~ ')[0], $('#time6').val() && $('#time6').val().split(' ~ ')[1]);
+        workOrder_right($('#time6').val() && $('#time6').val().split(' ~ ')[0], $('#time6').val() && $('#time6').val().split(' ~ ')[1]);
+	})
+	//部门下拉框
+	function deprtment_six () {
+		$.getJSON( "http://192.168.4.18:5001/info/GetDeptCountDate", function(result) {
+			if(result.state == "success") {
+				goodslist = result.data;
+				$(".depart_six").empty();
+				$('<option value="">请选择部门</option>').appendTo($(".depart_six"));
+				$(goodslist).each(function(i, n) {
+					$('<option value="' + n.deptid 
+					+ '">' + n.deptname 
+					+ '</option>').appendTo($(".depart_six"));
+				})
+			}
+		});
+	}
+	function workOrder(sd,ed){
+		$.ajax({
+			type: "get",
+			url: "http://192.168.4.18:5001/info/GetDeptCountDate",
+			async: true,
+			dataType: 'json',
+            data: {
+                start: sd,
+                end: ed,
+                deptid: $('.depart_six').val(),
+//              keyid: $(".tagcloud_bjShine").eq(0).attr("index")
+			},
+			success: function(data) {
+				if(data.state == 'success') {
+					$('.scroll_table_list tbody').html('');
+					var con = data.data;
+                    $(con).each(function (j, n) {
+                        var rate = '';
+                        if (n.rate) { rate = n.rate;}
+                        var str = '<tr><td class="list">' + n.deptname + '</td><td>' + n.delaycounts + '</td><td>' + n.overcounts + '</td><td>' + n.nosatisfiedcounts + '</td></tr>'
+						$('.scroll_table_list tbody').append(str);
+						$('.list').css({'white-space':'nowrap','overflow':'hidden','text-overflow':'ellipsis'})
+					})
+					$(".scroll_table_list").Scroll({
+						line: 1,
+						speed: 500,
+						timer: 2000
+					});
+				}
+			}
+		});
+}
+//第六屏右侧列表
+	function workOrder_right(sd,ed){
+		$.ajax({
+			type: "get",
+			url: "http://192.168.4.18:5001/Info/GetOverdueList",
+			async: true,
+			dataType: 'json',
+            data: {
+                start: sd,
+                end: ed,
+                deptid: $('.depart_six').val(),
+//              keyid: $(".tagcloud_bjShine").eq(0).attr("index")
+			},
+			success: function(data) {
+				if(data.state == 'success') {
+					$('.scroll_table_right tbody').html('');
+					var con = data.rows;
+                    $(con).each(function (j, n) {
+                        var rate = '';
+                        if (n.rate) { rate = n.rate;}
+                        var str = '<tr><td>' + n.F_WorkOrderId + '</td><td>' + n.DeptName + '</td><td>' + n.CSSecond + '</td></tr>'
+						$('.scroll_table_right tbody').append(str);
+					})
+					$(".scroll_table_right").Scroll({
+						line: 1,
+						speed: 500,
+						timer: 2000
+					});
+				}
+			}
+		});
+	}
 //	右侧部门
 function keyWordDetail(sd, ed) {
 		$.ajax({
                         var str = '<tr><td>' + n.deptname + '</td><td>' + n.acceptcount + '</td><td>' + rate + '</td></tr>'
 						$('.scroll_table tbody').append(str);
 					})
-					$(".scroll_table").Scroll({
+					$(".scroll_table_list").Scroll({
 						line: 1,
 						speed: 500,
 						timer: 2000
 		threeScreen();
 		fourScreen($('#time4').val() && $('#time4').val().split(' ~ ')[0], $('#time4').val() && $('#time4').val().split(' ~ ')[1])
         fiveScreen($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1])
+        sixScreen($('#time6').val() && $('#time6').val().split(' ~ ')[0], $('#time6').val() && $('#time6').val().split(' ~ ')[1])
 }