m2pool_web_frontend/mining-pool/src/views/home/index.js

1692 lines
60 KiB
JavaScript
Raw Normal View History

import { watch } from "vue";
import { getCoinInfo, getPoolPower, getMinerCount, getLuck, getBlockInfo, getNetPower, getParam } from "../../api/home"
import { line } from "../../utils/echarts";
import * as echarts from "echarts";
import { Debounce, throttle } from "../../utils/publicMethods";
export default {
data() {
return {
activeName: "second",
option: {
tooltip: {
trigger: "axis",
//解决tooltip显示不全问题1
confine: true,
formatter: function (params) {
var res
res = params[0].axisValueLabel;
for (let i = 0; i <= params.length - 1; i++) {
if (params[i].seriesName == "Currency Price" || params[i].seriesName == "币价") {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value} USD</span>`
} else {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}</span>`
}
}
return res;
},
},
legend: {
right: "30",
},
// grid: {//解决Y轴显示不全
// left: "10%",//10%
// containLabel: true
// },
grid: {
left: "10%",
right: "15%",
top: "20%",
bottom: "12%",
},
xAxis: {
// type: "time",
boundaryGap: false,
// axisTick: {
// //去除刻度
// show: false,
// },
// axisLine: {
// //去除轴线
// show: false,
// },
data: []
},
yAxis: [
{
// position: "left",
type: "value",
name: "GH/s",
nameTextStyle: {
padding: [0, 0, 0, -40],
},
// min: `dataMin`,
// max: `dataMax`,
axisLabel: {
formatter: function (value) {
// let data
// if (value > 10000000) {
// data = `${(value / 10000000)} KW`
// } else if (value > 1000000) {
// data = `${(value / 1000000)} M`
// } else if (value / 10000) {
// data = `${(value / 10000)} W`
// }
return value
}
}
},
{
position: "right",
// type: "log",
// splitNumber: "5",
show: true,
// min: 0,
// max: this.maxValue,
splitLine: {//不显示右侧Y轴横线
show: false
},
name: "USD",
nameTextStyle: {
padding: [0, 0, 0, 40],
}
},
],
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
maxSpan: 100,
minSpan: 2,
animation: false,
},
{
type: "inside",//slider
start: 0,
end: 100,
// showDetail: false,
},
],
series: [
{
name: "Computational power",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#5721E4",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#5721E4",
width: "2",
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(210,195,234)'
},
{
offset: 1,
color: 'rgb(255, 255, 255)'
}
])
},
zlevel: 1, z: 1,
data: [],
},
{
name: "Refusal rate",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#FE2E74",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#FE2E74",
width: "2",
},
areaStyle: {
origin: 'start',//颜色始终显示在线条下
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(252,220,233)'
},
{
offset: 1,
color: 'rgb(255, 255, 255)'
}
])
},
data: [],
yAxisIndex: 1,
zlevel: 2, z: 2,
},
],
},
minerOption: {
legend: {
right: "50",
formatter: function (name) {
return name;
},
},
tooltip: {
trigger: "axis",
textStyle: {
align: "left",
},
animation: false,
confine: true,
formatter: function (params) {
var res = params[0].axisValueLabel;
for (let i = 0; i <= params.length - 1; i++) {
if (params[i].seriesName == "Currency Price" || params[i].seriesName == "币价") {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value} USD</span>`
} else {
res += `</br>${params[i].marker} ${params[i].seriesName} &nbsp&nbsp&nbsp&nbsp <span style="font-weight: bold">${params[i].value}</span>`
}
}
return res;
},
// axisPointer: {
// animation: false,
// snap: true,
// label: {
// precision: 2, //坐标轴保留的位数
// },
// type: "cross", //cross shadow
// crossStyle: {
// //十字轴横线
// // opacity: "0",
// width: 0.5,
// },
// lineStyle: {
// // opacity: 0,
// },
// },
},
grid: {
left: "10%",
right: "15%",
top: "20%",
bottom: "12%",
},
xAxis: {
// type: "time",
boundaryGap: false,
axisTick: {
//去除刻度
show: false,
},
axisLine: {
//去除轴线
show: false,
},
data: []
},
yAxis: [
{
position: "left",
type: "value",
// min: `dataMin`,
// max: `dataMax`,
name: "GH/s",
nameTextStyle: {
padding: [0, 0, 0, -40],
2025-06-13 06:58:47 +00:00
},
axisLabel: {
formatter: function (value) {
// let data
// if (value > 10000000) {
// data = `${(value / 10000000)} KW`
// } else if (value > 1000000) {
// data = `${(value / 1000000)} M`
// } else if (value / 10000) {
// data = `${(value / 10000)} W`
// }
return value
}
}
},
{
position: "right",
// type: "log",
// splitNumber: "5",
show: true,
// min: 0,
// max: this.maxValue,
splitLine: {//不显示右侧Y轴横线
show: false
},
name: "USD",
nameTextStyle: {
padding: [0, 0, 0, 40],
}
},
],
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
maxSpan: 100,
minSpan: 2,
animation: false,
},
{
type: "inside",//slider
start: 0,
end: 100,
// showDetail: false,
},
],
series: [
{
name: "全网算力",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#5721E4",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#5721E4",
width: "2",
},
areaStyle: {
origin: 'start',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(210,195,234)'
},
{
offset: 1,
color: 'rgb(255, 255, 255)'
}
])
},
data: [],
},
{
name: "币价",
type: "line",
smooth: false, //线条是否圆滑
symbol: "circle",
symbolSize: 5,
showSymbol: false,
itemStyle: {
color: "#FE2E74",
borderColor: "rgba(221,220,107,0.1)",
borderWidth: 12,
},
lineStyle: {
//线条样式
color: "#FE2E74",
width: "2",
},
// rgb(253,64,128)
areaStyle: {
origin: 'start',//颜色始终显示在线条下
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(252,220,233)'
},
{
offset: 1,
color: 'rgb(255, 255, 255)'
}
])
},
data: [],
yAxisIndex: 1,
zlevel: 2, z: 2,
},
],
},
CountOption: { ...line },
powerDialogVisible: false,
minerDialogVisible: false,
currentPage: 1,
currency: "nexa",
currencyPath: `${this.$baseApi}img/nexa.png`,
currencyList: [
{
path: "nexaAccess",
value: "nexa",
label: "nexa",
img: require("../../assets/img/currency-nexa.png"),
imgUrl: `${this.$baseApi}img/nexa.png`,
name: "course.NEXAcourse",
show: true,
amount: 10000,
},
{
path: "grsAccess",
value: "grs",
label: "grs",
img: require("../../assets/img/currency/grs.svg"),
imgUrl: `${this.$baseApi}img/grs.svg`,
name: "course.GRScourse",
show: true,
amount: 1,
},
{
path: "monaAccess",
value: "mona",
label: "mona",
img: require("../../assets/img/currency/mona.svg"),
imgUrl: `${this.$baseApi}img/mona.svg`,
name: "course.MONAcourse",
show: true,
amount: 1,
},
{
path: "dgbsAccess",
value: "dgbs",
// label: "dgb-skein-pool1",
label: "dgb(skein)",
img: require("../../assets/img/currency/DGB.svg"),
imgUrl: `${this.$baseApi}img/dgb.svg`,
name: "course.dgbsCourse",
show: true,
amount: 1,
},
{
path: "dgbqAccess",
value: "dgbq",
// label: "dgb(qubit-pool1)",
label: "dgb(qubit)",
img: require("../../assets/img/currency/DGB.svg"),
imgUrl: `${this.$baseApi}img/dgb.svg`,
name: "course.dgbqCourse",
show: true,
amount: 1,
},
{
path: "dgboAccess",
value: "dgbo",
// label: "dgb-odocrypt-pool1",
label: "dgb(odocrypt)",
img: require("../../assets/img/currency/DGB.svg"),
imgUrl: `${this.$baseApi}img/dgb.svg`,
name: "course.dgboCourse",
show: true,
amount: 1,
},
{
path: "rxdAccess",
value: "rxd",
label: "radiant(rxd)",
img: require("../../assets/img/currency/rxd.png"),
imgUrl: `${this.$baseApi}img/rxd.png`,
name: "course.RXDcourse",
show: true,
amount: 100,
},
{
path: "enxAccess",
value: "enx",
label: "Entropyx(enx)",
img: require("../../assets/img/currency/enx.svg"),
imgUrl: `${this.$baseApi}img/enx.svg`,
name: "course.ENXcourse",
show: true,
amount: 5000,
},
{
path: "alphminingPool",
value: "alph",
label: "alephium",
img: require("../../assets/img/currency/alph.svg"),
imgUrl: `${this.$baseApi}img/alph.svg`,
name: "course.alphCourse",
show: true,
amount: 1,
},
// { //告知已删除此币种 Radiant
// value: "dgb2_odo",
// label: "dgb-odocrypt-pool2",
// img: require("../../assets/img/currency/DGB.svg"),
// imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
// },
// {
// value: "dgb_qubit_a10",
// label: "dgb-qubit-pool2",
// img: require("../../assets/img/currency/DGB.svg"),
// imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
// },
// {
// value: "dgb_skein_a10",
// label: "dgb-skein-pool2",
// img: require("../../assets/img/currency/DGB.svg"),
// imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
// },
// {
// value: "dgb_odo_b20",
// label: "dgb-odoscrypt-pool3",
// img: require("../../assets/img/currency/DGB.svg"),
// imgUrl: "https://s2.coinmarketcap.com/static/img/coins/64x64/109.png",
// },
],
params: {
coin: "nexa",
interval: "rt",
},
PowerParams: {
coin: "nexa",
interval: "rt",
},
BlockInfoParams: {
coin: "nexa",
limit: 10,
page: 1,
},
CoinData: {
algorithm: "",
height: "",
totalDifficulty: "",
totalPower: "",
price: "",
poolPower: "",
poolMc: "",
},
luckData: {
luck3d: "96.26 %",
luck7d: "96.26 %",
luck30d: "96.26 %",
luck90d: "96.26 %",
},
BlockInfoData: [
// {
// height: "847545",
// date: "2024-06-12 09:11:57",
// hash: "00000…9392577",
// reward: "3.12500000",
// fees: "0.40962024",
// },
// {
// height: "847545",
// date: "2024-06-12 09:11:57",
// hash: "00000…9942577",
// reward: "3.12500000",
// fees: "0.40962024",
// }, {
// height: "847545",
// date: "2024-06-12 09:11:57",
// hash: "00000…9925757",
// reward: "3.12500000",
// fees: "0.40962024",
// }, {
// height: "847545",
// date: "2024-06-12 09:11:57",
// hash: "00000…9925677",
// reward: "3.12500000",
// fees: "0.40962024",
// }, {
// height: "847545",
// date: "2024-06-12 09:11:57",
// hash: "00000…9925877",
// reward: "3.12500000",
// fees: "0.40962024",
// }, {
// height: "847545",
// date: "2024-06-12 09:11:57",
// hash: "00000…9928577",
// reward: "3.12500000",
// fees: "0.40962024",
// },
],
intervalList: [
// {
// value: "1h",
// label: "home.hour",
// },
{
value: "rt",
label: "home.realTime",
},
{
value: "1d",
label: "home.day",
},
],
offset: 0,
itemWidth: 30, // 每个小容器(包含图片)的宽度
listWidth: 1000, // 整个图片列表的宽度10 个小容器的宽度总和)
itemActive: "nexa",
timeActive: "rt",
powerActive: true,
minerChartLoading: false,
newBlockInfoData: [
// {
// height:"556",
// date:"",
// hash:"SDJFIOSJISJIODJIFJ",
// reward:"545",
// fees:"56",
// },
// {
// height:"5556",
// date:"",
// hash:"SDJFIOSJISJ66IODJIFJ",
// reward:"5465",
// fees:"56",
// },
// {
// height:"5556",
// date:"",
// hash:"SDJFIOSJISJ66IODJIFJ",
// reward:"5465",
// fees:"56",
// },
// {
// height:"5556",
// date:"",
// hash:"SDJFIOSJISJ66IODJIFJ",
// reward:"5465",
// fees:"56",
// },
// {
// height:"5556",
// date:"",
// hash:"SDJFIOSJISJ66IODJIFJ",
// reward:"5465",
// fees:"56",
// },
// {
// height:"5556",
// date:"",
// hash:"SDJFIOSJISJ66IODJIFJ",
// reward:"5465",
// fees:"56",
// },
// {
// height:"5556",
// date:"",
// hash:"SDJFIOSJISJ66IODJIFJ",
// reward:"5465",
// fees:"56",
// },
// {
// height:"5556",
// date:"",
// hash:"SDJFIOSJISJ66IODJIFJ",
// reward:"5465",
// fees:"56",
// },
],
reportBlockLoading: false,
BlockShow: true,
showCalculator: false,
value: "nexa",
input3: "",
select: "GH/s",
selectTime: [
{
value: "day",
label: "home.everyDay",
},
{
value: "week",
label: "home.weekly",
},
{
value: "month",
label: "home.monthly",
},
{
value: "year",
label: "home.annually",
},
],
time: "day",
input: "",
inputPower: 1,
profit: "",
factor: "",
CalculatorData: {
hpb: "10",
reward: "20",
price: "30",
costTime: "600",
poolFee: "0.15",
},
transactionFeeList: [//没有交易费
{
label: "grs",
coin: "grs",
feeShow: false,
},
{
label: "mona",
coin: "mona",
feeShow: false,
},
{
label: "radiant",
coin: "rxd",
feeShow: false,
},
// {
// label:"dgb(skein)",
// coin: "dgbs",
// feeShow: false,
// },
// {
// coin: "dgbq",
// label:"dgb(qubit)",
// feeShow: false,
// },
// {
// coin: "dgbo",
// label: "dgb(odocrypt)",
// feeShow: false,
// },
],
FeeShow: true,
lang: 'en',
activeItemCoin: {
value: "nexa",
label: "nexa",
img: require("../../assets/img/currency-nexa.png"),
imgUrl: `${this.$baseApi}img/nexa.png`,
},
isInternalChange: false,
};
},
watch: {
"$i18n.locale": (val) => {
location.reload();//刷新页面 刷新echarts
},
activeItemCoin: {
handler(newVal) {
// 防止无限循环
if (this.isInternalChange) {
return;
}
this.handleActiveItemChange(newVal);
},
deep: true
}
},
mounted() {
this.lang = this.$i18n.locale; // 初始化语言值
this.$addStorageEvent(1, `activeItemCoin`, JSON.stringify(this.currencyList[0]))
this.minerChartLoading = true
if (this.$isMobile) {
this.option.yAxis[1].show = false
this.option.grid.left = "16%"
this.option.grid.right = "5%"
this.option.grid.top = "10%"
this.option.grid.bottom = "45%"
this.option.legend.bottom = 5
this.option.legend.right = "30%"
this.option.xAxis.axisLabel = {
interval: 8,
rotate: 70
}
this.minerOption.yAxis[1].show = false
this.minerOption.grid.left = "16%"
this.minerOption.grid.right = "5%"
this.minerOption.grid.top = "10%"
this.minerOption.grid.bottom = "45%"
this.minerOption.legend.bottom = 5
this.minerOption.legend.right = "30%"
this.minerOption.xAxis.axisLabel = {
interval: 8,
rotate: 70
}
}else{ //动态计算图表的grid.left 让左侧的Y轴标签显示完全
const yAxis = this.option.yAxis[0]; // 第一个 Y 轴
const maxValue = Math.max(...this.option.series[0].data); // 获取数据最大值
const formatter = yAxis.axisLabel.formatter;
const formattedValue = formatter(maxValue); // 格式化最大值
2025-06-13 06:58:47 +00:00
// 创建一个临时 DOM 元素计算宽度
const tempDiv = document.createElement('div');
tempDiv.style.position = 'absolute';
tempDiv.style.visibility = 'hidden';
tempDiv.style.fontSize = '12px'; // 与 axisLabel.fontSize 一致
tempDiv.innerText = formattedValue;
document.body.appendChild(tempDiv);
const labelWidth = tempDiv.offsetWidth;
document.body.removeChild(tempDiv);
// 动态设置 grid.left加上安全边距
const safeMargin = 20;
this.option.grid.left = labelWidth + safeMargin + 'px';
2025-06-13 06:58:47 +00:00
// ------------全网算力图---------------
//
const yAxis2 = this.minerOption.yAxis[0]; // 第一个 Y 轴
const maxValue2 = Math.max(...this.minerOption.series[0].data); // 获取数据最大值
const formatter2 = yAxis2.axisLabel.formatter;
const formattedValue2 = formatter2(maxValue2); // 格式化最大值
// 创建一个临时 DOM 元素计算宽度
const tempDiv2 = document.createElement('div');
tempDiv2.style.position = 'absolute';
tempDiv2.style.visibility = 'hidden';
tempDiv2.style.fontSize = '12px'; // 与 axisLabel.fontSize 一致
tempDiv2.innerText = formattedValue2;
document.body.appendChild(tempDiv2);
const labelWidth2 = tempDiv2.offsetWidth;
document.body.removeChild(tempDiv2);
// 动态设置 grid.left加上安全边距
const safeMargin2 = 20;
this.minerOption.grid.left = labelWidth2 + safeMargin2 + 'px';
}
this.getBlockInfoData(this.BlockInfoParams)
this.getCoinInfoData(this.params)
this.getPoolPowerData(this.PowerParams)
// 注册需要在网络恢复后自动重新调用的方法
this.registerRecoveryMethod('getCoinInfoData', this.params);
this.registerRecoveryMethod('getPoolPowerData', this.PowerParams);
this.registerRecoveryMethod('getBlockInfoData', this.BlockInfoParams);
this.$addStorageEvent(1, `currencyList`, JSON.stringify(this.currencyList))
if (this.$refs.select) {
this.$refs.select.$el.children[0].children[0].setAttribute('style', "background:url(https://test.m2pool.com/img/nexa.png) no-repeat 10PX;background-size: 20PX 20PX;color:#333;padding-left: 30PX;");
}
this.fetchParam({ coin: this.params.coin })
this.minerChartLoading = false
// let activeItemCoin =localStorage.getItem(`activeItemCoin`)
// this.activeItemCoin=JSON.parse(activeItemCoin)
window.addEventListener("setItem", () => {
let value = localStorage.getItem(`activeItemCoin`)
this.activeItemCoin = JSON.parse(value)
});
},
methods: {
2025-06-13 06:58:47 +00:00
handelOptionYAxis(option){
const yAxis = option.yAxis[0]; // 第一个 Y 轴
const maxValue = Math.max(...option.series[0].data); // 获取数据最大值
const formatter = yAxis.axisLabel.formatter;
const formattedValue = formatter(maxValue); // 格式化最大值
// 创建一个临时 DOM 元素计算宽度
const tempDiv = document.createElement('div');
tempDiv.style.position = 'absolute';
tempDiv.style.visibility = 'hidden';
tempDiv.style.fontSize = '12px'; // 与 axisLabel.fontSize 一致
tempDiv.innerText = formattedValue;
document.body.appendChild(tempDiv);
const labelWidth = tempDiv.offsetWidth;
document.body.removeChild(tempDiv);
// 动态设置 grid.left加上安全边距
const safeMargin = 20;
option.grid.left = labelWidth + safeMargin + 'px';
return option
},
slideLeft() {
const allLength = this.currencyList.length * 120
const boxLength = document.getElementById('list-box').clientWidth
if (allLength < boxLength) return
const listEl = document.getElementById('list')
const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
if (leftMove + boxLength - 360 < boxLength) {
// 到最开始的时候
listEl.style.left = '0PX'
} else {
listEl.style.left = '-' + (leftMove - 360) + 'PX'
}
},
//初始化图表
inCharts() {
if (this.myChart == null) {
this.myChart = echarts.init(document.getElementById("chart"));
}
// this.maxValue = Math.round(this.maxValue * 3)
// if (this.maxValue > 0) {
// this.option.yAxis[1].max = this.maxValue
// }
// this.option.legend.show = false
this.option.series[0].name = this.$t(`home.computingPower`)
this.option.series[1].name = this.$t(`home.currencyPrice`)
this.myChart.setOption(this.option);
// 回调函数,在渲染完成后执行
this.myChart.on('finished', () => {
// 在这里执行显示给用户的操作
// console.log('图表渲染完成,显示给用户');
this.minerChartLoading = false
});
// window.addEventListener("resize", () => {
// if (this.myChart) this.myChart.resize();
// });
window.addEventListener('resize', throttle(() => {
if (this.myChart) this.myChart.resize();
}, 200));
},
inChartsMiner() {
if (this.MinerChart == null) {
this.MinerChart = echarts.init(document.getElementById("minerChart"));
}
2025-06-13 06:58:47 +00:00
this.minerOption= this.handelOptionYAxis(this.minerOption) // Y轴文字显示动态调整grid.left
this.minerOption.series[0].name = this.$t(`home.networkPower`)
this.minerOption.series[1].name = this.$t(`home.currencyPrice`)
this.MinerChart.setOption(this.minerOption);
// 回调函数,在渲染完成后执行
this.MinerChart.on('finished', () => {
// console.log('图表渲染完成,显示给用户');
this.minerChartLoading = false
});
window.addEventListener('resize', throttle(() => {
if (this.MinerChart) this.MinerChart.resize();
}, 200));
},
countInCharts() {
this.countChart = echarts.init(document.getElementById("minerChart"));
this.countChart.setOption(this.CountOption);
// window.addEventListener("resize", () => {
// if (this.myChart) this.myChart.resize();
// });
},
async fetchParam(params) {
try {
const data = await getParam(params)
if (data && data.code == 200) {
this.CalculatorData = data.data
} else {
for (const key in this.CalculatorData) {
this.CalculatorData[key] = 0
}
}
this.calculateIncome(this.CalculatorData)
} catch (error) {
console.log(error, 'error')
}
},
//获取币种信息
// async getCoinInfoData(params) {
// const data = await getCoinInfo(params)
// if (data && data.code == 200) {
// this.CoinData = data.data
// // this.CoinData.poolPower =Number(this.CoinData.poolPower) .toFixed(2)//算力保留两位小数
// // this.CoinData.price =this.CoinData.price.toFixed(8)
// }
// },
getCoinInfoData: Debounce(async function (params) {
const data = await getCoinInfo(params)
if (data && data.code == 200) {
this.CoinData = data.data
// this.CoinData.poolPower =Number(this.CoinData.poolPower) .toFixed(2)//算力保留两位小数
// this.CoinData.price =this.CoinData.price.toFixed(8)
} else {
this.CoinData = {}
}
}, 200),
getPoolPowerData: Debounce(async function (params) {
// this.minerChartLoading = true
this.setLoading('minerChartLoading', true);
try {
const data = await getPoolPower(params)
if (!data) {
// this.minerChartLoading = false
this.setLoading('minerChartLoading', false);
if (this.myChart) {
this.myChart.dispose()//销毁图表实列
}
return
}
let chartData = data.data
let xData = []
let pvData = []
let rejectRate = []
let price = []
chartData.forEach(item => {
if (item.date.includes(`T`) && params.interval == `rt`) {
item.date = `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
} else if (item.date.includes(`T`) && params.interval == `1d`) {
item.date = item.date.split("T")[0]
}
xData.push(item.date)
pvData.push(Number(item.pv).toFixed(2))
// rejectRate.push((item.rejectRate * 100).toFixed(2))
if (item.price == 0) {
price.push(item.price)
} else if (item.price < 1) {
price.push(Number(item.price).toFixed(8))
} else {
price.push(Number(item.price).toFixed(2))
}
});
// this.maxValue = Math.max(...rejectRate);
// let leftYMaxData = Math.max(...pvData);
// this.option.yAxis[0].max =leftYMaxData*2
this.option.xAxis.data = xData
this.option.series[0].data = pvData
// this.option.series[1].data = rejectRate
this.option.series[1].data = price
this.$nextTick(() => {
this.inCharts()
})
} catch {
console.error('获取数据失败:', error);
} finally {
// 确保无论成功失败都设置loading为false
this.setLoading('minerChartLoading', false);
}
}, 200),
async fetchNetPower(params) {
// this.minerChartLoading = true
this.setLoading('minerChartLoading', true);
const data = await getNetPower(params)
if (!data) {
this.minerChartLoading = false
if (this.MinerChart) {
this.MinerChart.dispose()
}
return
}
let MinerCount = data.data
let xData = []
let pvData = []
let price = []
MinerCount.forEach(item => {
if (item.date.includes(`T`) && params.interval == `rt`) {
item.date = `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
} else if (item.date.includes(`T`) && params.interval == `1d`) {
item.date = item.date.split("T")[0]
}
xData.push(item.date)
pvData.push(Number(item.pv).toFixed(2))
if (item.price == 0) {
price.push(item.price)
} else if (item.price < 1) {
price.push(Number(item.price).toFixed(8))
} else {
price.push(Number(item.price).toFixed(2))
}
});
this.minerOption.xAxis.data = xData
this.minerOption.series[0].data = pvData
this.minerOption.series[1].data = price
this.$nextTick(() => {
this.inChartsMiner()
})
// this.minerChartLoading = false
this.setLoading('minerChartLoading', false);
},
// async getMinerCountData(params) {
// this.minerChartLoading = true
// const data = await getMinerCount(params)
// if (!data) {
// this.minerChartLoading = false
// if (this.MinerChart) {
// this.MinerChart.dispose()
// }
// return
// }
// let MinerCount = data.data
// let xData = []
// let Count = []
// MinerCount.forEach((item) => {
// if (item.date.includes(`T`)) {
// // item.date= `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
// xData.push(`${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`)
// } else {
// xData.push(item.date)
// }
// Count.push(item.value)
// })
// this.minerOption.xAxis.data = xData
// this.minerOption.series[0].data = Count
// this.$nextTick(() => {
// this.inChartsMiner()
// })
// this.minerChartLoading = false
// },
getMinerCountData: Debounce(async function (params) {
// this.minerChartLoading = true
this.setLoading('minerChartLoading', true);
const data = await getMinerCount(params)
if (!data) {
this.minerChartLoading = false
if (this.MinerChart) {
this.MinerChart.dispose()
}
return
}
let MinerCount = data.data
let xData = []
let Count = []
MinerCount.forEach((item) => {
if (item.date.includes(`T`)) {
// item.date= `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
xData.push(`${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`)
} else {
xData.push(item.date)
}
Count.push(item.value)
})
this.minerOption.xAxis.data = xData
this.minerOption.series[0].data = Count
this.$nextTick(() => {
this.inChartsMiner()
})
this.setLoading('minerChartLoading', false);
// this.minerChartLoading = false
}, 200),
getBlockInfoData: Debounce(async function (params) {
try {
// this.reportBlockLoading = true
this.setLoading('reportBlockLoading', true);
const data = await getBlockInfo(params)
if (data && data.code == 200) {
this.BlockShow = true
this.newBlockInfoData = []
this.BlockInfoData = data.rows
if (!this.BlockInfoData[0]) {
// this.reportBlockLoading = false
this.setLoading('reportBlockLoading', false);
return
}
this.BlockInfoData.forEach((item, index) => {
item.date = `${item.date.split("T")[0]} ${item.date.split("T")[1].split(`.`)[0]}`
if (index < 8) {
this.newBlockInfoData.push(item)
}
})
} else {
this.BlockShow = false
}
this.setLoading('reportBlockLoading', false);
// this.reportBlockLoading = false
} catch (error) {
console.error('获取区块信息失败:', error);
this.BlockShow = false;
}finally {
// 确保在任何情况下都会重置 loading 状态
this.setLoading('reportBlockLoading', false);
}
}, 200),
calculateIncome(data) {
for (const key in this.CalculatorData) {
if (!this.CalculatorData[key]) {
this.profit = 0
// var myDiv = document.getElementById('myDiv');
// this.disableElement(myDiv);
return
}
}
// 收益计算器实现算法:
// 每日币收益 = (目标算力 / 全网算力)* 全网每日出块 * 单个块奖励 * (1 - 矿池手续费率)
// 每日美元收益 = 每日币收益 * 币价(美元计)
let target_hashrate
switch (this.select) {
case `GH/s`://GH/S吉哈希每秒1 GH/S 就是 1×10^9 哈希每秒。
target_hashrate = this.inputPower * Math.pow(10, 9)
break;
case `MH/s`://MH/S兆哈希每秒1 MH/S 是 1×10^6 哈希每秒
target_hashrate = this.inputPower * Math.pow(10, 6)
break;
case `TH/s`:// TH/S太哈希每秒1 TH/S 是 1×10^12 哈希每秒
target_hashrate = this.inputPower * Math.pow(10, 12)
break;
default:
break;
}
// 这里从response中解析出全网算力、矿池算力、区块奖励
const net_hashrate = this.CalculatorData.netHashrate // 全网算力,这里的数据是模拟的实际数据从response中解析
const reward = this.CalculatorData.reward// 区块奖励, 同上
// 计算
const target_hashrate_ratio = target_hashrate / net_hashrate // 用户算力全网占比
const per_day_reward = (reward * (1 - this.CalculatorData.poolFee)) * this.CalculatorData.count // 全网每日奖励
const result = target_hashrate_ratio * per_day_reward
switch (this.time) {
case "day":
this.profit = result.toFixed(8)
// this.profit = Math.floor(result * 1e10) / 1e10;
// this.profit = this.toFixedNoRound(result, 10);
break;
case "week":
this.profit = (result * 7).toFixed(8)
// this.profit = Math.floor(result * 7 * 1e10) / 1e10;
// this.profit = this.toFixedNoRound(result * 7, 10);
break;
case "month":
this.profit = (result * 30).toFixed(8)
// this.profit = Math.floor(result * 30 * 1e10) / 1e10;
// this.profit = this.toFixedNoRound(result * 30, 10);
break;
case "year":
this.profit = (result * 365).toFixed(8)
// this.profit = Math.floor(result * 365 * 1e10) / 1e10;
// this.profit = this.toFixedNoRound(result * 365, 10);
break;
default:
break;
}
const nexaFormatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 2, // 强制显示 2 位小数(不足补零)
maximumFractionDigits: 2, // 可选:限制最多 2 位小数(避免多余位数)
useGrouping: true, // 不使用千位分隔符(如 1,000
});
if (this.value == "nexa") {
this.profit = nexaFormatter.format(this.profit);
} else {
const formatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 8, // 强制显示足够多的小数位
useGrouping: true, // 不使用千位分隔符(如 1,000
});
this.profit = formatter.format(this.profit);
}
// const formatter = new Intl.NumberFormat("en-US", {
// minimumFractionDigits: 8, // 强制显示足够多的小数位
// useGrouping: false, // 不使用千位分隔符(如 1,000
// });
// this.profit = formatter.format(this.profit);
},
toFixedNoRound(value, decimals = 10) {//保留10位小数 不四舍五入
const factor = 10 ** decimals;
return (value < 0 ? Math.ceil(value * factor) : Math.floor(value * factor)) / factor;
},
ProfitCalculator(target_hashrate, fee) {
// 收益计算器实现算法:
// 每日币收益 = (目标算力 / 全网算力)* 全网每日出块 * 单个块奖励 * (1 - 矿池手续费率)
// 每日美元收益 = 每日币收益 * 币价(美元计)
// 这里从response中解析出全网算力、矿池算力、区块奖励
const net_hashrate = 5646.62 // 全网算力,这里的数据是模拟的实际数据从response中解析
const reward = 10000000 // 区块奖励, 同上
// 计算
const target_hashrate_ratio = target_hashrate / net_hashrate // 用户算力全网占比
const per_day_reward = (reward * (1 - fee)) * 720 // 全网每日奖励
const result = target_hashrate_ratio * per_day_reward
return result
},
//禁用
disableElement(element) {
element.setAttribute('data-disabled', true);
element.style.pointerEvents = 'none'; // 阻止鼠标事件
element.style.opacity = '0.5'; // 设置半透明度
// 其他CSS样式可以根据需要添加
},
handelProfitCalculation() {
for (const key in this.CalculatorData) {
if (!this.CalculatorData[key]) {
// this.$message({
// message: this.$t(`home.acquisitionFailed`),
// type: "error",
// });
this.profit = 0
// var myDiv = document.getElementById('myDiv');
// this.disableElement(myDiv);
this.fetchParam({ coin: this.params.coin })
return
}
}
this.showCalculator = true
},
handelClose() {
this.showCalculator = false
},
changeSelection(scope) {
let brand = scope
for (let index in this.currencyList) {
let aa = this.currencyList[index];
let value = aa.value;
if (brand === value) {
this.$refs.select.$el.children[0].children[0].setAttribute('style', "background:url(" + aa.imgUrl + ") no-repeat 10PX;background-size: 20PX 20PX;color:#333;padding-left: 35PX;");
}
}
this.fetchParam({ coin: this.value })
},
handelJump(url) {
if (url === '/AccessMiningPool') {
const coin = this.currencyList.find(item => item.value === this.params.coin);
if (!coin) return;
let jumpName = coin.path.charAt(0).toUpperCase() + coin.path.slice(1) //name跳转 首字母大写
// 使用 name 进行导航,避免重复的路由参数
this.$router.push({
name: jumpName,
params: {
lang: this.lang,
coin: this.params.coin,
imgUrl: this.currencyPath
},
replace: false // 保留历史记录,允许回退
});
} else {
// 移除开头的斜杠,统一处理路径格式
const cleanPath = url.startsWith('/') ? url.slice(1) : url;
this.$router.push(`/${this.lang}/${cleanPath}`);
}
},
handelCalculation() {
this.calculateIncome()
},
// 获取单个币种项目的完整宽度包含margin
getItemFullWidth() {
const listEl = this.$refs.currencyList;
if (!listEl) return 120;
const firstItem = listEl.querySelector('.list-item');
if (!firstItem) return 120;
const style = window.getComputedStyle(firstItem);
const width = firstItem.offsetWidth;
const marginLeft = parseInt(style.marginLeft) || 0;
const marginRight = parseInt(style.marginRight) || 0;
return width + marginLeft + marginRight;
},
2025-05-16 08:53:11 +00:00
// 左滑动逻辑
scrollLeft() {
2025-05-16 08:53:11 +00:00
const allLength = this.currencyList.length * 120
const boxLength = document.getElementById('list-box').clientWidth
if (allLength < boxLength) return
const listEl = document.getElementById('list')
const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
if (leftMove + boxLength - 360 < boxLength) {
// 到最开始的时候
listEl.style.left = '0PX'
} else {
2025-05-16 08:53:11 +00:00
listEl.style.left = '-' + (leftMove - 360) + 'PX'
}
2025-05-16 08:53:11 +00:00
},
// 右滑动逻辑
scrollRight() {
const allLength = this.currencyList.length * 120
const boxLength = document.getElementById('list-box').clientWidth
if (allLength < boxLength) return
const listEl = document.getElementById('list')
const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
if (leftMove + boxLength + 360 > allLength) {
listEl.style.left = '-' + (allLength - boxLength) + 'PX'
} else {
2025-05-16 08:53:11 +00:00
listEl.style.left = '-' + (leftMove + 360) + 'PX'
}
2025-05-16 08:53:11 +00:00
},
// // 左滑动逻辑
// scrollLeft() {
// const allLength = this.currencyList.length * 120
// const boxLength = document.getElementById('list-box').clientWidth
// if (allLength < boxLength) return
// const listEl = document.getElementById('list')
// const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
// if (leftMove + boxLength - 360 < boxLength) {
// // 到最开始的时候
// listEl.style.left = '0PX'
// } else {
// listEl.style.left = '-' + (leftMove - 360) + 'PX'
// }
// },
// // 右滑动逻辑
// scrollRight() {
// const allLength = this.currencyList.length * 120
// const boxLength = document.getElementById('list-box').clientWidth
// if (allLength < boxLength) return
// const listEl = document.getElementById('list')
// const leftMove = Math.abs(parseInt(window.getComputedStyle(listEl, null)?.left))
// if (leftMove + boxLength + 360 > allLength) {
// listEl.style.left = '-' + (allLength - boxLength) + 'PX'
// } else {
// listEl.style.left = '-' + (leftMove + 360) + 'PX'
// }
// },
handleActiveItemChange(item) {
if (!item) return;
this.currency = item.label;
this.currencyPath = item.imgUrl;
this.params.coin = item.value;
console.log(this.params.coin, "item");
this.BlockInfoParams.coin = item.value;
this.itemActive = item.value;
this.PowerParams.coin = item.value;
// 调用相关数据更新方法
this.getCoinInfoData(this.params);
this.getBlockInfoData(this.BlockInfoParams);
if (this.powerActive) {
this.handelPower();
} else {
this.handelMiner();
}
this.handelCoinLabel(item.value);
},
clickCurrency(item) {
if (!item) return;
// 设置标记,防止触发 watch
this.isInternalChange = true;
this.activeItemCoin = item;
this.$addStorageEvent(1, `activeItemCoin`, JSON.stringify(item))
// this.currency = item.label
// this.currencyPath = item.imgUrl
// this.params.coin = item.value
// this.BlockInfoParams.coin = item.value
// this.itemActive = item.value
// this.PowerParams.coin = item.value
// this.getCoinInfoData(this.params)
// this.getBlockInfoData(this.BlockInfoParams)
// 在下一个事件循环中重置标记
this.$nextTick(() => {
this.isInternalChange = false;
});
// 直接调用处理方法
this.handleActiveItemChange(item);
},
clickReportBlock() {
this.$router.push({
path: `/${this.lang}/reportBlock`,
query: {
coin: this.params.coin,
imgUrl: this.currencyPath
}
});
},
handleClick(tab, event) {
},
handelPower() {
// this.powerDialogVisible = true;
if (this.MinerChart) {
this.MinerChart.dispose();
this.MinerChart = null;
}
// 初始化相关数据
this.option.xAxis.data = [];
this.option.series[0].data = [];
this.option.series[1].data = [];
this.powerActive = true
this.PowerParams.coin = this.params.coin
this.getPoolPowerData(this.PowerParams)
},
intervalChange(value) {
this.PowerParams.interval = value
this.params.interval = value
this.timeActive = value
if (this.powerActive) {
this.getPoolPowerData(this.PowerParams)
} else if (!this.powerActive) {
this.fetchNetPower(this.params)
}
},
handelMiner() {
// this.minerDialogVisible = true;
// 先销毁可能存在的上一个图表实例
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
// 初始化相关数据
this.minerOption.xAxis.data = [];
this.minerOption.series[0].data = [];
this.powerActive = false
// this.getMinerCountData(this.params)
this.fetchNetPower(this.params)
},
handelLabel(coin) {
let obj = this.currencyList.find(item => item.value == coin)
if (obj) {
return obj.label
} else {
return ""
}
},
handelLabel2(coin) {
if (coin.includes("dgb")) {
return "dgb"
} else {
return coin
}
},
handelCoinLabel(coin) {
let obj = {
coin: "",
}
if (coin) {
obj = this.transactionFeeList.find(item => item.coin == coin)
this.FeeShow = false
}
if (!obj) {
this.FeeShow = true
}
},
},
}