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 }"
      >
        <el-row class="item-content">
          <el-col :span="3" class="item-date">{{
            dayjsObj(item.created_at)
          }}</el-col>
          <el-col :span="3" class="item-city">
            {{ item | safeGet("residence.location.region_name", "-") }}
          </el-col>
          <el-col :span="7" class="project-info">
            <div class="project-name">
              {{ item | safeGet("residence.residence_name", "-") }}
            </div>
            <div class="company-name">
              {{ item | safeGet("service.customer.customer_name", "-") }}
            </div>
          </el-col>
          <el-col :span="11" class="project-stats">
            <el-row class="project-row">
              <el-col :span="3" class="stat-item" style="text-align: right">
                <span class="stat-value">{{
                  item | safeGet("residence_contracted_households", "-")
                }}</span>
                <span class="stat-label">户</span>
              </el-col>
              <el-col :span="4" class="stat-item">
                <span class="stat-value">{{
                  item | safeGet("service.liable_person.real_name", "-")
                }}</span>
              </el-col>
              <el-col :span="3" class="stat-item">
                <div class="progress-wrapper">
                  <span class="progress-text"
                    >{{ item | safeGet("service.perform_ratio", "-") }}%</span
                  >
                </div>
              </el-col>
              <el-col :span="10" class="stat-item service-item">
                <span class="service-content">{{
                  item | safeGet("service.work_template.display_name", "-")
                }}</span>
              </el-col>
              <el-col :span="4" class="stat-item">
                <span class="period text-overflow">{{ item.updated_at }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </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: Array,
        default: () => [],
      },
    },
    data() {
      return {}
    },
    computed: {
      ...mapState(["entCode", "communityId"]),
      optionScroll() {
        return {
          singleHeight: 68,
          waitTime: 5000
        }
      },
    },
    methods: {
      dayjsObj(date) {
        return dayjs(date).format("YYYY-MM-DD")
      },
    },
  }
</script>

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

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

  .implementing-title {
    background: var(--title-bg);
    font-size: halfW(14);
    color: var(--title-primary);
    padding: halfH(4) halfW(10);
    border-radius: var(--radius);
    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(10);
    .item-date {
      color: var(--title-secondary);
      font-size: halfW(14);
    }

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

    .project-info {
      flex: 1 1 0%;
      text-align: left;

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

      .company-name {
        color: var(--title-secondary);
        font-size: halfW(14);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

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

    .stat-item {
      // flex: 1 1 0%;
      display: flex;
      align-items: center;
      text-align: left;
      // width: halfW(50);
      &:first-child {
        .stat-value {
          color: var(--primary);
        }
      }
      .stat-value {
        color: #fff;
        font-size: halfW(14);
        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;
          width: halfW(35);
        }
      }

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

      .period {
        color: #a0b3d6;
        font-size: halfW(14);
        text-align: right;
      }
    }
    .service-item {
      min-width: halfW(100);
      .service-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>