<template>
<div id="app">
<div class="r9page">
<!-- <p class="r9title">第XXX</p> -->
<div class="r9list" v-for="(item,index) in listData">
<div class="r9num">{{index+1}}</div>
<div class="r9sele">
<span @click="clickSpan(1,index)" :style="{background: item.x0 !== undefined ? '#bbb': '' }">3 {{item.x0}}</span>
<span @click="clickSpan(2,index)" :style="{background: item.x1 !== undefined ? '#bbb': '' }">1 {{item.x1}}</span>
<span @click="clickSpan(3,index)" :style="{background: item.x2 !== undefined ? '#bbb': '' }">0 {{item.x2}}</span>
</div>
</div>
<div class="r9btn">
<!-- <span>选了<em>0</em><i class="r9tag">至少选9个</i></span> -->
<span @click="submit()">选好了</span>{{mon}}
</div>
</div>
<div class="r9res">
<div class="r9table" v-for="(item,index) in combination">
<div class="tbeNum">{{index+1}}.</div>
<div class="tbecon">
<div class="tbelist" v-for="(itm,idx) in item">
<span v-if="itm.x0 !== undefined || itm.x1 !== undefined || itm.x2 !== undefined">
{{itm.x0 ? 3 : ''}} {{itm.x1 ? 1 :''}} {{itm.x2 ? 0 :''}}
</span>
<span v-else>*</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
listData:[{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
seleRow:[],
combination:[],
noSeleRow:[],
mon:1
}
},
mounted(){
console.log(this.listData,999)
},
methods:{
clickSpan(x,y){
let sx = x === 1 ? 'x0' : x === 2 ? 'x1' : x === 3 ? 'x2' : ''
if(this.listData[y][sx] !== undefined){
delete this.listData[y][sx]
console.log(this.listData,111)
this.fSeleSpanY(y)
this.$forceUpdate()
return
}
this.listData[y][sx] = x
// this.listData[y].y = y
console.log(this.listData,222)
this.fSeleSpanY(y)
this.$forceUpdate()
},
fSeleSpanY(y){
this.combination = []
this.listData.forEach((item,index) => {
/* 等于1说明只有一个y的key,所以删除*/
if(Object.keys(item).length === 1){
delete this.listData[y].y
}
})
this.seleRow = []
this.noSeleRow = []
this.listData.forEach((item,index) => {
/* 记录y编号与选中的x */
if(JSON.stringify(item) !== '{}'){
item.y = index
this.seleRow.push(item)
}else{
this.noSeleRow.push(index)
}
})
console.log(this.seleRow,'行')
},
/* 提交 */
submit(){
if(this.seleRow.length<9){
alert('NO')
return
}
this.combination = this.cmn(this.seleRow,9)
/* 遗漏项 */
let omit = []
this.combination.forEach((item1,index1) => {
omit.push(this.getNewArr(item1,this.seleRow))
})
// 指定位置插入遗漏的kong值
this.combination.forEach((item1,index1) => {
omit.forEach((item3,index3) => {
if(index1 === index3){
item3.forEach((item4,index4) => {
item1.splice(item4.y*1, 0, {
key:'kong'
});
})
}
})
})
// 指定位置插入没选的kong值
this.combination.forEach((item1,index1) => { //指定位置插入值
this.noSeleRow.forEach((item3,index3) => {
item1.splice(item3, 0, {
key:'kong'
});
})
})
let localPar = {
time:this.currentDate(),
data:this.combination
}
let lishi = JSON.parse(localStorage.getItem('r9HistoryData')) || []
lishi.push(localPar)
// 只保留最近三次的数组
if(lishi.length>3){
lishi.splice(0,1)
}
localStorage.setItem('r9HistoryData',JSON.stringify(lishi))
/* 计算多少种可能性 */
let mon = 0
this.combination.forEach((item0,index0) => {
let mon3b = 0
let mon2b = 0
console.log(item0,'=======')
item0.forEach((item1,index1) => {
if(item1.x0 && item1.x1 && item1.x2 ){
console.log(item1,'---333----')
mon3b ++
}else if((item1.x0 && item1.x1) || (item1.x0 && item1.x2) || (item1.x1 && item1.x2)){
console.log(item1,'---222----')
mon2b++
}
})
mon = mon + Math.pow(3,mon3b) * Math.pow(2,mon2b)
})
this.mon = mon
console.log(this.combination,'combination')
},
//求：组合C(m, n)，m为上标，n为下标。m选n的所有项
cmn(m, n, currentIndex = 0, choseArr = [], result = []) {
let mLen = m.length
if (currentIndex + n > mLen) {
return
}
for (let i = currentIndex; i < mLen; i++) {
if (n === 1) {
result.push([...choseArr, m[i]])
i + 1 < mLen && this.cmn(m, n, i + 1, choseArr, result)
break
}
this.cmn(m, n - 1, i + 1, [...choseArr, m[i]], result)
}
return result
},
/*筛选数组中不相同的值*/
getNewArr(a,b){
const arr = [...a,...b];
return arr.filter(item => {
return !(a.includes(item) && b.includes(item));
});
},
/* 获取当前时间 */
currentDate(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
month = month + 1 > 12 ? 1 : month + 1;
month = month > 9 ? month : "0" +month.toString();
var day = d.getDate();
var hour = d.getHours();
hour = hour > 9 ? hour : "0" + hour.toString();
var minute = d.getMinutes();
minute = minute > 9 ? minute : "0" + minute.toString();
var second = d.getSeconds();
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
}
}
</script>
<style scoped="scoped">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.r9page {
width: 100%;
}
.r9title{}
.r9list{
display: flex;
justify-content: space-evenly;
margin-bottom: 10px;
}
.r9num{
width: 30%;
padding: 1px 0;
}
.r9sele{
width: 70%;
display: flex;
justify-content: space-evenly;
}
.r9sele span{
width: 30%;
background: #eee;
padding: 1px 0;
display: flex;
align-items: center;
justify-content: center;
}
.r9sele span:last-child{
border-right: none;
}
.r9btn{
display: flex;
justify-content: space-between;
}
.r9btn span{
width: 50%;
}
.r9tag{
font-style: normal;
display: block;
font-size: 8px;
color: #666;
}
/* table */
.r9res{
width: 100%;
}
.r9table{
display: flex;
align-items: center;
height: 46px;
}
.r9table .tbeNum{
font-size: 12px;
width: 34px;
}
.r9table .tbelist{
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
height: 100%;
display: flex;
align-items: center;
}
.r9table .tbecon{
border-left: 1px solid #CCCCCC;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.r9table:last-child .tbecon:last-child{
border-bottom: 1px solid #CCCCCC;
}
.r9table .tbelist span{
float: left;
font-size: 12px;
display: block;
text-align: center;
margin: 0 auto;
width: 15px;
padding: 0 3px;
}
</style>
网友评论