improve governance

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

View File

@ -22,3 +22,28 @@
.progress {
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;
}

View File

@ -138,6 +138,7 @@
:max="totalPower? 100 * (totalPower/prop.tally.total) :100"
height="2rem"
show-progress
class="font-small-1"
>
<b-progress-bar
:id="'vote-yes'+prop.id"
@ -148,14 +149,14 @@
/>
<b-progress-bar
:id="'vote-no'+prop.id"
variant="warning"
variant="danger"
:value="percent(prop.tally.no)"
:label="`${percent(prop.tally.no).toFixed()}%`"
show-progress
/>
<b-progress-bar
:id="'vote-veto'+prop.id"
variant="danger"
class="bg-danger bg-darken-4"
:value="percent(prop.tally.veto)"
:label="`${percent(prop.tally.veto).toFixed()}%`"
show-progress
@ -171,7 +172,7 @@
</div>
<div
class="box overlay"
:style="`width:${scaleWidth(prop.tally)}%`"
:style="`left:${scaleWidth(prop.tally)}%;`"
/>
</div>
<b-tooltip
@ -195,7 +196,10 @@
{{ percent(prop.tally.abstain) }}% voters voted Abstain
</b-tooltip>
</b-col>
<b-col cols="4">
<b-col
cols="4"
style="padding-top: 0.5em"
>
<b-button
v-b-modal.operation-modal
variant="primary"
@ -794,28 +798,4 @@ export default {
.addzone :hover {
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>

View File

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

View File

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

View File

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