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

显示选择时间和价格同步

master
ltlzx 4 years ago
parent
3d0f45ffc8
commit
18b1e5e367
4 changed files with 441 additions and 344 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. 6
      src/components/bus.js
  2. 261
      src/views/contract/handicap.vue
  3. 8
      src/views/option/VDatafeed.js
  4. 510
      src/views/option/kline.vue

6
src/components/bus.js
View File

@ -0,0 +1,6 @@
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;

261
src/views/contract/handicap.vue
View File

@ -126,161 +126,166 @@ import Contract from "@/api/contract.js";
import date from "@/utils/class/date.js"; import date from "@/utils/class/date.js";
import math from "@/utils/class/math.js"; import math from "@/utils/class/math.js";
import Socket from "@/api/server/Socket.js"; import Socket from "@/api/server/Socket.js";
import bus from "@/components/bus.js";
export default { export default {
data() { data() {
return { return {
tab: 1, tab: 1,
sellList: [], sellList: [],
buyList: [], buyList: [],
tradeList: [], tradeList: [],
newPriceObj: {} newPriceObj: {},
}; };
},
props: {
symbol: {
default: "",
type: String,
required: false
}, },
wsUrl: { props: {
default: "", symbol: {
type: String, default: "",
required: true type: String,
required: false
},
wsUrl: {
default: "",
type: String,
required: true
},
ws: {}
}, },
ws: {} watch: {
}, symbol(n, o) {
watch: { this.getMarketInfo();
symbol(n, o) { this.linkSocket();
this.getMarketInfo(); if (o) {
this.linkSocket(); this.unLink(o);
if (o) { }
this.unLink(o); }
}
}
},
computed: {
msg() {
return {
buy: `swapBuyList_${this.symbol}`,
sell: `swapSellList_${this.symbol}`,
trade: `swapTradeList_${this.symbol}`
};
}, },
sellListShow() { computed: {
let list = this.sellList.splice(0, 12); msg() {
let total = 0; return {
list.forEach(item => { buy: `swapBuyList_${this.symbol}`,
item.total = total += item.amount; sell: `swapSellList_${this.symbol}`,
}); trade: `swapTradeList_${this.symbol}`
return list.reverse(); };
},
sellListShow() {
let list = this.sellList.splice(0, 12);
let total = 0;
list.forEach(item => {
item.total = total += item.amount;
});
return list.reverse();
},
buyListShow() {
let list = this.buyList.splice(0, 12);
let total = 0;
list.forEach(item => {
item.total = total += item.amount;
});
return list;
}
},
created() {
if (this.symbol) {
this.getMarketInfo();
this.linkSocket();
}
bus.$on('collapse', msg => {
console.info(msg)
this.newPriceObj.price = msg.close;
this.$emit("input", this.newPriceObj);
});
}, },
buyListShow() {
let list = this.buyList.splice(0, 12);
let total = 0;
list.forEach(item => {
item.total = total += item.amount;
});
return list;
}
},
created() {
if (this.symbol) {
this.getMarketInfo();
this.linkSocket();
}
},
// 获取盘口 // 获取盘口
methods: { methods: {
parseTime: date.parseTime, parseTime: date.parseTime,
omitTo: math.omitTo, omitTo: math.omitTo,
getMarketInfo() { getMarketInfo() {
let data = { let data = {
symbol: this.symbol symbol: this.symbol
}; };
Contract.getMarketInfo(data).then(res => { Contract.getMarketInfo(data).then(res => {
this.sellList = res.swapSellList; this.sellList = res.swapSellList;
this.buyList = res.swapBuyList; this.buyList = res.swapBuyList;
this.tradeList = res.swapTradeList; this.tradeList = res.swapTradeList;
this.newPriceObj = this.tradeList[0]; this.newPriceObj = this.tradeList[0];
this.$emit("input", this.newPriceObj); this.$emit("input", this.newPriceObj);
}); });
}, },
// 计算深度 // 计算深度
getValue(amount) { getValue(amount) {
const arr = this.buyListShow const arr = this.buyListShow
.concat(this.sellListShow) .concat(this.sellListShow)
.map(item => item.amount); .map(item => item.amount);
let max = Math.max(...arr); let max = Math.max(...arr);
return math.division(amount, max, 2) * 100; return math.division(amount, max, 2) * 100;
}, },
// 连接socket // 连接socket
linkSocket() { linkSocket() {
if (this.ws.socket.readyState == 1) { if (this.ws.socket.readyState == 1) {
this.ws.send({ this.ws.send({
cmd: "sub",
msg: this.msg.buy
});
this.ws.send({
cmd: "sub",
msg: this.msg.sell
});
this.ws.send({
cmd: "sub",
msg: this.msg.trade
});
} else {
this.ws.on("open", () => {
this.ws.send({
cmd: "sub", cmd: "sub",
msg: this.msg.buy msg: this.msg.buy
}); });
this.ws.send({ this.ws.send({
cmd: "sub", cmd: "sub",
msg: this.msg.sell msg: this.msg.sell
}); });
this.ws.send({ this.ws.send({
cmd: "sub", cmd: "sub",
msg: this.msg.trade msg: this.msg.trade
}); });
}); } else {
} this.ws.on("open", () => {
this.ws.send({
this.ws.on("message", res => { cmd: "sub",
let { data, msg, code, sub, type, status, cmd } = res; msg: this.msg.buy
if (sub == this.msg.buy) { });
this.buyList = data; this.ws.send({
} else if (sub == this.msg.sell) { cmd: "sub",
this.sellList = data; msg: this.msg.sell
} else if (sub == this.msg.trade) { });
this.tradeList.unshift(data); this.ws.send({
this.tradeList.pop(); cmd: "sub",
this.newPriceObj = data; msg: this.msg.trade
this.$emit("input", this.newPriceObj); });
} else if (cmd == "ping") { });
this.ws.send({
cmd: "pong"
});
} }
}); this.ws.on("message", res => {
let { data, msg, code, sub, type, status, cmd } = res;
if (sub == this.msg.buy) {
this.buyList = data;
} else if (sub == this.msg.sell) {
this.sellList = data;
} else if (sub == this.msg.trade) {
this.tradeList.unshift(data);
this.tradeList.pop();
// this.newPriceObj = data;
// this.$emit("input", this.newPriceObj);
} else if (type == "ping" ||cmd == "ping") {
this.ws.send({
cmd: "pong"
});
}
});
}, },
// 取消订阅 // 取消订阅
unLink(symbol) { unLink(symbol) {
// 取消买线 // 取消买线
this.ws.send({ this.ws.send({
cmd: "unsub", cmd: "unsub",
msg: `swapBuyList_${symbol}` msg: `swapBuyList_${symbol}`
}); });
// 取消卖线 // 取消卖线
this.ws.send({ this.ws.send({
cmd: "unsub", cmd: "unsub",
msg: `swapSellList_${symbol}` msg: `swapSellList_${symbol}`
}); });
// 取消成交 // 取消成交
this.ws.send({ this.ws.send({
cmd: "unsub", cmd: "unsub",
msg: `swapTradeList_${symbol}` msg: `swapTradeList_${symbol}`
}); });
} }
} }
}; };
</script> </script>

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

@ -35,6 +35,7 @@ class VDatafeed {
} }
getBars(symbolInfo, resolution, rangeStartDate, rangeEndDate, onDataCallback, onErrorCallback) { getBars(symbolInfo, resolution, rangeStartDate, rangeEndDate, onDataCallback, onErrorCallback) {
console.info(resolution)
var onLoadedCallback = function onLoadedCallback(data) { var onLoadedCallback = function onLoadedCallback(data) {
if (data && data.length) { if (data && data.length) {
@ -64,7 +65,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 +91,13 @@ 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 +109,4 @@ class VDatafeed {
}; };
} }
} }
export default VDatafeed export default VDatafeed

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

@ -9,6 +9,7 @@ import Option from "@/api/option";
import Contract from "@/api/contract"; import Contract from "@/api/contract";
import Socket from "@/api/server/Socket.js"; import Socket from "@/api/server/Socket.js";
import tvStyle from "@/assets/js/tvStyle.js"; import tvStyle from "@/assets/js/tvStyle.js";
import bus from "@/components/bus.js";
import { mapState } from "vuex"; import { mapState } from "vuex";
let exchangeAjax = { let exchangeAjax = {
getKline: Option.getKline, getKline: Option.getKline,
@ -67,33 +68,33 @@ export default {
}, },
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;
@ -105,226 +106,309 @@ export default {
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: "", sub: "",
isCreateSocket: false, isCreateSocket: false,
page: {}, page: {},
}; };
}, },
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") { bus.$emit('collapse', data);
this.ws.send({ } else if (type == "ping" || cmd == "ping") {
cmd: "pong", this.ws.send({
}); 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; console.info(resolution)
let page = this.page[this.symbol] > 3 ? 3 : this.page[this.symbol]; this.page[this.symbol] = this.page[this.symbol] || 1;
let data = { let page = this.page[this.symbol] > 3 ? 3 : this.page[this.symbol];
symbol: this.ajaxTv.getSymbol(symbolInfo.name), let data = {
period: this.resolution(resolution), symbol: this.ajaxTv.getSymbol(symbolInfo.name),
form: rangeStartDate, period: this.resolution(resolution),
to: rangeEndDate, form: rangeStartDate,
size: page * 200, to: rangeEndDate,
zip: 1, 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.onLoadedCallback = onLoadedCallback;
this.ajaxTv.getKline(data).then((res) => { // 检测接口币种是不是后台返回的
let arr = this.unzip(res.data).map((item) => { if (!this.activeCoin.pair_name) {
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%", console.info(Tdata)
height: 590, let widget=(_this.TView = new TradingView.widget({
interval: this.timer, width: "100%",
timezone: "Asia/Shanghai", height: 590,
theme: "light", // 自定义主题 interval: _this.timer,
style: "1", timezone: "Asia/Shanghai",
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_${ supported_resolutions: ["5", "15", "30", "60", "240", "1D", "1W", "1M"],
this.theme == "light" ? "white" : "black" overrides: tvStyle[_this.theme],
}.css`, custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${
}); _this.theme == "light" ? "white" : "black"
}.css`,
}));
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 === "1") {
button.css({
color: "#5786d2",
"border-bottom": "1px solid #5786d2",
});
localStorage.setItem("tim", "1");
}
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);
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");
};
});
}, },
}, },
mounted() { mounted() {

Write Preview
Loading…
Cancel
Save