You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2239 lines
66 KiB
2239 lines
66 KiB
5 years ago
|
//1、每个页面写自己的国际化语言变量，例子：
|
||
|
|
var langues = {
|
||
|
|
zh_CN: {
|
||
|
|
choice: "自选",
|
||
|
|
high: "高",
|
||
|
|
low: '低',
|
||
|
|
ktype: {
|
||
|
|
realtime: '实时',
|
||
|
|
ftmin: '15分钟',
|
||
|
|
onehour: '1小时',
|
||
|
|
fourhour: '4小时',
|
||
|
|
oneday: '1天'
|
||
|
|
},
|
||
|
|
depth: '深度',
|
||
|
|
buy: '买入',
|
||
|
|
sale: '卖出',
|
||
|
|
amount: '数量',
|
||
|
|
price: '价格',
|
||
|
|
deal: '成交',
|
||
|
|
date: '时间',
|
||
|
|
buyOrSale: '买入/卖出',
|
||
|
|
lang: 'zh',
|
||
|
|
introduction: {
|
||
|
|
introduction: '简介',
|
||
|
|
issueDate: '发行时间',
|
||
|
|
totalAmount: '发行总量',
|
||
|
|
circulation: '流通总量',
|
||
|
|
ico: '众筹价格',
|
||
|
|
whitePaper: '白皮书',
|
||
|
|
officialWebsite: '官网',
|
||
|
|
blockExplorer: '区块查询'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
choice: "自選",
|
||
|
|
high: "高",
|
||
|
|
low: "低",
|
||
|
|
ktype: {
|
||
|
|
realtime: '實時',
|
||
|
|
ftmin: '15分鐘',
|
||
|
|
onehour: '1小時',
|
||
|
|
fourhour: '4小時',
|
||
|
|
oneday: '1天'
|
||
|
|
},
|
||
|
|
buy: '買入',
|
||
|
|
sale: '賣出',
|
||
|
|
amount: '數量',
|
||
|
|
price: '價格',
|
||
|
|
depth: '深度',
|
||
|
|
deal: '成交',
|
||
|
|
date: '時間',
|
||
|
|
buyOrSale: '買入/賣出',
|
||
|
|
lang: 'zh',
|
||
|
|
introduction: {
|
||
|
|
introduction: '簡介',
|
||
|
|
issueDate: '發行時間',
|
||
|
|
totalAmount: '發行總量',
|
||
|
|
circulation: '流通總量',
|
||
|
|
ico: '衆籌價格',
|
||
|
|
whitePaper: '白皮書',
|
||
|
|
officialWebsite: '官網',
|
||
|
|
blockExplorer: '區塊查詢'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
choice: "Choice",
|
||
|
|
high: "High",
|
||
|
|
low: 'Low',
|
||
|
|
ktype: {
|
||
|
|
realtime: 'Time',
|
||
|
|
ftmin: '15min',
|
||
|
|
onehour: '1hour',
|
||
|
|
fourhour: '4hour',
|
||
|
|
oneday: '1day'
|
||
|
|
},
|
||
|
|
depth: 'Depth',
|
||
|
|
buy: 'Buy',
|
||
|
|
sale: 'Sale',
|
||
|
|
amount: 'Amount',
|
||
|
|
price: 'Price',
|
||
|
|
deal: 'Deal',
|
||
|
|
date: 'Date',
|
||
|
|
buyOrSale: 'buy/sale',
|
||
|
|
lang: 'en',
|
||
|
|
introduction: {
|
||
|
|
introduction: 'Introduction',
|
||
|
|
issueDate: 'Issue Date',
|
||
|
|
totalAmount: 'Total Amount',
|
||
|
|
circulation: 'Circulation',
|
||
|
|
ico: 'ICO Price',
|
||
|
|
whitePaper: 'White Paper',
|
||
|
|
officialWebsite: 'Official Website',
|
||
|
|
blockExplorer: 'Block Explorer'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}; //2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子：
|
||
|
|
|
||
|
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种
|
||
|
|
|
||
|
|
var langue = langues[langueKey]; // 获取国际化语种数据
|
||
|
|
//var dataInfo = new Vue({
|
||
|
|
// el: "#js-data-info",
|
||
|
|
// data: {
|
||
|
|
// langue: langue
|
||
|
|
// }
|
||
|
|
//})
|
||
|
|
|
||
|
|
var Kvue = new Vue({
|
||
|
|
el: "#js-data-info",
|
||
|
|
data: {
|
||
|
|
langue: langue,
|
||
|
|
TvWidget: null,
|
||
|
|
symbols: null,
|
||
|
|
interval: null,
|
||
|
|
historyData: [],
|
||
|
|
kNewdata: [],
|
||
|
|
subInterval: null,
|
||
|
|
loading: true,
|
||
|
|
MALine5: null,
|
||
|
|
MALine10: null,
|
||
|
|
MALine20: null,
|
||
|
|
MALine30: null,
|
||
|
|
subObjMarket: null,
|
||
|
|
stompClientMarket: null,
|
||
|
|
times: 0
|
||
|
|
},
|
||
|
|
mounted: function() {
|
||
|
|
mui.plusReady(function() {
|
||
|
|
var self = plus.webview.currentWebview();
|
||
|
|
var currencys = self.currencyPair.split('-');
|
||
|
|
Kvue.symbols = self.currencyPair;
|
||
|
|
Kvue.install(Kvue.symbols, 15);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
adjustScale: function adjustScale(value) {
|
||
|
|
if(value == 0) return '1000000';
|
||
|
|
var val = parseFloat(value);
|
||
|
|
|
||
|
|
if(val < 0) {
|
||
|
|
val = -val;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(val < 0.0001) {
|
||
|
|
return 100000000;
|
||
|
|
} else if(val < 0.1) {
|
||
|
|
return 1000000;
|
||
|
|
} else if(val < 10) {
|
||
|
|
return 10000;
|
||
|
|
} else {
|
||
|
|
return 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
return value;
|
||
|
|
},
|
||
|
|
adjustScaleA: function adjustScaleA(value) {
|
||
|
|
if(!value || value == 0) return 6;
|
||
|
|
var val = parseFloat(value);
|
||
|
|
|
||
|
|
if(val < 0) {
|
||
|
|
val = -val;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(val < 0.001) {
|
||
|
|
return 8;
|
||
|
|
} else if(val < 0.1) {
|
||
|
|
return 6;
|
||
|
|
} else if(val < 10) {
|
||
|
|
return 4;
|
||
|
|
} else {
|
||
|
|
return 2;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
billinfo: function billinfo() {
|
||
|
|
return {
|
||
|
|
name: this.symbols,
|
||
|
|
ticker: this.symbols,
|
||
|
|
description: '',
|
||
|
|
type: 'index',
|
||
|
|
exchange: '',
|
||
|
|
listed_exchange: '',
|
||
|
|
session: '24x7',
|
||
|
|
timezone: 'Asia/Hong_Kong',
|
||
|
|
minmov: 1,
|
||
|
|
pricescale: this.adjustScale(marketObj.amount),
|
||
|
|
minmov2: 0,
|
||
|
|
supported_resolutions: ['1', '15', '30', '60', '240', '720', 'D', 'W', 'M'],
|
||
|
|
has_seconds: false,
|
||
|
|
// 是否有秒的历史数据
|
||
|
|
has_intraday: true,
|
||
|
|
// 是否有分钟的历史数据
|
||
|
|
has_daily: true,
|
||
|
|
// 是否有日的历史数据
|
||
|
|
has_weekly_and_monthly: true,
|
||
|
|
// 是否有周和月的历史数据
|
||
|
|
seconds_multipliers: [],
|
||
|
|
// 分辨率为秒单位的数组
|
||
|
|
intraday_multipliers: ['1', '15', '30', '60', '240', '720'],
|
||
|
|
// 分辨率为分钟单位的数组
|
||
|
|
has_empty_bars: true,
|
||
|
|
force_session_rebuild: false,
|
||
|
|
has_no_volume: false,
|
||
|
|
// 表示商品是否拥有成交量数据
|
||
|
|
has_fractional_volume: true,
|
||
|
|
volume_precision: 2,
|
||
|
|
data_status: 'delayed_streaming',
|
||
|
|
expired: false,
|
||
|
|
expiration_date: false,
|
||
|
|
volumePaneSize: "tiny"
|
||
|
|
};
|
||
|
|
},
|
||
|
|
install: function install(symbols, interval) {
|
||
|
|
var _this3 = this;
|
||
|
|
|
||
|
|
this.TvWidget = new TradingView.widget({
|
||
|
|
symbol: symbols,
|
||
|
|
interval: interval,
|
||
|
|
library_path: '../../lib/charting_library/',
|
||
|
|
container_id: 'TradingView',
|
||
|
|
datafeed: new Datafeed(this),
|
||
|
|
fullscreen: false,
|
||
|
|
autosize: true,
|
||
|
|
locale: langue.lang,
|
||
|
|
preset: "mobile",
|
||
|
|
timezone: 'Asia/Hong_Kong',
|
||
|
|
debug: false,
|
||
|
|
loading_screen: {
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
foregroundColor: '#0094ff'
|
||
|
|
},
|
||
|
|
overrides: {
|
||
|
|
'symbolWatermarkProperties.color': '#fe4761',
|
||
|
|
'mainSeriesProperties.candleStyle.upColor': '#00ce7d',
|
||
|
|
'mainSeriesProperties.candleStyle.downColor': '#e04640',
|
||
|
|
'mainSeriesProperties.candleStyle.borderUpColor': '#00ce7d',
|
||
|
|
'mainSeriesProperties.candleStyle.borderDownColor': '#e04640',
|
||
|
|
"paneProperties.background": "#fff",
|
||
|
|
"paneProperties.legendProperties.showLegend": true,
|
||
|
|
'scalesProperties.lineColor': '#f2f2f2'
|
||
|
|
},
|
||
|
|
studies_overrides: {
|
||
|
|
"volume.volume.color.0": "#00ce7d",
|
||
|
|
"volume.volume.color.1": "#e04640"
|
||
|
|
},
|
||
|
|
disabled_features: ['header_symbol_search', 'header_resolutions', 'header_compare', 'header_settings', 'header_undo_redo', 'header_chart_type', 'header_screenshot', 'widget_logo',
|
||
|
|
'control_bar', 'volume_force_overlay', 'header_fullscreen_button', 'timeframes_toolbar', 'header_indicators', 'show_chart_property_page', 'property_pages'
|
||
|
|
],
|
||
|
|
// 启用图表某个功能
|
||
|
|
enabled_features: ['dont_show_boolean_study_arguments', 'remove_library_container_border', //'save_chart_properties_to_local_storage',
|
||
|
|
//'side_toolbar_in_fullscreen_mode',
|
||
|
|
'constraint_dialogs_movement', 'hide_last_na_study_output'
|
||
|
|
],
|
||
|
|
// favorites:{
|
||
|
|
// intervals:['1','15', '30', '60', '240', '720']
|
||
|
|
// },
|
||
|
|
theme: 'Light',
|
||
|
|
allow_symbol_change: true,
|
||
|
|
custom_css_url: 'chart1.css'
|
||
|
|
});
|
||
|
|
this.symbols = symbols;
|
||
|
|
this.interval = interval;
|
||
|
|
this.TvWidget.onChartReady(function() {
|
||
|
|
_this3.onChartReady(_this3.TvWidget);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onChartReady: function onChartReady(TvWidget) {
|
||
|
|
var maPercision = this.adjustScaleA(marketObj.amount);
|
||
|
|
var that = this;
|
||
|
|
this.MALine5 = TvWidget.chart().createStudy('Moving Average', false, true, [5, 'close', 0], null, {
|
||
|
|
'Plot.color': '#f6cd79',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
this.MALine10 = TvWidget.chart().createStudy('Moving Average', false, true, [10, 'close', 0], null, {
|
||
|
|
'Plot.color': '#4cd49b',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
this.MALine20 = TvWidget.chart().createStudy('Moving Average', false, true, [20, 'close', 0], null, {
|
||
|
|
'Plot.color': '#dd5f9e',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
this.MALine30 = TvWidget.chart().createStudy('Moving Average', false, true, [30, 'close', 0], null, {
|
||
|
|
'Plot.color': '#9751dc',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
$('.timebutton').removeClass('active');
|
||
|
|
$('#15m').addClass('active');
|
||
|
|
$('.timebutton').click(function() {
|
||
|
|
$('.timebutton').removeClass('active');
|
||
|
|
$(this).addClass('active');
|
||
|
|
|
||
|
|
if($(this).attr('data-interval') == '1') {
|
||
|
|
this.interval = '1';
|
||
|
|
} else if($(this).attr('data-interval') == '15') {
|
||
|
|
this.interval = '15';
|
||
|
|
} else if($(this).attr('data-interval') == '30') {
|
||
|
|
this.interval = '30';
|
||
|
|
} else if($(this).attr('data-interval') == '1H') {
|
||
|
|
this.interval = '60';
|
||
|
|
} else if($(this).attr('data-interval') == '4H') {
|
||
|
|
this.interval = '240';
|
||
|
|
} else if($(this).attr('data-interval') == '1D') {
|
||
|
|
this.interval = 'D';
|
||
|
|
} else if($(this).attr('data-interval') == '1W') {
|
||
|
|
this.interval = 'W';
|
||
|
|
} else if($(this).attr('data-interval') == '1M') {
|
||
|
|
this.interval = 'M';
|
||
|
|
}
|
||
|
|
|
||
|
|
var _that = this;
|
||
|
|
|
||
|
|
setTimeout(function() {
|
||
|
|
if(_that.interval == 1) {
|
||
|
|
TvWidget.chart().setResolution(_that.interval, function onReadyCallback() {
|
||
|
|
TvWidget.chart().getStudyById(that.MALine5).setVisible(false);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine10).setVisible(false);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine20).setVisible(false);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine30).setVisible(false);
|
||
|
|
document.getElementById('TradingView').childNodes[0].setAttribute('style', 'display:block;width:100%;height:100%;');
|
||
|
|
TvWidget.chart().setChartType(3);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
TvWidget.chart().setResolution(_that.interval, function onReadyCallback() {
|
||
|
|
TvWidget.chart().getStudyById(that.MALine5).setVisible(true);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine10).setVisible(true);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine20).setVisible(true);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine30).setVisible(true);
|
||
|
|
document.getElementById('TradingView').childNodes[0].setAttribute('style', 'display:block;width:100%;height:100%;');
|
||
|
|
TvWidget.chart().setChartType(1);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 获取K线历史数据
|
||
|
|
getBars: function getBars(symbolInfo, resolution, from, to, onHistoryCallback, onDataCallback) {
|
||
|
|
this.historyGetData(this.interval, from, to).then(function(res) {
|
||
|
|
onDataCallback(res);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// K线历史数据
|
||
|
|
historyGetData: function historyGetData(resolution, from, to) {
|
||
|
|
return new Promise(function(resolve, reject) {
|
||
|
|
var klinedata = [];
|
||
|
|
var timeType = null;
|
||
|
|
var timeNumber = null; //判断分辨率
|
||
|
|
|
||
|
|
switch(resolution) {
|
||
|
|
case 'D':
|
||
|
|
timeType = 'DAY';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'W':
|
||
|
|
timeType = 'WEEK';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'M':
|
||
|
|
timeType = 'MONTH';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
if(Number(resolution) < 60) {
|
||
|
|
timeType = 'MINUTE';
|
||
|
|
timeNumber = resolution;
|
||
|
|
} else {
|
||
|
|
timeType = 'HOUR';
|
||
|
|
timeNumber = parseInt(Number(resolution) / 60);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var url = app.currencyBaseUrl + "market/query?timeType=".concat(timeType, "&timeNumber=").concat(timeNumber, "¤cyPair=").concat(Kvue.symbols);
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(res) {
|
||
|
|
if(Object.prototype.toString.call(res.data) == '[object Array]' && res.data.length) {
|
||
|
|
if(res.data[0].timestamp >= from * 1000 && res.data[res.data.length - 1].timestamp <= to * 1000) {
|
||
|
|
this.times = res.data[res.data.length - 1].timestamp;
|
||
|
|
res.data.forEach(function(value) {
|
||
|
|
klinedata.push({
|
||
|
|
index: value.index,
|
||
|
|
time: value.timestamp,
|
||
|
|
close: value.close,
|
||
|
|
open: value.open,
|
||
|
|
high: value.highest,
|
||
|
|
low: value.lowest,
|
||
|
|
volume: value.total
|
||
|
|
});
|
||
|
|
});
|
||
|
|
this.historyData = klinedata;
|
||
|
|
resolve(klinedata); // this.loading = false;
|
||
|
|
} else {
|
||
|
|
this.historyData = [];
|
||
|
|
resolve([]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
resolve([]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 实时更新K线
|
||
|
|
subscribeBars: function subscribeBars(onRealtimeCallback) {
|
||
|
|
this.connectionMarket(onRealtimeCallback);
|
||
|
|
},
|
||
|
|
// 訂閲
|
||
|
|
subscribeMarket: function subscribeMarket(onRealtimeCallback) {
|
||
|
|
var timeType = null;
|
||
|
|
var timeNumber = null; //判断分辨率
|
||
|
|
|
||
|
|
switch(this.interval) {
|
||
|
|
case 'D':
|
||
|
|
timeType = 'DAY';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'W':
|
||
|
|
timeType = 'WEEK';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'M':
|
||
|
|
timeType = 'MONTH';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
if(Number(this.interval) < 60) {
|
||
|
|
timeType = 'MINUTE';
|
||
|
|
timeNumber = this.interval;
|
||
|
|
} else {
|
||
|
|
timeType = 'HOUR';
|
||
|
|
timeNumber = parseInt(Number(this.interval) / 60);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var thiss = this;
|
||
|
|
var websocketURL = '/topic/marketk/' + this.symbols + '/' + timeNumber + timeType; // var websocketURL= '/topic/subscription/BTC-USDT'
|
||
|
|
|
||
|
|
this.subObjMarket = this.stompClientMarket.subscribe(websocketURL, function(data) {
|
||
|
|
//货币对最新信息（中间头部）
|
||
|
|
var subData = JSON.parse(data.body);
|
||
|
|
|
||
|
|
if(subData.timestamp >= thiss.times) {
|
||
|
|
onRealtimeCallback({
|
||
|
|
time: subData.timestamp,
|
||
|
|
close: subData.close,
|
||
|
|
open: subData.open,
|
||
|
|
high: subData.highest,
|
||
|
|
low: subData.lowest,
|
||
|
|
volume: subData.total
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
connectionMarket: function connectionMarket(onRealtimeCallback) {
|
||
|
|
// 建立连接对象
|
||
|
|
var socket = new SockJS(app.currencyBaseUrl + '/websocket'); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
|
||
|
|
// 获取STOMP子协议的客户端对象
|
||
|
|
|
||
|
|
this.stompClientMarket = new Stomp.over(socket);
|
||
|
|
this.stompClientMarket.debug = null;
|
||
|
|
var this_ = this;
|
||
|
|
this.stompClientMarket.connect({}, function(event) {
|
||
|
|
//防止单个用户多次订阅
|
||
|
|
if(this_.subObjMarket == null) {
|
||
|
|
this_.subscribeMarket(onRealtimeCallback);
|
||
|
|
} else {
|
||
|
|
this_.subObjMarket.unsubscribe();
|
||
|
|
this_.subscribeMarket(onRealtimeCallback);
|
||
|
|
}
|
||
|
|
}); //关闭事件触发重新链接
|
||
|
|
|
||
|
|
socket.onclose = function() {
|
||
|
|
this_.connectionMarket(onRealtimeCallback);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}); ////3、每个页面都需要加上以下的方法：
|
||
|
|
|
||
|
|
window.addEventListener('switchLangueData', function(e) {
|
||
|
|
//Kvue对象的名称
|
||
|
|
Kvue.langue = langues[e.detail];
|
||
|
|
});
|
||
|
|
/*基于准备好的dom，初始化echarts实例*/
|
||
|
|
//var myChart1 = echarts.init(document.getElementById('main1'));
|
||
|
|
//var myChart2 = echarts.init(document.getElementById('main2'));
|
||
|
|
//當前的行情對象
|
||
|
|
|
||
|
|
var marketObj = null;
|
||
|
|
var currencysObj = null;
|
||
|
|
var myCharts = {};
|
||
|
|
var thisChartData = {}; //视图第一次点击记录
|
||
|
|
|
||
|
|
var firstTap = {}; //菜单是否已弹出
|
||
|
|
|
||
|
|
var isOpen = false;
|
||
|
|
var choiceMarketsObj;
|
||
|
|
var listRecordChange = false;
|
||
|
|
var listDepthChange = false;
|
||
|
|
var stompClient = null;
|
||
|
|
var subscribeObj = null;
|
||
|
|
mui.plusReady(function() {
|
||
|
|
|
||
|
|
var self = plus.webview.currentWebview();
|
||
|
|
var currencys = self.currencyPair.split('-');
|
||
|
|
choiceMarketsObj = app.getLocalStorage(app.marketChoiceKey); //初始化币种数据
|
||
|
|
|
||
|
|
initData(self.currencysObj[currencys[1]][currencys[0]]); //添加分时行情
|
||
|
|
|
||
|
|
var url = app.currencyBaseUrl + 'market/query?timeType=MINUTE&timeNumber=15¤cyPair='; // var chartData = {
|
||
|
|
// myChartId: 'main1',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "T"
|
||
|
|
// };
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main2',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "15M"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
|
||
|
|
currencysObj = self.currencysObj; //初始化币种选择
|
||
|
|
|
||
|
|
initCoinData(); //监听函数
|
||
|
|
|
||
|
|
listener();
|
||
|
|
});
|
||
|
|
|
||
|
|
function initData(currencyObj) {
|
||
|
|
marketObj = currencyObj.marketObj;
|
||
|
|
|
||
|
|
if(choiceMarketsObj[marketObj.currencyPair]) {
|
||
|
|
document.getElementById("choice").style.color = '#5CACEE';
|
||
|
|
} else {
|
||
|
|
document.getElementById("choice").style.color = '#999999';
|
||
|
|
}
|
||
|
|
|
||
|
|
initInfoData(currencyObj); //深度数据
|
||
|
|
|
||
|
|
initDepth(currencyObj); //成交数据
|
||
|
|
|
||
|
|
initListRecord(currencyObj); //货币详情
|
||
|
|
|
||
|
|
initCurrencyInfo(currencyObj.coin);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initInfoData(currencyObj) {
|
||
|
|
document.getElementById('title').innerHTML = currencyObj.title; //价格
|
||
|
|
|
||
|
|
document.getElementById('coin-price').innerHTML = app.formatValue(marketObj.amount); //法币价格
|
||
|
|
|
||
|
|
document.getElementById('coin-rate').innerHTML = app.formatValue(marketObj[app.getExchangeRateLocalStorage().toLowerCase() + 'Amount'] * marketObj.amount) + ' ' + app.getExchangeRateLocalStorage(); //涨跌
|
||
|
|
|
||
|
|
setPercent(marketObj); //最高
|
||
|
|
|
||
|
|
document.getElementById('highest').innerHTML = app.formatValue(marketObj.highest); //最低
|
||
|
|
|
||
|
|
document.getElementById('lowest').innerHTML = app.formatValue(marketObj.lowest); //24小时统计交易量
|
||
|
|
|
||
|
|
document.getElementById('day-total').innerHTML = app.formatValue(marketObj.total);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initDepth(currencyObj) {
|
||
|
|
if(listDepthChange) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
listDepthChange = true;
|
||
|
|
var depthUrl = app.CCTUrl + 'order/listOrderByCoinAndUnit?coinName=' + currencyObj.coin + '&unitName=' + currencyObj.basecoin;
|
||
|
|
mui.ajax(depthUrl, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
setDepthData(currencyObj, j.data);
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setDepthData(currencyObj, data) {
|
||
|
|
var depthData = [
|
||
|
|
[],
|
||
|
|
[]
|
||
|
|
];
|
||
|
|
var ul = document.getElementById("depth-ul");
|
||
|
|
ul.innerHTML = '<li class="buying-selling-title">' + ' <span>' + langue.buy + '</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + ' <span>' + langue.sale + '</span>' + '</li>';
|
||
|
|
var buyTotal = 0;
|
||
|
|
var saleTotal = 0;
|
||
|
|
var length = data.BUY_ORDERS.length < data.SELL_ORDERS.length ? data.SELL_ORDERS.length : data.BUY_ORDERS.length;
|
||
|
|
|
||
|
|
for(var i = 0; i < length; i++) {
|
||
|
|
if(data.BUY_ORDERS.length > i) {
|
||
|
|
buyTotal += data.BUY_ORDERS[i].totalLastNum;
|
||
|
|
depthData[1].push([data.BUY_ORDERS[i].unitPrice, saleTotal]);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(data.SELL_ORDERS.length > i) {
|
||
|
|
saleTotal += data.SELL_ORDERS[i].totalLastNum;
|
||
|
|
depthData[0].push([data.SELL_ORDERS[i].unitPrice, buyTotal]);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(i < 20 && i < data.BUY_ORDERS.length && i < data.SELL_ORDERS.length) {
|
||
|
|
var li = document.createElement("li");
|
||
|
|
li.className = 'buying-selling-info';
|
||
|
|
li.innerHTML = '<span class="buy-sale">' + (i + 1) + '</span>' + '<span class="buy-sale-num">' + app.formatValue(data.BUY_ORDERS[i].totalNum) + '</span>' + '<p class="price">' + ' <span class="price-buy">' + app.formatValue(data.BUY_ORDERS[i].unitPrice) + '</span>' + ' <span class="price-sale">' + app.formatValue(data.SELL_ORDERS[i].unitPrice) + '</span>' + '</p>' + '<span class="buy-sale-num">' + app.formatValue(data.SELL_ORDERS[i].totalNum) + '</span>' + '<span class="buy-sale">' + (i + 1) + '</span>';
|
||
|
|
ul.appendChild(li);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if(!myCharts["container"]) {
|
||
|
|
myCharts["container"] = echarts.init(document.getElementById("container"));
|
||
|
|
}
|
||
|
|
|
||
|
|
myCharts["container"].setOption(option = options.getDepthOption(depthData), true);
|
||
|
|
listDepthChange = false;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 获取货币详情数据
|
||
|
|
* @param {Object} currencyName
|
||
|
|
*/
|
||
|
|
|
||
|
|
function initCurrencyInfo(currencyName) {
|
||
|
|
var url = app.currencyBaseUrl + 'currency/getCurrencyInfo?currencyName=' + currencyName;
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
headers: {
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
|
||
|
|
},
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
for(var columnName in j.data) {
|
||
|
|
document.getElementById(columnName).innerText = j.data[columnName];
|
||
|
|
}
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 添加币对切换数据
|
||
|
|
*/
|
||
|
|
|
||
|
|
function initCoinData() {
|
||
|
|
var aHtml = '';
|
||
|
|
var popover = document.getElementById("popover");
|
||
|
|
var choiceId = 'basecoin-choice';
|
||
|
|
aHtml += '<a class="mui-control-item mui-active" href="#' + id + '">' + langue.choice + '</a>';
|
||
|
|
var choiceDiv = document.createElement("div");
|
||
|
|
choiceDiv.id = id;
|
||
|
|
choiceDiv.className = 'mui-control-content mui-active';
|
||
|
|
var choiceUl = document.createElement("ul");
|
||
|
|
choiceUl.id = 'choice-market-ul';
|
||
|
|
choiceUl.className = 'mui-table-view';
|
||
|
|
choiceDiv.appendChild(choiceUl);
|
||
|
|
popover.appendChild(choiceDiv);
|
||
|
|
|
||
|
|
for(var basecoin in currencysObj) {
|
||
|
|
var id = 'basecoin-' + basecoin;
|
||
|
|
aHtml += '<a class="mui-control-item" href="#' + id + '">' + basecoin + '</a>';
|
||
|
|
var divEl = document.createElement("div");
|
||
|
|
divEl.id = id;
|
||
|
|
divEl.className = 'mui-control-content';
|
||
|
|
var ul = document.createElement("ul");
|
||
|
|
ul.className = 'mui-table-view';
|
||
|
|
|
||
|
|
for(var index in currencysObj[basecoin]) {
|
||
|
|
var li = getLi(currencysObj, basecoin, index, 'base-');
|
||
|
|
ul.appendChild(li);
|
||
|
|
liListener(li, currencysObj[basecoin][index]);
|
||
|
|
|
||
|
|
if(choiceMarketsObj[currencysObj[basecoin][index].marketObj.currencyPair]) {
|
||
|
|
var choiceLi = getLi(currencysObj, basecoin, index, 'choice-');
|
||
|
|
choiceUl.appendChild(choiceLi);
|
||
|
|
liListener(choiceLi, currencysObj[basecoin][index]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
divEl.appendChild(ul);
|
||
|
|
popover.appendChild(divEl);
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('basecoin-a').innerHTML = aHtml;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getLi(currencysObj, basecoin, index, id) {
|
||
|
|
var currencyPair = currencysObj[basecoin][index].marketObj.currencyPair;
|
||
|
|
var li = document.createElement("li");
|
||
|
|
li.id = id + 'currency-market-li-' + currencyPair;
|
||
|
|
li.className = 'mui-table-view-cell';
|
||
|
|
li.innerHTML += '<span class="popover-coin">' + currencysObj[basecoin][index].coin + '<span>/' + currencysObj[basecoin][index].basecoin + '</span>' + '</span>' + '<span id="' + id + 'currency-market-' + currencyPair + '" class="popover-price">' + app.formatValue(currencysObj[basecoin][index].marketObj.amount) + '</span>';
|
||
|
|
return li;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 币对切换监听
|
||
|
|
* @param {Object} li
|
||
|
|
* @param {Object} currencyObj
|
||
|
|
*/
|
||
|
|
|
||
|
|
function liListener(li, currencyObj) {
|
||
|
|
li.addEventListener('tap', function() {
|
||
|
|
firstTap = {};
|
||
|
|
initData(currencyObj);
|
||
|
|
cancel(); // chartTap(thisChartData);
|
||
|
|
|
||
|
|
Kvue.symbols = currencyObj.marketObj.currencyPair;
|
||
|
|
Kvue.install(Kvue.symbols, 15);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function initListRecord(currencyObj) {
|
||
|
|
var url = app.currencyBaseUrl + 'market/getHistoryList?currencyPair=' + marketObj.currencyPair;
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
var ul = document.getElementById("list-record");
|
||
|
|
ul.innerHTML = '<li class="transaction-title">' + ' <span>' + langue.date + '</span>' + ' <span>' + langue.buyOrSale + '</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + '</li>';
|
||
|
|
|
||
|
|
for(var index = 0; index < 20 && index < j.data.length; index++) {
|
||
|
|
setRecordLi(ul, j.data[index]);
|
||
|
|
}
|
||
|
|
|
||
|
|
listRecordChange = false;
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
setWebsocket(currencyObj);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setWebsocket(currencyObj) {
|
||
|
|
if(subscribeObj == null) {
|
||
|
|
var socket = new SockJS(app.currencyBaseUrl + "/websocket");
|
||
|
|
stompClient = Stomp.over(socket);
|
||
|
|
stompClient.connect({}, function(frame) {
|
||
|
|
subscribe(currencyObj);
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.onclose = function() {
|
||
|
|
subscribeObj = null;
|
||
|
|
setWebsocket(currencyObj);
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
subscribeObj.unsubscribe();
|
||
|
|
subscribe(currencyObj);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function subscribe(currencyObj) {
|
||
|
|
var ul = document.getElementById("list-record"); //订阅讲座消息
|
||
|
|
|
||
|
|
subscribeObj = stompClient.subscribe('/topic/history/' + marketObj.currencyPair, function(greeting) {
|
||
|
|
var obj = JSON.parse(greeting.body);
|
||
|
|
console.log();
|
||
|
|
ul.innerHTML = '<li class="transaction-title">' + ' <span>' + langue.date + '</span>' + ' <span>' + langue.buyOrSale + '</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + '</li>';
|
||
|
|
|
||
|
|
for(var index = 0; index < 20 && index < obj.length; index++) {
|
||
|
|
setRecordLi(ul, obj[index]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setRecordLi(ul, record) {
|
||
|
|
var li = document.createElement("li");
|
||
|
|
li.className = 'transaction-info';
|
||
|
|
var buyOrSale;
|
||
|
|
var buyOrSaleClass;
|
||
|
|
|
||
|
|
if(record.tradingType == 'BUY') {
|
||
|
|
buyOrSale = langue.buy;
|
||
|
|
buyOrSaleClass = 'transaction-direction-buy';
|
||
|
|
} else {
|
||
|
|
buyOrSale = langue.sale;
|
||
|
|
buyOrSaleClass = 'transaction-direction-sale';
|
||
|
|
}
|
||
|
|
|
||
|
|
li.innerHTML = '<span class="transaction-time">' + record.createTime.substring(11) + '</span>' + '<span class="' + buyOrSaleClass + '">' + buyOrSale + '</span>' + '<span class="transaction-price">' + app.formatValue(record.makerPrice) + '</span>' + '<span class="transaction-num">' + app.formatValue(record.tradingNum) + '</span>';
|
||
|
|
ul.appendChild(li);
|
||
|
|
}
|
||
|
|
|
||
|
|
function listener() {
|
||
|
|
document.getElementById("choice").addEventListener("tap", function() {
|
||
|
|
console.log("@2323")
|
||
|
|
marketChoice(this);
|
||
|
|
});
|
||
|
|
// document.getElementById("T").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=MINUTE&timeNumber=1¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main1',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "T"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("15M").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=MINUTE&timeNumber=15¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main2',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "15M"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("1H").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=HOUR&timeNumber=1¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main3',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "1H"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("4H").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=HOUR&timeNumber=4¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main4',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "4H"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("1D").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=DAY&timeNumber=1¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main5',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "1D"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// 弹出菜单点击事件
|
||
|
|
document.getElementById('icon-popover').addEventListener('tap', function() {
|
||
|
|
if(isOpen) {
|
||
|
|
cancel();
|
||
|
|
} else {
|
||
|
|
document.getElementById('popover').style.transform = 'translate(0,0)';
|
||
|
|
var bg = document.getElementById("bg"); //获取灰色背景蒙版
|
||
|
|
|
||
|
|
bg.style.display = "block";
|
||
|
|
isOpen = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.getElementById("buy-currency").addEventListener("tap", function() {
|
||
|
|
buyOrSale('BUY');
|
||
|
|
});
|
||
|
|
document.getElementById("sale-currency").addEventListener("tap", function() {
|
||
|
|
buyOrSale('SELL');
|
||
|
|
});
|
||
|
|
document.getElementById('bg').addEventListener('tap', function() {
|
||
|
|
cancel();
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* 监听行情改变事件
|
||
|
|
*/
|
||
|
|
|
||
|
|
window.addEventListener("marketChange", function(event) {
|
||
|
|
marketChange(event.detail);
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* 监听行情改变事件
|
||
|
|
*/
|
||
|
|
|
||
|
|
window.addEventListener("depthChange", function(event) {
|
||
|
|
var changeMarketObj = event.detail;
|
||
|
|
|
||
|
|
if(changeMarketObj.currencyPair == marketObj.currencyPair) {
|
||
|
|
var currencys = changeMarketObj.currencyPair.split('-');
|
||
|
|
var currencyObj = {
|
||
|
|
'marketObj': changeMarketObj,
|
||
|
|
'title': currencys[0] + '/' + currencys[1],
|
||
|
|
'basecoin': currencys[1],
|
||
|
|
'coin': currencys[0] //深度数据
|
||
|
|
};
|
||
|
|
initDepth(currencyObj);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function marketChoice(_this) {
|
||
|
|
var currencyPair = marketObj.currencyPair;
|
||
|
|
|
||
|
|
if(choiceMarketsObj[currencyPair]) {
|
||
|
|
delete choiceMarketsObj[currencyPair];
|
||
|
|
_this.style.color = '#999999';
|
||
|
|
document.getElementById('choice-currency-market-li-' + currencyPair).remove();
|
||
|
|
} else {
|
||
|
|
choiceMarketsObj[currencyPair] = true;
|
||
|
|
_this.style.color = '#5CACEE';
|
||
|
|
var currencys = currencyPair.split('-');
|
||
|
|
var choiceLi = getLi(currencysObj, currencys[1], currencys[0], 'choice-');
|
||
|
|
document.getElementById('choice-market-ul').appendChild(choiceLi);
|
||
|
|
liListener(choiceLi, currencysObj[currencys[1]][currencys[0]]);
|
||
|
|
}
|
||
|
|
app.setLocalStorage(app.marketChoiceKey, choiceMarketsObj);
|
||
|
|
var marketView = plus.webview.getWebviewById('html/market/market.html');
|
||
|
|
mui.fire(marketView, "marketChoice", currencyPair);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 跳转到购买或者出售界面
|
||
|
|
*/
|
||
|
|
|
||
|
|
function buyOrSale(type) {
|
||
|
|
var url = 'html/cct/html/cct_index.html';
|
||
|
|
var currencys = marketObj.currencyPair.split('-');
|
||
|
|
var data = {
|
||
|
|
type: type,
|
||
|
|
coin: currencys[0],
|
||
|
|
unit: currencys[1]
|
||
|
|
};
|
||
|
|
var cctView = plus.webview.getWebviewById(url);
|
||
|
|
mui.fire(cctView, "tapTypeBtn", data);
|
||
|
|
var data2 = {
|
||
|
|
url: url
|
||
|
|
};
|
||
|
|
var indexView = plus.webview.getWebviewById(plus.runtime.appid);
|
||
|
|
mui.fire(indexView, "viewTab", data2);
|
||
|
|
var self = plus.webview.currentWebview();
|
||
|
|
self.close();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 行情数据改变
|
||
|
|
* @param {Object} changeMarketObj
|
||
|
|
*/
|
||
|
|
|
||
|
|
function marketChange(changeMarketObj) {
|
||
|
|
var currencys = changeMarketObj.currencyPair.split('-');
|
||
|
|
currencysObj[currencys[1]][currencys[0]] = changeMarketObj;
|
||
|
|
|
||
|
|
if(changeMarketObj.currencyPair == marketObj.currencyPair) {
|
||
|
|
marketObj = changeMarketObj;
|
||
|
|
var currencyObj = {
|
||
|
|
'marketObj': changeMarketObj,
|
||
|
|
'title': currencys[0] + '/' + currencys[1],
|
||
|
|
'basecoin': currencys[1],
|
||
|
|
'coin': currencys[0] //改变行情显示数据
|
||
|
|
|
||
|
|
};
|
||
|
|
initInfoData(currencyObj); //深度数据
|
||
|
|
|
||
|
|
initDepth(currencyObj);
|
||
|
|
}
|
||
|
|
|
||
|
|
var el = document.getElementById("currency-market-" + changeMarketObj.currencyPair);
|
||
|
|
|
||
|
|
if(el) {
|
||
|
|
el.innerText = app.formatValue(changeMarketObj.amoount);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* K线视图切换点击
|
||
|
|
* @param {Object} chartData
|
||
|
|
*/
|
||
|
|
//function chartTap(chartData) {
|
||
|
|
// thisChartData = chartData;
|
||
|
|
// if(firstTap[chartData.chartType]) return;
|
||
|
|
// firstTap[chartData.chartType] = true;
|
||
|
|
// if(chartData.chartType == 'T') {
|
||
|
|
// setTChart(chartData.url + marketObj.currencyPair);
|
||
|
|
// } else {
|
||
|
|
// setKChart(chartData.myChartId, chartData.url + marketObj.currencyPair, chartData.chartType);
|
||
|
|
// }
|
||
|
|
//}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取K线视图数据
|
||
|
|
* @param {Object} myChartId
|
||
|
|
* @param {Object} url
|
||
|
|
* @param {Object} chartType
|
||
|
|
*/
|
||
|
|
//function setKChart(myChartId, url, chartType) {
|
||
|
|
// setTimeout(function(){
|
||
|
|
// var data = splitData(datas.datas.data);
|
||
|
|
// var myChart = echarts.init(document.getElementById(myChartId));
|
||
|
|
// myChart.setOption(option = options.getKOption(data,chartType),true);
|
||
|
|
// },500);
|
||
|
|
// plus.nativeUI.showWaiting();
|
||
|
|
// mui.ajax(url, {
|
||
|
|
// type: "GET",
|
||
|
|
// dataType: "json",
|
||
|
|
// success: function(j) {
|
||
|
|
// if(j.code == 200) {
|
||
|
|
// var data = splitData(j.data);
|
||
|
|
// if(!myCharts[myChartId]) {
|
||
|
|
// myCharts[myChartId] = echarts.init(document.getElementById(myChartId));
|
||
|
|
// }
|
||
|
|
// myCharts[myChartId].setOption(option = options.getKOption(data, chartType), true);
|
||
|
|
// plus.nativeUI.closeWaiting();
|
||
|
|
// } else {
|
||
|
|
// plus.nativeUI.closeWaiting();
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// error: function(xhr, type, errorThrown) {
|
||
|
|
// plus.nativeUI.closeWaiting();
|
||
|
|
// console.log(type)
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
//}
|
||
|
|
|
||
|
|
function setTChart(url) {
|
||
|
|
// setTimeout(function(){
|
||
|
|
// var data = splitTData(datas.datas.data);
|
||
|
|
// var myChart = echarts.init(document.getElementById('main1'));
|
||
|
|
// myChart.setOption(option = options.getTOption(data),true);
|
||
|
|
// },500);
|
||
|
|
plus.nativeUI.showWaiting();
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
var data = splitTData(j.data);
|
||
|
|
|
||
|
|
if(!myCharts['T']) {
|
||
|
|
myCharts['T'] = echarts.init(document.getElementById('main1'));
|
||
|
|
}
|
||
|
|
|
||
|
|
myCharts['T'].setOption(option = options.getTOption(data), true);
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function splitData(data) {
|
||
|
|
var categoryData = [];
|
||
|
|
var values = [];
|
||
|
|
var volumes = [];
|
||
|
|
var lastIndex = data.length - 1;
|
||
|
|
|
||
|
|
for(var i = 0; i < data.length; i++) {
|
||
|
|
categoryData.push(data[i].date);
|
||
|
|
var amount = [];
|
||
|
|
amount[0] = data[i].open;
|
||
|
|
amount[1] = data[i].close;
|
||
|
|
amount[2] = data[i].lowest;
|
||
|
|
amount[3] = data[i].highest;
|
||
|
|
amount[4] = data[i].total;
|
||
|
|
values.push(amount);
|
||
|
|
var volume = [];
|
||
|
|
volume[0] = i;
|
||
|
|
volume[1] = amount[4];
|
||
|
|
volume[2] = amount[0] > amount[1] ? 1 : -1;
|
||
|
|
volumes.push(volume);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
categoryData: categoryData,
|
||
|
|
values: values,
|
||
|
|
volumes: volumes
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function splitTData(data) {
|
||
|
|
var categoryData = [];
|
||
|
|
var values = [];
|
||
|
|
var volumes = [];
|
||
|
|
var lastIndex = data.length - 1;
|
||
|
|
|
||
|
|
for(var i = 0; i < data.length; i++) {
|
||
|
|
categoryData.push(data[i].date);
|
||
|
|
values[i] = data[i].close;
|
||
|
|
volumes.push(data[i].total);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
categoryData: categoryData,
|
||
|
|
values: values,
|
||
|
|
volumes: volumes
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function setPercent(marketObj) {
|
||
|
|
var percentEl = document.getElementById('coin-gain');
|
||
|
|
|
||
|
|
if(marketObj.percent < 0) {
|
||
|
|
percentEl.innerText = parseFloat(marketObj.percent * 100).toFixed(2) + '%';
|
||
|
|
percentEl.style.color = '#FD595D';
|
||
|
|
} else {
|
||
|
|
percentEl.innerText = '+' + parseFloat(marketObj.percent * 100).toFixed(2) + '%';
|
||
|
|
percentEl.style.color = '#4CD49B';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 隐藏币对选择弹框
|
||
|
|
*/
|
||
|
|
|
||
|
|
function cancel() {
|
||
|
|
isOpen = false;
|
||
|
|
var bg = document.getElementById("bg"); //获取灰色背景蒙版
|
||
|
|
|
||
|
|
var popover = document.getElementById("popover"); //获取菜单弹出框
|
||
|
|
|
||
|
|
bg.style.display = "none";
|
||
|
|
popover.style.transform = 'translate(-100%,0)';
|
||
|
|
//1、每个页面写自己的国际化语言变量，例子：
|
||
|
|
var langues = {
|
||
|
|
zh_CN: {
|
||
|
|
favorites: "自选",
|
||
|
|
high: "高",
|
||
|
|
low: '低',
|
||
|
|
ktype: {
|
||
|
|
realtime: '实时',
|
||
|
|
ftmin: '15分钟',
|
||
|
|
onehour: '1小时',
|
||
|
|
fourhour: '4小时',
|
||
|
|
oneday: '1天'
|
||
|
|
},
|
||
|
|
depth: '深度',
|
||
|
|
buy: '买入',
|
||
|
|
sale: '卖出',
|
||
|
|
amount: '数量',
|
||
|
|
price: '价格',
|
||
|
|
deal: '成交',
|
||
|
|
date: '时间',
|
||
|
|
buyOrSale: '买入/卖出',
|
||
|
|
introduction: {
|
||
|
|
introduction: '简介',
|
||
|
|
issueDate: '发行时间',
|
||
|
|
totalAmount: '发行总量',
|
||
|
|
circulation: '流通总量',
|
||
|
|
ico: '众筹价格',
|
||
|
|
whitePaper: '白皮书',
|
||
|
|
officialWebsite: '官网',
|
||
|
|
blockExplorer: '区块查询'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
zh_HK: {
|
||
|
|
favorites: "自選",
|
||
|
|
high: "高",
|
||
|
|
low: "低",
|
||
|
|
ktype: {
|
||
|
|
realtime: '實時',
|
||
|
|
ftmin: '15分鐘',
|
||
|
|
onehour: '1小時',
|
||
|
|
fourhour: '4小時',
|
||
|
|
oneday: '1天'
|
||
|
|
},
|
||
|
|
buy: '買入',
|
||
|
|
sale: '賣出',
|
||
|
|
amount: '數量',
|
||
|
|
price: '價格',
|
||
|
|
depth: '深度',
|
||
|
|
deal: '成交',
|
||
|
|
date: '時間',
|
||
|
|
buyOrSale: '買入/賣出',
|
||
|
|
introduction: {
|
||
|
|
introduction: '簡介',
|
||
|
|
issueDate: '發行時間',
|
||
|
|
totalAmount: '發行總量',
|
||
|
|
circulation: '流通總量',
|
||
|
|
ico: '衆籌價格',
|
||
|
|
whitePaper: '白皮書',
|
||
|
|
officialWebsite: '官網',
|
||
|
|
blockExplorer: '區塊查詢'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
en_US: {
|
||
|
|
favorites: "Favorites",
|
||
|
|
high: "High",
|
||
|
|
low: 'Low',
|
||
|
|
ktype: {
|
||
|
|
realtime: 'Time',
|
||
|
|
ftmin: '15min',
|
||
|
|
onehour: '1hour',
|
||
|
|
fourhour: '4hour',
|
||
|
|
oneday: '1day'
|
||
|
|
},
|
||
|
|
depth: 'Depth',
|
||
|
|
buy: 'Buy',
|
||
|
|
sale: 'Sale',
|
||
|
|
amount: 'Amount',
|
||
|
|
price: 'Price',
|
||
|
|
deal: 'Deal',
|
||
|
|
date: 'Date',
|
||
|
|
buyOrSale: 'buy/sale',
|
||
|
|
introduction: {
|
||
|
|
introduction: 'Introduction',
|
||
|
|
issueDate: 'Issue Date',
|
||
|
|
totalAmount: 'Total Amount',
|
||
|
|
circulation: 'Circulation',
|
||
|
|
ico: 'ICO Price',
|
||
|
|
whitePaper: 'White Paper',
|
||
|
|
officialWebsite: 'Official Website',
|
||
|
|
blockExplorer: 'Block Explorer'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}; //2、页面上所有需要国际化的文字，包括提示，都通过Vue去引用，例子：
|
||
|
|
|
||
|
|
var langueKey = app.getLanguageLocalStorage(); //获取国际化语种
|
||
|
|
|
||
|
|
var langue = langues[langueKey]; // 获取国际化语种数据
|
||
|
|
//var dataInfo = new Vue({
|
||
|
|
// el: "#js-data-info",
|
||
|
|
// data: {
|
||
|
|
// langue: langue
|
||
|
|
// }
|
||
|
|
//})
|
||
|
|
|
||
|
|
var Kvue = new Vue({
|
||
|
|
el: "#js-data-info",
|
||
|
|
data: {
|
||
|
|
langue: langue,
|
||
|
|
TvWidget: null,
|
||
|
|
symbols: null,
|
||
|
|
interval: null,
|
||
|
|
historyData: [],
|
||
|
|
kNewdata: [],
|
||
|
|
subInterval: null,
|
||
|
|
loading: true,
|
||
|
|
MALine5: null,
|
||
|
|
MALine10: null,
|
||
|
|
MALine20: null,
|
||
|
|
MALine30: null,
|
||
|
|
subObjMarket: null,
|
||
|
|
stompClientMarket: null,
|
||
|
|
times: 0
|
||
|
|
},
|
||
|
|
mounted: function() {
|
||
|
|
mui.plusReady(function() {
|
||
|
|
var self = plus.webview.currentWebview();
|
||
|
|
var currencys = self.currencyPair.split('-');
|
||
|
|
Kvue.symbols = self.currencyPair;
|
||
|
|
Kvue.install(Kvue.symbols, 15);
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
adjustScale: function adjustScale(value) {
|
||
|
|
if(value == 0) return '1000000';
|
||
|
|
var val = parseFloat(value);
|
||
|
|
|
||
|
|
if(val < 0) {
|
||
|
|
val = -val;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(val < 0.0001) {
|
||
|
|
return 100000000;
|
||
|
|
} else if(val < 0.1) {
|
||
|
|
return 1000000;
|
||
|
|
} else if(val < 10) {
|
||
|
|
return 10000;
|
||
|
|
} else {
|
||
|
|
return 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
return value;
|
||
|
|
},
|
||
|
|
adjustScaleA: function adjustScaleA(value) {
|
||
|
|
if(!value || value == 0) return 6;
|
||
|
|
var val = parseFloat(value);
|
||
|
|
|
||
|
|
if(val < 0) {
|
||
|
|
val = -val;
|
||
|
|
}
|
||
|
|
|
||
|
|
if(val < 0.001) {
|
||
|
|
return 8;
|
||
|
|
} else if(val < 0.1) {
|
||
|
|
return 6;
|
||
|
|
} else if(val < 10) {
|
||
|
|
return 4;
|
||
|
|
} else {
|
||
|
|
return 2;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
billinfo: function billinfo() {
|
||
|
|
return {
|
||
|
|
name: this.symbols,
|
||
|
|
ticker: this.symbols,
|
||
|
|
description: '',
|
||
|
|
type: 'index',
|
||
|
|
exchange: '',
|
||
|
|
listed_exchange: '',
|
||
|
|
session: '24x7',
|
||
|
|
timezone: 'Asia/Hong_Kong',
|
||
|
|
minmov: 1,
|
||
|
|
pricescale: this.adjustScale(marketObj.amount),
|
||
|
|
minmov2: 0,
|
||
|
|
supported_resolutions: ['1', '15', '30', '60', '240', '720', 'D', 'W', 'M'],
|
||
|
|
has_seconds: false,
|
||
|
|
// 是否有秒的历史数据
|
||
|
|
has_intraday: true,
|
||
|
|
// 是否有分钟的历史数据
|
||
|
|
has_daily: true,
|
||
|
|
// 是否有日的历史数据
|
||
|
|
has_weekly_and_monthly: true,
|
||
|
|
// 是否有周和月的历史数据
|
||
|
|
seconds_multipliers: [],
|
||
|
|
// 分辨率为秒单位的数组
|
||
|
|
intraday_multipliers: ['1', '15', '30', '60', '240', '720'],
|
||
|
|
// 分辨率为分钟单位的数组
|
||
|
|
has_empty_bars: true,
|
||
|
|
force_session_rebuild: false,
|
||
|
|
has_no_volume: false,
|
||
|
|
// 表示商品是否拥有成交量数据
|
||
|
|
has_fractional_volume: true,
|
||
|
|
volume_precision: 2,
|
||
|
|
data_status: 'delayed_streaming',
|
||
|
|
expired: false,
|
||
|
|
expiration_date: false,
|
||
|
|
volumePaneSize: "tiny"
|
||
|
|
};
|
||
|
|
},
|
||
|
|
install: function install(symbols, interval) {
|
||
|
|
var _this3 = this;
|
||
|
|
|
||
|
|
this.TvWidget = new TradingView.widget({
|
||
|
|
symbol: symbols,
|
||
|
|
interval: interval,
|
||
|
|
library_path: '../../lib/charting_library/',
|
||
|
|
container_id: 'TradingView',
|
||
|
|
datafeed: new Datafeed(this),
|
||
|
|
fullscreen: false,
|
||
|
|
autosize: true,
|
||
|
|
locale: 'zh',
|
||
|
|
preset: "mobile",
|
||
|
|
timezone: 'Asia/Hong_Kong',
|
||
|
|
debug: false,
|
||
|
|
loading_screen: {
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
foregroundColor: '#0094ff'
|
||
|
|
},
|
||
|
|
overrides: {
|
||
|
|
'symbolWatermarkProperties.color': '#fe4761',
|
||
|
|
'mainSeriesProperties.candleStyle.upColor': '#00ce7d',
|
||
|
|
'mainSeriesProperties.candleStyle.downColor': '#e04640',
|
||
|
|
'mainSeriesProperties.candleStyle.borderUpColor': '#00ce7d',
|
||
|
|
'mainSeriesProperties.candleStyle.borderDownColor': '#e04640',
|
||
|
|
"paneProperties.background": "#fff",
|
||
|
|
"paneProperties.legendProperties.showLegend": true,
|
||
|
|
'scalesProperties.lineColor': '#f2f2f2'
|
||
|
|
},
|
||
|
|
studies_overrides: {
|
||
|
|
"volume.volume.color.0": "#00ce7d",
|
||
|
|
"volume.volume.color.1": "#e04640"
|
||
|
|
},
|
||
|
|
disabled_features: ['header_symbol_search', 'header_resolutions', 'header_compare', 'header_settings', 'header_undo_redo', 'header_chart_type', 'header_screenshot', 'widget_logo',
|
||
|
|
'control_bar', 'volume_force_overlay', 'header_fullscreen_button', 'timeframes_toolbar', 'header_indicators', 'show_chart_property_page', 'property_pages'
|
||
|
|
],
|
||
|
|
// 启用图表某个功能
|
||
|
|
enabled_features: ['dont_show_boolean_study_arguments', 'remove_library_container_border', //'save_chart_properties_to_local_storage',
|
||
|
|
//'side_toolbar_in_fullscreen_mode',
|
||
|
|
'constraint_dialogs_movement', 'hide_last_na_study_output'
|
||
|
|
],
|
||
|
|
// favorites:{
|
||
|
|
// intervals:['1','15', '30', '60', '240', '720']
|
||
|
|
// },
|
||
|
|
theme: 'Light',
|
||
|
|
allow_symbol_change: true,
|
||
|
|
custom_css_url: 'chart1.css'
|
||
|
|
});
|
||
|
|
this.symbols = symbols;
|
||
|
|
this.interval = interval;
|
||
|
|
this.TvWidget.onChartReady(function() {
|
||
|
|
_this3.onChartReady(_this3.TvWidget);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onChartReady: function onChartReady(TvWidget) {
|
||
|
|
var maPercision = this.adjustScaleA(marketObj.amount);
|
||
|
|
var that = this;
|
||
|
|
this.MALine5 = TvWidget.chart().createStudy('Moving Average', false, true, [5, 'close', 0], null, {
|
||
|
|
'Plot.color': '#f6cd79',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
this.MALine10 = TvWidget.chart().createStudy('Moving Average', false, true, [10, 'close', 0], null, {
|
||
|
|
'Plot.color': '#4cd49b',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
this.MALine20 = TvWidget.chart().createStudy('Moving Average', false, true, [20, 'close', 0], null, {
|
||
|
|
'Plot.color': '#dd5f9e',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
this.MALine30 = TvWidget.chart().createStudy('Moving Average', false, true, [30, 'close', 0], null, {
|
||
|
|
'Plot.color': '#9751dc',
|
||
|
|
'Plot.linewidth': 1,
|
||
|
|
'precision': maPercision
|
||
|
|
});
|
||
|
|
$('.timebutton').removeClass('active');
|
||
|
|
$('#15m').addClass('active');
|
||
|
|
$('.timebutton').click(function() {
|
||
|
|
$('.timebutton').removeClass('active');
|
||
|
|
$(this).addClass('active');
|
||
|
|
|
||
|
|
if($(this).attr('data-interval') == '1') {
|
||
|
|
this.interval = '1';
|
||
|
|
} else if($(this).attr('data-interval') == '15') {
|
||
|
|
this.interval = '15';
|
||
|
|
} else if($(this).attr('data-interval') == '30') {
|
||
|
|
this.interval = '30';
|
||
|
|
} else if($(this).attr('data-interval') == '1H') {
|
||
|
|
this.interval = '60';
|
||
|
|
} else if($(this).attr('data-interval') == '4H') {
|
||
|
|
this.interval = '240';
|
||
|
|
} else if($(this).attr('data-interval') == '1D') {
|
||
|
|
this.interval = 'D';
|
||
|
|
} else if($(this).attr('data-interval') == '1W') {
|
||
|
|
this.interval = 'W';
|
||
|
|
} else if($(this).attr('data-interval') == '1M') {
|
||
|
|
this.interval = 'M';
|
||
|
|
}
|
||
|
|
|
||
|
|
var _that = this;
|
||
|
|
|
||
|
|
setTimeout(function() {
|
||
|
|
if(_that.interval == 1) {
|
||
|
|
TvWidget.chart().setResolution(_that.interval, function onReadyCallback() {
|
||
|
|
TvWidget.chart().getStudyById(that.MALine5).setVisible(false);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine10).setVisible(false);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine20).setVisible(false);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine30).setVisible(false);
|
||
|
|
document.getElementById('TradingView').childNodes[0].setAttribute('style', 'display:block;width:100%;height:100%;');
|
||
|
|
TvWidget.chart().setChartType(3);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
TvWidget.chart().setResolution(_that.interval, function onReadyCallback() {
|
||
|
|
TvWidget.chart().getStudyById(that.MALine5).setVisible(true);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine10).setVisible(true);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine20).setVisible(true);
|
||
|
|
TvWidget.chart().getStudyById(that.MALine30).setVisible(true);
|
||
|
|
document.getElementById('TradingView').childNodes[0].setAttribute('style', 'display:block;width:100%;height:100%;');
|
||
|
|
TvWidget.chart().setChartType(1);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 获取K线历史数据
|
||
|
|
getBars: function getBars(symbolInfo, resolution, from, to, onHistoryCallback, onDataCallback) {
|
||
|
|
this.historyGetData(this.interval, from, to).then(function(res) {
|
||
|
|
onDataCallback(res);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// K线历史数据
|
||
|
|
historyGetData: function historyGetData(resolution, from, to) {
|
||
|
|
return new Promise(function(resolve, reject) {
|
||
|
|
var klinedata = [];
|
||
|
|
var timeType = null;
|
||
|
|
var timeNumber = null; //判断分辨率
|
||
|
|
|
||
|
|
switch(resolution) {
|
||
|
|
case 'D':
|
||
|
|
timeType = 'DAY';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'W':
|
||
|
|
timeType = 'WEEK';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'M':
|
||
|
|
timeType = 'MONTH';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
if(Number(resolution) < 60) {
|
||
|
|
timeType = 'MINUTE';
|
||
|
|
timeNumber = resolution;
|
||
|
|
} else {
|
||
|
|
timeType = 'HOUR';
|
||
|
|
timeNumber = parseInt(Number(resolution) / 60);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var url = app.currencyBaseUrl + "market/query?timeType=".concat(timeType, "&timeNumber=").concat(timeNumber, "¤cyPair=").concat(Kvue.symbols);
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(res) {
|
||
|
|
if(Object.prototype.toString.call(res.data) == '[object Array]' && res.data.length) {
|
||
|
|
if(res.data[0].timestamp >= from * 1000 && res.data[res.data.length - 1].timestamp <= to * 1000) {
|
||
|
|
this.times = res.data[res.data.length - 1].timestamp;
|
||
|
|
res.data.forEach(function(value) {
|
||
|
|
klinedata.push({
|
||
|
|
index: value.index,
|
||
|
|
time: value.timestamp,
|
||
|
|
close: value.close,
|
||
|
|
open: value.open,
|
||
|
|
high: value.highest,
|
||
|
|
low: value.lowest,
|
||
|
|
volume: value.total
|
||
|
|
});
|
||
|
|
});
|
||
|
|
this.historyData = klinedata;
|
||
|
|
resolve(klinedata); // this.loading = false;
|
||
|
|
} else {
|
||
|
|
this.historyData = [];
|
||
|
|
resolve([]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
resolve([]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 实时更新K线
|
||
|
|
subscribeBars: function subscribeBars(onRealtimeCallback) {
|
||
|
|
this.connectionMarket(onRealtimeCallback);
|
||
|
|
},
|
||
|
|
// 訂閲
|
||
|
|
subscribeMarket: function subscribeMarket(onRealtimeCallback) {
|
||
|
|
var timeType = null;
|
||
|
|
var timeNumber = null; //判断分辨率
|
||
|
|
|
||
|
|
switch(this.interval) {
|
||
|
|
case 'D':
|
||
|
|
timeType = 'DAY';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'W':
|
||
|
|
timeType = 'WEEK';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'M':
|
||
|
|
timeType = 'MONTH';
|
||
|
|
timeNumber = 1;
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
if(Number(this.interval) < 60) {
|
||
|
|
timeType = 'MINUTE';
|
||
|
|
timeNumber = this.interval;
|
||
|
|
} else {
|
||
|
|
timeType = 'HOUR';
|
||
|
|
timeNumber = parseInt(Number(this.interval) / 60);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var thiss = this;
|
||
|
|
var websocketURL = '/topic/marketk/' + this.symbols + '/' + timeNumber + timeType; // var websocketURL= '/topic/subscription/BTC-USDT'
|
||
|
|
|
||
|
|
this.subObjMarket = this.stompClientMarket.subscribe(websocketURL, function(data) {
|
||
|
|
//货币对最新信息（中间头部）
|
||
|
|
var subData = JSON.parse(data.body);
|
||
|
|
|
||
|
|
if(subData.timestamp >= thiss.times) {
|
||
|
|
onRealtimeCallback({
|
||
|
|
time: subData.timestamp,
|
||
|
|
close: subData.close,
|
||
|
|
open: subData.open,
|
||
|
|
high: subData.highest,
|
||
|
|
low: subData.lowest,
|
||
|
|
volume: subData.total
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
connectionMarket: function connectionMarket(onRealtimeCallback) {
|
||
|
|
// 建立连接对象
|
||
|
|
var socket = new SockJS(app.currencyBaseUrl + '/websocket'); //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
|
||
|
|
// 获取STOMP子协议的客户端对象
|
||
|
|
|
||
|
|
this.stompClientMarket = new Stomp.over(socket);
|
||
|
|
this.stompClientMarket.debug = null;
|
||
|
|
var this_ = this;
|
||
|
|
this.stompClientMarket.connect({}, function(event) {
|
||
|
|
//防止单个用户多次订阅
|
||
|
|
if(this_.subObjMarket == null) {
|
||
|
|
this_.subscribeMarket(onRealtimeCallback);
|
||
|
|
} else {
|
||
|
|
this_.subObjMarket.unsubscribe();
|
||
|
|
this_.subscribeMarket(onRealtimeCallback);
|
||
|
|
}
|
||
|
|
}); //关闭事件触发重新链接
|
||
|
|
|
||
|
|
socket.onclose = function() {
|
||
|
|
this_.connectionMarket(onRealtimeCallback);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}); ////3、每个页面都需要加上以下的方法：
|
||
|
|
|
||
|
|
window.addEventListener('switchLangueData', function(e) {
|
||
|
|
//Kvue对象的名称
|
||
|
|
Kvue.langue = langues[e.detail];
|
||
|
|
});
|
||
|
|
/*基于准备好的dom，初始化echarts实例*/
|
||
|
|
//var myChart1 = echarts.init(document.getElementById('main1'));
|
||
|
|
//var myChart2 = echarts.init(document.getElementById('main2'));
|
||
|
|
//當前的行情對象
|
||
|
|
|
||
|
|
var marketObj = null;
|
||
|
|
var currencysObj = null;
|
||
|
|
var myCharts = {};
|
||
|
|
var thisChartData = {}; //视图第一次点击记录
|
||
|
|
|
||
|
|
var firstTap = {}; //菜单是否已弹出
|
||
|
|
|
||
|
|
var isOpen = false;
|
||
|
|
var choiceMarketsObj;
|
||
|
|
var listRecordChange = false;
|
||
|
|
var listDepthChange = false;
|
||
|
|
var stompClient = null;
|
||
|
|
var subscribeObj = null;
|
||
|
|
mui.plusReady(function() {
|
||
|
|
|
||
|
|
var self = plus.webview.currentWebview();
|
||
|
|
var currencys = self.currencyPair.split('-');
|
||
|
|
choiceMarketsObj = app.getLocalStorage(app.marketChoiceKey); //初始化币种数据
|
||
|
|
console.log(choiceMarketsObj);
|
||
|
|
initData(self.currencysObj[currencys[1]][currencys[0]]); //添加分时行情
|
||
|
|
|
||
|
|
var url = app.currencyBaseUrl + 'market/query?timeType=MINUTE&timeNumber=15¤cyPair='; // var chartData = {
|
||
|
|
// myChartId: 'main1',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "T"
|
||
|
|
// };
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main2',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "15M"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
|
||
|
|
currencysObj = self.currencysObj; //初始化币种选择
|
||
|
|
|
||
|
|
initCoinData(); //监听函数
|
||
|
|
|
||
|
|
listener();
|
||
|
|
});
|
||
|
|
|
||
|
|
function initData(currencyObj) {
|
||
|
|
marketObj = currencyObj.marketObj;
|
||
|
|
console.log(choiceMarketsObj);
|
||
|
|
if(choiceMarketsObj[marketObj.currencyPair]) {
|
||
|
|
document.getElementById("choice").style.color = '#5CACEE';
|
||
|
|
} else {
|
||
|
|
document.getElementById("choice").style.color = '#999999';
|
||
|
|
}
|
||
|
|
|
||
|
|
initInfoData(currencyObj); //深度数据
|
||
|
|
|
||
|
|
initDepth(currencyObj); //成交数据
|
||
|
|
|
||
|
|
initListRecord(currencyObj); //货币详情
|
||
|
|
|
||
|
|
initCurrencyInfo(currencyObj.coin);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initInfoData(currencyObj) {
|
||
|
|
document.getElementById('title').innerHTML = currencyObj.title; //价格
|
||
|
|
|
||
|
|
document.getElementById('coin-price').innerHTML = app.formatValue(marketObj.amount); //法币价格
|
||
|
|
|
||
|
|
document.getElementById('coin-rate').innerHTML = app.formatValue(marketObj[app.getExchangeRateLocalStorage().toLowerCase() + 'Amount'] * marketObj.amount) + ' ' + app.getExchangeRateLocalStorage(); //涨跌
|
||
|
|
|
||
|
|
setPercent(marketObj); //最高
|
||
|
|
|
||
|
|
document.getElementById('highest').innerHTML = app.formatValue(marketObj.highest); //最低
|
||
|
|
|
||
|
|
document.getElementById('lowest').innerHTML = app.formatValue(marketObj.lowest); //24小时统计交易量
|
||
|
|
|
||
|
|
document.getElementById('day-total').innerHTML = app.formatValue(marketObj.total);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initDepth(currencyObj) {
|
||
|
|
if(listDepthChange) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
listDepthChange = true;
|
||
|
|
var depthUrl = app.CCTUrl + 'order/listOrderByCoinAndUnit?coinName=' + currencyObj.coin + '&unitName=' + currencyObj.basecoin;
|
||
|
|
mui.ajax(depthUrl, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
setDepthData(currencyObj, j.data);
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setDepthData(currencyObj, data) {
|
||
|
|
var depthData = [
|
||
|
|
[],
|
||
|
|
[]
|
||
|
|
];
|
||
|
|
var ul = document.getElementById("depth-ul");
|
||
|
|
ul.innerHTML = '<li class="buying-selling-title">' + ' <span>' + langue.buy + '</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + ' <span>' + langue.sale + '</span>' + '</li>';
|
||
|
|
var buyTotal = 0;
|
||
|
|
var saleTotal = 0;
|
||
|
|
var length = data.BUY_ORDERS.length < data.SELL_ORDERS.length ? data.SELL_ORDERS.length : data.BUY_ORDERS.length;
|
||
|
|
|
||
|
|
for(var i = 0; i < length; i++) {
|
||
|
|
if(data.BUY_ORDERS.length > i) {
|
||
|
|
buyTotal += data.BUY_ORDERS[i].totalLastNum;
|
||
|
|
depthData[1].push([data.BUY_ORDERS[i].unitPrice, saleTotal]);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(data.SELL_ORDERS.length > i) {
|
||
|
|
saleTotal += data.SELL_ORDERS[i].totalLastNum;
|
||
|
|
depthData[0].push([data.SELL_ORDERS[i].unitPrice, buyTotal]);
|
||
|
|
}
|
||
|
|
|
||
|
|
if(i < 20 && i < data.BUY_ORDERS.length && i < data.SELL_ORDERS.length) {
|
||
|
|
var li = document.createElement("li");
|
||
|
|
li.className = 'buying-selling-info';
|
||
|
|
li.innerHTML = '<span class="buy-sale">' + (i + 1) + '</span>' + '<span class="buy-sale-num">' + app.formatValue(data.BUY_ORDERS[i].totalNum) + '</span>' + '<p class="price">' + ' <span class="price-buy">' + app.formatValue(data.BUY_ORDERS[i].unitPrice) + '</span>' + ' <span class="price-sale">' + app.formatValue(data.SELL_ORDERS[i].unitPrice) + '</span>' + '</p>' + '<span class="buy-sale-num">' + app.formatValue(data.SELL_ORDERS[i].totalNum) + '</span>' + '<span class="buy-sale">' + (i + 1) + '</span>';
|
||
|
|
ul.appendChild(li);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if(!myCharts["container"]) {
|
||
|
|
myCharts["container"] = echarts.init(document.getElementById("container"));
|
||
|
|
}
|
||
|
|
|
||
|
|
myCharts["container"].setOption(option = options.getDepthOption(depthData), true);
|
||
|
|
listDepthChange = false;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 获取货币详情数据
|
||
|
|
* @param {Object} currencyName
|
||
|
|
*/
|
||
|
|
|
||
|
|
function initCurrencyInfo(currencyName) {
|
||
|
|
var url = app.currencyBaseUrl + 'currency/getCurrencyInfo?currencyName=' + currencyName;
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
headers: {
|
||
|
|
"locale": app.getLanguageLocalStorage() // 语种头部
|
||
|
|
|
||
|
|
},
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
for(var columnName in j.data) {
|
||
|
|
document.getElementById(columnName).innerText = j.data[columnName];
|
||
|
|
}
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 添加币对切换数据
|
||
|
|
*/
|
||
|
|
|
||
|
|
function initCoinData() {
|
||
|
|
var aHtml = '';
|
||
|
|
var popover = document.getElementById("popover");
|
||
|
|
var choiceId = 'basecoin-choice';
|
||
|
|
aHtml += '<a class="mui-control-item mui-active" href="#' + id + '">' + langue.favorites + '</a>';
|
||
|
|
var choiceDiv = document.createElement("div");
|
||
|
|
choiceDiv.id = id;
|
||
|
|
choiceDiv.className = 'mui-control-content mui-active';
|
||
|
|
var choiceUl = document.createElement("ul");
|
||
|
|
choiceUl.id = 'choice-market-ul';
|
||
|
|
choiceUl.className = 'mui-table-view';
|
||
|
|
choiceDiv.appendChild(choiceUl);
|
||
|
|
popover.appendChild(choiceDiv);
|
||
|
|
|
||
|
|
for(var basecoin in currencysObj) {
|
||
|
|
var id = 'basecoin-' + basecoin;
|
||
|
|
aHtml += '<a class="mui-control-item" href="#' + id + '">' + basecoin + '</a>';
|
||
|
|
var divEl = document.createElement("div");
|
||
|
|
divEl.id = id;
|
||
|
|
divEl.className = 'mui-control-content';
|
||
|
|
var ul = document.createElement("ul");
|
||
|
|
ul.className = 'mui-table-view';
|
||
|
|
|
||
|
|
for(var index in currencysObj[basecoin]) {
|
||
|
|
var li = getLi(currencysObj, basecoin, index, 'base-');
|
||
|
|
ul.appendChild(li);
|
||
|
|
liListener(li, currencysObj[basecoin][index]);
|
||
|
|
|
||
|
|
if(choiceMarketsObj[currencysObj[basecoin][index].marketObj.currencyPair]) {
|
||
|
|
var choiceLi = getLi(currencysObj, basecoin, index, 'choice-');
|
||
|
|
choiceUl.appendChild(choiceLi);
|
||
|
|
liListener(choiceLi, currencysObj[basecoin][index]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
divEl.appendChild(ul);
|
||
|
|
popover.appendChild(divEl);
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('basecoin-a').innerHTML = aHtml;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getLi(currencysObj, basecoin, index, id) {
|
||
|
|
var currencyPair = currencysObj[basecoin][index].marketObj.currencyPair;
|
||
|
|
var li = document.createElement("li");
|
||
|
|
li.id = id + 'currency-market-li-' + currencyPair;
|
||
|
|
li.className = 'mui-table-view-cell';
|
||
|
|
li.innerHTML += '<span class="popover-coin">' + currencysObj[basecoin][index].coin + '<span>/' + currencysObj[basecoin][index].basecoin + '</span>' + '</span>' + '<span id="' + id + 'currency-market-' + currencyPair + '" class="popover-price">' + app.formatValue(currencysObj[basecoin][index].marketObj.amount) + '</span>';
|
||
|
|
return li;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 币对切换监听
|
||
|
|
* @param {Object} li
|
||
|
|
* @param {Object} currencyObj
|
||
|
|
*/
|
||
|
|
|
||
|
|
function liListener(li, currencyObj) {
|
||
|
|
li.addEventListener('tap', function() {
|
||
|
|
firstTap = {};
|
||
|
|
initData(currencyObj);
|
||
|
|
cancel(); // chartTap(thisChartData);
|
||
|
|
|
||
|
|
Kvue.symbols = currencyObj.marketObj.currencyPair;
|
||
|
|
Kvue.install(Kvue.symbols, 15);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function initListRecord(currencyObj) {
|
||
|
|
var url = app.currencyBaseUrl + 'market/getHistoryList?currencyPair=' + marketObj.currencyPair;
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
var ul = document.getElementById("list-record");
|
||
|
|
ul.innerHTML = '<li class="transaction-title">' + ' <span>' + langue.date + '</span>' + ' <span>' + langue.buyOrSale + '</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + '</li>';
|
||
|
|
|
||
|
|
for(var index = 0; index < 20 && index < j.data.length; index++) {
|
||
|
|
setRecordLi(ul, j.data[index]);
|
||
|
|
}
|
||
|
|
|
||
|
|
listRecordChange = false;
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
setWebsocket(currencyObj);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setWebsocket(currencyObj) {
|
||
|
|
if(subscribeObj == null) {
|
||
|
|
var socket = new SockJS(app.currencyBaseUrl + "/websocket");
|
||
|
|
stompClient = Stomp.over(socket);
|
||
|
|
stompClient.connect({}, function(frame) {
|
||
|
|
subscribe(currencyObj);
|
||
|
|
});
|
||
|
|
|
||
|
|
socket.onclose = function() {
|
||
|
|
subscribeObj = null;
|
||
|
|
setWebsocket(currencyObj);
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
subscribeObj.unsubscribe();
|
||
|
|
subscribe(currencyObj);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function subscribe(currencyObj) {
|
||
|
|
var ul = document.getElementById("list-record"); //订阅讲座消息
|
||
|
|
|
||
|
|
subscribeObj = stompClient.subscribe('/topic/history/' + marketObj.currencyPair, function(greeting) {
|
||
|
|
var obj = JSON.parse(greeting.body);
|
||
|
|
console.log();
|
||
|
|
ul.innerHTML = '<li class="transaction-title">' + ' <span>' + langue.date + '</span>' + ' <span>' + langue.buyOrSale + '</span>' + ' <span>' + langue.price + '(' + currencyObj.basecoin + ')</span>' + ' <span>' + langue.amount + '(' + currencyObj.coin + ')</span>' + '</li>';
|
||
|
|
|
||
|
|
for(var index = 0; index < 20 && index < obj.length; index++) {
|
||
|
|
setRecordLi(ul, obj[index]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function setRecordLi(ul, record) {
|
||
|
|
var li = document.createElement("li");
|
||
|
|
li.className = 'transaction-info';
|
||
|
|
var buyOrSale;
|
||
|
|
var buyOrSaleClass;
|
||
|
|
|
||
|
|
if(record.tradingType == 'BUY') {
|
||
|
|
buyOrSale = langue.buy;
|
||
|
|
buyOrSaleClass = 'transaction-direction-buy';
|
||
|
|
} else {
|
||
|
|
buyOrSale = langue.sale;
|
||
|
|
buyOrSaleClass = 'transaction-direction-sale';
|
||
|
|
}
|
||
|
|
|
||
|
|
li.innerHTML = '<span class="transaction-time">' + record.createTime.substring(11) + '</span>' + '<span class="' + buyOrSaleClass + '">' + buyOrSale + '</span>' + '<span class="transaction-price">' + app.formatValue(record.makerPrice) + '</span>' + '<span class="transaction-num">' + app.formatValue(record.tradingNum) + '</span>';
|
||
|
|
ul.appendChild(li);
|
||
|
|
}
|
||
|
|
|
||
|
|
function listener() {
|
||
|
|
document.getElementById("choice").addEventListener("tap", function() {
|
||
|
|
console.log("@2323")
|
||
|
|
marketChoice(this);
|
||
|
|
});
|
||
|
|
// document.getElementById("T").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=MINUTE&timeNumber=1¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main1',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "T"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("15M").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=MINUTE&timeNumber=15¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main2',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "15M"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("1H").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=HOUR&timeNumber=1¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main3',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "1H"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("4H").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=HOUR&timeNumber=4¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main4',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "4H"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// document.getElementById("1D").addEventListener("tap", function() {
|
||
|
|
// var url = app.currencyBaseUrl + 'market/query?timeType=DAY&timeNumber=1¤cyPair=';
|
||
|
|
// var chartData = {
|
||
|
|
// myChartId: 'main5',
|
||
|
|
// url: url,
|
||
|
|
// chartType: "1D"
|
||
|
|
// };
|
||
|
|
// chartTap(chartData);
|
||
|
|
// });
|
||
|
|
// 弹出菜单点击事件
|
||
|
|
document.getElementById('icon-popover').addEventListener('tap', function() {
|
||
|
|
if(isOpen) {
|
||
|
|
cancel();
|
||
|
|
} else {
|
||
|
|
document.getElementById('popover').style.transform = 'translate(0,0)';
|
||
|
|
var bg = document.getElementById("bg"); //获取灰色背景蒙版
|
||
|
|
|
||
|
|
bg.style.display = "block";
|
||
|
|
isOpen = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
document.getElementById("buy-currency").addEventListener("tap", function() {
|
||
|
|
buyOrSale('BUY');
|
||
|
|
});
|
||
|
|
document.getElementById("sale-currency").addEventListener("tap", function() {
|
||
|
|
buyOrSale('SELL');
|
||
|
|
});
|
||
|
|
document.getElementById('bg').addEventListener('tap', function() {
|
||
|
|
cancel();
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* 监听行情改变事件
|
||
|
|
*/
|
||
|
|
|
||
|
|
window.addEventListener("marketChange", function(event) {
|
||
|
|
marketChange(event.detail);
|
||
|
|
});
|
||
|
|
/**
|
||
|
|
* 监听行情改变事件
|
||
|
|
*/
|
||
|
|
|
||
|
|
window.addEventListener("depthChange", function(event) {
|
||
|
|
var changeMarketObj = event.detail;
|
||
|
|
|
||
|
|
if(changeMarketObj.currencyPair == marketObj.currencyPair) {
|
||
|
|
var currencys = changeMarketObj.currencyPair.split('-');
|
||
|
|
var currencyObj = {
|
||
|
|
'marketObj': changeMarketObj,
|
||
|
|
'title': currencys[0] + '/' + currencys[1],
|
||
|
|
'basecoin': currencys[1],
|
||
|
|
'coin': currencys[0] //深度数据
|
||
|
|
};
|
||
|
|
initDepth(currencyObj);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function marketChoice(_this) {
|
||
|
|
var currencyPair = marketObj.currencyPair;
|
||
|
|
|
||
|
|
if(choiceMarketsObj[currencyPair]) {
|
||
|
|
delete choiceMarketsObj[currencyPair];
|
||
|
|
_this.style.color = '#999999';
|
||
|
|
document.getElementById('choice-currency-market-li-' + currencyPair).remove();
|
||
|
|
} else {
|
||
|
|
choiceMarketsObj[currencyPair] = true;
|
||
|
|
_this.style.color = '#5CACEE';
|
||
|
|
var currencys = currencyPair.split('-');
|
||
|
|
var choiceLi = getLi(currencysObj, currencys[1], currencys[0], 'choice-');
|
||
|
|
document.getElementById('choice-market-ul').appendChild(choiceLi);
|
||
|
|
liListener(choiceLi, currencysObj[currencys[1]][currencys[0]]);
|
||
|
|
}
|
||
|
|
app.setLocalStorage(app.marketChoiceKey, choiceMarketsObj);
|
||
|
|
var marketView = plus.webview.getWebviewById('html/market/market.html');
|
||
|
|
mui.fire(marketView, "marketChoice", currencyPair);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 跳转到购买或者出售界面
|
||
|
|
*/
|
||
|
|
|
||
|
|
function buyOrSale(type) {
|
||
|
|
var url = 'html/cct/html/cct_index.html';
|
||
|
|
var currencys = marketObj.currencyPair.split('-');
|
||
|
|
console.log(JSON.stringify(currencys))
|
||
|
|
var data = {
|
||
|
|
type: type,
|
||
|
|
coin: currencys[0],
|
||
|
|
unit: currencys[1]
|
||
|
|
};
|
||
|
|
var cctView = plus.webview.getWebviewById(url);
|
||
|
|
mui.fire(cctView, "tapTypeBtn", data);
|
||
|
|
var data2 = {
|
||
|
|
url: url
|
||
|
|
};
|
||
|
|
var indexView = plus.webview.getWebviewById(plus.runtime.appid);
|
||
|
|
mui.fire(indexView, "viewTab", data2);
|
||
|
|
var self = plus.webview.currentWebview();
|
||
|
|
self.close();
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 行情数据改变
|
||
|
|
* @param {Object} changeMarketObj
|
||
|
|
*/
|
||
|
|
|
||
|
|
function marketChange(changeMarketObj) {
|
||
|
|
var currencys = changeMarketObj.currencyPair.split('-');
|
||
|
|
currencysObj[currencys[1]][currencys[0]] = changeMarketObj;
|
||
|
|
|
||
|
|
if(changeMarketObj.currencyPair == marketObj.currencyPair) {
|
||
|
|
marketObj = changeMarketObj;
|
||
|
|
var currencyObj = {
|
||
|
|
'marketObj': changeMarketObj,
|
||
|
|
'title': currencys[0] + '/' + currencys[1],
|
||
|
|
'basecoin': currencys[1],
|
||
|
|
'coin': currencys[0] //改变行情显示数据
|
||
|
|
|
||
|
|
};
|
||
|
|
initInfoData(currencyObj); //深度数据
|
||
|
|
|
||
|
|
initDepth(currencyObj);
|
||
|
|
}
|
||
|
|
|
||
|
|
var el = document.getElementById("currency-market-" + changeMarketObj.currencyPair);
|
||
|
|
|
||
|
|
if(el) {
|
||
|
|
el.innerText = app.formatValue(changeMarketObj.amoount);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* K线视图切换点击
|
||
|
|
* @param {Object} chartData
|
||
|
|
*/
|
||
|
|
//function chartTap(chartData) {
|
||
|
|
// thisChartData = chartData;
|
||
|
|
// if(firstTap[chartData.chartType]) return;
|
||
|
|
// firstTap[chartData.chartType] = true;
|
||
|
|
// if(chartData.chartType == 'T') {
|
||
|
|
// setTChart(chartData.url + marketObj.currencyPair);
|
||
|
|
// } else {
|
||
|
|
// setKChart(chartData.myChartId, chartData.url + marketObj.currencyPair, chartData.chartType);
|
||
|
|
// }
|
||
|
|
//}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取K线视图数据
|
||
|
|
* @param {Object} myChartId
|
||
|
|
* @param {Object} url
|
||
|
|
* @param {Object} chartType
|
||
|
|
*/
|
||
|
|
//function setKChart(myChartId, url, chartType) {
|
||
|
|
// setTimeout(function(){
|
||
|
|
// var data = splitData(datas.datas.data);
|
||
|
|
// var myChart = echarts.init(document.getElementById(myChartId));
|
||
|
|
// myChart.setOption(option = options.getKOption(data,chartType),true);
|
||
|
|
// },500);
|
||
|
|
// plus.nativeUI.showWaiting();
|
||
|
|
// mui.ajax(url, {
|
||
|
|
// type: "GET",
|
||
|
|
// dataType: "json",
|
||
|
|
// success: function(j) {
|
||
|
|
// if(j.code == 200) {
|
||
|
|
// var data = splitData(j.data);
|
||
|
|
// if(!myCharts[myChartId]) {
|
||
|
|
// myCharts[myChartId] = echarts.init(document.getElementById(myChartId));
|
||
|
|
// }
|
||
|
|
// myCharts[myChartId].setOption(option = options.getKOption(data, chartType), true);
|
||
|
|
// plus.nativeUI.closeWaiting();
|
||
|
|
// } else {
|
||
|
|
// plus.nativeUI.closeWaiting();
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// error: function(xhr, type, errorThrown) {
|
||
|
|
// plus.nativeUI.closeWaiting();
|
||
|
|
// console.log(type)
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
//}
|
||
|
|
|
||
|
|
function setTChart(url) {
|
||
|
|
// setTimeout(function(){
|
||
|
|
// var data = splitTData(datas.datas.data);
|
||
|
|
// var myChart = echarts.init(document.getElementById('main1'));
|
||
|
|
// myChart.setOption(option = options.getTOption(data),true);
|
||
|
|
// },500);
|
||
|
|
plus.nativeUI.showWaiting();
|
||
|
|
mui.ajax(url, {
|
||
|
|
type: "GET",
|
||
|
|
dataType: "json",
|
||
|
|
success: function(j) {
|
||
|
|
if(j.code == 200) {
|
||
|
|
var data = splitTData(j.data);
|
||
|
|
|
||
|
|
if(!myCharts['T']) {
|
||
|
|
myCharts['T'] = echarts.init(document.getElementById('main1'));
|
||
|
|
}
|
||
|
|
|
||
|
|
myCharts['T'].setOption(option = options.getTOption(data), true);
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
} else {}
|
||
|
|
},
|
||
|
|
error: function error(xhr, type, errorThrown) {
|
||
|
|
plus.nativeUI.closeWaiting();
|
||
|
|
console.log(type);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function splitData(data) {
|
||
|
|
var categoryData = [];
|
||
|
|
var values = [];
|
||
|
|
var volumes = [];
|
||
|
|
var lastIndex = data.length - 1;
|
||
|
|
|
||
|
|
for(var i = 0; i < data.length; i++) {
|
||
|
|
categoryData.push(data[i].date);
|
||
|
|
var amount = [];
|
||
|
|
amount[0] = data[i].open;
|
||
|
|
amount[1] = data[i].close;
|
||
|
|
amount[2] = data[i].lowest;
|
||
|
|
amount[3] = data[i].highest;
|
||
|
|
amount[4] = data[i].total;
|
||
|
|
values.push(amount);
|
||
|
|
var volume = [];
|
||
|
|
volume[0] = i;
|
||
|
|
volume[1] = amount[4];
|
||
|
|
volume[2] = amount[0] > amount[1] ? 1 : -1;
|
||
|
|
volumes.push(volume);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
categoryData: categoryData,
|
||
|
|
values: values,
|
||
|
|
volumes: volumes
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function splitTData(data) {
|
||
|
|
var categoryData = [];
|
||
|
|
var values = [];
|
||
|
|
var volumes = [];
|
||
|
|
var lastIndex = data.length - 1;
|
||
|
|
|
||
|
|
for(var i = 0; i < data.length; i++) {
|
||
|
|
categoryData.push(data[i].date);
|
||
|
|
values[i] = data[i].close;
|
||
|
|
volumes.push(data[i].total);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
categoryData: categoryData,
|
||
|
|
values: values,
|
||
|
|
volumes: volumes
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function setPercent(marketObj) {
|
||
|
|
var percentEl = document.getElementById('coin-gain');
|
||
|
|
|
||
|
|
if(marketObj.percent < 0) {
|
||
|
|
percentEl.innerText = parseFloat(marketObj.percent * 100).toFixed(2) + '%';
|
||
|
|
percentEl.style.color = '#FD595D';
|
||
|
|
} else {
|
||
|
|
percentEl.innerText = '+' + parseFloat(marketObj.percent * 100).toFixed(2) + '%';
|
||
|
|
percentEl.style.color = '#4CD49B';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 隐藏币对选择弹框
|
||
|
|
*/
|
||
|
|
|
||
|
|
function cancel() {
|
||
|
|
isOpen = false;
|
||
|
|
var bg = document.getElementById("bg"); //获取灰色背景蒙版
|
||
|
|
|
||
|
|
var popover = document.getElementById("popover"); //获取菜单弹出框
|
||
|
|
|
||
|
|
bg.style.display = "none";
|
||
|
|
popover.style.transform = 'translate(-100%,0)';
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|