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

[修改]任务申请页面

非煤矿山灾害智能感知和预警系统
邵佳豪 3 years ago
parent
44cc75e648
commit
2cb7b107cd
8 changed files with 485 additions and 135 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. 8
      src/app/home/task/station-task-apply/apply/apply.component.html
  2. 12
      src/app/home/task/station-task-apply/apply/apply.component.ts
  3. 252
      src/app/home/task/station-task-apply/station-task-apply.component.html
  4. 137
      src/app/home/task/station-task-apply/station-task-apply.component.scss
  5. 166
      src/app/home/task/station-task-apply/station-task-apply.component.ts
  6. 4
      src/app/home/task/task.component.html
  7. BIN
      src/assets/images/icon/inform.png
  8. 41
      src/styles.scss

8
src/app/home/task/station-task-apply/apply/apply.component.html
Unescape View File

@ -3,7 +3,9 @@
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="账号">任务名称</nz-form-label>
<nz-form-control>
<label nz-radio formControlName="taskname">{{title}}</label>
<nz-radio-group formControlName="taskname">
<label nz-radio [nzValue]="item" *ngFor="let item of title">{{item}}</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
@ -22,8 +24,8 @@
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="协助机构">协助机构</nz-form-label>
<nz-form-control>
<nz-tree-select [nzShowSearch]='true' [nzDropdownClassName]="'maxHeightTreeSelect'"
formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择协助机构"
[nzExpandedIcon]="multiExpandedIconTpl">
formControlName="organization" [nzNodes]="newTree" nzPlaceHolder="请选择协助机构"
[nzExpandedIcon]="multiExpandedIconTpl" nzCheckable [nzCheckStrictly]="true">
</nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">

12
src/app/home/task/station-task-apply/apply/apply.component.ts
Unescape View File

@ -11,18 +11,23 @@ import { catchError, map } from 'rxjs/operators';
styleUrls: ['./apply.component.scss']
})
export class ApplyComponent implements OnInit {
@Input() title?: string;
@Input() title?: any;
@Input() nodes?: any;
@Input() supervisorList?: any;
@Input() organizationList?: any;
validateForm!: FormGroup;
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
newTree
ngOnInit(): void {
this.validateForm = this.fb.group({
taskname: [true, [Validators.required]],
taskname: [null, [Validators.required]],
unitname: [null, [Validators.required]],
organization: [null, [Validators.required]]
});
let arr = [...this.supervisorList, ...this.organizationList]
this.newTree = this.toTree.toTree(arr)
}
destroyModal(): void {
@ -77,6 +82,5 @@ export class ApplyComponent implements OnInit {
})
})
}
}

252
src/app/home/task/station-task-apply/station-task-apply.component.html
Unescape View File

@ -1,111 +1,161 @@
<!-- <p>任务申请</p> -->
<div class="box">
<div class="fffbox">
<div class="header">
<span>
任务申请
</span>
<span style="font-size: 14px; color: #42B983;">
<i nz-icon nzType="info-circle" nzTheme="outline"></i>
任务申请已开始！剩余时间 3天13小时 / 生成周计划已开始！剩余时间 23:54:03
</span>
</div>
<div class="searchbox">
<div class="search">
<nz-select nzPlaceHolder="任务名称" [(ngModel)]="searchForm.taskname">
<nz-option nzValue="监督检查" nzLabel="监督检查"></nz-option>
<nz-option nzValue="熟悉演练" nzLabel="熟悉演练"></nz-option>
</nz-select>
<input type="text" nz-input placeholder="单位名称" [(ngModel)]="searchForm.unitname" />
<!-- <nz-select nzPlaceHolder="单位级别" [(ngModel)]="searchForm.unitlevel">
<nz-option nzValue="一般单位" nzLabel="一般单位"></nz-option>
<nz-option nzValue="重点单位" nzLabel="重点单位"></nz-option>
</nz-select> -->
<nz-tree-select [nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch nzPlaceHolder="协助机构"
[(ngModel)]="searchForm.or" [nzExpandedIcon]="multiExpandedIconTpl"
[nzDropdownClassName]="'maxHeightTreeSelect'" [nzAllowClear]="false"></nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
</ng-container>
<ng-template #elseTemplate>
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
class="ant-tree-switcher-line-icon"></i>
</ng-template>
</ng-template>
<button (click)="search()" nz-button nzType="primary"><i nz-icon nzType="search"
nzTheme="outline"></i>查询</button>
<button (click)="reset()" nz-button nzType="default"><i nz-icon nzType="reload"
nzTheme="outline"></i>重置</button>
<div class="informbox">
<div class="inform">
<div class="informleft">
<img src="../../../../assets/images/icon/inform.png" alt="">
通知播报:
</div>
<div class="informright" id="container" (mouseenter)="mouseEnter()" (mouseleave)="mouseleave()">
<div id="list-wrapper" style="top: 0">
<ul class="notice-list" id="notice-list">
<li class="info" *ngFor="let item of messageList;let key = index">
<div class="infoitem">
您有一条新的信息！
</div>
</li>
</ul>
<ul class="notice-list" id="notice-list-2">
</ul>
</div>
</div>
</div>
</div>
<div class="timebox">
<nz-select [(ngModel)]="selectedYear" (ngModelChange)="selectYear($event)">
<nz-option [nzValue]="2021" nzLabel="2021年"></nz-option>
<nz-option [nzValue]="2022" nzLabel="2022年"></nz-option>
</nz-select>
<div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)"
[ngClass]="{'selectedMonth': item.id == selectedMonth}">
{{item.name}}
</div>
<div class="content">
<div class="applybtn">
<button (click)="apply()" nz-button nzType="primary"><i nz-icon nzType="form"
nzTheme="outline"></i>申请</button>
</div>
<div class="contentbox">
<div class="fffbox">
<div class="spin" *ngIf="isloading">
<nz-spin nzSimple></nz-spin>
</div>
<div class="tablebox">
<nz-table nzBordered #basicTable [nzLoading]="nzLoading" [nzData]="taskLIst" [nzShowPagination]='false'
[nzPageSize]='10'>
<thead>
<tr>
<th [width]="'15%'">任务名称</th>
<th [width]="'20%'">单位名称</th>
<!-- <th>单位级别</th> -->
<th>协助机构</th>
<th>时间</th>
<th>申请结果</th>
<th>检查结果</th>
<th [width]="'8%'">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of basicTable.data">
<td>
{{item.taskName}}
</td>
<td nzBreakWord>
{{item.company.companyName}}
</td>
<!-- <td>
一般单位
</td> -->
<td>
{{item.assitantOrganization.name}}
</td>
<td>
{{item.creationTime | date:"yyyy-MM-dd hh:mm:ss"}}
</td>
<td>
<ng-container *ngIf="item.approvalStatus; else elseTemplate">
<ng-container *ngIf="item.approvalStatus == 'reject'; else elseTemplate2">
<span class="green">审核驳回</span>
</ng-container>
<ng-template #elseTemplate2>
<span class="red">审核通过</span>
</ng-template>
</ng-container>
<ng-template #elseTemplate>
未审核
</ng-template>
</td>
<td>
/
</td>
<td class="operation">
<a class="blue" (click)="look(item)">查看</a>
</td>
</tr>
</tbody>
</nz-table>
<div class="header">
<span>
任务申请
</span>
<span style="font-size: 14px; color: #42B983;">
<i nz-icon nzType="info-circle" nzTheme="outline"></i>
任务申请已开始！剩余时间 3天13小时 / 生成周计划已开始！剩余时间 23:54:03
</span>
</div>
<div class="pagination">
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="totalCount" [nzPageSize]="10"
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
</nz-pagination>
<ng-template #totalTemplate let-total> 10条/页,共{{totalCount}}条 </ng-template>
<div class="searchbox">
<div class="search">
<nz-select nzPlaceHolder="任务名称" [(ngModel)]="searchForm.taskname" nzAllowClear>
<nz-option nzValue="监督检查" nzLabel="监督检查"></nz-option>
<nz-option nzValue="熟悉演练" nzLabel="熟悉演练"></nz-option>
</nz-select>
<input type="text" nz-input placeholder="单位名称" [(ngModel)]="searchForm.unitname" nzAllowClear />
<!-- <nz-select nzPlaceHolder="单位级别" [(ngModel)]="searchForm.unitlevel">
<nz-option nzValue="一般单位" nzLabel="一般单位"></nz-option>
<nz-option nzValue="重点单位" nzLabel="重点单位"></nz-option>
</nz-select> -->
<nz-tree-select [nzExpandedKeys]="expandKeys" [nzNodes]="nodes" nzShowSearch nzPlaceHolder="协助机构"
[(ngModel)]="searchForm.or" [nzExpandedIcon]="multiExpandedIconTpl"
[nzDropdownClassName]="'maxHeightTreeSelect'" nzAllowClear>
</nz-tree-select>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.children.length == 0; else elseTemplate">
</ng-container>
<ng-template #elseTemplate>
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
class="ant-tree-switcher-line-icon"></i>
</ng-template>
</ng-template>
<button (click)="search()" nz-button nzType="primary"><i nz-icon nzType="search"
nzTheme="outline"></i>查询</button>
<button (click)="reset()" nz-button nzType="default"><i nz-icon nzType="reload"
nzTheme="outline"></i>重置</button>
</div>
</div>
<div class="content">
<div class="applybtn">
<button (click)="apply()" nz-button nzType="primary"><i nz-icon nzType="form"
nzTheme="outline"></i>申请</button>
</div>
<div class="tablebox">
<div class="tableboxitem">
<div class="flexcol tasknamebox">
<span>
熟悉演练
</span>
<span>
任务名称
</span>
</div>
<div class="flexcol unitnamebox">
<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>
宣传
</span>
<span>
同步工作
</span>
</div>
<div class="flexcol">
<span>
<img src="../../../../assets/images/icon/agree.png" alt="">
</span>
<span>
结果
</span>
</div>
<div class="flexcol">
<span>
查看
</span>
<span>
操作
</span>
</div>
</div>
</div>
<div class="pagination">
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="totalCount"
[nzPageSize]="10" [nzShowTotal]="totalTemplate" nzShowQuickJumper
(nzPageIndexChange)="pageChange($event)">
</nz-pagination>
<ng-template #totalTemplate let-total> 10条/页,共{{totalCount}}条 </ng-template>
</div>
</div>
</div>
</div>
</div>

137
src/app/home/task/station-task-apply/station-task-apply.component.scss
Unescape View File

@ -1,13 +1,85 @@
.box {
width: 100%;
height: 100%;
color: #303133;
box-sizing: border-box;
padding: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
.informbox {
width: 100%;
height: 60px;
box-sizing: border-box;
padding: 10px 20px;
padding-bottom: 0px;
.inform {
width: 100%;
height: 100%;
background: #FFFFFF;
border-radius: 0px 0px 0px 0px;
opacity: 1;
display: flex;
.informleft {
height: 100%;
display: flex;
align-items: center;
margin-right: 20px;
img {
margin: 0 20px;
}
}
.informright {
flex: 1;
}
}
}
.timebox {
width: 100%;
height: 68px;
box-sizing: border-box;
display: flex;
align-items: center;
border-bottom: 1px dashed #C7CAD0;
padding: 0 20px;
nz-select {
margin-right: 16px;
border-radius: 4px 4px 4px 4px;
}
.monthbtn {
width: 80px;
height: 32px;
line-height: 32px;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
opacity: 1;
border: 1px solid #E4E7EC;
color: #303133;
margin-right: 16px;
cursor: pointer;
}
.selectedMonth {
background: #2C4DC0;
color: #FFFFFF;
}
}
.contentbox {
flex: 1;
box-sizing: border-box;
padding: 20px;
position: relative;
overflow: hidden;
}
.fffbox {
position: relative;
width: 100%;
height: 100%;
background: #FFFFFF;
@ -17,6 +89,7 @@
border: 1px solid #E4E7EC;
display: flex;
flex-direction: column;
overflow: hidden;
}
@ -70,12 +143,68 @@
padding-top: 0px;
display: flex;
flex-direction: column;
overflow-y: auto;
.applybtn {
align-self: flex-start;
margin: 18px 0;
}
.tablebox {
flex: 1;
display: flex;
flex-direction: column;
.tableboxitem {
display: flex;
align-items: center;
box-sizing: border-box;
padding: 22px 20px;
border: 1px solid #C7CAD0;
justify-content: space-around;
padding-left: 80px;
margin-bottom: 10px;
div {
flex: 1;
span {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 33px;
line-height: 33px;
text-align: left;
img {
width: 32px;
height: 32px;
}
}
}
.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;
}
}
.unitnamebox {
flex: 3;
}
}
}
.operation {
a {
margin-right: 16px;

166
src/app/home/task/station-task-apply/station-task-apply.component.ts
Unescape View File

@ -3,11 +3,12 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { TreeService } from 'src/app/service/tree.service';
import { ApplyComponent } from './apply/apply.component';
import { ApplyLookComponent } from './apply-look/apply-look.component';
@Component({
selector: 'app-station-task-apply',
templateUrl: './station-task-apply.component.html',
@ -24,12 +25,36 @@ export class StationTaskApplyComponent implements OnInit {
or: ''
}
OrganizationId
ngOnInit(): void {
this.OrganizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId
this.getAllOrganization()
isSupervisor: boolean //是否为检查员
months = [
{ id: 1, name: '1月', isable: true },
{ id: 2, name: '2月', isable: true },
{ id: 3, name: '3月', isable: true },
{ id: 4, name: '4月', isable: true },
{ id: 5, name: '5月', isable: true },
{ id: 6, name: '6月', isable: true },
{ id: 7, name: '7月', isable: true },
{ id: 8, name: '8月', isable: true },
{ id: 9, name: '9月', isable: true },
{ id: 10, name: '10月', isable: true },
{ id: 11, name: '11月', isable: true },
{ id: 12, name: '12月', isable: true }
]
selectedMonth
selectedYear = 2022
selectedTime
selectMonth(item) {
this.selectedMonth = item.id
this.getTaskList()
}
selectYear(e) {
this.selectedYear = e
console.log('年', e)
this.getTaskList()
}
cancel(item, type) {
@ -38,14 +63,16 @@ export class StationTaskApplyComponent implements OnInit {
}
nzLoading = false
isloading = false
totalCount
PageNumber = 1
PageSize = 10
taskLIst = []
taskLIst = [1, 1, 1]
getTaskList() {
this.nzLoading = true
this.isloading = true
let selectedTime = this.selectedYear + '-' + this.selectedMonth + '-' + '01'
let params = {
Month: selectedTime,
OrganizationId: this.OrganizationId,
TaskName: this.searchForm.taskname,
CompanyName: this.searchForm.unitname,
@ -56,12 +83,13 @@ export class StationTaskApplyComponent implements OnInit {
this.http.get('/api/PlanTasks', {
params: params
}).subscribe((data: any) => {
this.nzLoading = false
this.isloading = false
console.log('任务申请列表', data);
this.totalCount = data.totalCount
this.taskLIst = [...data.items]
})
}
pageChange($event) {
this.PageNumber = $event
this.getTaskList()
@ -85,26 +113,117 @@ export class StationTaskApplyComponent implements OnInit {
expandKeys
defaultOrId: string
//获取所有组织机构
organizationList: any
nodes: any = []
getAllOrganization() {
async getAllOrganization() {
let params = {
PageNumber: 1,
PageSize: 9999
}
this.http.get('/api/Organizations', {
params: params
}).subscribe((data: any) => {
data.items.forEach(element => {
element.key = element.id
element.title = element.name
});
this.nodes = [...this.toTree.toTree(data.items)]
var p = new Promise<void>((resolve, reject) => {
this.http.get('/api/Organizations', {
params: params
}).subscribe((data: any) => {
data.items.forEach(element => {
element.key = element.id
element.title = element.name
element.disableCheckbox = true
element.selectable = false
});
this.organizationList = JSON.parse(JSON.stringify(data.items)).filter(item => {
return item.level != 'squadron'
})
resolve(data)
})
})
return p
}
//获得所有检查员
supervisorList = []
mainsupervisorList = []
assitantsupervisorList = []
async getSupervisor() {
var p = new Promise<void>((resolve, reject) => {
this.http.get('/api/Users/Inspectors').subscribe((data: any) => {
console.log('检查员列表', data)
data.forEach(element => {
element.key = element.id
element.title = element.name
element.parentId = element.organizationId
});
this.supervisorList = data
resolve(data)
})
})
return p
}
ngOnInit(): void {
this.OrganizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId
let roles = JSON.parse(sessionStorage.getItem('userData')).roles
let isSupervisor = roles.find(item => {
return item.name.indexOf('检查') != -1
})
isSupervisor ? this.isSupervisor = true : this.isSupervisor = false
this.selectedMonth = new Date().getMonth() + 1
this.getTaskList()
Promise.all([this.getAllOrganization(), this.getSupervisor()])
.then((results) => {
if (this.isSupervisor) {
} else {
let arr = [...this.supervisorList, ...this.organizationList]
this.nodes = this.toTree.toTree(JSON.parse(JSON.stringify(arr)))
}
});
this.rollStart()
}
messageList = [1, 1, 1, 1, 1]
timer
rollStart() {
var ROLL_SPEED = 100
var noticeList1 = document.getElementById('notice-list');
var noticeList2 = document.getElementById('notice-list-2');
var listWrapper = document.getElementById('list-wrapper');
noticeList2.innerHTML = noticeList1.innerHTML;
this.timer = setInterval(rollStart, ROLL_SPEED);
function rollStart() {
if (Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight) {
listWrapper.style.top = '0px'
} else {
var top = listWrapper.style.top
listWrapper.style.top = _subStr(top) - 1 + 'px'
}
}
// 截取px前数值
function _subStr(str) {
var index = str.indexOf('px');
if (index > -1) {
return parseFloat(str.substr(0, index + 1))
}
}
}
mouseEnter() {
// console.log('进入了')
window.clearInterval(this.timer);
}
mouseleave() {
this.rollStart()
}
apply() {
if (this.nodes.length == 0) {
this.message.create('warning', '组织机构初始化中,请稍后重试');
this.message.create('warning', '组织机构为空,请稍后重试');
return
}
if (this.supervisorList.length == 0) {
this.message.create('warning', '检查员名单为空,请稍后重试');
return
}
const modal = this.modal.create({
@ -114,15 +233,18 @@ export class StationTaskApplyComponent implements OnInit {
nzWidth: 660,
nzMaskClosable: false,
nzComponentParams: {
title: "熟悉演练",
title: this.isSupervisor ? ["联络指导", "双随机"] : ["熟悉演练"],
nodes: this.nodes,
supervisorList: JSON.parse(JSON.stringify(this.supervisorList)),
organizationList: JSON.parse(JSON.stringify(this.organizationList))
},
nzOnOk: async () => {
console.log(instance.validateForm.value)
if (instance.validateForm.valid) {
await new Promise((resolve, reject) => {
let body = {
taskName: instance.validateForm.value.taskname,
organizationId: this.OrganizationId,
taskName: "联络指导",
companyId: instance.validateForm.value.unitname,
assitantOrganizationId: instance.validateForm.value.organization,
}
@ -150,6 +272,8 @@ export class StationTaskApplyComponent implements OnInit {
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
}
look(item) {
const modal = this.modal.create({
nzTitle: '详情',

4
src/app/home/task/task.component.html
Unescape View File

@ -5,10 +5,10 @@
<i nz-icon nzType="book" nzTheme="outline"></i>
任务指标
</li>
<li [routerLink]="['/task/audit']" routerLinkActive="router-link-active">
<!-- <li [routerLink]="['/task/audit']" routerLinkActive="router-link-active">
<i nz-icon nzType="audit" nzTheme="outline"></i>
工作审批
</li>
</li> -->
</ul>
<ul *ngIf="level == 'battalion'">
<li [routerLink]="['/task/monthlytaskoverview']" routerLinkActive="router-link-active">

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 489 B

41
src/styles.scss
Unescape View File

@ -281,3 +281,44 @@ app-root {
background: #666;
}
}
#container {
flex: 1;
position: relative;
height: 46px;
overflow: hidden;
text-align: left;
}
#list-wrapper {
position: relative;
}
ul {
list-style: none;
}
.info {
flex: 1;
display: flex;
height: 50px;
line-height: 50px;
color: #000;
display: flex;
align-items: center;
justify-content: space-between;
.infoitem {
flex: 1;
display: flex;
align-items: center;
img {
width: 40px;
}
}
}

Write Preview
Loading…
Cancel
Save