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 class="elView" v-if="detailData?.supervisionReportName">
                    <View @click="openFile(detailData?.supervisionReportName)" />
                </el-icon>
                <a :href="detailData.supervisionReport" target="_blank">{{ detailData.supervisionReportName }}</a>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="测试报告">
                <el-icon class="elView" v-if="detailData?.testReportName">
                    <View @click="openFile(detailData?.testReportName)" />
                </el-icon>
                <a :href="detailData.testReport" target="_blank">{{ detailData.testReportName }}</a>
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="其他报告">
                <div v-for="item in detailData.otherReports">
                    <el-icon class="elView">
                        <View @click="openFile(item.fileName)" />
                    </el-icon>
                    <a :href="item.url" target="_blank">{{ item.fileName }}</a>
                </div>
            </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, View } from '@element-plus/icons-vue'
const openFile = (name: any) => {
    window.open(window.location.origin + '/#/previewFile?/supervision/' + 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 () => {
    detailData.value.otherReports = []
    await getFileNameAndFilePath({ filePath: detailData.value.testReport }).then(res => {
        detailData.value.testReport = res.data.url
        detailData.value.testReportName = res.data.fileName
    })

    if (detailData.value.otherReport != null) {
        for (let i = 0; i < detailData.value.otherReport.split(',').length - 1; i++) {
            await getFileNameAndFilePath({
                filePath: '/supervision/' + detailData.value.otherReport.split(',')[i]
            }).then(res => {
                detailData.value.otherReports.push(res.data)
            })
        }
    }

    await getFileNameAndFilePath({ filePath: detailData.value.supervisionReport }).then(res => {
        detailData.value.supervisionReport = res.data.url
        detailData.value.supervisionReportName = 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>
<style lang="scss" scoped>
.elView {
    cursor: pointer;
    margin-right: 10px;
}
</style>