[新增]支队任务指标基础界面

src/app/home/home.module.ts

@@ -42,6 +42,9 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { AddorComponent } from './system-management/or/addor/addor.component';
 import { EditorComponent } from './system-management/or/editor/editor.component';
 import { AddUnitComponent } from './basic-info/add-unit/add-unit.component';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzPopoverModule } from 'ng-zorro-antd/popover';
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 @NgModule({
   declarations: [
     NavComponent,
@@ -89,7 +92,10 @@ import { AddUnitComponent } from './basic-info/add-unit/add-unit.component';
     NzMessageModule,
     NzInputModule,
     NzPaginationModule,
-    NzTreeModule
+    NzTreeModule,
+    NzCollapseModule,
+    NzPopoverModule,
+    NzCheckboxModule
   ],
   entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent]
 })

src/app/home/task/task.component.scss

@@ -34,18 +34,18 @@
 
 
 .content {
-  box-sizing: border-box;
+  // box-sizing: border-box;
-  padding: 16px;
+  // padding: 16px;
   background: #F6F5F8;
 
   .routerbox {
     width: 100%;
     height: 100%;
-    background: #FFFFFF;
+    // background: #FFFFFF;
-    box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
+    // box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800);
-    border-radius: 4px 4px 4px 4px;
+    // border-radius: 4px 4px 4px 4px;
-    opacity: 1;
+    // opacity: 1;
-    border: 1px solid #E4E7EC;
+    // border: 1px solid #E4E7EC;
-    overflow-y: auto;
+    // overflow-y: auto;
   }
 }

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

@@ -1 +1,200 @@
-<p>zhi-indicators 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="panel">
+            <div class="panelheader">
+                <div class="panelheaderleft">
+                    <div class="panelheadername panelheadernameblue">
+                        <img src="../../../../assets/images/icon/suiji.png" alt="">
+                        双随机
+                    </div>
+                    <button nz-button nzType="primary" nz-popover nzPopoverPlacement="bottomLeft"
+                        [nzPopoverContent]="contentTemplate" [nzPopoverTrigger]=null
+                        [nzPopoverVisible]="doubleRandom.isPopover" (click)="isPopover(doubleRandom)">选择单位</button>
+                    <ng-template #contentTemplate>
+                        <div class="selectUnitPopover">
+                            <div class="popoverTitle">
+                                <span (click)="popoverMenuSelect(doubleRandom,1)"
+                                    [ngClass]="{'selectedspan': doubleRandom.selectedMenu == 1}">单位名称</span>
+                                <span style="margin: 0 10px;">|</span>
+                                <span (click)="popoverMenuSelect(doubleRandom,2)"
+                                    [ngClass]="{'selectedspan': doubleRandom.selectedMenu == 2}">组织机构</span>
+                            </div>
+                            <div class="popoverContent" *ngIf="doubleRandom.selectedMenu == 1">
+                                <div>
+                                    <form nz-form (ngSubmit)="submitForm(doubleRandom.search1)">
+                                        <nz-form-item>
+                                            <nz-form-control>
+                                                <nz-input-group nzPrefixIcon="search">
+                                                    <input type="text" [(ngModel)]="doubleRandom.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">
+                                </div>
+                            </div>
+                            <div class="popoverContent" *ngIf="doubleRandom.selectedMenu == 2">
+                                <div>
+                                    <form nz-form>
+                                        <nz-form-item>
+                                            <nz-form-control>
+                                                <nz-input-group nzPrefixIcon="search">
+                                                    <input type="text" [(ngModel)]="doubleRandom.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]="doubleRandom.search2"
+                                        #nzTreeComponent [nzData]="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.isGasStation" [(ngModel)]="node.origin.isChecked" nz-checkbox (ngModelChange)="orcheckbox(doubleRandom,$event,node)"></label>
+                                                {{ node.title }}
+                                            </span>
+                                        </div>
+                                    </ng-template>
+                                    <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>
+                                </div>
+                            </div>
+                            <div class="popoverBtn">
+                                <button nz-button nzType="primary">确定</button>
+                                <button nz-button nzType="default" (click)="isPopover(doubleRandom)">取消</button>
+                            </div>
+                        </div>
+                    </ng-template>
+                    <span>
+                        已分配: <span class="blue">14/15</span> 家单位
+                    </span>
+                </div>
+                <div class="panelheaderright">
+                    <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>
+                    </span>
+                </div>
+            </div>
+            <div class="panelcontent" *ngIf="doubleRandom.isExpand">
+                <nz-table #colSpanTable [nzData]="doubleRandom.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>说明</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of colSpanTable.data; index as i">
+                            <td>访客</td>
+                            <td>2021-11-19</td>
+                            <td>
+                                22
+                            </td>
+                            <td>
+                                22
+                            </td>
+                            <td>
+                                22
+                            </td>
+                        </tr>
+                    </tbody>
+                </nz-table>
+            </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">
+                    <div class="panelheadername panelheadernameor2">
+                        <img src="../../../../assets/images/icon/xuanchuan.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">
+                    <div class="panelheadername panelheadernamered">
+                        <img src="../../../../assets/images/icon/huozai.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>
+</div>

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

@@ -0,0 +1,170 @@
+.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;
+  }
+}
+
+.content {
+  box-sizing: border-box;
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+  color: #606266;
+}
+
+.panel {
+  margin-bottom: 16px;
+
+  .panelheader {
+    justify-content: space-between;
+
+    .panelheaderleft {
+      display: flex;
+      align-items: center;
+
+      .panelheadername {
+        width: 130px;
+        height: 36px;
+        box-sizing: border-box;
+        padding: 8px 28px;
+        border-radius: 6px 0px 6px 6px;
+        color: #fff;
+        margin-right: 36px;
+
+        img {
+          vertical-align: text-top;
+        }
+      }
+
+      button {
+        margin-right: 36px;
+      }
+    }
+
+    .panelheaderright {
+      display: flex;
+      align-items: center;
+
+      .expand {
+        margin-left: 36px;
+      }
+    }
+  }
+
+  .panelcontent {
+    nz-table {
+      margin-top: 16px;
+    }
+  }
+}
+
+.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;
+  height: 492px;
+
+  nz-form-item {
+    margin: 12px 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  .popoverTitle {
+    display: flex;
+    align-items: center;
+
+    span {
+      color: #C7CAD0;
+      cursor: pointer;
+    }
+
+    .selectedspan {
+      color: #2C4DC0;
+    }
+  }
+
+  .popoverContent {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .popoverContentitem{
+      flex: 1;
+      overflow-y: auto;
+    }
+  }
+
+  .popoverBtn {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+    button{
+      margin-left: 18px;
+    }
+  }
+}

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

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { TreeService } from 'src/app/service/tree.service';
 
 @Component({
   selector: 'app-zhi-indicators',
@@ -7,9 +10,94 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ZhiIndicatorsComponent implements OnInit {
 
-  constructor() { }
+  validateForm!: FormGroup;
+
+  constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
+
+  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
+  }
+
+
+  // 双随机
+  doubleRandom = {
+    isExpand: true,//卡片展开
+    isPopover: false,//选择单位气泡卡片
+    search1: '',//选择单位气泡卡片---单位选择列表
+    search1Value: [],
+    search2: '',//选择单位气泡卡片---组织选择列表
+    search2Value: [],
+    selectedMenu: 1,//选择单位气泡卡片
+    data: [1]//表格数据
+  }
+  isPopover(data) {
+    data.isPopover = !data.isPopover
+  }
+  //搜索框提交
+  submitForm(value): void {
+    // console.log(value)
+  }
+  // 弹出 tab
+  popoverMenuSelect(data, type) {
+    data.selectedMenu = type
+  }
+  expand(data) {
+    data.isExpand = !data.isExpand
+  }
 
   ngOnInit(): void {
+    this.getAllOrganization()
   }
 
+  nzExpandAll = false;
+  totalCount: string
+
+  allOrList: any
+  nodes
+  getAllOrganization() {
+    let params = {
+      ContainsChildren: true,
+      pageSize: 9999
+    }
+    this.http.get('/api/Organizations', {
+      params: params
+    }).subscribe((data: any) => {
+      this.totalCount = data.totalCount
+      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)]
+    })
+  }
+  orcheckbox(data, $event, node) {
+    if ($event) {
+      data.search2Value.push(node.origin.name)
+    } else {
+      for (let index = 0; index < data.search2Value.length; index++) {
+        const element = data.search2Value[index];
+        if (element == node.origin.name) {
+          data.search2Value.splice(index, 1)
+        }
+      }
+    }
+    console.log(data.search2Value)
+  }
 }

src/styles.scss

@@ -106,7 +106,7 @@ textarea {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #999;
+  // background-color: #999;
 }
 
 app-root {
@@ -161,7 +161,21 @@ app-root {
   max-height: 280px;
 }
 
-button {
+// 可展开面板
+.panel {
+  width: 100%;
+  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;
+  box-sizing: border-box;
+  padding: 16px;
+
+  .panelheader {
+    height: 46px;
+    display: flex;
+    align-items: center;
+  }
 
-  background: #2C4DC0;
 }