chongqing-app/src/pages/eikonStatistics/index.vue

<template>
  <home-container ref="homeContainer" :customStyle="{ background: 'none' }" @scroll="handleScroll"
    @scroll-end="handleScrollEnd">
    <div class="eikon-statistics-container">
      <!-- 个人模式显示选项卡 -->
      <h-tabs v-if="hasTabs && !hasOldLevel" v-model="currentTab" :tabs="tabList" value-key="type" label-key="title"
        @change="handleTabChange" class="h-tabs-fixed" />

      <topInfo @department-change="handleDepartmentChange"
        :class="['top-info-fixed', (hasTabs && !hasOldLevel) ? 'with-tabs' : 'without-tabs']"
        :currentTab="currentTab" />

      <!-- 总体概览和详细内容区域 -->
      <div class="content-section" :class="(hasTabs && !hasOldLevel) ? 'with-tabs' : 'without-tabs'">
        <!-- 总体概览 -->
        <div class="overview-section">
          <div class="section-title">总体概览</div>
          <general-overview :overview-data="overviewData" />
        </div>

        <!-- 详细内容 -->
        <div class="detail-section">
          <div class="section-title">详细内容</div>

          <!-- 资质能力 -->
          <qualification />

          <!-- 工作履历 -->
          <work-experience />

          <!-- 出勤投入 -->
          <attendance />

          <!-- 工作产出 -->
          <work-output />

          <!-- 标准执行 -->
          <standard-execution />

          <!-- 学习成长 -->
          <learning-growth />

          <!-- 协同配合 -->
          <collaboration />

          <!-- 主观印象 -->
          <subjective-impression />

          <!-- 成员明细 -->
          <member-details v-if="!isPersonal" @nameClick="handleNameClick" />
        </div>
      </div>
    </div>

    <!-- 返回上一级按钮 -->
    <div v-if="hasOldLevel" class="back-button" :class="{ 'back-button-hidden': isScrolling }">
      <div class="back-circle" @click="goBack">
        <div class="back-icon">
          <uni-icons type="back" size="40rpx" color="#ffffff"></uni-icons>
        </div>
        <div class="back-text">返回上一级</div>
      </div>
    </div>
  </home-container>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import HomeContainer from "@/components/HomeContainer.vue";
import HTabs from "@/components/h-tabs/h-tabs.vue";
import { getInfo } from "@/api/login"
import topInfo from "@/pages/eikonStatistics/components/topInfo.vue"
import GeneralOverview from "@/pages/eikonStatistics/components/general-overview.vue"
import StandardExecution from "@/pages/eikonStatistics/components/standard-execution.vue"
import Collaboration from "@/pages/eikonStatistics/components/collaboration.vue"
import Qualification from "@/pages/eikonStatistics/components/Qualification.vue"
import WorkExperience from "@/pages/eikonStatistics/components/WorkExperience.vue"
import Attendance from "@/pages/eikonStatistics/components/Attendance.vue"
import WorkOutput from "@/pages/eikonStatistics/components/WorkOutput.vue"
import LearningGrowth from "@/pages/eikonStatistics/components/LearningGrowth.vue"
import SubjectiveImpression from "@/pages/eikonStatistics/components/SubjectiveImpression.vue"
import MemberDetails from "@/pages/eikonStatistics/components/MemberDetails.vue"
import { getModuleMetrics } from "@/api/eikonStatistics/eikonStatistics"

export default {
  components: { HomeContainer, HTabs, topInfo, GeneralOverview, StandardExecution, Collaboration, Qualification, WorkExperience, Attendance, WorkOutput, LearningGrowth, SubjectiveImpression, MemberDetails },
  data() {
    return {
      currentTab: 'personal', // 当前选中的选项卡
      isScrolling: false, // 是否正在滚动
      // 选项卡列表
      tabList: [
        {
          type: 'personal',
          title: '个人'
        },
        {
          type: 'team',
          title: '班组'
        }
      ],
      // 概览数据
      overviewData: {
        // 左侧数据
        qualificationAbility: 0,
        attendanceInput: 0,
        standardExecution: 0,
        coordination: 0,
        // 右侧数据
        workHistory: 0,
        workOutput: 0,
        learningGrowth: 0,
        subjectiveImpression: 0
      },

    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      userRoles: state => state.user.roles || [],
      currentLevel: state => state.eikonLevel.currentLevel,
      currentLevelId: state => state.eikonLevel.currentLevelId,
      oldLevel: state => state.eikonLevel.oldLevel,
      oldLevelId: state => state.eikonLevel.oldLevelId,
      allData: state => state.eikonLevel.allData,
      systemData: state => state.eikonLevel.systemData
    }),
    ...mapGetters('eikonLevel', ['isPersonal', 'isZhanZhang', 'isKeZhang', 'isBanZuZhang']),
    hasOldLevel() {
      return this.oldLevel && this.oldLevelId
    },
    hasTabs() {
      return this.userRoles.includes('SecurityCheck') || this.userRoles.includes('xiaozuzhang')
    }
  },
  async onLoad() {
    // 设置初始级别
    await this.setInitialLevel();
    // 加载初始数据
    await this.loadPageData();
    console.log(this.userInfo, "userInfo")
  },

  methods: {
    ...mapActions('eikonLevel', ['changeLevel', 'initLevel', 'saveAllData', 'loadData']),
    //根据不同的登录角色，赋予初始级别
    async setInitialLevel() {
      let isZhanZhang = this.userRoles && this.userRoles.includes('test')
      let isKeZhang = this.userRoles && this.userRoles.includes('banzuzhang')
      let isZhiJian = this.userRoles && this.userRoles.includes('zhijianke')
      let isJingLi = this.userRoles && this.userRoles.includes('bumenjingli')
      let level = isKeZhang ? 'department' : isJingLi ? 'brigade' : 'station';
      let levelId = isKeZhang ? this.userInfo.departmentId : isJingLi ? this.userInfo.brigadeId : this.userInfo.stationId;
      if (isKeZhang || isZhanZhang || isZhiJian || isJingLi) {
        this.initLevel({ level: level, levelId: levelId })
      } else {
        this.initLevel({ level: 'personal', levelId: this.userInfo.userId })
      }

    },

    // 选项卡切换处理
    async handleTabChange(tabType, tabItem) {
      this.currentTab = tabType;
      if (tabType === 'team') {
        this.initLevel({ level: 'team', levelId: this.userInfo.teamsId })
      } else {
        this.initLevel({ level: 'personal', levelId: this.userInfo.userId })
      }
      // 根据选项卡类型加载不同的数据
      await this.loadPageData();

      // 滚动到顶部
      this.scrollToTop()
    },
    handleNameClick(row) {
      // 滚动到顶部
      this.scrollToTop()
    },
    scrollToTop() {
      this.$nextTick(() => {
        if (this.$refs.homeContainer && this.$refs.homeContainer.scrollToTop) {
          this.$refs.homeContainer.scrollToTop();
        }
      });
    },
    // 部门选择变化处理
    async handleDepartmentChange(selectedDepartment) {
      console.log('部门选择变化:', selectedDepartment);
      const { deptType } = selectedDepartment
      if (deptType == 'STATION') {
        this.initLevel({ level: 'station', levelId: selectedDepartment.id })
      }
      if (deptType == 'MANAGER') {
        this.initLevel({ level: 'department', levelId: selectedDepartment.id })
      }
      if (deptType == 'TEAMS') {
        this.initLevel({ level: 'team', levelId: selectedDepartment.id })
      }
      if (deptType == 'BRIGADE') {
        this.initLevel({ level: 'brigade', levelId: selectedDepartment.id })
      }
      if (!deptType) {
        this.initLevel({ level: 'personal', levelId: selectedDepartment.id })
      }
      // 重新加载数据
      await this.loadPageData();
    },

    // 加载数据方法
    async loadPageData() {
      try {
        await this.loadData()
      } catch (error) {
        console.error('加载数据失败:', error);
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      }
    },

    // 滚动处理
    handleScroll() {
      this.isScrolling = true
    },

    // 滚动停止处理
    handleScrollEnd() {
      this.isScrolling = false
    },

    // 返回上一级
    async goBack() {
      this.initLevel({
        level: this.oldLevel,
        levelId: this.oldLevelId
      })
      // 重新加载数据
      await this.loadPageData();
    }

  }
}</script>

<style lang="scss" scoped>
.eikon-statistics-container {
  padding: 20rpx;
}

// 固定选项卡样式
.h-tabs-fixed {
  padding: 22rpx 44rpx;
  position: fixed;
  top: 78rpx;
  left: 0;
  right: 0;
  z-index: 998;
  background: #ffffff;

}

// 固定顶部信息样式
.top-info-fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 998;
  background: #ffffff;

}

// 当h-tabs显示时，topInfo的top位置
.top-info-fixed.with-tabs {
  top: 160rpx;
}

// 当h-tabs不显示时，topInfo的top位置
.top-info-fixed.without-tabs {
  top: 78rpx;

}

// 总体概览和详细内容区域样式
.content-section {
  /* 为固定的h-tabs和topInfo预留空间 */
}

// 当h-tabs显示时，content-section的margin-top
.content-section.with-tabs {
  margin-top: 320rpx;
}

// 当h-tabs不显示时，content-section的margin-top
.content-section.without-tabs {
  margin-top: 210rpx;
}

.overview-section,
.detail-section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  text-align: left;
  margin-bottom: 24rpx;
}

.overview-content {
  display: flex;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.overview-item {
  text-align: center;
  flex: 1;
}

.overview-number {
  font-size: 48rpx;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 8rpx;
}

.overview-label {
  font-size: 24rpx;
  color: #666666;
}



.detail-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.detail-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}

.detail-time {
  font-size: 24rpx;
  color: #999999;
}

.detail-description {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.5;
}

/* 折叠面板内容样式 */
.collapse-content {
  padding: 20rpx;
}

.content-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.item-label {
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
  min-width: 120rpx;
  margin-right: 16rpx;
}

.item-value {
  font-size: 26rpx;
  color: #999999;
  flex: 1;
  line-height: 1.5;
}

/* 查获排名样式 */
.seize-ranking-section {
  margin-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.ranking-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.ranking-content {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12rpx 16rpx;
  background: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.rank-number {
  width: 40rpx;
  height: 40rpx;
  background: #4873E3;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 16rpx;
}

.rank-name {
  flex: 1;
  font-size: 26rpx;
  color: #333333;
  font-weight: 500;
}

.rank-count {
  font-size: 26rpx;
  color: #4873E3;
  font-weight: bold;
}

/* 查获排名进度条样式 */
.ranking-progress {
  margin-top: 20rpx;
  padding: 20rpx;
  background: #ffffff;
  border-radius: 12rpx;

  .progress-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
}

/* 学习成长样式 */
.learning-ranking-section {}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  z-index: 999;
  transition: transform 0.3s ease-in-out;
}

.back-button-hidden {
  transform: translateX(120rpx);
}

.back-circle {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #4873E3 0%, #6A8EE8 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(72, 115, 227, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;

}

.back-circle:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 12rpx rgba(72, 115, 227, 0.4);
}

.back-icon {
  margin-bottom: 8rpx;
}

.back-text {
  font-size: 20rpx;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20rpx;
  line-height: 1.2;
}
</style>