feat: 意向调查增加下拉刷新

src/views/questionnaire-statistics-new/detail.tsx

@@ -14,6 +14,7 @@ import schoolIcon from './images/school_icon.png';
 import gradeIcon from './images/class_icon.png';
 import { number } from 'echarts';
 import { drawCircle } from './drawGraph'
+import OFullRefresh from '@/components/m-full-refresh';
 
 
 export default defineComponent({
@@ -32,6 +33,7 @@ export default defineComponent({
 
     const refreshing = ref(false);
     const loading = ref(true);
+    const finished = ref(false);
 
 
     const state = reactive({
@@ -137,7 +139,18 @@ export default defineComponent({
       return decimal ? `${integer}.${decimal}` : integer;
     }
 
-    onMounted(async () => {
+    const onRefresh = async () => {
+      console.log('刷新111')
+      finished.value = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true;
+      await initData()
+      refreshing.value = false
+    };
+
+
+    const initData = async () => {
       await queryInfo()
       queryList()
       nextTick(() => {
@@ -149,15 +162,22 @@ export default defineComponent({
           if (percentage <= state.schoolInfo.participationStudentRate) {
             drawCircle('circle2', 2, percentage)
           }
-          percentage += 1; // 每次增加1%
+          percentage += 2; // 每次增加1%
           if (percentage > Math.max(state.schoolInfo.supportStudentRate, state.schoolInfo.participationStudentRate)) {
             clearInterval(interval); // 停止定时器
           }
         }, 25); // 每25ms更新一次
       });
+    }
+    onMounted(async () => {
+      initData()
     });
 
     return () => (
+      <OFullRefresh
+      v-model:modelValue={refreshing.value}
+      onRefresh={onRefresh}
+      class={styles.refreshC}>
       <div class={styles.detailBody}>
         <div class={styles.dbTitle}>
           <div class={styles.dtName}>
@@ -184,7 +204,7 @@ export default defineComponent({
         <div class={styles.sRing}>
           <div class={[styles.srItem,styles.srItemOne]}>
             <div class={styles.siLeft}>
-              <canvas id="circle1" width="70" height="70"></canvas>
+              <canvas id="circle1" width="85" height="85"></canvas>
               <p>支持率</p>
             </div>
             <div class={styles.siRight}>
@@ -194,7 +214,7 @@ export default defineComponent({
           </div>
           <div class={styles.srItem}>
             <div class={styles.siLeft}>
-              <canvas id="circle2" width="70" height="70"></canvas>
+              <canvas id="circle2" width="85" height="85"></canvas>
               <p>参加率</p>
             </div>
             <div class={styles.siRight}>
@@ -311,6 +331,7 @@ export default defineComponent({
 
         {/* <MWxTip /> */}
       </div>
+      </OFullRefresh>
     );
   }
 });

src/views/questionnaire-statistics-new/drawGraph.ts

@@ -15,16 +15,30 @@ export const drawCircle = (domId: string, type: number, rateNum: number) => {
     const ctx = canvas.getContext('2d');
 
     // 设置百分比（0-100）
-    const percentage = rateNum || 0;
+    const percentage = Number(rateNum || 0).toFixed(2);
 
     // 圆环的设置
-    const radius = 30; // 圆环半径
+    const radius = 35; // 圆环半径
     const lineWidth = 8; // 圆环的宽度
 
     // 圆心坐标
     const centerX = canvas.width / 2;
     const centerY = canvas.height / 2;
 
+        // 获取设备像素比
+        const dpr = 1 || window.devicePixelRatio;
+
+        // 设置 canvas 的物理尺寸
+        const width = canvas.width;
+        const height = canvas.height;
+    
+        // 根据设备像素比调整 canvas 的实际尺寸
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+    
+        // 设置 canvas 上下文的缩放比例
+        ctx.scale(dpr, dpr);
+
     // 创建渐变色
     function createGradient() {
         const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

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

@@ -470,6 +470,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
+    position: relative;
     .soTitle {
       display: flex;
       align-items: flex-end;
@@ -499,6 +500,18 @@
       }
     }
   }
+  .stOneLine {
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 1px;
+      height: 43px;
+      background: url('./images/ns_line.png') no-repeat center;
+      background-size: contain;
+    }
+  }
 }
 
 .sRing {
@@ -535,15 +548,17 @@
       }
     }
     .siLeft {
-      width: 70px;
-      height: 70px;
+      width: 85px;
+      height: 85px;
       position: relative;
       >p {
         position: absolute;
         left: 50%;
-        bottom: 18px;
-        transform: translateX(-50%);
+        bottom: 26px;
+        transform: translateX(-65%) scale(0.85);
         text-align: center;
+        font-size: 12px;
+        word-break: keep-all;
       }
     }
   }
@@ -553,7 +568,7 @@
 }
 
 #circle1, #circle2 {
-  width: 60px;
-  height: 60px;
-  margin-right: 8px;
+  // width: 80px;
+  // height: 80px;
+  margin-right: 4px;
 }

src/views/questionnaire-statistics-new/index.tsx

@@ -17,6 +17,7 @@ import totalBoxBg from './images/total_box_icon.png';
 import { drawCircle } from './drawGraph'
 import useWeChatShare from '@/hooks/useWeChatShare';
 import { browser } from '@/helpers/utils';
+import OFullRefresh from '@/components/m-full-refresh';
 
 export default defineComponent({
   name: 'questionnaire-statistics-new',
@@ -70,6 +71,11 @@ export default defineComponent({
             value: index
           })
         })
+        // 没有缓存
+        if (!sessionStorage.getItem('areaIdx')) {
+          const defaultIndex = data.findIndex((item: any) => item.defaultFlag)
+          forms.areaIdx = defaultIndex ? Number(defaultIndex) : 0
+        }
         forms.currentArea = forms.areaColumns.length ? forms.areaColumns[forms.areaIdx].text : ''
         forms.currentAreaInfo = forms.areaList.length ? forms.areaList[forms.areaIdx] : null;
       } catch (error) {
@@ -95,6 +101,21 @@ export default defineComponent({
           }
         );
         forms.totalInfo = res.data|| {}
+        nextTick(() => {
+          let percentage = 0;
+          const interval = setInterval(() => {
+            if (percentage <= forms.totalInfo.supportRate) {
+              drawCircle('circle1', 1, percentage)
+            }
+            if (percentage <= forms.totalInfo.participationRate) {
+              drawCircle('circle2', 2, percentage)
+            }
+            percentage += 2; // 每次增加1%
+            if (percentage > Math.max(forms.totalInfo.supportRate, forms.totalInfo.participationRate)) {
+              clearInterval(interval); // 停止定时器
+            }
+          }, 25); // 每25ms更新一次
+        });
       } catch (error) {
         
       }
@@ -174,13 +195,23 @@ export default defineComponent({
       const weChatShare = useWeChatShare(
         shareTitle,
         '科技赋能音乐（器乐）学习，在每一个孩子心中奏响美妙的乐章。',
-        window.location.origin + '/classroom-app/shareImg/question-share.png'
+        window.location.origin + '/classroom-app/shareImg/questionnaire-statistics-new.png'
       );
       if (browser().weixin) {
         weChatShare.getAppSignature()
       }
     }
 
+    const onRefresh = async () => {
+      console.log('刷新111')
+      finished.value = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true;
+       await queryArea();
+       refreshing.value = false
+    };
+
     onMounted(async () => {
       console.log('刷新页面')
       forms.areaIdx = sessionStorage.getItem('areaIdx') || 0;
@@ -191,24 +222,14 @@ export default defineComponent({
       await queryArea();
       nextTick(() => {
         initWxShare()
-
-        let percentage = 0;
-        const interval = setInterval(() => {
-          if (percentage <= forms.totalInfo.supportRate) {
-            drawCircle('circle1', 1, percentage)
-          }
-          if (percentage <= forms.totalInfo.participationRate) {
-            drawCircle('circle2', 2, percentage)
-          }
-          percentage += 1; // 每次增加1%
-          if (percentage > Math.max(forms.totalInfo.supportRate, forms.totalInfo.participationRate)) {
-            clearInterval(interval); // 停止定时器
-          }
-        }, 25); // 每25ms更新一次
       });
     });
 
     return () => (
+      <OFullRefresh
+      v-model:modelValue={refreshing.value}
+      onRefresh={onRefresh}
+      class={styles.refreshC}>
       <div class={[styles.statisBody]}>
         {
         forms.areaColumns.length > 1 && 
@@ -224,7 +245,7 @@ export default defineComponent({
 
         {/** 参与学校统计 */}
         <div class={styles.sTotal}>
-          <div class={styles.stOne}>
+          <div class={[styles.stOne, styles.stOneLine]}>
             <div class={styles.soTitle}><span class={styles.sOrange}>{formatNumberWithComma(forms.totalInfo.schoolNum||0)}</span><i>所</i></div>
             <p class={styles.soDesc}><img src={schoolIcon} />参与学校</p>
           </div>
@@ -238,7 +259,7 @@ export default defineComponent({
         <div class={styles.sRing}>
           <div class={[styles.srItem,styles.srItemOne]}>
             <div class={styles.siLeft}>
-              <canvas id="circle1" width="70" height="70"></canvas>
+              <canvas id="circle1" width="85" height="85"></canvas>
               <p>支持率</p>
             </div>
             <div class={styles.siRight}>
@@ -248,7 +269,7 @@ export default defineComponent({
           </div>
           <div class={styles.srItem}>
             <div class={styles.siLeft}>
-              <canvas id="circle2" width="70" height="70"></canvas>
+              <canvas id="circle2" width="85" height="85"></canvas>
               <p>参加率</p>
             </div>
             <div class={styles.siRight}>
@@ -271,8 +292,13 @@ export default defineComponent({
                 v-model={forms.schoolName}
                 onUpdate:modelValue={(val: any) => {
                   // 输入框内容变化时触发
-                  // console.log('搜索内容变化',val)
+                  console.log('搜索内容变化',val)
                   forms.schoolName = val
+                  sessionStorage.setItem('qsFilterParams', JSON.stringify({
+                    schoolName: forms.schoolName,
+                    sortType: forms.sortType,
+                    sortField: forms.sortField,
+                  }))
                   getList()
                 }}>
               </Field>   
@@ -345,6 +371,8 @@ export default defineComponent({
           </div> : 
           <OEmpty description="暂无内容" class={styles.emptyC} />
         }
+
+
         {/* 区域 */}
         <Popup
           v-model:show={forms.areaStatus}
@@ -373,6 +401,7 @@ export default defineComponent({
                 forms.areaOptionIndex = [val.selectedOptions[0].value]
                 forms.areaIdx = val.selectedOptions[0].value
                 forms.areaStatus = false;
+                forms.schoolName = '';
                 forms.currentAreaInfo = forms.areaList[val.selectedOptions[0].value]
                 queryInfo()
                 getList()
@@ -384,6 +413,7 @@ export default defineComponent({
 
         {/* <MWxTip /> */}
       </div>
+      </OFullRefresh>
     );
   }
 });

src/views/questionnaire-statistics/detail.tsx

@@ -13,6 +13,7 @@ import scIcon3 from './images/sc_icon3.png';
 import schoolIcon from './images/school_icon.png';
 import gradeIcon from './images/class_icon.png';
 import { number } from 'echarts';
+import OFullRefresh from '@/components/m-full-refresh';
 
 
 export default defineComponent({
@@ -31,7 +32,7 @@ export default defineComponent({
 
     const refreshing = ref(false);
     const loading = ref(true);
-
+    const finished = ref(false);
 
     const state = reactive({
       saveLoading: false,
@@ -136,12 +137,27 @@ export default defineComponent({
       return decimal ? `${integer}.${decimal}` : integer;
     }
 
+    const onRefresh = async () => {
+      console.log('刷新111')
+      finished.value = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true;
+      await queryInfo()
+      await queryList()
+      refreshing.value = false
+    };
+
     onMounted(async () => {
       await queryInfo()
       queryList()
     });
 
     return () => (
+      <OFullRefresh
+      v-model:modelValue={refreshing.value}
+      onRefresh={onRefresh}
+      class={styles.refreshC}>
       <div class={styles.detailBody}>
         <div class={styles.dbTitle}>
           <div class={styles.dtName}>
@@ -254,6 +270,7 @@ export default defineComponent({
 
         {/* <MWxTip /> */}
       </div>
+      </OFullRefresh>
     );
   }
 });

src/views/questionnaire-statistics/index.tsx

@@ -16,6 +16,7 @@ import searchBtn from './images/search_btn.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';
 
 export default defineComponent({
   name: 'questionnaire-statistics',
@@ -69,6 +70,11 @@ export default defineComponent({
             value: index
           })
         })
+        // 没有缓存
+        if (!sessionStorage.getItem('areaIdx')) {
+          const defaultIndex = data.findIndex((item: any) => item.defaultFlag)
+          forms.areaIdx = defaultIndex ? Number(defaultIndex) : 0
+        }
         forms.currentArea = forms.areaColumns.length ? forms.areaColumns[forms.areaIdx].text : ''
         forms.currentAreaInfo = forms.areaList.length ? forms.areaList[forms.areaIdx] : null;
       } catch (error) {
@@ -174,13 +180,23 @@ export default defineComponent({
       const weChatShare = useWeChatShare(
         shareTitle,
         '科技赋能音乐（器乐）学习，在每一个孩子心中奏响美妙的乐章。',
-        window.location.origin + '/classroom-app/shareImg/question-share.png'
+        window.location.origin + '/classroom-app/shareImg/questionnaire-statistics.png'
       );
       if (browser().weixin) {
         weChatShare.getAppSignature()
       }
     }
 
+    const onRefresh = async () => {
+      console.log('刷新111')
+      finished.value = false;
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      loading.value = true;
+       await queryArea();
+       refreshing.value = false
+    };
+
     onMounted(async () => {
       console.log('刷新页面')
       forms.areaIdx = sessionStorage.getItem('areaIdx') || 0;
@@ -193,6 +209,10 @@ export default defineComponent({
     });
 
     return () => (
+      <OFullRefresh
+      v-model:modelValue={refreshing.value}
+      onRefresh={onRefresh}
+      class={styles.refreshC}>
       <div class={[styles.statisBody, forms.areaColumns.length == 1 ? styles.statisBody2 : styles.statisBody1]}>
         {
         forms.areaColumns.length > 1 && 
@@ -261,6 +281,11 @@ export default defineComponent({
                   // 输入框内容变化时触发
                   // console.log('搜索内容变化',val)
                   forms.schoolName = val
+                  sessionStorage.setItem('yqsFilterParams', JSON.stringify({
+                    schoolName: forms.schoolName,
+                    sortType: forms.sortType,
+                    sortField: forms.sortField,
+                  }))
                   getList()
                 }}>
               </Field>   
@@ -346,6 +371,7 @@ export default defineComponent({
                 forms.areaOptionIndex = [val.selectedOptions[0].value]
                 forms.areaIdx = val.selectedOptions[0].value
                 forms.areaStatus = false;
+                forms.schoolName = '';
                 forms.currentAreaInfo = forms.areaList[val.selectedOptions[0].value]
                 queryInfo()
                 getList()
@@ -357,6 +383,7 @@ export default defineComponent({
 
         {/* <MWxTip /> */}
       </div>
+      </OFullRefresh>
     );
   }
 });