From 8aafe3c5f6ae89b4c10c45e70c963842be825d8a Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Sun, 6 Nov 2022 17:35:44 +0800
Subject: [PATCH] improve governance

---
 .../base/bootstrap-extended/_progress.scss    |  25 +++
 src/views/Dashboard.vue                       |  36 +---
 src/views/Governance.vue                      |   5 +
 src/views/GovernanceProposalView.vue          | 178 +++++++++-------
 .../governance/ProposalSummaryComponent.vue   | 194 ++++++++++--------
 5 files changed, 247 insertions(+), 191 deletions(-)

diff --git a/src/@core/scss/base/bootstrap-extended/_progress.scss b/src/@core/scss/base/bootstrap-extended/_progress.scss
index 3c2956d7..3abd8c31 100644
--- a/src/@core/scss/base/bootstrap-extended/_progress.scss
+++ b/src/@core/scss/base/bootstrap-extended/_progress.scss
@@ -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;
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 7074d269..14ac7d53 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -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>
diff --git a/src/views/Governance.vue b/src/views/Governance.vue
index 2b4b4395..3333fd8a 100644
--- a/src/views/Governance.vue
+++ b/src/views/Governance.vue
@@ -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: {
diff --git a/src/views/GovernanceProposalView.vue b/src/views/GovernanceProposalView.vue
index 13acd37b..5f40b234 100644
--- a/src/views/GovernanceProposalView.vue
+++ b/src/views/GovernanceProposalView.vue
@@ -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, {}),
diff --git a/src/views/components/governance/ProposalSummaryComponent.vue b/src/views/components/governance/ProposalSummaryComponent.vue
index 529c651c..0b568c8d 100644
--- a/src/views/components/governance/ProposalSummaryComponent.vue
+++ b/src/views/components/governance/ProposalSummaryComponent.vue
@@ -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)