improve active proposal

This commit is contained in:
liangping 2022-11-04 22:33:24 +08:00
parent d25c9d1954
commit 4cb900ed17

View File

@ -93,33 +93,128 @@
<b-card-title>Active Proposals</b-card-title> <b-card-title>Active Proposals</b-card-title>
</b-card-header> </b-card-header>
<b-card-body> <b-card-body>
<b-media <b-row
v-for="prop in proprosals2" v-for="prop in proprosals2"
:key="prop.id" :key="prop.id"
>
<b-col
md="6"
sm="12"
>
<b-media
no-body no-body
class="mb-1" class="mb-1"
> >
<b-media-aside <b-media-aside
v-b-modal.operation-modal @click="showDetail(prop.id)"
@click="selectProposal('Vote',prop.id, prop.title)"
> >
<b-avatar <b-avatar
rounded rounded
size="42" size="42"
:variant="myVotes[prop.id] ? 'light-primary': 'primary'" variant="light-primary"
> >
{{ myVotes[prop.id] || 'Vote' }} {{ prop.id }}
</b-avatar> </b-avatar>
</b-media-aside> </b-media-aside>
<b-link :to="`./${chain}/gov/${prop.id}`"> <b-link :to="`./${chain}/gov/${prop.id}`">
<b-media-body class="d-flex flex-column justify-content-center"> <b-media-body class="d-flex flex-column justify-content-center">
<h6 class="transaction-title"> <h6 class="transaction-title">
{{ prop.id }}. {{ prop.title }} {{ prop.title }}
</h6> </h6>
<small>{{ formatType(prop.contents['@type']) }} {{ formatEnding(prop.voting_end_time) }}</small> <small>{{ formatType(prop.contents['@type']) }} {{ formatEnding(prop.voting_end_time) }}</small>
</b-media-body> </b-media-body>
</b-link> </b-link>
</b-media> </b-media>
</b-col>
<b-col
md="6"
sm="12"
>
<b-row>
<b-col cols="8">
<b-progress
:max="100"
height="2rem"
show-progress
>
<b-progress-bar
:id="'vote-yes'+prop.id"
variant="success"
:value="percent(prop.tally.yes)"
show-progress
:label="`${percent(prop.tally.yes).toFixed()}%`"
/>
<b-progress-bar
:id="'vote-no'+prop.id"
variant="warning"
:value="percent(prop.tally.no)"
:label="`${percent(prop.tally.no).toFixed()}%`"
show-progress
/>
<b-progress-bar
:id="'vote-veto'+prop.id"
variant="danger"
:value="percent(prop.tally.veto)"
:label="`${percent(prop.tally.veto).toFixed()}%`"
show-progress
/>
<b-progress-bar
:id="'vote-abstain'+prop.id"
variant="secondary"
:value="percent(prop.tally.abstain)"
:label="`${percent(prop.tally.abstain).toFixed()}%`"
show-progress
/>
</b-progress>
<b-tooltip
:target="'vote-yes'+prop.id"
>
{{ percent(prop.tally.yes) }}% voted Yes
</b-tooltip>
<b-tooltip
:target="'vote-no'+prop.id"
>
{{ percent(prop.tally.no) }}% voted No
</b-tooltip>
<b-tooltip
:target="'vote-veto'+prop.id"
>
{{ percent(prop.tally.veto) }}% voted No With Veto
</b-tooltip>
<b-tooltip
:target="'vote-abstain'+prop.id"
>
{{ percent(prop.tally.abstain) }}% voted Abstain
</b-tooltip>
</b-col>
<b-col cols="4">
<b-button
v-b-modal.operation-modal
variant="primary"
size="sm"
@click="selectProposal('Vote',prop.id, prop.title)"
>
{{ myVotes[prop.id] ? `${myVotes[prop.id]}`: 'Vote' }}
</b-button>
</b-col>
</b-row>
</b-col>
<b-col
cols="12"
:class="detailId === prop.id? 'd-block': 'd-none'"
>
<b-card
border-variant="primary"
bg-variant="transparent"
class="shadow-none"
style="max-height:350px;overflow: auto;"
>
<VueMarkdown>
{{ addNewLine(prop.description) }}
</VueMarkdown>
</b-card>
</b-col>
</b-row>
<div v-if="proprosals2.length === 0"> <div v-if="proprosals2.length === 0">
No active proposal! No active proposal!
<b-link :to="`./${chain}/gov`"> <b-link :to="`./${chain}/gov`">
@ -343,7 +438,7 @@
<script> <script>
import { import {
BRow, BCol, BAlert, BCard, BTable, BFormCheckbox, BCardHeader, BCardTitle, BMedia, BMediaAside, BMediaBody, BAvatar, BRow, BCol, BAlert, BCard, BTable, BFormCheckbox, BCardHeader, BCardTitle, BMedia, BMediaAside, BMediaBody, BAvatar,
BCardBody, BLink, BButtonGroup, BButton, BTooltip, VBModal, VBTooltip, BCardFooter, BCardBody, BLink, BButtonGroup, BButton, BTooltip, VBModal, VBTooltip, BCardFooter, BProgress, BProgressBar,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { import {
formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter, getLocalAccounts, formatNumber, formatTokenAmount, isToken, percent, timeIn, toDay, toDuration, tokenFormatter, getLocalAccounts,
@ -352,6 +447,7 @@ import {
import OperationModal from '@/views/components/OperationModal/index.vue' import OperationModal from '@/views/components/OperationModal/index.vue'
import Ripple from 'vue-ripple-directive' import Ripple from 'vue-ripple-directive'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import VueMarkdown from 'vue-markdown'
import ParametersModuleComponent from './components/parameters/ParametersModuleComponent.vue' import ParametersModuleComponent from './components/parameters/ParametersModuleComponent.vue'
import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizontal.vue' import DashboardCardHorizontal from './components/dashboard/DashboardCardHorizontal.vue'
import DashboardCardVertical from './components/dashboard/DashboardCardVertical.vue' import DashboardCardVertical from './components/dashboard/DashboardCardVertical.vue'
@ -378,6 +474,9 @@ export default {
BCardBody, BCardBody,
BLink, BLink,
BCardFooter, BCardFooter,
BProgress,
BProgressBar,
VueMarkdown,
OperationModal, OperationModal,
ParametersModuleComponent, ParametersModuleComponent,
@ -393,6 +492,7 @@ export default {
}, },
data() { data() {
return { return {
detailId: 0,
fields: ['validator', 'delegation', 'rewards', 'action'], fields: ['validator', 'delegation', 'rewards', 'action'],
delegations: [], delegations: [],
rewards: [], rewards: [],
@ -461,9 +561,26 @@ export default {
}, },
}, },
created() { created() {
this.$http.getGovernanceListByStatus(2).then(res => { this.$http.getStakingParameters().then(res => {
this.proposals = res.proposals Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
.then(pool => {
this.supply = `${formatNumber(formatTokenAmount(pool[1].amount, 2, res.bond_denom, false), true, 2)}`
this.bonded = `${formatNumber(formatTokenAmount(pool[0].bondedToken, 2, res.bond_denom, false), true, 2)}`
this.ratio = `${percent(pool[0].bondedToken / pool[1].amount)}%`
this.$http.getGovernanceListByStatus(2).then(gov => {
gov.proposals.forEach(p => {
this.$http.getGovernanceTally(p.id, pool[0].bondedToken).then(update => {
const p2 = p
p2.tally = update
this.proposals.push(p2)
this.proposals.sort((a, b) => a.id - b.id)
}) })
})
})
})
})
this.$http.getLatestBlock().then(res => { this.$http.getLatestBlock().then(res => {
this.height = res.block.header.height this.height = res.block.header.height
if (timeIn(res.block.header.time, 3, 'm')) { if (timeIn(res.block.header.time, 3, 'm')) {
@ -475,15 +592,6 @@ export default {
this.validators = res.block.last_commit.signatures.length this.validators = res.block.last_commit.signatures.length
}) })
this.$http.getStakingParameters().then(res => {
Promise.all([this.$http.getStakingPool(), this.$http.getBankTotal(res.bond_denom)])
.then(pool => {
this.supply = `${formatNumber(formatTokenAmount(pool[1].amount, 2, res.bond_denom, false), true, 2)}`
this.bonded = `${formatNumber(formatTokenAmount(pool[0].bondedToken, 2, res.bond_denom, false), true, 2)}`
this.ratio = `${percent(pool[0].bondedToken / pool[1].amount)}%`
})
})
this.$http.getCommunityPool().then(res => { this.$http.getCommunityPool().then(res => {
this.communityPool = this.formatToken(res.pool) this.communityPool = this.formatToken(res.pool)
}) })
@ -609,6 +717,10 @@ export default {
return { title: this.convert(data[k]), subtitle: k } return { title: this.convert(data[k]), subtitle: k }
}) })
}, },
addNewLine(value) {
return value ? value.replace(/(?:\\[rn])+/g, '\n') : '-'
},
percent: v => percent(v),
formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm:ss'), formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm:ss'),
convert(v) { convert(v) {
if (typeof v === 'object') { if (typeof v === 'object') {
@ -633,6 +745,13 @@ export default {
} }
return v return v
}, },
showDetail(id) {
if (this.detailId !== id) {
this.detailId = id
} else {
this.detailId = 0
}
},
}, },
} }
</script> </script>