SaaS-DataScreen/src/views/hui-jia/components/implementary/ing.vue

<template>
  <div class="implementing-container">
    <div class="implementing-title">
      <img src="@/assets/images/nz.png" class="title-icon" />
      进行中的实施服务
    </div>
    <div class="implementing-list">
      <div
        v-for="(item, index) in implementingList"
        :key="index"
        class="implementing-item"
        :class="{ 'even-item': index % 2 === 1 }"
      >
        <div class="item-content">
          <div class="item-date">{{ item.date }}</div>
          <div class="item-city">{{ item.city }}</div>
          <div class="project-info">
            <div class="project-name">{{ item.projectName }}</div>
            <div class="company-name">{{ item.companyName }}</div>
          </div>
          <div class="project-stats">
            <div class="stat-item">
              <span class="stat-value">{{ item.householdCount }}</span>
              <span class="stat-label">户</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ item.area }}</span>
            </div>
            <div class="stat-item">
              <div class="progress-wrapper">
                <span class="progress-text">{{ item.progress }}%</span>
              </div>
            </div>
            <div class="stat-item service-item">
              <span class="service-content">{{ item.serviceContent }}</span>
            </div>
            <div class="stat-item">
              <span class="period">{{ item.period }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex"
  import { api } from "@/api"

  export default {
    name: "ImplementingServices",
    data() {
      return {
        implementingList: [],
        timer: null,
      }
    },
    computed: {
      ...mapState(["entCode", "communityId"]),
    },
    mounted() {
      this.init()
      // 设置定时刷新
      this.timer = setInterval(() => {
        this.init()
      }, 30000) // 每30秒刷新一次
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    methods: {
      // 初始化数据
      async init() {
        try {
          const params = {
            entCode: this.entCode,
            communityId: this.communityId,
          }
          // 这里应该调用实际的API获取数据
          // const res = await api.getImplementingServices(params)
          // this.implementingList = res.data || []

          // 暂时使用模拟数据
          this.loadMockData()
        } catch (error) {
          console.error("获取进行中实施服务数据失败:", error)
        }
      },
      // 加载模拟数据
      loadMockData() {
        this.implementingList = [
          {
            date: "2025-11-19",
            city: "五指山市",
            projectName: "项目名称",
            companyName: "物业公司名称",
            householdCount: "999",
            area: "北滨端",
            progress: 90,
            serviceContent: "数据清单模板填写培训",
            period: "3周前",
          },
          {
            date: "2025-11-19",
            city: "五指山市",
            projectName: "项目名称",
            companyName: "物业公司名称",
            householdCount: "999",
            area: "北滨端",
            progress: 90,
            serviceContent: "数据清单模板填写培训",
            period: "3周前",
          },
          {
            date: "2025-11-19",
            city: "五指山市",
            projectName: "项目名称",
            companyName: "物业公司名称",
            householdCount: "999",
            area: "北滨端",
            progress: 90,
            serviceContent: "数据清单模板填写培训",
            period: "3周前",
          },
          {
            date: "2025-11-19",
            city: "五指山市",
            projectName: "项目名称",
            companyName: "物业公司名称",
            householdCount: "999",
            area: "北滨端",
            progress: 90,
            serviceContent: "数据清单模板填写培训",
            period: "3周前",
          },
          {
            date: "2025-11-19",
            city: "五指山市",
            projectName: "项目名称",
            companyName: "物业公司名称",
            householdCount: "999",
            area: "北滨端",
            progress: 90,
            serviceContent: "数据清单模板填写培训",
            period: "3周前",
          },
          {
            date: "2025-11-19",
            city: "五指山市",
            projectName: "项目名称",
            companyName: "物业公司名称",
            householdCount: "999",
            area: "北滨端",
            progress: 90,
            serviceContent: "数据清单模板填写培训",
            period: "3周前",
          },
        ]
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  .implementing-container {
    background: var(--content-bg);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
  }

  .implementing-title {
    background: var(--title-bg);
    font-size: 18px;
    font-weight: 500;
    color: var(--title-primary);
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
  }

  .implementing-list {
    flex: 1;
    overflow-y: auto;
    padding: 0px 10px;
    height: calc(100% - 36px);
  }

  .implementing-item {
    background: var(--content-bg); // 第一个项目使用--content-bg
    padding: 16px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  // 偶数项使用--title-bg作为背景色
  .implementing-item.even-item {
    background: var(--title-bg);
  }
  .item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    .item-date {
      color: var(--title-secondary);
      font-size: 14px;
      margin-right: 16px;
    }

    .item-city {
      color: var(--title-primary);
      font-size: 14px;
      font-weight: 500;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .project-info {
      flex: 1;
      min-width: 200px;
      margin-right: 20px;

      .project-name {
        flex: 0 0 1;
        color: var(--title-primary);
        font-size: 14px;
        margin-bottom: 4px;
        font-weight: 400;
      }

      .company-name {
        color: var(--title-secondary);
        font-size: 14px;
      }
    }

    .project-stats {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
    }

    .stat-item {
      display: flex;
      align-items: center;
      &:first-child {
        .stat-value {
          color: var(--primary);
        }
      }
      .stat-value {
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        margin-right: 4px;
      }

      .stat-label {
        color: #fff;
        font-size: 14px;
      }

      .progress-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        .progress-text {
          color: #40d9ac;
          font-size: 14px;
          font-weight: 500;
          min-width: 35px;
        }
      }

      .service-content {
        color: #ffffff;
        font-size: 14px;
      }

      .period {
        color: #a0b3d6;
        font-size: 14px;
      }
    }
    .service-item {
      flex: 1;
    }
  }
</style>