init

css/datav3.q.css

+::-webkit-scrollbar  
+{  
+    width: 3px !important;  
+	height:10px !important;
+	border-radius:100% !important;
+    background-color: #326ea2 !important;  
+}  
+/*定义滚动条轨道 内阴影+圆角*/  
+::-webkit-scrollbar-track  
+{  
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;  
+    border-radius: 15px !important;  
+    background-color: #1ee5f6 !important;  
+}    
+/*定义滑块 内阴影+圆角*/  
+::-webkit-scrollbar-thumb  
+{  
+    border-radius: 10px !important;  
+	width:2px !important;
+    -webkit-box-shadow: inset 0 0 16px rgba(0,0,0,.3) !important;  
+    background-color: #214b75 !important;  
+}  
+.ASipto{
+	position:absolute;
+	width:150px;
+	height:100px;
+	background-color:red;
+	bottom:5%;
+	right:2%;
+	z-index:9999;
+	display:none;
+}
+.ASipfrom{
+	position:absolute;
+	width:150px;
+	height:100px;
+	background-color:red;
+	bottom:5%;
+	right:10%;
+	z-index:9999;
+	display:none;
+}
\ No newline at end of file

css/datav3.q.jpages.css

+.holder {
+	margin: 10px 0;
+	width: 100%;
+	text-align: center;
+	position: absolute;
+	bottom: 102px;
+}
+
+.holder a {
+	font-size: 12px;
+	cursor: pointer;
+	margin: 0 5px;
+	color: #fff;
+}
+
+.holder a:hover {
+	/*background-color: #336699;*/
+	color: #99ccff;
+}
+
+.holder a.jp-previous { margin-right: 15px; }
+.holder a.jp-next { margin-left: 15px; }
+
+.holder a.jp-current, a.jp-current:hover { 
+	color: #FF4242;
+	font-weight: bold;
+}
+
+.holder a.jp-disabled, a.jp-disabled:hover {
+	color: #bbb;
+}
+
+.holder a.jp-current, a.jp-current:hover,
+.holder a.jp-disabled, a.jp-disabled:hover {
+	cursor: default; 
+	background: none;
+}
+
+.holder span { margin: 0 5px; }
\ No newline at end of file

css/datav3.q.left.css

+.leftinfo{
+    width: 290px;
+    height: 270px;
+    position: absolute;
+    top: 60px;
+    left: 20%;
+ }
+ /*************right satr*********/
+ .leftinfo .right{
+     position: absolute;
+     top: 11px;
+     left: 81px;
+     width: 200px;
+     height: 72px;
+     padding: 13px 0;
+     overflow: hidden;
+ }
+ .leftinfo .right span,
+ .leftinfo .right input{	
+     background: #123d61;
+     opacity: 0.7;
+     box-sizing: border-box;	
+ }
+ .leftinfo .right input.error{
+     color: red;
+     font-size: 16px;
+ }
+ .leftinfo .right input{	
+     width: 98%;
+     float: left;
+     height: 46px;
+     line-height: 46px;
+     border: 1px solid #000;
+     border-radius: 4px;
+     box-shadow: 0px 0px 2px 2px #86bedb;
+     padding-left: 30px;
+     padding-right: 48px;
+     color: #fff;
+     font-size: 20px;
+     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+ }
+ .leftinfo .right i{
+     display: inline-block;
+     width: 36px;
+     height: 42px;
+     line-height: 42px;
+     position: absolute;
+     top: 15px;
+     right: 3px;
+     text-align: center;
+     color: #d3c726;
+ }
+ .leftinfo .right .iconfont{
+     color: #d3c726;
+     font-size: 24px;
+     cursor: pointer;
+ }
+ .leftinfo .right .poly{
+     height: 86px;
+     width: 160px;
+     background: url('../images/q/s_input_bg.png') no-repeat;
+     background-size: contain;
+     position: absolute;
+     top: 0;
+     left: 0;
+ }
+ /*************left start*********/
+ .leftinfo .left{
+     width: 110px;
+     height: 100%;
+ }
+ .leftinfo .left .left-wrap{
+     perspective: 500;
+     -webkit-perspective: 500;
+ }
+ .leftinfo .left .left-wrap div{
+     position:absolute;
+     left: 0;
+     width: 110px;
+     height: 102px;
+     /*line-height: 100px;*/
+     transition: all 1s;
+     transform-style: preserve-3d;
+     -webkit-transform-style: preserve-3d;
+     cursor: pointer;
+     /*text-align: center;*/
+     font-size: 28px;
+     color: yellow;
+     font-weight: bold;
+ 
+     /*border: 1px solid red;*/
+ }
+ .leftinfo .left .first{
+     background: url('../images/q/s_sel_bg.png') no-repeat;
+ }
+ .leftinfo .left .left-wrap div:nth-child(1){
+     
+     background-size: contain;
+ }
+ .leftinfo .left .left-wrap div:nth-child(2){
+     /*background: url('../images/q/s_sel_bg.png') no-repeat;*/
+     background-size: contain;
+ }
+ .leftinfo .left .left-wrap div:nth-child(3){
+     /*background: url('../images/q/s_sel_bg.png') no-repeat;*/
+     background-size: contain;
+ }
+ .leftinfo .left .left-wrap img{
+     width: 100%;
+     height: 100%;
+ }
+ 
+ /*.leftinfo .left .left-wrap div:nth-child(1),*/
+ .leftinfo .left .left-wrap div:nth-child(2),
+ .leftinfo .left .left-wrap div:nth-child(3){
+     transform:rotate(360deg) scale(0.75) ;
+ }
+ /*.leftinfo .left .left-wrap div:nth-child(1):hover,
+ .leftinfo .left .left-wrap div:nth-child(2):hover,
+ .leftinfo .left .left-wrap div:nth-child(3):hover{
+     transform: scale(1) rotate(360deg);
+ }*/
+ .leftinfo .left .left-wrap .first{
+     top: 0;  
+     transform: rotate(0deg) scale(1) ; 
+ }
+ .leftinfo .left .left-wrap div:nth-child(2){
+     top: 95px;
+ }
+ .leftinfo .left .left-wrap div:nth-child(3){
+     top: 170px;
+ }
+ /*左下按钮*/
+ .myleft .log,
+ .myleft .phy{
+     width:74px;
+     height:54px;
+     position: absolute;
+     right:30%;
+     background-size: cover;
+     border: none;
+     border-radius:  10px; 
+     overflow: visible;
+     opacity: 0.4;
+     transition: all 0.7s;
+     cursor: pointer;
+     background-color: #333;	
+ }
+ .myleft .log{
+     bottom: 180px;
+ }
+ .myleft .phy{
+     bottom: 100px;
+ }
+ .myleft .active{
+     background-color: #003366;
+     opacity: 1;
+ }
+ .myleft .log div,
+ .myleft .phy div{
+     width: 92px;
+     height: 54px;
+     border: none;
+     background: url('../images/q/switch_log_phy.png') no-repeat;
+ }
+ .myleft .log div{
+     background-position: 0px -59px;	
+ }
+ .myleft .log .active{
+     background-position: 0px 0px;	
+ }
+ .myleft .phy div{
+     background-position: -99px -59px;		
+ }
+ .myleft .phy .active{
+     background-position: -99px 0px;		
+ }
+ 
+ 
+ 
+ 
+ 
+ 
+ 
\ No newline at end of file

css/datav3.q.loading.css

+.loadingContainer,
+.loading-rblist{
+	display: none;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0.6;
+	background-color: #333;
+	text-align: center;
+	z-index: 1000;
+	transition: all 0.5s;
+	-moz-transition: all 0.5s;	/* Firefox 4 */
+	-webkit-transition: all 0.5s;	/* Safari 和 Chrome */
+	-o-transition: all 0.5s
+}
+.loadingContainer div,
+.loading-rblist div{
+	/*margin:0 auto;*/
+	position: absolute;
+	top: 50%;
+	left: 50%;
+}
+.loadingContainer div{
+	width:100px;
+	height:100px;
+	margin-top: -50px;
+	margin-left: -50px;
+	background:url(../images/feihu_sprit.png) 0 0 no-repeat;
+	-webkit-animation-name: charector-1;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-timing-function: step-start;
+	-webkit-animation-duration: .3s;
+}
+@-webkit-keyframes charector-1{
+    0% {background-position: 0 0;}
+    12.5% {background-position: -100px 0;}
+    25% {background-position: -200px 0;}
+    37.5% {background-position: -300px 0;}
+    50% {background-position: -400px 0;}
+    62.5% {background-position: -500px 0;}
+    87.5% {background-position: -600px 0;}
+    100% {background-position: -700px 0;}
+}
+.loading-rblist{
+	background-color: transparent;
+}
+.loading-rblist div{
+	width:30px;
+	height:30px;
+	margin-top: -15px;
+	margin-left: -15px;
+	border: 3px solid #ccc;
+	/*border-top-color: red;*/
+	/*border-bottom-color: #333;*/
+	/*border-left-color: #333;*/
+	border-right-color: #333;
+    border-radius: 50%;
+    animation:rotate 0.5s infinite linear;
+}

css/datav3.q.middle.css

+.mymiddle .WebGL-output{
+	position:absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 99;
+}
+.mymiddle canvas{
+   position: absolute;
+}
+.mymiddle #map_topoin{
+	width:100%;
+	height:100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	background-color:transparent;
+	display: none;	
+}
+.mymiddle #map_topoin.active{
+	z-index: 100;
+	display: block;
+}
+/*中间注释效果*/
+.mymiddle .tips{
+	position: absolute;
+	bottom: 65px;
+	left: 60px;
+	
+}
+.mymiddle .tips li,
+.mymiddle .logrouter_tips li,
+.mymiddle .phyrouter_tips li{
+	height: 20px;
+	line-height: 20px;
+}
+.mymiddle .tips li{
+	display: none;
+}
+.mymiddle .tips li span:nth-child(2){
+	margin-left: 10px;
+	font-size: 8px;
+}
+.mymiddle .tips li .icon,
+.mymiddle .logrouter_tips li .icon,
+.mymiddle .phyrouter_tips li .icon{
+	display: inline-block;
+	vertical-align: middle;
+	width: 16px;
+	height: 16px;	
+	/*border: 1px solid red;*/
+}
+.mymiddle .tips .notes li .tri{	
+	width: 0;
+	height: 0;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	border-bottom: 16px solid #fff;
+}
+.mymiddle .tips .notes li .rec{	
+	width: 14px;
+	height: 14px;
+	margin: 1px;
+	background-color: #fff;
+}
+.mymiddle .tips .notes li .circle{	
+	border: 2px solid #fff;
+	border-radius: 50%;
+	background-color: #fff;
+}
+.mymiddle .tips .notes li .rec-hole{
+    width: 14px;
+	height: 14px;
+	margin: 1px;	
+	border: 2px solid #fff;
+}
+.mymiddle .tips .notes li .line{	
+	transform-origin: 0 0;
+	transform: rotate(315deg);
+	-webkit-transform: rotate(315deg) translate(0px,3px);
+}
+.mymiddle .tips .notes li:nth-child(5) .line{
+	 border-left: 2px solid #cc3333;
+}
+.mymiddle .tips .notes li:nth-child(6) .line{
+	border-left: 2px solid #339900;
+    
+}
+.mymiddle .tips .notes li:nth-child(7) .line{
+    border-left: 2px solid #33cccc;
+}
+.mymiddle .tips .notes li:nth-child(8) .line{
+   border-left: 2px solid #cccc33;
+}
+.mymiddle .tips .notes li:nth-child(9) .line{
+    border-left: 2px solid #ac7d17;
+}
+.mymiddle .tips .grad{
+	margin-top: 10px;
+}
+.mymiddle .tips .grad img{
+	width: 304px;
+	height: 37px;
+}
+.mymiddle .tips .grad ul{
+	width: 344px;
+}
+.mymiddle .tips .grad ul li{
+	display: inline-block;
+	font-size: 8px;
+	width: 47px;
+	margin-left: -16px;
+	float: left;
+}
+/*域内路由的注释*/
+.phyrouter_tips,
+.inter_r_tips,
+.logrouter_tips {
+	position: absolute;
+	z-Index: 1000;
+	bottom: 65px;
+	left: 60px;
+	font-size: 12px;
+	color: white;
+}
+.logrouter_tips,
+.inter_r_tips,
+.phyrouter_tips{
+	display: none;
+}
+.logrouter_tips li,
+.inter_r_tips li,
+.phyrouter_tips li{
+   margin-top: 10px;
+}
+.mymiddle .logrouter_tips li span:nth-child(2),
+.mymiddle .inter_r_tips li span:nth-child(2),
+.mymiddle .phyrouter_tips li span:nth-child(2){
+	margin-left: 10px;
+	font-size: 14px;
+	height: 20px;
+	line-height: 18px;
+	vertical-align: bottom;
+}
+.mymiddle .tips li .icon,
+.mymiddle .logrouter_tips li .icon,
+.mymiddle .inter_r_tips li .icon,
+.mymiddle .phyrouter_tips li .icon{
+	display: inline-block;
+	vertical-align: middle;
+	width: 16px;
+	height: 16px;	
+	/*border: 1px solid red;*/
+}
+.logrouter_tips li .icon{
+	border-radius: 8px;
+}
+.logrouter_tips li:nth-child(1) .icon{
+	background-color: rgb(255, 190, 15);
+}
+.logrouter_tips li:nth-child(2) .icon{
+	background-color: rgb(237, 31, 31);
+}
+.logrouter_tips li:nth-child(3) .icon{
+	background-color: rgb(110, 205, 222);
+}
+
+.phyrouter_tips li:nth-child(1) .icon{
+	background-image: url('../images/corerouter.png');
+	background-size: contain; 
+}
+.inter_r_tips li:nth-child(1) .icon,
+.phyrouter_tips li:nth-child(2) .icon{
+	background-image: url('../images/intermediaterouter.png');
+	background-size: contain; 
+}
+.inter_r_tips li:nth-child(2) .icon,
+.phyrouter_tips li:nth-child(3) .icon{
+	background-image: url('../images/arearouter.png');
+	background-size: contain; 
+}
+
+/*地理拓扑四个选项ICON START*/
+.mymiddle .chose_icon {
+	position: absolute;
+	width: 200px;
+	height: 40px;
+	right: 180px;
+	margin-top: 60px;
+	z-index: 999;
+}
+
+.mymiddle .chose_icon .myicon {
+	width: 25px;
+	height: 25px;
+	position: relative;
+	background-color: #03A9F4;
+	border-radius: 50%;
+	display: inline-block;
+	margin-right: 10px;
+	text-align: center;
+}
+
+@-moz-keyframes rotate {
+	0% {
+		-moz-transform: rotate(0deg);
+	}
+
+	100% {
+		-moz-transform: rotate(360deg);
+	}
+}
+
+@-webkit-keyframes rotate {
+	0% {
+		-webkit-transform: rotate(0deg) scale(1.2);
+	}
+
+	100% {
+		-webkit-transform: rotate(360deg) scale(1.2);
+	}
+}
+
+@keyframes rotate {
+	0% {
+		transform: rotate(0deg) scale(1.2);
+	}
+
+	100% {
+		transform: rotate(360deg) scale(1.2);
+	}
+}
+
+.mymiddle .chose_icon .myicon:before {
+	content: '';
+	display: block;
+	position: absolute;
+	overflow: hidden;
+	border: 1.5px dashed #03A9F4;
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	top: -1px;
+	left: -1px;
+	animation: rotate 20s infinite linear;
+	cursor: pointer;
+}
+
+.mymiddle .chose_icon .myicon i {
+	line-height: 25px;
+	color: #c1e0ef;
+}
+
+.mymiddle .chose_icon .myicon.active i {
+	color: #FF9800;
+}
+
+.mymiddle .chose_icon .myicon.active:before {
+	animation: none;
+	transform: scale(1.2);
+}
+
+.mymiddle .chose_icon .myicon .tooltip {
+	position: absolute;
+	top: 35px;
+	left: -14px;
+	display: block;
+	width: 60px;
+	z-index: 200;
+	font-size: 10px;
+	line-height: 22px;
+	text-align: center;
+	padding: 0px 10px;
+	color: rgb(255, 255, 255);
+	overflow: hidden;
+	border-radius: 2px;
+	background: rgba(32,68,94,0.7);
+	 /* left: -10px; */
+	transition: all 1s;
+	box-sizing: border-box;
+	opacity: 0;
+}
+
+/*地理拓扑四个选项ICON END*/
+
+/*前进后退按钮*/
+.mymiddle .btn-bf{	
+	position: absolute;
+	right: 148px;
+	bottom: 54px;
+	z-index: 999;
+}
+.mymiddle .btn-bf  button{	
+	height: 30px;	
+	cursor: pointer;
+	border-radius: 4px;
+	color: #fdc420;
+	background-color: transparent;
+	border: 1px solid #03A9F4;
+	opacity: 0.8;
+	transition: all 0.5s;
+	position: relative;
+	/*-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%);*/
+}
+.mymiddle .btn-bf  button::before{
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 0%;
+	height: 100%;
+	opacity: 0;
+	background-color: #03a9f4;
+	/*opacity: 0.5;*/
+	-webkit-transition: all 0.3s;
+	-moz-transition: all 0.3s;
+	-o-transition: all 0.3s;
+	transition: all 0.3s;
+}
+.mymiddle .btn-bf  button:hover::before{
+	opacity: 0.5;
+	width: 100%;
+}
+.mymiddle .btn-bf .btn-fore,
+.mymiddle .btn-bf .btn-back{
+	width: 40px;
+}
+.mymiddle .btn-bf  button .iconfont{
+	color: #fdc420;
+}
+.mymiddle .btn-bf .backtodomainouter,
+.mymiddle .btn-bf .intodomain{
+	/*width: 70px;	*/
+	display: none;
+	z-index: 1000;
+}
+.mymiddle .btn-bf button:hover{
+	/*background-color: #003366;*/
+	/*border-color: #003366;*/	
+}
+
+.mymiddle .info_router{
+	position: absolute;
+	border-radius: 5px;
+	/*background-color: #333;*/
+	/*opacity: 0.9;*/
+	color: #fff;
+	padding: 6px;
+	font-size: 14px;
+	display: none;
+	z-index: 1000;
+	border: 1px solid #43a8ce;
+	max-width: 250px;
+	word-wrap: break-word;
+}
+
+.mymiddle .info_router p span{
+	display: inline-block;
+	/*width: 100%;*/
+	/*width: 80px;*/
+}
+

css/datav3.q.right.table.css

+/****************common**********/
+.right-btm .content {
+    margin-top: 88px;
+    margin-left: 16px;
+    width: 464px;
+    height: 300px;
+    /*margin: 0 auto;*/
+    overflow: scroll;
+    overflow-x: hidden;
+  }
+  
+  .right-btm .content table {
+    font-size: 8px;
+    text-align: center;
+    border-collapse: separate;
+    width: 450px;
+    transition: all 0.5s;
+  }
+  
+  .right-btm .content table td {
+    vertical-align: middle;
+  }
+  
+  .right-btm .content .content-title,
+  .right-btm .content .content-list {
+    margin: 3px;
+    margin-top: 4px;
+  }
+  
+  .right-btm .content .content-title {
+    border: 2px solid #17496a;
+    box-shadow: 0 0 2px 1px #17496a;
+    padding: 10px 4px;
+    position: fixed;
+    margin-top: -56px;
+  }
+  
+  .right-btm .content .content-title tr th {
+    border: 1px solid #17496a;
+    box-shadow: 0 0 10px 2px #17496a;
+    vertical-align: middle;
+  }
+  
+  .right-btm .content .content-title tr:last-child th {
+    border-top: none;
+  }
+  
+  .right-btm .content .content-list {
+    padding: 4px;
+    background-color: #0c2031;
+    border: 1px solid #17496a;
+    -webkit-animation-name: animation-table;
+    -webkit-animation-iteration-count: 1;
+    -webkit-animation-timing-function: ease;
+    -webkit-animation-duration: .5s;
+    transition: all 500ms ease, opacity 250ms ease;
+  }
+  
+  @-webkit-keyframes animation-table {
+    0% {
+      transform: rotateX(60deg);
+      opacity: 0;
+    }
+  
+    50% {
+      transform: rotateX(30deg);
+      opacity: 0.5;
+    }
+  
+    100% {
+      transform: rotateX(0deg);
+      opacity: 1;
+    }
+  }
+  
+  .right-btm .content .content-list tr {
+    cellspacing: 2px;
+  }
+  
+  .right-btm .content .content-list tr td {
+    border-right: 1px solid #17496a;
+    vertical-align: middle;
+  }
+  
+  .right-btm .content .content-list tr td:last-child {
+    border-right: none;
+  }
+  
+  .right-btm .content .active {
+    border-color: #a59018;
+    background-color: #423e1b;
+    box-shadow: 0 0 0px 2px #423e1b, 0 0 0px 3px #6f6c16;
+  }
+  
+  .right-btm .content .content-list:hover {
+    border-color: #a59018;
+    background-color: #423e1b;
+    box-shadow: 0 0 0px 2px #423e1b, 0 0 0px 3px #6f6c16;
+  }
+  
+  /*针对每个列表的单独处理*/
+  /*.right-btn .aslist,*/
+  .right-btm .countrylist {
+    display: none;
+  }
+  
+  .right-btm .listContainer {
+    /*height: 100%;*/
+  }
+  
+  /*as列表及相邻as列表*/
+  .right-btm .aslistStyle .content-title,
+  .right-btm .aslistStyle .content-list {
+    height: 56px;
+  }
+  
+  .right-btm .aslistStyle .content-title tr th,
+  .right-btm .aslistStyle .content-list tr td {
+    width: 40px;
+  }
+  
+  .right-btm .aslistStyle table tr .ipv,
+  .right-btm .aslistStyle table tr .ccip {
+    width: 79px;
+  }
+  
+  .right-btm .aslistStyle table tr .type {
+    width: 85px;
+  }
+  
+  /*国家列表*/
+  .right-btm .countrylistStyle .content-title,
+  .right-btm .countrylistStyle .content-list {
+    height: 40px;
+  }
+  
+  .right-btm .countrylist .content-title,
+  .right-btm .adjacentcountrylist .content-title {
+    margin-top: -49px;
+  }
+  
+  .right-btm .countrylistStyle .content-title tr th,
+  .right-btm .countrylistStyle .content-list tr td {
+    width: 60px;
+  }
+  
+  .right-btm .countrylistStyle table tr th:nth-child(5),
+  .right-btm .countrylistStyle table tr td:nth-child(5) {
+    width: 90px;
+  }
+  
+  /*与X国相连的AS列表*/
+  .right-btm .countrysaslist .content-title {
+    /*margin-top: -49px;*/
+  }
+  
+  .right-btm .countrysaslist .content-title,
+  .right-btm .countrysaslist .content-list {
+    height: 56px;
+  }
+  
+  .right-btm .countrysaslist .content-title tr th,
+  .right-btm .countrysaslist .content-list tr td {
+    width: 56px;
+  }
+  
+  .right-btm .countrysaslist table tr th:nth-child(3),
+  .right-btm .countrysaslist table tr td:nth-child(3) {
+    width: 84px;
+  }
+  
+  .right-btm .countrysaslist table tr th:nth-child(5),
+  .right-btm .countrysaslist table tr td:nth-child(5) {
+    width: 136px;
+  }
+  
+  .right-btm .countrysaslist .content-list tr:nth-child(2) td:last-child {
+    border-right: 1px solid #17496a;
+  }
+  
+  /*域内路由器列表*/
+  .right-btm .routerlist .content-title tr th,
+  .right-btm .routerlist .content-list tr td,
+  .right-btm .routeredgelist .content-title tr th,
+  .right-btm .routeredgelist .content-list tr td {
+    width: 72px;
+  }
+  
+  .right-btm .routerlist .content-title tr th:nth-child(1),
+  .right-btm .routerlist .content-list tr td:nth-child(1) {
+    width: 50px;
+  }
+  
+  .right-btm .routeredgelist .content-title tr th:nth-child(1),
+  .right-btm .routeredgelist .content-list tr td:nth-child(1) {
+    width: 100px;
+  }
+  
+  .right-btm .routeredgelist .content-title tr th:nth-child(6),
+  .right-btm .routeredgelist .content-list tr td:nth-child(6) {
+    width: 100px;
+  }
+  
+  .right-btm .routerlist .content-title tr th:nth-child(2),
+  .right-btm .routerlist .content-list tr td:nth-child(2) {
+    min-width: 94px;
+  }
+  
+  .right-btm .routerlist .content-list .row1 td:nth-child(2),
+  .right-btm .routerlist .content-list .row1 td:nth-child(6),
+  .right-btm .routeredgelist .content-list td.mult,
+  .right-btm .routeredgelist .content-list td.mult {
+    position: relative;
+  }
+  
+  .right-btm .routerlist .content-list .row1 td:nth-child(6) {
+    min-width: 50px;
+    max-width: 50px;
+  }
+  
+  .right-btm .routerlist .content-list .row1 td:nth-child(6) span,
+  .right-btm .routerlist .content-list .row1 td:nth-child(2) span,
+  .right-btm .routeredgelist .content-list td span {
+    display: inline-block;
+    width: 98%;
+    padding: 2px 0;
+    border: 1px solid #fff;
+    border-right: 1px solid #fff !important;
+    background-color: #000;
+    cursor: pointer;
+  }
+  
+  .right-btm a {
+    text-decoration: none;
+  }
+  
+  .right-btm .routerlist .content-list .row1 td:nth-child(6) ul,
+  .right-btm .routerlist .content-list .row1 td:nth-child(2) ul,
+  .right-btm .routeredgelist .content-list td ul {
+    display: none;
+    float: left;
+    position: absolute;
+    width: 100%;
+    /*width: 129px;*/
+    /*margin-left: 3%;*/
+    /*box-sizing: domainin-box;*/
+    border: 3px solid #17496a;
+    background-color: #ccc;
+    /*padding-top: 1px;*/
+    padding-bottom: 1px;
+    z-index: 100;
+  }
+  
+  .right-btm .routerlist .content-list .row1 td:nth-child(6) ul li,
+  .right-btm .routerlist .content-list .row1 td:nth-child(2) ul li,
+  .right-btm .routeredgelist .content-list td ul li {
+    background-color: #000;
+    /*width: 98%;*/
+    overflow: hidden;
+    border: 1px solid #17496a;
+    border-radius: 6px;
+    /*box-shadow: 0 0 6px #fff;*/
+    /*margin-left: 1%;*/
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+  
+  /*多个AS的域内*/
+  .right-btm .listContainer .routerlist2 .content-title tr th:nth-child(1),
+  .right-btm .listContainer .routerlist2 .content-list tr td:nth-child(1) {
+    width: 107px;
+    /* min-width: 107px;
+     max-width: 107px;*/
+  }
+  
+  .right-btm .listContainer .routerlist2 .content-title tr th:nth-child(6),
+  .right-btm .listContainer .routerlist2 .content-list tr td:nth-child(6) {
+    min-width: 70px;
+    max-width: 70px;
+  }
+  
+  .right-btm .listContainer .routerlist2 .content-title tr th:nth-child(7),
+  .right-btm .listContainer .routerlist2 .content-list tr td:nth-child(7) {
+    min-width: 70px;
+    max-width: 70px;
+  }
+  
+  .right-btm-error {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 170px;
+    /*border-top: 1px dashed #b35537;*/
+    /*border-bottom: 1px dashed #b35537;*/
+    width: 100%;
+    text-align: center;
+    padding: 10px 4px 10px 0px;
+    margin: 20px;
+    color: #b35537;
+    font-family: "Microsoft YaHei", Arial;
+  }
+  
\ No newline at end of file

css/datav3.q.topoin.css

+/*域内地理拓扑*/
+#map_topoin{
+    position: relative;
+    z-index: 99;
+  }
+  .mymiddle .marker-msg{
+    display: none;
+    position: absolute;
+    max-width: 330px;
+    min-height: 50px;
+    overflow: auto;
+    border: 1px solid #1dd2e3;
+    padding: 10px;
+    background: rgba(20,53,72,0.7);
+    z-index: 199;
+    vertical-align: center;
+    font-size: 12px;
+  }
+  .mymiddle .marker-msg .content .loading{
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 40%;
+    height: 80px;
+  }
+  .mymiddle .marker-msg .content p{
+    margin-bottom: 4px;
+  }
+  .mymiddle .marker-msg .iconfont{
+    /*display: block;*/
+    /*width: 20px;*/
+    /*height: 20px;*/
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    font-size: 20px;
+    cursor: default;
+    cursor: pointer;
+  }
+  .mymiddle .leaflet-popup-content-wrapper,
+  .mymiddle .leaflet-popup-tip {
+    /*background: rgba(36, 75, 105, 0.7);*/
+    background: rgba(63, 150, 229, 0.7);
+  }
+  .leaflet-control-attribution{
+    display: none !important;
+  }
+  .mymiddle .leaflet-popup-content {
+    margin: 5px 20px 5px 15px;
+    }
+  .mymiddle .leaflet-popup-content p {
+    margin: 4px 0;
+    }
+  .mymiddle .leaflet-marker-pane grey{
+    /*filter:  grayscale(1) brightness(.9);*/
+  }
+  .coreIcon,
+  .interIcon,
+  .areaIcon{
+    line-height: 29px;
+    text-align: center;
+    font-size: 12px;
+    transition: all 0.3s;
+    opacity: 0.5;
+    /*transform: translateZ(0px);*/
+    /*border: 1px solid red;*/
+    border-radius: 50%;
+    background-color: transparent;
+  }
+  .areaIcon{
+    color: rgb(4,163,249);
+  
+  }
+  .interIcon{
+    color: rgb(216,30,6);
+  }
+  .coreIcon{
+    color: rgb(244,234,42);
+  }
+  .mymiddle .leaflet-marker-pane .grey{
+    color: rgba(158,158,158,0.1);
+    /*opacity: 0.1;*/
+  }
+  .mymiddle .leaflet-marker-pane .active{
+  /*  width: 30px;
+    height: 30px;*/
+    opacity: 1;
+    font-size: 27px;
+    background-color: #0d2f2f;
+  /*  margin-bottom: 2px;*/
+    /*-webkit-transform: translateZ(100px);*/
+    /*transform: translateZ(100px);*/
+  }
+  /*.zr-element,*/
+  .leaflet-webgl{
+    pointer-events: none;
+  }
+  
+  
+  
+    
+  
\ No newline at end of file

css/reset.css

+/* v3.0 | 201704
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+	box-sizing:border-box;
+    color: #fff;
+    font-family: microsoft yahei;	
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file

js/common/loading.js

+var loading ={
+	configure:{
+	   show: true,
+	   contaniner: null
+	},
+	set: function(options){
+       this.configure.show = options.show;
+       this.configure.contaniner = options.contaniner;
+	},
+	start:function(){  
+	   var container = this.configure.container || $('body');  
+        if(this.configure.show){
+        	if(!$('.loading').get(0)){
+        		if(!$('#loadingContainer').get(0)){
+        			container.append('<div class = "loadingContainer" id="loadingContainer"><div></div></div>');
+        		}else{
+        			$('#loadingContainer').css({display: 'block'});
+        		}
+        	}
+        }        
+	},
+
+	done: function(){
+		if(this.configure.show){
+			$('#loadingContainer').css({display: 'none'});
+		}		
+	},
+}
+
+// $(document).ajaxStart(function(){
+//     loading.start()
+// })
+// $(document).ajaxStop(function(){
+// 	loading.done()
+// })
\ No newline at end of file

js/common/tools.js

+function keydownEvent(obj) {
+    var e = window.event || arguments.callee.caller.arguments[0];
+    if (e && e.keyCode == 13 ) {
+          e.preventDefault();
+        jQuery("#"+jQuery(obj).data("btn")+"").click();
+    }
+}

js/cookie/cookie.js

+var CookieUtil = {
+    set : function (name, value, expires, domain, path, secure) {
+      var cookieText = "";
+      cookieText += encodeURIComponent(name) + "=" + encodeURIComponent(value);
+      if (expires instanceof Date) {
+        cookieText += "; expires=" + expires.toGMTString();
+      }
+      if (path) {
+        cookieText += "; path=" + path;
+      }
+      if (domain) {
+        cookieText += "; domain=" + domain;
+      }
+      if (secure) {
+        cookieText += "; secure";
+      }
+      document.cookie = cookieText;
+    },
+    get : function (name) {
+      var cookieName = encodeURIComponent(name) + "=",
+        cookieStart = document.cookie.indexOf(cookieName),
+        cookieValue = "";
+      if (cookieStart > -1) {
+        var cookieEnd = document.cookie.indexOf (";", cookieStart);
+        if (cookieEnd == -1) {
+          cookieEnd = document.cookie.length;
+        }
+        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
+      }
+      return cookieValue; 
+    },
+    unset : function (name, domain, path, secure) {
+      this.set(name, "", Date(0), domain, path, secure);
+    }
+  };
+  
+  
+  
\ No newline at end of file

js/datav3.config.js

+var datav_config = {
+	server_url: '/',
+	init: function(){
+		this.ajax_images_url = this.getUrl('images/');
+		this.ajax_data_url = this.getUrl('data/');
+	},
+	getUrl: function(url) {
+		return this.server_url+url;
+	},
+	t1_ajax_url:'/',//探路
+	t1_ajax_url:'/tanlu/',//探路
+	t1_socket_url:'/',//探路
+	bt_ajax_url: '/bt/control/',//bt	
+	// twitter_bg_ajax_url:'//103.242.109.55:5000/',//twitter后台
+	twitter_bg_ajax_url:'/',//twitter后台
+	images_url:'images/',
+	twitter_photo:'images/twitterhead',	
+	twitter_pics:'images/twitterhead/media/',
+	// mapboxUrl_url:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' // 在线地图 
+	mapboxUrl_url: '/map_tile/{z}/{x}/{y}.png'
+};
+
+datav_config.init();
\ No newline at end of file

js/leaflet/dist/spider/MarkerCluster.Default.css

+.marker-cluster-small {
+    /* background-color: rgba(181, 226, 140, 0.6); */
+    background-color: rgba(3, 169, 244, .3);
+  }
+  
+  .marker-cluster-small div {
+    /*background-color: rgba(110, 204, 57, 0.6);*/
+    background-color: rgba(3, 169, 244, .8);
+  }
+  
+  .marker-cluster-medium {
+    background-color: rgba(241, 211, 87, 0.6);
+  }
+  
+  .marker-cluster-medium div {
+    background-color: rgba(240, 194, 12, 0.6);
+  }
+  
+  .marker-cluster-large {
+    background-color: rgba(253, 156, 115, 0.6);
+  }
+  
+  .marker-cluster-large div {
+    background-color: rgba(241, 128, 23, 0.6);
+  }
+  
+  /* IE 6-8 fallback colors */
+  .leaflet-oldie .marker-cluster-small {
+    background-color: rgb(181, 226, 140);
+  }
+  
+  .leaflet-oldie .marker-cluster-small div {
+    /*background-color: rgb(110, 204, 57);*/
+    background-color: rgba(3, 169, 244, .6);
+  }
+  
+  .leaflet-oldie .marker-cluster-medium {
+    background-color: rgb(241, 211, 87);
+  }
+  
+  .leaflet-oldie .marker-cluster-medium div {
+    background-color: rgb(240, 194, 12);
+  }
+  
+  .leaflet-oldie .marker-cluster-large {
+    background-color: rgb(253, 156, 115);
+  }
+  
+  .leaflet-oldie .marker-cluster-large div {
+    background-color: rgb(241, 128, 23);
+  }
+  
+  .marker-cluster {
+    background-clip: padding-box;
+    border-radius: 20px;
+  }
+  
+  .marker-cluster div {
+    width: 30px;
+    height: 30px;
+    margin-left: 5px;
+    margin-top: 5px;
+  
+    text-align: center;
+    border-radius: 15px;
+    font: 12px "Microsoft YaHei", Arial;
+  }
+  
+  .marker-cluster span {
+    line-height: 30px;
+  }
+  
\ No newline at end of file

js/leaflet/dist/spider/MarkerCluster.css

+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

js/q/datav3.q.common.js

+var map = null;
+var phyTopoin =null;
+var phyInterRouter =null;
+
+// $('.mymiddle').append('<div id="map_topoin"></div>');
+
+function init_map(){	
+	var centerLatlng = [23.992992, 121.108716];  
+	var mapboxUrl_url = datav_config.mapboxUrl_url;
+	var defaultScale = 8;
+
+	$('#map_topoin').addClass('active');
+	$('#map_topoin').show();
+	map = L.map('map_topoin',{
+	  zoomControl:false,
+	  closePopupOnClick:true,
+	  preferCanvas: true,
+	  // zoomDelta:0.5,
+	  // wheelDebounceTime:60,
+	  // wheelPxPerZoomLevel: 120,
+	  // maxZoom: 6
+	});
+	map.setView(centerLatlng, defaultScale);
+	L.tileLayer(mapboxUrl_url, {
+	    attribution: '',
+	}).addTo(map);  
+	    
+	zoom = L.control.zoom().addTo(map);
+	zoom.setPosition("topright")
+}
+
+function clear_map(){
+	map.remove();
+	map = null;
+	$('#map_topoin').removeClass('active');
+	$('#map_topoin').hide();
+}
+
+// 清除所有图形
+function removeAllMap(){
+    clearRouterIn();
+    removePhyTopoin();
+    removephyInterRouter();
+    clearDatavjs();
+}
+
+function removeRMap(){
+    clearRouterIn();
+    removePhyTopoin();
+    removephyInterRouter();
+}
+
+function clearRouterIn(){
+  if(logicRouterIn){
+    logicRouterIn.clear();
+    logicRouterIn = null;
+  }
+}
+
+function removePhyTopoin(){
+  if(phyTopoin && phyTopoin.remove){
+    phyTopoin.remove();
+    phyTopoin = null;
+  }
+}
+
+function removephyInterRouter(){
+	// console.log(phyInterRouter)
+  if(phyInterRouter){
+    // phyInterRouter.remove();
+    map.remove();
+    map = null;
+    $('.inter_r_tips').hide();
+    // $('#map_topoin').slideDown();
+    $('#map_topoin').removeClass('active');
+    // $('#map_topoin').hide();
+    phyInterRouter = null;
+  }
+}
+
+function clearDatavjs(){
+	if(datavjs && datavjs.util_clear_geometry){
+		datavjs.util_clear_geometry();
+	}	
+}

js/q/datav3.q.exportdata.js

+
+$('#logic-export').click(function(){
+    var inputValue = $(this).siblings('input').val();
+  
+    var currentHeaderCountrycode = $('.logic_info_country .info_right .infos .countryCode').text();
+    var currentHeaderAs = $('.logic_info_as .info_right .colum1 span').eq(1).text();
+  
+    switch(type_current){
+      case 'global': exportDataInGlobal(inputValue);break;
+      case 'countryin': exportDataInCountryin(inputValue);break;
+      case 'countryout': exportDataInCountryout(inputValue);break;
+      case 'asin': exportDataInAsin(inputValue);break;
+      case 'asout': exportDataInAsout(inputValue);break;
+      case 'asinterface': exportDataInAsinterface(inputValue);break;
+    }
+  })
+  
+  //总共6个接口
+  // exportData('getCountryInfoToExport',key,value);
+  // exportData('getASInfoByKeyWord',key,value);
+  // exportData('getEdgeInfoByAS',key,value);
+  // exportData('getCountryEdgeInfo',key,value);
+  // exportData("getEdgeBetweenCountry",key,value);
+  function exportData(url,key,value,key1,value1,key2,value2){
+  
+    $('#export-form').attr({'action':datav_config.server_url+'visual/control/vs/v3/exportData/'+url})    
+    $('#export-form').find('.search-input').attr({'name':key})
+    $('#export-form').find('.search-input').val(value);
+    $('#export-form').find('.search-input1').attr({'name':key1})
+    $('#export-form').find('.search-input1').val(value1);
+    $('#export-form').find('.search-input2').attr({'name':key2})
+    if(value2){
+      $('#export-form').find('.search-input2').val(value2);
+    }else{
+      $('#export-form').find('.search-input2').val('');
+    }
+    // $('#export-form').find('.search-input3').val(value3);
+    // $('#export-form').find('.search-input3').attr({'name':key3})
+    // $('#export-form').find('.search-input3').val('');
+    $('#logic-export').submit();  
+  }
+  
+  function exportDataInGlobal(inputValue){
+  
+       // if(inputValue && isCountry(inputValue)){
+       //  exportData('getCountryInfoToExport','key',inputValue);
+       // }else if(inputValue && isAsnumber(inputValue)){
+       //  exportData('getASInfoByKeyWord','key',inputValue);
+       // }else if(inputValue == ''){
+       //     switch(contentlist_btnstatus){
+       //      case '1': exportData('getCountryInfoToExport','key','');break;
+       //      case '2': exportData('getASInfoByKeyWord','key','');break;
+       //     }
+       // }else{
+       //   console.log('请输入正确的AS号或国家，输入为空时导出全部')
+       // }
+       // 
+        switch(contentlist_btnstatus){
+          case '1': handleExportInCountry();break;
+          case '2': handleExportInAs();break;
+          case '3': handleExportInAsedge();break;
+        }
+  
+        function handleExportInCountry(){
+          if(inputValue && isCountry(inputValue)){
+            exportData('getCountryInfoToExport','key',inputValue,'','','','');
+          }else if(inputValue == ''){
+            exportData('getCountryInfoToExport','','','key','','','')
+          }
+        }
+  
+        function handleExportInAs(){
+          if(inputValue){
+            exportData('getASInfoByKeyWord','key',inputValue,'','','','');
+          }else if(inputValue == ''){
+            exportData('getASInfoByKeyWord','','','key','','','');
+          }
+        }
+  
+         function handleExportInAsedge(){
+          if(inputValue){
+            exportData('getASEdgeInfo','key',inputValue,'','','','');
+          }else if(inputValue == ''){
+            exportData('getASEdgeInfo','','','','','','');
+          }
+         }
+  };
+  
+  function exportDataInCountryout(inputValue){
+    var currentHeaderCountrycode = $('.logic_info_country .info_right .infos .countryCode').text();
+    var countrycn = $('.right-btm .title p b').text();
+    var countryCode2 = util.judgeCountry(countrycn);
+  
+    if(inputValue && isAsnumber(inputValue)){
+      exportData('getASInfoByKeyWord','key',inputValue,'','','','');
+    }else if(inputValue == ''){
+       exportData('getEdgeBetweenCountry','','','c1',currentHeaderCountrycode,'c2',countryCode2);
+    }else{
+      console.log('请输入正确的AS号，输入为空时导出全部')
+    }
+  };
+  
+  function exportDataInCountryin(inputValue){
+    var currentHeaderCountrycode = $('.logic_info_country .info_right .infos .countryCode').text();
+    // var currentHeaderAs = $('.logic_info_as .info_right .colum1 span').eq(1).text();
+  
+    switch(contentlist_btnstatus){
+      case '1': handleExportInCountrys();break;
+      case '2': handleExportInAslist();break;
+      case '3': handleExportInAsedge();break;
+     }
+  
+     function handleExportInCountrys(){
+      if(inputValue && isCountry(inputValue)){
+        exportData('getCountryInfoToExport','key',inputValue,'','','','');
+      }else if(inputValue == ''){
+        exportData('getCountryEdgeInfo','','','key',currentHeaderCountrycode,'','');
+      }
+     }
+  
+     function handleExportInAslist(){
+      if(inputValue && isAsnumber(inputValue)){
+          exportData('getASInfoByKeyWord','key',inputValue,'','','','');
+      }else if(inputValue == ''){
+          exportData('getASInfoByKeyWord','','','key',currentHeaderCountrycode,'','');
+      }
+     }
+  
+     function handleExportInAsedge(){
+      if(inputValue && isAsnumber(inputValue)){
+          exportData('getASEdgeInfo','key',inputValue,'areaCode',currentHeaderCountrycode,'','');
+      }else if(inputValue == ''){
+          exportData('getASEdgeInfo','','','areaCode',currentHeaderCountrycode,'','');
+      }
+     }
+  };
+  
+  function exportDataInAsin(inputValue){
+    var currentHeaderAs = $('.logic_info_as .info_right .colum1 span').eq(1).text();
+  
+    switch(contentlist_btnstatus){
+      case '1': handleExportInRouterlist();break;
+      case '2': handleExportInRouteredge();break;
+    }
+  
+     function handleExportInRouterlist(){
+        if(!inputValue){
+          // exportData('getRouterByAS','','','asNumber',currentHeaderAs,'','');
+          exportData('getRouterByAS','','','asNumber',currentHeaderAs,'key','');
+        }else{
+          // console.log('');
+          exportData('getRouterByAS','','','asNumber',currentHeaderAs,'key',inputValue);
+        }
+     }
+  
+     function handleExportInRouteredge(){
+          // as域内边关系导出接口
+          if(!inputValue){
+             exportData('getRouterEdgeInfo','','','asNumber',currentHeaderAs,'key',inputValue);
+           }else{
+             exportData('getRouterEdgeInfo','','','asNumber',currentHeaderAs,'',"");
+           }
+     }
+    
+  };
+  
+  function exportDataInAsout(inputValue){
+    var currentHeaderAs = $('.logic_info_as .info_right .colum1 span').eq(1).text();
+  
+    if(inputValue){
+      exportData('getASInfoByKeyWord','key',inputValue,'','','','');
+    }else if(inputValue == ''){
+      exportData('getEdgeInfoByAS',"key",'','asNumber',currentHeaderAs,'lt','');
+    }else{
+      console.log('请输入正确的AS号，输入为空时导出全部')
+    }
+  };
+  
+  function exportDataInAsinterface(inputValue){
+   var asNumber = input_record.input_value;
+   exportData('getInterfaceBetweenAS',"key",inputValue,'as1',asNumber[0],'as2',asNumber[1]);
+  };
+  
+  
\ No newline at end of file