init: 从宝塔同步到 Gitea
@@ -0,0 +1,139 @@
|
||||
body{ color:#333; font-size:13px;}
|
||||
input,select,textarea{color:#333;}
|
||||
/*.bg{ width:100%; height:100%; position:absolute; background:url(../images/bg.jpg);background-repeat:no-repeat;background-size:100% 100%;}*/
|
||||
.bg{background-color: #004085}
|
||||
.panel{background:#fff; width:1650px !important; margin:0 auto;}
|
||||
form .form-group:last-child{padding-bottom:0;}
|
||||
.passcode{position:absolute;right:0;bottom:0;height:32px;margin:1px;border-left:solid 1px #ddd;text-align:center;line-height:32px;border-radius:0 4px 4px 0;}
|
||||
ul,li{ list-style-type:none;}
|
||||
|
||||
.lefter{position:relative;float:left;width:180px;margin-right:-180px;background:#e6f2fb;text-align:center;}
|
||||
.righter{float:right;width:100%;padding-top:15px;background:#e6f2fb;}
|
||||
.mainer{margin-left:180px;}
|
||||
.field-icon-right .icon{ bottom:0px; top:auto}
|
||||
.logo{ float:left; color:#FFF; margin-top:10px; line-height:45px;}
|
||||
.logo img{ float:left; margin-right:10px;}
|
||||
/********头部******/
|
||||
/*.header{height:70px; overflow:hidden; background:url(../images/bg.jpg) no-repeat 0 -1000px; }*/
|
||||
.header{height:70px; overflow:hidden; background:#b0d7e6; }
|
||||
.head-l{ float:left; margin-top:17px; margin-left:15px; }
|
||||
.head-l .button{ padding:8px 15px;}
|
||||
.head-l .bg-blue:hover{ background-color:#03b6fd;}
|
||||
.leftnav{width:180px; height:100%; position:fixed; top:70px; left:0px;}
|
||||
.leftnav-title { height:50px; background:url(../img/bg.jpg) no-repeat 0 -1000px; color:#FFF; padding-left:22px; font-size:14px; line-height:50px;}
|
||||
.leftnav-title span{ margin-right:10px;}
|
||||
.leftnav h2{ padding:10px 0 10px 22px; transition:all .1s ease-in-out; display:block; cursor:pointer; font-weight:bold; font-size:14px; border-top:1px solid #b5cfd9;}
|
||||
.leftnav h2.on{ color:#09c;}
|
||||
.leftnav .border-bottom{ border-bottom:1px solid #b5cfd9;}
|
||||
.leftnav h2 span{ margin-right:10px;}
|
||||
.leftnav h2:hover{ color:#09c;}
|
||||
.leftnav ul {display:none; border-top:1px solid #b5cfd9; padding:5px 0; opacity:1;}
|
||||
.leftnav ul li{ list-style-type:none; }
|
||||
.leftnav ul li a{ display:block;padding-left:30px;line-height:30px; }
|
||||
.leftnav ul li span{ margin-right:8px;}
|
||||
.leftnav ul li a:hover,.leftnav ul li a.on{ color:#09c;}
|
||||
|
||||
/***主要内容***/
|
||||
.admin{background:#fff;position:fixed;border-left:solid 1px #b5cfd9;right:0;bottom:0;top:110px;left:180px; padding:15px; padding-right:0px; padding-bottom:0px; overflow:auto; border-top:1px solid #b5cfd9; padding-right:15px;}
|
||||
.content{width:100%;}
|
||||
.body-content{padding:20px 0; overflow:hidden;}
|
||||
.content .title{ border-bottom:1px solid #dfdfdf; line-height:35px; font-size:14px; font-weight:bold; color:#09c}
|
||||
.form-x .form-group .label{ width:10%;}
|
||||
.form-x .form-button { margin-left:10%;}
|
||||
.w50 { width:25%; float:left;}
|
||||
.w15 { width:15%; float:left;}
|
||||
.form-x .tipss{ float:left; padding-left:10px; color:#888; line-height:42px;}
|
||||
.input-help { float:left; line-height:30px;}
|
||||
.input-help li{ float:left;margin-left:10px;}
|
||||
.bread{ margin-left:190px; margin-top:4px;}
|
||||
.bread li{ float:left;}
|
||||
.label label{ font-weight:normal; color:#333;}
|
||||
.form-group{ margin-bottom:12px;}
|
||||
.button{ /*padding:10px 15px;*/}
|
||||
.form-group .field .file{ background:#FFF; border:0px;}
|
||||
.form-group .field input[type=radio]{ vertical-align:middle; line-height:35px; margin-right:5px;}
|
||||
.form-group .radio { line-height:35px;}
|
||||
.table th{ text-align:center;}
|
||||
.table td { vertical-align:middle;}
|
||||
.tip img{width:100px; height:100px;}
|
||||
.clear{ clear:both; overflow:hidden;}
|
||||
.pagelist {padding:10px 0; text-align:center;}
|
||||
.pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;}
|
||||
.pagelist a{ margin:0 3px;}
|
||||
.pagelist span.current{ background:#09F; color:#FFF; border-color:#09F; margin:0 2px;}
|
||||
.pagelist a:hover{background:#09F; color:#FFF; border-color:#09F; }
|
||||
.pagelist label{ padding-left:15px; color:#999;}
|
||||
.pagelist label b{color:red; font-weight:normal; margin:0 3px;}
|
||||
|
||||
.search{ overflow:hidden;}
|
||||
.search li{float:left; margin-right:15px; line-height:35px;}
|
||||
|
||||
.button.bg-main.icon-check-square-o{ padding:10px 30px;}
|
||||
.button.bg-main.icon-check-square-o:hover{ background:#08bbe1;}
|
||||
input[type="checkbox"], input[type="radio"]{ width:15px; height:15px; vertical-align:-3px; margin-right:5px;}
|
||||
|
||||
textarea[name=content]{width:100%; height:500px; border:1px solid #ddd; border-radius:3px; -webkit-border-radius:3px;}
|
||||
|
||||
|
||||
/***自定义样式***/
|
||||
.search-dl{overflow:hidden;}
|
||||
.search-dl dt{font-weight:normal;}
|
||||
.search-dl dd{padding:0; float:left;}
|
||||
.collect{width:750px;}
|
||||
.collect td{width:250px; padding:8px 0; text-align:left; font-size:14px;}
|
||||
.white_content {display: none; position: absolute; top: 100px; left: 20%; border-bottom: 26px solid #B6A7AC; border-right: 1px solid #ddd; border-left: 1px solid #ddd; background-color: white; z-index:1; overflow: auto; }
|
||||
.input_title{background-color: #B6A7AC; font-size: 16px; padding: 5px 0 5px 5px; color: #fff; }
|
||||
.ul_input .alert-form-input{width: 170px; padding:3px;}
|
||||
.text_input{padding-left: 15px; }
|
||||
.li_input{padding-top: 12px; padding-left: 40px;; }
|
||||
.li_button{overflow:hidden; text-align:center; margin-top:20px;}
|
||||
.input_button{display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; background-color: #1E9FFF; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; border-radius: 2px; cursor: pointer;} #sectiontablesqx span{display:inline-block; width: 30%;}
|
||||
.time-btn a{display:inline-block; padding:0px 20px; border:1px solid #ddd; line-height:26px; margin-right:2px;}
|
||||
.time-btn a.active{background:#ddd;}
|
||||
|
||||
.bg .box{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background:url(../img/bg-bg.png) center repeat-x;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -260px;
|
||||
}
|
||||
|
||||
|
||||
.bg .box .loginbox{
|
||||
width: 350px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
left: 50%;
|
||||
margin-left: 200px;
|
||||
background: #f3f3f3;
|
||||
top: 95px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.bg .box .loginbox:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top:-2px;
|
||||
left: -40px;
|
||||
background:url(../img/bg-left.png) no-repeat;
|
||||
width: 40px;
|
||||
height:75px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.bg .box .loginbox:before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top:-2px;
|
||||
right: -40px;
|
||||
background:url(../img/bg-right.png) no-repeat;
|
||||
width: 40px;
|
||||
height:75px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
#submit{
|
||||
background: #f6f6f6;
|
||||
color: #666;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
@@ -0,0 +1,392 @@
|
||||
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width:auto\9; /* ie8 */
|
||||
-ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/
|
||||
}
|
||||
|
||||
.arrow_box{animation: glow 800ms ease-out infinite alternate; }
|
||||
@keyframes glow {
|
||||
0% {
|
||||
border-color: #ff0000;
|
||||
box-shadow: 0 0 5px rgba(255,0,0,.1), inset 0 0 5px rgba(255,0,0,.1), 0 1px 0 #ff0000;
|
||||
}
|
||||
100% {
|
||||
border-color: #9e0000;
|
||||
box-shadow: 0 0 20px rgba(255,0,0,1), inset 0 0 10px rgba(255,0,0,1), 0 1px 0 #9e0000;
|
||||
}
|
||||
}
|
||||
input,img,select,button {vertical-align:middle; border:none; text-decoration:none; outline:none; }
|
||||
table{border-collapse: collapse;border-spacing:0; }
|
||||
a:hover,a:active{color:#6DD1C1; text-decoration:none;}
|
||||
input[type="submit"] {cursor: pointer;}
|
||||
button {cursor: pointer;}
|
||||
input::-moz-focus-inner { border: 0; padding: 0;}
|
||||
input,img,select,button {vertical-align:middle; border:none; text-decoration: none; outline:none;}
|
||||
ol,ul {list-style: none;}
|
||||
input[type="number"]{
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type=checkbox]{
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
-webkit-appearance:none;
|
||||
background: url(../img/checkbox.png) no-repeat;
|
||||
-webkit-background-size: 100% 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
input[type=checkbox]:checked{
|
||||
background-image: url(../img/checkbox-active.png);
|
||||
}
|
||||
.transition{transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; }
|
||||
.clearfix{zoom:1;}
|
||||
.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
|
||||
.fl{
|
||||
float: left !important;
|
||||
}
|
||||
.fr{
|
||||
float: right !important;
|
||||
}
|
||||
.btn:active{opacity: 0.8; }
|
||||
.btn.on{
|
||||
background-color: #09B3A6;
|
||||
color: #fff !important;
|
||||
background-image: linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);
|
||||
background-image: -webkit-linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);
|
||||
background-image: -moz-linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);
|
||||
background-image: -o-linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);}
|
||||
.view{
|
||||
width: 100vw;
|
||||
height:100vh;
|
||||
min-width:1024px;
|
||||
min-height:620px;
|
||||
background-color:#f2f2f2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.view .list{
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
}
|
||||
.view .list_card{
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 40%;
|
||||
}
|
||||
.view .b_title_num{
|
||||
width: 432px;
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.view .title_num{
|
||||
width: 62px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
font-size: 20;
|
||||
text-align: center;
|
||||
}
|
||||
.view .default_card{
|
||||
width: 432px;
|
||||
height: 86px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.view .default_card_num{
|
||||
width: 62px;
|
||||
height: 86px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
}
|
||||
.view .change_card{
|
||||
width: 432px;
|
||||
height: 148px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.view .change_card_num{
|
||||
width: 62px;
|
||||
height: 148px;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
}
|
||||
.view .card_result{
|
||||
margin-top: 30px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
}
|
||||
.view .list.control{
|
||||
width: 15%;
|
||||
background: #20222A;
|
||||
}
|
||||
.view .list .border{
|
||||
border-left: 1px solid #f2f2f2;
|
||||
border-right: 1px solid #f2f2f2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.view .list .title{
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.view .list .tip{
|
||||
font-size: 13px;
|
||||
color: #0e9588;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.view .list.control .title{
|
||||
background: #171717;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.control .number-box{
|
||||
padding:5px;
|
||||
}
|
||||
.control .number-box .item{
|
||||
width: 20%;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.control .number-box strong{
|
||||
padding-top: 20px;
|
||||
padding-bottom: 5px;
|
||||
display: block;
|
||||
color: #b1b1b1;
|
||||
font-size: 16px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.control .number-box .item input{
|
||||
width: 88%;
|
||||
margin: 0 auto;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
font-size: 16px;
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.control .textarea-box{
|
||||
padding: 5px;
|
||||
padding-top: 20px;
|
||||
|
||||
}
|
||||
.control .textarea-box textarea{
|
||||
width: 98%;
|
||||
max-width: 98%;
|
||||
min-width: 98%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 419px);
|
||||
overflow: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
.control .buttom-box{
|
||||
padding:10px 5px;
|
||||
}
|
||||
.control .buttom-box .btn{
|
||||
width: 30.7%;
|
||||
margin:5px 1.3%;
|
||||
float: left;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 18px;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.textarea-view{
|
||||
margin:5px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.textarea-view .textarea{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
height: 216px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border:1px solid #eee;
|
||||
}
|
||||
|
||||
.btn-view{
|
||||
margin:5px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
.btn-view .row{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn-view .item{
|
||||
width: 45%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-view .item label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
/*background:#6e8794;*/
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.btn-view .item .text{
|
||||
width: 100%;
|
||||
padding-left: 34px;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
}
|
||||
.btn-view .checkbox{
|
||||
width: 42.5%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-view .checkbox .lab{
|
||||
padding-left: 5px;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-view .btn{
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
width: 18%;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.btn-view .result{
|
||||
width: 58%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn-view .result label{
|
||||
width: 50px;
|
||||
}
|
||||
.btn-view .result .text{
|
||||
padding-left: 54px;
|
||||
color: red;
|
||||
font-size: 20px;
|
||||
}
|
||||
.btn-view .box{
|
||||
padding-top: 5px;
|
||||
}
|
||||
.table-view{
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
height:calc(100vh - 458px);
|
||||
}
|
||||
.table-view ul{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: calc(100% - 62px);
|
||||
border: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.table-view ul li{
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
padding: 2px 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-view ul li input{
|
||||
background: none;
|
||||
width: 100%;
|
||||
}
|
||||
.table-view ul li.on{
|
||||
background: #ededed;
|
||||
}
|
||||
.table-view .btn{
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.blue_wlith{
|
||||
color:#fff;
|
||||
background-color:blue;
|
||||
}
|
||||
.yellow_red{
|
||||
color:red;
|
||||
background-color:yellow;
|
||||
}
|
||||
.black_wlith{
|
||||
color:#fff;
|
||||
background-color:#000;
|
||||
}
|
||||
.red{
|
||||
color: red;
|
||||
}
|
||||
|
After Width: | Height: | Size: 187 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 104 KiB |
@@ -0,0 +1,197 @@
|
||||
class WebSocketClass {
|
||||
constructor (wsUrl) {
|
||||
this.successFn = {} // 成功的回掉函数
|
||||
this.wsUrl = wsUrl // 请求的url
|
||||
this.errorCallBackFunArr = [] // 当推送异常时执行的数组
|
||||
this.isConnection = false // 判断是否支持weosocket
|
||||
this.isErrorCallBack = false
|
||||
this.lockReconnect = false // 避免重复连接
|
||||
this.ping = null
|
||||
this.sendObj = {}
|
||||
this.heartCheck()
|
||||
this.createWebSocket()
|
||||
}
|
||||
createWebSocket () {
|
||||
try {
|
||||
this.webSocket = new WebSocket(this.wsUrl)
|
||||
this.initEventHandle()
|
||||
} catch (e) {
|
||||
this.errorCallBackData()
|
||||
this.reconnect(this.wsUrl)
|
||||
}
|
||||
}
|
||||
initEventHandle () {
|
||||
this.webSocket.onclose = () => {
|
||||
this.errorCallBackData()
|
||||
this.reconnect(this.wsUrl)
|
||||
}
|
||||
this.webSocket.onerror = () => {
|
||||
this.errorCallBackData()
|
||||
this.reconnect(this.wsUrl)
|
||||
}
|
||||
this.webSocket.onopen = () => {
|
||||
this.isConnection = true
|
||||
this.isErrorCallBack = false
|
||||
clearInterval(this.ping)
|
||||
this.ping = setInterval(() => {
|
||||
this.send('{"event": "ping"}')
|
||||
}, 10000)
|
||||
// 心跳检测重置
|
||||
this.heartCheck.start()
|
||||
}
|
||||
this.webSocket.onmessage = data => {
|
||||
// 如果获取到消息,心跳检测重置
|
||||
// 拿到任何消息都说明当前连接是正常的
|
||||
this.heartCheck.start()
|
||||
this.decodeData(data)
|
||||
}
|
||||
}
|
||||
send(cmd) {
|
||||
// 只有当 webSocket.readyState 为 OPEN才发送订阅
|
||||
// readyState属性返回实例对象的当前状态,共有四种。
|
||||
// CONNECTING:值为0,表示正在连接。
|
||||
// OPEN:值为1,表示连接成功,可以通信了。
|
||||
// CLOSING:值为2,表示连接正在关闭。
|
||||
// CLOSED:值为3,表示连接已经关闭,或者打开连接失败。
|
||||
if (!cmd) {
|
||||
return
|
||||
}
|
||||
// this.sendObj[cmd] && (delete clearTimeout(this.sendObj[cmd]))
|
||||
if (this.webSocket.readyState === 1) { // 只有当链接打开时才进行订阅
|
||||
this.webSocket.send(cmd)
|
||||
}
|
||||
// else if (this.webSocket.readyState === 0) { // 如果链接处于正在链接中,则进行延时订阅
|
||||
// this.sendObj[cmd] = setTimeout(() => {
|
||||
// this.send(cmd)
|
||||
// }, 50)
|
||||
// }
|
||||
}
|
||||
|
||||
reconnect (url) {
|
||||
if (this.lockReconnect) {
|
||||
return
|
||||
}
|
||||
this.lockReconnect = true
|
||||
// 没连接上会一直重连,设置延迟避免请求过多
|
||||
setTimeout(() => {
|
||||
this.createWebSocket(url)
|
||||
this.lockReconnect = false
|
||||
}, 2000)
|
||||
}
|
||||
errorCallBackData () {
|
||||
this.isConnection = false
|
||||
if (!this.isErrorCallBack && this.errorCallBackFunArr.length) {
|
||||
this.isErrorCallBack = true
|
||||
for (let i = 0, len = this.errorCallBackFunArr.length; i < len; i++) {
|
||||
if ((typeof this.errorCallBackFunArr[i]) === 'function') {
|
||||
this.errorCallBackFunArr[i]()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
decodeData (data) {
|
||||
if (data.data instanceof Blob) {
|
||||
let blob = data.data
|
||||
// js中的blob没有没有直接读出其数据的方法,通过FileReader来读取相关数据
|
||||
let reader = new FileReader()
|
||||
reader.readAsArrayBuffer(blob)
|
||||
// 当读取操作成功完成时调用.
|
||||
reader.onload = (evt) => {
|
||||
if (evt.target.readyState === FileReader.DONE) {
|
||||
let result = new Uint8Array(evt.target.result)
|
||||
// 如果后端进行压缩数据处理(zlib),那么要引入解析zlib的js
|
||||
result = (new window.Zlib.RawInflate(result)).decompress()
|
||||
let strResult = ''
|
||||
let length = result.length
|
||||
for (let i = 0; i < length; i++) {
|
||||
strResult += String.fromCharCode(result[i])
|
||||
}
|
||||
this.callBackData(JSON.parse(strResult))
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
let d = JSON.parse(data.data)
|
||||
// 如果后端需要等待,则返回code:10010,过一段时间后重新订阅
|
||||
if (d.code === '10010') {
|
||||
let dt = {}
|
||||
Object.assign(dt, d)
|
||||
delete dt.code
|
||||
delete dt.msg
|
||||
setTimeout(() => {
|
||||
this.send(JSON.stringify(dt))
|
||||
}, 2000)
|
||||
return
|
||||
}
|
||||
this.callBackData(JSON.parse(data.data))
|
||||
}
|
||||
callBackData (data) {
|
||||
if (data instanceof Array) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
this.doCallback(data[i])
|
||||
}
|
||||
} else if (data instanceof Object) {
|
||||
if (data.hasOwnProperty('event') && data.event === 'pong') {
|
||||
return
|
||||
}
|
||||
data.payload && (data.payload = JSON.parse(data.payload))
|
||||
this.doCallback(data)
|
||||
}
|
||||
}
|
||||
doCallback (data) {
|
||||
if (data.event) {
|
||||
let fn = this.successFn[data.event]
|
||||
if (typeof fn === 'function') {
|
||||
fn(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 心跳检测
|
||||
heartCheck () {
|
||||
let that = this
|
||||
this.heartCheck = {
|
||||
timeout: 10000, // 10秒
|
||||
timeoutObj: null,
|
||||
serverTimeoutObj: null,
|
||||
reset: function () {
|
||||
clearTimeout(this.timeoutObj)
|
||||
clearTimeout(this.serverTimeoutObj)
|
||||
},
|
||||
start: function () {
|
||||
this.reset()
|
||||
let self = this
|
||||
this.timeoutObj = setTimeout(function () {
|
||||
// 这里发送一个心跳,后端收到后,返回一个心跳消息
|
||||
// onmessage拿到返回的心跳就说明连接正常
|
||||
that.send('{"event": "ping"}')
|
||||
self.serverTimeoutObj = setTimeout(function () { // 如果超过一定时间还没重置,说明后端主动断开了
|
||||
// 如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
|
||||
that.webSocket.close()
|
||||
}, self.timeout)
|
||||
}, this.timeout)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function webSocketFn (url) {
|
||||
let wb = new WebSocketClass(url)
|
||||
return {
|
||||
webSocketSend: wb.send.bind(wb),
|
||||
errorCallBackFunArr: wb.errorCallBackFunArr,
|
||||
successFn: wb.successFn,
|
||||
isConnection: function () {
|
||||
return wb.isConnection
|
||||
},
|
||||
getSocketFile (webSocketData, ajaxData) {
|
||||
let socketFail = (isFirst) => {
|
||||
if (this.isConnection()) {
|
||||
webSocketData()
|
||||
} else {
|
||||
ajaxData()
|
||||
setTimeout(socketFail, 2000)
|
||||
}
|
||||
}
|
||||
return socketFail
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
/*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */
|
||||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
|
||||
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 701 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 193 KiB |