1692 lines
60 KiB
JavaScript
1692 lines
60 KiB
JavaScript
|
||
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}      <span style="font-weight: bold">${params[i].value} USD</span>`
|
||
} else {
|
||
res += `</br>${params[i].marker} ${params[i].seriesName}      <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}      <span style="font-weight: bold">${params[i].value} USD</span>`
|
||
} else {
|
||
res += `</br>${params[i].marker} ${params[i].seriesName}      <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],
|
||
},
|
||
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); // 格式化最大值
|
||
|
||
|
||
// 创建一个临时 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';
|
||
|
||
|
||
// ------------全网算力图---------------
|
||
//
|
||
|
||
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: {
|
||
|
||
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"));
|
||
}
|
||
|
||
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;
|
||
},
|
||
|
||
// 左滑动逻辑
|
||
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'
|
||
}
|
||
},
|
||
|
||
|
||
|
||
// // 左滑动逻辑
|
||
// 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
|
||
}
|
||
|
||
},
|
||
|
||
|
||
|
||
|
||
},
|
||
|
||
} |