layui.config({ base: '../layui/plug/tablePlug/' }).use(['table', 'element', 'tablePlug'], function () {
// $(document).ready(function(){
// $('.main-sidebar-left').click(function(e){
// console.log(1)
// })
// $('.coinClass').click(function(){
// console.log(2)
// var e=window.event || arguments.callee.caller.arguments[0];
// e.preventDefault();
// e.stopPropagation() ;
// })
// });
$('.main-sidebar-left').on('click', function (e) {
console.log(1)
})
$('.main-sidebar-left').on('click', '.coinClass', function (e) {
console.log(2)
e.stopPropagation();
e.preventDefault();
})
const table = layui.table
// fav
const fav = table.render({
elem: '#fav',
data: [
{ coin: 'BSV', flag: 1, latest: '$176.2997', change: 1.61 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
{ coin: 'UTB', flag: 0, latest: '$176.2997', change: -1.11 },
],
cols: [[
{ field: 'coin', title: 'Price', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Amount', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]],
skin: 'nob',
page: false
})
//
const usd = table.render({
elem: '#usd',
data: [],
cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]],
skin: 'nob',
page: false,
})
// btc
const btc = table.render({
elem: '#btc',
data: [],
cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]],
skin: 'nob',
page: false,
})
// usdc
const usdc = table.render({
elem: '#usdc',
data: [],
cols: [[
{ field: 'coin', title: 'Coin', width: '30%', templet: renderCoin },
{ field: 'latest', title: 'Latest', width: '35%', templet: renderLatest, align: 'right', sort: true },
{ field: 'change', title: 'Change', width: '35%', templet: renderChange, align: 'right', sort: true }
]],
skin: 'nob',
page: false,
})
const optional = table.render({
elem: '#optional',
data: [
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
{ coin2: '32.89923', flag: 0, latest2: '0.003637', change2: '22:11:39' },
],
cols: [[
{ field: 'coin2', title: 'Price', width: '30%' },
{ field: 'latest2', title: 'Amount', width: '35%' },
{ field: 'change2', title: 'Time', width: '35%' }
]],
skin: 'nob', //表格风格
})
// marketTrades
const marketTrades = table.render({
elem: '#marketTrades',
data: [
{ price: '32847.59', flag: 0, amount: '0.34980', time: '299.99133496' },
],
cols: [[
{ field: 'price', title: 'Price(USD)', width: '30%' },
{ field: 'amount', title: 'Amount (BTC)', width: '35%', align: 'right' },
{ field: 'time', title: 'Total(USD)', width: '35%', align: 'right' }
]],
skin: 'nob',
page: false,
})
// recc
const recc = table.render({
elem: '#recc',
data: [
{ coin3: '32.89923', flag: 0, latest3: '0.003637', change3: '22:11:39' },
],
cols: [[
{ field: 'coin3', title: 'Price', width: '30%' },
{ field: 'latest3', title: 'Amount', width: '35%' },
{ field: 'change3', title: 'Time', width: '35%' }
]],
skin: 'nob',
page: false,
})
// orderbook
const orderbook = table.render({
elem: '#orderbook',
data: [],
cols: [[
{ field: 'price', title: 'Price', width: '30%' },
{ field: 'amount', title: 'Amount', width: '35%', align: 'right' },
{ field: 'total', title: 'Total', width: '35%', align: 'right' }
]],
skin: 'nob',
page: false,
})
// Delegate
const Delegate = table.render({
elem: '#Delegate',
data: [],
cols: [[
{ field: 'time', title: 'Time', width: '20%', align: 'center' },
{ field: 'direction', title: 'Direction', width: '20%', align: 'center' },
{ field: 'price', title: 'Price', width: '15%', align: 'center' },
{ field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' },
{ field: 'done', title: 'Symbol', width: '15%', align: 'center' },
{ field: 'action', title: 'Status', width: '15%', align: 'center' }
]],
skin: 'nob',
page: false,
})
// HistoryDelegate
const HistoryDelegate = table.render({
elem: '#HistoryDelegate',
data: [],
cols: [[
{ field: 'time', title: 'Time', width: '20%', align: 'center' },
{ field: 'direction', title: 'Direction', width: '20%', align: 'center' },
{ field: 'price', title: 'Price', width: '15%', align: 'center' },
{ field: 'amount', title: 'Delegate Amount', width: '15%', align: 'center' },
{ field: 'done', title: 'Symbol', width: '15%', align: 'center' },
{ field: 'status', title: 'Status', width: '15%', align: 'center' }
]],/* */
skin: 'nob',
page: false,
})
//点击星星
$('.main-sidebar-left').on('click', '.coinClass', function (event) {
event.stopPropagation()
event.preventDefault()
let flag = $(this).hasClass('layui-icon-rate-solid');
if (flag) {
$(this).removeClass('layui-icon-rate-solid').addClass('layui-icon-rate')
} else {
$(this).removeClass('layui-icon-rate').addClass('layui-icon-rate-solid')
}
}).on('click', 'tr', function () {
let title = $('.main-sidebar-left .layui-tab-title .layui-this').text();
let trSpan = $(this).find('td').find('.coin-text').text()
$('#detailPair').html(trSpan + '/' + title)
}).on('click', '.layui-tab-title li', function () {
})
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据
// ws.send("发送数据");
// alert("数据发送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
// alert("数据已接收...");
fav.reload({
data: []
})
usd.reload({
data: []
})
btc.reload({
data: []
})
usdc.reload({
data: []
})
marketTrades.reload({
data: []
})
orderbook.reload({
data: []
})
Delegate.reload({
data: []
})
HistoryDelegate.reload({
data: []
})
}
ws.onclose = function () {
// 关闭 websocket
// alert("连接已关闭...");
};
// getKline()
$('.compute').on('input propertychange change', function (e) {
const that = $(this)
const type = that.data('type')
$(`[name="${type}Total"]`).val(
Array.from($(`input[data-type="${type}"]`)).reduce((acc, cur) => {
return acc.times(new BigNumber($(cur).val() || 0))
}, new BigNumber(1)).toFixed(8)
)
})
$('[placeholder="Price"]').on('blur', function () {
const value = $(this).val()
if (value) {
$(this).val(new BigNumber(value).toFixed(2)).change()
}
})
$('[placeholder="Amount"]').on('blur', function () {
const value = $(this).val()
if (value) {
$(this).val(new BigNumber(value).toFixed(4)).change()
}
})
function renderCoin(data) {
return `${data.coin}`
}
function renderLatest(data) {
return data.latest
}
function renderChange(data) {
const isBuy = data.change > 0
return `${isBuy ? '+' : ''}${data.change}%`
}
})
function getKline() {
let config = {
autosize: true,
fullscreen: true,
symbol: 'AAAA',
interval: "1",
timezone: "Asia/Shanghai",
toolbar_bg: "#18202a",
container_id: "kLineContainer",
datafeed: new WebsockFeed(),
library_path: "./charting_library/",
locale: "zh",
debug: false,
drawings_access: {
type: "black",
tools: [{ name: "Regression Trend" }]
},
disabled_features: [
"header_resolutions",
"timeframes_toolbar",
"header_symbol_search",
"header_chart_type",
"header_compare",
"header_undo_redo",
"header_screenshot",
"header_saveload",
"use_localstorage_for_settings",
"left_toolbar",
"volume_force_overlay"
],
enabled_features: [
"hide_last_na_study_output",
"move_logo_to_main_pane"
],
custom_css_url: "bundles/common.css",
supported_resolutions: ["1", "5", "15", "30", "60", "1D", "1W", "1M"],
charts_storage_url: "http://saveload.tradingview.com",
charts_storage_api_version: "1.1",
client_id: "tradingview.com",
user_id: "public_user_id",
overrides: {
"paneProperties.background": "#1B1E2E",
"paneProperties.vertGridProperties.color": "rgba(0,0,0,.1)",
"paneProperties.horzGridProperties.color": "rgba(0,0,0,.1)",
//"scalesProperties.textColor" : "#AAA",
"scalesProperties.textColor": "#61688A",
"mainSeriesProperties.candleStyle.upColor": "#589065",
"mainSeriesProperties.candleStyle.downColor": "#AE4E54",
"mainSeriesProperties.candleStyle.drawBorder": false,
"mainSeriesProperties.candleStyle.wickUpColor": "#589065",
"mainSeriesProperties.candleStyle.wickDownColor": "#AE4E54",
"paneProperties.legendProperties.showLegend": false,
"mainSeriesProperties.areaStyle.color1": "rgba(71, 78, 112, 0.5)",
"mainSeriesProperties.areaStyle.color2": "rgba(71, 78, 112, 0.5)",
"mainSeriesProperties.areaStyle.linecolor": "#9194a4"
},
time_frames: [
{
text: "1min",
resolution: "1",
description: "realtime",
title: 'KLineC'
},
{ text: "1min", resolution: "1", description: "1min" },
{ text: "5min", resolution: "5", description: "5min" },
{ text: "15min", resolution: "15", description: "15min" },
{ text: "30min", resolution: "30", description: "30min" },
{
text: "1hour",
resolution: "60",
description: "1hour",
title: "1hour"
},
/*{ text: "4hour", resolution: "240", description: "4hour",title: "4hour" },*/
{
text: "1day",
resolution: "1D",
description: "1day",
title: "1day"
},
{
text: "1week",
resolution: "1W",
description: "1week",
title: "1week"
},
{ text: "1mon", resolution: "1M", description: "1mon" }
]
};
}
// TradingView.onready(function() {
// var widget = (window.tvWidget = new TradingView.widget(config));
// widget.onChartReady(function () {
// widget.chart().executeActionById("drawingToolbarAction");
// widget
// .chart()
// .createStudy("Moving Average", false, false, [5], null, {
// "plot.color": "#965FC4"
// });
// widget
// .chart()
// .createStudy("Moving Average", false, false, [10], null, {
// "plot.color": "#84AAD5"
// });
// widget
// .createButton()
// .attr("title", "realtime")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(3);
// widget.setSymbol("", "1");
// })
// .append("分时");
// widget
// .createButton()
// .attr("title", "M1")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "1");
// })
// .append("M1")
// .addClass("selected");
// widget
// .createButton()
// .attr("title", "M5")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "5");
// })
// .append("M5");
// widget
// .createButton()
// .attr("title", "M15")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "15");
// })
// .append("M15");
// widget
// .createButton()
// .attr("title", "M30")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "30");
// })
// .append("M30");
// widget
// .createButton()
// .attr("title", "H1")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "60");
// })
// .append("H1");
// widget
// .createButton()
// .attr("title", "D1")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "1D");
// })
// .append("D1");
// widget
// .createButton()
// .attr("title", "W1")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "1W");
// })
// .append("W1");
// widget
// .createButton()
// .attr("title", "M1")
// .on("click", function () {
// if ($(this).hasClass("selected")) return;
// $(this)
// .addClass("selected")
// .parent(".group")
// .siblings(".group")
// .find(".button.selected")
// .removeClass("selected");
// widget.chart().setChartType(1);
// widget.setSymbol("", "1M");
// })
// .append("M1");
// });
// })
// // }
deptrh()
// 深度图
function deptrh() {
Highcharts.chart('deptrhContainer', {
chart: {
type: 'area'
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 0,
lineColor: "#6c7279",
tickColor: "#c1c1c1",
labels: {
style: {
color: "#6d7493"
}
},
title: {
text: 'Price BTC',
style: {
color: "#fff"
}
}
},
yAxis: {
opposite: !0,
gridLineWidth: 0,
lineColor: "#6c7279",
tickColor: "#c1c1c1",
lineWidth: 1,
tickWidth: 1,
labels: {
style: {
color: "#6d7493"
}
},
title: {
text: "Amount",
style: {
color: "#fff"
}
}
},
legend: {
enabled: !0,
align: "center",
alignColumns: !0,
layout: "horizontal",
labelFormatter: function () {
return this.name
},
borderColor: "#999999",
borderRadius: 0,
navigation: {
activeColor: "#003399",
inactiveColor: "#cccccc"
},
itemStyle: {
color: "#F5F5F5",
fontSize: "12px",
fontWeight: "bold",
textOverflow: "ellipsis"
},
itemHoverStyle: {
color: "#000000"
},
itemHiddenStyle: {
color: "#cccccc"
},
shadow: !1,
itemCheckboxStyle: {
position: "absolute",
width: "13px",
height: "13px"
},
squareSymbol: !0,
symbolPadding: 5,
verticalAlign: "bottom",
x: 0,
y: 0,
title: {
style: {
fontWeight: "bold"
}
},
backgroundColor: 'rgba(0,0,0,0)'
},
loading: {
labelStyle: {
fontWeight: "bold",
position: "relative",
top: "45%"
},
style: {
position: "absolute",
backgroundColor: "#ffffff",
opacity: .5,
textAlign: "center"
}
},
plotOptions: {
area: {
pointStart: 0,
marker: {
enabled: !1,
symbol: "circle",
radius: 2,
states: {
hover: {
enabled: !0
}
}
}
},
series: {
fillOpacity: 1
}
},
tooltip: {
headerFormat: 'Price: {point.key}
',
valueDecimals: 2
},
series: [{
color: "#589065",
name: "Buying Commission",
data: [[214, 99], [289, 78], [305, 59], [458, 36], [500, 45], [780, 12], [900, 12]]
}, {
color: "#AE4E54",
name: "Selling commission",
data: [[910, 8], [1e3, 14], [1100, 29], [1200, 45], [1300, 59], [1400, 81.2]]
}]
});
}