大屏演示修改

WebChartBigNew/css/animation.css

@@ -0,0 +1,71 @@
+.step2_line {
+    background-image: url(../img/step2_line.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    height: 1600px;
+    width: 120px;
+    animation: step2_line 2s linear infinite;
+    z-index: 999999;
+}
+@keyframes step2_line {
+	0% { clip: rect(1600px, 120px, 1600px, 0px); }
+	50% { clip: rect(0px, 120px, 1600px, 0px); }
+	100% { clip: rect(0px, 120px, 0px, 0px); }
+}
+.posi_line1{
+	left: 650px;  
+	top: 282px;
+	animation: step2_line 2s linear 0s infinite;
+	}
+.posi_line2{
+	left: 2010px;  
+	top: 282px;
+	animation: step2_line 2s linear 2s infinite;
+}
+.posi_line3{
+	left: 2780px;  
+	top: 950px;
+	animation: step3_line_l 2s linear 4s infinite;
+}
+.posi_line4{
+	left: 4520px;  
+	top: 1030px;
+	animation: step3_line_r 2s linear 6s infinite;
+}
+.posi_line5{
+	left: 5970px;  
+	top: 282px;
+	 animation: step2_line 2s linear 8s infinite;
+}
+
+.step3_line_l {
+    background-image: url(../img/step3_line_l.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    height: 925px;
+    width: 480px;
+    animation: step3_line_l 2s linear infinite;
+}
+@keyframes step3_line_l {
+	0% { clip: rect(0px, 0px, 925px, 0px); }
+	50% { clip: rect(0px, 480px, 925px, 0px); }
+	100% { clip: rect(0px, 480px, 925px, 480px); }
+}
+.step3_line_r {
+    background-image: url(../img/step3_line_r.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    height: 925px;
+    width: 480px;
+    animation: step3_line_l 2s linear infinite;
+    z-index: 3333;
+}
+@keyframes step3_line_l {
+	0% { clip: rect(0px, 0px, 925px, 0px); }
+	50% { clip: rect(0px, 480px, 925px, 0px); }
+	100% { clip: rect(0px, 480px, 925px, 480px); }
+}
+

WebChartBigNew/css/index.css

@@ -28,6 +28,7 @@
 }
 #wrap{
 	overflow: hidden;
+	position: relative;
 }
 /*第一列*/
 #wrap_box1{
@@ -173,8 +174,8 @@
 	
 }
 .box2_bot_l .content ul li{
-	height: 115px;
-	line-height: 115px;
+	height: 100px;
+	line-height: 100px;
 	text-align: center;
 	width: 90%;
 	margin: 0 auto;
@@ -192,6 +193,54 @@
     background-size: 100% 100%;
     position: relative;
 }
+.box2_bot_r .spanPos_1{
+	position: absolute;
+	left:130px;
+	top: 80px;
+} 
+.box2_bot_r .spanPos_2{
+	position: absolute;
+	right:100px;
+	top: 80px;
+} 
+.box2_bot_r .spanPos_3{
+	position: absolute;
+	left:20px;
+	top: 190px;
+} 
+.box2_bot_r .spanPos_4{
+	position: absolute;
+	right:20px;
+	top: 190px;
+} 
+.box2_bot_r .spanPos_5{
+	position: absolute;
+	left:20px;
+	top: 680px;
+} 
+.box2_bot_r .spanPos_6{
+	position: absolute;
+	right:20px;
+	top: 590px;
+} 
+.box2_bot_r .spanPos_7{
+	width: 100%;
+	position: absolute;
+	bottom: 30px;
+	left: 2%;
+}
+.box2_bot_r .spanPos_7 ul{
+	overflow: hidden;
+	width: 90%;
+	margin-left: 5%;
+}
+.box2_bot_r .spanPos_7 ul li{
+	float: left;
+	text-align: left;
+	height: 70px;
+	line-height: 70px;
+	width: 50%;
+} 
 /*第三列*/
 #wrap_box3{
 	width: 820px;
@@ -217,9 +266,6 @@
 	width: 98%;
 	margin: 0 auto;
 }
-.box3 .content ul li .left1{}
-.box3 .content ul li .left2{}
-.box3 .content ul li .left3{}
 .box3 .content table tr td{
 	font-size: 36px;
 	text-align: center;
@@ -291,7 +337,7 @@
 	position: absolute;
 	z-index: 333;
 	color: #f0b903;
-	font-size: 52px;
+	font-size: 42px;
 }
  
 .box4_bot .img1{
@@ -300,8 +346,8 @@
 }
 .box4_bot .span1{
 	position: absolute;
-	top: 54px;
-	right: 65px;
+	top: 62px;
+	right: 54px;
 }
 .box4_bot .img2{
 	top: 80px;
@@ -385,12 +431,24 @@
 	line-height: 80px;
 	text-align: center;
 }
-.box5_left .content ul li ,.box5_right .content ul li{
+#dpartList{
+	width: 80%;
+	height: 1700px; 
+	margin-left: 10%;
+	overflow: hidden;
+}
+#dpartList table tbody tr td{
+	width: 50%;
 	height: 136px;
 	line-height: 136px;
-	text-align: center;
-	width: 90%;
-	margin: 0 auto;
+	text-align: left;
+}
+.box5_left .content ul li ,.box5_right .content ul li{
+	text-align: left;
+	height: 136px;
+	line-height: 136px ;
+	width: 80%;
+	margin-left: 10%;
 }
 .box5_left .content ul li .fl ,.box5_right .content ul li .fl{
 	width: 50%;

WebChartBigNew/css/soureChanne.css

@@ -148,7 +148,7 @@ tbody tr {
 
 .bottom_right ul.complaint_typeL li {
 	text-align: right;
-	margin-left: 30px;
+	margin-left: 50px;
 }
 
 .bottom_right ul.complaint_typeR li {
@@ -282,6 +282,7 @@ tbody tr {
 	display: table;
 	width: 100%;
 	table-layout: fixed;
+	border: none;
 }
 
 .table>tbody>tr>td:last-child {
@@ -307,7 +308,7 @@ tbody tr {
 	height: 40px;
 	line-height: 30px;
 	margin-top: 120px;
-	margin-left: 60px;
+	margin-left: 30px;
 }
 
 .bottom_right ul li:nth-of-type(1) {

WebChartBigNew/index.html

@@ -9,11 +9,17 @@
 		<script src="Script/Common/huayi.config.js"></script>
 		<link rel="stylesheet" href="css/map.css" />
 		<link rel="stylesheet" href="css/soureChanne.css"/>
+		<link rel="stylesheet" href="css/animation.css" />
 		<title>大数据首页</title>
 	</head>
 	<body>
 		<!--导航栏结束-->
 		<div id="wrap">
+			<div class="step2_line posi_line1"></div>
+			<div class="step2_line posi_line2"></div>
+			<div class="step3_line_l posi_line3"></div>
+			<div class="step3_line_r posi_line4"></div>
+			<div class="step2_line posi_line5"></div>
 			<!--第一列-->
 			<div id="wrap_box1">
 				<div class="box1_top">
@@ -99,12 +105,13 @@
 								<li> <span class="type_name">梁园区</span> <span class="type_count">956</span></li>
 								<li> <span class="type_name">永城市</span> <span class="type_count">956</span></li>
 								<li> <span class="type_name">民权县</span> <span class="type_count">956</span></li>
-								<li> <span class="type_name">睢县</span> <span class="type_count">956</span></li>
+								
 							</ul>
 							<!--投诉分类统计-->
-							<div class="pull-left" id="part3" style=" width: 50%;height: 680px;"></div>
+							<div class="pull-left" id="part3" style=" width: 50%;height: 680px; margin-top: 100px;"></div>
 							
 							<ul class="pull-left complaint_typeR" style=" width:25%;">
+								<li> <span class="type_name">睢县</span> <span class="type_count">956</span></li>
 								<li>
 									<span class="type_name">宁陵县</span> <span class="type_count">956</span>
 								</li>
@@ -114,7 +121,6 @@
 								<li> <span class="type_name">虞城县</span> <span class="type_count">956</span></li>
 								<li> <span class="type_name">夏邑县</span> <span class="type_count">956</span></li>
 								<li> <span class="type_name">城乡化</span> <span class="type_count">956</span></li>
-								<li> <span class="type_name">咨询</span> <span class="type_count">956</span></li>
 							</ul>
 						</div>
 					</div>
@@ -129,118 +135,213 @@
 									<div class="fl" style="color: #00e9ff;">数量</div>
 								</li>
 								<li>
+									<div class="fl">信箱</div>
+									<div class="fl xy_num" style="color: #ffc513;">12</div>
+								</li>
+								<li>
 									<div class="fl">电话</div>
-									<div class="fl" style="color: #ffc513;">355</div>
+									<div class="fl tel_num" style="color: #ffc513;">355</div>
 								</li>
 								<li>
-									<div class="fl">信箱</div>
-									<div class="fl" style="color: #ffc513;">12</div>
+									<div class="fl">市县转单</div>
+									<div class="fl sx_num" style="color: #ffc513;">355</div>
 								</li>
 								<li>
-									<div class="fl">微博</div>
-									<div class="fl" style="color: #ffc513;">9</div>
+									<div class="fl">手机APP</div>
+									<div class="fl app_num" style="color: #ffc513;">9</div>
 								</li>
 								<li>
 									<div class="fl">网站</div>
-									<div class="fl" style="color: #ffc513;">34</div>
+									<div class="fl wz_num" style="color: #ffc513;">34</div>
 								</li>
 								<li>
-									<div class="fl">微信</div>
-									<div class="fl" style="color: #ffc513;">62</div>
+									<div class="fl">微博</div>
+									<div class="fl wb_num" style="color: #ffc513;">34</div>
 								</li>
 								<li>
-									<div class="fl">APP</div>
-									<div class="fl" style="color: #ffc513;">23</div>
+									<div class="fl">微信</div>
+									<div class="fl wx_num" style="color: #ffc513;">62</div>
 								</li>
 								<li>
 									<div class="fl">政务网</div>
-									<div class="fl" style="color: #ffc513;">25</div>
+									<div class="fl fww_num" style="color: #ffc513;">25</div>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="box2_bot_r">
+						<div class="spanPos_1">
+							咨询：<span id="zxRate">27%</span>
+						</div>
+						<div class="spanPos_2">
+							投诉：<span id="tsRate">4%</span>
+						</div>
+						<div class="spanPos_3">
+							表扬：<span id="byRate">13%</span>
+						</div>
+						<div class="spanPos_4">
+							求助：<span id="qzRate">32%</span>
+						</div>
+						<div class="spanPos_5">
+							其他：<span id="qtRate">3%</span>
+						</div>
+						<div class="spanPos_6">
+							建议：<span id="jyRate">21%</span>
+						</div>
+						<div class="spanPos_7">
+							<ul>
+								<li>
+									咨询：<span id="zxNum" style="color: #ffbd0d;"></span>
+								</li>
+								<li>
+									求助：<span id="qzNum" style="color: #ffbd0d;"></span>
+								</li>
+								<li>
+									投诉：<span id="tsNum" style="color: #ffbd0d;"></span>
+								</li>
+								<li>
+									表扬：<span id="byNum" style="color: #ffbd0d;"></span>
+								</li>
+								<li>
+									建议：<span id="jyNum" style="color: #ffbd0d;"></span>
+								</li>
+								<li>
+									其它：<span id="qtNum" style="color: #ffbd0d;"></span>
 								</li>
 							</ul>
 						</div>
 					</div>
-					<div class="box2_bot_r"></div>
 				</div>
 			</div>
-			
 			<!--第三列-->
 			<div id="wrap_box3">
 				<div class="box3">
 					<div class="tit">实时工单展示</div>
 					<div class="content">
-						<table border="0" cellspacing="" cellpadding="">
+						<table>
 							<tr>
 								<td >工单标题</td>
 								<td>时间</td>
 								<td>状态</td>
 							</tr>
-							<tr>
-								<td class="td_line1">规划停车位问题</td>
-								<td>20190814</td>
-								<td class="fontColor1">待交办</td>
-							</tr>
-							<tr>
-								<td class="td_line1">违规占用公共装修</td>
-								<td>20190814</td>
-								<td class="fontColor2">待查收</td>
-							</tr>
-							<tr>
-								<td class="td_line1">停电问题</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							
-							<tr>
-								<td class="td_line1">海亚金域湾西苑小区归</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">门面房的问题</td>
-								<td>20190814</td>
-								<td class="fontColor2">待查收</td>
-							</tr>
-							<tr>
-								<td class="td_line1">三无塑料颗粒厂</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">停电问题</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">噪音问题</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">关于睢阳区华商</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">停车位相当不合理</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">拆迁款问题</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">注册公司问题</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
-							<tr>
-								<td class="td_line1">医疗保销问题</td>
-								<td>20190814</td>
-								<td class="fontColor3">办理中</td>
-							</tr>
 						</table>
+						<div class="ssgd" style="width: 100%;height: 1800px; overflow: hidden;">
+							<table border="0" cellspacing="" cellpadding="">
+								<tr>
+									<td class="td_line1">规划停车位问题</td>
+									<td>20190814</td>
+									<td class="fontColor1">待交办</td>
+								</tr>
+								<tr>
+									<td class="td_line1">违规占用公共装修</td>
+									<td>20190814</td>
+									<td class="fontColor2">待查收</td>
+								</tr>
+								<tr>
+									<td class="td_line1">停电问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">画停车位问题</td>
+									<td>20190814</td>
+									<td class="fontColor1">待交办</td>
+								</tr>
+								<tr>
+									<td class="td_line1">红绿灯问题</td>
+									<td>20190814</td>
+									<td class="fontColor2">待查收</td>
+								</tr>
+								<tr>
+									<td class="td_line1">海亚金域湾西苑小区归</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">门面房的问题</td>
+									<td>20190814</td>
+									<td class="fontColor2">待查收</td>
+								</tr>
+								<tr>
+									<td class="td_line1">咨询</td>
+									<td>20190814</td>
+									<td class="fontColor2">待查收</td>
+								</tr>							
+								<tr>
+									<td class="td_line1">三无塑料颗粒厂</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">停电问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								
+								<tr>
+									<td class="td_line1">车辆问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">噪音问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">关于睢阳区华商</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">自来水问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">停车位相当不合理</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">拆迁款问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">注册公司问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">医疗保销问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								
+								<tr>
+									<td class="td_line1">道路维修问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">注册公司问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								
+								<tr>
+									<td class="td_line1">车辆提户</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+								<tr>
+									<td class="td_line1">医疗保销问题</td>
+									<td>20190814</td>
+									<td class="fontColor3">办理中</td>
+								</tr>
+							</table>
+						</div>	
 					</div>
 				</div>
 			</div>
@@ -251,7 +352,7 @@
 					<img src="img/title.png"/>
 				</div>
 				<div class="btn-group" role="group" aria-label="...">
-					<button type="button" class="btn channel_btn btns" index="0">今日</button>
+					<button type="button" class="btn channel_btn btns" index="1">今日</button>
 					<button type="button" class="btn channel_btn btns active" index="2">本月</button>
 					<button type="button" class="btn channel_btn btns" index="3">本年</button>
 				</div>
@@ -371,28 +472,40 @@
 								</div>
 								<span class="txt txt_XYX">夏邑县</br><span class="XYX_num"></span></span>
 							</div>
+							<div class="quanbgBox quan_YCS ani" swiper-animate-effect="showTxt" swiper-animate-duration=".5s" swiper-animate-delay="3.5s">
+								<div class="quanbg">
+									<span class="quan quan1 quan1a "></span>
+									<span class="quan quan2 quan2a "></span>
+									<span class="quan quan3 quan3a "></span>
+									<span class="quan quan4"></span>
+									<span class="quan quan1 quan1b "></span>
+									<span class="quan quan2 quan2b "></span>
+									<span class="quan quan3 quan3b "></span>
+								</div>
+								<span class="txt txt_YCS">永城市</br><span class="yc_num"></span></span>
+							</div>
 						</div>
 					</div>
 				</div>
 				<div class="box4_bot">
 					<div class="img1">
 						<img src="img/map_text1.png"/>
-						<span class="span1">98%</span>
+						<span class="span1" id="allJARate">98%</span>
 					</div>
 					<div class="img2">
 						<img src="img/map_text3.png"/>
-						<span class="span2">99.8%</span>
+						<span class="span2" id="allMYRate">99.8%</span>
 					</div>
-					<div class="img3">
+					<!--<div class="img3">
 						<img src="img/map_text4.png"/>
-					</div>
+					</div>-->
 					<div class="img4">
 						<img src="img/map_text2.png"/>
-						<span class="span4">356</span>
+						<span class="span4" id="allSLCount">356</span>
 					</div>
 					<div class="img5">
 						<img src="img/map_text5.png"/>
-						<span class="span5">487</span>
+						<span class="span5" id="allJACount">487</span>
 					</div>
 					<!--<div class="box4_bot_l">
 						<div class="legend_bar clearfix" style="top: 20px;">
@@ -423,63 +536,67 @@
 						<div class="content">
 							<ul>
 								<li>
-									<div class="fl td_line1">部门名称</div>
-									<div class="fl">数量</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市环保局</div>
-									<div class="fl" style="color: #00e9ff;">30</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市文化广播新闻出版局</div>
-									<div class="fl" style="color: #00e9ff;">15</div>
-								</li>
-								<li>
-									<div class="fl td_line1">虞城县县政府</div>
-									<div class="fl" style="color: #00e9ff;">15</div>
-								</li>
-								<li>
-									<div class="fl td_line1">柘城县县政府</div>
-									<div class="fl" style="color: #00e9ff;">14</div>
-								</li>
-								<li>
-									<div class="fl td_line1">中国电信商丘市分公司</div>
-									<div class="fl" style="color: #00e9ff;">14</div>
-								</li>
-								<li>
-									<div class="fl td_line1">中国移动商丘市分公司</div>
-									<div class="fl" style="color: #00e9ff;">14</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市城乡规划局</div>
-									<div class="fl" style="color: #00e9ff;">12</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市公安消防支队</div>
-									<div class="fl" style="color: #00e9ff;">12</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市发改委</div>
-									<div class="fl" style="color: #00e9ff;">12</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市交通运输局</div>
-									<div class="fl" style="color: #00e9ff;">11</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市教育体育局</div>
-									<div class="fl" style="color: #00e9ff;">10</div>
-								</li>
-								<li>
-									<div class="fl td_line1">市国土资源局</div>
-									<div class="fl" style="color: #00e9ff;">10</div>
-								</li>
-								<li>
-									<div class="fl td_line1">民权县县政府</div>
-									<div class="fl" style="color: #00e9ff;">9</div>
+									<div class="fl td_line1" style="width: 70%;">部门名称</div>
+									<div class="fl" style="text-align: right;width: 30%;">数量</div>
 								</li>
 							</ul>
 						</div>
+						<div class="content">
+							<div id="dpartList">
+								<table class="table">
+									<tbody>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">市环保局	</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">30</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">市文化广播新闻出版局</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">21</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">虞城县县政府</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">19</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">柘城县县政府</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">16</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">中国电信商丘市分公司</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">15</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">中国移动商丘市分公司</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">15</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">市城乡规划局</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">14</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">市公安消防支队</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">14</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">市发改委	</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">12</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">市交通运输局	</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">12</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">中国联通商丘市分公司	</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">12</td>
+										</tr>
+										<tr>
+											<td class="td_line1" style="color: #ffffff !important; width:70%">市教育体育局	</td>
+											<td style="color: #00e9ff; text-align: right; width:30%">11</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
 						
 					</div>
 					<div class="box5_right">
@@ -487,48 +604,52 @@
 						<div class="content">
 							<ul>
 								<li>
-									<div class="fl">部门名称</div>
-									<div class="fl">数量</div>
+									<div class="fl" style="width: 70%;">部门名称</div>
+									<div class="fl"	style="text-align: right;width: 30%;">数量</div>
 								</li>
+							</ul>
+						</div>
+						<div class="content" id="sfareaList">
+							<ul>
 								<li>
-									<div class="fl td_line1">睢阳区</div>
-									<div class="fl" style="color: #00e9ff;">1406</div>
+									<div class="fl td_line1" style="width: 70%;">睢阳区</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">1406</div>
 								</li>
 								<li>
-									<div class="fl td_line1">梁园区</div>
-									<div class="fl" style="color: #00e9ff;">1109</div>
+									<div class="fl td_line1" style="width: 70%;">梁园区</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">1109</div>
 								</li>
 								<li>
-									<div class="fl td_line1">城乡一体化示范区</div>
-									<div class="fl" style="color: #00e9ff;">417</div>
+									<div class="fl td_line1" style="width: 70%;">城乡一体化示范区</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">417</div>
 								</li>
 								<li>
-									<div class="fl td_line1">永城市</div>
-									<div class="fl" style="color: #00e9ff;">70</div>
+									<div class="fl td_line1" style="width: 70%;">永城市</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">70</div>
 								</li>
 								<li>
-									<div class="fl td_line1">虞城县</div>
-									<div class="fl" style="color: #00e9ff;">32</div>
+									<div class="fl td_line1" style="width: 70%;">虞城县</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">32</div>
 								</li>
 								<li>
-									<div class="fl td_line1">民权县</div>
-									<div class="fl" style="color: #00e9ff;">31</div>
+									<div class="fl td_line1" style="width: 70%;">民权县</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">31</div>
 								</li>
 								<li>
-									<div class="fl td_line1">柘城县</div>
-									<div class="fl" style="color: #00e9ff;">28</div>
+									<div class="fl td_line1" style="width: 70%;">柘城县</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">28</div>
 								</li>
 								<li>
-									<div class="fl td_line1">睢县</div>
-									<div class="fl" style="color: #00e9ff;">12</div>
+									<div class="fl td_line1" style="width: 70%;">睢县</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">12</div>
 								</li>
 								<li>
-									<div class="fl td_line1">宁陵县</div>
-									<div class="fl" style="color: #00e9ff;">8</div>
+									<div class="fl td_line1" style="width: 70%;">宁陵县</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;text-align: right;width: 30%;">8</div>
 								</li>
 								<li>
-									<div class="fl td_line1">夏邑县</div>
-									<div class="fl" style="color: #00e9ff;">8</div>
+									<div class="fl td_line1" style="width: 70%;">夏邑县</div>
+									<div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">8</div>
 								</li>
 								
 							</ul>
@@ -553,7 +674,7 @@
 						</div>-->
 						<div class="orderCon_left slide_left">
 							<div class="keyW_t">
-								投诉关键字
+								关键字统计
 							</div>
 							<div class="tagBox">
 								<div class="tagcloud"></div>

WebChartBigNew/js/index.js

@@ -1,20 +1,41 @@
 var index="";
+var startTime="2019-07-01"
+var endTime="2019-07-31"
 $(function () {
 	//按钮点击事件
 	$('.channel_btn').click(function() {
 		$(this).addClass('active').siblings().removeClass('active');
 		index=$(this).attr("index")
-		//Ajax1(index)
-		//alert(index)
+		if (index=="1") {
+			startTime="2019-07-23"
+			endTime="2019-07-24"
+			Ajax1(startTime,endTime);
+		}else if (index=="2") {
+			startTime="2019-07-1"
+			endTime="2019-07-31"
+			Ajax1(startTime,endTime);
+		}else if(index=="3"){
+			startTime="2018-07-23"
+			endTime="2019-07-31"
+			Ajax1(startTime,endTime);
+		}
+	});
+	$(".ssgd").Scroll({
+		line: 1,
+		speed: 500,
+		timer: 2000
 	});
+	Ajax1(startTime,endTime)
+})
+function  AreaFrom(startTime,endTime) {
 	$.ajax({
 		type: "get",
 		url: huayi.config.callcenter_url + "/info/GetAreaCountByDateNew",
 		async: true,
 		dataType: 'json',
 		data: {
-			start: "2019-07-01",
-			end: "2019-07-31",
+			start: startTime,
+			end: endTime
 		},
 		success: function(data) {
 			if(data.state.toLowerCase() == 'success') {
@@ -39,56 +60,200 @@ $(function () {
 						$(".ZC_num").html(n.SLCount)
 					}
 					if(n.AreaName.indexOf('虞城县') != -1) {
-						$(".YCX_num").text(n.SLCount)
+						$(".YCX_num").html(n.SLCount)
 					}
 					if(n.AreaName.indexOf('夏邑县') != -1) {
 						$(".XYX_num").html(n.SLCount)
 					}
+					if(n.AreaName.indexOf('永城市') != -1) {
+						$(".yc_num").html(n.SLCount)
+					}
 					if(n.AreaName.indexOf('城乡一体化示范区') != -1) {
 						$(".KFQ_num").html(n.SLCount)
 					}
 					if(n.AreaName.indexOf('总计') != -1) {
-						$(".allSLCount").html(n.SLCount); //受理量
-						$(".allJACount").html(n.JACount); //结案量
-						$(".allJARate").html(n.JARate); //结案量
-						$(".allMYRate").html(n.MYRate); //满意度
+						$("#allSLCount").html(n.SLCount); //受理量
+						$("#allJACount").html(n.JACount); //结案量
+						$("#allJARate").html(n.JARate); //结案率
+						$("#allMYRate").html(n.MYRate); //满意度
 					}
 				})
 			}
 		}
 	});
-})
-keyWord()
+}
+
+//渠道来源
+function SourceFrom(startTime,endTime) {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "info/GetSourcePercentByDate",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: startTime,
+			end: endTime
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == 'success') {
+				var con = data.data;
+				if(con.length > 0) {
+					$(con).each(function(i, n) {
+						if(n.Source.indexOf('12345信箱') != -1) {
+							$(".xy_num").html(n.Count)
+						}
+						if(n.Source.indexOf('电话') != -1) {
+							$(".tel_num").html(n.Count)
+						}
+						if(n.Source.indexOf('市县转单') != -1) {
+							$(".sx_num").html(n.Count)
+						}
+						if(n.Source.indexOf('手机APP') != -1) {
+							$(".app_num").html(n.Count)
+						}
+						if(n.Source.indexOf('网站') != -1) {
+							$(".wz_num").html(n.Count)
+						}
+						if(n.Source.indexOf('微博') != -1) {
+							$(".wb_num").html(n.Count)
+						}
+						if(n.Source.indexOf('微信') != -1) {
+							$(".wx_num").html(n.Count)
+						}
+						if(n.Source.indexOf('政务服务网') != -1) {
+							$(".fww_num").html(n.Count)
+						}
+					})
+				} else {
+					$('.tagcloud').html('');
+				}
+
+			}
+		}
+	});
+}
+
+//部门工单统计
+function departFrom(startTime,endTime) {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "info/GetDeptKeyCountByDateNew",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: startTime,
+			end: endTime
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == 'success') {
+				debugger
+				$('#dpartList tbody').html('');
+				var con = data.data;
+				$(con).each(function(j, n) {
+					if (j<30) {
+						var str = '<tr><td class="td_line1" style="color: #ffffff !important; width:70%">' 
+						+ n.deptname + '</td><td style="color: #00e9ff; text-align: right; width:30%">' 
+						+ n.acceptcount + '</td></tr>'
+						$('#dpartList tbody').append(str);
+					}
+				})
+				$("#dpartList").Scroll({
+					line: 1,
+					speed: 500,
+					timer: 2000
+				});
+				
+			}
+		}
+	});
+}
+
+//事发区域工单统计
+function areaFrom(startTime,endTime) {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "info/GetTypeCountByDate",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: startTime,
+			end: endTime
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == 'success') {
+				debugger
+				var con = data.data;
+				var allNum=con[0].Count+con[1].Count+con[2].Count+con[3].Count+con[4].Count+con[5].Count;
+				$(con).each(function(j, n) {
+					if(n.TypeName.indexOf('咨询') != -1) {
+						
+						$("#zxRate").html(Math.round((n.Count/allNum)*100)/100*100+"%")
+						$("#zxNum").html(n.Count)
+					}
+					if(n.TypeName.indexOf('投诉') != -1) {
+						$("#tsRate").html(Math.round((n.Count/allNum)*100)/100*100+"%")
+						$("#tsNum").html(n.Count)
+					}
+					if(n.TypeName.indexOf('表扬') != -1) {
+						$("#byRate").html(Math.round((n.Count/allNum)*100)/100*100+"%")
+						$("#byNum").html(n.Count)
+					}
+					if(n.TypeName.indexOf('求助') != -1) {
+						$("#qzRate").html(Math.round((n.Count/allNum)*100)/100*100+"%")
+						$("#qzNum").html(n.Count)
+					}
+					if(n.TypeName.indexOf('其他') != -1) {
+						$("#qtRate").html(Math.round((n.Count/allNum)*100)/100*100+"%")
+						$("#qtNum").html(n.Count)
+					}
+					if(n.TypeName.indexOf('建议') != -1) {
+						$("#jyRate").html(Math.round((n.Count/allNum)*100)/100*100+"%")
+						$("#jyNum").html(n.Count)
+					}
+					
+					
+				})
+				
+			}
+		}
+	});
+}
+
+
+
 //	左侧关键词
-function keyWord(sd, ed, areaTwoVal) {
+function keyWord(startTime,endTime) {
 	$.ajax({
 		type: "get",
 		url: huayi.config.callcenter_url + "info/GetKeyCountRankByDate",
-		async: true,
+		async: false,
 		dataType: 'json',
 		data: {
-			start: "2019-07-01",
-			end: "2019-07-31",
-			branchcode: areaTwoVal
+			start: startTime,
+			end: endTime
 		},
 		success: function(data) {
 			if(data.state.toLowerCase() == 'success') {
+//								劳动社保
 				var con = data.data;
 				if(con.length > 0) {
-					$(".keyW_t").text(con[0].TypeName)
+//					$(".keyW_t").text(con[0].TypeName)
 					$('.tagcloud').html('');
 					$(con).each(function(k, j) {
-						if(k < 12) {
-							var strs = '<div index="' + j.Id + '" class="tagcloud_bj">' +
+						if(k < 13) {
+							if(j.TypeName!="工作效率"){
+								var strs = '<div index="' + j.Id + '" class="tagcloud_bj">' +
 								'<p class="tag_title">' + j.TypeName + '</p>' +
 								'<p class="imgs">' + j.Count + '</p>' +
 								'</div>'
-							$('.tagcloud').append(strs);
+								$('.tagcloud').append(strs);
+							}
+							
 						}
 					})
 					$(".tagcloud div:first-child").removeClass("tagcloud_bj");
 					$(".tagcloud div:first-child").addClass("tagcloud_bjShine");
-					keyWordDetail(sd, ed, areaTwoVal);
+					keyWordDetail(startTime,endTime);
 				} else {
 					$('.tagcloud').html('');
 				}
@@ -99,16 +264,15 @@ function keyWord(sd, ed, areaTwoVal) {
 }
 
 //	右侧部门
-function keyWordDetail(sd, ed, areaTwoVal) {
+function keyWordDetail(startTime,endTime) {
 	$.ajax({
 		type: "get",
 		url: huayi.config.callcenter_url + "info/GetDeptKeyCountByDateNew",
 		async: true,
 		dataType: 'json',
 		data: {
-			start: "2019-07-01",
-			end: "2019-07-31",
-			branchcode: areaTwoVal,
+			start: startTime,
+			end: endTime,
 			deptid: $('.depart').val(),
 			keyid: $(".tagcloud_bjShine").eq(0).attr("index")
 		},
@@ -138,5 +302,5 @@ $(".tagcloud").on("click", "div", function() {
 	$(".tagcloud div").removeClass("tagcloud_bjShine");
 	$(this).removeClass("tagcloud_bj");
 	$(this).addClass("tagcloud_bjShine");
-	keyWordDetail($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1], $(".areaFive").val());
+	keyWordDetail(startTime,endTime);
 });

WebChartBigNew/js/sourceChannel.js

@@ -1,5 +1,4 @@
 
-Ajax1();
 //part 1 //投诉类别月统计  对接完毕
 var part_1 = echarts.init(document.getElementById('part_1'));
 part_1.setOption({
@@ -68,9 +67,6 @@ part_1.setOption({
 });
 
 function partTwo() {
-	//		var index = layer.load(1, {
-	//			shade: [0.5, '#030303'] //0.1透明度的白色背景
-	//		});
 	$.ajax({
 		type: "get",
 		url: huayi.config.callcenter_url + "info/GetTypeCountMonthByDate",
@@ -78,8 +74,7 @@ function partTwo() {
 		dataType: 'json',
 		data: {
 			start: "",
-			end: "",
-			branchcode: ""
+			end: ""
 		},
 		success: function(data) {
 			if(data.state.toLowerCase() == 'success') {
@@ -188,7 +183,6 @@ function partOne() {
 		dataType: "json",
 		data: {
 			date: "2019-07-23",
-			branchcode: ""
 		},
 		success: function(data) {
 			if(data.state.toLowerCase() == "success") {
@@ -301,22 +295,22 @@ part3.setOption({
 	}]
 });
 
-function partThree() {
+function partThree(startTime,endTime) {
 	$.ajax({
 		type: "get",
 		url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
 		async: true,
 		dataType: 'json',
 		data: {
-			start: "2019-07-01",
-			end: "2019-07-31",
-			branchcode: ""
+			start: startTime,
+			end: endTime
 		},
 		success: function(data) {
 			if(data.state.toLowerCase() == 'success') {
-				//						layer.close(index);
+				//layer.close(index);
 				$('.complaint_typeL').html('');
 				$('.complaint_typeR').html('');
+				$('#sfareaList ul li').remove();
 				var con = data.data;
 				var part_1_legend = [];
 				var part_1_ser = [];
@@ -332,11 +326,17 @@ function partThree() {
 					var str = '<li>' +
 						'<span class="type_name">' + n.AreaName + '</span>   <span class="type_count">' + n.Count + '</span>' +
 						'</li>'
-					if(i <= 5) {
+					if(i <= 4) {
 						$(str).appendTo('.complaint_typeL');
-					} else if(i <= 11 && i > 5) {
+					} else if(i <= 9 && i > 4) {
 						$(str).appendTo('.complaint_typeR');
 					}
+					
+					var str12 = '<li><div class="fl td_line1" style="width: 70%;">' 
+					+ n.AreaName + '</div><div class="fl" style="color: #00e9ff; text-align: right;width: 30%;">' 
+					+ n.Count 
+					+ '</div></li>'
+					$('#sfareaList ul').append(str12);
 				})
 				part3.setOption({
 					series: [{
@@ -567,7 +567,10 @@ function partThree() {
 function Ajax1() {
 	partTwo();
 	partOne();
-	partThree();
-	//partFour();
-	//partFive();
+	keyWord(startTime,endTime);
+	partThree(startTime,endTime);
+	AreaFrom(startTime,endTime)
+	SourceFrom(startTime,endTime);
+	departFrom(startTime,endTime);
+	areaFrom(startTime,endTime);
 }