zdqy_firm_former/src/views/component/deviceValidation/index.vue

<template>
    <div>
        <div v-if="show" class="reagentChange">
            <el-row type="flex">
                <el-col class="button">
                    <div class="title">仪器设备维修后验证记录（定量）</div>
                    <div v-if="nodeId === 'Activity_0b188bo' || readonly" />
                    <div v-else>
                        <el-button type="primary" size="mini" icon="ibps-icon-add" @click="handleAdd"> 添加</el-button>
                        <el-button type="danger" size="mini" icon="ibps-icon-remove" @click="handleDelete"> 删除</el-button>
                        <el-button type="warning" size="mini" icon="ibps-icon-calculator" @click="computedResult">计算</el-button>

                    </div>
                </el-col>
            </el-row>
            <el-row type="flex">
                <el-col>
                    <el-table ref="reagent" :data="reagentDataFilter" :span-method="spanMethod" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column
                            label="检验项目"
                            prop="jianYanXiangMu"
                            width="150"
                        >
                            <template slot-scope="{row}">
                                <el-input v-if="!disabled" v-model="row.jianYanXiangMu" type="textarea" size="mini" placeholder="请输入" />
                                <span v-else>{{ row.jianYanXiangMu|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="浓度" prop="nongDu" width="100">
                            <template slot-scope="{row}">
                                <el-input v-if="!disabled" v-model="row.nongDu" size="mini" placeholder="请输入" />
                                <span v-else>{{ row.nongDu|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="条码号或标本号" prop="tiaoBiaoHao" width="150">
                            <template slot-scope="{row}">
                                <el-input v-if="!disabled" v-model="row.tiaoBiaoHao" size="mini" placeholder="请输入" />
                                <span v-else>{{ row.tiaoBiaoHao|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="故障前结果（X）" prop="qianJieGuo" width="130">
                            <template slot-scope="{row}">
                                <el-input v-if="!disabled" v-model="row.qianJieGuo" :min="0" size="mini" placeholder="请输入" />
                                <span v-else>{{ row.qianJieGuo|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="故障后结果（Y）" prop="houJieGuo" width="130">
                            <template slot-scope="{row}">
                                <el-input v-if="!disabled" v-model="row.houJieGuo" :min="0" size="mini" placeholder="请输入" />
                                <span v-else>{{ row.houJieGuo|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="计算方式" prop="jiSuanGongShi" width="140">
                            <template slot-scope="{row}">
                                <el-select v-if="!disabled" v-model="row.jiSuanGongShi" size="mini" placeholder="请选择">
                                    <el-option
                                        label="|Y-X|"
                                        value="|Y-X|"
                                    />
                                    <el-option
                                        label="|Y-X|/X(%)"
                                        value="|Y-X|/X(%)"
                                    />
                                </el-select>
                                <span v-else>{{ row.jiSuanGongShi|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="实际差值" prop="shiJiChaZhi" />
                        <el-table-column label="实际偏倚" prop="shiJiPianYi" />
                        <el-table-column label="限定范围" prop="xianDingFanWei" width="110">
                            <template slot-scope="{row}">
                                <el-input v-if="!disabled" v-model="row.xianDingFanWei" size="mini" placeholder="请输入" type="number" />
                                <span v-else>{{ row.xianDingFanWei|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="允许偏倚" prop="yunXuPianYi" width="100">
                            <template slot-scope="{row}">
                                <el-input v-if="!disabled" v-model="row.yunXuPianYi" size="mini" placeholder="请输入" />
                                <span v-else>{{ row.yunXuPianYi|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否相符" prop="shiFouXiangFu" width="80" />
                        <el-table-column label="符合率" prop="fuHeLv" />
                        <el-table-column label="符合率可接受标准" prop="fuHeBiaoZhun" width="140">
                            <template slot-scope="{row}">
                                <el-select v-if="!disabled" v-model="row.fuHeBiaoZhun" size="mini" placeholder="请选择" @change="handelChange($event,row.jianYanXiangMu)">
                                    <el-option
                                        label="≥80%"
                                        value="≥80%"
                                    />
                                    <el-option
                                        label="=100%"
                                        value="=100%"
                                    />
                                </el-select>
                                <span v-else>{{ row.fuHeBiaoZhun|| '/' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="结论" prop="jieLun" />
                    </el-table>
                    <el-pagination
                        layout="total,sizes,prev, pager, next,jumper"
                        :current-page="requestPage.pageNo"
                        :page-size="requestPage.limit"
                        :page-sizes="[10,15,20,30,50,100]"
                        :total="reagentData.length"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
export default {
    props: {
        formData: {
            type: Object,
            default: () => {}
        },
        readonly: {
            type: Boolean,
            default: false
        },
        params: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
            reagentData: [],
            copyDialogData: [],
            disabled: false,
            ypData: [],
            nodeId: '',
            show: false,
            requestPage: {
                limit: 20,
                pageNo: 1
            },
            importTableDialogVisible: false,
            multipleSelection: []

        }
    },
    computed: {
        reagentDataFilter () {
            return this.reagentData.slice((this.requestPage.pageNo - 1) * (this.requestPage.limit), (this.requestPage.pageNo - 1) * (this.requestPage.limit) + this.requestPage.limit)
        }
    },
    watch: {
        'formData.yqsbwxhlybdjlbzbdl': {
            handler (value, old) {
                if (value && value.length) {
                    this.reagentData = value
                }
            },
            immediate: true
        },
        reagentData: {
            handler (value, old) {
                this.$emit('change-data', 'yqsbwxhlybdjlbzbdl', value)
            },
            deep: true
        },
        'formData.xiangMuLeiXing': {
            handler (val) {
                if (val === '定量') { this.show = true } else { this.show = false; this.reagentData = [] }
            },
            immediate: true
        },
        'formData.piLiangYunXu': {
            handler (val) {
                this.reagentData.forEach(item => {
                    const { jianYanXiangMu } = this.formData
                    if (item.jianYanXiangMu === jianYanXiangMu) {
                        item.yunXuPianYi = val
                    }
                })
            },
            immediate: true
        },
        'formData.piLiangXianDing': {
            handler (val) {
                this.reagentData.forEach(item => {
                    const { jianYanXiangMu } = this.formData
                    if (item.jianYanXiangMu === jianYanXiangMu) {
                        item.xianDingFanWei = val
                    }
                })
            }
        }
    },
    mounted () {
        const { first = '' } = this.$store.getters.level
        const { deptList = [] } = this.$store.getters || {}
        const t1 = deptList.find(i => i.positionId === first) || {}

        console.log(t1.positionName)
        this.nodeId = this.params ? this.params.nodeId : ''
        this.disabled = this.readonly || this.nodeId === 'Activity_0b188bo'
    },
    methods: {
        handelChange (event, jianYanXiangMu) {
            this.reagentData.forEach(item => {
                if (item.jianYanXiangMu === jianYanXiangMu) {
                    item.fuHeBiaoZhun = event
                }
            })
        },
        // 新增
        handleAdd () {
            const { xMMingCheng, piLiangYunXu, piLiangXianDing, piLiangNongDu } = this.formData
            if (this.disabled && this.reagentData?.length > 0) {
                return this.$message.warning('导入与手动添加功能不可混用！')
            }
            if (!this.formData.xMMingCheng) {
                return this.$message.warning('请选择或输入检验项目')
            }
            this.reagentData.push({ jianYanXiangMu: xMMingCheng, nongDu: piLiangNongDu, tiaoBiaoHao: '', qianJieGuo: '', houJieGuo: '', jiSuanGongShi: '|Y-X|/X(%)', shiJiChaZhi: '', shiJiPianYi: '', xianDingFanWei: piLiangXianDing, yunXuPianYi: piLiangYunXu, shiFouXiangFu: '', fuHeLv: '', fuHeBiaoZhun: '≥80%', jieLun: '' })
            const grouped = this.reagentData.reduce((acc, item) => {
                const key = item.jianYanXiangMu
                if (!acc[key]) acc[key] = []
                acc[key].push(item)
                return acc
            }, {})
            // 先清空数组，再填充新数据（确保 Vue 检测到变化）
            this.reagentData.splice(0, this.reagentData.length, ...Object.values(grouped).flat())
            // console.log(this.reagentData)
        },

        // 删除
        handleDelete () {
            this.$confirm('确定删除当前选中数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (this.multipleSelection.length > 0) {
                    this.reagentData = this.reagentData.filter(row => !this.multipleSelection.includes(row))
                } else {
                    this.$message.warning('请选择数据')
                }
            })
        },
        handleSelectionChange (val) {
            this.multipleSelection = val
        },

        getColumns () {
            return [{
                field_name: 'shiFouXiangFu',
                label: '是否相符',
                name: 'shiFouXiangFu'
            },
            {
                field_name: 'jianYanXiangMu',
                label: '检验项目',
                name: 'jianYanXiangMu'
            },
            {
                field_name: 'nongDu',
                label: '浓度',
                name: 'nongDu'
            },
            {
                field_name: 'tiaoBiaoHao',
                label: '条码号或标本号',
                name: 'tiaoBiaoHao'
            },
            {
                field_name: 'qianJieGuo',
                label: '故障前结果（X）',
                name: 'qianJieGuo'
            },
            {
                field_name: 'houJieGuo',
                label: '故障后结果（Y）',
                name: 'houJieGuo'
            },
            {
                field_name: 'shiJiChaZhi',
                label: '实际差值',
                name: 'shiJiChaZhi'
            },
            {
                field_name: 'shiJiPianYi',
                label: '实际偏倚',
                name: 'shiJiPianYi'
            },
            {
                field_name: 'xianDingFanWei',
                label: '限定范围',
                name: 'xianDingFanWei'
            },
            {
                field_name: 'yunXuPianYi',
                label: '允许偏倚',
                name: 'yunXuPianYi'
            },
            {
                field_name: 'fuHeLv',
                label: '符合率',
                name: 'fuHeLv'
            }, {
                field_name: 'jieLun',
                label: '结论',
                name: 'jieLun'
            },
            {
                field_name: 'fuHeBiaoZhun',
                label: '符合率可接受标准',
                name: 'fuHeBiaoZhun'
            }]
        },

        // 当前页码改变
        handleCurrentChange (val) {
            this.requestPage.pageNo = val
        },
        // 页码选择器改变
        handleSizeChange (val) {
            this.requestPage.limit = val
            this.requestPage.pageNo = 1
        },

        // 计算结果
        computedResult () {
            if (this.disabled) {
                this.$message.warning('导入数据请勿使用计算功能！')
                return
            }
            const hasInvalidData = this.reagentData.some(item =>
                !item.qianJieGuo || item.qianJieGuo <= 0 || !item.houJieGuo || item.houJieGuo <= 0
            )

            if (hasInvalidData || this.reagentData.length === 0) {
                this.$message.warning('故障前结果（X）必须大于0且不能为空！')
                return
            }

            const hasPyOrCz = this.reagentData.some(item =>
                (item.jiSuanGongShi === '|Y-X|/X(%)' && !item.yunXuPianYi) || (item.jiSuanGongShi === '|Y-X|' && !item.xianDingFanWei)
            )

            if (hasPyOrCz) {
                this.$message.warning(`计算方式为|Y-X|/X(%)请填写允许偏倚，计算方式为|Y-X|请填写限定范围`)
                return
            }
            // 预处理函数：统一处理百分比数值
            const normalizePercent = val => Number(String(val).replace('%', '')) || 0

            // 使用 Map 存储统计信息
            const projectStats = new Map()

            this.reagentData.forEach(item => {
                const { jiSuanGongShi, houJieGuo, qianJieGuo, xianDingFanWei, jianYanXiangMu } = item

                // 计算差值/偏倚
                if (!isNaN(houJieGuo) && !isNaN(qianJieGuo)) {
                    if (jiSuanGongShi === '|Y-X|') {
                        item.shiJiChaZhi = Math.abs((houJieGuo * 100000 - qianJieGuo * 100000) / 100000).toFixed(2)
                        item.shiFouXiangFu = normalizePercent(item.shiJiChaZhi) <= normalizePercent(xianDingFanWei) ? '相符' : '不相符'
                        item.shiJiPianYi = ''
                    } else {
                        item.shiJiPianYi = this.deleteAccuracy(Math.abs(houJieGuo - qianJieGuo) / qianJieGuo)
                        item.shiFouXiangFu = normalizePercent(item.shiJiPianYi) <= normalizePercent(item.yunXuPianYi) ? '相符' : '不相符'
                        item.shiJiChaZhi = ''
                    }
                }

                // 统计符合率
                const stats = projectStats.get(jianYanXiangMu) || { total: 0, yes: 0 }
                stats.total++
                if (item.shiFouXiangFu === '相符') stats.yes++
                projectStats.set(jianYanXiangMu, stats)
            })

            // 填充符合率标准，保留小数点后两位
            this.reagentData.forEach(item => {
                const stats = projectStats.get(item.jianYanXiangMu)
                item.fuHeLv = this.deleteAccuracy(stats.yes / stats.total)
                console.log(parseFloat(item.fuHeLv), item.fuHeBiaoZhun)
                item.jieLun = parseFloat(item.fuHeLv) >= parseFloat(item.fuHeBiaoZhun.replace(/[≥=%]/g, '')) ? '可接受' : '不可接受'
            })
        },
        spanMethod ({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1 || columnIndex === 12 || columnIndex === 13 || columnIndex === 14) {
                const currentValue = row[column.property]
                const preRow = this.reagentData[rowIndex - 1]
                // 上一行这一列的数据
                const preValue = preRow ? preRow[column.property] : null
                // 如果当前值和上一行的值相同，则将当前单元格隐藏
                // 给第0,10,11,12列对数值相同且是同一个'jianYanXiangMu'进行表格合并
                if (currentValue === preValue && row['jianYanXiangMu'] === preRow['jianYanXiangMu']) {
                    return { rowspan: 0, colspan: 0 }
                } else {
                    let rowspan = 1
                    // 计算应该合并的行数
                    for (let i = rowIndex + 1; i < this.reagentData.length; i++) {
                        const nextRow = this.reagentData[i]
                        const nextValue = nextRow[column.property]
                        if (nextValue === currentValue && nextRow['jianYanXiangMu'] === row['jianYanXiangMu']) {
                            rowspan++
                        } else {
                            break
                        }
                    }
                    return { rowspan, colspan: 1 }
                }
                // if (rowIndex % rowspan === 0) {
                //     return {
                //         rowspan,
                //         colspan: 1
                //     }
                // } else {
                //     return {
                //         rowspan: 0,
                //         colspan: 0
                //     }
                // }
            }
        },
        // 去除小数*100精度方法
        deleteAccuracy (num) {
            // 是否带小数点
            if ((num.toString()).includes('.')) {
                // 保留小数点后面3位
                const numArry = num.toFixed(3).toString().split('.')
                // 整数位是否大于0
                if (numArry[0] > 0) {
                    return Number(numArry[0] + numArry[1].substring(0, 2) + '.' + numArry[1].substring(2, 3)) + '%'
                } else {
                    // 小数位第一位是否大于0
                    if (numArry[1][0] > 0) {
                        return Number(numArry[1].substring(0, 2) + '.' + numArry[1].substring(2, 3)) + '%'
                    } else {
                        // 小数位第二位是否大于0
                        if (numArry[1][1] > 0) {
                            return Number(numArry[1].substring(1, 2) + '.' + numArry[1].substring(2, 3)) + '%'
                        } else {
                            return Number(0 + '.' + numArry[1].substring(2, 3)) + '%'
                        }
                    }
                }
            } else {
                return num * 100 + '%'
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.reagentChange{
margin-bottom: 20px;
.button{
    display: flex;
    justify-content: space-between;
    padding: 0px 0px 0px 15px;
    background: #f0ffff;
    .title {
        color: #999;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 0;
    }
    .el-button {
        margin: 0;
    }
}
}
</style>