git: init+修改node版本
0
static/.gitkeep
Normal file
9
static/config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
window.config={
|
||||
// 测试环境服务器地址
|
||||
socketServer:'ws://127.0.0.1:8326/',
|
||||
ajaxServer: 'http://127.0.0.1',
|
||||
// 生产环境服务器地址
|
||||
//socketServer:'ws://103.71.178.73:8326/',
|
||||
//ajaxServer: 'http://103.71.178.73/v2/s'
|
||||
}
|
||||
|
||||
11
static/css/animate.min.css
vendored
Normal file
304
static/css/bootstrap-vue.css
vendored
Normal file
@@ -0,0 +1,304 @@
|
||||
/* workaround for https://github.com/bootstrap-vue/bootstrap-vue/issues/1560 */
|
||||
/* source: _input-group.scss */
|
||||
|
||||
.input-group > .input-group-prepend > .b-dropdown > .btn,
|
||||
.input-group > .input-group-append:not(:last-child) > .b-dropdown > .btn,
|
||||
.input-group > .input-group-append:last-child > .b-dropdown:not(:last-child):not(.dropdown-toggle) > .btn {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.input-group > .input-group-append > .b-dropdown > .btn,
|
||||
.input-group > .input-group-prepend:not(:first-child) > .b-dropdown > .btn,
|
||||
.input-group > .input-group-prepend:first-child > .b-dropdown:not(:first-child) > .btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Special styling for type=range and type=color input */
|
||||
input.form-control[type="range"],
|
||||
input.form-control[type="color"] {
|
||||
height: 2.25rem;
|
||||
}
|
||||
input.form-control.form-control-sm[type="range"],
|
||||
input.form-control.form-control-sm[type="color"] {
|
||||
height: 1.9375rem;
|
||||
}
|
||||
input.form-control.form-control-lg[type="range"],
|
||||
input.form-control.form-control-lg[type="color"] {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
/* Less padding on type=color */
|
||||
input.form-control[type="color"] {
|
||||
padding: 0.25rem 0.25rem;
|
||||
}
|
||||
input.form-control.form-control-sm[type="color"] {
|
||||
padding: 0.125rem 0.125rem;
|
||||
}
|
||||
|
||||
/* Add support for fixed layout table */
|
||||
table.b-table.b-table-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
/* Busy table styling */
|
||||
table.b-table[aria-busy='false'] {
|
||||
opacity: 1;
|
||||
}
|
||||
table.b-table[aria-busy='true'] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Sort styling */
|
||||
table.b-table > thead > tr > th,
|
||||
table.b-table > tfoot > tr > th {
|
||||
position: relative;
|
||||
}
|
||||
table.b-table > thead > tr > th.sorting,
|
||||
table.b-table > tfoot > tr > th.sorting {
|
||||
padding-right: 1.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
table.b-table > thead > tr > th.sorting::before,
|
||||
table.b-table > thead > tr > th.sorting::after,
|
||||
table.b-table > tfoot > tr > th.sorting::before,
|
||||
table.b-table > tfoot > tr > th.sorting::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
opacity: 0.4;
|
||||
padding-bottom: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 180%;
|
||||
}
|
||||
table.b-table > thead > tr > th.sorting::before,
|
||||
table.b-table > tfoot > tr > th.sorting::before {
|
||||
right: 0.75em;
|
||||
content: '\2191';
|
||||
}
|
||||
table.b-table > thead > tr > th.sorting::after,
|
||||
table.b-table > tfoot > tr > th.sorting::after {
|
||||
right: 0.25em;
|
||||
content: '\2193';
|
||||
}
|
||||
table.b-table > thead > tr > th.sorting_asc::after,
|
||||
table.b-table > thead > tr > th.sorting_desc::before,
|
||||
table.b-table > tfoot > tr > th.sorting_asc::after,
|
||||
table.b-table > tfoot > tr > th.sorting_desc::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Stacked table layout */
|
||||
/* Derived from http://blog.adrianroselli.com/2017/11/a-responsive-accessible-table.html */
|
||||
/* Always stacked */
|
||||
table.b-table.b-table-stacked {
|
||||
width: 100%;
|
||||
}
|
||||
table.b-table.b-table-stacked,
|
||||
table.b-table.b-table-stacked > tbody,
|
||||
table.b-table.b-table-stacked > tbody > tr,
|
||||
table.b-table.b-table-stacked > tbody > tr > td,
|
||||
table.b-table.b-table-stacked > tbody > tr > th,
|
||||
table.b-table.b-table-stacked > caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide stuff we can't deal with, or shouldn't show */
|
||||
table.b-table.b-table-stacked > thead,
|
||||
table.b-table.b-table-stacked > tfoot,
|
||||
table.b-table.b-table-stacked > tbody > tr.b-table-top-row,
|
||||
table.b-table.b-table-stacked > tbody > tr.b-table-bottom-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* inter-row top border */
|
||||
table.b-table.b-table-stacked > tbody > tr > :first-child {
|
||||
border-top-width: 0.4rem;
|
||||
}
|
||||
|
||||
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
|
||||
table.b-table.b-table-stacked > tbody > tr > [data-label] {
|
||||
display: grid;
|
||||
grid-template-columns: 40% auto;
|
||||
grid-gap: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
/* generate row cell "heading" */
|
||||
table.b-table.b-table-stacked > tbody > tr > [data-label]::before {
|
||||
content: attr(data-label);
|
||||
display: inline;
|
||||
text-align: right;
|
||||
overflow-wrap: break-word;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media all and (max-width: 575.99px) {
|
||||
/* Under SM */
|
||||
table.b-table.b-table-stacked-sm {
|
||||
width: 100%;
|
||||
}
|
||||
table.b-table.b-table-stacked-sm,
|
||||
table.b-table.b-table-stacked-sm > tbody,
|
||||
table.b-table.b-table-stacked-sm > tbody > tr,
|
||||
table.b-table.b-table-stacked-sm > tbody > tr > td,
|
||||
table.b-table.b-table-stacked-sm > tbody > tr > th,
|
||||
table.b-table.b-table-stacked-sm > caption {
|
||||
display: block;
|
||||
}
|
||||
/* hide stuff we can't deal with, or shouldn't show */
|
||||
table.b-table.b-table-stacked-sm > thead,
|
||||
table.b-table.b-table-stacked-sm > tfoot,
|
||||
table.b-table.b-table-stacked-sm > tbody > tr.b-table-top-row,
|
||||
table.b-table.b-table-stacked-sm > tbody > tr.b-table-bottom-row {
|
||||
display: none;
|
||||
}
|
||||
/* inter-row top border */
|
||||
table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
|
||||
border-top-width: 0.4rem;
|
||||
}
|
||||
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
|
||||
table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
|
||||
display: grid;
|
||||
grid-template-columns: 40% auto;
|
||||
grid-gap: 0.25rem 1rem;
|
||||
}
|
||||
/* generate row cell "heading" */
|
||||
table.b-table.b-table-stacked-sm > tbody > tr > [data-label]::before {
|
||||
content: attr(data-label);
|
||||
display: inline;
|
||||
text-align: right;
|
||||
overflow-wrap: break-word;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 767.99px) {
|
||||
/* under MD */
|
||||
table.b-table.b-table-stacked-md {
|
||||
width: 100%;
|
||||
}
|
||||
table.b-table.b-table-stacked-md,
|
||||
table.b-table.b-table-stacked-md > tbody,
|
||||
table.b-table.b-table-stacked-md > tbody > tr,
|
||||
table.b-table.b-table-stacked-md > tbody > tr > td,
|
||||
table.b-table.b-table-stacked-md > tbody > tr > th,
|
||||
table.b-table.b-table-stacked-md > caption {
|
||||
display: block;
|
||||
}
|
||||
/* hide stuff we can't deal with, or shouldn't show */
|
||||
table.b-table.b-table-stacked-md > thead,
|
||||
table.b-table.b-table-stacked-md > tfoot,
|
||||
table.b-table.b-table-stacked-md > tbody > tr.b-table-top-row,
|
||||
table.b-table.b-table-stacked-md > tbody > tr.b-table-bottom-row {
|
||||
display: none;
|
||||
}
|
||||
/* inter-row top border */
|
||||
table.b-table.b-table-stacked-md > tbody > tr > :first-child {
|
||||
border-top-width: 0.4rem;
|
||||
}
|
||||
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
|
||||
table.b-table.b-table-stacked-md > tbody > tr > [data-label] {
|
||||
display: grid;
|
||||
grid-template-columns: 40% auto;
|
||||
grid-gap: 0.25rem 1rem;
|
||||
}
|
||||
/* generate row cell "heading" */
|
||||
table.b-table.b-table-stacked-md > tbody > tr > [data-label]::before {
|
||||
content: attr(data-label);
|
||||
display: inline;
|
||||
text-align: right;
|
||||
overflow-wrap: break-word;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 991.99px) {
|
||||
/* under LG */
|
||||
table.b-table.b-table-stacked-lg {
|
||||
width: 100%;
|
||||
}
|
||||
table.b-table.b-table-stacked-lg,
|
||||
table.b-table.b-table-stacked-lg > tbody,
|
||||
table.b-table.b-table-stacked-lg > tbody > tr,
|
||||
table.b-table.b-table-stacked-lg > tbody > tr > td,
|
||||
table.b-table.b-table-stacked-lg > tbody > tr > th,
|
||||
table.b-table.b-table-stacked-lg > caption {
|
||||
display: block;
|
||||
}
|
||||
/* hide stuff we can't deal with, or shouldn't show */
|
||||
table.b-table.b-table-stacked-lg > thead,
|
||||
table.b-table.b-table-stacked-lg > tfoot,
|
||||
table.b-table.b-table-stacked-lg > tbody > tr.b-table-top-row,
|
||||
table.b-table.b-table-stacked-lg > tbody > tr.b-table-bottom-row {
|
||||
display: none;
|
||||
}
|
||||
/* inter-row top border */
|
||||
table.b-table.b-table-stacked-lg > tbody > tr > :first-child {
|
||||
border-top-width: 0.4rem;
|
||||
}
|
||||
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
|
||||
table.b-table.b-table-stacked-lg > tbody > tr > [data-label] {
|
||||
display: grid;
|
||||
grid-template-columns: 40% auto;
|
||||
grid-gap: 0.25rem 1rem;
|
||||
}
|
||||
/* generate row cell "heading" */
|
||||
table.b-table.b-table-stacked-lg > tbody > tr > [data-label]::before {
|
||||
content: attr(data-label);
|
||||
display: inline;
|
||||
text-align: right;
|
||||
overflow-wrap: break-word;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 1199.99px) {
|
||||
/* under XL */
|
||||
table.b-table.b-table-stacked-xl {
|
||||
width: 100%;
|
||||
}
|
||||
table.b-table.b-table-stacked-xl,
|
||||
table.b-table.b-table-stacked-xl > tbody,
|
||||
table.b-table.b-table-stacked-xl > tbody > tr,
|
||||
table.b-table.b-table-stacked-xl > tbody > tr > td,
|
||||
table.b-table.b-table-stacked-xl > tbody > tr > th,
|
||||
table.b-table.b-table-stacked-xl > caption {
|
||||
display: block;
|
||||
}
|
||||
/* hide stuff we can't deal with, or shouldn't show */
|
||||
table.b-table.b-table-stacked-xl > thead,
|
||||
table.b-table.b-table-stacked-xl > tfoot,
|
||||
table.b-table.b-table-stacked-xl > tbody > tr.b-table-top-row,
|
||||
table.b-table.b-table-stacked-xl > tbody > tr.b-table-bottom-row {
|
||||
display: none;
|
||||
}
|
||||
/* inter-row top border */
|
||||
table.b-table.b-table-stacked-xl > tbody > tr > :first-child {
|
||||
border-top-width: 0.4rem;
|
||||
}
|
||||
/* convert TD/TH contents to "cells". Caveat: child elements become cells! */
|
||||
table.b-table.b-table-stacked-xl > tbody > tr > [data-label] {
|
||||
display: grid;
|
||||
grid-template-columns: 40% auto;
|
||||
grid-gap: 0.25rem 1rem;
|
||||
}
|
||||
/* generate row cell "heading" */
|
||||
table.b-table.b-table-stacked-xl > tbody > tr > [data-label]::before {
|
||||
content: attr(data-label);
|
||||
display: inline;
|
||||
text-align: right;
|
||||
overflow-wrap: break-word;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
/* Details row styling */
|
||||
table.b-table > tbody > tr.b-table-details > td {
|
||||
border-top: none;
|
||||
}
|
||||
9426
static/css/bootstrap.css
vendored
Normal file
6
static/css/bootstrap.min.css
vendored
Normal file
8891
static/css/bootstrap.scss
vendored
Normal file
1260
static/css/kline.css
Normal file
BIN
static/img/coincalf.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
static/img/finance/add-addr-bg.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/img/finance/add-bankcard.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/img/finance/bankcard.png
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
static/img/finance/company-alipay.png
Normal file
|
After Width: | Height: | Size: 139 KiB |
BIN
static/img/finance/company-alipay_bak.png
Normal file
|
After Width: | Height: | Size: 503 KiB |
BIN
static/img/finance/gongshang-bank.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/img/finance/trash.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/img/finance/zhaoshang.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
static/img/kine-loading.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
static/img/load-pix.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
527
static/new_kline/forex.html
Normal file
@@ -0,0 +1,527 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>pcn</title>
|
||||
<link href="../css/kline.css" rel="stylesheet" type="text/css">
|
||||
<script src="/static/config.js"></script>
|
||||
<script src="lib/jquery.js"></script>
|
||||
<script src="lib/jquery.mousewheel.js"></script>
|
||||
<script src="lib/SocketHandler.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="bk-animationload">
|
||||
<div class="bk-preloader"></div>
|
||||
</div>
|
||||
<!-- <div id="trade_container" class="ZB_kline">
|
||||
<div class="m_cent">
|
||||
<div class="m_guadan">
|
||||
<div id="market">ZB/QC 交易</div>
|
||||
<div id="orderbook">
|
||||
<div id="asks">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
<div id="gasks">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
<div id="price" class="red"></div>
|
||||
<div id="bids">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
<div id="gbids">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="trades" class="trades">
|
||||
<div class="trades_list">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Chart Container -->
|
||||
<div id="chart_container" class="dark">
|
||||
|
||||
<!-- Dom Element Cache -->
|
||||
<div id="chart_dom_elem_cache"></div>
|
||||
|
||||
<!-- ToolBar -->
|
||||
<div id="chart_toolbar">
|
||||
<div class="chart_toolbar_minisep"> </div>
|
||||
<!-- Periods -->
|
||||
<div class="chart_dropdown" id="chart_toolbar_periods_vert" style="display: none">
|
||||
<div class="chart_dropdown_t"><a class="chart_str_period">TIME</a></div>
|
||||
<div class="chart_dropdown_data" style="margin-left: -58px;">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li id="chart_period_1w_v" name="1w"> <a class="chart_str_period_1w">1w</a></li>
|
||||
<li id="chart_period_3d_v" name="3d"> <a class="chart_str_period_3d">3d</a></li>
|
||||
<li id="chart_period_1d_v" name="1d"> <a class="chart_str_period_1d">1d</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li id="chart_period_12h_v" name="12h"> <a class="chart_str_period_12h">12h</a></li>
|
||||
<li id="chart_period_6h_v" name="6h"> <a class="chart_str_period_6h">6h</a></li>
|
||||
<li id="chart_period_4h_v" name="4h"> <a class="chart_str_period_4h">4h</a></li>
|
||||
<li id="chart_period_2h_v" name="2h"> <a class="chart_str_period_2h">2h</a></li>
|
||||
<li id="chart_period_1h_v" name="1h"> <a class="chart_str_period_1h">1h</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li id="chart_period_30m_v" name="30m"> <a class="chart_str_period_30m">30m</a></li>
|
||||
<li id="chart_period_15m_v" name="15m"> <a class="chart_str_period_15m">15m</a></li>
|
||||
<li id="chart_period_5m_v" name="5m"> <a class="chart_str_period_5m">5m</a></li>
|
||||
<li id="chart_period_3m_v" name="3m"> <a class="chart_str_period_3m">3m</a></li>
|
||||
<li id="chart_period_1m_v" name="1m"> <a class="chart_str_period_1m">1m</a></li>
|
||||
<li id="chart_period_line_v" name="line"><a class="chart_str_period_line">Line</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart_toolbar_periods_horz">
|
||||
<ul class="chart_toolbar_tabgroup" style="padding-left:5px; padding-right:11px;">
|
||||
<li id="chart_period_1w_h" name="1w" style="display: inline-block;"> <a class="chart_str_period_1w">1w</a></li>
|
||||
<li id="chart_period_3d_h" name="3d" style="display: inline-block;"> <a class="chart_str_period_3d">3d</a></li>
|
||||
<li id="chart_period_1d_h" name="1d" style="display: inline-block;"> <a class="chart_str_period_1d">1d</a></li>
|
||||
<li id="chart_period_12h_h" name="12h" style="display: none;"> <a class="chart_str_period_12h">12h</a></li>
|
||||
<li id="chart_period_6h_h" name="6h" style="display: none;"> <a class="chart_str_period_6h">6h</a></li>
|
||||
<li id="chart_period_4h_h" name="4h" style="display: none;"> <a class="chart_str_period_4h">4h</a></li>
|
||||
<li id="chart_period_2h_h" name="2h" style="display: none;"> <a class="chart_str_period_2h">2h</a></li>
|
||||
<li id="chart_period_1h_h" name="1h" style="display: inline-block;"> <a class="chart_str_period_1h selected">1h</a></li>
|
||||
<li id="chart_period_30m_h" name="30m" style="display: inline-block;"> <a class="chart_str_period_30m">30m</a></li>
|
||||
<li id="chart_period_15m_h" name="15m" style="display: inline-block;"> <a class="chart_str_period_15m">15m</a></li>
|
||||
<li id="chart_period_5m_h" name="5m" style="display: inline-block;"> <a class="chart_str_period_5m">5m</a></li>
|
||||
<li id="chart_period_3m_h" name="3m" style="display: none;"> <a class="chart_str_period_3m">3m</a></li>
|
||||
<li id="chart_period_1m_h" name="1m" style="display: inline-block;"> <a class="chart_str_period_1m">1m</a></li>
|
||||
<li id="chart_period_line_h" name="line" style="display: inline-block;"><a class="chart_str_period_line">Line</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Periods -->
|
||||
|
||||
|
||||
<!-- Open TabBar -->
|
||||
|
||||
|
||||
<!-- Open ToolPanel -->
|
||||
|
||||
|
||||
<!-- Theme -->
|
||||
|
||||
|
||||
<!-- Settings -->
|
||||
<div id="chart_show_indicator" class="chart_toolbar_button chart_str_indicator_cap selected">INDICATOR</div>
|
||||
<div id="chart_show_tools" class="chart_toolbar_button chart_str_tools_cap selected">TOOLS</div>
|
||||
<div id="chart_toolbar_theme">
|
||||
<div class="chart_toolbar_label chart_str_theme_cap">THEME</div>
|
||||
<a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a>
|
||||
<a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a>
|
||||
</div>
|
||||
<div class="chart_dropdown" id="chart_dropdown_settings">
|
||||
<div class="chart_dropdown_t"><a class="chart_str_settings">MORE</a></div>
|
||||
<div class="chart_dropdown_data">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr id="chart_select_main_indicator">
|
||||
<td class="chart_str_main_indicator">Main Indicator</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="MA" class="">MA</a></li>
|
||||
<li><a name="EMA" class="">EMA</a></li>
|
||||
<li><a name="BOLL" class="">BOLL</a></li>
|
||||
<li><a name="SAR" class="">SAR</a></li>
|
||||
<li><a name="NONE" class="">None</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="chart_select_chart_style">
|
||||
<td class="chart_str_chart_style">Chart Style</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a class="">CandleStick</a></li>
|
||||
<li><a>CandleStickHLC</a></li>
|
||||
<li><a class="">OHLC</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr id="chart_select_theme" style="display: none;">
|
||||
<td class="chart_str_theme">Theme</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a></li>
|
||||
<li><a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr id="chart_enable_tools" style="display: none;">
|
||||
<td class="chart_str_tools">Tools</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="on" class="chart_str_on selected">On</a></li>
|
||||
<li><a name="off" class="chart_str_off">Off</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr id="chart_enable_indicator">
|
||||
<td class="chart_str_indicator">Indicator</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="on" class="chart_str_on selected">On</a></li>
|
||||
<li><a name="off" class="chart_str_off">Off</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<ul><li><a id="chart_btn_parameter_settings" class="chart_str_indicator_parameters">Indicator Parameters</a></li></ul>
|
||||
</td>
|
||||
</tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="chart_dropdown" id="chart_language_setting_div" style="padding-left: 5px;">
|
||||
<div class="chart_dropdown_t">
|
||||
<a class="chart_language_setting">LANGUAGE</a>
|
||||
</div>
|
||||
<div class="chart_dropdown_data" style="padding-top: 15px;">
|
||||
<ul>
|
||||
<li style="height: 25px;"><a name="zh-cn">简体中文(zh-CN)</a></li>
|
||||
<li style="height: 25px;"><a name="en-us">English(en-US)</a></li>
|
||||
<li style="height: 25px;"><a name="zh-hk">繁體中文(zh-HK)</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
|
||||
<div id="chart_updated_time">
|
||||
<span class="chart_str_updated">Updated</span>
|
||||
<span id="chart_updated_time_text">0s</span>
|
||||
<span class="chart_str_ago">ago</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ToolPanel -->
|
||||
<div id="chart_toolpanel" style="display: inline; left: 0px; top: 30px; width: 32px; height: 949px;">
|
||||
<div class="chart_toolpanel_separator"></div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_Cursor" name="Cursor"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_cursor">Cursor</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button selected">
|
||||
<div class="chart_toolpanel_icon" id="chart_CrossCursor" name="CrossCursor"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_cross_cursor">Cross Cursor</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_SegLine" name="SegLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_seg_line">Trend Line</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_StraightLine" name="StraightLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_straight_line">Extended</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_RayLine" name="RayLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_ray_line">Ray</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_ArrowLine" name="ArrowLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_arrow_line">Arrow</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_HoriSegLine" name="HoriSegLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_horz_seg_line">Horizontal Line</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_HoriStraightLine" name="HoriStraightLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_horz_straight_line">Horizontal Extended</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_HoriRayLine" name="HoriRayLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_horz_ray_line">Horizontal Ray</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_VertiStraightLine" name="VertiStraightLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_vert_straight_line">Vertical Extended</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_PriceLine" name="PriceLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_price_line">Price Line</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_TriParallelLine" name="TriParallelLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_tri_parallel_line">Parallel Channel</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_BiParallelLine" name="BiParallelLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_bi_parallel_line">Parallel Lines</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_BiParallelRayLine" name="BiParallelRayLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_bi_parallel_ray">Parallel Rays</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_DrawFibRetrace" name="DrawFibRetrace"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_fib_retrace">Fibonacci Retracements</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_DrawFibFans" name="DrawFibFans"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_fib_fans">Fibonacci Fans</div>
|
||||
</div>
|
||||
<div style="padding-left: 3px;padding-top: 10px;">
|
||||
<button style="color: red;" id="clearCanvas" title="Clear All" >X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Canvas Group -->
|
||||
<div id="chart_canvasGroup" style="left: 33px; top: 30px; width: 2500px; height: 926px;">
|
||||
<canvas class="chart_canvas" id="chart_mainCanvas" width="2527" height="926" style="cursor: none;"></canvas>
|
||||
<canvas class="chart_canvas" id="chart_overlayCanvas" width="2527" height="926" style="cursor: none;"></canvas>
|
||||
</div>
|
||||
<!-- TabBar -->
|
||||
<div id="chart_tabbar" style="display: block; position:relative; left: 33px; top: 956px; width: 2527px; height: 22px;">
|
||||
|
||||
<ul>
|
||||
<li><a name="MACD" class="">MACD</a></li>
|
||||
<li><a name="KDJ" class="">KDJ</a></li>
|
||||
<li><a name="StochRSI" class="">StochRSI</a></li>
|
||||
<li><a name="RSI" class="">RSI</a></li>
|
||||
<li><a name="DMI" class="">DMI</a></li>
|
||||
<li><a name="OBV" class="">OBV</a></li>
|
||||
<li><a name="BOLL" class="">BOLL</a></li>
|
||||
<li><a name="SAR" class="">SAR</a></li>
|
||||
<li><a name="DMA" class="">DMA</a></li>
|
||||
<li><a name="TRIX" class="">TRIX</a></li>
|
||||
<li><a name="BRAR" class="">BRAR</a></li>
|
||||
<li><a name="VR" class="">VR</a></li>
|
||||
<li><a name="EMV" class="">EMV</a></li>
|
||||
<li><a name="WR" class="">WR</a></li>
|
||||
<li><a name="ROC" class="">ROC</a></li>
|
||||
<li><a name="MTM" class="">MTM</a></li>
|
||||
<li><a name="PSY">PSY</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Parameter Settings -->
|
||||
<div id="chart_parameter_settings" style="left: 960px; top: 281px;">
|
||||
<h2 class="chart_str_indicator_parameters">Indicator Parameters</h2>
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>MA</th>
|
||||
<td><input name="MA"><input name="MA"><input name="MA"><input name="MA"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>DMA</th>
|
||||
<td><input name="DMA"><input name="DMA"><input name="DMA"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>EMA</th>
|
||||
<td><input name="EMA"><input name="EMA"><input name="EMA"><input name="EMA"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>TRIX</th>
|
||||
<td><input name="TRIX"><input name="TRIX"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>VOLUME</th>
|
||||
<td><input name="VOLUME"><input name="VOLUME"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>BRAR</th>
|
||||
<td><input name="BRAR"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>MACD</th>
|
||||
<td><input name="MACD"><input name="MACD"><input name="MACD"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>VR</th>
|
||||
<td><input name="VR"><input name="VR"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>KDJ</th>
|
||||
<td><input name="KDJ"><input name="KDJ"><input name="KDJ"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>EMV</th>
|
||||
<td><input name="EMV"><input name="EMV"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>StochRSI</th>
|
||||
<td><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>WR</th>
|
||||
<td><input name="WR"><input name="WR"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>RSI</th>
|
||||
<td><input name="RSI"><input name="RSI"><input name="RSI"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>ROC</th>
|
||||
<td><input name="ROC"><input name="ROC"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>DMI</th>
|
||||
<td><input name="DMI"><input name="DMI"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>MTM</th>
|
||||
<td><input name="MTM"><input name="MTM"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<!-- <th>OBV</th>
|
||||
<td><input name="OBV"></td>
|
||||
<td><button class="chart_str_default">default</button></td> -->
|
||||
<th>BOLL</th>
|
||||
<td><input name="BOLL"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>PSY</th>
|
||||
<td><input name="PSY"><input name="PSY"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<!-- <tr>
|
||||
<th>BOLL</th>
|
||||
<td><input name="BOLL"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr> -->
|
||||
</tbody></table>
|
||||
<div id="close_settings"><a class="chart_str_close">CLOSE</a></div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div id="chart_loading" class="chart_str_loading" style="left: 1180px; top: 232px;">Loading...</div>
|
||||
|
||||
</div> <!-- End Of ChartContainer -->
|
||||
|
||||
<div style="display: none">
|
||||
<form style="display: inline" id="chart_input_interface">
|
||||
<input style="display: inline" type="text" id="chart_input_interface_text">
|
||||
<input style="display: inline" type="submit" id="chart_input_interface_submit">
|
||||
</form>
|
||||
<form style="display: inline" id="chart_output_interface">
|
||||
<input style="display: inline" type="text" id="chart_output_interface_text">
|
||||
<input style="display: inline" type="submit" id="chart_output_interface_submit">
|
||||
</form>
|
||||
</div>
|
||||
<div style="display: none" id="chart_language_switch_tmp">
|
||||
|
||||
<span name="chart_str_period" zh_hk="週期" zh_cn="周期" en_us="TIME"></span>
|
||||
<span name="chart_str_period_line" zh_hk="分時" zh_cn="分时" en_us="Line"></span>
|
||||
<span name="chart_str_period_1m" zh_hk="1分钟" zh_cn="1分钟" en_us="1m"></span>
|
||||
<span name="chart_str_period_3m" zh_hk="3分钟" zh_cn="3分钟" en_us="3m"></span>
|
||||
<span name="chart_str_period_5m" zh_hk="5分钟" zh_cn="5分钟" en_us="5m"></span>
|
||||
<span name="chart_str_period_15m" zh_hk="15分钟" zh_cn="15分钟" en_us="15m"></span>
|
||||
<span name="chart_str_period_30m" zh_hk="30分钟" zh_cn="30分钟" en_us="30m"></span>
|
||||
<span name="chart_str_period_1h" zh_hk="1小時" zh_cn="1小时" en_us="1h"></span>
|
||||
<span name="chart_str_period_2h" zh_hk="2小時" zh_cn="2小时" en_us="2h"></span>
|
||||
<span name="chart_str_period_4h" zh_hk="4小時" zh_cn="4小时" en_us="4h"></span>
|
||||
<span name="chart_str_period_6h" zh_hk="6小時" zh_cn="6小时" en_us="6h"></span>
|
||||
<span name="chart_str_period_12h" zh_hk="12小時" zh_cn="12小时" en_us="12h"></span>
|
||||
<span name="chart_str_period_1d" zh_hk="日線" zh_cn="日线" en_us="1d"></span>
|
||||
<span name="chart_str_period_3d" zh_hk="3日" zh_cn="3日" en_us="3d"></span>
|
||||
<span name="chart_str_period_1w" zh_hk="周線" zh_cn="周线" en_us="1w"></span>
|
||||
|
||||
<span name="chart_str_settings" zh_hk="更多" zh_cn="更多" en_us="MORE"></span>
|
||||
<span name="chart_setting_main_indicator" zh_hk="均線設置" zh_cn="均线设置" en_us="Main Indicator"></span>
|
||||
<span name="chart_setting_main_indicator_none" zh_hk="關閉均線" zh_cn="关闭均线" en_us="None"></span>
|
||||
<span name="chart_setting_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
|
||||
|
||||
<span name="chart_str_chart_style" zh_hk="主圖樣式" zh_cn="主图样式" en_us="Chart Style"></span>
|
||||
<span name="chart_str_main_indicator" zh_hk="主指標" zh_cn="主指标" en_us="Main Indicator"></span>
|
||||
<span name="chart_str_indicator" zh_hk="技術指標" zh_cn="技术指标" en_us="Indicator"></span>
|
||||
<span name="chart_str_indicator_cap" zh_hk="技術指標" zh_cn="技术指标" en_us="INDICATOR"></span>
|
||||
<span name="chart_str_tools" zh_hk="畫線工具" zh_cn="画线工具" en_us="Tools"></span>
|
||||
<span name="chart_str_tools_cap" zh_hk="畫線工具" zh_cn="画线工具" en_us="TOOLS"></span>
|
||||
<span name="chart_str_theme" zh_hk="主題選擇" zh_cn="主题选择" en_us="Theme"></span>
|
||||
<span name="chart_str_theme_cap" zh_hk="主題選擇" zh_cn="主题选择" en_us="THEME"></span>
|
||||
|
||||
<span name="chart_language_setting" zh_hk="語言(LANG)" zh_cn="语言(LANG)" en_us="LANGUAGE"></span>
|
||||
<span name="chart_exchanges_setting" zh_hk="更多市場" zh_cn="更多市场" en_us="MORE MARKETS"></span>
|
||||
<span name="chart_othercoin_setting" zh_hk="其它市場" zh_cn="其它市场" en_us="OTHER MARKETS"></span>
|
||||
|
||||
|
||||
<span name="chart_str_none" zh_hk="關閉" zh_cn="关闭" en_us="None"></span>
|
||||
|
||||
<span name="chart_str_theme_dark" zh_hk="深色主題" zh_cn="深色主题" en_us="Dark"></span>
|
||||
<span name="chart_str_theme_light" zh_hk="淺色主題" zh_cn="浅色主题" en_us="Light"></span>
|
||||
|
||||
<span name="chart_str_on" zh_hk="開啟" zh_cn="开启" en_us="On"></span>
|
||||
<span name="chart_str_off" zh_hk="關閉" zh_cn="关闭" en_us="Off"></span>
|
||||
|
||||
<span name="chart_str_close" zh_hk="關閉" zh_cn="关闭" en_us="CLOSE"></span>
|
||||
<span name="chart_str_default" zh_hk="默認值" zh_cn="默认值" en_us="default"></span>
|
||||
|
||||
<span name="chart_str_loading" zh_hk="正在讀取數據..." zh_cn="正在读取数据..." en_us="Loading..."></span>
|
||||
|
||||
<span name="chart_str_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
|
||||
|
||||
<span name="chart_str_cursor" zh_hk="光標" zh_cn="光标" en_us="Cursor"></span>
|
||||
<span name="chart_str_cross_cursor" zh_hk="十字光標" zh_cn="十字光标" en_us="Cross Cursor"></span>
|
||||
<span name="chart_str_seg_line" zh_hk="線段" zh_cn="线段" en_us="Trend Line"></span>
|
||||
<span name="chart_str_straight_line" zh_hk="直線" zh_cn="直线" en_us="Extended"></span>
|
||||
<span name="chart_str_ray_line" zh_hk="射線" zh_cn="射线" en_us="Ray"></span>
|
||||
<span name="chart_str_arrow_line" zh_hk="箭頭" zh_cn="箭头" en_us="Arrow"></span>
|
||||
<span name="chart_str_horz_seg_line" zh_hk="水平線段" zh_cn="水平线段" en_us="Horizontal Line"></span>
|
||||
<span name="chart_str_horz_straight_line" zh_hk="水平直線" zh_cn="水平直线" en_us="Horizontal Extended"></span>
|
||||
<span name="chart_str_horz_ray_line" zh_hk="水平射線" zh_cn="水平射线" en_us="Horizontal Ray"></span>
|
||||
<span name="chart_str_vert_straight_line" zh_hk="垂直直線" zh_cn="垂直直线" en_us="Vertical Extended"></span>
|
||||
<span name="chart_str_price_line" zh_hk="價格線" zh_cn="价格线" en_us="Price Line"></span>
|
||||
<span name="chart_str_tri_parallel_line" zh_hk="價格通道線" zh_cn="价格通道线" en_us="Parallel Channel"></span>
|
||||
<span name="chart_str_bi_parallel_line" zh_hk="平行直線" zh_cn="平行直线" en_us="Parallel Lines"></span>
|
||||
<span name="chart_str_bi_parallel_ray" zh_hk="平行射線" zh_cn="平行射线" en_us="Parallel Rays"></span>
|
||||
<span name="chart_str_fib_retrace" zh_hk="斐波納契回調" zh_cn="斐波纳契回调" en_us="Fibonacci Retracements"></span>
|
||||
<span name="chart_str_fib_fans" zh_hk="斐波納契扇形" zh_cn="斐波纳契扇形" en_us="Fibonacci Fans"></span>
|
||||
|
||||
<span name="chart_str_updated" zh_hk="更新於" zh_cn="更新于" en_us="Updated"></span>
|
||||
<span name="chart_str_ago" zh_hk="前" zh_cn="前" en_us="ago"></span>
|
||||
</div>
|
||||
<script src="lib/kline.draw.js"></script>
|
||||
<script type="text/javascript">
|
||||
var option = {
|
||||
market_from: queryString('symbol'),
|
||||
market_from_name: queryString('marketName'),
|
||||
url: window.config.socketServer,
|
||||
subscribePath: "market.tc.~symbol~.kline.~period~",
|
||||
displayVolume: false,
|
||||
ajaxURL:window.config.ajaxServer+"/forex/market/kline/~symbol~/~period~"
|
||||
};
|
||||
new KLine(option).draw()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
131
static/new_kline/lib/SocketHandler.js
Normal file
@@ -0,0 +1,131 @@
|
||||
function SocketHandler(url) {
|
||||
// 基于H5原生api
|
||||
this.ws = new WebSocket(url);
|
||||
// 定义一个信号发射塔,用于发送事件
|
||||
this.tower = document.createElement('div');
|
||||
}
|
||||
|
||||
SocketHandler.prototype = {
|
||||
// 订阅频道
|
||||
channels : {},
|
||||
// 反应堆(用于收集和分发socket的响应)
|
||||
reactions : {},
|
||||
// 缓存监听事件
|
||||
events : [],
|
||||
// 获取当前时间
|
||||
nowTime : function() {
|
||||
return new Date().getTime();
|
||||
},
|
||||
// 打开socket连接
|
||||
open : function(heartbeatTimeout) {
|
||||
this.ws.onopen = function(){
|
||||
var heartbeatSendInterval = heartbeatTimeout / 2;
|
||||
this.lastSubscribeTime = this.nowTime();
|
||||
this.pingIntervalId = setInterval(function(){
|
||||
var iv = this.nowTime() - this.lastSubscribeTime;
|
||||
// 超过一定时间自动与后台ping、pong 单位:秒
|
||||
if ((heartbeatSendInterval + iv) >= heartbeatTimeout) {
|
||||
this.send('ping');
|
||||
}
|
||||
}.bind(this), heartbeatSendInterval);
|
||||
}.bind(this);
|
||||
},
|
||||
|
||||
// 创建自定义事件
|
||||
createEvent : function(event, detail){
|
||||
var evt = document.createEvent('CustomEvent');
|
||||
evt.initCustomEvent(event, false, false, detail);
|
||||
return evt;
|
||||
},
|
||||
|
||||
// 打开socket连接
|
||||
connect: function(heartbeatTimeout) {
|
||||
this.open(heartbeatTimeout);
|
||||
this.message();
|
||||
this.close();
|
||||
},
|
||||
|
||||
// 订阅消息 ch 为订阅的频道 id 为订阅唯一标识
|
||||
subscribe : function(ch, id, token) {
|
||||
if(this.ws.readyState == 1) {
|
||||
var obj = {};
|
||||
if(ch) {
|
||||
obj.sub = ch;
|
||||
obj.id = id;
|
||||
if(token) obj.authorization = token;
|
||||
if(this.channels.hasOwnProperty(id)) {
|
||||
this.unsubscribe.apply(this, Object.values(this.channels[id]));
|
||||
}
|
||||
this.channels[id] = obj;
|
||||
this.reactions[ch] = this.createEvent(id);
|
||||
this.send(obj);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 监听订阅结果
|
||||
on : function(id, callback) {
|
||||
var handler = function(e) {
|
||||
if(callback) callback(e.data, e);
|
||||
};
|
||||
this.tower.addEventListener(id, handler);
|
||||
var key = id + '_' + this.nowTime();
|
||||
this.events.push({key : key, handler: handler});
|
||||
},
|
||||
|
||||
// 取消订阅
|
||||
unsubscribe : function(ch, id, token) {
|
||||
if(this.ws.readyState == 1) {
|
||||
var obj = {};
|
||||
if(ch) {
|
||||
obj.cancel = ch;
|
||||
obj.id = id;
|
||||
if(token) obj.authorization = token;
|
||||
if(this.channels.hasOwnProperty(id)) {
|
||||
delete this.channels[id];
|
||||
delete this.reactions[ch];
|
||||
}
|
||||
this.events = this.events.filter(function(v){
|
||||
if(v.key.indexOf(id) !== -1) {
|
||||
// 失效ID解除监听
|
||||
this.tower.removeEventListener(id, v.handler);
|
||||
}else{
|
||||
return v;
|
||||
}
|
||||
}.bind(this));
|
||||
this.send(obj);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
send : function(data){
|
||||
if(typeof data === 'object') {
|
||||
data = JSON.stringify(data);
|
||||
}
|
||||
this.ws.send(data);
|
||||
},
|
||||
|
||||
message : function() {
|
||||
this.ws.onmessage = function(evt){
|
||||
var data = evt.data;
|
||||
this.lastSubscribeTime = this.nowTime();
|
||||
if(data) {
|
||||
if(data !== 'pong') data = JSON.parse(data);
|
||||
if(typeof data === 'object' && data.hasOwnProperty('ch')) {
|
||||
var e = this.reactions[data.ch];
|
||||
if(e) {
|
||||
e.data = data;
|
||||
this.tower.dispatchEvent(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}.bind(this);
|
||||
},
|
||||
|
||||
close : function(callback) {
|
||||
this.ws.onclose = function(evt){
|
||||
clearInterval(this.pingIntervalId);
|
||||
if(callback) callback(evt, this.ws);
|
||||
}.bind(this);
|
||||
}
|
||||
};
|
||||
10253
static/new_kline/lib/jquery.js
vendored
Normal file
221
static/new_kline/lib/jquery.mousewheel.js
Normal file
@@ -0,0 +1,221 @@
|
||||
/*!
|
||||
* jQuery Mousewheel 3.1.13
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
// Node/CommonJS style for Browserify
|
||||
module.exports = factory;
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
|
||||
toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
|
||||
['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
|
||||
slice = Array.prototype.slice,
|
||||
nullLowestDeltaTimeout, lowestDelta;
|
||||
|
||||
if ( $.event.fixHooks ) {
|
||||
for ( var i = toFix.length; i; ) {
|
||||
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
|
||||
}
|
||||
}
|
||||
|
||||
var special = $.event.special.mousewheel = {
|
||||
version: '3.1.12',
|
||||
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i = toBind.length; i; ) {
|
||||
this.addEventListener( toBind[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
// Store the line height and page height for this particular element
|
||||
$.data(this, 'mousewheel-line-height', special.getLineHeight(this));
|
||||
$.data(this, 'mousewheel-page-height', special.getPageHeight(this));
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i = toBind.length; i; ) {
|
||||
this.removeEventListener( toBind[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
// Clean up the data we added to the element
|
||||
$.removeData(this, 'mousewheel-line-height');
|
||||
$.removeData(this, 'mousewheel-page-height');
|
||||
},
|
||||
|
||||
getLineHeight: function(elem) {
|
||||
var $elem = $(elem),
|
||||
$parent = $elem['offsetParent' in $.fn ? 'offsetParent' : 'parent']();
|
||||
if (!$parent.length) {
|
||||
$parent = $('body');
|
||||
}
|
||||
return parseInt($parent.css('fontSize'), 10) || parseInt($elem.css('fontSize'), 10) || 16;
|
||||
},
|
||||
|
||||
getPageHeight: function(elem) {
|
||||
return $(elem).height();
|
||||
},
|
||||
|
||||
settings: {
|
||||
adjustOldDeltas: true, // see shouldAdjustOldDeltas() below
|
||||
normalizeOffset: true // calls getBoundingClientRect for each event
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel');
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind('mousewheel', fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event,
|
||||
args = slice.call(arguments, 1),
|
||||
delta = 0,
|
||||
deltaX = 0,
|
||||
deltaY = 0,
|
||||
absDelta = 0,
|
||||
offsetX = 0,
|
||||
offsetY = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = 'mousewheel';
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; }
|
||||
if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; }
|
||||
if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; }
|
||||
if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
|
||||
|
||||
// Firefox < 17 horizontal scrolling related to DOMMouseScroll event
|
||||
if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||
deltaX = deltaY * -1;
|
||||
deltaY = 0;
|
||||
}
|
||||
|
||||
// Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
|
||||
delta = deltaY === 0 ? deltaX : deltaY;
|
||||
|
||||
// New school wheel delta (wheel event)
|
||||
if ( 'deltaY' in orgEvent ) {
|
||||
deltaY = orgEvent.deltaY * -1;
|
||||
delta = deltaY;
|
||||
}
|
||||
if ( 'deltaX' in orgEvent ) {
|
||||
deltaX = orgEvent.deltaX;
|
||||
if ( deltaY === 0 ) { delta = deltaX * -1; }
|
||||
}
|
||||
|
||||
// No change actually happened, no reason to go any further
|
||||
if ( deltaY === 0 && deltaX === 0 ) { return; }
|
||||
|
||||
// Need to convert lines and pages to pixels if we aren't already in pixels
|
||||
// There are three delta modes:
|
||||
// * deltaMode 0 is by pixels, nothing to do
|
||||
// * deltaMode 1 is by lines
|
||||
// * deltaMode 2 is by pages
|
||||
if ( orgEvent.deltaMode === 1 ) {
|
||||
var lineHeight = $.data(this, 'mousewheel-line-height');
|
||||
delta *= lineHeight;
|
||||
deltaY *= lineHeight;
|
||||
deltaX *= lineHeight;
|
||||
} else if ( orgEvent.deltaMode === 2 ) {
|
||||
var pageHeight = $.data(this, 'mousewheel-page-height');
|
||||
delta *= pageHeight;
|
||||
deltaY *= pageHeight;
|
||||
deltaX *= pageHeight;
|
||||
}
|
||||
|
||||
// Store lowest absolute delta to normalize the delta values
|
||||
absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
|
||||
|
||||
if ( !lowestDelta || absDelta < lowestDelta ) {
|
||||
lowestDelta = absDelta;
|
||||
|
||||
// Adjust older deltas if necessary
|
||||
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
|
||||
lowestDelta /= 40;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust older deltas if necessary
|
||||
if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
|
||||
// Divide all the things by 40!
|
||||
delta /= 40;
|
||||
deltaX /= 40;
|
||||
deltaY /= 40;
|
||||
}
|
||||
|
||||
// Get a whole, normalized value for the deltas
|
||||
delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta);
|
||||
deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
|
||||
deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
|
||||
|
||||
// Normalise offsetX and offsetY properties
|
||||
if ( special.settings.normalizeOffset && this.getBoundingClientRect ) {
|
||||
var boundingRect = this.getBoundingClientRect();
|
||||
offsetX = event.clientX - boundingRect.left;
|
||||
offsetY = event.clientY - boundingRect.top;
|
||||
}
|
||||
|
||||
// Add information to the event object
|
||||
event.deltaX = deltaX;
|
||||
event.deltaY = deltaY;
|
||||
event.deltaFactor = lowestDelta;
|
||||
event.offsetX = offsetX;
|
||||
event.offsetY = offsetY;
|
||||
// Go ahead and set deltaMode to 0 since we converted to pixels
|
||||
// Although this is a little odd since we overwrite the deltaX/Y
|
||||
// properties with normalized deltas.
|
||||
event.deltaMode = 0;
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, delta, deltaX, deltaY);
|
||||
|
||||
// Clearout lowestDelta after sometime to better
|
||||
// handle multiple device types that give different
|
||||
// a different lowestDelta
|
||||
// Ex: trackpad = 3 and mouse wheel = 120
|
||||
if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
|
||||
nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
|
||||
|
||||
return ($.event.dispatch || $.event.handle).apply(this, args);
|
||||
}
|
||||
|
||||
function nullLowestDelta() {
|
||||
lowestDelta = null;
|
||||
}
|
||||
|
||||
function shouldAdjustOldDeltas(orgEvent, absDelta) {
|
||||
// If this is an older event and the delta is divisable by 120,
|
||||
// then we are assuming that the browser is treating this as an
|
||||
// older mouse wheel event and that we should divide the deltas
|
||||
// by 40 to try and get a more usable deltaFactor.
|
||||
// Side note, this actually impacts the reported scroll distance
|
||||
// in older browsers and can cause scrolling to be slower than native.
|
||||
// Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
|
||||
return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
|
||||
}
|
||||
|
||||
}));
|
||||
9434
static/new_kline/lib/kline.draw.js
Normal file
529
static/new_kline/trade.html
Normal file
@@ -0,0 +1,529 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>pcn</title>
|
||||
<link href="../css/kline.css" rel="stylesheet" type="text/css">
|
||||
<script src="/static/config.js"></script>
|
||||
<script src="lib/jquery.js"></script>
|
||||
<script src="lib/jquery.mousewheel.js"></script>
|
||||
<script src="lib/SocketHandler.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="bk-animationload">
|
||||
<div class="bk-preloader"></div>
|
||||
</div>
|
||||
<!-- <div id="trade_container" class="ZB_kline">
|
||||
<div class="m_cent">
|
||||
<div class="m_guadan">
|
||||
<div id="market">ZB/QC 交易</div>
|
||||
<div id="orderbook">
|
||||
<div id="asks">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
<div id="gasks">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
<div id="price" class="red"></div>
|
||||
<div id="bids">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
<div id="gbids">
|
||||
<div class="table">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="trades" class="trades">
|
||||
<div class="trades_list">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Chart Container -->
|
||||
<div id="chart_container" class="dark">
|
||||
|
||||
<!-- Dom Element Cache -->
|
||||
<div id="chart_dom_elem_cache"></div>
|
||||
|
||||
<!-- ToolBar -->
|
||||
<div id="chart_toolbar" style="padding-left:100px!important">
|
||||
<div class="chart_toolbar_minisep"> </div>
|
||||
|
||||
<!-- Periods -->
|
||||
<div class="chart_dropdown" id="chart_toolbar_periods_vert" style="display: none">
|
||||
<div class="chart_dropdown_t"><a class="chart_str_period">TIME</a></div>
|
||||
<div class="chart_dropdown_data" style="margin-left: -58px;">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li id="chart_period_1w_v" name="1w"> <a class="chart_str_period_1w">1w</a></li>
|
||||
<li id="chart_period_3d_v" name="3d"> <a class="chart_str_period_3d">3d</a></li>
|
||||
<li id="chart_period_1d_v" name="1d"> <a class="chart_str_period_1d">1d</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li id="chart_period_12h_v" name="12h"> <a class="chart_str_period_12h">12h</a></li>
|
||||
<li id="chart_period_6h_v" name="6h"> <a class="chart_str_period_6h">6h</a></li>
|
||||
<li id="chart_period_4h_v" name="4h"> <a class="chart_str_period_4h">4h</a></li>
|
||||
<li id="chart_period_2h_v" name="2h"> <a class="chart_str_period_2h">2h</a></li>
|
||||
<li id="chart_period_1h_v" name="1h"> <a class="chart_str_period_1h">1h</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<ul>
|
||||
<li id="chart_period_30m_v" name="30m"> <a class="chart_str_period_30m">30m</a></li>
|
||||
<li id="chart_period_15m_v" name="15m"> <a class="chart_str_period_15m">15m</a></li>
|
||||
<li id="chart_period_5m_v" name="5m"> <a class="chart_str_period_5m">5m</a></li>
|
||||
<li id="chart_period_3m_v" name="3m"> <a class="chart_str_period_3m">3m</a></li>
|
||||
<li id="chart_period_1m_v" name="1m"> <a class="chart_str_period_1m">1m</a></li>
|
||||
<li id="chart_period_line_v" name="line"><a class="chart_str_period_line">Line</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chart_toolbar_periods_horz">
|
||||
<ul class="chart_toolbar_tabgroup" style="padding-left:5px; padding-right:11px;">
|
||||
<li id="chart_period_1w_h" name="1w" style="display: inline-block;"> <a class="chart_str_period_1w">1w</a></li>
|
||||
<li id="chart_period_3d_h" name="3d" style="display: inline-block;"> <a class="chart_str_period_3d">3d</a></li>
|
||||
<li id="chart_period_1d_h" name="1d" style="display: inline-block;"> <a class="chart_str_period_1d">1d</a></li>
|
||||
<li id="chart_period_12h_h" name="12h" style="display: none;"> <a class="chart_str_period_12h">12h</a></li>
|
||||
<li id="chart_period_6h_h" name="6h" style="display: none;"> <a class="chart_str_period_6h">6h</a></li>
|
||||
<li id="chart_period_4h_h" name="4h" style="display: none;"> <a class="chart_str_period_4h">4h</a></li>
|
||||
<li id="chart_period_2h_h" name="2h" style="display: none;"> <a class="chart_str_period_2h">2h</a></li>
|
||||
<li id="chart_period_1h_h" name="1h" style="display: inline-block;"> <a class="chart_str_period_1h selected">1h</a></li>
|
||||
<li id="chart_period_30m_h" name="30m" style="display: inline-block;"> <a class="chart_str_period_30m">30m</a></li>
|
||||
<li id="chart_period_15m_h" name="15m" style="display: inline-block;"> <a class="chart_str_period_15m">15m</a></li>
|
||||
<li id="chart_period_5m_h" name="5m" style="display: inline-block;"> <a class="chart_str_period_5m">5m</a></li>
|
||||
<li id="chart_period_3m_h" name="3m" style="display: none;"> <a class="chart_str_period_3m">3m</a></li>
|
||||
<li id="chart_period_1m_h" name="1m" style="display: inline-block;"> <a class="chart_str_period_1m">1m</a></li>
|
||||
<li id="chart_period_line_h" name="line" style="display: inline-block;"><a class="chart_str_period_line">Line</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Periods -->
|
||||
|
||||
|
||||
<!-- Open TabBar -->
|
||||
|
||||
|
||||
<!-- Open ToolPanel -->
|
||||
|
||||
|
||||
<!-- Theme -->
|
||||
|
||||
|
||||
<!-- Settings -->
|
||||
<div id="chart_show_indicator" class="chart_toolbar_button chart_str_indicator_cap selected">INDICATOR</div>
|
||||
<div id="chart_show_tools" class="chart_toolbar_button chart_str_tools_cap selected">TOOLS</div>
|
||||
<div id="chart_toolbar_theme">
|
||||
<div class="chart_toolbar_label chart_str_theme_cap">THEME</div>
|
||||
<a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a>
|
||||
<a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a>
|
||||
</div>
|
||||
<div class="chart_dropdown" id="chart_dropdown_settings">
|
||||
<div class="chart_dropdown_t"><a class="chart_str_settings">MORE</a></div>
|
||||
<div class="chart_dropdown_data">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr id="chart_select_main_indicator">
|
||||
<td class="chart_str_main_indicator">Main Indicator</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="MA" class="">MA</a></li>
|
||||
<li><a name="EMA" class="">EMA</a></li>
|
||||
<li><a name="BOLL" class="">BOLL</a></li>
|
||||
<li><a name="SAR" class="">SAR</a></li>
|
||||
<li><a name="NONE" class="">None</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="chart_select_chart_style">
|
||||
<td class="chart_str_chart_style">Chart Style</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a class="">CandleStick</a></li>
|
||||
<li><a>CandleStickHLC</a></li>
|
||||
<li><a class="">OHLC</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr id="chart_select_theme" style="display: none;">
|
||||
<td class="chart_str_theme">Theme</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="dark" class="chart_icon chart_icon_theme_dark selected" title="红涨绿跌"></a></li>
|
||||
<li><a name="light" class="chart_icon chart_icon_theme_light" title="绿涨红跌"></a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr id="chart_enable_tools" style="display: none;">
|
||||
<td class="chart_str_tools">Tools</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="on" class="chart_str_on selected">On</a></li>
|
||||
<li><a name="off" class="chart_str_off">Off</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr id="chart_enable_indicator">
|
||||
<td class="chart_str_indicator">Indicator</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a name="on" class="chart_str_on selected">On</a></li>
|
||||
<li><a name="off" class="chart_str_off">Off</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr><tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<ul><li><a id="chart_btn_parameter_settings" class="chart_str_indicator_parameters">Indicator Parameters</a></li></ul>
|
||||
</td>
|
||||
</tr></tbody></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<div class="chart_dropdown" id="chart_language_setting_div" style="padding-left: 5px;">-->
|
||||
<!--<div class="chart_dropdown_t">-->
|
||||
<!--<a class="chart_language_setting">LANGUAGE</a>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="chart_dropdown_data" style="padding-top: 15px;">-->
|
||||
<!--<ul>-->
|
||||
<!--<li style="height: 25px;"><a name="zh-cn">简体中文(zh-CN)</a></li>-->
|
||||
<!--<li style="height: 25px;"><a name="en-us">English(en-US)</a></li>-->
|
||||
<!--<li style="height: 25px;"><a name="zh-tw">繁體中文(zh-HK)</a></li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
|
||||
<!--</div>-->
|
||||
|
||||
<div id="chart_updated_time">
|
||||
<span class="chart_str_updated">Updated</span>
|
||||
<span id="chart_updated_time_text">0s</span>
|
||||
<span class="chart_str_ago">ago</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ToolPanel -->
|
||||
<div id="chart_toolpanel" style="display: inline; left: 0px; top: 30px; width: 32px; height: 949px;">
|
||||
<div class="chart_toolpanel_separator"></div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_Cursor" name="Cursor"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_cursor">Cursor</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button selected">
|
||||
<div class="chart_toolpanel_icon" id="chart_CrossCursor" name="CrossCursor"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_cross_cursor">Cross Cursor</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_SegLine" name="SegLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_seg_line">Trend Line</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_StraightLine" name="StraightLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_straight_line">Extended</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_RayLine" name="RayLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_ray_line">Ray</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_ArrowLine" name="ArrowLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_arrow_line">Arrow</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_HoriSegLine" name="HoriSegLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_horz_seg_line">Horizontal Line</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_HoriStraightLine" name="HoriStraightLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_horz_straight_line">Horizontal Extended</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_HoriRayLine" name="HoriRayLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_horz_ray_line">Horizontal Ray</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_VertiStraightLine" name="VertiStraightLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_vert_straight_line">Vertical Extended</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_PriceLine" name="PriceLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_price_line">Price Line</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_TriParallelLine" name="TriParallelLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_tri_parallel_line">Parallel Channel</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_BiParallelLine" name="BiParallelLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_bi_parallel_line">Parallel Lines</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_BiParallelRayLine" name="BiParallelRayLine"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_bi_parallel_ray">Parallel Rays</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_DrawFibRetrace" name="DrawFibRetrace"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_fib_retrace">Fibonacci Retracements</div>
|
||||
</div>
|
||||
<div class="chart_toolpanel_button">
|
||||
<div class="chart_toolpanel_icon" id="chart_DrawFibFans" name="DrawFibFans"></div>
|
||||
<div class="chart_toolpanel_tip chart_str_fib_fans">Fibonacci Fans</div>
|
||||
</div>
|
||||
<div style="padding-left: 3px;padding-top: 10px;">
|
||||
<button style="color: red;" id="clearCanvas" title="Clear All" >X</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Canvas Group -->
|
||||
<div id="chart_canvasGroup" style="left: 33px; top: 30px; width: 2500px; height: 926px;">
|
||||
<canvas class="chart_canvas" id="chart_mainCanvas" width="2527" height="926" style="cursor: none;"></canvas>
|
||||
<canvas class="chart_canvas" id="chart_overlayCanvas" width="2527" height="926" style="cursor: none;"></canvas>
|
||||
</div>
|
||||
<!-- TabBar -->
|
||||
<div id="chart_tabbar" style="display: block; position:relative; left: 33px; top: 956px; width: 2527px; height: 22px;">
|
||||
|
||||
<ul>
|
||||
<li><a name="MACD" class="">MACD</a></li>
|
||||
<li><a name="KDJ" class="">KDJ</a></li>
|
||||
<li><a name="StochRSI" class="">StochRSI</a></li>
|
||||
<li><a name="RSI" class="">RSI</a></li>
|
||||
<li><a name="DMI" class="">DMI</a></li>
|
||||
<li><a name="OBV" class="">OBV</a></li>
|
||||
<li><a name="BOLL" class="">BOLL</a></li>
|
||||
<li><a name="SAR" class="">SAR</a></li>
|
||||
<li><a name="DMA" class="">DMA</a></li>
|
||||
<li><a name="TRIX" class="">TRIX</a></li>
|
||||
<li><a name="BRAR" class="">BRAR</a></li>
|
||||
<li><a name="VR" class="">VR</a></li>
|
||||
<li><a name="EMV" class="">EMV</a></li>
|
||||
<li><a name="WR" class="">WR</a></li>
|
||||
<li><a name="ROC" class="">ROC</a></li>
|
||||
<li><a name="MTM" class="">MTM</a></li>
|
||||
<li><a name="PSY">PSY</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Parameter Settings -->
|
||||
<div id="chart_parameter_settings" style="left: 960px; top: 281px;">
|
||||
<h2 class="chart_str_indicator_parameters">Indicator Parameters</h2>
|
||||
<table>
|
||||
<tbody><tr>
|
||||
<th>MA</th>
|
||||
<td><input name="MA"><input name="MA"><input name="MA"><input name="MA"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>DMA</th>
|
||||
<td><input name="DMA"><input name="DMA"><input name="DMA"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>EMA</th>
|
||||
<td><input name="EMA"><input name="EMA"><input name="EMA"><input name="EMA"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>TRIX</th>
|
||||
<td><input name="TRIX"><input name="TRIX"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>VOLUME</th>
|
||||
<td><input name="VOLUME"><input name="VOLUME"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>BRAR</th>
|
||||
<td><input name="BRAR"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>MACD</th>
|
||||
<td><input name="MACD"><input name="MACD"><input name="MACD"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>VR</th>
|
||||
<td><input name="VR"><input name="VR"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>KDJ</th>
|
||||
<td><input name="KDJ"><input name="KDJ"><input name="KDJ"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>EMV</th>
|
||||
<td><input name="EMV"><input name="EMV"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>StochRSI</th>
|
||||
<td><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"><input name="StochRSI"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>WR</th>
|
||||
<td><input name="WR"><input name="WR"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>RSI</th>
|
||||
<td><input name="RSI"><input name="RSI"><input name="RSI"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>ROC</th>
|
||||
<td><input name="ROC"><input name="ROC"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>DMI</th>
|
||||
<td><input name="DMI"><input name="DMI"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>MTM</th>
|
||||
<td><input name="MTM"><input name="MTM"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<!-- <th>OBV</th>
|
||||
<td><input name="OBV"></td>
|
||||
<td><button class="chart_str_default">default</button></td> -->
|
||||
<th>BOLL</th>
|
||||
<td><input name="BOLL"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
|
||||
<th>PSY</th>
|
||||
<td><input name="PSY"><input name="PSY"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr>
|
||||
|
||||
<!-- <tr>
|
||||
<th>BOLL</th>
|
||||
<td><input name="BOLL"></td>
|
||||
<td><button class="chart_str_default">default</button></td>
|
||||
</tr> -->
|
||||
</tbody></table>
|
||||
<div id="close_settings"><a class="chart_str_close">CLOSE</a></div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div id="chart_loading" class="chart_str_loading" style="left: 1180px; top: 232px;">Loading...</div>
|
||||
|
||||
</div> <!-- End Of ChartContainer -->
|
||||
|
||||
<div style="display: none">
|
||||
<form style="display: inline" id="chart_input_interface">
|
||||
<input style="display: inline" type="text" id="chart_input_interface_text">
|
||||
<input style="display: inline" type="submit" id="chart_input_interface_submit">
|
||||
</form>
|
||||
<form style="display: inline" id="chart_output_interface">
|
||||
<input style="display: inline" type="text" id="chart_output_interface_text">
|
||||
<input style="display: inline" type="submit" id="chart_output_interface_submit">
|
||||
</form>
|
||||
</div>
|
||||
<div style="display: none" id="chart_language_switch_tmp">
|
||||
|
||||
<span name="chart_str_period" zh_hk="週期" zh_cn="周期" en_us="TIME"></span>
|
||||
<span name="chart_str_period_line" zh_hk="分時" zh_cn="分时" en_us="Line"></span>
|
||||
<span name="chart_str_period_1m" zh_hk="1分钟" zh_cn="1分钟" en_us="1m"></span>
|
||||
<span name="chart_str_period_3m" zh_hk="3分钟" zh_cn="3分钟" en_us="3m"></span>
|
||||
<span name="chart_str_period_5m" zh_hk="5分钟" zh_cn="5分钟" en_us="5m"></span>
|
||||
<span name="chart_str_period_15m" zh_hk="15分钟" zh_cn="15分钟" en_us="15m"></span>
|
||||
<span name="chart_str_period_30m" zh_hk="30分钟" zh_cn="30分钟" en_us="30m"></span>
|
||||
<span name="chart_str_period_1h" zh_hk="1小時" zh_cn="1小时" en_us="1h"></span>
|
||||
<span name="chart_str_period_2h" zh_hk="2小時" zh_cn="2小时" en_us="2h"></span>
|
||||
<span name="chart_str_period_4h" zh_hk="4小時" zh_cn="4小时" en_us="4h"></span>
|
||||
<span name="chart_str_period_6h" zh_hk="6小時" zh_cn="6小时" en_us="6h"></span>
|
||||
<span name="chart_str_period_12h" zh_hk="12小時" zh_cn="12小时" en_us="12h"></span>
|
||||
<span name="chart_str_period_1d" zh_hk="日線" zh_cn="日线" en_us="1d"></span>
|
||||
<span name="chart_str_period_3d" zh_hk="3日" zh_cn="3日" en_us="3d"></span>
|
||||
<span name="chart_str_period_1w" zh_hk="周線" zh_cn="周线" en_us="1w"></span>
|
||||
|
||||
<span name="chart_str_settings" zh_hk="更多" zh_cn="更多" en_us="MORE"></span>
|
||||
<span name="chart_setting_main_indicator" zh_hk="均線設置" zh_cn="均线设置" en_us="Main Indicator"></span>
|
||||
<span name="chart_setting_main_indicator_none" zh_hk="關閉均線" zh_cn="关闭均线" en_us="None"></span>
|
||||
<span name="chart_setting_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
|
||||
|
||||
<span name="chart_str_chart_style" zh_hk="主圖樣式" zh_cn="主图样式" en_us="Chart Style"></span>
|
||||
<span name="chart_str_main_indicator" zh_hk="主指標" zh_cn="主指标" en_us="Main Indicator"></span>
|
||||
<span name="chart_str_indicator" zh_hk="技術指標" zh_cn="技术指标" en_us="Indicator"></span>
|
||||
<span name="chart_str_indicator_cap" zh_hk="技術指標" zh_cn="技术指标" en_us="INDICATOR"></span>
|
||||
<span name="chart_str_tools" zh_hk="畫線工具" zh_cn="画线工具" en_us="Tools"></span>
|
||||
<span name="chart_str_tools_cap" zh_hk="畫線工具" zh_cn="画线工具" en_us="TOOLS"></span>
|
||||
<span name="chart_str_theme" zh_hk="主題選擇" zh_cn="主题选择" en_us="Theme"></span>
|
||||
<span name="chart_str_theme_cap" zh_hk="主題選擇" zh_cn="主题选择" en_us="THEME"></span>
|
||||
|
||||
<span name="chart_language_setting" zh_hk="語言(LANG)" zh_cn="语言(LANG)" en_us="LANGUAGE"></span>
|
||||
<span name="chart_exchanges_setting" zh_hk="更多市場" zh_cn="更多市场" en_us="MORE MARKETS"></span>
|
||||
<span name="chart_othercoin_setting" zh_hk="其它市場" zh_cn="其它市场" en_us="OTHER MARKETS"></span>
|
||||
|
||||
|
||||
<span name="chart_str_none" zh_hk="關閉" zh_cn="关闭" en_us="None"></span>
|
||||
|
||||
<span name="chart_str_theme_dark" zh_hk="深色主題" zh_cn="深色主题" en_us="Dark"></span>
|
||||
<span name="chart_str_theme_light" zh_hk="淺色主題" zh_cn="浅色主题" en_us="Light"></span>
|
||||
|
||||
<span name="chart_str_on" zh_hk="開啟" zh_cn="开启" en_us="On"></span>
|
||||
<span name="chart_str_off" zh_hk="關閉" zh_cn="关闭" en_us="Off"></span>
|
||||
|
||||
<span name="chart_str_close" zh_hk="關閉" zh_cn="关闭" en_us="CLOSE"></span>
|
||||
<span name="chart_str_default" zh_hk="默認值" zh_cn="默认值" en_us="default"></span>
|
||||
|
||||
<span name="chart_str_loading" zh_hk="正在讀取數據..." zh_cn="正在读取数据..." en_us="Loading..."></span>
|
||||
|
||||
<span name="chart_str_indicator_parameters" zh_hk="指標參數設置" zh_cn="指标参数设置" en_us="Indicator Parameters"></span>
|
||||
|
||||
<span name="chart_str_cursor" zh_hk="光標" zh_cn="光标" en_us="Cursor"></span>
|
||||
<span name="chart_str_cross_cursor" zh_hk="十字光標" zh_cn="十字光标" en_us="Cross Cursor"></span>
|
||||
<span name="chart_str_seg_line" zh_hk="線段" zh_cn="线段" en_us="Trend Line"></span>
|
||||
<span name="chart_str_straight_line" zh_hk="直線" zh_cn="直线" en_us="Extended"></span>
|
||||
<span name="chart_str_ray_line" zh_hk="射線" zh_cn="射线" en_us="Ray"></span>
|
||||
<span name="chart_str_arrow_line" zh_hk="箭頭" zh_cn="箭头" en_us="Arrow"></span>
|
||||
<span name="chart_str_horz_seg_line" zh_hk="水平線段" zh_cn="水平线段" en_us="Horizontal Line"></span>
|
||||
<span name="chart_str_horz_straight_line" zh_hk="水平直線" zh_cn="水平直线" en_us="Horizontal Extended"></span>
|
||||
<span name="chart_str_horz_ray_line" zh_hk="水平射線" zh_cn="水平射线" en_us="Horizontal Ray"></span>
|
||||
<span name="chart_str_vert_straight_line" zh_hk="垂直直線" zh_cn="垂直直线" en_us="Vertical Extended"></span>
|
||||
<span name="chart_str_price_line" zh_hk="價格線" zh_cn="价格线" en_us="Price Line"></span>
|
||||
<span name="chart_str_tri_parallel_line" zh_hk="價格通道線" zh_cn="价格通道线" en_us="Parallel Channel"></span>
|
||||
<span name="chart_str_bi_parallel_line" zh_hk="平行直線" zh_cn="平行直线" en_us="Parallel Lines"></span>
|
||||
<span name="chart_str_bi_parallel_ray" zh_hk="平行射線" zh_cn="平行射线" en_us="Parallel Rays"></span>
|
||||
<span name="chart_str_fib_retrace" zh_hk="斐波納契回調" zh_cn="斐波纳契回调" en_us="Fibonacci Retracements"></span>
|
||||
<span name="chart_str_fib_fans" zh_hk="斐波納契扇形" zh_cn="斐波纳契扇形" en_us="Fibonacci Fans"></span>
|
||||
|
||||
<span name="chart_str_updated" zh_hk="更新於" zh_cn="更新于" en_us="Updated"></span>
|
||||
<span name="chart_str_ago" zh_hk="前" zh_cn="前" en_us="ago"></span>
|
||||
</div>
|
||||
<script src="lib/kline.draw.js"></script>
|
||||
<script type="text/javascript">
|
||||
var option = {
|
||||
market_from: queryString('symbol'),
|
||||
// market_from_name: queryString('marketName'),
|
||||
url: window.config.socketServer,
|
||||
subscribePath: "market.~symbol~.kline.~period~",
|
||||
///trade/market/kline/{symbol}/{lintType}
|
||||
ajaxURL:window.config.ajaxServer+"/exchange/markets/kline/~symbol~/~period~"
|
||||
|
||||
};
|
||||
new KLine(option).draw()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
static/swiper/left-arrow.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/swiper/right-arrow.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |