feat: 统计修改

src/router/router-root.ts

@@ -366,7 +366,7 @@ export default [
     name: 'questionnaire-statistics',
     component: () => import('@/views/questionnaire-statistics/index'),
     meta: {
-      title: '数字化转型问卷统计'
+      title: '互通互联登记统计'
     }
   },
   {
@@ -374,7 +374,7 @@ export default [
     name: 'statistics-detail',
     component: () => import('@/views/questionnaire-statistics/detail'),
     meta: {
-      title: '数字化转型问卷统计'
+      title: '互通互联登记统计'
     }
   },
   {

src/views/questionnaire-statistics/detail.tsx

@@ -11,6 +11,9 @@ import scIcon1 from './images/sc_icon1.png';
 import scIcon2 from './images/sc_icon2.png';
 import scIcon3 from './images/sc_icon3.png';
 import schoolIcon from './images/school_icon.png';
+import schoolIcon2 from './images/school_icon2.png';
+import bjIcon from './images/bj_icon.png';
+import tjnumIicon from './images/tjnum_icon.png';
 import gradeIcon from './images/class_icon.png';
 import { number } from 'echarts';
 import OFullRefresh from '@/components/m-full-refresh';
@@ -181,22 +184,26 @@ export default defineComponent({
       <div class={styles.detailBody}>
         <div class={styles.dbTitle}>
           <div class={styles.dtName}>
-            <img src={schoolIcon} />
+            <img src={schoolIcon2} />
             <p>{state.schoolInfo.schoolName}</p>
           </div>
-          <div class={styles.dtDesc}>共<span> {state.schoolInfo.classNum} </span>个班级，<span>{state.schoolInfo.studentNum}</span>人参与调查</div>
+          {/* <div class={styles.dtDesc}>共<span> {state.schoolInfo.classNum} </span>个班级，<span>{state.schoolInfo.studentNum}</span>人参与调查</div> */}
         </div>
 
         <div class={styles.dbStatic}>
           <div class={styles.dsItem}>
-            <div><span>{formatNumberWithComma(state.schoolInfo.supportStudentNum || 0)}</span><i>人</i></div>
+            <div class={styles.dmTitle}><img src={bjIcon} />班级</div>
+            <div class={styles.dmContent}><span class={styles.dmOrange}>{formatNumberWithComma(state.schoolInfo.classNum || 0)}</span><i>个</i></div>
+            {/* <div><span>{formatNumberWithComma(state.schoolInfo.supportStudentNum || 0)}</span><i>人</i></div>
             <p>支持学校开展</p>
-            <i class={[styles.dsIcon, styles.dsIcon1]}></i>
+            <i class={[styles.dsIcon, styles.dsIcon1]}></i> */}
           </div>
           <div class={styles.dsItem}>
-            <div><span>{state.schoolInfo.supportStudentRate}%</span></div>
+            <div class={styles.dmTitle}><img src={tjnumIicon} />参与登记</div>
+            <div class={styles.dmContent}><span class={styles.dmRed}>{formatNumberWithComma(state.schoolInfo.studentNum || 0)}</span><i>人</i></div>
+            {/* <div><span>{state.schoolInfo.supportStudentRate}%</span></div>
             <p>支持率</p>
-            <i class={[styles.dsIcon, styles.dsIcon2]}></i>
+            <i class={[styles.dsIcon, styles.dsIcon2]}></i> */}
           </div>          
         </div>
 
@@ -207,7 +214,7 @@ export default defineComponent({
         </div>
 
         {/** 排序栏 */}
-        <ul class={styles.sortColumn}>
+        {/* <ul class={styles.sortColumn}>
             <li class={state.currentSort === 1 && styles.sortActive} onClick={() => filterList(1)}>
               <span>参与调查人数</span>
               <i class={[(state.currentSort === 1 && !state.currentAsc) && styles.actDown, (state.currentSort === 1 && state.currentAsc) && styles.actUp]}></i>
@@ -220,7 +227,7 @@ export default defineComponent({
               <span>支持率</span>
               <i class={[(state.currentSort === 3 && !state.currentAsc) && styles.actDown, (state.currentSort === 3 && state.currentAsc) && styles.actUp]}></i>
             </li>                        
-        </ul>
+        </ul> */}
         {/** 班级列表 */}
         {
           state.classList.length ? 
@@ -229,10 +236,14 @@ export default defineComponent({
               state.classList.map((item: any) => (
                 <div class={styles.sItem}>
                 <div class={styles.itemTile}>
-                  <img src={gradeIcon} />
+                  {/* <img src={gradeIcon} /> */}
                   <p>{item.currentGrade||''}{item.currentClass || ''}</p>
                 </div>
-                <ul class={styles.itemContent}>
+                <div class={styles.itemTotalNum}>
+                  <span class={styles.itLeft}><img src={tjnumIicon} />参与登记</span>
+                  <span class={styles.itRight}>{formatNumberWithComma(item.studentNum || 0)}<i>人</i></span>
+                </div>                
+                {/* <ul class={styles.itemContent}>
                   <li>
                     <div class={styles.icTop}>
                       <span class={styles.sRed}>{formatNumberWithComma(item.studentNum || 0)}</span><i>人</i>
@@ -251,7 +262,7 @@ export default defineComponent({
                     </div>
                   <p>支持率</p>
                   </li>                                
-                </ul>
+                </ul> */}
               </div>
               ))
             }

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

@@ -67,18 +67,79 @@
     display: flex;
     align-items: center;
     .scBg1 {
-      height: 145px;
+      height: 138px;
       object-fit: contain;
     }
     .scBg2 {
-      height: 145px;
+      height: 138px;
       flex: 1;
     }
     .scBg3 {
-      height: 145px;
+      height: 138px;
       object-fit: contain;
     }    
   }
+  .scInfo {
+    position: absolute;
+    left: 13px;
+    top: 70px;
+    width: 324px;
+    display: flex;
+    align-items: center;
+    &::after {
+      content: "";
+      position: absolute;
+      right: 50%;
+      top: 0;
+      width: 1px;
+      height: 54px;
+      border-right: 1px dashed #D5D2CF;
+    }
+    .scInfoItem {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .scmTop {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: #333333;
+        font-weight: 500;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 4px;
+        }
+      }
+      .scmBottom {
+        margin-top: 6px;
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        font-size: 12px;
+        color: #777777;
+        span {
+          font-family: DIN;
+          font-size: 24px;
+          font-weight: 500;
+          margin-right: 1px;
+        }
+        i {
+          font-style: normal;
+          position: relative;
+          bottom: 3px;
+        }
+        .sColor1 {
+          color: #FE6F25;
+        }
+        .sColor2 {
+          color: #FE3F25;
+        }
+      }
+    }
+  }
   .scTop {
     margin: 19px 0 0 24px;
     display: inline-block;
@@ -179,7 +240,7 @@
   background: #fff;
   display: flex;
   align-items: center;
-  background: rgba(255,255,255,0.6);
+  background: rgba(255,255,255,1);
   border-radius: 19px;
   border: 1px solid #FFFFFF;
   padding: 3px 3px 3px 12px;
@@ -256,11 +317,11 @@
     margin-top: 12px;
     background: #fff;
     border-radius: 10px;
-    padding: 0 10px;
+    padding: 0 12px;
     .itemTile {
       display: flex;
       align-items: center;
-      padding: 12px 0 10px;
+      padding: 12px 0 12px;
       border-bottom: 1px dashed #f0f0f0;
       img {
         width: 16px;
@@ -284,6 +345,38 @@
         background-size: contain;
       }
     }
+    .itemTotalNum {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      .itLeft {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #333;
+        font-weight: 500;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 4px;
+        }
+      }
+      .itRight {
+        font-family: DIN;
+        color: #FE3F25;
+        font-size: 18px;
+        font-weight: 500;
+        i {
+          font-style: normal;
+          font-size: 12px;
+          color: #777777;
+          position: relative;
+          top: -1px;
+          margin-left: 1px;
+        }
+      }
+    }
     .itemContent {
       display: flex;
       align-items: center;
@@ -338,15 +431,15 @@
 }
 
 .dbTitle {
-  margin-bottom: 12px;
+  margin-bottom: 18px;
   .dtName {
     display: flex;
     align-items: center;
     margin-bottom: 6px;
     img {
-      width: 16px;
-      height: 16px;
-      margin-right: 3px;
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
     }
     p {
       font-size: 15px;
@@ -373,33 +466,48 @@
   align-items: center;
   .dsItem {
     flex: 1;
-    background: linear-gradient( 157deg, rgba(255,255,255,0.45) 0%, #FFFFFF 100%);
-    border: 2px solid rgba(179, 224, 236, 0.66);
+    // background: linear-gradient( 157deg, rgba(255,255,255,0.45) 0%, #FFFFFF 100%);
+    // border: 2px solid rgba(179, 224, 236, 0.66);
+    background: #fff;
     border-radius: 10px;
     position: relative;
     overflow: hidden;
-    padding: 14px 0 16px 16px;
-    >div {
+    padding: 12px 0 12px 18px;
+    .dmTitle {
       display: flex;
-      align-items: flex-end;
-      font-size: 12px;
-      color: #777777;
-      margin-bottom: 5px;
-      span {
-        font-size: 22px;
-        font-weight: 500;
-        color: #259CFE;
-        font-family: DIN;
-      }
-      i {
-        position: relative;
-        top: -2px;
-        font-style: normal;
+      align-items: center;
+      font-size: 14px;
+      color: #333333;
+      font-weight: 500;
+      img {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
       }
     }
-    >p {
-      font-size: 13px;
-      color: #777777;
+    .dmContent {
+        margin-top: 7px;
+        display: flex;
+        align-items: baseline;
+        span {
+          font-size: 24px;
+          font-family: DIN;
+          font-weight: 500;
+        }
+        i {
+          font-size: 12px;
+          color: #777777;
+          font-style: normal;
+          position: relative;
+          bottom: 1px;
+          margin-left: 1px;
+        }
+        .dmOrange {
+          color: #FE6F25;
+        }
+        .dmRed {
+          color: #FE3F25;
+        }
     }
     .dsIcon {
       position: absolute;
@@ -426,7 +534,7 @@
 
 .gradeColumn {
   margin: 12px 0;
-  background: rgba(255,255,255,0.6);
+  background: rgba(255,255,255,1);
   border-radius: 19px;
   border: 1px solid #FFFFFF;
   height: 34px;

src/views/questionnaire-statistics/index.tsx

@@ -11,15 +11,17 @@ import scIcon1 from './images/sc_icon1.png';
 import scIcon2 from './images/sc_icon2.png';
 import scIcon3 from './images/sc_icon3.png';
 import schoolIcon from './images/school_icon.png';
+import schoolIcon2 from './images/school_icon2.png';
 import searchIcon from './images/search_icon.png';
 import searchBtn from './images/search_btn.png';
+import tjnumIicon from './images/tjnum_icon.png';
 import totalBoxBg from './images/total_box_icon.png';
 import useWeChatShare from '@/hooks/useWeChatShare';
 import { browser } from '@/helpers/utils';
 import OFullRefresh from '@/components/m-full-refresh';
-import tbgIcon1 from './images/tbg_icon1.png';
-import tbgIcon2 from './images/tbg_icon2.png';
-import tbgIcon3 from './images/tbg_icon3.png';
+import tbgIcon1 from './images/new_tbg_icon1.png';
+import tbgIcon2 from './images/new_tbg_icon2.png';
+import tbgIcon3 from './images/new_tbg_icon3.png';
 
 export default defineComponent({
   name: 'questionnaire-statistics',
@@ -237,10 +239,10 @@ export default defineComponent({
             <img class={styles.scBg3} src={tbgIcon3} />
           </div>
 
-          <div class={styles.scTop}>
+          {/* <div class={styles.scTop}>
             <div>参与学校</div><span>{formatNumberWithComma(forms.totalInfo.schoolNum || 0)}</span><i>所</i>
-          </div>
-          <ul class={styles.scBottom}>
+          </div> */}
+          {/* <ul class={styles.scBottom}>
             <li>
               <div class={styles.sNum}><span class={styles.sRed}>{formatNumberWithComma(forms.totalInfo.totalNum || 0)}</span><i>人</i></div>
               <div class={styles.sDesc}>
@@ -262,7 +264,18 @@ export default defineComponent({
                 支持率
               </div>
             </li>                        
-          </ul>
+          </ul> */}
+
+          <div class={styles.scInfo}>
+            <div class={styles.scInfoItem}>
+              <div class={styles.scmTop}><img src={schoolIcon2} />学校登记</div>
+              <div class={styles.scmBottom}><span class={styles.sColor1}>{formatNumberWithComma(forms.totalInfo.schoolNum || 0)}</span><i>所</i></div>
+            </div>
+            <div class={styles.scInfoItem}>
+              <div class={styles.scmTop}><img src={tjnumIicon} />参与登记</div>
+              <div class={styles.scmBottom}><span class={styles.sColor2}>{formatNumberWithComma(forms.totalInfo.totalNum || 0)}</span><i>人</i></div>
+            </div>
+          </div>
         </div>
 
         {/** 搜索栏 */}
@@ -304,7 +317,7 @@ export default defineComponent({
         </div>
 
         {/** 排序栏 */}
-        <ul class={styles.sortColumn}>
+        {/* <ul class={styles.sortColumn}>
             <li class={forms.sortField === 'totalNum' && styles.sortActive} onClick={() => filterList('totalNum')}>
               <span>参与调查人数</span>
               <i class={[(forms.sortField === 'totalNum' && forms.sortType === 'DESC') && styles.actDown, (forms.sortField === 'totalNum' && forms.sortType === 'ASC') && styles.actUp]}></i>
@@ -317,7 +330,7 @@ export default defineComponent({
               <span>支持率</span>
               <i class={[(forms.sortField === 'supportRate' && forms.sortType === 'DESC') && styles.actDown, (forms.sortField === 'supportRate' && forms.sortType === 'ASC') && styles.actUp]}></i>
             </li>                        
-        </ul>
+        </ul> */}
         {/** 学校列表 */}
         {
           forms.schoolList.length ?
@@ -325,11 +338,15 @@ export default defineComponent({
             {forms.schoolList.map((item: any) => (
               <div class={styles.sItem} onClick={() => skipDetail(item.schoolAreaId)}>
                 <div class={styles.itemTile}>
-                  <img src={schoolIcon} />
+                  {/* <img src={schoolIcon} /> */}
                   <p>{item.schoolName}</p>
                   <i></i>
                 </div>
-                <ul class={styles.itemContent}>
+                <div class={styles.itemTotalNum}>
+                  <span class={styles.itLeft}><img src={tjnumIicon} />参与登记</span>
+                  <span class={styles.itRight}>{formatNumberWithComma(item.totalNum)}<i>人</i></span>
+                </div>
+                {/* <ul class={styles.itemContent}>
                   <li>
                     <div class={styles.icTop}>
                       <span class={styles.sRed}>{formatNumberWithComma(item.totalNum)}</span><i>人</i>
@@ -348,7 +365,7 @@ export default defineComponent({
                     </div>
                   <p>支持率</p>
                   </li>                                
-                </ul>
+                </ul> */}
               </div>
             ))}
           </div> :