forked from cerc-io/cosmos-explorer
improve governance
This commit is contained in:
liangping
parent
37d0ec4aa3
commit
8aafe3c5f6
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -112,6 +112,9 @@
|
||||
</b-card-title>
|
||||
</b-card-header>
|
||||
<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"
|
||||
@ -127,14 +130,14 @@
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-no'+proposal.id"
|
||||
variant="warning"
|
||||
variant="danger"
|
||||
:value="percent(proposal.tally.no)"
|
||||
:label="`${percent(proposal.tally.no).toFixed()}%`"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-veto'+proposal.id"
|
||||
variant="danger"
|
||||
class="bg-danger bg-darken-4"
|
||||
:value="percent(proposal.tally.veto)"
|
||||
:label="`${percent(proposal.tally.veto).toFixed()}%`"
|
||||
show-progress
|
||||
@ -167,6 +170,14 @@
|
||||
>
|
||||
{{ 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"
|
||||
@ -188,7 +199,7 @@
|
||||
<feather-icon icon="PlusIcon" />
|
||||
Load More Votes
|
||||
</div>
|
||||
</b-card-body>
|
||||
</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, {}),
|
||||
|
||||
@ -63,7 +63,9 @@
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="scale">
|
||||
<div class="box">
|
||||
<b-progress
|
||||
:max="totalPower && p.status === 2? 100 * (totalPower/p.tally.total) :100"
|
||||
height="2rem"
|
||||
@ -79,14 +81,14 @@
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-no'+p.id"
|
||||
variant="warning"
|
||||
variant="danger"
|
||||
:value="percent(p.tally.no)"
|
||||
:label="`${percent(p.tally.no).toFixed()}%`"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-veto'+p.id"
|
||||
variant="danger"
|
||||
class="bg-danger bg-darken-4"
|
||||
:value="percent(p.tally.veto)"
|
||||
:label="`${percent(p.tally.veto).toFixed()}%`"
|
||||
show-progress
|
||||
@ -99,6 +101,12 @@
|
||||
show-progress
|
||||
/>
|
||||
</b-progress>
|
||||
<div
|
||||
v-if="tallyParam"
|
||||
class="box overlay"
|
||||
:style="`left:${scaleWidth(p)}%;`"
|
||||
/>
|
||||
</div>
|
||||
<b-tooltip
|
||||
:target="'vote-yes'+p.id"
|
||||
>
|
||||
@ -119,6 +127,7 @@
|
||||
>
|
||||
{{ 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)'"
|
||||
@ -152,7 +161,7 @@
|
||||
{{ $t('btn_vote') }}
|
||||
</b-button>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user