更改图表

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue

@@ -19,13 +19,13 @@
             <img class="icon" src="./assets/icon.svg" />
           </div>
           <div class="content-item-right" :style="{
-            '--width': item.trafficRestriction + '%'
+            '--width': (item.trafficClose / maxCloseNum) * 100 + '%'
           }">
             <div class="box-item">
               <span class="num">{{ item.trafficClose }}次</span>
             </div>
             <div class="box-item" :style="{
-              '--width': item.trafficRestriction + '%'
+              '--width': (item.trafficRestriction / maxRestrictionNum) * 100 + '%'
             }">
               <span class="num">{{ item.trafficRestriction }}次</span>
             </div>
@@ -65,7 +65,9 @@ export default {
   data() {
     return {
       statsDialogVisible: false,
-      tollBoothsData: []
+      tollBoothsData: [],
+      maxRestrictionNum: null,
+      maxCloseNum: null
     }
   },
 
@@ -82,7 +84,9 @@ export default {
     getTollStationAnalysis() {
       return tollStationAnalysis().then((response) => {
         this.tollBoothsData = response.data
-        console.log("response", response)
+        this.maxRestrictionNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction }))
+        this.maxCloseNum = Math.max.apply(Math, this.tollBoothsData.map(item => { return item.trafficRestriction }))
+        console.log("response", this.maxRestrictionNum, this.maxCloseNum)
         // let facilityName = []
         // let trafficRestriction = []
         // let trafficClose = []
@@ -214,11 +218,12 @@ export default {
 
         .name {
           width: 130px;
-          text-align: right;
           color: #fff;
           font-size: 14px;
           margin-right: 10px;
-          display: block;
+          display: flex;
+          justify-content: end;
+          align-items: center;
         }
 
         .icon {