feat

pages/home/index.vue

@@ -2,22 +2,16 @@
 	<view class="container">
 		<div style="display: flex;flex-direction: column;">
 			<div style="display: flex;">
-				<el-button type="primary" style="width:100%;margin-bottom: 10px;" @click="switchRoles">
+				<button type="primary" style="width:100%;margin-bottom: 10px;" @click="switchRoles">
 					交换
-				</el-button>
-			
-				<el-button type="primary" style="width:100%;margin-bottom: 10px;"
-					@click="calculateBestMatch">
+				</button>
+				<button type="primary" style="width:100%;margin-bottom: 10px;" @click="calculateBestMatch">
 					计算最佳配对
-				</el-button>
+				</button>
 			</div>
-			
-			
-			<el-table size="small" border :data="inputData" max-height="calc(100vh - 450px)" empty-text="暂无数据，请添加猫咪势力">
-				<el-table-column label="顺序" width="55px">
-					<template #="{ $index }">{{ $index + 1 }}</template>
-				</el-table-column>
 
+			<el-table size="small" border :data="inputData" max-height="calc(100vh - 450px)" empty-text="暂无数据，请添加猫咪势力">
+				<el-table-column label="顺序" width="55px" type="index" />
 				<el-table-column label="目标">
 					<template #header>
 						<div style="display: flex;justify-content: space-between;">
@@ -38,7 +32,7 @@
 							</div>
 						</template>
 					</el-table-column>
-					
+
 					<el-table-column min-width="60px" prop="targetFemale">
 						<template #header>
 							<div style="display: flex;justify-content: space-between;">
@@ -47,8 +41,6 @@
 							</div>
 						</template>
 					</el-table-column>
-					
-					<!-- <el-table-column label="母" min-width="60px" prop="targetFemale" /> -->
 				</el-table-column>
 
 				<el-table-column label="备选">
@@ -71,7 +63,7 @@
 							</div>
 						</template>
 					</el-table-column>
-					
+
 					<el-table-column min-width="60px" prop="backupFemale">
 						<template #header>
 							<div style="display: flex;justify-content: space-between;">
@@ -88,15 +80,13 @@
 
 		<!-- 输出表格 -->
 		<view class="section" v-if="outputData.length > 0">
-			<div style="display: flex;justify-content: space-between;margin-top:10px" >
+			<div style="display: flex;justify-content: space-between;margin-top:10px">
 				<text class="section-title">输出， 计算时间 {{ time }} ms </text>
 				<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 size="small" border :data="outputData" :span="arraySpanMethod">
+				<el-table-column label="顺序" width="55px" type="index" />
 
 
 				<el-table-column label="目标">
@@ -109,6 +99,12 @@
 					<el-table-column label="母" min-width="60px" prop="backupFemale" />
 				</el-table-column>
 			</el-table>
+
+			<el-table class="hj-table" size="small" border style="margin-top:-1px">
+				<el-table-column label="合计" width="55px" />
+				<el-table-column :label="totalTarget" align="center" />
+				<el-table-column :label="totalBackup" align="center" />
+			</el-table>
 		</view>
 
 
@@ -126,23 +122,17 @@
 					<span class="dialog-title">猫咪势力(公)</span>
 					<uni-icons type="close" size="18" @click="malePowers = ''"></uni-icons>
 				</div>
-				
-				<textarea 
-					v-model="malePowers" 
-					placeholder="用逗号或顿号隔开，如:200,10,100"
-					style="height: 70px;border: 1px solid #dfe2e5" 
-				/>
+
+				<textarea v-model="malePowers" placeholder="用逗号或顿号隔开，如:200,10,100"
+					style="height: 70px;border: 1px solid #dfe2e5" />
 
 				<div style="display: flex;justify-content: space-between; align-items: center;">
 					<span class="dialog-title">猫咪势力(母)</span>
 					<uni-icons type="close" size="18" @click="feMalePowers = ''"></uni-icons>
 				</div>
-				
-				<textarea 
-					v-model="feMalePowers" 
-					placeholder="用逗号或顿号隔开，如:200,10,100"
-					style="height: 70px;border: 1px solid #dfe2e5" 
-				/>
+
+				<textarea v-model="feMalePowers" placeholder="用逗号或顿号隔开，如:200,10,100"
+					style="height: 70px;border: 1px solid #dfe2e5" />
 
 				<button size='mini' type="primary" @click="handleConfirm">保存</button>
 			</div>
@@ -165,6 +155,10 @@ const malePowers = ref('')
 const feMalePowers = ref('')
 
 
+const totalTarget = ref(0)
+const totalBackup =  ref(0)
+
+
 
 const numStat = computed(() => {
 	const stat = {
@@ -181,20 +175,154 @@ const numStat = computed(() => {
 		stat.backupFemale += item.backupFemale ? 1 : 0
 	})
 	
-	
-	console.log(stat)
 	return stat
 })
 
 
 
-const mockData = []
+const mockData = [
+	{
+		"backupFemale": "180",
+		"backupMale": "174",
+		"targetFemale": "121",
+		"targetMale": "153"
+	},
+	{
+		"backupFemale": "165",
+		"backupMale": "152",
+		"targetFemale": "118",
+		"targetMale": "91"
+	},
+	{
+		"backupFemale": "158",
+		"backupMale": "147",
+		"targetFemale": "115",
+		"targetMale": "77"
+	},
+	{
+		"backupFemale": "154",
+		"backupMale": "102",
+		"targetFemale": "86",
+		"targetMale": "138"
+	},
+	{
+		"backupFemale": "152",
+		"backupMale": "101",
+		"targetFemale": "84",
+		"targetMale": "90"
+	},
+	{
+		"backupFemale": "151",
+		"backupMale": "98",
+		"targetFemale": "84",
+		"targetMale": "80"
+	},
+	{
+		"backupFemale": "150",
+		"backupMale": "98",
+		"targetMale": "60",
+		"targetFemale": "59"
+	},
+	{
+		"backupFemale": "150",
+		"backupMale": "97",
+		"targetMale": "54",
+		"targetFemale": "53"
+	},
+	{
+		"targetMale": "52",
+		"targetFemale": "51",
+		"backupMale": "62",
+		"backupFemale": "102"
+	},
+	{
+		"targetMale": "52",
+		"backupMale": "60",
+		"backupFemale": "101"
+	},
+	{
+		"targetMale": "52",
+		"backupMale": "58",
+		"backupFemale": "101"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": "19",
+		"backupFemale": "93"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "61"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "30"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "30"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "29"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "29"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "29"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "27"
+	},
+	{
+		"targetMale": null,
+		"targetFemale": null,
+		"backupMale": null,
+		"backupFemale": "10"
+	},
+]
 
 const inputData = ref(mockData);
 const outputData = ref([]);
 
 const batchRef =  ref(null)
 
+
+const arraySpanMethod = ({
+	row,
+	column,
+	rowIndex,
+	columnIndex,
+}) => {
+	if (rowIndex % 2 === 0) {
+		if (columnIndex === 0) {
+			return [1, 2]
+		} else if (columnIndex === 1) {
+			return [0, 0]
+		}
+	}
+}
+
+
 function editRow(_gender, _role) {
 	type.value = 'edit'
 	gender.value = _gender
@@ -223,15 +351,6 @@ function switchRoles(){
 
 const powerDifference = ref(0)
 
-// 目标操作
-const addTargetRow = () => {
-	gender.value = ''
-	powers.value = ''
-	role.value = ''
-	batchRef.value.open()
-};
-
-
 function isPositiveInteger(str) {
     return /^[1-9]\d*$/.test(str);
 }
@@ -480,7 +599,6 @@ function calculateBestMatch() {
 	})
 	
 	
-	const ml = targetMale.length
 	const fl = targetFemale.length
 	
 	for(let index = 0; index < fl; index ++){
@@ -498,16 +616,13 @@ function calculateBestMatch() {
 		}
 	}
 
-	outputData.value.push({
-		targetMale: outputData.value.reduce((prev, current) => prev + current.targetMale,0),
-		targetFemale: outputData.value.reduce((prev, current) => prev + current.targetFemale,0),
-		backupMale: outputData.value.reduce((prev, current) => prev + current.backupMale,0),
-		backupFemale: outputData.value.reduce((prev, current) => prev + current.backupFemale,0)
-	})
 
-	powerDifference.value = minDifference
-	 endTime = new Date().getTime()
-	 time.value = endTime - startTime
+	 totalTarget.value = outputData.value.reduce((prev, current) => prev + current.targetMale, 0) + outputData.value.reduce((prev, current) => prev + current.targetFemale, 0)
+	 totalBackup.value = outputData.value.reduce((prev, current) => prev + current.backupMale, 0) + outputData.value.reduce((prev, current) => prev + current.backupFemale, 0)
+
+	powerDifference.value = totalTarget.value - totalBackup.value
+	endTime = new Date().getTime()
+	time.value = endTime - startTime
 }
 </script>
 
@@ -520,16 +635,28 @@ textarea {
 
 <style lang="scss" scoped>
 
+
+button {
+	height: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 14px;
+}
+
+
 .dialog-title {
-			line-height: 30px;
-			padding-left: 10px;
-			font-size: 14px;
+	line-height: 30px;
+	padding-left: 10px;
+	font-size: 14px;
+}
+
+
+.table-wrapper {
+	font-size: 14px !important;
 }
 
 
-	.table-wrapper {
-		font-size: 14px !important;
-	}
 .custom-picker {
     border: 1px solid #e3e3e3;
     padding: 3px 5px;
@@ -598,4 +725,10 @@ button {
     text-align: right;
     font-weight: bold;
 }
+
+.hj-table {
+	:deep(.el-table__body-wrapper){
+		display: none !important;
+	}
+}
 </style>