feat: 修改

src/views/questionnaire-statistics/detail.tsx

@@ -125,6 +125,17 @@ export default defineComponent({
       queryList()
     }
 
+    const formatNumberWithComma = (num: number | string) => {
+      // 将数字转换为字符串，去掉小数点后面的部分
+      let [integer, decimal] = num.toString().split('.');
+      
+      // 使用正则表达式添加千分位分隔符
+      integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      
+      // 如果有小数部分，则保留小数部分
+      return decimal ? `${integer}.${decimal}` : integer;
+    }
+
     onMounted(async () => {
       await queryInfo()
       queryList()
@@ -142,7 +153,7 @@ export default defineComponent({
 
         <div class={styles.dbStatic}>
           <div class={styles.dsItem}>
-            <div><span>{state.schoolInfo.supportStudentNum}</span><i>人</i></div>
+            <div><span>{formatNumberWithComma(state.schoolInfo.supportStudentNum || 0)}</span><i>人</i></div>
             <p>支持学校开展</p>
             <i class={[styles.dsIcon, styles.dsIcon1]}></i>
           </div>
@@ -186,19 +197,19 @@ export default defineComponent({
               <ul class={styles.itemContent}>
                 <li>
                   <div class={styles.icTop}>
-                    <span class={styles.sRed}>{item.studentNum}</span><i>人</i>
+                    <span class={styles.sRed}>{formatNumberWithComma(item.studentNum || 0)}</span><i>人</i>
                   </div>
                  <p>参与调查</p>
                 </li>
                 <li>
                   <div class={styles.icTop}>
-                    <span class={styles.sBlue}>{item.supportStudentNum}</span><i>人</i>
+                    <span class={styles.sBlue}>{formatNumberWithComma(item.supportStudentNum || 0)}</span><i>人</i>
                   </div>
                  <p>支持学校开展</p>
                 </li>
                 <li>
                   <div class={styles.icTop}>
-                    <span class={styles.sBlue}>{item.supportStudentRate}%</span>
+                    <span class={styles.sBlue}>{Number(item.supportStudentRate).toFixed(2)}%</span>
                   </div>
                  <p>支持率</p>
                 </li>                                

src/views/questionnaire-statistics/index.module.less

@@ -1,10 +1,17 @@
 .statisBody {
   min-height: 100vh;
-  background: url('./images/qt_bg.png') no-repeat top center #F6F8F9;
   background-size: contain;
   padding: 12px;
   overflow: hidden;
   position: relative;
+  &.statisBody1 {
+    background: url('./images/qt_bg.png') no-repeat top center #F6F8F9;
+    background-size: contain;
+  }
+  &.statisBody2 {
+    background: url('./images/qt_bg1.png') no-repeat top center #F6F8F9;
+    background-size: contain;
+  }
 }
 
 .spColumn {
@@ -47,14 +54,22 @@
   width: 100%;
   height: 145px;
   margin: 8px 0 12px;
+  max-width: 400px;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
   .scTop {
-    margin: 21px 0 0 24px;
+    margin: 19px 0 0 24px;
     display: inline-block;
     align-items: flex-end;
     font-size: 14px;
     color: #333333;
     position: relative;
     z-index: 2;
+    > div {
+      display: inline-block;
+      font-weight: 500;
+    }
     > span {
       color: #FE3F25;
       font-size: 28px;
@@ -76,13 +91,14 @@
       bottom: 1px;
       width: 106%;
       height: 8px;
-      background: linear-gradient( 90deg, rgba(37,156,254,0.49) 0%, rgba(91,236,255,0.3) 100%);
+      background: linear-gradient( 90deg, rgba(37,156,254,0.3) 0%, rgba(91,236,255,0.3) 100%);
     }
   }
   .scBottom {
     margin-top: 24px;
     display: flex;
     align-items: center;
+    position: relative;
     li {
       position: relative;
       flex: 1;
@@ -96,7 +112,7 @@
           font-weight: normal;
           font-style: normal;
           color: #777777;
-          font-size: 14px;
+          font-size: 12px;
           position: relative;
           top: -1px;
         }
@@ -113,18 +129,18 @@
           height: 16px;
           margin-right: 2px;
         }
-      }
-      // &:nth-child(1),&:nth-child(2) {
-      //   content: "";
-      //   position: absolute;
-      //   right: 0;
-      //   top: 0;
-      //   height: 43px;
-      //   width: 1px;
-      //   background: url('./images/sc_line.png') no-repeat center;
-      //   background-size: contain;
-      // }      
-    }
+      }  
+      &:nth-child(1)::before,&:nth-child(2)::before {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 43px;
+        width: 1px;
+        background: url('./images/sc_line.png') no-repeat center;
+        background-size: contain;
+      }    
+    }    
   }
 }
 
@@ -155,6 +171,9 @@
     .van-cell:after {
       display: none;
     }
+    input::placeholder {
+      color: rgba(0,0,0,0.4);
+    }
   }
 }
 
@@ -162,7 +181,8 @@
   display: flex;
   align-items: center;
   margin-top: 12px;
-  position: sticky;
+  // position: sticky;
+  // top: 0;
   >li {
     display: flex;
     align-items: center;

src/views/questionnaire-statistics/index.tsx

@@ -43,6 +43,7 @@ export default defineComponent({
       totalInfo: {} as any,
       sortType: 'DESC' as any, // 排序方式,ASC(升序)/DESC(降序)
       sortField: 'totalNum', // totalNum: 总人数，supportNum：支持人数，supportRate：支持率
+      areaIdx: 0 as any,
     });
 
     const refreshing = ref(false);
@@ -66,8 +67,8 @@ export default defineComponent({
             value: index
           })
         })
-        forms.currentArea = forms.areaColumns.length ? forms.areaColumns[0].text : ''
-        forms.currentAreaInfo = forms.areaList.length ? forms.areaList[0] : null;
+        forms.currentArea = forms.areaColumns.length ? forms.areaColumns[forms.areaIdx].text : ''
+        forms.currentAreaInfo = forms.areaList.length ? forms.areaList[forms.areaIdx] : null;
       } catch (error) {
         
       }
@@ -131,6 +132,7 @@ export default defineComponent({
     });
 
     const skipDetail = (id: any) => {
+      sessionStorage.setItem('areaIdx', forms.areaIdx)
       router.push({
         path: '/statistics-detail',
         query: {
@@ -149,39 +151,57 @@ export default defineComponent({
       getList()
     }
 
+    const formatNumberWithComma = (num: number | string) => {
+      // 将数字转换为字符串，去掉小数点后面的部分
+      let [integer, decimal] = num.toString().split('.');
+      
+      // 使用正则表达式添加千分位分隔符
+      integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      
+      // 如果有小数部分，则保留小数部分
+      return decimal ? `${integer}.${decimal}` : integer;
+    }
+
     onMounted(async () => {
+      console.log('刷新页面')
+      forms.areaIdx = sessionStorage.getItem('areaIdx') || 0;
       await queryArea();
     });
 
     return () => (
-      <div class={styles.statisBody}>
-        <div class={styles.spColumn} onClick={() => forms.areaStatus = true}>
+      <div class={[styles.statisBody, forms.areaColumns.length == 1 ? styles.statisBody2 : styles.statisBody1]}>
+        {
+        forms.areaColumns.length > 1 && 
+        <div class={styles.spColumn} onClick={() => {
+          forms.areaOptionIndex = [Number(forms.areaIdx)]
+          forms.areaStatus = true
+        }}>
           <img src={positionIcon} />
           <p>{forms.currentArea}</p>
           <i></i>
         </div>
-
+        }
         <div class={styles.scContent}>
           <div class={styles.scTop}>
-            参与学校<span>{forms.totalInfo.schoolNum || 0}</span><i>所</i>
+            <div>参与学校</div><span>{formatNumberWithComma(forms.totalInfo.schoolNum || 0)}</span><i>所</i>
           </div>
           <ul class={styles.scBottom}>
             <li>
-              <div class={styles.sNum}><span class={styles.sRed}>{forms.totalInfo.totalNum || 0}</span><i>人</i></div>
+              <div class={styles.sNum}><span class={styles.sRed}>{formatNumberWithComma(forms.totalInfo.totalNum || 0)}</span><i>人</i></div>
               <div class={styles.sDesc}>
                 <img src={scIcon1} />
                 参与调查
               </div>
             </li>
             <li>
-              <div class={styles.sNum}><span class={styles.sBlue}>{forms.totalInfo.supportNum || 0}</span><i>人</i></div>
+              <div class={styles.sNum}><span class={styles.sBlue}>{formatNumberWithComma(forms.totalInfo.supportNum || 0)}</span><i>人</i></div>
               <div class={styles.sDesc}>
                 <img src={scIcon2} />
                 支持学校开展
               </div>
             </li>
             <li>
-              <div class={styles.sNum}><span class={styles.sBlue}>{forms.totalInfo.supportRate || 0}%</span></div>
+              <div class={styles.sNum}><span class={styles.sBlue}>{Number(forms.totalInfo.supportRate || 0).toFixed(2)}%</span></div>
               <div class={styles.sDesc}>
                 <img src={scIcon3} />
                 支持率
@@ -252,19 +272,19 @@ export default defineComponent({
                 <ul class={styles.itemContent}>
                   <li>
                     <div class={styles.icTop}>
-                      <span class={styles.sRed}>{item.totalNum}</span><i>人</i>
+                      <span class={styles.sRed}>{formatNumberWithComma(item.totalNum)}</span><i>人</i>
                     </div>
                   <p>参与调查</p>
                   </li>
                   <li>
                     <div class={styles.icTop}>
-                      <span class={styles.sBlue}>{item.supportNum}</span><i>人</i>
+                      <span class={styles.sBlue}>{formatNumberWithComma(item.supportNum)}</span><i>人</i>
                     </div>
                   <p>支持学校开展</p>
                   </li>
                   <li>
                     <div class={styles.icTop}>
-                      <span class={styles.sBlue}>{item.supportRate}%</span>
+                      <span class={styles.sBlue}>{Number(item.supportRate).toFixed(2)}%</span>
                     </div>
                   <p>支持率</p>
                   </li>                                
@@ -295,16 +315,17 @@ export default defineComponent({
               columns={forms.areaColumns}
               onCancel={() => (forms.areaStatus = false)}
               onConfirm={(val: any) => {
-                console.log('选择1111',val)
                 // forms.gradeAndClassIndex = [val.selectedOptions[0].value, val.selectedOptions[1].value]
                 // forms.currentArea = val.selectedOptions[0].text;
                 // forms.currentClass = val.selectedOptions[1].text;
                 forms.currentArea = val.selectedOptions[0].text
                 forms.areaOptionIndex = [val.selectedOptions[0].value]
+                forms.areaIdx = val.selectedOptions[0].value
                 forms.areaStatus = false;
                 forms.currentAreaInfo = forms.areaList[val.selectedOptions[0].value]
                 queryInfo()
                 getList()
+                console.log('选择1111',val,forms.areaOptionIndex)
               }}
             />
           )}