mac
7 months ago
20 changed files with 31 additions and 237989 deletions
-
153package-lock.json
-
2package.json
-
5public/index.html
-
1src/assets/index.js
-
43747src/assets/json/china.json
-
46147src/assets/json/city.ts
-
141626src/assets/json/word.json
-
972src/components/distribution.vue
-
13src/lang/index.js
-
5src/main.js
-
1src/router/index.js
-
1src/store/index.js
-
1055src/views/Apikey.vue
-
1239src/views/HomeIndex.vue
-
639src/views/center.vue
-
1030src/views/dashboard.vue
-
302src/views/distribution.vue
-
606src/views/distributionstatus.vue
-
469src/views/storagenetwork.vue
-
7vue.config.js
43747
src/assets/json/china.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
46147
src/assets/json/city.ts
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
141626
src/assets/json/word.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,972 +0,0 @@ |
|||
|
|||
<template> |
|||
<div> |
|||
<div> |
|||
<div class="distribution-box-content" v-loading="loading"> |
|||
<div class="title-content"> |
|||
<div class="title-left"> |
|||
<div class="item1 item1en"> |
|||
<div> |
|||
<img |
|||
class="img1" |
|||
src="../assets/storageImg/Frame 427318657.png" |
|||
/> |
|||
</div> |
|||
<div> |
|||
<div>{{ $t("文件总副本数") }}</div> |
|||
<div class="num distributionBoxNum"> |
|||
{{ this.tableData.length }}{{ $t("个") }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item1 item2"> |
|||
<div> |
|||
<img class="img1" src="../assets/storageImg/成本.png" /> |
|||
</div> |
|||
<div> |
|||
<div>{{ $t("存储成本") }}</div> |
|||
<div class="num distributionBoxNum"> |
|||
0Fil/GB /{{ $t("年") }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item1 item3"> |
|||
<div> |
|||
<img class="img1" src="../assets/storageImg/有效期.png" /> |
|||
</div> |
|||
<div> |
|||
<div>{{ $t("distribution1") }}</div> |
|||
<div class="num distributionBoxNum"> |
|||
{{ |
|||
formatMinute( |
|||
parseInt( |
|||
(now - new Date(starttimeNew).getTime()) / 1000 |
|||
) || 0 |
|||
) |
|||
}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div @click="storagerenewalBtn" class="title-right enstorage-renewal"> |
|||
{{ $t("存储续期") }} |
|||
</div> |
|||
</div> |
|||
<div class="titan-table-box" style="margin-top: 24px"> |
|||
<el-table |
|||
border |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
:header-row-style="{ |
|||
color: '#000000', |
|||
fontSize: '16px', |
|||
fontWeight: '600', |
|||
}" |
|||
> |
|||
<div slot="empty" class="blank-part-color"> |
|||
<div class="blank-img"> |
|||
<img class="img" src="../assets/storageImg/img1.png" /> |
|||
</div> |
|||
<div class="blank-title"> |
|||
<div class="blank-title-icon"> |
|||
<img src="../assets/newimages/icons8-滴漏.gif" /> |
|||
<span>{{ $t("distribution2") }}...</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-table-column |
|||
align="center" |
|||
prop="provider" |
|||
label="Miner ID" |
|||
width="100" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span style="color: #00c566">{{ scope.row.provider }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="location" |
|||
label="IP" |
|||
width="90" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="storagefee" |
|||
width="80" |
|||
:label="$t('存储费用')" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span style="color: #1f2c37">{{ scope.row.cost }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="validitytime" |
|||
width="143" |
|||
:label="$t('存储有效期')" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span style="color: #425466">{{ |
|||
formatMinute( |
|||
parseInt( |
|||
(new Date(scope.row.end_time).getTime() - now) / 1000 |
|||
) |
|||
) |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="starttime" |
|||
:label="$t('开始时间')" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div style="color: #1f2c37"> |
|||
{{ initTime(scope.row.start_time, "YYYY-MM-DD HH:mm:ss") }} |
|||
</div> |
|||
<div style="color: #1f2c37"> |
|||
{{ $t("开始高度") }}: |
|||
<span style="color: #00c566; margin-left: 5px">{{ |
|||
scope.row.start_height |
|||
}}</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="endtime" |
|||
:label="$t('结束时间')" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div style="color: #1f2c37"> |
|||
{{ initTime(scope.row.end_time, "YYYY-MM-DD HH:mm:ss") }} |
|||
</div> |
|||
<div style="color: #1f2c37"> |
|||
{{ $t("结束高度") }}: |
|||
<span style="color: #00c566; margin-left: 5px">{{ |
|||
scope.row.end_height |
|||
}}</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
width="245" |
|||
:label="$t('链上存储信息记录')" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<span style="color: #1f2c37">{{ $t("扇区编号") }}：</span> |
|||
<span style="color: #00c566; cursor: pointer">{{ |
|||
scope.row.sector_num |
|||
}}</span> |
|||
<div |
|||
style="color: #00c566; cursor: pointer" |
|||
@click="sectorNumClick(scope.row.message_cid)" |
|||
> |
|||
{{ $t("扇区提交证明") }} |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
:label="$t('文件信息细节')" |
|||
width="140" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-dropdown class="dropdownhoverbox"> |
|||
<div class="dropdownhover"> |
|||
{{ $t("查看更多") }} |
|||
</div> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item> |
|||
<div> |
|||
Piece CID: |
|||
<span>{{ ellipsisByLength(scope.row.piece_cid) }}</span> |
|||
<img |
|||
class="copy imgColopointer" |
|||
style=" |
|||
width: 17px; |
|||
height: 17px; |
|||
margin-left: 12px; |
|||
vertical-align: middle; |
|||
" |
|||
@click="handleOk1(scope.row.piece_cid)" |
|||
src="../assets/storageImg/复制.png" |
|||
/> |
|||
</div> |
|||
</el-dropdown-item> |
|||
|
|||
<el-dropdown-item> |
|||
<div> |
|||
Payload CID: |
|||
<span>{{ |
|||
ellipsisByLength(scope.row.payload_cid) |
|||
}}</span> |
|||
<img |
|||
style=" |
|||
width: 17px; |
|||
height: 17px; |
|||
margin-left: 12px; |
|||
vertical-align: middle; |
|||
" |
|||
@click="handleOk2(scope.row.payload_cid)" |
|||
src="../assets/storageImg/复制.png" |
|||
/> |
|||
</div> |
|||
</el-dropdown-item> |
|||
<el-dropdown-item> |
|||
<div> |
|||
Deal ID: |
|||
{{ scope.row.deal_id }} |
|||
<img |
|||
style=" |
|||
width: 17px; |
|||
height: 17px; |
|||
margin-left: 12px; |
|||
vertical-align: middle; |
|||
" |
|||
@click="handleOk3(scope.row.deal_id)" |
|||
src="../assets/storageImg/复制.png" |
|||
/> |
|||
</div> |
|||
</el-dropdown-item> |
|||
<el-dropdown-item> |
|||
<div> |
|||
Piece Size: |
|||
<span>{{ scope.row.piece_size }}</span> |
|||
<img |
|||
style=" |
|||
width: 17px; |
|||
height: 17px; |
|||
margin-left: 12px; |
|||
vertical-align: middle; |
|||
" |
|||
@click="handleOk4(scope.row.piece_size)" |
|||
src="../assets/storageImg/复制.png" |
|||
/> |
|||
</div> |
|||
</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="titan-paginationbox"> |
|||
<div class="content"> |
|||
<span class="page-total" |
|||
>{{ $t("共") }}{{ page.total }}{{ $t("条记录") }}</span |
|||
> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:page-sizes="[10, 20, 25, 50, 100]" |
|||
:current-page="page.current" |
|||
:page-size="page.pageSize" |
|||
layout="sizes, prev, pager, next, jumper" |
|||
:total="page.total" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<my-modal |
|||
:visible.sync="storageleasedialogVisible" |
|||
width="525px" |
|||
:append="true" |
|||
> |
|||
<div class="storagelease-box"> |
|||
<div class="title">{{ $t("Filecoin网络 存储续期") }}</div> |
|||
<div class="block"> |
|||
<el-slider v-model="value1" :max="10"></el-slider> |
|||
</div> |
|||
<div class="store-copies"> |
|||
<div>{{ $t("期望存储份数") }}</div> |
|||
<div>{{ value1 }}{{ $t("份") }}</div> |
|||
</div> |
|||
<div class="block"> |
|||
<el-slider v-model="value2" :max="540"></el-slider> |
|||
</div> |
|||
<div class="store-copies"> |
|||
<div>{{ $t("文件存储天数") }}</div> |
|||
<div>{{ value2 }}{{ $t("天") }}</div> |
|||
</div> |
|||
<div class="Estimated"> |
|||
<div class="left"> |
|||
<div class="left-content-file"> |
|||
<div>{{ $t("预计所需存储费用") }} :</div> |
|||
<div>0 FIL</div> |
|||
</div> |
|||
</div> |
|||
<div @click="StorenowBtn" class="right"> |
|||
<div class="finish-color"> |
|||
<div class="hovercreate-money"> |
|||
<div class="hover-Btn-color"> |
|||
{{ $t("立即存储") }} |
|||
</div> |
|||
<div class="login-line"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</my-modal> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import axios from "axios"; |
|||
import { mapState } from "vuex"; |
|||
import { formatGb, formatMinute } from "@/utils/config"; |
|||
import Clipboard from "clipboard"; |
|||
import { globalFun } from "@/utils/copy"; |
|||
import { initTime } from "@/utils/config"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
now: Date.now(), |
|||
timer: null, |
|||
total1: 3, |
|||
loading: false, |
|||
initTime: initTime, |
|||
starttimeNew: "", |
|||
tableDatanew: [ |
|||
{ |
|||
MinerID: "f01656666", |
|||
storagefee: "0", |
|||
validitytime: "", |
|||
starttime: "1688597340", |
|||
endtime: "1734938400", |
|||
PieceCID: |
|||
"baga6ea4seaqlyku2iclvukilezclsp3ixkmufgitiv6mq6fpayhnw6wspyfbgfq", |
|||
payloadCID: |
|||
"bafybeihdtygrzk7q2jb2nvxld2jcs5yjpf7vzgnbpkqzsvgr7kkczwigxa", |
|||
DealCID: "44657096", |
|||
pieceSize: "268435456", |
|||
sectornumber: "21552", |
|||
startHeight: "3009698", |
|||
endHeight: "4554400", |
|||
}, |
|||
{ |
|||
MinerID: "f01777777", |
|||
storagefee: "0", |
|||
validitytime: "", |
|||
starttime: "1688637270", |
|||
endtime: "1734938400", |
|||
PieceCID: |
|||
"baga6ea4seaqlyku2iclvukilezclsp3ixkmufgitiv6mq6fpayhnw6wspyfbgfq", |
|||
payloadCID: |
|||
"bafybeihdtygrzk7q2jb2nvxld2jcs5yjpf7vzgnbpkqzsvgr7kkczwigxa", |
|||
DealCID: "44691847", |
|||
pieceSize: "268435456", |
|||
sectornumber: "37134", |
|||
startHeight: "3011029", |
|||
endHeight: "4554400", |
|||
}, |
|||
{ |
|||
MinerID: "f0753213", |
|||
storagefee: "0", |
|||
validitytime: "", |
|||
starttime: "1688660580", |
|||
endtime: "1734938400", |
|||
PieceCID: |
|||
"baga6ea4seaqlyku2iclvukilezclsp3ixkmufgitiv6mq6fpayhnw6wspyfbgfq", |
|||
payloadCID: |
|||
"bafybeihdtygrzk7q2jb2nvxld2jcs5yjpf7vzgnbpkqzsvgr7kkczwigxa", |
|||
DealCID: "44647522", |
|||
pieceSize: "268435456", |
|||
sectornumber: "151405", |
|||
startHeight: "3011806", |
|||
endHeight: "4554400", |
|||
}, |
|||
], |
|||
tableData: [], |
|||
cid: "", |
|||
formatGb: formatGb, |
|||
formatMinute: formatMinute, |
|||
value2: 50, |
|||
value1: 3, |
|||
sharelink: "", |
|||
Size: "", |
|||
Name: "", |
|||
wordList: [], |
|||
storageleasedialogVisible: false, |
|||
ValidityTime: "", |
|||
infor: {}, |
|||
page: { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
totalnew: 3, |
|||
}, |
|||
}; |
|||
}, |
|||
components: {}, |
|||
watch: { |
|||
value() { |
|||
this.page = { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
}; |
|||
this.getAssetList(); |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState(["address"]), |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
this.timer = setInterval(() => { |
|||
this.now = Date.now(); |
|||
}, 1000); |
|||
}, |
|||
beforeDestroy() { |
|||
clearInterval(this.timer); |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
sectorNumClick(item) { |
|||
window.open("https://filfox.info/zh/message/" + item); |
|||
}, |
|||
StorenowBtn() { |
|||
this.$message({ |
|||
message: this.$t("功能开发中"), |
|||
type: "warning", |
|||
duration: 1000, |
|||
}); |
|||
}, |
|||
handleOk1(item) { |
|||
globalFun(item); |
|||
}, |
|||
sectornumberClick() { |
|||
window.open( |
|||
"https://filfox.info/en/message/bafy2bzacedi6cc6njpmxukufxtn7i56xer4hzrldc2rigp5vbndvczeseidxs" |
|||
); |
|||
}, |
|||
SectorProof() { |
|||
window.open( |
|||
"https://filfox.info/en/message/bafy2bzaceaz2u73nm7ja5td7oauon4a4q5kjnig4xtlwqpuomqu4mpu5dukx6" |
|||
); |
|||
}, |
|||
SectorProof2() { |
|||
window.open( |
|||
"https://filfox.info/en/message/bafy2bzacecl5utbtdfr64g6tkhrnygotjm2apu3542rlxn5d74g5biyjmwlaw" |
|||
); |
|||
}, |
|||
SectorProof3() { |
|||
window.open( |
|||
"https://filfox.info/en/message/bafy2bzaceaakmqc33tjawkvbtk3fv7sjtdjo7iufl5yc2q27zffbjnrnvind2" |
|||
); |
|||
}, |
|||
handleOk2(item) { |
|||
globalFun(item); |
|||
}, |
|||
handleOk3(item) { |
|||
globalFun(item); |
|||
}, |
|||
handleOk4(item) { |
|||
globalFun(item); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.page.current = val; |
|||
this.getAssetList(); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.page.pageSize = val; |
|||
this.getAssetList(); |
|||
}, |
|||
storagerenewalBtn() { |
|||
this.storageleasedialogVisible = true; |
|||
}, |
|||
storageleasehandleClose() { |
|||
this.storageleasedialogVisible = false; |
|||
}, |
|||
getList() { |
|||
this.loading = true; |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/get_fil_storage_list?cid=" + this.$route.query.cid |
|||
) |
|||
.then((res) => { |
|||
this.loading = false; |
|||
this.tableData = res.list || []; |
|||
this.starttimeNew = this.tableData[0].start_time || ""; |
|||
this.page.total = res.total; |
|||
}) |
|||
.catch((err) => { |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
getAssetList() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/share_asset?user_id=" + |
|||
this.address + |
|||
"&asset_cid=" + |
|||
this.$route.query.CID |
|||
) |
|||
.then((res) => { |
|||
this.url = res.url; |
|||
this.sharelink = res.url.split("/ipfs/")[0]; |
|||
axios |
|||
.get( |
|||
this.url + |
|||
"&page=" + |
|||
(this.page.current - 1) + |
|||
"&count=" + |
|||
this.page.pageSize |
|||
) |
|||
.then((res) => { |
|||
this.tableData = res.FileProperties; |
|||
this.Name = res.Name; |
|||
this.Size = res.Size; |
|||
this.page.total = res.Total; |
|||
}); |
|||
}); |
|||
}, |
|||
handleClose() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.storagelease-box { |
|||
/deep/ .el-slider__button-wrapper { |
|||
top: -3px !important; |
|||
} |
|||
/deep/ .el-slider__button-wrapper { |
|||
width: 18px !important; |
|||
height: 9px !important; |
|||
} |
|||
/deep/ .el-slider__button { |
|||
border-radius: 6px !important; |
|||
border: none !important; |
|||
width: 18px !important; |
|||
height: 9px !important; |
|||
background: #fff !important; |
|||
position: relative; |
|||
left: -14px; |
|||
} |
|||
/deep/ .el-slider__bar { |
|||
background: #11c16d !important; |
|||
height: 16px !important; |
|||
border-radius: 50px; |
|||
} |
|||
/deep/ .el-slider__runway { |
|||
background: #415348 !important; |
|||
border-radius: 50px !important; |
|||
height: 16px !important; |
|||
} |
|||
/deep/ .el-slider { |
|||
width: 453px; |
|||
height: 24px; |
|||
padding: 1px; |
|||
border-radius: 50px; |
|||
border: 1px solid #3a4a3b; |
|||
padding: 0 3px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.title { |
|||
color: #cae9ca; |
|||
font-size: 16px; |
|||
margin-bottom: 38px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.enlishBoxContent { |
|||
.enSortenColor { |
|||
width: 160px !important; |
|||
} |
|||
.distributionBoxNum { |
|||
font-size: 20px !important; |
|||
} |
|||
.enstorage-renewal { |
|||
width: 200px !important; |
|||
font-size: 20px !important; |
|||
} |
|||
} |
|||
.blank-part-color { |
|||
.blank-title { |
|||
width: 100%; |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
font-weight: 600; |
|||
color: #000; |
|||
font-size: 22px; |
|||
.blank-title-icon { |
|||
> img { |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 17px; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
} |
|||
.blank-img { |
|||
margin-top: 40px; |
|||
width: 100%; |
|||
height: 201px; |
|||
text-align: center; |
|||
.img { |
|||
width: 320px; |
|||
height: 201px; |
|||
} |
|||
} |
|||
} |
|||
.dropdownhoverbox { |
|||
width: 80px; |
|||
height: 30px; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
border: 1px solid #bdc3c0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
margin: 0 auto; |
|||
color: #bdc3c0; |
|||
} |
|||
.el-dropdown:hover { |
|||
border: 1px solid #00c566 !important; |
|||
color: #00c566 !important; |
|||
} |
|||
.el-tabl-box { |
|||
/deep/ .el-table__empty-text { |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
color: #000; |
|||
padding: 100px 0; |
|||
} |
|||
} |
|||
.see-more { |
|||
width: 72px; |
|||
height: 36px; |
|||
background: #eeeeee; |
|||
border: 1px solid #dddddd; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.more { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.storagelease { |
|||
/deep/ .el-dialog { |
|||
border-radius: 10px !important; |
|||
background: #fff !important; |
|||
} |
|||
/deep/ .el-dialog__header { |
|||
padding: 0 !important; |
|||
} |
|||
.Estimated { |
|||
margin-top: 42px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.finish-color { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
.hovercreate-money { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
color: #a1ffa1; |
|||
width: 130px; |
|||
height: 40px; |
|||
border-radius: 8px 8px 8px 8px; |
|||
padding: 1px; |
|||
box-sizing: border-box; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(108, 157, 135, 1), |
|||
rgba(27, 39, 29, 1), |
|||
rgba(58, 74, 59, 1) |
|||
); |
|||
.hover-Btn-color { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 8px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#556d58 0%, |
|||
#364b42 19%, |
|||
#1e2b20 52%, |
|||
#1f321f 76%, |
|||
#354337 100% |
|||
); |
|||
.el-button--default { |
|||
background: none !important; |
|||
border: none !important; |
|||
color: #a1ffa1 !important; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.login-line { |
|||
position: absolute; |
|||
width: 82px; |
|||
height: 2px; |
|||
background: #c7efc6; |
|||
bottom: 0; |
|||
left: 50%; |
|||
margin-left: -41px; |
|||
display: none; |
|||
} |
|||
&:hover { |
|||
.hover-Btn-color { |
|||
color: #a1ffa1 !important; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#25775a 0%, |
|||
#1a3f2f 26%, |
|||
#0d3023 52%, |
|||
#183629 76%, |
|||
#154d35 100% |
|||
) |
|||
rgba(250, 251, 235, 0.1) !important; |
|||
} |
|||
.login-line { |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
.left { |
|||
width: 311px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
padding: 1px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(108, 157, 135, 1), |
|||
rgba(58, 74, 59, 1) |
|||
); |
|||
.left-content-file { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(15, 23, 16, 1); |
|||
border-radius: 8px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
color: #a1ffa1; |
|||
align-items: center; |
|||
padding: 0 10px; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
.right { |
|||
width: 130px; |
|||
height: 40px; |
|||
border-radius: 8px; |
|||
padding: 1px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(108, 157, 135, 1), |
|||
rgba(27, 39, 29, 1), |
|||
rgba(58, 74, 59, 1) |
|||
); |
|||
.store-now-color { |
|||
color: #a1ffa1; |
|||
font-size: 14px; |
|||
border-radius: 8px; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#556d58 0%, |
|||
#364b42 19%, |
|||
#1e2b20 52%, |
|||
#1f321f 76%, |
|||
#354337 100% |
|||
); |
|||
} |
|||
} |
|||
} |
|||
/deep/ .el-dialog__body { |
|||
padding: 24px 23px 31px 23px !important; |
|||
} |
|||
/deep/ .el-slider__runway { |
|||
height: 16px !important; |
|||
background: #eeeeee !important; |
|||
border-radius: 8px !important; |
|||
margin: 0 !important; |
|||
} |
|||
/deep/ .el-slider__bar { |
|||
height: 16px !important; |
|||
background: #67c23a !important; |
|||
border-radius: 8px !important; |
|||
} |
|||
/deep/ .el-slider__button-wrapper { |
|||
top: -11px !important; |
|||
} |
|||
/deep/ .el-slider__button { |
|||
width: 20px !important; |
|||
height: 20px !important; |
|||
border: 2px solid #67c23a !important; |
|||
background-color: #fff; |
|||
border-radius: 50% !important; |
|||
} |
|||
.title { |
|||
color: #000000; |
|||
font-size: 18px; |
|||
margin-bottom: 23px; |
|||
text-align: center; |
|||
font-weight: 600; |
|||
} |
|||
} |
|||
.store-copies { |
|||
display: flex; |
|||
margin-top: 8px; |
|||
justify-content: space-between; |
|||
color: #e2f0e2; |
|||
font-size: 14px; |
|||
margin-bottom: 38px; |
|||
} |
|||
.distribution-box-content { |
|||
width: 1240px; |
|||
margin: 0 auto; |
|||
padding-top: 40px; |
|||
.block { |
|||
margin-top: 32px; |
|||
text-align: center; |
|||
} |
|||
/deep/ .el-table__row:last-child .el-table__cell { |
|||
border-bottom: none; |
|||
} |
|||
/deep/ .el-table .el-table__cell { |
|||
padding: 11px 0 !important; |
|||
} |
|||
/deep/ .el-table thead { |
|||
height: 64px !important; |
|||
} |
|||
/deep/ .el-table--border .el-table__cell, |
|||
.el-table__body-wrapper |
|||
.el-table--border.is-scrolling-left |
|||
~ .el-table__fixed { |
|||
border-right: none !important; |
|||
} |
|||
/deep/ .el-table--border, |
|||
.el-table--group { |
|||
border: none !important; |
|||
} |
|||
/deep/ .el-table--border::after, |
|||
.el-table--group::after, |
|||
.el-table::before { |
|||
background: none !important; |
|||
} |
|||
.customer-no-border-table { |
|||
border: 1px solid #dddddd; |
|||
box-shadow: 0px 16px 24px 0px rgba(30, 30, 30, 0.08); |
|||
border-radius: 10px; |
|||
margin-top: 47px; |
|||
overflow: hidden; |
|||
padding: 18px 10px 11px; |
|||
background: #fff; |
|||
margin-top: 42px; |
|||
} |
|||
.title-content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.title-right { |
|||
width: 200px; |
|||
height: 76px; |
|||
background: linear-gradient(135deg, #4dcfc7 0%, #00c566 100%); |
|||
box-shadow: 0px 4px 20px 0px rgba(143, 161, 148, 0.2); |
|||
border-radius: 10px; |
|||
opacity: 1; |
|||
border: 1px solid #f1f1f1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #ffffff; |
|||
font-size: 22px; |
|||
cursor: pointer; |
|||
box-sizing: border-box; |
|||
} |
|||
.title-left { |
|||
display: flex; |
|||
color: #72787c; |
|||
font-size: 14px; |
|||
.img3 { |
|||
width: 30px; |
|||
height: 33px; |
|||
margin-right: 25px; |
|||
} |
|||
.img2 { |
|||
width: 32px; |
|||
height: 33px; |
|||
margin-right: 25px; |
|||
} |
|||
.item2 { |
|||
width: 300px !important; |
|||
} |
|||
.item3 { |
|||
width: 400px !important; |
|||
} |
|||
.item1 { |
|||
width: 290px; |
|||
height: 76px; |
|||
background: linear-gradient(180deg, #effff7 0%, #f9fefb 100%); |
|||
box-shadow: 0px 4px 20px 0px rgba(143, 161, 148, 0.2); |
|||
border-radius: 10px 10px 10px 10px; |
|||
opacity: 1; |
|||
border: 1px solid #f1f1f1; |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
padding: 9px 15px; |
|||
> div:nth-child(1) { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.num { |
|||
margin-top: 10px; |
|||
font-weight: 600; |
|||
color: #090c0e; |
|||
font-size: 16px; |
|||
} |
|||
.img1 { |
|||
width: 50px; |
|||
height: 50px; |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
.item2 { |
|||
margin: 0 15px; |
|||
} |
|||
.item3 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
} |
|||
.distribution-title { |
|||
color: #222222; |
|||
font-size: 36px; |
|||
margin-bottom: 40px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
1055
src/views/Apikey.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1239
src/views/HomeIndex.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,639 +0,0 @@ |
|||
|
|||
<template> |
|||
<div class="personal-center"> |
|||
<div class="user-title"> |
|||
<div class="left"> |
|||
<div class="ordinary-user"> |
|||
<div v-if="requsetSuc && !isVip">{{ $t("您是测试用户") }}</div> |
|||
<div v-if="requsetSuc && isVip">{{ $t("企业定制用户") }}</div> |
|||
</div> |
|||
<div class="user-img"> |
|||
<img src="../assets/storageImg/Frame 427318654.png" /> |
|||
</div> |
|||
<div class="email-adderss"> |
|||
<div> |
|||
<span v-if="address.indexOf('@') > -1" |
|||
>{{ $t("邮箱登录地址") }}:</span |
|||
> |
|||
<span v-else>{{ $t("Web3身份登录") }} (Filecoin address):</span> |
|||
</div> |
|||
<div style="word-wrap: break-word; color: #06c270; font-weight: bold"> |
|||
{{ filaddress }} |
|||
<img |
|||
style="width: 17px; height: 16px; cursor: pointer" |
|||
class="copy" |
|||
:data-clipboard-text="filaddress" |
|||
@click="handleOk" |
|||
src="../assets/storageImg/复制.png" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="jion-box"> |
|||
<div |
|||
class="jion-vip-color" |
|||
v-if="requsetSuc && !isVip" |
|||
@click="JoinVip" |
|||
> |
|||
{{ $t("升级企业定制版") }} >> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="vip-privileges"> |
|||
<div>{{ $t("升级企业定制版") }}</div> |
|||
<div>{{ $t("为满足特定业务需求") }}</div> |
|||
<div>{{ $t("而量身定制的服务") }}</div> |
|||
<div>{{ $t("更多权益即将上线") }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="vip-user-content"> |
|||
<div class="functional-category"> |
|||
<div class="item">{{ $t("功能类别") }}</div> |
|||
<div class="item">{{ $t("存储空间") }}</div> |
|||
<div class="item">{{ $t("文件分享访问") }}</div> |
|||
<div class="item">{{ $t("传输速度") }}</div> |
|||
<div style="height: 60px" class="item">{{ $t("存储方案") }}</div> |
|||
<div class="item">{{ $t("存储有效期") }}</div> |
|||
<div class="item">{{ $t("额外奖励") }}</div> |
|||
<div style="color: #fff; height: 58px" class="item"> |
|||
{{ $t("联系销售人员") }} |
|||
</div> |
|||
</div> |
|||
<div class="Project-VIP-users"> |
|||
<div class="div1"> |
|||
<div class="vip-title"> |
|||
<div>{{ $t("企业/项目VIP用户") }}</div> |
|||
<div>{{ $t("推荐") }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="div1">{{ $t("定制") }}</div> |
|||
<div class="div1">{{ $t("无限制分享次数") }}</div> |
|||
<div class="div1">{{ $t("Titan DCDN加速 （可定制）") }}</div> |
|||
<div style="height: 30px" class="div1"> |
|||
{{ $t("在Titan中每个文件存储50个副本") }} |
|||
</div> |
|||
<div style="height: 30px" class="div1"> |
|||
{{ $t("在Filecoin中每个文件存储5-10个副本 （可定制") }} |
|||
</div> |
|||
<div class="div1"> |
|||
{{ $t("在Titan Network和Filecoin中存储360-549天（可定制）") }} |
|||
</div> |
|||
<div class="div1"> |
|||
{{ $t("可有机会获得获得Titan Network空投奖励") }} |
|||
</div> |
|||
<div class="div1" style="height: 58px"> |
|||
<div |
|||
@click="JoinVip" |
|||
style=" |
|||
width: 80%; |
|||
height: 40px; |
|||
border: 1px solid #11c16d; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
border-radius: 20px; |
|||
color: #11c16d; |
|||
cursor: pointer; |
|||
" |
|||
> |
|||
{{ $t("联系销售人员") }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="titan-test-user"> |
|||
<div class="user1">{{ $t("Titan 测试用户") }}</div> |
|||
<div class="user1">100MB</div> |
|||
<div class="user1">{{ $t("10次/文件") }}</div> |
|||
<div class="user1">{{ $t("Titan DCDN加速") }}</div> |
|||
<div style="height: 60px" class="user1">{{ $t("无") }}</div> |
|||
<div class="user1"> |
|||
<div>{{ $t("7天Filecoin") }}</div> |
|||
<div style="margin-left: 20px">Filecoin</div> |
|||
<div class="new-error-color">X</div> |
|||
</div> |
|||
<div class="user1">{{ $t("无") }}</div> |
|||
<div style="opacity: 0" class="user1">联系我们</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import mapData from "@/components/map.vue"; |
|||
import Clipboard from "clipboard"; |
|||
import { mapState } from "vuex"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
filaddress: "", |
|||
isVip: false, |
|||
requsetSuc: false, |
|||
}; |
|||
}, |
|||
components: { |
|||
mapData, |
|||
}, |
|||
computed: { |
|||
...mapState(["emailAddress", "address"]), |
|||
}, |
|||
mounted() { |
|||
this.filaddress = this.address; |
|||
this.getVipInfor(); |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
getVipInfor() { |
|||
this.$http |
|||
.get("/api/v1/storage/get_vip_info?user_id=" + this.address) |
|||
.then((res) => { |
|||
this.requsetSuc = true; |
|||
this.isVip = res.vip; |
|||
}); |
|||
}, |
|||
JoinVip() { |
|||
window.open( |
|||
"https://docs.google.com/forms/d/e/1FAIpQLScCTzUqCcKxQoogdPemnC8o-ZcDVTlaMpS0f7ym3aP4IjNdMA/viewform?usp=pp_url" |
|||
); |
|||
}, |
|||
RenewnowClick() { |
|||
this.$message({ |
|||
message: this.$t("renewnowlang"), |
|||
type: "warning", |
|||
}); |
|||
}, |
|||
handleOk() { |
|||
var clipboard = new Clipboard(".copy"); |
|||
clipboard.on("success", (e) => { |
|||
this.$message.closeAll(); |
|||
this.$message.success(this.$t("复制成功")); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang='less' scoped> |
|||
.enlishBoxContent { |
|||
.Project-VIP-users { |
|||
font-size: 14px !important; |
|||
} |
|||
.titan-test-user { |
|||
font-size: 14px !important; |
|||
} |
|||
.functional-category { |
|||
font-size: 14px !important; |
|||
} |
|||
.personal-center |
|||
.vip-user-content |
|||
.Project-VIP-users |
|||
> div:nth-child(1) |
|||
.vip-title |
|||
> div:nth-child(1) { |
|||
font-size: 16px !important; |
|||
} |
|||
.personal-center |
|||
.vip-user-content |
|||
.Project-VIP-users |
|||
> div:nth-child(1) |
|||
.vip-title |
|||
> div:nth-child(2) { |
|||
width: 80px !important; |
|||
} |
|||
.personal-center .user-title .right .vip-privileges > div:nth-child(4) { |
|||
width: 230px !important; |
|||
} |
|||
.personal-center .user-title .left .jion-vip-color { |
|||
font-size: 12px; |
|||
} |
|||
.recommend { |
|||
width: 112px !important; |
|||
} |
|||
} |
|||
.personal-center { |
|||
.user-title { |
|||
display: flex; |
|||
.left { |
|||
width: 302px; |
|||
height: 293px; |
|||
background: linear-gradient(143deg, #f2fdf9 0%, #fafffd 100%); |
|||
border-radius: 16px 16px 16px 16px; |
|||
border: 1px solid #f0f0f0; |
|||
box-sizing: border-box; |
|||
padding: 0 20px; |
|||
position: relative; |
|||
margin-right: -10px; |
|||
.jion-box { |
|||
margin-top: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.jion-vip-color { |
|||
// width: 153px; |
|||
padding: 0 10px; |
|||
height: 37px; |
|||
background: linear-gradient(180deg, #000000 0%, #5c625f 93%); |
|||
border-radius: 30px 30px 30px 30px; |
|||
color: #bfbfbf; |
|||
font-size: 18px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
} |
|||
.email-adderss { |
|||
margin-top: 15px; |
|||
color: #454a48; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
} |
|||
.user-img { |
|||
margin-top: 10px; |
|||
text-align: center; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
> img { |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
} |
|||
.ordinary-user { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
> div { |
|||
// width:153px; |
|||
padding: 0 15px; |
|||
height: 30px; |
|||
background: rgba(239, 239, 239, 0.7); |
|||
border-radius: 0px 0px 800px 800px; |
|||
color: #464b49; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
display: flex; |
|||
background: url("../assets/storageImg/Frame 427318649.png") center center |
|||
no-repeat; |
|||
background-size: cover; |
|||
.vip-privileges { |
|||
padding: 75px 0 0 71px; |
|||
> div:nth-child(1) { |
|||
color: #8ed8b4; |
|||
font-size: 16px; |
|||
} |
|||
> div:nth-child(2), |
|||
> div:nth-child(3) { |
|||
font-weight: bold; |
|||
color: #11c16d; |
|||
font-size: 28px; |
|||
margin-top: 8px; |
|||
} |
|||
> div:nth-child(4) { |
|||
margin-top: 20px; |
|||
width: 154px; |
|||
height: 33px; |
|||
border-radius: 800px 800px 800px 800px; |
|||
border: 1px solid #11c16d; |
|||
color: #11c16d; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.vip-user-content { |
|||
margin-top: 40px; |
|||
display: flex; |
|||
.Project-VIP-users { |
|||
border-radius: 16px !important; |
|||
background: linear-gradient(180deg, #fffffa 14%, #fbf4e4 100%); |
|||
margin-left: -10px; |
|||
margin-right: -10px; |
|||
position: relative; |
|||
z-index: 100; |
|||
.line { |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
90deg, |
|||
rgba(245, 205, 176, 0) 0%, |
|||
#ca963b 49%, |
|||
rgba(245, 205, 176, 0) 100%, |
|||
rgba(245, 205, 176, 0) 100% |
|||
); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 0.5; |
|||
} |
|||
.table-center { |
|||
position: relative; |
|||
background: none !important; |
|||
|
|||
.table-center-content { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
border-radius: 0 0 10px 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 58px; |
|||
padding-bottom: 10px; |
|||
} |
|||
} |
|||
border-radius: 10px; |
|||
width: 50%; |
|||
color: #333; |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
.duigou { |
|||
width: 15px; |
|||
height: 11px; |
|||
color: #67c23a; |
|||
position: relative; |
|||
top: -5px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.div1 { |
|||
height: 48px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #ca963b; |
|||
} |
|||
} |
|||
.Project-VIP-users > div:nth-child(1) { |
|||
height: 66px; |
|||
background: linear-gradient( |
|||
180deg, |
|||
#fff9f1 0%, |
|||
#fff7ec 43%, |
|||
#fbeccb 100% |
|||
); |
|||
border-radius: 16px 16px 0px 0px; |
|||
position: relative; |
|||
.vip-title { |
|||
display: flex; |
|||
> div:nth-child(1) { |
|||
font-weight: bold; |
|||
color: #ca963b; |
|||
font-size: 20px; |
|||
} |
|||
> div:nth-child(2) { |
|||
width: 42px; |
|||
height: 22px; |
|||
background: linear-gradient(270deg, #fcd4c3 0%, #ffe8bd 100%); |
|||
border-radius: 8px 8px 8px 0px; |
|||
border: 1px solid #d7c29f; |
|||
color: #6b2d00; |
|||
font-size: 12px; |
|||
margin-left: 8px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.vipImg { |
|||
position: absolute; |
|||
width: 59px; |
|||
height: 59px; |
|||
top: 25px; |
|||
left: 32px; |
|||
> img { |
|||
width: 59px; |
|||
height: 59px; |
|||
} |
|||
} |
|||
} |
|||
.titan-test-user { |
|||
border-radius: 0 16px 16px 0; |
|||
overflow: hidden; |
|||
color: #333333; |
|||
font-size: 16px; |
|||
box-sizing: border-box; |
|||
border: 1px solid rgba(246, 246, 246, 0.5); |
|||
flex: 1; |
|||
text-align: center; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(245, 245, 245, 0.5) 0%, |
|||
rgba(212, 212, 212, 0.5) 100% |
|||
); |
|||
border-left: 0; |
|||
.line { |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
90deg, |
|||
rgba(245, 205, 176, 0) 0%, |
|||
#92978c 49%, |
|||
rgba(245, 205, 176, 0) 100%, |
|||
rgba(245, 205, 176, 0) 100% |
|||
); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 0.5; |
|||
} |
|||
.error-color { |
|||
color: #bd0505; |
|||
width: 12px; |
|||
height: 12px; |
|||
font-weight: bold; |
|||
margin-right: 3px; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 5px; |
|||
} |
|||
.user1 { |
|||
height: 48px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #5c666c; |
|||
.new-error-color { |
|||
width: 21px; |
|||
height: 21px; |
|||
border-radius: 0px 0px 0px 0px; |
|||
border-radius: 50%; |
|||
margin-left: 9px; |
|||
color: red; |
|||
} |
|||
} |
|||
} |
|||
.titan-test-user > div:nth-child(1) { |
|||
height: 66px; |
|||
color: #9b9ea1; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(241, 241, 241, 1) 0%, |
|||
rgba(244, 244, 244, 1) 0%, |
|||
rgba(243, 243, 243, 1) 14%, |
|||
rgba(231, 231, 231, 1) 100% |
|||
); |
|||
} |
|||
.titan-test1 { |
|||
background: linear-gradient( |
|||
180deg, |
|||
#f1f1f1 0%, |
|||
#f4f4f4 0%, |
|||
#f3f3f3 14%, |
|||
#e7e7e7 100% |
|||
); |
|||
} |
|||
.titan-test-user > div:nth-child(5), |
|||
:nth-child(6), |
|||
:nth-child(7) { |
|||
display: flex; |
|||
} |
|||
.functional-category { |
|||
border-radius: 16px 0 0 16px; |
|||
border: 1px solid #f0f0f0; |
|||
width: 25%; |
|||
color: #9ba09e; |
|||
font-size: 16px; |
|||
overflow: hidden; |
|||
border-right: 0; |
|||
.line { |
|||
height: 1px; |
|||
background: linear-gradient( |
|||
90deg, |
|||
rgba(178, 169, 162, 0) 0%, |
|||
#4b4139 49%, |
|||
rgba(245, 205, 176, 0) 100%, |
|||
rgba(187, 175, 166, 0) 100% |
|||
); |
|||
border-radius: 0px 0px 0px 0px; |
|||
opacity: 0.1; |
|||
} |
|||
.item { |
|||
height: 48px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: #fff; |
|||
box-sizing: border-box; |
|||
} |
|||
} |
|||
.functional-category > div:nth-child(1) { |
|||
height: 66px; |
|||
color: #9ba09e; |
|||
font-size: 20px; |
|||
background: linear-gradient(180deg, #ffffff 0%, #f2f4f3 100%); |
|||
} |
|||
} |
|||
.center-copy { |
|||
margin-left: 10px; |
|||
margin-top: 5px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
} |
|||
.user-test-title { |
|||
margin-top: 60px; |
|||
border-radius: 10px !important; |
|||
width: 600px; |
|||
text-align: center; |
|||
color: #000001; |
|||
font-size: 18px; |
|||
> div { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 48px; |
|||
} |
|||
> div:nth-last-child(1) { |
|||
border-radius: 0 0 10px 10px; |
|||
} |
|||
> div:nth-child(1) { |
|||
font-size: 30px; |
|||
color: #fff; |
|||
height: 56px; |
|||
font-size: 20px; |
|||
background: rgba(103, 194, 58, 1); |
|||
border-radius: 10px 10px 0 0; |
|||
} |
|||
> div:nth-child(2) { |
|||
background: rgba(103, 194, 58, 0.2); |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
> div:nth-child(3) { |
|||
background: rgba(103, 194, 58, 0.1); |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
> div:nth-child(4) { |
|||
background: rgba(103, 194, 58, 0.2); |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
> div:nth-child(5) { |
|||
background: rgba(103, 194, 58, 0.1); |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
} |
|||
.user-test { |
|||
border-radius: 10px; |
|||
.test-user-title { |
|||
display: flex; |
|||
.test-user-title-rightVip { |
|||
font-size: 22px; |
|||
margin-left: 14px; |
|||
color: #67c23a; |
|||
cursor: pointer; |
|||
border-bottom: 2px solid #67c23a; |
|||
} |
|||
} |
|||
.identity { |
|||
box-shadow: 0px 8px 21px 0px rgba(12, 29, 4, 0.04); |
|||
border-radius: 10px; |
|||
margin-top: 18px; |
|||
width: 622px; |
|||
> div:nth-last-child(1) { |
|||
margin-bottom: 0; |
|||
} |
|||
> div { |
|||
border-radius: 10px; |
|||
padding: 19px 25px; |
|||
margin-bottom: 15px; |
|||
> div:nth-child(1) { |
|||
color: #666666; |
|||
font-size: 14px; |
|||
} |
|||
> div:nth-child(2) { |
|||
display: flex; |
|||
color: #000000; |
|||
font-size: 24px; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
> img { |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-left: 40px; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
> div { |
|||
padding: 0 31px 0 0; |
|||
> div:nth-child(1) { |
|||
font-weight: 500; |
|||
color: #000001; |
|||
font-size: 24px; |
|||
} |
|||
} |
|||
} |
|||
.null { |
|||
margin-bottom: 39px; |
|||
} |
|||
} |
|||
</style> |
|||
1030
src/views/dashboard.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,302 +0,0 @@ |
|||
|
|||
<template> |
|||
<div style="background: #fbfbfb; height: 100%"> |
|||
<div class="distribution-box"> |
|||
<div class="distribution-title"> |
|||
{{ $t("Filecoin 存储网络分布情况") }} |
|||
</div> |
|||
<div class="title-content"> |
|||
<div class="title-left"> |
|||
<div class="item1"> |
|||
<div> |
|||
<img class="img1" src="../assets/newimages/订单数量.svg" /> |
|||
</div> |
|||
<div> |
|||
<div>{{ $t("文件总副本数") }}</div> |
|||
<div class="num">107 {{ $t("个") }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="item1 item2"> |
|||
<div> |
|||
<img class="img2" src="../assets/newimages/订单数量.svg" /> |
|||
</div> |
|||
<div> |
|||
<div>{{ $t("存储成本") }}</div> |
|||
<div class="num">100 Fil/GB/{{ $t("年") }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="item1" style="width: 320px"> |
|||
<div> |
|||
<img class="img3" src="../assets/newimages/订单数量.svg" /> |
|||
</div> |
|||
<div> |
|||
<div>{{ $t("distribution1") }}</div> |
|||
<div class="num">365 {{ $t("天") }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="title-right">{{ $t("存储续期") }}</div> |
|||
</div> |
|||
<div class="table customer-no-border-table"> |
|||
<el-table |
|||
border |
|||
:data="tableData" |
|||
style="width: 100%" |
|||
:empty-text="$t('暂无数据')" |
|||
:header-row-style="{ |
|||
color: '#000000', |
|||
fontSize: '16px', |
|||
fontWeight: '600', |
|||
}" |
|||
> |
|||
<el-table-column align="center" prop="TotalSize" label="Miner ID"> |
|||
<template> </template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
:label="$t('存储费用')" |
|||
></el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
:label="$t('存储有效期')" |
|||
></el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
:label="$t('开始时间')" |
|||
></el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
:label="$t('结束时间')" |
|||
></el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
:label="$t('链上存储信息记录')" |
|||
></el-table-column> |
|||
<el-table-column |
|||
align="center" |
|||
prop="TotalSize" |
|||
:label="$t('文件信息细节')" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div>{{ $t("查看更多") }}</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<div class="block paginationbox"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:page-sizes="[10, 20, 25, 50, 100]" |
|||
:current-page="page.current" |
|||
:page-size="page.pageSize" |
|||
layout="total,sizes, prev, pager, next, jumper" |
|||
:total="page.total" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import axios from "axios"; |
|||
import { mapState } from "vuex"; |
|||
import { formatGb } from "@/utils/config"; |
|||
import { globalFun } from "@/utils/copy"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
cid: "", |
|||
formatGb: formatGb, |
|||
sharelink: "", |
|||
Size: "", |
|||
Name: "", |
|||
wordList: [], |
|||
infor: {}, |
|||
page: { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: {}, |
|||
watch: { |
|||
value() { |
|||
this.page = { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
}; |
|||
this.getAssetList(); |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState(["address"]), |
|||
}, |
|||
mounted() {}, |
|||
watch: {}, |
|||
methods: { |
|||
handleCurrentChange(val) { |
|||
this.page.current = val; |
|||
this.getAssetList(); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.page.pageSize = val; |
|||
this.getAssetList(); |
|||
}, |
|||
getAssetList() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/share_asset?user_id=" + |
|||
this.address + |
|||
"&asset_cid=" + |
|||
this.$route.query.CID |
|||
) |
|||
.then((res) => { |
|||
this.url = res.url; |
|||
this.sharelink = res.url.split("/ipfs/")[0]; |
|||
axios |
|||
.get( |
|||
this.url + |
|||
"&page=" + |
|||
(this.page.current - 1) + |
|||
"&count=" + |
|||
this.page.pageSize |
|||
) |
|||
.then((res) => { |
|||
this.tableData = res.FileProperties; |
|||
this.Name = res.Name; |
|||
this.Size = res.Size; |
|||
this.page.total = res.Total; |
|||
}); |
|||
}); |
|||
}, |
|||
handleClose() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.distribution-box { |
|||
width: 1240px; |
|||
margin: 0 auto; |
|||
padding-top: 46px; |
|||
.block { |
|||
margin-top: 32px; |
|||
text-align: center; |
|||
} |
|||
/deep/ .el-table__row:last-child .el-table__cell { |
|||
border-bottom: none; |
|||
} |
|||
/deep/ .el-table .el-table__cell { |
|||
padding: 11px 0 !important; |
|||
} |
|||
/deep/ .el-table thead { |
|||
height: 64px !important; |
|||
} |
|||
/deep/ .el-table--border .el-table__cell, |
|||
.el-table__body-wrapper |
|||
.el-table--border.is-scrolling-left |
|||
~ .el-table__fixed { |
|||
border-right: none !important; |
|||
} |
|||
/deep/ .el-table--border, |
|||
.el-table--group { |
|||
border: none !important; |
|||
} |
|||
/deep/ .el-table--border::after, |
|||
.el-table--group::after, |
|||
.el-table::before { |
|||
background: none !important; |
|||
} |
|||
.customer-no-border-table { |
|||
border: 1px solid #dddddd; |
|||
box-shadow: 0px 16px 24px 0px rgba(30, 30, 30, 0.08); |
|||
border-radius: 10px; |
|||
margin-top: 47px; |
|||
overflow: hidden; |
|||
padding: 18px 10px 11px; |
|||
background: #fff; |
|||
margin-top: 42px; |
|||
} |
|||
.title-content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.title-right { |
|||
width: 180px; |
|||
height: 72px; |
|||
background: #67c23a; |
|||
border-radius: 10px; |
|||
font-weight: 600; |
|||
color: #fff; |
|||
font-size: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.title-left { |
|||
display: flex; |
|||
padding-left: 44px; |
|||
color: #666666; |
|||
font-size: 16px; |
|||
.img3 { |
|||
width: 30px; |
|||
height: 33px; |
|||
margin-right: 25px; |
|||
} |
|||
.img2 { |
|||
width: 32px; |
|||
height: 33px; |
|||
margin-right: 25px; |
|||
} |
|||
.item1 { |
|||
width: 200px; |
|||
padding: 5px 4px 4px 4px; |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
> div:nth-child(1) { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.num { |
|||
margin-top: 7px; |
|||
font-weight: 600; |
|||
color: #000; |
|||
font-size: 30px; |
|||
} |
|||
.img1 { |
|||
width: 32px; |
|||
height: 32px; |
|||
margin-right: 25px; |
|||
} |
|||
} |
|||
.item2 { |
|||
margin: 0 88px; |
|||
width: 280px; |
|||
} |
|||
.item3 { |
|||
width: 200px; |
|||
} |
|||
} |
|||
} |
|||
.distribution-title { |
|||
color: #222222; |
|||
font-size: 36px; |
|||
margin-bottom: 40px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,606 +0,0 @@ |
|||
|
|||
<template> |
|||
<div v-loading="showLoading" class="h100"> |
|||
<div v-if="showPage" class="h100"> |
|||
<div class="dia-header"> |
|||
<div class="title-cont"> |
|||
<div class="left" @click="filstorage"> |
|||
<img src="../assets/newimages/TTs-logonew.svg" /> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="tablist"> |
|||
<div |
|||
@click="distrbutionBtn(1)" |
|||
:class="distabid == 1 ? 'distrbutionColor' : ''" |
|||
> |
|||
{{ $t("Titan存储网络分布情况") }} |
|||
<div v-if="distabid == 1" class="line"></div> |
|||
</div> |
|||
<div |
|||
style="margin-left: 48px" |
|||
@click="distrbutionBtn(2)" |
|||
:class="distabid == 2 ? 'distrbutionColor' : ''" |
|||
> |
|||
{{ $t("Filecoin 存储网络分布情况") }} |
|||
<div v-if="distabid == 2" class="line"></div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
style=" |
|||
margin: 0 12px; |
|||
width: 1px; |
|||
height: 14px; |
|||
background: rgba(255, 255, 255, 0.5); |
|||
" |
|||
></div> |
|||
<div class="language-img"> |
|||
<img src="../assets/storageImg/语言.png" /> |
|||
</div> |
|||
<div |
|||
@click="langToggle(selectLang == 'zh' ? 'en' : 'zh')" |
|||
style=" |
|||
color: #fff; |
|||
align-items: center; |
|||
display: flex; |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
" |
|||
> |
|||
<span :class="selectLang == 'en' ? 'activelanguage' : ''" |
|||
>En |
|||
</span> |
|||
<span style="margin: 0 5px">/</span> |
|||
<span :class="selectLang == 'zh' ? 'activelanguage' : ''" |
|||
>中文</span |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<distribution v-if="distabid == 2"></distribution> |
|||
<storagenetwork v-if="distabid == 1"></storagenetwork> |
|||
|
|||
<div class="storageBox1"> |
|||
<el-dialog |
|||
:visible.sync="viewFilesdialogVisible" |
|||
width="600px" |
|||
:before-close="viewFilethandleClose" |
|||
> |
|||
<preview |
|||
v-if="viewFilesdialogVisible" |
|||
:storageCid="storageCid" |
|||
></preview> |
|||
</el-dialog> |
|||
</div> |
|||
|
|||
<div class="storageBox"> |
|||
<el-dialog |
|||
:visible.sync="fileconviewFilesdialogVisible" |
|||
width="600px" |
|||
:before-close="fileconviewFilethandleClose" |
|||
> |
|||
<div style="height: 500px"></div> |
|||
</el-dialog> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import mapData from "@/components/mymap.vue"; |
|||
import distribution from "@/components/distribution.vue"; |
|||
import storagenetwork from "@/components/storagenetwork.vue"; |
|||
import preview from "@/components/preview.vue"; |
|||
import axios from "axios"; |
|||
import { mapState } from "vuex"; |
|||
import { formatGb } from "@/utils/config"; |
|||
import { mapMutations } from "vuex"; |
|||
import { globalFun } from "@/utils/copy"; |
|||
import store from "@/store"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
cid: "", |
|||
formatGb: formatGb, |
|||
showLoading: false, |
|||
selectLang: store.state.lang, |
|||
sharelink: "", |
|||
Size: "", |
|||
Name: "", |
|||
wordList: [], |
|||
wordList1: [], |
|||
infor: {}, |
|||
listDate: [], |
|||
currentLanguage: this.$i18n.locale, |
|||
distabid: 1, |
|||
viewFilesdialogVisible: false, |
|||
storageCid: this.$route.query.cid, |
|||
address: this.$route.query.address, |
|||
fileconviewFilesdialogVisible: false, |
|||
showPage: false, |
|||
page: { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
mapData, |
|||
distribution, |
|||
storagenetwork, |
|||
preview, |
|||
}, |
|||
watch: { |
|||
value() { |
|||
this.page = { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
}; |
|||
this.getassetlocationList(); |
|||
}, |
|||
}, |
|||
computed: {}, |
|||
mounted() { |
|||
this.getassetStates(); |
|||
}, |
|||
watch: {}, |
|||
inject: ["reload"], |
|||
methods: { |
|||
...mapMutations(["changeLang"]), |
|||
getassetStates() { |
|||
this.showLoading = true; |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/get_asset_status?username=" + |
|||
this.$route.query.address + |
|||
"&cid=" + |
|||
this.$route.query.cid |
|||
) |
|||
.then((res) => { |
|||
this.showLoading = false; |
|||
if ( |
|||
!res.data.IsExpiration && |
|||
!res.data.IsVisitOutOfLimit && |
|||
res.data.IsExist |
|||
) { |
|||
this.showPage = true; |
|||
} else { |
|||
if (!res.data.IsExist) { |
|||
this.$message.error(this.$t("distribution3")); |
|||
} else if (res.data.IsExpiration) { |
|||
this.$message.error(this.$t("distribution4")); |
|||
} else if (res.data.IsVisitOutOfLimit) { |
|||
this.$message.error(this.$t("distribution5")); |
|||
} |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
this.showLoading = false; |
|||
}); |
|||
}, |
|||
langToggle(value) { |
|||
this.$i18n.locale = value; |
|||
this.selectLang = value; |
|||
this.changeLang(value); |
|||
this.reload(); |
|||
}, |
|||
openafileFilesBtn() { |
|||
this.$message({ |
|||
message: this.$t("功能开发中"), |
|||
type: "warning", |
|||
duration: 1000, |
|||
}); |
|||
}, |
|||
fileconviewFilethandleClose() { |
|||
this.fileconviewFilesdialogVisible = false; |
|||
}, |
|||
filstorage() { |
|||
window.open("/home/fileStorage"); |
|||
}, |
|||
openafileFile() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/share_asset?user_id=" + |
|||
this.$route.query.address + |
|||
"&asset_cid=" + |
|||
this.$route.query.cid |
|||
) |
|||
.then((res) => { |
|||
window.open(res.url); |
|||
}); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.page.current = val; |
|||
this.getassetlocationList(); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.page.pageSize = val; |
|||
this.getassetlocationList(); |
|||
}, |
|||
distrbutionBtn(n) { |
|||
this.distabid = n; |
|||
}, |
|||
deviceIdBtn(item) { |
|||
window.open("https://test1.titannet.io/nodeidDetail?device_id=" + item); |
|||
}, |
|||
openafile() { |
|||
this.viewFilesdialogVisible = true; |
|||
}, |
|||
viewFilethandleClose() { |
|||
this.viewFilesdialogVisible = false; |
|||
}, |
|||
getassetlocationList() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/get_asset_location?user_id=" + |
|||
this.address + |
|||
"&cid=" + |
|||
this.$route.query.cid + |
|||
"&page=" + |
|||
this.page.current + |
|||
"&page_size=" + |
|||
this.page.pageSize |
|||
) |
|||
.then((res) => { |
|||
this.listDate = res.node_list || []; |
|||
this.page.total = res.total; |
|||
}); |
|||
}, |
|||
getAssetList() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/share_asset?user_id=" + |
|||
this.address + |
|||
"&asset_cid=" + |
|||
this.$route.query.CID |
|||
) |
|||
.then((res) => { |
|||
this.url = res.url; |
|||
this.sharelink = res.url.split("/ipfs/")[0]; |
|||
axios |
|||
.get( |
|||
this.url + |
|||
"&page=" + |
|||
(this.page.current - 1) + |
|||
"&count=" + |
|||
this.page.pageSize |
|||
) |
|||
.then((res) => { |
|||
this.tableData = res.FileProperties; |
|||
this.Name = res.Name; |
|||
this.Size = res.Size; |
|||
this.page.total = res.Total; |
|||
}); |
|||
}); |
|||
}, |
|||
handleClose() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.language-img { |
|||
margin-right: 10px; |
|||
> img { |
|||
width: 18px; |
|||
height: 18px; |
|||
} |
|||
} |
|||
.h100 { |
|||
height: 100%; |
|||
background: #f6f6f6; |
|||
} |
|||
.activelanguage { |
|||
color: #06c270 !important; |
|||
} |
|||
.storageBox1 { |
|||
/deep/ .el-dialog__body { |
|||
padding: 8px 11px 30px 10px !important; |
|||
} |
|||
/deep/ .el-dialog { |
|||
width: 1240px !important; |
|||
background: #f6f6f6; |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
.storageBox { |
|||
/deep/ .el-dialog__body { |
|||
padding: 8px 11px 30px 10px !important; |
|||
} |
|||
/deep/ .el-dialog { |
|||
width: 1240px !important; |
|||
background: #ffffff; |
|||
border-radius: 10px; |
|||
} |
|||
} |
|||
.dia-header { |
|||
height: 72px; |
|||
background: #000000; |
|||
width: 100%; |
|||
.distrbutionColor { |
|||
color: #06c270 !important; |
|||
font-size: 18px; |
|||
} |
|||
.title-cont { |
|||
width: 1240px; |
|||
margin: 0 auto; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
cursor: pointer; |
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
.View-Files-btn { |
|||
width: 88px; |
|||
height: 28px; |
|||
border-radius: 50px 50px 50px 50px; |
|||
opacity: 1; |
|||
border: 1px solid #06c270; |
|||
margin-left: 52px; |
|||
cursor: pointer; |
|||
font-weight: 600; |
|||
color: #06c270; |
|||
font-size: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
.tablist { |
|||
display: flex; |
|||
color: #999999; |
|||
font-size: 18px; |
|||
margin-right: 50px; |
|||
align-items: center; |
|||
> div:nth-child(1) { |
|||
position: relative; |
|||
.line { |
|||
width: 30px; |
|||
height: 3px; |
|||
background: #06c270; |
|||
border-radius: 2px; |
|||
position: absolute; |
|||
left: 50%; |
|||
right: 50%; |
|||
margin-left: -15px; |
|||
margin-right: -15px; |
|||
top: 35px; |
|||
} |
|||
} |
|||
> div:nth-child(2) { |
|||
position: relative; |
|||
.line { |
|||
width: 30px; |
|||
height: 3px; |
|||
background: #06c270; |
|||
border-radius: 2px; |
|||
position: absolute; |
|||
left: 50%; |
|||
right: 50%; |
|||
margin-left: -15px; |
|||
margin-right: -15px; |
|||
top: 35px; |
|||
} |
|||
} |
|||
> div { |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
} |
|||
.left { |
|||
width: 226px; |
|||
height: 34px; |
|||
> img { |
|||
width: 193px; |
|||
height: auto; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.storagenetwork { |
|||
width: 1240px; |
|||
margin: 0 auto; |
|||
.node-storage-filstoragePag { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 18px; |
|||
|
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background: #67c23a !important; |
|||
} |
|||
/deep/ .el-pagination__jump { |
|||
margin-left: 39px !important; |
|||
height: 33px; |
|||
} |
|||
/deep/ .el-pagination__editor.el-input { |
|||
margin-left: 15px !important; |
|||
} |
|||
/deep/ |
|||
.el-pagination.is-background |
|||
.el-pager |
|||
li:not(.disabled).active:hover { |
|||
color: #fff !important; |
|||
} |
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover { |
|||
} |
|||
/deep/ .el-pagination__sizes .el-input .el-input__inner:hover { |
|||
border-color: #67c23a !important; |
|||
} |
|||
/deep/ .el-pagination__total { |
|||
height: 33px !important; |
|||
line-height: 33px; |
|||
margin-right: 19px !important; |
|||
} |
|||
/deep/ .el-input--mini { |
|||
width: 121px !important; |
|||
} |
|||
/deep/ .el-pager { |
|||
.number { |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
} |
|||
} |
|||
/deep/ .btn-prev { |
|||
width: 32px !important; |
|||
height: 32px !important; |
|||
} |
|||
/deep/ .btn-next { |
|||
width: 32px !important; |
|||
height: 32px !important; |
|||
} |
|||
} |
|||
.tian-node { |
|||
margin-top: 32px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 590px; |
|||
.map-left { |
|||
width: 800px; |
|||
border-radius: 10px; |
|||
margin-right: 20px; |
|||
height: 590px; |
|||
overflow: hidden; |
|||
} |
|||
.node-list-table { |
|||
width: 420px; |
|||
height: 590px; |
|||
background: #ffffff; |
|||
border: 1px solid #dddddd; |
|||
box-shadow: 0px 16px 24px 0px rgba(30, 30, 30, 0.08); |
|||
border-radius: 10px; |
|||
box-sizing: border-box; |
|||
.node-title { |
|||
height: 48px; |
|||
background: #67c23a; |
|||
border-radius: 10px 10px 0px 0px; |
|||
color: #fff; |
|||
font-size: 20px; |
|||
padding-left: 23px; |
|||
border: 1px solid #67c23a; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
} |
|||
.table-list { |
|||
margin-top: 8px; |
|||
padding: 0 10px; |
|||
.table-title { |
|||
height: 48px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 600; |
|||
color: #000; |
|||
font-size: 16px; |
|||
> div { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.table-content { |
|||
border-top: 1px solid #eeeeee; |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 600; |
|||
color: #000; |
|||
font-size: 16px; |
|||
> div { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.table-content > div:nth-child(2) { |
|||
color: #666666; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.title-cont { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 120px; |
|||
margin-top: 40px; |
|||
.left { |
|||
width: 420px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 10px; |
|||
margin-right: 20px; |
|||
box-sizing: border-box; |
|||
color: #000000; |
|||
font-size: 18px; |
|||
> div:nth-child(1) { |
|||
height: 60px; |
|||
margin-left: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
> div:nth-child(2) { |
|||
height: 60px; |
|||
margin-left: 24px; |
|||
margin-right: 24px; |
|||
word-wrap: break-word; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
border: 1px solid #ddd; |
|||
border-radius: 10px; |
|||
box-sizing: border-box; |
|||
padding: 24px 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.item { |
|||
flex: 1; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
padding: 10px 16px; |
|||
color: #666666; |
|||
font-size: 16px; |
|||
.num { |
|||
margin-top: 15px; |
|||
color: #000000; |
|||
font-size: 24px; |
|||
font-weight: 600; |
|||
} |
|||
.img1 { |
|||
width: 25px; |
|||
height: 26px; |
|||
margin-right: 16px; |
|||
} |
|||
.img2 { |
|||
width: 25px; |
|||
height: 24px; |
|||
margin-right: 16px; |
|||
} |
|||
.img3 { |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-right: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.title { |
|||
font-size: 36px; |
|||
font-family: PingFang SC; |
|||
font-weight: 600; |
|||
color: #222222; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,469 +0,0 @@ |
|||
|
|||
<template> |
|||
<div style="background: #fbfbfb; height: 100%"> |
|||
<div class="storagenetwork"> |
|||
<div class="title">Titan 存储网络分布情况</div> |
|||
<div @click="openafile">查看文件</div> |
|||
<div class="title-cont"> |
|||
<div class="left"> |
|||
<div> |
|||
<span style="color: #666666">文件名</span> : {{ AssetName }} |
|||
</div> |
|||
<div style="word-wrap: break-word"> |
|||
<span style="margin-right: 10px; color: #666666">CID:</span |
|||
><span>{{ infor.cid }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="item"> |
|||
<img class="img1" src="../assets/newimages/订单数量.svg" /> |
|||
<div> |
|||
<div>文件总副本数</div> |
|||
<div class="num">{{ infor.ReplicaInfo_count }} 个</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<img class="img2" src="../assets/newimages/城市区域.svg" /> |
|||
<div> |
|||
<div>城市分发总数</div> |
|||
<div class="num">{{ infor.area_count }}个</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<img class="img3" src="../assets/newimages/验证节点.svg" /> |
|||
<div> |
|||
<div>Titan分布式节点</div> |
|||
<div class="num">{{ infor.titan_count }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<img class="img3" src="../assets/newimages/边缘节点.svg" /> |
|||
<div> |
|||
<div>Filecoin存储节点</div> |
|||
<div class="num">{{ infor.fileCoin_count }}个</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tian-node"> |
|||
<div class="map-left"> |
|||
<mapData style="height: 590px" :list="wordList" /> |
|||
</div> |
|||
<div class="node-list-table"> |
|||
<div class="node-title">Titan存储节点</div> |
|||
<div class="table-list"> |
|||
<div class="table-title"> |
|||
<div>节点ID</div> |
|||
<div>地点</div> |
|||
</div> |
|||
<div |
|||
class="table-content" |
|||
v-for="(item, index) in listDate" |
|||
:key="index" |
|||
> |
|||
<div style="display: flex; align-items: center"> |
|||
<div> |
|||
<el-tooltip |
|||
class="box-item" |
|||
effect="dark" |
|||
:content=" |
|||
item.Status === 'online' |
|||
? '在线' |
|||
: item.Status === 'offline' |
|||
? '离线' |
|||
: '异常' |
|||
" |
|||
placement="top-start" |
|||
> |
|||
<p |
|||
class="status" |
|||
:style="{ |
|||
background: |
|||
item.Status === 'online' |
|||
? 'green' |
|||
: item.Status === 'offline' |
|||
? 'gray' |
|||
: 'red', |
|||
}" |
|||
></p> |
|||
</el-tooltip> |
|||
</div> |
|||
<div |
|||
@click="deviceIdBtn(item.DeviceId)" |
|||
style=" |
|||
color: #0085ff; |
|||
cursor: pointer; |
|||
font-size: 14px; |
|||
margin-left: 5px; |
|||
" |
|||
> |
|||
{{ ellipsisByLength(item.DeviceId) }} |
|||
</div> |
|||
</div> |
|||
|
|||
<div>{{ item.IpLocation }}</div> |
|||
</div> |
|||
<div class="node-storage-filstoragePag paginationbox"> |
|||
<el-pagination |
|||
background |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
layout="prev, pager, next" |
|||
:current-page="page.current" |
|||
:page-size="page.pageSize" |
|||
:total="page.total" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import mapData from "@/components/mymap.vue"; |
|||
import axios from "axios"; |
|||
import { mapState } from "vuex"; |
|||
import { formatGb } from "@/utils/config"; |
|||
import { globalFun } from "@/utils/copy"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
tableData: [], |
|||
cid: "", |
|||
formatGb: formatGb, |
|||
sharelink: "", |
|||
Size: "", |
|||
Name: "", |
|||
wordList: [], |
|||
wordList1: [], |
|||
infor: {}, |
|||
listDate: [], |
|||
AssetName: "", |
|||
page: { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
}, |
|||
}; |
|||
}, |
|||
components: { |
|||
mapData, |
|||
}, |
|||
watch: { |
|||
value() { |
|||
this.page = { |
|||
current: 1, |
|||
pageSize: 10, |
|||
totalPage: 0, |
|||
total: 0, |
|||
}; |
|||
this.getassetlocationList(); |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState(["address"]), |
|||
}, |
|||
mounted() { |
|||
this.getMap(); |
|||
this.getinfor(); |
|||
this.getassetlocationList(); |
|||
this.AssetName = this.$route.query.AssetName; |
|||
}, |
|||
watch: {}, |
|||
methods: { |
|||
handleCurrentChange(val) { |
|||
this.page.current = val; |
|||
this.getassetlocationList(); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.page.pageSize = val; |
|||
this.getassetlocationList(); |
|||
}, |
|||
deviceIdBtn(item) { |
|||
window.open("https://test1.titannet.io/nodeidDetail?device_id=" + item); |
|||
}, |
|||
openafile() { |
|||
window.open("/preview?CID=" + this.infor.cid); |
|||
}, |
|||
getMap() { |
|||
this.$http |
|||
.get("api/v1/storage/get_map_cid?cid=" + this.$route.query.cid) |
|||
.then((res) => { |
|||
this.wordList = res.list || []; |
|||
}); |
|||
}, |
|||
getinfor() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/get_asset_detail?user_id=" + |
|||
this.address + |
|||
"&cid=" + |
|||
this.$route.query.cid |
|||
) |
|||
.then((res) => { |
|||
this.infor = res; |
|||
}); |
|||
}, |
|||
getassetlocationList() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/get_asset_location?user_id=" + |
|||
this.address + |
|||
"&cid=" + |
|||
this.$route.query.cid + |
|||
"&page=" + |
|||
this.page.current + |
|||
"&page_size=" + |
|||
this.page.pageSize |
|||
) |
|||
.then((res) => { |
|||
this.listDate = res.node_list || []; |
|||
this.page.total = res.total; |
|||
}); |
|||
}, |
|||
getAssetList() { |
|||
this.$http |
|||
.get( |
|||
"/api/v1/storage/share_asset?user_id=" + |
|||
this.address + |
|||
"&asset_cid=" + |
|||
this.$route.query.CID |
|||
) |
|||
.then((res) => { |
|||
this.url = res.url; |
|||
this.sharelink = res.url.split("/ipfs/")[0]; |
|||
axios |
|||
.get( |
|||
this.url + |
|||
"&page=" + |
|||
(this.page.current - 1) + |
|||
"&count=" + |
|||
this.page.pageSize |
|||
) |
|||
.then((res) => { |
|||
this.tableData = res.FileProperties; |
|||
this.Name = res.Name; |
|||
this.Size = res.Size; |
|||
this.page.total = res.Total; |
|||
}); |
|||
}); |
|||
}, |
|||
handleClose() {}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.status { |
|||
width: 10px; |
|||
height: 10px; |
|||
border-radius: 50%; |
|||
} |
|||
.storagenetwork { |
|||
padding-top: 46px; |
|||
width: 1240px; |
|||
margin: 0 auto; |
|||
.node-storage-filstoragePag { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 18px; |
|||
|
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background: #67c23a !important; |
|||
} |
|||
/deep/ .el-pagination__jump { |
|||
margin-left: 39px !important; |
|||
height: 33px; |
|||
} |
|||
/deep/ .el-pagination__editor.el-input { |
|||
margin-left: 15px !important; |
|||
} |
|||
/deep/ |
|||
.el-pagination.is-background |
|||
.el-pager |
|||
li:not(.disabled).active:hover { |
|||
color: #fff !important; |
|||
} |
|||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover { |
|||
// color:#222222 !important; |
|||
} |
|||
/deep/ .el-pagination__sizes .el-input .el-input__inner:hover { |
|||
border-color: #67c23a !important; |
|||
} |
|||
/deep/ .el-pagination__total { |
|||
height: 33px !important; |
|||
line-height: 33px; |
|||
margin-right: 19px !important; |
|||
} |
|||
/deep/ .el-input--mini { |
|||
width: 121px !important; |
|||
} |
|||
/deep/ .el-pager { |
|||
.number { |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
} |
|||
} |
|||
/deep/ .btn-prev { |
|||
width: 32px !important; |
|||
height: 32px !important; |
|||
} |
|||
/deep/ .btn-next { |
|||
width: 32px !important; |
|||
height: 32px !important; |
|||
} |
|||
} |
|||
.tian-node { |
|||
margin-top: 32px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 590px; |
|||
.map-left { |
|||
width: 800px; |
|||
border-radius: 10px; |
|||
margin-right: 20px; |
|||
height: 590px; |
|||
overflow: hidden; |
|||
} |
|||
.node-list-table { |
|||
width: 420px; |
|||
height: 590px; |
|||
background: #ffffff; |
|||
border: 1px solid #dddddd; |
|||
box-shadow: 0px 16px 24px 0px rgba(30, 30, 30, 0.08); |
|||
border-radius: 10px; |
|||
box-sizing: border-box; |
|||
.node-title { |
|||
height: 48px; |
|||
background: #67c23a; |
|||
border-radius: 10px 10px 0px 0px; |
|||
color: #fff; |
|||
font-size: 20px; |
|||
padding-left: 23px; |
|||
border: 1px solid #67c23a; |
|||
display: flex; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
} |
|||
.table-list { |
|||
margin-top: 8px; |
|||
padding: 0 10px; |
|||
.table-title { |
|||
height: 48px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 600; |
|||
color: #000; |
|||
font-size: 16px; |
|||
> div { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.table-content { |
|||
border-top: 1px solid #eeeeee; |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-weight: 600; |
|||
color: #000; |
|||
font-size: 16px; |
|||
> div { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
.table-content > div:nth-child(2) { |
|||
color: #666666; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.title-cont { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 120px; |
|||
margin-top: 40px; |
|||
.left { |
|||
width: 420px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 10px; |
|||
margin-right: 20px; |
|||
box-sizing: border-box; |
|||
color: #000000; |
|||
font-size: 18px; |
|||
> div:nth-child(1) { |
|||
height: 60px; |
|||
margin-left: 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
> div:nth-child(2) { |
|||
height: 60px; |
|||
margin-left: 24px; |
|||
margin-right: 24px; |
|||
word-wrap: break-word; |
|||
} |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
border: 1px solid #ddd; |
|||
border-radius: 10px; |
|||
box-sizing: border-box; |
|||
padding: 24px 0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.item { |
|||
flex: 1; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
padding: 10px 16px; |
|||
color: #666666; |
|||
font-size: 16px; |
|||
.num { |
|||
margin-top: 15px; |
|||
color: #000000; |
|||
font-size: 24px; |
|||
font-weight: 600; |
|||
} |
|||
.img1 { |
|||
width: 25px; |
|||
height: 26px; |
|||
margin-right: 16px; |
|||
} |
|||
.img2 { |
|||
width: 25px; |
|||
height: 24px; |
|||
margin-right: 16px; |
|||
} |
|||
.img3 { |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-right: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.title { |
|||
font-size: 36px; |
|||
font-family: PingFang SC; |
|||
font-weight: 600; |
|||
color: #222222; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue