27 changed files with 929 additions and 63 deletions
@ -1,5 +1,156 @@
|
||||
<div class="box"> |
||||
<div class="mapbox" id="mapbox"> |
||||
<div class="topbox"> |
||||
<div class="top1"> |
||||
<div class="top1-1 fffcard"> |
||||
<div class="top1-1item flexcolumn"> |
||||
<div class="title"> |
||||
任务总数 100个 |
||||
</div> |
||||
<div class="taskNum" id="taskNumCharts"> |
||||
|
||||
</div> |
||||
</div> |
||||
<div class="top1-1item flexcolumn"> |
||||
<div class="title"> |
||||
协助任务数量排名TOP5 |
||||
</div> |
||||
<div class="assistTaskRanking"> |
||||
<div class="taskRankingItem" *ngFor="let item of assistTaskRankingData"> |
||||
<img [src]="item.url" alt=""> |
||||
{{item.name}} |
||||
<div class="border"></div> |
||||
<div class="num"> |
||||
{{item.num}} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="top1-2 fffcard flexcolumn"> |
||||
<div class="title "> |
||||
不合格单位趋势图 |
||||
</div> |
||||
<div class="disqualificationUnit "> |
||||
<div class="searchbox"> |
||||
<div class="searchitem1"> |
||||
<div class="titleblue"> |
||||
27% |
||||
</div> |
||||
<span>9月合格率</span> |
||||
</div> |
||||
<div class="searchitem1"> |
||||
<div class="titlered"> |
||||
111 |
||||
</div> |
||||
<span>9月不合格数量</span> |
||||
</div> |
||||
<div class="rangepicker"> |
||||
<nz-range-picker></nz-range-picker> |
||||
</div> |
||||
|
||||
</div> |
||||
<div id="disqualificationUnit"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="top2"> |
||||
<div class="mapcardbox"> |
||||
<div class="mapcarditem" *ngFor="let item of maocard"> |
||||
<div class="mapcarditemname"> |
||||
<span class="mapcarditemname1"> |
||||
{{item.name}} |
||||
</span> |
||||
<span class="mapcarditemname2"> |
||||
{{item.num}} |
||||
</span> |
||||
</div> |
||||
<div class="mapcarditemimg"> |
||||
<img [src]="item.url" alt=""> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="mapbox" id="mapbox"> |
||||
|
||||
</div> |
||||
</div> |
||||
<div class="top3"> |
||||
<div class="top3-1 fffcard flexcolumn"> |
||||
<div class="title "> |
||||
企业支持度排名 |
||||
</div> |
||||
<div class="companySupport"> |
||||
<div class="companySupporttitle"> |
||||
<span> |
||||
消防机构 |
||||
</span> |
||||
<span> |
||||
支持度 |
||||
</span> |
||||
</div> |
||||
<div class="rankingListBox"> |
||||
<div class="rankingListItem" *ngFor="let item of rankingList1"> |
||||
<div class="name"> |
||||
{{item.name}} |
||||
</div> |
||||
<div class="progress"> |
||||
<nz-progress [nzStrokeColor]="'#2C4DC0'" [nzStrokeLinecap]="'square'" |
||||
[nzShowInfo]="false" [nzPercent]="item.num"></nz-progress> |
||||
</div> |
||||
<div class="num"> |
||||
<span>{{item.num}}%</span> |
||||
<ng-container *ngIf="item.type == 'up'; else elseTemplate"> |
||||
<img src="../../../../assets/statistic-analysis/up.png" alt=""> |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<img src="../../../../assets/statistic-analysis/down.png" alt=""> |
||||
</ng-template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="top3-2 fffcard flexcolumn"> |
||||
<div class="title"> |
||||
持证人数排名 |
||||
</div> |
||||
<div class="holdCertificate"> |
||||
<div class="rankingListBox"> |
||||
<div class="rankingListItem" *ngFor="let item of rankingList2"> |
||||
<div class="name"> |
||||
{{item.name}} |
||||
</div> |
||||
<div class="progress"> |
||||
<nz-progress [nzStrokeColor]="'#2C4DC0'" [nzStrokeLinecap]="'square'" |
||||
[nzShowInfo]="false" [nzPercent]="item.num"></nz-progress> |
||||
</div> |
||||
<div class="num"> |
||||
<span>{{item.num}}</span> |
||||
<ng-container *ngIf="item.type == 'up'; else elseTemplate"> |
||||
<img src="../../../../assets/statistic-analysis/up.png" alt=""> |
||||
</ng-container> |
||||
<ng-template #elseTemplate> |
||||
<img src="../../../../assets/statistic-analysis/down.png" alt=""> |
||||
</ng-template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottombox fffcard flexcolumn"> |
||||
<div class="title"> |
||||
任务完成情况 |
||||
</div> |
||||
<div class="completionOfTask"> |
||||
<div class="completionOfTask1" id="completionOfTask1"> |
||||
|
||||
</div> |
||||
<div class="completionOfTask2" id="completionOfTask2"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,12 +1,326 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
padding: 18px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
color: #303133; |
||||
text-align: left; |
||||
} |
||||
|
||||
.fffcard { |
||||
background: #fff; |
||||
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.08); |
||||
border-radius: 4px 4px 4px 4px; |
||||
border: 1px solid #E4E7EC; |
||||
} |
||||
|
||||
|
||||
.flexcolumn { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.taskNum, |
||||
.assistTaskRanking, |
||||
.disqualificationUnit, |
||||
.companySupport, |
||||
.holdCertificate, |
||||
.completionOfTask { |
||||
flex: 1; |
||||
} |
||||
|
||||
.assistTaskRanking { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
box-sizing: border-box; |
||||
padding: 18px 0 18px 16px; |
||||
.taskRankingItem { |
||||
display: flex; |
||||
align-items: center; |
||||
img { |
||||
margin-right: 3px; |
||||
} |
||||
|
||||
.border { |
||||
flex: 1; |
||||
border-bottom: 1px dashed #E4E7EC; |
||||
margin: 0 3px; |
||||
} |
||||
|
||||
.num { |
||||
width: 50px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.disqualificationUnit { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.searchbox { |
||||
width: 100%; |
||||
height: 60px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.searchitem1 { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
box-sizing: border-box; |
||||
padding: 0 18px; |
||||
|
||||
.titleblue { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
color: #2C4DC0; |
||||
margin-right: 5%; |
||||
} |
||||
|
||||
.titlered { |
||||
font-size: 16px; |
||||
font-weight: 600; |
||||
color: #FF0000; |
||||
} |
||||
} |
||||
|
||||
.rangepicker { |
||||
height: 32px; |
||||
width: 45%; |
||||
text-align: right; |
||||
margin-left: 10%; |
||||
} |
||||
} |
||||
|
||||
#disqualificationUnit { |
||||
flex: 1; |
||||
} |
||||
} |
||||
|
||||
.companySupport, |
||||
.holdCertificate { |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.companySupporttitle { |
||||
width: 100%; |
||||
height: 42px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: #C7CAD0; |
||||
box-sizing: border-box; |
||||
padding: 0 18px; |
||||
} |
||||
|
||||
.rankingListBox { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-around; |
||||
box-sizing: border-box; |
||||
padding: 0px 18px; |
||||
padding-bottom: 8px; |
||||
|
||||
.rankingListItem { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.name { |
||||
width: 35%; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
margin-right: 8%; |
||||
} |
||||
|
||||
.progress { |
||||
flex: 1; |
||||
margin-bottom: 2px; |
||||
} |
||||
|
||||
.num { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 12%; |
||||
|
||||
img { |
||||
margin-left: 3px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.holdCertificate { |
||||
.rankingListBox { |
||||
padding-bottom: 8px; |
||||
padding-top: 8px; |
||||
} |
||||
} |
||||
|
||||
.completionOfTask { |
||||
display: flex; |
||||
|
||||
.completionOfTask1 { |
||||
flex: 1; |
||||
} |
||||
|
||||
.completionOfTask2 { |
||||
flex: 4.6; |
||||
} |
||||
} |
||||
|
||||
.title { |
||||
width: 100%; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
box-sizing: border-box; |
||||
padding-left: 18px; |
||||
border-bottom: 1px solid #E4E7EC; |
||||
} |
||||
|
||||
.topbox { |
||||
flex: 2; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-bottom: 18px; |
||||
|
||||
.top1 { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.top1-1 { |
||||
flex: 1; |
||||
margin-bottom: 18px; |
||||
display: flex; |
||||
|
||||
.top1-1item { |
||||
flex: 1; |
||||
} |
||||
} |
||||
|
||||
.top1-2 { |
||||
flex: 1.3; |
||||
} |
||||
} |
||||
|
||||
.top2 { |
||||
flex: 1.5; |
||||
margin: 0 18px; |
||||
position: relative; |
||||
|
||||
.mapcardbox { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 18px; |
||||
height: 100px; |
||||
width: 100%; |
||||
z-index: 999; |
||||
display: flex; |
||||
padding: 0 18px; |
||||
box-sizing: border-box; |
||||
|
||||
.mapcarditem { |
||||
flex: 1; |
||||
height: 100%; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.08); |
||||
border-radius: 4px 4px 4px 4px; |
||||
border: 1px solid #E4E7EC; |
||||
box-sizing: border-box; |
||||
padding: 16px; |
||||
display: flex; |
||||
|
||||
.mapcarditemname { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
|
||||
.mapcarditemname1 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.mapcarditemname2 { |
||||
font-size: 26px; |
||||
font-weight: 600; |
||||
} |
||||
} |
||||
|
||||
.mapcarditemimg { |
||||
width: 68px; |
||||
height: 68px; |
||||
border-radius: 68px; |
||||
text-align: center; |
||||
line-height: 68px; |
||||
} |
||||
} |
||||
|
||||
.mapcarditem:nth-child(1) { |
||||
.mapcarditemname2 { |
||||
color: #2C4DC0; |
||||
} |
||||
|
||||
.mapcarditemimg { |
||||
background: linear-gradient(to bottom, #94ACFF, #2C4DC0); |
||||
} |
||||
} |
||||
|
||||
.mapcarditem:nth-child(2) { |
||||
margin: 0 18px; |
||||
|
||||
.mapcarditemname2 { |
||||
color: #FF0000; |
||||
} |
||||
|
||||
.mapcarditemimg { |
||||
background: linear-gradient(to bottom, #FF9191, #FF0000); |
||||
} |
||||
} |
||||
|
||||
.mapcarditem:nth-child(3) { |
||||
.mapcarditemname2 { |
||||
color: #42B983; |
||||
} |
||||
|
||||
.mapcarditemimg { |
||||
background: linear-gradient(to bottom, #AFF8D7, #42B983); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.mapbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.08); |
||||
border-radius: 4px 4px 4px 4px; |
||||
border: 1px solid #E4E7EC; |
||||
} |
||||
} |
||||
|
||||
.top3 { |
||||
flex: .8; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.top3-1 { |
||||
flex: 1.1; |
||||
margin-bottom: 18px; |
||||
|
||||
} |
||||
|
||||
.top3-2 { |
||||
flex: 1; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.bottombox { |
||||
flex: 0.9; |
||||
|
||||
} |
||||
.mapbox{ |
||||
width: 600px; |
||||
height: 500px; |
||||
border: 1px solid red; |
||||
} |
||||
@ -1,4 +1 @@
|
||||
<div class="box"> |
||||
<nz-empty></nz-empty> |
||||
</div> |
||||
<!-- <router-outlet></router-outlet> --> |
||||
<router-outlet></router-outlet> |
||||
|
After Width: | Height: | Size: 403 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1012 B |
|
After Width: | Height: | Size: 480 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 536 B |
|
After Width: | Height: | Size: 751 B |
|
After Width: | Height: | Size: 404 B |
Loading…
Reference in new issue