11

jhzh

2024-08-28 31fa18ded9967c99869fb5b118b1313e112c7b00

 src/page/trade/index.vue

@@ -5,16 +5,16 @@
            v-for="(item,index) in typelist" :key="index">{{item}}</div>
      </div>
      <div v-if="typeindex==0">
         <!-- <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :newname="newname" :price="price" :range="range"
            :isTrade="true" @update-coin="onUpdate" @data="quote = $event" /> -->
         <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :newname="newname" :price="price" :range="range"
            :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />

         <div class="trade-buy-sell flex justify-between px-30 py-30">
            <keep-alive>
               <trade-deep-data :selectValue="selectValue" @getList="getList" :showType="showType" :symbol="symbol"
               <trade-deep-data :selectValue="selectValue" @getList="getList"  :showType="showType" :symbol="symbol"
                  v-if="symbol" :price="price" class="w-290 mr-30" />
            </keep-alive>
            <trade-order-area :key="newzuj" :symbol="symbol" :init-open="initOpena" :newname="newname" :init-close="initClose"
               :price="price" @ordered="onOrdereda" />
            <trade-order-area :symbol="symbol" :init-open="initOpena" :newname="newname" :init-close="initClose" :price="price"
               @ordered="onOrdereda" />
         </div>

         <div class="list-data">
@@ -24,7 +24,7 @@
                     <template>
                        <div class="px-10 py-10 flex items-center text-grey" @click="tabClick('1')"
                           :class="tabType == '1' ? 'active-line' : ''">
                           {{ $t("当前委托")				
                           {{ $t("当前委托")
                }}<span v-if="tabType == '1'">({{ entrustList.length }})</span>
                        </div>
                        <div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('3')"
@@ -144,20 +144,20 @@
   import ContractHeader from "@/components/contract-header/index.vue";
   import PerpetualOpen from "@/components/perpetual-open/index.vue";
   import PerpetualOrder from "@/components/perpetual-order/index.vue";

	
   import {
      _getBalance,
      _getDeepData,
      _initOpen,
      _initClose,
      _orderListCur,
      _orderListHold,
      _futrueOrderInit,
      _futrueOrderList,
     _getBalance,
     _getDeepData,
     _initOpen,
     _initClose,
     _orderListCur,
     _orderListHold,
     _futrueOrderInit,
     _futrueOrderList,
   } from "@/API/trade.api";
   var showLength = 7;


	
	
   import TradeHead from "@/components/trade-head/index.vue";
   import TradeOrderArea from "@/components/trade-order-area/index.vue";
   import TradeDeepData from "@/components/trade-deep-data/index.vue";
@@ -225,17 +225,17 @@
         }),
      },
      watch: {
         selectIndex(val) {
            showLength = 7;
         },
        selectIndex(val) {
          showLength = 7;
        },
      },
      data() {
         const initArr = [];
         for (let i = 0; i < showLength; i++) {
            initArr.push({
               amount: "--",
               price: "--",
            });
           initArr.push({
             amount: "--",
             price: "--",
           });
         }
         // const initArr = [];
         // for (let i = 0; i < 8; i++) {
@@ -258,7 +258,6 @@
            range: "",
            stop_price_profit: "",
            stop_price_loss: "",
            newzuj:0,
            initClose: {},
            asks: initArr, // 卖单
            bids: initArr, // 买单
@@ -267,8 +266,8 @@
            futrueHold: [], // 交割持仓
            futrueHistroy: [], // 交割历史
            sockets: {
               quotes: null, // 行情
               deep: null, /// 深度
              quotes: null, // 行情
              deep: null, /// 深度
            },
            curTab: "", // 当前委托还是持有仓位
            selectIndex: 1, // 当前tab
@@ -276,11 +275,11 @@
            show: false, // popup
            animated1: false,
            animated2: false,
            newname: '',
            newname:'',
            currentType: "",
            showCharts: false,
            // curRequest: [], //

				
            HOST_URL,
            quote: {},
            typelist: [this.$t("交易"), this.$t("合约")],
@@ -292,6 +291,7 @@
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            timer2: null, // 交割合约底部持仓等的公用定时器
            symbol: "",
            price: "",
            range: "",
            initOpena: {},
@@ -301,7 +301,7 @@
            bids: initArr, // 买单
            orderCur: [], // 当前委托
            orderHold: [], // 持有仓位
            name: '',
            name:'',
            futrueHold: [], // 交割持仓
            futrueHistroy: [], // 交割历史
            socket: null, // 行情
@@ -348,12 +348,10 @@
            await this.SET_COIN_LIST();
         }
         _getBalance().then((data) => {
            // 获取用户余额
            this.$store.commit("user/SET_USERINFO", {
               balance: data.money
            });
            // const { money } = data
            // this.balance = money
           // 获取用户余额
           this.$store.commit("user/SET_USERINFO", { balance: data.money });
           // const { money } = data
           // this.balance = money
         });
      },
      mounted() {
@@ -362,99 +360,94 @@
         let type = this.$route.params.aa;
         let catchSymbol = getStorage("symbol");
         if (!symbol && catchSymbol) {
            symbol = catchSymbol;
           symbol = catchSymbol;
         }
         if (this.selectIndex / 1 === 2) {
            this.curTab = "fetchFutrueHoldList";
           this.curTab = "fetchFutrueHoldList";
         } else {
            this.curTab = "fetchOrderListHold";
           this.curTab = "fetchOrderListHold";
         }
         this.symbol = symbol;
         // if(this.symbol == 'ORBITAL'){
         //    this.symbol = 'mother'
         // }
         if (this.typeindex == 0) {
         if(this.typeindex==0){
            this.inita(symbol);
         } else {
         }else{
            this.init(symbol);
         }
         // this.handleQoutes()
      },
      methods: {
         ...mapActions("home", [SET_COIN_LIST]),
         ...mapActions("user", ["GET_UERS_KYC"]),
         typeclick(e) {
            this.typeindex = e
            if (e == 0) {
            if(e==0){
               this.initParama(this.symbol)
            } else {
               // this.symbol = 'wld'
            }else{
               this.symbol = 'wld'
               this.initParam(this.symbol)
            }
            this.$forceUpdate()
         },
         onUpdate(symbol, name) {
         onUpdate(symbol,name) {
            // 更新
            this.symbol = symbol;
            this.newname = name
            this.closeSocket();
            if (this.typeindex == 0) {
            if(this.typeindex==0){
               this.closeSocketa();
            } else {
            }else{
               this.closeSocket();
            }
            if (this.typeindex == 0) {
            if(this.typeindex==0){
               this.inita(symbol);
            } else {
            }else{
               this.init(symbol);
            }
         },
         onRecall() {
            // 撤单or 平仓 evt
            this.clearTimer();
            _orderListHold(this.symbol).then((data) => {
               this.orderHold = data;
            });
            this[this.curTab](this.symbol);
            _initOpen(this.symbol).then((data) => {
               this.initOpen = data;
            });
           // 撤单or 平仓 evt
           this.clearTimer();
           _orderListHold(this.symbol).then((data) => {
             this.orderHold = data;
           });
           this[this.curTab](this.symbol);
           _initOpen(this.symbol).then((data) => {
             this.initOpen = data;
           });
         },
         onTopTab(evt) {
            // 当前tab 永续/交割
            this.keyIndex += 1;
            this.selectIndex = evt;
            this.clearTimer();
            if (this.selectIndex / 1 === 1) {
               //this.curTab = 'fetchOrderListCur'
               this.curTab = "fetchOrderListHold";
               // this.animated1 = true
               // this.timer = setTimeout(() => {
               //     this.animated1 = false
               //     clearTimeout(this.timer)
               // }, 200)
               this.animated2 = true;
               this.timer1 = setTimeout(() => {
                  this.animated2 = false;
                  clearTimeout(this.timer1);
               }, 200);
            } else {
               // this.animated2 = true
               // this.timer = setTimeout(() => {
               //     this.animated2 = false
               //     clearTimeout(this.timer)
               // }, 200)
               this.animated1 = true;
               this.timer1 = setTimeout(() => {
                  this.animated1 = false;
                  clearTimeout(this.timer1);
               }, 200);
            }
            console.log(this.curTab);
            this[this.curTab](this.symbol);
           // 当前tab 永续/交割
           this.keyIndex += 1;
           this.selectIndex = evt;
           this.clearTimer();
           if (this.selectIndex / 1 === 1) {
             //this.curTab = 'fetchOrderListCur'
             this.curTab = "fetchOrderListHold";
             // this.animated1 = true
             // this.timer = setTimeout(() => {
             //     this.animated1 = false
             //     clearTimeout(this.timer)
             // }, 200)
             this.animated2 = true;
             this.timer1 = setTimeout(() => {
               this.animated2 = false;
               clearTimeout(this.timer1);
             }, 200);
           } else {
             // this.animated2 = true
             // this.timer = setTimeout(() => {
             //     this.animated2 = false
             //     clearTimeout(this.timer)
             // }, 200)
             this.animated1 = true;
             this.timer1 = setTimeout(() => {
               this.animated1 = false;
               clearTimeout(this.timer1);
             }, 200);
           }
           console.log(this.curTab);
           this[this.curTab](this.symbol);
         },
         getCoinPrce(val) {
				
            _getHomeList(val).then((res) => {
               this.coinPrice = res[0].close;
            });
@@ -469,109 +462,109 @@
            this.getOrderList();
         },
         changeCurrentType(type) {
            this.currentType = type;
           this.currentType = type;
         },
         fetchOrderListHold(symbol) {
            // 当前持仓
            if (!symbol) {
               return;
            }
            if (this.userInfo.token) {
               _orderListHold(symbol).then((data) => {
                  // this.orderHold = data
                  this.orderHold = data.sort(this.sortData);
               });
               this.timer = setInterval(() => {
                  _orderListHold(symbol).then((data) => {
                     // if (typeof this.timer === 'string') {
                     //   this.timer = null
                     //   return
                     // }
                     // this.orderHold = data
                     this.orderHold = data.sort(this.sortData);
                  });
               }, 1000);
            } else {
               this.orderHold = [];
            }
           // 当前持仓
           if (!symbol) {
             return;
           }
           if (this.userInfo.token) {
             _orderListHold(symbol).then((data) => {
               // this.orderHold = data
               this.orderHold = data.sort(this.sortData);
             });
             this.timer = setInterval(() => {
               _orderListHold(symbol).then((data) => {
                 // if (typeof this.timer === 'string') {
                 //   this.timer = null
                 //   return
                 // }
                 // this.orderHold = data
                 this.orderHold = data.sort(this.sortData);
               });
             }, 1000);
           } else {
             this.orderHold = [];
           }
         },
         fetchFutrueHoldList(symbol) {
            if (!symbol) {
               return;
            }
            // 交割持仓
            if (this.userInfo.token) {
               let length = 0;
               _futrueOrderList(symbol).then((data) => {
                  // this.futrueHold = data
                  this.futrueHold = data.sort(this.sortData);
                  length = data.length;
               });
               this.timer = setInterval(() => {
                  _futrueOrderList(symbol).then((data) => {
                     // if (typeof this.timer === 'string') {
                     //   this.timer = null
                     //   return
                     // }

                     this.futrueHold = data.sort(this.sortData);
                     if (length != data.length) {
                        length = data.length;
                        _futrueOrderInit(symbol).then((dataList) => {
                           this.initFutrue = dataList;
                        });
                     }
                  });
               }, 1000);
            } else {
               this.futrueHold = [];
            }
           if (!symbol) {
             return;
           }
           // 交割持仓
           if (this.userInfo.token) {
             let length = 0;
             _futrueOrderList(symbol).then((data) => {
               // this.futrueHold = data
               this.futrueHold = data.sort(this.sortData);
               length = data.length;
             });
             this.timer = setInterval(() => {
               _futrueOrderList(symbol).then((data) => {
                 // if (typeof this.timer === 'string') {
                 //   this.timer = null
                 //   return
                 // }
			
                 this.futrueHold = data.sort(this.sortData);
                 if (length != data.length) {
                   length = data.length;
                   _futrueOrderInit(symbol).then((dataList) => {
                     this.initFutrue = dataList;
                   });
                 }
               });
             }, 1000);
           } else {
             this.futrueHold = [];
           }
         },
         fetchFutrueHistory(symbol) {
            // 交割历史持仓
            _futrueOrderList(symbol, "hisorders").then((data) => {
               this.futrueHistroy = data;
               // this.clearTimeout()
            });
           // 交割历史持仓
           _futrueOrderList(symbol, "hisorders").then((data) => {
             this.futrueHistroy = data;
             // this.clearTimeout()
           });
         },
         onOrdereda(evt) {
            // 下单过后的回调
            this.clearTimer();
            // this.clearTimeout()
            if (this.typeindex == 0) {
            if(this.typeindex==0){
               this.initParama(this.symbol, evt); // 重新初始化
            } else {
            }else{
               this.initParam(this.symbol, evt); // 重新初始化
            }
            //console.log('下单后更新数据')
         },
         onOrdered(evt) {
            // 下单过后的回调
            this.clearTimer();
            // this.clearTimeout()
            if (this.typeindex == 0) {
               this.initParama(this.symbol, evt); // 重新初始化
            } else {
               this.initParam(this.symbol, evt); // 重新初始化
            }
            // TODO: 这里要做判断
            if (this.selectIndex / 1 === 1) {
               this[this.curTab](this.symbol); // 重新调取记录
               console.log("this.curTab", this.curTab);
            } else {
               // 交割合约
               this[this.curTab](this.symbol);
               // this.show = true
               console.log("curTab", evt, this.curTab);
            }
            //console.log('下单后更新数据')
           // 下单过后的回调
           this.clearTimer();
           // this.clearTimeout()
           if(this.typeindex==0){
              this.initParama(this.symbol, evt); // 重新初始化
           }else{
              this.initParam(this.symbol, evt); // 重新初始化
           }
           // TODO: 这里要做判断
           if (this.selectIndex / 1 === 1) {
             this[this.curTab](this.symbol); // 重新调取记录
             console.log("this.curTab", this.curTab);
           } else {
             // 交割合约
             this[this.curTab](this.symbol);
             // this.show = true
             console.log("curTab", evt, this.curTab);
           }
           //console.log('下单后更新数据')
         },
         changeValueBack(val) {
            if (val == 0) {
               showLength = 7;
            } else {
               showLength = 13;
            }
           if (val == 0) {
             showLength = 7;
           } else {
             showLength = 13;
           }
         },
         onTab(evt) {
            // 点击tab后的回调
@@ -582,18 +575,18 @@
            this[evt](this.symbol);
         },
         fetchQoutes(symbol) {
            // 获取当前行情
            // symbol.order = "desc"
            _getHomeList(symbol).then((data) => {
               // 获取行情
               this.handleQoutes(data);
               // this.startQuoteSocket(); // socket
               if (this.typeindex == 0) {
                  this.startQuoteSocketa(); // socket
               } else {
                  this.startQuoteSocket(); // socket
               }
            });
           // 获取当前行情
           // symbol.order = "desc"
           _getHomeList(symbol).then((data) => {
             // 获取行情
             this.handleQoutes(data);
             this.startQuoteSocket(); // socket
            if(this.typeindex==0){
               this.startQuoteSocketa(); // socket
            }else{
               this.startQuoteSocket(); // socket
            }
           });
         },
         handleQoutes(data) {
            if (data && data.length) {
@@ -606,84 +599,75 @@
            }
         },
         fetchDeepData(symbol) {
            console.log("sd");
            this.newzuj += 1
            _getDeepData(symbol).then((data) => {
               // 获取深度
               console.log(data);
               this.handleDeep(data);
               this.startDeepSocket(); // socket
            });
           console.log("sd");
           _getDeepData(symbol).then((data) => {
             // 获取深度
             console.log(data);
             this.handleDeep(data);
             this.startDeepSocket(); // socket
           });
         },
         handleDeep(data) {
            if (this.symbol !== data.symbol) {
               return;
            }
            this.deepData = data;
            const {
               asks,
               bids
            } = data;
            this.asks = asks.sort((a, b) => a.price - b.price).slice(0, showLength);
            this.bids = bids.sort((a, b) => a.price - b.price).slice(-showLength);
           if (this.symbol !== data.symbol) {
             return;
           }
           this.deepData = data;
           const { asks, bids } = data;
           this.asks = asks.sort((a, b) => a.price - b.price).slice(0, showLength);
           this.bids = bids.sort((a, b) => a.price - b.price).slice(-showLength);
         },
         fetchOrderListCur(symbol) {
            // 当前委托
            //console.log('当前委托')
            if (this.userInfo.token) {
               _orderListCur(symbol).then((data) => {
                  this.orderCur = data;
               });
               this.clearTimer();
               this.timer = setInterval(() => {
                  _orderListCur(symbol).then((data) => {
                     // if (typeof this.timer === 'string') {
                     //   this.timer = null
                     //   return
                     // }
                     this.orderCur = data;
                  });
               }, 1000);
            } else {
               this.orderCur = [];
            }
           // 当前委托
           //console.log('当前委托')
           if (this.userInfo.token) {
             _orderListCur(symbol).then((data) => {
               this.orderCur = data;
             });
             this.clearTimer();
             this.timer = setInterval(() => {
               _orderListCur(symbol).then((data) => {
                 // if (typeof this.timer === 'string') {
                 //   this.timer = null
                 //   return
                 // }
                 this.orderCur = data;
               });
             }, 1000);
           } else {
             this.orderCur = [];
           }
         },
         startDeepSocket() {
            // 开启socket链接
            if (this.typeindex == 0) {
               this.closeSocketa();
            } else {
               this.closeSocket();
            }

            this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);

            this.socket.onopen = () => {
               console.log("WebSocket connection established");
            };

            this.socket.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
               if (code / 1 === 0) {
                  this.handleDeep(_data);
               }
            };

            this.socket.onerror = (error) => {
               console.error("WebSocket error:", error);
               setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
            };

            this.socket.onclose = (event) => {
               console.log("WebSocket connection closed:", event);
               // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
            };
           // 开启socket链接
           if(this.typeindex==0){
              this.closeSocketa();
           }else{
              this.closeSocket();
           }
			
           this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
			
           this.socket.onopen = () => {
             console.log("WebSocket connection established");
           };
			
           this.socket.onmessage = (evt) => {
             const { data } = evt;
             const { code, data: _data } = JSON.parse(data);
             if (code / 1 === 0) {
               this.handleDeep(_data);
             }
           };
			
           this.socket.onerror = (error) => {
             console.error("WebSocket error:", error);
             setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
           };
			
           this.socket.onclose = (event) => {
             console.log("WebSocket connection closed:", event);
             // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
           };
         },
         startQuoteSocketa() {
            // 行情socket
@@ -712,7 +696,7 @@
               //console.log('开仓数据')
               Axios.tradeBuyToken({}).then((res) => {
                  this.initOpena = res.data;
                  console.log(this.initOpena.volume, res.data.volume, type,111111);
                  console.log(this.initOpen.volume, res.data.volume, type);
               });
            }
            if (type === "close" || !type) {
@@ -728,94 +712,93 @@
            }
         },
         initParam(symbol, type) {
            // 初始化参数
            if (type === "open" || type === "long" || type === "short" || !type) {
               let initFunTimer = null;
               let initFun = () => {
						
                  _initOpen(symbol.toLowerCase())
                     .then((data) => {
                        this.initOpen = data;
                        clearTimeout(initFunTimer);
                        initFunTimer = null;
                     })
                     .catch((err) => {
                        initFunTimer = setTimeout(() => {
                           initFun();
                        }, 3000);
                     });
               };
               initFun();
            }
            if (type === "close" || !type) {
               let initFunTimer = null;
               let initFun = () => {
                  _initClose(symbol)
                     .then((data) => {
                        this.initClose = data;
                        console.log(this.initClose);
                        clearTimeout(initFunTimer);
                        initFunTimer = null;
                     })
                     .catch((err) => {
                        initFunTimer = setTimeout(() => {
                           initFun();
                        }, 3000);
                     });
               };
               initFunTimer = setTimeout(() => {
                  initFun();
               }, 600);
            }
            if (type === "futrue" || !type) {
               _futrueOrderInit(symbol).then((data) => {
                  this.initFutrue = data;
               });
            }
           // 初始化参数
           if (type === "open" || type === "long" || type === "short" || !type) {
             let initFunTimer = null;
             let initFun = () => {
               _initOpen(symbol)
                 .then((data) => {
                   this.initOpen = data;
                   clearTimeout(initFunTimer);
                   initFunTimer = null;
                 })
                 .catch((err) => {
                   initFunTimer = setTimeout(() => {
                     initFun();
                   }, 3000);
                 });
             };
             initFun();
           }
           if (type === "close" || !type) {
             let initFunTimer = null;
             let initFun = () => {
               _initClose(symbol)
                 .then((data) => {
                   this.initClose = data;
                   console.log(this.initClose);
                   clearTimeout(initFunTimer);
                   initFunTimer = null;
                 })
                 .catch((err) => {
                   initFunTimer = setTimeout(() => {
                     initFun();
                   }, 3000);
                 });
             };
             initFunTimer = setTimeout(() => {
               initFun();
             }, 600);
           }
           if (type === "futrue" || !type) {
             _futrueOrderInit(symbol).then((data) => {
               this.initFutrue = data;
             });
           }
         },
         init(symbol) {
            // 初始化页面
            this.symbol = symbol.toLowerCase();
            this.fetchQoutes(symbol);
            this.fetchDeepData(symbol);
            this.initParam(symbol); // 'open'
            this.clearTimer();
            //if (this.curTab === 'fetchOrderListCur') {
            if (this.curTab === "fetchOrderListHold") {
               //this.fetchOrderListCur(symbol)
               this.fetchOrderListHold(symbol);
            } else {
               this.fetchFutrueHoldList(symbol);
            }
           // 初始化页面
           this.symbol = symbol.toLowerCase();
           this.fetchQoutes(symbol);
           this.fetchDeepData(symbol);
           this.initParam(symbol); // 'open'
           this.clearTimer();
           //if (this.curTab === 'fetchOrderListCur') {
           if (this.curTab === "fetchOrderListHold") {
             //this.fetchOrderListCur(symbol)
             this.fetchOrderListHold(symbol);
           } else {
             this.fetchFutrueHoldList(symbol);
           }
         },
         inita(symbol) {
            // 初始化页面
            this.symbol = symbol.toLowerCase();
            if (!this.socket) {
               if (this.typeindex == 0) {
               if(this.typeindex==0){
                  this.startQuoteSocketa(); // socket
               } else {
               }else{
                  this.startQuoteSocket(); // socket
               }
            }
            // this.initParam(symbol); // 'open'
            if (this.typeindex == 0) {
            if(this.typeindex==0){
               this.initParama(symbol); // 'open'
            } else {
            }else{
               this.initParam(symbol); // 'open'
            }
            this.clearTimer();
            // this.getCoinPrce(symbol);
            this.getCoinPrce(symbol);
         },
         closeSocketa() {
            this.socket && this.socket.close();
            this.socket = null;
         },
         closeSocket() {
            this.sockets.quotes && this.sockets.quotes.close();
            this.sockets.deep && this.sockets.deep.close();
            this.sockets.quotes = null;
            this.sockets.deep = null;
           this.sockets.quotes && this.sockets.quotes.close();
           this.sockets.deep && this.sockets.deep.close();
           this.sockets.quotes = null;
           this.sockets.deep = null;
         },
         clearTimer() {
            clearInterval(this.timer);
@@ -857,9 +840,9 @@
                  order_no: order,
               })
               .then((res) => {
                  if (this.typeindex == 0) {
                  if(this.typeindex==0){
                     this.initParama(this.symbol);
                  } else {
                  }else{
                     this.initParam(this.symbol);
                  }
                  this.$toast(this.$t("成功"));
@@ -907,26 +890,21 @@
         },
      },
      startQuoteSocket() {
         // 行情socket
         this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`);
         // socket.onopen =  () => {
         //     console.log('open')
         //     socket.send('hello')
         // }
         this.sockets.quotes.onmessage = (evt) => {
            const {
               data
            } = evt;
            const {
               code,
               data: _data
            } = JSON.parse(data);
            if (code / 1 === 0) {
               this.handleQoutes(_data);
            }
         };
        // 行情socket
        this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`);
        // socket.onopen =  () => {
        //     console.log('open')
        //     socket.send('hello')
        // }
        this.sockets.quotes.onmessage = (evt) => {
          const { data } = evt;
          const { code, data: _data } = JSON.parse(data);
          if (code / 1 === 0) {
            this.handleQoutes(_data);
          }
        };
      },

		
      beforeRouteEnter(to, from, next) {
         var that = this
         let {
@@ -946,57 +924,53 @@
            //       vm.inita(symbol);
            //    });
            // }else{
                  // next((vm) => {
                  //    vm.symbol = symbol;
                  //    vm.inita(symbol);
                  // });
            next((vm) => {
               vm.symbol = symbol;
               vm.init(symbol);
            });
               next((vm) => {
                  vm.symbol = symbol;
                  vm.init(symbol);
               });
            // }

				
         } else {
            next();
         }
      },
      activated() {
         let symbol = this.$route.params.symbol;
         let catchSymbol = getStorage("symbol");
         if (!symbol && catchSymbol) {
            symbol = catchSymbol;
         }
         if (this.selectIndex / 1 === 2) {
            this.curTab = "fetchFutrueHoldList";
         } else {
            this.curTab = "fetchOrderListHold";
         }
         this.symbol = symbol;
         if (this.typeindex == 0) {
            this.inita(symbol);
         } else {
            this.init(symbol);
         }
        let symbol = this.$route.params.symbol;
        let catchSymbol = getStorage("symbol");
        if (!symbol && catchSymbol) {
          symbol = catchSymbol;
        }
        if (this.selectIndex / 1 === 2) {
          this.curTab = "fetchFutrueHoldList";
        } else {
          this.curTab = "fetchOrderListHold";
        }
        this.symbol = symbol;
        if(this.typeindex==0){
           this.inita(symbol);
        }else{
           this.init(symbol);
        }
      },
      activated() {
         this.currentType = this.$route.query.currentType ?
            this.$route.query.currentType :
            "long";
         this.currentType = this.$route.query.currentType
           ? this.$route.query.currentType
           : "long";
      },
      deactivated() {
         if (this.typeindex == 0) {
         if(this.typeindex==0){
            this.closeSocketa();
         } else {
         }else{
            this.closeSocket();
         }
         this.clearTimer();
      },


		
		
      beforeDestroy() {
         if (this.typeindex == 0) {
         if(this.typeindex==0){
            this.closeSocketa();
         } else {
         }else{
            this.closeSocket();
         }
         // this.clearTimeout(true)
@@ -1211,7 +1185,7 @@
      box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
      //
   }

	
   //.list-enter-active, .list-leave-active {
   //  transition: all .5s;
   //  transform: translateY(30px)
@@ -1221,109 +1195,110 @@
   //  transform: translateY(0)
   //}
   .no_touch {
      -webkit-user-select: none;
      user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;
      padding-bottom: 150px !important;
     -webkit-user-select: none;
     user-select: none;
     -ms-user-select: none;
     -moz-user-select: none;
     padding-bottom: 150px !important;
   }

	
   .list-enter-active,
   .list-leave-active {
      will-change: transform;
      transition: all 250ms;
     will-change: transform;
     transition: all 250ms;
   }

	
   .list-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
     opacity: 0;
     transform: translate3d(-100%, 0, 0);
   }

	
   .list-leave {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
     opacity: 0;
     transform: translate3d(100%, 0, 0);
   }

	
   .rounded-view {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      box-sizing: border-box;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     box-sizing: border-box;
   }

	
   .my-swipe {
      width: 100%;
     width: 100%;
   }

   .my-swipe .van-swipe-item {}

	
   .my-swipe .van-swipe-item {
   }
	
   .line {
      height: 13px;

      @include themify() {
         background: themed("tab_background");
      }
     height: 13px;
	
     @include themify() {
       background: themed("tab_background");
     }
   }

	
   @keyframes animate1 {
      0% {
         opacity: 1;
         transform: translate3d(100%, 0, 0);
      }

      //   40% {
      //      opacity: 1;
      //     transform: translate3d(50%, 0, 0);
      //   }
      100% {
         opacity: 1;
         transform: translate3d(0%, 0, 0);
      }
     0% {
       opacity: 1;
       transform: translate3d(100%, 0, 0);
     }
	
     //   40% {
     //      opacity: 1;
     //     transform: translate3d(50%, 0, 0);
     //   }
     100% {
       opacity: 1;
       transform: translate3d(0%, 0, 0);
     }
   }

	
   @keyframes animate2 {
      0% {
         opacity: 1;
         transform: translate3d(-100%, 0, 0);
      }

      //   40% {
      //      opacity: 1;
      //     transform: translate3d(50%, 0, 0);
      //   }
      100% {
         opacity: 1;
         transform: translate3d(0%, 0, 0);
      }
     0% {
       opacity: 1;
       transform: translate3d(-100%, 0, 0);
     }
	
     //   40% {
     //      opacity: 1;
     //     transform: translate3d(50%, 0, 0);
     //   }
     100% {
       opacity: 1;
       transform: translate3d(0%, 0, 0);
     }
   }

	
   .slide1 {
      animation: animate1 200ms linear;
     animation: animate1 200ms linear;
   }

	
   .slide2 {
      animation: animate2 200ms linear;
     animation: animate2 200ms linear;
   }

	
   .line {
      @include themify() {
         background: themed("divi_line");
      }
     @include themify() {
       background: themed("divi_line");
     }
   }

	
   ::v-deep .contract-header {
      @include themify() {
         background: themed("main_background");
      }
     @include themify() {
       background: themed("main_background");
     }
   }

	
   .tabBackground1 {
      @include themify() {
         border: 1px solid themed("border_color1");
      }
     @include themify() {
       border: 1px solid themed("border_color1");
     }
   }

	
   .shadow {
      bottom: 108px;
      box-sizing: border-box;
     bottom: 108px;
     box-sizing: border-box;
   }
</style>