classroom-app/src/views/questionnaire-statistics/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { List, Popup, DatePicker, Popover, Field, Picker, } from 'vant';
import request from '@/helpers/request';
import { useRoute, useRouter } from 'vue-router';
import OEmpty from '@/components/m-empty';
import MWxTip from '@/components/m-wx-tip';
import OSearch from '@/components/m-search';
import positionIcon from './images/position_icon.png';
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/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',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const tabName = ref('all');
    const forms = reactive({
      schoolName: '',
      id: route.query.id,
      // id: '1687275949971763202',
      yearStatus: false,
      schoolId: null,
      classList: [] as any,
      page: 1,
      rows: 20,
      isClick: false,
      tenantId: route.query.id,
      areaList: [] as any,
      areaColumns: [] as any,
      areaStatus: false,
      areaPopupShow: false,
      areaOptionIndex: [] as any,
      currentArea: null as any, // 当前的区域
      currentAreaInfo: null as any,
      schoolList: [] as any,
      totalInfo: {} as any,
      sortType: 'DESC' as any, // 排序方式,ASC(升序)/DESC(降序)
      sortField: 'totalNum', // totalNum: 总人数，supportNum：支持人数，supportRate：支持率
      areaIdx: 0 as any,
    });

    const refreshing = ref(false);
    const loading = ref(true);
    const finished = ref(false);
    const showContact = ref(false);
    const list = ref([]);

    const queryArea = async () => {
      try {
        const { data } = await request.get(
          `/edu-app/open/tenantInfo/getArea?tenantId=${forms.tenantId}`, {
            hideLoading: false,
          }
        );
        forms.areaList = data || []
        data.forEach((item: any, index: number) => {
          const {provinceName='',cityName='',regionName=''} = item
          forms.areaColumns.push({
            text: provinceName + ' ' + cityName + ' ' + (regionName ? regionName : ''),
            value: index
          })
        })
        // 没有缓存
        if (!sessionStorage.getItem('areaIdx')) {
          const defaultIndex = data.findIndex((item: any) => item.defaultFlag)
          forms.areaIdx = defaultIndex !== -1 ? 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) {
        
      }
      await queryInfo();
      await getList();
    }

    const queryInfo = async () => {
      try {
        const { provinceCode='',cityCode='',regionCode='' } = forms.currentAreaInfo
        const res = await request.post(
          '/edu-app/open/schoolMeetingQuestion/areaSummarySum',
          {
            data: {
              tenantId: forms.tenantId,
              provinceCode,
              cityCode,
              districtCode: regionCode,
            }
          }
        );
        forms.totalInfo = res.data|| {}
      } catch (error) {
        
      }
    }

    const getList = async () => {
      try {
        const { provinceCode='',cityCode='',regionCode='' } = forms.currentAreaInfo
        const res = await request.post(
          '/edu-app/open/schoolMeetingQuestion/areaSummary',
          {
            data: {
              tenantId: forms.tenantId,
              schoolName: forms.schoolName,
              provinceCode,
              cityCode,
              districtCode: regionCode,
              sortType: forms.sortType,
              sortField: forms.sortField,
            }
          }
        );

        forms.schoolList = res?.data || []
      } catch {
        // 
      } finally {
        //
      }
      
    };

    const state = reactive({
      saveLoading: false,
      image: null as any,
      shareLoading: false
    });

    const skipDetail = (id: any) => {
      // sessionStorage.setItem('areaIdx', forms.areaIdx)
      // sessionStorage.setItem('areaTenantName', forms.totalInfo.tenantName || '')
      sessionStorage.setItem('yqsFilterParams', JSON.stringify({
        schoolName: forms.schoolName,
        sortType: forms.sortType,
        sortField: forms.sortField,
      }))
      router.push({
        path: '/statistics-detail',
        query: {
          id,
        }
      });
    }

    const filterList = (val: string) => {
      if (forms.sortField !== val) {
        forms.sortType = 'DESC'
      } else {
        forms.sortType = forms.sortType === 'DESC' ? 'ASC' : 'DESC'
      }
      forms.sortField = val
      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;
    }

    const initWxShare = () => {
      const shareTitle = (forms.totalInfo.tenantName||'') + '音乐（器乐）数字化转型问卷统计';
      const weChatShare = useWeChatShare(
        shareTitle,
        '科技赋能音乐（器乐）学习，在每一个孩子心中奏响美妙的乐章。',
        window.location.origin + '/classroom-app/shareImg/questionnaire-statistics.png'
      );
      if (browser().weixin) {
        weChatShare.getAppSignature()
      }
    }

    const onRefresh = async () => {
      console.log('刷新111')
      forms.areaColumns = []
      finished.value = false;
      forms.areaColumns = []
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
       await queryArea();
       refreshing.value = false
    };

    onMounted(async () => {
      console.log('刷新页面')
      forms.areaIdx = sessionStorage.getItem('areaIdx') || 0;
      // @ts-ignore
      const qsFilterParams: any = sessionStorage.getItem('yqsFilterParams') ? JSON.parse(sessionStorage.getItem('yqsFilterParams')) : {};
      forms.schoolName = qsFilterParams.schoolName || ''
      forms.sortField = qsFilterParams.sortField || 'totalNum'
      forms.sortType = qsFilterParams.sortType || 'DESC'
      await queryArea();
      initWxShare();
    });

    return () => (
      <OFullRefresh
      v-model:modelValue={refreshing.value}
      freshDisabled={forms.areaStatus}
      onRefresh={onRefresh}
      class={styles.refreshC}>
      <div class={[styles.statisBody, forms.areaColumns.length == 1 ? styles.statisBody2 : styles.statisBody1]}>
        {
        forms.areaColumns.length > 1 && 
        <div class={[styles.spColumn, forms.areaStatus && styles.openVal]} 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.scBgBox}>
            <img class={styles.scBg1} src={tbgIcon1} />
            <img class={styles.scBg2} src={tbgIcon2} />
            <img class={styles.scBg3} src={tbgIcon3} />
          </div>

          {/* <div class={styles.scTop}>
            <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}>{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}>{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}>{Number(forms.totalInfo.supportRate || 0).toFixed(2)}%</span></div>
              <div class={styles.sDesc}>
                <img src={scIcon3} />
                支持率
              </div>
            </li>                        
          </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>

        {/** 搜索栏 */}
        <div class={styles.searechInfo}>
          {/* <OSearch
            class={styles.allDataWrap}
            shape="round"
            background="#F6F8F9"
            inputBackground="white"
            placeholder="请输入学校名称"
            onSearch={val => {
              forms.schoolName = val;
              forms.page = 1;
              refreshing.value = true;
              getList();
            }}></OSearch> */}
            <img src={searchIcon} class={styles.searchIcon} />
             <Field
                clearable={true}
                inputAlign="left"
                placeholder="请输入学校名称"
                autocomplete="off"
                center
                maxlength={30}
                v-model={forms.schoolName}
                onUpdate:modelValue={(val: any) => {
                  // 输入框内容变化时触发
                  // console.log('搜索内容变化',val)
                  forms.schoolName = val
                  sessionStorage.setItem('yqsFilterParams', JSON.stringify({
                    schoolName: forms.schoolName,
                    sortType: forms.sortType,
                    sortField: forms.sortField,
                  }))
                  getList()
                }}>
              </Field>   
              <img src={searchBtn} class={styles.searchBtn} onClick={getList} />         
        </div>

        {/** 排序栏 */}
        {/* <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>
            </li>
            <li class={forms.sortField === 'supportNum' && styles.sortActive} onClick={() => filterList('supportNum')}>
              <span>支持人数</span>
              <i class={[(forms.sortField === 'supportNum' && forms.sortType === 'DESC') && styles.actDown, (forms.sortField === 'supportNum' && forms.sortType === 'ASC') && styles.actUp]}></i>
            </li>
            <li class={forms.sortField === 'supportRate' && styles.sortActive} onClick={() => filterList('supportRate')}>
              <span>支持率</span>
              <i class={[(forms.sortField === 'supportRate' && forms.sortType === 'DESC') && styles.actDown, (forms.sortField === 'supportRate' && forms.sortType === 'ASC') && styles.actUp]}></i>
            </li>                        
        </ul> */}
        {/** 学校列表 */}
        {
          forms.schoolList.length ?
          <div class={styles.scList}>
            {forms.schoolList.map((item: any) => (
              <div class={styles.sItem} onClick={() => skipDetail(item.schoolAreaId)}>
                <div class={styles.itemTile}>
                  {/* <img src={schoolIcon} /> */}
                  <p>{item.schoolName}</p>
                  <i></i>
                </div>
                <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>
                    </div>
                  <p>参与调查</p>
                  </li>
                  <li>
                    <div class={styles.icTop}>
                      <span class={styles.sBlue}>{formatNumberWithComma(item.supportNum)}</span><i>人</i>
                    </div>
                  <p>支持学校开展</p>
                  </li>
                  <li>
                    <div class={styles.icTop}>
                      <span class={styles.sBlue}>{Number(item.supportRate).toFixed(2)}%</span>
                    </div>
                  <p>支持率</p>
                  </li>                                
                </ul> */}
              </div>
            ))}
          </div> : 
          <OEmpty description="暂无内容" class={styles.emptyC} />
        }
        {/* 区域 */}
        <Popup
          v-model:show={forms.areaStatus}
          position="bottom"
          round
          safeAreaInsetBottom
          lazyRender={false}
          class={'popupBottomSearch'}
          onOpen={() => {
            forms.areaPopupShow = true;
          }}
          onClosed={() => {
            forms.areaPopupShow = false;
          }}>
          {forms.areaPopupShow && (
            <Picker
              showToolbar
              v-model={forms.areaOptionIndex}
              columns={forms.areaColumns}
              onCancel={() => (forms.areaStatus = false)}
              onConfirm={(val: any) => {
                // 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.schoolName = '';
                forms.currentAreaInfo = forms.areaList[val.selectedOptions[0].value]
                sessionStorage.setItem('areaIdx', forms.areaIdx)
                queryInfo()
                getList()
                console.log('选择1111',val,forms.areaOptionIndex)
              }}
            />
          )}
        </Popup>

        {/* <MWxTip /> */}
      </div>
      </OFullRefresh>
    );
  }
});