[完善]救援站和检查员的任务申请页面

src/app/home/home.module.ts

@@ -57,6 +57,7 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { AllotPersonComponent } from './task/da-subordinate-audit/allot-person/allot-person.component';
 import { ChangePasswordComponent } from './change-password/change-password.component';
 import { NzUploadModule } from 'ng-zorro-antd/upload';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 @NgModule({
   declarations: [
     NavComponent,
@@ -119,7 +120,8 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
     NzRadioModule,
     NzDatePickerModule,
     NzSpinModule,
-    NzUploadModule
+    NzUploadModule,
+    NzToolTipModule
   ],
   entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent, ApplyComponent, ApplyLookComponent, LookTaskComponent, AllotPersonComponent]
 })

src/app/home/nav/nav.component.ts

@@ -17,7 +17,7 @@ export class NavComponent implements OnInit {
   ngOnInit(): void {
     //调用服务中的function刷新token
     this.token.startUp()
-    this.user=JSON.parse(sessionStorage.getItem('userData')).organizationName
+    this.user=JSON.parse(sessionStorage.getItem('userData')).name
   }
   signOut() {
     this.router.navigate(['/login'])

src/app/home/task/station-task-apply/apply-look/apply-look.component.html

@@ -2,5 +2,13 @@
 
     <p>任务名称: {{data.taskName}}</p>
     <p>单位名称: {{data.company.companyName}}</p>
-    <p>协助机构: {{data.assitantOrganization.name}}</p>
+    <p>协助人员:
+        <span *ngFor="let i of data.supervisors">
+            <img *ngIf="i.posts && i.posts[0] == '主查人员'" src="../../../../assets/images/icon/main.png"
+                alt="">
+            <img *ngIf="i.posts && i.posts[0] == '协查人员'" src="../../../../assets/images/icon/assist.png"
+                alt="">
+            {{i.name}}
+        </span>
+    </p>
 </div>

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

@@ -15,6 +15,8 @@ export class ApplyComponent implements OnInit {
   @Input() nodes?: any;
   @Input() supervisorList?: any;
   @Input() organizationList?: any;
+  @Input() users?: any;
+
   validateForm!: FormGroup;
   constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
 
@@ -26,8 +28,9 @@ export class ApplyComponent implements OnInit {
       unitname: [null, [Validators.required]],
       organization: [null, [Validators.required]]
     });
-    let arr = [...this.supervisorList, ...this.organizationList]
+    // let arr = [...this.supervisorList, ...this.organizationList]
-    this.newTree = this.toTree.toTree(arr)
+    // this.newTree = this.toTree.toTree(arr)
+    this.newTree =  this.nodes
   }
 
   destroyModal(): void {

src/app/home/task/station-task-apply/station-task-apply.component.html

@@ -81,10 +81,11 @@
                             nzTheme="outline"></i>申请</button>
                 </div>
                 <div class="tablebox">
-                    <div class="tableboxitem">
+                    <div class="tableboxitem" *ngFor="let item of taskLIst"
+                        [ngClass]="{'greenborder': item.approvalStatus == '通过','redborder': item.approvalStatus == '驳回'}">
                         <div class="flexcol tasknamebox">
                             <span>
-                                熟悉演练
+                                {{item.taskName}}
                             </span>
                             <span>
                                 任务名称
@@ -92,7 +93,7 @@
                         </div>
                         <div class="flexcol unitnamebox">
                             <span>
-                                尬粒酒店管理有限公司济南泺文路分公司
+                                {{item.company.companyName}}
                             </span>
                             <span>
                                 单位名称
@@ -100,7 +101,7 @@
                         </div>
                         <div class="flexcol">
                             <span>
-                                重点单位
+                                {{item.company.useNature}}
                             </span>
                             <span>
                                 级别
@@ -108,18 +109,33 @@
                         </div>
                         <div class="flexcol">
                             <span>
-                                历下区A消防救援站
+                                {{item.organization.name}}
                             </span>
                             <span>
                                 主负责人
                             </span>
                         </div>
-                        <div class="flexcol">
+                        <div class="flexcol flexcolassistant">
-                            <span>
+                            <span class="assistant" nz-tooltip [nzTooltipTitle]="titleTemplate">
-                                历下区B消防救援站
+                                <span *ngFor="let i of item.supervisors">
-                            </span>
+                                    <img *ngIf="i.posts && i.posts[0] == '主查人员'" src="../../../../assets/images/icon/main.png"
-                            <span>
+                                        alt="">
-                                协助机构
+                                    <img *ngIf="i.posts && i.posts[0] == '协查人员'" src="../../../../assets/images/icon/assist.png"
+                                        alt="">
+                                    {{i.name}}
+                                </span>
+                            </span>
+                            <ng-template #titleTemplate let-thing>
+                                <span style="margin-right: 6px;" *ngFor="let i of item.supervisors">
+                                    <img *ngIf="i.posts && i.posts[0] == '主查人员'" src="../../../../assets/images/icon/main.png"
+                                        alt="">
+                                    <img *ngIf="i.posts && i.posts[0] == '协查人员'" src="../../../../assets/images/icon/assist.png"
+                                        alt="">
+                                    {{i.name}}
+                                </span>
+                            </ng-template>
+                            <span>
+                                协助人员
                             </span>
                         </div>
                         <div class="flexcol">
@@ -132,14 +148,18 @@
                         </div>
                         <div class="flexcol">
                             <span>
-                                <img src="../../../../assets/images/icon/agree.png" alt="">
+                                <img *ngIf="item.approvalStatus == '通过'" src="../../../../assets/images/icon/agree.png"
+                                    alt="">
+                                <img *ngIf="item.approvalStatus == '驳回'" src="../../../../assets/images/icon/reject.png"
+                                    alt="">
+                                <span *ngIf="item.approvalStatus == '待处理'">待处理</span>
                             </span>
                             <span>
                                 结果
                             </span>
                         </div>
                         <div class="flexcol">
-                            <span>
+                            <span class="blue" (click)="look(item)">
                                 查看
                             </span>
                             <span>

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

@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
   .informbox {
     width: 100%;
     height: 60px;
@@ -25,6 +26,7 @@
         display: flex;
         align-items: center;
         margin-right: 20px;
+
         img {
           margin: 0 20px;
         }
@@ -144,6 +146,7 @@
     display: flex;
     flex-direction: column;
     overflow-y: auto;
+
     .applybtn {
       align-self: flex-start;
       margin: 18px 0;
@@ -163,6 +166,7 @@
         justify-content: space-around;
         padding-left: 80px;
         margin-bottom: 10px;
+
         div {
           flex: 1;
 
@@ -196,6 +200,29 @@
           span:nth-child(2) {
             color: #C7CAD0;
           }
+
+        }
+
+        .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;
+          }
         }
 
         .unitnamebox {
@@ -203,6 +230,16 @@
         }
 
       }
+
+      .greenborder {
+
+        border: 1px solid #42B983;
+      }
+
+      .redborder {
+
+        border: 1px solid #FF9203;
+      }
     }
 
     .operation {

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

@@ -7,6 +7,7 @@ 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';
+import { ThisReceiver } from '@angular/compiler';
 
 
 @Component({
@@ -67,7 +68,7 @@ export class StationTaskApplyComponent implements OnInit {
   totalCount
   PageNumber = 1
   PageSize = 10
-  taskLIst = [1, 1, 1]
+  taskLIst = []
   getTaskList() {
     this.isloading = true
     let selectedTime = this.selectedYear + '-' + this.selectedMonth + '-' + '01'
@@ -78,6 +79,7 @@ export class StationTaskApplyComponent implements OnInit {
       CompanyName: this.searchForm.unitname,
       AssitantOrganizationId: this.searchForm.or,
       PageNumber: this.PageNumber,
+      CreatorId: this.userId,
       PageSize: this.PageSize
     }
     this.http.get('/api/PlanTasks', {
@@ -114,6 +116,7 @@ export class StationTaskApplyComponent implements OnInit {
   defaultOrId: string
   //获取所有组织机构
   organizationList: any
+  organizationListAll: any
   nodes: any = []
   async getAllOrganization() {
     let params = {
@@ -130,7 +133,7 @@ export class StationTaskApplyComponent implements OnInit {
           element.disableCheckbox = true
           element.selectable = false
         });
-
+        this.organizationListAll = JSON.parse(JSON.stringify(data.items))
         this.organizationList = JSON.parse(JSON.stringify(data.items)).filter(item => {
           return item.level != 'squadron'
         })
@@ -159,8 +162,38 @@ export class StationTaskApplyComponent implements OnInit {
     })
     return p
   }
+
+  //获得除了检查员的其他用户
+  users
+  async getUsers() {
+    var p = 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)
+      })
+    })
+    return p
+  }
+
+  userId
   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
@@ -168,10 +201,11 @@ export class StationTaskApplyComponent implements OnInit {
     isSupervisor ? this.isSupervisor = true : this.isSupervisor = false
     this.selectedMonth = new Date().getMonth() + 1
     this.getTaskList()
-    Promise.all([this.getAllOrganization(), this.getSupervisor()])
+    Promise.all([this.getAllOrganization(), this.getSupervisor(), this.getUsers()])
       .then((results) => {
         if (this.isSupervisor) {
-
+          let arr = [...this.users, ...this.organizationListAll]
+          this.nodes = this.toTree.toTree(JSON.parse(JSON.stringify(arr)))
         } else {
           let arr = [...this.supervisorList, ...this.organizationList]
           this.nodes = this.toTree.toTree(JSON.parse(JSON.stringify(arr)))
@@ -234,9 +268,10 @@ export class StationTaskApplyComponent implements OnInit {
       nzMaskClosable: false,
       nzComponentParams: {
         title: this.isSupervisor ? ["联络指导", "双随机"] : ["熟悉演练"],
-        nodes: this.nodes,
         supervisorList: JSON.parse(JSON.stringify(this.supervisorList)),
-        organizationList: JSON.parse(JSON.stringify(this.organizationList))
+        organizationList: JSON.parse(JSON.stringify(this.organizationList)),
+        users: JSON.parse(JSON.stringify(this.users)),
+        nodes: JSON.parse(JSON.stringify(this.nodes))
       },
       nzOnOk: async () => {
         console.log(instance.validateForm.value)
@@ -244,9 +279,11 @@ export class StationTaskApplyComponent implements OnInit {
           await new Promise((resolve, reject) => {
             let body = {
               taskName: instance.validateForm.value.taskname,
-              organizationId: this.OrganizationId,
+              taskType: instance.validateForm.value.taskname,
               companyId: instance.validateForm.value.unitname,
-              assitantOrganizationId: instance.validateForm.value.organization,
+              organizationId: this.OrganizationId,
+              supervisorIds: instance.validateForm.value.organization,
+              approvalStatus: '待处理'
             }
             this.http.post('/api/PlanTasks', body).subscribe({
               next: (data) => {
@@ -284,39 +321,29 @@ export class StationTaskApplyComponent implements OnInit {
       nzComponentParams: {
         data: item,
       },
-      nzFooter: null,
+      nzFooter: null
-      nzOnOk: async () => {
-        if (instance.validateForm.valid) {
-          await new Promise(resolve => {
-            let roleNames = [...instance.validateForm.value.role, ...instance.validateForm.value.role2]
-            let body = {
-              userName: instance.validateForm.value.account,
-              name: instance.validateForm.value.name,
-              organizationUnitId: Number(instance.validateForm.value.organization),
-              roleNames: roleNames,
-              phoneNumber: instance.validateForm.value.phonenum,
-              isActive: true
-            }
-            // this.http.post(this.addUrl, body).subscribe(data => {
-            //   resolve(data)
-            //   this.message.create('success', '创建成功！');
-            //   this.SkipCount = 0
-            //   this.getAllUsers()
-            //   return true
-            // }, err => {
-            //   resolve(err)
-            //   this.message.create('warning', err.error.error.message);
-            //   return false
-            // })
-          })
-        } 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));
   }
+
+}
+
+export enum ApprovalStatus {
+  未派发 = 0,
+  待处理 = 1,
+  通过 = 2,
+  驳回 = 3,
+  待检查 = 4,
+  已检查 = 5,
 }
+export enum TaskType {
+  双随机,
+  熟悉演练,
+  投诉举报,
+  行政许可,
+  联络指导,
+  消防宣传,
+  火灾调查
+}

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

@@ -1,60 +1,242 @@
 <!-- <p>生成周计划</p> -->
-<div class="box weeklyplan">
+<div class="box">
-    <div class="fffbox">
+    <div class="timebox">
-        <div class="header">
+        <nz-select ngModel="2022">
-            <span>
+            <nz-option nzValue="2021" nzLabel="2021年"></nz-option>
-                申请周计划
+            <nz-option nzValue="2022" nzLabel="2022年"></nz-option>
-            </span>
+        </nz-select>
-            <span style="font-size: 14px; color: #42B983;">
+        <div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)"
-                <i nz-icon nzType="info-circle" nzTheme="outline"></i>
+            [ngClass]="{'selectedMonth': item.name == selectedMonth}">
-                任务申请已开始！剩余时间 3天13小时 / 生成周计划已开始！剩余时间 23:54:03
+            {{item.name}}
-            </span>
         </div>
-        <div class="content">
+    </div>
-            <div class="tablebox">
+
-                <nz-table nzBordered #basicTable [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false'
+    <div style="flex: 1;overflow-y: auto;">
-                    [nzPageSize]='16'>
+        <!-- 上部仪表盘 -->
-                    <thead>
+        <div class="instrumentpanelbox">
-                        <tr>
+            <div class="instrumentpanelheader">
-                            <th [width]="'10%'">任务类型</th>
+                <span>本级部署</span>
-                            <th [width]="'25%'">单位名称</th>
+                <span (click)="expand()" class="expand blue">
-                            <th>单位级别</th>
+                    {{isExpand ? '收起' :'展开'}}
-                            <th>检查人</th>
+                    <i nz-icon [nzType]="isExpand ? 'down' : 'up'" nzTheme="outline"></i>
-                            <th>消防负责人</th>
+                </span>
-                            <th>联系电话</th>
+            </div>
-                            <th [width]="'15%'">操作</th>
+            <div class="instrumentpanel">
-                        </tr>
+                <div class="instrumentpanelitem" *ngFor="let item of cardData"
-                    </thead>
+                    [ngClass]="{'instrumentpanelitemopen': isExpand,'instrumentpanelitemclose': !isExpand}">
-                    <tbody>
+                    <div class="itemone" *ngIf="!item.isDetails">
-                        <tr *ngFor="let item of basicTable.data">
+                        <div class="instrumentpanelitemleft">
-                            <td>双随机</td>
+                            <div class="panelheadername" [style]="'background:'+ item.background">
-                            <td nzBreakWord>上海雅特酒店管理有限公司济南泺文路分公司</td>
+                                <img [src]="'../../../../assets/images/icon/'+ item.icon" alt="">
-                            <td>
+                                {{item.name}}
-                                一般单位
+                            </div>
-                            </td>
+                            <div class="tasknum">
-                            <td>
+                                <p>
-                                张三三
+                                    <span style="margin-right: 6px;">任务分配</span>
-                            </td>
+                                    <i (click)="openDetails(item,true)"
-                            <td>
+                                        style="vertical-align: text-top;cursor: pointer;" nz-icon nzType="right-circle"
-                                张三三
+                                        nzTheme="outline"></i>
-                            </td>
+                                </p>
-                            <td>
+                                <p style="font-weight: 900;font-size: 36px;text-align: left;">5/9</p>
-                                15022667845
+                            </div>
-                            </td>
+                            <button *ngIf="isExpand" nz-button class="btn">一键通过</button>
-                            <td class="operation">
+                        </div>
-                                <!-- <span>检查时间 </span> -->
+                        <div class="instrumentpanelitemright" *ngIf="isExpand">
-                                <nz-date-picker nzPlaceHolder="请选择检查日期" nzBorderless></nz-date-picker>
+                            <nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne"
-                            </td>
+                                nzStrokeColor="#42B983">
-                        </tr>
+                            </nz-progress>
-                    </tbody>
+                        </div>
-                </nz-table>
+                    </div>
+                    <div class="itemtwo" *ngIf="item.isDetails">
+                        <p class="itemtwotitle">
+                            <span>{{item.name}}</span>
+                            <span class="back" (click)="openDetails(item,false)"><i nz-icon nzType="rollback"
+                                    nzTheme="outline"></i>返回</span>
+                        </p>
+                        <div class="itemtwocontent">
+                            <div class="itemtwocontentitem">
+                                <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>
+                                </p>
+                                <p>A消防救援站</p>
+                                <p>
+                                    <span class="green" style="margin-right: 5px;" *ngIf="!isExpand">接受</span>
+                                    <span class="blue" *ngIf="!isExpand">拒绝</span>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="pagination">
+        </div>
-                <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16"
+
-                    [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
+        <!-- 救援站列表 -->
-                </nz-pagination>
+        <div class="stationcardlistbox">
-                <ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template>
+            <div class="stationcardlistitembox" *ngFor="let item of stationData">
+                <div class="stationcardlistitem">
+                    <div class="header">
+                        <span style="width: 16%;">
+                            <img src="../../../../assets//images/icon/station.png" alt="">
+                            {{item.name}}
+                        </span>
+                        <span style="width: 8%;">单位总数: 7/8</span>
+                        <div style="width: 66%;" class="progress progresssquare">
+                            <span>完成进度</span>
+                            <nz-progress nzStrokeLinecap="square" nzStrokeWidth="16" nzStrokeColor="#42B983"
+                                [nzPercent]="30"></nz-progress>
+                        </div>
+                        <button nz-button nzType="primary">任务下派</button>
+                        <span (click)="expandcarditem(item)" class="expand blue">
+                            {{item.isExpand ? '收起' :'展开'}}
+                            <i nz-icon [nzType]="item.isExpand ? 'down' : 'up'" nzTheme="outline"></i>
+                        </span>
+                    </div>
+                    <div class="maincontent" *ngIf="item.isExpand">
+                        <div class="maincontentitem">
+                            <div class="maincontentitemleft">
+                                <div class="panelheadername panelheadernameor">
+                                    <img src="'../../../../assets/images/icon/huodong.png" alt="">
+                                    重大活动
+                                </div>
+                                <div class="num">
+                                    <div class="round" style="background: #2C4DC0;"></div>
+                                    <span class="word">已分配</span>
+                                    <span class="boldspan">1</span>
+                                </div>
+                                <div class="num">
+                                    <div class="round" style="background: #42B983;"></div>
+                                    <span class="word">已完成</span>
+                                    <span class="boldspan">1</span>
+                                </div>
+                            </div>
+                            <div class="maincontentitemright">
+                                <div class="maincontentitemrightitem">
+                                    <div class="flexcol namebox">
+                                        <span>
+                                            尬粒酒店管理有限公司济南泺文路分公司
+                                        </span>
+                                        <span>
+                                            单位名称
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            重点单位
+                                        </span>
+                                        <span>
+                                            级别
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            历下区A消防救援站
+                                        </span>
+                                        <span>
+                                            责任机构
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            历下区B消防救援站
+                                        </span>
+                                        <span>
+                                            协助机构
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            <label nz-radio ngModel [ngModel]="xxx"
+                                                (click)="radioChange($event)">宣传</label>
+                                        </span>
+                                        <span>
+                                            同步工作
+                                        </span>
+                                    </div>
+                                    <div class="flexcol progressbox progresssquare">
+                                        <span>
+                                            <nz-progress style="width: 200px;" nzStrokeLinecap="square"
+                                                nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30">
+                                            </nz-progress>
+                                        </span>
+                                        <span>
+                                            进度
+                                        </span>
+                                    </div>
+                                    <div class="btnbox">
+                                        <button nz-button nzType="primary">提交审核</button>
+                                        <button style="margin-left: 12px;" nz-button nzType="primary">取消</button>
+                                    </div>
+                                </div>
+                                <div class="maincontentitemrightitem">
+                                    <div class="flexcol namebox">
+                                        <span>
+                                            尬粒酒店管理有限公司济南泺文路分公司
+                                        </span>
+                                        <span>
+                                            单位名称
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            重点单位
+                                        </span>
+                                        <span>
+                                            级别
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            历下区A消防救援站
+                                        </span>
+                                        <span>
+                                            责任机构
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            历下区B消防救援站
+                                        </span>
+                                        <span>
+                                            协助机构
+                                        </span>
+                                    </div>
+                                    <div class="flexcol">
+                                        <span>
+                                            <label nz-radio ngModel [ngModel]="xxx"
+                                                (click)="radioChange($event)">宣传</label>
+                                        </span>
+                                        <span>
+                                            同步工作
+                                        </span>
+                                    </div>
+                                    <div class="flexcol progressbox progresssquare">
+                                        <span>
+                                            <nz-progress style="width: 200px;" nzStrokeLinecap="square"
+                                                nzStrokeWidth="16" nzStrokeColor="#42B983" [nzPercent]="30">
+                                            </nz-progress>
+                                        </span>
+                                        <span>
+                                            进度
+                                        </span>
+                                    </div>
+                                    <div class="btnbox">
+                                        <button nz-button nzType="primary">提交审核</button>
+                                        <button style="margin-left: 12px;" nz-button nzType="primary">取消</button>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
+        <!--  -->
+        <div class="cutoffrule"></div>
     </div>
+
 </div>

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

@@ -1,52 +1,383 @@
 .box {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
 
-  color: #303133;
+.timebox {
+  width: 100%;
+  height: 68px;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
 
+  border-bottom: 1px dashed #C7CAD0;
 
-  .fffbox {
+  nz-select {
-    width: 100%;
+    margin-right: 16px;
-    height: 100%;
+    border-radius: 4px 4px 4px 4px;
+  }
+
+  .monthbtn {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
     background: #FFFFFF;
-    box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
     border-radius: 4px 4px 4px 4px;
     opacity: 1;
     border: 1px solid #E4E7EC;
-    display: flex;
+    color: #303133;
-    flex-direction: column;
+    margin-right: 16px;
+    cursor: pointer;
   }
 
+  .selectedMonth {
 
-  .header {
+    background: #2C4DC0;
-    width: 100%;
+    color: #FFFFFF;
-    height: 56px;
+  }
+}
+
+.instrumentpanelbox {
+  box-sizing: border-box;
+  padding: 18px;
+  color: #303133;
+
+  .instrumentpanelheader {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 20px;
+    margin-bottom: 15px;
-    border-bottom: 1px solid #E4E7EC;
+  }
 
-    span {
+  .instrumentpanel {
-      color: #303133;
+    display: flex;
-      font-weight: 500;
+    flex-wrap: wrap;
-      font-size: 16px;
+  }
+
+  .instrumentpanelitem {
+    background: #FFFFFF;
+    box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #E4E7EC;
+    display: flex;
+
+
+    .itemone {
+      width: 100%;
+      height: 100%;
+      display: flex;
+
+      .instrumentpanelitemleft {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: flex-start;
+        flex: 1;
+        box-sizing: border-box;
+
+
+        .panelheadername {
+          width: 80%;
+          height: 46px;
+          line-height: 46px;
+          text-align: center;
+          box-sizing: border-box;
+          border-radius: 6px 0px 6px 6px;
+          color: #fff;
+
+          img {
+            vertical-align: text-top;
+          }
+        }
+
+        .tasknum {
+          margin-left: 8px;
+
+          p {
+            margin: 0;
+          }
+        }
+
+        .btn {
+          margin-left: 8px;
+          width: 60%;
+          max-width: 96px;
+          height: 36px;
+          border-radius: 4px 4px 4px 4px;
+          background: #42B983;
+          color: white;
+          cursor: pointer;
+        }
+      }
+
+      .instrumentpanelitemright {
+        flex: 1;
+        display: flex;
+        align-items: center;
+
+        nz-progress {
+          margin-top: 65px;
+        }
+      }
+    }
+
+    .itemtwo {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      box-sizing: border-box;
+      padding: 16px;
+      flex-direction: column;
+      overflow: hidden;
+
+      .itemtwotitle {
+        display: flex;
+        justify-content: space-between;
+
+        .back {
+          cursor: pointer;
+
+          i {
+            margin-right: 3px;
+          }
+        }
+
+        margin-bottom: 0;
+      }
+
+      .itemtwocontent {
+        flex: 1;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+
+        .itemtwocontentitem {
+          border-bottom: 1px dashed #C7CAD0;
+          height: 70px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          align-items: flex-start;
+          box-sizing: border-box;
+          padding: 8px 0;
+
+          p {
+            margin-bottom: 0;
+          }
+
+          .itemtwocontentitemp1 {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            box-sizing: border-box;
+            padding-right: 5px;
+
+            .itemtwocontentitemp1name {
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .instrumentpanelitemopen {
+    width: 24.3%;
+    height: 260px;
+    margin-bottom: 18px;
+    margin-right: 8px;
+    .itemone {
+      .instrumentpanelitemleft {
+        padding: 26px 0 26px 10%;
+      }
+    }
+  }
+
+  .instrumentpanelitemclose {
+    width: 11.7%;
+    height: 200px;
+    margin-bottom: 0px;
+    margin-right: 1%;
+    .itemone {
+      .instrumentpanelitemleft {
+        padding: 15px 0 15px 10%;
+      }
     }
   }
+}
 
-  .content {
+.stationcardlistbox {
-    flex: 1;
+  .stationcardlistitembox {
+    width: 100%;
+    border-top: 1px dashed #C7CAD0;
     box-sizing: border-box;
     padding: 18px;
-    padding-top: 0px;
-    margin-top: 18px;
-    .operation {
 
-      nz-date-picker {
+    .stationcardlistitem {
-        width: 140px;
+      width: 100%;
+      background: #FFFFFF;
+      box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
+      border-radius: 4px 4px 4px 4px;
+      border: 1px solid #E4E7EC;
+      color: #303133;
+      box-sizing: border-box;
+      padding: 0 18px;
+
+      .header {
+        width: 100%;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        text-align: left;
+
+        .progress {
+          width: 200px;
+          display: flex;
+          align-items: center;
+
+          span {
+            margin-right: 12px;
+
+          }
+
+          nz-progress {
+            width: 230px;
+          }
+        }
+
+        .expand {
+          margin-left: 20px;
+        }
+      }
+
+      .maincontent {
+        .maincontentitem {
+          box-sizing: border-box;
+          padding: 16px;
+          margin-bottom: 18px;
+          border-radius: 4px 4px 4px 4px;
+          border: 1px solid #42B983;
+          display: flex;
+        }
+
+        .maincontentitemleft {
+          width: 170px;
+          box-sizing: border-box;
+          padding-right: 40px;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: center;
+          border-right: 1px dashed #C7CAD0;
+
+          .panelheadername {
+            width: 90%;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            box-sizing: border-box;
+            border-radius: 6px 0px 6px 6px;
+            color: #fff;
+            margin-bottom: 8px;
+
+            img {
+              vertical-align: text-top;
+            }
+          }
+
+          .num {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+
+            .round {
+              width: 8px;
+              height: 8px;
+            }
+
+            .word {
+              margin: 0 6px;
+            }
+
+            .boldspan {
+              font-weight: 800;
+              font-size: 25px;
+            }
+          }
+        }
+
+        .maincontentitemright {
+          flex: 1;
+          box-sizing: border-box;
+          padding-left: 40px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          // align-items: center;
+
+          .maincontentitemrightitem {
+            display: flex;
+            align-items: center;
+            box-sizing: border-box;
+            padding: 12px 0px;
+            border-bottom: 1px dashed #C7CAD0;
+
+
+
+            .flexcol {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              margin-right: 3%;
+
+              span:nth-child(1) {
+                color: #303133;
+                margin-bottom: 8px;
+              }
+
+              span:nth-child(2) {
+                color: #C7CAD0;
+              }
+            }
+
+            .namebox {
+              width: 28%;
+            }
+
+            .progressbox {
+              width: 220px;
+
+              span:nth-child(1) {
+                width: 100%;
+              }
+            }
+
+            .btnbox {
+              display: flex;
+              justify-content: flex-end;
+              align-self: flex-start;
+            }
+          }
+
+          div:last-child {
+            border-bottom: 0px;
+          }
+        }
       }
     }
   }
+
+}
+
+.cutoffrule {
+  width: 100%;
+  border-top: 1px dashed #C7CAD0;
 }

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

@@ -12,28 +12,64 @@ import { TreeService } from 'src/app/service/tree.service';
 })
 export class StationWeeklyPlanComponent implements OnInit {
 
-  validateForm!: FormGroup;
+  constructor() { }
-  constructor(private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient, private toTree: TreeService) { }
+
-  searchForm = {
-    taskname: '',
-    tasktime: '',
-    unitname: '',
-    unitlevel: '',
-    or: ''
-  }
-  usersNum
-  loading
-  usersLIst = [1]
   ngOnInit(): void {
   }
-  pageChange($event) {
+  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 }
+  ]
+  selectedMonth
+  selectMonth(item) {
+    this.selectedMonth = item.name
+  }
 
+  isExpand = true
+  expand() {
+    this.isExpand = !this.isExpand
   }
 
-  cancel(item, type) {
+  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
   }
-  delete(item) {
+  xxx = false
+  radioChange(e) {
+
+    setTimeout(() => {
+      this.xxx = !this.xxx
+    }, 0);
 
   }
+  stationData = [
+    { name: '历下区A消防救援站', isExpand: true },
+    { name: '历下区B消防救援站', isExpand: false },
+    { name: '历下区C消防救援站', isExpand: false }
+  ]
+  expandcarditem(item) {
+    item.isExpand = !item.isExpand
+  }
 }

src/app/home/task/task.component.html

@@ -15,7 +15,7 @@
                 <i nz-icon nzType="appstore" nzTheme="outline"></i>
                 月度任务总览
             </li>
-            
+
             <li [routerLink]="['/task/oneselfplan']" routerLinkActive="router-link-active">
                 <i nz-icon nzType="file-text" nzTheme="outline"></i>
                 本级计划
@@ -26,10 +26,10 @@
                 <i nz-icon nzType="file-protect" nzTheme="outline"></i>
                 任务执行
             </li>
-            <li [routerLink]="['/task/subordinateaudit']" routerLinkActive="router-link-active">
+            <!-- <li [routerLink]="['/task/subordinateaudit']" routerLinkActive="router-link-active">
                 <i nz-icon nzType="file-protect" nzTheme="outline"></i>
                 任务处理
-            </li>
+            </li> -->
             <li [routerLink]="['/task/taskapply']" routerLinkActive="router-link-active">
                 <i nz-icon nzType="file-text" nzTheme="outline"></i>
                 任务申请
@@ -39,6 +39,12 @@
                 生成周计划
             </li>
         </ul>
+        <ul *ngIf="level == 'battalion' && user">
+            <li [routerLink]="['/task/weeklyplan']" routerLinkActive="router-link-active">
+                <i nz-icon nzType="container" nzTheme="outline"></i>
+                协同工作任务
+            </li>
+        </ul>
     </div>
     <div class="content">
         <div class="routerbox">

src/styles.scss

@@ -221,6 +221,7 @@ app-root {
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 999;
 }
 
 #setPosition {