{"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport { WS_URL } from \"@/config\";\nlet DEEP_LENGTH = 6;\nimport { fixDate } from \"@/utils/utis\";\nimport { _getHomeList } from \"@/API/home.api\";\nimport { mapGetters } from \"vuex\";\nexport default {\n name: \"TradeDeepData\",\n props: {\n symbol: {\n type: String\n },\n price: {\n type: String\n },\n showType: {\n type: Number,\n default: 0\n },\n selectValue: {\n type: Number\n }\n },\n data() {\n const init = [];\n for (let i = 0; i < DEEP_LENGTH; i++) {\n init.push({\n amount: \"\",\n price: \"\"\n });\n }\n return {\n fixDate,\n greenData: init,\n redData: init,\n socket: null,\n approximately: \"\"\n };\n },\n computed: {\n ...mapGetters({\n theme: \"home/theme\"\n })\n },\n mounted() {\n // this.startDeepSocket()\n if (this.showType == 1 || this.showType == 2) {\n DEEP_LENGTH = 12;\n } else {\n DEEP_LENGTH = 6;\n }\n this.getHomeList();\n },\n watch: {\n symbol(val) {\n this.startDeepSocket();\n this.getHomeList();\n },\n showType(val) {\n if (val == 1 || val == 2) {\n DEEP_LENGTH = 12;\n } else {\n DEEP_LENGTH = 6;\n }\n }\n },\n methods: {\n getHomeList() {\n _getHomeList(this.symbol).then(res => {\n let numberText = res[0].close;\n let numberLength = numberText.substring(numberText.indexOf(\".\") + 1, numberText.length).length;\n console.log(numberLength);\n let arry = [];\n let str = \"0.\";\n for (let j = 0; j < numberLength - 1; j++) {\n str = str + \"0\";\n arry.push(str);\n }\n let newArry = [];\n arry.map(item => {\n let obj = {\n name: item + \"1\",\n value: item.substring(item.indexOf(\".\") + 1, item.length).length + 1\n };\n newArry.push(obj);\n });\n if (numberLength <= 2) {\n let obj = [{\n name: \"0.1\",\n value: 1\n }, {\n name: \"1\",\n value: -1\n }, {\n name: \"10\",\n value: -2\n }, {\n name: \"100\",\n value: -3\n }];\n newArry = newArry.concat(obj);\n }\n if (this.symbol == \"shib\") {\n newArry = newArry.slice(-4);\n }\n let dataObj = {\n arry: newArry,\n numberLength: numberLength\n };\n this.$emit(\"getList\", dataObj);\n });\n },\n startDeepSocket() {\n // 开启socket链接\n this.closeSocket();\n console.log(\"start deep\");\n this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);\n this.socket.onmessage = evt => {\n const {\n data\n } = evt;\n const {\n code,\n data: _data\n } = JSON.parse(data);\n if (code / 1 === 0) {\n this.handleDeep(_data);\n }\n };\n },\n handleDeep(data) {\n // 格式化数据\n this.deepData = data;\n if (this.selectValue >= 1) {\n this.deepData.asks.map(item => {\n item.price = parseFloat(item.price).toFixed(this.selectValue);\n });\n this.deepData.bids.map(item => {\n item.price = parseFloat(item.price).toFixed(this.selectValue);\n });\n } else {\n if (this.selectValue == -1) {\n this.deepData.asks.map(item => {\n item.price = item.price.substring(0, item.price.indexOf(\".\"));\n });\n this.deepData.bids.map(item => {\n item.price = item.price.substring(0, item.price.indexOf(\".\"));\n });\n }\n if (this.selectValue == -2) {\n this.deepData.asks.map(item => {\n item.price = item.price.substring(0, item.price.indexOf(\".\") - 1) + \"0\";\n });\n this.deepData.bids.map(item => {\n item.price = item.price.substring(0, item.price.indexOf(\".\") - 1) + \"0\";\n });\n }\n if (this.selectValue == -3) {\n this.deepData.asks.map(item => {\n item.price = item.price.substring(0, item.price.indexOf(\".\") - 2) + \"00\";\n });\n this.deepData.bids.map(item => {\n item.price = item.price.substring(0, item.price.indexOf(\".\") - 2) + \"00\";\n });\n }\n // this.selectValue\n }\n const {\n asks,\n bids\n } = data;\n //获取小数位数\n this.redData = asks.sort((prev, next) => prev.price - next.price).slice(0, DEEP_LENGTH);\n this.greenData = bids.sort((prev, next) => prev.price - next.price).slice(0, DEEP_LENGTH);\n this.approximately = this.deepData.asks[1].price;\n },\n onPrice(price) {\n this.$emit(\"price\", price);\n },\n closeSocket() {\n this.socket && this.socket.close();\n this.socket = null;\n }\n },\n activated() {\n this.startDeepSocket();\n },\n deactivated() {\n this.closeSocket();\n },\n beforeDestroy() {\n //\n this.socket && this.socket.close();\n this.socket = null;\n }\n};","map":{"version":3,"names":["WS_URL","DEEP_LENGTH","fixDate","_getHomeList","mapGetters","name","props","symbol","type","String","price","showType","Number","default","selectValue","data","init","i","push","amount","greenData","redData","socket","approximately","computed","theme","mounted","getHomeList","watch","val","startDeepSocket","methods","then","res","numberText","close","numberLength","substring","indexOf","length","console","log","arry","str","j","newArry","map","item","obj","value","concat","slice","dataObj","$emit","closeSocket","WebSocket","onmessage","evt","code","_data","JSON","parse","handleDeep","deepData","asks","parseFloat","toFixed","bids","sort","prev","next","onPrice","activated","deactivated","beforeDestroy"],"sources":["src/components/trade-deep-data/index.vue"],"sourcesContent":["<template>\n <div class=\"deep-data\">\n <div class=\"flex justify-between text-grey font-24\">\n <div>\n <div>{{ $t(\"价格\") }}</div>\n <div class=\"mt-5\">(USDT)</div>\n </div>\n <div class=\"text-right items-end justify-end\">\n <div class=\"\">{{ $t(\"数量\") }}</div>\n <div class=\"mt-5\">({{ symbol.toUpperCase() || \"--\" }})</div>\n </div>\n </div>\n <div\n v-if=\"showType == 0 || showType == 1\"\n class=\"flex justify-between pt-6 pb-6 font-26\"\n v-for=\"(item, index) in greenData\"\n :key=\"index\"\n @click=\"onPrice(item.price)\"\n :style=\"{\n background:\n `linear-gradient(to right,${\n theme == 'dark' ? '#111111' : 'transparent'\n } 0%` +\n (item.amount / greenData[greenData.length - 1].amount) * 100 +\n '%,rgba(94,186,137,.1) ' +\n (item.amount / greenData[greenData.length - 1].amount) * 100 +\n '%,rgba(94,186,137,.1) 100%)',\n }\"\n >\n <div class=\"text-green\">{{ item.price || \"--\" }}</div>\n <div class=\"text-right textColor\" v-if=\"symbol == 'shib'\">\n {{ fixDate(item.amount, $i18n) || \"--\" }}\n </div>\n <div class=\"text-right textColor\" v-else>{{ item.amount || \"--\" }}</div>\n </div>\n <div class=\"\">\n <div class=\"text-red pt-16 font-34 font-700 text-center\">\n {{ approximately || \"--\" }}\n </div>\n <div class=\"approximately-text pb-10 font-20 text-center\">\n ≈{{ price || \"--\" }}\n </div>\n </div>\n <div\n v-if=\"showType == 0 || showType == 2\"\n class=\"flex justify-between pt-6 pb-6 font-26\"\n v-for=\"(item, index) in redData\"\n :key=\"item + index\"\n @click=\"onPrice(item.price)\"\n :style=\"{\n background:\n `linear-gradient(to right,${\n theme == 'dark' ? '#111111' : 'transparent'\n } 0%` +\n (item.amount / greenData[greenData.length - 1].amount) * 100 +\n '%,rgba(246,70,93,.1) ' +\n (item.amount / greenData[greenData.length - 1].amount) * 100 +\n '%,rgba(246,70,93,.1) 100%)',\n }\"\n >\n <div class=\"text-red\">{{ item.price || \"--\" }}</div>\n <div class=\"text-right textColor\" v-if=\"symbol == 'shib'\">\n {{ fixDate(item.amount, $i18n) || \"--\" }}\n </div>\n <div class=\"text-right textColor\" v-else>{{ item.amount || \"--\" }}</div>\n </div>\n </div>\n</template>\n\n<script>\nimport { WS_URL } from \"@/config\";\nlet DEEP_LENGTH = 6;\nimport { fixDate } from \"@/utils/utis\";\nimport { _getHomeList } from \"@/API/home.api\";\nimport { mapGetters } from \"vuex\";\nexport default {\n name: \"TradeDeepData\",\n props: {\n symbol: {\n type: String,\n },\n price: {\n type: String,\n },\n showType: {\n type: Number,\n default: 0,\n },\n selectValue: {\n type: Number,\n },\n },\n data() {\n const init = [];\n for (let i = 0; i < DEEP_LENGTH; i++) {\n init.push({ amount: \"\", price: \"\" });\n }\n return {\n fixDate,\n greenData: init,\n redData: init,\n socket: null,\n approximately: \"\",\n };\n },\n computed: {\n ...mapGetters({\n theme: \"home/theme\",\n }),\n },\n mounted() {\n // this.startDeepSocket()\n if (this.showType == 1 || this.showType == 2) {\n DEEP_LENGTH = 12;\n } else {\n DEEP_LENGTH = 6;\n }\n this.getHomeList();\n },\n watch: {\n symbol(val) {\n this.startDeepSocket();\n this.getHomeList();\n },\n showType(val) {\n if (val == 1 || val == 2) {\n DEEP_LENGTH = 12;\n } else {\n DEEP_LENGTH = 6;\n }\n },\n },\n methods: {\n getHomeList() {\n _getHomeList(this.symbol).then((res) => {\n let numberText = res[0].close;\n let numberLength = numberText.substring(\n numberText.indexOf(\".\") + 1,\n numberText.length\n ).length;\n console.log(numberLength);\n let arry = [];\n let str = \"0.\";\n for (let j = 0; j < numberLength - 1; j++) {\n str = str + \"0\";\n arry.push(str);\n }\n let newArry = [];\n arry.map((item) => {\n let obj = {\n name: item + \"1\",\n value:\n item.substring(item.indexOf(\".\") + 1, item.length).length + 1,\n };\n newArry.push(obj);\n });\n if (numberLength <= 2) {\n let obj = [\n {\n name: \"0.1\",\n value: 1,\n },\n {\n name: \"1\",\n value: -1,\n },\n {\n name: \"10\",\n value: -2,\n },\n {\n name: \"100\",\n value: -3,\n },\n ];\n newArry = newArry.concat(obj);\n }\n if (this.symbol == \"shib\") {\n newArry = newArry.slice(-4);\n }\n let dataObj = {\n arry: newArry,\n numberLength: numberLength,\n };\n this.$emit(\"getList\", dataObj);\n });\n },\n startDeepSocket() {\n // 开启socket链接\n this.closeSocket();\n console.log(\"start deep\");\n this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);\n this.socket.onmessage = (evt) => {\n const { data } = evt;\n const { code, data: _data } = JSON.parse(data);\n if (code / 1 === 0) {\n this.handleDeep(_data);\n }\n };\n },\n handleDeep(data) {\n // 格式化数据\n this.deepData = data;\n if (this.selectValue >= 1) {\n this.deepData.asks.map((item) => {\n item.price = parseFloat(item.price).toFixed(this.selectValue);\n });\n this.deepData.bids.map((item) => {\n item.price = parseFloat(item.price).toFixed(this.selectValue);\n });\n } else {\n if (this.selectValue == -1) {\n this.deepData.asks.map((item) => {\n item.price = item.price.substring(0, item.price.indexOf(\".\"));\n });\n this.deepData.bids.map((item) => {\n item.price = item.price.substring(0, item.price.indexOf(\".\"));\n });\n }\n if (this.selectValue == -2) {\n this.deepData.asks.map((item) => {\n item.price =\n item.price.substring(0, item.price.indexOf(\".\") - 1) + \"0\";\n });\n this.deepData.bids.map((item) => {\n item.price =\n item.price.substring(0, item.price.indexOf(\".\") - 1) + \"0\";\n });\n }\n if (this.selectValue == -3) {\n this.deepData.asks.map((item) => {\n item.price =\n item.price.substring(0, item.price.indexOf(\".\") - 2) + \"00\";\n });\n this.deepData.bids.map((item) => {\n item.price =\n item.price.substring(0, item.price.indexOf(\".\") - 2) + \"00\";\n });\n }\n // this.selectValue\n }\n const { asks, bids } = data;\n //获取小数位数\n this.redData = asks\n .sort((prev, next) => prev.price - next.price)\n .slice(0, DEEP_LENGTH);\n this.greenData = bids\n .sort((prev, next) => prev.price - next.price)\n .slice(0, DEEP_LENGTH);\n this.approximately = this.deepData.asks[1].price;\n },\n onPrice(price) {\n this.$emit(\"price\", price);\n },\n closeSocket() {\n this.socket && this.socket.close();\n this.socket = null;\n },\n },\n activated() {\n this.startDeepSocket();\n },\n deactivated() {\n this.closeSocket();\n },\n beforeDestroy() {\n //\n this.socket && this.socket.close();\n this.socket = null;\n },\n};\n</script>\n<style lang=\"scss\" scoped>\n.approximately-text {\n @include themify() {\n color: themed(\"text_color1\");\n }\n}\n</style>"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
