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>
    <vueSeamless
      :data="data"
      :class-option="optionScroll"
      class="implementing-list"
    >
      <div
        v-for="(item, index) in data"
        :key="index"
        class="implementing-item"
        :class="{ 'even-item': index % 2 === 1 }"
      >
        <div class="item-content">
          <div class="item-date">{{ dayjs(item.created_at).format("YYYY-MM-DD") }}</div>
          <div class="item-city">{{ item.residence.location.region_name }}</div>
          <div class="project-info">
            <div class="project-name">{{ item.residence.residence_name }}</div>
            <div class="company-name">{{ item.service.customer.customer_name }}</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.service.liable_person.real_name }}</span>
            </div>
            <div class="stat-item">
              <div class="progress-wrapper">
                <span class="progress-text">{{ item.service.perform_ratio }}%</span>
              </div>
            </div>
            <div class="stat-item service-item">
              <span class="service-content">{{ item.service.work_template.display_name }}</span>
            </div>
            <div class="stat-item">
              <span class="period">{{ item.updated_at }}</span>
            </div>
          </div>
        </div>
      </div>
    </vueSeamless>
  </div>
</template>

<script>
  import dayjs from "dayjs"
  import { mapState } from "vuex"
  import vueSeamless from "vue-seamless-scroll"

  export default {
    name: "ImplementingServices",
    components: {
      vueSeamless,
    },
    props: {
      data: {
        type: Object,
        default: () => ([]),
      },
    },
    data() {
      return {
      }
    },
    computed: {
      ...mapState(["entCode", "communityId"]),
      optionScroll() {
        return {
          step: 0.5,
        }
      },
    },
    methods: {
    },
  }
</script>

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

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

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

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

  .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: halfW(16);
    .item-date {
      color: var(--title-secondary);
      font-size: halfW(14);
      margin-right: halfW(16);
    }

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

    .project-info {
      flex: 1;
      min-width: halfW(200);
      margin-right: halfW(20);

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

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

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

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

      .stat-label {
        color: #fff;
        font-size: halfW(14);
      }

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

      .service-content {
        color: #ffffff;
        font-size: halfW(14);
      }

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