修改首页按钮

src/views/home/index.vue

@@ -18,8 +18,11 @@
             <span class="title-text">易粮易运大数据分析平台</span>
           </div>
         </div>
-        <div class="timers ">
-
+        <div class="btn">
+         <div :class="btnIndex==1?'activeBtn':''" @click="selectData(1)" class="btn-style">新季</div>
+         <div :class="btnIndex==2?'activeBtn':''" @click="selectData(2)" class="btn-style">历史</div>  
+        </div>
+        <div class="timers">
           {{ dateYear }} {{ dateWeek }} {{ dateDay }}
           <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
         </div>
@@ -134,6 +137,8 @@ export default {
   },
   data() {
     return {
+      dataListTimer:null,
+      btnIndex:1,
       MapList:[],
       rightBottomDataList:[],
       rightCenterDataList:[],
@@ -159,10 +164,33 @@ export default {
   created() {
   },
   mounted() {
-    gChartsData({
+    this.timeFn();
+    this.selectData(1)
+
+    this.dataListTimer = setInterval(() => {
+      this.selectData(1)
+      }, 30000);
+    
+
+  },
+  beforeDestroy() {
+    clearInterval(this.timing);
+    clearInterval(this.dataListTimer);
+    
+  },
+  methods: {
+    selectData(type){
+      let _seachMoth = ''
+      this.btnIndex = type
+      if(type==2){
+        _seachMoth = '2021-10-10'  
+      }else{
+        _seachMoth = '2022-10-10'  
+      }
+      gChartsData({
       compId: localStorage.getItem('ws-pf_compId'),
       loadingstatus: 1,
-      seachMoth: '2022-10-10'
+      seachMoth: _seachMoth
     }).toPromise().then(res => {
       console.log('··············', res)
       this.leftTopDataList = res[0].biViewInfoList
@@ -181,17 +209,11 @@ export default {
       this.rightCenterDataList = res[7].biViewInfoList
       this.rightBottomDataList = res[8].contractManagementInfos
       this.MapList =  res[3].biViewInfoList
-      this.timeFn();
+      
       this.cancelLoading();
       this.china_map();
-
     })
-
-  },
-  beforeDestroy() {
-    clearInterval(this.timing);
-  },
-  methods: {
+    },
     //中国地图
     china_map() {
       
@@ -532,7 +554,7 @@ export default {
       right: 11%;
       transform: rotate(180deg);
     }
-
+  
     .timers {
       position: absolute;
       right: 0;
@@ -546,6 +568,15 @@ export default {
         cursor: pointer;
       }
     }
+    .btn{
+      position: absolute;
+      left: 0;
+      top: 30px;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      color:#fff;
+    }
   }
 
   .title {
@@ -917,4 +948,19 @@ export default {
 .row1 {
   display: flex
 }
+.btn-style{
+//   width: 70px;
+// height: 28px;
+background: rgba(47,108,233,0.2);
+border-radius: 4px;
+border: 1px solid rgba(0,220,255,0.2);
+padding: 5px 20px;
+box-sizing: border-box;
+font-size: 16px;
+margin-right: 10px;
+cursor:pointer
+}
+.activeBtn{
+  color:#06DBF1
+}
 </style>