chenjingyu
4 years ago
47 changed files with 5640 additions and 1346 deletions
@ -0,0 +1,45 @@
|
||||
<div class="content"> |
||||
<header><img src="../../../assets/images/tophead.png"></header> |
||||
|
||||
<div class="center"> |
||||
<div class="laststep" (click)="laststep()"> |
||||
上一步 |
||||
</div> |
||||
<h3 *ngIf="isOne">业务理论考试结果</h3> |
||||
<table *ngIf="isOne"> |
||||
<tr> |
||||
<th *ngFor="let header of headersZero">{{header}}</th> |
||||
</tr> |
||||
<tr *ngFor="let item of tableDataZero"> |
||||
<td>{{item.order}}</td> |
||||
<td>{{item.fireName}}</td> |
||||
<td>{{item.drawLotsOrder}}</td> |
||||
<td> |
||||
<p *ngFor="let items of item.name" class="bottomBorder">{{items}}</p> |
||||
</td> |
||||
<td> |
||||
<p *ngFor="let items of item.seatNum" class="bottomBorder">{{items}}</p> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
<h3 *ngIf="isTwo">指挥能力考评结果</h3> |
||||
<table *ngIf="isTwo"> |
||||
<tr> |
||||
<th *ngFor="let header of headers">{{header}}</th> |
||||
</tr> |
||||
<tr *ngFor="let item of tableData"> |
||||
<td>{{item.order}}</td> |
||||
<td>{{item.fireName}}</td> |
||||
<td>{{item.drawLotsOrder}}</td> |
||||
<td>{{item.num}}</td> |
||||
<td> |
||||
<p *ngFor="let items of item.name" class="bottomBorder">{{items}}</p> |
||||
</td> |
||||
<td> |
||||
<p *ngFor="let items of item.seatNum" class="bottomBorder">{{items}}</p> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,81 @@
|
||||
.content { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
box-sizing: border-box; |
||||
padding: 1px; |
||||
background: url('../../../assets/images/backgroud.png'); |
||||
background-size: 100% 100%; |
||||
header { |
||||
width: 100%; |
||||
height: 50px; |
||||
text-align: center; |
||||
background: url('../../../assets/images/head.png'); |
||||
background-size: 100% 100%; |
||||
img { margin: 11px 0; } |
||||
} |
||||
} |
||||
|
||||
.center { |
||||
position: relative; |
||||
width: 80%; |
||||
max-height: 90%; |
||||
margin: 0 auto; |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
text-align: center; |
||||
.laststep{ |
||||
position: absolute; |
||||
width: 85px; |
||||
height:36px; |
||||
line-height:36px; |
||||
color: white; |
||||
font-size: 18px; |
||||
right: 0; |
||||
top: 18px; |
||||
border: 1px solid white; |
||||
border-radius: 6px; |
||||
cursor: pointer; |
||||
} |
||||
h3 { |
||||
font-size: 33px; |
||||
color: #fff; |
||||
margin: 30px 0; |
||||
} |
||||
} |
||||
.center::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
|
||||
table { |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
background-color: #fff; |
||||
text-align: center; |
||||
border-collapse:collapse; |
||||
word-break:break-all; |
||||
word-wrap:break-all; |
||||
table-layout:fixed; |
||||
th { |
||||
box-sizing: border-box; |
||||
height: 50px; |
||||
font-size: 24px; |
||||
color: #fff; |
||||
font-weight: 400; |
||||
border: 1px solid #fff; |
||||
background-color: #ff4d29; |
||||
} |
||||
td { |
||||
box-sizing: border-box; |
||||
height: 60px; |
||||
color: #000; |
||||
font-weight: 400; |
||||
border: 1px solid #ECEDEE; |
||||
} |
||||
p { height: 30px; line-height: 30px; box-sizing: border-box; } |
||||
.bottomBorder:not(:last-child) { |
||||
border-bottom: 1px solid #ECEDEE; |
||||
} |
||||
} |
||||
|
||||
th,td,p { cursor: default; } |
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { DrawingResultComponent } from './drawing-result.component'; |
||||
|
||||
describe('DrawingResultComponent', () => { |
||||
let component: DrawingResultComponent; |
||||
let fixture: ComponentFixture<DrawingResultComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ DrawingResultComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(DrawingResultComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,64 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router } from '@angular/router'; |
||||
|
||||
@Component({ |
||||
selector: 'app-drawing-result', |
||||
templateUrl: './drawing-result.component.html', |
||||
styleUrls: ['./drawing-result.component.scss'] |
||||
}) |
||||
export class DrawingResultComponent implements OnInit { |
||||
|
||||
constructor(private router: Router) { } |
||||
isOne = false |
||||
isTwo = false |
||||
ngOnInit(): void { |
||||
if(this.router.url == '/drawingResult?type=1'){ |
||||
this.isOne = false |
||||
this.isTwo = true |
||||
this.tableData = [ |
||||
{order: 1, fireName: '南宁支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[0], num: localStorage.getItem('0') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("南宁支队seatnumber")).zhi,JSON.parse(localStorage.getItem("南宁支队seatnumber")).fuzhi] }, |
||||
{order: 2, fireName: '柳州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[1], num: localStorage.getItem('1') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("柳州支队seatnumber")).zhi,JSON.parse(localStorage.getItem("柳州支队seatnumber")).fuzhi] }, |
||||
{order: 3, fireName: '桂林支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[2], num: localStorage.getItem('2') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("桂林支队seatnumber")).zhi,JSON.parse(localStorage.getItem("桂林支队seatnumber")).fuzhi] }, |
||||
{order: 4, fireName: '梧州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[3], num: localStorage.getItem('3') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("梧州支队seatnumber")).zhi,JSON.parse(localStorage.getItem("梧州支队seatnumber")).fuzhi] }, |
||||
{order: 5, fireName: '北海支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[4], num: localStorage.getItem('4') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("北海支队seatnumber")).zhi,JSON.parse(localStorage.getItem("北海支队seatnumber")).fuzhi] }, |
||||
{order: 6, fireName: '防城港支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[5], num: localStorage.getItem('5') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("防城港支队seatnumber")).zhi,JSON.parse(localStorage.getItem("防城港支队seatnumber")).fuzhi] }, |
||||
{order: 7, fireName: '钦州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[6], num: localStorage.getItem('6') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("钦州支队seatnumber")).zhi,JSON.parse(localStorage.getItem("钦州支队seatnumber")).fuzhi] }, |
||||
{order: 8, fireName: '贵港支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[7], num: localStorage.getItem('7') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("贵港支队seatnumber")).zhi,JSON.parse(localStorage.getItem("贵港支队seatnumber")).fuzhi] }, |
||||
{order: 9, fireName: '玉林支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[8], num: localStorage.getItem('8') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("玉林支队seatnumber")).zhi,JSON.parse(localStorage.getItem("玉林支队seatnumber")).fuzhi] }, |
||||
{order: 10, fireName: '百色支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[9], num: localStorage.getItem('9') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("百色支队seatnumber")).zhi,JSON.parse(localStorage.getItem("百色支队seatnumber")).fuzhi] }, |
||||
{order: 11, fireName: '贺州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[10], num: localStorage.getItem('10') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("贺州支队seatnumber")).zhi,JSON.parse(localStorage.getItem("贺州支队seatnumber")).fuzhi] }, |
||||
{order: 12, fireName: '河池支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[11], num: localStorage.getItem('11') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("河池支队seatnumber")).zhi,JSON.parse(localStorage.getItem("河池支队seatnumber")).fuzhi] }, |
||||
{order: 13, fireName: '来宾支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[12], num: localStorage.getItem('12') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("来宾支队seatnumber")).zhi,JSON.parse(localStorage.getItem("来宾支队seatnumber")).fuzhi] }, |
||||
{order: 14, fireName: '崇左支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr"))[13], num: localStorage.getItem('13') || '', name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("崇左支队seatnumber")).zhi,JSON.parse(localStorage.getItem("崇左支队seatnumber")).fuzhi] }, |
||||
] |
||||
}else{ |
||||
this.isOne = true |
||||
this.isTwo = false |
||||
this.tableDataZero = [ |
||||
{order: 1, fireName: '南宁支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[0] , name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("南宁支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("南宁支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 2, fireName: '柳州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[1], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("柳州支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("柳州支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 3, fireName: '桂林支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[2], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("桂林支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("桂林支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 4, fireName: '梧州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[3], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("梧州支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("梧州支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 5, fireName: '北海支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[4], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("北海支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("北海支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 6, fireName: '防城港支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[5], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("防城港支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("防城港支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 7, fireName: '钦州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[6], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("钦州支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("钦州支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 8, fireName: '贵港支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[7], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("贵港支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("贵港支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 9, fireName: '玉林支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[8], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("玉林支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("玉林支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 10, fireName: '百色支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[9], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("百色支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("百色支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 11, fireName: '贺州支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[10], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("贺州支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("贺州支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 12, fireName: '河池支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[11], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("河池支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("河池支队seatnumbercopy")).fuzhi || '']}, |
||||
{order: 13, fireName: '来宾支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[12], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum: [JSON.parse(localStorage.getItem("来宾支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("来宾支队seatnumbercopy")).fuzhi || ''] }, |
||||
{order: 14, fireName: '崇左支队', drawLotsOrder: JSON.parse(localStorage.getItem("arr2"))[13], name: ['总指挥/指挥长','副总指挥/作战助理'], seatNum:[JSON.parse(localStorage.getItem("崇左支队seatnumbercopy")).zhi || '',JSON.parse(localStorage.getItem("崇左支队seatnumbercopy")).fuzhi || '']}, |
||||
] |
||||
} |
||||
} |
||||
|
||||
headersZero:string [] = ['序号','支队名称','抽签顺序', '职级','座位号'] |
||||
tableDataZero = [] |
||||
|
||||
headers:string [] = ['序号','支队名称','抽签顺序','场景类型', '职级','座位号'] |
||||
tableData = [] |
||||
laststep(){ |
||||
window.history.back();
|
||||
} |
||||
} |
||||
@ -0,0 +1,73 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-25 08:48:50 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-18 11:21:18 |
||||
--> |
||||
<div class="box"> |
||||
<div class="head"> |
||||
<img src="../../../assets/images/head.png"> |
||||
<!-- <span>指挥员能力考评抽签</span> --> |
||||
<img class="ziti" src="../../../assets/images/tophead.png"> |
||||
</div> |
||||
<div class="mainbox"> |
||||
<span class="title">业务理论考试抽签顺序</span> |
||||
<div class="colum" style="margin-left: 13%;width: 100px;"> |
||||
<div class="centerLefta" > |
||||
<div class="tanCenterbtna" id="chooseZhi"> |
||||
<span style="background-color: #ff4d29;color:#FFF;" >序号</span> |
||||
<span *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" >{{item.id}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft" > |
||||
<div class="tanCenterbtn" id="chooseZhi10"> |
||||
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> |
||||
<span [attr.key]="item.id" name="yyy" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="clickName(item)">{{item.name}} |
||||
<img class="img" [ngClass]="{'block': item.result == '' ? false : true}" style="margin-left: 8px;" src="../../../assets/images/dui.png"> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft"> |
||||
<div class="tanCenterbtn" id="endjieguo10"> |
||||
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">抽签结果:</span> |
||||
<span *ngFor="let item of choujiang; let key=index" >{{item.result}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="line" style="padding-top:50px;"> |
||||
|
||||
<div class="content"> |
||||
|
||||
<div style="clear:both; padding-top: 277px;width: 335px;margin: 0 auto;"> |
||||
<div id="machine10" class="slotMachine" style="margin-left: -65px;"> |
||||
<div class="slot" > |
||||
{{isDraw ? '已抽签' : '开始抽签'}} |
||||
</div> |
||||
<div class="slot" *ngFor="let item of numList; let key=index">{{item.name}}</div> |
||||
</div> |
||||
<div id="yichou" style="display: none;"> |
||||
<span>以抽签</span> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div style="text-align: center;"> |
||||
<div id="slotMachineButtonShuffle10" class="slotMachineButton" style="font-size: 25px">开始抽签</div> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="chongzhi" style="height: 20%;"><button type="button" (click)="nextStep()" class="button">下一步</button></div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
|
||||
|
||||
@import "../../../assets/css/laohujistyle.css"; |
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
background-image: url("../../../assets/images/backgroud.png"); |
||||
background-size: 100%; |
||||
overflow: hidden; |
||||
} |
||||
.head{ |
||||
width: 100%; |
||||
height: 50px; |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.ziti{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 40%; |
||||
width: 20%; |
||||
height: 53%; |
||||
} |
||||
span{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 45%; |
||||
font-size: 28px; |
||||
background:linear-gradient(#ff4b27, #ff6e41); |
||||
-webkit-background-clip: text; |
||||
color: transparent; |
||||
-webkit-text-fill-color: transparent; |
||||
text-fill-color: transparent; |
||||
} |
||||
} |
||||
.mainbox { |
||||
width: 99%; |
||||
height: 90%; |
||||
padding: 0.125rem 0.125rem 0; |
||||
display: flex; |
||||
.title{ |
||||
position: absolute; |
||||
left: 27%; |
||||
top: 75px; |
||||
color: white; |
||||
font-size: 30px; |
||||
} |
||||
} |
||||
.chongzhi{ |
||||
position: relative; |
||||
top: 85%; |
||||
right: 23.5%; |
||||
} |
||||
.centerLeft{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtn{ |
||||
width: 350px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 300px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.centerLefta{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtna{ |
||||
width: 100px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 50px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.colum{ |
||||
height: 90%; |
||||
width: 350px; |
||||
margin-top: 72px; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
text-align: center; |
||||
span{ |
||||
font-size: 24px; |
||||
|
||||
//padding-top: 50%; |
||||
} |
||||
} |
||||
.zhuan{ |
||||
width: 500px; |
||||
margin-left: 160px; |
||||
margin-top: 10%; |
||||
} |
||||
.stop{ |
||||
pointer-events: none; |
||||
} |
||||
.button { |
||||
height: 48px; |
||||
width: 130px; |
||||
background-color:transparent; |
||||
border-radius: 4px; |
||||
border: 1px solid #ECEDEE; |
||||
color: #FFF; |
||||
padding: 12px 32px; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
font-size: 16px; |
||||
margin: 4px 2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
|
||||
//选择后加背景色 |
||||
.beijicolor{ |
||||
background-color:#FE693E ; |
||||
} |
||||
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} |
||||
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} |
||||
ul,ol{list-style-type:none;} |
||||
select,input,img,select{vertical-align:middle;} |
||||
input{ font-size:12px;} |
||||
a{ text-decoration:none; color:#000;} |
||||
a:hover{color:#c00; text-decoration:none;} |
||||
.clear{clear:both;} |
||||
|
||||
/* 大转盘样式 */ |
||||
.banner{//max-height: 650px; |
||||
display: block; |
||||
width: 95%; |
||||
//max-width: 650px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-bottom: 20px; |
||||
} |
||||
.banner .turnplate{display:block;width:100%;position:relative;} |
||||
.banner .turnplate canvas.item{width:100%;height: 100%;} |
||||
.banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;} |
||||
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FirstStepCopyComponent } from './first-step-copy.component'; |
||||
|
||||
describe('FirstStepCopyComponent', () => { |
||||
let component: FirstStepCopyComponent; |
||||
let fixture: ComponentFixture<FirstStepCopyComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FirstStepCopyComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FirstStepCopyComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,92 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import '../../../assets/js/firststepcopy' |
||||
import { Router } from '@angular/router'; |
||||
@Component({ |
||||
selector: 'app-first-step-copy', |
||||
templateUrl: './first-step-copy.component.html', |
||||
styleUrls: ['./first-step-copy.component.scss'] |
||||
}) |
||||
export class FirstStepCopyComponent implements OnInit { |
||||
|
||||
constructor(private router: Router) { } |
||||
|
||||
ngOnInit(){ |
||||
var arr2 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14] |
||||
let p = arr2.sort(() => { |
||||
return Math.round(Math.random()) - 0.5; //返回随机值（大于0|小于0）
|
||||
}) |
||||
var arrSeatcopy = [1,2,3,4,5,6,7,8,9,10,11,12,13,14] |
||||
var arrSeat2copy = [15,16,17,18,19,20,21,22,23,24,25,26,27,28] |
||||
let s = arrSeatcopy.sort(() => { |
||||
return Math.round(Math.random()) - 0.5; //返回随机值（大于0|小于0）
|
||||
}) |
||||
let j = arrSeat2copy.sort(() => { |
||||
return Math.round(Math.random()) - 0.5; //返回随机值（大于0|小于0）
|
||||
})
|
||||
if(!localStorage.getItem("arr2")){ |
||||
localStorage.setItem("arr2",JSON.stringify(p)) |
||||
} |
||||
if(!localStorage.getItem("arrSeatcopy")){ |
||||
localStorage.setItem("arrSeatcopy",JSON.stringify(s)) |
||||
} |
||||
if(!localStorage.getItem("arrSeat2copy")){ |
||||
localStorage.setItem("arrSeat2copy",JSON.stringify(j)) |
||||
} |
||||
let orgArr = ['南宁支队','柳州支队','桂林支队','梧州支队','北海支队','防城港支队','钦州支队','贵港支队','玉林支队','百色支队','贺州支队','河池支队','来宾支队','崇左支队',] |
||||
localStorage.setItem("orgArr",JSON.stringify(orgArr)) |
||||
} |
||||
//支队数据和是否抽奖
|
||||
choujiang=[ |
||||
{name:"南宁支队",id:1,result :localStorage.getItem("南宁支队copy") || ""}, |
||||
{name:"柳州支队",id:2,result :localStorage.getItem("柳州支队copy") || ""}, |
||||
{name:"桂林支队",id:3,result :localStorage.getItem("桂林支队copy") || ""}, |
||||
{name:"梧州支队",id:4,result :localStorage.getItem("梧州支队copy") || ""}, |
||||
{name:"北海支队",id:5,result :localStorage.getItem("北海支队copy") || ""}, |
||||
{name:"防城港支队",id:6,result :localStorage.getItem("防城港支队copy") || ""}, |
||||
{name:"钦州支队",id:7,result :localStorage.getItem("钦州支队copy") || ""}, |
||||
{name:"贵港支队",id:8,result :localStorage.getItem("贵港支队copy") || ""}, |
||||
{name:"玉林支队",id:9,result :localStorage.getItem("玉林支队copy") || ""}, |
||||
{name:"百色支队",id:10,result :localStorage.getItem("百色支队copy") || ""}, |
||||
{name:"贺州支队",id:11,result :localStorage.getItem("贺州支队copy") || ""}, |
||||
{name:"河池支队",id:12,result :localStorage.getItem("河池支队copy") || ""}, |
||||
{name:"来宾支队",id:13,result :localStorage.getItem("来宾支队copy") || ""}, |
||||
{name:"崇左支队",id:14,result :localStorage.getItem("崇左支队copy") || ""} |
||||
] |
||||
numList = [ |
||||
{name:"1号",id:1}, |
||||
{name:"2号",id:2}, |
||||
{name:"3号",id:3}, |
||||
{name:"4号",id:4}, |
||||
{name:"5号",id:5}, |
||||
{name:"6号",id:6}, |
||||
{name:"7号",id:7}, |
||||
{name:"8号",id:8}, |
||||
{name:"9号",id:9}, |
||||
{name:"10号",id:10}, |
||||
{name:"11号",id:11}, |
||||
{name:"12号",id:12}, |
||||
{name:"13号",id:13}, |
||||
{name:"14号",id:14} |
||||
] |
||||
//选中支队
|
||||
chooseid=-1 |
||||
isDraw = false |
||||
clickName(item){ |
||||
this.chooseid= item.id - 1 |
||||
localStorage.setItem("indexNum",item.id) |
||||
if(localStorage.getItem(item.name + 'copy')){//如果已经抽过
|
||||
this.isDraw = true |
||||
}else{ |
||||
this.isDraw = false |
||||
} |
||||
} |
||||
|
||||
nextStep(){ |
||||
if(localStorage.getItem("南宁支队copy") && localStorage.getItem("柳州支队copy") && localStorage.getItem("桂林支队copy") && localStorage.getItem("梧州支队copy") && localStorage.getItem("北海支队copy") && localStorage.getItem("防城港支队copy") && localStorage.getItem("钦州支队copy") && localStorage.getItem("贵港支队copy") && localStorage.getItem("玉林支队copy") && localStorage.getItem("百色支队copy") && localStorage.getItem("贺州支队copy") && localStorage.getItem("河池支队copy") && localStorage.getItem("来宾支队copy") && localStorage.getItem("崇左支队copy")){ |
||||
window.location.href="/fourStep2"; |
||||
}else{ |
||||
alert("未全部抽完！") |
||||
} |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,72 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-25 08:48:50 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-18 10:38:08 |
||||
--> |
||||
<div class="box"> |
||||
<div class="head"> |
||||
<img src="../../../assets/images/head.png"> |
||||
<img class="ziti" src="../../../assets/images/tophead.png"> |
||||
</div> |
||||
<div class="mainbox"> |
||||
<span class="title">指挥员能力考评抽签顺序</span> |
||||
<div class="colum" style="margin-left: 12%;width: 100px;"> |
||||
<div class="centerLefta" > |
||||
<div class="tanCenterbtna" id="chooseZhi"> |
||||
<span style="background-color: #ff4d29;color:#FFF;" >序号</span> |
||||
<span *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" >{{item.id}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft" > |
||||
<div class="tanCenterbtn" id="chooseZhishao"> |
||||
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> |
||||
<span [attr.key]="item.id" name="lll" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="clickName(item)">{{item.name}} |
||||
<img class="img" [ngClass]="{'block': item.result == '' ? false : true}" style="margin-left: 8px;" src="../../../assets/images/dui.png"> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft"> |
||||
<div class="tanCenterbtn" id="endjieguoshao"> |
||||
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">抽签结果:</span> |
||||
<span *ngFor="let item of choujiang; let key=index" >{{item.result}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="line" style="padding-top:50px;"> |
||||
|
||||
<div class="content"> |
||||
|
||||
<div style="clear:both; padding-top: 277px;width: 335px;margin: 0 auto;"> |
||||
<div id="machine4" class="slotMachine" style="margin-left: -65px;"> |
||||
<div class="slot" > |
||||
{{isDraw ? '已抽签' : '开始抽签'}} |
||||
</div> |
||||
<div class="slot" *ngFor="let item of numList; let key=index">{{item.name}}</div> |
||||
</div> |
||||
<div id="yichou" style="display: none;"> |
||||
<span>以抽签</span> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div style="text-align: center;"> |
||||
<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">开始抽签</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="chongzhi" style="height: 20%;"><button type="button" (click)="nextStep()" class="button">下一步</button></div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,191 @@
|
||||
|
||||
|
||||
@import "../../../assets/css/laohujistyle.css"; |
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
background-image: url("../../../assets/images/backgroud.png"); |
||||
background-size: 100%; |
||||
overflow: hidden; |
||||
} |
||||
.head{ |
||||
width: 100%; |
||||
height: 50px; |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.ziti{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 40%; |
||||
width: 20%; |
||||
height: 53%; |
||||
} |
||||
span{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 45%; |
||||
font-size: 28px; |
||||
background:linear-gradient(#ff4b27, #ff6e41); |
||||
-webkit-background-clip: text; |
||||
color: transparent; |
||||
-webkit-text-fill-color: transparent; |
||||
text-fill-color: transparent; |
||||
} |
||||
} |
||||
.mainbox { |
||||
width: 99%; |
||||
height: 90%; |
||||
padding: 0.125rem 0.125rem 0; |
||||
display: flex; |
||||
position: relative; |
||||
.title{ |
||||
position: absolute; |
||||
left: 25%; |
||||
top: 25px; |
||||
color: white; |
||||
font-size: 30px; |
||||
} |
||||
} |
||||
|
||||
.centerLeft{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtn{ |
||||
width: 350px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 300px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.centerLefta{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtna{ |
||||
width: 100px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 50px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.colum{ |
||||
height: 90%; |
||||
width: 350px; |
||||
margin-top: 72px; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
text-align: center; |
||||
span{ |
||||
font-size: 24px; |
||||
|
||||
//padding-top: 50%; |
||||
} |
||||
} |
||||
.zhuan{ |
||||
width: 500px; |
||||
margin-left: 160px; |
||||
margin-top: 10%; |
||||
} |
||||
.stop{ |
||||
pointer-events: none; |
||||
} |
||||
.chongzhi{ |
||||
position: relative; |
||||
top: 85%; |
||||
right: 24% |
||||
} |
||||
.button { |
||||
height: 48px; |
||||
width: 130px; |
||||
background-color:transparent; |
||||
border-radius: 4px; |
||||
border: 1px solid #ECEDEE; |
||||
color: #FFF; |
||||
padding: 12px 32px; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
font-size: 16px; |
||||
margin: 4px 2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
|
||||
//选择后加背景色 |
||||
.beijicolor{ |
||||
background-color:#FE693E ; |
||||
} |
||||
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} |
||||
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} |
||||
ul,ol{list-style-type:none;} |
||||
select,input,img,select{vertical-align:middle;} |
||||
input{ font-size:12px;} |
||||
a{ text-decoration:none; color:#000;} |
||||
a:hover{color:#c00; text-decoration:none;} |
||||
.clear{clear:both;} |
||||
|
||||
/* 大转盘样式 */ |
||||
.banner{//max-height: 650px; |
||||
display: block; |
||||
width: 95%; |
||||
//max-width: 650px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-bottom: 20px; |
||||
} |
||||
.banner .turnplate{display:block;width:100%;position:relative;} |
||||
.banner .turnplate canvas.item{width:100%;height: 100%;} |
||||
.banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;} |
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FirstStepComponent } from './first-step.component'; |
||||
|
||||
describe('FirstStepComponent', () => { |
||||
let component: FirstStepComponent; |
||||
let fixture: ComponentFixture<FirstStepComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FirstStepComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FirstStepComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,101 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import '../../../assets/js/firststep' |
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-first-step', |
||||
templateUrl: './first-step.component.html', |
||||
styleUrls: ['./first-step.component.scss'] |
||||
}) |
||||
export class FirstStepComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(){ |
||||
var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14] |
||||
|
||||
var arrSeat = [1,2,3,4,5,6,7,8,9,10,11,12,13,14] |
||||
var arrSeat2 = [15,16,17,18,19,20,21,22,23,24,25,26,27,28] |
||||
|
||||
let x = arr.sort(() => { |
||||
return Math.round(Math.random()) - 0.5; //返回随机值（大于0|小于0）
|
||||
}) |
||||
|
||||
let y = arrSeat.sort(() => { |
||||
return Math.round(Math.random()) - 0.5; //返回随机值（大于0|小于0）
|
||||
}) |
||||
let z = arrSeat2.sort(() => { |
||||
return Math.round(Math.random()) - 0.5; //返回随机值（大于0|小于0）
|
||||
})
|
||||
|
||||
if(!localStorage.getItem("arr")){ |
||||
localStorage.setItem("arr",JSON.stringify(x)) |
||||
} |
||||
|
||||
if(!localStorage.getItem("arrSeat")){ |
||||
localStorage.setItem("arrSeat",JSON.stringify(y)) |
||||
} |
||||
if(!localStorage.getItem("arrSeat2")){ |
||||
localStorage.setItem("arrSeat2",JSON.stringify(z)) |
||||
} |
||||
let orgArr = ['南宁支队','柳州支队','桂林支队','梧州支队','北海支队','防城港支队','钦州支队','贵港支队','玉林支队','百色支队','贺州支队','河池支队','来宾支队','崇左支队',] |
||||
localStorage.setItem("orgArr",JSON.stringify(orgArr)) |
||||
|
||||
} |
||||
|
||||
numList = [ |
||||
{name:"1号",id:1}, |
||||
{name:"2号",id:2}, |
||||
{name:"3号",id:3}, |
||||
{name:"4号",id:4}, |
||||
{name:"5号",id:5}, |
||||
{name:"6号",id:6}, |
||||
{name:"7号",id:7}, |
||||
{name:"8号",id:8}, |
||||
{name:"9号",id:9}, |
||||
{name:"10号",id:10}, |
||||
{name:"11号",id:11}, |
||||
{name:"12号",id:12}, |
||||
{name:"13号",id:13}, |
||||
{name:"14号",id:14} |
||||
] |
||||
//选中支队
|
||||
chooseid=-1 |
||||
isDraw = false |
||||
clickName(item){ |
||||
this.chooseid= item.id - 1 |
||||
localStorage.setItem("indexNum",item.id) |
||||
if(localStorage.getItem(item.name)){//如果已经抽过
|
||||
this.isDraw = true |
||||
}else{ |
||||
this.isDraw = false |
||||
} |
||||
} |
||||
//跳转第二个页面
|
||||
nextStep(){ |
||||
if(localStorage.getItem("南宁支队") && localStorage.getItem("柳州支队") && localStorage.getItem("桂林支队") && localStorage.getItem("梧州支队") && localStorage.getItem("北海支队") && localStorage.getItem("防城港支队") && localStorage.getItem("钦州支队") && localStorage.getItem("贵港支队") && localStorage.getItem("玉林支队") && localStorage.getItem("百色支队") && localStorage.getItem("贺州支队") && localStorage.getItem("河池支队") && localStorage.getItem("来宾支队") && localStorage.getItem("崇左支队")){ |
||||
window.location.href="/twoStep"; |
||||
}else{ |
||||
alert("未全部抽完！") |
||||
} |
||||
|
||||
} |
||||
//支队数据和是否抽奖
|
||||
choujiang=[ |
||||
{name:"南宁支队",id:1,result :localStorage.getItem("南宁支队") || ""}, |
||||
{name:"柳州支队",id:2,result :localStorage.getItem("柳州支队") || ""}, |
||||
{name:"桂林支队",id:3,result :localStorage.getItem("桂林支队") || ""}, |
||||
{name:"梧州支队",id:4,result :localStorage.getItem("梧州支队") || ""}, |
||||
{name:"北海支队",id:5,result :localStorage.getItem("北海支队") || ""}, |
||||
{name:"防城港支队",id:6,result :localStorage.getItem("防城港支队") || ""}, |
||||
{name:"钦州支队",id:7,result :localStorage.getItem("钦州支队") || ""}, |
||||
{name:"贵港支队",id:8,result :localStorage.getItem("贵港支队") || ""}, |
||||
{name:"玉林支队",id:9,result :localStorage.getItem("玉林支队") || ""}, |
||||
{name:"百色支队",id:10,result :localStorage.getItem("百色支队") || ""}, |
||||
{name:"贺州支队",id:11,result :localStorage.getItem("贺州支队") || ""}, |
||||
{name:"河池支队",id:12,result :localStorage.getItem("河池支队") || ""}, |
||||
{name:"来宾支队",id:13,result :localStorage.getItem("来宾支队") || ""}, |
||||
{name:"崇左支队",id:14,result :localStorage.getItem("崇左支队") || ""} |
||||
] |
||||
|
||||
} |
||||
@ -0,0 +1,78 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-25 08:48:50 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-18 11:22:16 |
||||
--> |
||||
<div class="box"> |
||||
<div class="head"> |
||||
<img src="../../../assets/images/head.png"> |
||||
<!-- <span>指挥员能力考评抽签</span> --> |
||||
<img class="ziti" src="../../../assets/images/tophead.png"> |
||||
</div> |
||||
<div class="mainbox"> |
||||
<span class="title">业务理论考试座位号</span> |
||||
<div class="colum" style="margin-left: 13%;width: 100px;"> |
||||
<div class="centerLefta" > |
||||
<div class="tanCenterbtna" id="chooseZhi"> |
||||
<span style="background-color: #ff4d29;color:#FFF;" >序号</span> |
||||
<span *ngFor="let item of sortNum; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" >{{item}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft" > |
||||
<div class="tanCenterbtn" id="chooseZhi22"> |
||||
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> |
||||
<span [attr.key]="item.id" name="zzz" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="clickName(item)">{{item.name}} |
||||
<img class="img" [ngClass]="{'block': item.result == '' ? false : true}" style="margin-left: 8px;" src="../../../assets/images/dui.png"> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft"> |
||||
<div class="tanCenterbtn" id="endjieguo22"> |
||||
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">座位抽签结果:</span> |
||||
<span *ngFor="let item of choujiang; let key=index" >{{item.result.zhi}}{{item.result.fuzhi}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="line" style="padding-top:50px;"> |
||||
|
||||
<div class="content"> |
||||
|
||||
<div style="clear:both; padding-top: 277px;width: 335px;margin: 0 auto;"> |
||||
<div id="machine12" class="slotMachine" style="margin-left: -65px;"> |
||||
<!-- <div class="slot" > |
||||
{{isDraw ? '已抽签' : '开始抽签'}} |
||||
</div> --> |
||||
<div class="slot" *ngFor="let item of numList; let key=index">{{item.name}}</div> |
||||
</div> |
||||
<div id="machine16" class="slotMachine"> |
||||
<div class="slot" *ngFor="let item of numList2; let key=index">{{item.name}}</div> |
||||
</div> |
||||
<div id="yichou" style="display: none;"> |
||||
<span>以抽签</span> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div style="text-align: center;"> |
||||
<div id="slotMachineButtonShuffle22" class="slotMachineButton" style="font-size: 25px">开始抽签</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="chongzhi" style="height: 20%;"><button type="button" (click)="lookresult()" class="button">查看结果</button></div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
|
||||
|
||||
@import "../../../assets/css/laohujistyle.css"; |
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
background-image: url("../../../assets/images/backgroud.png"); |
||||
background-size: 100%; |
||||
overflow: hidden; |
||||
} |
||||
.head{ |
||||
width: 100%; |
||||
height: 50px; |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.ziti{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 40%; |
||||
width: 20%; |
||||
height: 53%; |
||||
} |
||||
span{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 45%; |
||||
font-size: 28px; |
||||
background:linear-gradient(#ff4b27, #ff6e41); |
||||
-webkit-background-clip: text; |
||||
color: transparent; |
||||
-webkit-text-fill-color: transparent; |
||||
text-fill-color: transparent; |
||||
} |
||||
} |
||||
.mainbox { |
||||
width: 99%; |
||||
height: 90%; |
||||
padding: 0.125rem 0.125rem 0; |
||||
display: flex; |
||||
.title{ |
||||
position: absolute; |
||||
left: 27%; |
||||
top: 75px; |
||||
color: white; |
||||
font-size: 30px; |
||||
} |
||||
} |
||||
|
||||
.centerLeft{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtn{ |
||||
width: 350px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 300px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.centerLefta{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtna{ |
||||
width: 100px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 50px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.colum{ |
||||
height: 90%; |
||||
width: 350px; |
||||
margin-top: 72px; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
text-align: center; |
||||
span{ |
||||
font-size: 24px; |
||||
|
||||
//padding-top: 50%; |
||||
} |
||||
} |
||||
.zhuan{ |
||||
width: 500px; |
||||
margin-left: 160px; |
||||
margin-top: 10%; |
||||
} |
||||
.stop{ |
||||
pointer-events: none; |
||||
} |
||||
.button { |
||||
height: 48px; |
||||
width: 130px; |
||||
background-color:transparent; |
||||
border-radius: 4px; |
||||
border: 1px solid #ECEDEE; |
||||
color: #FFF; |
||||
padding: 12px 32px; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
font-size: 16px; |
||||
margin: 4px 2px; |
||||
cursor: pointer; |
||||
} |
||||
.chongzhi{ |
||||
position: relative; |
||||
top: 85%; |
||||
right: 23.5%; |
||||
} |
||||
|
||||
//选择后加背景色 |
||||
.beijicolor{ |
||||
background-color:#FE693E ; |
||||
} |
||||
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} |
||||
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} |
||||
ul,ol{list-style-type:none;} |
||||
select,input,img,select{vertical-align:middle;} |
||||
input{ font-size:12px;} |
||||
a{ text-decoration:none; color:#000;} |
||||
a:hover{color:#c00; text-decoration:none;} |
||||
.clear{clear:both;} |
||||
|
||||
/* 大转盘样式 */ |
||||
.banner{//max-height: 650px; |
||||
display: block; |
||||
width: 95%; |
||||
//max-width: 650px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-bottom: 20px; |
||||
} |
||||
.banner .turnplate{display:block;width:100%;position:relative;} |
||||
.banner .turnplate canvas.item{width:100%;height: 100%;} |
||||
.banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;} |
||||
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FourStepCopyComponent } from './four-step-copy.component'; |
||||
|
||||
describe('FourStepCopyComponent', () => { |
||||
let component: FourStepCopyComponent; |
||||
let fixture: ComponentFixture<FourStepCopyComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FourStepCopyComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FourStepCopyComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,92 @@
|
||||
/* |
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: sueRimn |
||||
* @Date: 2020-10-18 10:23:46 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-18 11:22:51 |
||||
*/ |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import '../../../assets/js/fourstepcopy' |
||||
@Component({ |
||||
selector: 'app-four-step-copy', |
||||
templateUrl: './four-step-copy.component.html', |
||||
styleUrls: ['./four-step-copy.component.scss'] |
||||
}) |
||||
export class FourStepCopyComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
sortNum = [] |
||||
ngOnInit(){ |
||||
this.sortNum = JSON.parse(localStorage.getItem("arr2")) |
||||
} |
||||
|
||||
choujiang = [ |
||||
{name:"南宁支队",id:1,result :JSON.parse(localStorage.getItem("南宁支队seatnumbercopy")) || "",seatnum:"12"}, |
||||
{name:"柳州支队",id:2,result :JSON.parse(localStorage.getItem("柳州支队seatnumbercopy")) || "",seatnum:"7"}, |
||||
{name:"桂林支队",id:3,result :JSON.parse(localStorage.getItem("桂林支队seatnumbercopy")) || "",seatnum:"1"}, |
||||
{name:"梧州支队",id:4,result :JSON.parse(localStorage.getItem("梧州支队seatnumbercopy")) || "",seatnum:"6"}, |
||||
{name:"北海支队",id:5,result :JSON.parse(localStorage.getItem("北海支队seatnumbercopy")) || "",seatnum:"11"}, |
||||
{name:"防城港支队",id:6,result :JSON.parse(localStorage.getItem("防城港支队seatnumbercopy")) || "",seatnum:"2"}, |
||||
{name:"钦州支队",id:7,result :JSON.parse(localStorage.getItem("钦州支队seatnumbercopy")) || "",seatnum:"5"}, |
||||
{name:"贵港支队",id:8,result :JSON.parse(localStorage.getItem("贵港支队seatnumbercopy")) || "",seatnum:"8"}, |
||||
{name:"玉林支队",id:9,result :JSON.parse(localStorage.getItem("玉林支队seatnumbercopy")) || "",seatnum:"14"}, |
||||
{name:"百色支队",id:10,result :JSON.parse(localStorage.getItem("百色支队seatnumbercopy")) || "",seatnum:"3"}, |
||||
{name:"贺州支队",id:11,result :JSON.parse(localStorage.getItem("贺州支队seatnumbercopy")) || "",seatnum:"9"}, |
||||
{name:"河池支队",id:12,result :JSON.parse(localStorage.getItem("河池支队seatnumbercopy")) || "",seatnum:"4"}, |
||||
{name:"来宾支队",id:13,result :JSON.parse(localStorage.getItem("来宾支队seatnumbercopy")) || "",seatnum:"10"}, |
||||
{name:"崇左支队",id:14,result :JSON.parse(localStorage.getItem("崇左支队seatnumbercopy")) || "",seatnum:"13"} |
||||
] |
||||
numList = [ |
||||
{name:"1号",id:1}, |
||||
{name:"2号",id:2}, |
||||
{name:"3号",id:3}, |
||||
{name:"4号",id:4}, |
||||
{name:"5号",id:5}, |
||||
{name:"6号",id:6}, |
||||
{name:"7号",id:7}, |
||||
{name:"8号",id:8}, |
||||
{name:"9号",id:9}, |
||||
{name:"10号",id:10}, |
||||
{name:"11号",id:11}, |
||||
{name:"12号",id:12}, |
||||
{name:"13号",id:13}, |
||||
{name:"14号",id:14} |
||||
] |
||||
numList2 = [ |
||||
{name:"15号",id:15}, |
||||
{name:"16号",id:16}, |
||||
{name:"17号",id:17}, |
||||
{name:"18号",id:18}, |
||||
{name:"19号",id:19}, |
||||
{name:"20号",id:20}, |
||||
{name:"21号",id:21}, |
||||
{name:"22号",id:22}, |
||||
{name:"23号",id:23}, |
||||
{name:"24号",id:24}, |
||||
{name:"25号",id:25}, |
||||
{name:"26号",id:26}, |
||||
{name:"27号",id:27}, |
||||
{name:"28号",id:28} |
||||
] |
||||
//选中支队
|
||||
chooseid=-1 |
||||
isDraw = false |
||||
clickName(item){ |
||||
this.chooseid = item.id - 1 |
||||
localStorage.setItem("indexNum",item.id) |
||||
if(localStorage.getItem(item.name + 'seatnumbercopy')){//如果已经抽过
|
||||
this.isDraw = true |
||||
}else{ |
||||
this.isDraw = false |
||||
} |
||||
} |
||||
lookresult(){ |
||||
if(localStorage.getItem("南宁支队seatnumbercopy") && localStorage.getItem("柳州支队seatnumbercopy") && localStorage.getItem("桂林支队seatnumbercopy") && localStorage.getItem("梧州支队seatnumbercopy") && localStorage.getItem("北海支队seatnumbercopy") && localStorage.getItem("防城港支队seatnumbercopy") && localStorage.getItem("钦州支队seatnumbercopy") && localStorage.getItem("贵港支队seatnumbercopy") && localStorage.getItem("玉林支队seatnumbercopy") && localStorage.getItem("百色支队seatnumbercopy") && localStorage.getItem("贺州支队seatnumbercopy") && localStorage.getItem("河池支队seatnumbercopy") && localStorage.getItem("来宾支队seatnumbercopy") && localStorage.getItem("崇左支队seatnumbercopy")){ |
||||
window.location.href="/drawingResult"; |
||||
}else{ |
||||
alert("请全部抽完再查看结果！") |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,82 @@
|
||||
<!-- |
||||
* @Descripttion: |
||||
* @version: |
||||
* @Author: sueRimn |
||||
* @Date: 2020-09-25 08:48:50 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-18 10:45:51 |
||||
--> |
||||
<div class="box"> |
||||
<div class="head"> |
||||
<img src="../../../assets/images/head.png"> |
||||
<!-- <span>指挥员能力考评抽签</span> --> |
||||
<img class="ziti" src="../../../assets/images/tophead.png"> |
||||
</div> |
||||
<div class="mainbox"> |
||||
<span class="title">指挥员能力考评座位号</span> |
||||
<div class="colum" style="margin-left: 13%;width: 100px;"> |
||||
<div class="centerLefta" > |
||||
<div class="tanCenterbtna" id="chooseZhi"> |
||||
<span style="background-color: #ff4d29;color:#FFF;">序号</span> |
||||
<span *ngFor="let item of sortNum; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" >{{item}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft" > |
||||
<div class="tanCenterbtn" id="chooseZhi2"> |
||||
<span style="background-color: #ff4d29;color:#FFF;" name="zhidui" data-id=`{{chooseid}}`>请选择支队</span> |
||||
<span [attr.key]="item.id" name="bbb" *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" (click)="clickName(item)">{{item.name}} |
||||
<img class="img" [ngClass]="{'block': item.result == '' ? false : true}" style="margin-left: 8px;" src="../../../assets/images/dui.png"> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="colum"> |
||||
<div class="centerLeft"> |
||||
<div class="tanCenterbtn" id="endjieguo2"> |
||||
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">座位抽签结果:</span> |
||||
<span *ngFor="let item of choujiang; let key=index" >{{item.result.zhi}}{{item.result.fuzhi}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="line" style="padding-top:50px;"> |
||||
|
||||
<div class="content"> |
||||
|
||||
<div style="clear:both; padding-top: 277px;width: 335px;margin: 0 auto;"> |
||||
<div id="machine2" class="slotMachine" style="margin-left: -65px;"> |
||||
<!-- <div class="slot" > |
||||
{{isDraw ? '已抽签' : '开始抽签'}} |
||||
</div> --> |
||||
<div class="slot" *ngFor="let item of numList; let key=index">{{item.name}}</div> |
||||
</div> |
||||
<div id="machine6" class="slotMachine"> |
||||
<div class="slot" *ngFor="let item of numList2; let key=index">{{item.name}}</div> |
||||
</div> |
||||
<div id="yichou" style="display: none;"> |
||||
<span>以抽签</span> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div style="text-align: center;"> |
||||
<div id="slotMachineButtonShuffle2" class="slotMachineButton" style="font-size: 25px">开始抽签</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="chongzhi" style="height: 20%;"> |
||||
<button type="button" (click)="lastStep()" class="button">上一步</button> |
||||
<button type="button" (click)="lookresult()" class="button">查看结果</button> |
||||
<!-- <button type="button" (click)="nextStep()" class="button">下一步</button> --> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,190 @@
|
||||
|
||||
|
||||
@import "../../../assets/css/laohujistyle.css"; |
||||
.box{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
background-image: url("../../../assets/images/backgroud.png"); |
||||
background-size: 100%; |
||||
overflow: hidden; |
||||
} |
||||
.head{ |
||||
width: 100%; |
||||
height: 50px; |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.ziti{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 40%; |
||||
width: 20%; |
||||
height: 53%; |
||||
} |
||||
span{ |
||||
position: relative; |
||||
bottom: 70%; |
||||
left: 45%; |
||||
font-size: 28px; |
||||
background:linear-gradient(#ff4b27, #ff6e41); |
||||
-webkit-background-clip: text; |
||||
color: transparent; |
||||
-webkit-text-fill-color: transparent; |
||||
text-fill-color: transparent; |
||||
} |
||||
} |
||||
.mainbox { |
||||
width: 99%; |
||||
height: 90%; |
||||
padding: 0.125rem 0.125rem 0; |
||||
display: flex; |
||||
.title{ |
||||
position: absolute; |
||||
left: 27%; |
||||
top: 75px; |
||||
color: white; |
||||
font-size: 30px; |
||||
} |
||||
} |
||||
.chongzhi{ |
||||
position: relative; |
||||
top: 75%; |
||||
right: 23.4%; |
||||
} |
||||
|
||||
.centerLeft{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtn{ |
||||
width: 350px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 300px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.centerLefta{ |
||||
background-color: #FFF; |
||||
float: left; |
||||
height: 98%; |
||||
width: 100%; |
||||
position: relative; |
||||
flex-direction: column; |
||||
flex: 2%; |
||||
display: flex; |
||||
align-items:center; |
||||
box-sizing: border-box; |
||||
margin: 0 0; |
||||
.tanCenterbtna{ |
||||
width: 100px; |
||||
height: 100%; |
||||
border: 1px solid #ECEDEE; |
||||
display: flex; |
||||
flex-direction: column; |
||||
user-select: none; |
||||
background-size:100% 100%; |
||||
span{ |
||||
white-space: nowrap; |
||||
font-family: Arial; |
||||
color: #000; |
||||
z-index:99; |
||||
width: 50px; |
||||
height: 40px; |
||||
cursor:pointer; |
||||
border-bottom:1px solid #ECEDEE; |
||||
padding:8px 24px ; |
||||
text-align: center; |
||||
font-size: 24px; |
||||
} |
||||
} |
||||
} |
||||
.colum{ |
||||
height: 90%; |
||||
width: 350px; |
||||
margin-top: 72px; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
text-align: center; |
||||
span{ |
||||
font-size: 24px; |
||||
|
||||
//padding-top: 50%; |
||||
} |
||||
} |
||||
.zhuan{ |
||||
width: 500px; |
||||
margin-left: 160px; |
||||
margin-top: 10%; |
||||
} |
||||
.stop{ |
||||
pointer-events: none; |
||||
} |
||||
.button { |
||||
height: 48px; |
||||
width: 130px; |
||||
background-color:transparent; |
||||
border-radius: 4px; |
||||
border: 1px solid #ECEDEE; |
||||
color: #FFF; |
||||
padding: 12px 32px; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
display: inline-block; |
||||
font-size: 16px; |
||||
margin: 4px 2px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
//选择后加背景色 |
||||
.beijicolor{ |
||||
background-color:#FE693E ; |
||||
} |
||||
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} |
||||
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} |
||||
ul,ol{list-style-type:none;} |
||||
select,input,img,select{vertical-align:middle;} |
||||
input{ font-size:12px;} |
||||
a{ text-decoration:none; color:#000;} |
||||
a:hover{color:#c00; text-decoration:none;} |
||||
.clear{clear:both;} |
||||
|
||||
/* 大转盘样式 */ |
||||
.banner{//max-height: 650px; |
||||
display: block; |
||||
width: 95%; |
||||
//max-width: 650px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-bottom: 20px; |
||||
} |
||||
.banner .turnplate{display:block;width:100%;position:relative;} |
||||
.banner .turnplate canvas.item{width:100%;height: 100%;} |
||||
.banner .turnplate img.pointer{position:absolute;width:30.5%;height:36.5%;left:34.6%;top:28.5%;} |
||||
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FourStepComponent } from './four-step.component'; |
||||
|
||||
describe('FourStepComponent', () => { |
||||
let component: FourStepComponent; |
||||
let fixture: ComponentFixture<FourStepComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FourStepComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FourStepComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,101 @@
|
||||
/* |
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: sueRimn |
||||
* @Date: 2020-10-18 10:23:46 |
||||
* @LastEditors: sueRimn |
||||
* @LastEditTime: 2020-10-18 10:47:51 |
||||
*/ |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import '../../../assets/js/fourstep' |
||||
@Component({ |
||||
selector: 'app-four-step', |
||||
templateUrl: './four-step.component.html', |
||||
styleUrls: ['./four-step.component.scss'] |
||||
}) |
||||
export class FourStepComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
sortNum = [] |
||||
ngOnInit(){ |
||||
this.sortNum = JSON.parse(localStorage.getItem("arr")) |
||||
} |
||||
//支队数据和是否抽奖
|
||||
choujiang = [ |
||||
{name:"南宁支队",id:1,result :JSON.parse(localStorage.getItem("南宁支队seatnumber")) || "",seatnum:"5"}, |
||||
{name:"柳州支队",id:2,result :JSON.parse(localStorage.getItem("柳州支队seatnumber")) || "",seatnum:"10"}, |
||||
{name:"桂林支队",id:3,result :JSON.parse(localStorage.getItem("桂林支队seatnumber")) || "",seatnum:"14"}, |
||||
{name:"梧州支队",id:4,result :JSON.parse(localStorage.getItem("梧州支队seatnumber")) || "",seatnum:"3"}, |
||||
{name:"北海支队",id:5,result :JSON.parse(localStorage.getItem("北海支队seatnumber")) || "",seatnum:"8"}, |
||||
{name:"防城港支队",id:6,result :JSON.parse(localStorage.getItem("防城港支队seatnumber")) || "",seatnum:"13"}, |
||||
{name:"钦州支队",id:7,result :JSON.parse(localStorage.getItem("钦州支队seatnumber")) || "",seatnum:"6"}, |
||||
{name:"贵港支队",id:8,result :JSON.parse(localStorage.getItem("贵港支队seatnumber")) || "",seatnum:"1"}, |
||||
{name:"玉林支队",id:9,result :JSON.parse(localStorage.getItem("玉林支队seatnumber")) || "",seatnum:"7"}, |
||||
{name:"百色支队",id:10,result :JSON.parse(localStorage.getItem("百色支队seatnumber")) || "",seatnum:"12"}, |
||||
{name:"贺州支队",id:11,result :JSON.parse(localStorage.getItem("贺州支队seatnumber")) || "",seatnum:"2"}, |
||||
{name:"河池支队",id:12,result :JSON.parse(localStorage.getItem("河池支队seatnumber")) || "",seatnum:"4"}, |
||||
{name:"来宾支队",id:13,result :JSON.parse(localStorage.getItem("来宾支队seatnumber")) || "",seatnum:"9"}, |
||||
{name:"崇左支队",id:14,result :JSON.parse(localStorage.getItem("崇左支队seatnumber")) || "",seatnum:"11"} |
||||
] |
||||
numList = [ |
||||
{name:"1号",id:1}, |
||||
{name:"2号",id:2}, |
||||
{name:"3号",id:3}, |
||||
{name:"4号",id:4}, |
||||
{name:"5号",id:5}, |
||||
{name:"6号",id:6}, |
||||
{name:"7号",id:7}, |
||||
{name:"8号",id:8}, |
||||
{name:"9号",id:9}, |
||||
{name:"10号",id:10}, |
||||
{name:"11号",id:11}, |
||||
{name:"12号",id:12}, |
||||
{name:"13号",id:13}, |
||||
{name:"14号",id:14} |
||||
] |
||||
numList2 = [ |
||||
{name:"15号",id:15}, |
||||
{name:"16号",id:16}, |
||||
{name:"17号",id:17}, |
||||
{name:"18号",id:18}, |
||||
{name:"19号",id:19}, |
||||
{name:"20号",id:20}, |
||||
{name:"21号",id:21}, |
||||
{name:"22号",id:22}, |
||||
{name:"23号",id:23}, |
||||
{name:"24号",id:24}, |
||||
{name:"25号",id:25}, |
||||
{name:"26号",id:26}, |
||||
{name:"27号",id:27}, |
||||
{name:"28号",id:28} |
||||
] |
||||
//选中支队
|
||||
chooseid=-1 |
||||
isDraw = false |
||||
clickName(item){ |
||||
this.chooseid = item.id - 1 |
||||
localStorage.setItem("indexNum",item.id) |
||||
if(localStorage.getItem(item.name)){//如果已经抽过
|
||||
this.isDraw = true |
||||
}else{ |
||||
this.isDraw = false |
||||
} |
||||
} |
||||
nextStep(){ |
||||
if(localStorage.getItem("南宁支队seatnumber") && localStorage.getItem("柳州支队seatnumber") && localStorage.getItem("桂林支队seatnumber") && localStorage.getItem("梧州支队seatnumber") && localStorage.getItem("北海支队seatnumber") && localStorage.getItem("防城港支队seatnumber") && localStorage.getItem("钦州支队seatnumber") && localStorage.getItem("贵港支队seatnumber") && localStorage.getItem("玉林支队seatnumber") && localStorage.getItem("百色支队seatnumber") && localStorage.getItem("贺州支队seatnumber") && localStorage.getItem("河池支队seatnumber") && localStorage.getItem("来宾支队seatnumber") && localStorage.getItem("崇左支队seatnumber")){ |
||||
window.location.href="/firstStep2"; |
||||
}else{ |
||||
alert("未全部抽完！") |
||||
} |
||||
} |
||||
lookresult(){ |
||||
if(localStorage.getItem("南宁支队seatnumber") && localStorage.getItem("柳州支队seatnumber") && localStorage.getItem("桂林支队seatnumber") && localStorage.getItem("梧州支队seatnumber") && localStorage.getItem("北海支队seatnumber") && localStorage.getItem("防城港支队seatnumber") && localStorage.getItem("钦州支队seatnumber") && localStorage.getItem("贵港支队seatnumber") && localStorage.getItem("玉林支队seatnumber") && localStorage.getItem("百色支队seatnumber") && localStorage.getItem("贺州支队seatnumber") && localStorage.getItem("河池支队seatnumber") && localStorage.getItem("来宾支队seatnumber") && localStorage.getItem("崇左支队seatnumber")){ |
||||
window.location.href="/drawingResult?type=1"; |
||||
}else{ |
||||
alert("请全部抽完再查看结果！") |
||||
} |
||||
} |
||||
lastStep(){ |
||||
window.history.back() |
||||
} |
||||
} |
||||
@ -0,0 +1,80 @@
|
||||
@charset "utf-8"; |
||||
.htmldemo p{font-size: 16px;font-family: "微软雅黑"} |
||||
|
||||
|
||||
.line{ |
||||
padding: 50px 0px 25px 0px; |
||||
width:100%; |
||||
|
||||
} |
||||
.content{ |
||||
text-align: center; |
||||
background: url('../../assets/images/machine.png') no-repeat 50% 120px; |
||||
height: 500px; |
||||
} |
||||
.slotMachine{ |
||||
width: 40%; |
||||
border: 5px solid #000; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
padding: 0px; |
||||
overflow: hidden; |
||||
display: inline-block; |
||||
text-align: center; |
||||
background-color: #ffffff; |
||||
font-size: 30px; |
||||
font-weight: 900; |
||||
} |
||||
.slotMachine .slot{ |
||||
height:100px; |
||||
background-position-x: 55%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
|
||||
.slotMachineButton{ |
||||
width:100px; |
||||
height: 100px; |
||||
overflow: hidden; |
||||
display: inline-block; |
||||
text-align: center; |
||||
} |
||||
.slotMachineButton { |
||||
border-radius: 3px; |
||||
background-color:#fb9e25; |
||||
display:inline-block; |
||||
color:#ffffff; |
||||
font-size:36px; |
||||
font-weight:bold; |
||||
font-style:normal; |
||||
height:50px; |
||||
line-height:50px; |
||||
margin-top:10px; |
||||
margin-right:5%; |
||||
width:100px; |
||||
text-decoration:none; |
||||
text-align:center; |
||||
cursor:pointer; |
||||
padding: 3px; |
||||
} |
||||
.slotMachineButton:hover { |
||||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) ); |
||||
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% ); |
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477'); |
||||
background-color:#fb9e25; |
||||
}.slotMachineButton:active { |
||||
position:relative; |
||||
top:1px; |
||||
} |
||||
|
||||
|
||||
.disabled{ |
||||
pointer-events: none; |
||||
background-color: grey; |
||||
} |
||||
.img{ |
||||
display: none; |
||||
} |
||||
.block{ |
||||
display: inline-block!important; |
||||
} |
||||
|
After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 7.5 KiB |
@ -0,0 +1,96 @@
|
||||
$(document).ready(function(){ |
||||
var orgArr = ['南宁支队','柳州支队','桂林支队','梧州支队','北海支队','防城港支队','钦州支队','贵港支队','玉林支队','百色支队','贺州支队','河池支队','来宾支队','崇左支队',] |
||||
var index = 0 |
||||
var selected = null //点击的单位名称
|
||||
var selectedIndex = null //点击的单位index
|
||||
var machine = $("#machine4").slotMachine({ |
||||
active : 0, |
||||
delay : 500, |
||||
randomize : function(activeElementIndex){ |
||||
var index=localStorage.getItem("indexNum") - 1; |
||||
localStorage.setItem(JSON.parse(localStorage.getItem("orgArr"))[index],JSON.parse(localStorage.getItem("arr"))[index]+"号") |
||||
return JSON.parse(localStorage.getItem("arr"))[index]; |
||||
// if(localStorage.getItem("pagetype") == "true"){
|
||||
// var index=localStorage.getItem("indexNum") - 1;
|
||||
// localStorage.setItem(JSON.parse(localStorage.getItem("orgArr"))[index],JSON.parse(localStorage.getItem("arr"))[index]+"号")
|
||||
// return JSON.parse(localStorage.getItem("arr"))[index];
|
||||
// }else{
|
||||
// if(selected == "南宁支队"){
|
||||
// localStorage.setItem(selected,"5号")
|
||||
// return 5;
|
||||
// }else if(selected == "柳州支队"){
|
||||
// localStorage.setItem(selected,'10号')
|
||||
// return 10;
|
||||
// }else if(selected == "桂林支队"){
|
||||
// localStorage.setItem(selected,'14号')
|
||||
// return 14;
|
||||
// }else if(selected == "梧州支队"){
|
||||
// localStorage.setItem(selected,'3号')
|
||||
// return 3;
|
||||
// }else if(selected == "北海支队"){
|
||||
// console.log(1996,)
|
||||
// localStorage.setItem(selected,'8号')
|
||||
// return 8;
|
||||
// }else if(selected == "防城港支队"){
|
||||
// localStorage.setItem(selected,'13号')
|
||||
// return 13;
|
||||
// }else if(selected == "钦州支队"){
|
||||
// localStorage.setItem(selected,'6号')
|
||||
// return 6;
|
||||
// }else if(selected == "贵港支队"){
|
||||
// localStorage.setItem(selected,'1号')
|
||||
// return 1;
|
||||
// }else if(selected == "玉林支队"){
|
||||
// localStorage.setItem(selected,'7号')
|
||||
// return 7;
|
||||
// }else if(selected == "百色支队"){
|
||||
// localStorage.setItem(selected,'12号')
|
||||
// return 12;
|
||||
// }else if(selected == "贺州支队"){
|
||||
// localStorage.setItem(selected,'2号')
|
||||
// return 2;
|
||||
// }else if(selected == "河池支队"){
|
||||
// localStorage.setItem(selected,'4号')
|
||||
// return 4;
|
||||
// }else if(selected == "来宾支队"){
|
||||
// localStorage.setItem(selected,'9号')
|
||||
// return 9;
|
||||
// }else if(selected == "崇左支队"){
|
||||
// localStorage.setItem(selected,'11号')
|
||||
// return 11;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
} |
||||
}); |
||||
|
||||
$("#slotMachineButtonShuffle").click(function(){ |
||||
if(!selected){ |
||||
alert("请先选择单位")
|
||||
}else{ |
||||
machine.shuffle(); |
||||
$("#slotMachineButtonShuffle").addClass("disabled"); |
||||
setTimeout(() => { |
||||
machine.stop(); |
||||
setTimeout(() => { |
||||
$("#endjieguoshao span").eq(selectedIndex).html(window.localStorage[selected]) |
||||
$("#chooseZhishao .img").eq(selectedIndex - 1).css("display","inline-block"); |
||||
}, 1300); |
||||
}, 1000); |
||||
} |
||||
|
||||
}); |
||||
|
||||
//左侧表格点击事件
|
||||
$("span[name='lll']").on("click",function(e,index){ |
||||
selected = $(this)[0].innerText |
||||
selectedIndex = localStorage.getItem("indexNum") |
||||
if($("#endjieguoshao span").eq(selectedIndex)[0].innerText){ |
||||
$("#slotMachineButtonShuffle").addClass("disabled"); |
||||
}else{ |
||||
$("#slotMachineButtonShuffle").removeClass("disabled"); |
||||
} |
||||
}) |
||||
}); |
||||
@ -0,0 +1,88 @@
|
||||
$(document).ready(function(){ |
||||
var index = 0 |
||||
var selected = null //点击的单位名称
|
||||
var selectedcopy = null |
||||
var selectedIndex = null //点击的单位index
|
||||
var machine = $("#machine10").slotMachine({ |
||||
active : 0, |
||||
delay : 500, |
||||
randomize : function(activeElementIndex){ |
||||
var index=localStorage.getItem("indexNum") - 1; |
||||
localStorage.setItem(JSON.parse(localStorage.getItem("orgArr"))[index] + 'copy',JSON.parse(localStorage.getItem("arr2"))[index]+"号") |
||||
return JSON.parse(localStorage.getItem("arr2"))[index]; |
||||
// if(selected == "南宁支队"){
|
||||
// localStorage.setItem(selectedcopy,"12号")
|
||||
// return 12;
|
||||
// }else if(selected == "柳州支队"){
|
||||
// localStorage.setItem(selectedcopy,'7号')
|
||||
// return 7;
|
||||
// }else if(selected == "桂林支队"){
|
||||
// localStorage.setItem(selectedcopy,'1号')
|
||||
// return 1;
|
||||
// }else if(selected == "梧州支队"){
|
||||
// localStorage.setItem(selectedcopy,'6号')
|
||||
// return 6;
|
||||
// }else if(selected == "北海支队"){
|
||||
// localStorage.setItem(selectedcopy,'11号')
|
||||
// return 11;
|
||||
// }else if(selected == "防城港支队"){
|
||||
// localStorage.setItem(selectedcopy,'2号')
|
||||
// return 2;
|
||||
// }else if(selected == "钦州支队"){
|
||||
// localStorage.setItem(selectedcopy,'5号')
|
||||
// return 5;
|
||||
// }else if(selected == "贵港支队"){
|
||||
// localStorage.setItem(selectedcopy,'8号')
|
||||
// return 8;
|
||||
// }else if(selected == "玉林支队"){
|
||||
// localStorage.setItem(selectedcopy,'14号')
|
||||
// return 14;
|
||||
// }else if(selected == "百色支队"){
|
||||
// localStorage.setItem(selectedcopy,'3号')
|
||||
// return 3;
|
||||
// }else if(selected == "贺州支队"){
|
||||
// localStorage.setItem(selectedcopy,'9号')
|
||||
// return 9;
|
||||
// }else if(selected == "河池支队"){
|
||||
// localStorage.setItem(selectedcopy,'4号')
|
||||
// return 4;
|
||||
// }else if(selected == "来宾支队"){
|
||||
// localStorage.setItem(selectedcopy,'10号')
|
||||
// return 10;
|
||||
// }else if(selected == "崇左支队"){
|
||||
// localStorage.setItem(selectedcopy,'13号')
|
||||
// return 13;
|
||||
// }
|
||||
} |
||||
}); |
||||
|
||||
$("#slotMachineButtonShuffle10").click(function(){ |
||||
if(!selected){ |
||||
alert("请先选择单位")
|
||||
}else{ |
||||
machine.shuffle(); |
||||
$("#slotMachineButtonShuffle10").addClass("disabled"); |
||||
setTimeout(() => { |
||||
machine.stop(); |
||||
// $("#slotMachineButtonShuffle").removeClass("disabled");
|
||||
setTimeout(() => { |
||||
$("#endjieguo10 span").eq(selectedIndex).html(window.localStorage[selectedcopy]) |
||||
$("#chooseZhi10 .img").eq(selectedIndex - 1).css("display","inline-block"); |
||||
}, 1300); |
||||
}, 1000); |
||||
} |
||||
|
||||
}); |
||||
|
||||
//左侧表格点击事件
|
||||
$("span[name='yyy']").on("click",function(e,index){ |
||||
selected = $(this)[0].innerText |
||||
selectedcopy = $(this)[0].innerText + 'copy' |
||||
selectedIndex = localStorage.getItem("indexNum") |
||||
if($("#endjieguo10 span").eq(selectedIndex)[0].innerText){ |
||||
$("#slotMachineButtonShuffle10").addClass("disabled"); |
||||
}else{ |
||||
$("#slotMachineButtonShuffle10").removeClass("disabled"); |
||||
} |
||||
}) |
||||
}); |
||||
@ -0,0 +1,156 @@
|
||||
$(document).ready(function(){ |
||||
var index = 0 |
||||
var selected = null //点击的单位名称
|
||||
var selectedtime = null //点击的单位名称 + 'time'
|
||||
var selectedIndex = null //点击的单位index
|
||||
var machine = $("#machine2").slotMachine({ |
||||
active : 0, |
||||
delay : 500, |
||||
randomize : function(activeElementIndex){ |
||||
var index=localStorage.getItem("indexNum") - 1; |
||||
localStorage.setItem(JSON.parse(localStorage.getItem("orgArr"))[index] + 'seatnumber', |
||||
JSON.stringify({zhi:JSON.parse(localStorage.getItem("arrSeat"))[index]+"号",fuzhi:JSON.parse(localStorage.getItem("arrSeat2"))[index]+"号"}) |
||||
) |
||||
return JSON.parse(localStorage.getItem("arrSeat"))[index] - 1; |
||||
// if(localStorage.getItem("pagetype") == "true"){//如果是真抽签
|
||||
|
||||
// }else{
|
||||
// if(selected == "南宁支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"8号",fuzhi:"21号"}))
|
||||
// return 7;
|
||||
// }else if(selected == "柳州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"12号",fuzhi:"26号"}))
|
||||
// return 11;
|
||||
// }else if(selected == "桂林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"14号",fuzhi:"22号"}))
|
||||
// return 13;
|
||||
// }else if(selected == "梧州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"13号",fuzhi:"28号"}))
|
||||
// return 12;
|
||||
// }else if(selected == "北海支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"4号",fuzhi:"15号"}))
|
||||
// return 3;
|
||||
// }else if(selected == "防城港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"1号",fuzhi:"16号"}))
|
||||
// return 0;
|
||||
// }else if(selected == "钦州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"10号",fuzhi:"25号"}))
|
||||
// return 9;
|
||||
// }else if(selected == "贵港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"11号",fuzhi:"19号"}))
|
||||
// return 10;
|
||||
// }else if(selected == "玉林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"2号",fuzhi:"27号"}))
|
||||
// return 1;
|
||||
// }else if(selected == "百色支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"9号",fuzhi:"20号"}))
|
||||
// return 8;
|
||||
// }else if(selected == "贺州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"3号",fuzhi:"24号"}))
|
||||
// return 2;
|
||||
// }else if(selected == "河池支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"6号",fuzhi:"18号"}))
|
||||
// return 5;
|
||||
// }else if(selected == "来宾支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"7号",fuzhi:"23号"}))
|
||||
// return 6;
|
||||
// }else if(selected == "崇左支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"5号",fuzhi:"17号"}))
|
||||
// return 4;
|
||||
// }
|
||||
// }
|
||||
|
||||
} |
||||
}); |
||||
var machine6 = $("#machine6").slotMachine({ |
||||
active : 1, |
||||
delay : 500, |
||||
randomize : function(activeElementIndex){ |
||||
var index=localStorage.getItem("indexNum") - 1; |
||||
localStorage.setItem(JSON.parse(localStorage.getItem("orgArr"))[index] + 'seatnumber', |
||||
JSON.stringify({zhi:JSON.parse(localStorage.getItem("arrSeat"))[index]+"号",fuzhi:JSON.parse(localStorage.getItem("arrSeat2"))[index]+"号"}) |
||||
) |
||||
return JSON.parse(localStorage.getItem("arrSeat2"))[index] - 15; |
||||
// if(localStorage.getItem("pagetype") == "true"){
|
||||
|
||||
// }else{
|
||||
// if(selected == "南宁支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"8号",fuzhi:"21号"}))
|
||||
// return 6;
|
||||
// }else if(selected == "柳州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"12号",fuzhi:"26号"}))
|
||||
// return 11;
|
||||
// }else if(selected == "桂林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"14号",fuzhi:"22号"}))
|
||||
// return 7;
|
||||
// }else if(selected == "梧州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"13号",fuzhi:"28号"}))
|
||||
// return 13;
|
||||
// }else if(selected == "北海支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"4号",fuzhi:"15号"}))
|
||||
// return 0;
|
||||
// }else if(selected == "防城港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"1号",fuzhi:"16号"}))
|
||||
// return 1;
|
||||
// }else if(selected == "钦州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"10号",fuzhi:"25号"}))
|
||||
// return 10;
|
||||
// }else if(selected == "贵港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"11号",fuzhi:"19号"}))
|
||||
// return 4;
|
||||
// }else if(selected == "玉林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"2号",fuzhi:"27号"}))
|
||||
// return 12;
|
||||
// }else if(selected == "百色支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"9号",fuzhi:"20号"}))
|
||||
// return 5;
|
||||
// }else if(selected == "贺州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"3号",fuzhi:"24号"}))
|
||||
// return 9;
|
||||
// }else if(selected == "河池支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"6号",fuzhi:"18号"}))
|
||||
// return 3;
|
||||
// }else if(selected == "来宾支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"7号",fuzhi:"23号"}))
|
||||
// return 8;
|
||||
// }else if(selected == "崇左支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"5号",fuzhi:"17号"}))
|
||||
// return 2;
|
||||
// }
|
||||
// }
|
||||
|
||||
} |
||||
}); |
||||
|
||||
$("#slotMachineButtonShuffle2").click(function(){ |
||||
if(!selected){ |
||||
alert("请先选择单位")
|
||||
}else{ |
||||
machine.shuffle(); |
||||
machine6.shuffle(); |
||||
$("#slotMachineButtonShuffle2").addClass("disabled"); |
||||
setTimeout(() => { |
||||
machine.stop(); |
||||
machine6.stop(); |
||||
setTimeout(() => { |
||||
let obj = JSON.parse(localStorage.getItem(selectedtime)) |
||||
$("#endjieguo2 span").eq(selectedIndex).html(obj.zhi + '' + obj.fuzhi) |
||||
$("#chooseZhi2 .img").eq(selectedIndex - 1).css("display","inline-block"); |
||||
}, 1300); |
||||
}, 1000); |
||||
} |
||||
}); |
||||
|
||||
//左侧表格点击事件
|
||||
$("span[name='bbb']").on("click",function(e,index){ |
||||
selected = $(this)[0].innerText |
||||
selectedtime = $(this)[0].innerText + 'seatnumber' |
||||
selectedIndex = localStorage.getItem("indexNum") |
||||
console.log(456,selected,selectedIndex) |
||||
if($("#endjieguo2 span").eq(selectedIndex)[0].innerText){ |
||||
$("#slotMachineButtonShuffle2").addClass("disabled"); |
||||
}else{ |
||||
$("#slotMachineButtonShuffle2").removeClass("disabled"); |
||||
} |
||||
}) |
||||
}); |
||||
@ -0,0 +1,162 @@
|
||||
$(document).ready(function(){ |
||||
var index = 0 |
||||
var selected = null //点击的单位名称
|
||||
var selectedtime = null //点击的单位名称 + 'time'
|
||||
var selectedIndex = null //点击的单位index
|
||||
var machine = $("#machine12").slotMachine({ |
||||
active : 0, |
||||
delay : 500, |
||||
randomize : function(activeElementIndex){ |
||||
var index=localStorage.getItem("indexNum") - 1; |
||||
localStorage.setItem(JSON.parse(localStorage.getItem("orgArr"))[index] + 'seatnumbercopy', |
||||
JSON.stringify({zhi:JSON.parse(localStorage.getItem("arrSeatcopy"))[index]+"号",fuzhi:JSON.parse(localStorage.getItem("arrSeat2copy"))[index]+"号"}) |
||||
) |
||||
return JSON.parse(localStorage.getItem("arrSeatcopy"))[index] - 1; |
||||
// if(selected == "南宁支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"11号",fuzhi:"17号"}))
|
||||
// return 10;
|
||||
// }else if(selected == "柳州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"8号",fuzhi:"15号"}))
|
||||
// return 7;
|
||||
// }else if(selected == "桂林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"4号",fuzhi:"21号"}))
|
||||
// return 3;
|
||||
// }else if(selected == "梧州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"2号",fuzhi:"26号"}))
|
||||
// return 1;
|
||||
// }else if(selected == "北海支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"7号",fuzhi:"27号"}))
|
||||
// return 6;
|
||||
// }else if(selected == "防城港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"12号",fuzhi:"22号"}))
|
||||
// return 11;
|
||||
// }else if(selected == "钦州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"3号",fuzhi:"25号"}))
|
||||
// return 2;
|
||||
// }else if(selected == "贵港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"1号",fuzhi:"16号"}))
|
||||
// return 0;
|
||||
// }else if(selected == "玉林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"9号",fuzhi:"20号"}))
|
||||
// return 8;
|
||||
// }else if(selected == "百色支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"6号",fuzhi:"18号"}))
|
||||
// return 5;
|
||||
// }else if(selected == "贺州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"5号",fuzhi:"23号"}))
|
||||
// return 4;
|
||||
// }else if(selected == "河池支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"14号",fuzhi:"19号"}))
|
||||
// return 13;
|
||||
// }else if(selected == "来宾支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"10号",fuzhi:"24号"}))
|
||||
// return 9;
|
||||
// }else if(selected == "崇左支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"13号",fuzhi:"28号"}))
|
||||
// return 12;
|
||||
// }
|
||||
} |
||||
}); |
||||
var machine6 = $("#machine16").slotMachine({ |
||||
active : 1, |
||||
delay : 500, |
||||
randomize : function(activeElementIndex){ |
||||
var index=localStorage.getItem("indexNum") - 1; |
||||
localStorage.setItem(JSON.parse(localStorage.getItem("orgArr"))[index] + 'seatnumbercopy', |
||||
JSON.stringify({zhi:JSON.parse(localStorage.getItem("arrSeatcopy"))[index]+"号",fuzhi:JSON.parse(localStorage.getItem("arrSeat2copy"))[index]+"号"}) |
||||
) |
||||
return JSON.parse(localStorage.getItem("arrSeat2copy"))[index] - 15; |
||||
// if(selected == "南宁支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"11号",fuzhi:"17号"}))
|
||||
// return 2;
|
||||
// }else if(selected == "柳州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"8号",fuzhi:"15号"}))
|
||||
// return 0;
|
||||
// }else if(selected == "桂林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"4号",fuzhi:"21号"}))
|
||||
// return 6;
|
||||
// }else if(selected == "梧州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"2号",fuzhi:"26号"}))
|
||||
// return 11;
|
||||
// }else if(selected == "北海支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"7号",fuzhi:"27号"}))
|
||||
// return 12;
|
||||
// }else if(selected == "防城港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"12号",fuzhi:"22号"}))
|
||||
// return 7;
|
||||
// }else if(selected == "钦州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"3号",fuzhi:"25号"}))
|
||||
// return 10;
|
||||
// }else if(selected == "贵港支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"1号",fuzhi:"16号"}))
|
||||
// return 1;
|
||||
// }else if(selected == "玉林支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"9号",fuzhi:"20号"}))
|
||||
// return 5;
|
||||
// }else if(selected == "百色支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"6号",fuzhi:"18号"}))
|
||||
// return 3;
|
||||
// }else if(selected == "贺州支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"5号",fuzhi:"23号"}))
|
||||
// return 8;
|
||||
// }else if(selected == "河池支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"14号",fuzhi:"19号"}))
|
||||
// return 4;
|
||||
// }else if(selected == "来宾支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"10号",fuzhi:"24号"}))
|
||||
// return 9;
|
||||
// }else if(selected == "崇左支队"){
|
||||
// localStorage.setItem(selectedtime,JSON.stringify({zhi:"13号",fuzhi:"28号"}))
|
||||
// return 13;
|
||||
// }
|
||||
} |
||||
}); |
||||
var data = [ |
||||
{'南宁支队':'11号17号'}, |
||||
{'柳州支队':'8号15号'}, |
||||
{'桂林支队':'4号21号'}, |
||||
{'梧州支队':'2号26号'}, |
||||
{'北海支队':'7号27号'}, |
||||
{'防城港支队':'12号22号'}, |
||||
{'钦州支队':'3号25号'}, |
||||
{'贵港支队':'1号16号'}, |
||||
{'玉林支队':'9号20号'}, |
||||
{'百色支队':'6号18号'}, |
||||
{'贺州支队':'5号23号'}, |
||||
{'河池支队':'14号19号'}, |
||||
{'来宾支队':'10号24号'}, |
||||
{'崇左支队':'13号28号'} |
||||
] |
||||
|
||||
$("#slotMachineButtonShuffle22").click(function(){ |
||||
if(!selected){ |
||||
alert("请先选择单位")
|
||||
}else{ |
||||
machine.shuffle(); |
||||
machine6.shuffle(); |
||||
$("#slotMachineButtonShuffle22").addClass("disabled"); |
||||
setTimeout(() => { |
||||
machine.stop(); |
||||
machine6.stop(); |
||||
setTimeout(() => { |
||||
let obj = JSON.parse(localStorage.getItem(selectedtime)) |
||||
$("#endjieguo22 span").eq(selectedIndex).html(obj.zhi + '' + obj.fuzhi) |
||||
$("#chooseZhi22 .img").eq(selectedIndex - 1).css("display","inline-block"); |
||||
}, 1300); |
||||
}, 1000); |
||||
} |
||||
}); |
||||
|
||||
//左侧表格点击事件
|
||||
$("span[name='zzz']").on("click",function(e,index){ |
||||
selected = $(this)[0].innerText |
||||
selectedtime = $(this)[0].innerText + 'seatnumbercopy' |
||||
selectedIndex = localStorage.getItem("indexNum") |
||||
// console.log(456,selected,selectedIndex)
|
||||
if($("#endjieguo22 span").eq(selectedIndex)[0].innerText){ |
||||
$("#slotMachineButtonShuffle22").addClass("disabled"); |
||||
}else{ |
||||
$("#slotMachineButtonShuffle22").removeClass("disabled"); |
||||
} |
||||
}) |
||||
}); |
||||
@ -0,0 +1,564 @@
|
||||
/*! SlotMachine - v2.0.7 - 2014-11-06 |
||||
* https://github.com/josex2r/jQuery-SlotMachine
|
||||
* Copyright (c) 2014 Jose Luis Represa; Licensed MIT */ |
||||
;(function($, window, document, undefined){ |
||||
|
||||
var pluginName = "slotMachine", |
||||
defaults = { |
||||
active : 0, //Active element [int]
|
||||
delay : 200, //Animation time [int]
|
||||
auto : false, //Repeat delay [false||int]
|
||||
randomize : null, //Randomize function, must return an integer with the selected position
|
||||
complete : null, //Callback function(result)
|
||||
//stopHidden : true //Stops animations if the element isn´t visible on the screen
|
||||
}; |
||||
|
||||
var FX_FAST = 'slotMachineBlurFast', |
||||
FX_NORMAL = 'slotMachineBlurMedium', |
||||
FX_SLOW = 'slotMachineBlurSlow', |
||||
FX_GRADIENT = 'slotMachineGradient', |
||||
FX_STOP = FX_GRADIENT; |
||||
|
||||
//Set required styles, filters and masks
|
||||
$(document).ready(function(){ |
||||
|
||||
//Fast blur
|
||||
if( $('filter#slotMachineBlurFilterFast').length<=0 ){ |
||||
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||
'<filter id="slotMachineBlurFilterFast">'+ |
||||
'<feGaussianBlur stdDeviation="5" />'+ |
||||
'</filter>'+ |
||||
'</svg>'); |
||||
} |
||||
|
||||
//Medium blur
|
||||
if( $('filter#slotMachineBlurFilterMedium').length<=0 ){ |
||||
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||
'<filter id="slotMachineBlurFilterMedium">'+ |
||||
'<feGaussianBlur stdDeviation="3" />'+ |
||||
'</filter>'+ |
||||
'</svg>'); |
||||
} |
||||
|
||||
//Slow blur
|
||||
if( $('filter#slotMachineBlurFilterSlow').length<=0 ){ |
||||
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||
'<filter id="slotMachineBlurFilterSlow">'+ |
||||
'<feGaussianBlur stdDeviation="1" />'+ |
||||
'</filter>'+ |
||||
'</svg>'); |
||||
} |
||||
|
||||
//Fade mask
|
||||
if( $('mask#slotMachineFadeMask').length<=0 ){ |
||||
$('body').append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0">'+ |
||||
'<mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">'+ |
||||
'<linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0">'+ |
||||
'<stop stop-color="white" stop-opacity="0" offset="0"></stop>'+ |
||||
'<stop stop-color="white" stop-opacity="1" offset="0.25"></stop>'+ |
||||
'<stop stop-color="white" stop-opacity="1" offset="0.75"></stop>'+ |
||||
'<stop stop-color="white" stop-opacity="0" offset="1"></stop>'+ |
||||
'</linearGradient>'+ |
||||
'<rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeGradient)"></rect>'+ |
||||
'</mask>'+ |
||||
'</svg>'); |
||||
} |
||||
|
||||
//CSS classes
|
||||
$('body').append('<style>' + |
||||
'.' + FX_FAST + '{-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);filter: url(#slotMachineBlurFilterFast);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="5")}' + |
||||
'.' + FX_NORMAL + '{-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);-ms-filter: blur(3px);filter: blur(3px);filter: url(#slotMachineBlurFilterMedium);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="3")}' + |
||||
'.' + FX_SLOW + '{-webkit-filter: blur(1px);-moz-filter: blur(1px);-o-filter: blur(1px);-ms-filter: blur(1px);filter: blur(1px);filter: url(#slotMachineBlurFilterSlow);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="1")}' + |
||||
'.' + FX_GRADIENT + '{' + |
||||
'-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) );' + |
||||
'mask: url(#slotMachineFadeMask);' + |
||||
'}'+ |
||||
'</style>'); |
||||
|
||||
}); |
||||
|
||||
//Required easing functions
|
||||
if(typeof $.easing.easeOutBounce !== 'function'){ |
||||
//From jQuery easing, extend jQuery animations functions
|
||||
$.extend( $.easing, { |
||||
easeOutBounce: function (x, t, b, c, d) { |
||||
if ((t/=d) < (1/2.75)) { |
||||
return c*(7.5625*t*t) + b; |
||||
} else if (t < (2/2.75)) { |
||||
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; |
||||
} else if (t < (2.5/2.75)) { |
||||
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; |
||||
} else { |
||||
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; |
||||
} |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
|
||||
function Timer(fn, delay){ |
||||
var startTime, |
||||
self = this, |
||||
timer, |
||||
_fn = fn, |
||||
_args = arguments, |
||||
_delay = delay; |
||||
|
||||
this.running = false; |
||||
|
||||
this.onpause = function(){}; |
||||
this.onresume = function(){}; |
||||
|
||||
this.cancel = function(){ |
||||
this.running = false; |
||||
clearTimeout(timer); |
||||
}; |
||||
|
||||
this.pause = function(){ |
||||
if( this.running ){ |
||||
delay -= new Date().getTime() - startTime; |
||||
this.cancel(); |
||||
this.onpause(); |
||||
} |
||||
}; |
||||
|
||||
this.resume = function(){ |
||||
if( !this.running ){ |
||||
this.running = true; |
||||
startTime = new Date().getTime(); |
||||
|
||||
timer = setTimeout(function(){ |
||||
_fn.apply(self, Array.prototype.slice.call(_args, 2, _args.length)); //Execute function with initial arguments, removing (fn & delay)
|
||||
}, delay); |
||||
|
||||
this.onresume(); |
||||
} |
||||
}; |
||||
|
||||
this.reset = function(){ |
||||
this.cancel(); |
||||
this.running = true; |
||||
delay = _delay; |
||||
timer = setTimeout(function(){ |
||||
_fn.apply(self, Array.prototype.slice.call(_args, 2, _args.length)); //Execute function with initial arguments, removing (fn & delay)
|
||||
}, _delay); |
||||
}; |
||||
|
||||
this.add = function(extraDelay){ |
||||
this.pause(); |
||||
delay += extraDelay; |
||||
this.resume(); |
||||
}; |
||||
|
||||
this.resume(); |
||||
} |
||||
|
||||
|
||||
/** |
||||
* @desc PUBLIC - Makes Slot Machine animation effect |
||||
* @param DOM element - Html element |
||||
* @param object settings - Plugin configuration params |
||||
* @return jQuery node - Returns jQuery selector with some new functions (shuffle, stop, next, auto, active) |
||||
*/ |
||||
function SlotMachine(element, options){ |
||||
this.element = element; |
||||
this.settings = $.extend( {}, defaults, options); |
||||
this.defaults = defaults; |
||||
this.name = pluginName; |
||||
|
||||
//jQuery selector
|
||||
this.$slot = $(element); |
||||
//Slot Machine elements
|
||||
this.$tiles = this.$slot.children(); |
||||
//Container to wrap $tiles
|
||||
this.$container = null; |
||||
//Min marginTop offset
|
||||
this._minTop = null; |
||||
//Max marginTop offset
|
||||
this._maxTop = null; |
||||
//First element (the last of the html container)
|
||||
this._$fakeFirstTile = null; |
||||
//Last element (the first of the html container)
|
||||
this._$fakeLastTile = null; |
||||
//Timeout recursive function to handle auto (settings.auto)
|
||||
this._timer = null; |
||||
//Callback function
|
||||
this._oncompleteStack = [ this.settings.complete ]; |
||||
//Number of spins left before stop
|
||||
this._spinsLeft = null; |
||||
//Future result
|
||||
this.futureActive = null; |
||||
//Machine is running?
|
||||
this.isRunning = false; |
||||
//Current active element
|
||||
this.active = this.settings.active; |
||||
|
||||
this.$slot.css("overflow", "hidden"); |
||||
|
||||
//Validate active index
|
||||
if(this.settings.active < 0 || this.settings.active >= this.$tiles.length ){ |
||||
this.settings.active = 0; |
||||
this.active = 0; |
||||
} |
||||
|
||||
//Wrap elements inside $container
|
||||
this.$tiles.wrapAll("<div class='slotMachineContainer' />"); |
||||
this.$container = this.$slot.find(".slotMachineContainer"); |
||||
|
||||
//Set max top offset
|
||||
this._maxTop = - this.$container.height(); |
||||
|
||||
//Add the last element behind the first to prevent the jump effect
|
||||
this._$fakeFirstTile = this.$tiles.last().clone(); |
||||
this._$fakeLastTile = this.$tiles.first().clone(); |
||||
|
||||
this.$container.prepend( this._$fakeFirstTile ); |
||||
this.$container.append( this._$fakeLastTile ); |
||||
|
||||
//Set min top offset
|
||||
this._minTop = - this._$fakeFirstTile.outerHeight(); |
||||
|
||||
//Show active element
|
||||
this.$container.css('margin-top', this.getTileOffset(this.active)); |
||||
|
||||
//Start auto animation
|
||||
if(this.settings.auto !== false){ |
||||
if(this.settings.auto === true){ |
||||
this.shuffle(); |
||||
}else{ |
||||
this.auto(); |
||||
} |
||||
} |
||||
} |
||||
/** |
||||
* @desc PRIVATE - Get element offset top |
||||
* @param int index - Element position |
||||
* @return int - Negative offset in px |
||||
*/ |
||||
SlotMachine.prototype.getTileOffset = function(index){ |
||||
var offset = 0; |
||||
for(var i=0; i<index; i++){ |
||||
offset += $( this.$tiles.get(i) ).outerHeight(); |
||||
} |
||||
return - offset + this._minTop; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Get current showing element index |
||||
* @return int - Element index |
||||
*/ |
||||
SlotMachine.prototype.getVisibleTile = function(){ |
||||
var firstTileHeight = this.$tiles.first().height(), |
||||
containerMarginTop = parseInt( this.$container.css('margin-top').replace(/px/, ''), 10); |
||||
|
||||
return Math.abs( Math.round( containerMarginTop / firstTileHeight ) ) - 1; |
||||
}; |
||||
/** |
||||
* @desc PUBLIC - Changes randomize function |
||||
* @param function|int - Set new randomize function |
||||
*/ |
||||
SlotMachine.prototype.setRandomize = function(rnd){ |
||||
if(typeof rnd === 'number'){ |
||||
var _fn = function(){ |
||||
return rnd; |
||||
}; |
||||
this.settings.randomize = _fn; |
||||
}else{ |
||||
this.settings.randomize = rnd; |
||||
} |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Get random element different than last shown |
||||
* @param boolean cantBeTheCurrent - true||undefined if cant be choosen the current element, prevents repeat |
||||
* @return int - Element index |
||||
*/ |
||||
SlotMachine.prototype.getRandom = function(cantBeTheCurrent){ |
||||
var rnd, |
||||
removePrevious = cantBeTheCurrent || false; |
||||
do{ |
||||
rnd = Math.floor( Math.random() * this.$tiles.length); |
||||
}while((removePrevious && rnd === this.active) && rnd >= 0); |
||||
|
||||
return rnd; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Get random element based on the custom randomize function |
||||
* @return int - Element index |
||||
*/ |
||||
SlotMachine.prototype.getCustom = function(){ |
||||
var choosen; |
||||
if(this.settings.randomize !== null && typeof this.settings.randomize === 'function'){ |
||||
var index = this.settings.randomize.apply(this, [this.active]); |
||||
if(index < 0 || index >= this.$tiles.length){ |
||||
index = 0; |
||||
} |
||||
choosen = index; |
||||
}else{ |
||||
choosen = this.getRandom(); |
||||
} |
||||
return choosen; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Get the previous element |
||||
* @return int - Element index |
||||
*/ |
||||
SlotMachine.prototype.getPrev = function(){ |
||||
var prevIndex = (this.active-1 < 0) ? (this.$tiles.length - 1) : (this.active - 1); |
||||
return prevIndex; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Get the next element |
||||
* @return int - Element index |
||||
*/ |
||||
SlotMachine.prototype.getNext = function(){ |
||||
var nextIndex = (this.active + 1 < this.$tiles.length) ? (this.active + 1) : 0; |
||||
return nextIndex; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Set CSS classes to make speed effect |
||||
* @param string FX_SPEED - Element speed [FX_FAST_BLUR||FX_NORMAL_BLUR||FX_SLOW_BLUR||FX_STOP] |
||||
* @param string||boolean fade - Set fade gradient effect |
||||
*/ |
||||
SlotMachine.prototype._setAnimationFX = function(FX_SPEED, fade){ |
||||
var self = this; |
||||
|
||||
setTimeout(function(){ |
||||
self.$tiles.removeClass(FX_FAST).removeClass(FX_NORMAL).removeClass(FX_SLOW).addClass(FX_SPEED); |
||||
|
||||
if(fade !== true || FX_SPEED === FX_STOP){ |
||||
self.$slot.add(self.$tiles).removeClass(FX_GRADIENT); |
||||
}else{ |
||||
self.$slot.add(self.$tiles).addClass(FX_GRADIENT); |
||||
} |
||||
}, this.settings.delay / 4); |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Reset active element position |
||||
*/ |
||||
SlotMachine.prototype._resetPosition = function(){ |
||||
this.$container.css("margin-top", this.getTileOffset(this.active)); |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Checks if the machine is on the screen |
||||
* @return int - Returns true if machine is on the screen |
||||
*/ |
||||
SlotMachine.prototype.isVisible = function(){ |
||||
//Stop animation if element is [above||below] screen, best for performance
|
||||
var above = this.$slot.offset().top > $(window).scrollTop() + $(window).height(), |
||||
below = $(window).scrollTop() > this.$slot.height() + this.$slot.offset().top; |
||||
|
||||
return !above && !below; |
||||
}; |
||||
/** |
||||
* @desc PUBLIC - SELECT previous element relative to the current active element |
||||
* @return int - Returns result index |
||||
*/ |
||||
SlotMachine.prototype.prev = function(){ |
||||
this.futureActive = this.getPrev(); |
||||
this.isRunning = true; |
||||
this.stop(false); |
||||
return this.futureActive; |
||||
};
|
||||
/** |
||||
* @desc PUBLIC - SELECT next element relative to the current active element |
||||
* @return int - Returns result index |
||||
*/ |
||||
SlotMachine.prototype.next = function(){ |
||||
this.futureActive = this.getNext(); |
||||
this.isRunning = true; |
||||
this.stop(false); |
||||
return this.futureActive; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Starts shuffling the elements |
||||
* @param int repeations - Number of shuffles (undefined to make infinite animation |
||||
* @return int - Returns result index |
||||
*/ |
||||
SlotMachine.prototype.shuffle = function( spins, onComplete ){
|
||||
var self = this; |
||||
/* |
||||
if(!this.isVisible() && this.settings.stopHidden === true){ |
||||
return this.stop(); |
||||
} |
||||
*/ |
||||
if(onComplete !== undefined){ |
||||
//this._oncompleteStack.push(onComplete);
|
||||
this._oncompleteStack[1] = onComplete; |
||||
} |
||||
|
||||
this.isRunning = true; |
||||
var delay = this.settings.delay; |
||||
|
||||
if(this.futureActive === null){ |
||||
//Get random or custom element
|
||||
var rnd = this.getCustom(); |
||||
this.futureActive = rnd; |
||||
} |
||||
|
||||
/*if(this.$slot.attr("id")==="machine1") |
||||
console.log(this.futureActive)*/ |
||||
//Decreasing spin
|
||||
if(typeof spins === 'number'){ |
||||
//Change delay and speed
|
||||
switch( spins){ |
||||
case 1: |
||||
case 2: |
||||
this._setAnimationFX(FX_SLOW, true); |
||||
break; |
||||
case 3: |
||||
case 4: |
||||
this._setAnimationFX(FX_NORMAL, true); |
||||
delay /= 1.5; |
||||
break; |
||||
default: |
||||
this._setAnimationFX(FX_FAST, true); |
||||
delay /= 2; |
||||
} |
||||
//Infinite spin
|
||||
}else{ |
||||
//Set animation effects
|
||||
this._setAnimationFX(FX_FAST, true); |
||||
delay /= 2; |
||||
} |
||||
|
||||
//Perform animation
|
||||
this.$container.animate({ |
||||
marginTop : this._maxTop |
||||
}, delay, 'linear', function(){ |
||||
//Reset top position
|
||||
self.$container.css('margin-top', 0); |
||||
|
||||
if(spins - 1 <= 0){ |
||||
self.stop(); |
||||
}else{ |
||||
//Repeat animation
|
||||
self.shuffle(spins - 1); |
||||
} |
||||
}); |
||||
|
||||
return this.futureActive; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Stop shuffling the elements |
||||
* @return int - Returns result index |
||||
*/ |
||||
SlotMachine.prototype.stop = function( showGradient ){ |
||||
if(!this.isRunning){ |
||||
return; |
||||
} |
||||
var self = this; |
||||
|
||||
//Stop animation NOW!!!!!!!
|
||||
this.$container.clearQueue().stop(true, false); |
||||
|
||||
this._setAnimationFX(FX_SLOW, showGradient === undefined ? true : showGradient); |
||||
|
||||
this.isRunning = true; |
||||
|
||||
//Set current active element
|
||||
this.active = this.getVisibleTile(); |
||||
|
||||
//Check direction to prevent jumping
|
||||
if(this.futureActive > this.active){ |
||||
//We are moving to the prev (first to last)
|
||||
if(this.active === 0 && this.futureActive === this.$tiles.length-1){ |
||||
this.$container.css('margin-top', this.getTileOffset(this.$tiles.length) ); |
||||
} |
||||
}else{ |
||||
//We are moving to the next (last to first)
|
||||
if(this.active === this.$tiles.length - 1 && this.futureActive === 0){ |
||||
this.$container.css('margin-top', 0); |
||||
} |
||||
} |
||||
|
||||
//Update last choosen element index
|
||||
this.active = this.futureActive; |
||||
this.futureActive = null; |
||||
|
||||
//Get delay
|
||||
var delay = this.settings.delay * 3; |
||||
|
||||
//Perform animation
|
||||
this.$container.animate({ |
||||
marginTop : this.getTileOffset(this.active) |
||||
}, delay, 'easeOutBounce', function (){ |
||||
|
||||
self.isRunning = false; |
||||
|
||||
//Filter callbacks
|
||||
/* |
||||
self._oncompleteStack = Array.prototype.filter.call(self._oncompleteStack, function(fn){ |
||||
return typeof fn === 'function'; |
||||
}); |
||||
//Ececute callbacks
|
||||
Array.prototype.map.call(self._oncompleteStack, function(fn, index){ |
||||
if(typeof fn === 'function'){ |
||||
fn.apply(self, [self.active]); |
||||
self._oncompleteStack[index] = null; |
||||
} |
||||
}); |
||||
*/ |
||||
if(typeof self._oncompleteStack[0] === 'function'){ |
||||
self._oncompleteStack[0].apply(self, [self.active]); |
||||
} |
||||
if(typeof self._oncompleteStack[1] === 'function'){ |
||||
self._oncompleteStack[1].apply(self, [self.active]); |
||||
} |
||||
}); |
||||
|
||||
//Disable blur
|
||||
setTimeout(function(){ |
||||
self._setAnimationFX(FX_STOP, false); |
||||
}, delay / 1.75); |
||||
|
||||
return this.active; |
||||
}; |
||||
/** |
||||
* @desc PRIVATE - Start auto shufflings, animation stops each 3 repeations. Then restart animation recursively |
||||
*/ |
||||
SlotMachine.prototype.auto = function(){ |
||||
var self = this; |
||||
|
||||
this._timer = new Timer(function(){ |
||||
if(typeof self.settings.randomize !== 'function'){ |
||||
self.futureActive = self.getNext(); |
||||
} |
||||
self.isRunning = true; |
||||
self.shuffle(5, function(){ |
||||
self._timer.reset(); |
||||
}); |
||||
|
||||
}, this.settings.auto);
|
||||
}; |
||||
|
||||
|
||||
|
||||
/* |
||||
* Create new plugin instance if needed and return it |
||||
*/ |
||||
function _getInstance(element, options){ |
||||
var machine; |
||||
if ( !$.data(element[0], 'plugin_' + pluginName) ){ |
||||
machine = new SlotMachine(element, options); |
||||
$.data(element[0], 'plugin_' + pluginName, machine); |
||||
}else{ |
||||
machine = $.data(element[0], 'plugin_' + pluginName); |
||||
} |
||||
return machine; |
||||
} |
||||
|
||||
/* |
||||
* Chainable instance |
||||
*/ |
||||
$.fn[pluginName] = function(options){ |
||||
if( this.length===1 ){ |
||||
return _getInstance(this, options); |
||||
}else{ |
||||
return this.each(function(){ |
||||
if( !$.data(this, 'plugin_' + pluginName) ){ |
||||
_getInstance(this, options); |
||||
} |
||||
}); |
||||
} |
||||
}; |
||||
|
||||
})( jQuery, window, document ); |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue