演唱会随机选座demo

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

@@ -1,14 +1,50 @@
 .app {
   width: 100%;
   height: 100%;
-  font-size: 16px;
+  font-size: 12px;
+  color: #333;
+  display: flex;
+  flex-direction: column;
+}
+
+.seats {
+  width: 100%;
+  height: 500px;
   display: flex;
   justify-content: space-around;
 }
 
+.ctrol {
+  flex: 1;
+  display: flex;
+  justify-content: stretch;
+}
+
+.btn-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content:center;
+}
+
+.btn {
+  width: 100px;
+  height: 30px;
+}
+
+.record {
+  flex: 10;
+  overflow-y: auto;
+}
+
 .group {
   height: 100%;
   flex: 1;
+  border: #666 solid 1px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border-radius: 10px;
 }
 
 .row {
@@ -17,7 +53,14 @@
 }
 
 .item {
-  width: 10px;
-  height: 10px;
+  display: inline-block;
+  min-width: 40px;
+  padding: 2px 0;
+  text-align: center;
   background-color: lightgreen;
+  border-radius: 5px;
+}
+
+.disable {
+  background-color: #ccc;
 }

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

@@ -7,16 +7,21 @@ class App extends Component {
    constructor () {
       super();
 
+      this.element = null;
             
       this.front = 2;
       this.back = 10;
       this.gap = 2;
       this.group = 4;
       this.lines = (this.back - this.front) / this.gap;
-
+      this.seats = [];
+      this.record = [];
       this.state = {
-         seatList:[]
-      }
+         seatList: this.seats,
+         record: this.record
+      };
+
+      this.handleClickBtn = this.handleClickBtn.bind(this);
    }
 
    groupName(g) {
@@ -39,37 +44,165 @@ class App extends Component {
    }
 
    componentDidMount() {
-      let list = [];
+      let index = 0;
       for (let g = 0; g < this.group; g++) {
          for (let line = this.lines; line >= 0; line--) {
             for (let seat = 0; seat < (this.back - this.gap * (this.lines - line)); seat++) {
-               list.push({
-                  group: this.groupName(g),
+               let item = {
+                  index:index++,
+                  group: g,
+                  groupName: this.groupName(g),
                   number: seat,
                   row: line,
                   disable:false
-               });
+               };
+               this.seats.push(item);
+               //console.log(item)
             }
          };
       }
-      this.setState({
-         seatList:list
-      });
       
-      console.log(list)
+      this.setState({
+         seatList: this.seats
+      })
+      //console.log(this.state.seatList)
    }
 
-   renderSeat() {
+   componentDidUpdate() {
+      if(this.element) {
+          this.element.scrollTop = this.element.scrollHeight;
+      }
+  }
 
+   renderItem(array) {
+      let notes = [];
+      array.forEach((value) => {
+         notes.push(<span className={"item" + (value.disable ? ' disable' : '')} key={'item-' + value.number}>{value.groupName + value.row + '-' + value.number}</span>)
+      });
+      return notes;
+   }
+
+   renderRow(array) {
+      let notes = [];
+      for (let row = this.lines; row >= 0; row--) {
+         let rowItems = array.filter((item) => {
+            return item.row == row;
+         });
+         notes.push(<div className="row" key={'row-' + row}>{this.renderItem(rowItems)}</div>);
+      }
+      return notes;
+   }
+
+   renderGroup(array) {
+      let notes = [];
+      for (let g = 0; g < this.group; g++) {
+         let groupRows = array.filter((item) => {
+            return item.group == g;
+         });
+         notes.push(<div className="group" key={'group-' + g}>{this.renderRow(groupRows)}</div>);
+      }
+      return notes;
+   }
+
+   randomInput() {
+      let input =  Math.floor(Math.random() * 4 + 1);
+      return input;
+   }
+
+   randomSeat() {
+      let haveSeats = this.seats.filter((item) => {
+         return !item.disable;
+      });
+      let index =  Math.floor(Math.random() * haveSeats.length);
+      return haveSeats[index];
+   }
+
+   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;
+      });
+
+      if(haveSeats.length < length) return {result:false,length:length,place:seat,list:[]};
+
+      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;
+                  }
+               }
+            });
+            if(flag){
+               list = selects;
+               return;
+            }
+         }else{
+            return;
+         }
+      });
+
+      return {result:true,length:length,place:seat,list:list};
+   }
+
+   setSeats(seats) {
+      seats.forEach((value) => {
+         this.seats[value.index].disable = true;
+      });
+      this.setState({
+         seatList: this.seats
+      })
+      console.log(this.state.seatList);
+   }
+
+   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>);
+         }else{
+            notes.push(<p key={key}>{'本次抽取'+ data.length +'个座位，随机到'+ data.place.groupName + '区第' + data.place.row + '排,但剩余的连号位置不足！'}</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
+      })
+   }
+
+   handleClickBtn() {
+      this.begin();
    }
 
    render() {
       return (
          <div className="app">
-            <div className="group">
-               <div className="row">
-                  <div className="item"></div>
-               </div>
+            <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="record" ref={(element) => this.element = element}>{this.renderRecord(this.state.record)}</div>
             </div>
          </div>
       );

src/pages/20181112o4/src/index.css

@@ -4,6 +4,11 @@ body {
   font-family: sans-serif;
 }
 
+html,body {
+  width: 100%;
+  height: 100%;
+}
+
 #root {
   width: 100%;
   height: 100%;