<template>
|
<!-- tab 交易 -->
|
<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">({{ symbolname || "--" }})</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,
|
},
|
symbolname: {
|
type: String,
|
default: "--",
|
},
|
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((a, b) => a.price - b.price)
|
.slice(0, DEEP_LENGTH);
|
// bids(买单)按价格降序排列(从高到低)
|
this.greenData = bids
|
.sort((a, b) => b.price - a.price)
|
.slice(0, DEEP_LENGTH);
|
// 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>
|
