18 changed files with 1000 additions and 45 deletions
@ -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> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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%;} |
||||||
|
|
||||||
|
|
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { FirstStepCopyComponent } from './first-step-copy.component'; |
||||||
|
|
||||||
|
describe('FirstStepCopyComponent', () => { |
||||||
|
let component: FirstStepCopyComponent; |
||||||
|
let fixture: ComponentFixture<FirstStepCopyComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ FirstStepCopyComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(FirstStepCopyComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
@ -0,0 +1,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']); |
||||||
|
} |
||||||
|
} |
@ -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> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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%;} |
||||||
|
|
||||||
|
|
@ -0,0 +1,25 @@ |
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||||
|
|
||||||
|
import { FourStepCopyComponent } from './four-step-copy.component'; |
||||||
|
|
||||||
|
describe('FourStepCopyComponent', () => { |
||||||
|
let component: FourStepCopyComponent; |
||||||
|
let fixture: ComponentFixture<FourStepCopyComponent>; |
||||||
|
|
||||||
|
beforeEach(async(() => { |
||||||
|
TestBed.configureTestingModule({ |
||||||
|
declarations: [ FourStepCopyComponent ] |
||||||
|
}) |
||||||
|
.compileComponents(); |
||||||
|
})); |
||||||
|
|
||||||
|
beforeEach(() => { |
||||||
|
fixture = TestBed.createComponent(FourStepCopyComponent); |
||||||
|
component = fixture.componentInstance; |
||||||
|
fixture.detectChanges(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should create', () => { |
||||||
|
expect(component).toBeTruthy(); |
||||||
|
}); |
||||||
|
}); |
@ -0,0 +1,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 |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -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,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"); |
||||||
|
} |
||||||
|
}) |
||||||
|
}); |
Loading…
Reference in new issue