样式优化

WebChartNewest/css/index.css

 /* 当日热线受理情况 */
 .hotlineAccept{
 	padding-top: 15px;
+	cursor: pointer;
 }
 .midWrap h3{
 	background: url(../image/hotline_title.png);
 	margin-right: 5px;
 }
 /* 二级大屏 */
+.workDetails tr td{
+	font-size: 17px  !important;
+}
+.traffic li{
+	float: left;
+}
+.traffic .rexian{
+	width: 70%;
+}
+.traffic .heji{
+	width: 30%;
+}
 .bulletFrame,.bulletFrameT{
 	display: none;
 	position: absolute;
 	font-size: 24px;
 	font-weight: 700;
 }
-.close_icon,.close_iconT,.close_iconS,.close_zxicon,.close_work,.back_icon,.backKey_icon,.closeMap_icon,.closeKey_icon{
+.close_icon,.close_iconT,.close_iconS,.close_zxicon,.close_work,.back_icon,.backKey_icon,.closeMap_icon,.closeKey_icon,.backProcedure{
 	position: absolute;
 	top: 25px;
 	right:25px;
 	cursor: pointer;
 	z-index: 1236;
 }
-.back_icon,.backKey_icon{
+.backKey_icon{
+	display: none;
+}
+.back_icon,.backKey_icon,.backProcedure{
 	right:100px;
 }
 /* 二级地图 */
 #keywordPie{
 	position: absolute;
 	top: -20px;
-	left: -25px;
+	left: 10px;
 }
 .regionMap .head_name{
 	height: 54px;

WebChartNewest/index.html

 			<div class="count-resource">
 				<div class="call_situation">
 					<div class="title_img">
-						<h2>当日坐席数据</h2>
+						<h2>话务数据统计</h2>
 					</div>
 					<div class="dataT act">
 
 									id="wxq_num">0</span><span class="num_roll" id="wxb_num">0</span><span
 									class="num_roll" id="wxs_num">0</span><span class="num_roll" id="wxg_num">0</span>
 							</li>
-							<li><label>人民网：</label><span class="num_roll" id="zww_num">0</span><span class="num_roll"
+							<li><label>&nbsp;&nbsp;&nbsp;人民网：</label><span class="num_roll" id="zww_num">0</span><span class="num_roll"
 									id="zwq_num">0</span><span class="num_roll" id="zwb_num">0</span><span
 									class="num_roll" id="zws_num">0</span><span class="num_roll" id="zwg_num">0</span>
 							</li>
 						<h2>工单类型</h2>
 					</div>
 					<div class="dataT">
-						当日数据
+						当月数据
 					</div>
 					<div id="workOrder" style="width: 800px;height:250px;"></div>
 				</div>
 			<!-- 关键词 -->
 			<ul class="secondLevel_keyWord">
 				<!-- 关闭按钮 -->
-				<!-- <img src="./image/second/back.png" alt="" class="backKey_icon"> -->
+				<img src="./image/second/back.png" alt="" class="backKey_icon" style="display: none;">
 				<img src="./image/second/X.png" alt="" class="closeKey_icon">
 				<!-- 标题 -->
 				<div class="head_name">
 						&nbsp;&nbsp;&nbsp;平均办理时长
 						<lable style='color: #ffe000;'>5</lable>个工作日
 					</li>
-					<li></li>
+					<li class="dataTT"></li>
 				</ul>
 				<div style="width: 100%;padding: 10px;height: 750px;">
 					<table id="timeSecList" data-row-style="rowStyle" data-query-params="queryParams"
 				<img src="./image/second/X.png" alt="" class="close_icon">
 				<div class="head_name">
 					<img src="./image/second/title_right.png" class="title_left">
-					<h3>重大事项预警</h3>
+					<h3>重大事件预警</h3>
 					<img src="./image/second/title_left.png" class="title_right">
 				</div>
 				<div style="position: relative;">
 					<h3>当日话务量数据</h3>
 					<img src="./image/second/title_left.png" class="title_right">
 				</div>
-				<div id="traffic3" style="height:750px;width: 1570px;"></div>
+				<ul class="traffic">
+					<li class="rexian" id='rexian' style="height:700px;width: 1100px;">1</li>
+					<li class="heji" id="heji"  style="height:700px;width: 400px;">2</li>
+				</ul>
+				<!-- <div id="traffic3" style="height:750px;width: 1570px;"></div> -->
 			</div>
 			<!-- 受理渠道 -->
 			<div class="channel_wrap">
 							<tr>
 								<th data-field="F_WorkOrderId" data-align="center" data-formatter="getformatter">工单编号
 								</th>
-								<th data-field="F_ComTitle" data-align="center">工单标题</th>
+								<th data-field="F_ComTitle" data-align="center"  data-formatter="getformatterTitle">工单标题</th>
 								<th data-field="DeptName" data-align="center">承办单位</th>
 								<th data-field="F_ComContent" data-align="center" data-width="150"
 									data-formatter="getDeptnameC">工单内容</th>
 				</div>
 			</div>
 			<div class="workDetails">
+				<img src="./image/second/X.png" alt="" class="close_icon">
 				<div class="head_name">
 					<img src="./image/second/title_right.png" class="title_left">
 					<h3>安阳12345热线工单详情展示</h3>
 				</div>
 			</div>
 			<div class="workProcedure">
-				<img src="./image/second/X.png" alt="" class="close_iconT">
+				<img src="./image/second/back.png" alt="" class="backProcedure">
+				<img src="./image/second/X.png" alt="" class="close_icon">
 				<div class="head_name">
 					<img src="./image/second/title_right.png" class="title_left">
 					<h3>安阳市12345热线工单轨迹流程</h3>

WebChartNewest/js/main.js

 		heartCheck.reset().start();
 		var myDate = new Date();
 		data = JSON.parse(evt.data)[0];
-		// console.log(data)
 		if (data.Type == "GetAgentDetail") {
-			console.log(data)
+			// console.log(data.WaiteCallCount)
+			// console.log(data.AgentOnlineCount)
+			distributionData[0].value=data.WaiteCallCount;
+			distributionData[1].value=data.AgentOnlineCount
+			let disStr = ''
+			distributionData.forEach(function (v, n) {
+				disStr += '<li><label>' + v.name + '</label><span class="num_roll" id="">' + parseInt(v.value % 100000 / 10000) +
+				'</span><span class="num_roll" id="">' + parseInt(v.value % 10000 / 1000) +
+				'</span><span class="num_roll" id="">' + parseInt(v.value % 1000 / 100) +
+				'</span><span class="num_roll"id="">' + parseInt((v.value % 100) / 10) +
+				'</span><span class="num_roll" id="">' + parseInt(v.value % 10) + '</span></li>'
+			})
+			$('.callTraffic .data_info').html(disStr)
 			callDate = [Number(data.AgentOnlineCount), Number(data.WaiteCallCount), Number(hwcount), Number(jtcount)]
 			const outLine = dataLength - data.AgentOnlineCount;
 			callSeatStateData = [data.WaiteCallCount, data.AgentRingCount, data.TrunkCallInCount, data.AgentCallOutCount, data.AgentFreeCount, outLine]
-			// console.log('坐席', data)
-			// console.log('二级', callSeatStateData)
-			// console.log('首页', callDate)
 			hotThingsChart('timeTraffic', daySeatName, callDate, callDate[0])
 			hotThingsChart('callSeatState', callSeatStateName, callSeatStateData, 500)
 			$('.btn_time').click(function (e) {
 						$('#traffic').css('display', 'none')
 						$('#timeTraffic').css('display', 'block')
 						$('.act').html('当日数据')
-						$('.call_situation h2').text('当日坐席数据')
+						$('.call_situation h2').text('话务数据统计')
 						trafficState = 2
 						hotThingsChart('timeTraffic', nameD, callDate, callDate[0])
 					}
 				}
 				e.stopPropagation();
 			})
-			distributionData[0].value=data.WaiteCallCount;
-			distributionData[1].value=data.AgentOnlineCount
+			
 		}
 
 		if (data) {

WebChartNewest/js/map/anyangMap.js

 				value: [114.765123,35.425571]
 			},
 			{
-				name: '南平镇',
+				name: '高平镇',
 				value: [114.762324,35.362734]
 			},
 			{
 				name: '赵营乡',
 				value: [114.918496,35.558846]
 			},{
-				name: '太康',
+				name: '大寨乡',
 				value: [114.922687,35.510747]
 			},{
 				name: '桑村乡',
 			},{
 				name:'小铺乡',
 				value: [114.462266,35.524934]
+			},{
+				name:'锦和街道',
+				value:[114.534026,35.55689]
 			}
 		];
-		initSecondMap("./json/second_mapjson/hx.js",mapWorkOrder,points,1.5,1)
-		// getAreaChildrenDate("./json/second_mapjson/hx.js",areaid,params.name,1.5)
+		// initSecondMap("./json/second_mapjson/hx.js",mapWorkOrder,points,1.5,1)
+		getAreaChildrenDate("./json/second_mapjson/hx.js",areaid,params.name,1.5)
 	}
 	if(params.name=='文峰区'){
 		areaid=4965

WebChartNewest/js/newIndex.js

 	}
 })
 //关闭按钮退回工单列表
-$('.close_iconT').click(function () {
+$('.backProcedure').click(function () {
 	$('.workDetails').show();
 	$('.workDetails').siblings().hide()
 })
 	if ($('.bulletFrameT').css('display') == 'none') {
 		$('.body').css('opacity', '1')
 	}
-	if(keyidArr.length!=0){
-		console.log('关键字')
-		keyWordTable(keyidArr[0])
-		$('.head_title').text('关键字数据分析')
-	}
 })
 $('.closeMap_icon').click(function(){
 	$('.bulletFrame').hide();
 					$('.daySeat').css('display', 'inline-block')
 					$('#traffic').css('display', 'block')
 					$('#timeTraffic').css('display', 'none')
-					$('.call_situation h2').text('分时段话务量')
+					$('.call_situation h2').text('话务数据统计')
 					$('.act').html(`<label data-pos="1">
 							今日<span class="month active"></span>
 						</label><br>
 						str = 96119;
 						return str + '：' + params.value
 					} else if (params.name == ' 人口和计生咨询举报电话') {
-						str = 12349;
+						str = 12356;
 						return str + '：' + params.value
 					} else if (params.name == ' 全国统一自然资源违法举报电话') {
 						str = 12336;
 							for (var i = 0; i < workOrderData.length; i++) {
 								total += workOrderData[i].value;
 							}
-							percent = ((params.value / total) * 100).toFixed(0);
+							percent = ((params.value / total) * 100).toFixed(2);
 							if (params.name !== '') {
 								return params.name + '：' + percent + '%';
 							} else {
 	var HMS = Hour + ':' + Minute + ':' + Second;
 	var temp_time = year + '-' + month + '-' + strDate + ' ' + HMS;
 	$('.dataTime').text(temp_time);
-	$('.statisticsTime').text(temp_time);
-	$('.nowTime li:nth-child(2)').text(temp_time);
+	// $('.statisticsTime').text(temp_time);
+	// $('.nowTime li:nth-child(2)').text(temp_time);
 	$('.secondLevel_map .time').text(year + '-' + month + '-' + strDate)
 	setInterval(getNowFormatDate, 1000);
 }
+function getTimes(dom){
+	function p(s) {
+		return s < 10 ? '0' + s : s;
+	}
+	var currentYear = new Date().getFullYear();
+	var currentMonth = new Date().getMonth() + 1;
+	var currentDate = new Date().getDate();
+	var prevCurrentYear = 0;
+	var prevCurrentMonth = 0;
+	if(currentMonth == 1) {
+		prevCurrentYear = currentYear - 1;
+		prevCurrentMonth = 12;
+	} else {
+		prevCurrentYear = currentYear;
+		prevCurrentMonth = currentMonth - 1;
+	}
+	let hh = new Date().getHours()
+	let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes():new Date().getMinutes()
+	let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds():new Date().getSeconds()
+	var data=currentYear + "-" + p(currentMonth) + "-" + 01;
+	var current = currentYear + "-" + p(currentMonth) + "-" + p(currentDate);
+	// var a = getPreDatetime(3600 * 1000 * 24 * 30);
+	$(dom).text(data + " ~ " + current)
+}
 function getNowTime(dom){
 	function p(s) {
 		return s < 10 ? '0' + s : s;
 	let hh = new Date().getHours()
 	let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes():new Date().getMinutes()
 	let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds():new Date().getSeconds()
+	var data=currentYear + "-" + p(currentMonth) + "-" + 01+' ' + 00 + ':' + 00 + ':' + 00;
 	var current = currentYear + "-" + p(currentMonth) + "-" + p(currentDate)+' ' + hh + ':' + mf + ':' + ss;
-	var a = getPreDatetime(3600 * 1000 * 24 * 30);
-	$(dom).val(getPreDatetime(3600 * 1000 * 24 * 30) + " ~ " + current)
+	// var a = getPreDatetime(3600 * 1000 * 24 * 30);
+	$(dom).val(data + " ~ " + current)
 	// //昨天的时间
 	// var date1 = new Date(new Date(new Date().toLocaleDateString()).getTime());
 	// var startTime = date1.getFullYear() +
 	// var s2 = day2.getFullYear() + "-" + (day2.getMonth() + 1) + "-" + day2.getDate()+' ' + hh + ':' + mf + ':' + ss;
 	// $(dom).val(startTime + " ~ " + s2);
 }
-function getPreDatetime(pdate) {
-	var start = new Date()
-	start.setTime(start.getTime() - pdate)
-	start.getYear(); // 获取当前年份(2位)
-	var YY = start.getFullYear() // 获取完整的年份(4位,1970-????)
-	var MM = start.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
-	MM = MM > 9 ? MM : ('0' + MM);
-	var DD = start.getDate() // 获取当前日(1-31)
-	DD = DD > 9 ? DD : ('0' + DD)
-	var lastmonth = YY + '-' + MM + '-' + DD+' ' + 00 + ':' + 00 + ':' + 00;
-	return lastmonth;
-}
+// function getPreDatetime(pdate) {
+// 	var start = new Date()
+// 	start.setTime(start.getTime() - pdate)
+// 	start.getYear(); // 获取当前年份(2位)
+// 	var YY = start.getFullYear() // 获取完整的年份(4位,1970-????)
+// 	var MM = start.getMonth() + 1 // 获取当前月份(0-11,0代表1月)
+// 	MM = MM > 9 ? MM : ('0' + MM);
+// 	var DD = start.getDate() // 获取当前日(1-31)
+// 	DD = DD > 9 ? DD : ('0' + DD)
+// 	var lastmonth = YY + '-' + MM + '-' + DD+' ' + 00 + ':' + 00 + ':' + 00;
+// 	return lastmonth;
+// }
 //二级页面点击
 //二级办理时长统计
 $('.test_rank').click(function () {
 			},
 			callBack: function (res) {
 				res.data.forEach(function (v, n) {
-					if (v.name == ' 国家移民管理局咨询服务热线') {
-						secData.push({
-							level: 12367,
-							landArea: v.count
-						})
-					} else if (v.name == ' 为老服务热线') {
-						secData.push({
-							level: 12349,
-							landArea: v.count
-						})
-					} else if (v.name == ' 残疾人维权服务电话') {
-						secData.push({
-							level: 12385,
-							landArea: v.count
-						})
-					} else if (v.name == ' 火灾隐患举报投诉电话') {
-						secData.push({
-							level: 96119,
-							landArea: v.count
-						})
-					} else if (v.name == ' 人口和计生咨询举报电话') {
-						secData.push({
-							level: 12349,
-							landArea: v.count
-						})
-					} else if (v.name == ' 全国统一自然资源违法举报电话') {
-						secData.push({
-							level: 12336,
-							landArea: v.count
-						})
-					} else if (v.name == ' 商务领域咨询举报电话') {
-						secData.push({
-							level: 12312,
-							landArea: v.count
-						})
-					} else if (v.name == ' 文化市场举报电话') {
-						secData.push({
-							level: 12318,
-							landArea: v.count
-						})
-					}
+					secData.push({
+						level: v.value,
+						landArea: v.count
+					})
 				})
 				getHonelineChart2(secData, 'hotline2')
 			}
 		$('.body').css('opacity', '0.4')
 	}
 	if (trafficState == 0) {
-		let phoneName = [];
-		let ldcount = [];
-		let jtcount = [];
-		let wjcount = [];
-		let fqcount = [];
+		let qtphoneName = [];
+		let qtldcount = [];
+		let qtjtcount = [];
+		let qtwjcount = [];
+		let qtfqcount = [];
+		let sphoneName = [];
+		let sldcount = [];
+		let sjtcount = [];
+		let swjcount = [];
+		let sfqcount = [];
 		$('.traffic2_wrap').show();
 		$('.traffic2_wrap').siblings().hide()
 		new doAjax({
 			// url: "http://192.168.8.9:1042/InfoNew/GetDayparting",
 			data: {},
 			callBack: function (res) {
+				console.log(res)
 				res.forEach(function (v, n) {
-					phoneName.push(v.name)
-					ldcount.push(v.ldcount)
-					jtcount.push(v.jtcount)
-					wjcount.push(v.wjtcount)
-					fqcount.push(v.zdfqcount);
+					if(v.name!='12345'&&v.name!="归并热线小计"){
+						qtphoneName.push(v.name)
+						qtldcount.push(v.ldcount)
+						qtjtcount.push(v.jtcount)
+						qtwjcount.push(v.wjtcount)
+						qtfqcount.push(v.zdfqcount);
+					}else{
+						sphoneName.push(v.name)
+						sldcount.push(v.ldcount)
+						sjtcount.push(v.jtcount)
+						swjcount.push(v.wjtcount)
+						sfqcount.push(v.zdfqcount);
+					}
+					
 				})
-				trafficDayChart(phoneName, ldcount, jtcount, wjcount, fqcount);
+				trafficDayChart(qtphoneName, qtldcount, qtjtcount, qtwjcount, qtfqcount);
+				getS(sphoneName, sldcount,sjtcount, swjcount, sfqcount)
 			}
 		});
 
 			getRealTimeTraffi(res.data.hours, res.data.hrcount[0], res.data.hccount[0])
 		}
 	});
-	let disStr = ''
-	distributionData.forEach(function (v, n) {
-		disStr += '<li><label>' + v.name + '</label><span class="num_roll" id="">' + parseInt(v.value % 100000 / 10000) +
-			'</span><span class="num_roll" id="">' + parseInt(v.value % 10000 / 1000) +
-			'</span><span class="num_roll" id="">' + parseInt(v.value % 1000 / 100) +
-			'</span><span class="num_roll"id="">' + parseInt((v.value % 100) / 10) +
-			'</span><span class="num_roll" id="">' + parseInt(v.value % 10) + '</span></li>'
-	})
-	$('.callTraffic .data_info').html(disStr)
 	$('.star_btn').click(function (e) {
 		obj.AgentID = zxNum;
 		$(user).each(function (i, n) {

WebChartNewest/js/workOrder.js

 //工单列表
-function workTable(KeyId,deptid,sourceId,honeType,keyword ,type,sourceArea,key,timetype) {
+function workTable(KeyId,deptid,sourceId,PhoneType,keyword ,type,sourceArea,key,timetype,handling) {
 	$('.bulletFrameT').show();
 	$('.workList').show();
 	$('.workList').siblings().hide()
 				KeyId: KeyId,
 				deptid:deptid,
 				sourceId:sourceId,
-				honeType :honeType ,
+				PhoneType :PhoneType ,
 				keyword:keyword,
 				type:type,
 				sourceArea:sourceArea,
 				key:key,
-				timetype:timetype
+				timetype:timetype,
+				handling:handling
 			};
 			return param;
 		},
 	return "<div style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:150px;margin:0 auto;'>" +
 		v + "</div>"
 }
+function getformatterTitle(val) { 
+	return "<div style='display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:150px;margin:0 auto;'>" +
+	val + "</div>"
+ }
 //工单详情
 function btn_detail(id) {
 	detailId = id;