pms-app/pages/ruiHengReport/index.vue

<template>
  <view class="report-page">
    <scroll-view class="report-scroll" scroll-y>
      <view v-if="loading" class="state-card">
        <text class="state-text">数据加载中...</text>
      </view>

      <view v-else-if="!dataList.length" class="state-card empty">
        <text class="state-text">当前日期暂无数据</text>
      </view>

      <view v-else class="report-list">
        <view
          v-for="item in sortedList"
          :key="item.projectDeptId"
          class="report-card"
        >
          <view class="card-header">
            <view>
              <view class="dept-name">{{ item.projectDeptName || "--" }}</view>
            </view>
            <view class="rate-badge" @click="openTeamDetail(item)">
              查看队伍明细
            </view>
          </view>

          <view class="metrics-grid">
            <view class="metric-item">
              <text class="metric-label">队伍总数</text>
              <text class="metric-value">{{
                formatNumber(item.teamCount)
              }}</text>
            </view>
            <view class="metric-item">
              <text class="metric-label">施工队伍</text>
              <text class="metric-value">{{
                formatNumber(item.sgTeamCount)
              }}</text>
            </view>
            <view class="metric-item">
              <text class="metric-label">施工准备</text>
              <text class="metric-value">{{
                formatNumber(item.zbTeamCount)
              }}</text>
            </view>
            <view class="metric-item">
              <text class="metric-label">待命</text>
              <text class="metric-value">{{
                formatNumber(item.dmTeamCount)
              }}</text>
            </view>
            <view class="metric-item">
              <text class="metric-label">当日运行时效</text>
              <text class="metric-value">{{
                formatPercent(item.hourUtilizationRate)
              }}</text>
            </view>
            <view class="metric-item">
              <text class="metric-label">平均运行时效</text>
              <text class="metric-value">{{
                formatPercent(item.yearHourUtilizationRate)
              }}</text>
            </view>
          </view>

          <view class="summary-panel">
            <view class="summary-row">
              <text class="summary-label">日注水量(万方)</text>
              <text class="summary-value">
                {{ formatDecimal(item.waterInjection) }}
              </text>
            </view>
            <view class="summary-row">
              <text class="summary-label">累计注水量(万方)</text>
              <text class="summary-value">
                {{ formatDecimal(item.yearWaterInjection) }}
              </text>
            </view>
            <view class="summary-row">
              <text class="summary-label">日注气量(万方)</text>
              <text class="summary-value">
                {{ formatDecimal(item.gasInjection) }}
              </text>
            </view>
            <view class="summary-row">
              <text class="summary-label">累计注气量(万方)</text>
              <text class="summary-value">
                {{ formatDecimal(item.yearGasInjection) }}
              </text>
            </view>
          </view>

          <view class="desc-panel">
            <view class="desc-title">生产动态概述</view>
            <text class="desc-text">
              {{ item.productionSummary || "暂无生产动态概述" }}
            </text>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="filter-bar">
      <view class="filter-main">
        <text class="filter-label">创建时间</text>

        <uni-datetime-picker
          v-model="selectedDate"
          class="date-picker"
          type="date"
          :teleport="true"
          return-type="string"
          :clear-icon="false"
          :border="false"
          @change="handleDateChange"
        />
      </view>
      <button
        class="filter-button"
        type="primary"
        size="mini"
        @click="loadList"
      >
        查询
      </button>
    </view>

    <uni-popup
      ref="teamDetailPopup"
      type="right"
      background-color="#fff"
      :is-mask-click="true"
    >
      <view class="team-drawer">
        <view class="team-drawer__header">
          <text class="team-drawer__title">
            {{ currentDetailTitle || "队伍明细" }}
          </text>
          <text class="team-drawer__close" @click="closeTeamDetail">关闭</text>
        </view>

        <view class="team-drawer__sub">
          统计日期：{{ selectedDate || "--" }}
        </view>

        <scroll-view class="team-drawer__scroll" scroll-y>
          <view v-if="teamDetailLoading" class="team-state-card">
            <text class="team-state-text">数据加载中...</text>
          </view>

          <view
            v-else-if="!teamDetailList.length"
            class="team-state-card empty"
          >
            <text class="team-state-text">暂无队伍明细</text>
          </view>

          <view v-else class="team-detail-list">
            <view
              v-for="(team, index) in teamDetailList"
              :key="team.teamName || index"
              class="team-detail-card"
            >
              <view class="team-detail-card__title">
                {{ team.teamName || "--" }}
              </view>

              <view class="team-detail-grid">
                <view class="team-detail-item">
                  <text class="team-detail-label">累计天数</text>
                  <text class="team-detail-value">{{
                    formatNumber(team.cumulativeDays)
                  }}</text>
                </view>
                <view class="team-detail-item">
                  <text class="team-detail-label">施工天数</text>
                  <text class="team-detail-value">{{
                    formatNumber(team.constructionDays)
                  }}</text>
                </view>
                <view class="team-detail-item team-detail-item--full">
                  <text class="team-detail-label">设备利用率</text>
                  <text class="team-detail-value">{{
                    formatPercent(team.utilizationRate)
                  }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onMounted } from "vue";
import dayjs from "dayjs";
import { getRhRate, getRhTeamDetail } from "@/api/ruiHengReport";

const selectedDate = ref(dayjs().subtract(1, "day").format("YYYY-MM-DD"));
const dataList = ref([]);
const loading = ref(false);
const teamDetailPopup = ref(null);
const teamDetailLoading = ref(false);
const teamDetailList = ref([]);
const currentDetailTitle = ref("");

const buildQueryParams = () => {
  const baseDate = selectedDate.value
    ? dayjs(selectedDate.value)
    : dayjs().subtract(1, "day");

  return {
    createTime: [
      baseDate.startOf("day").format("YYYY-MM-DD HH:mm:ss"),
      baseDate.endOf("day").format("YYYY-MM-DD HH:mm:ss"),
    ],
  };
};

const sortedList = computed(() =>
  [...dataList.value].sort((a, b) => (a.sort ?? 999999) - (b.sort ?? 999999)),
);

const loadList = async () => {
  loading.value = true;
  try {
    const response = await getRhRate(buildQueryParams());
    dataList.value = Array.isArray(response?.data) ? response.data : [];
  } catch (error) {
    dataList.value = [];
    uni.showToast({
      title: "数据加载失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

const handleDateChange = () => {
  loadList();
};

const openTeamDetail = async (item) => {
  currentDetailTitle.value = `${item.projectDeptName || "--"} 队伍明细`;
  teamDetailList.value = [];
  teamDetailLoading.value = true;
  teamDetailPopup.value?.open();

  try {
    const response = await getRhTeamDetail({
      deptId: item.projectDeptId,
      createTime: buildQueryParams().createTime,
    });
    teamDetailList.value = Array.isArray(response?.data) ? response.data : [];
  } catch (error) {
    teamDetailList.value = [];
    uni.showToast({
      title: "队伍明细加载失败",
      icon: "none",
    });
  } finally {
    teamDetailLoading.value = false;
  }
};

const closeTeamDetail = () => {
  teamDetailPopup.value?.close();
};

const formatNumber = (value) => {
  if (value === null || value === undefined || value === "") return "--";
  return value;
};

const formatDecimal = (value) => {
  if (value === null || value === undefined || value === "") return "--";
  return Number(value).toFixed(2);
};

const formatPercent = (value) => {
  if (value === null || value === undefined || value === "") return "--";
  return `${(Number(value) * 100).toFixed(2)}%`;
};

onMounted(() => {
  loadList();
});
</script>

<style lang="scss" scoped>
.report-page {
  max-height: 100vh;
  padding: 12px;
  box-sizing: border-box;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(25, 56, 104, 0.08);
  backdrop-filter: blur(10px);
}

.filter-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;
}

.filter-label {
  display: block;
  margin-bottom: 8px;
  color: #5f6f87;
  font-size: 12px;
  letter-spacing: 1px;
}

.date-picker {
  padding: 0 12px;
  border: 1px solid rgba(0, 64, 152, 0.1);
  border-radius: 12px;
  background: #f8fbff;
}

.filter-button {
  width: 76px;
  height: 38px;
  line-height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #004098 0%, #1f68d8 100%);
  font-size: 14px;
}

.filter-tip {
  margin: 10px 4px 0;
  color: #6d7c91;
  font-size: 12px;
}

.report-scroll {
  height: calc(100vh - 140px);
  padding-top: 12px;
  box-sizing: border-box;
}

.report-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 18px;
}

.report-card {
  padding: 16px;
  border: 1px solid rgba(0, 64, 152, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(31, 57, 90, 0.08);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dept-name {
  color: #122033;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

.dept-meta {
  margin-top: 4px;
  color: #7f8ca0;
  font-size: 12px;
}

.rate-badge {
  flex-shrink: 0;
  min-width: 84px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e6f0ff 0%, #d8e7ff 100%);
  color: #004098;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.metric-item {
  padding: 12px;
  border-radius: 14px;
  background: #f6f9fd;
}

.metric-label {
  display: block;
  color: #6e7e95;
  font-size: 12px;
}

.metric-value {
  display: block;
  margin-top: 6px;
  color: #18273b;
  font-size: 20px;
  font-weight: 700;
}

.summary-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 14px 0;
  border-top: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.summary-label {
  color: #6d7c91;
  font-size: 12px;
}

.summary-value {
  color: #17253a;
  font-size: 13px;
  font-weight: 600;
}

.desc-panel {
  padding-top: 14px;
}

.desc-title {
  margin-bottom: 8px;
  color: #1f2f46;
  font-size: 14px;
  font-weight: 700;
}

.desc-text {
  color: #5f6f87;
  font-size: 13px;
  line-height: 22px;
  white-space: pre-wrap;
}

.state-card {
  margin-top: 18px;
  padding: 40px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  box-shadow: 0 12px 28px rgba(30, 54, 88, 0.06);
}

.state-card.empty {
  border: 1px dashed rgba(0, 64, 152, 0.16);
}

.state-text {
  color: #73839a;
  font-size: 14px;
}

.team-drawer {
  width: 82vw;
  max-width: 620rpx;
  height: 100vh;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  display: flex;
  flex-direction: column;
}

.team-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.team-drawer__title {
  min-width: 0;
  color: #122033;
  font-size: 18px;
  font-weight: 700;
}

.team-drawer__close {
  flex-shrink: 0;
  color: #004098;
  font-size: 14px;
  font-weight: 600;
}

.team-drawer__sub {
  margin-top: 8px;
  margin-bottom: 14px;
  color: #70819a;
  font-size: 12px;
}

.team-drawer__scroll {
  flex: 1;
  min-height: 0;
  padding-bottom: 50rpx;
}

.team-detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 10px;
}

.team-detail-card {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(31, 57, 90, 0.08);
}

.team-detail-card__title {
  margin-bottom: 12px;
  color: #18273b;
  font-size: 16px;
  font-weight: 700;
}

.team-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.team-detail-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fd;
}

.team-detail-item--full {
  grid-column: 1 / -1;
}

.team-detail-label {
  display: block;
  color: #6e7e95;
  font-size: 12px;
}

.team-detail-value {
  display: block;
  margin-top: 6px;
  color: #18273b;
  font-size: 18px;
  font-weight: 700;
}

.team-state-card {
  margin-top: 8px;
  padding: 36px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  box-shadow: 0 12px 28px rgba(30, 54, 88, 0.06);
}

.team-state-card.empty {
  border: 1px dashed rgba(0, 64, 152, 0.16);
}

.team-state-text {
  color: #73839a;
  font-size: 14px;
}
</style>