shenze-sysMan/src/views/device/maintenance/index.vue

<template>
  <div class="maintenance-page">
    <!-- 顶部导航栏 -->
    <s-header :name="$t('maintenance.title')" :noback="false"></s-header>

    <div class="content-container">
      <!-- 设备信息卡片 -->
      <div class="device-card" v-if="name">
        <div class="device-header">
          <div class="header-indicator"></div>
          <h3 class="device-name">
            {{ $t("device.equipmentName") }}：{{ name }}
          </h3>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="stats-card">
        <div class="stats-content">
          <div class="stats-icon-box">
            <van-icon name="completed" class="stats-icon" />
          </div>
          <div class="stats-text">
            <div class="stats-title">{{ $t("maintenance.title") }}</div>
            <div class="stats-info">
              <span class="stats-number">{{ total }}</span>
            </div>
          </div>
          <div class="action-buttons">
            <van-icon
              name="filter-o"
              class="action-icon"
              @click="showFilter = true"
            />
          </div>
        </div>
      </div>

      <!-- 维护记录列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="$t('public.noMore')"
        @load="onLoad"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="maintenance-item"
          @click="showDetail(item)"
        >
          <div class="item-header">
            <div class="device-id">
              <van-icon name="setting" /> {{ item.clientId }}
            </div>
            <div class="status-tag" :class="statusClass(item.status)">
              {{ getStatusText(item.status) }}
            </div>
          </div>

          <div class="item-content">
            <div class="staff-info">
              <van-icon name="manager-o" />
              <span>{{ item.name }} ({{ item.managerId }})</span>
            </div>
            <div class="type-info">
              <van-icon name="label-o" />
              <span>{{ formatMaintenanceTypes(item.type) }}</span>
            </div>
            <div class="time-range">
              <span class="start-time">{{
                formatDateTime(item.startTime)
              }}</span>
              <van-icon name="arrow" />
              <span class="end-time">{{ formatDateTime(item.endTime) }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 筛选弹窗 -->
    <van-popup v-model:show="showFilter" position="right" class="filter-popup">
      <div class="popup-header">
        <h3>{{ $t("maintenance.filter.title") }}</h3>
        <van-icon name="cross" @click="showFilter = false" />
      </div>

      <div class="filter-content">
        <!-- 设备编号 -->
        <div class="filter-item">
          <label>{{ $t("device.equipmentCodeLabel") }}</label>
          <van-field
            v-if="user.type < 2"
            v-model="filterParams.clientId"
            clearable
            :placeholder="$t('device.equipmentCodePlaceholder')"
          />
          <van-field
            v-else
            v-model="filterParams.clientId"
            is-link
            readonly
            :placeholder="$t('device.equipmentCodePlaceholder')"
            @click="showDevicePicker = true"
          />
          <van-popup
            v-model:show="showDevicePicker"
            destroy-on-close
            position="bottom"
          >
            <van-picker
              :columns="deviceColumns"
              @confirm="onDeviceConfirm"
              @cancel="showDevicePicker = false"
            />
          </van-popup>
        </div>

        <!-- 维护人员 -->
        <div class="filter-item">
          <label>{{ $t("maintenance.filter.staffId") }}</label>
          <van-field
            v-model="filterParams.managerId"
            :placeholder="$t('maintenance.filter.staffIdPlaceholder')"
            clearable
          />
        </div>

        <!-- 维护状态 -->
        <div class="filter-item">
          <label>{{ $t("maintenance.filter.status") }}</label>
          <van-radio-group v-model="filterParams.status">
            <van-cell-group>
              <van-cell
                v-for="status in statusOptions"
                :key="status.value"
                :title="status.label"
                clickable
                @click="filterParams.status = status.value"
              >
                <template #right-icon>
                  <van-radio :name="status.value" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>

        <!-- 时间范围 -->
        <div class="filter-item">
          <label>{{ $t("maintenance.filter.dateRange") }}</label>
          <div class="date-range">
            <van-field
              v-model="filterParams.startDate"
              :placeholder="$t('maintenance.filter.startDatePlaceholder')"
              readonly
              @click="showStartPicker = true"
            />
            <span class="date-separator">~</span>
            <van-field
              v-model="filterParams.endDate"
              :placeholder="$t('maintenance.filter.endDatePlaceholder')"
              readonly
              @click="showEndPicker = true"
            />
          </div>
        </div>
      </div>

      <div class="popup-footer">
        <van-button type="default" @click="resetFilter">{{
          $t("maintenance.filter.reset")
        }}</van-button>
        <van-button type="primary" @click="applyFilter">{{
          $t("maintenance.filter.apply")
        }}</van-button>
      </div>
    </van-popup>

    <!-- 时间选择器 -->
    <van-popup v-model:show="showStartPicker" position="bottom">
      <van-date-picker
        :columns-type="columnsType"
        v-model="startDate"
        @confirm="handleStartConfirm"
        @cancel="showStartPicker = false"
      />
    </van-popup>
    <van-popup v-model:show="showEndPicker" position="bottom">
      <van-date-picker
        :columns-type="columnsType"
        v-model="endDate"
        @confirm="handleEndConfirm"
        @cancel="showEndPicker = false"
      />
    </van-popup>

    <!-- 详情弹窗 -->
    <van-popup
      v-model:show="showDetailPopup"
      position="bottom"
      :style="{ height: '85%' }"
      class="detail-popup"
    >
      <div class="detail-content" v-if="selectedItem">
        <div class="detail-header">
          <h3>{{ $t("maintenance.detail.title") }}</h3>
          <div class="device-id">{{ selectedItem.clientId }}</div>
        </div>

        <div class="detail-body">
          <div class="detail-row">
            <label>{{ $t("maintenance.detail.staff") }}</label>
            <div>{{ selectedItem.name }} ({{ selectedItem.managerId }})</div>
          </div>

          <div class="detail-row">
            <label>{{ $t("maintenance.detail.type") }}</label>
            <div class="maintenance-type-tags">
              <van-tag
                v-for="(type, index) in JSON.parse(selectedItem.type)"
                :key="index"
                plain
                type="primary"
              >
                {{ getMaintenanceTypeLabel(type) }}
              </van-tag>
            </div>
          </div>

          <div class="detail-row">
            <label>{{ $t("maintenance.detail.startTime") }}</label>
            <div>{{ formatDateTime(selectedItem.startTime) }}</div>
          </div>

          <div class="detail-row">
            <label>{{ $t("maintenance.detail.endTime") }}</label>
            <div>{{ formatDateTime(selectedItem.endTime) }}</div>
          </div>

          <div class="detail-row">
            <label>{{ $t("maintenance.detail.recordTime") }}</label>
            <div>{{ formatDateTime(selectedItem.createDate) }}</div>
          </div>

          <div class="detail-row">
            <label>{{ $t("maintenance.detail.consumables") }}</label>
            <div>
              {{
                selectedItem.consumables ||
                $t("maintenance.detail.noConsumables")
              }}
            </div>
          </div>

          <div class="detail-section">
            <h4>{{ $t("maintenance.detail.faultDescription") }}</h4>
            <div class="detail-text">
              {{
                selectedItem.description ||
                $t("maintenance.detail.noFaultDescription")
              }}
            </div>
          </div>

          <div class="detail-section">
            <h4>{{ $t("maintenance.detail.solution") }}</h4>
            <div class="detail-text">
              {{ selectedItem.solution || $t("maintenance.detail.noSolution") }}
            </div>
          </div>

          <div
            class="image-section"
            v-if="selectedItem.pic && JSON.parse(selectedItem.pic).length > 0"
          >
            <h4>{{ $t("maintenance.detail.images") }}</h4>
            <div class="image-grid">
              <van-uploader
                v-model="fileList"
                multiple
                :show-upload="false"
                :deletable="false"
              />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import sHeader from "@/components/SimpleHeader";
import { useRoute } from "vue-router";
import { list } from "@/service/maintenance";
import { showFailToast } from "vant";
import { getEquipmentList } from "@/service/typeSelectList";
import { getLoginUser } from "@/common/js/utils";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";

export default {
  components: {
    sHeader,
  },

  setup() {
    const { t } = useI18n();

    const route = useRoute();
    // 定义状态和响应式数据
    const state = reactive({
      deviceDetail: null,
      loading: false,
      finished: false,
      name: route.query.name
        ? route.query.name
        : route.query.clientId.slice(-6),
      list: [],
      total: 0,
      selectedItem: null,
      showFilter: false,
      showDetailPopup: false,
      showDevicePicker: false,
      showStartPicker: false,
      showEndPicker: false,
      startDate: [
        new Date().getFullYear(),
        new Date().getMonth() + 1,
        new Date().getDate(),
      ],
      endDate: [
        new Date().getFullYear(),
        new Date().getMonth() + 1,
        new Date().getDate(),
      ],
      filterParams: {
        managerId: "", // 维护人员工号
        clientId: route.query.clientId, // 设备编号
        adminId: null,
        status: "", // 问题解决状态
        name: "", // 维护人员姓名
        startDate: "",
        endDate: "",
        current: 0, // 页数
        size: 10, // 页大小
      },
      maintenanceTypeMap: {
        1: t("maintenance.type.cleaning"),
        2: t("maintenance.type.refill"),
        3: t("maintenance.type.repair"),
      },
      fileList: [],
      deviceColumns: [],
      user: getLoginUser(),
    });

    // 状态选项
    const statusOptions = [
    { value: "", label: t('maintenance.status.all') },
      { value: 1, label: t('maintenance.status.resolved') },
      { value: 2, label: t('maintenance.status.unresolved') },
    ];

    const columnsType = ["year", "month", "day"];

    // 方法
    const methods = {
      onLoad() {
        if (!state.finished) {
          state.filterParams.current = state.filterParams.current + 1;
          getListFun();
        }
      },

      showDetail(item) {
        state.selectedItem = item;
        state.fileList = [];
        if (item.pic && JSON.parse(item.pic).length > 0) {
          JSON.parse(item.pic).forEach((img) => {
            state.fileList.push({ url: img });
          });
        }
        state.showDetailPopup = true;
      },

      handleStartConfirm({ selectedValues }) {
        state.filterParams.startDate = selectedValues.join("/");
        state.showStartPicker = false;
      },

      handleEndConfirm({ selectedValues }) {
        state.filterParams.endDate = selectedValues.join("/");
        state.showEndPicker = false;
      },

      resetFilter() {
        state.filterParams = {
          clientId: "",
          managerId: "",
          status: "",
          startDate: "",
          endDate: "",
          current: 0,
          size: 10,
        };
      },

      applyFilter() {
        state.showFilter = false;
        state.list = [];
        state.filterParams.current = 1;
        getListFun();
      },

      getMaintenanceTypeLabel(type) {
        return state.maintenanceTypeMap[type] || type;
      },

      formatMaintenanceTypes(types) {
        types = JSON.parse(types);
        return types
          .map((type) => methods.getMaintenanceTypeLabel(type))
          .join("、");
      },

      onDeviceConfirm({ selectedValues, selectedOptions }) {
        state.name = selectedOptions[0].text;
        state.filterParams.clientId = selectedValues[0];
        state.showDevicePicker = false;
      },

      formatDateTime(dateString) {
        if (!dateString) return "";
        const date = new Date(dateString);
        return date.toLocaleString();
      },

      statusClass(status) {
        return {
          "status-completed": status === 1,
          "status-pending": status === 2,
        };
      },

      getStatusText(status) {
        switch (status) {
          case 1:
            return t('maintenance.status.resolved');
          case 2:
            return t('maintenance.status.unresolved');
          default:
            return t('maintenance.status.unknown');
        }
      },
    };

    onMounted(() => {
      state.filterParams.adminId = state.user.type > 1 ? state.user.id : null;
      getDeviceListFun();
    });

    // 获取设备列表
    const getDeviceListFun = async () => {
      const { data } = await getEquipmentList({ adminId: state.user.id });
      if (data.code === "00000") {
        state.deviceColumns = data.data.map((item) => {
          return {
            text: item.name != null ? item.name : item.clientId,
            value: item.clientId,
          };
        });
        state.deviceColumns.unshift({
          text: t("typeSelectList.allDevices"),
          value: "",
        });
      }
    };

    // 获取维护记录
    const getListFun = async () => {
      state.finished = false;
      const { data } = await list(state.filterParams);
      if (data.code === "00000") {
        state.list = state.list.concat(data.data.records);
        state.total = data.data.total;
        if (state.list.length === data.data.total) {
          state.finished = true;
        }
        state.loading = false;
      } else {
        showFailToast(data.message);
      }
    };

    // 返回所有状态和方法
    return {
      ...toRefs(state),
      statusOptions,
      columnsType,
      ...methods,
    };
  },
};
</script>

<style lang="less" scoped>
.maintenance-page {
  background: #f5f7fa;
  min-height: 100vh;

  .content-container {
    background: #f5f6fa;
    height: calc(100% - 50px);
    overflow: auto;
    overflow-x: hidden;
  }

  .device-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    margin: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .device-header {
      display: flex;
      align-items: center;

      .header-indicator {
        width: 3px;
        height: 16px;
        background: #4e6bdd;
        border-radius: 2px;
        margin-right: 8px;
      }

      .device-name {
        margin: 0;
        font-size: 15px;
        color: #404d74;
        font-weight: 550;
      }
    }
  }

  .stats-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    margin: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .stats-content {
      display: flex;
      align-items: center;

      .stats-icon-box {
        width: 48px;
        height: 48px;
        background: #e6f0ff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;

        .stats-icon {
          font-size: 24px;
          color: #4e6bdd;
        }
      }

      .stats-text {
        flex: 1;

        .stats-title {
          font-size: 14px;
          color: #666;
          margin-bottom: 4px;
        }

        .stats-info {
          .stats-number {
            font-size: 22px;
            font-weight: 600;
            color: #4e6bdd;
          }

          .stats-unit {
            font-size: 14px;
            color: #999;
          }
        }
      }

      .action-buttons {
        display: flex;

        .action-icon {
          width: 36px;
          height: 36px;
          background: #e6f0ff;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 8px;
          font-size: 18px;
          color: #4e6bdd;
        }
      }
    }
  }

  .maintenance-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 14px;
    margin: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f5f7fa;

      .device-id {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: #333;

        .van-icon {
          margin-right: 6px;
          color: #4e6bdd;
        }
      }

      .status-tag {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;

        &.status-completed {
          background: #e8f5e9;
          color: #4caf50;
        }

        &.status-pending {
          background: #ffebee;
          color: #f44336;
        }
      }
    }

    .item-content {
      .staff-info,
      .type-info {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-size: 14px;
        color: #666;

        .van-icon {
          margin-right: 6px;
          color: #999;
        }
      }

      .time-range {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        color: #888;
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px dashed #eee;

        .start-time,
        .end-time {
          flex: 1;
        }

        .van-icon {
          color: #ccc;
        }
      }
    }
  }

  .no-data {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 8px;

    p {
      margin-top: 15px;
      font-size: 15px;
      color: #999;
    }
  }

  .filter-popup {
    width: 85%;
    height: 100%;
    background: #f5f7fa;

    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px;
      background: #fff;
      border-bottom: 1px solid #eee;

      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
      }

      .van-icon {
        font-size: 20px;
        color: #999;
      }
    }

    .filter-content {
      padding: 15px;
      overflow-y: auto;

      .filter-item {
        margin-bottom: 20px;

        label {
          display: block;
          margin-bottom: 8px;
          font-size: 14px;
          font-weight: 500;
          color: #333;
        }

        .date-range {
          display: flex;
          align-items: center;

          .van-field {
            flex: 1;
          }

          .date-separator {
            padding: 0 10px;
            color: #999;
          }
        }
      }
    }

    .popup-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 15px;
      background: #fff;
      border-top: 1px solid #eee;

      .van-button {
        flex: 1;
        margin: 0 5px;
      }
    }
  }

  .detail-popup {
    background: #f5f7fa;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;

    .detail-content {
      .detail-header {
        padding: 20px 15px;
        background: linear-gradient(135deg, #4e6bdd, #3a56c0);
        color: white;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;

        h3 {
          margin: 0 0 5px 0;
          font-size: 18px;
        }

        .device-id {
          font-size: 14px;
          opacity: 0.9;
        }
      }

      .detail-body {
        padding: 15px;
        height: calc(80vh - 80px);
        overflow-y: auto;
        overflow-x: hidden;

        .detail-row {
          padding: 12px;
          background: #fff;
          border-radius: 8px;
          margin-bottom: 10px;

          label {
            display: block;
            font-size: 13px;
            color: #999;
            margin-bottom: 5px;
          }

          div {
            font-size: 15px;
            color: #333;
            font-weight: 500;
          }

          .maintenance-type-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 5px;
          }
        }

        .detail-section {
          background: #fff;
          border-radius: 8px;
          padding: 12px;
          margin-top: 15px;

          h4 {
            margin: 0 0 8px 0;
            font-size: 15px;
            color: #333;
            font-weight: 500;
          }

          .detail-text {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
          }
        }

        .image-section {
          background: #fff;
          border-radius: 8px;
          padding: 12px;
          margin-top: 15px;

          h4 {
            margin: 0 0 10px 0;
            font-size: 15px;
            color: #333;
            font-weight: 500;
          }

          .image-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 25px;
            padding: 10px;
            border-radius: 6px;
            overflow: hidden;
            background: #f0f0f0;
          }
        }
      }
    }
  }

  .export-content {
    padding: 15px;

    p {
      margin: 0 0 15px 0;
      font-size: 15px;
      color: #666;
      text-align: center;
    }

    .export-options {
      .van-radio {
        margin: 10px 0;
      }
    }
  }
}
</style>