更新

src/App.vue

@@ -38,7 +38,8 @@ export default {
       week_num: 0,
       mon_num: 0,
       year_num: 0,
-      sumYear_num: 0
+      sumYear_num: 0,
+      currentPage: 0
     };
   },
   created() {
@@ -60,6 +61,9 @@ export default {
     this.getTimespan();
     this.getStat();
     // this.getWS()
+    setInterval(() => {
+      this.autoChange();
+    }, 10000);
   },
   methods: {
     //
@@ -111,6 +115,18 @@ export default {
           alert("收到服务端的消息：" + e.data);
       };
       console.log(11111)
+    },
+    autoChange(){
+      if(this.currentPage==0){
+        this.currentPage = 1;
+        this.$router.push({ path: '/'})
+      }else if(this.currentPage==1){
+        this.currentPage = 2;
+        this.$router.push({ path: '/cultrue'})
+      }else{
+        this.currentPage = 0;
+        this.$router.push({ path: '/ty'})
+      }
     }
   },
 };

src/views/index.vue

@@ -118,9 +118,19 @@
             <span class="rbtitle">日累计人数</span>
             <!-- <span class="rbval">4,738</span> -->
             <span class="rbval">{{ item.allEnter }}</span>
-            <span class="rbrate"
+            <!-- <div class="rbrate"
               :class="[{ rbrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { rbrate3: parseInt(item.proportion) >= 90 }]">{{
-                item.proportion }}</span>
+                item.proportion }}
+            </div> -->
+            <div class="rbrate">{{ item.proportion }}</div>
+            <div class="rbrateBar">
+              <span :class="(item.proportion.split('%')[0])>0?'active':''"></span>
+              <span :class="(item.proportion.split('%')[0])>16.666?'active':''"></span>
+              <span :class="(item.proportion.split('%')[0])>33.333?'active':''"></span>
+              <span :class="(item.proportion.split('%')[0])>50?'active':''"></span>
+              <span :class="(item.proportion.split('%')[0])>66.666?'active':''"></span>
+              <span :class="(item.proportion.split('%')[0])==100?'active':''"></span>
+            </div>
           </div>
 
           <!-- <div class="rbitem">
@@ -1305,18 +1315,35 @@ export default {
 .rbox .rbox_con .rbitem .rbrate {
   width: 0.92rem;
   /* float: left; */
-  height: 0.92rem;
-  text-align: center;
-  line-height: 0.9rem;
+  height: 0.32rem;
+  text-align: right;
   position: absolute;
-  bottom: 0.25rem;
+  bottom: 0.85rem;
   right: 0.29rem;
-  color: #00D8FF;
-  background-image: url(../assets/index/安静.png);
-  background-size: 100% 100%;
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  font-size: 0.19rem;
+  /* color: #00D8FF; */
+  /* background-image: url(../assets/index/安静.png); */
+  /* background-size: 100% 100%; */
+  /* background-position: 100% 100%; */
+  /* background-repeat: no-repeat; */
+  font-size: 0.22rem;
+}
+.rbox .rbox_con .rbitem .rbrateBar{
+  /* width: 0.92rem; */
+  height: 0.3rem;
+  position: absolute;
+  bottom: 0.55rem;
+  right: 0.29rem;
+  z-index: 2;
+}
+.rbox .rbox_con .rbitem .rbrateBar span{
+  background-color: #45487a;
+  display:inline-block;
+  width: 0.15rem;
+  height: 0.3rem;
+  margin-left: 0.05rem;
+}
+.rbox .rbox_con .rbitem .rbrateBar span.active{
+  background-color: #0036ff;
 }
 
 .rbox .rbox_con .rbitem .rbrate2 {