index-copy-2.vue 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138
  1. <template>
  2. <view class="container">
  3. <div style="display: flex;flex-direction: column;height: 100%">
  4. <div style="display: flex;">
  5. <button type="primary" style="width:100%;margin-bottom: 10px;margin-left:0px" @click="helpRef.open()">
  6. 使用说明
  7. </button>
  8. <button type="primary" style="width:100%;margin-bottom: 10px;" @click="viewExplam">
  9. {{ isMockData ? '清除' : '查看' }}示例
  10. </button>
  11. <button type="primary" style="width:100%;margin-bottom: 10px;" @click="switchRoles">
  12. 交换势力
  13. </button>
  14. <button type="primary" style="width:100%;margin-bottom: 10px;margin-right: 0px;" @click="calculateBestMatch">
  15. 匹配方案
  16. </button>
  17. </div>
  18. <view class="u-table" style="max-height: calc(100vh - 550px)">
  19. <view class="u-table-tr">
  20. <view class="u-table-th" style="width: 40px; border-bottom: 0;position: relative;">
  21. <div style="position: absolute;top:30px">顺序</div>
  22. </view>
  23. <view class="u-table-th" style="flex: 1">
  24. <div style="display: flex;justify-content: space-between;width: 100%">
  25. 目标
  26. <button style="margin-top: -6px" class="edit-btn" @click="editRow('公', '目标')">
  27. <uni-icons style="color: #409eff" size="14" type="compose" />
  28. </button>
  29. </div>
  30. </view>
  31. <view class="u-table-th" style="flex: 1">
  32. <div style="display: flex;justify-content: space-between;width: 100%">
  33. 备选
  34. <button style="margin-top: -6px" class="edit-btn" @click="editRow('公', '备选')">
  35. <uni-icons style="color: #409eff" size="14" type="compose" />
  36. </button>
  37. </div>
  38. </view>
  39. </view>
  40. <view class="u-table-tr">
  41. <view class="u-table-th" style="width: 40px;border-top:0px" />
  42. <view style="display: flex;flex: 1">
  43. <view class="u-table-th" style="flex: 1">
  44. <div style="display: flex;justify-content: space-between;width: 100%">
  45. <span>公</span>
  46. <span>{{ numStat.targetMale }}</span>
  47. </div>
  48. </view>
  49. <view class="u-table-th" style="flex: 1">
  50. <div style="display: flex;justify-content: space-between;width: 100%">
  51. <span>母</span>
  52. <span>{{ numStat.targetFemale }}</span>
  53. </div>
  54. </view>
  55. </view>
  56. <view style="display: flex;flex: 1">
  57. <view class="u-table-th" style="flex: 1">
  58. <div style="display: flex;justify-content: space-between;width: 100%">
  59. <span>公</span>
  60. <span>{{ numStat.backupMale }}</span>
  61. </div>
  62. </view>
  63. <view class="u-table-th" style="flex: 1">
  64. <div style="display: flex;justify-content: space-between;width: 100%">
  65. <span>母</span>
  66. <span>{{ numStat.backupFemale }}</span>
  67. </div>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="u-table-body">
  72. <view class="u-table-tr" v-for="(item, index) in inputData" :key="index">
  73. <view class="u-table-td" style="width: 40px">{{ index + 1 }}</view>
  74. <view style="display: flex;flex: 1">
  75. <view class="u-table-td" style="flex: 1">
  76. {{ item.targetMale }}
  77. </view>
  78. <view class="u-table-td" style="flex: 1">
  79. {{ item.targetFemale }}
  80. </view>
  81. </view>
  82. <view style="display: flex;flex: 1">
  83. <view class="u-table-td" style="flex: 1">
  84. {{ item.backupMale }}
  85. </view>
  86. <view class="u-table-td" style="flex: 1">
  87. {{ item.backupFemale }}
  88. </view>
  89. </view>
  90. </view>
  91. </view>
  92. <view class="u-table-body" v-if="inputData.length === 0"
  93. style="color:#909399; padding: 15px;display: flex;justify-content: center;border:1px solid #ebeef5;margin-top:-1px">
  94. 暂无数据,请添加猫咪势力
  95. </view>
  96. </view>
  97. </div>
  98. <!-- 输出表格 -->
  99. <view class="section" v-if="outputData.length > 0" style="flex: 1;margin-bottom: 0px">
  100. <div style="display: flex;justify-content: space-between;margin-top:10px">
  101. <text class="section-title">最佳方案</text>
  102. <span>差额: {{ powerDifference }}</span>
  103. </div>
  104. <view class="u-table" :style="`max-height: calc(550px - 220px)`">
  105. <view class="u-table-tr">
  106. <view class="u-table-th" style="width: 40px; border-bottom: 0;position: relative;">
  107. <div style="position: absolute;top:30px">顺序</div>
  108. </view>
  109. <view class="u-table-th" style="flex: 1">
  110. <div style="display: flex;justify-content: space-between;width: 100%">
  111. 目标
  112. </div>
  113. </view>
  114. <view class="u-table-th" style="flex: 1">
  115. <div style="display: flex;justify-content: space-between;width: 100%">
  116. 备选
  117. </div>
  118. </view>
  119. </view>
  120. <view class="u-table-tr">
  121. <view class="u-table-th" style="width: 40px;border-top:0px" />
  122. <view style="display: flex;flex: 1">
  123. <view class="u-table-th" style="flex: 1">
  124. <span>公</span>
  125. </view>
  126. <view class="u-table-th" style="flex: 1">
  127. <span>母</span>
  128. </view>
  129. </view>
  130. <view style="display: flex;flex: 1">
  131. <view class="u-table-th" style="flex: 1">
  132. <span>公</span>
  133. </view>
  134. <view class="u-table-th" style="flex: 1">
  135. <span>公</span>
  136. </view>
  137. </view>
  138. </view>
  139. <view class="u-table-body">
  140. <view class="u-table-tr" v-for="(item, index) in outputData" :key="index">
  141. <view class="u-table-td" style="width: 40px">{{ index + 1 }}</view>
  142. <view style="display: flex;flex: 1">
  143. <view class="u-table-td" style="flex: 1">
  144. {{ item.targetMale }}
  145. </view>
  146. <view class="u-table-td" style="flex: 1">
  147. {{ item.targetFemale }}
  148. </view>
  149. </view>
  150. <view style="display: flex;flex: 1">
  151. <view class="u-table-td" style="flex: 1">
  152. {{ item.backupMale }}
  153. </view>
  154. <view class="u-table-td" style="flex: 1">
  155. {{ item.backupFemale }}
  156. </view>
  157. </view>
  158. </view>
  159. <view class="u-table-tr">
  160. <view class="u-table-th" style="width: 40px">合计</view>
  161. <view class="u-table-th" style="display: flex;flex: 1;justify-content: center;">
  162. {{ totalTarget }}
  163. </view>
  164. <view class="u-table-th" style="display: flex;flex: 1;justify-content: center;">
  165. {{ totalBackup }}
  166. </view>
  167. </view>
  168. </view>
  169. </view>
  170. <!-- <uni-table border stripe emptyText="暂无更多数据">
  171. <uni-tr>
  172. <uni-th width="60px" rowspan="2">顺序</uni-th>
  173. <uni-th align="left" colspan="2" width="120px">目标</uni-th>
  174. <uni-th align="left" colspan="2" width="120px">备选</uni-th>
  175. </uni-tr>
  176. <uni-tr>
  177. <uni-th align="left" width="60px">目标</uni-th>
  178. <uni-th align="left" width="60px">备选</uni-th>
  179. <uni-th align="left" width="60px">目标</uni-th>
  180. <uni-th align="left" width="60px">备选</uni-th>
  181. </uni-tr>
  182. <uni-tr v-for="(item, index) in outputData" :key="index">
  183. <uni-td>{{ index + 1 }}</uni-td>
  184. <uni-td>{{ item.targetMale }}</uni-td>
  185. <uni-td>{{ item.targetFemale }}</uni-td>
  186. <uni-td>{{ item.backupMale }}</uni-td>
  187. <uni-td>{{ item.backupFemale }}</uni-td>
  188. </uni-tr>
  189. <uni-tr>
  190. <uni-td>合计</uni-td>
  191. <uni-td colspan="2">{{ totalTarget }}</uni-td>
  192. <uni-td colspan="2">{{ totalBackup }}</uni-td>
  193. </uni-tr>
  194. </uni-table> -->
  195. </view>
  196. <uni-popup ref="batchRef" :is-mask-click="false">
  197. <div
  198. style="display: flex;flex-direction: column;justify-content: center;padding: 10px; width: 95%;background: #fff;border-radius: 10px;padding: 10px;">
  199. <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
  200. <span></span>
  201. <h4 style="margin-bottom: 10px"> 编辑{{ role }}</h4>
  202. <uni-icons type="closeempty" size="18" @click="batchRef.close()"></uni-icons>
  203. </div>
  204. <div style="display: flex;justify-content: space-between; align-items: center;">
  205. <span class="dialog-title">猫咪势力(公)</span>
  206. <uni-icons type="close" size="18" @click="malePowers = ''"></uni-icons>
  207. </div>
  208. <textarea v-model="malePowers" placeholder="用逗号或顿号隔开,如:200,150,100"
  209. style="height: 70px;border: 1px solid #dfe2e5" />
  210. <div style="display: flex;justify-content: space-between; align-items: center;">
  211. <span class="dialog-title">猫咪势力(母)</span>
  212. <uni-icons type="close" size="18" @click="feMalePowers = ''"></uni-icons>
  213. </div>
  214. <textarea v-model="feMalePowers" placeholder="用逗号或顿号隔开,如:200,150,100"
  215. style="height: 70px;border: 1px solid #dfe2e5" />
  216. <button size='mini' type="primary" @click="handleConfirm">保存</button>
  217. </div>
  218. </uni-popup>
  219. <uni-popup ref="messageRef" type="message">
  220. <uni-popup-message type="error" :message="messageText" :duration="5000"></uni-popup-message>
  221. </uni-popup>
  222. <uni-popup ref="helpRef" :is-mask-click="false">
  223. <div class="help-modal" style="display: flex; justify-content: center;flex-direction: column;padding: 10px; width: 90vw;background: #fff;border-radius: 10px;padding: 30px;box-sizing: border-box;">
  224. <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
  225. <span></span>
  226. <h4 style="margin-bottom: 10px">使用说明</h4>
  227. <uni-icons type="closeempty" size="18" @click="helpRef.close()"></uni-icons>
  228. </div>
  229. <div style="margin-bottom: 10px;">
  230. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“喵缘礼堂”是一款专注于为猫咪结婚提供解决方案的应用。它以所有目标角色猫咪的势力总和作为基准,通过筛选备选角色猫咪,为用户匹配出其势力总和最接近目标角色猫咪势力总和的方案。
  231. </div>
  232. <div>
  233. <p style="font-weight: bold;margin-bottom: 10px">使用方法:</p>
  234. <p style="margin-bottom: 10px">1.录入目标猫咪势力数据,总数≤20 只,依次准确填写。</p>
  235. <p style="margin-bottom: 10px">2.输入备选猫咪势力数据,不同性别数均≤20 只,详细填写。</p>
  236. <p>3.点击 “计算最佳匹配方案”,系统将据此算出最适配方案。</p>
  237. </div>
  238. </div>
  239. </uni-popup>
  240. <div class="loading" v-if="loading">
  241. <div class="loading-wrapper">
  242. <image src="./cat-load.gif" style="width:260px;height:260px" />
  243. </div>
  244. </div>
  245. </view>
  246. </template>
  247. <script setup>
  248. import { ref, computed, onMounted } from 'vue';
  249. const isMockData = ref(false)
  250. const loading = ref(false)
  251. const helpRef = ref(null)
  252. const messageRef = ref(null)
  253. const messageText = ref('')
  254. const time = ref("")
  255. const role = ref("")
  256. const type = ref('')
  257. const gender = ref("")
  258. const powers = ref("")
  259. const malePowers = ref('')
  260. const feMalePowers = ref('')
  261. const windowHeight = ref(0)
  262. const totalTarget = ref(0)
  263. const totalBackup = ref(0)
  264. uni.getSystemInfo({
  265. success(info){ windowHeight.value = info.windowHeight / 2}
  266. })
  267. const numStat = computed(() => {
  268. const stat = {
  269. targetMale: 0,
  270. targetFemale: 0,
  271. backupMale: 0,
  272. backupFemale: 0
  273. }
  274. inputData.value.forEach(item => {
  275. stat.targetMale += item.targetMale ? 1 : 0
  276. stat.targetFemale += item.targetFemale ? 1 : 0
  277. stat.backupMale += item.backupMale ? 1 : 0
  278. stat.backupFemale += item.backupFemale ? 1 : 0
  279. })
  280. return stat
  281. })
  282. const mockData = [
  283. {
  284. "targetMale": "153",
  285. "targetFemale": "121",
  286. "backupMale": "174",
  287. "backupFemale": "180"
  288. },
  289. {
  290. "targetMale": "138",
  291. "targetFemale": "118",
  292. "backupMale": "152",
  293. "backupFemale": "165"
  294. },
  295. {
  296. "targetMale": "91",
  297. "targetFemale": "115",
  298. "backupMale": "147",
  299. "backupFemale": "158"
  300. },
  301. {
  302. "targetMale": "90",
  303. "targetFemale": "86",
  304. "backupMale": "102",
  305. "backupFemale": "154"
  306. },
  307. {
  308. "targetMale": "80",
  309. "targetFemale": "84",
  310. "backupMale": "101",
  311. "backupFemale": "152"
  312. },
  313. {
  314. "targetMale": "77",
  315. "targetFemale": "84",
  316. "backupMale": "98",
  317. "backupFemale": "151"
  318. },
  319. {
  320. "targetMale": "60",
  321. "targetFemale": "59",
  322. "backupMale": "98",
  323. "backupFemale": "150"
  324. },
  325. {
  326. "targetMale": "54",
  327. "targetFemale": "53",
  328. "backupMale": "97",
  329. "backupFemale": "150"
  330. },
  331. {
  332. "targetMale": "52",
  333. "targetFemale": "51",
  334. "backupMale": "62",
  335. "backupFemale": "102"
  336. },
  337. {
  338. "targetMale": "52",
  339. "backupMale": "60",
  340. "backupFemale": "101"
  341. },
  342. {
  343. "targetMale": "52",
  344. "backupMale": "58",
  345. "backupFemale": "101"
  346. },
  347. {
  348. "targetMale": null,
  349. "targetFemale": null,
  350. "backupMale": "19",
  351. "backupFemale": "93"
  352. },
  353. {
  354. "targetMale": null,
  355. "targetFemale": null,
  356. "backupMale": null,
  357. "backupFemale": "61"
  358. },
  359. {
  360. "targetMale": null,
  361. "targetFemale": null,
  362. "backupMale": null,
  363. "backupFemale": "30"
  364. },
  365. {
  366. "targetMale": null,
  367. "targetFemale": null,
  368. "backupMale": null,
  369. "backupFemale": "30"
  370. },
  371. {
  372. "targetMale": null,
  373. "targetFemale": null,
  374. "backupMale": null,
  375. "backupFemale": "29"
  376. },
  377. {
  378. "targetMale": null,
  379. "targetFemale": null,
  380. "backupMale": null,
  381. "backupFemale": "29"
  382. },
  383. {
  384. "targetMale": null,
  385. "targetFemale": null,
  386. "backupMale": null,
  387. "backupFemale": "29"
  388. },
  389. {
  390. "targetMale": null,
  391. "targetFemale": null,
  392. "backupMale": null,
  393. "backupFemale": "27"
  394. },
  395. {
  396. "targetMale": null,
  397. "targetFemale": null,
  398. "backupMale": null,
  399. "backupFemale": "10"
  400. }
  401. ]
  402. const mockOutData = [
  403. {
  404. "targetMale": 153,
  405. "targetFemale": 121,
  406. "backupMale": 102,
  407. "backupFemale": 180
  408. },
  409. {
  410. "targetMale": 138,
  411. "targetFemale": 118,
  412. "backupMale": 101,
  413. "backupFemale": 165
  414. },
  415. {
  416. "targetMale": 91,
  417. "targetFemale": 115,
  418. "backupMale": 98,
  419. "backupFemale": 158
  420. },
  421. {
  422. "targetMale": 90,
  423. "targetFemale": 86,
  424. "backupMale": 98,
  425. "backupFemale": 154
  426. },
  427. {
  428. "targetMale": 80,
  429. "targetFemale": 84,
  430. "backupMale": 97,
  431. "backupFemale": 101
  432. },
  433. {
  434. "targetMale": 77,
  435. "targetFemale": 84,
  436. "backupMale": 62,
  437. "backupFemale": 93
  438. },
  439. {
  440. "targetMale": 60,
  441. "targetFemale": 59,
  442. "backupMale": 60,
  443. "backupFemale": 29
  444. },
  445. {
  446. "targetMale": 54,
  447. "targetFemale": 53,
  448. "backupMale": 58,
  449. "backupFemale": 29
  450. },
  451. {
  452. "targetMale": 52,
  453. "targetFemale": 51,
  454. "backupMale": 19,
  455. "backupFemale": 29
  456. },
  457. {
  458. "targetMale": 52,
  459. "targetFemale": null,
  460. "backupMale": null,
  461. "backupFemale": 27
  462. },
  463. {
  464. "targetMale": 52,
  465. "targetFemale": null,
  466. "backupMale": null,
  467. "backupFemale": 10
  468. }
  469. ]
  470. const inputData = ref([]);
  471. const outputData = ref([]);
  472. const batchRef = ref(null)
  473. const arraySpanMethod = ({
  474. row,
  475. column,
  476. rowIndex,
  477. columnIndex,
  478. }) => {
  479. if (rowIndex % 2 === 0) {
  480. if (columnIndex === 0) {
  481. return [1, 2]
  482. } else if (columnIndex === 1) {
  483. return [0, 0]
  484. }
  485. }
  486. }
  487. function viewExplam(){
  488. if(!isMockData.value){
  489. inputData.value = JSON.parse(JSON.stringify(mockData))
  490. outputData.value = JSON.parse(JSON.stringify(mockOutData))
  491. totalTarget.value = 1670
  492. totalBackup.value = 1670
  493. } else {
  494. inputData.value = []
  495. outputData.value = []
  496. totalTarget.value = 0
  497. totalBackup.value = 0
  498. }
  499. isMockData.value = !isMockData.value
  500. }
  501. function editRow(_gender, _role) {
  502. console.log(1,2,3,4);
  503. type.value = 'edit'
  504. gender.value = _gender
  505. role.value = _role
  506. const roleProp = role.value === '目标' ? 'target' : 'backup'
  507. malePowers.value = inputData.value.map(item => item[`${roleProp}Male`]).filter(item => !!item).join(',')
  508. feMalePowers.value = inputData.value.map(item => item[`${roleProp}Female`]).filter(item => !!item).join(',')
  509. batchRef.value.open()
  510. }
  511. function switchRoles(){
  512. outputData.value = []
  513. const backups = inputData.value.map(item => ({ male: item.backupMale, female: item.backupFemale }))
  514. const targets = inputData.value.map(item => ({ male: item.targetMale, female: item.targetFemale }))
  515. inputData.value = inputData.value.map((_, index) => ({
  516. backupFemale: targets[index]?.female || null,
  517. backupMale: targets[index]?.male || null,
  518. targetFemale: backups[index]?.female || null,
  519. targetMale: backups[index]?.male || null,
  520. }))
  521. }
  522. const powerDifference = ref(0)
  523. function isPositiveInteger(str) {
  524. return /^[1-9]\d*$/.test(str);
  525. }
  526. function generatePowers(_powers, gender){
  527. const keys = ['targetMale', 'targetFemale', 'backupMale', 'backupFemale']
  528. _powers = _powers.replace(/,|、|,/g, ',')
  529. let powerSet = _powers.split(',').map(item => item.trim()).filter(item => item !== '')
  530. const isOk = powerSet.every(num => isPositiveInteger(num))
  531. if (!isOk && powerSet.length !== 0) return false
  532. powerSet.sort((a,b) => b - a)
  533. const roleProp = role.value === '目标' ? 'target' : 'backup'
  534. const genderProp = gender === '公' ? 'Male' : 'Female'
  535. inputData.value.forEach((_, index) => { inputData.value[index][`${roleProp}${genderProp}`] = null })
  536. const prop = `${roleProp}${genderProp}`
  537. const values = inputData.value.map(item => item[prop]).filter(value => value);
  538. if (inputData.value.length === 0) {
  539. for (let index = 0; index < powerSet.length; index++) {
  540. const item = {}
  541. keys.forEach(key => {
  542. if (key === prop) {
  543. item[key] = powerSet[index]
  544. } else {
  545. item[key] = null
  546. }
  547. })
  548. inputData.value.push(item)
  549. }
  550. } else if (values.length < inputData.value.length) {
  551. let pIndex = -1
  552. for (let index = values.length; index < inputData.value.length; index++) {
  553. pIndex += 1
  554. inputData.value[index][prop] = powerSet[pIndex]
  555. }
  556. const calcNum = powerSet.length - (pIndex + 1)
  557. for (let index = 0; index < calcNum; index++) {
  558. pIndex += 1
  559. const item = {}
  560. keys.forEach(key => {
  561. if (key === prop) {
  562. item[key] = powerSet[pIndex]
  563. } else {
  564. item[key] = null
  565. }
  566. })
  567. inputData.value.push(item)
  568. }
  569. }
  570. inputData.value = inputData.value.filter(item => {
  571. if(!item.backupFemale && !item.backupMale && !item.targetFemale && !item.targetMale){
  572. return false
  573. }
  574. return true
  575. })
  576. }
  577. function handleConfirm(){
  578. const _malePowers = malePowers.value.trim()
  579. const _feMalePowers = feMalePowers.value.trim()
  580. const isMaleOk = generatePowers(_malePowers, '公')
  581. const isFemakeOk = generatePowers(_feMalePowers, '母')
  582. if(typeof isMaleOk === 'boolean' && !isMaleOk){
  583. messageRef.value.open()
  584. messageText.value = '势力必须为数字'
  585. return
  586. } else if(typeof isFemakeOk === 'boolean' && !isFemakeOk){
  587. messageRef.value.open()
  588. messageText.value = '势力必须为数字'
  589. return
  590. }
  591. outputData.value = []
  592. batchRef.value.close()
  593. }
  594. // 生成数组的所有组合(辅助函数,用于生成指定个数元素的组合情况)
  595. function getCombinations(arr, num) {
  596. const result = [];
  597. if (num === 0) { return [[]]; }
  598. for (let i = 0; i < arr.length; i++) {
  599. const element = arr[i];
  600. const remainingCombos = getCombinations(arr.slice(i + 1), num - 1);
  601. for (const combo of remainingCombos) {
  602. result.push([element].concat(combo));
  603. }
  604. }
  605. return result;
  606. }
  607. async function calculateBestMatch() {
  608. if(outputData.value.length !== 0){
  609. messageRef.value.open()
  610. messageText.value = '请编辑猫咪势力后,再匹配方案'
  611. return
  612. }
  613. outputData.value = []
  614. const targetData = []
  615. const backupData = []
  616. inputData.value.forEach(item => {
  617. if (item.targetMale) { targetData.push({ gender: '公', power: item.targetMale }) }
  618. if (item.targetFemale) { targetData.push({ gender: '母', power: item.targetFemale }) }
  619. if (item.backupMale) { backupData.push({ gender: '公', power: item.backupMale }) }
  620. if (item.backupFemale) { backupData.push({ gender: '母', power: item.backupFemale }) }
  621. })
  622. const targetMale = targetData.filter(item => item.gender === '公').map(item => Number(item.power));
  623. const targetFemale = targetData.filter(item => item.gender === '母').map(item => Number(item.power));
  624. const backupMale = backupData.filter(item => item.gender === '公').map(item => Number(item.power));
  625. const backupFemale = backupData.filter(item => item.gender === '母').map(item => Number(item.power));
  626. // const targetMale = [153, 91, 77, 138, 90, 80, 60, 54, 52, 52, 52];
  627. // const targetFemale = [121, 118, 115, 86, 84, 84, 59, 53, 51];
  628. // const backupMale = [180, 165, 158, 154, 152, 151, 150, 150, 102, 101, 101, 93, 61, 30, 30, 29, 29, 29, 27, 10, 10];
  629. // const backupFemale = [174, 152, 147, 102, 101, 98, 98, 97, 62, 60, 58, 19];
  630. // const targetMale = [238, 90, 90];
  631. // const targetFemale = [86, 84, 84];
  632. // const backupMale = [153, 91, 77];
  633. // const backupFemale = [121, 118, 115];
  634. if (targetMale.length === 0 && targetFemale.length === 0) {
  635. messageRef.value.open()
  636. messageText.value = '目标公数据与母数据不能同时为空'
  637. return
  638. }
  639. if (targetFemale.length + targetFemale.length > 20) {
  640. messageRef.value.open()
  641. messageText.value = '目标公数据与母数据的和不能超过20条'
  642. return
  643. }
  644. if (backupMale.length > 20) {
  645. messageRef.value.open()
  646. messageText.value = '备选的公数据不能超过20条'
  647. return
  648. }
  649. if (backupFemale.length > 20) {
  650. messageRef.value.open()
  651. messageText.value = '备选的母数据不能超过20条'
  652. return
  653. }
  654. if (targetFemale.length > backupMale.length && backupMale.length !== 0) {
  655. messageRef.value.open()
  656. messageText.value = '备选的公数据长度必须大于或等于目标的母数据'
  657. return
  658. }
  659. if (targetMale.length > backupFemale.length && backupFemale.length !== 0) {
  660. messageRef.value.open()
  661. messageText.value = '备选的母数据长度必须或等于大于目标的公数据'
  662. return
  663. }
  664. loading.value = true
  665. await handleData(targetMale, targetFemale, backupMale, backupFemale)
  666. loading.value = false
  667. }
  668. function stop(delay){
  669. return new Promise((resolve) => setTimeout(() => {resolve(true)}, delay) )
  670. }
  671. function handleData(targetMale, targetFemale, backupMale, backupFemale){
  672. return new Promise((resolve) => {
  673. setTimeout(async () => {
  674. let startTime = new Date().getTime()
  675. let endTime = null
  676. const targetMaleLen = targetMale.length;
  677. const targetFemaleLen = targetFemale.length;
  678. let targetWeight = 0
  679. if (backupMale.length === 0){
  680. targetWeight = targetMale.reduce((acc, val) => acc + val, 0);
  681. } else if(backupFemale.length === 0){
  682. targetWeight = targetFemale.reduce((acc, val) => acc + val, 0)
  683. } else if(backupMale.length !== 0 && backupFemale.length !== 0){
  684. targetWeight = targetMale.reduce((acc, val) => acc + val, 0) + targetFemale.reduce((acc, val) => acc + val, 0);
  685. }
  686. let minDifference = Infinity;
  687. let bestfemaleCombination = null;
  688. let bestMaleCombination = null;
  689. const femaleCombinations = getCombinations(backupFemale, targetMaleLen);
  690. const maleCombinations = getCombinations(backupMale, targetFemaleLen);
  691. if (femaleCombinations.length !== 0 && maleCombinations.length !== 0){
  692. for (const femaleComb of femaleCombinations) {
  693. for (const maleComb of maleCombinations) {
  694. const totalWeight = femaleComb.reduce((acc, val) => acc + val, 0) + maleComb.reduce((acc, val) => acc + val, 0);
  695. const difference = Math.abs(totalWeight - targetWeight);
  696. if (difference < minDifference) {
  697. minDifference = difference;
  698. bestfemaleCombination = femaleComb;
  699. bestMaleCombination = maleComb;
  700. if (minDifference == 0) {
  701. break;
  702. }
  703. }
  704. }
  705. }
  706. }
  707. // 备选数据的母为空
  708. if (femaleCombinations.length === 0 && maleCombinations.length !== 0) {
  709. for (const maleComb of maleCombinations) {
  710. const totalWeight = maleComb.reduce((acc, val) => acc + val , 0);
  711. const difference = Math.abs(totalWeight - targetWeight);
  712. if (difference < minDifference) {
  713. minDifference = difference;
  714. bestMaleCombination = maleComb;
  715. if (minDifference == 0) { break; }
  716. }
  717. }
  718. }
  719. // 备选数据的公为空
  720. if (femaleCombinations.length !== 0 && maleCombinations.length === 0) {
  721. for (const femaleComb of femaleCombinations) {
  722. const totalWeight = femaleComb.reduce((acc, val) => acc + val, 0)
  723. const difference = Math.abs(totalWeight - targetWeight);
  724. if (difference < minDifference) {
  725. minDifference = difference;
  726. bestfemaleCombination = femaleComb;
  727. if (minDifference == 0) { break; }
  728. }
  729. }
  730. }
  731. powerDifference.value = totalTarget.value - totalBackup.value
  732. endTime = new Date().getTime()
  733. time.value = endTime - startTime
  734. const delay = 5000 - time.value
  735. if(delay > 0){ await stop(delay) }
  736. bestMaleCombination && bestMaleCombination.sort((a, b) => b - a)
  737. bestfemaleCombination && bestfemaleCombination.sort((a, b) => b - a)
  738. targetMale.sort((a, b) => b - a)
  739. targetFemale.sort((a, b) => b - a)
  740. if (!bestMaleCombination && !bestfemaleCombination){ return }
  741. bestfemaleCombination && targetMale.forEach((_, index) => {
  742. outputData.value.push({
  743. targetMale: targetMale[index],
  744. targetFemale: null,
  745. backupMale: null,
  746. backupFemale: bestfemaleCombination[index]
  747. })
  748. })
  749. const fl = targetFemale.length
  750. for(let index = 0; index < fl; index ++){
  751. if(outputData.value[index]){
  752. outputData.value[index].targetFemale = targetFemale[index]
  753. outputData.value[index].backupMale = bestMaleCombination[index]
  754. } else {
  755. outputData.value.push({
  756. targetMale: null,
  757. targetFemale: targetFemale[index],
  758. backupMale: bestMaleCombination[index],
  759. backupFemale: null
  760. })
  761. }
  762. }
  763. totalTarget.value = outputData.value.reduce((prev, current) => prev + current.targetMale, 0) + outputData.value.reduce((prev, current) => prev + current.targetFemale, 0)
  764. totalBackup.value = outputData.value.reduce((prev, current) => prev + current.backupMale, 0) + outputData.value.reduce((prev, current) => prev + current.backupFemale, 0)
  765. resolve(time.value)
  766. }, 0)
  767. })
  768. }
  769. </script>
  770. <style>
  771. .help-modal {
  772. line-height: 24px;
  773. color: #2c3e50;
  774. }
  775. .u-table{
  776. display: flex;
  777. flex-direction: column;
  778. width: 100%;
  779. height: 80px;
  780. justify-content: flex-start;
  781. font-size: 14px !important;
  782. height: auto;
  783. border-top: 1px solid #ebeef5;
  784. border-left: 1px solid #ebeef5;
  785. /* background: red */
  786. }
  787. .u-table-tr {
  788. display: flex;
  789. color: #909399;
  790. height: 40px !important;
  791. margin-top: -1px;
  792. }
  793. .u-table-body {
  794. height: calc(100% - 80px);
  795. overflow: auto;
  796. }
  797. .u-table-th {
  798. display: flex;
  799. border: 1px solid #ebeef5;
  800. padding: 8px 10px;
  801. margin-left: -1px;
  802. font-weight: bold;
  803. }
  804. .u-table-td {
  805. display: flex;
  806. border: 1px solid #ebeef5;
  807. padding: 8px 10px;
  808. margin-left: -1px;
  809. }
  810. .u-table-th-custom {
  811. display: flex;
  812. border: 1px solid #ebeef5;
  813. margin-left: -1px;
  814. }
  815. .edit-btn {
  816. padding: 0px !important;
  817. border: 0px !important;
  818. display: block;
  819. background: #fff !important;
  820. }
  821. .edit-btn:after {
  822. border: 0px !important;
  823. }
  824. @keyframes spin {
  825. 0% { transform: rotate(0deg); }
  826. 100% { transform: rotate(360deg); }
  827. }
  828. .loader {
  829. animation: spin 2s linear infinite; /* 应用旋转动画 */
  830. }
  831. textarea {
  832. font-size: 13px;
  833. padding: 8px;
  834. }
  835. </style>
  836. <style lang="scss" scoped>
  837. button {
  838. height: 30px;
  839. display: flex;
  840. align-items: center;
  841. justify-content: center;
  842. font-size: 14px;
  843. padding: 0px !important;
  844. text-wrap: nowrap !important;
  845. }
  846. .dialog-title {
  847. line-height: 30px;
  848. padding-left: 10px;
  849. font-size: 14px;
  850. }
  851. .table-wrapper {
  852. font-size: 14px !important;
  853. }
  854. .custom-picker {
  855. border: 1px solid #e3e3e3;
  856. padding: 3px 5px;
  857. text-align: center;
  858. width: 100%;
  859. div {
  860. display: flex;
  861. justify-content: space-between;
  862. text {
  863. overflow: hidden;
  864. white-space: nowrap;
  865. text-overflow: ellipsis;
  866. }
  867. }
  868. }
  869. .container {
  870. padding: 10px 20px;
  871. display: flex;
  872. flex-direction: column;
  873. }
  874. .section {
  875. margin-bottom: 20px;
  876. }
  877. .section-title {
  878. font-size: 18px;
  879. font-weight: bold;
  880. margin-bottom: 10px;
  881. }
  882. .input {
  883. width: 100%;
  884. text-align: center;
  885. border: 1px solid #ddd;
  886. padding: 5px;
  887. }
  888. button {
  889. margin: 5px;
  890. }
  891. .add-btn,
  892. .calculate-btn {
  893. background-color: #007bff;
  894. color: white;
  895. padding: 10px;
  896. font-size: 16px;
  897. text-align: center;
  898. border-radius: 5px;
  899. }
  900. .delete-btn {
  901. background-color: #ff4d4f;
  902. color: white;
  903. padding: 5px;
  904. font-size: 14px;
  905. border-radius: 5px;
  906. }
  907. .summary {
  908. margin-top: 20px;
  909. font-size: 14px;
  910. text-align: right;
  911. font-weight: bold;
  912. }
  913. .hj-table {
  914. :deep(.el-table__body-wrapper){
  915. display: none !important;
  916. }
  917. }
  918. .loading {
  919. position: fixed;
  920. top: 0px;
  921. left: 0px;
  922. width: 100vw;
  923. height: 100vh;
  924. background: rgba(0,0,0,.6);
  925. display: flex;
  926. justify-content: center;
  927. align-items: center;
  928. .loading-wrapper {
  929. height: 260px;
  930. width: 260px;
  931. border-radius: 100%;
  932. overflow:hidden;
  933. display:flex;
  934. justify-content: center;
  935. align-items: center;
  936. img {
  937. height: 260px;
  938. width: 260px;
  939. }
  940. }
  941. }
  942. </style>