cat-power/pages/home/index.vue

<template>
	<view class="container">
		<div style="display: flex;flex-direction: column;">
			<!-- <div style="display: flex;justify-content: space-between;align-items: center;">
				<text class="section-title">输入</text>
				<el-button size="small" type="primary" @click="addTargetRow">添加</el-button>
			</div> -->
			<el-table size="small" border :data="inputData" max-height="calc(100vh - 150px)" empty-text="暂无数据，请添加猫咪势力">
				<el-table-column label="顺序" width="55px">
					<template #="{ $index }">{{ $index + 1 }}</template>
				</el-table-column>

				<el-table-column label="目标角色">
					<template #header>
						<div style="display: flex;justify-content: space-between;">
							目标角色
							<el-tooltip content="编辑" placement="top">
								<el-button type="primary" link style="margin-left: 0px;" @click="editRow('母', '目标角色')">
									<uni-icons style="color: #409eff" size="14" type="compose" />
								</el-button>
							</el-tooltip>
						</div>
					</template>

					<el-table-column label="公" min-width="60px" prop="targetMale" />
					<el-table-column label="母" min-width="60px" prop="targetFemale" />
				</el-table-column>

				<el-table-column label="备选角色">
					<template #header>
						<div style="display: flex;justify-content: space-between;">
							备选角色
							<el-tooltip content="编辑" placement="top">
								<el-button type="primary" link style="margin-left: 0px;" @click="editRow('公', '备选角色')">
									<uni-icons style="color: #409eff" size="14" type="compose" />
								</el-button>
							</el-tooltip>
						</div>
					</template>

					<el-table-column label="公" min-width="60px" prop="backupMale" />
					<el-table-column label="母" min-width="60px" prop="backupFemale" />
				</el-table-column>
			</el-table>
		</div>

		<div style="display: flex;">
			<el-button type="primary" style="width:100%;margin-bottom: 10px;margin-top:10px" @click="switchRoles">
				交换角色
			</el-button>
			
			<el-button type="primary" style="width:100%;margin-bottom: 10px;margin-top:10px" @click="calculateBestMatch">
				计算最佳配对
			</el-button>
		</div>

		<!-- 输出表格 -->
		<view class="section" v-if="outputData.length > 0">

			<div style="display: flex;justify-content: space-between;">
				<text class="section-title">输出 </text>
			 计算时间 {{timer}} ms
			
				<span>差额: {{ powerDifference }}</span>
			</div>

			<el-table size="small" border :data="outputData">
				<el-table-column label="顺序" width="55px">
					<template #="{ $index }">{{ $index + 1 === outputData.length ? '合计' : $index + 1}}</template>
				</el-table-column>

				<el-table-column label="目标角色">
					<el-table-column label="性别" min-width="60px" prop="targetGender" />
					<el-table-column label="势力" min-width="60px" prop="targetPower" />
				</el-table-column>

				<el-table-column label="备选角色">
					<el-table-column label="性别" min-width="60px" prop="backupGender" />
					<el-table-column label="势力" min-width="60px" prop="backupPower" />
				</el-table-column>
			</el-table>
		</view>


		<uni-popup ref="batchRef" :is-mask-click="false">
			<div
				style="display: flex;flex-direction: column;justify-content: center;padding: 10px; width: 95%;background: #fff;border-radius: 10px;padding: 10px;">
				<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
					<span></span>
					<h4 style="margin-bottom: 10px"> 编辑{{ role }}</h4>
					<uni-icons type="closeempty" size="18" @click="batchRef.close()"></uni-icons>
				</div>


				<span class="dialog-title">猫咪势力(公)</span>
				<textarea 
					v-model="malePowers" 
					placeholder="用逗号隔开，如:200,10,100"
					style="height: 70px;border: 1px solid #dfe2e5" />

				<span class="dialog-title">猫咪势力(母)</span>
				<textarea 
					v-model="feMalePowers" 
					placeholder="用逗号隔开，如:200,10,100"
					style="height: 70px;border: 1px solid #dfe2e5" />


				<button size='mini' type="primary" @click="handleConfirm">保存</button>
			</div>
		</uni-popup>

	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from "element-plus"

const gender = ref("")
const powers = ref("")

const malePowers = ref('')
const feMalePowers = ref('')
const role = ref("")

const type = ref('')
// 性别选项
const genderOptions = ['公', '母'];
const roleOptions = ['目标角色', '备选角色'];


const timer = ref(0)


const mockData = [
    {
        "backupFemale": "121",
        "backupMale": "153",
        "targetFemale": "86",
        "targetMale": "138"
    },
    {
        "backupFemale": "118",
        "backupMale": "91",
        "targetFemale": "84",
        "targetMale": "90"
    },
    {
        "backupFemale": "115",
        "backupMale": "77",
        "targetFemale": "84"
    },
    {
        "backupFemale": null,
        "backupMale": null,
        "targetFemale": "59"
    },
    {
        "backupFemale": null,
        "backupMale": null,
        "targetFemale": "53"
    },
    {
        "backupFemale": null,
        "backupMale": null,
        "targetFemale": "51"
    },
    {
        "backupFemale": null,
        "backupMale": null
    },
    {
        "backupFemale": null,
        "backupMale": null
    }
]


const inputData = ref(mockData);
const outputData = ref([]);

const batchRef =  ref(null)

function editRow(_gender, _role) {
	type.value = 'edit'
	gender.value = _gender
	role.value = _role
	
	const roleProp = role.value === '目标角色' ? 'target' : 'backup'
	malePowers.value = inputData.value.map(item => item[`${roleProp}Male`]).filter(item => !!item).join(',')
	feMalePowers.value = inputData.value.map(item => item[`${roleProp}Female`]).filter(item => !!item).join(',')
	batchRef.value.open()
}


function switchRoles(){
	const cloneInputData = inputData.value.map(item => ({ ...item }))
	const backups = inputData.value.map(item => ({ male: item.backupMale, female: item.backupFemale }))
	const targets = inputData.value.map(item => ({ male: item.targetMale, female: item.targetFemale }))
	
	inputData.value = inputData.value.map((_, index) => ({
		backupFemale: targets[index]?.female || null,
		backupMale: targets[index]?.male || null,
		targetFemale: backups[index]?.female || null,
		targetMale: backups[index]?.male || null,
	}))

}

// 计算属性
const totalTargetPower = computed(() => {
	return outputData.value.reduce((sum, item) => (sum + item.targetGender ? (Number(item.targetPower) || 0) : 0), 0);
});

const totalBackupPower = computed(() => {
	return outputData.value.reduce((sum, item) => sum + (item.backupGender ? (Number(item.backupPower) || 0) : 0), 0);
});

const powerDifference = computed(() => {
    return totalTargetPower.value - totalBackupPower.value
});

// 目标角色操作
const addTargetRow = () => {
	gender.value = ''
	powers.value = ''
	role.value = ''
	batchRef.value.open()
};


function isPositiveInteger(str) {
    return /^[1-9]\d*$/.test(str);
}

function generatePowers(_powers, gender){
	const keys = ['targetMale', 'targetFemale', 'backupMale', 'backupFemale']
	
	_powers = _powers.replace(/，/g, ',')
	const powerSet = _powers.split(',')
	
	
	const isOk = powerSet.every(num => isPositiveInteger(num))



	if(!isOk) return false

	// if(!isOk){
	// 	ElMessage.warning('势力必须为正整数')
	// 	return
	// }
	
	
	
	const roleProp = role.value === '目标角色' ? 'target' : 'backup'
	const genderProp = gender === '公' ? 'Male' : 'Female'


	inputData.value.forEach((_, index) => {
		inputData.value[index][`${roleProp}${genderProp}`] = null
	})

	const prop = `${roleProp}${genderProp}`
	const values = inputData.value.map(item => item[prop]).filter(value => value);

	if (inputData.value.length === 0) {
		for (let index = 0; index < powerSet.length; index++) {
			const item = {}
			keys.forEach(key => {
				if (key === prop) {
					item[key] = powerSet[index]
				} else {
					item[key] = null
				}
			})

			inputData.value.push(item)
		}

	} else if (values.length < inputData.value.length) {
		let pIndex = -1
		for (let index = values.length; index < inputData.value.length; index++) {
			pIndex += 1
			inputData.value[index][prop] = powerSet[pIndex]
		}

		const calcNum = powerSet.length - (pIndex + 1)

		for (let index = 0; index < calcNum; index++) {
			pIndex += 1
			const item = {}

			keys.forEach(key => {
				if (key === prop) {
					item[key] = powerSet[pIndex]
				} else {
					item[key] = null
				}
			})

			inputData.value.push(item)
		}
	}

}


function handleConfirm(){	
	const _malePowers = malePowers.value.trim()
	const _feMalePowers = feMalePowers.value.trim()

	const  isMaleOk = generatePowers(_malePowers, '公')
	const isFemakeOk = generatePowers(_feMalePowers, '母')
	
	if(typeof isMaleOk === 'boolean' && !isMaleOk){
		ElMessage.warning('势力必须为数字')
		return
	}	else if(typeof isFemakeOk === 'boolean' && !isFemakeOk){
		ElMessage.warning('势力必须为数字')
		return
	}
	
	
	batchRef.value.close()
}

async function calculateBestMatch() {
	let startTime = new Date().getTime()
	
	
	let endTime = null
	
	outputData.value = []
	const targetData = []
	const backupData = []

	inputData.value.forEach(item => {
		if(item.targetMale){ targetData.push({ gender: '公', power: item.targetMale }) }
		if(item.targetFemale){ targetData.push({ gender: '母', power: item.targetFemale }) }
		if(item.backupMale){ backupData.push({ gender: '公', power: item.backupMale }) }
		if(item.backupFemale){ backupData.push({ gender: '母', power: item.backupFemale }) }
	})

	if (targetData.length === 0) { 
		ElMessage.warning('至少添加一条目标角色数据')
		return
	}

	if (backupData.length === 0) {
		ElMessage.warning('至少添加一条备选角色数据')
		return
	}
	
	
	
	let target = null
	let backup = null
	
	let isTansfer = false
	
	if(targetData.length > backupData.length){
		isTansfer = true
		target = backupData
		backup = targetData
	} else {
		target = targetData
		backup = backupData
	}
	
	

	const result = [];

	// 按性别分类
	const targetMale = target.filter(item => item.gender === '公');
	const targetFemale = target.filter(item => item.gender === '母');
	const backupMale = backup.filter(item => item.gender === '公');
	const backupFemale = backup.filter(item => item.gender === '母');

	// 计算匹配成本矩阵（power 差的绝对值）
	const costMatrixMaleFemale = [];
	targetMale.forEach(t => {
		const row = [];
		backupFemale.forEach(b => { row.push(Math.abs(t.power - b.power)); });
		costMatrixMaleFemale.push(row);
	});

	const costMatrixFemaleMale = [];
	targetFemale.forEach(t => {
		const row = [];
		backupMale.forEach(b => {
			row.push(Math.abs(t.power - b.power));
		});
		costMatrixFemaleMale.push(row);
	});
	

	// 匹配函数：尽量匹配并返回匹配结果
	function matchBestPairs(costMatrix, targetGroup, backupGroup) {
		const result = [];
		while (targetGroup.length > 0 && backupGroup.length > 0) {
			// 找到最小的 cost
			let minDiff = Infinity;
			let minTargetIdx = -1;
			let minBackupIdx = -1;
			
			
			for (let i = 0; i < targetGroup.length; i++) {
				for (let j = 0; j < backupGroup.length; j++) {
					if (costMatrix[i][j] < minDiff) {
						minDiff = costMatrix[i][j];
						minTargetIdx = i;
						minBackupIdx = j;
					}
				}
				
			}


			console.log(targetGroup[minTargetIdx], backupGroup[minBackupIdx])
			// 记录最小差值的匹配并移除对应元素
			result.push({ target: targetGroup[minTargetIdx], backup: backupGroup[minBackupIdx] });
			
			targetGroup.splice(minTargetIdx, 1);
			backupGroup.splice(minBackupIdx, 1);
			
		}
		return result;
	}

	// 匹配公对母，母对公
	const maleFemaleMatches = matchBestPairs(costMatrixMaleFemale, targetMale, backupFemale);
	const femaleMaleMatches = matchBestPairs(costMatrixFemaleMale, targetFemale, backupMale);
	
	// 合并匹配结果
	result.push(...maleFemaleMatches, ...femaleMaleMatches);
	
	let totalTargetPower = 0
	let totalBackupPower = 0

	result.forEach(item => {
		outputData.value.push({
			targetGender:  isTansfer ? item.backup.gender : item.target.gender,
			targetPower: isTansfer ? item.backup.power : item.target.power,
			backupGender:isTansfer ? item.target.gender : item.backup.gender,
			backupPower:isTansfer ? item.target.power : item.backup.power,
		})
	 })

	outputData.value = outputData.value.filter(item => {
		if (item.targetGender === '公' && item.backupGender === '公') return false
		if (item.targetGender === '母' && item.backupGender === '母') return false
		return true
	})

	outputData.value.forEach(item => {
		totalTargetPower = totalTargetPower + Number(item.targetPower)
		totalBackupPower = totalBackupPower + Number(item.backupPower)
	})

	outputData.value.push({
		targetGender: '',
		targetPower: totalTargetPower,
		backupGender: '',
		backupPower: totalBackupPower,
	})
	
	
	endTime = new Date().getTime()


	const calc = endTime - startTime

	
	timer.value = calc
}
</script>

<style>
textarea {
	font-size: 13px;
	padding: 8px;
}
</style>

<style lang="scss" scoped>

.dialog-title {
			line-height: 30px;
			padding-left: 10px;
			font-size: 14px;
}


	.table-wrapper {
		font-size: 14px !important;
	}
.custom-picker {
    border: 1px solid #e3e3e3;
    padding: 3px 5px;
    text-align: center;
	width: 100%;
	
    
    div {
        display: flex;
        justify-content: space-between;
        
        text {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

.container {
    padding: 20px;
}

.section {
    margin-bottom: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.input {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    padding: 5px;
}

button {
    margin: 5px;
}

.add-btn,
.calculate-btn {
    background-color: #007bff;
    color: white;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
}

.delete-btn {
    background-color: #ff4d4f;
    color: white;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
}

.summary {
    margin-top: 20px;
    font-size: 14px;
    text-align: right;
    font-weight: bold;
}
</style>