更新

src/views/cultrue/index.vue

@@ -1161,14 +1161,15 @@ export default {
 
 .center .cmid .cmdiv .cmdval {
   color: #fff;
-  font-size: 36px;
+  font-size: 0.4rem;
 }
 
 .center .cmid .cmdiv .cmdt {
   color: #00c6ff;
-  font-size: 14px;
+  font-size: 0.27rem;
   width: 6vw;
-  height: 2vh;
+  height: 0.43rem;
+  line-height: 0.43rem;
   text-align: center;
   background: url('../../assets/wh/ct_bg.png') no-repeat;
   background-size: 100% 100%;
@@ -1200,7 +1201,7 @@ export default {
 
 .center .cbuttom .cbval {
   padding-top: 3vh;
-  font-size: 36px;
+  font-size: 0.4rem;
   color: #fff;
   height: 2vh;
   line-height: 2vh;
@@ -1209,13 +1210,14 @@ export default {
 
 .center .cbuttom .cbt {
   color: #00c6ff;
-  height: 2vh;
+  height: 0.43rem;
-  line-height: 2vh;
+  line-height: 0.43rem;
   background: url('../../assets/wh/ct_bg.png') no-repeat;
   background-size: 100% 100%;
   background-position: center center;
   width: 6vw;
   margin: 2vh auto;
+  font-size: 0.27rem;
 }
 
 /* 右边 */

src/views/index.vue

@@ -24,18 +24,24 @@
             <div class="cgfitem">
               <span class="cgtitle">{{ groupNameData[0] }}</span>
               <span class="cgval">{{ proportionData[0] }}</span>
+              <!-- <span class="cgtitle">体育场</span>
+              <span class="cgval">57.4%</span> -->
               <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
             </div>
             <!-- 体育馆 -->
             <div class="cgfitem">
               <span class="cgtitle">{{ groupNameData[1] }}</span>
               <span class="cgval">{{ proportionData[1] }}</span>
+              <!-- <span class="cgtitle">体育馆</span>
+              <span class="cgval">57.45%</span> -->
               <span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
             </div>
             <!-- 游泳馆 -->
             <div class="cgfitem">
               <span class="cgtitle">{{ groupNameData[2] }}</span>
               <span class="cgval">{{ proportionData[2] }}</span>
+              <!-- <span class="cgtitle">游泳場館</span>
+              <span class="cgval">5%</span> -->
               <span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
             </div>
           </div>
@@ -48,18 +54,24 @@
               <span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
               <span class="cgval">{{ proportionData[3] }}</span>
               <span class="cgtitle">{{ groupNameData[3] }}</span>
+              <!-- <span class="cgval">56.56%</span>
+              <span class="cgtitle">劳务义工博物馆</span> -->
             </div>
             <!-- 文化馆 -->
             <div class="cgfitem">
               <span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
               <span class="cgval">{{ proportionData[4] }}</span>
               <span class="cgtitle">{{ groupNameData[4] }}</span>
+              <!-- <span class="cgval">56.666%</span>
+              <span class="cgtitle">图书馆</span> -->
             </div>
             <!-- 博物馆 -->
             <div class="cgfitem">
               <span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
               <span class="cgval">{{ proportionData[5] }}</span>
               <span class="cgtitle">{{ groupNameData[5] }}</span>
+              <!-- <span class="cgval">5%</span>
+              <span class="cgtitle">文化馆</span> -->
             </div>
           </div>
         </div>
@@ -270,15 +282,16 @@ export default {
 
       // var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];
       // var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
-      var data = this.klqsDatas;
+      let xData = this.klqsXDatas.slice(-8,this.klqsXDatas.length);
-      let max=this.klqsDatas[0];
+      var data = this.klqsDatas.slice(-8,this.klqsDatas.length);
-    	for (let i = 0; i < this.klqsDatas.length; i++) {
+      let max=data[0];
-    		if (this.klqsDatas[i]>max) {
+    	for (let i = 0; i < data.length; i++) {
-    			max = this.klqsDatas[i];
+    		if (data[i]>max) {
+    			max = data[i];
     		}
     	}
       let dataLenArr = [], dataBGArr = [];
-      this.klqsDatas.map(item=>{
+      data.map(item=>{
         dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
         dataBGArr.push(max);// 数组最大值做背景柱形
       })
@@ -336,7 +349,7 @@ export default {
             },
             show: true,
           },
-          data: this.klqsXDatas,
+          data: xData,
           type: 'category',
         },
         yAxis: {
@@ -447,29 +460,32 @@ export default {
       option && myChart.setOption(option);
       function run(myChart) {
         that.getHomeBarData();
-        let max=that.klqsDatas[0];
+        let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);
-        for (let i = 0; i < that.klqsDatas.length; i++) {
+        let data = that.klqsDatas.slice(-8,that.klqsDatas.length);
-          if (that.klqsDatas[i]>max) {
+
-            max = that.klqsDatas[i];
+        let max=data[0];
+        for (let i = 0; i < data.length; i++) {
+          if (data[i]>max) {
+            max = data[i];
           }
         }
         let dataLenArr = [], dataBGArr = [];
-        that.klqsDatas.map(item=>{
+        data.map(item=>{
           dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
           dataBGArr.push(max);// 数组最大值做背景柱形
         })
         myChart.setOption({
           xAxis: {
-            data: that.klqsXDatas
+            data: xData
           },
           series: [
             {
               type: 'bar',
-              data: that.klqsDatas
+              data: data
             },
             {
               type: 'pictorialBar',
-              data: that.klqsDatas
+              data: data
             },
             {
               type: 'bar',
@@ -1036,7 +1052,7 @@ export default {
 
 .indexleftbox .cgflow_rightbox {
   width: 2.16rem;
-  text-align: right;
+  /* text-align: right; */
 }
 
 .indexleftbox .cgflow .cgfitem {
@@ -1046,20 +1062,20 @@ export default {
   justify-content: space-between;
 }
 
-.indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle {
+/* .indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle {
   margin-right: 5px;
 }
 
 .indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval {
   margin-right: 10px;
-}
+} */
 
 .indexleftbox .cgflow .cgfitem span {
   /* display: block;
     margin-left: 12px;
     float: left;
     display: block; */
-  margin-right: 14px;
+  /* margin-right: 14px; */
   /* display: block; */
 
 }
@@ -1067,13 +1083,15 @@ export default {
 .indexleftbox .cgflow .cgfitem .cgtitle {
   color: #0096ff;
   font-size: 14px;
-  flex: 1;
+  /* flex: 1; */
+  width: 38%;
 }
 
 .indexleftbox .cgflow .cgfitem .cgval {
   color: white;
   font-weight: 700;
   font-size: 16px;
+  width: 38%;
 }
 
 .indexleftbox .cgflow .cgfitem .cgimg img {