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

月度总览样式

非煤矿山灾害智能感知和预警系统
jingbowen 3 years ago
parent
fc25bc0a99
commit
b67313aaf4
6 changed files with 11292 additions and 142 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. 11068
      package-lock.json
  2. 3
      package.json
  3. 174
      src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.html
  4. 103
      src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.scss
  5. 4
      src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts

11068
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
Unescape View File

@ -19,11 +19,13 @@
"@angular/platform-browser-dynamic": "~13.1.0", "@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "~13.1.0", "@angular/router": "~13.1.0",
"@types/file-saver": "^2.0.5", "@types/file-saver": "^2.0.5",
"echarts": "^5.3.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"js-base64": "^3.7.2", "js-base64": "^3.7.2",
"moment": "^2.29.4", "moment": "^2.29.4",
"ng-zorro-antd": "^13.0.1", "ng-zorro-antd": "^13.0.1",
"ngx-cookie-service": "^13.1.2", "ngx-cookie-service": "^13.1.2",
"ngx-echarts": "^14.0.0",
"rxjs": "~7.4.0", "rxjs": "~7.4.0",
"tslib": "^2.3.0", "tslib": "^2.3.0",
"zone.js": "~0.11.4" "zone.js": "~0.11.4"
@ -41,6 +43,7 @@
"karma-coverage": "~2.1.0", "karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0", "karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0", "karma-jasmine-html-reporter": "~1.7.0",
"resize-observer-polyfill": "^1.5.1",
"typescript": "~4.5.2" "typescript": "~4.5.2"
} }
} }

174
src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.html
Unescape View File

@ -95,18 +95,20 @@
<span>{{i.company.companyName}}</span> <span>{{i.company.companyName}}</span>
</div> </div>
<div class="info"> <div class="info">
<span> <div >
<img src="../../../../assets/images/icon/main.png" alt=""> <span>
{{i.mainSupervisor ? i.mainSupervisor.name : '未分配'}} <img src="../../../../assets/images/icon/main.png" alt="">
</span> {{i.mainSupervisor ? i.mainSupervisor.name : '未分配'}}
<span> </span>
<img src="../../../../assets/images/icon/assist.png" alt=""> <span>
{{i.assitantSupervisor ? i.assitantSupervisor.name : '未分配'}} <img src="../../../../assets/images/icon/assist.png" alt="">
</span> {{i.assitantSupervisor ? i.assitantSupervisor.name : '未分配'}}
<span class="blue" (click)="allot(i)">分配</span> </span>
<span>|</span> <span class="blue" (click)="allot(i)">分配</span>
<span>申请人: {{i.organization.name}}</span> <span>|</span>
<!-- <span class="blue">修改</span> --> <span>申请人: {{i.organization.name}}</span>
<!-- <span class="blue">修改</span> -->
</div>
</div> </div>
<!-- <div class="btn"> <!-- <div class="btn">
<button [ngClass]="{'forbidbtn': i.approvalStatus}" [disabled]="i.approvalStatus" <button [ngClass]="{'forbidbtn': i.approvalStatus}" [disabled]="i.approvalStatus"
@ -114,10 +116,12 @@
<button [ngClass]="{'forbidbtn': i.approvalStatus}" [disabled]="i.approvalStatus" <button [ngClass]="{'forbidbtn': i.approvalStatus}" [disabled]="i.approvalStatus"
nz-button (click)="reject(i)">驳回</button> nz-button (click)="reject(i)">驳回</button>
</div> --> </div> -->
<img *ngIf="i.approvalStatus == 'reject'" class="auditimg" <div class="img">
src="../../../../assets/images/icon/reject.png" alt=""> <img class="auditimg" *ngIf="i.approvalStatus == '驳回'"
<img *ngIf="i.approvalStatus == 'approved'" class="auditimg" src="../../../../assets/images/icon/reject.png" alt="">
src="../../../../assets/images/icon/agree.png" alt=""> <img *ngIf="i.approvalStatus == '通过'" class="auditimg"
src="../../../../assets/images/icon/agree.png" alt="">
</div>
</div> </div>
</div> </div>
@ -137,41 +141,123 @@
</div> </div>
<div class="deploycontent" *ngIf="isdeployboxExpanded"> <div class="deploycontent" *ngIf="isdeployboxExpanded">
<div class="deploycontentitem"> <div class="deploycontentitem">
<div class="title"> <div class="aaa">
月计划统计 <div class="title">
任务总数
</div>
<div class="details">
<div class="detailsname">
完成
<!-- <span style="font-weight: 18;font-size: 26px;margin-left: 10px;">15</span> -->
</div>
<span class="progresssquare">
<!-- <span>完成率</span> -->
<nz-progress nzStrokeLinecap="square" style="width: 70%;margin-bottom: 3px;"
[nzPercent]="75" nzStrokeColor="#42B983" [nzShowInfo]="false" [nzStrokeWidth]="18">
</nz-progress>
<span>75%</span>
</span>
</div>
</div> </div>
<div class="details">
<div class="detailsname"> <div class="percentage">
月计划总数 <nz-progress [nzWidth]="80" nz-tooltip nzType="circle"
<span style="font-weight: 18;font-size: 26px;margin-left: 10px;">15</span> [nzPercent]="70" nzStrokeLinecap="square" [nzShowInfo]="false" [nzSuccessPercent]="40"></nz-progress>
<div class="typebox">
<div class="type">
<div class="tips" style="background: #42B983;"></div>
<div style="font-size: 13px;"><span style="margin-right: 5px;">上级指派</span><span>46%</span></div>
</div>
<div class="type">
<div class="tips" style="background: #1890FF;"></div>
<div style="font-size: 13px;"><span style="margin-right: 5px;">自主任务</span><span>46%</span></div>
</div>
<div class="type">
<div class="tips" style="background: #fff;"></div>
<div style="font-size: 13px;"><span style="margin-right: 5px;">申领任务</span><span>46%</span></div>
</div>
</div> </div>
<span>已完成 15</span>
<span class="progresssquare">
<span>完成率</span>
<nz-progress nzStrokeLinecap="square" style="width: 70%;margin-bottom: 3px;"
[nzPercent]="75" nzStrokeColor="#42B983" [nzShowInfo]="false" [nzStrokeWidth]="18">
</nz-progress>
<span>75%</span>
</span>
</div> </div>
</div> </div>
<div class="deploycontentitem"> <div class="deploycontentitem">
<div class="title"> <div class="aaa">
周计划统计 <div class="title">
任务总数
</div>
<div class="details">
<div class="detailsname">
完成
<!-- <span style="font-weight: 18;font-size: 26px;margin-left: 10px;">15</span> -->
</div>
<span class="progresssquare">
<!-- <span>完成率</span> -->
<nz-progress nzStrokeLinecap="square" style="width: 70%;margin-bottom: 3px;"
[nzPercent]="75" nzStrokeColor="#42B983" [nzShowInfo]="false" [nzStrokeWidth]="18">
</nz-progress>
<span>75%</span>
</span>
</div>
</div>
<div class="percentage">
<nz-progress [nzWidth]="80" nz-tooltip nzType="circle"
[nzPercent]="70" nzStrokeColor="#42B983" nzStrokeLinecap="square" [nzShowInfo]="false" ></nz-progress>
<div class="typebox">
<div class="type">
<div class="tips" style="background: #42B983;"></div>
<div style="font-size: 13px;"><span style="margin-right: 5px;">自主任务</span><span>46%</span></div>
</div>
<div class="type">
<div class="tips" style="background: #fff;"></div>
<div style="font-size: 13px;"><span style="margin-right: 5px;">申领任务</span><span>46%</span></div>
</div>
</div>
</div> </div>
<div class="details"> </div>
<div class="detailsname"> <div class="deploycontentitem">
周计划总数 <div class="aaa">
<span style="font-weight: 18;font-size: 26px;margin-left: 10px;">15</span> <div class="title">
任务总数
</div> </div>
<span>已完成 15</span> <div class="details">
<span class="progresssquare"> <div class="detailsname">
<span>完成率</span> 完成
<nz-progress nzStrokeLinecap="square" style="width: 70%;margin-bottom: 3px;" <!-- <span style="font-weight: 18;font-size: 26px;margin-left: 10px;">15</span> -->
[nzPercent]="75" nzStrokeColor="#42B983" [nzShowInfo]="false" [nzStrokeWidth]="18"> </div>
</nz-progress> <span class="progresssquare">
<span>75%</span> <!-- <span>完成率</span> -->
</span> <nz-progress nzStrokeLinecap="square" style="width: 70%;margin-bottom: 3px;"
[nzPercent]="75" nzStrokeColor="#E6D91D" [nzShowInfo]="false" [nzStrokeWidth]="18">
</nz-progress>
<span>75%</span>
</span>
</div>
</div>
<div class="percentage">
<nz-progress [nzWidth]="80" nz-tooltip nzType="circle"
[nzPercent]="50" nzStrokeColor="#E6D91D" [nzShowInfo]="false" ></nz-progress>
<div class="typebox">
<div class="type">
<div class="tips" style="background: #E6D91D;"></div>
<div style="font-size: 13px;"><span style="margin-right: 5px;">自主任务</span><span>46%</span></div>
</div>
<div class="type">
<div class="tips" style="background: #fff;"></div>
<div style="font-size: 13px;"><span style="margin-right: 5px;">申领任务</span><span>46%</span></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

103
src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.scss
Unescape View File

@ -276,11 +276,14 @@
} }
.unitname { .unitname {
flex: 3; width: 30%;
} }
.info { .info {
flex: 6; flex: 1;
display: flex;
justify-content: center;
align-items: center;
span { span {
margin-right: 20px; margin-right: 20px;
@ -302,11 +305,16 @@
} }
} }
.auditimg { .img {
position: absolute; width: 30%;
right: 18%;
top: 9%; .auditimg {
position: absolute;
right: 18%;
top: 9%;
}
} }
} }
.greencard { .greencard {
@ -327,6 +335,10 @@
} }
} }
.ant-progress-circle .ant-progress-text {
color: #fff !important;
}
.deploybox { .deploybox {
box-sizing: border-box; box-sizing: border-box;
padding: 18px; padding: 18px;
@ -346,7 +358,7 @@
justify-content: space-between; justify-content: space-between;
.deploycontentitem { .deploycontentitem {
width: 49.5%; width: 32%;
height: 110px; height: 110px;
background: linear-gradient(180deg, #7AA3FC 0%, #2C4DC0 100%); background: linear-gradient(180deg, #7AA3FC 0%, #2C4DC0 100%);
box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
@ -355,39 +367,79 @@
box-sizing: border-box; box-sizing: border-box;
padding: 18px 18px; padding: 18px 18px;
display: flex; display: flex;
flex-direction: column; // flex-direction: column;
justify-content: space-around; // justify-content: space-around;
color: #fff; color: #fff;
.title { .aaa {
text-align: left;
}
.details {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; justify-content: space-around;
flex: 1;
.detailsname { .title {
text-align: left;
}
.details {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
.detailsname {
display: flex;
align-items: center;
margin-right: 5px;
width: 40px;
}
.progresssquare {
width: 90%;
// flex: 1;
display: flex;
color: #fff;
align-items: center;
span:nth-child(1) {
margin-right: 16px;
}
span:last-child {
margin-left: 5px;
}
}
} }
}
.progresssquare { .percentage {
width: 50%;
// flex: 1;
display: flex;
.typebox {
width: 60%; width: 60%;
display: flex; display: flex;
color: #fff; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
span:nth-child(1) { .type {
margin-right: 16px; margin: 5px 0;
display: flex;
justify-content: center;
align-items: center;
} }
span:last-child { .tips {
margin-left: 16px; width: 10px;
height: 10px;
border-radius: 10px;
margin-right: 5px;
} }
} }
} }
} }
.deploycontentitem:nth-child(1) { .deploycontentitem:nth-child(1) {
@ -398,6 +450,11 @@
background: linear-gradient(180deg, #56C5FF 0%, #005DFF 100%); background: linear-gradient(180deg, #56C5FF 0%, #005DFF 100%);
} }
.deploycontentitem:nth-child(3) {
background: linear-gradient(180deg, #73D9AA 0%, #42B983 100%);
}
} }
} }

4
src/app/home/task/da-monthly-task-overview/da-monthly-task-overview.component.ts
Unescape View File

@ -3,7 +3,6 @@ import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal'; import { NzModalService } from 'ng-zorro-antd/modal';
import { AllotPersonComponent } from '../da-subordinate-audit/allot-person/allot-person.component'; import { AllotPersonComponent } from '../da-subordinate-audit/allot-person/allot-person.component';
@Component({ @Component({
selector: 'app-da-monthly-task-overview', selector: 'app-da-monthly-task-overview',
templateUrl: './da-monthly-task-overview.component.html', templateUrl: './da-monthly-task-overview.component.html',
@ -13,7 +12,6 @@ export class DaMonthlyTaskOverviewComponent implements OnInit {
constructor(private http: HttpClient, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { } constructor(private http: HttpClient, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService) { }
selectedMonth selectedMonth
selectedYear = 2022 selectedYear = 2022
selectedTime selectedTime
@ -160,6 +158,8 @@ export class DaMonthlyTaskOverviewComponent implements OnInit {
next: async (data) => { next: async (data) => {
this.message.create('success', '分配成功'); this.message.create('success', '分配成功');
resolve(data) resolve(data)
console.log(data);
this.getTaskList() this.getTaskList()
return true return true
}, },

Write Preview
Loading…
Cancel
Save