nzdrtrt
/
Luck-Draw
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善]完善第二份老虎机页面

master
邵佳豪 4 years ago
parent
0340514703
commit
898397d80b
16 changed files with 993 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/app/app-routing.module.ts
  2. 28
      src/app/ui/drawing-result/drawing-result.component.ts
  3. 74
      src/app/ui/first-step-copy/first-step-copy.component.html
  4. 183
      src/app/ui/first-step-copy/first-step-copy.component.scss
  5. 25
      src/app/ui/first-step-copy/first-step-copy.component.spec.ts
  6. 67
      src/app/ui/first-step-copy/first-step-copy.component.ts
  7. 77
      src/app/ui/four-step-copy/four-step-copy.component.html
  8. 183
      src/app/ui/four-step-copy/four-step-copy.component.scss
  9. 25
      src/app/ui/four-step-copy/four-step-copy.component.spec.ts
  10. 80
      src/app/ui/four-step-copy/four-step-copy.component.ts
  11. 12
      src/app/ui/four-step/four-step.component.html
  12. 30
      src/app/ui/four-step/four-step.component.ts
  13. 4
      src/app/ui/ui.module.ts
  14. 85
      src/assets/js/firststepcopy.js
  15. 0
      src/assets/js/fourstep.js
  16. 151
      src/assets/js/fourstepcopy.js

6
src/app/app-routing.module.ts
Unescape View File

@ -21,14 +21,18 @@ import {ResetComponent} from './ui/reset/reset.component'
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';
import { FirstStepCopyComponent } from './ui/first-step-copy/first-step-copy.component';
import { FourStepCopyComponent } from './ui/four-step-copy/four-step-copy.component';
const routes: Routes = [
{path:'',component:LuckDrawComponent},
{path:'firstStep',component:FirstStepComponent},
{path:'firstStep2',component:FirstStepCopyComponent},
{path:'Reset',component:ResetComponent},
{path:'fourStep',component:FourStepComponent},
{path: 'drawingResult', component:DrawingResultComponent}
{path:'fourStep2',component:FourStepCopyComponent},
{path:'drawingResult', component:DrawingResultComponent}
// {path:'login',
// component:LoginComponent},

28
src/app/ui/drawing-result/drawing-result.component.ts
Unescape View File

@ -14,20 +14,20 @@ export class DrawingResultComponent implements OnInit {
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'] },
{order: 1, fireName: '南宁支队', drawLotsOrder: '12', name: ['支队长','副支队长'], seatNum: ['11号','17号'] },
{order: 2, fireName: '柳州支队', drawLotsOrder: '07', name: ['支队长','副支队长'], seatNum: ['08号','15号'] },
{order: 3, fireName: '桂林支队', drawLotsOrder: '01', name: ['支队长','副支队长'], seatNum: ['04号','21号'] },
{order: 4, fireName: '梧州支队', drawLotsOrder: '06', name: ['支队长','副支队长'], seatNum: ['02号','26号'] },
{order: 5, fireName: '北海支队', drawLotsOrder: '11', name: ['支队长','副支队长'], seatNum: ['07号','27号'] },
{order: 6, fireName: '防城港支队', drawLotsOrder: '02', name: ['支队长','副支队长'], seatNum: ['12号','22号'] },
{order: 7, fireName: '钦州支队', drawLotsOrder: '05', name: ['支队长','副支队长'], seatNum: ['03号','25号'] },
{order: 8, fireName: '贵港支队', drawLotsOrder: '08', name: ['支队长','副支队长'], seatNum: ['01号','16号'] },
{order: 9, fireName: '玉林支队', drawLotsOrder: '14', name: ['支队长','副支队长'], seatNum: ['09号','20号'] },
{order: 10, fireName: '百色支队', drawLotsOrder: '3', name: ['支队长','副支队长'], seatNum: ['06号','18号'] },
{order: 11, fireName: '贺州支队', drawLotsOrder: '9', name: ['支队长','副支队长'], seatNum: ['05号','23号'] },
{order: 12, fireName: '河池支队', drawLotsOrder: '4', name: ['支队长','副支队长'], seatNum: ['14号','19号'] },
{order: 13, fireName: '来宾支队', drawLotsOrder: '10', name: ['支队长','副支队长'], seatNum: ['10号','24号'] },
{order: 14, fireName: '崇左支队', drawLotsOrder: '13', name: ['支队长','副支队长'], seatNum: ['13号','28号'] },
]
headers:string [] = ['序号','支队名称','抽签顺序','场景类型', '职级','座位号']

74
src/app/ui/first-step-copy/first-step-copy.component.html
Unescape View File

@ -0,0 +1,74 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn
* @LastEditTime: 2020-10-14 09:08:17
-->
<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">
<!-- <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.idnum}}</span>
</div>
</div>
</div> -->
<div class="colum" style="margin-left: 150px;">
<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>
<button (click)="nextstep()">下一步</button>
</div>
</div>
</div>
</div>

183
src/app/ui/first-step-copy/first-step-copy.component.scss
Unescape View File

@ -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%;}

25
src/app/ui/first-step-copy/first-step-copy.component.spec.ts
Unescape View File

@ -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();
});
});

67
src/app/ui/first-step-copy/first-step-copy.component.ts
Unescape View File

@ -0,0 +1,67 @@
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(){
window.setTimeout(()=>{
//zhuan.drawRouletteWheel()
},0)
}
//支队数据和是否抽奖
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(){
this.router.navigate(['/fourStep2']);
}
}

77
src/app/ui/four-step-copy/four-step-copy.component.html
Unescape View File

@ -0,0 +1,77 @@
<!--
* @Descripttion:
* @version:
* @Author: sueRimn
* @Date: 2020-09-25 08:48:50
* @LastEditors: sueRimn
* @LastEditTime: 2020-10-14 09:08:17
-->
<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">
<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.seatnum}}</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>
</div>

183
src/app/ui/four-step-copy/four-step-copy.component.scss
Unescape View File

@ -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%;}

25
src/app/ui/four-step-copy/four-step-copy.component.spec.ts
Unescape View File

@ -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();
});
});

80
src/app/ui/four-step-copy/four-step-copy.component.ts
Unescape View File

@ -0,0 +1,80 @@
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() { }
ngOnInit(){
window.setTimeout(()=>{
//zhuan.drawRouletteWheel()
},0)
}
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
}
}
}

12
src/app/ui/four-step/four-step.component.html
Unescape View File

@ -13,15 +13,15 @@
<img class="ziti" src="../../../assets/images/tophead.png">
</div>
<div class="mainbox">
<!-- <div class="colum" style="margin-left: 13%;width: 100px;">
<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.idnum}}</span>
<span style="background-color: #ff4d29;color:#FFF;">序号</span>
<span *ngFor="let item of choujiang; let key=index" [ngClass]="{'beijicolor': chooseid ==key}" >{{item.seatnum}}</span>
</div>
</div>
</div> -->
<div class="colum" style="margin-left: 150px;">
</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>
@ -34,7 +34,7 @@
<div class="colum">
<div class="centerLeft">
<div class="tanCenterbtn" id="endjieguo2">
<span style="text-align: center;background-color: #ff4d29;color:#FFF;">抽签结果:</span>
<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>

30
src/app/ui/four-step/four-step.component.ts
Unescape View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import '../../../assets/js/firststep2'
import '../../../assets/js/fourstep'
@Component({
selector: 'app-four-step',
templateUrl: './four-step.component.html',
@ -17,20 +17,20 @@ export class FourStepComponent implements OnInit {
}
//支队数据和是否抽奖
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")) || ""}
{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},

4
src/app/ui/ui.module.ts
Unescape View File

@ -64,10 +64,12 @@ 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';
import { FirstStepCopyComponent } from './first-step-copy/first-step-copy.component';
import { FourStepCopyComponent } from './four-step-copy/four-step-copy.component';
@NgModule({
declarations: [SafeHtmlPipe,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,WorkingAreaComponent, LuckDrawComponent, ResetComponent, DrawingResultComponent, FirstStepComponent, FourStepComponent],
declarations: [SafeHtmlPipe,UiComponent,PersonaldataComponent, ChangepasswordComponent,IsnoPipe,ConfirmpswDirective,TimePipe,WorkingAreaComponent, LuckDrawComponent, ResetComponent, DrawingResultComponent, FirstStepComponent, FourStepComponent, FirstStepCopyComponent, FourStepCopyComponent],
imports: [
CommonModule,

85
src/assets/js/firststepcopy.js
Unescape View File

@ -0,0 +1,85 @@
$(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){
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
src/assets/js/firststep2.js → src/assets/js/fourstep.js
Unescape View File

151
src/assets/js/fourstepcopy.js
Unescape View File

@ -0,0 +1,151 @@
$(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){
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){
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(() => {
$("#endjieguo22 span").eq(selectedIndex).html(data[selectedIndex - 1][selected])
$("#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");
}
})
});
Write Preview
Loading…
Cancel
Save