商丘大屏

WebChartBigNew2/css/animation.css

@@ -1,11 +1,54 @@
-.step1_line {
+.step1_bj {
+    background-image: url(../img/step1_bj.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    height: 1510px;
+    width: 240px;
+    left: 800px;  
+	top: 310px;
+    z-index: 999999;
+}
+.step2_bj {
+    background-image: url(../img/step2_bj.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    height: 1012px;
+    width: 232px;
+    left: 2780px;  
+	top: 650px;
+}
+.step3_bj {
+    background-image: url(../img/step3_bj.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    height: 1012px;
+    width: 235px;
+    left: 4730px;  
+	top: 650px;
+    z-index: 3333;
+}
+.step4_bj {
+    background-image: url(../img/step4_bj.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    height: 1530px;
+    width: 220px;
+    left: 6580px;  
+	top: 310px;
+    z-index: 999999;
+}
+.step1_line {
     background-image: url(../img/step1_line.png);
     background-repeat: no-repeat;
     background-position: center center;
     position: absolute;
     height: 1510px;
     width: 240px;
-    /*animation: step2_line 2s linear infinite;*/
+    animation: step2_line 2s linear infinite;
     z-index: 999999;
 }
 .step2_line {
@@ -15,7 +58,7 @@
     position: absolute;
     height: 1012px;
     width: 232px;
-    /*animation: step3_line_l 2s linear infinite;*/
+    animation: step3_line_l 2s linear infinite;
 }
 .step3_line {
     background-image: url(../img/step3_line.png);
@@ -24,7 +67,7 @@
     position: absolute;
     height: 1012px;
     width: 235px;
-   /* animation: step3_line_l 2s linear infinite;*/
+    animation: step3_line_l 2s linear infinite;
     z-index: 3333;
 }
 .step4_line {
@@ -34,44 +77,93 @@
     position: absolute;
     height: 1530px;
     width: 220px;
-   /* animation: step2_line 2s linear infinite;*/
+    left: 4730px;  
+	top: 650px;
+    animation: step4_line_l 2s linear infinite;
     z-index: 999999;
 }
-@keyframes step2_line {
-	0% { clip: rect(1600px, 120px, 1600px, 0px); }
-	50% { clip: rect(0px, 120px, 1600px, 0px); }
-	100% { clip: rect(0px, 120px, 0px, 0px); }
-}
 .posi_line1{
 	left: 800px;  
 	top: 310px;
-	/*animation: step2_line 2s linear 0s infinite;*/
+	animation: step2_line 2s linear 0s infinite;
 	}
-.posi_line3{
+.posi_line2{
 	left: 2780px;  
 	top: 650px;
-	/*animation: step3_line_l 2s linear 4s infinite;*/
+	animation: step3_line_l 2s linear 4s infinite;
 }
-.posi_line4{
+.posi_line3{
 	left: 4730px;  
 	top: 650px;
-	/*animation: step3_line_r 2s linear 6s infinite;*/
+	animation: step3_line_l 2s linear 6s infinite;
 }
-.posi_line5{
+.posi_line4{	
 	left: 6580px;  
 	top: 310px;
-	/*animation: step2_line 2s linear 8s infinite;*/
+	animation: step4_line_l 2s linear 8s infinite;
 }
-
-@keyframes step3_line_l {
-	0% { clip: rect(0px, 0px, 925px, 0px); }
-	50% { clip: rect(0px, 480px, 925px, 0px); }
-	100% { clip: rect(0px, 480px, 925px, 480px); }
+@keyframes step2_line {
+	0% { clip: rect(1540px, 240px, 1540px, 0px); }
+	50% { clip: rect(0px, 240px, 1540px, 0px); }
+	100% { clip: rect(0px, 240px, 0px, 0px); }
 }
-
 @keyframes step3_line_l {
-	0% { clip: rect(0px, 0px, 925px, 0px); }
-	50% { clip: rect(0px, 480px, 925px, 0px); }
-	100% { clip: rect(0px, 480px, 925px, 480px); }
+	0% { clip: rect(0px, 0px, 1012px, 0px); }
+	50% { clip: rect(0px, 235px, 1012px, 0px); }
+	100% { clip: rect(0px, 235px, 1012px, 235px); }
+}
+@keyframes step4_line_l {
+	0% { clip: rect(0px, 1540px, 0px, 0px); }
+	50% { clip: rect(0px, 235px, 1540px, 0px); }
+	100% { clip: rect(1540px, 235px, 1540px, 0px); }
 }
 
+
+
+/*边框*/
+/*动画1*/
+.imaxeventani_1::before,
+.imaxeventani_1::after {
+	content: '';
+	position:absolute;
+	width:684px;
+	height:229px;
+	z-index: 0;
+	left:34px;
+	top:34px;
+	box-shadow: inset 0 0 0 1px #00ffff;
+	border: 5px solid #0d85ff;
+	border-radius:5px;
+	animation: imaxeventani_1 1s linear infinite;
+	z-index: 22;
+}
+.imaxeventani_1::after { z-index: 0; animation-delay: -4s;}
+@keyframes imaxeventani_1 {
+	0%,100% { clip: rect(0px, 684px, 5px, 0px);}
+	25% { clip: rect(0px, 684px, 229px, 679px);}
+	50% { clip: rect(224px, 684px, 229px, 0px);}
+	75% { clip: rect(0px, 5px, 229px, 0px);}
+}
+/*动画2*/
+.imaxeventani_2::before,
+.imaxeventani_2::after {
+	content: '';
+	position:absolute;
+	width:324px;
+	height:900px;
+	z-index: 0;
+	left:0px;
+	top:0px;
+	box-shadow: inset 0 0 0 1px #00ffff;
+	border: 5px solid #0d85ff;
+	border-radius:5px;
+	animation: imaxeventani_2 1s linear infinite;
+	z-index: 22;
+}
+.imaxeventani_2::after { z-index: 0; animation-delay: -4s;}
+@keyframes imaxeventani_2 {
+	0%,100% { clip: rect(0px, 324px, 5px, 0px);}
+	25% { clip: rect(0px, 324px, 900px, 319px);}
+	50% { clip: rect(895px, 324px, 900px, 0px);}
+	75% { clip: rect(0px, 5px, 900px, 0px);}
+}

WebChartBigNew2/css/index.css

@@ -292,6 +292,7 @@
 }
 
 .bot3_con table tbody tr td{
+	position: relative;
 }
 /*.bot3_con table tbody tr td{
 	width: 100%;
@@ -301,6 +302,8 @@
 	width: 100%;
 	height: 225px;
 	margin:35px 5%;
+}
+.orderTextbo{
 	border: 2px solid #095eb4;
 }
 .bot3_con table tbody tr td .td_line1{
@@ -702,23 +705,30 @@
 
 .orderTtype_Con ul li {
 	float: left;
-	background: url(../img/light_kuang2.png) no-repeat center;
 	height: 900px;
 	width: 40%;
 	background-size: 100% 100%;
 	box-sizing: border-box;
 	padding-top: 40px;
-	margin: 0 5%;
+	margin: 0px 5%;
 	position: relative;
 }
 
 .orderTtype_Con ul li img{
 	margin-left: 80px;
 }
-.orderTtype_Con ul li.active {
+.activeli_1{
+	background: url(../img/light_kuang2.png) no-repeat center;
+	background-size: 100% 100%;
+	height: 900px;
+	width: 40%;
+	padding-top: 45px;
+}
+.activeli_2{
 	background: url(../img/light_kuang1.png) no-repeat center;
 	background-size: 100% 100%;
 	height: 900px;
+	width: 40%;
 	padding-top: 45px;
 }
 

WebChartBigNew2/index.html

@@ -16,10 +16,14 @@
 	<body>
 		<!--导航栏结束-->
 		<div id="wrap">
+			<div class="step1_bj"></div>
+			<div class="step2_bj"></div>
+			<div class="step3_bj"></div>
+			<div class="step4_bj"></div>
 			<div class="step1_line posi_line1" ></div>
-			<div class="step2_line posi_line3"></div>
-			<div class="step3_line posi_line4"></div>
-			<div class="step4_line posi_line5"></div>
+			<div class="step2_line posi_line2"></div>
+			<div class="step3_line posi_line3"></div>
+			<div class="step4_line posi_line4"></div>
 			<!--第一列-->
 			<div id="wrap_box1">
 				<div class="box1_tit">坐席统计</div>
@@ -226,7 +230,7 @@
 						<table border="0" cellspacing="" cellpadding="">
 							<tr>
 								<td>
-									<div class="orderText">
+									<div class="orderText orderTextbo">
 										<div class="order_tit td_line1">规划停车位问题</div>
 										<div class="order_bot">
 											<div class="order_time">16:06:02</div>
@@ -2269,9 +2273,9 @@
 					<div class="swiper-container swiper-no-swiping">
 						<div class="swiper-wrapper">
 							<div class="swiper-slide">
-								<div class="orderTtype_Con">
+								<div class="orderTtype_Con orderTtype_Con1">
 									<ul class="clearfix">
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">商丘</div>
 											<div class="img_top">
@@ -2288,7 +2292,7 @@
 											</div>
 											<p class="persent_word">满意度</p>
 										</li>
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">郑州</div>
 											<div class="img_top">
@@ -2305,7 +2309,7 @@
 											</div>
 											<p class="persent_word">满意度</p>
 										</li>
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">南阳</div>
 											<div class="img_top">
@@ -2322,7 +2326,7 @@
 											</div>
 											<p class="persent_word">满意度</p>
 										</li>
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">开封</div>
 											<div class="img_top">
@@ -2345,9 +2349,9 @@
 								</div>
 							</div>
 							<div class="swiper-slide">
-								<div class="orderTtype_Con">
+								<div class="orderTtype_Con orderTtype_Con2">
 									<ul class="clearfix">
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">洛阳</div>
 											<div class="img_top">
@@ -2364,7 +2368,7 @@
 											</div>
 											<p class="persent_word">满意度</p>
 										</li>
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">平顶山</div>
 											<div class="img_top">
@@ -2381,7 +2385,7 @@
 											</div>
 											<p class="persent_word">满意度</p>
 										</li>
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">安阳</div>
 											<div class="img_top">
@@ -2398,7 +2402,7 @@
 											</div>
 											<p class="persent_word">满意度</p>
 										</li>
-										<li class="active">
+										<li class="activeli_1">
 											<img src="img/myd_line.png">
 											<div class="typeWord">鹤壁</div>
 											<div class="img_top">
@@ -2429,6 +2433,6 @@
 		<script src="js/ScrollDiv.js"></script>
 		<script src="js/index.js"></script>
 		<script src="js/sourceChannel.js"></script>
+		<script src="js/animation.js"></script>
 	</body>
-
 </html>

WebChartBigNew2/js/animation.js

@@ -0,0 +1,38 @@
+var index="2";
+var key_index="";
+var startTime="2019-07-01"
+var endTime="2019-07-31"
+$(function () {
+	var orderTd=$(".ssgdtj table tr").length;
+	$(".ssgdtj table tr").children("td").children(".orderText").addClass("orderTextbo")
+	var num =-1;
+	setInterval(function(){
+		num++;
+		if (num==140) {
+			num=0;
+		}
+		$(".ssgdtj table tr").children("td").children(".orderText").removeClass("imaxeventani_1")
+		$(".ssgdtj table tr").eq(1).children("td").children(".orderText").addClass("imaxeventani_1")
+		$(".ssgdtj table tr").children("td").children(".orderText").addClass("orderTextbo")
+		$(".ssgdtj table tr").eq(1).children("td").children(".orderText").removeClass("orderTextbo")
+	},5000);
+	var num1 =-1;
+	setInterval(function(){
+		num1++;
+		if (num1==8) {
+			num1=0;
+		}
+		console.log($(".orderTtype_Con1 ul li").length);
+		console.log(num1);
+		$(".orderTtype_Con1 ul li").removeClass("imaxeventani_2");
+		$(".orderTtype_Con1 ul li").eq(num1).addClass("imaxeventani_2");
+		$(".orderTtype_Con2 ul li").removeClass("imaxeventani_2");
+		$(".orderTtype_Con2 ul li").eq(num1).addClass("imaxeventani_2");
+		
+//		$(".orderTtype_Con1 ul li").eq(num1).addClass("imaxeventani_2");
+//		$(".orderTtype_Con2 ul li").eq(num1+4).addClass("imaxeventani_2");
+	},3000);
+})
+
+
+

WebChartBigNew2/js/index.js

@@ -6,7 +6,7 @@ $(function () {
 	var mySwiper = new Swiper('.swiper-container', {
 		loop: true,
 		autoplay: {
-			delay: 3000,
+			delay: 15000,
 		},
 		pagination: { /* 分页器*/
 			el: '.swiper-pagination',
@@ -37,7 +37,7 @@ $(function () {
 	$(".ssgdtj").Scroll({
 		line: 1,
 		speed: 500,
-		timer: 3000
+		timer: 5000
 	});
 	$(".scroll_table").Scroll({
 		line: 1,