Browse Source

[完善]接受任务页面

非煤矿山灾害智能感知和预警系统
邵佳豪 3 years ago
parent
commit
2e98f75e5a
  1. 4
      angular.json
  2. 2
      src/app/home/task/station-task-apply/station-task-apply.component.scss
  3. 2
      src/app/home/task/station-task-apply/station-task-apply.component.ts
  4. 184
      src/app/home/task/station-weekly-plan/station-weekly-plan.component.html
  5. 46
      src/app/home/task/station-weekly-plan/station-weekly-plan.component.scss
  6. 233
      src/app/home/task/station-weekly-plan/station-weekly-plan.component.ts

4
angular.json

@ -51,8 +51,8 @@
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
"maximumWarning": "20kb",
"maximumError": "20kb"
}
],
"fileReplacements": [{

2
src/app/home/task/station-task-apply/station-task-apply.component.scss

@ -204,7 +204,7 @@
}
.flexcolassistant {
flex: 2;
flex: 1.5;
overflow: hidden;
.assistant {

2
src/app/home/task/station-task-apply/station-task-apply.component.ts

@ -48,12 +48,10 @@ export class StationTaskApplyComponent implements OnInit {
selectedTime
selectMonth(item) {
this.selectedMonth = item.id
this.getTaskList()
}
selectYear(e) {
this.selectedYear = e
console.log('年', e)
this.getTaskList()
}

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

@ -1,12 +1,12 @@
<!-- <p>生成周计划</p> -->
<div class="box">
<!-- <p>生成周计划 协同工作任务</p> -->
<div class="box weeklyplan">
<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>
@ -24,6 +24,9 @@
<div class="instrumentpanel">
<div class="instrumentpanelitem" *ngFor="let item of cardData"
[ngClass]="{'instrumentpanelitemopen': isExpand,'instrumentpanelitemclose': !isExpand}">
<div class="spin" *ngIf="item.isloading">
<nz-spin nzSimple></nz-spin>
</div>
<div class="itemone" *ngIf="!item.isDetails">
<div class="instrumentpanelitemleft">
<div class="panelheadername" [style]="'background:'+ item.background">
@ -37,7 +40,7 @@
style="vertical-align: text-top;cursor: pointer;" nz-icon nzType="right-circle"
nzTheme="outline"></i>
</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;">{{item.scale}}</p>
</div>
<button *ngIf="isExpand" nz-button class="btn">一键通过</button>
</div>
@ -54,18 +57,22 @@
nzTheme="outline"></i>返回</span>
</p>
<div class="itemtwocontent">
<div class="itemtwocontentitem">
<div class="itemtwocontentitem" *ngFor="let i of item.data">
<p class="itemtwocontentitemp1">
<span class="itemtwocontentitemp1name">济南历下森豪室内娱乐场</span>
<span>
<span class="green" style="margin-right: 5px;" *ngIf="isExpand">接受</span>
<span class="blue" *ngIf="isExpand">拒绝</span>
<span class="itemtwocontentitemp1name">{{i.company.companyName}}</span>
<span class="marginr5">
<span class="green" *ngIf="isExpand" (click)="accept(i,item)">接受</span>
<span class="blue" *ngIf="isExpand" (click)="reject(i,item)">拒绝</span>
<span class="green" *ngIf="isExpand && i.approvalStatus == '通过'">已通过</span>
<span class="red" *ngIf="isExpand && i.approvalStatus == '驳回'">已驳回</span>
</span>
</p>
<p>A消防救援站</p>
<p>
<span class="green" style="margin-right: 5px;" *ngIf="!isExpand">接受</span>
<span class="blue" *ngIf="!isExpand">拒绝</span>
<p>{{i.organization.name}}</p>
<p class="marginr5">
<span class=" green" *ngIf="!isExpand" (click)="accept(i,item)">接受</span>
<span class="blue" *ngIf="!isExpand" (click)="reject(i,item)">拒绝</span>
<span class="green" *ngIf="!isExpand && i.approvalStatus == '通过'">已通过</span>
<span class="red" *ngIf="!isExpand && i.approvalStatus == '驳回'">已驳回</span>
</p>
</div>
</div>
@ -76,48 +83,52 @@
<!-- 救援站列表 -->
<div class="stationcardlistbox">
<div class="stationcardlistitembox" *ngFor="let item of stationData">
<div class="stationcardlistitembox" *ngFor="let element of stationData">
<div class="stationcardlistitem">
<div class="spin" *ngIf="element.isLoading">
<nz-spin nzSimple></nz-spin>
</div>
<div class="header">
<span style="width: 16%;">
<span style="width: 16%;margin-left: 20px;">
<img src="../../../../assets//images/icon/station.png" alt="">
{{item.name}}
{{element.name}}
</span>
<span style="width: 8%;">单位总数: 7/8</span>
<div style="width: 66%;" class="progress progresssquare">
<div style="width: 63%;" 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>
<button nz-button nzType="primary">{{isSupervisor ? '协同任务' : '生成周计划'}}</button>
<span (click)="expandcarditem(element)" class="expand blue">
{{element.isExpand ? '收起' :'展开'}}
<i nz-icon [nzType]="element.isExpand ? 'down' : 'up'" nzTheme="outline"></i>
</span>
</div>
<div class="maincontent" *ngIf="item.isExpand">
<div class="maincontentitem">
<div class="maincontent" *ngIf="element.isExpand">
<div class="maincontentitem" *ngFor="let item of element.data">
<div class="maincontentitemleft">
<div class="panelheadername panelheadernameor">
<img src="'../../../../assets/images/icon/huodong.png" alt="">
重大活动
<div class="panelheadername" [style]="'background:'+ item.background">
<img [src]="'../../../../assets/images/icon/'+ item.icon" alt="">
{{item.name}}
</div>
<div class="num">
<div class="round" style="background: #2C4DC0;"></div>
<span class="word">已分配</span>
<span class="boldspan">1</span>
<span class="boldspan">0</span>
</div>
<div class="num">
<div class="round" style="background: #42B983;"></div>
<span class="word">已完成</span>
<span class="boldspan">1</span>
<span class="boldspan">0</span>
</div>
</div>
<div class="maincontentitemright">
<div class="maincontentitemrightitem">
<div class="maincontentitemrightitem" *ngFor="let i of item.data">
<div class="flexcol namebox">
<span>
尬粒酒店管理有限公司济南泺文路分公司
{{i.company.companyName}}
</span>
<span>
单位名称
@ -125,7 +136,7 @@
</div>
<div class="flexcol">
<span>
重点单位
{{i.company.useNature}}
</span>
<span>
级别
@ -133,102 +144,55 @@
</div>
<div class="flexcol">
<span>
历下区A消防救援站
{{i.organization.name}}
</span>
<span>
责任机构
主负责人
</span>
</div>
<div class="flexcol">
<span>
历下区B消防救援站
</span>
<span>
协助机构
<div class="flexcol flexcolassistant">
<span class="assistant" nz-tooltip [nzTooltipTitle]="titleTemplate">
<span *ngFor="let o of i.supervisors">
<img *ngIf="o.posts && o.posts[0] == '主查人员'"
src="../../../../assets/images/icon/main.png" alt="">
<img *ngIf="o.posts && o.posts[0] == '协查人员'"
src="../../../../assets/images/icon/assist.png" alt="">
{{o.name}}
</span>
</span>
<ng-template #titleTemplate let-thing>
<span style="margin-right: 6px;" *ngFor="let o of i.supervisors">
<img *ngIf="o.posts && o.posts[0] == '主查人员'"
src="../../../../assets/images/icon/main.png" alt="">
<img *ngIf="o.posts && o.posts[0] == '协查人员'"
src="../../../../assets/images/icon/assist.png" alt="">
{{o.name}}
</span>
</ng-template>
<span>
协助人员
</span>
</div>
<div class="flexcol">
<span>
<label nz-radio ngModel [ngModel]="xxx"
(click)="radioChange($event)">宣传</label>
<label nz-radio ngModel (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 class="maincontentitemrightitem">
<div class="flexcol namebox">
<span>
尬粒酒店管理有限公司济南泺文路分公司
</span>
<span>
单位名称
</span>
</div>
<div class="flexcol">
<span>
重点单位
<nz-date-picker nzPlaceHolder="请选择检查日期" nzBorderless></nz-date-picker>
</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 class="btnbox">
聊天
</div> -->
</div>
</div>
</div>
</div>

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

@ -65,7 +65,7 @@
opacity: 1;
border: 1px solid #E4E7EC;
display: flex;
position: relative;
.itemone {
width: 100%;
@ -193,6 +193,7 @@
height: 260px;
margin-bottom: 18px;
margin-right: 8px;
.itemone {
.instrumentpanelitemleft {
padding: 26px 0 26px 10%;
@ -205,6 +206,7 @@
height: 200px;
margin-bottom: 0px;
margin-right: 1%;
.itemone {
.instrumentpanelitemleft {
padding: 15px 0 15px 10%;
@ -228,7 +230,7 @@
border: 1px solid #E4E7EC;
color: #303133;
box-sizing: border-box;
padding: 0 18px;
position: relative;
.header {
width: 100%;
@ -265,6 +267,7 @@
border-radius: 4px 4px 4px 4px;
border: 1px solid #42B983;
display: flex;
margin: 10px 20px;
}
.maincontentitemleft {
@ -331,6 +334,9 @@
border-bottom: 1px dashed #C7CAD0;
div {
flex: 1;
}
.flexcol {
display: flex;
@ -340,7 +346,7 @@
span:nth-child(1) {
color: #303133;
margin-bottom: 8px;
// margin-bottom: 8px;
}
span:nth-child(2) {
@ -348,8 +354,34 @@
}
}
.flexcolassistant {
flex: 2;
overflow: hidden;
.assistant {
display: flex;
width: 100%;
span {
color: #303133;
margin-right: 6px;
}
img {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.namebox {
width: 28%;
flex: 2;
}
.progressbox {
@ -381,3 +413,9 @@
width: 100%;
border-top: 1px dashed #C7CAD0;
}
.marginr5 {
span {
margin-right: 5px;
}
}

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

@ -12,27 +12,35 @@ import { TreeService } from 'src/app/service/tree.service';
})
export class StationWeeklyPlanComponent implements OnInit {
constructor() { }
constructor(private http: HttpClient, private modal: NzModalService, private message: NzMessageService) { }
OrganizationId
userId
isSupervisor
ngOnInit(): void {
}
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.getTaskList()
}
selectYear(e) {
this.selectedYear = e
// this.getTaskList()
}
isExpand = true
@ -43,33 +51,194 @@ export class StationWeeklyPlanComponent implements OnInit {
formatOne = (percent: number): string => `${percent}%\n完成率`;
cardData = [
{ name: '双随机', isDetails: false, background: '#1D9DFF', icon: 'suiji.png' },
{ name: '行政许可', isDetails: false, background: '#42B983', icon: 'xuke.png' },
{ name: '熟悉演练', isDetails: false, background: '#9D80FF', icon: 'yanlian.png' },
{ name: '联络指导', isDetails: false, background: '#5483EA', icon: 'zhidao.png' },
{ name: '消防宣传', isDetails: false, background: '#FF5D2A', icon: 'xuanchuan.png' },
{ name: '投诉举报', isDetails: false, background: '#5087FF', icon: 'tousu.png' },
{ name: '火灾调查', isDetails: false, background: '#FF404D', icon: 'huozai.png' }
]
openDetails(data, type) {
data.isDetails = type
}
xxx = false
radioChange(e) {
radioChange(e) {
setTimeout(() => {
this.xxx = !this.xxx
}, 0);
}
stationData = []
//获得辖区下所有救援站
totalCount: string
allOrList: any
getAllStation() {
let params = {
ContainsChildren: true,
pageSize: 9999
}
this.http.get('/api/Organizations', {
params: params
}).subscribe((data: any) => {
this.totalCount = data.totalCount
data.items = data.items.filter(element => {
return element.level == 'squadron'
});
data.items.forEach(element => {
element.isExpand = false
element.isLoading = false
});
this.stationData = data.items
})
}
stationData = [
{ name: '历下区A消防救援站', isExpand: true },
{ name: '历下区B消防救援站', isExpand: false },
{ name: '历下区C消防救援站', isExpand: false }
cardData = [
{ name: '双随机', isDetails: true, isloading: false, background: '#1D9DFF', icon: 'suiji.png', scale: '0/0', data: [] },
{ name: '行政许可', isDetails: false, isloading: false, background: '#42B983', icon: 'xuke.png', scale: '0/0', data: [] },
{ name: '熟悉演练', isDetails: false, isloading: false, background: '#9D80FF', icon: 'yanlian.png', scale: '0/0', data: [] },
{ name: '联络指导', isDetails: false, isloading: false, background: '#5483EA', icon: 'zhidao.png', scale: '0/0', data: [] },
{ name: '消防宣传', isDetails: false, isloading: false, background: '#FF5D2A', icon: 'xuanchuan.png', scale: '0/0', data: [] },
{ name: '投诉举报', isDetails: false, isloading: false, background: '#5087FF', icon: 'tousu.png', scale: '0/0', data: [] },
{ name: '火灾调查', isDetails: false, isloading: false, background: '#FF404D', icon: 'huozai.png', scale: '0/0', data: [] }
]
isloading = false
PageNumber = 1
PageSize = 9999
getTaskList() {
this.isloading = true
let selectedTime = this.selectedYear + '-' + this.selectedMonth + '-' + '01'
let params = {
Month: selectedTime,
// OrganizationId: this.isSupervisor ? this.OrganizationId : "",
SupervisorId: this.userId,
PageNumber: this.PageNumber,
PageSize: this.PageSize
}
this.http.get('/api/PlanTasks', {
params: params
}).subscribe((data: any) => {
this.isloading = false
// console.log('任务申请列表', data.items);
data.items.forEach(element => {
this.cardData.forEach((item, key) => {
element.taskType == item.name ? this.cardData[key].data.push(element) : null
});
});
// console.log('并入卡片数据', this.cardData)
})
}
//接受任务
accept(i, item) {
this.modal.confirm({
nzTitle: `确定要接受该任务吗?`,
nzOkText: '确定',
nzOkType: 'default',
nzOnOk: () => {
item.isloading = true
this.http.post(`/api/PlanTasks/Approval/${i.id}`, null, {
params: {
approvalStatus: '通过'
}
}).subscribe({
next: (data) => {
this.message.create('success', '已接受');
i.approvalStatus = '通过'
item.isloading = false
},
error: (err) => {
this.message.create('warning', '接受失败');
item.isloading = false
}
})
},
nzCancelText: '取消'
});
}
//拒绝任务
reject(i, item) {
this.modal.confirm({
nzTitle: `确定要拒绝该任务吗?`,
nzOkText: '确定',
nzOkType: 'default',
nzOnOk: () => {
item.isloading = true
this.http.post(`/api/PlanTasks/Approval/${i.id}`, null, {
params: {
approvalStatus: '驳回'
}
}).subscribe({
next: (data) => {
this.message.create('success', '已拒绝');
i.approvalStatus = '驳回'
item.isloading = false
},
error: (err) => {
this.message.create('warning', '拒绝失败');
item.isloading = false
}
})
},
nzCancelText: '取消'
});
}
ngOnInit(): void {
this.OrganizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId
this.userId = JSON.parse(sessionStorage.getItem('userData')).id
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.getAllStation()
this.getTaskList()
}
expandcarditem(item) {
item.isExpand = !item.isExpand
console.log(item)
if (item.isExpand) {
let selectedTime = this.selectedYear + '-' + this.selectedMonth + '-' + '01'
let params = {
Month: selectedTime,
CompanyOrganizationId: item.id,
PageNumber: this.PageNumber,
approvalStatuses: '通过',
PageSize: this.PageSize
}
item.isLoading = true
this.http.get('/api/PlanTasks', {
params: params
}).subscribe({
next: (data: any) => {
item.isLoading = false
let listData = [
{ name: '双随机', background: '#1D9DFF', icon: 'suiji.png', scale: '0/0', data: [] },
{ name: '行政许可', background: '#42B983', icon: 'xuke.png', scale: '0/0', data: [] },
{ name: '熟悉演练', background: '#9D80FF', icon: 'yanlian.png', scale: '0/0', data: [] },
{ name: '联络指导', background: '#5483EA', icon: 'zhidao.png', scale: '0/0', data: [] },
{ name: '消防宣传', background: '#FF5D2A', icon: 'xuanchuan.png', scale: '0/0', data: [] },
{ name: '投诉举报', background: '#5087FF', icon: 'tousu.png', scale: '0/0', data: [] },
{ name: '火灾调查', background: '#FF404D', icon: 'huozai.png', scale: '0/0', data: [] }
]
data.items.forEach(element => {
listData.forEach((item, key) => {
element.taskType == item.name ? listData[key].data.push(element) : null
});
});
for (let index = 0; index < listData.length; index++) {
const element = listData[index];
if (element.data.length == 0) {
listData.splice(index, 1)
index--
}
}
item.data = listData
console.log('点击的救援站通过数据', item)
},
error: (err) => {
this.message.create('warning', '获取数据失败');
item.isLoading = false
}
})
}
}
}

Loading…
Cancel
Save