ltlzx
/
jiaoyi_zhou
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增选择时间

master
ltlzx 4 years ago
parent
c13e6bf1ec
commit
e194c643d9
2 changed files with 357 additions and 231 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/views/option/VDatafeed.js
  2. 579
      src/views/option/kline.vue

9
src/views/option/VDatafeed.js
View File

@ -64,7 +64,7 @@ class VDatafeed {
return { return {
supports_search: false, supports_search: false,
supports_group_request: false, supports_group_request: false,
supported_resolutions: ["5", "15", "30", "60", "1D", "1W", "1M"], supported_resolutions: ["1","5", "15", "30", "60", "1D", "1W", "1M"],
supports_marks: true, supports_marks: true,
supports_timescale_marks: true, supports_timescale_marks: true,
supports_time: true supports_time: true
@ -90,12 +90,15 @@ class VDatafeed {
//设置精度 100表示保留两位小数 1000三位 10000四位 //设置精度 100表示保留两位小数 1000三位 10000四位
'pricescale': 10000, 'pricescale': 10000,
'ticker': this.self.symbol.toLocaleUpperCase(), 'ticker': this.self.symbol.toLocaleUpperCase(),
intraday_multipliers: ["5", intraday_multipliers: [
"1",
"5",
"15", "15",
"30", "30",
"60", "60",
"240",], "240",],
'supported_resolutions': [ 'supported_resolutions': [
"1",
"5", "5",
"15", "15",
"30", "30",
@ -107,4 +110,4 @@ class VDatafeed {
}; };
} }
} }
export default VDatafeed export default VDatafeed

579
src/views/option/kline.vue
View File

@ -44,291 +44,414 @@ export default {
}, },
watch: { watch: {
activeCoin(n, o) { activeCoin(n, o) {
if (!n) return; if (!n) return;
let boo = this.contract let boo = this.contract
? n.pair_name != o.pair_name ? n.pair_name != o.pair_name
: n.pair_time_name != o.pair_time_name; : n.pair_time_name != o.pair_time_name;
if (boo) { if (boo) {
// 获取准备取消订阅的消息的精度值 // 获取准备取消订阅的消息的精度值
let timer = this.timer; let timer = this.timer;
this.page[n.pair_name] = 1; this.page[n.pair_name] = 1;
this.TView.setSymbol(n.pair_name, this.timer); this.TView.setSymbol(n.pair_name, this.timer);
// 取消订阅 // 取消订阅
if (n.pair_id != o.pair_id) { if (n.pair_id != o.pair_id) {
this.unsub(o.pair_id, timer); this.unsub(o.pair_id, timer);
}
} }
}
}, },
symbol(n, o) { symbol(n, o) {
if (n != o && o) { if (n != o && o) {
this.unsub(this.ajaxTv.getSymbol(o), this.timer); this.unsub(this.ajaxTv.getSymbol(o), this.timer);
} }
}, },
}, },
computed: { computed: {
lang() { lang() {
let local; let local;
if (localStorage.lang) { if (localStorage.lang) {
if (localStorage.lang == "tw") { if (localStorage.lang == "tw") {
local = "zh_TW"; local = "zh_TW";
} else if (localStorage.lang == "cn") { } else if (localStorage.lang == "cn") {
local = "zh"; local = "zh";
} else if (localStorage.lang == "kor") { } else if (localStorage.lang == "kor") {
local = "ko"; local = "ko";
} else if (localStorage.lang == "jp") { } else if (localStorage.lang == "jp") {
local = "ja"; local = "ja";
} else if (localStorage.lang == "de") { } else if (localStorage.lang == "de") {
local = "de_DE"; local = "de_DE";
} else if (localStorage.lang == "fra") { } else if (localStorage.lang == "fra") {
local = "fr"; local = "fr";
} else if (localStorage.lang == "it") { } else if (localStorage.lang == "it") {
local = "it"; local = "it";
} else if (localStorage.lang == "pt") { } else if (localStorage.lang == "pt") {
local = "pt"; local = "pt";
} else if (localStorage.lang == "spa") { } else if (localStorage.lang == "spa") {
local = "es"; local = "es";
} else if (localStorage.lang == "en") { } else if (localStorage.lang == "en") {
local = "en"; local = "en";
}else { }else {
local = "en"; local = "en";
}
} }
} return local;
return local;
}, },
symbol() { symbol() {
return this.activeCoin.pair_name; return this.activeCoin.pair_name;
}, },
...mapState({ ...mapState({
theme: "theme", theme: "theme",
}), }),
ajaxTv() { ajaxTv() {
return this.contract ? contractAjax : exchangeAjax; return this.contract ? contractAjax : exchangeAjax;
}, },
msg() { msg() {
return `${this.ajaxTv.msg}${this.ajaxTv.getSymbol( return `${this.ajaxTv.msg}${this.ajaxTv.getSymbol(
this.symbol this.symbol
)}_${this.resolution(this.interval)}`; )}_${this.resolution(this.interval)}`;
}, },
}, },
data() { data() {
return { return {
TView: undefined, TView: undefined,
ws: undefined, ws: undefined,
onLoadedCallback: undefined, onLoadedCallback: undefined,
onRealtimeCallback: undefined, onRealtimeCallback: undefined,
timer: "15", // timer: "15",
sub: "", timer: "1",
isCreateSocket: false, sub: "",
page: {}, isCreateSocket: false,
page: {},
tt:undefined
}; };
}, },
methods: { methods: {
// 链接socket // 链接socket
linkSocket(call) { linkSocket(call) {
const ws = new Socket(this.wsUrl); const ws = new Socket(this.wsUrl);
ws.on("open", () => { ws.on("open", () => {
this.ws = ws; this.ws = ws;
call && call(); call && call();
}); });
ws.on("message", (res) => { ws.on("message", (res) => {
let { data, msg, code, sub, type, status, req, cmd } = res; let { data, msg, code, sub, type, status, req, cmd } = res;
if (sub == this.sub && this.onRealtimeCallback) { if (sub == this.sub && this.onRealtimeCallback) {
this.onRealtimeCallback(this.getMap(data)); this.onRealtimeCallback(this.getMap(data));
} else if (type == "ping" || cmd == "ping") { } else if (type == "ping" || cmd == "ping") {
this.ws.send({ this.ws.send({
cmd: "pong", cmd: "pong",
}); });
} }
}); });
}, },
// 取消订阅 // 取消订阅
unsub(pair_id, timer) { unsub(pair_id, timer) {
let msgObj = { let msgObj = {
cmd: "unsub", cmd: "unsub",
msg: `${this.ajaxTv.msg}${pair_id}_${this.resolution(timer)}`, msg: `${this.ajaxTv.msg}${pair_id}_${this.resolution(timer)}`,
}; };
this.ws.send(msgObj); this.ws.send(msgObj);
}, },
getConfig() { getConfig() {
return {}; return {};
}, },
getSymbol() { getSymbol() {
return {}; return {};
}, },
getMap(data) { getMap(data) {
return { return {
time: data.id * 1000, time: data.id * 1000,
close: data.close, close: data.close,
open: data.open, open: data.open,
high: data.high, high: data.high,
low: data.low, low: data.low,
volume: data.vol, volume: data.vol,
}; };
}, },
resolution(resolution) { resolution(resolution) {
let T = ""; let T = "";
if (isNaN(resolution * 1)) { if (isNaN(resolution * 1)) {
T = resolution T = resolution
.replace("D", "day") .replace("D", "day")
.replace("W", "week") .replace("W", "week")
.replace("M", "mon"); .replace("M", "mon");
} else {
if (resolution > 60) {
T = Math.floor(resolution / 60) + "hours";
} else { } else {
T = resolution + "min"; if (resolution > 60) {
T = Math.floor(resolution / 60) + "hours";
} else {
T = resolution + "min";
}
} }
} return T;
return T;
}, },
// 解压 // 解压
unzip(b64Data) { unzip(b64Data) {
let u8 = window.atob(b64Data); let u8 = window.atob(b64Data);
let jiya = window.pako.inflate(u8) let jiya = window.pako.inflate(u8)
let str = this.Uint8ArrayToString(jiya); let str = this.Uint8ArrayToString(jiya);
return JSON.parse(str); return JSON.parse(str);
}, },
Uint8ArrayToString(fileData) { Uint8ArrayToString(fileData) {
var dataString = ""; var dataString = "";
for (var i = 0; i < fileData.length; i++) { for (var i = 0; i < fileData.length; i++) {
dataString += String.fromCharCode(fileData[i]); dataString += String.fromCharCode(fileData[i]);
} }
return dataString; return dataString;
}, },
getBars( getBars(
symbolInfo, symbolInfo,
resolution, resolution,
rangeStartDate, rangeStartDate,
rangeEndDate, rangeEndDate,
onLoadedCallback, onLoadedCallback,
onErrorCallback onErrorCallback
) { ) {
this.page[this.symbol] = this.page[this.symbol] || 1; this.page[this.symbol] = this.page[this.symbol] || 1;
let page = this.page[this.symbol] > 3 ? 3 : this.page[this.symbol]; let page = this.page[this.symbol] > 3 ? 3 : this.page[this.symbol];
let data = { let data = {
symbol: this.ajaxTv.getSymbol(symbolInfo.name), symbol: this.ajaxTv.getSymbol(symbolInfo.name),
period: this.resolution(resolution), period: this.resolution(resolution),
form: rangeStartDate, form: rangeStartDate,
to: rangeEndDate, to: rangeEndDate,
size: page * 200, size: page * 200,
zip: 1, zip: 1,
}; };
this.onLoadedCallback = onLoadedCallback; this.onLoadedCallback = onLoadedCallback;
// 检测接口币种是不是后台返回的 // 检测接口币种是不是后台返回的
if (!this.activeCoin.pair_name) { if (!this.activeCoin.pair_name) {
onLoadedCallback([]);
return;
}
// 取消订阅
if (this.timer && this.timer != resolution) {
this.unsub(
this.ajaxTv.getSymbol(this.activeCoin.pair_name),
this.timer
);
} else {
}
this.timer = resolution;
this.ajaxTv.getKline(data).then((res) => {
let arr = this.unzip(res.data).map((item) => {
return this.getMap(item);
});
this.page[this.symbol]++;
onLoadedCallback(arr);
setTimeout(() => {
if (this.page[this.symbol] > 3) {
onLoadedCallback([]); onLoadedCallback([]);
} return;
}, 60); }
}); // 取消订阅
if (this.timer && this.timer != resolution) {
// 发送消息 this.unsub(
let msgObj = { this.ajaxTv.getSymbol(this.activeCoin.pair_name),
cmd: "sub", this.timer
msg: `${this.ajaxTv.msg}${data.symbol}_${data.period}`, );
};
this.sub = msgObj.msg;
let send = (msgObj) => {
if (this.ws) {
this.ws.send(msgObj);
} else { } else {
if (this.isCreateSocket) { }
this.timer = resolution;
this.ajaxTv.getKline(data).then((res) => {
let arr = this.unzip(res.data).map((item) => {
return this.getMap(item);
});
this.page[this.symbol]++;
onLoadedCallback(arr);
setTimeout(() => { setTimeout(() => {
send(msgObj); if (this.page[this.symbol] > 3) {
}, 200); onLoadedCallback([]);
return; }
} }, 60);
this.isCreateSocket = true; });
this.linkSocket(() => {
this.isCreateSocket = false; // 发送消息
let msgObj = {
cmd: "sub",
msg: `${this.ajaxTv.msg}${data.symbol}_${data.period}`,
};
this.sub = msgObj.msg;
let send = (msgObj) => {
if (this.ws) {
this.ws.send(msgObj); this.ws.send(msgObj);
}); } else {
} if (this.isCreateSocket) {
}; setTimeout(() => {
send(msgObj); send(msgObj);
}, 200);
return;
}
this.isCreateSocket = true;
this.linkSocket(() => {
this.isCreateSocket = false;
this.ws.send(msgObj);
});
}
};
send(msgObj);
}, },
subscribeBars( subscribeBars(
symbolInfo, symbolInfo,
resolution, resolution,
onRealtimeCallback, onRealtimeCallback,
subscriberUID, subscriberUID,
onResetCacheNeededCallback onResetCacheNeededCallback
) { ) {
this.onRealtimeCallback = onRealtimeCallback; this.onRealtimeCallback = onRealtimeCallback;
if (!this.activeCoin.pair_name) { if (!this.activeCoin.pair_name) {
setTimeout(() => { setTimeout(() => {
onResetCacheNeededCallback(); onResetCacheNeededCallback();
}, 100); }, 100);
} }
}, },
initView() { initView() {
let Tdata = new VDatafeed(this); let _this = this;
this.TView = new TradingView.widget({ let Tdata = new VDatafeed(this);
width: "100%", let widget=(_this.TView = new TradingView.widget({
height: 590, width: "100%",
interval: this.timer, height: 590,
timezone: "Asia/Shanghai", interval: _this.timer,
theme: "light", // 自定义主题 // timezone: "Asia/Shanghai",
style: "1", timezone: "America/Toronto",
library_path: "/static/Kline/charting_library/", theme: "light", // 自定义主题
datafeed: Tdata, style: "1",
locale: this.lang, library_path: "/static/Kline/charting_library/",
toolbar_bg: this.theme == "light" ? "#f1f3f6" : "#222e3d", datafeed: Tdata,
enable_publishing: false, locale: _this.lang,
withdateranges: true, toolbar_bg: _this.theme == "light" ? "#f1f3f6" : "#222e3d",
hide_side_toolbar: false, enable_publishing: false,
allow_symbol_change: true, withdateranges: true,
show_popup_button: true, hide_side_toolbar: false,
popup_width: "1000", allow_symbol_change: true,
popup_height: "650", show_popup_button: true,
container_id: "tradingview_1355aw2", popup_width: "1000",
disabled_features: [ popup_height: "650",
"header_symbol_search", container_id: "tradingview_1355aw2",
"header_compare", disabled_features: [
"volume_force_overlay", "header_symbol_search",
"header_widget_dom_node", // "widget_logo",
'timeframes_toolbar', "header_compare",
"control_bar", "volume_force_overlay",
"main_series_scale_menu", 'timeframes_toolbar',
"header_resolutions", "control_bar",
"legend_context_menu", "main_series_scale_menu",
"symbol_search_hot_key", "header_resolutions",
"symbol_info", "legend_context_menu",
"pane_context_menu", "symbol_search_hot_key",
"header_widget_dom_node", "symbol_info",
'timeframes_toolbar', "pane_context_menu",
], // "header_widget_dom_node",
supported_resolutions: ["5", "15", "30", "60", "240", "1D", "1W", "1M"], 'timeframes_toolbar',
overrides: tvStyle[this.theme], ],
custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${ // enabled_features:['header_indicators'],
this.theme == "light" ? "white" : "black" supported_resolutions: ["1","5", "15", "30", "60", "240", "1D", "1W", "1M"],
}.css`, overrides: tvStyle[_this.theme],
}); custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${
_this.theme == "light" ? "white" : "black"
}.css`,
drawings_access: {
type: "black",
tools: [
{ name: "Trend Line", grayed: true },
{ name: "Trend Angle", grayed: true }
]
},
}));
widget.onChartReady(function () {
let buttonArr = [
{
title: "1" + _this.$t("exchange.min"),
resolution: "1",
chartType: 1
},
{
title: "5" + _this.$t("exchange.min"),
resolution: "5",
chartType: 1
},
{
title: "15" + _this.$t("exchange.min"),
resolution: "15",
chartType: 1
},
{
title: "30" + _this.$t("exchange.min"),
resolution: "30",
chartType: 1
},
{
title: "1" + _this.$t("exchange.hour"),
resolution: "60",
chartType: 1
},
{
title: "1" + _this.$t("exchange.day"),
resolution: "1D",
chartType: 1
},
{
title: "1" + _this.$t("exchange.week"),
resolution: "1W",
chartType: 1
},
{
title: "1" + _this.$t("exchange.month"),
resolution: "1M",
chartType: 1
}
];
let btn = {};
let nowTime = "";
buttonArr.forEach((v, i) => {
let button = widget.createButton();
button.attr("title", v.title).addClass("my-date").text(v.title);
if (v.resolution === _this.timer) {
button.css({
color: "#5786d2",
"border-bottom": "1px solid #5786d2",
});
// localStorage.setItem("tim", v.resolution);
}
btn = button.on("click", function (e) {
$(this).parents(".left").children().find(".my-date").removeAttr("style");
handleClick(e, v.resolution);
button.css({
color: "#5786d2",
"border-bottom": "1px solid #5786d2",
});
// _this.$store.commit("upType", v.type);
localStorage.setItem("tim", v.resolution);
widget.chart().setChartType(v.chartType); //改变K线类型
});
});
let handleClick = (e, value) => {
_this.setSymbol = function (symbol, value) {
gh.chart().setSymbol(symbol, value);
};
widget.chart().setResolution(value, function onReadyCallback() {}); //改变分辨率
$(e.target)
.addClass("mydate")
.closest("div.space-single")
.siblings("div.space-single")
.find("div.button")
.removeClass("mydate");
};
widget.chart().createStudy(
"Moving Average",
false,
true,
[5, "close", 0],
null,
{
"Plot.color": "#e843da",
}
);
widget.chart().createStudy(
"Moving Average",
false,
true,
[10, "close", 0],
null,
{
"Plot.color": "#53b987",
}
);
widget.chart().createStudy(
"Moving Average",
false,
true,
[30, "close", 0],
null,
{
"Plot.color": "#ff231f",
}
);
});
}, },
}, },
mounted() { mounted() {
this.initView(); this.initView();
}, },
}; };
</script> </script>

Write Preview
Loading…
Cancel
Save