接口优化

src/views/index.vue

@@ -99,43 +99,44 @@
         <div class="rbox_title">各场馆实施实时进馆人数</div>
         <div class="rbox_con">
           <!-- 各场馆实时人数 cg1 -->
+          <!-- v-for="(item, index) in 6" :key="index" -->
           <div class="rbitem">
             <span class="rbcgname">体育场</span>
             <span class="rbtitle">当前人数</span>
             <span class="rbval">4,738</span>
             <span class="rbrate">40%</span>
           </div>
-          <!-- 各场馆实时人数 cg2 -->
+
           <div class="rbitem">
-            <span class="rbcgname">体育场</span>
+            <span class="rbcgname">图书馆</span>
             <span class="rbtitle">当前人数</span>
             <span class="rbval">4,738</span>
             <span class="rbrate">50%</span>
           </div>
-          <!-- 各场馆实时人数 cg3 -->
+
           <div class="rbitem">
-            <span class="rbcgname">体育场</span>
+            <span class="rbcgname">体育馆</span>
             <span class="rbtitle">当前人数</span>
             <span class="rbval">4,738</span>
             <span class="rbrate">80%</span>
           </div>
-          <!-- 各场馆实时人数 cg4 -->
+
           <div class="rbitem">
-            <span class="rbcgname">体育场</span>
+            <span class="rbcgname">文化馆</span>
             <span class="rbtitle">当前人数</span>
             <span class="rbval">4,738</span>
             <span class="rbrate">25%</span>
           </div>
-          <!-- 各场馆实时人数 cg5 -->
+
           <div class="rbitem">
-            <span class="rbcgname">体育场</span>
+            <span class="rbcgname">游泳场馆</span>
             <span class="rbtitle">当前人数</span>
             <span class="rbval">4,738</span>
             <span class="rbrate">90%</span>
           </div>
-          <!-- 各场馆实时人数 cg6 -->
+
           <div class="rbitem">
-            <span class="rbcgname">体育场</span>
+            <span class="rbcgname">博物馆</span>
             <span class="rbtitle">当前人数</span>
             <span class="rbval">4,738</span>
             <span class="rbrate">75%</span>
@@ -849,6 +850,9 @@ export default {
         // get allTimeData
         const tmpdata = res.data.returnData
         console.log(tmpdata);
+        // console.log(tmpdata.01.proportion);
+        // let arr = JSON.stringify(tmpdata)
+        // console.log(arr);
         // this.day_num = tmpdata.day.noRepeatInNum
         // this.week_num_num = tmpdata.week.noRepeatInNum
         // this.mon_num = tmpdata.month.noRepeatInNum
@@ -1059,9 +1063,11 @@ export default {
   display: block;
   color: white;
   font-size: 26px;
-  position: absolute;
+  /* position: absolute;
   bottom: 54px;
-  left: 48px;
+  left: 48px; */
+  text-align: center;
+  margin-top: 32px;
 }
 
 .centerbox .jgdesc {
@@ -1076,6 +1082,7 @@ export default {
 .centerbox .jgval1 {
   bottom: 54px;
   left: 70px;
+  margin-left: 44px;
 }
 
 .centerbox .jgdesc1 {
@@ -1086,6 +1093,7 @@ export default {
 .centerbox .jgval3 {
   bottom: 54px;
   left: 25px;
+  margin-right: 44px;
 }
 
 .centerbox .jgdesc3 {
@@ -1176,7 +1184,7 @@ export default {
 .rbox .rbox_con .rbitem .rbtitle {
   text-align: left;
   padding-left: 0.66rem;
-  padding-top: 0.1rem;
+  padding-top: 0.17rem;
 }
 
 .rbox .rbox_con .rbitem .rbval {
@@ -1190,15 +1198,29 @@ export default {
 }
 
 .rbox .rbox_con .rbitem .rbrate {
-  width: 30%;
+  width: 32%;
   /* float: left; */
-  height: 118px;
+  height: 82px;
   text-align: center;
-  line-height: 118px;
+  line-height: 82px;
   position: absolute;
-  bottom: -12px;
+  bottom: 8px;
-  right: 16px;
+  right: 15px;
   color: #00D8FF;
+  background-image: url(../assets/index/安静.png);
+  background-size: 100% 100%;
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+
+}
+
+.rbox .rbox_con .rbitem .rbrate2 {
+  background-image: url(../assets/index/舒适.png);
+
+}
+
+.rbox .rbox_con .rbitem .rbrate3 {
+  background-image: url(../assets/index/拥挤.png);
 
 }
 

src/views/ty/index.vue

@@ -82,36 +82,36 @@
           <div class="pcgrliu">
             <span class="pcg_title">各场馆人次占比</span>
             <div class="venue_proportion_box" style="width: 100%; height: 290px">
-              <!-- <div class="venue_proportion">
+              <div class="venue_proportion">
                 <div class="venue_proportion_top">
-                  <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt="">
+                  <!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
                   <span class="venue_proportion_box_num">25%</span>
                 </div>
                 <div class="venue_proportion_bo">
-                  <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt="">
+                  <!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
                   <span>体育场</span>
                 </div>
               </div>
               <div class="venue_proportion">
                 <div class="venue_proportion_top">
-                  <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt="">
+                  <!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
                   <span class="venue_proportion_box_num">25%</span>
                 </div>
                 <div class="venue_proportion_bo">
-                  <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt="">
+                  <!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
-                  <span>体育场</span>
+                  <span>体育馆</span>
                 </div>
               </div>
               <div class="venue_proportion">
                 <div class="venue_proportion_top">
-                  <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt="">
+                  <!-- <img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> -->
                   <span class="venue_proportion_box_num">25%</span>
                 </div>
                 <div class="venue_proportion_bo">
-                  <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt="">
+                  <!-- <img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> -->
-                  <span>体育场</span>
+                  <span>游泳场馆</span>
                 </div>
-              </div> -->
+              </div>
 
             </div>
             <!-- <div id="pcgchart1" style="width: 100%;height: 25vh;margin-top: 20px;"></div> -->
@@ -647,7 +647,7 @@ export default {
               color: '#32346c ',
             }
           },
-          splitNumber:10,
+          splitNumber: 10,
           // interval:4.10,
           axisLabel: {
             textStyle: {
@@ -930,26 +930,60 @@ export default {
         justify-content: space-around;
         align-items: center;
         color: #00A7FF;
+        font-size: 13px;
 
         .venue_proportion {
           flex: 1;
           // text-align: center;
 
+
           .venue_proportion_top {
             text-align: center;
+            width: 75%;
+            height: 9vh;
+            line-height: 9vh;
+            margin: 0 auto;
+            background-image: url('../../assets/ty/右1-4.png');
+            background-size: 100% 100%;
+            background-position: 100% 100%;
+            background-repeat: no-repeat;
 
             .venue_proportion_box_num {
               color: white;
+              font-size: 16px;
+              font-weight: bold;
+              display: block;
+              width: 60%;
+              height: 9vh;
+              line-height: 9vh;
+              margin: 0 auto;
+              background-image: url('../../assets/ty/右1-3.png');
+              background-size: 100% 100%;
+              background-position: 100% 100%;
+              background-repeat: no-repeat;
             }
           }
 
           .venue_proportion_bo {
 
-            // text-align: center;
+            text-align: center;
-            img {
+            width: 50%;
-              margin-left: 48px;
+            height: 3vh;
+            margin: 0 auto;
+            margin-top: 20px;
+            background-image: url('../../assets/ty/右1-5.png');
+            background-size: 100% 100%;
+            background-position: 100% 100%;
+            background-repeat: no-repeat;
+
+            span {
+              line-height: 3vh;
             }
 
+            // img {
+            //   margin-left: 48px;
+            // }
+
           }
         }
       }