admin-sjzx/src/views/pqs/supervise/terminalNetworkDetection/components/cycleDetection/detail.vue

<template>
    <div class="default-main">
        <!--        <h1>详细信息回显</h1>-->
        <el-descriptions :column="2" border>
            <el-descriptions-item label="变电站">
                {{ detailData?.substation }}
            </el-descriptions-item>
            <el-descriptions-item label="供电公司">
                {{ detailData?.dept }}
            </el-descriptions-item>
            <el-descriptions-item label="终端名称">
                {{ detailData?.deviceName }}
            </el-descriptions-item>
            <el-descriptions-item label="逾期天数">
                <span
                    :style="{ color: detailData?.overdueDay > 10 ? 'red' : detailData?.overdueDay > 3 ? 'yellow' : '' }"
                >
                    {{ detailData?.overdueDay }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="流程状态">
                <el-tag :type="getDeviceStatusType(detailData?.status)">
                    {{ getDeviceStatus(detailData?.status) }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="报告文件">
                <el-icon class="elView" v-if="detailData?.reportPaths?.fileName">
                    <View @click="openFile(detailData?.reportPaths?.fileName)" />
                </el-icon>
                <a :href="detailData.reportPaths?.url">
                    {{ detailData.reportPaths?.fileName }}
                </a>
            </el-descriptions-item>
            <el-descriptions-item label="描述">
                {{ detailData?.description }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'

defineOptions({ name: 'QuitRunningDeviceDetail' })
import { propTypes } from '@/utils/propTypes'
// import { querySurveyDetail } from '@/api/process-boot/generalTest'
import { getInfoById } from '@/api/supervision-boot/cycleDetection/index'
import { getFileNameAndFilePath } from '@/api/system-boot/file'
import { useDictData } from '@/stores/dictData'
import { Link, View } from '@element-plus/icons-vue'
const { query } = useRoute() // 查询参数
const openFile = (name: any) => {
    window.open(window.location.origin + '/#/previewFile?/supervision/' + name)
}
const props = defineProps({
    id: propTypes.string.def(undefined)
})
const dictData = useDictData()
const detailLoading = ref(false) // 表单的加载中
const detailData: any = ref({}) // 详情数据
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const aList: any = ref([]) // 详情数据
const queryId = query.id // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async () => {
    detailLoading.value = true
    try {
        await getInfoById({ id: props.id || queryId }).then(res => {
            detailData.value = res.data
        })
        await getFileNameAndFilePath({ filePath: detailData.value.checkFilePath }).then((res: any) => {
            detailData.value.reportPaths = res.data
        })
    } finally {
        detailLoading.value = false
    }
}

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'
}

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

/** 初始化 **/
onMounted(() => {
    getInfo()
})
</script>
<style lang="scss" scoped>
.elView {
    cursor: pointer;
    margin-right: 10px;
}
</style>