优化选座方案

src/pages/20181112o4/src/components/app.css

@@ -24,17 +24,23 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content:center;
+  justify-content:space-around;
+  align-items:center;
 }
 
 .btn {
-  width: 100px;
+  /* width: 100px; */
+  height: 30px;
+}
+
+.select-box>select {
   height: 30px;
 }
 
 .record {
-  flex: 10;
+  flex: 3;
   overflow-y: auto;
+  text-align: center;
 }
 
 .group {

src/pages/20181112o4/src/components/app.js

@@ -14,14 +14,18 @@ class App extends Component {
       this.gap = 2;
       this.group = 4;
       this.lines = (this.back - this.front) / this.gap;
+      this.rows = [];
       this.seats = [];
       this.record = [];
       this.state = {
          seatList: this.seats,
-         record: this.record
+         record: this.record,
+         seats:1
       };
 
-      this.handleClickBtn = this.handleClickBtn.bind(this);
+      this.handleClickBeginBtn = this.handleClickBeginBtn.bind(this);
+      this.handleClickRandomBtn = this.handleClickRandomBtn.bind(this);
+      this.onChooseSeats = this.onChooseSeats.bind(this);
    }
 
    groupName(g) {
@@ -47,6 +51,7 @@ class App extends Component {
       let index = 0;
       for (let g = 0; g < this.group; g++) {
          for (let line = this.lines; line >= 0; line--) {
+            let rowArray = [];
             for (let seat = 0; seat < (this.back - this.gap * (this.lines - line)); seat++) {
                let item = {
                   index:index++,
@@ -56,9 +61,11 @@ class App extends Component {
                   row: line,
                   disable:false
                };
+               rowArray.push(item);
                this.seats.push(item);
                //console.log(item)
             }
+            this.rows.push(rowArray);
          };
       }
       
@@ -66,6 +73,7 @@ class App extends Component {
          seatList: this.seats
       })
       //console.log(this.state.seatList)
+      //console.log(this.rows)
    }
 
    componentDidUpdate() {
@@ -109,50 +117,113 @@ class App extends Component {
       return input;
    }
 
-   randomSeat() {
+   randomOne() {
       let haveSeats = this.seats.filter((item) => {
          return !item.disable;
       });
-      let index =  Math.floor(Math.random() * haveSeats.length);
-      return haveSeats[index];
+      if(haveSeats.length > 0) {
+         let index =  Math.floor(Math.random() * haveSeats.length);
+         return haveSeats[index];
+      }else{
+         return null;
+      }
    }
 
-   selectSeats(seat, length) {
-      let rowItems = this.seats.filter((item) => {
-         return seat.row == item.row && seat.group == item.group;
-      });
-      let haveSeats = rowItems.filter((item) => {
-         return !item.disable;
-      });
+   randomPlace(length) {
+      if(!this.randomOne()) {
+         this.record = this.record.concat({
+            result:-1,
+            length:length,
+            list:false,
+            desc:'已经没有座位了'
+         });
       
-      if(haveSeats.length < length) return {result:false,length:length,place:seat,list:[]};
+         this.setState({
+            record: this.record
+         });
 
-      let list = null;
-
-      haveSeats.forEach((value,key) => {
-         let end = key + length;
-         if(end <= haveSeats.length) {
-            let selects = haveSeats.slice(key, end);
-            let flag = false;
-            selects.forEach((val, k) => {
-               if(k + 1 <= selects.length - 1) {
-                  if(val.number + 1 == selects[k + 1].number) {
-                     flag = true;
-                  }else{
-                     flag = false;
-                  }
-               }
+         return;
+      }
+      let haveSeats = this.suitableRows(length);
+      if(haveSeats) {
+         let index =  Math.floor(Math.random() * haveSeats.length);
+         let places = this.selectPlace(haveSeats[index], length);
+         if(places.length > 0) {
+            this.record = this.record.concat({
+               result:1,
+               length:length,
+               list:places
             });
-            if(flag){
-               list = selects;
-               return;
-            }
+            this.setSeats(places);
          }else{
-            return;
+            this.record = this.record.concat({
+               result:0,
+               length:length,
+               list:false,
+               desc:'返回的连号座位数组为空'
+            });
+         }
+      }else{
+         this.record = this.record.concat({
+            result:0,
+            length:length,
+            list:false,
+            desc:'没有符合座位数的连号座位'
+         });
+      }
+      
+      this.setState({
+         record: this.record
+      })
+   }
+
+   suitableRows(length) {
+      let  haveSeatRows = [];
+      this.rows.forEach((list) => {
+         let haveSeatList = list.filter((item) => {
+            return !item.disable;
+         });
+         if(haveSeatList.length <= 0) return false;
+
+         if(this.selectPlace(haveSeatList,length).length > 0) {
+            haveSeatRows.push(haveSeatList);
          }
       });
+      if(haveSeatRows.length > 0) {
+         return haveSeatRows;
+      }else{
+         return false;
+      }
+   }
 
-      return {result:true,length:length,place:seat,list:list};
+   selectPlace(list, length) {
+      let places = [];
+      if(length == 1) {
+         places.push(this.randomOne());
+         return places;
+      }
+      for(let i = 0;i < list.length - 1;i++) {
+         let end = i + length;
+         if(end > list.length) break;
+
+         let selects = list.slice(i, end);
+         let flag = false;
+         selects.forEach((val, k) => {
+            if(k + 1 <= selects.length - 1) {
+               if(val.number + 1 == selects[k + 1].number) {
+                  flag = true;
+               }else{
+                  flag = false;
+               }
+            }
+         });
+
+         if(flag) {
+            places = selects;
+            break;
+         }
+      }
+      return places;
    }
 
    setSeats(seats) {
@@ -162,38 +233,45 @@ class App extends Component {
       this.setState({
          seatList: this.seats
       })
-      console.log(this.state.seatList);
+      //console.log(this.state.seatList);
+   }
+
+   outSeats(seats) {
+      let str = '';
+      seats.forEach((value) => {
+         str = str + (value.groupName + value.row + '-' + value.number) + '，';
+      });
+      return str;
    }
 
    renderRecord(list) {
       let notes = [];
       list.forEach((data,key) => {
-         if(data.result) {
-            notes.push(<p key={key}>{'本次抽取'+ data.length +'个座位，随机到'+ data.place.groupName + '区第' + data.place.row + '排'}</p>);
+         if(data.result == 1) {
+            notes.push(<p key={key}>{'本次抽取'+ data.length +'个座位，随机选中位置：' + this.outSeats(data.list)}</p>);
+         }else if(data.result == 0){
+            notes.push(<p key={key}>{'本次抽取'+ data.length +'个座位，但场内剩余的连号位置不足！请修改人数！'}</p>);
          }else{
-            notes.push(<p key={key}>{'本次抽取'+ data.length +'个座位，随机到'+ data.place.groupName + '区第' + data.place.row + '排,但剩余的连号位置不足！'}</p>);
+            notes.push(<p key={key}>{'所有座位已经选完！！'}</p>);
          }
       });
       return notes;
    }
 
-   begin() {
-      let length = this.randomInput();
-      let seat = this.randomSeat();
-      let data = this.selectSeats(seat, length);
-      let selects = data.list;
-      this.record = this.record.concat(data);
-      if(data.result && selects instanceof Array && selects.length > 0) {
-         this.setSeats(selects);
-      }
-      
-      this.setState({
-         record: this.record
-      })
+   handleClickBeginBtn() {
+      let length = this.state.seats;
+      this.randomPlace(length);
    }
 
-   handleClickBtn() {
-      this.begin();
+   handleClickRandomBtn() {
+      let length = this.randomInput();
+      this.randomPlace(length);
+   }
+
+   onChooseSeats(event) {
+      this.setState({
+         seats: event.target.value
+      });
    }
 
    render() {
@@ -201,7 +279,19 @@ class App extends Component {
          <div className="app">
             <div className="seats">{this.renderGroup(this.state.seatList)}</div>
             <div className="ctrol">
-               <div className="btn-box"><button className="btn" onClick={this.handleClickBtn}>群众开始抢票</button></div>
+               <div className="btn-box">
+                  <div className="select-box">
+                     <select defaultValue={this.state.seats} onChange={this.onChooseSeats}>
+                        <option value={1}>1</option>
+                        <option value={2}>2</option>
+                        <option value={3}>3</option>
+                        <option value={4}>4</option>
+                        <option value={5}>5</option>
+                     </select>
+                     <button className="btn" onClick={this.handleClickBeginBtn}>开始抢票</button>
+                  </div>
+                  <button className="btn" onClick={this.handleClickRandomBtn}>随机开始抢票</button>
+               </div>
                <div className="record" ref={(element) => this.element = element}>{this.renderRecord(this.state.record)}</div>
             </div>
          </div>