[新增]大队本级计划

src/app/home/home.module.ts

@@ -46,6 +46,7 @@ import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { NzPopoverModule } from 'ng-zorro-antd/popover';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { NzGridModule } from 'ng-zorro-antd/grid';
 @NgModule({
   declarations: [
     NavComponent,
@@ -97,7 +98,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
     NzCollapseModule,
     NzPopoverModule,
     NzCheckboxModule,
-    ScrollingModule
+    ScrollingModule,
+    NzGridModule
   ],
   entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent]
 })

src/app/home/task/da-oneself-plan/da-oneself-plan.component.html

@@ -1 +1,66 @@
-<p>da-oneself-plan works!</p>
+<!-- <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>
+        <div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)"
+            [ngClass]="{'selectedMonth': item.name == selectedMonth}">
+            {{item.name}}
+        </div>
+    </div>
+    <div class="instrumentpanel">
+        <div class="instrumentpanelheader">
+            <span>本级部署</span>
+            <span (click)="expand()" class="expand blue">
+                {{isExpand ? '收起' :'展开'}}
+                <i nz-icon [nzType]="isExpand ? 'down' : 'up'" nzTheme="outline"></i>
+            </span>
+        </div>
+        <div class="instrumentpanelopen">
+            <div class="instrumentpanelopenitem" *ngFor="let item of cardData">
+                <div class="itemone" *ngIf="!item.isDetails">
+                    <div class="instrumentpanelopenitemleft">
+                        <div class="panelheadername" [style]="'background:'+ item.background">
+                            <img [src]="'../../../../assets/images/icon/'+ item.icon" alt="">
+                            {{item.name}}
+                        </div>
+                        <div class="tasknum">
+                            <p>
+                                <span style="margin-right: 6px;">任务分配</span>
+                                <i (click)="openDetails(item,true)" 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>
+                        </div>
+                        <button nz-button class="btn">快速派发</button>
+                    </div>
+                    <div class="instrumentpanelopenitemright">
+                        <nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne" nzStrokeColor="#42B983">
+                        </nz-progress>
+                    </div>
+                </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>济南历下森豪室内娱乐场</span>
+                                <span>
+                                    <span class="blue">派发</span>
+                                </span>
+                            </p>
+                            <p>A消防救援站</p>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/home/task/da-oneself-plan/da-oneself-plan.component.scss

@@ -0,0 +1,186 @@
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.timebox {
+  width: 100%;
+  height: 68px;
+  box-sizing: border-box;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+
+  border-bottom: 1px dashed #C7CAD0;
+
+  nz-select {
+    margin-right: 16px;
+    border-radius: 4px 4px 4px 4px;
+  }
+
+  .monthbtn {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    background: #FFFFFF;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #E4E7EC;
+    color: #303133;
+    margin-right: 16px;
+    cursor: pointer;
+  }
+
+  .selectedMonth {
+
+    background: #2C4DC0;
+    color: #FFFFFF;
+  }
+}
+
+.instrumentpanel {
+  box-sizing: border-box;
+  padding: 15px 20px;
+  color: #303133;
+
+  .instrumentpanelheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .instrumentpanelopen {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .instrumentpanelopenitem {
+    width: 24.3%;
+    height: 260px;
+    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;
+    margin-bottom: 18px;
+
+    .itemone {
+      width: 100%;
+      height: 100%;
+      display: flex;
+
+      .instrumentpanelopenitemleft {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: flex-start;
+        flex: 1;
+        box-sizing: border-box;
+        padding: 26px 0 26px 10%;
+
+        .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;
+        }
+      }
+
+      .instrumentpanelopenitemright {
+        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;
+          }
+        }
+      }
+    }
+  }
+
+}

src/app/home/task/da-oneself-plan/da-oneself-plan.component.ts

@@ -11,5 +11,45 @@ export class DaOneselfPlanComponent implements OnInit {
 
   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 }
+  ]
+  selectedMonth
+  selectMonth(item) {
+    this.selectedMonth = item.name
+  }
+
+  isExpand = true
+  expand() {
+    this.isExpand = !this.isExpand
+  }
+
+  formatOne = (percent: number): string => `${percent}%\n完成率`;
 
+
+  cardData = [
+    { name: '重大活动', isDetails: false, background: '#FF9203', icon: 'huodong.png' },
+    { 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
+  }
 }

src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.html

@@ -1 +1,87 @@
-<p>da-subordinate-audit works!</p>
+<!-- <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>
+        <div *ngFor="let item of months" class="monthbtn" (click)="selectMonth(item)"
+            [ngClass]="{'selectedMonth': item.name == selectedMonth}">
+            {{item.name}}
+        </div>
+    </div>
+    <div class="content">
+        <div class="tabheader">
+            <div class="tabtitle" [ngClass]="{'selectedTab': selectedTab == 1}" (click)="selectTab(1)">
+                <div [ngClass]="{'blue': selectedTab == 1}">
+                    <span>熟悉演练任务</span>
+                    <span style="margin: 0 8px;"></span>
+                    <span>已审批: 6/8</span>
+                </div>
+            </div>
+            <div class="tabtitle" [ngClass]="{'selectedTab': selectedTab == 2}" (click)="selectTab(2)">
+                <div [ngClass]="{'blue': selectedTab == 2}">
+                    <span>联络指导任务</span>
+                    <span style="margin: 0 8px;"></span>
+                    <span>已审批: 6/8</span>
+                </div>
+            </div>
+        </div>
+        <div class="tabbody" *ngIf="selectedTab == 1">
+            <div class="card redcard">
+                <div class="unitname">
+                    <img src="../../../../assets/images/icon/unit.png" alt="">
+                    <span>上海雅特酒店管理有限公司济南泺文路分公司</span>
+                </div>
+                <div class="info">
+                    <span>
+                        <img src="../../../../assets/images/icon/main.png" alt="">
+                        未分配
+                    </span>
+                    <span>
+                        <img src="../../../../assets/images/icon/assist.png" alt="">
+                        未分配
+                    </span>
+                    <span class="blue">分配</span>
+                    <span>|</span>
+                    <span>申请人: 历下区A消防救援站</span>
+                    <span class="blue">修改</span>
+                </div>
+                <div class="btn">
+                    <button nz-button style="background: #42B983;color: white;">同意</button>
+                    <button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button>
+                </div>
+                <img class="auditimg" src="../../../../assets/images/icon/reject.png" alt="">
+                <!-- <img class="auditimg" src="../../../../assets/images/icon/agree.png" alt=""> -->
+            </div>
+        </div>
+        <div class="tabbody" *ngIf="selectedTab == 2">
+            <div class="card greencard">
+                <div class="unitname">
+                    <img src="../../../../assets/images/icon/unit.png" alt="">
+                    <span>上海雅特酒店管理有限公司济南泺文路分公司</span>
+                </div>
+                <div class="info">
+                    <span>
+                        <img src="../../../../assets/images/icon/main.png" alt="">
+                        未分配
+                    </span>
+                    <span>
+                        <img src="../../../../assets/images/icon/assist.png" alt="">
+                        未分配
+                    </span>
+                    <span class="blue">分配</span>
+                    <span>|</span>
+                    <span>申请人: 历下区A消防救援站</span>
+                    <span class="blue">修改</span>
+                </div>
+                <div class="btn">
+                    <button nz-button style="background: #42B983;color: white;">同意</button>
+                    <button nz-button style="background: #FF0000;color: white;margin-left: 20px;">驳回</button>
+                </div>
+                <!-- <img class="auditimg" src="../../../../assets/images/icon/reject.png" alt=""> -->
+                <img class="auditimg" src="../../../../assets/images/icon/agree.png" alt="">
+            </div>
+        </div>
+    </div>
+</div>

src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.scss

@@ -0,0 +1,146 @@
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.timebox {
+  width: 100%;
+  height: 68px;
+  box-sizing: border-box;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+
+  nz-select {
+    margin-right: 16px;
+    border-radius: 4px 4px 4px 4px;
+  }
+
+  .monthbtn {
+    width: 80px;
+    height: 32px;
+    line-height: 32px;
+    background: #FFFFFF;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    border: 1px solid #E4E7EC;
+    color: #303133;
+    margin-right: 16px;
+    cursor: pointer;
+  }
+
+  .selectedMonth {
+
+    background: #2C4DC0;
+    color: #FFFFFF;
+  }
+}
+
+.content {
+  flex: 1;
+  overflow: hidden;
+  margin: 20px;
+  margin-top: 0px;
+  background: #fff;
+  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
+  border-radius: 4px 4px 4px 4px;
+  opacity: 1;
+  border: 1px solid #E4E7EC;
+  color: #303133;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+
+  .tabheader {
+    width: 100%;
+    height: 52px;
+    background: #E4E7EC;
+    display: flex;
+
+    .tabtitle {
+      width: 205px;
+      height: 52px;
+      line-height: 52px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+
+      div {
+        border-top: 2px solid #E4E7EC;
+      }
+    }
+
+    .selectedTab {
+      background: #fff;
+
+      div {
+        border-top: 2px solid #2C4DC0;
+      }
+    }
+  }
+
+  .tabbody {
+    flex: 1;
+    overflow-y: auto;
+    color: #000;
+    box-sizing: border-box;
+    padding: 18px;
+
+    .card {
+      color: #303133;
+      width: 100%;
+      height: 70px;
+      border-radius: 4px 4px 4px 4px;
+      opacity: 1;
+      display: flex;
+      margin-bottom: 18px;
+      box-sizing: border-box;
+      padding: 0 20px;
+      position: relative;
+      div {
+        display: flex;
+        align-items: center;
+
+        img {
+          margin-top: -3px;
+        }
+      }
+
+      .unitname {
+        flex: 3;
+      }
+
+      .info {
+        flex: 6;
+
+        span {
+          margin-right: 20px;
+        }
+      }
+
+      .btn {
+        flex: 1;
+      }
+
+      .auditimg {
+        position: absolute;
+        right: 18%;
+        top: 9%;
+      }
+    }
+
+    .greencard {
+      background: rgba(66, 185, 131, 0.0400);
+      border: 1px solid rgba(66, 185, 131, 0.1600);
+    }
+
+    .redcard {
+      background: rgba(255, 0, 0, 0.0200);
+      border: 1px solid rgba(255, 0, 0, 0.1000);
+    }
+  }
+}

src/app/home/task/da-subordinate-audit/da-subordinate-audit.component.ts

@@ -11,5 +11,28 @@ export class DaSubordinateAuditComponent implements OnInit {
 
   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 }
+  ]
+  selectedMonth
+  selectMonth(item) {
+    this.selectedMonth = item.name
+  }
+
 
+  selectedTab = 1
+  selectTab(item) {
+    this.selectedTab = item
+  }
 }

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

@@ -95,33 +95,7 @@
   }
 }
 
-.panelheadernameblue {
-  background-color: #1D9DFF;
-}
-
-.panelheadernamepurple {
-  background-color: #9D80FF;
-}
-
-.panelheadernameblue2 {
-  background-color: #5087FF;
-}
-
-.panelheadernamegreen {
-  background-color: #42B983;
-}
-
-.panelheadernameor {
-  background-color: #FF9203;
-}
 
-.panelheadernameor2 {
-  background-color: #FF5D2A;
-}
-
-.panelheadernamered {
-  background-color: #FF404D;
-}
 
 .selectUnitPopover {
   width: 550px;

src/styles.scss

@@ -98,7 +98,7 @@ textarea {
 /* 滚动条样式 */
 // ::-webkit-scrollbar:horizontal  { width: 5px; background-color: white; }
 ::-webkit-scrollbar-thumb {
-  background-color: #999;
+  background: #E4E7EC;
 }
 
 ::-webkit-scrollbar {
@@ -115,17 +115,17 @@ app-root {
 
 .blue {
   cursor: pointer;
-  color: #2C4DC0!important;
+  color: #2C4DC0 !important;
 }
 
 .green {
   cursor: pointer;
-  color: #42B983!important;
+  color: #42B983 !important;
 }
 
 .red {
   cursor: pointer;
-  color: #FF0000!important;
+  color: #FF0000 !important;
 }
 
 
@@ -179,3 +179,31 @@ app-root {
   }
 
 }
+
+.panelheadernameblue {
+  background-color: #1D9DFF;
+}
+
+.panelheadernamepurple {
+  background-color: #9D80FF;
+}
+
+.panelheadernameblue2 {
+  background-color: #5087FF;
+}
+
+.panelheadernamegreen {
+  background-color: #42B983;
+}
+
+.panelheadernameor {
+  background-color: #FF9203;
+}
+
+.panelheadernameor2 {
+  background-color: #FF5D2A;
+}
+
+.panelheadernamered {
+  background-color: #FF404D;
+}

src/theme.less

@@ -6,12 +6,18 @@
 
 .ant-table-thead {
   .ant-table-cell {
-    background-color: #EEF1F6!important;
+    background-color: #EEF1F6 !important;
   }
 }
-.ant-table-cell{
-    height: 44px;
-    box-sizing: border-box;
-    padding: 0 20px!important;
-    color: #606266;
+
+.ant-table-cell {
+  height: 44px;
+  box-sizing: border-box;
+  padding: 0 20px !important;
+  color: #606266;
+}
+
+.ant-progress-circle .ant-progress-text {
+  white-space: pre;
+  font-size: 18px;
 }