xujiecloud-vue/src/views/modules/eam/dashBoard.vue

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card @click.native="navigateToMes('unfinishedProjects',counts)" class="card-item">
          <div class="card-title">我参与的未结项目</div>
          <div class="card-count">{{ counts.unfinishedProjectsCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card @click.native="navigateToMes('pendingUploads',counts)" class="card-item">
          <div class="card-title">待上传文件</div>
          <div class="card-count">{{ counts.pendingUploadsCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card @click.native="navigateToMes('pendingConfirmations',counts)" class="card-item">
          <div class="card-title">待生产确认的项目</div>
          <div class="card-count">{{ counts.pendingConfirmationsCount }}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :span="6">
        <el-card @click.native="navigateToMes('allProjects',counts)" class="card-item">
          <div class="card-title">我参与的所有项目</div>
          <div class="card-count">{{ counts.allProjectsCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card @click.native="navigateToMes('overdueUploads',counts)" class="card-item">
          <div class="card-title">逾期的待上传文件</div>
          <div class="card-count">{{ counts.overdueUploadsCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card @click.native="navigateToMes('overdueConfirmations',counts)" class="card-item">
          <div class="card-title">逾期的待生产确认的项目</div>
          <div class="card-count">{{ counts.overdueConfirmationsCount }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { agencyMatter } from "../../../api/eam/eamProject";

export default {
  data() {
    return {
      counts: {
        unfinishedProjectsCount: 0,
        allProjectsCount: 0,
        pendingUploadsCount: 0,
        overdueUploadsCount: 0,
        pendingConfirmationsCount: 0,
        overdueConfirmationsCount: 0,
        unfinishedProjects: [],
        allProjects: [],
        pendingUploads: [],
        overdueUploads: [],
        pendingConfirmations: [],
        overdueConfirmations: [],
      },
      intervalId: null,
    };
  },
  created() {
    this.fetchCounts();
    this.startAutoRefresh();
  },
  beforeDestroy() {
    this.stopAutoRefresh();
  },
  methods: {
    fetchCounts() {
      agencyMatter()
        .then(({ data }) => {
          this.counts = data;
          this.counts.unfinishedProjectsCount = this.counts.unfinishedProjects.length;
          this.counts.allProjectsCount = this.counts.allProjects.length;
          this.counts.pendingUploadsCount = this.counts.pendingUploads.length;
          this.counts.overdueUploadsCount = this.counts.overdueUploads.length;
          this.counts.pendingConfirmationsCount = this.counts.pendingConfirmations.length;
          this.counts.overdueConfirmationsCount = this.counts.overdueConfirmations.length;
        })
        .catch((error) => {
          console.error("Error fetching project counts:", error);
        });
    },
    navigateToMes(path, row) {
      let projectIds = '';
      if (path === 'unfinishedProjects') {
        for (let i = 0; i < row.unfinishedProjects.length; i++) {
          // 使用逗号拼接 unfinishedProjects.projectId，如果是最后一个则不加逗号
          projectIds += row.unfinishedProjects[i].projectId + (i === row.unfinishedProjects.length - 1 ? '' : ',');
        }
        this.$router.push({ path: 'eam-eamProjectInfo', query: { projectId: projectIds } });
      }
      else if (path === 'allProjects') {
        for (let i = 0; i < row.allProjects.length; i++) {
          projectIds += row.allProjects[i].projectId + (i === row.allProjects.length - 1 ? '' : ',');
        }
        this.$router.push({ path: 'eam-eamProjectInfo', query: { projectId: projectIds } });
      }
      else if (path === 'pendingUploads') {
        for (let i = 0; i < row.pendingUploads.length; i++) {
          projectIds += row.pendingUploads[i].projectId + (i === row.pendingUploads.length - 1 ? '' : ',');
        }
        this.$router.push({ name: 'eam-eamProjectInfoForUploads', query: { projectId: projectIds,flag:'1' } });
      }
      else if (path === 'overdueUploads') {
        for (let i = 0; i < row.overdueUploads.length; i++) {
          projectIds += row.overdueUploads[i].projectId + (i === row.overdueUploads.length - 1 ? '' : ',');
        }
        this.$router.push({ path: 'eam-eamProjectInfoForUploads', query: { projectId: projectIds,flag:'2' } });
      }
      else if (path === 'pendingConfirmations') {
        for (let i = 0; i < row.pendingConfirmations.length; i++) {
          projectIds += row.pendingConfirmations[i].projectId + (i === row.pendingConfirmations.length - 1 ? '' : ',');
        }
        this.$router.push({ path: 'eam-eamProjectInfoForConfirm', query: { projectId: projectIds,flag:'3' } });
      }
      else if (path === 'overdueConfirmations') {
        for (let i = 0; i < row.overdueConfirmations.length; i++) {
          projectIds += row.overdueConfirmations[i].projectId + (i === row.overdueConfirmations.length - 1 ? '' : ',');
        }
        this.$router.push({ path: 'eam-eamProjectInfoForConfirm', query: { projectId: projectIds,flag:'4' } });
      }
    },
    startAutoRefresh() {
      this.intervalId = setInterval(() => {
        this.fetchCounts();
      }, 20000); // 每20秒刷新一次
    },
    stopAutoRefresh() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
  },
};
</script>

<style scoped>
.card-item {
  cursor: pointer;
  margin-bottom: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
  //padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 208px;
  width: 230px;
  margin-left: 40px;
  margin-top: 10px;
}

.card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 20px;
}

.card-count {
  font-size: 55px;
  color: #17B3A3;
  text-align: center;
  font-weight: bold;
  margin-top: 50px;
}

.project-list {
  font-size: 12px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 5px;
}

.el-divider {
  margin: 10px 0;
}
</style>