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