xinxi

css/index.css

@@ -0,0 +1,621 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-size: 16px;
+	background-color: #100e11;
+	-webkit-text-size-adjust: none;
+}
+
+ul,li {
+	margin: 0;
+	padding: 0;
+}
+
+li {
+	list-style-type: none;
+}
+
+img {
+	border: 0;
+}
+p{
+	margin: 0;
+	padding: 0;
+}
+.clearfix {
+	zoom: 1;
+	overflow: hidden;
+}
+
+.clearfix:after {
+	content: " ";
+	display: block;
+	clear: both;
+	height: 0;
+}
+
+a {
+	text-decoration: none;
+}
+[ui-view]{
+	background:#100e11 ;
+}
+
+ .navcon{
+ 	width: 100%;
+ 	background:#100e11 ;
+ }
+ .navbox{
+ 	width: 95%;
+ 	margin: 0 auto;
+ 	height: 45px;
+ 	color: #fff;
+ }
+  .navbox p{
+  	float: left;
+  	height: 100%;
+  	text-align: center;
+  	line-height: 45px;
+  	font-size: 25px;
+  
+  }
+ 
+  .navbox .navl{
+  	height: 100%;
+  	width: 60%;
+  	float: right;
+  }
+ .navbox .navl li{
+ 	float: left;
+ 	height: 100%;
+ 	margin-left: 10px;
+ 
+ }
+  .navbox .navl li a{
+  	display: block;
+  	height: 100%;
+ 	line-height: 45px;
+ 	text-align: center;
+ 	padding: 0px 15px;
+ 	color: #73a2fa;
+  }
+.navbox .navl li a.active{
+ 	color: #fff;
+ 	background: #65668c;
+ }
+ 
+ /*来源渠道开始*/
+
+ .qunzhong{
+     width: 95%;
+    background: #100e11;
+    margin: 0 auto;
+    padding: 40px 0;
+ 	
+ }
+ .huanxing{
+ 	float: right;
+ 	width: 35%;
+ 	color: #fff;
+ 	text-align: center;
+ }
+  .huanxing ul li{
+  	float: left;
+  	width: 25%;
+  	margin-top: 10px;
+  	font-size: 14px;
+  	
+  }
+  .huanxing ul li div{
+  	width: 80%;
+    margin: 0 auto;
+    background: url(../img/circle_03.png) no-repeat;
+    height: 110px;
+    background-size: contain;
+    color: #fff;
+    text-align: center;
+    line-height: 6em;
+   
+  }
+    .slqd{
+    	float: left;
+    	width: 100%;
+    }
+   .slqd .txbox>li{
+ 	float: left;
+ 	width: 10%;
+ 	color: #fff;
+ 	text-align: center;
+ 	    font-size: 14px;
+ }
+/*来源渠道结束*/
+/*接单部门处理情况开始*/
+.jiedan-left{
+	float: left;
+	width: 60%;
+	
+}
+.jiedan-right{
+	float: right;
+	width: 40%;
+	
+}
+.biao-title{
+	text-align: center;
+	color: #fff;
+	font-size: 16px;
+	margin: 10px 0;
+	font-weight: bold;
+}
+.bumen ul.txbox li{
+	width: 20%;
+	float: left;
+	text-align: center;
+	color: #fff;
+	font-size: 14px;
+}
+/*接单部门处理情况结束*/
+/*投诉举报开始*/
+.tousujb{
+	width: 95%;
+	margin: 35px auto 0 auto;
+	margin-top: 35px;
+}
+
+.tousujb>div>div{
+	float: left;
+}
+.tsjb-top .tsjb-tl{
+	width: 35%;
+}
+.tsjb-top .tsjb-tr{
+	width: 65%;
+}
+.tsjb-bot .tsjb-bl{
+	margin-left: 0;
+}
+.tsjb-bot>div{
+	width: 30%;
+	margin-top: 20px;
+	box-sizing: border-box;
+    margin-left: 3%;
+	
+}
+.tsjb-bm ul li>div,.tsjb-br ul li>div{
+	float: left;
+	color: #fff;
+	font-size: 14px;
+}
+.tsjb-bm ul li>div.tsgjz-left,.tsjb-br ul li>div.tsgjz-left{
+	width: 70%;
+}
+.tsjb-bm ul li>div.tsgjz-right,.tsjb-br ul li>div.tsgjz-right{
+	float: right;
+}
+.tsjb-bm ul li .progress,.tsjb-br ul li .progress{
+	background-color: #64547b;
+}
+.progress-bar-zise {
+    background-color: #c278a9;
+}
+.progress-bar-cheng {
+    background-color: #fc9765;
+}
+.progress-bar-fen {
+    background-color: #ffe6de;
+}
+.progress-bar-dousha {
+    background-color: #ef9c94;
+}
+.progress-bar-qing {
+    background-color: #deffde;
+}
+.progress-bar-bohe {
+    background-color: #87ebf1;
+}
+.success{
+	color: #5cb85c;
+}
+.warning {
+   color: #f0ad4e;
+}
+.danger {
+    color: #d9534f;
+}
+.info {
+    color: #5bc0de;
+}
+.zise {
+   color: #c278a9;
+}
+.cheng {
+   color: #fc9765;
+}
+.fen {
+   color: #ffe6de;
+}
+.dousha {
+ 	color: #ef9c94;
+}
+.qing {
+    color: #deffde;
+}
+.bohe {
+    color: #87ebf1;
+}
+
+/*投诉举报结束*/
+/*话务数量情况开始*/
+.z_num {
+		color: #FFFFFF;
+		font-size: 16px;
+		text-align: center;
+		display: block;
+		margin-top: 8px;
+	}
+	
+	.phone_num {
+		overflow: hidden;
+		margin-top: 10px;
+	}
+	
+	.phone_li {
+		color: #fff;
+	}
+	
+	.phone_li li {
+		width: 50%;
+		float: left;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	.Map_picter {
+		width: 100%;
+	}
+	
+	.fl {
+		float: left;
+	}
+	
+	.Map_dq ul li {
+		float: left;
+		color: #FFFDEF;
+		width: 20%;
+		text-align: center;
+		margin-bottom: 10px;
+	}
+	
+	.size-14 {
+		font-size: 14px;
+	}
+	
+	.tb {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #FFFDEF;
+		vertical-align: baseline;
+	}
+	
+	.xe-z {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #fecb00;
+	}
+	
+	.xe-l {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #4ef41b;
+	}
+	
+	.xe-a {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #ecaaf1;
+	}
+	
+	.xe-t {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #043288;
+	}
+	
+	.xe-x {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #ed15fa;
+	}
+	
+	.xe-y {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #2bf9e8;
+	}
+	
+	.xe-g {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #d8b839;
+	}
+	
+	.xe-w {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #2b6df1;
+	}
+	
+	.xe-b {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #fc1807;
+	}
+	
+	.xe-1 {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #23b166;
+	}
+	
+	.xe-2 {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #fbfafa;
+	}
+	
+	.xe-3 {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #f27bbf;
+	}
+	
+	.xe-4 {
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		background-color: #fb028f;
+	}
+	
+/*话务数量情况结束*/
+/*中心大数据开始*/
+			.containers{
+				margin-top: 35px;
+			}
+			.z_num {
+				color: #FFFFFF;
+				font-size: 16px;
+				text-align: center;
+				display: block;
+				margin-top: 8px;
+			}
+			
+			.phone_num {
+				overflow: hidden;
+				margin-top: 10px;
+			}
+			.phone_li li span {
+				display: block;
+				text-align: center;
+			}
+			
+			.map_titles {
+				color: #E0E0E3;
+				font-size: 16px;
+				text-align: center;
+				display: block;
+				margin-top: 8px;
+			}
+			
+			.main1 {
+				width: 40%;
+				float: left;
+			}
+			
+
+			.sl_title {
+				font-size: 16px;
+				text-align:center;
+				color: #fff;
+			}
+			
+			.slqm ul {
+				margin-top: 10px;
+			}
+			
+			.slqm ul li {
+				list-style: none;
+				font-size: 14px;
+				text-align: center;
+				margin-bottom: 15px;
+			}
+			
+			.slqm ul li span {
+				margin: 5px;
+				text-align: center;
+				display: inline-block;
+				width: 8%;
+			}
+			
+			.sl_b {
+				color: #F0F4F7;
+			}
+			
+			.sl_red {
+				color: red;
+			}
+			
+			.sl_blue {
+				color: #73a2fa;
+			}
+			
+			.size-20 {
+				font-size: 20px;
+			}
+			
+			.max-width {
+				width: 40%!important;
+				text-align: left!important;
+			}
+			
+			.tspm ul {
+				margin-top: 50px;
+			}
+			
+			.tspm ul li span {
+				text-align: center;
+				display: inline-block;
+				width: 10%;
+			}
+			
+			.tspm ul li {
+				font-size: 14px;
+				text-align: center;
+				margin-bottom: 30px;
+			}
+			.slqm_content ul li .progress {
+				   background-color: #64547b;
+			
+			}
+			.conb>div{
+				float: left;
+				width: 33%;
+			}
+			.gd-tbox{
+				width: 100%;
+				margin: 0 0 85px 0;
+			}
+			.gd-tbox li{
+				float: left;
+				width: 33.3%;
+				text-align: center;
+				color: #fff;
+				height: 45px;
+   				line-height: 45px;
+			}
+			.gd-tbox li span{
+				color: red;
+			}
+			.gd-tbox li.gd-tit{
+				background: red;
+				color: #fff;
+				
+			}
+			.mb>div{
+				float: left;
+			}
+			.gdmap>div{
+				float: left;
+			}
+			.gdmap>div.gdmap-l{
+				width: 20%;
+			}
+			.gdmap>div.gdmap-l ul{
+				width: 100%;
+				color: #73a2fa;
+				font-size: 14px;
+			}
+			.gdmap>div.gdmap-l ul li{
+					width: 100%;
+				    text-align: center;
+   					 margin-top: 25px;
+			}
+			.gdmap>div.gdmap-l ul li span{
+				color: #fff;
+				font-size: 18px;
+			}
+			.gdmap>div.gdmap-m{
+				width: 60%;
+			}
+			.gdmap>div.gdmap-m img{
+				display: block;
+				width: 100%;
+			}
+			.gdmap>div.gdmap-r{
+				width: 20%;
+				color: #fff;
+				font-size: 14px;
+			}
+			.gdmap>div.gdmap-r ul li i{
+				margin-right: 5px;
+			}
+			.gdmap>div.gdmap-r ul li {
+				margin-top: 10px;
+			}
+/*中心大数据结束*/
+/*服务知识开始*/
+	.slqd_title {
+				font-size: 16px;
+				color: #73a2fa;
+				text-align:center;
+			}
+			.xs {
+				font-size: 16px;
+				line-height: 40px;
+				display: block;
+			}			
+			.pr_bai {
+				color: #FFF;
+				margin-bottom: 8px;
+			}
+			
+			.bm {
+				width: 35%;
+				display: block;
+				float: left;
+				height: 40px;
+				float: right;
+				line-height: 15px;
+			}
+			
+			.bm span {
+				font-size: 14px;
+				text-align: center;
+				display: block;
+			}
+			
+			.slqd_content {
+				overflow: hidden;
+			}			
+			.slqd_content {
+				margin-top: 30px;
+			}			
+				
+			.info {
+				color: #23c6c8;
+			}
+			
+			.success {
+				color: #1c84c6;
+			}
+			
+			.danger {
+				color: #ed5565;
+			}
+			
+			.warning {
+				color: #f8ac59;
+			}
+			.slqd_content ul{
+				padding-left: 0;
+				margin-right: 40px;
+			}
+			.slqd_content ul li .progress {
+				width: 60%;
+				height: 40px;
+				float: left;
+				background-color: #64547b;
+			}
+/*服务知识结束*/

html/fuwuzhishi.html

@@ -0,0 +1,95 @@
+
+
+	<div class="containers">
+		<div style="width: 33.33%;" class="fdcl fl">
+			<div id="fdcl" style="height: 600px;"></div>
+		</div>
+		<div style="width: 33.33%;" class="slqd fl" id="slqd">
+			<div class="slqd_title">群众咨询知识库情况统计</div>
+			<div class="slqd_content">
+				<ul>
+					<li>
+						<div class="progress">
+							<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
+								<span class="xs">90%</span>
+							</div>
+						</div>
+						<div class="bm">
+							<span class="pr_bai">护照办理</span>
+							<span class="info">(1001)</span>
+						</div>
+					</li>
+					<li>
+						<div class="progress">
+							<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
+								<span class="xs">90%</span>
+							</div>
+						</div>
+						<div class="bm">
+							<span class="pr_bai">机动车注册登记</span>
+							<span class="warning">(1001)</span>
+						</div>
+					</li>
+					<li>
+						<div class="progress">
+							<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
+								<span class="xs">70%</span>
+							</div>
+						</div>
+						<div class="bm">
+							<span class="pr_bai">不动产登记</span>
+							<span class="danger">(1001)</span>
+						</div>
+					</li>
+					<li>
+						<div class="progress">
+							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
+								<span class="xs">40%</span>
+							</div>
+						</div>
+						<div class="bm">
+							<span class="pr_bai">生育津贴</span>
+							<span class="success">(1001)</span>
+						</div>
+					</li>
+					<li>
+						<div class="progress">
+							<div class="progress-bar  progress-bar-zise" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
+								<span class="xs">60%</span>
+							</div>
+						</div>
+						<div class="bm">
+							<span class="pr_bai">社保政策社保政策</span>
+							<span class="zise">(1001)</span>
+						</div>
+					</li>
+					<li>
+						<div class="progress">
+							<div class="progress-bar progress-bar-cheng" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
+								<span class="xs">20%</span>
+							</div>
+						</div>
+						<div class="bm">
+							<span class="pr_bai">落户政策</span>
+							<span class="cheng">(1001)</span>
+						</div>
+					</li>
+					<li>
+						<div class="progress">
+							<div class="progress-bar progress-bar-fen" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
+								<span class="xs">20%</span>
+							</div>
+						</div>
+						<div class="bm">
+							<span class="pr_bai">驾照更换</span>
+							<span class="fen">(1001)</span>
+						</div>
+					</li>
+
+				</ul>
+			</div>
+		</div>
+		<div class="zs fl" style="width: 33.33%;">
+			<div id="zs" style="height: 600px;"></div>
+		</div>
+	</div>

html/huawu.html

@@ -0,0 +1,103 @@
+
+<div class="huawu">
+	<div class="containers clearfix">
+		<div style="width:55%; float: left;">
+			<div id="main1"></div>
+		</div>
+		<div style="width: 40%; float: right;">
+			<div class="Map">
+				<div class="biao-title">
+								 管辖区域来话量统计
+								 </div>
+				<div class="Map_content">
+					<div class="">
+						<img class="Map_picter" src="../img/123.png" alt="" />
+					</div>
+					<div class="Map_dq">
+						<ul class="">
+							<li>
+								<b class="xe-z"></b>
+								<span class="size-14">周至县</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-l"></b>
+								<span class="size-14">户县</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-a"></b>
+								<span class="size-14">长安区</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-t"></b>
+								<span class="size-14">蓝田县</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-y"></b>
+								<span class="size-14">阎良区</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-g"></b>
+								<span class="size-14">高陵县</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-w"></b>
+								<span class="size-14">未央区</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-b"></b>
+								<span class="size-14">灞桥区</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-1"></b>
+								<span class="size-14">周至县</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-2"></b>
+								<span class="size-14">周至县</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-3"></b>
+								<span class="size-14">周至县</span>
+								<span>80%</span>
+							</li>
+							<li>
+								<b class="xe-4"></b>
+								<span class="size-14">周至县</span>
+								<span>80%</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="row2 clearfix">
+		
+			<div id="main" style="width: 55%; float: left;"></div>
+		
+		
+			<div class='hwzt' style="width: 40%; float: right;">
+				<span class="z_num">话务量总体统计</span>
+				<div class="phone_num">
+					<ul class="phone_li">
+						<li> <div id="ld"></div><span>每天来话量</span> </li>
+						<li><div id="jtl"></div><span>接通量</span></li>
+						<li> <div id="jtv"></div><span>接通率</span></li>
+						<li> <div id="zxr"></div><span>坐席人数</span></li>
+						<li> <div id="sc"></div><span>平均通话时长</span></li>
+					</ul>
+				</div>
+			</div>
+	
+	</div>
+</div>

html/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+
+	<head lang="en">
+		<meta charset="UTF-8">
+		<title></title>
+		<link rel="stylesheet" href="../css/bootstrap.min.css" />
+		<link rel="stylesheet" href="../css/index.css" />
+
+	</head>
+
+	<body ng-app="myRoute">
+		<div class="navcon ">
+			<div class="navbox clearfix">
+				<p>XX市服务中心信息展示系统</p>
+				<ul class="navl clearfix">
+					<li>
+						<a ui-sref="index" ui-sref-active="active">来源渠道情况</a>
+					</li>
+					<li>
+						<a ui-sref="jiedanbumen" ui-sref-active="active">接单部门情况</a>
+					</li>
+					<li>
+						<a ui-sref="tousujubao" ui-sref-active="active">投诉举报情况</a>
+					</li>
+					<li>
+						<a ui-sref="huawu" ui-sref-active="active">话务数量情况</a>
+					</li>
+					<li>
+						<a ui-sref="zhongxin" ui-sref-active="active">中心大数据</a>
+					</li>
+					<li>
+						<a ui-sref="fuwuzhishi" ui-sref-active="active">服务知识</a>
+					</li>
+
+				</ul>
+			</div>
+		</div>
+
+		<div ui-view></div>
+
+		<script src="../js/chajs/angular-1.5.8.js"></script>
+		<script src="../js/chajs/angular-ui-router.min.js"></script>
+		<script src="../js/chajs/angular-animate.js"></script>
+		<script src="../js/chajs/jquery.min.js"></script>
+		<script src="../js/chajs/echarts.min.js"></script>
+		<script src="../js/chajs/highcharts.js"></script>
+		<script src="../js/chajs/gray.js"></script>
+		<script src="../js/chajs/radialIndicator.js"></script>
+		<script src="../js/chajs/angular.radialIndicator.js"></script>
+		<script src="../js/rout.js"></script>
+		<script src="../js/laiyuanqudao.js"></script>
+		<script src="../js/jiedanbumen.js"></script>
+		<script src="../js/tousujubao.js"></script>
+		<script src="../js/huawu.js"></script>
+		<script src="../js/zhongxin.js"></script>
+		<script src="../js/fuwuzhishi.js"></script>
+
+		<script>
+			if(!location.href.split('#')[1]) {
+				history.replaceState(null, 'index', location.href.split('#')[0] + '#/' + 'laiyuanqudao.html');
+			}
+			//  $('.forEWM').on('mouseover',function(){
+			//      $('.erWeiMaDiv').css('display','block')
+			//  }).on('mouseout',function(){
+			//      $('.erWeiMaDiv').css('display','none')
+			//  });
+			//  $("#index-logo").removeClass()
+			//          .addClass('index-logoImg')
+		</script>
+	</body>
+
+</html>

html/jiedanbumen.html

@@ -0,0 +1,64 @@
+
+<div class="jiedan clearfix">
+	<div class="jiedan-left">
+		<div class="biao-title">接单情况汇总</div>
+	<div id="jiedan1" style="width: 100%; height: 400px;"></div>
+	
+	<div class="biao-title">各部门受理工单情况</div>
+	<div class="bumen">
+		<ul class="txbox clearfix">
+			<li>
+				<div id="dizhen"></div>
+				市地震局
+			</li>
+			<li>
+				<div id="fazhiban"></div>
+				市法制办
+			</li>
+		<li>
+			<div id="huanbao"></div>
+		市环保局
+		</li>
+		<li>
+			<div id="guotu"></div>
+			市国土局
+		</li>
+		<li>
+			<div id="linye"></div>
+			市林业局
+		</li>
+		<li>
+			<div id="meitan"></div>
+			市煤炭局
+		</li>
+		<li>
+			<div id="minzheng"></div>
+			市民政局
+			
+		</li>
+		<li>
+			<div id="shenji"></div>
+			市审计局
+			
+		</li>
+		<li>
+			<div id="shangwu"></div>
+			市商务局
+			
+		</li>
+		<li>
+			<div id="jiancha"></div>
+			市检察院
+			
+		</li>
+		
+		</ul>
+	</div>
+	
+	</div>
+	<div class="jiedan-right" style="height: 100%;">
+		<div class="biao-title">工单处理时间分布情况</div>
+		<div id="timefb" style="height: 670px;"></div>
+	</div>
+</div>
+

html/laiyuanqudao.html

@@ -0,0 +1,114 @@
+<div class="qunzhong clearfix">
+	<div id="container1" style="width: 60%; height:500px;float: left;"></div>
+	<div class="huanxing">
+		
+		<div class="biao-title">受理区域统计</div>
+		<ul class="clearfix" >
+			<li>
+				<div>111</div>
+				新城区
+			</li>
+			<li>
+				<div>131</div>
+				
+				碑林区
+			</li>
+			<li>
+				<div>181</div>
+				莲湖区
+			</li>
+			<li>
+				<div>231</div>
+				雁塔区
+			</li>
+			<li>
+				<div>331</div>
+				未央区
+			</li>
+			<li>
+				<div>752</div>
+				灞桥区
+			</li>
+			<li>
+				<div>531</div>
+				阎良区
+			</li>
+			<li>
+				<div>631</div>
+				临潼区
+			</li>
+			<li>
+				<div>661</div>
+				长安区
+			</li>
+			<li>
+				<div>881</div>
+				秦都区
+			</li>
+			<li>
+				<div>6661</div>
+				渭城区
+			</li>
+			
+			
+		</ul>
+	</div>
+	
+	
+	
+	<div class="slqd">
+		<div class="biao-title">受理渠道24小时实时统计</div>
+		<ul class="txbox">
+			<li>
+				<div id="weibo"></div>
+				微博
+			</li>
+			<li>
+				<div id="phone"></div>
+				电话
+			</li>
+		<li>
+			<div id="doorhu"></div>
+		门户网站
+		</li>
+		<li>
+			<div id="app"></div>
+			APP
+		</li>
+		<li>
+			<div id="weixin"></div>
+			微信
+		</li>
+		<li>
+			<div id="message"></div>
+			短信
+		</li>
+		<li>
+			<div id="email"></div>
+			邮箱
+			
+		</li>
+		<li>
+			<div id="face"></div>
+			脸书
+			
+		</li>
+		<li>
+			<div id="ins"></div>
+			ins
+			
+		</li>
+		<li>
+			<div id="qq"></div>
+			QQ
+			
+		</li>
+		
+		</ul>
+	
+	</div>
+
+		
+	
+</div>
+

html/tousujubao.html

@@ -0,0 +1,208 @@
+<div class="tousujb">
+	<div class="tsjb-top clearfix">
+		<div class="tsjb-tl">
+			<!--<div class="biao-title">投诉/举报汇总</div>-->
+			<div id="quantity" style="width: 100%;height: 400px;"></div>
+		</div>
+		<div class="tsjb-tr">
+			<div id="tsdwgr" style="width: 100%;height: 400px;"></div>
+		</div>
+	</div>
+	<div class="tsjb-bot clearfix">
+		<div class="tsjb-bl">
+	<div id="tsdw_dw" style="width: 100%;height: 400px;"></div>
+</div>
+<div class="tsjb-bm">
+	<div class="biao-title">投诉关键字统计</div>
+	<ul>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-success " style="width: 10%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">不作为<span class="success">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-warning " style="width: 20%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">服务态度<span class="warning">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-danger " style="width: 30%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="danger">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-info" style="width: 40%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="info">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-zise" style="width: 50%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="zise">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-cheng" style="width: 60%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="cheng">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-fen" style="width: 70%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="fen">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-dousha " style="width: 80%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="dousha">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-qing "  style="width: 90%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="qing">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-bohe" style="width: 100%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="bohe">1785</span></div>
+		</li>
+	</ul>
+</div>
+<div class="tsjb-br">
+			<div class="biao-title">举报关键字统计</div>
+	<ul>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-success " style="width: 10%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">不作为<span class="success">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-warning " style="width: 20%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">服务态度<span class="warning">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-danger " style="width: 30%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="danger">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-info" style="width: 40%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="info">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-zise" style="width: 50%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="zise">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-cheng" style="width: 60%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="cheng">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-fen" style="width: 70%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="fen">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-dousha " style="width: 80%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="dousha">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-qing "  style="width: 90%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="qing">1785</span></div>
+		</li>
+		<li class="clearfix">
+			<div class="tsgjz-left">
+				<div class="progress">
+					<div class="progress-bar progress-bar-bohe" style="width: 100%">
+					</div>
+				</div>
+			</div>
+			<div class="tsgjz-right">护照办理<span class="bohe">1785</span></div>
+		</li>
+	</ul>
+			
+</div>
+</div>
+	
+</div>

html/zhongxin.html

@@ -0,0 +1,200 @@
+
+			
+					<div class="containers">
+						<div class="mb clearfix">
+							<div style="width: 39%; height: 400px;">
+								<ul class="gd-tbox clearfix">
+									<li class="gd-tit">工单类型各数量</li>
+									<li>系统电话量：<span>365</span></li>
+									<li>工单类型量：<span>300</span></li>
+								</ul>
+								<div class="gdmap clearfix">
+									
+									<div class="gdmap-l">
+										<ul>
+											<li>
+												<div>工单</div>
+												<span>700</span>
+											</li>
+											<li>
+												<div>工单</div>
+												<span>700</span>
+											</li>
+											<li>
+												<div>工单</div>
+												<span>700</span>
+											</li>
+											<li>
+												<div>工单</div>
+												<span>700</span>
+											</li>
+											<li>
+												<div>工单</div>
+												<span>700</span>
+											</li>
+										</ul>
+									</div>
+									<div class="gdmap-m">
+										<img src="../img/midmap_03.png" alt="" />
+									</div>
+									<div class="gdmap-r">
+										<ul>
+											<li><i class="xe-z"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-l"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-a"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-t"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-y"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-g"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-w"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-b"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-1"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-2"></i><span>舟山县</span><span>170</span></li>
+											<li><i class="xe-3"></i><span>舟山县</span><span>170</span></li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div style="width: 35%;">
+								<div id="slhw" style="width:100%;height: 300px;"></div>
+								<div class="slqm">
+									<div class="sl_title">工单受理排名</div>
+									<div class="slqm_content">
+										<ul>
+											<li>
+												<span class="sl_b size-20">1</span>
+												<span class="sl_b max-width">市委市市委市市委市</span>
+												<span class="sl_blue">受理</span>
+												<span class="sl_red">30%</span>
+												<span class="sl_blue">占比</span>
+												<span class="sl_b">20%</span>
+											</li>
+											<li>
+												<span class="sl_b size-20">2</span>
+												<span class="sl_b max-width">公安局</span>
+												<span class="sl_blue">受理</span>
+												<span class="sl_red">50%</span>
+												<span class="sl_blue">占比</span>
+												<span class="sl_b">60%</span>
+
+											</li>
+											<li>
+												<span class="sl_b size-20">3</span>
+												<span class="sl_b max-width">民政局</span>
+												<span class="sl_blue">受理</span>
+												<span class="sl_red">40%</span>
+												<span class="sl_blue">占比</span>
+												<span class="sl_b">20%</span>
+											</li>
+											<li>
+												<span class="sl_b size-20">4</span>
+												<span class="sl_b max-width">财政局</span>
+												<span class="sl_blue">受理</span>
+												<span class="sl_red">25%</span>
+												<span class="sl_blue">占比</span>
+												<span class="sl_b">20%</span>
+											</li>
+											<li>
+												<span class="sl_b size-20">5</span>
+												<span class="sl_b max-width">税务局</span>
+												<span class="sl_blue">受理</span>
+												<span class="sl_red">30%</span>
+												<span class="sl_blue">占比</span>
+												<span class="sl_b">20%</span>
+											</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+							<div class="tspm"style="width: 26%;">
+								<div class="sl_title">投诉/举报关键话题排名</div>
+								<div class="slqm_content">
+									<ul>
+										<li>
+											<span class="sl_b size-20">1</span>
+											<span class="sl_b max-width">市委市市委市市委市</span>
+											<span class="sl_blue">受理</span>
+											<span class="sl_red " >30%</span>
+											<span class="sl_blue " >占比</span>
+											<span class="sl_b " >20%</span>
+											<div class="progress ">
+												<div class="progress-bar progress-bar-info " role="progressbar "aria-valuenow="60 " aria-valuemin="0 " aria-valuemax="100 "style="width: 30%; "></div>
+											</div>
+										</li>
+												<li>
+													<span class="sl_b size-20 ">2</span>
+													<span class="sl_b max-width ">公安局</span>
+													<span class="sl_blue ">受理</span>
+													<span class="sl_red ">50%</span>
+													<span class="sl_blue ">占比</span>
+													<span class="sl_b ">60%</span>
+													<div class="progress ">
+													    <div class="progress-bar progress-bar-info " role="progressbar "
+													         aria-valuenow="60 " aria-valuemin="0 " aria-valuemax="100 "
+													         style="width: 80%; ">
+													    </div>
+													</div>
+												</li>
+												<li>
+													<span class="sl_b size-20 ">3</span>
+													<span class="sl_b max-width ">民政局</span>
+													<span class="sl_blue ">受理</span>
+													<span class="sl_red ">40%</span>
+													<span class="sl_blue ">占比</span>
+													<span class="sl_b ">20%</span>
+													<div class="progress ">
+													    <div class="progress-bar progress-bar-info " role="progressbar "
+													         aria-valuenow="60 " aria-valuemin="0 " aria-valuemax="100 "
+													         style="width: 60%; ">
+													    </div>
+													</div>
+												</li>
+												<li>
+													<span class="sl_b size-20 ">4</span>
+													<span class="sl_b max-width ">财政局</span>
+													<span class="sl_blue ">受理</span>
+													<span class="sl_red ">25%</span>
+													<span class="sl_blue ">占比</span>
+													<span class="sl_b ">20%</span>
+													<div class="progress ">
+													    <div class="progress-bar progress-bar-info " role="progressbar "
+													         aria-valuenow="60 " aria-valuemin="0 " aria-valuemax="100 "
+													         style="width: 70%; ">
+													    </div>
+													</div>
+												</li>
+												<li>
+													<span class="sl_b size-20 ">5</span>
+													<span class="sl_b max-width ">税务局</span>
+													<span class="sl_blue ">受理</span>
+													<span class="sl_red ">30%</span>
+													<span class="sl_blue ">占比</span>
+													<span class="sl_b ">20%</span>
+													<div class="progress ">
+													    <div class="progress-bar progress-bar-info " role="progressbar "
+													         aria-valuenow="60 " aria-valuemin="0 " aria-valuemax="100 "
+													         style="width: 60%; ">
+													       
+													    </div>
+													</div>
+												</li>
+											</ul>
+								</div>
+							</div>
+						</div>
+						
+						
+						
+						<div class="conb clearfix">
+							<div >
+								<div id="th_num" style="height: 400px;" ></div>
+							</div>
+							<div>
+								<div id="jtv_num"  style="height: 400px;" ></div>
+							</div>
+							<div>
+								<div id="th_nums"  style="height: 400px;" ></div>
+							</div>
+						</div>
+					</div>
+		
+

js/chajs/angular.radialIndicator.js

@@ -0,0 +1,44 @@
+
+
+/* Angular hook for radialIndicator */
+;
+(function (angular) {
+    angular.module('radialIndicator', []).directive('radialIndicator', ['radialIndicatorInstance',
+
+    function (radialIndicatorInstance) {
+            return {
+                restrict: 'A',
+                link: function (scope, element, attrs) {
+                    var element = element,
+                        id = attrs.radialIndicatorId,
+                        options = scope.$eval(attrs.radialIndicator),
+                        model = attrs.radialIndicatorModel;
+
+                    var indInstance = radialIndicator(element, options);
+
+                    //store indicator instance on radialIndicatorConfig so can get through dependency injection
+                    if (id) radialIndicatorInstance[id] = indInstance;
+
+                    //watch for modal change
+                    scope.$watch(model, function (newValue) {
+                        indInstance.value(newValue);
+                    });
+
+                    //delete the idnicator instance when scope dies
+                    scope.$on('$destroy', function () {
+                        if (id) delete radialIndicatorInstance[id];
+                    });
+
+                }
+            }
+    }])
+    //a factory to store radial indicators instances which can be injected to controllers or directive to get any indicators instance
+    .factory('radialIndicatorInstance', function () {
+        if (!window.radialIndicator) throw "Please include radialIndicator.js";
+
+        var radialIndicatorInstance = {};
+
+        return radialIndicatorInstance;
+
+    });
+}(angular));

js/chajs/gray.js

@@ -0,0 +1,326 @@
+/**
+ * @license Highcharts JS v5.0.10 (2017-03-31)
+ *
+ * (c) 2009-2017 Torstein Honsi
+ *
+ * License: www.highcharts.com/license
+ */
+'use strict';
+(function(factory) {
+    if (typeof module === 'object' && module.exports) {
+        module.exports = factory;
+    } else {
+        factory(Highcharts);
+    }
+}(function(Highcharts) {
+    (function(Highcharts) {
+        /**
+         * (c) 2010-2017 Torstein Honsi
+         *
+         * License: www.highcharts.com/license
+         * 
+         * Gray theme for Highcharts JS
+         * @author Torstein Honsi
+         */
+
+        Highcharts.theme = {
+            colors: ['#DDDF0D', '#7798BF', '#55BF3B', '#DF5353', '#aaeeee', '#ff0066', '#eeaaee',
+                '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'
+            ],
+            chart: {
+                backgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, 'rgb(96, 96, 96)'],
+                        [1, 'rgb(16, 16, 16)']
+                    ]
+                },
+                borderWidth: 0,
+                borderRadius: 0,
+                plotBackgroundColor: null,
+                plotShadow: false,
+                plotBorderWidth: 0
+            },
+            title: {
+                style: {
+                    color: '#FFF',
+                    font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+                }
+            },
+            subtitle: {
+                style: {
+                    color: '#DDD',
+                    font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+                }
+            },
+            xAxis: {
+                gridLineWidth: 0,
+                lineColor: '#999',
+                tickColor: '#999',
+                labels: {
+                    style: {
+                        color: '#999',
+                        fontWeight: 'bold'
+                    }
+                },
+                title: {
+                    style: {
+                        color: '#AAA',
+                        font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+                    }
+                }
+            },
+            yAxis: {
+                alternateGridColor: null,
+                minorTickInterval: null,
+                gridLineColor: 'rgba(255, 255, 255, .1)',
+                minorGridLineColor: 'rgba(255,255,255,0.07)',
+                lineWidth: 0,
+                tickWidth: 0,
+                labels: {
+                    style: {
+                        color: '#999',
+                        fontWeight: 'bold'
+                    }
+                },
+                title: {
+                    style: {
+                        color: '#AAA',
+                        font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+                    }
+                }
+            },
+            legend: {
+                itemStyle: {
+                    color: '#CCC'
+                },
+                itemHoverStyle: {
+                    color: '#FFF'
+                },
+                itemHiddenStyle: {
+                    color: '#333'
+                }
+            },
+            labels: {
+                style: {
+                    color: '#CCC'
+                }
+            },
+            tooltip: {
+                backgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, 'rgba(96, 96, 96, .8)'],
+                        [1, 'rgba(16, 16, 16, .8)']
+                    ]
+                },
+                borderWidth: 0,
+                style: {
+                    color: '#FFF'
+                }
+            },
+
+
+            plotOptions: {
+                series: {
+                    nullColor: '#444444'
+                },
+                line: {
+                    dataLabels: {
+                        color: '#CCC'
+                    },
+                    marker: {
+                        lineColor: '#333'
+                    }
+                },
+                spline: {
+                    marker: {
+                        lineColor: '#333'
+                    }
+                },
+                scatter: {
+                    marker: {
+                        lineColor: '#333'
+                    }
+                },
+                candlestick: {
+                    lineColor: 'white'
+                }
+            },
+
+            toolbar: {
+                itemStyle: {
+                    color: '#CCC'
+                }
+            },
+
+            navigation: {
+                buttonOptions: {
+                    symbolStroke: '#DDDDDD',
+                    hoverSymbolStroke: '#FFFFFF',
+                    theme: {
+                        fill: {
+                            linearGradient: {
+                                x1: 0,
+                                y1: 0,
+                                x2: 0,
+                                y2: 1
+                            },
+                            stops: [
+                                [0.4, '#606060'],
+                                [0.6, '#333333']
+                            ]
+                        },
+                        stroke: '#000000'
+                    }
+                }
+            },
+
+            // scroll charts
+            rangeSelector: {
+                buttonTheme: {
+                    fill: {
+                        linearGradient: {
+                            x1: 0,
+                            y1: 0,
+                            x2: 0,
+                            y2: 1
+                        },
+                        stops: [
+                            [0.4, '#888'],
+                            [0.6, '#555']
+                        ]
+                    },
+                    stroke: '#000000',
+                    style: {
+                        color: '#CCC',
+                        fontWeight: 'bold'
+                    },
+                    states: {
+                        hover: {
+                            fill: {
+                                linearGradient: {
+                                    x1: 0,
+                                    y1: 0,
+                                    x2: 0,
+                                    y2: 1
+                                },
+                                stops: [
+                                    [0.4, '#BBB'],
+                                    [0.6, '#888']
+                                ]
+                            },
+                            stroke: '#000000',
+                            style: {
+                                color: 'white'
+                            }
+                        },
+                        select: {
+                            fill: {
+                                linearGradient: {
+                                    x1: 0,
+                                    y1: 0,
+                                    x2: 0,
+                                    y2: 1
+                                },
+                                stops: [
+                                    [0.1, '#000'],
+                                    [0.3, '#333']
+                                ]
+                            },
+                            stroke: '#000000',
+                            style: {
+                                color: 'yellow'
+                            }
+                        }
+                    }
+                },
+                inputStyle: {
+                    backgroundColor: '#333',
+                    color: 'silver'
+                },
+                labelStyle: {
+                    color: 'silver'
+                }
+            },
+
+            navigator: {
+                handles: {
+                    backgroundColor: '#666',
+                    borderColor: '#AAA'
+                },
+                outlineColor: '#CCC',
+                maskFill: 'rgba(16, 16, 16, 0.5)',
+                series: {
+                    color: '#7798BF',
+                    lineColor: '#A6C7ED'
+                }
+            },
+
+            scrollbar: {
+                barBackgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0.4, '#888'],
+                        [0.6, '#555']
+                    ]
+                },
+                barBorderColor: '#CCC',
+                buttonArrowColor: '#CCC',
+                buttonBackgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0.4, '#888'],
+                        [0.6, '#555']
+                    ]
+                },
+                buttonBorderColor: '#CCC',
+                rifleColor: '#FFF',
+                trackBackgroundColor: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, '#000'],
+                        [1, '#333']
+                    ]
+                },
+                trackBorderColor: '#666'
+            },
+
+            // special colors for some of the demo examples
+            legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
+            background2: 'rgb(70, 70, 70)',
+            dataLabelsColor: '#444',
+            textColor: '#E0E0E0',
+            maskColor: 'rgba(255,255,255,0.3)'
+        };
+
+        // Apply the theme
+        Highcharts.setOptions(Highcharts.theme);
+
+    }(Highcharts));
+}));

js/chajs/radialIndicator.js

@@ -0,0 +1,313 @@
+/*
+    radialIndicator.js v 1.0.0
+    Author: Sudhanshu Yadav
+    Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
+    Demo on: ignitersworld.com/lab/radialIndicator.html
+*/
+
+;(function ($, window, document) {
+    "use strict";
+    //circumfence and quart value to start bar from top
+    var circ = Math.PI * 2,
+        quart = Math.PI / 2;
+
+    //function to convert hex to rgb
+
+    function hexToRgb(hex) {
+        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+        hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+            return r + r + g + g + b + b;
+        });
+
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
+    }
+
+    function getPropVal(curShift, perShift, bottomRange, topRange) {
+        return Math.round(bottomRange + ((topRange - bottomRange) * curShift / perShift));
+    }
+
+
+    //function to get current color in case of 
+    function getCurrentColor(curPer, bottomVal, topVal, bottomColor, topColor) {
+        var rgbAryTop = topColor.indexOf('#') != -1 ? hexToRgb(topColor) : topColor.match(/\d+/g),
+            rgbAryBottom = bottomColor.indexOf('#') != -1 ? hexToRgb(bottomColor) : bottomColor.match(/\d+/g),
+            perShift = topVal - bottomVal,
+            curShift = curPer - bottomVal;
+
+        if (!rgbAryTop || !rgbAryBottom) return null;
+
+        return 'rgb(' + getPropVal(curShift, perShift, rgbAryBottom[0], rgbAryTop[0]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[1], rgbAryTop[1]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[2], rgbAryTop[2]) + ')';
+    }
+
+    //to merge object
+    function merge() {
+        var arg = arguments,
+            target = arg[0];
+        for (var i = 1, ln = arg.length; i < ln; i++) {
+            var obj = arg[i];
+            for (var k in obj) {
+                if (obj.hasOwnProperty(k)) {
+                    target[k] = obj[k];
+                }
+            }
+        }
+        return target;
+    }
+
+    //function to apply formatting on number depending on parameter
+    function formatter(pattern) {
+        return function (num) {
+            if(!pattern) return num.toString();
+            num = num || 0
+            var numRev = num.toString().split('').reverse(),
+                output = pattern.split("").reverse(),
+                i = 0,
+                lastHashReplaced = 0;
+
+            //changes hash with numbers
+            for (var ln = output.length; i < ln; i++) {
+                if (!numRev.length) break;
+                if (output[i] == "#") {
+                    lastHashReplaced = i;
+                    output[i] = numRev.shift();
+                }
+            }
+
+            //add overflowing numbers before prefix
+            output.splice(lastHashReplaced+1, output.lastIndexOf('#') - lastHashReplaced, numRev.reverse().join(""));
+
+            return output.reverse().join('');
+        }
+    }
+
+
+    //circle bar class
+    function Indicator(container, indOption) {
+        indOption = indOption || {};
+        indOption = merge({}, radialIndicator.defaults, indOption);
+
+        this.indOption = indOption;
+
+        //create a queryselector if a selector string is passed in container
+        if (typeof container == "string")
+            container = document.querySelector(container);
+
+        //get the first element if container is a node list
+        if (container.length)
+            container = container[0];
+
+        this.container = container;
+
+        //create a canvas element
+        var canElm = document.createElement("canvas");
+        container.appendChild(canElm);
+
+        this.canElm = canElm; // dom object where drawing will happen
+
+        this.ctx = canElm.getContext('2d'); //get 2d canvas context
+
+        //add intial value 
+        this.current_value = indOption.initValue || indOption.minValue || 0;
+
+    }
+
+
+    Indicator.prototype = {
+        constructor: radialIndicator,
+        init: function () {
+            var indOption = this.indOption,
+                canElm = this.canElm,
+                ctx = this.ctx,
+                dim = (indOption.radius + indOption.barWidth) * 2, //elm width and height
+                center = dim / 2; //center point in both x and y axis
+
+
+            //create a formatter function
+            this.formatter = typeof indOption.format == "function" ? indOption.format : formatter(indOption.format);
+
+            //maximum text length;
+            this.maxLength = indOption.percentage ? 4 : this.formatter(indOption.maxValue).length;
+
+            canElm.width = dim;
+            canElm.height = dim;
+
+            //draw a grey circle
+            ctx.strokeStyle = indOption.barBgColor; //background circle color
+            ctx.lineWidth = indOption.barWidth;
+            ctx.beginPath();
+            ctx.arc(center, center, indOption.radius, 0, 2 * Math.PI);
+            ctx.stroke();
+
+            //store the image data after grey circle draw
+            this.imgData = ctx.getImageData(0, 0, dim, dim);
+
+            //put the initial value if defined
+            this.value(this.current_value);
+
+            return this;
+        },
+        //update the value of indicator without animation
+        value: function (val) {
+            //return the val if val is not provided
+            if (val === undefined || isNaN(val)) {
+                return this.current_value;
+            }
+
+            val = parseInt(val);
+            
+            var ctx = this.ctx,
+                indOption = this.indOption,
+                curColor = indOption.barColor,
+                dim = (indOption.radius + indOption.barWidth) * 2,
+                minVal = indOption.minValue,
+                maxVal = indOption.maxValue,
+                center = dim / 2;
+
+            //limit the val in range of 0 to 100
+            val = val < minVal ? minVal : val > maxVal ? maxVal : val;
+
+            var perVal = Math.round(((val - minVal) * 100 / (maxVal - minVal)) * 100) / 100, //percentage value tp two decimal precision
+                dispVal = indOption.percentage ? perVal + '%' : this.formatter(val); //formatted value
+
+            //save val on object
+            this.current_value = val;
+
+
+            //draw the bg circle
+            ctx.putImageData(this.imgData, 0, 0);
+
+            //get current color if color range is set
+            if (typeof curColor == "object") {
+                var range = Object.keys(curColor);
+
+                for (var i = 1, ln = range.length; i < ln; i++) {
+                    var bottomVal = range[i - 1],
+                        topVal = range[i],
+                        bottomColor = curColor[bottomVal],
+                        topColor = curColor[topVal],
+                        newColor = val == bottomVal ? bottomColor : val == topVal ? topColor : val > bottomVal && val < topVal ? indOption.interpolate ? getCurrentColor(val, bottomVal, topVal, bottomColor, topColor) : topColor : false;
+
+                    if (newColor != false) {
+                        curColor = newColor;
+                        break;
+                    }
+                }
+            }
+
+            //draw th circle value
+            ctx.strokeStyle = curColor;
+
+            //add linecap if value setted on options
+            if (indOption.roundCorner) ctx.lineCap = "round";
+
+            ctx.beginPath();
+            ctx.arc(center, center, indOption.radius, -(quart), ((circ) * perVal / 100) - quart, false);
+            ctx.stroke();
+
+            //add percentage text
+            if (indOption.displayNumber) {
+                var cFont = ctx.font.split(' '),
+                    weight = indOption.fontWeight,
+                    fontSize = indOption.fontSize || (dim / (this.maxLength - (Math.floor(this.maxLength*1.4/4)-1)));
+
+                cFont = indOption.fontFamily || cFont[cFont.length - 1];
+
+
+                ctx.fillStyle = indOption.fontColor || curColor;
+                ctx.font = weight +" "+ fontSize + "px " + cFont;
+                ctx.textAlign = "center";
+                ctx.textBaseline = 'middle';
+                ctx.fillText(dispVal, center, center);
+            }
+
+            return this;
+        },
+        //animate progressbar to the value
+        animate: function (val) {
+
+            var indOption = this.indOption,
+                counter = this.current_value || indOption.minValue,
+                self = this,
+                incBy = Math.ceil((indOption.maxValue - indOption.minValue) / (indOption.frameNum || (indOption.percentage ? 100 : 500))), //increment by .2% on every tick and 1% if showing as percentage
+                back = val < counter;
+
+            //clear interval function if already started
+            if (this.intvFunc) clearInterval(this.intvFunc); 
+
+            this.intvFunc = setInterval(function () {
+
+                if ((!back && counter >= val) || (back && counter <= val)) {
+                    if (self.current_value == counter) {
+                        clearInterval(self.intvFunc);
+                        return;
+                    } else {
+                        counter = val;
+                    }
+                }
+
+                self.value(counter); //dispaly the value
+
+                if (counter != val) {
+                    counter = counter + (back ? -incBy : incBy)
+                }; //increment or decrement till counter does not reach  to value
+            }, indOption.frameTime);
+
+            return this;
+        },
+        //method to update options
+        option: function (key, val) {
+            if (val === undefined) return this.option[key];
+
+            if (['radius', 'barWidth', 'barBgColor', 'format', 'maxValue', 'percentage'].indexOf(key) != -1) {
+                this.indOption[key] = val;
+                this.init().value(this.current_value);
+            }
+            this.indOption[key] = val;
+        }
+
+    };
+
+    /** Initializer function **/
+    function radialIndicator(container, options) {
+        var progObj = new Indicator(container, options);
+        progObj.init();
+        return progObj;
+    }
+
+    //radial indicator defaults
+    radialIndicator.defaults = {
+        radius: 50, //inner radius of indicator
+        barWidth: 5, //bar width
+        barBgColor: '#eeeeee', //unfilled bar color
+        barColor: '#99CC33', //filled bar color , can be a range also having different colors on different value like {0 : "#ccc", 50 : '#333', 100: '#000'}
+        format: null, //format indicator numbers, can be a # formator ex (##,###.##) or a function
+        frameTime: 10, //miliseconds to move from one frame to another
+        frameNum: null, //Defines numbers of frame in indicator, defaults to 100 when showing percentage and 500 for other values
+        fontColor: null, //font color
+        fontFamily: null, //defines font family
+        fontWeight: 'bold', //defines font weight
+        fontSize : null, //define the font size of indicator number
+        interpolate: true, //interpolate color between ranges
+        percentage: false, //show percentage of value
+        displayNumber: true, //display indicator number
+        roundCorner: false, //have round corner in filled bar
+        minValue: 0, //minimum value
+        maxValue: 100, //maximum value
+        initValue: 0 //define initial value of indicator
+    };
+    
+    window.radialIndicator = radialIndicator;
+
+    //add as a jquery plugin
+    if ($) {
+        $.fn.radialIndicator = function (options) {
+            return this.each(function () {
+                var newPCObj = radialIndicator(this, options);
+                $.data(this, 'radialIndicator', newPCObj);
+            });
+        };
+    }
+
+}(window.jQuery, window, document, void 0));

js/fuwuzhishi.js

@@ -0,0 +1,157 @@
+angular.module('fuwuzhishi', [])
+	.controller('fuwuzhishiCorl', ['$scope', '$http', function($scope, $http) {
+
+		var myChart = echarts.init(document.getElementById('fdcl'));
+		option = {
+			title: {
+				text: '工单处理时间统计和分布',
+				x: 'center',
+				textStyle: {
+					color: '#73a2fa',
+					fontSize: 16
+				}
+			},
+			tooltip: {
+				trigger: 'item',
+				formatter: "{a} <br/>{b} : {c} ({d}%)"
+			},
+			legend: {
+				orient: 'vertical',
+				left: 'left',
+				top: 50,
+				inactiveColor: '#fff',
+				textStyle: {
+					color: '#fff',
+					//						fontSize: 16
+				},
+				data: ['知识库总数量', '通话总数量', '缺失总数量']
+			},
+
+			calculable: true,
+			series: [{
+				name: '占比',
+				type: 'pie',
+				selectedOffset: 5,
+				radius: [50, 150],
+				center: ['45%', '60%'],
+				roseType: 'radius',
+				label: {
+					normal: {
+						show: false
+					},
+					emphasis: {
+						show: true
+					}
+				},
+				lableLine: {
+					normal: {
+						show: false
+					},
+					emphasis: {
+						show: true
+					}
+				},
+				data: [{
+					value: 10,
+					name: '知识库总数量'
+				}, {
+					value: 5,
+					name: '通话总数量'
+				}, {
+					value: 15,
+					name: '缺失总数量'
+				}, ]
+			}],
+			color: ['#eed147', '#acc977', '#ba466b'],
+		};
+		myChart.setOption(option);
+		console.log(window.onresize);
+		window.onresize = function() {
+			myChart.resize();
+			myChart.setOption(option);
+		};
+		//图2
+		var myChart1 = echarts.init(document.getElementById('zs'));
+		option = {
+			title: {
+				text: '工单处理时间统计和分布',
+				x: 'center',
+				textStyle: {
+					color: '#73a2fa',
+					fontSize: 16
+				}
+			},
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'shadow',
+					label: {
+						show: true,
+						backgroundColor: '#333'
+					}
+				}
+			},
+			legend: {
+				top: 30,
+				data: ['咨询量', '缺失量'],
+				textStyle: {
+					color: '#ccc'
+				}
+			},
+			xAxis: {
+				data: ['市林业局', '市国土局', '市环保局', '市法制办', '市地震局', '市科技局', '市民政局', '市审计局', '市地煤炭局', '市地煤炭局'],
+				axisLine: {
+					lineStyle: {
+						color: '#ccc'
+				
+					}
+				},
+				//文字旋转角度
+				axisLabel: {
+					interval: 0,
+					rotate: 40,
+					textStyle: {
+						color: '#fff',
+						fontSize: 12
+					}
+				}
+			},
+			yAxis: {
+				splitLine: { show: false },
+				axisLine: {
+					lineStyle: {
+						color: '#ccc'
+					}
+				}
+			},
+			series: [{
+				name: '咨询量',
+				type: 'line',
+				smooth: true,
+				showAllSymbol: true,
+				symbol: 'emptyCircle',
+				symbolSize: 15,
+				data: [10, 15, 40, 44, 30, 50, 80, 62, 55, 32]
+			}, {
+				name: '缺失量',
+				type: 'bar',
+				barWidth: 10,
+				itemStyle: {
+					normal: {
+						barBorderRadius: 5,
+						color: new echarts.graphic.LinearGradient(
+							0, 0, 0, 1, [
+								{ offset: 0, color: '#14c8d4' },
+								{ offset: 1, color: '#43eec6' }
+							]
+						)
+					}
+				},
+				data: [20, 33, 80, 14, 60, 42, 99, 22, 36, 19]
+			}]
+		};
+
+		myChart1.setOption(option);
+		window.onresize = myChart1.resize;
+
+	}]);

js/huawu.js

@@ -0,0 +1,183 @@
+angular.module('huawu', [])
+	.controller('huawuCorl', function($scope, $http, $rootScope) {
+		$('#main').highcharts({
+			chart: {
+				type: 'column',
+				backgroundColor: '#100e11'
+			},
+			title: {
+				text: '坐席闲忙比例'
+			},
+			xAxis: {
+				categories: ['1','2','3','4','5','6','7','8','9','10','11',
+				'12','13','14','15','16','17','18','19','20','21','22','23','24'],				
+			
+				crosshair: true
+			},
+			yAxis: {
+				min: 0,
+				title: {
+					text: '人数',
+					rotation: 0,
+					y: -160,
+				}
+			},
+			credits: {
+				enabled: false
+			},
+			legend: {
+				align: 'right',
+				verticalAlign: 'top',
+				x: 0,
+				y: 50
+			},
+			tooltip: {
+				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
+				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
+					'<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
+				footerFormat: '</table>',
+				shared: true,
+				useHTML: true
+			},
+			plotOptions: {
+				column: {
+					pointPadding: 0.2,
+					borderWidth: 0
+				}
+			},
+			series: [{
+				name: '在忙',
+				data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
+			}, {
+				name: '话务处理',
+				data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
+			}, {
+				name: '闲置',
+				data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
+			}]
+		});
+
+		$('#main1').highcharts({
+			chart: {
+				type: 'line',
+				backgroundColor: '#100e11'
+			},
+			title: {
+				text: '话务量实时数据统计'
+			},
+			legend: {
+				align: 'right',
+				verticalAlign: 'top',
+				x: 0,
+				y: 50
+			},
+			//LOGO 去掉
+			credits: {
+				enabled: false
+			},
+			xAxis: {
+				categories: [
+					'1',
+					'2',
+					'3',
+					'4',
+					'5',
+					'6',
+					'7',
+					'8',
+					'9',
+					'10',
+					'11',
+					'12',
+					'13',
+					'14',
+					'15',
+					'16',
+					'17',
+					'18',
+					'19',
+					'20',
+					'21',
+					'22',
+					'23',
+					'24',
+				],
+				title: {
+					text: '时间',
+					align: 'high',
+					rotation: 0,
+					y: -50
+				}
+			},
+			yAxis: {
+				title: {
+					text: '数量',
+					rotation: 0,
+					y: -160
+				}
+			},
+			plotOptions: {
+				line: {
+					dataLabels: {
+						enabled: true // 开启数据标签
+					},
+					enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
+				}
+			},
+			series: [{
+				name: '来话量',
+				data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+			}, {
+				name: '通话量',
+				data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+			}]
+		});
+
+//进度条
+$('#ld').radialIndicator({
+	radius: 40,
+	barBgColor: '#999',
+	barColor: 'rgb(221, 223, 13)',
+	barWidth: 8,
+	initValue: 40,
+	roundCorner: true
+	//      percentage: true
+})
+$('#jtl').radialIndicator({
+	radius: 40,
+	barBgColor: '#999',
+	barColor: 'rgb(85, 191, 59)',
+	barWidth: 8,
+	initValue: 40,
+	roundCorner: true
+	//    percentage: true
+})
+$('#jtv').radialIndicator({
+	radius: 40,
+	barBgColor: '#999',
+	barColor: 'rgb(247, 163, 92)',
+	barWidth: 5,
+	initValue: 100,
+	roundCorner: true,
+	percentage: true
+})
+$('#zxr').radialIndicator({
+	radius: 40,
+	barBgColor: '#999',
+	barColor: 'rgb(241, 92, 128)',
+	barWidth: 5,
+	initValue: 40,
+	roundCorner: true
+	//      percentage: true
+})
+$('#sc').radialIndicator({
+radius: 40,
+barBgColor: '#999',
+barColor: '#87CEEB',
+barWidth: 5,
+initValue: 40,
+roundCorner: true
+//      percentage: true
+})
+	});
+

js/jiedanbumen.js

@@ -0,0 +1,273 @@
+angular.module('jiedanbumen',[])
+        .controller('jiedanbumenCorl',function($scope,$rootScope){
+        	//=================echarts====================
+         // 基于准备好的dom，初始化echarts实例
+        var jiedan = echarts.init(document.getElementById('jiedan1'));
+  option = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'cross',
+            label: {
+                show: true,
+                backgroundColor: '#333'
+            }
+        }
+    },
+    legend: {
+        data: [ '受理工单数','反馈工单数','处理工单数','数量','其他数量'],
+        textStyle: {
+            color: '#ccc'
+        }
+    },
+    xAxis: {
+    	name:'月份',
+        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        axisLine: {
+            lineStyle: {
+                color: '#ccc'
+            }
+        }
+    },
+    yAxis: {
+    	name:'数量',
+        min: 0,
+        max: 400,
+        interval: 50,
+        splitLine: {show: false},
+        axisLine: {
+            lineStyle: {
+                color: '#ccc'
+            }
+        }
+    },
+    series: [{
+        name: '其他数量',
+        type: 'line',
+        smooth: true,
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 15,
+       data:[100,120, 130, 140, 186, 218, 255, 318, 316, 284, 212, 190]
+    }, 
+    {
+        name: '受理数量',
+        type: 'line',
+        smooth: true,
+        showAllSymbol: true,
+        symbol: 'emptyCircle',
+        symbolSize: 15,
+       data:[50, 122, 128, 232, 240,300, 240, 322, 128, 122, 120, 112],
+         itemStyle: {
+            normal: {
+                color: 'green'
+            }
+        },
+    },
+    {
+        name: '受理工单数',
+        type: 'bar',
+        itemStyle: {
+            normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                        {offset: 0, color: '#14c8d4'},
+                        {offset: 1, color: '#43eec6'}
+                    ]
+                )
+            }
+        },
+         data:[140, 142, 185, 186, 297, 100, 116, 230, 217, 216,215, 302]
+    }, {
+        name: '处理工单数',
+        type: 'bar',
+         itemStyle: {
+            normal: {
+                 barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                        {offset: 0, color: '#9df5ff'},
+                        {offset: 1, color: '#61dbe8'}
+                    ]
+                )
+            }
+        },
+     
+         data:[100, 122, 145, 147, 251, 155, 158, 155, 150, 147, 145, 242]
+    }, {
+        name: '反馈工单数',
+        type: 'bar',
+        // symbol: 'rect',
+       itemStyle: {
+            normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: '#83bff6'},
+                            {offset: 0.5, color: '#188df0'},
+                            {offset: 1, color: '#188df0'}
+                    ]
+                )
+            }
+        },
+     
+        symbolRepeat: true,
+        symbolSize: [12, 4],
+        symbolMargin: 1,
+       
+         data:[160, 102, 120, 167, 70, 75, 78, 75, 70, 67, 65, 62]
+    }]
+};
+		
+ // 使用刚指定的配置项和数据显示图表。
+        jiedan.setOption(option);
+//=================echarts====================
+        
+        $('#dizhen').radialIndicator({
+                barColor: '#87d75f',
+                barWidth: 10,
+                initValue: 40,
+                roundCorner : true,
+                percentage: true
+            });
+             $('#fazhiban').radialIndicator({
+                barColor: '#e09740',
+                barWidth: 10,
+                initValue: 50,
+                roundCorner : true,
+                percentage: true
+            });
+
+   $('#huanbao').radialIndicator({
+                barColor: '#ffeb3b',
+                barWidth: 10,
+                initValue: 60,
+                roundCorner : true,
+                percentage: true
+            });
+
+   $('#guotu').radialIndicator({
+                barColor: '#2196f3',
+                barWidth: 10,
+                initValue: 70,
+                roundCorner : true,
+                percentage: true
+            });
+   $('#linye').radialIndicator({
+                barColor: '#9579de',
+                barWidth: 10,
+                initValue: 80,
+                roundCorner : true,
+                percentage: true
+            });
+
+   $('#meitan').radialIndicator({
+                barColor: '#ff5722',
+                barWidth: 10,
+                initValue: 90,
+                roundCorner : true,
+                percentage: true
+            });
+   $('#minzheng').radialIndicator({
+                barColor: '#ffc107',
+                barWidth: 10,
+                initValue: 100,
+                roundCorner : true,
+                percentage: true
+            });
+   $('#shenji').radialIndicator({
+                barColor: '#53e1f1',
+                barWidth: 10,
+                initValue: 30,
+                roundCorner : true,
+                percentage: true
+            });
+
+   $('#shangwu').radialIndicator({
+                barColor: '#c072e6',
+                barWidth: 10,
+                initValue: 20,
+                roundCorner : true,
+                percentage: true
+            });
+   $('#jiancha').radialIndicator({
+                barColor: '#cddc39',
+                barWidth: 10,
+                initValue: 10,
+                roundCorner : true,
+                percentage: true
+            });
+        
+        //heighchart插件
+        $('#timefb').highcharts({
+   			chart: {
+   				type: 'area',
+   				backgroundColor: '#100e11',
+   				color: '#fff'
+   			},
+   			title: {
+   				text: false
+   			},
+   			legend: {
+
+   				align: 'center',
+   				verticalAlign: 'top',
+   				y: 10,
+// 				backgroundColor: '#FCFFC5',
+   				style: {
+   					color: '#fff'
+
+   				}
+
+   			},
+   			//X轴属性
+   			xAxis: {
+   				categories: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
+   				//x轴坐标值
+   				labels: {
+   					style: {
+   						color: '#fff'
+   					}
+   				} 				
+   				
+   			},
+   			//Y轴属性
+   			yAxis: {
+   				title: {
+   					text: false
+   				},
+
+   				//y轴坐标值
+   				labels: {
+   					style: {
+   						color: '#fff'
+   					}
+   				},
+   				gridLineColor:'#100e11'
+   				   				
+   			},
+
+   			credits: {
+   				enabled: false
+   			},
+   			series: [{
+   						name: '受理工单数',
+   						data: [10, 15, 12, 7, 12, 15, 20, 25, 30, 15, 10],
+   						color: '#f57c56'
+   					}, {
+   						name: '处理工单数',
+   						data: [30, 32, 28, 25, 32, 35, 40, 60, 50, 30, 15],
+   						color: '#ffeb3b'
+   					}, {
+   						name: '反馈工单数',
+   						data: [110, 94, 64, 37, 42, 50, 88, 86, 71, 45,20],
+           				color:'#527de0'
+        }]
+   
+        })
+			
+    });

js/laiyuanqudao.js

@@ -0,0 +1,188 @@
+angular.module('laiyuanqudao', ['radialIndicator'])
+
+	.controller('laiyuanqudaoCorl', ['$scope', '$http', function($scope, $http) {
+		var container1 = echarts.init(document.getElementById('container1'));
+
+		option = {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'cross',
+					label: {
+						show: true,
+						backgroundColor: '#333'
+					}
+				}
+			},
+			title: {
+				text: '受理群众区域统计',
+				x: 'center',
+				top: 'top',
+				textStyle: {
+					color: '#fff',
+					fontSize: 16,
+					
+				},
+
+			},
+			legend: {
+				data: ['新城区', '莲湖区', '雁塔区', '未央区'],
+				textStyle: {
+					color: '#ccc'
+				},
+				top: 30,
+			},
+			xAxis: {
+				name: '时间',
+				data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+				axisLine: {
+					lineStyle: {
+						color: '#ccc'
+					}
+				}
+			},
+			yAxis: {
+				name: '数量',
+				min: 0,
+				max: 100,
+				interval: 20,
+				splitLine: { show: false },
+				axisLine: {
+					lineStyle: {
+						color: '#ccc'
+					}
+				}
+			},
+			series: [{
+					name: '新城区',
+					type: 'line',
+					smooth: true,
+					showAllSymbol: true,
+					symbol: 'emptyCircle',
+					symbolSize: 10,
+					data: [50, 51, 52, 55, 57, 62, 64, 70, 75, 80]
+				},
+				{
+					name: '莲湖区',
+					type: 'line',
+					smooth: true,
+					showAllSymbol: true,
+					symbol: 'emptyCircle',
+					symbolSize: 10,
+					data: [30, 31, 35, 36, 38, 40, 42, 44, 47, 50],
+					itemStyle: {
+						normal: {
+							color: 'green'
+						}
+					},
+				},
+				{
+					name: '雁塔区',
+					type: 'line',
+					smooth: true,
+					showAllSymbol: true,
+					symbol: 'emptyCircle',
+					symbolSize: 10,
+					itemStyle: {
+						normal: {
+							color: '#14c8d4'
+						}
+					},
+					data: [20, 22, 24, 26, 28, 30, 32, 34, 36, 40]
+				}, {
+					name: '未央区',
+					type: 'line',
+					smooth: true,
+					showAllSymbol: true,
+					symbol: 'emptyCircle',
+					symbolSize: 10,
+					itemStyle: {
+						normal: {
+							color: '#9df5ff'
+						}
+					},
+					data: [11, 14, 16, 12, 18, 22, 24, 26, 30, 34]
+				}
+			]
+		};
+
+		// 使用刚指定的配置项和数据显示图表。
+		container1.setOption(option);
+
+		$('#weibo').radialIndicator({
+			barColor: '#87d75f',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+
+		$('#phone').radialIndicator({
+			barColor: '#e09740',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+
+		$('#doorhu').radialIndicator({
+			barColor: '#ffeb3b',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+
+		$('#app').radialIndicator({
+			barColor: '#2196f3',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+		$('#weixin').radialIndicator({
+			barColor: '#9579de',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+
+		$('#message').radialIndicator({
+			barColor: '#ff5722',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+		$('#email').radialIndicator({
+			barColor: '#cddc39',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+		$('#face').radialIndicator({
+			barColor: '#cddc39',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+
+		$('#ins').radialIndicator({
+			barColor: '#cddc39',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+		$('#qq').radialIndicator({
+			barColor: '#cddc39',
+			barWidth: 10,
+			initValue: 40,
+			roundCorner: true,
+			percentage: true
+		});
+
+	}]);

js/rout.js

@@ -0,0 +1,86 @@
+
+angular.module('myRoute',['ui.router',
+							'laiyuanqudao',
+							'jiedanbumen',
+							'tousujubao',
+							'huawu',
+							'zhongxin',
+							'fuwuzhishi'
+							
+									])
+
+      .config(function ($httpProvider) {
+        $httpProvider.defaults.transformRequest = function (obj) {
+            var str = [];
+            for (var p in obj) {
+                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+            }
+            return str.join("&");
+        };
+        $httpProvider.defaults.headers.post = {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+    })
+
+    .config(function($stateProvider,$urlRouterProvider){
+    //来源渠道
+        $stateProvider.state('index',{
+            url:'/laiyuanqudao.html',
+            templateUrl:'../html/laiyuanqudao.html',
+            controller:'laiyuanqudaoCorl'
+        });
+        //接单部门情况
+        $stateProvider.state('jiedanbumen',{
+            url:'/jiedanbumen.html',
+            templateUrl:'../html/jiedanbumen.html',
+            controller:'jiedanbumenCorl'
+        });
+        //投诉举报
+        $stateProvider.state('tousujubao',{
+            url:'/tousujubao.html',
+            templateUrl:'../html/tousujubao.html',
+            controller:'tousujubaoCorl'
+        });
+       
+        //话务数量情况
+        $stateProvider.state('huawu',{
+            url:'/huawu.html',
+            templateUrl:'../html/huawu.html',
+            controller:'huawuCorl'
+        });
+      
+        //中心大数据
+        $stateProvider.state('zhongxin',{
+            url:'/zhongxin.html',
+            templateUrl:'../html/zhongxin.html',
+            controller:'zhongxinCorl'
+        });
+     
+        //服务知识
+        $stateProvider.state('fuwuzhishi',{
+            url:'/fuwuzhishi.html',
+            templateUrl:'../html/fuwuzhishi.html',
+            controller:'fuwuzhishiCorl'
+        });
+     
+    
+        
+        
+        
+//      $stateProvider.state('directive',{
+//          url:'/directive.html',
+//          templateUrl:'../html/directive.html'
+//      }).state('directive.input',{
+//          url:'/input.html',
+//          templateUrl:'../html/input.html',
+//          controller:'crol1'
+//      }).state('directive.repeat',{
+//          url:'/text.html',
+//          templateUrl:'../html/text.html',
+//          controller:'crol2'
+//      }).state('directive.city',{
+//          url:'/cityTown.html',
+//          templateUrl:'../html/cityTown.html',
+//          controller:'crol4'
+//      })
+    });

js/tousujubao.js

@@ -0,0 +1,192 @@
+angular.module('tousujubao', [])
+	.controller('tousujubaoCorl', function($scope, $rootScope) {
+		//投诉举报汇总
+		var quantity = echarts.init(document.getElementById('quantity'));
+		option = {
+			title: {
+				text: '投诉/举报汇总',
+				x: 'center',
+				textStyle: {
+					color: '#fff',
+					fontSize: 16
+				},
+//				textAlign: 'center',
+//				textBaseline: "top"
+			},
+			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: '55%',
+				center: ['50%', '50%'],
+				data: [
+					{ value: 1234, name: '投诉数量' },
+					{ value: 3456, name: '举报数量' },
+
+				],
+				itemStyle: {
+					emphasis: {
+						shadowBlur: 10,
+						shadowOffsetX: 0,
+						shadowColor: 'rgba(0, 0, 0, 0.5)'
+					}
+				}
+			}],
+			color: ['#ff9800', '#61a0a8']
+		};
+		quantity.setOption(option);
+		//举报单位/个人统计
+		var tsdwgr = echarts.init(document.getElementById('tsdwgr'));
+		option = {
+			color: ['#3398DB'],
+
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: { // 坐标轴指示器，坐标轴触发有效
+					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+				}
+			},
+			title: {
+				text: '举报单位/个人统计',
+				x: 'center',
+				textStyle: {
+					color: '#fff',
+					fontSize: 16
+				},
+
+				textBaseline: "top"
+			},
+			grid: {
+				left: '3%',
+				right: '4%',
+				bottom: '3%',
+				containLabel: true
+			},
+			xAxis: [{
+				type: 'category',
+				data: ['黄一', '董二', '张三', '李四', '赵武', '王六', '高七', '周八', '刘九', '朱十'],
+				axisTick: {
+					alignWithLabel: true
+				},
+				//改变轴颜色
+				axisLine: {
+					lineStyle: {
+						color: '#fff',
+					}
+				},
+			}],
+			yAxis: [{
+				splitLine: { show: false }, //去除网格线
+				type: 'value',
+				//改变轴颜色
+				axisLine: {
+					lineStyle: {
+						color: '#fff',
+					}
+				}
+
+			}],
+			series: [{
+				name: '投诉举报数',
+				type: 'bar',
+				barWidth: '30%',
+				data: [10, 52, 200, 334, 390, 330, 220, 150, 100, 10]
+			}]
+		};
+		tsdwgr.setOption(option);
+		//投诉单位统计
+
+		var tsdw_dw = echarts.init(document.getElementById('tsdw_dw'));
+
+		option = {
+			title: {
+				text: '投诉单位统计',
+				x: 'center',
+				textStyle: {
+					color: '#fff',
+					fontSize: 16
+				}
+			},
+			tooltip: {
+				trigger: 'item',
+				formatter: "{a} <br/>{b} : {c} ({d}%)"
+			},
+			legend: {
+				orient: 'vertical',
+				right: 'right',
+				top: 120,
+				data: ['市地震局', '市法制办', '市环保局', '市国土局', '市林业局', '市煤炭局', '市民政局', '市审计局', '市商务局', '市检察院', '市商务局'],
+				textStyle: {
+					color: '#fff'
+				}
+			},
+			 series: [
+        {
+            name:'投诉数量及占比',
+            type:'pie',
+            left:0,
+            radius: ['40%', '70%'],
+            center: ['40%', '58%'],
+            avoidLabelOverlap: false,
+            label: {
+                normal: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    show: true,
+                    textStyle: {
+                        fontSize: '30',
+                        fontWeight: 'bold'
+                    }
+                }
+            },
+            labelLine: {
+                normal: {
+                    show: false
+                }
+            },
+             data:[
+                {value:335, name:'市地震局'},
+                {value:310, name:'市法制办'},
+                {value:234, name:'市环保局'},
+                {value:135, name:'市国土局'},
+                {value:1548, name:'市林业局'},
+                 {value:335, name:'市煤炭局'},
+                {value:310, name:'市民政局'},
+                {value:234, name:'市审计局'},
+                {value:135, name:'市商务局'},
+                {value:1548, name:'市检察院'},
+            ],
+             color:['#c23531','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#ffeb3b','#8bc34a','#b2bb56'],
+        }
+    ]
+//			
+//				itemStyle: {
+//					emphasis: {
+//						shadowBlur: 10,
+//						shadowOffsetX: 0,
+//						shadowColor: 'rgba(0, 0, 0, 0.5)'
+//					}
+//				}
+			
+		};
+
+		tsdw_dw.setOption(option);
+	});

js/zhongxin.js

@@ -0,0 +1,278 @@
+angular.module('zhongxin', [])
+	.controller('zhongxinCorl', ['$scope', '$http', function($scope, $http) {
+//		$(window).resize(function() {
+//			var width_frm = $(document.body).width();
+//			var height_frm = $(document.body).height();
+//			var width_div = width_frm / 2;
+//			var height_div = height_frm / 2;
+//			$('#th_nums').css("height", height_div);
+//			$('#th_num').css("height", height_div);
+//			$('#jtv_num').css("height", height_div);
+//		});
+
+
+		$('#slhw').highcharts({
+			chart: {
+				type: 'pie',
+				backgroundColor: '#100e11',
+				options3d: {
+					enabled: true,
+					alpha: 45,
+					beta: 0
+				}
+			},
+			title: {
+				text: '受理渠道话务量',
+				style: {
+					color: '#fff',
+				}
+			},
+			//LOGO 去掉
+			credits: {
+				enabled: false
+			},
+			tooltip: {
+				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+			
+			},
+			plotOptions: {
+				pie: {
+					allowPointSelect: true,
+					cursor: 'pointer',
+					depth: 35,
+					dataLabels: {
+						enabled: true,
+						format: '<b style="font-size:14px; ">{point.name}</b>: <b>{point.percentage:.1f}%</b>'
+					}
+				}
+			},
+			series: [{
+				type: 'pie',
+				name: '受理渠道话务量',
+				data: [
+					['电话', 45.0],
+					['网站门户', 26.8],
+					{
+						name: 'APP',
+						y: 12.8,
+						sliced: true,
+						selected: true
+					},
+					['微信', 8.5],
+					['短信', 6.2],
+					['微博', 0.7],
+					['邮件', 10.5],
+				]
+			}]
+		});
+	
+		//通话数量
+		$('#th_num').highcharts({
+			chart: {
+				type: 'line',
+				backgroundColor: '#100e11'
+			},
+			title: {
+				text: '通话数量统计',
+				style: {
+					color: '#fff',
+				}
+			},
+			legend: {
+				align: 'right',
+				verticalAlign: 'top',
+				x: 0,
+				y: 50
+			},
+			//LOGO 去掉
+			credits: {
+				enabled: false
+			},
+			xAxis: {
+				categories: [
+					'1',
+					'2',
+					'3',
+					'4',
+					'5',
+					'6',
+					'7',
+					'8',
+					'9',
+					'10',
+					'11',
+					'12',
+					'13',
+					'14',
+					'15',
+					'16',
+					'17',
+					'18',
+					'19',
+					'20',
+					'21',
+					'22',
+					'23',
+					'24',
+				],
+				title: {
+					text: '时间',
+					align: 'high',
+					rotation:0,
+					y: -50
+				}
+			},
+			yAxis: {
+				gridLineColor: '#100e11',
+				title: {
+					text: '数量',
+					rotation: 0,
+					y: -160
+				}
+			},
+			plotOptions: {
+				line: {
+					dataLabels: {
+						enabled: true // 开启数据标签
+					},
+					enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
+				}
+			},
+			series: [{
+				name: '咨询类',
+				data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+			}, {
+				name: '投诉类',
+				data: [3.9, 4.2, 5.7, 8.5, 11, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+			}, {
+				name: '来电举报类',
+				data: [3.9, 5, 8, 8, 11, 8, 3, 16, 14, 10, 6, 4]
+			}, {
+				name: '建议类',
+				data: [8, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4]
+			}]
+		});
+		//接通率报表
+		$('#jtv_num').highcharts({
+			chart: {
+				zoomType: 'xy',
+				backgroundColor: '#100e11'
+			},
+			title: {
+				text: '接通率统计',
+				style: {
+					color: '#fff',
+				}
+			},
+			//LOGO 去掉
+			credits: {
+				enabled: false
+			},
+			xAxis: [{
+				categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+					'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+				],
+				crosshair: true
+			}],
+			yAxis: [{ // Primary yAxis
+				labels: {
+					format: '{value}%',
+					style: {
+						color: '#fff'
+					}
+				},
+				title: {
+					text: '比例',
+					style: {
+						color: '#fff',
+					},
+					rotation: 0,
+					y: -170
+				}
+			}, { // Secondary yAxis
+				title: {
+					text: '数量',
+					style: {
+						color: Highcharts.getOptions().colors[0]
+					}
+				},
+				labels: {
+					format: '{value} mm',
+					style: {
+						color: "red"
+					}
+				},
+				opposite: true
+			}],
+			tooltip: {
+				shared: true
+			},
+			legend: {
+				align: 'right',
+				verticalAlign: 'top',
+				x: 0,
+				y: 50
+			},
+			series: [{
+				name: '降雨量',
+				type: 'column',
+				yAxis: 1,
+				data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
+				tooltip: {
+					valueSuffix: ' mm'
+				}
+			}, {
+				name: '温度',
+				type: 'spline',
+				data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
+				tooltip: {
+					valueSuffix: '°C'
+				}
+			}]
+		});
+		//通话时长
+		var chart = new Highcharts.Chart('th_nums', {
+			chart: {
+				backgroundColor: '#100e11'
+			},
+			title: {
+				text: '平均通话时长统计',
+				style: {
+					color: '#fff',
+				}
+			},
+			//LOGO 去掉
+			credits: {
+				enabled: false
+			},
+			xAxis: {
+				categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+			},
+			yAxis: {
+				title: {
+					rotation: 0,
+					y: -170,
+					text: '小时'
+				},
+				plotLines: [{
+					value: 0,
+					width: 1,
+					color: '#808080'
+				}]
+			},
+			tooltip: {
+				valueSuffix: 'h'
+			},
+			legend: {
+				align: 'right',
+				verticalAlign: 'top',
+				x: 0,
+				y: 50
+			},
+			series: [{
+				name: '平均通话时长统计',
+				data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
+			}]
+		});
+
+	}]);