pqs-9100_client/frontend/src/views/home/components/reportResultPopup.vue

<template>
    <el-dialog
        v-model="dialogVisible"
        title="报告生成"
        destroy-on-close
        width="750"
        draggable
        :close-on-click-modal="false"
    >
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane
                v-for="(result, index) in resultData"
                :key="result.monitorId"
                :label="`测量回路${result.monitorNum}`"
                :name="index"
            >
                <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="8">
                        <div
                            style="
                                background-color: #f9fafb;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 15px;
                                border-radius: 5px;
                            "
                        >
                            <el-text style="margin-right: 10px">总测试次数：</el-text>
                            <el-text size="large" type="primary" tag="b">
                                {{ result.totalNum }}
                            </el-text>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div
                            style="
                                background-color: #f9fafb;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 15px;
                                border-radius: 5px;
                            "
                        >
                            <el-text style="margin-right: 10px">符合次数：</el-text>
                            <el-text size="large" type="success" tag="b">{{ result.qualifiedNum }}</el-text>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div
                            style="
                                background-color: #f9fafb;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 15px;
                                border-radius: 5px;
                            "
                        >
                            <el-text style="margin-right: 10px">不符合次数：</el-text>
                            <el-text size="large" type="danger" tag="b">{{ result.unQualifiedNum }}</el-text>
                        </div>
                    </el-col>
                </el-row>
                <el-descriptions :column="1" style="margin-top: 20px">
                    <el-descriptions-item label-align="right">
                        <template #label>
                            <el-text type="info">测试标准：</el-text>
                        </template>
                        <el-text>{{ result.errorSysName }}</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="right">
                        <template #label>
                            <el-text type="info">检测结论：</el-text>
                        </template>
                        <el-tag disable-transitions v-if="result.checkResult === 1" type="success">符合</el-tag>
                        <el-tag disable-transitions v-else-if="result.checkResult === 2" type="danger">不符合</el-tag>
                        <el-tag disable-transitions v-else-if="result.checkResult === 4" type="danger">无法比较</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label-align="right">
                        <template #label>
                            <el-text type="info">结论来源：</el-text>
                        </template>
                        <el-text>第{{ result.whichTime }}次检测的{{ result.resultOrigin }}</el-text>
                    </el-descriptions-item>
                </el-descriptions>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <el-button type="primary" size="small" @click="handleChooseClick">重新选择</el-button>
            <el-button type="primary" @click="handleConfirmGenerate">确认生成</el-button>
        </template>
        <!--        选择检测数据源弹框-->
        <el-dialog
            v-model="dialogSourceVisible"
            append-to-body
            title="选择检测数据源"
            destroy-on-close
            width="400"
            :close-on-click-modal="false"
        >
            <el-form ref="formRef" :rules="rules" :model="submitSourceData" label-width="120px" label-position="top">
                <el-form-item label="选择次数:" prop="whichTime">
                    <el-select v-model="submitSourceData.whichTime" placeholder="请选择次数" @change="handleTimeChange">
                        <el-option
                            v-for="time in whichTimeData"
                            :key="time"
                            :label="`第${time}次`"
                            :value="time"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据源和检测结论:" prop="resultType">
                    <el-select
                        v-model="submitSourceData.resultType"
                        placeholder="请选择数据源和检测结论"
                        clearable
                        @change="handleSourceChange"
                    >
                        <template #label="{ label }">
                            <div style="display: flex; align-items: center; justify-content: space-between">
                                <el-text>{{ label }}</el-text>
                                <el-tag disable-transitions v-if="submitSourceData.checkResult === 1" type="success">
                                    符合
                                </el-tag>
                                <el-tag disable-transitions v-if="submitSourceData.checkResult === 2" type="danger">
                                    不符合
                                </el-tag>
                                <el-tag disable-transitions v-if="submitSourceData.checkResult === 4" type="info">
                                    无法比较
                                </el-tag>
                            </div>
                        </template>
                        <el-option
                            v-for="item in sourceData"
                            :key="item.dataSourceCode"
                            :label="item.dataSourceName"
                            :value="item.dataSourceCode"
                        >
                            <div style="display: flex; align-items: center; justify-content: space-between">
                                <el-text>{{ item.dataSourceName }}</el-text>
                                <el-tag v-if="item.checkResult === 1" type="success">符合</el-tag>
                                <el-tag v-if="item.checkResult === 2" type="danger">不符合</el-tag>
                            </div>
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogSourceVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSureChoose">确认</el-button>
            </template>
        </el-dialog>
    </el-dialog>
</template>
<script setup lang="ts" name="reportPopup">
import { getMonitorDataSourceResult, getMonitorResult, updateMonitorResult } from '@/api/result/result'
import { type MonitorResult } from '@/api/result/interface'
import { generateDevReport } from '@/api/plan/plan'
import { useCheckStore } from '@/stores/modules/check'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const dialogSourceVisible = ref(false)
const devData = ref<any>()
const activeName = ref<number>(0)
const checkStore = useCheckStore()

// 定义 emit 事件
const emit = defineEmits<{
    (e: 'reportGenerated'): void
}>()
const resultData = ref<MonitorResult[]>([])
const resultSourceData = ref<any>({})
const whichTimeData = ref<any>([])
const sourceData = ref<any>([])
const formRef = ref()
const submitSourceData = reactive({
    monitorId: '',
    whichTime: '',
    resultType: '',
    checkResult: -1
})

const rules = {
    whichTime: [{ required: true, message: '请选择次数', trigger: 'change' }],
    resultType: [{ required: true, message: '请选择数据源和检测结论', trigger: 'change' }]
}

const open = (data: any) => {
    devData.value = data
    getResultData()
}
const getResultData = async () => {
    const res = await getMonitorResult(devData.value.id)
    if (res.data && Array.isArray(res.data)) {
        resultData.value = res.data
    }
    dialogVisible.value = true
}

const handleTabClick = (tab: any) => {
    activeName.value = tab.name
}
const handleChooseClick = async () => {
    const currentResult = resultData.value[activeName.value]
    if (currentResult) {
        submitSourceData.monitorId = currentResult.monitorId
        submitSourceData.whichTime = currentResult.whichTime
        submitSourceData.resultType = currentResult.resultType
        submitSourceData.checkResult = currentResult.checkResult
        const res = await getMonitorDataSourceResult(currentResult.monitorId)
        if (res.data) {
            resultSourceData.value = res.data
            // 选择第几次
            whichTimeData.value = Object.keys(resultSourceData.value)
            sourceData.value = resultSourceData.value[currentResult.whichTime]
        }
    }
    dialogSourceVisible.value = true
}
const handleTimeChange = (value: any) => {
    sourceData.value = resultSourceData.value[value]
    submitSourceData.resultType = ''
    submitSourceData.checkResult = -1
}
const handleSourceChange = (value: any) => {
    submitSourceData.checkResult = resultSourceData.value[submitSourceData.whichTime].find(
        (item: any) => item.dataSourceCode === value
    ).checkResult
}
const handleSureChoose = () => {
    formRef.value.validate().then(async () => {
        await updateMonitorResult(submitSourceData)
        await getResultData()
        dialogSourceVisible.value = false
    })
}

// 处理确认生成报告
const handleConfirmGenerate = async () => {
    try {
        await generateDevReport({
            planId: checkStore.plan.id,
            devIdList: [devData.value.id],
            scriptId: checkStore.plan.scriptId,
            planCode: checkStore.plan.code + '',
            pageNum: 1,
            pageSize: 999
        })
        ElMessage.success({ message: `报告生成成功！` })
        dialogVisible.value = false
        emit('reportGenerated') // 触发事件通知父组件
    } catch (error) {
        ElMessage.error('报告生成失败')
        console.error('报告生成错误:', error)
    }
}
defineExpose({
    open
})
</script>
<style scoped lang="scss"></style>