xuhui布局

src/views/home.vue

 <template>
   <div id="home" class="layoutPadding">
       <a-row type="flex"  class="align-stretch">
-        <a-col :span="21">
+        <a-col :span="16">
           <a-row type="flex" style="padding-right:10px;height:100%;">
             <a-col :span="6">
               <div class="home-card topBox" style="margin-right:10px;">
@@ -43,7 +43,7 @@
               </div>
             </a-col>
             <a-col :span="6">
-              <div class="home-card topBox" style="margin-left:10px;">
+              <div class="home-card topBox" style="margin-left:0px 10px;">
                 <div class="justify-between topBox" >
                   <div>
                     <p class="top-font" >业委会数</p>
@@ -57,11 +57,29 @@
             </a-col> 
           </a-row>
         </a-col>
-        <a-col :span="3">
-          <div style=" margin-left:10px;"> 
-            <div class="home-card middle-right" @click="toFangXunFangTai">
-              <img src="@/assets/icon/fxft.png" style="width:40px;" alt="">
-              <p>防汛防台</p>
+        <a-col :span="4">
+          <div class="home-card topBox" style="margin-left:0px 10px;" @click="handleExpired">
+                <div class="justify-between topBox" >
+                  <div>
+                    <p class="top-font" >已过期</p>
+                    <span class="top-count" >{{expired}}</span>
+                  </div>
+                  <div class="align-center" >
+                    <img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
+                  </div>
+                </div>
+              </div>
+        </a-col>
+        <a-col :span="4">
+          <div class="home-card topBox" style="margin-left:10px;" @click="handleWillExpire">
+                <div class="justify-between topBox" >
+                  <div>
+                    <p class="top-font" >未来5个月将到期</p>
+                    <span class="top-count" >{{expireInFiveMonth}}</span>
+                  </div>
+                  <div class="align-center" >
+                    <img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
+                  </div>
                 </div>
               </div>
         </a-col>
@@ -182,14 +200,26 @@
         </a-col>
         <a-col :span="3">
           <div style="height:100%;margin-left:10px;">
+            <a-row>
+              <div class="home-card middle-right" style="margin-bottom: 20px" @click="toFangXunFangTai">
+                <img src="@/assets/icon/fxft.png" style="width:40px;" alt="">
+                <p>防汛防台</p>
+              </div>
+            </a-row>
+            
+            <a-row>
               <div class="home-card middle-right" @click="$router.push({path: '/houseData/basicInfo'})">
                 <img src="@/assets/icon/xqda.png" style="width:40px;" alt="">
                 <p>小区档案</p>
               </div>
+            </a-row>
+
+            <a-row>
               <div class="home-card middle-right" @click="$router.push({path: '/houseData/propertyInfo'})" style="margin-top:20px;">
                 <img src="@/assets/icon/wyqyda.png" style="width:40px;" alt="">
                 <p>物业企业档案</p>
               </div>
+            </a-row>
           </div>
         </a-col>
       </a-row>
@@ -544,6 +574,8 @@ export default {
         {name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
         {name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
       ],
+      expired: 0,
+      expireInFiveMonth: 0,
       theme: 0,
       sect: 0,
       receipts: 0,
@@ -626,6 +658,16 @@ export default {
           this.data = this.$com.confirm(res, 'data.content', []) 
         }
       })
+
+      this.$ajax.get({
+        url: this.$api.GET_ALREADY_OR_EXPIRE,
+      }).then(res => {
+        if (res.code === '200') {
+          let inner = res.data.content
+          this.expired = inner.willExpireCount
+          this.expireInFiveMonth = inner.alreadyExpireCount
+        }
+      })
     },
     /**
      * 获取房办月查统计
@@ -833,6 +875,8 @@ export default {
           this.openConfig = this.$com.confirm(res, 'data.content', []).customKeyEnable
           // 是否开启自定义字段存入cookie
           this.$cookie.set('customKeyEnable', this.openConfig)
+          let isXuHui = this.$com.confirm(res, 'data.content', [])
+          this.$store.commit('CHANGE_ISXUHUI', isXuHui.projectArea == 'xuhui')
         }
       })
     },
@@ -935,6 +979,12 @@ export default {
         }
       })
     },
+    handleExpired() {
+      this.$router.push({name: 'indCous', query: {date: (this.$moment().format('L')).split('/').join('')}})
+    },
+    handleWillExpire() {
+      this.$router.push({name: 'indCous', query: {date: (this.$moment().add('months', 5).format('L')).split('/').join('')}})
+    },
     /**
      * 去投诉 
      */