大屏

WebChart/index.html

@@ -14,41 +14,42 @@
 		<link rel="stylesheet" type="text/css" href="css/main.css" />
 		<title>大数据首页</title>
 		<style>
-
 			.wrap {
-			margin: 0 auto;
-			height: 90%!important;
-			width: 100%!important;
-		}
-		
-		.smallbox{
-			width: 98%;
-			float: right;
-			display: flex;
-		    flex-wrap: wrap;
-			margin-top: 20px;
-			margin-right: 20px;
-			justify-content:space-between;
-		}
-		.smallimg{
-			/* border: 2px solid #00E9FF; */
-			border-radius: 20px;
-			margin-bottom: 5px;
-		  width: 24%;
-		  background: url(./img/slide_bg1.png) no-repeat;
-		  height: 420px;
-		
-		  background-size: 106% 109%;
-		
-		}
-		.activeBox{
-			border: 2px solid #3c920c;
-		}
-		.imm{
-			width: 100%;
-			height: 400px;
-		}
-	
+				margin: 0 auto;
+				height: 90% !important;
+				width: 100% !important;
+			}
+
+			.smallbox {
+				width: 98%;
+				float: right;
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 20px;
+				margin-right: 20px;
+				justify-content: space-between;
+			}
+
+			.smallimg {
+				/* border: 2px solid #00E9FF; */
+				border-radius: 20px;
+				margin-bottom: 5px;
+				width: 24%;
+				background: url(./img/slide_bg1.png) no-repeat;
+				height: 420px;
+
+				background-size: 106% 109%;
+
+			}
+
+			.activeBox {
+				border: 2px solid #3c920c;
+			}
+
+			.imm {
+				width: 100%;
+				height: 400px;
+			}
 		</style>
 	</head>
 
@@ -164,7 +165,7 @@
 							<div class="quanbgBox map_YCX" index="虞城县"></div>
 							<div class="quanbgBox map_YCS" index="永城市"></div>
 						</div>
-       
+
 
 					</div>
 
@@ -179,7 +180,7 @@
 			<!-- 多媒体全渠道来源统计 -->
 			<div class="smallimg orderSource">
 				<p class="top_title" style="margin-left: 180px;padding-top: 6px;">多媒体全渠道来源统计</p>
-		
+
 				<div class="source_left slide_left sl_more">
 					<ul>
 						<li class="clearfix">
@@ -194,7 +195,7 @@
 						<li class="clearfix">
 							<!-- <div class="line_wrap line four_line fourLeft_line"></div> -->
 						</li>
-						
+
 					</ul>
 				</div>
 				<div class="source_middle slide_middle">
@@ -208,7 +209,7 @@
 						</li>
 						<li class="clearfix">
 							<!-- <div class="line_wrap line two_line twoRight_line"></div> -->
-				
+
 						</li>
 						<li class="clearfix">
 							<!-- <div class="line_wrap line three_line threeRight_line"></div> -->
@@ -217,7 +218,7 @@
 							<!-- <div class="line_wrap line four_line fourRight_line">
 							</div> -->
 						</li>
-						
+
 					</ul>
 				</div>
 			</div>
@@ -377,152 +378,152 @@
 							</div>
 						</div>
 					</div>
-			
-			</div>0
-		</div>
-		<!-- 渠道来源 -->
-		<div class="smallimg">
-			<p class="top_title" style="margin-left: 215px;padding-top: 6px;">渠道来源</p>
-		<div  id="part3" style=" width: 90%;height: 320px;margin: 5px 45px;"></div>
-		</div>
-		<!-- 接单部门 -->
-		<div class="smallimg">
-			<p class="top_title" style="margin-left: 215px;padding-top: 6px;">接单部门</p>
-	<div class="table_box" style="width: 85%;height: 270px; margin: 20px 48px;">
-		<table class="table">
-			<colgroup>
-	            <col style="width: 79px;"/>
-	            <col/>
-		    </colgroup>
-		    <thead class="thead_six">
-				<tr>
-					<td>部门名称</td>
-					<td>咨询</td>
-					<td>求助</td>
-					<td>建议</td>
-					<td>表扬</td>
-					<td>其他</td>
-					<td>合计</td>
-					<td>占比</td>
-				</tr>
-			</thead>
-		</table>
-		<div id="scroll_table"  style="width: 100%;height: 270px; overflow: hidden;">
-			<table class="table tabsix" style="width: 100%;">
-			<colgroup>
-		                <col style="width: 79px;"/>
-		                <col/>
-		    </colgroup>
-			<tbody>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				<tr>
-					<td>市公安局</td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color1">20</span></td>
-					<td><span class="text_color2">120</span></td>
-					<td><span class="text_color3">20%</span></td>
-				</tr>
-				
-			</tbody>
-			
-		</table>
-		
-		</div>
-		
-	</div>
-		</div>
-		<!-- 话务数量 -->
-		<div class="smallimg">
-			<p class="top_title" style="margin-left: 215px;padding-top: 6px;">话务数量</p>
-		<div id="todyPhoneCount" style="width: 90%;height: 330px;margin: 15px 35px;"></div>
-		</div>
-		<!--  投诉举报  -->
-		<div class="smallimg">
+
+				</div>0
+			</div>
+			<!-- 渠道来源 -->
+			<div class="smallimg">
+				<p class="top_title" style="margin-left: 215px;padding-top: 6px;">渠道来源</p>
+				<div id="part3" style=" width: 90%;height: 320px;margin: 5px 45px;"></div>
+			</div>
+			<!-- 接单部门 -->
+			<div class="smallimg">
+				<p class="top_title" style="margin-left: 215px;padding-top: 6px;">接单部门</p>
+				<div class="table_box" style="width: 85%;height: 270px; margin: 20px 48px;">
+					<table class="table">
+						<colgroup>
+							<col style="width: 79px;" />
+							<col />
+						</colgroup>
+						<thead class="thead_six">
+							<tr>
+								<td>部门名称</td>
+								<td>咨询</td>
+								<td>求助</td>
+								<td>建议</td>
+								<td>表扬</td>
+								<td>其他</td>
+								<td>合计</td>
+								<td>占比</td>
+							</tr>
+						</thead>
+					</table>
+					<div id="scroll_table" style="width: 100%;height: 270px; overflow: hidden;">
+						<table class="table tabsix" style="width: 100%;">
+							<colgroup>
+								<col style="width: 79px;" />
+								<col />
+							</colgroup>
+							<tbody>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+								<tr>
+									<td>市公安局</td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color1">20</span></td>
+									<td><span class="text_color2">120</span></td>
+									<td><span class="text_color3">20%</span></td>
+								</tr>
+
+							</tbody>
+
+						</table>
+
+					</div>
+
+				</div>
+			</div>
+			<!-- 话务数量 -->
+			<div class="smallimg">
+				<p class="top_title" style="margin-left: 215px;padding-top: 6px;">话务数量</p>
+				<div id="todyPhoneCount" style="width: 90%;height: 330px;margin: 15px 35px;"></div>
+			</div>
+			<!--  投诉举报  -->
+			<div class="smallimg">
 				<p class="top_title" style="margin-left: 215px;padding-top: 6px;">投诉举报</p>
-			<div class="pull-right" id="partcom" style=" width: 85%;height: 340px;margin: 7px 17px;"></div>
-		</div>
+				<div class="pull-right" id="partcom" style=" width: 85%;height: 340px;margin: 7px 17px;"></div>
+			</div>
 		</div>
 		</div>
 		<div class="timeLimit-wrapper" style="display: none;">
@@ -535,8 +536,9 @@
 		<script src="js/tagcloud.js"></script>
 		<script src="js/ScrollDiv.js"></script>
 		<script src="js/index.js"></script>
-<!-- 	   <script src="js/sourceChannel.js" type="text/javascript" charset="utf-8"></script>
- -->		<!-- <script src="js/complaintsReport.js"></script>
+		<!-- 	   <script src="js/sourceChannel.js" type="text/javascript" charset="utf-8"></script>
+ -->
+		<!-- <script src="js/complaintsReport.js"></script>
 		<script src="js/TelephoneDetails.js" type="text/javascript" charset="utf-8"></script>
 		<script src="js/receiptDepartment.js" type="text/javascript" charset="utf-8"></script>
  -->
@@ -545,7 +547,7 @@
 		<script src="https://api.map.baidu.com/api?v=2.0&ak=ZG4gLQZUD6Eq1K11cqlYAR4by8CKgLyu&callback=mapinit"></script>
 		<script src="js/map1.js"></script>
 		<script src="js/layer/layer.js"></script>
-		
+
 	</body>
 	<script type="text/javascript">
 		// 選項卡
@@ -556,29 +558,27 @@
 			var index = $(this).index();
 			$(".slideCon_bg").eq(index).addClass("slideCon_bg_block")
 				.siblings().removeClass("slideCon_bg_block");
-				console.log(index)
-			if(index==0){
+			console.log(index)
+			if (index == 0) {
 				window.open('detail.html', '_self')
-			}else if(index==1){
+			} else if (index == 1) {
 				window.open('second.html', '_self')
-			}else if(index==2){
+			} else if (index == 2) {
 				window.open('third.html', '_self')
-			}else if(index==3){
+			} else if (index == 3) {
 				window.open('fourth.html', '_self')
-			}else if(index==4){
+			} else if (index == 4) {
 				window.open('sourceChannel.html', '_self')
-			}else if(index==5){
+			} else if (index == 5) {
 				window.open('receiptDepartment.html', '_self')
-			}else if(index==6){
+			} else if (index == 6) {
 				window.open('TelephoneDetails.html', '_self')
-			}else if(index==7){
+			} else if (index == 7) {
 				window.open('complaintsReport.html', '_self')
 			}
 		});
 		$(".nav_middle").click(function() {
 			window.open('index.html', '_self')
 		})
-		
-		
 	</script>
 </html>

WebChartNew/1.html

@@ -1,247 +1,167 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 	<head>
-		<meta charset="UTF-8">
+		<meta charset="utf-8">
 		<title></title>
-		<script type="text/javascript" src="./js/jquery.min.js"></script>
-		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
-		<style type="text/css">
-			body {
-				width: 100%;
-				height: 100%;
-				background-image: url(images/background.png);
-			}
-		</style>
 	</head>
 	<body>
-		<div id="map">
-			<div style="width: 100%; height: 800px;" id="channel"></div>
-		</div>
-
-
+		<div id="main" style="width: 80%;height: 400px;"></div>
 	</body>
-</html>
-<script src="js/echarts.min.js"></script>
-<script src="Script/Common/huayi.config.js"></script>
-<script src="Script/Common/huayi.http.js"></script>
-<script src="js/util.js"></script>
-<script type="text/javascript">
-	let trafficName = [];
-	let trafficTime = [];
-	let sum = [];
-	let consult = [];
-	let help = [];
-	let complaint = [];
-	let proposal = [];
-	let praise = [];
-	let report = [];
-	let other = [];
-	new doAjax({
-		url: huayi.config.callcenter_url + "/InfoNew/GetTypeCount24ByNow",
-		data: {},
-		callBack: function(res) {
-			console.log(res)
-			trafficName = res.data.cols;
-			trafficTime = res.data.hours;
-			sum = res.data.counts[0];
-			consult = res.data.counts[1];
-			help = res.data.counts[2];
-			complaint = res.data.counts[3];
-			proposal = res.data.counts[4];
-			praise = res.data.counts[5];
-			report = res.data.counts[6];
-			other = res.data.counts[7]
-			traffic_chart(trafficName, trafficTime, sum, consult, help, complaint, proposal, praise,
-				report, other)
-		}
-	});
-	function traffic_chart(trafficName, trafficTime, sum, consult, help, complaint, proposal, praise, report, other) {
-		let channelChart = echarts.init(document.getElementById('channel'));
-		
-		let color = [
-			"#8B5CFF",
-			"#00CA69"
-		];
-		let xAxisData = ["1", "2", "3", "4", "5", "6", "7", "8","9","10","11"];
-		let yAxisData1 = [4, 1, 1, 2, 4, 6, 14, 20,126,127,131];
-		let yAxisData2 = [9, 0, 1, 1, 2, 4, 7, 8,99,110,98];
-		
-		const hexToRgba = (hex, opacity) => {
-			let rgbaColor = "";
-			let reg = /^#[\da-f]{6}$/i;
-			if (reg.test(hex)) {
-				rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
-		      "0x" + hex.slice(3, 5)
-		    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
-			}
-			return rgbaColor;
-		}
-		
+	<script src="js/echarts.min.js"></script>
+	<script>
+		let channelChart = echarts.init(document.getElementById('main'));
+		var xdata = ['苏州市', '无锡市', '南京市','苏州市', '无锡市', '南京市'];
+		var data = [70, 0, 0,0, 0, 80];
+		var maxArr = [100, 100, 100];
 		option = {
-			backgroundColor: '#fff',
-			color: color,
-			legend: {
-				top: 20,
-		
-			},
-			tooltip: {
-				trigger: 'axis',
-				axisPointer: {
-					show: true,
-					type: 'line',
-					lineStyle: {
-						type: 'dashed'
-					}
-				},
-				textStyle: {
-					color: '#ffe400',
-					fontSize: '12'
-				},
-				backgroundColor: 'rgba(250,250,250,0)',
-				formatter: function(params) {
-					let trafficStr = ''
-					params.forEach(function(v, n) {
-						trafficStr += '<li><h5>'+v.seriesName+'：</h5><div><span>'+parseInt(v.value % 10000 / 1000) +
-							'</span><span>' + parseInt(v.value  % 1000 / 100) +
-							'</span><span>' + parseInt((v.value % 100) / 10) +
-							'</span><span>' + parseInt(v.value % 10) + '</span></div></li>';
-					})
-					$('.traffic').html(trafficStr);
-					let str =
-						'<div style="background-image: url(images/secondary_img/reminder_box3.png);width:90px;height:195px;line-height:22px;background-size: 100% 100%;padding:8px 15px;">'
-					params.forEach(function(v, n) {
-						str +=
-							'<div><span style="color:#fff;width:45%;text-align: center;display: inline-block;">' +
-							v.seriesName +
-							': </span><span  style="width:45%;text-align: center;display: inline-block;">' +
-							v.value + '</span></div>'
-					})
-					str += '</div>';
-					return str;
-				}
-			},
-			grid: {
-				top: 100,
-				containLabel: true
-			},
-			xAxis: [{
-				type: "category",
-				boundaryGap: false,
-				axisLabel: {
-					formatter: '2020-{value}',
-					textStyle: {
-						color: "#333"
-					}
-				},
-				axisLine: {
-					lineStyle: {
-						color: "#D9D9D9"
-					}
-				},
-				data: xAxisData,
-			}],
-			yAxis: [{
-				type: "value",
-				name: '单位（万/亿KWh）',
-				axisLabel: {
-					textStyle: {
-						color: "#666"
-					}
-				},
-				nameTextStyle: {
-					color: "#666",
-					fontSize: 12,
-					lineHeight: 40
-				},
-				// 分割线
-				splitLine: {
-					lineStyle: {
-						type: "dashed",
-						color: "#E9E9E9"
-					}
-				},
-				axisLine: {
-					show: false
-				},
-				axisTick: {
-					show: false
-				}
-			}],
-			series: [{
-				// name: "2018",
-				name: "预测出电量",
-				type: "line",
-				smooth: true,
-				symbolSize: 8,
-				showSymbol: false,
-				zlevel: 3,
-				lineStyle: {
-					normal: {
-						width: 0
-					}
-				},
-				// symbol: 'circle', //数据交叉点样式
-				areaStyle: {
-					normal: {
-						opacity: 0.8,
-						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-							offset: 0,
-							color: '#2ddffe'
-						}, {
-							offset: 1,
-							color: '#2e90ff'
-						}], false),
-						shadowColor: 'rgba(0, 0, 0, 0.1)',
-						shadowBlur: 10
-					}
-				},
-				itemStyle: {
-					normal: {
-						color: '#2ddffe',
-						borderColor: '#2ddffe',
-						borderWidth: 2
-				
-					}
-				},
-				data: yAxisData1
-			}, {
-				name: "实际用电量",
-				type: "line",
-				smooth: true,
-				symbolSize: 8,
-				showSymbol: false,
-				zlevel: 3,
-				lineStyle: {
-					normal: {
-						width: 0
-					}
-				},
-				areaStyle: {
-					normal: {
-						opacity: 0.8,
-						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-							offset: 0,
-							color: '#2ddffe'
-						}, {
-							offset: 1,
-							color: '#2e90ff'
-						}], false),
-						shadowColor: 'rgba(0, 0, 0, 0.1)',
-						shadowBlur: 10
-					}
-				},
-				itemStyle: {
-					normal: {
-						color: '#2ddffe',
-						borderColor: '#2ddffe',
-						borderWidth: 2
-				
-					}
-				},
-				data: yAxisData2
-			}]
-		};
+		   tooltip: {
+		   	trigger: 'item',
+		   	textStyle: {
+		   		color: '#ffe400',
+		   		fontSize: '14',
+		   		fontWeight: '500'
+		   	},
+		   	position: 'top',
+		   	backgroundColor: 'rgba(250,250,250,0)',
+		   	transitionDuration: 0.4,
+		   	formatter: function(params) {
+		   		return '<div style="background-image: url(images/reminder_box2.png);width:50px;height:33px;line-height:30px;background-size: 100% 100%;text-align:center;">' +
+		   			 params.value+ '</div>';
+		   	}
+		   },
+		    grid: {
+		        left: "4%",
+		        right: "4%",
+		        bottom: "3%",
+		        top: "15%",
+		        containLabel: true
+		    },
+		    xAxis: {
+		    	// type: "category",
+		    	triggerEvent: true,
+		    	boundaryGap: true,
+		    	data: ['坐席数量', '签入', '通话中', '话后处理', '置忙', '置闲', '离线'],
+		    	axisLabel: {
+		    		//坐标轴刻度标签的相关设置。
+		    		interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+		    		//	margin:15,
+		    		textStyle: {
+		    			color: "#fff",
+		    			fontStyle: "normal",
+		    			fontSize: 10
+		    		}
+		    	},
+		    	axisTick: {
+		    		//坐标轴刻度相关设置。
+		    		show: false
+		    	},
+		    	axisLine: {
+		    		//坐标轴轴线相关设置
+		    		lineStyle: {
+		    			color: "#036376"
+		    		}
+		    	},
+		    	splitLine: {
+		    		//坐标轴在 grid 区域中的分隔线。
+		    		show: false,
+		    		lineStyle: {
+		    			color: "rgba(77, 128, 254, 0.2)"
+		    		}
+		    	}
+		    },
+		   yAxis: [{
+		   	nameTextStyle: {
+		   		color: "#f4f5f5",
+		   		padding: [0, 0, 10, -5],
+		   		fontSize: 14
+		   	},
+		   	axisLabel: {
+		   		color: "#f4f5f5",
+		   		fontSize: 14
+		   	},
+		   	axisTick: {
+		   		lineStyle: {
+		   			color: "#687f8a",
+		   			width: 1
+		   		},
+		   		show: true
+		   	},
+		   	splitLine: {
+		   		show: true,
+		   		lineStyle: {
+		   			color: "#687f8a",
+		   			type: "dashed"
+		   		}
+		   	},
+		   	axisLine: {
+		   		lineStyle: {
+		   			color: "#687f8a",
+		   			width: 1,
+		   			type: "solid"
+		   		},
+		   		show: true,
+		   		// "symbol":['none', 'arrow'],
+		   		symbol: ['none',
+		   			'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,                  20'
+		   		],
+		   		symbolOffset: 5,
+		   		symbolSize: [35, 38],
+		   	},
+		   	name: "条"
+		   }],
+		    // color: ["#e54035"],
+		    series: [{
+		            name: "数量",
+		            barMinHeight: 10,
+		            type: "pictorialBar",
+		            barCategoryGap: "60%",
+		            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+		            symbol: "path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z",
+		            itemStyle: {
+		                normal: {
+		                    //barBorderRadius: 5,
+		                    //渐变色
+		                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+		                            offset: 0,
+		                            color: "#01EAED"
+		                        },
+		                        {
+		                            offset: 0.5,
+		                            color: "#02C4DD"
+		                        },
+		                        {
+		                            offset: 1,
+		                            color: "#029ED9"
+		                        }
+		                    ])
+		                }
+		            },
+		            label: {
+		            	normal: {
+		            		show: false
+		            	}
+		            },
+					emphasis: {
+						itemStyle: {
+							color: new echarts.graphic.LinearGradient(
+								0, 0, 0, 1,
+								[{
+										offset: 0,
+										color: '#fde301'
+									},
+									{
+										offset: 1,
+										color: '#0a2f3e'
+									}
+								]
+							)
+						}
+					},
+		            data: data,
+		            z: 10
+		        }
+		    ]
+		}
 		channelChart.setOption(option);
-	}
-	
-</script>
+	</script>
+</html>

WebChartNew/css/bmaps.css

@@ -0,0 +1,657 @@
+.BMap_mask {
+	background: transparent url(https://sapi.map.baidu.com/images/blank.gif);
+}
+
+.BMap_noscreen {
+	display: none;
+}
+
+.BMap_button {
+	cursor: pointer;
+}
+
+.BMap_zoomer {
+	background-image: url(https://sapi.map.baidu.com/images/mapctrls1d3.gif);
+	background-repeat: no-repeat;
+	overflow: hidden;
+	font-size: 1px;
+	position: absolute;
+	width: 7px;
+	height: 7px;
+}
+
+.BMap_stdMpCtrl div {
+	position: absolute;
+}
+
+.BMap_stdMpPan {
+	width: 44px;
+	height: 44px;
+	overflow: hidden;
+	background: url(https://sapi.map.baidu.com/images/mapctrls2d0.png) no-repeat;
+}
+
+.BMap_ie6 .BMap_stdMpPan {
+	background: none;
+}
+
+.BMap_ie6 .BMap_smcbg {
+	left: 0;
+	width: 44px;
+	height: 464px;
+	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sapi.map.baidu.com/images/mapctrls2d0.png');
+}
+
+.BMap_ie6 .BMap_stdMpPanBg {
+	z-index: -1;
+}
+
+.BMap_stdMpPan .BMap_button {
+	height: 15px;
+	width: 15px;
+}
+
+.BMap_panN,
+.BMap_panW,
+.BMap_panE,
+.BMap_panS {
+	overflow: hidden;
+}
+
+.BMap_panN {
+	left: 14px;
+	top: 0;
+}
+
+.BMap_panW {
+	left: 1px;
+	top: 12px;
+}
+
+.BMap_panE {
+	left: 27px;
+	top: 12px;
+}
+
+.BMap_panS {
+	left: 14px;
+	top: 25px;
+}
+
+.BMap_stdMpZoom {
+	top: 45px;
+	overflow: hidden;
+}
+
+/* .BMap_stdMpZoom .BMap_button {
+	width: 30px;
+	height: 32px;
+	left: 8px;
+	top: -7px;
+	overflow: hidden;
+	background-image: url(https://sapi.map.baidu.com/images/mapctrls2d0.png);
+	background-repeat: no-repeat;
+	z-index: 10;
+} */
+
+/* .BMap_ie6 .BMap_stdMpZoom .BMap_button {
+	background: none;
+} */
+
+.BMap_stdMpZoomIn {
+	width: 30px;
+	height: 32px;
+	position: absolute;
+	background-image: url(../images/secondary_img/up.png);
+	background-position: 0 0 !important;
+	background-size: 100% 100% !important;
+	left: 8px;
+	top: -3px;
+	z-index: 88;
+}
+
+.BMap_stdMpZoomOut {
+	width: 30px;
+	height: 32px;
+	position: absolute;
+	background-image: url(../images/secondary_img/down.png);
+	background-position: 0 0 !important;
+	background-size: 100% 100% !important;
+	left: 8px;
+	top: 210px !important;
+	z-index: 888;
+}
+
+/* .BMap_ie6 .BMap_stdMpZoomIn div {
+	left: 0;
+	top: -221px;
+}
+
+.BMap_ie6 .BMap_stdMpZoomOut div {
+	left: 0;
+	top: -265px;
+} */
+
+.BMap_stdMpSlider {
+	width: 37px;
+	top: 18px;
+}
+
+.BMap_stdMpSliderBgTop {
+	left: 18px;
+	width: 10px;
+	overflow: hidden;
+	/* background: url(https://sapi.map.baidu.com/images/mapctrls2d0.png) no-repeat -23px -226px; */
+}
+
+.BMap_stdMpSliderBgBot {
+	left: 18px;
+	height: 8px;
+	width: 8px;
+	top: 124px;
+	overflow: hidden;
+	/* background: url(https://sapi.map.baidu.com/images/mapctrls2d0.png) no-repeat -33px bottom; */
+}
+
+.BMap_ie6 .BMap_stdMpSliderBgTop,
+.BMap_ie6 .BMap_stdMpSliderBgBot {
+	background: none;
+}
+
+.BMap_ie6 .BMap_stdMpSliderBgTop div {
+	left: -23px;
+	top: -226px;
+}
+
+.BMap_ie6 .BMap_stdMpSliderBgBot div {
+	left: -33px;
+	bottom: 0;
+}
+
+.BMap_stdMpSliderMask {
+	height: 100%;
+	width: 24px;
+	left: 10px;
+	cursor: pointer;
+}
+
+.BMap_stdMpSliderBar {
+	height: 6px;
+	width: 16px;
+	left: 14px;
+	top: 80px;
+	overflow: hidden;
+	/* background: url(https://sapi.map.baidu.com/images/mapctrls2d0.png) no-repeat 0 -309px; */
+}
+
+.BMap_stdMpSliderBar.h {
+	background-color: #034a5b;
+	/* background: url(https://sapi.map.baidu.com/images/mapctrls2d0.png) no-repeat 0 -320px; */
+}
+
+.BMap_ie6 .BMap_stdMpSliderBar,
+.BMap_ie6 .BMap_stdMpSliderBar.h {
+	background: none;
+}
+
+.BMap_ie6 .BMap_stdMpSliderBar div {
+	top: -309px;
+}
+
+.BMap_ie6 .BMap_stdMpSliderBar.h div {
+	top: -320px;
+}
+
+.BMap_zlSt,
+.BMap_zlCity,
+.BMap_zlProv,
+.BMap_zlCountry {
+	position: absolute;
+	left: 34px;
+	height: 21px;
+	width: 28px;
+	background-image: url(https://sapi.map.baidu.com/images/mapctrls2d0.png);
+	background-repeat: no-repeat;
+	font-size: 0;
+	cursor: pointer;
+}
+
+.BMap_ie6 .BMap_zlSt,
+.BMap_ie6 .BMap_zlCity,
+.BMap_ie6 .BMap_zlProv,
+.BMap_ie6 .BMap_zlCountry {
+	background: none;
+	overflow: hidden;
+}
+
+.BMap_zlHolder {
+	display: none;
+	position: absolute;
+	top: 0;
+}
+
+.BMap_zlHolder.hvr {
+	display: block;
+}
+
+.BMap_zlSt {
+	background-position: 0 -380px;
+	top: 21px;
+}
+
+.BMap_zlCity {
+	background-position: 0 -401px;
+	top: 57px;
+}
+
+.BMap_zlProv {
+	background-position: 0 -422px;
+	top: 81px;
+}
+
+.BMap_zlCountry {
+	background-position: 0 -443px;
+	top: 105px;
+}
+
+.BMap_ie6 .BMap_zlSt div {
+	top: -380px;
+}
+
+.BMap_ie6 .BMap_zlCity div {
+	top: -401px;
+}
+
+.BMap_ie6 .BMap_zlProv div {
+	top: -422px;
+}
+
+.BMap_ie6 .BMap_zlCountry div {
+	top: -443px;
+}
+
+.BMap_stdMpType1 .BMap_stdMpSlider,
+.BMap_stdMpType2 .BMap_stdMpSlider,
+.BMap_stdMpType3 .BMap_stdMpSlider,
+.BMap_stdMpType2 .BMap_stdMpZoom,
+.BMap_stdMpType3 .BMap_stdMpPan {
+	display: none;
+}
+
+.BMap_stdMpType3 .BMap_stdMpZoom {
+	top: 0;
+}
+
+.BMap_cpyCtrl a {
+	font-size: 11px;
+	color: #7979CC;
+}
+
+.BMap_scaleCtrl {
+	height: 23px;
+	overflow: hidden;
+}
+
+.BMap_scaleCtrl div.BMap_scaleTxt {
+	font-size: 11px;
+	font-family: Arial, sans-serif;
+}
+
+.BMap_scaleCtrl div {
+	position: absolute;
+	overflow: hidden;
+}
+
+.BMap_scaleHBar img,
+.BMap_scaleLBar img,
+.BMap_scaleRBar img {
+	position: absolute;
+	width: 37px;
+	height: 442px;
+	left: 0;
+}
+
+.BMap_scaleHBar {
+	width: 100%;
+	height: 5px;
+	font-size: 0;
+	bottom: 0;
+}
+
+.BMap_scaleHBar img {
+	top: -437px;
+	width: 100%;
+}
+
+.BMap_scaleLBar,
+.BMap_scaleRBar {
+	width: 3px;
+	height: 9px;
+	bottom: 0;
+	font-size: 0;
+	z-index: 1;
+}
+
+.BMap_scaleLBar img {
+	top: -427px;
+	left: 0;
+}
+
+.BMap_scaleRBar img {
+	top: -427px;
+	left: -5px;
+}
+
+.BMap_scaleLBar {
+	left: 0;
+}
+
+.BMap_scaleRBar {
+	right: 0;
+}
+
+.BMap_scaleTxt {
+	text-align: center;
+	width: 100%;
+	cursor: default;
+	line-height: 18px;
+}
+
+.BMap_omCtrl {
+	background-color: #fff;
+	overflow: hidden;
+}
+
+.BMap_omOutFrame {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+}
+
+.BMap_omInnFrame {
+	position: absolute;
+	border: 1px solid #999;
+	background-color: #ccc;
+	overflow: hidden;
+}
+
+.BMap_omMapContainer {
+	position: absolute;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+}
+
+.BMap_omViewMv {
+	border-width: 1px;
+	border-style: solid;
+	border-left-color: #84b0df;
+	border-top-color: #adcff4;
+	border-right-color: #274b8b;
+	border-bottom-color: #274b8b;
+	position: absolute;
+	z-index: 600;
+}
+
+.BMap_omViewInnFrame {
+	border: 1px solid #3e6bb8;
+}
+
+.BMap_omViewMask {
+	width: 1000px;
+	height: 1000px;
+	position: absolute;
+	left: 0;
+	top: 0;
+	background-color: #68c;
+	opacity: .2;
+	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
+}
+
+.BMap_omBtn {
+	height: 13px;
+	width: 13px;
+	position: absolute;
+	cursor: pointer;
+	overflow: hidden;
+	background: url(https://sapi.map.baidu.com/images/mapctrls1d3.gif) no-repeat;
+	z-index: 1210;
+}
+
+.anchorBR .BMap_omOutFrame {
+	border-top: 1px solid #999;
+	border-left: 1px solid #999;
+}
+
+.quad4 .BMap_omBtn {
+	background-position: -26px -27px;
+}
+
+.quad4 .BMap_omBtn.hover {
+	background-position: 0 -27px;
+}
+
+.quad4 .BMap_omBtn.BMap_omBtnClosed {
+	background-position: -39px -27px;
+}
+
+.quad4 .BMap_omBtn.BMap_omBtnClosed.hover {
+	background-position: -13px -27px;
+}
+
+.anchorTR .BMap_omOutFrame {
+	border-bottom: 1px solid #999;
+	border-left: 1px solid #999;
+}
+
+.quad1 .BMap_omBtn {
+	background-position: -39px -41px;
+}
+
+.quad1 .BMap_omBtn.hover {
+	background-position: -13px -41px;
+}
+
+.quad1 .BMap_omBtn.BMap_omBtnClosed {
+	background-position: -26px -41px;
+}
+
+.quad1 .BMap_omBtn.BMap_omBtnClosed.hover {
+	background-position: 0 -41px;
+}
+
+.anchorBL .BMap_omOutFrame {
+	border-top: 1px solid #999;
+	border-right: 1px solid #999;
+}
+
+.quad3 .BMap_omBtn {
+	background-position: -27px -40px;
+}
+
+.quad3 .BMap_omBtn.hover {
+	background-position: -1px -40px;
+}
+
+.quad3 .BMap_omBtn.BMap_omBtnClosed {
+	background-position: -40px -40px;
+}
+
+.quad3 .BMap_omBtn.BMap_omBtnClosed.hover {
+	background-position: -14px -40px;
+}
+
+.anchorTL .BMap_omOutFrame {
+	border-bottom: 1px solid #999;
+	border-right: 1px solid #999;
+}
+
+.quad2 .BMap_omBtn {
+	background-position: -40px -28px;
+}
+
+.quad2 .BMap_omBtn.hover {
+	background-position: -14px -28px;
+}
+
+.quad2 .BMap_omBtn.BMap_omBtnClosed {
+	background-position: -27px -28px;
+}
+
+.quad2 .BMap_omBtn.BMap_omBtnClosed.hover {
+	background-position: -1px -28px;
+}
+
+.anchorR .BMap_omOutFrame {
+	border-bottom: 1px solid #999;
+	border-left: 1px solid #999;
+	border-top: 1px solid #999;
+}
+
+.anchorL .BMap_omOutFrame {
+	border-bottom: 1px solid #999;
+	border-right: 1px solid #999;
+	border-top: 1px solid #999;
+}
+
+.anchorB .BMap_omOutFrame {
+	border-top: 1px solid #999;
+	border-left: 1px solid #999;
+	border-right: 1px solid #999;
+}
+
+.anchorT .BMap_omOutFrame {
+	border-bottom: 1px solid #999;
+	border-right: 1px solid #999;
+	border-left: 1px solid #999;
+}
+
+.anchorNon .BMap_omOutFrame,
+.withOffset .BMap_omOutFrame {
+	border: 1px solid #999;
+}
+
+.BMap_zoomMask0,
+.BMap_zoomMask1 {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background: transparent url(https://sapi.map.baidu.com/images/blank.gif);
+	z-index: 1000;
+}
+
+.BMap_contextMenu {
+	position: absolute;
+	border-top: 1px solid #adbfe4;
+	border-left: 1px solid #adbfe4;
+	border-right: 1px solid #8ba4d8;
+	border-bottom: 1px solid #8ba4d8;
+	padding: 0;
+	margin: 0;
+	width: auto;
+	visibility: hidden;
+	background: #fff;
+	z-index: 10000000;
+}
+
+.BMap_cmShadow {
+	position: absolute;
+	background: #000;
+	opacity: .3;
+	filter: alpha(opacity=30);
+	visibility: hidden;
+	z-index: 9000000;
+}
+
+div.BMap_cmDivider {
+	border-bottom: 1px solid #adbfe4;
+	font-size: 0;
+	padding: 1px;
+	margin: 0 6px;
+}
+
+div.BMap_cmFstItem {
+	margin-top: 2px;
+}
+
+div.BMap_cmLstItem {
+	margin-bottom: 2px;
+}
+
+.BMap_shadow img {
+	border: 0 none;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	height: 370px;
+	width: 1144px;
+}
+
+.BMap_pop .BMap_top {
+	border-top: 1px solid #ababab;
+	background-color: #fff;
+}
+
+.BMap_pop .BMap_center {
+	border-left: 1px solid #ababab;
+	border-right: 1px solid #ababab;
+	background-color: #fff;
+}
+
+.BMap_pop .BMap_bottom {
+	border-bottom: 1px solid #ababab;
+	background-color: #fff;
+}
+
+.BMap_shadow,
+.BMap_shadow img,
+.BMap_shadow div {
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
+
+.BMap_checkbox {
+	background: url(https://sapi.map.baidu.com/images/mapctrls1d3.gif);
+	vertical-align: middle;
+	display: inline-block;
+	width: 11px;
+	height: 11px;
+	margin-right: 4px;
+	background-position: -14px 90px;
+}
+
+.BMap_checkbox.checked {
+	background-position: -2px 90px;
+}
+
+.BMap_pop .BMap_top img,
+.BMap_pop .BMap_center img,
+.BMap_pop .BMap_bottom img {
+	display: none;
+}
+
+@media print {
+	.BMap_noprint {
+		display: none;
+	}
+
+	.BMap_noscreen {
+		display: block;
+	}
+
+	.BMap_mask {
+		background: none;
+	}
+
+	.BMap_pop .BMap_top img,
+	.BMap_pop .BMap_center img,
+	.BMap_pop .BMap_bottom img {
+		display: block;
+	}
+}

WebChartNew/css/test-1920.css

@@ -99,6 +99,8 @@ a {
 	min-width: 35px;
 }
 body {
+	width: 100%;
+	height: 100%;
 	background-image: url(../images/background.png);
 }
 
@@ -128,7 +130,10 @@ body {
 	height: 290px;
 	cursor: pointer;
 }
-
+#main{
+	position: absolute;
+	top: 47px;
+}
 .call_situation h3,
 .accept_statistics .title,
 .accept_channel h3,
@@ -141,7 +146,15 @@ body {
 	color: #fff;
 	z-index: 12;
 }
-
+.call_line{
+	position: absolute;
+	width: 85%;
+	top: 58px;
+	left: 47px;
+	/* margin-left: 10px; */
+	border-top: 1px solid #53697c;
+	z-index: 567966;
+}
 .accept_statistics div {
 	float: left;
 }
@@ -909,5 +922,154 @@ thead {
 	font-size: 17px;
 	font-weight: 500;
 }
+/* 百度地图 */
+.BMap_stdMpPan{
+	display: none !important; 
+}
+/* 进度背景 */
+.BMap_stdMpSliderBgTop {
+	height: 200px !important;
+	background-image: url(../images/secondary_img/speed.png) !important;
+	background-size: 100% 100% !important;
+	left:17px !important
+}
+/* 进度范围 */
+.BMap_stdMpSliderBgBot {
+	height: 195px !important;
+	overflow: hidden;
+	background-color: #034a5b !important;
+	/* left: 4px !important; */
+}
+/* 小进度按钮 */
+.BMap_stdMpSliderBar {
+	background-color: #034a5b !important;
+	z-index: 888 !important;
+}
 
+/* 按钮 */
+.BMap_stdMpZoom{
+	height: 236px !important;
+	text-align: center;
+	top: -117px !important;
+	/* background-color: darkblue; */
+}
+.infoTitle li{
+	padding: 10px 20px;
+	margin-bottom: 10px;
+}
+.infoTitle label{
+	width: 32.33%;
+	display: inline-block;
+	text-align: center;
+	/* margin-right: 20px; */
+}
+.infoTitle img{
+	width: 24px;
+	height: 24px;
+	vertical-align: middle;
+}
+.infoTitle{
+	width: 460px;
+	height: 120px;
+	padding: 10px 20px;
+	background-color: #fff;
+	position: absolute;
+	top:120px;
+	left:60px;
+	box-sizing: border-box;
+}
+.showInfo{
+	width: 460px;
+	height: 400px;
+	background-color: #fff;
+	padding: 10px 20px;
+	position: absolute;
+	top:285px;
+	left:60px;
+	box-shadow: 5px 5px 2px #d3d3d3;
+}
+.showInfo h3{
+	background: url(../images/secondary_img/title.png) no-repeat;
+	background-position: 50% 50%;
+	width: 100%;
+	text-align: center;
+	font-size: 16px;
+	font-weight: 600;
+	color: #222;
+	margin-bottom: 10px;
+}
+
+.tablebox table {
+    border-collapse: separate;
+    border-spacing: 0
+}
+
+.tablebox {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    margin: 10px auto;
+}
+
+.tablebox table {
+    width: 100%;
+	cellspacing:0;
+	 border-collapse:collapse;/* 取消表格边框 */
+}
+
+.tablebox table th, .tablebox table td {
+    font-size: 12px;
+    text-align: center;
+    line-height: 16px;
+    background: #fff;
+	color: #222;
+}
+.tablebox table thead tr{
+	background: #e5e8e9 !important;
+}
+.tablebox table td{
+	padding: 15px;
+	border-bottom: 1px solid #e5e8e9;
+}
+.showInfo .tablebox table th {
+	padding: 12px 4px;
+    height: 30px;
+    line-height: 30px;
+    background: #e5e8e9;
+    font-size: 14px;
+    font-weight: normal;
+	/* border-left: none !important; */
+}
+
+.tablebox table td img {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.tablebox.table_md table td, .tablebox.table_md table th {
+    line-height: 18px;
+}
+.tablebox table .callType{
+	background-color: #fff5cc;
+}
+.tablebox table .caalTypeTitle{
+	background-color: #ffcc00;
+}
+/* .three .tablebox table thead tr{
+} */
+.three .tablebox{
+	width: 95%;
+}
+.three .tablebox table td,.three .tablebox table thead,.three .tablebox table thead tr{
+	color: #fff;
+	border-bottom:  1px solid #028c9a;
+	background-color: rgba(255,255,255,0);
+}
+.three .tablebox .infoName{
+	background-color: #027282;
+	padding:20px 0px;
+}
+.three .tablebox td{
+	padding:20px 27px;
+}