From e194c643d9ea253cf400d04def39f571bcbe8ac5 Mon Sep 17 00:00:00 2001 From: ltlzx <942659938@qq.com> Date: Fri, 15 Jul 2022 16:54:08 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=80=89=E6=8B=A9=E6=97=B6?= =?UTF-8?q?=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/option/VDatafeed.js | 9 +- src/views/option/kline.vue | 579 +++++++++++++++++++++------------- 2 files changed, 357 insertions(+), 231 deletions(-) diff --git a/src/views/option/VDatafeed.js b/src/views/option/VDatafeed.js index 5c4a3e7..88ef34f 100644 --- a/src/views/option/VDatafeed.js +++ b/src/views/option/VDatafeed.js @@ -64,7 +64,7 @@ class VDatafeed { return { supports_search: 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_timescale_marks: true, supports_time: true @@ -90,12 +90,15 @@ class VDatafeed { //设置精度 100表示保留两位小数 1000三位 10000四位 'pricescale': 10000, 'ticker': this.self.symbol.toLocaleUpperCase(), - intraday_multipliers: ["5", + intraday_multipliers: [ + "1", + "5", "15", "30", "60", "240",], 'supported_resolutions': [ + "1", "5", "15", "30", @@ -107,4 +110,4 @@ class VDatafeed { }; } } -export default VDatafeed \ No newline at end of file +export default VDatafeed diff --git a/src/views/option/kline.vue b/src/views/option/kline.vue index eb58c29..9266b64 100644 --- a/src/views/option/kline.vue +++ b/src/views/option/kline.vue @@ -44,291 +44,414 @@ export default { }, watch: { activeCoin(n, o) { - if (!n) return; - let boo = this.contract - ? n.pair_name != o.pair_name - : n.pair_time_name != o.pair_time_name; - if (boo) { - // 获取准备取消订阅的消息的精度值 - let timer = this.timer; - this.page[n.pair_name] = 1; - this.TView.setSymbol(n.pair_name, this.timer); - // 取消订阅 - if (n.pair_id != o.pair_id) { - this.unsub(o.pair_id, timer); + if (!n) return; + let boo = this.contract + ? n.pair_name != o.pair_name + : n.pair_time_name != o.pair_time_name; + if (boo) { + // 获取准备取消订阅的消息的精度值 + let timer = this.timer; + this.page[n.pair_name] = 1; + this.TView.setSymbol(n.pair_name, this.timer); + // 取消订阅 + if (n.pair_id != o.pair_id) { + this.unsub(o.pair_id, timer); + } } - } }, symbol(n, o) { - if (n != o && o) { - this.unsub(this.ajaxTv.getSymbol(o), this.timer); - } + if (n != o && o) { + this.unsub(this.ajaxTv.getSymbol(o), this.timer); + } }, }, computed: { lang() { - let local; - if (localStorage.lang) { - if (localStorage.lang == "tw") { - local = "zh_TW"; - } else if (localStorage.lang == "cn") { - local = "zh"; - } else if (localStorage.lang == "kor") { - local = "ko"; - } else if (localStorage.lang == "jp") { - local = "ja"; - } else if (localStorage.lang == "de") { - local = "de_DE"; - } else if (localStorage.lang == "fra") { - local = "fr"; - } else if (localStorage.lang == "it") { - local = "it"; - } else if (localStorage.lang == "pt") { - local = "pt"; - } else if (localStorage.lang == "spa") { - local = "es"; - } else if (localStorage.lang == "en") { - local = "en"; - }else { - local = "en"; + let local; + if (localStorage.lang) { + if (localStorage.lang == "tw") { + local = "zh_TW"; + } else if (localStorage.lang == "cn") { + local = "zh"; + } else if (localStorage.lang == "kor") { + local = "ko"; + } else if (localStorage.lang == "jp") { + local = "ja"; + } else if (localStorage.lang == "de") { + local = "de_DE"; + } else if (localStorage.lang == "fra") { + local = "fr"; + } else if (localStorage.lang == "it") { + local = "it"; + } else if (localStorage.lang == "pt") { + local = "pt"; + } else if (localStorage.lang == "spa") { + local = "es"; + } else if (localStorage.lang == "en") { + local = "en"; + }else { + local = "en"; + } } - } - return local; + return local; }, symbol() { - return this.activeCoin.pair_name; + return this.activeCoin.pair_name; }, ...mapState({ - theme: "theme", + theme: "theme", }), ajaxTv() { - return this.contract ? contractAjax : exchangeAjax; + return this.contract ? contractAjax : exchangeAjax; }, msg() { - return `${this.ajaxTv.msg}${this.ajaxTv.getSymbol( - this.symbol - )}_${this.resolution(this.interval)}`; + return `${this.ajaxTv.msg}${this.ajaxTv.getSymbol( + this.symbol + )}_${this.resolution(this.interval)}`; }, }, data() { return { - TView: undefined, - ws: undefined, - onLoadedCallback: undefined, - onRealtimeCallback: undefined, - timer: "15", - sub: "", - isCreateSocket: false, - page: {}, + TView: undefined, + ws: undefined, + onLoadedCallback: undefined, + onRealtimeCallback: undefined, + // timer: "15", + timer: "1", + sub: "", + isCreateSocket: false, + page: {}, + tt:undefined }; }, methods: { // 链接socket linkSocket(call) { - const ws = new Socket(this.wsUrl); - ws.on("open", () => { - this.ws = ws; - call && call(); - }); - ws.on("message", (res) => { - let { data, msg, code, sub, type, status, req, cmd } = res; - if (sub == this.sub && this.onRealtimeCallback) { - this.onRealtimeCallback(this.getMap(data)); - } else if (type == "ping" || cmd == "ping") { - this.ws.send({ - cmd: "pong", - }); - } - }); + const ws = new Socket(this.wsUrl); + ws.on("open", () => { + this.ws = ws; + call && call(); + }); + ws.on("message", (res) => { + let { data, msg, code, sub, type, status, req, cmd } = res; + if (sub == this.sub && this.onRealtimeCallback) { + this.onRealtimeCallback(this.getMap(data)); + } else if (type == "ping" || cmd == "ping") { + this.ws.send({ + cmd: "pong", + }); + } + }); }, // 取消订阅 unsub(pair_id, timer) { - let msgObj = { - cmd: "unsub", - msg: `${this.ajaxTv.msg}${pair_id}_${this.resolution(timer)}`, - }; - this.ws.send(msgObj); + let msgObj = { + cmd: "unsub", + msg: `${this.ajaxTv.msg}${pair_id}_${this.resolution(timer)}`, + }; + this.ws.send(msgObj); }, getConfig() { - return {}; + return {}; }, getSymbol() { - return {}; + return {}; }, getMap(data) { - return { - time: data.id * 1000, - close: data.close, - open: data.open, - high: data.high, - low: data.low, - volume: data.vol, - }; + return { + time: data.id * 1000, + close: data.close, + open: data.open, + high: data.high, + low: data.low, + volume: data.vol, + }; }, resolution(resolution) { - let T = ""; - if (isNaN(resolution * 1)) { - T = resolution - .replace("D", "day") - .replace("W", "week") - .replace("M", "mon"); - } else { - if (resolution > 60) { - T = Math.floor(resolution / 60) + "hours"; + let T = ""; + if (isNaN(resolution * 1)) { + T = resolution + .replace("D", "day") + .replace("W", "week") + .replace("M", "mon"); } else { - T = resolution + "min"; + if (resolution > 60) { + T = Math.floor(resolution / 60) + "hours"; + } else { + T = resolution + "min"; + } } - } - return T; + return T; }, // 解压 unzip(b64Data) { - let u8 = window.atob(b64Data); - let jiya = window.pako.inflate(u8) - let str = this.Uint8ArrayToString(jiya); - return JSON.parse(str); + let u8 = window.atob(b64Data); + let jiya = window.pako.inflate(u8) + let str = this.Uint8ArrayToString(jiya); + return JSON.parse(str); }, Uint8ArrayToString(fileData) { - var dataString = ""; - for (var i = 0; i < fileData.length; i++) { - dataString += String.fromCharCode(fileData[i]); - } - return dataString; + var dataString = ""; + for (var i = 0; i < fileData.length; i++) { + dataString += String.fromCharCode(fileData[i]); + } + return dataString; }, getBars( - symbolInfo, - resolution, - rangeStartDate, - rangeEndDate, - onLoadedCallback, - onErrorCallback + symbolInfo, + resolution, + rangeStartDate, + rangeEndDate, + onLoadedCallback, + onErrorCallback ) { - this.page[this.symbol] = this.page[this.symbol] || 1; - let page = this.page[this.symbol] > 3 ? 3 : this.page[this.symbol]; - let data = { - symbol: this.ajaxTv.getSymbol(symbolInfo.name), - period: this.resolution(resolution), - form: rangeStartDate, - to: rangeEndDate, - size: page * 200, - zip: 1, - }; + this.page[this.symbol] = this.page[this.symbol] || 1; + let page = this.page[this.symbol] > 3 ? 3 : this.page[this.symbol]; + let data = { + symbol: this.ajaxTv.getSymbol(symbolInfo.name), + period: this.resolution(resolution), + form: rangeStartDate, + to: rangeEndDate, + size: page * 200, + zip: 1, + }; - this.onLoadedCallback = onLoadedCallback; - // 检测接口币种是不是后台返回的 - 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) { + this.onLoadedCallback = onLoadedCallback; + // 检测接口币种是不是后台返回的 + if (!this.activeCoin.pair_name) { onLoadedCallback([]); - } - }, 60); - }); - - // 发送消息 - 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); + return; + } + // 取消订阅 + if (this.timer && this.timer != resolution) { + this.unsub( + this.ajaxTv.getSymbol(this.activeCoin.pair_name), + this.timer + ); } 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(() => { - send(msgObj); - }, 200); - return; - } - this.isCreateSocket = true; - this.linkSocket(() => { - this.isCreateSocket = false; + if (this.page[this.symbol] > 3) { + onLoadedCallback([]); + } + }, 60); + }); + + // 发送消息 + 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); - }); - } - }; - send(msgObj); + } else { + if (this.isCreateSocket) { + setTimeout(() => { + send(msgObj); + }, 200); + return; + } + this.isCreateSocket = true; + this.linkSocket(() => { + this.isCreateSocket = false; + this.ws.send(msgObj); + }); + } + }; + send(msgObj); }, subscribeBars( - symbolInfo, - resolution, - onRealtimeCallback, - subscriberUID, - onResetCacheNeededCallback + symbolInfo, + resolution, + onRealtimeCallback, + subscriberUID, + onResetCacheNeededCallback ) { - this.onRealtimeCallback = onRealtimeCallback; - if (!this.activeCoin.pair_name) { - setTimeout(() => { - onResetCacheNeededCallback(); - }, 100); - } + this.onRealtimeCallback = onRealtimeCallback; + if (!this.activeCoin.pair_name) { + setTimeout(() => { + onResetCacheNeededCallback(); + }, 100); + } }, initView() { - let Tdata = new VDatafeed(this); - this.TView = new TradingView.widget({ - width: "100%", - height: 590, - interval: this.timer, - timezone: "Asia/Shanghai", - theme: "light", // 自定义主题 - style: "1", - library_path: "/static/Kline/charting_library/", - datafeed: Tdata, - locale: this.lang, - toolbar_bg: this.theme == "light" ? "#f1f3f6" : "#222e3d", - enable_publishing: false, - withdateranges: true, - hide_side_toolbar: false, - allow_symbol_change: true, - show_popup_button: true, - popup_width: "1000", - popup_height: "650", - container_id: "tradingview_1355aw2", - disabled_features: [ - "header_symbol_search", - "header_compare", - "volume_force_overlay", - "header_widget_dom_node", - 'timeframes_toolbar', - "control_bar", - "main_series_scale_menu", - "header_resolutions", - "legend_context_menu", - "symbol_search_hot_key", - "symbol_info", - "pane_context_menu", - "header_widget_dom_node", - 'timeframes_toolbar', - ], - supported_resolutions: ["5", "15", "30", "60", "240", "1D", "1W", "1M"], - overrides: tvStyle[this.theme], - custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${ - this.theme == "light" ? "white" : "black" - }.css`, - }); + let _this = this; + let Tdata = new VDatafeed(this); + let widget=(_this.TView = new TradingView.widget({ + width: "100%", + height: 590, + interval: _this.timer, + // timezone: "Asia/Shanghai", + timezone: "America/Toronto", + theme: "light", // 自定义主题 + style: "1", + library_path: "/static/Kline/charting_library/", + datafeed: Tdata, + locale: _this.lang, + toolbar_bg: _this.theme == "light" ? "#f1f3f6" : "#222e3d", + enable_publishing: false, + withdateranges: true, + hide_side_toolbar: false, + allow_symbol_change: true, + show_popup_button: true, + popup_width: "1000", + popup_height: "650", + container_id: "tradingview_1355aw2", + disabled_features: [ + "header_symbol_search", + // "widget_logo", + "header_compare", + "volume_force_overlay", + 'timeframes_toolbar', + "control_bar", + "main_series_scale_menu", + "header_resolutions", + "legend_context_menu", + "symbol_search_hot_key", + "symbol_info", + "pane_context_menu", + // "header_widget_dom_node", + 'timeframes_toolbar', + ], + // enabled_features:['header_indicators'], + supported_resolutions: ["1","5", "15", "30", "60", "240", "1D", "1W", "1M"], + 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() { - this.initView(); - }, + mounted() { + this.initView(); + }, };