显示选择时间和价格同步

src/components/bus.js

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

src/views/contract/handicap.vue

@@ -126,6 +126,7 @@ import Contract from "@/api/contract.js";
 import date from "@/utils/class/date.js";
 import math from "@/utils/class/math.js";
 import Socket from "@/api/server/Socket.js";
+import bus from "@/components/bus.js";
 export default {
     data() {
         return {
@@ -133,7 +134,7 @@ export default {
         sellList: [],
         buyList: [],
         tradeList: [],
-      newPriceObj: {}
+        newPriceObj: {},
         };
     },
     props: {
@@ -188,6 +189,11 @@ export default {
             this.getMarketInfo();
             this.linkSocket();
         }
+        bus.$on('collapse', msg => {
+            console.info(msg)
+            this.newPriceObj.price = msg.close;
+            this.$emit("input", this.newPriceObj);
+        });
     },
   // 获取盘口
   methods: {
@@ -244,7 +250,6 @@ export default {
             });
             });
         }
-
         this.ws.on("message", res => {
             let { data, msg, code, sub, type, status, cmd } = res;
             if (sub == this.msg.buy) {
@@ -254,9 +259,9 @@ export default {
             } else if (sub == this.msg.trade) {
             this.tradeList.unshift(data);
             this.tradeList.pop();
-          this.newPriceObj = data;
+            // this.newPriceObj = data;
-          this.$emit("input", this.newPriceObj);
+            // this.$emit("input", this.newPriceObj);
-        } else if (cmd == "ping") {
+            } else if (type == "ping" ||cmd == "ping") {
             this.ws.send({
                 cmd: "pong"
             });

src/views/option/VDatafeed.js

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

src/views/option/kline.vue

@@ -9,6 +9,7 @@ import Option from "@/api/option";
 import Contract from "@/api/contract";
 import Socket from "@/api/server/Socket.js";
 import tvStyle from "@/assets/js/tvStyle.js";
+import bus from "@/components/bus.js";
 import { mapState } from "vuex";
 let exchangeAjax = {
   getKline: Option.getKline,
@@ -110,7 +111,7 @@ export default {
         )}_${this.resolution(this.interval)}`;
     },
   },
-  data() {
+data() {
     return {
         TView: undefined,
         ws: undefined,
@@ -121,8 +122,8 @@ export default {
         isCreateSocket: false,
         page: {},
     };
-  },
+},
-  methods: {
+methods: {
     // 链接socket
     linkSocket(call) {
         const ws = new Socket(this.wsUrl);
@@ -134,6 +135,7 @@ export default {
             let { data, msg, code, sub, type, status, req, cmd } = res;
             if (sub == this.sub && this.onRealtimeCallback) {
             this.onRealtimeCallback(this.getMap(data));
+            bus.$emit('collapse', data);
             } else if (type == "ping" || cmd == "ping") {
             this.ws.send({
                 cmd: "pong",
@@ -203,6 +205,7 @@ export default {
         onLoadedCallback,
         onErrorCallback
         ) {
+        console.info(resolution)
         this.page[this.symbol] = this.page[this.symbol] || 1;
         let page = this.page[this.symbol] > 3 ? 3 : this.page[this.symbol];
         let data = {
@@ -242,7 +245,6 @@ export default {
             }
             }, 60);
         });
-
         // 发送消息
         let msgObj = {
             cmd: "sub",
@@ -283,18 +285,20 @@ export default {
         }
     },
     initView() {
+        let _this = this;
         let Tdata = new VDatafeed(this);
-      this.TView = new TradingView.widget({
+        console.info(Tdata)
+        let widget=(_this.TView = new TradingView.widget({
             width: "100%",
             height: 590,
-        interval: this.timer,
+            interval: _this.timer,
             timezone: "Asia/Shanghai",
             theme: "light", // 自定义主题
             style: "1",
             library_path: "/static/Kline/charting_library/",
             datafeed: Tdata,
-        locale: this.lang,
+            locale: _this.lang,
-        toolbar_bg: this.theme == "light" ? "#f1f3f6" : "#222e3d",
+            toolbar_bg: _this.theme == "light" ? "#f1f3f6" : "#222e3d",
             enable_publishing: false,
             withdateranges: true,
             hide_side_toolbar: false,
@@ -305,9 +309,9 @@ export default {
             container_id: "tradingview_1355aw2",
             disabled_features: [
                 "header_symbol_search",
+                // "widget_logo",
                 "header_compare",
                 "volume_force_overlay",
-          "header_widget_dom_node",
                 'timeframes_toolbar',
                 "control_bar",
                 "main_series_scale_menu",
@@ -316,14 +320,94 @@ export default {
                 "symbol_search_hot_key",
                 "symbol_info",
                 "pane_context_menu",
-          "header_widget_dom_node",
+                // "header_widget_dom_node",
                 'timeframes_toolbar',
             ],
             supported_resolutions: ["5", "15", "30", "60", "240", "1D", "1W", "1M"],
-        overrides: tvStyle[this.theme],
+            overrides: tvStyle[_this.theme],
             custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${
-          this.theme == "light" ? "white" : "black"
+            _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");
+            };
         });
     },
   },