diff --git a/README.md b/README.md index 41fa697..249b388 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ -智能实战指挥平台-前端项目 - - ---广西 演示 +指挥员指挥能力考评抽签-前端项目 项目初始化：npm install diff --git a/package-lock.json b/package-lock.json index 5b2bab3..d275bfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16640,8 +16640,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -16684,8 +16683,7 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", @@ -16696,8 +16694,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -16814,8 +16811,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -16827,7 +16823,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -16857,7 +16852,6 @@ "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -16876,7 +16870,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -16979,7 +16972,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -17065,8 +17057,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -17102,7 +17093,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -17122,7 +17112,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -17166,14 +17155,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -17611,8 +17598,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -17729,8 +17715,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -17772,7 +17757,6 @@ "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -17791,7 +17775,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -17894,7 +17877,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -17980,8 +17962,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -18017,7 +17998,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -18081,14 +18061,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 18d8f45..9cf8f6f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-10-07 15:00:15 * @LastEditors: sueRimn - * @LastEditTime: 2020-10-17 15:46:23 + * @LastEditTime: 2020-10-18 08:45:09 */ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; @@ -20,24 +20,18 @@ import { LuckDrawComponent } from './ui/luck-draw/luck-draw.component'; import {ResetComponent} from './ui/reset/reset.component' //import {LuckDrawBatchComponent} from './ui/luck-draw-batch/luck-draw-batch.component' import { from } from 'rxjs'; +import { FirstStepComponent } from './ui/first-step/first-step.component'; +import { FourStepComponent } from './ui/four-step/four-step.component'; +import { DrawingResultComponent } from './ui/drawing-result/drawing-result.component'; const routes: Routes = [ - //{path:'',redirectTo:'ui/plan',pathMatch:'full',}, - /* { - path:'', - component:NavigationComponent, - // canActivate: [AuthGuard],//守卫验证 - children:[ - {path:'ui',loadChildren:() => import('./ui/ui.module').then(m => m.UiModule)}, - // {path:'home',loadChildren:() => import('./pages/pages.module').then(m => m.PagesModule)}, - // {path:'visualization',component: HomeComponent}, - // {path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)} - ] - }, */ {path:'',component:LuckDrawComponent}, + {path:'firstStep',component:FirstStepComponent}, {path:'Reset',component:ResetComponent}, //{path:'LuckDrawBatch',component:LuckDrawBatchComponent} + {path:'fourStep',component:FourStepComponent}, + {path: 'drawingResult', component:DrawingResultComponent} // {path:'login', // component:LoginComponent}, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 13a5c02..f3f4ecf 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -16,20 +16,6 @@ export class AppComponent { constructor(private http:HttpClient,private router:Router,public token:CacheTokenService) { } ngOnInit(): void { - var token = sessionStorage.getItem("token"); - var refreshToken = sessionStorage.getItem("refreshToken"); - if(token && refreshToken) { - this.http.post('/api/Account/RefreshToken', { - token: token, - refreshToken: refreshToken - }).subscribe((data: Data) => { - sessionStorage.setItem("level",data.level); - sessionStorage.setItem("token",data.token); - sessionStorage.setItem("refreshToken",data.refreshToken); - this.token.startUp() - }) - } - } diff --git a/src/app/http-interceptors/base-interceptor.ts b/src/app/http-interceptors/base-interceptor.ts index 76b39b8..066dec9 100644 --- a/src/app/http-interceptors/base-interceptor.ts +++ b/src/app/http-interceptors/base-interceptor.ts @@ -44,26 +44,13 @@ export class BaseInterceptor implements HttpInterceptor { private handleError(error: HttpErrorResponse) { // 用户认证失败返回登录页 if (error.status === 401||error.status === 614) { - this.token.delete() - sessionStorage.clear() - window.localStorage.clear() - this.router.navigate(['ui/plan']) - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('用户认证信息过期,请重新登录','确定',config); + } if (error.status === 403) { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('对不起,您无此权限','确定',config); + } if (error.status === 400) { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请核对您的输入格式是否正确','确定',config); + } if (error.error instanceof ErrorEvent) { diff --git a/src/app/ui/drawing-result/drawing-result.component.html b/src/app/ui/drawing-result/drawing-result.component.html new file mode 100644 index 0000000..13b9b3c --- /dev/null +++ b/src/app/ui/drawing-result/drawing-result.component.html @@ -0,0 +1,42 @@ +
+
+ +
+

业务理论考试

+ + + + + + + + + + + +
{{header}}
{{item.order}}{{item.fireName}}{{item.drawLotsOrder}} +

{{items}}

+ 		+

{{items}}

+
+

指挥能力考评

+ + + + + + + + + + + + +
{{header}}
{{item.order}}{{item.fireName}}{{item.drawLotsOrder}}{{item.num}} +

{{items}}

+ 		+

{{items}}

+
+
+ +
\ No newline at end of file diff --git a/src/app/ui/drawing-result/drawing-result.component.scss b/src/app/ui/drawing-result/drawing-result.component.scss new file mode 100644 index 0000000..f1ffba2 --- /dev/null +++ b/src/app/ui/drawing-result/drawing-result.component.scss @@ -0,0 +1,67 @@ +.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 { + width: 80%; + max-height: 90%; + margin: 0 auto; + overflow-x: hidden; + overflow-y: auto; + text-align: center; + h3 { + font-size: 26px; + 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; } \ No newline at end of file diff --git a/src/app/ui/drawing-result/drawing-result.component.spec.ts b/src/app/ui/drawing-result/drawing-result.component.spec.ts new file mode 100644 index 0000000..9bfbd8c --- /dev/null +++ b/src/app/ui/drawing-result/drawing-result.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DrawingResultComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DrawingResultComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ui/drawing-result/drawing-result.component.ts b/src/app/ui/drawing-result/drawing-result.component.ts new file mode 100644 index 0000000..3c35d99 --- /dev/null +++ b/src/app/ui/drawing-result/drawing-result.component.ts @@ -0,0 +1,51 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-drawing-result', + templateUrl: './drawing-result.component.html', + styleUrls: ['./drawing-result.component.scss'] +}) +export class DrawingResultComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + + headersZero:string [] = ['序号','支队名称','抽签顺序', '职级','座位号'] + tableDataZero = [ + {order: 1, fireName: '南宁支队', drawLotsOrder: '01', name: ['支队长','副支队长'], seatNum: ['01','02'] }, + {order: 2, fireName: '柳州支队', drawLotsOrder: '02', name: ['支队长','副支队长'], seatNum: ['03','04'] }, + {order: 3, fireName: '桂林支队', drawLotsOrder: '03', name: ['支队长','副支队长'], seatNum: ['05','06'] }, + {order: 4, fireName: '梧州支队', drawLotsOrder: '04', name: ['支队长','副支队长'], seatNum: ['01','02'] }, + {order: 5, fireName: '北海支队', drawLotsOrder: '05', name: ['支队长','副支队长'], seatNum: ['03','04'] }, + {order: 6, fireName: '防城港支队', drawLotsOrder: '06', name: ['支队长','副支队长'], seatNum: ['05','06'] }, + {order: 7, fireName: '钦州支队', drawLotsOrder: '07', name: ['支队长','副支队长'], seatNum: ['01','02'] }, + {order: 8, fireName: '贵港支队', drawLotsOrder: '08', name: ['支队长','副支队长'], seatNum: ['03','04'] }, + {order: 9, fireName: '玉林支队', drawLotsOrder: '09', name: ['支队长','副支队长'], seatNum: ['05','06'] }, + {order: 10, fireName: '百色支队', drawLotsOrder: '10', name: ['支队长','副支队长'], seatNum: ['01','02'] }, + {order: 11, fireName: '贺州支队', drawLotsOrder: '11', name: ['支队长','副支队长'], seatNum: ['03','04'] }, + {order: 12, fireName: '河池支队', drawLotsOrder: '12', name: ['支队长','副支队长'], seatNum: ['05','06'] }, + {order: 13, fireName: '来宾支队', drawLotsOrder: '13', name: ['支队长','副支队长'], seatNum: ['03','04'] }, + {order: 14, fireName: '崇左支队', drawLotsOrder: '14', name: ['支队长','副支队长'], seatNum: ['05','06'] }, + ] + + headers:string [] = ['序号','支队名称','抽签顺序','场景类型', '职级','座位号'] + tableData = [ + {order: 1, fireName: '南宁支队', drawLotsOrder: '05', num: localStorage.getItem('5') || '', name: ['支队长','副支队长'], seatNum: ['8号','21号'] }, + {order: 2, fireName: '柳州支队', drawLotsOrder: '10', num: localStorage.getItem('10') || '', name: ['支队长','副支队长'], seatNum: ['12号','26号'] }, + {order: 3, fireName: '桂林支队', drawLotsOrder: '14', num: localStorage.getItem('14') || '', name: ['支队长','副支队长'], seatNum: ['14号','15号'] }, + {order: 4, fireName: '梧州支队', drawLotsOrder: '03', num: localStorage.getItem('3') || '', name: ['支队长','副支队长'], seatNum: ['13号','28号'] }, + {order: 5, fireName: '北海支队', drawLotsOrder: '08', num: localStorage.getItem('8') || '', name: ['支队长','副支队长'], seatNum: ['4号','22号'] }, + {order: 6, fireName: '防城港支队', drawLotsOrder: '13', num: localStorage.getItem('13') || '', name: ['支队长','副支队长'], seatNum: ['1号','16号'] }, + {order: 7, fireName: '钦州支队', drawLotsOrder: '06', num: localStorage.getItem('6') || '', name: ['支队长','副支队长'], seatNum: ['10号','25号'] }, + {order: 8, fireName: '贵港支队', drawLotsOrder: '01', num: localStorage.getItem('1') || '', name: ['支队长','副支队长'], seatNum: ['11号','19号'] }, + {order: 9, fireName: '玉林支队', drawLotsOrder: '07', num: localStorage.getItem('7') || '', name: ['支队长','副支队长'], seatNum: ['2号','27号'] }, + {order: 10, fireName: '百色支队', drawLotsOrder: '12', num: localStorage.getItem('12') || '', name: ['支队长','副支队长'], seatNum: ['9号','20号'] }, + {order: 11, fireName: '贺州支队', drawLotsOrder: '02', num: localStorage.getItem('02') || '', name: ['支队长','副支队长'], seatNum: ['3号','24号'] }, + {order: 12, fireName: '河池支队', drawLotsOrder: '04', num: localStorage.getItem('04') || '', name: ['支队长','副支队长'], seatNum: ['6号','18号'] }, + {order: 13, fireName: '来宾支队', drawLotsOrder: '09', num: localStorage.getItem('09') || '', name: ['支队长','副支队长'], seatNum: ['7号','23号'] }, + {order: 14, fireName: '崇左支队', drawLotsOrder: '11', num: localStorage.getItem('11') || '', name: ['支队长','副支队长'], seatNum: ['5号','17号'] }, + ] + +} diff --git a/src/app/ui/first-step/first-step.component.html b/src/app/ui/first-step/first-step.component.html new file mode 100644 index 0000000..3bf796e --- /dev/null +++ b/src/app/ui/first-step/first-step.component.html @@ -0,0 +1,73 @@ + +
+
+ + + +
+
+ +
+
+
+ 请选择支队 + {{item.name}} + + +
+
+
+
+
+
+ 抽签结果: + {{item.result}} +
+
+
+ +
+ +
+ +
+
+
+ {{isDraw ? '已抽签' : '开始抽签'}} +
+
{{item.name}}
+
+ +
+ +
+ +
+
开始抽签
+ +
+ +
+ + +
+
+ + + diff --git a/src/app/ui/first-step/first-step.component.scss b/src/app/ui/first-step/first-step.component.scss new file mode 100644 index 0000000..dee0242 --- /dev/null +++ b/src/app/ui/first-step/first-step.component.scss @@ -0,0 +1,182 @@ + + + @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; +} + +.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: 17%; +} + +//选择后加背景色 +.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%;} + diff --git a/src/app/ui/first-step/first-step.component.spec.ts b/src/app/ui/first-step/first-step.component.spec.ts new file mode 100644 index 0000000..ed532ee --- /dev/null +++ b/src/app/ui/first-step/first-step.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FirstStepComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FirstStepComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ui/first-step/first-step.component.ts b/src/app/ui/first-step/first-step.component.ts new file mode 100644 index 0000000..37c1e9f --- /dev/null +++ b/src/app/ui/first-step/first-step.component.ts @@ -0,0 +1,74 @@ +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(){ + window.setTimeout(()=>{ + //zhuan.drawRouletteWheel() + },0) + + } + //支队数据和是否抽奖 + 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("崇左支队") || ""} + ] + 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 + } + } + + turnplate={ + restaraunts:[], //大转盘奖品名称 + colors:[], //大转盘奖品区块对应背景颜色 + outsideRadius:192, //大转盘外圆的半径 + textRadius:155, //大转盘奖品位置距离圆心的距离 + insideRadius:68, //大转盘内圆的半径 + startAngle:0, //开始角度 + bRotate:false //false:停止;ture:旋转 + }; + +} diff --git a/src/app/ui/four-step/four-step.component.html b/src/app/ui/four-step/four-step.component.html new file mode 100644 index 0000000..40967bc --- /dev/null +++ b/src/app/ui/four-step/four-step.component.html @@ -0,0 +1,77 @@ + +
+
+ + + +
+
+ +
+
+
+ 请选择支队 + {{item.name}} + + +
+
+
+
+
+
+ 抽签结果: + {{item.result.zhi}}{{item.result.fuzhi}} +
+
+
+ +
+ +
+ +
+
+ +
{{item.name}}
+
+
+
{{item.name}}
+
+ +
+ +
+ +
+
开始抽签
+ +
+ +
+ + +
+
+ + + + \ No newline at end of file diff --git a/src/app/ui/four-step/four-step.component.scss b/src/app/ui/four-step/four-step.component.scss new file mode 100644 index 0000000..85b9fd4 --- /dev/null +++ b/src/app/ui/four-step/four-step.component.scss @@ -0,0 +1,183 @@ + + + @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; + } + + .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: 17%; + } + + //选择后加背景色 + .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%;} + + \ No newline at end of file diff --git a/src/app/ui/four-step/four-step.component.spec.ts b/src/app/ui/four-step/four-step.component.spec.ts new file mode 100644 index 0000000..ad67d40 --- /dev/null +++ b/src/app/ui/four-step/four-step.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FourStepComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FourStepComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ui/four-step/four-step.component.ts b/src/app/ui/four-step/four-step.component.ts new file mode 100644 index 0000000..a3f2614 --- /dev/null +++ b/src/app/ui/four-step/four-step.component.ts @@ -0,0 +1,80 @@ +import { Component, OnInit } from '@angular/core'; +import '../../../assets/js/firststep2' +@Component({ + selector: 'app-four-step', + templateUrl: './four-step.component.html', + styleUrls: ['./four-step.component.scss'] +}) +export class FourStepComponent implements OnInit { + + constructor() { } + + ngOnInit(){ + window.setTimeout(()=>{ + //zhuan.drawRouletteWheel() + },0) + + } + //支队数据和是否抽奖 + choujiang = [ + {name:"南宁支队",id:1,result :JSON.parse(localStorage.getItem("南宁支队seatnumber")) || ""}, + {name:"柳州支队",id:2,result :JSON.parse(localStorage.getItem("柳州支队seatnumber")) || ""}, + {name:"桂林支队",id:3,result :JSON.parse(localStorage.getItem("桂林支队seatnumber")) || ""}, + {name:"梧州支队",id:4,result :JSON.parse(localStorage.getItem("梧州支队seatnumber")) || ""}, + {name:"北海支队",id:5,result :JSON.parse(localStorage.getItem("北海支队seatnumber")) || ""}, + {name:"防城港支队",id:6,result :JSON.parse(localStorage.getItem("防城港支队seatnumber")) || ""}, + {name:"钦州支队",id:7,result :JSON.parse(localStorage.getItem("钦州支队seatnumber")) || ""}, + {name:"贵港支队",id:8,result :JSON.parse(localStorage.getItem("贵港支队seatnumber")) || ""}, + {name:"玉林支队",id:9,result :JSON.parse(localStorage.getItem("玉林支队seatnumber")) || ""}, + {name:"百色支队",id:10,result :JSON.parse(localStorage.getItem("百色支队seatnumber")) || ""}, + {name:"贺州支队",id:11,result :JSON.parse(localStorage.getItem("贺州支队seatnumber")) || ""}, + {name:"河池支队",id:12,result :JSON.parse(localStorage.getItem("河池支队seatnumber")) || ""}, + {name:"来宾支队",id:13,result :JSON.parse(localStorage.getItem("来宾支队seatnumber")) || ""}, + {name:"崇左支队",id:14,result :JSON.parse(localStorage.getItem("崇左支队seatnumber")) || ""} + ] + 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 + } + } + +} diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index 4d0ab39..6ac5179 100644 --- a/src/app/ui/ui.module.ts +++ b/src/app/ui/ui.module.ts @@ -61,9 +61,13 @@ import { WorkingAreaComponent } from '../working-area/working-area.component'; import { CountdownModule } from 'ngx-countdown'; import { LuckDrawComponent } from './luck-draw/luck-draw.component'; import { ResetComponent } from './reset/reset.component'; +import { FirstStepComponent } from './first-step/first-step.component'; +import { FourStepComponent } from './four-step/four-step.component'; +import { DrawingResultComponent } from './drawing-result/drawing-result.component'; + @NgModule({ - declarations: [SafeHtmlPipe,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,WorkingAreaComponent, LuckDrawComponent, ResetComponent], + declarations: [SafeHtmlPipe,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,WorkingAreaComponent, LuckDrawComponent, ResetComponent, DrawingResultComponent, FirstStepComponent, FourStepComponent], imports: [ CommonModule, diff --git a/src/assets/css/laohujistyle.css b/src/assets/css/laohujistyle.css new file mode 100644 index 0000000..8128335 --- /dev/null +++ b/src/assets/css/laohujistyle.css @@ -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; +} \ No newline at end of file diff --git a/src/assets/images/machine.png b/src/assets/images/machine.png new file mode 100644 index 0000000..fc78398 Binary files /dev/null and b/src/assets/images/machine.png differ diff --git a/src/assets/js/firststep.js b/src/assets/js/firststep.js new file mode 100644 index 0000000..bdb836a --- /dev/null +++ b/src/assets/js/firststep.js @@ -0,0 +1,86 @@ +$(document).ready(function(){ + var index = 0 + var selected = null //点击的单位名称 + var selectedIndex = null //点击的单位index + var machine = $("#machine4").slotMachine({ + active : 0, + delay : 500, + randomize : function(activeElementIndex){ + console.log("xxxxx") + 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(); + // $("#slotMachineButtonShuffle").removeClass("disabled"); + setTimeout(() => { + $("#endjieguo span").eq(selectedIndex).html(window.localStorage[selected]) + $("#chooseZhi .img").eq(selectedIndex - 1).css("display","inline-block"); + }, 1300); + }, 1000); + } + + }); + + //左侧表格点击事件 + $("span[name='aaa']").on("click",function(e,index){ + selected = $(this)[0].innerText + selectedIndex = localStorage.getItem("indexNum") + if($("#endjieguo span").eq(selectedIndex)[0].innerText){ + $("#slotMachineButtonShuffle").addClass("disabled"); + }else{ + $("#slotMachineButtonShuffle").removeClass("disabled"); + } + }) +}); \ No newline at end of file diff --git a/src/assets/js/firststep2.js b/src/assets/js/firststep2.js new file mode 100644 index 0000000..61bad39 --- /dev/null +++ b/src/assets/js/firststep2.js @@ -0,0 +1,151 @@ +$(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){ + 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:"15号"})) + 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:"22号"})) + 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){ + 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:"15号"})) + return 0; + }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:"22号"})) + return 7; + }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; + } + } + }); + var data = [ + {'南宁支队':'8号21号'}, + {'柳州支队':'12号26号'}, + {'桂林支队':'14号15号'}, + {'梧州支队':'13号28号'}, + {'北海支队':'4号22号'}, + {'防城港支队':'1号16号'}, + {'钦州支队':'10号25号'}, + {'贵港支队':'11号19号'}, + {'玉林支队':'2号27号'}, + {'百色支队':'9号20号'}, + {'贺州支队':'3号24号'}, + {'河池支队':'6号18号'}, + {'来宾支队':'7号23号'}, + {'崇左支队':'5号17号'} + ] + + $("#slotMachineButtonShuffle2").click(function(){ + if(!selected){ + alert("请先选择单位") + }else{ + machine.shuffle(); + machine6.shuffle(); + $("#slotMachineButtonShuffle2").addClass("disabled"); + setTimeout(() => { + machine.stop(); + machine6.stop(); + setTimeout(() => { + $("#endjieguo2 span").eq(selectedIndex).html(data[selectedIndex - 1][selected]) + $("#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"); + } + }) +}); \ No newline at end of file diff --git a/src/assets/js/jquery.slotmachine.js b/src/assets/js/jquery.slotmachine.js new file mode 100644 index 0000000..7278a3d --- /dev/null +++ b/src/assets/js/jquery.slotmachine.js @@ -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(''+ + ''+ + ''+ + ''+ + ''); + } + + //Medium blur + if( $('filter#slotMachineBlurFilterMedium').length<=0 ){ + $('body').append(''+ + ''+ + ''+ + ''+ + ''); + } + + //Slow blur + if( $('filter#slotMachineBlurFilterSlow').length<=0 ){ + $('body').append(''+ + ''+ + ''+ + ''+ + ''); + } + + //Fade mask + if( $('mask#slotMachineFadeMask').length<=0 ){ + $('body').append(''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''); + } + + //CSS classes + $('body').append(''); + + }); + + //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("
"); + 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= 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 ); diff --git a/src/assets/js/jquery.slotmachine.min.js b/src/assets/js/jquery.slotmachine.min.js new file mode 100644 index 0000000..1d272e6 --- /dev/null +++ b/src/assets/js/jquery.slotmachine.min.js @@ -0,0 +1,4 @@ +/*! SlotMachine - v2.0.7 - 2014-11-06 +* https://github.com/josex2r/jQuery-SlotMachine +* Copyright (c) 2014 Jose Luis Represa; Licensed MIT */ +!function(a,b,c,d){function e(a,b){var c,d,e=this,f=a,g=arguments,h=b;this.running=!1,this.onpause=function(){},this.onresume=function(){},this.cancel=function(){this.running=!1,clearTimeout(d)},this.pause=function(){this.running&&(b-=(new Date).getTime()-c,this.cancel(),this.onpause())},this.resume=function(){this.running||(this.running=!0,c=(new Date).getTime(),d=setTimeout(function(){f.apply(e,Array.prototype.slice.call(g,2,g.length))},b),this.onresume())},this.reset=function(){this.cancel(),this.running=!0,b=h,d=setTimeout(function(){f.apply(e,Array.prototype.slice.call(g,2,g.length))},h)},this.add=function(a){this.pause(),b+=a,this.resume()},this.resume()}function f(b,c){this.element=b,this.settings=a.extend({},i,c),this.defaults=i,this.name=h,this.$slot=a(b),this.$tiles=this.$slot.children(),this.$container=null,this._minTop=null,this._maxTop=null,this._$fakeFirstTile=null,this._$fakeLastTile=null,this._timer=null,this._oncompleteStack=[this.settings.complete],this._spinsLeft=null,this.futureActive=null,this.isRunning=!1,this.active=this.settings.active,this.$slot.css("overflow","hidden"),(this.settings.active<0||this.settings.active>=this.$tiles.length)&&(this.settings.active=0,this.active=0),this.$tiles.wrapAll("
"),this.$container=this.$slot.find(".slotMachineContainer"),this._maxTop=-this.$container.height(),this._$fakeFirstTile=this.$tiles.last().clone(),this._$fakeLastTile=this.$tiles.first().clone(),this.$container.prepend(this._$fakeFirstTile),this.$container.append(this._$fakeLastTile),this._minTop=-this._$fakeFirstTile.outerHeight(),this.$container.css("margin-top",this.getTileOffset(this.active)),this.settings.auto!==!1&&(this.settings.auto===!0?this.shuffle():this.auto())}function g(b,c){var d;return a.data(b[0],"plugin_"+h)?d=a.data(b[0],"plugin_"+h):(d=new f(b,c),a.data(b[0],"plugin_"+h,d)),d}var h="slotMachine",i={active:0,delay:200,auto:!1,randomize:null,complete:null},j="slotMachineBlurFast",k="slotMachineBlurMedium",l="slotMachineBlurSlow",m="slotMachineGradient",n=m;a(c).ready(function(){a("filter#slotMachineBlurFilterFast").length<=0&&a("body").append(''),a("filter#slotMachineBlurFilterMedium").length<=0&&a("body").append(''),a("filter#slotMachineBlurFilterSlow").length<=0&&a("body").append(''),a("mask#slotMachineFadeMask").length<=0&&a("body").append(''),a("body").append("")}),"function"!=typeof a.easing.easeOutBounce&&a.extend(a.easing,{easeOutBounce:function(a,b,c,d,e){return(b/=e)<1/2.75?7.5625*d*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}}),f.prototype.getTileOffset=function(b){for(var c=0,d=0;b>d;d++)c+=a(this.$tiles.get(d)).outerHeight();return-c+this._minTop},f.prototype.getVisibleTile=function(){var a=this.$tiles.first().height(),b=parseInt(this.$container.css("margin-top").replace(/px/,""),10);return Math.abs(Math.round(b/a))-1},f.prototype.setRandomize=function(a){if("number"==typeof a){var b=function(){return a};this.settings.randomize=b}else this.settings.randomize=a},f.prototype.getRandom=function(a){var b,c=a||!1;do b=Math.floor(Math.random()*this.$tiles.length);while(c&&b===this.active&&b>=0);return b},f.prototype.getCustom=function(){var a;if(null!==this.settings.randomize&&"function"==typeof this.settings.randomize){var b=this.settings.randomize.apply(this,[this.active]);(0>b||b>=this.$tiles.length)&&(b=0),a=b}else a=this.getRandom();return a},f.prototype.getPrev=function(){var a=this.active-1<0?this.$tiles.length-1:this.active-1;return a},f.prototype.getNext=function(){var a=this.active+1a(b).scrollTop()+a(b).height(),d=a(b).scrollTop()>this.$slot.height()+this.$slot.offset().top;return!c&&!d},f.prototype.prev=function(){return this.futureActive=this.getPrev(),this.isRunning=!0,this.stop(!1),this.futureActive},f.prototype.next=function(){return this.futureActive=this.getNext(),this.isRunning=!0,this.stop(!1),this.futureActive},f.prototype.shuffle=function(a,b){var c=this;b!==d&&(this._oncompleteStack[1]=b),this.isRunning=!0;var e=this.settings.delay;if(null===this.futureActive){var f=this.getCustom();this.futureActive=f}if("number"==typeof a)switch(a){case 1:case 2:this._setAnimationFX(l,!0);break;case 3:case 4:this._setAnimationFX(k,!0),e/=1.5;break;default:this._setAnimationFX(j,!0),e/=2}else this._setAnimationFX(j,!0),e/=2;return this.$container.animate({marginTop:this._maxTop},e,"linear",function(){c.$container.css("margin-top",0),0>=a-1?c.stop():c.shuffle(a-1)}),this.futureActive},f.prototype.stop=function(a){if(this.isRunning){var b=this;this.$container.clearQueue().stop(!0,!1),this._setAnimationFX(l,a===d?!0:a),this.isRunning=!0,this.active=this.getVisibleTile(),this.futureActive>this.active?0===this.active&&this.futureActive===this.$tiles.length-1&&this.$container.css("margin-top",this.getTileOffset(this.$tiles.length)):this.active===this.$tiles.length-1&&0===this.futureActive&&this.$container.css("margin-top",0),this.active=this.futureActive,this.futureActive=null;var c=3*this.settings.delay;return this.$container.animate({marginTop:this.getTileOffset(this.active)},c,"easeOutBounce",function(){b.isRunning=!1,"function"==typeof b._oncompleteStack[0]&&b._oncompleteStack[0].apply(b,[b.active]),"function"==typeof b._oncompleteStack[1]&&b._oncompleteStack[1].apply(b,[b.active])}),setTimeout(function(){b._setAnimationFX(n,!1)},c/1.75),this.active}},f.prototype.auto=function(){var a=this;this._timer=new e(function(){"function"!=typeof a.settings.randomize&&(a.futureActive=a.getNext()),a.isRunning=!0,a.shuffle(5,function(){a._timer.reset()})},this.settings.auto)},a.fn[h]=function(b){return 1===this.length?g(this,b):this.each(function(){a.data(this,"plugin_"+h)||g(this,b)})}}(jQuery,window,document); \ No newline at end of file diff --git a/src/index.html b/src/index.html index ba84f31..4ed0b8f 100644 --- a/src/index.html +++ b/src/index.html @@ -23,6 +23,7 @@ + diff --git a/src/styles.scss b/src/styles.scss index 33b023e..a65541a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,6 +5,7 @@ html,body{ height: 100%; margin:0 auto; padding:0; + overflow: hidden; } ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,section,article,aside,header,footer,nav,figure,time,mark,main,canvas{ margin:0;