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

<template>
    <el-dialog
        v-model="dialogVisible"
        title="报告生成"
        destroy-on-close
        width="900"
        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-descriptions style="padding: 10px" :column="4" border>
                    <el-descriptions-item label="总测试次数：" label-align="right">
                        <el-text type="primary" tag="b">{{ result.totalNum }}</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="合格次数：" label-align="right">
                        <el-text type="success" tag="b">{{ result.qualifiedNum }}</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="不合格次数：" label-align="right">
                        <el-text type="danger" tag="b">{{ result.unQualifiedNum }}</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="测试标准：" label-align="right">
                        <el-text type="info">{{ result.errorSysName }}</el-text>
                    </el-descriptions-item>
                    <el-descriptions-item label="检测结论：" label-align="right">
                        <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-descriptions-item>
                    <el-descriptions-item label="结论来源：" label-align="right">
                        <div style="display: flex; align-items: center; justify-content: space-between">
                            <el-text>第{{ result.whichTime }}次检测的{{ result.resultOrigin }}</el-text>
                            <el-button type="primary" size="small" @click="handleChooseClick">重新选择</el-button>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <el-button type="primary">确认生成</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>
                            </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 } from '@/api/result/result'
import { type MonitorResult } from '@/api/result/interface'

const dialogVisible = ref(false)
const dialogSourceVisible = ref(false)
const devData = ref<any>()
const activeName = ref<number>(0)
const resultData = ref<MonitorResult[]>([])
const resultSourceData = ref<any>({})
const whichTimeData = ref<any>([])
const sourceData = ref<any>([])
const formRef = ref()
const submitSourceData = reactive({
    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.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(() => {
        console.log(submitSourceData)
        dialogSourceVisible.value = false
    })
}
defineExpose({
    open
})
</script>
<style scoped lang="scss"></style>