QualityResult.vue

<template>
  <div class="quality-result-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>质检结果列表</span>
        </div>
      </template>

      <div class="filter-section">
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="5" style="margin-right: 20px;">
            <el-date-picker
              v-model="filterForm.finishTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 100%;"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="filterForm.accNbr"
              placeholder="用户账号"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="filterForm.campaignId"
              placeholder="工维人员工号"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="filterForm.orderId"
              placeholder="工单ID"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="filterForm.finishStatusList"
              placeholder="质检结果"
              clearable
              multiple
              style="width: 100%"
            >
              <el-option v-for="result in pagination.resultList" :key="result.value" :label="result.label" :value="result.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4" style="margin-top: 10px;">
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-col>
        </el-row>
      </div>

      <el-table :data="tableData" :height="tableForm.height" border style="width: 100%">
        <el-table-column prop="applyId" label="质检ID" width="200"></el-table-column>
        <el-table-column prop="accNbr" label="用户账号" width="150"></el-table-column>
        <el-table-column prop="addressName" label="装机地址" width="230" show-overflow-tooltip></el-table-column>
        <el-table-column prop="orderType" label="工单类型" width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="campaignId" label="工维人员工号" width="150"></el-table-column>
        <el-table-column prop="orderCode" label="工单ID" width="230" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deviceType" label="设备类型" width="230" show-overflow-tooltip></el-table-column>
        <el-table-column prop="finishTime" label="质检完成时间" width="180"></el-table-column>
        <el-table-column prop="finish" label="质检结果" width="100">
          <template #default="scope">
            <el-tag
              :type="getResultTagType(scope.row.finish,scope.row.checkStatus)"
            >
              {{ getResultText(scope.row.finish,scope.row.checkStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="viewDetail(scope.row)"
              :disabled="scope.row.finish==0"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" style="margin-top: 20px; text-align: right;">
        <el-pagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="pagination.pageSizes"
          @sizeChange="handleSizeChange"
          layout="total, prev, pager, next, jumper,sizes"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>

      <!-- 质检详情弹窗 -->
      <el-dialog
        v-model="detailForm.isShow"
        title="质检详情"
        width="800px"
        :before-close="handleClose"
        top="5vh"
        style="height: 90vh;overflow:auto;"
        class="detail-dialog">
          <div class="inner">
            <!-- 基础信息 -->
            <div class="detail-section">
              <h3 class="section-title">基础信息</h3>
              <div class="info-grid">

                <div class="infoList">
                  <div class="li">
                    <div class="name">质检ID</div>
                    <div class="value">{{ detailForm.data.applyId || '--' }}</div>
                  </div>
                  <div class="li">
                    <div class="name">用户账号</div>
                    <div class="value">{{ detailForm.data.accNbr || '--' }}</div>
                  </div>
                  <div class="li">
                    <div class="name">工维人员</div>
                    <div class="value">{{ detailForm.data.campaignId || '--' }}</div>
                  </div>
                </div>

                <div class="infoList">
                  <div class="li">
                    <div class="name">装机地址</div>
                    <div class="value">{{ detailForm.data.addressName || '--' }}</div>
                  </div>
                </div>

                <div class="infoList">
                  <div class="li">
                    <div class="name">工单类型</div>
                    <div class="value">{{ detailForm.data.serviceNames || '--' }}</div>
                  </div>
                  <div class="li">
                    <div class="name">工单ID</div>
                    <div class="value">{{ detailForm.data.orderCode || '--' }}</div>
                  </div>
                  <div class="li">
                    <div class="name">设备类型</div>
                    <div class="value">{{ detailForm.data.terminalClass || '--' }}</div>
                  </div>
                </div>

                <div class="infoList">
                  <div class="li">
                    <div class="name">质检开始时间</div>
                    <div class="value">{{ detailForm.data.startTime || '--' }}</div>
                  </div>
                  <div class="li">
                    <div class="name">质检结束时间</div>
                    <div class="value">{{ detailForm.data.endTime || '--' }}</div>
                  </div>
                  <div class="li">
                    <div class="name">是否完成</div>
                    <div class="value">{{ getResultText(detailForm.data.finish,detailForm.data.checkStatus)}}</div>
                    <div v-if="detailForm.data.failReason">原因：{{detailForm.data.failReason}}</div>
                  </div>
                </div>

              </div>
            </div>

            <!-- 质检详情表格 -->
            <div class="detail-section" v-if="detailForm.data.items && detailForm.data.items.length > 0">
              <h3 class="section-title">质检详情</h3>
              <el-table :data="detailForm.data.items" border style="width: 100%;">
                <el-table-column prop="dec" label="检查项" width="200"></el-table-column>
                <el-table-column prop="result" label="检查结果" width="150"></el-table-column>
                <el-table-column prop="picUrl" label="现场快照">
                  <template #default="scope">
                    <el-image
                      v-for="(item,index) in scope.row.picArr"
                      :src="item"
                      :initial-index="index"
                      :preview-src-list="scope.row.picArr"
                      style="width: 60px; height: 60px;"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 质检录像 -->
            <div class="detail-section">
              <h3 class="section-title">质检录像</h3>
              <div class="video-container">
                <template v-if="detailForm.data.videos.length>0">
                  <video
                    v-for="item in detailForm.data.videos"
                    :src="item.videoUrl"
                    controls
                    style="width: calc(100% - 2px); max-height: 300px;border:1px solid #ebebeb;"
                  ></video>
                </template>
                <div v-else class="no-video">
                  <div class="up">质检视频正在生成中</div>
                  <div class="down">预计次日凌晨完成，请稍后查看</div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getQualityResults , getQualityResultsDetail} from '../utils/api'

const router = useRouter()

const filterForm = reactive({
  finishTime: '',
  accNbr: '',
  campaignId: '',
  orderId: '',
  finishStatusList: []
})

const detailForm = reactive({
  isShow: false,
  data: {}
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  pageSizes: [20, 50, 100],
  total: 0,
  resultList: [{
    label: '未完成',
    value: '0'
  },{
    label: '已完成',
    value: '1'
  },{
    label: '无法质检',
    value: '2'
  }]
})
const tableForm = reactive({
  height: window.top.document.body.offsetHeight - 388
})

const handleSizeChange = (newSize) => {
  pagination.pageSize = newSize;
  pagination.currentPage = 1;
  handleFilter();
};

const tableData = ref([])

const handleFilter = async () => {
  try {

    const params = {
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize,
      accNbr: filterForm.accNbr,
      campaignId:  filterForm.campaignId,
      orderId: filterForm.orderId,
      finishStatusList: filterForm.finishStatusList
    };

    let fn = (dateString)=>{
      const date = new Date(dateString);
      date.setDate(date.getDate() + 1);

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    }

    if (filterForm.finishTime && filterForm.finishTime.length === 2) {
      params.finishStartTime = filterForm.finishTime[0];
      params.finishEndTime = fn(filterForm.finishTime[1]);
    }

    const response = await getQualityResults(params);
    if (response.code === 200) {
      tableData.value = response.data.records || [];
      pagination.total = response.data.total;
      ElMessage.success('查询成功');
    } else {
      ElMessage.error(response.msg || '查询失败');
    }
  } catch (error) {
    ElMessage.error('查询失败: ' + error.message);
  }
}

const resetFilter = () => {
  filterForm.finishTime = '';
  filterForm.accNbr = ''
  filterForm.campaignId = '',
  filterForm.orderId = '',
  filterForm.finishStatusList = []
  handleFilter();
}

const getResultText = (result,status) => {
  let ret = '未知'

  if(result==1 && status>1){
    result = '2'
  }

  pagination.resultList.forEach(item => {
    if(item.value == result) {
      ret = item.label
    }
  })
  return ret
}

const getResultTagType = (result,status) => {
  const typeMap = {
    0: 'info',
    2: 'warning',
    1: 'success'
  }

  if(result==1 && status>1){
    result = '2'
  }

  return typeMap[result] || 'info'
}

const viewDetail = async (row) => {
  let res = await getQualityResultsDetail({
    applyId: row.applyId
  }) 

  res.data.items.forEach(item=>{
    item.picArr = item.picUrl.split(',')
    //item.picArr = ['https://hhzj.lgyzpt.com/huaiHuaPc/assets/logo-D9UGterv.png','https://hhzj.lgyzpt.com/huaiHuaPc/assets/bg-C097ZT0U.png']
    item.furl = item.picArr[0]||''
  })

  detailForm.isShow = true
  detailForm.data = res.data
}

const handlePageChange = (page) => {
  pagination.currentPage = page;
  handleFilter();
}

const handleClose = () => {
  detailForm.isShow = false
}

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

<style scoped>
.quality-result-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.detail-dialog .inner{
  height: calc(100vh - 161px);
  overflow: auto;
}
.detail-dialog .inner :deep(.el-table__cell){
  position: unset!important;
}
.info-grid {
  background: #F7F8FA;
  border-radius: 4px;
  padding: 20px;
}
.info-grid .infoList{
  display: flex;
  margin-bottom: 30px;
}
.info-grid .infoList .li{
  width: 250px;
  margin-right: 20px;
}
.info-grid .infoList .name{
  font-size: 16px;
  font-weight: 500;
}

.section-title{
  font-weight: bold;
  font-size: 18px;
  color: #333;
}
.info-grid .infoList .value{
  font-size: 15px;
  margin-top: 5px;
}
.info-grid .infoList:last-child{
  margin-bottom: 0;
}

.no-video{
  background: #F7F8FA;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.no-video .up{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.no-video .down{
  font-size: 15px;
}
</style>