admin-sjzx/src/views/pqs/supervise/harmonicSurvey/test/detail.vue

<template>
  <div class='default-main'>
    <el-descriptions :column='2' border>
      <el-descriptions-item label='技术监督计划名称'>
        {{ detailData?.planName }}
      </el-descriptions-item>
      <el-descriptions-item label='计划负责单位'>
        {{ detailData?.deptName }}
      </el-descriptions-item>
      <el-descriptions-item label='监督类型'>
        {{
          supvTypeList.find(item => {
            return item.id == detailData?.supvType
          })?.name
        }}
      </el-descriptions-item>
      <el-descriptions-item label='监督对象名称'>
        {{ detailData?.supvObjectName }}
      </el-descriptions-item>
      <el-descriptions-item label='计划开始时间'>
        {{ detailData?.planStartTime }}
      </el-descriptions-item>
      <el-descriptions-item label='计划结束时间'>
        {{ detailData?.planEndTime }}
      </el-descriptions-item>
      <el-descriptions-item label='变电站'>
        {{ detailData?.substationName }}
      </el-descriptions-item>
      <el-descriptions-item label='变电站电压等级'>
        {{ detailData?.voltageLevel }}
      </el-descriptions-item>
      <el-descriptions-item label='变电站来源'>
        {{ detailData?.voltageLevel == '/' ? '自定义变电站' : '系统内台账变电站' }}
      </el-descriptions-item>
      <el-descriptions-item label='实际完成时间'>
        {{ detailData?.completeTime }}
      </el-descriptions-item>
      <el-descriptions-item label='负责人'>
        {{ detailData?.completeBy }}
      </el-descriptions-item>
      <el-descriptions-item label='是否有问题'>
        <el-tag :type='getProblemFlag(detailData?.problemFlag)'>
          {{ getProblemFlagDetail(detailData?.problemFlag) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-if='detailData?.problemFlag == 1' :span='2' label='问题描述'>
        {{ detailData?.problemDetail }}
      </el-descriptions-item>

      <el-descriptions-item :span='2' label='测试报告'>
        <el-icon>
          <Link />
        </el-icon>
        <a :href='detailData.testReport' target='_blank'>{{ detailData.testReportName }}</a>
        <span @click="openFile(detailData.testReportName )">预览</span>
      </el-descriptions-item>

      <el-descriptions-item label='流程状态'>
        <el-tag :type='getDeviceStatusType(detailData?.status)'>
          {{ getDeviceStatus(detailData?.status) }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const supvTypeList = dictData.getBasicData('supv_type')
defineOptions({ name: 'QuitRunningDeviceDetail' })
import { propTypes } from '@/utils/propTypes'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { getTestById } from '@/api/supervision-boot/survey/test'
import { getFileNameAndFilePath } from '@/api/system-boot/file'
import { Link } from '@element-plus/icons-vue'
const openFile = (name:any) => {
    window.open(window.location.origin + '/#/previewFile?'+name)
}
const { query } = useRoute() // 查询参数
const props = defineProps({
  id: propTypes.string.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData: any = ref({}) // 详情数据
const queryId = query.id // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  try {
    await getTestById(props.id || queryId).then(res => {
      detailData.value = res.data
      getFileData()
    })
  } finally {
    detailLoading.value = false
  }
}

const getFileData = async () => {

  await getFileNameAndFilePath({ filePath: detailData.value.testReport }).then(res => {
    detailData.value.testReport = res.data.url
    detailData.value.testReportName = res.data.fileName
  })
}

const getProblemFlagDetail = (status: number) => {
  if (status === 1) {
    return '存在问题'
  }
  return '合格'
}

const getProblemFlag = (status: number) => {
  if (status === 1) {
    return 'danger'
  }
  return 'success'
}


const getDeviceStatus = (status: number) => {
  if (status === 1) {
    return '审批中'
  }
  if (status === 2) {
    return '审批通过'
  }
  if (status === 3) {
    return '审批不通过'
  }
  if (status === 4) {
    return '已取消'
  }
  return '审批通过'
}

const getDeviceStatusType = (status: number) => {
  if (status === 1) {
    return 'primary'
  }
  if (status === 2) {
    return 'success'
  }
  if (status === 3) {
    return 'danger'
  }
  if (status === 4) {
    return 'warning'
  }
  return 'success'
}


const formatterSource = (row: any) => {
  if (row.column.field == 'dataSource') {
    if (row.cellValue == 0) {
      return '系统内台账变电站'
    } else {
      return '自定义变电站'
    }
  } else {
    return row.cellValue
  }
}


defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
  getInfo()
})
</script>