Browse Source

[新增]支队前两个模块

非煤矿山灾害智能感知和预警系统
邵佳豪 3 years ago
parent
commit
0f897ff73b
  1. 8
      src/app/home/home.module.ts
  2. 4
      src/app/home/task/station-weekly-plan/station-weekly-plan.component.html
  3. 22
      src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts
  4. 11
      src/app/home/task/station-weekly-plan/task-details/task-details.component.html
  5. 9
      src/app/home/task/station-weekly-plan/task-details/task-details.component.scss
  6. 25
      src/app/home/task/station-weekly-plan/task-details/task-details.component.spec.ts
  7. 73
      src/app/home/task/station-weekly-plan/task-details/task-details.component.ts
  8. 22
      src/app/home/task/zhi-indicators/edit-or/edit-or.component.html
  9. 0
      src/app/home/task/zhi-indicators/edit-or/edit-or.component.scss
  10. 41
      src/app/home/task/zhi-indicators/edit-or/edit-or.component.ts
  11. 377
      src/app/home/task/zhi-indicators/zhi-indicators.component.html
  12. 25
      src/app/home/task/zhi-indicators/zhi-indicators.component.scss
  13. 434
      src/app/home/task/zhi-indicators/zhi-indicators.component.ts
  14. 2
      src/styles.scss

8
src/app/home/home.module.ts

@ -59,8 +59,9 @@ import { ChangePasswordComponent } from './change-password/change-password.compo
import { NzUploadModule } from 'ng-zorro-antd/upload';
import { NzCardModule } from 'ng-zorro-antd/card';
import { PlanAdjustmentComponent } from './task/da-oneself-plan/plan-adjustment/plan-adjustment.component';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { TaskDetailsComponent } from './task/station-weekly-plan/task-details/task-details.component';
import { EditOrComponent } from './task/zhi-indicators/edit-or/edit-or.component';
@NgModule({
declarations: [
NavComponent,
@ -95,7 +96,8 @@ import { TaskDetailsComponent } from './task/station-weekly-plan/task-details/ta
AllotPersonComponent,
ChangePasswordComponent,
PlanAdjustmentComponent,
TaskDetailsComponent
TaskDetailsComponent,
EditOrComponent
],
imports: [
CommonModule,
@ -129,6 +131,6 @@ import { TaskDetailsComponent } from './task/station-weekly-plan/task-details/ta
NzUploadModule,
NzToolTipModule
],
entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent, ApplyComponent, ApplyLookComponent, LookTaskComponent, AllotPersonComponent]
entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent, ApplyComponent, ApplyLookComponent, LookTaskComponent, AllotPersonComponent, EditOrComponent]
})
export class HomeModule { }

4
src/app/home/task/station-weekly-plan/station-weekly-plan.component.html

@ -77,14 +77,12 @@
<div class="itemtwo" *ngIf="item.isDetails">
<p class="itemtwotitle">
<span>{{item.name}}</span>
<span class="back">
<i nz-icon nzType="fullscreen" nzTheme="outline" (click)="taskDetails()"></i>
<i nz-icon nzType="fullscreen" nzTheme="outline" (click)="taskDetails(item)" style="margin-right: 8px;"></i>
<span (click)="openDetails(item,false)">
<i nz-icon nzType="rollback" nzTheme="outline"></i>
返回
</span>
</span>
</p>
<div class="itemtwocontent">

22
src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts

@ -6,6 +6,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
import { HttpClient } from '@angular/common/http';
import { TreeService } from 'src/app/service/tree.service';
import * as moment from 'moment';
import { TaskDetailsComponent } from './task-details/task-details.component';
@Component({
selector: 'app-station-weekly-plan',
templateUrl: './station-weekly-plan.component.html',
@ -13,7 +14,7 @@ import * as moment from 'moment';
})
export class StationWeeklyPlanComponent implements OnInit {
constructor(private http: HttpClient, private modal: NzModalService, private message: NzMessageService) { }
constructor(private http: HttpClient, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { }
OrganizationId
userId
isSupervisor
@ -364,7 +365,22 @@ export class StationWeeklyPlanComponent implements OnInit {
}
})
}
taskDetails(){
taskDetails(item) {
// console.log(item)
const modal = this.modal.create({
nzTitle: item.name,
nzContent: TaskDetailsComponent,
nzViewContainerRef: this.viewContainerRef,
nzWidth: 900,
nzMaskClosable: false,
nzFooter: null,
nzComponentParams: {
data: item,
parent: this
}
});
const instance = modal.getContentComponent();
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
}
}

11
src/app/home/task/station-weekly-plan/task-details/task-details.component.html

@ -1,13 +1,16 @@
<div>
<div class="list">
<div class="item">
<div class="item" *ngFor="let item of data.data">
<div class="text">
想吃啥吃啥有限公司
{{item.company.companyName}}
</div>
<div class="state">
已派发
<span class="green" (click)="accept(item)">接受</span>
<span class="red" (click)="reject(item)">拒绝</span>
<span *ngIf="item.approvalStatus == '待处理'">待处理</span>
<span class="green" *ngIf="item.approvalStatus == '通过'">已通过</span>
<span class="red" *ngIf="item.approvalStatus == '驳回'">已驳回</span>
</div>
</div>
</div>
</div>

9
src/app/home/task/station-weekly-plan/task-details/task-details.component.scss

@ -6,10 +6,15 @@
.item{
display: flex;
border-bottom: 1px dotted #C7CAD0;
height: 60px;
line-height: 60px;
height: 50px;
line-height: 50px;
.text{
flex: 1;
}
.state{
span{
margin-left: 8px;
}
}
}
}

25
src/app/home/task/station-weekly-plan/task-details/task-details.component.spec.ts

@ -1,25 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TaskDetailsComponent } from './task-details.component';
describe('TaskDetailsComponent', () => {
let component: TaskDetailsComponent;
let fixture: ComponentFixture<TaskDetailsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TaskDetailsComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(TaskDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

73
src/app/home/task/station-weekly-plan/task-details/task-details.component.ts

@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Component, Input, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
@Component({
selector: 'app-task-details',
@ -6,10 +9,74 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./task-details.component.scss']
})
export class TaskDetailsComponent implements OnInit {
constructor() { }
@Input() data?: any;
@Input() parent?: any;
constructor(private http: HttpClient, private modal: NzModalService, private message: NzMessageService) { }
ngOnInit(): void {
}
//接受任务
accept(i) {
console.log(this.parent)
this.modal.confirm({
nzTitle: `确定要接受该任务吗?`,
nzOkText: '确定',
nzOkType: 'default',
nzOnOk: () => {
this.http.post(`/api/PlanTasks/Approval/${i.id}`, null, {
params: {
approvalStatus: '通过'
}
}).subscribe({
next: (data) => {
this.message.create('success', '已接受');
i.approvalStatus = '通过'
this.parent.stationData.forEach(element => {
if (element.id == i.company.organizationId) {
if (element.isExpand) {
this.parent.getTaskListOfStation(element)
}
}
});
},
error: (err) => {
this.message.create('warning', '接受失败');
}
})
},
nzCancelText: '取消'
});
}
//拒绝任务
reject(i) {
this.modal.confirm({
nzTitle: `确定要拒绝该任务吗?`,
nzOkText: '确定',
nzOkType: 'default',
nzOnOk: () => {
this.http.post(`/api/PlanTasks/Approval/${i.id}`, null, {
params: {
approvalStatus: '驳回'
}
}).subscribe({
next: (data) => {
this.message.create('success', '已拒绝');
i.approvalStatus = '驳回'
this.parent.stationData.forEach(element => {
if (element.id == i.company.organizationId) {
if (element.isExpand) {
this.parent.getTaskListOfStation(element)
}
}
});
},
error: (err) => {
this.message.create('warning', '拒绝失败');
}
})
},
nzCancelText: '取消'
});
}
}

22
src/app/home/task/zhi-indicators/edit-or/edit-or.component.html

@ -0,0 +1,22 @@
<div class="box applymodel">
<form nz-form [formGroup]="validateForm">
<nz-form-item>
<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]="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">
</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>
</nz-form-control>
</nz-form-item>
</form>
</div>

0
src/app/home/task/zhi-indicators/edit-or/edit-or.component.scss

41
src/app/home/task/zhi-indicators/edit-or/edit-or.component.ts

@ -0,0 +1,41 @@
import { Component, OnInit, Input } from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { TreeService } from 'src/app/service/tree.service';
import { Observable, of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
@Component({
selector: 'app-edit-or',
templateUrl: './edit-or.component.html',
styleUrls: ['./edit-or.component.scss']
})
export class EditOrComponent implements OnInit {
@Input() selectedData?: any;
@Input() organizationList?: any;
@Input() users?: any;
validateForm!: FormGroup;
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
newTree = []
ngOnInit(): void {
this.validateForm = this.fb.group({
organization: [this.selectedData]
});
console.log(111, this.users)
console.log(222, this.organizationList)
let arr = [...this.users, ...this.organizationList]
console.log(333, arr)
this.newTree = this.toTree.toTree(arr)
}
destroyModal(): void {
this.modal.destroy({ data: 'this the result data' });
}
}

377
src/app/home/task/zhi-indicators/zhi-indicators.component.html

@ -1,18 +1,292 @@
<!-- <p>任务指标</p> -->
<div class="box">
<div class="timebox">
<nz-select ngModel="2022">
<nz-option nzValue="2021" nzLabel="2021年"></nz-option>
<nz-option nzValue="2022" nzLabel="2022年"></nz-option>
<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.name == selectedMonth}">
[ngClass]="{'selectedMonth': item.id == selectedMonth}">
{{item.name}}
</div>
</div>
<div class="content" cdkScrollable>
<!-- 双随机 -->
<!-- 投诉举报 complaint-->
<div class="panel">
<div class="spin" *ngIf="complaint.isLoading">
<nz-spin nzSimple></nz-spin>
</div>
<div class="panelheader">
<div class="panelheaderleft">
<div class="panelheadername panelheadernameblue2">
<img src="../../../../assets/images/icon/yanlian.png" alt="">
投诉举报
</div>
<button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft"
[nzPopoverContent]="contentTemplate1" [nzPopoverTrigger]=null
[nzPopoverVisible]="complaint.isPopover" (click)="isPopover(complaint)">选择单位</button>
<ng-template #contentTemplate1>
<div class="selectUnitPopover">
<div class="popoverTitle">
<span (click)="popoverMenuSelect(complaint,1)"
[ngClass]="{'selectedspan': complaint.selectedMenu == 1}">单位名称</span>
<span style="margin: 0 10px;">|</span>
<span (click)="popoverMenuSelect(complaint,2)"
[ngClass]="{'selectedspan': complaint.selectedMenu == 2}">组织机构</span>
</div>
<div class="popoverContent" *ngIf="complaint.selectedMenu == 1">
<div>
<form nz-form (ngSubmit)="submitForm(complaint)">
<nz-form-item>
<nz-form-control>
<nz-input-group nzPrefixIcon="search">
<input type="text" [(ngModel)]="complaint.search1" nz-input
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
</nz-input-group>
</nz-form-control>
<button style="display: none;" type="submit"></button>
</nz-form-item>
</form>
</div>
<div class="popoverContentitem">
<nz-checkbox-group [(ngModel)]="complaint.unitList"
(ngModelChange)="log(complaint)"></nz-checkbox-group>
<!-- <p class="blue" *ngIf="complaint.unitList.length < totalCount"
(click)="moreData()">更多</p> -->
</div>
</div>
<div class="popoverContent" *ngIf="complaint.selectedMenu == 2">
<div>
<form nz-form>
<nz-form-item>
<nz-form-control>
<nz-input-group nzPrefixIcon="search">
<input type="text" [(ngModel)]="complaint.search2" nz-input
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="popoverContentitem">
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="complaint.search2"
#nzTreeComponent [nzData]="complaint.nodes" [nzTreeTemplate]="nzTreeTemplate"
nzBlockNode [nzExpandedIcon]="multiExpandedIconTpl">
</nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<div class="nodebox">
<span class="name">
<label *ngIf="node.origin.companyName"
[(ngModel)]="node.origin.isChecked" nz-checkbox
(ngModelChange)="orcheckbox(complaint,$event,node)"></label>
{{ node.title }}
</span>
</div>
</ng-template>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.origin.companyName; 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>
</div>
</div>
<div class="popoverBtn">
<button nz-button nzType="primary" [nzLoading]="complaint.isLoading"
(click)="selectedUnit(complaint,'投诉举报')">确定</button>
<button nz-button nzType="default" [nzLoading]="complaint.isLoading"
(click)="isPopover(complaint)">取消</button>
</div>
</div>
</ng-template>
<span>
已分配: <span class="blue">{{complaint.allocated}}/{{complaint.data.length}}</span> 家单位
</span>
</div>
<div class="panelheaderright">
<!-- <button nz-button nzType="primary">提交审核</button> -->
<span (click)="expand(complaint)" class="expand blue">
{{complaint.isExpand ? '收起' :'展开'}}
<i nz-icon [nzType]="complaint.isExpand ? 'down' : 'up'" nzTheme="outline"></i>
</span>
</div>
</div>
<div class="panelcontent" *ngIf="complaint.isExpand">
<nz-table #colSpanTable [nzData]="complaint.data" nzBordered nzSize="small" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="25%">单位名称</th>
<th nzWidth="50%">配合机构</th>
<th nzWidth="25%">说明</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of colSpanTable.data; index as i">
<td>{{item.company.companyName}}</td>
<td class="editOr">
<span class="name">
<span>{{item.organization.name}}</span>
<span *ngFor="let i of item.supervisors">
/{{i.name}}
</span>
</span>
<span class="blue" (click)="editOr(complaint,item)">修改机构</span>
</td>
<td style="padding:0 2px!important;">
<textarea nzAutosize [(ngModel)]="item.description" style="border: 0;" rows="1" nz-input
placeholder="一段简短的说明文字..."
(ngModelChange)="taskDescChange(complaint,item)"></textarea>
</td>
</tr>
</tbody>
</nz-table>
</div>
</div>
<!-- 行政许可 -->
<div class="panel">
<div class="spin" *ngIf="permission.isLoading">
<nz-spin nzSimple></nz-spin>
</div>
<div class="panelheader">
<div class="panelheaderleft">
<div class="panelheadername panelheadernamegreen">
<img src="../../../../assets/images/icon/yanlian.png" alt="">
行政许可
</div>
<button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft"
[nzPopoverContent]="contentTemplate2" [nzPopoverTrigger]=null
[nzPopoverVisible]="permission.isPopover" (click)="isPopover(permission)">选择单位</button>
<ng-template #contentTemplate2>
<div class="selectUnitPopover">
<div class="popoverTitle">
<span (click)="popoverMenuSelect(permission,1)"
[ngClass]="{'selectedspan': permission.selectedMenu == 1}">单位名称</span>
<span style="margin: 0 10px;">|</span>
<span (click)="popoverMenuSelect(permission,2)"
[ngClass]="{'selectedspan': permission.selectedMenu == 2}">组织机构</span>
</div>
<div class="popoverContent" *ngIf="permission.selectedMenu == 1">
<div>
<form nz-form (ngSubmit)="submitForm(permission)">
<nz-form-item>
<nz-form-control>
<nz-input-group nzPrefixIcon="search">
<input type="text" [(ngModel)]="permission.search1" nz-input
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
</nz-input-group>
</nz-form-control>
<button style="display: none;" type="submit"></button>
</nz-form-item>
</form>
</div>
<div class="popoverContentitem">
<nz-checkbox-group [(ngModel)]="permission.unitList"
(ngModelChange)="log(permission)"></nz-checkbox-group>
<!-- <p class="blue" *ngIf="permission.unitList.length < totalCount"
(click)="moreData()">更多</p> -->
</div>
</div>
<div class="popoverContent" *ngIf="permission.selectedMenu == 2">
<div>
<form nz-form>
<nz-form-item>
<nz-form-control>
<nz-input-group nzPrefixIcon="search">
<input type="text" [(ngModel)]="permission.search2" nz-input
placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
</nz-input-group>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="popoverContentitem">
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="permission.search2"
#nzTreeComponent [nzData]="permission.nodes" [nzTreeTemplate]="nzTreeTemplate"
nzBlockNode [nzExpandedIcon]="multiExpandedIconTpl">
</nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<div class="nodebox">
<span class="name">
<label *ngIf="node.origin.companyName"
[(ngModel)]="node.origin.isChecked" nz-checkbox
(ngModelChange)="orcheckbox(permission,$event,node)"></label>
{{ node.title }}
</span>
</div>
</ng-template>
<ng-template #multiExpandedIconTpl let-node let-origin="origin">
<ng-container *ngIf="node.origin.companyName; 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>
</div>
</div>
<div class="popoverBtn">
<button nz-button nzType="primary" [nzLoading]="permission.isLoading"
(click)="selectedUnit(permission,'行政许可')">确定</button>
<button nz-button nzType="default" [nzLoading]="permission.isLoading"
(click)="isPopover(permission)">取消</button>
</div>
</div>
</ng-template>
<span>
已分配: <span class="blue">{{permission.allocated}}/{{permission.data.length}}</span> 家单位
</span>
</div>
<div class="panelheaderright">
<!-- <button nz-button nzType="primary">提交审核</button> -->
<span (click)="expand(permission)" class="expand blue">
{{permission.isExpand ? '收起' :'展开'}}
<i nz-icon [nzType]="permission.isExpand ? 'down' : 'up'" nzTheme="outline"></i>
</span>
</div>
</div>
<div class="panelcontent" *ngIf="permission.isExpand">
<nz-table #colSpanTable [nzData]="permission.data" nzBordered nzSize="small" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="25%">单位名称</th>
<th nzWidth="50%">配合机构</th>
<th nzWidth="25%">说明</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of colSpanTable.data; index as i">
<td>{{item.company.companyName}}</td>
<td class="editOr">
<span class="name">
<span>{{item.organization.name}}</span>
<span *ngFor="let i of item.supervisors">
/{{i.name}}
</span>
</span>
<span class="blue" (click)="editOr(permission,item)">修改机构</span>
</td>
<td style="padding:0 2px!important;">
<textarea nzAutosize [(ngModel)]="item.description" style="border: 0;" rows="1" nz-input
placeholder="一段简短的说明文字..."
(ngModelChange)="taskDescChange(permission,item)"></textarea>
</td>
</tr>
</tbody>
</nz-table>
</div>
</div>
<!-- 双随机 doubleRandom-->
<div class="panel">
<div class="spin" *ngIf="doubleRandom.isLoading">
<nz-spin nzSimple></nz-spin>
</div>
<div class="panelheader">
<div class="panelheaderleft">
<div class="panelheadername panelheadernameblue">
@ -20,9 +294,9 @@
双随机
</div>
<button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft"
[nzPopoverContent]="contentTemplate" [nzPopoverTrigger]=null
[nzPopoverContent]="contentTemplate3" [nzPopoverTrigger]=null
[nzPopoverVisible]="doubleRandom.isPopover" (click)="isPopover(doubleRandom)">选择单位</button>
<ng-template #contentTemplate>
<ng-template #contentTemplate3>
<div class="selectUnitPopover">
<div class="popoverTitle">
<span (click)="popoverMenuSelect(doubleRandom,1)"
@ -68,8 +342,8 @@
<div class="popoverContentitem">
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="doubleRandom.search2"
#nzTreeComponent [nzData]="doubleRandom.nodes" [nzTreeTemplate]="nzTreeTemplate"
nzBlockNode (nzClick)="nzEvent($event)"
(nzExpandChange)="nzEvent($event)" [nzExpandedIcon]="multiExpandedIconTpl">
nzBlockNode (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"
[nzExpandedIcon]="multiExpandedIconTpl">
</nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
<div class="nodebox">
@ -104,7 +378,7 @@
</span>
</div>
<div class="panelheaderright">
<button nz-button nzType="primary">提交审核</button>
<!-- <button nz-button nzType="primary">提交审核</button> -->
<span (click)="expand(doubleRandom)" class="expand blue">
{{doubleRandom.isExpand ? '收起' :'展开'}}
<i nz-icon [nzType]="doubleRandom.isExpand ? 'down' : 'up'" nzTheme="outline"></i>
@ -117,7 +391,7 @@
<thead>
<tr>
<th nzWidth="18%">责任机构</th>
<th nzWidth="8%">任务额</th>
<th nzWidth="6%">任务额</th>
<th nzWidth="25%">单位名称</th>
<th nzWidth="15%">监督员</th>
<th>说明</th>
@ -125,16 +399,26 @@
</thead>
<tbody>
<tr *ngFor="let item of colSpanTable.data; index as i">
<td>访客</td>
<td>2021-11-19</td>
<td>历下区大队</td>
<td>8</td>
<td>
22
<div>山东儒雅生活智慧城市服务有限公司(书苑广场)</div>
<div>山东儒雅生活智慧城市服务有限公司(书苑广场)</div>
<div>山东儒雅生活智慧城市服务有限公司(书苑广场)</div>
<div>山东儒雅生活智慧城市服务有限公司(书苑广场)</div>
</td>
<td>
22
<span>张三三</span>
<span class="blue" style="float: right;">更改</span>
</td>
<td style="padding:0 2px!important;">
<textarea [(ngModel)]="item.explain" style="border: 0;" rows="1" nz-input
<textarea ngModel nzAutosize style="border: 0;" rows="1" nz-input
placeholder="一段简短的说明文字..." (ngModelChange)="saveItem()"></textarea>
<textarea ngModel nzAutosize style="border: 0;" rows="1" nz-input
placeholder="一段简短的说明文字..." (ngModelChange)="saveItem()"></textarea>
<textarea ngModel nzAutosize style="border: 0;" rows="1" nz-input
placeholder="一段简短的说明文字..." (ngModelChange)="saveItem()"></textarea>
<textarea ngModel nzAutosize style="border: 0;" rows="1" nz-input
placeholder="一段简短的说明文字..." (ngModelChange)="saveItem()"></textarea>
</td>
</tr>
@ -143,9 +427,11 @@
</div>
</div>
<!-- 熟悉演练 -->
<div class="panel">
<div class="spin" *ngIf="rehearsal.isLoading">
<nz-spin nzSimple></nz-spin>
</div>
<div class="panelheader">
<div class="panelheaderleft">
<div class="panelheadername panelheadernamepurple">
@ -153,9 +439,9 @@
熟悉演练
</div>
<button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft"
[nzPopoverContent]="contentTemplate2" [nzPopoverTrigger]=null
[nzPopoverContent]="contentTemplate4" [nzPopoverTrigger]=null
[nzPopoverVisible]="rehearsal.isPopover" (click)="isPopover(rehearsal)">选择单位</button>
<ng-template #contentTemplate2>
<ng-template #contentTemplate4>
<div class="selectUnitPopover">
<div class="popoverTitle">
<span (click)="popoverMenuSelect(rehearsal,1)"
@ -232,7 +518,7 @@
</span>
</div>
<div class="panelheaderright">
<button nz-button nzType="primary">提交审核</button>
<!-- <button nz-button nzType="primary">提交审核</button> -->
<span (click)="expand(rehearsal)" class="expand blue">
{{rehearsal.isExpand ? '收起' :'展开'}}
<i nz-icon [nzType]="rehearsal.isExpand ? 'down' : 'up'" nzTheme="outline"></i>
@ -243,25 +529,22 @@
<nz-table #colSpanTable [nzData]="rehearsal.data" nzBordered nzSize="small" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="18%">责任机构</th>
<th nzWidth="8%">任务额</th>
<th nzWidth="25%">单位名称</th>
<th nzWidth="15%">监督员</th>
<th nzWidth="25%">责任机构</th>
<th nzWidth="6%">任务额</th>
<th nzWidth="30%">单位名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of colSpanTable.data; index as i">
<td>访客</td>
<td>2021-11-19</td>
<td>历下区大队</td>
<td> <input nz-input ngModel /></td>
<td>
22
</td>
<td>
22
山东儒雅生活智慧城市服务有限公司(书苑广场)
</td>
<td style="padding:0 2px!important;">
<textarea style="border: 0;" rows="1" nz-input placeholder="一段简短的说明文字..."></textarea>
<textarea ngModel style="border: 0;" rows="1" nzAutosize nz-input
placeholder="一段简短的说明文字..." (ngModelChange)="saveItem()"></textarea>
</td>
</tr>
</tbody>
@ -269,30 +552,6 @@
</div>
</div>
<div class="panel">
<div class="panelheader">
<div class="panelheaderleft">
<div class="panelheadername panelheadernameor">
<img src="../../../../assets/images/icon/huodong.png" alt="">
重大活动
</div>
<button nz-button nzType="primary">选择单位</button>
<span>
已分配: <span class="blue">0/0</span> 家单位
</span>
</div>
<div class="panelheaderright">
<!-- <button nz-button nzType="primary">提交审核</button>
<span class="expand blue">
收起
<i nz-icon nzType="down" nzTheme="outline"></i>
</span> -->
</div>
</div>
</div>
<div class="panel">
<div class="panelheader">
<div class="panelheaderleft">
@ -300,10 +559,10 @@
<img src="../../../../assets/images/icon/xuanchuan.png" alt="">
消防宣传
</div>
<button nz-button nzType="primary">选择单位</button>
<!-- <button nz-button nzType="primary">选择单位</button>
<span>
已分配: <span class="blue">0/0</span> 家单位
</span>
</span> -->
</div>
<div class="panelheaderright">
<!-- <button nz-button nzType="primary">提交审核</button>
@ -321,10 +580,10 @@
<img src="../../../../assets/images/icon/huozai.png" alt="">
火灾调查
</div>
<button nz-button nzType="primary">选择单位</button>
<!-- <button nz-button nzType="primary">选择单位</button>
<span>
已分配: <span class="blue">0/0</span> 家单位
</span>
</span> -->
</div>
<div class="panelheaderright">
<!-- <button nz-button nzType="primary">提交审核</button>

25
src/app/home/task/zhi-indicators/zhi-indicators.component.scss

@ -51,6 +51,7 @@
.panel {
margin-bottom: 16px;
position: relative;
.panelheader {
justify-content: space-between;
@ -91,6 +92,21 @@
.panelcontent {
nz-table {
margin-top: 16px;
.editOr {
overflow: hidden;
// display: flex;
// align-items: center;
// justify-content: space-between;
.blue {
// display: inline-block;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
float: right;
}
}
}
}
}
@ -127,12 +143,14 @@
display: flex;
flex-direction: column;
overflow: hidden;
.popoverContentitem{
.popoverContentitem {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
p{
p {
text-align: center;
}
}
@ -142,7 +160,8 @@
display: flex;
justify-content: flex-end;
margin-top: 16px;
button{
button {
margin-left: 18px;
}
}

434
src/app/home/task/zhi-indicators/zhi-indicators.component.ts

@ -1,10 +1,13 @@
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { TreeService } from 'src/app/service/tree.service';
import { fromEvent, Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators'; // 引入debounceTime、Subject
import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalService } from 'ng-zorro-antd/modal';
import { EditOrComponent } from './edit-or/edit-or.component';
@Component({
selector: 'app-zhi-indicators',
templateUrl: './zhi-indicators.component.html',
@ -13,50 +16,114 @@ import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
export class ZhiIndicatorsComponent implements OnInit {
validateForm!: FormGroup;
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private message: NzMessageService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
private valueChange = new Subject<string>();
ngOnInit(): void {
this.getAllOrganization()
this.getCompanies()
//保存防抖
this.valueChange.pipe(debounceTime(1000)).subscribe(data => {
console.log(data);
});
}
saveItem() {
this.valueChange.next('xxxx');
}
months = [
{ name: '1月', isable: true },
{ name: '2月', isable: true },
{ name: '3月', isable: true },
{ name: '4月', isable: true },
{ name: '5月', isable: true },
{ name: '6月', isable: true },
{ name: '7月', isable: true },
{ name: '8月', isable: true },
{ name: '9月', isable: true },
{ name: '10月', isable: true },
{ name: '11月', isable: true },
{ name: '12月', isable: true }
{ 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.name
this.selectedMonth = item.id
this.initializeData()
this.getTaskList('投诉举报')
this.getTaskList('行政许可')
}
selectYear(e) {
this.selectedYear = e
this.initializeData()
this.getTaskList('投诉举报')
this.getTaskList('行政许可')
}
initializeData() {
this.complaint.isExpand = true
this.complaint.isPopover = false
this.complaint.isLoading = false
this.complaint.search1 = ''
this.complaint.search1Value = []
this.complaint.search2 = ''
this.complaint.search2Value = []
this.complaint.selectedMenu = 1
this.complaint.data = []
this.permission.isExpand = true
this.permission.isPopover = false
this.permission.isLoading = false
this.permission.search1 = ''
this.permission.search1Value = []
this.permission.search2 = ''
this.permission.search2Value = []
this.permission.selectedMenu = 1
this.permission.data = []
}
//投诉举报
complaint = {
name: '投诉举报',
allocated: 0,
isExpand: true,//卡片展开
isPopover: false,//选择单位气泡卡片
isLoading: false,
search1: '',//选择单位气泡卡片---单位选择列表
search1Value: [],
search2: '',//选择单位气泡卡片---组织选择列表
search2Value: [],
searchAll: [],
selectedMenu: 1,//选择单位气泡卡片
data: [
],//表格数据
nodes: [],
unitList: []
}
//行政许可
permission = {
name: '行政许可',
allocated: 0,
isExpand: true,//卡片展开
isPopover: false,//选择单位气泡卡片
isLoading: false,
search1: '',//选择单位气泡卡片---单位选择列表
search1Value: [],
search2: '',//选择单位气泡卡片---组织选择列表
search2Value: [],
searchAll: [],
selectedMenu: 1,//选择单位气泡卡片
data: [],//表格数据
nodes: [],
unitList: []
}
// 双随机
doubleRandom = {
name: '双随机',
allocated: 0,
isExpand: true,//卡片展开
isPopover: false,//选择单位气泡卡片
isLoading: false,
search1: '',//选择单位气泡卡片---单位选择列表
search1Value: [],
search2: '',//选择单位气泡卡片---组织选择列表
search2Value: [],
searchAll: [],
selectedMenu: 1,//选择单位气泡卡片
data: [
{ explain: '' }
@ -67,41 +134,25 @@ export class ZhiIndicatorsComponent implements OnInit {
// 熟悉演练
rehearsal = {
isExpand: false,//卡片展开
name: '熟悉演练',
allocated: 0,
isExpand: true,//卡片展开
isPopover: false,//选择单位气泡卡片
isLoading: false,
search1: '',//选择单位气泡卡片---单位选择列表
search1Value: [],
search2: '',//选择单位气泡卡片---组织选择列表
search2Value: [],
searchAll: [],
selectedMenu: 1,//选择单位气泡卡片
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//表格数据
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],//表格数据
nodes: [],
unitList: []
}
PageNumber = 1
PageSize = 50
totalCount: number
getCompanies(CompanyName?: string) {
let params = {
CompanyName: CompanyName,
PageNumber: this.PageNumber,
PageSize: this.PageSize
}
this.http.get('/api/Companies', {
params: params
}).subscribe((data: any) => {
console.log(data);
this.totalCount = data.totalCount
data.items.forEach(element => {
element.label = element.companyName
element.value = element.id
});
this.doubleRandom.unitList = this.doubleRandom.unitList.concat(data.items);
this.doubleRandom.unitList = [...this.doubleRandom.unitList]
})
}
PageNumber
moreData() {
this.PageNumber += 1
this.getCompanies()
@ -116,15 +167,31 @@ export class ZhiIndicatorsComponent implements OnInit {
data.search1Value = arr
}
isPopover(data) {
console.log(data)
data.isPopover = !data.isPopover
data.unitList.forEach(element => {
element.checked = false
// data.data.forEach(item => {
// if (element.id == item.company.id) {
// element.checked = true
// }
// })
});
}
//搜索框提交
submitForm(data): void {
data.unitList = []
this.PageNumber = 1
this.getCompanies(data.search1)
this.getCompanies(data)
}
// 弹出 tab
popoverMenuSelect(data, type) {
data.selectedMenu = type
@ -134,64 +201,281 @@ export class ZhiIndicatorsComponent implements OnInit {
}
totalCount: number
unitList = []
async getCompanies(incomingData?: any) {
let params = {
CompanyName: incomingData ? incomingData.search1 : '',
PageNumber: 1,
PageSize: 99999
}
let p = new Promise<void>((resolve, reject) => {
this.http.get('/api/Companies', {
params: params
}).subscribe((data: any) => {
this.totalCount = data.totalCount
data.items.forEach(element => {
element.label = element.companyName
element.value = element.id
element.parentId = element.organizationId
element.key = element.id
element.title = element.companyName
element.level = 4
});
this.unitList = data.items
nzExpandAll = false;
if (incomingData && incomingData.name == '投诉举报') {
this.complaint.unitList = JSON.parse(JSON.stringify(this.unitList))
} else if (incomingData && incomingData.name == '行政许可') {
this.permission.unitList = JSON.parse(JSON.stringify(this.unitList))
} else if (incomingData && incomingData.name == '双随机') {
this.doubleRandom.unitList = JSON.parse(JSON.stringify(this.unitList))
} else if (incomingData && incomingData.name == '熟悉演练') {
this.rehearsal.unitList = JSON.parse(JSON.stringify(this.unitList))
} else {
this.complaint.unitList = JSON.parse(JSON.stringify(this.unitList))
this.permission.unitList = JSON.parse(JSON.stringify(this.unitList))
this.doubleRandom.unitList = JSON.parse(JSON.stringify(this.unitList))
this.rehearsal.unitList = JSON.parse(JSON.stringify(this.unitList))
}
// this.complaint.unitList = this.complaint.unitList.concat(JSON.parse(JSON.stringify(data.items)));
// this.complaint.unitList = [...this.complaint.unitList]
// this.permission.unitList = this.permission.unitList.concat(JSON.parse(JSON.stringify(data.items)));
// this.permission.unitList = [...this.permission.unitList]
// this.doubleRandom.unitList = this.doubleRandom.unitList.concat(JSON.parse(JSON.stringify(data.items)));
// this.doubleRandom.unitList = [...this.doubleRandom.unitList]
// this.rehearsal.unitList = this.rehearsal.unitList.concat(JSON.parse(JSON.stringify(data.items)));
// this.rehearsal.unitList = [...this.rehearsal.unitList]
resolve(data)
})
})
return p
}
allOrList: any
nodes
getAllOrganization() {
async getAllOrganization() {
let params = {
ContainsChildren: true,
pageSize: 9999
}
this.http.get('/api/Organizations', {
params: params
}).subscribe((data: any) => {
data.items.forEach(element => {
element.key = element.id
element.title = element.name
element.selectable = false
});
this.allOrList = data.items
this.nodes = [...this.toTree.toTree(data.items)]
this.doubleRandom.nodes = JSON.parse(JSON.stringify(this.nodes))
this.rehearsal.nodes = JSON.parse(JSON.stringify(this.nodes))
return new Promise<void>((resolve, reject) => {
this.http.get('/api/Organizations', {
params: params
}).subscribe((data: any) => {
console.log(9999999)
data.items.forEach(element => {
element.key = element.id
element.title = element.name
element.selectable = false
element.disableCheckbox = true
});
this.allOrList = JSON.parse(JSON.stringify(data.items))
resolve(data)
})
})
}
//获得除了检查员的其他用户
users
async getUsers() {
return new Promise<void>((resolve, reject) => {
let params = {
OrganizationId: this.OrganizationId,
OrganizationLevel: 'squadron',
ContainsChildren: true,
PageNumber: 1,
PageSize: 9999
}
this.http.get('/api/Users', {
params: params
}).subscribe((data: any) => {
console.log('用户列表', data.items)
data.items.forEach(element => {
element.key = element.id
element.title = element.name
element.parentId = element.organizationId
});
this.users = data.items
resolve(data)
})
})
}
editOr(incomingData, item) {
const modal = this.modal.create({
nzTitle: '修改协助机构',
nzContent: EditOrComponent,
nzViewContainerRef: this.viewContainerRef,
nzWidth: 660,
nzMaskClosable: false,
nzComponentParams: {
selectedData: item.supervisorIds,
organizationList: JSON.parse(JSON.stringify(this.allOrList)),
users: JSON.parse(JSON.stringify(this.users)),
},
nzOnOk: async () => {
if (instance.validateForm.valid) {
await new Promise((resolve, reject) => {
let body = {
supervisorIds: instance.validateForm.value.organization,
}
this.http.patch(`/api/PlanTasks/${item.id}`, body).subscribe({
next: async (data: any) => {
this.message.create('success', '修改成功');
incomingData.name == '投诉举报' ? this.getTaskList('投诉举报') : null
incomingData.name == '行政许可' ? this.getTaskList('行政许可') : null
resolve(data)
},
error: (err) => {
this.message.create('warning', '修改失败');
reject(err)
}
})
})
} else {
this.message.create('warning', '请填写完整!');
return false
}
}
});
const instance = modal.getContentComponent();
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
}
orcheckbox(data, $event, node) {
if ($event) {
data.search2Value.push(node.origin.name)
data.search2Value.push(node.origin.id)
} else {
for (let index = 0; index < data.search2Value.length; index++) {
const element = data.search2Value[index];
if (element == node.origin.name) {
if (element == node.origin.id) {
data.search2Value.splice(index, 1)
index--
}
}
}
console.log(data.search2Value)
}
OrganizationId
ngOnInit(): void {
this.OrganizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId
this.selectedMonth = new Date().getMonth() + 1
//保存防抖
this.valueChange.pipe(debounceTime(1000)).subscribe((item: any) => {
let body = {
description: item.description,
}
return new Promise<void>((resolve, reject) => {
this.http.patch(`/api/PlanTasks/${item.id}`, body).subscribe({
next: async (data: any) => {
this.message.create('success', '实时保存成功');
resolve(data)
},
error: (err) => {
this.message.create('warning', '保存失败');
reject(err)
}
})
})
});
this.getUsers()
Promise.all([this.getCompanies(), this.getAllOrganization()])
.then((results) => {
let arr = [...JSON.parse(JSON.stringify(this.allOrList)), ...JSON.parse(JSON.stringify(this.unitList))]
this.nodes = [...this.toTree.toTree(arr)]
this.complaint.nodes = JSON.parse(JSON.stringify(this.nodes))
this.permission.nodes = JSON.parse(JSON.stringify(this.nodes))
this.doubleRandom.nodes = JSON.parse(JSON.stringify(this.nodes))
this.rehearsal.nodes = JSON.parse(JSON.stringify(this.nodes))
});
this.getTaskList('投诉举报')
this.getTaskList('行政许可')
}
//选择单位 确认按钮
selectedUnit(data, type) {
let arr = [...data.search1Value, ...data.search2Value]
let arrSet = [...new Set(arr)]
data.isLoading = true
this.http.post(`/api/PlanTasks/Many`, null, {
params: {
companyIds: arrSet,
taskType: type
}
}).subscribe({
next: (item) => {
data.isLoading = false
data.isPopover = false
this.message.create('success', '派发成功');
type == '投诉举报' ? this.getTaskList('投诉举报', data) : null
type == '行政许可' ? this.getTaskList('行政许可', data) : null
},
error: (err) => {
this.message.create('warning', '派发失败');
}
})
}
async getTaskList(TaskType, carddata?: any) {
carddata ? carddata.isLoading = true : null
let selectedTime = this.selectedYear + '-' + this.selectedMonth + '-' + '01'
let params = {
Month: selectedTime,
OrganizationId: this.OrganizationId,
TaskType: TaskType,
PageNumber: 1,
PageSize: 99999
}
var p = await new Promise<void>((resolve, reject) => {
this.http.get('/api/PlanTasks', {
params: params
}).subscribe((data: any) => {
TaskType == '投诉举报' ? this.complaint.allocated = 0 : null
TaskType == '行政许可' ? this.permission.allocated = 0 : null
carddata ? carddata.isLoading = false : null
console.log(TaskType + '任务列表', data.items);
TaskType == '投诉举报' ? this.complaint.data = data.items : null
TaskType == '行政许可' ? this.permission.data = data.items : null
data.items.forEach(item => {
if (item.supervisorIds.length != 0) {
TaskType == '投诉举报' ? this.complaint.allocated += 1 : null
TaskType == '行政许可' ? this.permission.allocated += 1 : null
}
});
resolve(data)
})
})
return p
}
// this.valueChange.next('xxxx');
//修改任务描述
async taskDescChange(incomingData, item) {
this.valueChange.next(item);
}
ngOnDestroy(): void {
//Called once, before the instance is destroyed.
//Add 'implements OnDestroy' to the class.
console.log('毁灭了')
this.doubleRandom.isPopover = false
}
nzEvent(event: NzFormatEmitEvent): any {
console.log(event);
// load child async
if(event.node.origin.companyName){
if (event.node.origin.companyName) {
return new Promise<void>((resolve, reject) => {
reject()
resolve()
})
}
if (event.node.origin.level === 3 && !event.node.origin.companyName) {
if (event.node.origin.level === 'squadron' && !event.node.origin.companyName) {
const node = event.node;
console.log(node?.getChildren())
console.log(888)
if (node?.getChildren().length === 0) {
this.loadNode(event.node.origin.id).then(data => {
node.addChildren(data);

2
src/styles.scss

@ -222,6 +222,8 @@ app-root {
align-items: center;
justify-content: center;
z-index: 999;
left: 0;
top: 0;
}
#setPosition {

Loading…
Cancel
Save