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

<template>
    <div class="default-main">
        <!--        <h1>详细信息回显</h1>-->
        <el-descriptions :column="2" border>
            <el-descriptions-item label="普测计划名称">
                {{ detailData?.planName }}
            </el-descriptions-item>
            <el-descriptions-item label="计划负责人">
                {{ detailData?.leader }}
            </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="流程状态">
                <el-tag :type="getDeviceStatusType(detailData?.status)">
                    {{ getDeviceStatus(detailData?.status) }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件">
                <div v-for="(item, index) in aList">
                    <el-icon class="elView" v-if="item?.fileName && VITE_FLAG">
                        <View @click="openFile(item?.fileName)" />
                    </el-icon>
                    <span class="aLoad" @click="download(item.keyName)">
                        {{ item.fileName }}
                   </span >
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <div style="height: 300px">
            <vxe-table
                v-bind="defaultAttribute"
                ref="vxeRef"
                class="mt10"
                height="auto"
                :data="detailData?.supervisionGeneralSurveyPlanDetailPOS"
            >
                <vxe-column field="subName" title="变电站名称"></vxe-column>
                <vxe-column field="voltageLevel" title="变电站电压等级" :formatter="formatter"></vxe-column>
                <vxe-column field="measurementPointId" title="在线监测点ID">
                    <template #default="{ row }">{{ row.measurementPointId ? row.measurementPointId : '/' }}</template>
                </vxe-column>

                <vxe-column field="isSurvey" title="是否实现监测">
                    <template #default="{ row }">{{ row.isSurvey === 1 ? '是' : '否' }}</template>
                </vxe-column>
            </vxe-table>
        </div>
    </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 { getFileNameAndFilePath } from '@/api/system-boot/file'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { Link, View } from '@element-plus/icons-vue'
import{ download} from '@/utils/fileDownLoad'
import { util } from 'echarts'
import { it } from 'node:test'
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 VITE_FLAG = import.meta.env.VITE_NAME == 'jibei'
/** 获得数据 */
const getInfo = async () => {
    detailLoading.value = true
    try {
        await querySurveyDetail({ id: props.id || queryId }).then(res => {
            detailData.value = res.data
            aList.value = []
            let arr = res.data.filePath.split(',')

            arr.slice(0, -1).forEach((item: any) => {
                getFileNameAndFilePath({ filePath: item }).then((res: any) => {
                    res.data.keyName = res.data.name
                    aList.value.push(res.data)
                })
            })
        })
    } finally {
        detailLoading.value = false
    }
}
// 下载文件
const downloadFile = (url: string, fileName: string) => {
    const link = document.createElement('a')
    link.href = url
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}
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 formatter = (row: any) => {
    if (row.column.field == 'voltageLevel') {
        return levelList.filter(item => item.id == row.cellValue)[0].name
    } else {
        return row.cellValue
    }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

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