公式系统

WebChart/Script/Common/huayi.config.js

@@ -10,6 +10,6 @@ huayi.config = {
     socket_ip: "192.168.4.3",//ip
     socket_port: "8081",//端口
     menuworktime: 30000,//菜单工单数量刷新间隔
-    indextime: 60000//首页报表刷新间隔
+    indextime: 300000//首页报表刷新间隔
 
 };

WebChart/Script/Common/huayi.load.js

@@ -32,7 +32,7 @@ document.write(" <link href=\"" + hostPath + "/css/bootstrap.min.css\" rel=\"sty
 document.write(" <link href=\"" + hostPath + "/css/index.css\" rel=\"stylesheet\" type=\"text/css\" />");
 //document.write(" <link href=\"" + hostPath + "/css/bootstrap.min14ed.css?v=3.3.6\" rel=\"stylesheet\" type=\"text/css\" />");
 //document.write(" <link href=\"" + hostPath + "/css/boot/bootstrap-table.css\" rel=\"stylesheet\" type=\"text/css\" />");
-//document.write(" <link href=\"" + hostPath + "/css/font-awesome.min93e3.css?v=4.4.0\" rel=\"stylesheet\" type=\"text/css\" />");
+document.write(" <link href=\"" + hostPath + "/font/iconfont.css\" rel=\"stylesheet\" type=\"text/css\" />");
 //document.write(" <link href=\"" + hostPath + "/css/animate.min.css\" rel=\"stylesheet\" type=\"text/css\" />");
 //document.write(" <link href=\"" + hostPath + "/css/style.min862f.css?v=4.1.0\" rel=\"stylesheet\" type=\"text/css\" />");
 //
@@ -42,6 +42,7 @@ document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"
 //document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"" + hostPath + "/js/highcharts.js\"></script>");
 document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"" + hostPath + "/js/gray.js\"></script>");
 document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"" + hostPath + "/js/radialIndicator.js\"></script>");
+document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"" + hostPath + "/js/laydate/laydate.js\"></script>");
 //document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"" + hostPath + "/js/bootstrap.min.js?v=3.3.6\"></script>");
 //document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"" + hostPath + "/js/bootstrap-table.js\"></script>");
 //document.write(" <script language=\"javascript\" type=\"text/javascript\" src=\"" + hostPath + "/js/bootstrap-table-zh-CN.js\"></script>");

WebChart/css/index.css

@@ -2,7 +2,7 @@ body {
 	margin: 0;
 	padding: 0;
 	font-size: 16px;
-	background-color: #030303;
+	background-color: #030917!important;
 	-webkit-text-size-adjust: none;
 	overflow-x: hidden;
 }
@@ -38,6 +38,96 @@ p{
 a {
 	text-decoration: none;
 }
+.btns {
+    background: #00a1cb;
+    color: #fff;
+    padding: 5px 10px;
+    outline: none;
+    font-size: 12px;
+    margin:0 15px;
+    border: 0;
+    border-radius: 3px;
+    box-sizing: border-box;
+    cursor: pointer;
+    vertical-align: middle;
+    }
+    
+    .tool_count{
+    		position: relative;
+    	}
+    	.tooltips{
+    		position: absolute;
+		    top: -100%;
+		      right: -50%;
+		    background: rgba(50, 50, 50, 0.7);
+		    border-radius: 6px;
+		    font-size: 15px;
+		    color: #fff;
+		    z-index: 999;
+		    width: 100%;
+		    text-align: left;
+		    padding: 5px;
+		    display: none;
+		    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    	}
+    		.tooltips p{
+    			float: left;
+			    width: 45%;
+			    padding-left: 5%;
+    		}
+    		.toolsTitle{
+    			text-align: center;
+    			color: #8fc6ad;
+    		}
+    	.list{
+    		padding-left: 45px;
+    	}
+    	.list li{
+    		float: left;
+		    width: 33%;
+		    color: #ccc;
+		    cursor: pointer;
+		        margin-bottom: 5px;
+    	}
+    	.color0,.color20,.color10,.color30,.color40,.color50,.color60,.color70{
+    		color: #61a0a9;
+    	}
+    	.color1,.color21,.color31,.color41,.color51,.color61,.color71{
+    		color: #cb885d;
+    	}
+    	.color2,.color12,.color22,.color32,.color42,.color52,.color62,.color72{
+    		color: #c4352d;
+    	}
+    	.color3,.color13,.color23,.color33,.color43,.color53,.color63,.color73{
+    		color: #314452;
+    	}
+    	.color4,.color14,.color24,.color34,.color44,.color54,.color64,.color74{
+    		color: #a88c1e;
+    	}
+    	.color5,.color15,.color25,.color35,.color45,.color55,.color65,.color75{
+    		color: #2f5675;
+    	}
+    	.color6,.color16,.color26,.color36,.color46,.color56,.color66,.color76{
+    		color: #94c8b1;
+    	}
+    	.color7,.color17,.color27,.color37,.color47,.color57,.color67,.color77{
+    		color: #babc2f;
+    	}
+    	.color8,.color18,.color28,.color38,.color48,.color58,.color68,.color78{
+    		color: #e86617;
+    	}
+    	.color9,.color19,.color29,.color39,.color49,.color59,.color69,.color79{
+    		color: #afe817;
+    	}
+    	.color10{
+    		color: #e8178d;
+    	}
+    	.color11{
+    		color: #0edccc;
+    	}
+    	.tbr{
+    		margin-right: 3px;
+    	}
 /*[ui-view]{
 	background:#030303 ;
 }*/
@@ -106,39 +196,11 @@ a {
 
  .qunzhong{
     width: 100%;
-    background: #030303;
+    background: #030917;
     margin: 0 auto;
     padding-bottom: 40px;
  	
  }
- .huanxing{
- 	float: right;
- 	width: 40%;
- 	color: #fff;
- 	text-align: center;
- }
-  .huanxing ul li{
-  	float: left;
-  	width: 25%;
-  	margin-top: 10px;
-  	font-size: 14px;
-  	
-  }
-  .huanxing ul li div{
-  	width: 6em;
-    height: 6em;
-    margin: 0 auto;
-    /*background: url(../img/circle_03.png) no-repeat;
-    background-size: contain;*/
-   border: 10px solid #ff585b;
-    -moz-border-radius: 50%; /* Firefox */
-  -webkit-border-radius: 50%; /* Safari 和 Chrome */
-   border-radius: 50%;/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
-    color: #fff;
-    text-align: center;
-    line-height: 6em;
-   
-  }
     .slqd{
     	float: left;
     	width: 100%;
@@ -154,20 +216,44 @@ a {
 /*接单部门处理情况开始*/
 .jiedan-left{
 	float: left;
-	width: 60%;
+	width: 48%;
+	/*margin-left: 1%;*/
+	    border: 1px solid #151924;
 	
 }
 .jiedan-right{
 	float: right;
-	width: 40%;
+	width: 48%;
+	/*margin-right: 1%;*/
+	    border: 1px solid #151924;
 	
 }
 .biao-title{
-	text-align: center;
-	color: #fff;
+	text-align: left;
+	color: #0961a0;
 	font-size: 18px;
-	margin: 10px 0;
+	padding-left: 20px;
 	font-weight: bold;
+	border: 1px solid #1f2b39;
+	background: #010917;
+    /*background: -moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));*/
+    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1f2b39), to(#010917));
+    height: 35px;
+}
+.biao-title .biao-title-l{
+	float: left;
+	line-height: 35px;
+}
+.biao-title .biao-title-r{
+	float: right;
+}
+.biao-title .biao-title-r input{
+	border: 1px solid #151924;
+	width: 127px;
+    outline: none;
+    padding-left: 5px;
+    background: #2f4158;
+        margin-top: 3px;
 }
 .bumen ul.txbox li{
 	width: 20%;
@@ -184,7 +270,6 @@ a {
 .tousujb{
 	width: 95%;
 	margin: 35px auto 0 auto;
-	margin-top: 35px;
 }
 
 .tousujb>div>div{
@@ -193,20 +278,22 @@ a {
 .tousujb>div>div ul{
 	margin-top: 30px;
 }
-.tsjb-top .tsjb-tl{
-	width: 35%;
+.tsjb-top .tsjb-tl,.tsjb-trr,.tsjb-tr{
+	width: 32%;
+	border: 1px solid #151924;
 }
-.tsjb-top .tsjb-tr{
-	width: 65%;
+.tsjb-trr,.tsjb-tr{
+	margin-left: 1%;
 }
 .tsjb-bot .tsjb-bl{
-	/*margin: 0 5%;*/
-	margin-top: 30px;
+    padding-bottom: 20px;
+	  
 }
 .tsjb-bot>div{
-	width: 50%;
+	width: 100%;
 	margin-top: 20px;
 	box-sizing: border-box;
+	 border: 1px solid #151924;
     /*margin-left: 3%;*/
 	
 }
@@ -421,7 +508,7 @@ a {
 /*话务数量情况结束*/
 /*中心大数据开始*/
 			.containers{
-				margin-top: 35px;
+				margin-bottom: 20px;
 			}
 			.z_num {
 				color: #FFFFFF;

WebChart/font/demo.css

@@ -0,0 +1,370 @@
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

WebChart/font/demo_fontclass.html

@@ -0,0 +1,178 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-tubiao"></i>
+                    <div class="name">图表</div>
+                    <div class="fontclass">.icon-tubiao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-iconfont02"></i>
+                    <div class="name">star-10-g</div>
+                    <div class="fontclass">.icon-iconfont02</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao1"></i>
+                    <div class="name">图表</div>
+                    <div class="fontclass">.icon-tubiao1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiaoxian"></i>
+                    <div class="name">图表_线</div>
+                    <div class="fontclass">.icon-tubiaoxian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-baobiaoguanli"></i>
+                    <div class="name">报表管理图标</div>
+                    <div class="fontclass">.icon-baobiaoguanli</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiaozhexiantu"></i>
+                    <div class="name">图表-折线图</div>
+                    <div class="fontclass">.icon-tubiaozhexiantu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiaozhuzhuangtu"></i>
+                    <div class="name">图表-柱状图</div>
+                    <div class="fontclass">.icon-tubiaozhuzhuangtu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao_zhexiantu"></i>
+                    <div class="name">图表_折线图</div>
+                    <div class="fontclass">.icon-tubiao_zhexiantu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-zhuzhuangtutubiao"></i>
+                    <div class="name">柱状图 图表</div>
+                    <div class="fontclass">.icon-zhuzhuangtutubiao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao_keshihuatubiao"></i>
+                    <div class="name">图标_可视化图表</div>
+                    <div class="fontclass">.icon-tubiao_keshihuatubiao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao-zhuzhuangtu"></i>
+                    <div class="name">图表-柱状图</div>
+                    <div class="fontclass">.icon-tubiao-zhuzhuangtu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-liebiaotu"></i>
+                    <div class="name">列表图</div>
+                    <div class="fontclass">.icon-liebiaotu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiaozhanshi"></i>
+                    <div class="name">图表展示</div>
+                    <div class="fontclass">.icon-tubiaozhanshi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-quanbu"></i>
+                    <div class="name">全部</div>
+                    <div class="fontclass">.icon-quanbu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-chart2"></i>
+                    <div class="name">图表2</div>
+                    <div class="fontclass">.icon-chart2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao2"></i>
+                    <div class="name">图表</div>
+                    <div class="fontclass">.icon-tubiao2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tabulation"></i>
+                    <div class="name">表格图表图标</div>
+                    <div class="fontclass">.icon-tabulation</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-zhexiantubiao"></i>
+                    <div class="name">折线图表</div>
+                    <div class="fontclass">.icon-zhexiantubiao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao3"></i>
+                    <div class="name">图表</div>
+                    <div class="fontclass">.icon-tubiao3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-meter-diagram"></i>
+                    <div class="name">仪表图</div>
+                    <div class="fontclass">.icon-meter-diagram</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao4"></i>
+                    <div class="name">图表</div>
+                    <div class="fontclass">.icon-tubiao4</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiaoshangshengqushi"></i>
+                    <div class="name">图表 上升趋势</div>
+                    <div class="fontclass">.icon-tubiaoshangshengqushi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiaoxiajiangqushi"></i>
+                    <div class="name">图表 下降趋势</div>
+                    <div class="fontclass">.icon-tubiaoxiajiangqushi</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
+        <p>与unicode使用方式相比，具有如下特点：</p>
+        <ul>
+        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
+        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

WebChart/font/demo_symbol.html

@@ -0,0 +1,247 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时，垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao"></use>
+                    </svg>
+                    <div class="name">图表</div>
+                    <div class="fontclass">#icon-tubiao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-iconfont02"></use>
+                    </svg>
+                    <div class="name">star-10-g</div>
+                    <div class="fontclass">#icon-iconfont02</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao1"></use>
+                    </svg>
+                    <div class="name">图表</div>
+                    <div class="fontclass">#icon-tubiao1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiaoxian"></use>
+                    </svg>
+                    <div class="name">图表_线</div>
+                    <div class="fontclass">#icon-tubiaoxian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-baobiaoguanli"></use>
+                    </svg>
+                    <div class="name">报表管理图标</div>
+                    <div class="fontclass">#icon-baobiaoguanli</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiaozhexiantu"></use>
+                    </svg>
+                    <div class="name">图表-折线图</div>
+                    <div class="fontclass">#icon-tubiaozhexiantu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiaozhuzhuangtu"></use>
+                    </svg>
+                    <div class="name">图表-柱状图</div>
+                    <div class="fontclass">#icon-tubiaozhuzhuangtu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao_zhexiantu"></use>
+                    </svg>
+                    <div class="name">图表_折线图</div>
+                    <div class="fontclass">#icon-tubiao_zhexiantu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-zhuzhuangtutubiao"></use>
+                    </svg>
+                    <div class="name">柱状图 图表</div>
+                    <div class="fontclass">#icon-zhuzhuangtutubiao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao_keshihuatubiao"></use>
+                    </svg>
+                    <div class="name">图标_可视化图表</div>
+                    <div class="fontclass">#icon-tubiao_keshihuatubiao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao-zhuzhuangtu"></use>
+                    </svg>
+                    <div class="name">图表-柱状图</div>
+                    <div class="fontclass">#icon-tubiao-zhuzhuangtu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-liebiaotu"></use>
+                    </svg>
+                    <div class="name">列表图</div>
+                    <div class="fontclass">#icon-liebiaotu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiaozhanshi"></use>
+                    </svg>
+                    <div class="name">图表展示</div>
+                    <div class="fontclass">#icon-tubiaozhanshi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-quanbu"></use>
+                    </svg>
+                    <div class="name">全部</div>
+                    <div class="fontclass">#icon-quanbu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-chart2"></use>
+                    </svg>
+                    <div class="name">图表2</div>
+                    <div class="fontclass">#icon-chart2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao2"></use>
+                    </svg>
+                    <div class="name">图表</div>
+                    <div class="fontclass">#icon-tubiao2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tabulation"></use>
+                    </svg>
+                    <div class="name">表格图表图标</div>
+                    <div class="fontclass">#icon-tabulation</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-zhexiantubiao"></use>
+                    </svg>
+                    <div class="name">折线图表</div>
+                    <div class="fontclass">#icon-zhexiantubiao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao3"></use>
+                    </svg>
+                    <div class="name">图表</div>
+                    <div class="fontclass">#icon-tubiao3</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-meter-diagram"></use>
+                    </svg>
+                    <div class="name">仪表图</div>
+                    <div class="fontclass">#icon-meter-diagram</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao4"></use>
+                    </svg>
+                    <div class="name">图表</div>
+                    <div class="fontclass">#icon-tubiao4</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiaoshangshengqushi"></use>
+                    </svg>
+                    <div class="name">图表 上升趋势</div>
+                    <div class="fontclass">#icon-tubiaoshangshengqushi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiaoxiajiangqushi"></use>
+                    </svg>
+                    <div class="name">图表 下降趋势</div>
+                    <div class="fontclass">#icon-tubiaoxiajiangqushi</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
+        <ul>
+          <li>支持多色图标了，不再受单色限制。</li>
+          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般，还不如png。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

WebChart/font/demo_unicode.html

@@ -0,0 +1,216 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe62a;</i>
+                    <div class="name">图表</div>
+                    <div class="code">&amp;#xe62a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe601;</i>
+                    <div class="name">star-10-g</div>
+                    <div class="code">&amp;#xe601;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62d;</i>
+                    <div class="name">图表</div>
+                    <div class="code">&amp;#xe62d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe690;</i>
+                    <div class="name">图表_线</div>
+                    <div class="code">&amp;#xe690;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe612;</i>
+                    <div class="name">报表管理图标</div>
+                    <div class="code">&amp;#xe612;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe645;</i>
+                    <div class="name">图表-折线图</div>
+                    <div class="code">&amp;#xe645;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe646;</i>
+                    <div class="name">图表-柱状图</div>
+                    <div class="code">&amp;#xe646;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe72d;</i>
+                    <div class="name">图表_折线图</div>
+                    <div class="code">&amp;#xe72d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe611;</i>
+                    <div class="name">柱状图 图表</div>
+                    <div class="code">&amp;#xe611;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe633;</i>
+                    <div class="name">图标_可视化图表</div>
+                    <div class="code">&amp;#xe633;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6db;</i>
+                    <div class="name">图表-柱状图</div>
+                    <div class="code">&amp;#xe6db;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6b5;</i>
+                    <div class="name">列表图</div>
+                    <div class="code">&amp;#xe6b5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe63d;</i>
+                    <div class="name">图表展示</div>
+                    <div class="code">&amp;#xe63d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe620;</i>
+                    <div class="name">全部</div>
+                    <div class="code">&amp;#xe620;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe659;</i>
+                    <div class="name">图表2</div>
+                    <div class="code">&amp;#xe659;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe64a;</i>
+                    <div class="name">图表</div>
+                    <div class="code">&amp;#xe64a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61a;</i>
+                    <div class="name">表格图表图标</div>
+                    <div class="code">&amp;#xe61a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65d;</i>
+                    <div class="name">折线图表</div>
+                    <div class="code">&amp;#xe65d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62f;</i>
+                    <div class="name">图表</div>
+                    <div class="code">&amp;#xe62f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe660;</i>
+                    <div class="name">仪表图</div>
+                    <div class="code">&amp;#xe660;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe928;</i>
+                    <div class="name">图表</div>
+                    <div class="code">&amp;#xe928;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe790;</i>
+                    <div class="name">图表 上升趋势</div>
+                    <div class="code">&amp;#xe790;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe791;</i>
+                    <div class="name">图表 下降趋势</div>
+                    <div class="code">&amp;#xe791;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
+        <ul>
+        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下：</p>
+        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>

WebChart/huaWuLiang.html

@@ -7,6 +7,17 @@
     <script src="Script/Common/huayi.config.js"></script>
     <link rel="stylesheet" href="css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/index.css"/>
+    <style>
+    	.huawu{
+    		width: 97%;
+   			 margin: 0 auto;
+    	}
+    	.tu_box{
+    		width:48%;
+    		float: left;
+    		border: 1px solid #151924;
+    	}
+    </style>
 </head>
 <body>
 <div class="navcon ">
@@ -25,12 +36,28 @@
 
 <div class="huawu">
 	<div class="containers clearfix">
-		<div style="width:50%; float: left;">
-			<div class="biao-title">话务量实时数据统计</div>
+		<div class="tu_box">
+			<div class="biao-title">
+					<div class="biao-title-l">
+				话务量实时数据统计
+			</div>
+			<div class="biao-title-r">
+				<input type="text" id="time1" />
+				<button class="btns part1Btn">搜索</button>
+			</div>
+			</div>
 			<div id="main1" style="width: 100%;height: 400px;"></div>
 		</div>
-		<div style="width: 50%; float: right;">
-				<div class="biao-title"  style="width: 100%;">当日话务量总体统计</div>
+		<div class="tu_box" style="margin-left: 2%;">
+				<div class="biao-title">
+						<div class="biao-title-l">
+				当日话务量总体统计
+			</div>
+			<div class="biao-title-r">
+				<input type="text" id="time2" />
+				<button class="btns part2Btn">搜索</button>
+			</div>
+				</div>
 					<div id="phone_num" style="width: 100%;height: 400px;"></div>
 			<!--<div class="Map">
 				<div class="biao-title">
@@ -109,15 +136,24 @@
 		</div>
 	</div>
 	<div class="row2 clearfix">
-		<div  style="width: 50%; float: left;">
-		<div class="biao-title"  style="width: 100%;">坐席闲忙比例</div>
+		<div class="tu_box">
+		<div class="biao-title">
+			
+			<div class="biao-title-l">
+				坐席闲忙比例
+			</div>
+			<div class="biao-title-r">
+				<input type="text" id="time3" />至<input type="text" id="time4" />
+				<button class="btns part3Btn">搜索</button>
+			</div>
+		</div>
 			<div id="main" style="width: 100%; height: 400px;"></div>
 		</div>
-		<div class='hwzt' style="width: 50%; float: right;">
+		<!--<div class='hwzt' style="width: 50%; float: right;">-->
 				<!--<span class="z_num">话务量总体统计</span>-->
 				<!--<div class="biao-title"  style="width: 100%;">话务量总体统计</div>
 					<div id="phone_num" style="width: 100%;height: 400px;"></div>-->
-		</div>
+		<!--</div>-->
 	
 	</div>
 </div>

WebChart/index.html

@@ -7,6 +7,97 @@
     <script src="Script/Common/huayi.config.js"></script>
     <link rel="stylesheet" href="css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/index.css"/>
+    <style>
+    	.qunzhong>div{
+    	    width: 32%;
+		    float: left;
+		    margin-left: 1%;
+		    border: 1px solid #151924;
+    	}
+    	.table1 thead tr td{
+    		background: #16385e;
+   			color: #aba5a5;
+    	}
+    	.table1 tbody tr td{
+    		border: 1px solid #151924;
+    		color: #aba5a5;
+    	}
+    	.tool_count{
+    		position: relative;
+    	}
+    	.tooltips{
+    		position: absolute;
+		    top: -100%;
+		      right: -50%;
+		    background: rgba(50, 50, 50, 0.7);
+		    border-radius: 6px;
+		    font-size: 15px;
+		    color: #fff;
+		    z-index: 999;
+		    width: 100%;
+		    text-align: left;
+		    padding: 5px;
+		    display: none;
+		    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+    	}
+    		.tooltips p{
+    			float: left;
+    			width: 50%;
+    			text-align: center;
+    		}
+    	.list{
+    		padding-left: 45px;
+    	}
+    	.list li{
+    		float: left;
+		    width: 33%;
+		    color: #ccc;
+		    cursor: pointer;
+		        margin-bottom: 5px;
+    	}
+    	/*.list li:hover .tooltips{
+    		display: block;
+    	}*/
+    	.color0{
+    		color: #61a0a9;
+    	}
+    	.color1{
+    		color: #cb885d;
+    	}
+    	.color2{
+    		color: #c4352d;
+    	}
+    	.color3{
+    		color: #314452;
+    	}
+    	.color4{
+    		color: #a88c1e;
+    	}
+    	.color5{
+    		color: #2f5675;
+    	}
+    	.color6{
+    		color: #94c8b1;
+    	}
+    	.color7{
+    		color: #babc2f;
+    	}
+    	.color8{
+    		color: #e86617;
+    	}
+    	.color9{
+    		color: #afe817;
+    	}
+    	.color10{
+    		color: #e8178d;
+    	}
+    	.color11{
+    		color: #0edccc;
+    	}
+    	.tbr{
+    		margin-right: 3px;
+    	}
+    </style>
 </head>
 <body>
 <div class="navcon ">
@@ -23,23 +114,90 @@
    </div>
 </div>
 <div class="qunzhong clearfix">
-	<div style="width: 50%;float: left;">
-		<div class="biao-title">受理群众区域统计</div>
+	<div >
+		<div class="biao-title clearfix">
+			
+			<div class="biao-title-l">
+				受理群众区域统计
+			</div>
+			<div class="biao-title-r">
+				<input type="text" id="time1" />
+				<button class="btns part1Btn">搜索</button>
+			</div>
+		</div>
+		<div class="clearfix">
 		<div id="container1" style="width: 100%; height:500px;float: left;"></div>
+		</div>
+	<ul class="list list_one clearfix">
+		</ul>
 	</div>
 	
-	<div class="huanxing">
-		<div class="biao-title">受理区域统计</div>
-		<div id="shouLiArea" style="width: 100%; height:500px;">
-			
+	<div class="part2">
+		<div class="biao-title">
+			<div class="biao-title-l">
+				受理区域统计
+			</div>
+			<div class="biao-title-r">
+				<input type="text" id="time2" />至<input type="text" id="time3" />
+				<button class="btns part2Btn">搜索</button>
+			</div>
 		</div>
+		<div id="shouLiArea" style="width: 100%; height:500px;"></div>
+		<ul class="list list_two clearfix"></ul>
 	</div>
 	<div class="slqd">
-		<div class="biao-title" style="margin-top: 29px;">受理渠道24小时实时统计</div>
-		<div id="qd_box" style="width: 100%;height: 400px;"></div>
-		<ul class="txbox">
-		</ul>
+		<div class="biao-title">
+			<div class="biao-title-l">
+				受理渠道24小时实时统计
+			</div>
+			<div class="biao-title-r">
+				<input type="text" id="time4" />至<input type="text" id="time5" />
+				<button class="btns part3Btn">搜索</button>
+			</div>
+		</div>
+		<div id="qd_box" style="width: 100%;height: 500px;"></div>
+		<ul class="list list_three clearfix"></ul>
 	</div>
+	<!--<div>-->
+		<!--<table class="table1 table">
+			<thead>
+				<tr>
+					<td>单位</td>
+					<td>受理数量</td>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>市直单位</td>
+					<td><div class="tool_count">20 <div class="tooltips"><p>建议：0</p></div></div></td>
+				</tr>
+				<tr>
+					<td>睢阳区</td>
+					<td><a href="">20</a></td>
+				</tr>
+				<tr>
+					<td>市直单位</td>
+					<td><a href="">20</a></td>
+				</tr>
+				<tr>
+					<td>市直单位</td>
+					<td><a href="">20</a></td>
+				</tr>
+				<tr>
+					<td>市直单位</td>
+					<td><a href="">20</a></td>
+				</tr>
+				<tr>
+					<td>市直单位</td>
+					<td><a href="">20</a></td>
+				</tr>
+				
+			</tbody>
+		</table>-->
+		
+	
+	
+	<!--</div>-->
 	
 </div>
 <script src="js/jquery.min.js"></script>

WebChart/jieDanBuMen.html

@@ -8,6 +8,26 @@
 		<script src="Script/Common/huayi.config.js"></script>
 		<link rel="stylesheet" href="css/bootstrap.min.css" />
 		<link rel="stylesheet" href="css/index.css" />
+		<style>
+			.jiedan{
+				margin: 0 20px;
+			}
+			.part3 {
+				border: 1px solid #151924;
+				margin-top: 20px;
+			}
+			.table1 thead tr td{
+    		background: #16385e;
+   			color: #aba5a5;
+    	}
+    	.table1 tbody tr td{
+    		border: 1px solid #151924;
+    		color: #aba5a5;
+    	}
+    	    	.tool_count {
+		    cursor: pointer;
+		    }
+		</style>
 	</head>
 
 	<body>
@@ -40,20 +60,56 @@
 		<div class="jiedan">
 			<div class="clearfix">
 				<div class="jiedan-left" style="100%">
-					<div class="biao-title">工单状态</div>
-					<div id="jiedan1" style="width: 100%; height: 400px;"></div>
+					<div class="biao-title">
+						<div class="biao-title-l">
+							工单状态
+						</div>
+
+					</div>
+					<div id="jiedan1" style="width: 100%; height: 500px;"></div>
 
 				</div>
 				<div class="jiedan-right">
-					<div class="biao-title">工单处理时间分布情况</div>
-					<div id="timefb" style="400px"></div>
+					<div class="biao-title">
+
+						<div class="biao-title-l">
+							工单处理时间分布情况
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time1" />
+							<button class="btns part1Btn">搜索</button>
+						</div>
+					</div>
+					<div id="timefb" style="width: 100%; height: 500px;"></div>
 				</div>
 			</div>
-			<div class="biao-title">各部门受理工单情况</div>
-			<div class="bumen" id="bumen" style="width: 100%; height: 500px;">
-				<!--<ul class="txbox clearfix">
-
-				</ul>-->
+			<div class="part3">
+				<div class="biao-title">
+					<div class="biao-title-l">
+						各部门受理工单情况
+					</div>
+					<div class="biao-title-r">
+						<input type="text" id="time2" />至<input type="text" id="time3" />
+						<button class="btns part3Btn">搜索</button>
+					</div>
+				</div>
+				<!--<div class="bumen" id="bumen" style="width: 100%; height: 500px;">-->
+				<!--</div>-->
+				<div style="height: 400px;overflow-y: scroll;overflow-x: hidden;">
+				<table class="table1 table">
+					<thead>
+						<tr>
+							<!--<td>排名</td>-->
+							<td>部门名称</td>
+							<td>受理工单量</td>
+						</tr>
+					</thead>
+					<tbody >
+						
+					</tbody>
+				</table>
+				<!--<ul class="list list_one clearfix"></ul>-->
+				</div>
 			</div>
 		</div>
 
@@ -65,5 +121,4 @@
 	<script src="js/radialIndicator.js"></script>
 	<script src="js/coment.js"></script>
 	<script src="js/jiedanbumen.js"></script>
-
 </html>

WebChart/js/huawu.js

@@ -1,260 +1,335 @@
-//part 1
-var main1 = echarts.init(document.getElementById('main1'));
-main1.setOption({
-	tooltip: {
-		trigger: 'axis',
-		axisPointer: {
-			type: 'cross',
-			label: {
-				show: true,
-				backgroundColor: '#333'
-			}
-		}
-	},
-	legend: {
-		data: ["来电数量", "接通数量", "留言数量", "放弃数量", "骚扰数量"],
-		textStyle: {
-			color: '#fff'
-		}
-	},
-	xAxis: {
-		name: '时',
-		data: [],
-		axisLine: {
-			lineStyle: {
-				color: '#ccc'
+$(document).ready(function() {
+	laydate.render({
+		elem: '#time1',
+		theme: '#00a1cb'
+	});
+	laydate.render({
+		elem: '#time2',
+		theme: '#00a1cb'
+	});
+	laydate.render({
+		elem: '#time3',
+		theme: '#00a1cb'
+	});
+
+	laydate.render({
+		elem: '#time4',
+		theme: '#00a1cb'
+	});
+	//part 1
+	var main1 = echarts.init(document.getElementById('main1'));
+	main1.setOption({
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross',
+				label: {
+					show: true,
+					backgroundColor: '#333'
+				}
 			}
-		}
-	},
-	yAxis: {
-		name: '数量',
-		splitLine: {
-			show: false
 		},
-		axisLine: {
-			lineStyle: {
-				color: '#ccc'
-			}
-		}
-	},
-	series: []
-});
-
-//pasrt 3
-var main = echarts.init(document.getElementById('main'));
-main.setOption({
-
-	tooltip: {
-		trigger: 'axis',
-		axisPointer: {
-			type: 'cross',
-			label: {
-				show: true,
-				backgroundColor: '#333'
+		legend: {
+			bottom:'bottom',
+			data: ["来电数量", "接通数量", "留言数量", "放弃数量", "骚扰数量"],
+			textStyle: {
+				color: '#fff'
 			}
 		},
-		formatter: function(datas) {
-			var res = datas[0].name + '<br/>',
-				val;
-			for(var i = 0, length = datas.length; i < length; i++) {
-				val = (datas[i].value) + '%';
-				res += datas[i].seriesName + '：' + val + '<br/>';
+		xAxis: {
+			name: '时',
+			data: [],
+			axisLine: {
+				lineStyle: {
+					color: '#ccc'
+				}
 			}
-			return res;
-		}
-	},
-	legend: {
-		data: ["空闲", "通话", "置忙"],
-		textStyle: {
-			color: '#fff'
-		}
-	},
-	xAxis: {
-		name: '时',
-		data: [],
-		axisLine: {
-			lineStyle: {
-				color: '#ccc'
+		},
+		yAxis: {
+			name: '数量',
+			splitLine: {
+				show: false
+			},
+			axisLine: {
+				lineStyle: {
+					color: '#ccc'
+				}
 			}
-		}
-	},
-	yAxis: {
-		name: '数量',
-		splitLine: {
-			show: false
 		},
-		axisLine: {
-			lineStyle: {
-				color: '#ccc'
+		series: []
+	});
+	partOne();
+
+	function partOne() {
+		var index = layer.load(1, {
+			shade: [0.5, '#030303'] //0.1透明度的白色背景
+		});
+		$('.list_one').html('');
+		$.ajax({
+			type: "get",
+			url: huayi.config.callcenter_url + "info/GetTelCount24ByDate",
+			async: true,
+			dataType: "json",
+			data: {
+				date: $('#time1').val()
+			},
+			success: function(data) {
+				if(data.state.toLowerCase() == "success") {
+					layer.close(index);
+					var con = data.data;
+					main1.setOption({
+						xAxis: {
+							data: con.hours
+						},
+						series: [{
+							name: "来电数量",
+							type: "line",
+							smooth: true,
+							showAllSymbol: true,
+							symbol: "emptyCircle",
+							symbolSize: 10,
+							data: con.rcounts
+						}, {
+							name: "接通数量",
+							type: "line",
+							smooth: true,
+							showAllSymbol: true,
+							symbol: "emptyCircle",
+							symbolSize: 10,
+							data: con.ccounts
+						}, {
+							name: "留言数量",
+							type: "line",
+							smooth: true,
+							showAllSymbol: true,
+							symbol: "emptyCircle",
+							symbolSize: 10,
+							data: con.lcounts
+						}, {
+							name: "骚扰数量",
+							type: "line",
+							smooth: true,
+							showAllSymbol: true,
+							symbol: "emptyCircle",
+							symbolSize: 10,
+							data: con.scounts
+						}]
+
+					})
+
+				}
 			}
-		}
-	},
-	series: []
-});
 
-//part 2
-var phone_num = echarts.init(document.getElementById('phone_num'));
-phone_num.setOption({
-	title: {
-//		text: '投诉/举报汇总',
-		x: 'center',
-		textStyle: {
-			color: '#fff',
-			fontSize: 16
+		});
+
+	}
+
+$('.part1Btn').click(function() {
+				partOne();
+			})
+	
+	//part 2
+	var phone_num = echarts.init(document.getElementById('phone_num'));
+	phone_num.setOption({
+		title: {
+			//		text: '投诉/举报汇总',
+			x: 'center',
+			textStyle: {
+				color: '#fff',
+				fontSize: 16
+			},
 		},
-	},
-	tooltip: {
-		trigger: 'axis',
-		axisPointer: { // 坐标轴指示器，坐标轴触发有效
-			type: 'line' // 默认为直线，可选为：'line' | 'shadow'
-		}
-	},
-	toolbox: {
-		show: true,
-	},
-	calculable: true,
-	xAxis: [{
-		type: 'category',
-//		name: '月份',
-		splitLine: {
-			show: false
-		}, //去除网格线
-		data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
-//		axisTick: {
-//			alignWithLabel: true
-//		},
-		axisLine: {show: false,
-			lineStyle: {
-				color: '#fff'
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: { // 坐标轴指示器，坐标轴触发有效
+				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
 			}
 		},
-//		axisLine: {},
-		axisTick: {
-			show: false
+		toolbox: {
+			show: true,
+		},
+		calculable: true,
+		xAxis: [{
+			type: 'category',
+			//		name: '月份',
+			splitLine: {
+				show: false
+			}, //去除网格线
+			data: ["话务量(通)", "来电(通)", "接通量(通)", "平均通话时长(秒)"],
+			//		axisTick: {
+			//			alignWithLabel: true
+			//		},
+			axisLine: {
+				show: false,
+				lineStyle: {
+					color: '#fff'
+				}
+			},
+			//		axisLine: {},
+			axisTick: {
+				show: false
 			}
-		
-	}],
-	yAxis: [{
-		show:false
-	}],
-	series: [{
-			name: '数量',
-			type: 'bar',
-			barWidth: '30%', //图形宽度
-			data: [],
-			itemStyle: {
-				normal: {
-					label: {
-						show: true,
-						textStyle: {
-							color: '#fff' //顶部数据颜色
+
+		}],
+		yAxis: [{
+			show: false
+		}],
+		series: [{
+				name: '数量',
+				type: 'bar',
+				barWidth: '30%', //图形宽度
+				data: [],
+				itemStyle: {
+					normal: {
+						label: {
+							show: true,
+							textStyle: {
+								color: '#fff' //顶部数据颜色
+							}
 						}
 					}
-				}
-			},
-			label: {
-				normal: {
-					show: true,
-					position: 'top' //顶部数据显示位置
-				}
+				},
+				label: {
+					normal: {
+						show: true,
+						position: 'top' //顶部数据显示位置
+					}
 
+				}
 			}
-		}
 
-	]
-//  color: ['#ff9800','#61a0a8','#1ab394']
-});
-Ajax();
-
-function Ajax() {
-	var index = layer.load(1, {
-		shade: [0.5, '#030303'] //0.1透明度的白色背景
+		]
+		//  color: ['#ff9800','#61a0a8','#1ab394']
 	});
-	$.ajax({
-		type: "get",
-		url: huayi.config.callcenter_url + "Info/GetTelInfo",
-		async: true,
-		dataType: 'json',
-		//				data:{
-		//					token:token
-		//				},
-		success: function(result) {
-			if(result.state.toLowerCase() == 'success') {
-				layer.close(index);
-				var part1 = result.data.a;
+	 partTwo() 
+	function partTwo() {
+		var index = layer.load(1, {
+			shade: [0.5, '#030303'] //0.1透明度的白色背景
+		});
+		$.ajax({
+			type: "get",
+			url: huayi.config.callcenter_url + "info/GetTelCountByDate",
+			async: true,
+			dataType: "json",
+			data: {
+				date: $('#time2').val()
+			},
+			success: function(data) {
+				if(data.state.toLowerCase() == "success") {
+					layer.close(index);
+					var con = data.data;
+					phone_num.setOption({
+						series: [{
+							data: [con.hwcon, con.lhcon, con.jtcon, con.pjthtimes]
+							//						data: [20, 100, 5, 80]
+						}]
 
-				main1.setOption({
-					xAxis: {
-						data: part1.hours
-					},
-					series: [{
-						name: "来电数量",
-						type: "line",
-						smooth: true,
-						showAllSymbol: true,
-						symbol: "emptyCircle",
-						symbolSize: 10,
-						data: part1.rcounts
-					}, {
-						name: "接通数量",
-						type: "line",
-						smooth: true,
-						showAllSymbol: true,
-						symbol: "emptyCircle",
-						symbolSize: 10,
-						data: part1.ccounts
-					}, {
-						name: "留言数量",
-						type: "line",
-						smooth: true,
-						showAllSymbol: true,
-						symbol: "emptyCircle",
-						symbolSize: 10,
-						data: part1.lcounts
-					}, {
-						name: "骚扰数量",
-						type: "line",
-						smooth: true,
-						showAllSymbol: true,
-						symbol: "emptyCircle",
-						symbolSize: 10,
-						data: part1.scounts
-					}]
+					})
 
-				})
-				//part 3
-				var part3 = result.data.b;
-				main.setOption({
-					xAxis: {
-						data: part3.hours
-					},
-					series: [{
-						name: "空闲",
-						type: "bar",
-						data: part3.kxpercents
-					}, {
-						name: "通话",
-						type: "bar",
-						data: part3.thpercents
-					}, {
-						name: "置忙",
-						type: "bar",
-						data: part3.zmpercents
-					}]
+				}
+			}
 
-				})
-				//part4
-				var part4 = result.data.c;
-				phone_num.setOption({
-					series: [{
-						data: [part4.hwcon, part4.lhcon, part4.jtcon, part4.pjthtimes]
-//						data: [20, 100, 5, 80]
-					}]
+		});
 
-				})
+	}
 
+$('.part2Btn').click(function() {
+				partTwo();
+			})
+//pasrt 3
+	var main = echarts.init(document.getElementById('main'));
+	main.setOption({
+
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross',
+				label: {
+					show: true,
+					backgroundColor: '#333'
+				}
+			},
+			formatter: function(datas) {
+				var res = datas[0].name + '<br/>',
+					val;
+				for(var i = 0, length = datas.length; i < length; i++) {
+					val = (datas[i].value) + '%';
+					res += datas[i].seriesName + '：' + val + '<br/>';
+				}
+				return res;
+			}
+		},
+		legend: {
+			data: ["空闲", "通话", "置忙"],
+			textStyle: {
+				color: '#fff'
+			},
+			bottom:'bottom'
+		},
+		xAxis: {
+			name: '时',
+			data: [],
+			axisLine: {
+				lineStyle: {
+					color: '#ccc'
+				}
 			}
-		}
+		},
+		yAxis: {
+			name: '比率',
+			splitLine: {
+				show: false
+			},
+			axisLine: {
+				lineStyle: {
+					color: '#ccc'
+				}
+			}
+		},
+		series: []
 	});
-}
-setInterval(Ajax, huayi.config.indextime); //Ajax调用函数
+ 	partThree();
+    function partThree(){ 
+    	$.ajax({
+			type: "get",
+			url: huayi.config.callcenter_url + "info/GetUserStateCount24ByDate",
+			async: true,
+			dataType: "json",
+			data: {
+				start: $('#time3').val(),
+				end: $('#time4').val()
+			},
+			success: function(data) {
+				if(data.state.toLowerCase() == "success") {
+					var con = data.data;
+//					var part3 = result.data.b;
+					main.setOption({
+						xAxis: {
+							data: con.hours
+						},
+						series: [{
+							name: "空闲",
+							type: "bar",
+							data: con.kxpercents
+						}, {
+							name: "通话",
+							type: "bar",
+							data: con.thpercents
+						}, {
+							name: "置忙",
+							type: "bar",
+							data: con.zmpercents
+						}]
+
+					})
+
+				}
+			}
+
+		});
+    }
+$('.part3Btn').click(function() {
+				partThree();
+			})
+	//setInterval(Ajax, huayi.config.indextime); //Ajax调用函数
+})

WebChart/js/jiedanbumen.js

@@ -1,5 +1,28 @@
-		//=================echarts====================
-		// 基于准备好的dom，初始化echarts实例
+		 function showTools(a){
+	 	if($(a).find(".tooltips").css("display") == 'none') {
+	 		$(a).find(".tooltips").show();
+		   	$(a).parents('tr').siblings().find(".tooltips").hide();
+	 	}else{
+	 		$(a).find(".tooltips").hide();
+	 	}
+		   	
+		   }
+		$(document).ready(function(){
+			
+	
+		laydate.render({
+				elem: '#time1',
+				theme: '#00a1cb'
+			});
+		laydate.render({
+				elem: '#time2',
+				theme: '#00a1cb'
+			});
+		laydate.render({
+				elem: '#time3',
+				theme: '#00a1cb'
+			});
+		// 工单状态part1
 		var jiedan = echarts.init(document.getElementById('jiedan1'));
 		jiedan.setOption({
 			tooltip: {
@@ -13,6 +36,7 @@
 				}
 			},
 			legend: {
+				bottom:'bottom',
 				data: [],
 				textStyle: {
 					color: '#ccc'
@@ -43,185 +67,282 @@
 			},
 			series: []
 		});
-		
-		//part 3
-		var bumen = echarts.init(document.getElementById('bumen'));
-		bumen.setOption({
-//title: {
-//          text: 'Beijing AQI'
-//      },
-        tooltip: {
-            trigger: 'axis'
-        },
-        xAxis: {
-        	name:'部门名称',
-        	    axisLine: {
-					lineStyle: {
-						color: '#fff'
-					}
-				},
-            data:[]
-        },
-        yAxis: {
-        	name:'数量',
-            splitLine: {
-                show: false
-            },
-            axisLine: {
-					lineStyle: {
-						color: '#fff'
+			
+			function partOne(){
+				$.ajax({
+					type:"get",
+					url: huayi.config.callcenter_url + "info/GetStateCountMonthByDate",
+					async:true,
+					dataType:'json',
+					success:function(data){
+					if(data.state.toLowerCase()=='success'){
+						var con=data.data;
+//						var jieDans = result.data.a;
+						var counts = con.counts;
+						var sers = [];
+						$(counts).each(function(i, n) {
+							var obj = {};
+							obj.name = con.cols[i];
+							obj.type = "line";
+							obj.smooth = true;
+							obj.showAllSymbol = true;
+							obj.symbol = "emptyCircle";
+							obj.symbolSize = 10;
+							obj.data = n;
+							sers.push(obj)
+						});
+						jiedan.setOption({
+							xAxis: {
+								data: con.months
+							},
+							legend: {
+								data: con.cols
+							},
+							series: sers
+						});
+							
+						
+						
 					}
 				}
-        },
-      
-        dataZoom: [{
-            startValue: '2014-06-01'
-        }, {
-            type: 'inside'
-        }],
+				});
+			}
+		//受理渠道24小时统计 part2
+		var part2 = echarts.init(document.getElementById('timefb'));
+			part2.setOption({
+	tooltip: {
+		trigger: 'axis',
+		axisPointer: {
+			type: 'shadow',
+			label: {
+				show: true,
+				backgroundColor: '#333'
+			}
+		},
+		formatter: function(datas) 
+              {
+              var res = datas[0].name + '<br/>', val;
+                  for(var i = 0, length = datas.length; i < length; i++) {
+                        val = (datas[i].value);
+                        res += datas[i].seriesName + '：' + val + '<br/>';
+                    }
+                    return res;
+               }
+	},
+	legend: {
+//		top: 30,
+//		orient: 'vertical',
+		bottom:'bottom',
+		data: ['受理工单数','处理工单数'],
+		textStyle: {
+			color: '#fff'
+		}
+	},
+	xAxis: {
+		name: '时',
+		data: [],
+		axisLine: {
+			lineStyle: {
+				color: '#ccc'
+			}
+		},
 
-        series: {
-            name: '部门受理工单',
-            type: 'line',
-//          type: 'bar',
-            data:[]
-        },
-        color:["#4caf50"]
-		});
+	},
+	yAxis: {
+		name: '数量',
+		splitLine: {
+			show: false
+		},
+		axisLine: {
+			lineStyle: {
+				color: '#ccc'
+			}
+		}
+	},
+	series: [{
+		name: '受理工单数',
+		type: 'bar',
+		barWidth: '20%',
+		itemStyle: {
+			normal: {
+				color: new echarts.graphic.LinearGradient(
+					0, 0, 0, 1, [{offset: 0, color: '#83bff6'},
+                            {offset: 0.5, color: '#188df0'},
+                            {offset: 1, color: '#188df0'}
+					]
+				)
+			}
+		},
+		label: {
+						normal: {
+							show: true,
+							position: 'top', //顶部数据显示位置
+							formatter: '{c}' // 这里是数据展示的时候显示的数据
+						}
+					},
+		data: []
+	},{
+		name: '处理工单数',
+		type: 'bar',
+		barWidth: '20%',
+		itemStyle: {
+			normal: {
+				color: new echarts.graphic.LinearGradient(
+					0, 0, 0, 1, [{
+							offset: 0,
+							color: '#14c8d4'
+						},
+						{
+							offset: 1,
+							color: '#43eec6'
+						}
+					]
+				)
+			}
+		},
+		label: {
+						normal: {
+							show: true,
+							position: 'top', //顶部数据显示位置
+							formatter: '{c}' // 这里是数据展示的时候显示的数据
+						}
+					},
+		data: []
+	}]
 
-		Ajax();
-		function Ajax(){
-				 var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
+});
+		   function partTwo(){
+		   		$.ajax({
+   					type:"get",
+   					url: huayi.config.callcenter_url + "info/GetDealCount24ByDate",
+					dataType: 'json',
+					async: true,
+					data:{
+						date:$('#time1').val(),
+					},
+					success:function(data){
+						if(data.state.toLowerCase()=='success'){
+							var con=data.data;
+//							var qd_legend = [];
+//							var qd_sers = [];
+//							var ser_data = [];
+//							var qd_label = {
+//								normal: {
+//									show: true,
+//									position: 'inside',
+//									formatter: '{c}%'
+//								}
+//							};
+							part2.setOption({
+								xAxis: {
+									data:con.hours
+								},
+								series: [{
+									data: con.acounts
+								},{
+									data:con.fcounts
+								}]
+							});
+						}
+					}
+   				});
+		   }
+		$('.part1Btn').click(function(){
+			partTwo();
+		})
+		//part 3
+//		var bumen = echarts.init(document.getElementById('bumen'));
+//		bumen.setOption({
+//      tooltip: {
+//          trigger: 'axis'
+//      },
+//      xAxis: {
+//      	name:'部门名称',
+//      	    axisLine: {
+//					lineStyle: {
+//						color: '#fff'
+//					}
+//				},
+//          data:[]
+//      },
+//      yAxis: {
+//      	name:'数量',
+//          splitLine: {
+//              show: false
+//          },
+//          axisLine: {
+//					lineStyle: {
+//						color: '#fff'
+//					}
+//				}
+//      },
+//    
+//      dataZoom: [{
+//          startValue: '2014-06-01'
+//      }, {
+//          type: 'inside'
+//      }],
+//
+//      series: {
+//          name: '部门受理工单',
+//          type: 'line',
+////          type: 'bar',
+//          data:[]
+//      },
+//      color:["#4caf50"]
+//		});
+		partThree();
+		function partThree(){
+			 var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
 							});
-			$('.txbox').html('');
+			$('.table1 tbody').html('');
 			$.ajax({
-			type: "get",
-			url: huayi.config.callcenter_url + "Info/GetDeptInfo",
-			async: true,
-			dataType: 'json',
-			success: function(result) {
-				if(result.state.toLowerCase() == 'success') {
-					layer.close(index);
-					var jieDans = result.data.a;
-					var counts = jieDans.counts;
-					var sers = [];
-					$(counts).each(function(i, n) {
-						console.log(n[i]);
-						var obj = {};
-						obj.name = jieDans.cols[i];
-						//						obj.type = "bar";
-						obj.type = "line";
-						obj.smooth = true;
-						obj.showAllSymbol = true;
-						obj.symbol = "emptyCircle";
-						obj.symbolSize = 10;
-						obj.data = n;
-						sers.push(obj)
-					});
-					jiedan.setOption({
-						xAxis: {
-							data: jieDans.months
-						},
-						legend: {
-							data: jieDans.cols
-						},
-						series: sers
-					});
-						var department = result.data.b;
-						var part3_ser = [];
-						var part3_xAxis = [];
-						$(department).each(function(i, n) {
-							var part3_obj = {};
-							part3_obj.value = n.count;
-							part3_obj.name = n.deptname;
-
-							part3_ser.push(part3_obj);
-							part3_xAxis.push(n.deptname)
-							//						$('<li title="' + n.deptname + '"><div id="dep' + i + '"></div>' + n.deptname + '</li>').appendTo('.txbox');
-							//						$('#dep' + i).radialIndicator({
-							//							barColor: getColor(),
-							//							barWidth: 10,
-							//							initValue: n.percent,
-							//							roundCorner: true,
-							//							percentage: true
-							//						});
+				type:"get",
+				url:huayi.config.callcenter_url + "info/GetDeptCountByDate",
+				async:true,
+				dataType:'json',
+				data:{
+					start:$('#time2').val(),
+					end:$('#time3').val()
+				},
+				success:function(data){
+					if(data.state.toLowerCase()=='success'){
+						layer.close(index);
+						var con=data.data;
+						$(con).each(function(i,n){
+							var html="";
+//							$('<tr>'+
+//							'<td>1</td>'+
+//							'<td>' + n.AreaName + '</td>'+
+//							'<td>' + n.Count + '</td>'+
+//						'</tr>').appendTo('.table1 tbody');
+							html = '<tr><td>' +
+									'<div class="tool_count" onClick="showTools(this)">' + n.AreaName + '<div class="tooltips clearfix">'+
+									'<div class="toolsTitle">'+ n.AreaName +'</div>'
+								$(n.Item).each(function(j, m) {
+									html += '<p>' + m.TypeName + '：' + m.Count + '</p>'
+								})
+								html += '</div>' +
+									'</div>' +
+									'</td>' +
+									'<td>' + n.Count + '</td>' +
+									'</tr>';
+								$('.table1 tbody').append(html);
 						})
-						bumen.setOption({
-							xAxis: {
-								data: part3_xAxis
-							},
-							series: {
-								data: part3_ser
-							}
-						});
-					var orderDealTime = result.data.c;
-					$('#timefb').highcharts({
-						chart: {
-							type: 'area',
-							backgroundColor: '#030303',
-							color: '#fff'
-						},
-						title: {
-							text: false
-						},
-						legend: {
-
-							align: 'center',
-							verticalAlign: 'top',
-							y: 10,
-							// 				backgroundColor: '#FCFFC5',
-							style: {
-								color: '#fff'
-
-							}
-
-						},
-						//X轴属性
-						xAxis: {
-							categories: orderDealTime.hours,
-							//x轴坐标值
-							labels: {
-								style: {
-									color: '#fff'
-								}
-							}
-						},
-						//Y轴属性
-						yAxis: {
-							title: {
-								text: false
-							},
-							//y轴坐标值
-							labels: {
-//								style: {
-//									color: '#fff'
-//								}
-								  formatter: function () {
-								                    return this.value;
-								                }
-							},
-							gridLineColor: '#100e11'
-
-						},
-
-						credits: {
-							enabled: false
-						},
-						series: [{
-							name: '受理工单数',
-							data: orderDealTime.acounts,
-							color: '#da2d28'
-						}, {
-							name: '处理工单数',
-							data: orderDealTime.fcounts,
-							color: '#ffeb3b'
-						}]
-
-					})
-
+					}
 				}
-			}
-		});
+			});
+		}
 
+		$('.part3Btn').click(function(){
+			partThree();
+		})
+
+		Ajax();
+		function Ajax(){
+			partOne()	
+			partTwo();	
+			partThree();
 		}
-	setInterval(Ajax, huayi.config.indextime);//Ajax调用函数
+			})
+//	setInterval(Ajax, huayi.config.indextime);//Ajax调用函数

WebChart/js/laiyuanqudao.js

@@ -1,332 +1,415 @@
-		var container1 = echarts.init(document.getElementById('container1'));
-		container1.setOption({
-			tooltip: {
-				trigger: 'axis',
-				axisPointer: {
-					type: 'cross',
-					label: {
-						show: true,
-						backgroundColor: '#333'
+		$(document).ready(function() {
+
+			laydate.render({
+				elem: '#time1',
+				theme: '#00a1cb'
+			});
+			laydate.render({
+				elem: '#time2',
+				theme: '#00a1cb'
+			});
+			laydate.render({
+				elem: '#time3',
+				theme: '#00a1cb'
+			});
+
+			laydate.render({
+				elem: '#time4',
+				theme: '#00a1cb'
+			});
+			laydate.render({
+				elem: '#time5',
+				theme: '#00a1cb'
+			});
+
+			var container1 = echarts.init(document.getElementById('container1'));
+			container1.setOption({
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'cross',
+						label: {
+							show: true,
+							backgroundColor: '#030917'
+						}
 					}
-				}
-			},
-			//			title: {
-			//				text: '受理群众区域统计',
-			//				x: 'center',
-			//				top: 'top',
-			//				textStyle: {
-			//					color: '#fff',
-			//					fontSize: 18,
-			//
-			//				},
-			//
-			//			},
-			legend: {
-				x : '20%',
-//			    y : '25%',
-				data: [],
-				textStyle: {
-					color: '#fff'
 				},
-				top: 30,
-			},
-			xAxis: {
-				name: '时间',
-				data: [],
-				axisLine: {
-					lineStyle: {
-						color: '#fff'
-					}
-				}
-			},
-			yAxis: {
-				name: '数量',
-				//				min: 0,
-				//				max: 100,
-				//				interval: 20,
-				splitLine: {
+				legend: {
+					//				x : '20%',
+					//			    y : '25%',
+					//				width:"90%",
+					//				bottom:0,
+					//				data: [],
+					//				textStyle: {
+					//					color: '#ccc'
+					//				},
 					show: false
+
 				},
-				axisLine: {
-					lineStyle: {
-						color: '#fff'
+				xAxis: {
+					name: '时间',
+					data: [],
+					axisLine: {
+						lineStyle: {
+							color: '#ccc'
+						}
 					}
-				}
-			},
-			series: []
-		});
-		//受理区域统计
-		var shouLiArea = echarts.init(document.getElementById('shouLiArea'));
-		shouLiArea.setOption({
-			//					title: {
-			//						text: '受理区域统计',
-			//						x: 'center',
-			//						textStyle: {
-			//							color: '#fff',
-			//							fontSize: 18
-			//						}
-			//					},
-			tooltip: {
-				trigger: 'item',
-				formatter: "{a} <br/>{b} : {c} ({d}%)"
-			},
-			legend: {
-				x: 'center',
-				y: 'bottom',
-			    orient: 'horizontal',
-			     align: 'left',
-				textStyle: {
-					color: '#fff'
 				},
-				formatter: '{name}',
-				data: []
-			},
-			calculable: true,
-			series: [{
-				name: '数量统计',
-				type: 'pie',
-				radius: [50, 150],
-				center: ['45%', '40%'],
-				roseType: 'radius',
-				avoidLabelOverlap: false,
-//				label: {
-//					normal: {
-//						show: false,
-//						textStyle: {
-//							color: '#fff'
-//						}
-//					},
-//					emphasis: {
-//						show: true
-//					}
-//				},
-
-				data: [],
-				itemStyle: {
-					emphasis: {
-						shadowBlur: 10,
-						shadowOffsetX: 0,
-						shadowColor: 'rgba(0, 0, 0, 0.5)'
+				yAxis: {
+					name: '数量',
+					//				min: 0,
+					//				max: 100,
+					//				interval: 20,
+					splitLine: {
+						show: false
 					},
-					normal: {
-						label: {
-							show: true,
-							formatter: '{b} :\n {c} ({d}%)'
-//							formatter: function(val){   //让series 中的文字进行换行  
-//					                 return val.name.split(":").join("\n");}  
-//					             }
-						},
-						labelLine: {
-							show: true
+					axisLine: {
+						lineStyle: {
+							color: '#fff'
 						}
 					}
 				},
-				label: {
-                normal: {
-                    textStyle: {
-                        color: '#fff'
-                    }
-                }
-            }
-			}]
-		});
-		//受理渠道24小时统计
-		var qd_box = echarts.init(document.getElementById('qd_box'));
-		qd_box.setOption({
+				series: [],
+				color: ['#61a0a9', '#cb885d', '#c4352d', '#314452', '#a88c1e', '#2f5675', '#94c8b1', '#babc2f', '#e86617', '#afe817', '#e8178d']
+			});
+			partOne();
+
+			function partOne() {
+				var index = layer.load(1, {
+					shade: [0.5, '#030303'] //0.1透明度的白色背景
+				});
+				$('.list_one').html('');
+				$.ajax({
+					type: "get",
+					url: huayi.config.callcenter_url + "info/GetAreaCount24ByDate",
+					async: true,
+					dataType: "json",
+					data: {
+						date: $('#time1').val()
+					},
+					success: function(data) {
+						if(data.state.toLowerCase() == "success") {
+							layer.close(index);
+							var con = data.data;
+							var part1Axis = con.hours;
+							var sers = []
+							$(con.cols).each(function(i, n) {
+								var html = "";
+								var obj = {};
+								obj.name = n;
+								obj.type = "line";
+								obj.smooth = true;
+								obj.showAllSymbol = true;
+								obj.symbol = "emptyCircle";
+								obj.symbolSize = 10;
+								obj.data = con.counts[i];
+								sers.push(obj);
+								//							qunZhongArea.push(n.AreaName);
+								//							$('<tr>'+
+								//								'<td>'+ n.AreaName +'</td>'+
+								//								'<td><a>'+ n.Count +'</a></td>'+
+								//							'</tr>').appendTo('.table1 tbody');
+								html = '<li>' +
+									'<div class="tool_count">' +
+									'<span class="iconfont icon-tubiao4 color' + i + ' tbr"></span>' + con.cols[i] + '<div class="tooltips clearfix">'
+								$(con.items[i]).each(function(i, n) {
+									html += '<p>' + n.TypeName + '：' + n.Count + '</p>'
+								})
+								html += '</div>' +
+									'</div>' +
+									'</li>';
+								$('.list_one').append(html);
+							})
+							container1.setOption({
+								xAxis: {
+									data: part1Axis
+								},
+								//							legend: {
+								//								data: qunZhongArea.cols
+								//							},
+								series: sers
+							});
+
+						}
+					}
+
+				});
 
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: false,
-				label: {
-					show: true,
-					backgroundColor: '#333'
-				}
-			},
-//			formatter: function(datas) 
-//	              {
-//	              var res = datas[0].name + '<br/>', val;
-//	                  for(var i = 0, length = datas.length; i < length; i++) {
-//	                        val = (datas[i].value) + '%';
-//	                        res += datas[i].seriesName + '：' + val + '<br/>';
-//	                    }
-//	                    return res;
-//	               }
-		},
-		legend: {
-			top: 30,
-			data: [],
-			textStyle: {
-				color: '#fff'
-			}
-		},
-		xAxis: {
-//			name: '时',
-			data: [],
-			axisLine: {
-				lineStyle: {
-					color: '#ccc'
-				}
-			},
-	
-		},
-		yAxis: {
-			name: '比率',
-			splitLine: {
-				show: false
-			},
-			axisLine: {
-				lineStyle: {
-					color: '#ccc'
-				}
 			}
-		},
-		series: [{
-			name: '渠道占比',
-			type: 'bar',
-			barWidth: 18,
-			itemStyle: {
-				normal: {
-					color: new echarts.graphic.LinearGradient(
-						0, 0, 0, 1, [{
-								offset: 0,
-								color: '#14c8d4'
-							},
-							{
-								offset: 1,
-								color: '#43eec6'
-							}
-						]
-					)
-				}
-			},
-			label: {
-				normal: {
-					show: true,
-					position: 'top', //顶部数据显示位置
-					formatter: '{c}%' // 这里是数据展示的时候显示的数据
-				}
-			},
-		data: []
-	}]
 
-		});
+			$('.list').on('click', 'li', function() {
+				if($(this).find(".tooltips").css("display") == 'none') {
+					$(this).find(".tooltips").show();
+					$(this).siblings().find(".tooltips").hide();
+				} else {
+					$(this).find(".tooltips").hide()
+				}
 
-		Ajax();
+			})
+			$('.part1Btn').click(function() {
+				partOne();
+			})
 
-		function Ajax() {
-			var index = layer.load(1, {
-				shade: [0.5, '#030303'] //0.1透明度的白色背景
-			});
-			$(".txbox").html('');
-			$.ajax({
-				type: "get",
-				url: huayi.config.callcenter_url + "Info/GetSourceInfo",
-				dataType: 'json',
-				async: true,
-				data: {
-					//				token:token
-				},
-				success: function(result) {
-					if(result.state.toLowerCase() == 'success') {
-						layer.close(index);
-						var qunZhongArea = result.data.c;
-						var sers = []
-						for(var i = 0; i < qunZhongArea.counts.length; i++) {
-							var obj = {};
-							obj.name = qunZhongArea.cols[i];
-							obj.type = "line";
-							obj.smooth = true;
-							obj.showAllSymbol = true;
-							obj.symbol = "emptyCircle";
-							obj.symbolSize = 10;
-							obj.data = qunZhongArea.counts[i];
-							sers.push(obj)
+			//受理区域统计 part2
+			var shouLiArea = echarts.init(document.getElementById('shouLiArea'));
+			shouLiArea.setOption({
+//				title: {
+//					text: '投诉/举报汇总',
+//					x: 'center',
+//					textStyle: {
+//						color: '#fff',
+//						fontSize: 18
+//					},
+//				},
+				tooltip: {
+					trigger: 'item',
+					formatter: "{a} <br/>{b} : {c} ({d}%)",
+					axisPointer: {
+						crossStyle: {
+							color: '#fff'
 						}
-						container1.setOption({
-							xAxis: {
-								data: qunZhongArea.hours
-							},
-							legend: {
-								data: qunZhongArea.cols
-							},
-							series: sers
-						});
-
-						var shouLiQuDao = result.data.a;
-						var qd_legend = [];
-						var qd_sers = [];
-						var ser_data = [];
-						var qd_label = {
-							normal: {
+					}
+				},
+				legend: {
+					orient: 'vertical',
+					bottom: '20%',
+					right:'right',
+					data: [],
+					textStyle: {
+						color: '#fff'
+					}
+				},
+				series: [{
+					name: '数量统计',
+					type: 'pie',
+					radius: '45%',
+					center: ['35%', '50%'],
+					data: [],
+					itemStyle: {
+						emphasis: {
+							shadowBlur: 10,
+							shadowOffsetX: 0,
+							shadowColor: 'rgba(0, 0, 0, 0.5)'
+						},
+						normal: {
+							label: {
 								show: true,
-								position: 'inside',
-								formatter: '{c}%'
-							}
-						};
-						$(shouLiQuDao).each(function(i, n) {
-//							var qd_obj = {};
-							
-							ser_data.push(n.percent)
-							//								$('<li><div id="qd' + i + '"></div>' + n.Source + '</li>').appendTo('.txbox');
-							qd_legend.push(n.source);
-//							qd_obj.name = n.source;
-//							qd_obj.type = 'bar';
-//							qd_obj.stack = '总量';
-//							qd_obj.label = qd_label;
-//							qd_obj.data = ser_data;
-//							qd_sers.push(qd_obj);
-
-							//								$('#qd' + i).radialIndicator({
-							//									barColor: getColor(),
-							//									barWidth: 10,
-							//									initValue: n.Count,
-							//									roundCorner: true,
-							//									percentage: true
-							//								});
-						})
-						qd_box.setOption({
-							legend: {
-								data: qd_legend
-							},
-							
-							xAxis:{
-								data:qd_legend
+//								formatter: '{b} : {c} ({d}%)'
+								formatter: '{c} ({d}%)'
 							},
-							series: {
-								data:ser_data
+							labelLine: {
+								show: true
 							}
-							
-						});
-
-						var hsouLiArea = result.data.b;
-						var hsouLiArea_lengend = [];
-						var hsouLiArea_ser = [];
-						$(hsouLiArea).each(function(i, n) {
-							var hsouLiArea_obj = {};
-							if(n.AreaName.indexOf('商丘')!=-1){
-								n.AreaName="市直单位"
+						}
+					},
+					label: {
+						normal: {
+							textStyle: {
+								color: '#fff'
 							}
-							hsouLiArea_lengend.push(n.AreaName);
-							hsouLiArea_obj.value = n.Count;
-							hsouLiArea_obj.name = n.AreaName;
-							hsouLiArea_ser.push(hsouLiArea_obj);
+						}
+					}
+				}]
+			});
+			partTwo()
+			function partTwo(){
+				$('.list_two').html(''); 
+				$.ajax({
+					type:"get",
+					url:huayi.config.callcenter_url + "info/GetAreaCountByDate",
+					async:true,
+					dataType:'json',
+					data:{
+						start:$('#time2').val(),
+						end:$('#time3').val()
+					},
+					success:function(data){
+						if(data.state.toLowerCase()=='success'){
+							var con=data.data;
+							var hsouLiArea_lengend = [];
+							var hsouLiArea_ser = [];
+							$(con).each(function(i, n) {
+								var html = "";
+								var hsouLiArea_obj = {};
+								if(n.AreaName.indexOf('商丘') != -1) {
+									n.AreaName = "市直单位"
+								}
+								hsouLiArea_lengend.push(n.AreaName);
+								hsouLiArea_obj.value = n.Count;
+								hsouLiArea_obj.name = n.AreaName;
+								hsouLiArea_ser.push(hsouLiArea_obj);
+								 
+								html = '<li>' +
+									'<div class="tool_count">' +
+									'<span class="iconfont icon-tubiao3 color' + i + ' tbr"></span>' + n.AreaName + ':' + n.Count + '<div class="tooltips clearfix">'
+								$(n.Item).each(function(j, m) {
+									html += '<p>' + m.TypeName + '：' + m.Count + '</p>'
+								})
+								html += '</div>' +
+									'</div>' +
+									'</li>';
+								$('.list_two').append(html); 
+							})
+							shouLiArea.setOption({
+								legend: {
+									data: hsouLiArea_lengend,
+									selected: {
+										'当即办理': false
+									}
+								},
+								series: [{
+									data: hsouLiArea_ser
+								}]
+							});
+						}
+					}
+				});
+			}
+			$('.part2Btn').click(function() {
+				partTwo();
+			})
+			
+			//受理渠道24小时统计 part3
+			var qd_box = echarts.init(document.getElementById('qd_box'));
+			qd_box.setOption({
 
-						})
-						shouLiArea.setOption({
-							legend: {
-								data: hsouLiArea_lengend,
-								selected: {  
-			                    '当即办理': false 
-			                }  
-							},
-							series: [{
-								data: hsouLiArea_ser
-							}]
-						});
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: false,
+						label: {
+							show: true,
+							backgroundColor: '#030917'
+						}
+					},
+					//			formatter: function(datas) 
+					//	              {
+					//	              var res = datas[0].name + '<br/>', val;
+					//	                  for(var i = 0, length = datas.length; i < length; i++) {
+					//	                        val = (datas[i].value) + '%';
+					//	                        res += datas[i].seriesName + '：' + val + '<br/>';
+					//	                    }
+					//	                    return res;
+					//	               }
+				},
+				legend: {
+					top: 30,
+					data: [],
+					textStyle: {
+						color: '#fff'
 					}
-				}
+				},
+				xAxis: {
+					//			name: '时',
+					data: [],
+					axisLine: {
+						lineStyle: {
+							color: '#ccc'
+						}
+					},
+
+				},
+				yAxis: {
+					name: '比率',
+					splitLine: {
+						show: false
+					},
+					axisLine: {
+						lineStyle: {
+							color: '#ccc'
+						}
+					}
+				},
+				series: [{
+					name: '渠道占比',
+					type: 'bar',
+					barWidth: 18,
+					itemStyle: {
+						normal: {
+							color: new echarts.graphic.LinearGradient(
+								0, 0, 0, 1, [{
+										offset: 0,
+										color: '#14c8d4'
+									},
+									{
+										offset: 1,
+										color: '#43eec6'
+									}
+								]
+							)
+						}
+					},
+					label: {
+						normal: {
+							show: true,
+							position: 'top', //顶部数据显示位置
+							formatter: '{c}%' // 这里是数据展示的时候显示的数据
+						}
+					},
+					data: []
+				}]
+
 			});
-		}
+   			part_three();
+   			function part_three(){
+   				$('.list_three').html(''); 
+   				$.ajax({
+   					type:"get",
+   					url: huayi.config.callcenter_url + "info/GetSourcePercentByDate",
+					dataType: 'json',
+					async: true,
+					data:{
+						start:$('#time4').val(),
+						end:$('#time5').val()
+					},
+					success:function(data){
+						if(data.state.toLowerCase()=='success'){
+							var con=data.data;
+							var qd_legend = [];
+							var qd_sers = [];
+							var ser_data = [];
+							var qd_label = {
+								normal: {
+									show: true,
+									position: 'inside',
+									formatter: '{c}%'
+								}
+							};
+							$(con).each(function(i, n) {
+								var htmls="";
+								ser_data.push(n.Count)
+								qd_legend.push(n.Source);
+								htmls = '<li>' +
+									'<div class="tool_count">' +
+									'<span class="iconfont icon-tubiaozhuzhuangtu color11 tbr"></span>' + n.Source + ':' + n.Count + '<div class="tooltips clearfix">'
+								$(n.Item).each(function(j, m) {
+									htmls += '<p>' + m.TypeName + '：' + m.Count + '</p>'
+								})
+								htmls += '</div>' +
+									'</div>' +
+									'</li>';
+								$('.list_three').append(htmls); 
+							})
+							qd_box.setOption({
+								legend: {
+									data: qd_legend
+								},
 
-		setInterval(Ajax, huayi.config.indextime); //Ajax调用函数
+								xAxis: {
+									data: qd_legend
+								},
+								series: {
+									data: ser_data
+								}
+
+							});
+						}
+					}
+   				});
+   			}
+$('.part3Btn').click(function() {
+				part_three();
+			})
+//			function Ajax() {
+//				
+})

WebChart/js/tousujubao.js

@@ -1,14 +1,52 @@
-		//投诉举报汇总
+	
+	 function showTools(a){
+	 	if($(a).find(".tooltips").css("display") == 'none') {
+	 		$(a).find(".tooltips").show();
+		   	$(a).parents('tr').siblings().find(".tooltips").hide();
+	 	}else{
+	 		$(a).find(".tooltips").hide();
+	 	}
+		   	
+		   }
+	$(document).ready(function(){
+		
+		laydate.render({
+				elem: '#time1',
+				theme: '#00a1cb'
+			});
+		laydate.render({
+				elem: '#time2',
+				theme: '#00a1cb'
+			});
+		laydate.render({
+				elem: '#time3',
+				theme: '#00a1cb'
+			});
+		laydate.render({
+				elem: '#time4',
+				theme: '#00a1cb'
+			});
+		laydate.render({
+				elem: '#time5',
+				theme: '#00a1cb'
+			});
+	
+		laydate.render({
+				elem: '#time6',
+				theme: '#00a1cb'
+			});
+	
+	//投诉举报汇总 part1
 		var quantity = echarts.init(document.getElementById('quantity'));
 		quantity.setOption({
-			title: {
-				text: '投诉/举报汇总',
-				x: 'center',
-				textStyle: {
-					color: '#fff',
-					fontSize: 18
-				},
-			},
+//			title: {
+//				text: '投诉/举报汇总',
+//				x: 'center',
+//				textStyle: {
+//					color: '#fff',
+//					fontSize: 18
+//				},
+//			},
 			tooltip: {
 				trigger: 'item',
 				formatter: "{a} <br/>{b} : {c} ({d}%)",
@@ -55,8 +93,47 @@
             }
 			}]
 		});
+		partOne();
+		function partOne(){
+			$.ajax({
+				type:"get",
+				url:huayi.config.callcenter_url + "info/GetTypeCountByDate",
+				async:true,
+				dataType:'json',
+				data:{
+					start:$('#time1').val(),
+					end:$('#time2').val()
+				},
+				success:function(data){
+					if(data.state.toLowerCase()=='success'){
+						var con=data.data;
+						var part_1_legend =[];
+						var part_1_ser = [];
+						$(con).each(function(i, n) {
+							part_1_legend.push(n.TypeName)
+							var part_1_obj = {};
+							part_1_obj.value = n.Count;
+							part_1_obj.name = n.TypeName;
+							part_1_ser.push(part_1_obj)
+						})
+						quantity.setOption({
+							legend: {
+								data: part_1_legend
+							},
+							series: [{
+								data: part_1_ser
+							}]
+						})
+						
+					}
+				}
+			});
+		}
+		$('.part1Btn').click(function(){
+			partOne()
+		})
 		
-		//举报单位/个人统计 
+		//举报单位/个人统计 part2
 		var tsdwgr = echarts.init(document.getElementById('tsdwgr'));
 		tsdwgr.setOption({
 			tooltip: {
@@ -71,6 +148,7 @@
 			},
 			legend: {
 				data: [],
+				bottom:'bottom',
 				textStyle: {
 					color: '#ccc'
 				}
@@ -97,38 +175,129 @@
 			},
 			series: []
 		});
-		//投诉单位统计 part4
+		 	partTwo();
+			function partTwo(){
+				$.ajax({
+					type:"get",
+					url:huayi.config.callcenter_url + "info/GetTypeCountMonthByDate",
+					async:true,
+					dataType:'json',
+					success:function(data){
+						if(data.state.toLowerCase()=='success'){
+							var con=data.data;
+							var counts = con.counts;
+							var sers = [];
+							$(counts).each(function(i, n) {
+								var obj = {};
+								obj.name = con.cols[i];
+								obj.type = "line";
+								obj.smooth = true;
+								obj.showAllSymbol = true;
+								obj.symbol = "emptyCircle";
+								obj.symbolSize = 10;
+								obj.data = n;
+								sers.push(obj)
+							});
+							tsdwgr.setOption({
+								xAxis: {
+									data: con.months
+								},
+								legend: {
+									data: con.cols
+								},
+								series: sers
+							});
+							
+							
+							
+						}
+					}
+				});
+		}
+		//投诉关键字 part3
+		partThree()
+			function partThree(){
+				$('.table1 tbody').html('');
+				$.ajax({
+					type:"get",
+					url:huayi.config.callcenter_url + "info/GetKeyCountByDate",
+					async:true,
+					dataType:'json',
+					data:{
+						start:$('#time3').val(),
+						end:$('#time4').val()
+					},
+					success:function(data){
+						if(data.state.toLowerCase()=='success'){
+							var con=data.data;
+							$(con).each(function(i,n){
+								if(i<10){
+									
+								
+							var html="";
+//							$('<tr>'+
+//							'<td>1</td>'+
+//							'<td>' + n.AreaName + '</td>'+
+//							'<td>' + n.Count + '</td>'+
+//						'</tr>').appendTo('.table1 tbody');
+							html = '<tr>'+
+									'<td>'+ parseInt(i+1)+'</td>'+
+								'<td>' +
+									'<div class="tool_count" onClick="showTools(this)">' + n.TypeName + '<div class="tooltips clearfix">'+
+									'<div class="toolsTitle">'+ n.TypeName +'</div>'
+								$(n.Item).each(function(j, m) {
+									html += '<p>' + m.TypeName + '：' + m.Count + '</p>'
+								})
+								html += '</div>' +
+									'</div>' +
+									'</td>' +
+									'<td>' + n.Count + '</td>' +
+									'</tr>';
+								$('.table1 tbody').append(html);
+								}
+						})
+						}
+					}
+				});
+		}
+		  
+			$('.part3Btn').click(function() {
+				partThree();
+			})
+		
+		//承办单位统计 part4
 		var tsdw_dw = echarts.init(document.getElementById('tsdw_dw'));
 		tsdw_dw.setOption({
-			title: {
-				text: '投诉单位统计',
-				x: 'center',
-				textStyle: {
-					color: '#fff',
-					fontSize: 18
-				}
-			},
+//			title: {
+//				text: '投诉单位统计',
+//				x: 'center',
+//				textStyle: {
+//					color: '#fff',
+//					fontSize: 18
+//				}
+//			},
 		  tooltip : {
 		        trigger: 'item',
 		        formatter: "{a} <br/>{b} : {c} ({d}%)"
 		    },
 			legend: {
-				type:"scroll",
-				orient: 'vertical',
-				right: 10,
-		        top: 20,
-		        bottom: 20,
+//				show: true,
+//				type:true,
+//				orient: 'vertical',
+				right:'15%',
+				top:'10%',
+   				orient: 'vertical',
 				data: [],
 				textStyle: {
-					color: '#fff'
+					color: '#ccc'
 				}
 			},
 			series: [{
 				name: '部门',
 				type: 'pie',
-				left: 0,
+//				left: 0,
 				radius: ['40%', '70%'],
-				center: ['50%', '58%'],
+				center: ['20%', '50%'],
 				avoidLabelOverlap: false,
 				label: {
 					normal: {
@@ -138,8 +307,8 @@
 					emphasis: {
 						show: true,
 						textStyle: {
-							fontSize: '30',
-							fontWeight: 'bold'
+							fontSize: '18',
+//							fontWeight: 'bold'
 						}
 					}
 				},
@@ -151,117 +320,143 @@
 				data: [],
 				 
 			}]
-		});		Ajax();
-		function Ajax(){
-				 var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
-							});
-			$('.tsjb-bm ul').html('');
+		});		
+//		
+		partFour();
+			function partFour(){
+				$('.part4_list').html('');
 				$.ajax({
 					type: "get",
-					url: huayi.config.callcenter_url + "Info/GetTypeInfo",
+					url: huayi.config.callcenter_url + "info/GetDeptCountByDate",
 					async: true,
 					dataType: 'json',
 					data:{
+						start:$('#time5').val(),
+						end:$('#time6').val()
 					},
 				
-					success: function(result) {
-						if(result.state.toLowerCase() == 'success') {
-								layer.close(index);
-							//举报单位/个人统计 part2
-							var juBao = result.data.a;
-							var counts = juBao.counts;
-							var sers = [];
-							$(counts).each(function(i, n) {
-								console.log(n[i]);
-								var obj = {};
-								obj.name = juBao.cols[i];
-								obj.type = "line";
-								obj.smooth = true;
-								obj.showAllSymbol = true;
-								obj.symbol = "emptyCircle";
-								obj.symbolSize = 10;
-								obj.data = n;
-								sers.push(obj)
-							});
-							tsdwgr.setOption({
-								xAxis: {
-									data: juBao.months
-								},
-								legend: {
-									data: juBao.cols
-								},
-								series: sers
-							});
-							//part 1
-							var part1 = result.data.b;
-							var part_1_legend = part1.cols;
-							var part_1_ser = [];
-							$(part1.cols).each(function(i, n) {
-//								part_1_legend.push(n.teptname);
-								var part_1_obj = {};
-								part_1_obj.value = part1.counts[i];
-								part_1_obj.name = n;
-								part_1_ser.push(part_1_obj)
-							})
-							quantity.setOption({
-								legend: {
-									data: part_1_legend
-								},
-								series: [{
-									data: part_1_ser
-								}]
-							})
-							//part 3
-							var part3 = result.data.c;
-							var colorArr = [];
-							$(part3).each(function(i, n) {
-								if(i<10){
-									$('<li class="clearfix">' +
-									'<div class="tsgjz-left">' +
-									'<div class="progress" title="' + n.Count+ '个">' +
-									'<div class="progress-bar bar' + i + '" title="' + n.Count + '" style="width: ' + n.Count + 'px;background:' + getColor() + '">' +
-									'</div>' +
-									'</div>' +
-									'</div>' +
-									'<div class="tsgjz-right">' + n.TypeName + '<span class="count' + i + '" style="color:' + $('.bar' + i).css("background-color") + '">' + n.Count + '</span></div>' +
-									'</li>').appendTo('.tsjb-bm ul');
-								colorArr.push($('.bar' + i).css("background-color"));
-								}
-								
-							})
-		
-							$(colorArr).each(function(i, n) {
-								$('.count' + i).css("color", n)
-		
-							})
-		
-							//part 4
-							var part4 = result.data.d;
+					success: function(data) {
+						if(data.state.toLowerCase()=='success'){
+							var con=data.data;
 							var part_4_legend = [];
 							var part_4_ser = [];
-							$(part4).each(function(i, n) {
-								part_4_legend.push(n.deptname);
+							$(con).each(function(i, n) {
+								var html="";
+								part_4_legend.push(n.AreaName);
 								var part_4_obj = {};
-								part_4_obj.value = n.count;
-								part_4_obj.name = n.deptname;
-								part_4_ser.push(part_4_obj)
+								part_4_obj.value = n.Count;
+								part_4_obj.name = n.AreaName;
+								part_4_ser.push(part_4_obj);
+								htmls = '<li>' +
+								'<span class="iconfont icon-tubiao2 color'+ i+'"></span>'+
+								'<div class="depName" title="'+ n.AreaName +'">'+ n.AreaName + '</div>'+
+								'<div class="tool_count"><div class="tooltips clearfix">'+
+								'<div class="toolsTitle">'+ n.AreaName +':'+ n.Count +'</div>'
+								
+								$(n.Item).each(function(j, m) {
+									htmls += '<p>' + m.TypeName + '：' + m.Count + '</p>'
+								})
+								htmls += '</div>' +
+									'</div>' +
+									'</li>';
+								$('.part4_list').append(htmls); 
 							})
 							tsdw_dw.setOption({
-		//						legend: {
-		//							data: part_4_legend
-		//						},
+								legend: {
+									data: part_4_legend
+								},
 								series: [{
 									data: part_4_ser
 								}]
 							})
-							
-							
-							
+//							
+							}
 						}
-		
-					}
 				})
 		
+			 }
+			
+	$('.part4Btn').click(function(){
+		partFour();
+	})
+		$('.part4_list').on('click', 'li', function() {
+				if($(this).find(".tooltips").css("display") == 'none') {
+					$(this).find(".tooltips").show();
+					$(this).siblings().find(".tooltips").hide();
+				} else {
+					$(this).find(".tooltips").hide()
+				}
+
+			})
+	
+	function Ajax(){
+//				 var index = layer.load(1, { shade: [0.5,'#030303'] //0.1透明度的白色背景
+//							});
+//			$('.tsjb-bm ul').html('');
+//				$.ajax({
+//					type: "get",
+//					url: huayi.config.callcenter_url + "Info/GetTypeInfo",
+//					async: true,
+//					dataType: 'json',
+//					data:{
+//					},
+//				
+//					success: function(result) {
+//						if(result.state.toLowerCase() == 'success') {
+//								layer.close(index);
+//						
+//							//part 3
+//							var part3 = result.data.c;
+//							var colorArr = [];
+//							$(part3).each(function(i, n) {
+//								if(i<10){
+//									$('<li class="clearfix">' +
+//									'<div class="tsgjz-left">' +
+//									'<div class="progress" title="' + n.Count+ '个">' +
+//									'<div class="progress-bar bar' + i + '" title="' + n.Count + '" style="width: ' + n.Count + 'px;background:' + getColor() + '">' +
+//									'</div>' +
+//									'</div>' +
+//									'</div>' +
+//									'<div class="tsgjz-right">' + n.TypeName + '<span class="count' + i + '" style="color:' + $('.bar' + i).css("background-color") + '">' + n.Count + '</span></div>' +
+//									'</li>').appendTo('.tsjb-bm ul');
+//								colorArr.push($('.bar' + i).css("background-color"));
+//								}
+//								
+//							})
+		
+//							$(colorArr).each(function(i, n) {
+//								$('.count' + i).css("color", n)
+//		
+//							})
+//		
+							//part 4
+//							var part4 = result.data.d;
+//							var part_4_legend = [];
+//							var part_4_ser = [];
+//							$(part4).each(function(i, n) {
+//								part_4_legend.push(n.deptname);
+//								var part_4_obj = {};
+//								part_4_obj.value = n.count;
+//								part_4_obj.name = n.deptname;
+//								part_4_ser.push(part_4_obj)
+//							})
+//							tsdw_dw.setOption({
+//		//						legend: {
+//		//							data: part_4_legend
+//		//						},
+//								series: [{
+//									data: part_4_ser
+//								}]
+//							})
+//							
+//							
+							
+//						}
+//		
+//					}
+//				})
+		
 		}
 			
-		setInterval(Ajax, huayi.config.indextime);//Ajax调用函数
+		setInterval(Ajax, huayi.config.indextime);//Ajax调用函数
+		})

WebChart/js/zhongxin.js

@@ -1,4 +1,148 @@
-//类型工单统计
+$(document).ready(function(){
+	laydate.render({
+		elem: '#time1',
+		theme: '#00a1cb'
+	});
+	laydate.render({
+		elem: '#time2',
+		theme: '#00a1cb'
+	});
+	laydate.render({
+		elem: '#time3',
+		theme: '#00a1cb'
+	});
+
+	laydate.render({
+		elem: '#time4',
+		theme: '#00a1cb'
+	});
+	laydate.render({
+		elem: '#time5',
+		theme: '#00a1cb'
+	});
+	//part1
+	partOne();
+  function partOne(){
+  	$('.gdmap-l ul').html('');
+   	   $.ajax({
+   	   	type:"get",
+   	   	url:huayi.config.callcenter_url + "info/GetCenterTypeCountByDate ",
+   	   	async:true,
+   	   	dataType:'json',
+   	   	success:function(data){
+   	   		if(data.state.toLowerCase()=='success'){
+   	   			var con=data.data;
+   	   			 $(con).each(function(i,n){
+			 	$('<li>'+
+						'<div>'+n.TypeName +'</div>'+
+						'<span>'+n.Count +'</span>'+
+					'</li>').appendTo('.gdmap-l ul');
+			 	
+			 })
+   	   		}
+   	   	}
+   	   });
+   }
+	 partOne_right()
+	 function partOne_right(){
+//	 	$('.gdmap-r ul').html('');
+   	   $.ajax({
+   	   	type:"get",
+   	   	url:huayi.config.callcenter_url + "info/GetAreaCountByDate",
+   	   	async:true,
+   	   	dataType:'json',
+   	   	data:{
+   	   		start:$('#time0').val(),
+   	   		end:$('#time1').val(),
+   	   	},
+   	   	success:function(data){
+   	   		if(data.state.toLowerCase()=='success'){
+   	   			var con=data.data;
+   	   		var color=["z","l","a","t","y","g","w","b","1","2","3"];
+			var dindex=Math.floor(Math.random()*10+1);
+			$(con).each(function(i,n){
+				var dindex=Math.floor(Math.random()*10+1);
+				if(n.AreaName.indexOf('商丘')!=-1){
+					$('<li>'+
+					'<i class="xe-'+ color[dindex] +'"></i>'+
+//					'<span>'+n.AreaName+'</span>'+
+					'<span>市直单位</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('虞城')!=-1){
+					$('<li>'+
+					'<i class="yuc"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('民权')!=-1){
+					$('<li>'+
+					'<i class="mq"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('睢县')!=-1){
+					$('<li>'+
+					'<i class="sx"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('宁陵')!=-1){
+					$('<li>'+
+					'<i class="nl"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('梁园')!=-1){
+					$('<li>'+
+					'<i class="lyq"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('睢阳')!=-1){
+					$('<li>'+
+					'<i class="syq"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('柘城')!=-1){
+					$('<li>'+
+					'<i class="zc"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('夏邑')!=-1){
+					$('<li>'+
+					'<i class="xy"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('永城')!=-1){
+					$('<li>'+
+					'<i class="yongc"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('城乡一体化')!=-1){
+					$('<li>'+
+					'<i class="xe-'+ color[dindex] +'"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}if(n.AreaName.indexOf('当即')!=-1){
+					$('<li>'+
+					'<i class="xe-'+ color[dindex] +'"></i>'+
+					'<span>'+n.AreaName+'</span>'+
+					'<span>'+ n.Count+'</span>'+
+					'</li>').appendTo('.gdmap-r ul')
+				}
+			})
+   	   		}
+   	   	}
+   	   });
+	 	
+	 }
+//类型工单统计 part2
 
 var slhw = echarts.init(document.getElementById('slhw'));
 slhw.setOption({
@@ -57,8 +201,54 @@ slhw.setOption({
 	
 	
 });
-
-//接通率报表
+  partTwo();
+  function partTwo(){
+   	   $.ajax({
+   	   	type:"get",
+   	   	url:huayi.config.callcenter_url + "info/GetTypeCountByDate",
+   	   	async:true,
+   	   	dataType:'json',
+   	   	data:{
+   	   		start:$('#time2').val(),
+   	   		end:$('#time3').val()
+   	   	},
+   	   	success:function(data){
+   	   		if(data.state.toLowerCase()=='success'){
+   	   			var con=data.data;
+				var part2_legend = [];
+				var part2_ser = [];
+   	   			$(con).each(function(i,n){
+   	   				var obj={};
+   	   				if(i==0){
+   	   					obj.value=n.Count;
+					obj.name=n.TypeName;
+					obj.selected=true;
+   	   				}else{
+   	   					obj.value=n.Count;
+						obj.name=n.TypeName;
+   	   				}
+   	   				
+   	   				
+					part2_legend.push(n.TypeName);
+					part2_ser.push(obj);
+   	   			})
+   	   			slhw.setOption({
+						legend: {
+							data: part2_legend
+						},
+						series: [{
+							data: part2_ser
+						}]
+			})
+			
+   	   		}
+   	   	}
+   	   });
+   }
+  $('.part2Btn').click(function(){
+  	partTwo();
+  })
+//接通率报表part3
 var jtv = echarts.init(document.getElementById('jtv_num'));
 jtv.setOption({
 	title: {
@@ -90,7 +280,8 @@ jtv.setOption({
                }
 	},
 	legend: {
-		top: 30,
+//		top: 30,
+bottom:'bottom',
 		data: ['接通率'],
 		textStyle: {
 			color: '#fff'
@@ -140,7 +331,41 @@ jtv.setOption({
 	}]
 
 });
-//通话时长
+partThree();
+function partThree(){
+   	   $.ajax({
+   	   	type:"get",
+   	   	url:huayi.config.callcenter_url + "info/GetTelRate24ByDate",
+   	   	async:true,
+   	   	dataType:'json',
+   	   	data:{
+   	   		date:$('#time4').val()
+   	   	},
+   	   	success:function(data){
+   	   		if(data.state.toLowerCase()=='success'){
+   	   			var con=data.data;
+// 	   			var part3=data.data.b;
+				jtv.setOption({
+						xAxis: {
+							data:con.hours
+						},
+						series: [{
+							data:con.rates
+						}]
+						
+				})
+			
+   	   		}
+   	   	}
+   	   });
+   }
+  $('.part3Btn').click(function(){
+  	partThree();
+  })
+
+
+
+//通话时长part4
 var th_nums = echarts.init(document.getElementById('th_nums'));
 th_nums.setOption({
 	title: {
@@ -164,8 +389,8 @@ th_nums.setOption({
 	
 	},
 	legend: {
-		top: 30,
-		data: ['平均通话时长统计'],
+		bottom:'bottom',
+		data: ['平均通话时长'],
 		textStyle: {
 			color: '#fff'
 		}
@@ -201,7 +426,43 @@ th_nums.setOption({
 		data: []
 	}]
 });
-Ajax();
+partFour();
+function partFour(){
+   	   $.ajax({
+   	   	type:"get",
+   	   	url:huayi.config.callcenter_url + "info/GetAvgTelTime24ByDate",
+   	   	async:true,
+   	   	dataType:'json',
+   	   	data:{
+   	   		date:$('#time5').val()
+   	   	},
+   	   	success:function(data){
+   	   		if(data.state.toLowerCase()=='success'){
+   	   			var con=data.data;
+				th_nums.setOption({
+						xAxis: {
+							data:con.hours
+						},
+						series: [{
+							data:con.avgtimes
+						}]
+						
+				})
+			
+				
+			
+   	   		}
+   	   	}
+   	   });
+   }
+  $('.part4Btn').click(function(){
+  	partFour();
+  })
+
+
+
+
+//Ajax();
 function Ajax(){
 	$('.gdmap-r ul').html('');
 	$('.gdmap-l ul').html('');
@@ -298,14 +559,14 @@ function Ajax(){
 					'</li>').appendTo('.gdmap-r ul')
 				}
 			})
-			 var part1_left=data.data.e;
-			 $(part1_left).each(function(i,n){
-			 	$('<li>'+
-						'<div>'+n.TypeName +'</div>'+
-						'<span>'+n.Count +'</span>'+
-					'</li>').appendTo('.gdmap-l ul');
-			 	
-			 })
+//			 var part1_left=data.data.e;
+//			 $(part1_left).each(function(i,n){
+//			 	$('<li>'+
+//						'<div>'+n.TypeName +'</div>'+
+//						'<span>'+n.Count +'</span>'+
+//					'</li>').appendTo('.gdmap-l ul');
+//			 	
+//			 })
 			
 			
 			var part2=data.data.a;
@@ -324,50 +585,43 @@ function Ajax(){
 				}
 				part2_legend.push(n);
 				part2_ser.push(obj);
-//				$('<li>'+
-//						'<div>'+n +'</div>'+
-//						'<span>'+part2.counts[i] +'</span>'+
-//					'</li>').appendTo('.gdmap-l ul');
-//					order_total+=part2.counts[i];
-			})
-//			$('<li style="margin-top:0;">'+
-//						'<div>总计</div>'+
-//						'<span>'+order_total+'</span>'+
-//					'</li>').prependTo('.gdmap-l ul');
-			slhw.setOption({
-						legend: {
-							data: part2_legend
-						},
-						series: [{
-							data: part2_ser
-						}]
 			})
-			
-			var part3=data.data.b;
-				jtv.setOption({
-						xAxis: {
-							data:part3.hours
-						},
-						series: [{
-							data:part3.rates
-						}]
-						
-				})
-			var part4=data.data.c;
-				th_nums.setOption({
-						xAxis: {
-							data:part4.hours
-						},
-						series: [{
-							data:part4.avgtimes
-						}]
-						
-				})
-			
+
+//			slhw.setOption({
+//						legend: {
+//							data: part2_legend
+//						},
+//						series: [{
+//							data: part2_ser
+//						}]
+//			})
+//			
+//			var part3=data.data.b;
+//				jtv.setOption({
+//						xAxis: {
+//							data:part3.hours
+//						},
+//						series: [{
+//							data:part3.rates
+//						}]
+//						
+//				})
+//			var part4=data.data.c;
+//				th_nums.setOption({
+//						xAxis: {
+//							data:part4.hours
+//						},
+//						series: [{
+//							data:part4.avgtimes
+//						}]
+//						
+//				})
+//			
 		}
 
 	}
 });
 }
 
-setInterval(Ajax, huayi.config.indextime);//Ajax调用函数
+//setInterval(Ajax, huayi.config.indextime);//Ajax调用函数
+})

WebChart/touSuJuBao.html

@@ -1,168 +1,160 @@
 <!DOCTYPE html>
 <html>
-<head lang="en">
-    <meta charset="UTF-8">
-    <title></title>
-     <script src="Script/Common/huayi.load.js"></script>
-    <script src="Script/Common/huayi.config.js"></script>
-    <link rel="stylesheet" href="css/bootstrap.min.css" />
-    <link rel="stylesheet" href="css/index.css"/>
-</head>
-<body>
-<div class="navcon ">
-	<div class="navbox clearfix">
-	<p><img src="img/sqLogo.png" class="logo" alt="" />商丘12345数据展示</p>
-    <ul class="navl clearfix">
-        <li><a href="index.html">来源渠道情况</a></li>
-        <li><a  href="jieDanBuMen.html">接单部门情况</a></li>
-        <li><a class="active" href="touSuJuBao.html">投诉举报情况</a></li>
-        <li><a href="huaWuLiang.html">话务数量情况</a></li>
-        <li><a href="zhongXinDaShuJu.html">中心大数据</a></li>
-        <!--<li><a href="fuWuZhiShi.html">服务知识</a></li>-->
-    </ul>
-   </div>
-</div>
-<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 class="biao-title">举报单位统计</div>
-			<div id="tsdwgr" style="width: 100%;height: 400px;"></div>
-		</div>
-	</div>
-	<div class="tsjb-bot clearfix">
-	
 
-<div class="tsjb-bm" style="float: left;">
-	<div class="biao-title">投诉关键字统计</div>
-	<ul>
-		<!--<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>
+	<head lang="en">
+		<meta charset="UTF-8">
+		<title></title>
+		<script src="Script/Common/huayi.load.js"></script>
+		<script src="Script/Common/huayi.config.js"></script>
+		<link rel="stylesheet" href="css/bootstrap.min.css" />
+		<link rel="stylesheet" href="css/index.css" />
+		<style>
+			.table1 thead tr td {
+				background: #16385e;
+				color: #aba5a5;
+				/*text-align: center;*/
+			}
+			.table1{
+				margin-bottom: 0;
+			}
+			
+			.table1 tbody tr td {
+				border: 1px solid #151924;
+				color: #aba5a5;
+				padding: 7px!important;
+				/*text-align: center;*/
+			}
+			
+			.tool_count {
+				cursor: pointer;
+			}
+			.part4_list{
+				 border: 1px solid #151924;
+				 border-top: 0;
+			}
+			.part4_list li{
+				float: left;
+				width: 10%;
+				text-align: center;
+				color: #ccc;
+				cursor: pointer;
+				    border-top: 1px solid #151924;
+			}
+			.depName{
+				width: 100px;
+			    overflow: hidden;
+			    white-space: nowrap;
+			    text-overflow: ellipsis;
+			    text-align: center;
+			    margin: 0 auto;
+			}
+		</style>
+	</head>
 
-<div class="tsjb-bl">
-	<div id="tsdw_dw" style="width: 100%;height: 500px;"></div>
-</div>
-<!--
-<div class="tsjb-br" style="float: right;">
-			<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>
+	<body>
+		<div class="navcon ">
+			<div class="navbox clearfix">
+				<p><img src="img/sqLogo.png" class="logo" alt="" />商丘12345数据展示</p>
+				<ul class="navl clearfix">
+					<li>
+						<a href="index.html">来源渠道情况</a>
+					</li>
+					<li>
+						<a href="jieDanBuMen.html">接单部门情况</a>
+					</li>
+					<li>
+						<a class="active" href="touSuJuBao.html">投诉举报情况</a>
+					</li>
+					<li>
+						<a href="huaWuLiang.html">话务数量情况</a>
+					</li>
+					<li>
+						<a href="zhongXinDaShuJu.html">中心大数据</a>
+					</li>
+					<!--<li><a href="fuWuZhiShi.html">服务知识</a></li>-->
+				</ul>
 			</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 class="tousujb">
+			<div class="tsjb-top clearfix">
+				<div class="tsjb-tl">
+					<div class="biao-title">
+						<div class="biao-title-l">
+							投诉/举报汇总
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time1" />至<input type="text" id="time2" />
+							<button class="btns part1Btn">搜索</button>
+						</div>
+
 					</div>
+					<div id="quantity" style="width: 100%;height: 400px;"></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 class="tsjb-tr">
+					<div class="biao-title">举报单位统计</div>
+					<div id="tsdwgr" style="width: 100%;height: 400px;"></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 class="tsjb-trr">
+					<div class="biao-title">
+						<div class="biao-title-l">
+							投诉关键字统计
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time3" />至<input type="text" id="time4" />
+							<button class="btns part3Btn">搜索</button>
+						</div>
 					</div>
+					<table class="table1 table">
+						<thead>
+							<tr>
+								<td>排名</td>
+								<td>关键字</td>
+								<td>投诉量</td>
+							</tr>
+						</thead>
+						<tbody>
+
+						</tbody>
+					</table>
 				</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 class="tsjb-bot clearfix">
+				<div class="tsjb-bl">
+					<div class="biao-title">
+						<div class="biao-title-l">
+							承办单位统计
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time5" />至<input type="text" id="time6" />
+							<button class="btns part4Btn">搜索</button>
+						</div>
 					</div>
+					<div id="tsdw_dw" style="width: 100%;height: 400px;"></div>
+				  <ul class="part4_list clearfix">
+				  	<li>
+				  		<span class="iconfont icon-tubiao2 color1"></span>
+				  		<div class="depName">畜牧局</div>
+				  		<div class="tool_count">
+				  		<!--<div class="tooltips clearfix"><div class="toolsTitle">咨询建议</div><p>咨询：0</p><p>求助：0</p><p>投诉：0</p><p>建议：0</p><p>表扬：0</p><p>其他：0</p></div>-->
+				  		</div>
+				  	</li>
+				  </ul>
+				
+				
 				</div>
 			</div>
-			<div class="tsgjz-right">护照办理<span class="bohe">1785</span></div>
-		</li>
-	</ul>
-			
-</div>-->
 
-</div>
-	
-</div>
+		</div>
 
-</body>
-<script src="js/jquery.min.js"></script>
-<script src="js/echarts.min.js"></script>
-<script src="js/highcharts.js"></script>
-<script src="js/gray.js"></script>
-<script src="js/radialIndicator.js"></script>
-<script src="js/coment.js"></script>
-<script src="js/tousujubao.js"></script>
-</html>
+	</body>
+	<script src="js/jquery.min.js"></script>
+	<script src="js/echarts.min.js"></script>
+	<script src="js/highcharts.js"></script>
+	<script src="js/gray.js"></script>
+	<script src="js/radialIndicator.js"></script>
+	<script src="js/coment.js"></script>
+	<script src="js/tousujubao.js"></script>
 
+</html>

WebChart/zhongXinDaShuJu.html

@@ -40,35 +40,19 @@
 		<div class="containers">
 			<div class="mb clearfix">
 				<div style="width: 60%;">
-					<ul class="gd-tbox clearfix">
-						<li class="gd-tit">工单类型各数量</li>
-						<!--<li>系统电话量：<span>365</span></li>
-						<li>工单类型量：<span>300</span></li>-->
-					</ul>
+					<div class="biao-title">
+						<div class="biao-title-l">
+							工单类型各数量
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time0" />至<input type="text" id="time1" />
+							<button class="btns part1Btn">搜索</button>
+						</div>
+					</div>
 					<div class="gdmap clearfix">
 
 						<div class="gdmap-l">
 							<ul>
-								<!--<li>
-									<div>查询</div>
-									<span>100</span>
-								</li>
-								<li>
-									<div>投诉</div>
-									<span>200</span>
-								</li>
-								<li>
-									<div>举报</div>
-									<span>300</span>
-								</li>
-								<li>
-									<div>建议</div>
-									<span>400</span>
-								</li>
-								<li>
-									<div>通话</div>
-									<span>500</span>
-								</li>-->
 							</ul>
 						</div>
 						<div class="gdmap-m">
@@ -82,6 +66,16 @@
 					</div>
 				</div>
 				<div style="width: 40%;">
+					<div class="biao-title">
+
+						<div class="biao-title-l">
+							工单类型统计
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time2" />至<input type="text" id="time3" />
+							<button class="btns part2Btn">搜索</button>
+						</div>
+					</div>
 					<div id="slhw" style="width:100%;height: 400px;"></div>
 					<!--<div class="slqm">
 						<div class="sl_title">工单受理排名</div>
@@ -206,9 +200,29 @@
 					<div id="th_num" style="height: 400px;"></div>
 				</div>-->
 				<div>
+					<div class="biao-title">
+
+						<div class="biao-title-l">
+							接通率统计
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time4" />
+							<button class="btns part3Btn">搜索</button>
+						</div>
+					</div>
 					<div id="jtv_num" style="height: 400px;"></div>
 				</div>
 				<div>
+					<div class="biao-title">
+
+						<div class="biao-title-l">
+							通话时长统计
+						</div>
+						<div class="biao-title-r">
+							<input type="text" id="time5" />
+							<button class="btns part4Btn">搜索</button>
+						</div>
+					</div>
 					<div id="th_nums" style="height: 400px;"></div>
 				</div>
 			</div>

WebUI/CallCenterWeb.UI/SystemManager/caoZuoRiZhi.html

@@ -183,7 +183,6 @@
 			//*****************删除功能结束****************************
 
 			initTable(token);
-
 			function initTable(token) {
 				//先销毁表格
 				table.bootstrapTable('destroy');