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