duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!--优先使用 IE 最新版本和 Chrome-->
		<meta name="renderer" content="webkit" />
		<script src="Script/Common/huayi.load.js"></script>
		<script src="Script/Common/huayi.config.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<title>话务量详情页</title>
		<style>
			#time1{
				width: 199px;
			}
			.phone_bottom >div:last-child{
				width: 40%;
				margin-left: 1%;
				 background: url(img/jd_bg3.png) no-repeat center;
				 background-size: 100% 100%;
			}
			.phone_bottom >div:first-child{
				 background: url(img/jd_bg2.png) no-repeat center;
				 background-size: 100% 100%;
				width: 59%;
			}
			.wrap {
				margin: 0 auto;
				height: 900px!important;
				width: 100%!important;
			}
			.boxwrap{
			    width: 64%;
			    height: 900px!important;
				float: left;
				text-align: center;
				margin-left: 20px;
					
			}
			.smallbox{
				width: 30%;
				float: right;
				display: flex;
			    flex-wrap: wrap;
				margin-top: 65px;
				margin-right: 20px;
				justify-content:space-between;
				
			}
			.smallimg{
				border: 2px solid #00E9FF;
				border-radius: 20px;
				margin-bottom: 20px;
			  width: 48%;
			
			}
			.activeBox{
				border: 2px solid #3c920c;
			}
			.smallimg img{
				width: 100%;
				border-radius: 20px;
				display: block;
				height: 160px;
			}
			.bt{
				font-size: 32px;
				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>

	<body>
		<!--导航栏开始-->
		<div id="nav" class="clearfix">
			<div class="nav_left"><img src="img/nav_l.png" alt="" /></div>
			<div class="nav_middle">
				安阳市12345大数据平台
			</div>
			<div class="nav_right"><img src="img/nav_r.png" alt="" /></div>
		</div>
		<!--导航栏结束-->
		<div  class="boxwrap">
			<p class="bt">话务数量</p>
				<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="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>
				<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">
				<div class="bottom_left pull-left">
					<div class="legend_bar clearfix">
					<div class="title_word pull-left">
						<span class="col-line"></span> 话务量实时统计数据
					</div>
					<div class="time_box pull-right form-inline" style="top:40px">
						日期<input type="text" id="time2" class="times" />
					</div>

				</div>
					<!--话务量实时统计-->
					<div id="phoneTimeCount" style="width: 100%;height: 390px;">
						
					</div>
				</div>
				<div class="bottom_right pull-left">
					<div class="legend_bar clearfix">
					<div class="title_word pull-left">
						<span class="col-line"></span> 今日话务量数据
					</div>
					<div class="time_box pull-right form-inline">
						日期<input type="text" id="time3" class="times"/>
					</div>

				</div>
					<!--今日话务量数据-->
					<div id="todyPhoneCount" style="width: 100%;height: 390px;"></div>	
				</div>

			</div>
			<!--</div>-->
		</div>
		<div class="smallbox">
			<div class="smallimg index">
				<img src="./img/background01.png" >
			</div>
			<div class="smallimg second">
				<img src="./img/background02.png" >
			</div>
			<div class="smallimg third">
				<img src="./img/background03.png" >
			</div>
			<div class="smallimg fourth">
				<img src="./img/background04.png" >
			</div>
		<div class="smallimg" id="sourceChannel">
			<img src="./img/background05.png" >
		</div>
		<div class="smallimg" id="department">
			<img src="./img/background06.png" >
		</div>
		<div class="smallimg activeBox">
			<img src="./img/background07.png" >
		</div>
		<div class="smallimg" id="complaint">
			<img src="./img/background08.png" >
		</div>
		</div>
		<script src="js/TelephoneDetails.js"></script>
		<script src="js/setItervalTime.js"></script>
	</body>

</html>