添加会员占比

src/views/tenantAllData/index.module.less

@@ -50,11 +50,13 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    flex-wrap: wrap;
     justify-content: space-between;
     margin-top: 18px;
 
     .cardItem {
-      flex: 1;
+      // flex: 1;
+      flex-basis: 48.6%;
       padding: 8px 16px;
       // width: 110px;
       height: 70px;
@@ -62,10 +64,14 @@
       border-radius: 10px;
       overflow: hidden;
       position: relative;
+      margin-bottom: 8px;
+      // &+.cardItem {
+      //   margin-left: 8px;
+      // }
 
-      &+.cardItem {
-        margin-left: 8px;
-      }
+      // &:nth-child(2n + 2) {
+      //   margin-left: 8px;
+      // }
 
       .cardLine {
         width: 6px;
@@ -106,7 +112,17 @@
       .cardNum {
         color: rgba(254, 37, 37, 1);
       }
+    }
 
+    .memberRateCard {
+      .cardLine {
+        background: #5FC5A7;
+        color: #5FC5A7;
+      }
+
+      .cardNum {
+        color: #33B48E;
+      }
     }
 
     .classCard {

src/views/tenantAllData/index.tsx

@@ -17,6 +17,7 @@ import MSticky from '@/components/m-sticky';
 import personIcon from './images/personIcon.png';
 import homeIcon from './images/homeIcon.png';
 import memberIcon from './images/memberIcon.png';
+import memberRateIcon from './images/memberRateIcon.png';
 import sanIcon from './images/san.png';
 import iconQrcode from './images/icon-qrcode.png';
 import qrcodeBg from './images/qrcode-bg.png';
@@ -203,6 +204,15 @@ export default defineComponent({
       link.click();
     };
 
+    // 计算会员占比
+    const formatMemberRate = (studentNum: any, memberNum: any) => {
+      if (studentNum <= 0 || memberNum <= 0) {
+        return 0;
+      }
+      // console.log(studentNum, memberNum);
+      return Math.round((memberNum / studentNum) * 1000) / 10;
+    };
+
     onMounted(async () => {
       if (route.query.name) {
         document.title = route.query.name + '报名统计';
@@ -267,6 +277,22 @@ export default defineComponent({
                 </div>
                 <div class={styles.cardLine}></div>
               </div>
+              <div class={[styles.memberRateCard, styles.cardItem]}>
+                <div class={styles.cardNum}>
+                  {numeral(
+                    formatMemberRate(
+                      forms.statObj.registerNum || 0,
+                      forms.statObj.registerMemberShipNum || 0
+                    )
+                  ).format('0.0')}
+                  %
+                </div>
+                <div class={styles.cardInfo}>
+                  <img src={memberRateIcon} class={styles.cardInfoImg} alt="" />
+                  会员占比
+                </div>
+                <div class={styles.cardLine}></div>
+              </div>
               <div class={[styles.studentCard, styles.cardItem]}>
                 <div class={styles.cardNum}>
                   {numeral(forms.statObj.registerNum).format('0,0')}
@@ -340,15 +366,33 @@ export default defineComponent({
                     </div>
                     <div class={styles.schoolCountWrap}>
                       <div>
-                        <p class={styles.personNum}>{item.registerNum || 0}</p>
+                        <p class={styles.personNum}>
+                          {numeral(item.registerNum || 0).format('0,0')}
+                          {/* {item.registerNum || 0} */}
+                        </p>
                         <p class={styles.title}>报名人数</p>
                       </div>
                       <div>
                         <p class={styles.personNum}>
-                          {item.registerMemberShipNum || 0}
+                          {numeral(item.registerMemberShipNum || 0).format(
+                            '0,0'
+                          )}
+                          {/* {item.registerMemberShipNum || 0} */}
                         </p>
                         <p class={styles.title}>会员人数</p>
                       </div>
+                      <div>
+                        <p class={styles.personNum}>
+                          {numeral(
+                            formatMemberRate(
+                              item.registerNum || 0,
+                              item.registerMemberShipNum || 0
+                            )
+                          ).format('0.0')}
+                          {/* {} */}%
+                        </p>
+                        <p class={styles.title}>会员占比</p>
+                      </div>
                       <div
                         onClick={() => {
                           forms.urlItem = item;
@@ -361,7 +405,7 @@ export default defineComponent({
                         <p class={styles.personNum}>
                           <img src={iconQrcode} />
                         </p>
-                        <p class={styles.title}>学校统计二维码</p>
+                        <p class={styles.title}>统计二维码</p>
                       </div>
                       {/* <img class={[styles.arrow]} src={arrowIcon} alt="" /> */}
                     </div>
@@ -487,7 +531,7 @@ export default defineComponent({
           </div>
         </div>
 
-        <MWxTip />
+        {/* <MWxTip /> */}
       </div>
     );
   }