Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 96b889de by 周志凯
Options

init

0 parents
Expand all
Inline Side-by-side
Showing 11 changed files with 710 additions and 0 deletions
css/common.css 0 → 100644
.datelevel{
text-align: center;
padding-bottom: 10px;
}
.data-type{
width: 100%;
text-align: center;
}
.data{
width: 100%;
height: 70px;
}
.data-select{
width: 100%;
text-align: center;
margin-top: 0.5%;
}
.button-class{
}
.param{
width: 100%;
text-align: center;
overflow: hidden;
}
.el-select{
width: 310px !important;
}
.el-select__tags{
max-width: 290px !important;
}
.input-class{
width: 200px
}
.face-data{
margin-left: 60px
}
.showData{
/* border-width:5px; */
width: 50%;
height: 460px;
/* border:3px solid gray; */
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
border-radius: 4px;
margin: 0 auto;
position: relative;
/* left: 50%;
margin-left: -25%; */
overflow: auto;
}
.show-span{
margin-left: 10px;
}
.clear-select{
text-align: center;
padding: 10px 0 10px 0;
}
.date-time{
height: 30px;
}
/*覆盖 element css*/
.el-input__inner {
height: 30px !important;
line-height: 30px !important;
}
.el-input__icon {
line-height: 30px !important;
}
.date-time .el-input__inner {
height: 30px !important;
line-height: 30px !important;
}
.date-time .el-input__icon {
line-height: 30px !important;
}
.el-button {
padding: 6px 20px !important;
}
.input-class {
width: 200px
}
.date-select {
width: 100%;
text-align: center;
padding: 5px;
}
/* 全選 */
.mall-sel-box {
/* display: block; */
height: 22px;
font-size: 13px;
width: 150px;
height: 100%;
}
.sel-all-box {
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
box-sizing: border-box;
cursor: pointer;
}
.sel-all-box.selected {
color: #409EFF;
font-weight: 700;
background-color: #fff;
}
.sel-all-box.selected .custom-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.sel-all-box.selected .custom-checkbox__inner:after {
transform: rotate(45deg) scaleY(1);
}
.custom-checkbox__input {
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
}
.custom-checkbox__inner {
display: inline-block;
position: relative;
border: 1px solid #dcdfe6;
border-radius: 2px;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #fff;
z-index: 1;
transition: border-color .05s cubic-bezier(.71, -.46, .29, 1.46), background-color .05s cubic-bezier(.71, -.46, .29, 1.46);
}
.custom-checkbox__inner:after {
box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 3px;
transition: transform .05s cubic-bezier(.71, -.46, .88, .6) .05s;
transform-origin: center;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
content: none;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .custom-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .custom-checkbox__inner:after {
transform: rotate(45deg) scaleY(1);
}
.center-div {
position: absolute;
left: 50%;
margin-left: -12%;
}
.center-progress {
display: inline-block;
margin-left: 38%;
}
.center-repairprogress {
display: inline-block;
}
.check-box {
}
.top-box {
}
.el-checkbox-group {
padding-top: 1px;
}
.el-checkbox:first-child {
margin-left: 55px
}
.el-checkbox+.el-checkbox {
margin-left: 70px;
}
.el-checkbox:last-child {
margin-left: 75px
}
.el-checkbox {
padding: 1px 0 1px 0;
}
.el-checkbox__inner{
width: 15px;
height: 15px;
}
.el-checkbox__label {
font-size: 16px
}
.level-div {
font-size: 18px;
padding: 0px 0px 0px 30px;
}
.level-box :first-child{
padding-top: 22px;
}
.bloc-mall-box {
text-align: center;
width: 50%;
float: left;
}
.line-progress {
display: block;
width: 405px;
background-color: #ebeef5;
height: 18px;
border-radius: 20px;
margin-left: 50px;
margin-top: -20px;
}
.websocket-line {
height: 18px;
/* border-radius: 20px; */
margin-left: 50px;
margin-top: -18px;
background-color: #409EFF;
position: relative;
z-index: 999;
}
.check-box .websocket-line:nth-of-type(1) {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.check-box .websocket-line:nth-of-type(2) {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.check-box :last-child {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.tooltip-div {
height:50px;
background-color: #fff;
position:absolute;
z-index: 9999;
text-align: center;
border:2px solid black;
border-radius: 10px;
}
css/fonts/element-icons.woff 0 → 100644
No preview for this file type
css/index.css 0 → 100644
This diff could not be displayed because it is too large.
css/page.css 0 → 100644
[v-cloak] {
display: none;
}
html, body, #app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
padding-top: 10px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.query-box {
width: 100%;
display: table;
}
.query-box + .query-box {
padding-top: 10px;
}
.query-item {
display: table-cell;
text-align: right;
width: 50%;
}
.query-item+.query-item {
padding-left: 20px;
text-align: left;
}
.query-select {
font-size: 13px;
}
.query-item__title {
font-size: 14px;
}
.query-button {
margin-left: 20px;
}
.showData{
width: 50%;
height: 460px;
min-width: 600px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
border-radius: 4px;
margin: 0 auto;
position: relative;
overflow: auto;
}
.result-wrapper {
/* padding: 0 20px; */
width: 50%;
min-width: 600px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37);
border-radius: 4px;
margin: 20px auto 0;
position: relative;
overflow: auto;
}
.result-header {
text-align: center;
font-size: 16px;
padding: 10px 0;
box-shadow: 0px 0px 3px 0 rgba(0,0,0,.2);
/* margin: 10px 0 0; */
}
.result-content {
font-size: 14px;
padding: 0 20px 20px;
}
.result-item {
padding-right: 8px;
box-sizing: border-box;
}
.result-item + .result-item {
margin-top: 10px;
}
.result-page {
margin: 8px 0;
}
.result-progress-wrapper::after,
.result-progress-wrapper::before {
content: '';
display: table;
}
.result-progress-wrapper::after {
clear: both;
}
.result-progress-left {
float: left;
}
.result-progress-right {
width: 100%;
padding-left: 88px;
box-sizing: border-box;
}
.result-progress {
height: 26px;
margin-bottom: 4px;
position: relative;
border-radius: 100px;
box-shadow: 0px 0px 2px 0 rgba(0,0,0,1);
overflow: hidden;
}
.result-progress__inner {
width: 0;
position: absolute;
left: 0;
top: 0;
height: 100%;
background: #409EFF;
border-radius: inherit;
text-align: right;
}
.result-progress__text {
display: inline-block;
margin: 0 5px;
vertical-align: middle;
}
.result-progress-right span {
padding-left: 10px;
}
.result-footer {
padding: 12px 20px;
font-size: 16px;
box-shadow: 0px 0px 3px 0 rgba(0,0,0,.2);
}
.result-footer::after,
.result-footer::before {
content: '';
display: table;
}
.result-footer::after {
clear: both;
}
.result-intro {
float: left;
}
.result-clear-btn {
float: right;
border-radius: 20px;
}
/* cover elementui stylesheet*/
.scrollbar-wrapper {
height: 100%;
height: 376px;
max-height: 376px;
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
index.html 0 → 100644
This diff is collapsed. Click to expand it.
js/common.js 0 → 100644
apiUrl = 'http://101.201.36.180:9998/',
webSockUrl = ''
\ No newline at end of file \ No newline at end of file
js/index.js 0 → 100644
This diff could not be displayed because it is too large.
js/socket.js 0 → 100644
;(function (root, factory) {
var ws = factory(root);
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof module !== 'undefined' && module.exports) {
module.exports = factory();
} else {
root.ws = factory();
}
}(this, function(root, undefined) {
if (!'WebSocket' in window) return
var _handlers = {}, wsocket,
eventTarget = document.createElement('div'),
settings = {
// 是否重连
autoConnect: true,
// 自动重连延迟重连速度
reConnectDelay: 1.5
},
func = function() {},
// 对外泄露Api
_api = {
CONNECT: WebSocket.CONNECTING,
OPEN: WebSocket.OPEN,
CLOSING: WebSocket.CLOSING,
CLOSED: WebSocket.CLOSED
};
/**
* ws
* @param {string} url
* @param {*} protocols
* @param {object} options
*/
function ws(url, protocols, options) {
var self = this;
// url
this.url = url;
// 状态
this.readyState = WebSocket.CONNECTING;
/**
* http://tools.ietf.org/html/rfc6455
* 服务器选择的子协定, 这是建立 WebSocket 对象时 protocols 参数里的其中一个字符串
*/
this.protocols = protocols || null;
// 绑定选项定义设置
if (!options) options = {}
for (var key in settings) {
this[key] = typeof options[key] !== 'undefined'
? options[key]
: settings[key];
}
// 公开 api
for (var a in _api) this[a] = _api[a];
// 事件处理程序
eventTarget.addEventListener('open', function(event) { self !== window && self.onopen(event); });
eventTarget.addEventListener('close', function(event) { self !== window && self.onclose(event); });
eventTarget.addEventListener('connecting', function(event) { self !== window && self.onconnecting(event); });
eventTarget.addEventListener('message', function(event) { self !== window && self.onmessage(event); });
eventTarget.addEventListener('error', function(event) { self !== window && self.onerror(event); });
// 公开事件目的 API
this.addEventListener = eventTarget.addEventListener.bind(eventTarget);
this.removeEventListener = eventTarget.removeEventListener.bind(eventTarget);
this.dispatchEvent = eventTarget.dispatchEvent.bind(eventTarget);
if (this.autoConnect === true && this !== window) this.open();
return this
}
/**
* 产生一个事件, 与标准兼容, 兼容的浏览器和IE9~IE11?
* http://stackoverflow.com/questions/19345392/why-arent-my-parameters-getting-passed-through-to-a-dispatched-event/19345563#19345563
* https://msdn.microsoft.com/library/ff975299(v=vs.85).aspx
* @param {string} eventName
* @param {*} args
*/
function generateEvent(eventName, args) {
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(eventName, false, false, args);
return evt;
}
ws.prototype.onconnecting = func;
ws.prototype.onopen = func;
ws.prototype.onerror = func;
ws.prototype.onmessage = func;
/**
* send
* @param {*} data
*/
ws.prototype.send = function(data) {
if (this.wsocket) {
this.wsocket.send(data);
} else {
throw 'INVAILD_STATE_ERR : Pausing to reconnect WebSocket';
}
}
/**
* close
* 错误代码参考：https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
* @param {*} code
* @param {*} reason
*/
ws.prototype.close = function(code, reason) {
// 默认CLOSE_NORMAL 代码
typeof code === 'undefined' && (code = 1000);
this.wsocket && this.wsocket.close(code, reason)
}
/**
* open
*/
ws.prototype.open = function() {
var self = this;
wsocket = new WebSocket(this.url, this.protocols || []);
eventTarget.dispatchEvent(generateEvent('connecting'));
wsocket.onopen = function(event) {
self.protocols = ws.protocols;
self.readyState = WebSocket.OPEN;
var e = generateEvent('open');
eventTarget.dispatchEvent(e);
}
wsocket.onclose = function(event) {
self.readyState = WebSocket.CLOSED;
var e = generateEvent('connecting');
e.code = event.code;
e.reason = event.reason;
e.wasClean = event.wasClean;
eventTarget.dispatchEvent(e);
eventTarget.dispatchEvent(generateEvent('close'));
}
wsocket.onmessage = function(event) {
var e = generateEvent('message');
e.data = event.data;
eventTarget.dispatchEvent(e);
}
wsocket.onerror = function(event) {
var e = generateEvent('error');
eventTarget.dispatchEvent(e);
}
this.wsocket = wsocket;
return this;
}
return ws;
}));
js/vue.js 0 → 100644
This diff could not be displayed because it is too large.
test.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebSocket test</title>
<style>
p { padding: 0; margin: 0; }
.container{ margin: 10vh auto; width: 40%; border: 1px solid #ffeeaa; padding: 10px; }
#output { max-height: 500px; margin-bottom: 10px; overflow-y: auto; }
.message-wrapper { width: 100%; overflow: hidden; }
.message-wrapper input { float: left; width: 90%; padding: 4px 12px; box-sizing: border-box; }
.message-wrapper button { float: right; padding: 4px 10px; }
</style>
</head>
<body>
<div class="container">
<div id="output"></div>
<div class="message-wrapper">
<input type="text" id="msg" />
<button id="sendBtn">发 送</button>
</div>
</div>
<script src="./js/socket.js"></script>
<script>
if (!window.WebSocket) {
//
}
var socket = new ws('ws://123.207.136.134:9010/ajaxchattest'),
str = 'Hello WebSocket!!';
socket.onconnecting = function (ev) {
console.log('socket:onconnecting', ev)
sendMsg('socket test...')
}
socket.onopen = function(ev) {
console.log('socket:onopen', ev)
log('发了个消息！' + str)
sendMsg(str)
}
socket.onclose = function(ev) {
console.log('socket:onclose', ev)
log('WebSocket Closed!!')
}
socket.onmessage = function(ev) {
console.log('socket:onmessage', ev)
log('收到消息 ' + ev.data)
// socket.close()
}
var sendBtn = document.getElementById('sendBtn'),
msgInput = document.getElementById('msg');
sendBtn.onclick = onBtnClick
function onBtnClick() {
var val = msgInput.value.trim();
if (!val) return
sendMsg(val)
msgInput.value = ''
}
document.addEventListener('keydown', function(ev) {
var e = ev || window.event;
if (e.keyCode === 13) {
onBtnClick()
}
})
function sendMsg(str) {
console.log('socket:sendMsg', str)
socket.send(str)
}
var timer = null
function log(s, e) {
var output = document.getElementById('output'),
p = document.createElement('p');
clearTimeout(timer);
timer = null
p.style.wordWrap = 'break-word';
p.style.padding = '10px';
p.style.marginBottom = '4px';
p.style.background = '#eee';
p.textContent = 'LOG : ' + s;
// 往上追加
// output.childNodes.length
// ? output.insertBefore(p, output.childNodes[0])
// : output.appendChild(p);
// 往下追加
output.appendChild(p);
if (output.offsetWidth !== output.scrollWidth) {
console.log('timer', timer)
output.scrollTop = output.scrollHeight
timer = setTimeout(function() {
}, 100)
}
}
</script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!