安阳大屏修改

WebChart/TelephoneDetails.html

@@ -69,6 +69,261 @@
 				color: #FFFFFF;
 				letter-spacing: 10px;
 			}
+			/*坐席状态*/
+			.f_ss{
+				float: left;
+			}
+			.w_5{
+				width: 600px;
+				float: left;
+			}
+			.f_state{
+				float: right;
+				width: 250px;
+			}
+		ul {
+		    overflow: hidden;
+		}
+		
+		    ul li {
+		        list-style: none;
+		    }
+		
+		.fenxian {
+		    list-style: none;
+		    width: 136px;
+		    padding: 0;
+		    height: 10px;
+		}
+		
+		    .fenxian li {
+		        width: 50%;
+		        list-style: none;
+		        height: 8px;
+		        float: left;
+		    }
+		
+		.left_red {
+		    background: #65c2ca;
+		}
+		
+		.rg_green {
+		    background: #F95A83;
+		}
+		
+		.zx-box {
+		    background: #F5F5F5;
+		    /*height: 200px;*/
+		    border-radius: 5px;
+		    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+		    margin-bottom: 10px;
+		    overflow: hidden;
+		}
+		
+		.m-b {
+		    margin-bottom: 0;
+		}
+		/*坐席数量*/
+		.zt-content ul {
+		    width: 100%;
+		    overflow: hidden;
+			float: left;
+		}
+		
+		    .zt-content ul li {
+		        width: 90px;
+		        font-size: 14px;
+		        float: left;
+				margin-left: 5px;
+				color: #FFFFFF;
+		    }
+		
+		        .zt-content ul li i {
+		            display: inline-block;
+		            width: 20px;
+		            height: 20px;
+		            vertical-align: middle;
+		            margin-right: 10px;
+					border-radius: 50%;
+		        }
+		
+		.hc {
+		    background-color: greenyellow;
+		}
+		
+		.ml {
+		    background-color: red;
+		}
+		
+		.kx {
+		    background-color: #55aa7f
+			}
+		.zl {
+		    background-color: #00ffff
+		}
+		
+		.qc {
+              background-color: #00ffff
+		}
+		
+		.lx {
+		  background-color: #555500
+		}
+		
+		.hh {
+		      background-color: #ff55ff
+		}
+		/*坐席监控*/
+		
+		.bg_person {
+		    background: url(../img/bg-person.png)no-repeat;
+		    width: 65px;
+		    height: 65px;
+		    text-align: -webkit-center;
+		    background-position: center center;
+		    margin: 0 auto;
+		}
+		
+		.zx_people {
+		    padding: 0;
+		}
+		
+		.zx_content ul:after {
+		    content: "";
+		    display: block;
+		    clear: both;
+		}
+		
+		.people_list p {
+		    margin-bottom: 5px !important;
+		}
+		
+		.zx_content ul {
+		    height: 800px;
+		    overflow: auto;
+		}
+		
+		    .zx_content ul li {
+		        width: 14%;
+		        text-align: center;
+		        float: left;
+		        cursor: pointer;
+		    }
+		
+		        .zx_content ul li > div {
+		            width: 100%;
+		            position: relative;
+		        }
+		
+		.zx_content i {
+		    display: block;
+		    height: 22px;
+		    width: 20px;
+		    background: url(../img/zuoxiIcon.png) no-repeat;
+		    position: absolute;
+		    right: 13px;
+		    top: 40px;
+		} 
+		/*坐席状态*/
+		.w_3 {
+		    width: 300px;
+			height: 20px;
+		    overflow: hidden;
+			margin-top: 5px;
+		    float: left;
+			margin-left: 200px;
+		}
+		
+		    .ztsm b {
+		        padding: 3px 15px;
+		        border-radius: 10px;
+		        color: #FFFFFF;
+		    }
+		
+		.ztsm2 ul li {
+		    width: 33%;
+		    font-size: 14px;
+		    float: left;
+		    margin-bottom: 25px;
+		    text-align: center;
+		    cursor: pointer;
+		}
+		
+		.zx {
+		    /*background: #989898;*/
+		    background: #61b960;
+		}
+		
+		.jt {
+		    background: #5ed7b7;
+		}
+		
+		.dj {
+		    background: #bed75b;
+		}
+		
+		.qca {
+		    background: #d75e7c;
+		}
+		
+		.lj {
+		    background: #5daed8;
+		}
+		
+		.qc {
+		    background: #d8988f;
+		}
+		
+		.kqc {
+		    background: #44af3c;
+		}
+		
+		.jqc {
+		    background: #d91e06;
+		}
+		
+		.dis {
+		    background: #989898;
+		}
+		
+		.users{
+			display: flex;
+			flex-wrap: wrap;
+			/* overflow-y: scroll; */
+		}
+		.users .touxiang ol{
+			list-style: none;
+		}
+		.users .touxiang{
+			height: 60px;
+		}
+		.tx{ 
+			width: 70%;
+			height: 60px;
+		}
+		.person{
+			/* width: 110px;
+			height: 50px; */
+		}
+		.yuan_one{
+			width: 20px;
+			height: 20px;
+			display: block;
+			background-color: darkgray;
+			border-radius: 50%;
+			margin: 0 auto;
+		}
+		.yuan_two{
+			width: 40px;
+			height: 20px;
+			display: block;
+			background-color: darkgray;
+			border-radius: 80%;
+			margin: 5px auto 0 auto;
+		}
+		.userid{
+			color: #FFFFFF;
+		}
 		</style>
 	</head>
 
@@ -84,18 +339,437 @@
 		<!--导航栏结束-->
 		<div  class="boxwrap">
 			<p class="bt">话务数量</p>
-				<div class="phone_top">
-				<div class="legend_bar clearfix">
-					<div class="title_word pull-left">
-						<span class="col-line"></span> 坐席闲忙比例
+				<div class="phone_top"style="overflow: hidden;">
+				<div class="legend_bar clearfix" style="height: 20px;margin-top: 5px;">
+					<div class="title_word pull-left f_ss">
+						<span class="col-line"></span> 坐席监控
 					</div>
-					<div class="time_box pull-right form-inline"">
-						<!--地区选择：
-						<select class="areaOne selects" style="height: 30px;"></select>-->
-						日期<input type="text" id="time1" class="times" />
+					<div class="zt-content w_5">
+					    <ul>
+					        <li><i class="hc"></i>通话中</li>
+					        <li><i class="ml"></i>置忙</li>
+					        <li><i class="kx"></i>空闲</li>
+					        <li><i class="zl"></i>振铃</li>
+					        <!--<li><i class="qc"></i>&nbsp;签出</li>-->
+					        <li><i class="lx"></i>离线</li>
+					        <li><i class="hh"></i>话后处理</li>
+					    </ul>
+					</div>
+					<div class="ztsm2 w_3">
+					    <ul class="ztsm">
+					        <li style="width: 40%;"><b class="kqc">开始监测</b></li>
+					        <li style="width: 40%;"><b class="jqc dis">停止监测</b></li>
+					    </ul>
 					</div>
 				</div>
-				<div id="sitProportion" style=" width: 100%;height: 400px;"></div>
+				<ul class="users" id="sitProportion" style=" width: 100%;height: 370px;margin-top: 30px;">
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+					<li class="touxiang">
+						<ol class="tx">
+							<li class="person">
+								<span class="yuan_one"></span>
+								<span class="yuan_two"></span>
+							</li>
+							<li class="userid">8082</li>
+						</ol>
+					</li>
+				</ul>
 			</div>
 			<!--<div class="row">-->
 				<div class="phone_bottom clearfix">
@@ -110,7 +784,9 @@
 
 				</div>
 					<!--话务量实时统计-->
-					<div id="phoneTimeCount" style="width: 100%;height: 390px;"></div>
+					<div id="phoneTimeCount" style="width: 100%;height: 390px;">
+						
+					</div>
 				</div>
 				<div class="bottom_right pull-left">
 					<div class="legend_bar clearfix">

WebChart/css/main.css

@@ -49,19 +49,20 @@ p {
 }
 .orderCon_left {
 	box-sizing: border-box;
-	    margin-top: 35px;
+	    margin-top: 27px;
 	    margin-left: 36px;
 }
 .orderli{
-	width: 100px;
-	height: 55px;
+	width: 120px;
+	height: 75px;
 	background: url(../img/num_frame.png) no-repeat center;
 	background-size: 100%;
+	margin-bottom: -10px;
 }
 .orderli img{
 	width: 30px!important;
 	height: 30px!important;
-	margin-top: 11px;
+	margin-top: 22px;
 }
 .orderli:nth-child(n+6) {
 	position: absolute !important;
@@ -73,19 +74,19 @@ p {
 }
 
 .orderli:nth-child(7) {
-	top: 55px !important;
+	top: 66px !important;
 }
 
 .orderli:nth-child(8) {
-	top: 110px !important;
+	top: 130px !important;
 }
 
 .orderli:nth-child(9) {
-	top: 165px !important;
+	top: 192px !important;
 }
 
 .orderli:nth-child(10) {
-	top: 220px !important;
+	top: 255px !important;
 }
 .num_word {
 	display: inline-block;
@@ -105,7 +106,8 @@ p {
 	font-size: 12px;
 }
 .map_bg{
-	    margin: -215px 0px 0px 170px;
+	width: 60%;
+	    margin: -215px 0px 0px 190px;
 }
 #radarBox{
 	width: 170px!important;
@@ -120,11 +122,67 @@ p {
 /* 第二个 */
 .sl_more{
 	width: 150px;
+	padding-left: 50px!important;
+	top: 0px!important;
+}
+.source_kuang{
+	width: 170px;
+	height: 68px;
+	margin-bottom: -8px;
+	
+}
+.pbout{
+	height: 65px;
+}
+.percent_box{
+	width: 40px;
+	height: 40px;
+	margin-top: 0;
+}
+.percent_in{
+	width: 40px!important;
+	height: 40px!important;
+	background-size: 100%;
+	/* position: initial!important; */
+	margin-top: 0;
+}
+.percent_out{
+	width: 50px!important;
+	height: 50px!important;
+/* position: initial!important; */
+	margin-top: 0;
+}
+.percent_word{
+	font-size: 12px!important
+}
+
+.percent_word p{
+	font-size:  12px!important
+}
+.percent_word p:first-child{
+   width: 40px;
+   margin-top: -6px;
+}
+.percent_word p:last-child{
+   width: 40px;
+ margin-top: 6px!important;
+}
+.nw{
+	float: left;
+	margin-top: -76px;
+	margin-left: 63px!important;
+}
+.source_kuang .nw span{
+	font-size: 14px!important;
+}
+.sr_bm{
+top: -349px!important;
+right: 80px!important;
 }
 /* 第三个 */
 .orderTtype_Con ul{
 	margin-left: 31px;
-	margin-top:9px;
+	margin-top:25px;
 	width: 447px;
 }
 .orderTtype_Con ul li{
@@ -192,14 +250,14 @@ p {
 	
 }
 .tagBox{
-	width: 180px;
+	width: 245px;
 	padding-left: 0;
     margin-left: -60px;
-	margin-top: -44px;
+	margin-top: 0px;
 }
 .tagcloud{
 	width: 100%;
-	height:240px;
+	height:300px;
 	overflow:hidden;
 }
 .tagcloud>div{
@@ -220,7 +278,7 @@ p {
 	margin-top: 15px;
 }
 .table_box_key{
-	width: 196px;
+	width: 150px;
 	height: 285px;
 }
 .tag_title{
@@ -231,8 +289,8 @@ p {
 	/* width: 500px; */
 	height: 290px;
 	position: relative;
-	left: 135px;
-	top: -210px;
+	    left: 182px;
+	    top: -190px;
 	font-size: 12px;
 }
 .keyBottom_left {
@@ -240,8 +298,21 @@ p {
 }
 .table_box_key table tbody tr td{
 	line-height: 15px;
+	font-size: 12px!important;
 /* 	text-overflow:ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	font-size: 12px; */
-}
+}
+/* 接单部门 */
+.thead_six tr td{
+	font-size: 12px!important;
+}
+.tabsix tbody tr td{
+	font-size: 12px!important;
+		/* width: 30%!important; */
+		text-align: center;
+}
+.tabsix tbody tr td :nth-of-type(n+1){
+	width: 40px!important;
+}

WebChart/detail.html

@@ -371,7 +371,7 @@
 								</div>
 							
 								<div id="mapSj" style="width:585px;margin-left: 105px; margin-top: 60px; display: none;">
-					                <div id="myMap" style="width:100%;height:400px;"></div>
+					                <div id="myMap" style="width:100%;height:550px;"></div>
 					                <input type="hidden" class="store_Lng" value="115.659773"/>
 	        						<input type="hidden" class="store_Lat" value="34.395449" />
 					            </div>
@@ -613,21 +613,21 @@
 
 					<!--第四屏  话务量统计-->
 						<div class="slideCon_bg trafficVolume clearfix" >
-							<p class="slide_title slide_title5"></p>
+						<p class="top_title" style="margin-left: 205px;padding-top: 6px; margin-left: 601px; position: absolute;font-size: 27px;letter-spacing: 8px;top: 80px;color: #fff;text-shadow: 1px 1px #34c0d9;">诉求关键字</p>
 							<div class="fivePos" style="width: 100% !important;">
 								<div class="time_box pull-right form-inline" style="margin-right:122px;margin-top:-5px">
 									<!--地区选择：
 									<select class="areaFive selects" style="height: 30px; margin-right: 20px;"></select>-->
 									部门
-									<select class="depart selects" style="height: 28px;"> </select>
+									<select class="depart selects" style="height: 28px;width: 308px;"> </select>
 									日期
 									<input type="text" id="test6" class="times lasttime" style="margin-right: 0px;" /> 
 								</div>
 							</div>
 							<div class="orderCon_left slide_left sl">
-								<div class="keyW_t">
+								<!-- <div class="keyW_t">
 									投诉关键字
-								</div>
+								</div> -->
 								<div class="tagBox">
 									<div class="tagcloud">
 									</div>

WebChart/fourth.html

@@ -608,21 +608,21 @@
 
 					<!--第四屏  话务量统计-->
 						<div class="slideCon_bg_block slideCon_bg trafficVolume clearfix" >
-							<p class="slide_title slide_title5"></p>
+							<p class="top_title" style="margin-left: 205px;padding-top: 6px; margin-left: 601px; position: absolute;font-size: 27px;letter-spacing: 8px;top: 80px;color: #fff;text-shadow: 1px 1px #34c0d9;">诉求关键字</p>
 							<div class="fivePos" style="width: 100% !important;">
-								<div class="time_box pull-right form-inline" style="margin-right:122px;margin-top:-5px">
+								<div class="time_box pull-right form-inline" style="margin-right:119px;margin-top:-5px">
 									<!--地区选择：
 									<select class="areaFive selects" style="height: 30px; margin-right: 20px;"></select>-->
 									部门
-									<select class="depart selects" style="height: 28px;"> </select>
+									<select class="depart selects" style="height: 28px; width: 308px;"> </select>
 									日期
 									<input type="text" id="test6" class="times lasttime" style="margin-right: 0px;" /> 
 								</div>
 							</div>
 							<div class="orderCon_left slide_left sl">
-								<div class="keyW_t">
+							<!-- 	<div class="keyW_t">
 									投诉关键字
-								</div>
+								</div> -->
 								<div class="tagBox">
 									<div class="tagcloud">
 									</div>

WebChart/index.html

@@ -38,7 +38,7 @@
 		  background: url(./img/slide_bg1.png) no-repeat;
 		  height: 420px;
 		
-		  background-size: 106% 100%;
+		  background-size: 106% 109%;
 		
 		}
 		.activeBox{
@@ -65,7 +65,7 @@
 		<div class="smallbox">
 			<!-- 安阳市各区县工单统计 -->
 			<div class="smallimg ">
-				<p class="top_title">安阳市各区县工单统计</p>
+				<p class="top_title" style="padding-top: 6px;margin-left: 180px;">安阳市各区县工单统计</p>
 				<div class="orderCon_left slide_left">
 					<ul id="det_ult" style="position: relative;">
 						<li class="orderli">
@@ -177,22 +177,22 @@
 
 			</div>
 			<!-- 多媒体全渠道来源统计 -->
-			<div class="smallimg">
-				<p class="top_title" style="margin-left: 156px;">多媒体全渠道来源统计</p>
+			<div class="smallimg orderSource">
+				<p class="top_title" style="margin-left: 180px;padding-top: 6px;">多媒体全渠道来源统计</p>
 		
-				<!-- <div class="source_left slide_left sl_more">
+				<div class="source_left slide_left sl_more">
 					<ul>
 						<li class="clearfix">
-							<div class="line_wrap one_line line oneLeft_line"></div>
+							<!-- <div class="line_wrap one_line line oneLeft_line"></div> -->
 						</li>
 						<li class="clearfix">
-							<div class="line_wrap line two_line twoLeft_line"></div>
+							<!-- <div class="line_wrap line two_line twoLeft_line"></div> -->
 						</li>
 						<li class="clearfix">
-							<div class="line_wrap line three_line threeLeft_line"></div>
+							<!-- <div class="line_wrap line three_line threeLeft_line"></div> -->
 						</li>
 						<li class="clearfix">
-							<div class="line_wrap line four_line fourLeft_line"></div>
+							<!-- <div class="line_wrap line four_line fourLeft_line"></div> -->
 						</li>
 						
 					</ul>
@@ -201,30 +201,30 @@
 					<div class="map_bg" style="width: 95%; background-size: 76%; margin:-78px -255px;">
 					</div>
 				</div>
-				<div class="source_right slide_right">
+				<div class="source_right slide_right sr_bm">
 					<ul>
 						<li class="clearfix">
-							<div class="line_wrap one_line line oneRight_line"></div>
+							<!-- <div class="line_wrap one_line line oneRight_line"></div> -->
 						</li>
 						<li class="clearfix">
-							<div class="line_wrap line two_line twoRight_line"></div>
+							<!-- <div class="line_wrap line two_line twoRight_line"></div> -->
 				
 						</li>
 						<li class="clearfix">
-							<div class="line_wrap line three_line threeRight_line"></div>
+							<!-- <div class="line_wrap line three_line threeRight_line"></div> -->
 						</li>
 						<li class="clearfix">
-							<div class="line_wrap line four_line fourRight_line">
-							</div>
+							<!-- <div class="line_wrap line four_line fourRight_line">
+							</div> -->
 						</li>
 						
 					</ul>
-				</div> -->
+				</div>
 			</div>
 
 			<!-- 工单类型统计 -->
 			<div class="smallimg">
-				<p class="top_title" style="margin-left: 190px;">工单类型统计</p>
+				<p class="top_title" style="margin-left: 205px;padding-top: 6px;">工单类型统计</p>
 				<div class="orderTtype_Con">
 					<ul>
 						<li class="active">
@@ -338,11 +338,11 @@
 			</div>
 			<!-- 话务量统计 -->
 			<div class="smallimg">
-				<p class="top_title" style="margin-left: 190px;">话务量统计</p>
+				<p class="top_title" style="margin-left: 205px;padding-top: 6px;">诉求关键字</p>
 				<div class="orderCon_left slide_left sl">
-					<div class="keyW_t">
+					<!-- <div class="keyW_t">
 						投诉关键字
-					</div>
+					</div> -->
 					<div class="tagBox">
 						<div class="tagcloud">
 						</div>
@@ -359,16 +359,16 @@
 								</colgroup>
 								<thead class="thead">
 									<tr>
-										<td style="font-size: 12px;width: 60px;">部门名称</td>
+										<td style="font-size: 12px;width: 80px;">部门名称</td>
 										<td style="font-size: 12px;">数量</td>
 										<td style="font-size: 12px;">占比</td>
 									</tr>
 								</thead>
 							</table>
-							<div class="scroll_table" style="width: 200px;height: 230px; overflow: hidden;">
+							<div class="scroll_table" style="width: 150px;height: 220px; overflow: hidden;">
 								<table class="table">
 									<colgroup>
-										<col style="width: 230px;" />
+										<col style="width: 150px;" />
 										<col />
 									</colgroup>
 									<tbody>
@@ -378,21 +378,150 @@
 						</div>
 					</div>
 			
-			</div>
+			</div>0
 		</div>
 		<!-- 渠道来源 -->
 		<div class="smallimg">
-			<p class="top_title" style="margin-left: 190px;">渠道来源</p>
-		<div class="pull-left" id="part3" style=" width: 90%;height: 320px;margin: 5px 45px;"></div>
+			<p class="top_title" style="margin-left: 215px;padding-top: 6px;">渠道来源</p>
+		<div  id="part3" style=" width: 90%;height: 320px;margin: 5px 45px;"></div>
 		</div>
+		<!-- 接单部门 -->
 		<div class="smallimg">
-		<img class="imm" src="img/background06.png" >
+			<p class="top_title" style="margin-left: 215px;padding-top: 6px;">接单部门</p>
+	<div class="table_box" style="width: 85%;height: 270px; margin: 20px 48px;">
+		<table class="table">
+			<colgroup>
+	            <col style="width: 79px;"/>
+	            <col/>
+		    </colgroup>
+		    <thead class="thead_six">
+				<tr>
+					<td>部门名称</td>
+					<td>咨询</td>
+					<td>求助</td>
+					<td>建议</td>
+					<td>表扬</td>
+					<td>其他</td>
+					<td>合计</td>
+					<td>占比</td>
+				</tr>
+			</thead>
+		</table>
+		<div id="scroll_table"  style="width: 100%;height: 270px; overflow: hidden;">
+			<table class="table tabsix" style="width: 100%;">
+			<colgroup>
+		                <col style="width: 79px;"/>
+		                <col/>
+		    </colgroup>
+			<tbody>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				<tr>
+					<td>市公安局</td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color1">20</span></td>
+					<td><span class="text_color2">120</span></td>
+					<td><span class="text_color3">20%</span></td>
+				</tr>
+				
+			</tbody>
+			
+		</table>
+		
 		</div>
+		
+	</div>
+		</div>
+		<!-- 话务数量 -->
 		<div class="smallimg">
-		<img class="imm" src="img/background07.png" >
+			<p class="top_title" style="margin-left: 215px;padding-top: 6px;">话务数量</p>
+		<div id="todyPhoneCount" style="width: 90%;height: 330px;margin: 15px 35px;"></div>
 		</div>
+		<!--  投诉举报  -->
 		<div class="smallimg">
-				<img class="imm" src="img/background08.png" >
+				<p class="top_title" style="margin-left: 215px;padding-top: 6px;">投诉举报</p>
+			<div class="pull-right" id="partcom" style=" width: 85%;height: 340px;margin: 7px 17px;"></div>
 		</div>
 		</div>
 		</div>
@@ -406,10 +535,11 @@
 		<script src="js/tagcloud.js"></script>
 		<script src="js/ScrollDiv.js"></script>
 		<script src="js/index.js"></script>
-		<!-- <script src="js/complaintsReport.js"></script>
+<!-- 	   <script src="js/sourceChannel.js" type="text/javascript" charset="utf-8"></script>
+ -->		<!-- <script src="js/complaintsReport.js"></script>
 		<script src="js/TelephoneDetails.js" type="text/javascript" charset="utf-8"></script>
 		<script src="js/receiptDepartment.js" type="text/javascript" charset="utf-8"></script>
-		<script src="js/sourceChannel.js" type="text/javascript" charset="utf-8"></script> -->
+ -->
 		<script src="js/setItervalTime.js"></script>
 		<script src="js/pieChat.js"></script>
 		<script src="https://api.map.baidu.com/api?v=2.0&ak=ZG4gLQZUD6Eq1K11cqlYAR4by8CKgLyu&callback=mapinit"></script>
@@ -431,133 +561,7 @@
 		$(".nav_middle").click(function() {
 			window.open('index.html', '_self')
 		})
-		// 渠道来源
-		var part3 = echarts.init(document.getElementById('part3'));
-		part3.setOption({
-			color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e', '#7d55ba', '#ce5aba', '#355cdd', '#44c1c6', '#ceba5e', '#c64444'],
-			title: {
-				text: '各区县占比',
-				x: 'center',
-				y: '45%',
-				textStyle: {
-					fontWeight: 'normal',
-					fontSize: 16,
-					color: '#fff'
-		
-				}
-			},
-			tooltip: {
-				trigger: 'item',
-				formatter: "{a} <br/>{b} : {c} ({d}%)",
-				axisPointer: {
-					crossStyle: {
-						color: '#fff'
-					}
-				}
-			},
-						legend: {
-							//      orient: 'vertical',
-							bottom: 'bottom',
-							data: ['安阳县','北关区','林州市','龙安区','内黄县','市区','汤阴县','安阳县','文峰区','殷都区'],
-							textStyle: {
-								color: '#fff'
-							}
-						},
-			series: [{
-				name: '数据',
-				type: 'pie',
-				radius: ['30%', '60%'],
-				center: ['50%', '50%'],
-				data: [],
-				itemStyle: {
-					emphasis: {
-						shadowBlur: 10,
-						shadowOffsetX: 0,
-						shadowColor: 'rgba(0, 0, 0, 0.5)'
-					},
-					normal: {
-						label: {
-							show: true,
-							//                                 formatter: '{b} : {c} ({d}%)' 
-							formatter: '{d}%'
-						},
-						labelLine: {
-							show: true
-						}
-					}
-				},
-				label: {
-					normal: {
-						textStyle: {
-							color: '#fff'
-						}
-					}
-				}
-			}]
-		});
 		
-		function partThree(start, end,areaOneVal) {
-			//		var index = layer.load(1, {
-			//			shade: [0.5, '#030303'] //0.1透明度的白色背景
-			//		});
-			$.ajax({
-				type: "get",
-				url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
-				async: true,
-				dataType: 'json',
-				data: {
-					start: start,
-					end: end,
-					branchcode:areaOneVal
-				},
-				success: function(data) {
-					if(data.state.toLowerCase() == 'success') {
-						//						layer.close(index);
-						$('.complaint_typeL').html('');
-						$('.complaint_typeR').html('');
-						var con = data.data;
-						var part_1_legend = [];
-						var part_1_ser = [];
-						$(con).each(function(i, n) {
-							part_1_legend.push(n.AreaName)
-							var part_1_obj = {};
-							part_1_obj.value = n.Count;
-							part_1_obj.name = n.AreaName;
-							part_1_ser.push(part_1_obj)
-							if(n.AreaName.indexOf('城乡一体') != -1) {
-								n.AreaName = "城乡示范"
-							}
-							var str = '<li>' +
-								'<span class="type_name">' + n.AreaName + '</span>   <span class="type_count">' + n.Count + '</span>' +
-								'</li>'
-							if(i <= 5) {
-								$(str).appendTo('.complaint_typeL');
-							} else if(i <= 11&&i >5){
-								$(str).appendTo('.complaint_typeR');
-							}
-						})
-						part3.setOption({
-							//									legend: {
-							//										selected: {
-							//										'当即办理': false
-							//									}
-							//									},
-							series: [{
-								data: part_1_ser
-							}]
-						})
 		
-					}
-				}
-			});
-		}
-		
-		function Ajax() {
-			var areaOneVal = helper.cookies.get("areaOneVal");
-			var areaOneText = helper.cookies.get("areaOneText");
-			// partOne($('#time1').val(),areaOneVal)
-			// partTwo($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1],areaOneVal);
-			partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal)
-		}
 	</script>
 </html>

WebChart/js/TelephoneDetails.js

@@ -94,126 +94,122 @@
 			}
 		});
 	}
-	var sitProportion = echarts.init(document.getElementById('sitProportion')); //坐席闲忙比例
-	sitProportion.setOption({
-		color: ['#4ab7c7', '#2484d9', '#2e39c1'],
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'shadow',
-				label: {
-					show: true,
-					backgroundColor: '#333'
-				}
-			},
-			formatter: function(datas) {
-				var res = datas[0].name + '<br/>',
-					val;
-				for(var i = 0, length = datas.length; i < length; i++) {
-					val = (datas[i].value) + '%';
-					res += datas[i].seriesName + '：' + val + '<br/>';
-				}
-				return res;
-			}
-		},
-		legend: {
-			top: 'top',
-			left: '135px',
-			data: ['置忙', '通话', '空闲'],
-			textStyle: {
-				color: '#00e9ff'
-			}
-		},
-		grid: {
-			left: '1%',
-			right: '3%',
-			bottom: '5%',
-			containLabel: true
-		},
-		xAxis: {
-			name: '时',
-			data: [],
-			axisLine: {
-				lineStyle: {
-					color: '#3061a2'
-				}
-			},
-			axisTick: {
-				alignWithLabel: true,
-				show: false
-			},
-			axisLabel: { //横轴字体颜色
-				show: true,
-				textStyle: {
-					color: '#eff0f4'
-				}
-			}
+	// var sitProportion = echarts.init(document.getElementById('sitProportion')); //坐席闲忙比例
+	// sitProportion.setOption({
+	// 	color: ['#4ab7c7', '#2484d9', '#2e39c1'],
+	// 	tooltip: {
+	// 		trigger: 'axis',
+	// 		axisPointer: {
+	// 			type: 'shadow',
+	// 			label: {
+	// 				show: true,
+	// 				backgroundColor: '#333'
+	// 			}
+	// 		},
+	// 		formatter: function(datas) {
+	// 			var res = datas[0].name + '<br/>',
+	// 				val;
+	// 			for(var i = 0, length = datas.length; i < length; i++) {
+	// 				val = (datas[i].value) + '%';
+	// 				res += datas[i].seriesName + '：' + val + '<br/>';
+	// 			}
+	// 			return res;
+	// 		}
+	// 	},
+	// 	legend: {
+	// 		top: 'top',
+	// 		left: '135px',
+	// 		data: ['置忙', '通话', '空闲'],
+	// 		textStyle: {
+	// 			color: '#00e9ff'
+	// 		}
+	// 	},
+	// 	grid: {
+	// 		left: '1%',
+	// 		right: '3%',
+	// 		bottom: '5%',
+	// 		containLabel: true
+	// 	},
+	// 	xAxis: {
+	// 		name: '时',
+	// 		data: [],
+	// 		axisLine: {
+	// 			lineStyle: {
+	// 				color: '#3061a2'
+	// 			}
+	// 		},
+	// 		axisTick: {
+	// 			alignWithLabel: true,
+	// 			show: false
+	// 		},
+	// 		axisLabel: { //横轴字体颜色
+	// 			show: true,
+	// 			textStyle: {
+	// 				color: '#eff0f4'
+	// 			}
+	// 		}
 
-		},
-		yAxis: {
-			name: '(比率)',
-			splitLine: {
-				show: false
-			},
-			axisLine: {
-				lineStyle: {
-					color: '#3061a2'
-				}
-			},
-			axisLabel: { //横轴字体颜色
-				show: true,
-				textStyle: {
-					color: '#eff0f4'
-				}
-			}
-		},
-		series: [{
-			name: '置忙',
-			type: 'bar',
-			data: []
-		}, {
-			name: '通话',
-			type: 'bar',
-			data: []
-		}, {
-			name: '空闲',
-			type: 'bar',
-			data: []
-		}]
+	// 	},
+	// 	yAxis: {
+	// 		name: '(比率)',
+	// 		splitLine: {
+	// 			show: false
+	// 		},
+	// 		axisLine: {
+	// 			lineStyle: {
+	// 				color: '#3061a2'
+	// 			}
+	// 		},
+	// 		axisLabel: { //横轴字体颜色
+	// 			show: true,
+	// 			textStyle: {
+	// 				color: '#eff0f4'
+	// 			}
+	// 		}
+	// 	},
+	// 	series: [{
+	// 		name: '置忙',
+	// 		type: 'bar',
+	// 		data: []
+	// 	}, {
+	// 		name: '通话',
+	// 		type: 'bar',
+	// 		data: []
+	// 	}, {
+	// 		name: '空闲',
+	// 		type: 'bar',
+	// 		data: []
+	// 	}]
 
-	});
+	// });
 
 	function partOne(starts, ends,areaOneVal) {
 		$.ajax({
 			type: "get",
-			url: huayi.config.callcenter_url + "info/GetUserStateCount24ByDate",
+			url: huayi.config.callcenter_url + "SeatMonitoring/getlist",
 			async: true,
 			dataType: 'json',
 			data: {
-				start: starts,
-				end: ends,
-				branchcode:areaOneVal
+				// start: starts,
+				// end: ends,
+				// branchcode:areaOneVal
 			},
 			success: function(data) {
 				if(data.state.toLowerCase() == 'success') {
 					// 	   			layer.close(index);
 					var con = data.data;
-					sitProportion.setOption({
-						xAxis: {
-							data: con.hours
-						},
-						series: [{
-							data: con.thpercents
-						}, {
-							data: con.zmpercents
-						}, {
-							data: con.kxpercents
-						}]
-
-					})
+					console.log(con)
+					$(".users").html('')
+						$(con).each(function(i, n) {
+						var str=' <li class="touxiang"><ol class="tx"><li class="person"><span class="yuan_one"></span><span class="yuan_two"></span></li><li class="userid">'+n.F_UserCode+'</li></ol></li>';
+						    var a=$(str)
+						    a.appendTo($(".users"))
+								   })
+									  
+					}
 
 				}
-			}
+			
 		});
 	}
 

WebChart/js/index.js

@@ -2,15 +2,15 @@
 var newData=[]  //数据倒序
 var floag=true
 
-var areaOneVal = helper.cookies.get("areaOneVal");
-var areaOneText = helper.cookies.get("areaOneText");
-if (areaOneVal) {
-	var areaOneVal = helper.cookies.get("areaOneVal");
+// var areaOneVal = helper.cookies.get("areaOneVal");
+// var areaOneText = helper.cookies.get("areaOneText");
+// if (areaOneVal) {
+// 	var areaOneVal = helper.cookies.get("areaOneVal");
 	
-} else{
-	var areaOneVal="sqs12345"
+// } else{
+// 	var areaOneVal="sqs12345"
 	
-}
+// }
 $(function() {
 	
 	loginTimeLimit(); //登录
@@ -194,7 +194,7 @@ function turn(aa) {
 				if(data.state.toLowerCase() == 'success') {
 					var con = data.data;
 					newData = con.sort(compare("SLCount"));
-				  
+				  console.log(1)
 					$(newData).each(function(i, n) {
 						if(n.AreaName=='安阳市'){
 							n.AreaName="市区"
@@ -294,11 +294,11 @@ function turn(aa) {
 						'<div class="percent_box">' +
 						'<div class="percent_out"></div>	' +
 						' <div class="percent_in"></div>' +
-						' <div class="percent_word"><p>' + n.Rate.split('%')[0] + '</p>%<p style="margin-top: 16px;">占总量</p>' +
+						' <div class="percent_word"><p>' + n.Rate.split('%')[0] + '%' +'</p><p style="margin-top: 30px;">占总量</p>' +
 						'</div>' +
 						'</div>' +
 						'</div>' +
-						'<p class="num_word">' +
+						'<p class="num_word nw">' +
 						'<span>' + n.Source + '</span><span>' + n.Count + '</span>' +
 						'</p>' +
 						'</div>'
@@ -526,11 +526,28 @@ function keyWordDetail(sd, ed,areaTwoVal) {
         keyWordDetail($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1],$(".areaFive").val());
 	});
 	function Ajax() {
+		
 		oneScreen($('#time1').val() && $('#time1').val().split(' ~ ')[0], $('#time1').val() && $('#time1').val().split(' ~ ')[1])
 		twoScreen($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1])
 		satisfaction($('#time2').val() && $('#time2').val().split(' ~ ')[0], $('#time2').val() && $('#time2').val().split(' ~ ')[1])
 		threeScreen($('#time3').val(),$(".areaThree").val());
         fiveScreen($('#test6').val() && $('#test6').val().split(' ~ ')[0], $('#test6').val() && $('#test6').val().split(' ~ ')[1],$(".areaFive").val())
+
+//第五 屏  渠道来源
+var areaOneVal = helper.cookies.get("areaOneVal");
+	var areaOneText = helper.cookies.get("areaOneText");
+	partThree($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal)
+
+
+// 接单 部门
+partTwo($('#phone_time').val() && $('#phone_time').val().split(' ~ ')[0], $('#phone_time').val() && $('#phone_time').val().split(' ~ ')[1],areaOneVal);
+
+// 话务数量
+parthuawu($('#time3').val(),areaOneVal);
+
+// 投诉举报
+partcomplain($('#time3').val() && $('#time3').val().split(' ~ ')[0], $('#time3').val() && $('#time3').val().split(' ~ ')[1],areaOneVal)
+
 }
 
 
@@ -558,4 +575,417 @@ function loginTimeLimit(){
 	});
 }
 
+// 渠道来源
+var part3 = echarts.init(document.getElementById('part3'));
+part3.setOption({
+	color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e', '#7d55ba', '#ce5aba', '#355cdd', '#44c1c6', '#ceba5e', '#c64444'],
+	title: {
+		text: '各区县占比',
+		x: 'center',
+		y: '45%',
+		textStyle: {
+			fontWeight: 'normal',
+			fontSize: 16,
+			color: '#fff'
+
+		}
+	},
+	tooltip: {
+		trigger: 'item',
+		formatter: "{a} <br/>{b} : {c} ({d}%)",
+		axisPointer: {
+			crossStyle: {
+				color: '#fff'
+			}
+		}
+	},
+				legend: {
+					//      orient: 'vertical',
+					bottom: 'bottom',
+					data: ['安阳县','北关区','林州市','龙安区','内黄县','市区','汤阴县','安阳县','文峰区','殷都区'],
+					textStyle: {
+						color: '#fff'
+					}
+				},
+	series: [{
+		name: '数据',
+		type: 'pie',
+		radius: ['30%', '60%'],
+		center: ['50%', '50%'],
+		data: [],
+		itemStyle: {
+			emphasis: {
+				shadowBlur: 10,
+				shadowOffsetX: 0,
+				shadowColor: 'rgba(0, 0, 0, 0.5)'
+			},
+			normal: {
+				label: {
+					show: true,
+					//                                 formatter: '{b} : {c} ({d}%)' 
+					formatter: '{d}%'
+				},
+				labelLine: {
+					show: true
+				}
+			}
+		},
+		label: {
+			normal: {
+				textStyle: {
+					color: '#fff'
+				}
+			}
+		}
+	}]
+});
+
+function partThree(start, end,areaOneVal) {
+	//		var index = layer.load(1, {
+	//			shade: [0.5, '#030303'] //0.1透明度的白色背景
+	//		});
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "info/GetAreaCountByDate",
+		async: true,
+		dataType: 'json',
+		data: {
+			start: start,
+			end: end,
+			branchcode:areaOneVal
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == 'success') {
+				//						layer.close(index);
+				$('.complaint_typeL').html('');
+				$('.complaint_typeR').html('');
+				var con = data.data;
+				var part_1_legend = [];
+				var part_1_ser = [];
+				$(con).each(function(i, n) {
+					part_1_legend.push(n.AreaName)
+					var part_1_obj = {};
+					part_1_obj.value = n.Count;
+					part_1_obj.name = n.AreaName;
+					part_1_ser.push(part_1_obj)
+					if(n.AreaName.indexOf('城乡一体') != -1) {
+						n.AreaName = "城乡示范"
+					}
+					var str = '<li>' +
+						'<span class="type_name">' + n.AreaName + '</span>   <span class="type_count">' + n.Count + '</span>' +
+						'</li>'
+					if(i <= 5) {
+						$(str).appendTo('.complaint_typeL');
+					} else if(i <= 11&&i >5){
+						$(str).appendTo('.complaint_typeR');
+					}
+				})
+				part3.setOption({
+					//									legend: {
+					//										selected: {
+					//										'当即办理': false
+					//									}
+					//									},
+					series: [{
+						data: part_1_ser
+					}]
+				})
+
+			}
+		}
+	});
+}
+
+// 接单部门
+//表格滚动
+var area = document.getElementById('scroll_table');
+var iliHeight = 34; //单行滚动的高度  
+var speed = 20; //滚动的速度  
+var time;
+var delay = 1000;
+area.scrollTop = 0;
+area.innerHTML += area.innerHTML; //克隆一份一样的内容  
+function startScroll() {
+	time = setInterval("scrollUp()", speed);
+	area.scrollTop++;
+	console.log(area.scrollTop);
+}
 
+function scrollUp() {
+	if(area.scrollTop % iliHeight == 0) {
+		clearInterval(time);
+		setTimeout(startScroll, delay);
+	} else {
+		area.scrollTop++;
+		if(area.scrollTop >= area.scrollHeight / 2) {
+			area.scrollTop = 0;
+		}
+	}
+}
+setTimeout(startScroll, delay)
+function partTwo(starts, ends, areaOneVal) {
+	$.ajax({
+		type: "get",
+		url: huayi.config.callcenter_url + "Info/GetDeptCountByDateNew",
+		dataType: 'json',
+		async: true,
+		data: {
+			start: starts,
+			end: ends,
+			deptid: $('.depart').val(),
+			branchcode:areaOneVal
+		},
+		success: function(data) {
+			if(data.state.toLowerCase() == 'success') {
+				$('.thead_six tr').html('');
+				$('#scroll_table tbody').html('');
+				var con = data.data;
+				var thead_six = con[0];
+				console.log(thead_six)
+				$.each(thead_six, function(k, val) {
+				
+					$('<td style="width:55px">' + k + '</td>').appendTo('.thead_six tr');
+				})
+				$(con).each(function(j, n) {
+					var str = '<tr>'
+					$.each(thead_six, function(j, m) {
+						$.each(n, function(k, val) {
+							if(j == k) {
+								if(val == '') {
+									val = 0;
+								}
+								str += '<td style="width:53px">' + val + '</td>'
+							}
+						})
+					})
+					str += '</tr>';
+
+					$('#scroll_table tbody').append(str);
+				})
+
+			}
+		}
+	});
+}
+
+// 话务数量
+	//part3
+	var todyPhoneCount = echarts.init(document.getElementById('todyPhoneCount'));
+	todyPhoneCount.setOption({
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: false,
+				label: {
+					show: true,
+					backgroundColor: '#030917'
+				}
+			},
+		},
+
+		xAxis: {
+			name: '类型',
+			data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
+			axisLine: {
+				lineStyle: {
+					color: '#3061a2'
+				}
+			},
+			axisTick: {
+				alignWithLabel: true,
+				show: false
+			},
+			axisLabel: { //横轴字体颜色
+				show: true,
+				textStyle: {
+					color: '#ffffff'
+				}
+			}
+		},
+		yAxis: {
+			name: '数量',
+			splitLine: {
+				show: false
+			},
+			axisLine: {
+				lineStyle: {
+					color: '#3061a2'
+				}
+			},
+			axisLabel: { //横轴字体颜色
+				show: true,
+				textStyle: {
+					color: '#eff0f4'
+				}
+			}
+
+		},
+		series: [{
+			name: '数量',
+			type: 'bar',
+			barWidth: 18,
+			itemStyle: {
+				normal: {
+					color: function(params) {
+						// build a color map as your need.
+						var colorList = [
+							'#368cab', '#54b793', '#4b6ab0', '#2531a9'
+						];
+						return colorList[params.dataIndex]
+					}
+				}
+			},
+			label: {
+				normal: {
+					show: true,
+					position: 'top', //顶部数据显示位置
+					textStyle: {
+						color: '#fff' //顶部数据颜色
+					},
+					formatter: '{c}' // 这里是数据展示的时候显示的数据
+				}
+			},
+			data: []
+		}]
+
+	});
+
+	function parthuawu(dates,areaOneVal) {
+		$.ajax({
+			type: "get",
+			url: huayi.config.callcenter_url + "info/GetTelCountByDate",
+			async: true,
+			dataType: "json",
+			data: {
+				date: dates,
+				branchcode:areaOneVal
+			},
+			success: function(data) {
+				if(data.state.toLowerCase() == "success") {
+					//					layer.close(index);
+					var con = data.data;
+					todyPhoneCount.setOption({
+						series: [{
+							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes]
+						}]
+
+					})
+
+				}
+			}
+
+		});
+
+	}
+	
+	
+	// 投诉举报
+	var partcom = echarts.init(document.getElementById('partcom'));
+	partcom.setOption({
+		color: ['#6ce7ac', '#6a91e0', '#ceba5f', '#cb5f79', '#ae765a', '#569d4e'],
+		title: {
+			text: '各类型占比',
+			x: '28%',
+			y: '45%',
+			textStyle: {
+				fontWeight: 'normal',
+				fontSize: 16,
+				color: '#fff'
+		
+			}
+		},
+		tooltip: {
+			trigger: 'item',
+			formatter: "{a} <br/>{b} : {c} ({d}%)",
+			axisPointer: {
+				crossStyle: {
+					color: '#fff'
+				}
+			}
+		},
+					legend: {
+						//      orient: 'vertical',
+						bottom: 'bottom',
+						data: ['表扬','建议','投诉','举报','其他','求助','咨询'],
+						textStyle: {
+							color: '#fff'
+						}
+					},
+		series: [{
+			name: '数据',
+			type: 'pie',
+			radius: ['30%', '60%'],
+			center: ['40%', '50%'],
+			data: [],
+			itemStyle: {
+				emphasis: {
+					shadowBlur: 10,
+					shadowOffsetX: 0,
+					shadowColor: 'rgba(0, 0, 0, 0.5)'
+				},
+				normal: {
+					label: {
+						show: true,
+						//                                 formatter: '{b} : {c} ({d}%)' 
+						formatter: '{d}%'
+					},
+					labelLine: {
+						show: true
+					}
+				}
+			},
+			label: {
+				normal: {
+					textStyle: {
+						color: '#fff'
+					}
+				}
+			}
+		}]
+	});
+	
+	function partcomplain(start, end,areaOneVal) {
+		//		var index = layer.load(1, {
+		//			shade: [0.5, '#030303'] //0.1透明度的白色背景
+		//		});
+		$.ajax({
+			type: "get",
+			url: huayi.config.callcenter_url + "info/GetTypeCountByDate",
+			async: true,
+			dataType: 'json',
+			data: {
+				start: start,
+				end: end,
+				branchcode:areaOneVal
+			},
+			success: function(data) {
+				if(data.state.toLowerCase() == 'success') {
+					//						layer.close(index);
+					$('.complaint_type').html('');
+					var con = data.data;
+					var part_1_legend = [];
+					var part_1_ser = [];
+					$(con).each(function(i, n) {
+						part_1_legend.push(n.TypeName)
+						var part_1_obj = {};
+						part_1_obj.value = n.Count;
+						part_1_obj.name = n.TypeName;
+						part_1_ser.push(part_1_obj)
+						$('<li>' +
+							'<span class="type_name">' + n.TypeName + '</span>   <span class="type_count">' + n.Count + '</span>' +
+							'</li>').appendTo('.complaint_type')
+					})
+					partcom.setOption({
+						//							legend: {
+						//								data: part_1_legend
+						//							},
+						series: [{
+							data: part_1_ser
+						}]
+					})
+	
+				}
+			}
+		});
+	}
+	

WebChart/js/sourceChannel.js

@@ -107,6 +107,21 @@ part_1.setOption({
 			}
 		}
 	},
+	 toolbox: {
+		    x:100,
+		    y:20,
+	        show : true,
+	        feature : {
+			   
+	            mark : {show: true},
+	            magicType : {show: true, type: ['line', 'bar']},
+	        },
+			  iconStyle:{
+			                    normal:{
+			                      color:'#ffaa00',//设置颜色
+			                    }
+			                } 
+	    },
 	grid: {
 		left: '2%',
 		right: '5%',
@@ -119,7 +134,19 @@ part_1.setOption({
 		data: [],
 		textStyle: {
 			color: '#00e9ff'
-		}
+		},
+						 selected: {
+							'市区': true,
+							'文峰区': false,
+							'北关区': false,
+							'殷都区': false,
+							'龙安区': false,
+							'安阳县': false,
+							'汤阴县': false,
+							'内黄县': false,
+							'滑县': false,
+							'林州市': false
+						}
 	},
 	xAxis: {
 		name: '时',
@@ -159,7 +186,28 @@ part_1.setOption({
 	},
 	series: []
 });
-
+    part_1.on('legendselectchanged', function(params) {
+		console.log(params.selected)
+        var option = this.getOption();
+        var select_key = Object.keys(params.selected);
+        var select_value = Object.values(params.selected);
+		console.log(select_value,select_key)
+        var n = 0;
+        // select_value.map(res => {
+        //    if(!res){
+        //        n++;
+        //     }
+        // });
+        // console.log('n',n)
+        //    if (n == select_value.length ) {
+        //                        option.legend[0].selected[params.name] = true;
+        //              }
+		$sel.map(res => {
+		   console.log(res)
+		});
+        this.setOption(option)
+     
+    });
 function partOne(dates,areaOneVal) {
 	$.ajax({
 		type: "get",
@@ -172,20 +220,21 @@ function partOne(dates,areaOneVal) {
 		},
 		success: function(data) {
 			if(data.state.toLowerCase() == "success") {
-				//							layer.close(index);
 				var con = data.data;
+				console.log(con)
 				var part1Axis = con.hours;
 				var sers = []
 				$(con.cols).each(function(i, n) {
 					var obj = {};
 					obj.name = n;
-					obj.type = "line";
+					obj.type = "bar";
 					obj.smooth = true;
 					obj.showAllSymbol = true;
 					obj.symbol = "emptyCircle";
 					obj.symbolSize = 10;
 					obj.data = con.counts[i];
 					sers.push(obj);
+					console.log(sers)
 				})
 				part_1.setOption({
 					xAxis: {

WebChart/second.html

@@ -611,21 +611,21 @@
 
 					<!--第四屏  话务量统计-->
 						<div class="slideCon_bg trafficVolume clearfix" >
-							<p class="slide_title slide_title5"></p>
+							<p class="top_title" style="margin-left: 205px;padding-top: 6px; margin-left: 601px; position: absolute;font-size: 27px;letter-spacing: 8px;top: 80px;color: #fff;text-shadow: 1px 1px #34c0d9;">诉求关键字</p>
 							<div class="fivePos" style="width: 100% !important;">
 								<div class="time_box pull-right form-inline" style="margin-right:122px;margin-top:-5px">
 									<!--地区选择：
 									<select class="areaFive selects" style="height: 30px; margin-right: 20px;"></select>-->
 									部门
-									<select class="depart selects" style="height: 28px;"> </select>
+									<select class="depart selects" style="height: 28px;width: 308px;"> </select>
 									日期
 									<input type="text" id="test6" class="times lasttime" style="margin-right: 0px;" /> 
 								</div>
 							</div>
 							<div class="orderCon_left slide_left sl">
-								<div class="keyW_t">
+						<!-- 		<div class="keyW_t">
 									投诉关键字
-								</div>
+								</div> -->
 								<div class="tagBox">
 									<div class="tagcloud">
 									</div>

WebChart/sourceChannel.html

@@ -204,7 +204,7 @@
 		<!--导航栏结束-->
 		<!--导航栏结束-->
 		<div  class="boxwrap">
-			<p class="bt">接单部门</p>
+			<p class="bt">来源统计</p>
 			<div class="phone_top">
 				<div class="legend_bar clearfix">
 					<div class="title_word pull-left">

WebChart/third.html

@@ -611,21 +611,21 @@
 
 					<!--第四屏  话务量统计-->
 						<div class="slideCon_bg trafficVolume clearfix" >
-							<p class="slide_title slide_title5"></p>
+							<p class="top_title" style="margin-left: 205px;padding-top: 6px; margin-left: 601px; position: absolute;font-size: 27px;letter-spacing: 8px;top: 80px;color: #fff;text-shadow: 1px 1px #34c0d9;">诉求关键字</p>
 							<div class="fivePos" style="width: 100% !important;">
 								<div class="time_box pull-right form-inline" style="margin-right:122px;margin-top:-5px">
 									<!--地区选择：
 									<select class="areaFive selects" style="height: 30px; margin-right: 20px;"></select>-->
 									部门
-									<select class="depart selects" style="height: 28px;"> </select>
+									<select class="depart selects" style="height: 28px;width: 308px;"> </select>
 									日期
 									<input type="text" id="test6" class="times lasttime" style="margin-right: 0px;" /> 
 								</div>
 							</div>
 							<div class="orderCon_left slide_left sl">
-								<div class="keyW_t">
+								<!-- <div class="keyW_t">
 									投诉关键字
-								</div>
+								</div> -->
 								<div class="tagBox">
 									<div class="tagcloud">
 									</div>