shaojiahao
/
Jinan_project
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]大队本级计划页面

非煤矿山灾害智能感知和预警系统
邵佳豪 3 years ago
parent
711e72bfd9
commit
a09e626283
6 changed files with 448 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/app/home/home.module.ts
  2. 194
      src/app/home/task/da-oneself-plan/da-oneself-plan.component.html
  3. 217
      src/app/home/task/da-oneself-plan/da-oneself-plan.component.scss
  4. 18
      src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts
  5. BIN
      src/assets/images/icon/station.png
  6. 5
      src/theme.less

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

@ -47,6 +47,7 @@ import { NzPopoverModule } from 'ng-zorro-antd/popover';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { ScrollingModule } from '@angular/cdk/scrolling'; import { ScrollingModule } from '@angular/cdk/scrolling';
import { NzGridModule } from 'ng-zorro-antd/grid'; import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzRadioModule } from 'ng-zorro-antd/radio';
@NgModule({ @NgModule({
declarations: [ declarations: [
NavComponent, NavComponent,
@ -99,7 +100,8 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
NzPopoverModule, NzPopoverModule,
NzCheckboxModule, NzCheckboxModule,
ScrollingModule, ScrollingModule,
NzGridModule NzGridModule,
NzRadioModule
], ],
entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent] entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent]
}) })

194
src/app/home/task/da-oneself-plan/da-oneself-plan.component.html
Unescape View File

@ -10,7 +10,10 @@
{{item.name}} {{item.name}}
</div> </div>
</div> </div>
<div class="instrumentpanel">
<div style="flex: 1;overflow-y: auto;">
<!-- 上部仪表盘 -->
<div class="instrumentpanelbox">
<div class="instrumentpanelheader"> <div class="instrumentpanelheader">
<span>本级部署</span> <span>本级部署</span>
<span (click)="expand()" class="expand blue"> <span (click)="expand()" class="expand blue">
@ -18,10 +21,11 @@
<i nz-icon [nzType]="isExpand ? 'down' : 'up'" nzTheme="outline"></i> <i nz-icon [nzType]="isExpand ? 'down' : 'up'" nzTheme="outline"></i>
</span> </span>
</div> </div>
<div class="instrumentpanelopen"> <div class="instrumentpanel">
<div class="instrumentpanelopenitem" *ngFor="let item of cardData"> <div class="instrumentpanelitem" *ngFor="let item of cardData"
[ngClass]="{'instrumentpanelitemopen': isExpand,'instrumentpanelitemclose': !isExpand}">
<div class="itemone" *ngIf="!item.isDetails"> <div class="itemone" *ngIf="!item.isDetails">
<div class="instrumentpanelopenitemleft"> <div class="instrumentpanelitemleft">
<div class="panelheadername" [style]="'background:'+ item.background"> <div class="panelheadername" [style]="'background:'+ item.background">
<img [src]="'../../../../assets/images/icon/'+ item.icon" alt=""> <img [src]="'../../../../assets/images/icon/'+ item.icon" alt="">
{{item.name}} {{item.name}}
@ -29,15 +33,17 @@
<div class="tasknum"> <div class="tasknum">
<p> <p>
<span style="margin-right: 6px;">任务分配</span> <span style="margin-right: 6px;">任务分配</span>
<i (click)="openDetails(item,true)" style="vertical-align: text-top;cursor: pointer;" <i (click)="openDetails(item,true)"
nz-icon nzType="right-circle" nzTheme="outline"></i> style="vertical-align: text-top;cursor: pointer;" nz-icon nzType="right-circle"
nzTheme="outline"></i>
</p> </p>
<p style="font-weight: 900;font-size: 36px;text-align: left;">5/9</p> <p style="font-weight: 900;font-size: 36px;text-align: left;">5/9</p>
</div> </div>
<button nz-button class="btn">快速派发</button> <button *ngIf="isExpand" nz-button class="btn">快速派发</button>
</div> </div>
<div class="instrumentpanelopenitemright"> <div class="instrumentpanelitemright" *ngIf="isExpand">
<nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne" nzStrokeColor="#42B983"> <nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne"
nzStrokeColor="#42B983">
</nz-progress> </nz-progress>
</div> </div>
</div> </div>
@ -50,17 +56,183 @@
<div class="itemtwocontent"> <div class="itemtwocontent">
<div class="itemtwocontentitem"> <div class="itemtwocontentitem">
<p class="itemtwocontentitemp1"> <p class="itemtwocontentitemp1">
<span>济南历下森豪室内娱乐场</span> <span class="itemtwocontentitemp1name">济南历下森豪室内娱乐场</span>
<span> <span>
<span class="blue">派发</span> <span class="blue" *ngIf="isExpand">派发</span>
</span> </span>
</p> </p>
<p>A消防救援站</p> <p>A消防救援站</p>
<p><span class="blue" *ngIf="!isExpand">派发</span></p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<!-- 救援站列表 -->
<div class="stationcardlistbox">
<div class="stationcardlistitembox" *ngFor="let item of stationData">
<div class="stationcardlistitem">
<div class="header">
<span style="width: 16%;">
<img src="../../../../assets//images/icon/station.png" alt="">
{{item.name}}
</span>
<span style="width: 8%;">单位总数: 7/8</span>
<div style="width: 66%;" class="progress progresssquare">
<span>完成进度</span>
<nz-progress nzStrokeLinecap="square" nzStrokeWidth="16" nzStrokeColor="#42B983"
[nzPercent]="30"></nz-progress>
</div>
<button nz-button nzType="primary">任务下派</button>
<span (click)="expandcarditem(item)" class="expand blue">
{{item.isExpand ? '收起' :'展开'}}
<i nz-icon [nzType]="item.isExpand ? 'down' : 'up'" nzTheme="outline"></i>
</span>
</div>
<div class="maincontent" *ngIf="item.isExpand">
<div class="maincontentitem">
<div class="maincontentitemleft">
<div class="panelheadername panelheadernameor">
<img src="'../../../../assets/images/icon/huodong.png" alt="">
重大活动
</div>
<div class="num">
<div class="round" style="background: #2C4DC0;"></div>
<span class="word">已分配</span>
<span class="boldspan">1</span>
</div>
<div class="num">
<div class="round" style="background: #42B983;"></div>
<span class="word">已完成</span>
<span class="boldspan">1</span>
</div>
</div>
<div class="maincontentitemright">
<div class="maincontentitemrightitem">
<div class="flexcol namebox">
<span>
尬粒酒店管理有限公司济南泺文路分公司
</span>
<span>
单位名称
</span>
</div>
<div class="flexcol">
<span>
重点单位
</span>
<span>
级别
</span>
</div> </div>
<div class="flexcol">
<span>
历下区A消防救援站
</span>
<span>
责任机构
</span>
</div>
<div class="flexcol">
<span>
历下区B消防救援站
</span>
<span>
协助机构
</span>
</div> </div>
<div class="flexcol">
<span>
<label nz-radio ngModel [ngModel]="xxx"
(click)="radioChange($event)">宣传</label>
</span>
<span>
同步工作
</span>
</div> </div>
<div class="flexcol progressbox progresssquare">
<span>
<nz-progress style="width: 200px;" nzStrokeLinecap="square"
nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30">
</nz-progress>
</span>
<span>
进度
</span>
</div> </div>
<div class="btnbox">
<button nz-button nzType="primary">提交审核</button>
<button style="margin-left: 12px;" nz-button nzType="primary">取消</button>
</div> </div>
</div> </div>
<div class="maincontentitemrightitem">
<div class="flexcol namebox">
<span>
尬粒酒店管理有限公司济南泺文路分公司
</span>
<span>
单位名称
</span>
</div>
<div class="flexcol">
<span>
重点单位
</span>
<span>
级别
</span>
</div>
<div class="flexcol">
<span>
历下区A消防救援站
</span>
<span>
责任机构
</span>
</div>
<div class="flexcol">
<span>
历下区B消防救援站
</span>
<span>
协助机构
</span>
</div>
<div class="flexcol">
<span>
<label nz-radio ngModel [ngModel]="xxx"
(click)="radioChange($event)">宣传</label>
</span>
<span>
同步工作
</span>
</div>
<div class="flexcol progressbox progresssquare">
<span>
<nz-progress style="width: 200px;" nzStrokeLinecap="square"
nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30">
</nz-progress>
</span>
<span>
进度
</span>
</div>
<div class="btnbox">
<button nz-button nzType="primary">提交审核</button>
<button style="margin-left: 12px;" nz-button nzType="primary">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div class="cutoffrule"></div>
</div>
</div>

217
src/app/home/task/da-oneself-plan/da-oneself-plan.component.scss
Unescape View File

@ -41,9 +41,9 @@
} }
} }
.instrumentpanel { .instrumentpanelbox {
box-sizing: border-box; box-sizing: border-box;
padding: 15px 20px; padding: 18px;
color: #303133; color: #303133;
.instrumentpanelheader { .instrumentpanelheader {
@ -53,36 +53,34 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
.instrumentpanelopen { .instrumentpanel {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
.instrumentpanelopenitem { .instrumentpanelitem {
width: 24.3%;
height: 260px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
opacity: 1; opacity: 1;
border: 1px solid #E4E7EC; border: 1px solid #E4E7EC;
display: flex; display: flex;
margin-bottom: 18px;
.itemone { .itemone {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
.instrumentpanelopenitemleft { .instrumentpanelitemleft {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
align-items: flex-start; align-items: flex-start;
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
padding: 26px 0 26px 10%;
.panelheadername { .panelheadername {
width: 80%; width: 80%;
@ -118,7 +116,7 @@
} }
} }
.instrumentpanelopenitemright { .instrumentpanelitemright {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
@ -168,19 +166,218 @@
align-items: flex-start; align-items: flex-start;
box-sizing: border-box; box-sizing: border-box;
padding: 8px 0; padding: 8px 0;
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
.itemtwocontentitemp1 { .itemtwocontentitemp1 {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding-right: 5px; padding-right: 5px;
.itemtwocontentitemp1name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
.instrumentpanelitemopen {
width: 24.3%;
height: 260px;
margin-bottom: 18px;
.itemone {
.instrumentpanelitemleft {
padding: 26px 0 26px 10%;
}
}
}
.instrumentpanelitemclose {
width: 11.7%;
height: 200px;
margin-bottom: 0px;
.itemone {
.instrumentpanelitemleft {
padding: 15px 0 15px 10%;
}
}
}
}
.stationcardlistbox {
.stationcardlistitembox {
width: 100%;
border-top: 1px dashed #C7CAD0;
box-sizing: border-box;
padding: 18px;
.stationcardlistitem {
width: 100%;
background: #FFFFFF;
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
border-radius: 4px 4px 4px 4px;
border: 1px solid #E4E7EC;
color: #303133;
box-sizing: border-box;
padding: 0 18px;
.header {
width: 100%;
height: 64px;
display: flex;
align-items: center;
text-align: left;
.progress {
width: 200px;
display: flex;
align-items: center;
span {
margin-right: 12px;
}
nz-progress {
width: 230px;
}
}
.expand {
margin-left: 20px;
}
}
.maincontent {
.maincontentitem {
box-sizing: border-box;
padding: 16px;
margin-bottom: 18px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #42B983;
display: flex;
}
.maincontentitemleft {
width: 170px;
box-sizing: border-box;
padding-right: 40px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-right: 1px dashed #C7CAD0;
.panelheadername {
width: 90%;
height: 38px;
line-height: 38px;
text-align: center;
box-sizing: border-box;
border-radius: 6px 0px 6px 6px;
color: #fff;
margin-bottom: 8px;
img {
vertical-align: text-top;
}
}
.num {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.round {
width: 8px;
height: 8px;
}
.word {
margin: 0 6px;
}
.boldspan {
font-weight: 800;
font-size: 25px;
}
}
}
.maincontentitemright {
flex: 1;
box-sizing: border-box;
padding-left: 40px;
display: flex;
flex-direction: column;
justify-content: space-around;
// align-items: center;
.maincontentitemrightitem {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 12px 0px;
border-bottom: 1px dashed #C7CAD0;
.flexcol {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-right: 3%;
span:nth-child(1) {
color: #303133;
margin-bottom: 8px;
}
span:nth-child(2) {
color: #C7CAD0;
} }
} }
.namebox {
width: 28%;
} }
.progressbox {
width: 220px;
span:nth-child(1) {
width: 100%;
} }
} }
.btnbox {
display: flex;
justify-content: flex-end;
}
}
div:last-child {
border-bottom: 0px;
}
}
}
}
}
}
.cutoffrule {
width: 100%;
border-top: 1px dashed #C7CAD0;
} }

18
src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts
Unescape View File

@ -30,7 +30,7 @@ export class DaOneselfPlanComponent implements OnInit {
this.selectedMonth = item.name this.selectedMonth = item.name
} }
isExpand = true isExpand = false
expand() { expand() {
this.isExpand = !this.isExpand this.isExpand = !this.isExpand
} }
@ -52,4 +52,20 @@ export class DaOneselfPlanComponent implements OnInit {
openDetails(data, type) { openDetails(data, type) {
data.isDetails = type data.isDetails = type
} }
xxx = false
radioChange(e) {
setTimeout(() => {
this.xxx = !this.xxx
}, 0);
}
stationData = [
{ name: '历下区A消防救援站', isExpand: true },
{ name: '历下区B消防救援站', isExpand: false },
{ name: '历下区C消防救援站', isExpand: false }
]
expandcarditem(item) {
item.isExpand = !item.isExpand
}
} }

BIN
src/assets/images/icon/station.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 340 B

5
src/theme.less
Unescape View File

@ -21,3 +21,8 @@
white-space: pre; white-space: pre;
font-size: 18px; font-size: 18px;
} }
.progresssquare{
.ant-progress-inner{
border-radius: 0px;
}
}
Write Preview
Loading…
Cancel
Save