cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve governance

Browse Source
This commit is contained in:
liangping 2022-11-06 17:35:44 +08:00
parent 37d0ec4aa3
commit 8aafe3c5f6
5 changed files with 247 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/@core/scss/base/bootstrap-extended/_progress.scss
View File

@ -22,3 +22,28 @@
.progress { .progress {
border-radius: 3px; border-radius: 3px;
} }
.scale {
width: 100%;
height: 3em;
position: relative;
/* margin: 30px; // */
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding-top: 0.5em;
/* opacity: 0.7; /**/
background: transparent;
}
.overlay {
z-index: 9;
width: 2px;
border-right-color: green;
border-right-width: 2px;
border-right-style: dotted;
}

36
src/views/Dashboard.vue
View File

@ -138,6 +138,7 @@
:max="totalPower? 100 * (totalPower/prop.tally.total) :100" :max="totalPower? 100 * (totalPower/prop.tally.total) :100"
height="2rem" height="2rem"
show-progress show-progress
class="font-small-1"
> >
<b-progress-bar <b-progress-bar
:id="'vote-yes'+prop.id" :id="'vote-yes'+prop.id"
@ -148,14 +149,14 @@
/> />
<b-progress-bar <b-progress-bar
:id="'vote-no'+prop.id" :id="'vote-no'+prop.id"
variant="warning" variant="danger"
:value="percent(prop.tally.no)" :value="percent(prop.tally.no)"
:label="`${percent(prop.tally.no).toFixed()}%`" :label="`${percent(prop.tally.no).toFixed()}%`"
show-progress show-progress
/> />
<b-progress-bar <b-progress-bar
:id="'vote-veto'+prop.id" :id="'vote-veto'+prop.id"
variant="danger" class="bg-danger bg-darken-4"
:value="percent(prop.tally.veto)" :value="percent(prop.tally.veto)"
:label="`${percent(prop.tally.veto).toFixed()}%`" :label="`${percent(prop.tally.veto).toFixed()}%`"
show-progress show-progress
@ -171,7 +172,7 @@
</div> </div>
<div <div
class="box overlay" class="box overlay"
:style="`width:${scaleWidth(prop.tally)}%`" :style="`left:${scaleWidth(prop.tally)}%;`"
/> />
</div> </div>
<b-tooltip <b-tooltip
@ -195,7 +196,10 @@
{{ percent(prop.tally.abstain) }}% voters voted Abstain {{ percent(prop.tally.abstain) }}% voters voted Abstain
</b-tooltip> </b-tooltip>
</b-col> </b-col>
<b-col cols="4"> <b-col
cols="4"
style="padding-top: 0.5em"
>
<b-button <b-button
v-b-modal.operation-modal v-b-modal.operation-modal
variant="primary" variant="primary"
@ -794,28 +798,4 @@ export default {
.addzone :hover { .addzone :hover {
border: 2px dashed #7367F0; border: 2px dashed #7367F0;
} }
.scale {
width: 100%;
height: 3em;
position: relative;
/* margin: 30px; // */
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding-top: 0.5em;
/* opacity: 0.7; */
background: transparent;
}
.overlay {
z-index: 9;
border-right-color: green;
border-right-width: 2px;
border-right-style: dotted;
background: transparent;
}
</style> </style>

5
src/views/Governance.vue
View File

@ -10,6 +10,7 @@
<proposal-summary-component <proposal-summary-component
:p="p" :p="p"
:total-power="totalPower" :total-power="totalPower"
:tally-param="tallyParam"
/> />
</b-col> </b-col>
</b-row> </b-row>
@ -68,9 +69,13 @@ export default {
operationModalType: '', operationModalType: '',
next: '', next: '',
totalPower: 0, totalPower: 0,
tallyParam: null,
} }
}, },
mounted() { mounted() {
this.$http.getGovernanceParameterTallying().then(res => {
this.tallyParam = res
})
this.getList() this.getList()
}, },
methods: { methods: {

178
src/views/GovernanceProposalView.vue
View File

@ -112,83 +112,94 @@
</b-card-title> </b-card-title>
</b-card-header> </b-card-header>
<b-card-body> <b-card-body>
<b-progress <div>
:max="totalPower && proposal.status ===2? 100 * (totalPower/proposal.tally.total) :100" <div class="scale">
height="2rem" <div class="box">
class="mb-2" <b-progress
show-progress :max="totalPower && proposal.status ===2? 100 * (totalPower/proposal.tally.total) :100"
> height="2rem"
<b-progress-bar class="mb-2"
:id="'vote-yes'+proposal.id" show-progress
variant="success" >
:value="percent(proposal.tally.yes)" <b-progress-bar
:label="`${percent(proposal.tally.yes).toFixed()}%`" :id="'vote-yes'+proposal.id"
show-progress variant="success"
/> :value="percent(proposal.tally.yes)"
<b-progress-bar :label="`${percent(proposal.tally.yes).toFixed()}%`"
:id="'vote-no'+proposal.id" show-progress
variant="warning" />
:value="percent(proposal.tally.no)" <b-progress-bar
:label="`${percent(proposal.tally.no).toFixed()}%`" :id="'vote-no'+proposal.id"
show-progress variant="danger"
/> :value="percent(proposal.tally.no)"
<b-progress-bar :label="`${percent(proposal.tally.no).toFixed()}%`"
:id="'vote-veto'+proposal.id" show-progress
variant="danger" />
:value="percent(proposal.tally.veto)" <b-progress-bar
:label="`${percent(proposal.tally.veto).toFixed()}%`" :id="'vote-veto'+proposal.id"
show-progress class="bg-danger bg-darken-4"
/> :value="percent(proposal.tally.veto)"
<b-progress-bar :label="`${percent(proposal.tally.veto).toFixed()}%`"
:id="'vote-abstain'+proposal.id" show-progress
variant="secondary" />
:value="percent(proposal.tally.abstain)" <b-progress-bar
:label="`${percent(proposal.tally.abstain).toFixed()}%`" :id="'vote-abstain'+proposal.id"
show-progress variant="secondary"
/> :value="percent(proposal.tally.abstain)"
</b-progress> :label="`${percent(proposal.tally.abstain).toFixed()}%`"
<b-tooltip show-progress
:target="'vote-yes'+proposal.id" />
> </b-progress>
{{ percent(proposal.tally.yes) }}% voted Yes <b-tooltip
</b-tooltip> :target="'vote-yes'+proposal.id"
<b-tooltip >
:target="'vote-no'+proposal.id" {{ percent(proposal.tally.yes) }}% voted Yes
> </b-tooltip>
{{ percent(proposal.tally.no) }}% voted No <b-tooltip
</b-tooltip> :target="'vote-no'+proposal.id"
<b-tooltip >
:target="'vote-veto'+proposal.id" {{ percent(proposal.tally.no) }}% voted No
> </b-tooltip>
{{ percent(proposal.tally.veto) }}% voted No With Veto <b-tooltip
</b-tooltip> :target="'vote-veto'+proposal.id"
<b-tooltip >
:target="'vote-abstain'+proposal.id" {{ percent(proposal.tally.veto) }}% voted No With Veto
> </b-tooltip>
{{ percent(proposal.tally.abstain) }}% voted Abstain <b-tooltip
</b-tooltip> :target="'vote-abstain'+proposal.id"
<b-table >
v-if="votes.votes && votes.votes.length > 0" {{ percent(proposal.tally.abstain) }}% voted Abstain
stacked="sm" </b-tooltip>
:fields="votes_fields"
:items="votes.votes" <div
striped v-if="tallyParam"
> class="box overlay"
<template #cell(voter)="data"> :style="`left:${scaleWidth(proposal)}%;`"
<router-link :to="`../account/${data.item.voter}`"> />
{{ formatAddress(data.item.voter) }} </div>
</router-link> </div>
</template> <b-table
</b-table> v-if="votes.votes && votes.votes.length > 0"
<div stacked="sm"
v-if="next" :fields="votes_fields"
class="addzone text-center pt-50 pb-50 bg-transparent text-primary" :items="votes.votes"
@click="loadVotes()" striped
> >
<feather-icon icon="PlusIcon" /> <template #cell(voter)="data">
Load More Votes <router-link :to="`../account/${data.item.voter}`">
</div> {{ formatAddress(data.item.voter) }}
</b-card-body> </router-link>
</template>
</b-table>
<div
v-if="next"
class="addzone text-center pt-50 pb-50 bg-transparent text-primary"
@click="loadVotes()"
>
<feather-icon icon="PlusIcon" />
Load More Votes
</div>
</div></b-card-body>
</b-card> </b-card>
<b-card <b-card
v-if="proposal.total_deposit" v-if="proposal.total_deposit"
@ -290,6 +301,7 @@ export default {
}, },
data() { data() {
return { return {
tallyParam: null,
latest: {}, latest: {},
next: null, next: null,
proposal: new Proposal(), proposal: new Proposal(),
@ -357,6 +369,9 @@ export default {
}, },
}, },
created() { created() {
this.$http.getGovernanceParameterTallying().then(res => {
this.tallyParam = res
})
const pid = this.$route.params.proposalid const pid = this.$route.params.proposalid
if (this.$route.query.from) { if (this.$route.query.from) {
this.from = this.$route.query.from this.from = this.$route.query.from
@ -392,6 +407,15 @@ export default {
}) })
}, },
methods: { methods: {
scaleWidth(p) {
if (this.tallyParam) {
if (p.status === 2) {
return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * 100
}
return Number(this.tallyParam.threshold) * 100
}
return 50
},
percent: v => percent(v), percent: v => percent(v),
formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm'), formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm'),
formatToken: v => tokenFormatter(v, {}), formatToken: v => tokenFormatter(v, {}),

194
src/views/components/governance/ProposalSummaryComponent.vue
View File

@ -63,96 +63,105 @@
</h6> </h6>
</div> </div>
</div> </div>
<div>
<b-progress <div class="scale">
:max="totalPower && p.status === 2? 100 * (totalPower/p.tally.total) :100" <div class="box">
height="2rem" <b-progress
class="mb-2" :max="totalPower && p.status === 2? 100 * (totalPower/p.tally.total) :100"
show-progress height="2rem"
> class="mb-2"
<b-progress-bar show-progress
:id="'vote-yes'+p.id" >
variant="success" <b-progress-bar
:value="percent(p.tally.yes)" :id="'vote-yes'+p.id"
show-progress variant="success"
:label="`${percent(p.tally.yes).toFixed()}%`" :value="percent(p.tally.yes)"
/> show-progress
<b-progress-bar :label="`${percent(p.tally.yes).toFixed()}%`"
:id="'vote-no'+p.id" />
variant="warning" <b-progress-bar
:value="percent(p.tally.no)" :id="'vote-no'+p.id"
:label="`${percent(p.tally.no).toFixed()}%`" variant="danger"
show-progress :value="percent(p.tally.no)"
/> :label="`${percent(p.tally.no).toFixed()}%`"
<b-progress-bar show-progress
:id="'vote-veto'+p.id" />
variant="danger" <b-progress-bar
:value="percent(p.tally.veto)" :id="'vote-veto'+p.id"
:label="`${percent(p.tally.veto).toFixed()}%`" class="bg-danger bg-darken-4"
show-progress :value="percent(p.tally.veto)"
/> :label="`${percent(p.tally.veto).toFixed()}%`"
<b-progress-bar show-progress
:id="'vote-abstain'+p.id" />
variant="secondary" <b-progress-bar
:value="percent(p.tally.abstain)" :id="'vote-abstain'+p.id"
:label="`${percent(p.tally.abstain).toFixed()}%`" variant="secondary"
show-progress :value="percent(p.tally.abstain)"
/> :label="`${percent(p.tally.abstain).toFixed()}%`"
</b-progress> show-progress
<b-tooltip />
:target="'vote-yes'+p.id" </b-progress>
> <div
{{ percent(p.tally.yes) }}% voted Yes v-if="tallyParam"
</b-tooltip> class="box overlay"
<b-tooltip :style="`left:${scaleWidth(p)}%;`"
:target="'vote-no'+p.id" />
> </div>
{{ percent(p.tally.no) }}% voted No <b-tooltip
</b-tooltip> :target="'vote-yes'+p.id"
<b-tooltip >
:target="'vote-veto'+p.id" {{ percent(p.tally.yes) }}% voted Yes
> </b-tooltip>
{{ percent(p.tally.veto) }}% voted No With Veto <b-tooltip
</b-tooltip> :target="'vote-no'+p.id"
<b-tooltip >
:target="'vote-abstain'+p.id" {{ percent(p.tally.no) }}% voted No
> </b-tooltip>
{{ percent(p.tally.abstain) }}% voted Abstain <b-tooltip
</b-tooltip> :target="'vote-veto'+p.id"
<b-card-footer class="pb-0"> >
<router-link {{ percent(p.tally.veto) }}% voted No With Veto
v-ripple.400="'rgba(113, 102, 240, 0.15)'" </b-tooltip>
:to="`./gov/${p.id}`" <b-tooltip
variant="outline-primary" :target="'vote-abstain'+p.id"
> >
<b-button {{ percent(p.tally.abstain) }}% voted Abstain
</b-tooltip>
</div>
<b-card-footer class="pb-0">
<router-link
v-ripple.400="'rgba(113, 102, 240, 0.15)'" v-ripple.400="'rgba(113, 102, 240, 0.15)'"
:href="`./gov/${p.id}`" :to="`./gov/${p.id}`"
variant="outline-primary" variant="outline-primary"
> >
{{ $t('btn_detail') }} <b-button
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
:href="`./gov/${p.id}`"
variant="outline-primary"
>
{{ $t('btn_detail') }}
</b-button>
</router-link>
<b-button
v-if="p.status===1"
v-b-modal.operation-modal
variant="primary"
class="btn float-right mg-2"
@click="selectProposal('GovDeposit',p.id, p.title)"
>
{{ $t('btn_deposit') }}
</b-button> </b-button>
</router-link> <b-button
<b-button v-if="p.status===2"
v-if="p.status===1" v-b-modal.operation-modal
v-b-modal.operation-modal variant="primary"
variant="primary" class="btn float-right mg-2"
class="btn float-right mg-2" @click="selectProposal('Vote',p.id, p.title)"
@click="selectProposal('GovDeposit',p.id, p.title)" >
> {{ $t('btn_vote') }}
{{ $t('btn_deposit') }} </b-button>
</b-button> </b-card-footer>
<b-button </div></b-card>
v-if="p.status===2"
v-b-modal.operation-modal
variant="primary"
class="btn float-right mg-2"
@click="selectProposal('Vote',p.id, p.title)"
>
{{ $t('btn_vote') }}
</b-button>
</b-card-footer>
</b-card>
</template> </template>
<script> <script>
@ -191,8 +200,21 @@ export default {
type: Number, type: Number,
default: 0, default: 0,
}, },
tallyParam: {
type: Object,
default: null,
},
}, },
methods: { methods: {
scaleWidth(p) {
if (this.tallyParam) {
if (p.status === 2) {
return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * 100
}
return Number(this.tallyParam.threshold) * 100
}
return 50
},
selectProposal(modal, pid, title) { selectProposal(modal, pid, title) {
this.$parent.operationModalType = modal this.$parent.operationModalType = modal
this.$parent.selectedProposalId = Number(pid) this.$parent.selectedProposalId = Number(pid)