bigDataStudent/src/views/analysisReport/studentPage/mainPage.vue

<template>
  <!-- 分析报告详情总页面 -->
  <div class="analysis_main">
    <div class="main_header" ref="mainHeader">
      <div class="header_left">
        <span class="back_button" @click="GoBack">
          <i class="iconfont icon_return"></i>返回
        </span>
        <span class="header_title">{{ pageName }}</span>
      </div>
      <div class="header_right">
        <div class="select_list" v-if="isShowFilter">
          <el-select style="width: 120px" v-model="item.value" :placeholder="'请选择' + item.name" class="select_item"
            @change="ChangeFilters({ index: index, value: item.value })" v-for="(item, index) in filterData" :key="index"
            v-show="item.list.length > 1">
            <el-option v-for="item in item.list" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="main_content">
      <div class="content_right" ref="rightContent" @scroll="ScrollChange">
        <div class="content_right_scroll" ref="contentRightScroll">
          <div class="page_filter" ref="filterContent">
            <FiltersItem :filtersData="filterData" @selectItem="ChangeFilters"></FiltersItem>
          </div>
          <router-view ref="child"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FiltersItem from "@/components/FiltersItem_ruoyan.vue";
export default {
  components: { FiltersItem },
  computed: {
    pageName() {
      let examName = this.$store.state.report.examSelectItem.examName;
      if (examName) {
        return examName.split("_")[0];
      }
    },
    updateScrollTop() {
      return this.$store.state.report.updateScrollTop;//监听改变滚动条参数 
    },
  },
  data() {
    return {
      isShowFilter: false, //是否显示筛选条件
      filterData: [
        {
          name: "科目名称",
          value: '0',
          type: "subjectName",
          list: [], //选项
        }
      ],
      resizeTimer:null
    };
  },
  created() {
    if (this.$store.state.report.filterData.length > 0) {
      //有数据
      this.filterData = this.$store.state.report.filterData;
    }
    // 绑定 resize 事件
    window.addEventListener('resize', this.HandleWidthChange);
    this.$nextTick(()=>{
      this.SetHeadWidth();
    })
  },
  methods: {
    // 处理宽度变化的逻辑
    HandleWidthChange() {
      // 防抖：避免窗口 resize 时频繁触发（100ms 内只执行一次）
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.SetHeadWidth();
      }, 100);
    },
    SetHeadWidth(){
      const scrollDivWidth = this.$refs.contentRightScroll.offsetWidth;
      const headDiv = this.$refs.mainHeader;
      headDiv.style.width = `${scrollDivWidth}px`;
    },
    // 筛选事件
    ChangeFilters(e) {
      this.filterData[e.index].value = e.value;
      // 选中科目数据
      let courseObj = this.filterData[0].list.find(item => item.value == this.filterData[0].value);
      let filterObject = {
        examLevel: courseObj.examLevel,//1-联考 2-单校
        contrastExamIds: courseObj.contrastExamIds,//多次考试任务对比ID，不包含当前任务ID	
        examId: courseObj.examId,//考试id	
        subjectCode: courseObj.subjectCode, //科目code
        subjectGroupType: courseObj.subjectGroupType, //是否为组合科目 1为组合科目 0为非组合科目
        subjectGroupNames: courseObj.subjectName,//科目名称
        isTotal: courseObj.isTotal //是否为总分科目 1为总分 0为非总分
      };
      //设置是否是总分
      this.$store.commit("report/set_state", {
        key: "isTotalScore",
        value: courseObj.isTotal == 1 || courseObj.subjectGroupType == 1,//1为总分 0为非总分  1为组合科目 0为非组合科目
      });

      localStorage.setItem('reportExamCourseId', courseObj.subjectId);//单科的考试科目id
      localStorage.setItem('reportIsTotalScore', courseObj.isTotal == 1 || courseObj.subjectGroupType == 1)
      console.log("打印筛选数据", filterObject);
      this.$store.dispatch("report/UpdateFilterObject", filterObject);
    },

    // 滚动条事件
    ScrollChange() {
      let scrollTop = this.$refs.rightContent.scrollTop;
      const filterContent = this.$refs.filterContent;
      let scrollHeight = 242;
      if (filterContent) {
        scrollHeight = filterContent.clientHeight;
      }
      if (scrollTop >= scrollHeight) {
        this.isShowFilter = true;

      }
      else {
        this.isShowFilter = false;
      }
      this.$store.commit("report/set_state", {
        key: "isShowFilter",
        value: this.isShowFilter,
      });
      if (this.$refs.child && typeof this.$refs.child.GetScrollTop === 'function') {
        this.$refs.child.GetScrollTop(scrollTop);
      }
    },
    //重置滚动条
    ResetScroll() {
      this.$nextTick(() => {
        if (this.$refs.rightContent) {
          this.$refs.rightContent.scrollTop = 0;
        }
      })
    },

    //返回按钮点击
    GoBack() {
      this.$router.push("/studentAnalysisReport/list");
    },
  },
  watch: {
    '$route'(to, from) {
      console.log('路由变化', to, from);
      this.ResetScroll();//重置滚动条
    },//路由变化 重置页面滚动条位置

    updateScrollTop: {
      handler(newVal) {
        console.log("updateScrollTop changed:", newVal);
        this.ResetScroll();//重置滚动条
      },
    },

  },
  beforeUnmount() {
    // 解绑事件，避免内存泄漏
    window.removeEventListener('resize', this.HandleWidthChange);
    // 清除计时器
    clearTimeout(this.resizeTimer);
  }
};
</script>

<style scoped lang="scss"></style>