feat: hazard plan cards

Signed-off-by: carlos <568187512@qq.com>

src/app/pages/manager/hazard/inspection-plan/inspection-plan.component.html

@@ -77,3 +77,8 @@
     </div>
   </div>
 </div>
+<div class="grid grid-cols-4 gap-5 py-5">
+  @for (plan of plans; track plan.id) {
+    <plan-card [data]="plan"></plan-card>
+  }
+</div>

src/app/pages/manager/hazard/inspection-plan/inspection-plan.component.ts

@@ -7,6 +7,23 @@ const notificationConfig = [
   { type: 2, text: '消息', color: '#0FC6C2', backgroundColor: '#E8FFFB' },
 ];
 
+const departments = Array.from({ length: 15 }, (_, i) => i + 1);
+
+const getRandomSize = (max: number) => Math.floor(Math.random() * max);
+
+const getMockPlan = (index: number, name: string): Hazard.Plan => {
+  return {
+    id: index,
+    type: getRandomSize(4) || 1,
+    name: `${name}隐患排查计划`,
+    status: getRandomSize(4) || 1,
+    startDate: parseInt(name) + '/11/12',
+    endDate: parseInt(name) + '/11/14',
+    createDate: parseInt(name) + '/11/10',
+    department: getRandomSize(13) + 1,
+  };
+};
+
 @Component({
   selector: 'app-inspection-plan',
   standalone: true,
@@ -23,9 +40,9 @@ export class InspectionPlanComponent {
     { label: '2025上半年度', value: 202501 },
   ];
   firstSection = [
-    { label: '日常隐患排查计划', value: 3, key: 'normal' },
-    { label: '专项隐患排查计划', value: 6, key: 'special' },
-    { label: '其他隐患排查计划', value: 9, key: 'other' },
+    { label: '日常隐患排查计划', value: 3, key: 1 },
+    { label: '专项隐患排查计划', value: 6, key: 2 },
+    { label: '其他隐患排查计划', value: 9, key: 3 },
   ];
   secondSection = [
     { label: '计划站点排查覆盖', value: 65 },
@@ -64,9 +81,17 @@ export class InspectionPlanComponent {
       createDate: '2024/11/16',
     },
   ];
-  currentPlanKey = 'special';
+  currentPlanKey = 2;
   semiAnnualKey = 202406;
-  handlePlanTypeChange(type: string) {
+
+  plans: Hazard.Plan[] = Array.from({ length: getRandomSize(11) }, (_, i) =>
+    getMockPlan(i, this.getSemiAnnualLabel(this.semiAnnualKey))
+  );
+
+  getSemiAnnualLabel(key: number) {
+    return this.semiAnnualOptions.find(s => s.value === key)?.label || '2025上半年度';
+  }
+  handlePlanTypeChange(type: number) {
     this.currentPlanKey = type;
   }
   handleSemiAnnualChange(direction: 'left' | 'right') {

src/app/pages/manager/hazard/inspection-plan/inspection-plan.utils.ts

@@ -0,0 +1,19 @@
+export const hazardPlanTypeOptions: Option<number>[] = [
+  { label: '日常隐患排查计划', value: 1 },
+  { label: '专项隐患排查计划', value: 2 },
+  { label: '其他隐患排查计划', value: 3 },
+];
+
+export const getHazardPlanTypeText = (v: number) => {
+  return hazardPlanTypeOptions.find(t => t.value === v)?.label || '';
+};
+
+export const hazardPlanStatusOptions: Option<number>[] = [
+  { label: '执行中', value: 1 },
+  { label: '已完成', value: 2 },
+  { label: '未开始', value: 3 },
+];
+
+export const getHazardPlanStatusText = (v: number) => {
+  return hazardPlanStatusOptions.find(t => t.value === v)?.label || '';
+};

src/app/pages/manager/hazard/inspection-plan/plan-card/plan-card.component.html

@@ -1 +1,24 @@
-<p>plan-card works!</p>
+<div class="plan-card">
+  <div class="card-header">
+    <div class="flex-1">
+      <div class="title">
+        {{ data.name }}
+      </div>
+      <div class="type-row">
+        <span nz-icon nzType="icons:tool" class="text-primary align-bottom" style="font-size: 20px"></span>
+        <span> {{ typeText }}</span>
+      </div>
+    </div>
+    <div class="pt-4">
+      <div class="status">计划状态： {{ statusText }}</div>
+    </div>
+  </div>
+  <div class="px-[10px] py-2">
+    @for (item of infos; track $index) {
+      <div class="info-item">
+        <span class="label">{{ item.label }}：</span>
+        <span class="value">{{ item.value }}</span>
+      </div>
+    }
+  </div>
+</div>

src/app/pages/manager/hazard/inspection-plan/plan-card/plan-card.component.less

@@ -0,0 +1,55 @@
+.plan-card {
+  box-shadow: 0px 2px 4px 2px rgba(53, 53, 53, 0.1);
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 12px 0 2px 8px;
+  transition: border 0.3s;
+  background-color: #ffffff;
+  position: relative;
+  &:hover {
+    border: 1px solid #2953e830;
+  }
+  .card-header {
+    @apply flex;
+  }
+  .title {
+    @apply flex-1  font-medium line-clamp-1;
+    font-weight: 500;
+    font-size: 18px;
+    color: #1d2129;
+  }
+  .type-row {
+    line-height: 20px;
+    padding-top: 16px;
+  }
+  .status {
+    display: inline-block;
+    background: #ffffff;
+    box-shadow:
+      0px 0px 8px 0px rgba(223, 223, 223, 0.5),
+      0px 2px 4px 0px rgba(187, 187, 187, 0.5);
+    border-radius: 12px 0px 0px 12px;
+    backdrop-filter: blur(1.838235294117647px);
+    font-weight: 400;
+    font-size: 10px;
+    color: #333333;
+    line-height: 14px;
+    text-shadow: 0px 0px 8px rgba(223, 223, 223, 0.5);
+    text-stroke: 0.5px #000000;
+    text-align: left;
+    font-style: normal;
+    -webkit-text-stroke: 0.5px #000000;
+    // padding: 8px 0 8px 16px;
+    padding-left: 16px;
+    padding-right: 4px;
+    line-height: 30px;
+  }
+}
+.info-item {
+  .label {
+    color: #333333;
+  }
+  .value {
+    color: #666666;
+  }
+}

src/app/pages/manager/hazard/inspection-plan/plan-card/plan-card.component.ts

@@ -1,12 +1,43 @@
 import { Component, Input } from '@angular/core';
+import dayjs from 'dayjs';
+import { CommonNzModule } from '../../../../../common.nz.module';
+import { BasicDataService } from '../../../../../services/basic.service';
+import { getHazardPlanStatusText, getHazardPlanTypeText } from '../inspection-plan.utils';
 
 @Component({
   selector: 'plan-card',
   standalone: true,
-  imports: [],
+  imports: [CommonNzModule],
   templateUrl: './plan-card.component.html',
   styleUrl: './plan-card.component.less',
 })
 export class PlanCardComponent {
   @Input() data!: Hazard.Plan;
+  constructor(private basic: BasicDataService) {
+    basic.init().then(() => {
+      this.setInfoValues();
+    });
+  }
+  ngOnInit() {
+    this.setInfoValues();
+  }
+  infos = [
+    { label: '排查周期', value: '' },
+    { label: '排查时间', value: '' },
+    { label: '发布时间', value: '' },
+    { label: '发布部门', value: '' },
+  ];
+  setInfoValues() {
+    const [du, time, createTime, d] = this.infos;
+    du.value = '周循环计划 每周1次';
+    time.value = `${dayjs(this.data.startDate).format('YYYY/MM/DD')}-${dayjs(this.data.endDate).format('YYYY/MM/DD')}`;
+    createTime.value = dayjs(this.data.createDate).format('YYYY/MM/DD');
+    d.value = this.basic.getDepartmentName(this.data.department);
+  }
+  get typeText() {
+    return getHazardPlanTypeText(this.data.type);
+  }
+  get statusText() {
+    return getHazardPlanStatusText(this.data.status);
+  }
 }

src/app/services/basic.service.ts

@@ -101,7 +101,7 @@ export class BasicDataService {
     return this.equipments.find(eq => eq.id === equipmentId)?.name;
   }
   getDepartmentName(departmentId: number) {
-    return this.departments.find(eq => eq.id === departmentId)?.name;
+    return this.departments.find(eq => eq.id === departmentId)?.name || '';
   }
   getJobNameWithDepartment(jobId: number) {
     const jobDto = this.jobs.find(job => job.id === jobId);

src/assets/icons/tool.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title></title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="隐患管理-排查计划" transform="translate(-321.000000, -388.000000)" fill-rule="nonzero">
+            <g id="编组-9" transform="translate(311.000000, 345.000000)">
+                <g id="Frame-192660" transform="translate(10.000000, 11.000000)">
+                    <g id="开发框架" transform="translate(0.000000, 32.000000)">
+                        <rect x="0" y="0" width="20" height="20"></rect>
+                        <circle id="Ellipse-47" fill="currentColor" cx="10" cy="10" r="10"></circle>
+                        <g id="general/tool" transform="translate(4.567468, 5.107148)" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1.17000008">
+                            <path d="M2.43098229,3.43889062 C2.43269174,2.18350815 3.22880077,1.11264386 4.34309321,0.70252061 C4.35881238,0.696732722 4.37539779,0.708398659 4.37537503,0.725140801 C4.37537503,0.725140801 4.37234886,2.9510783 4.37234886,2.9510783 C4.37216672,3.08505353 4.48063507,3.19351334 4.61461029,3.1933312 C4.61461029,3.1933312 6.07014059,3.1913524 6.07014059,3.1913524 C6.20411582,3.19117026 6.31287927,3.08241513 6.31306141,2.9484399 C6.31306141,2.9484399 6.31608758,0.722502977 6.31608758,0.722502977 C6.31611034,0.705760893 6.33272754,0.694049417 6.34843142,0.699794586 C7.46161429,1.10688933 8.25481294,2.17559296 8.25310899,3.43097543 C8.25138308,4.6984679 7.43986054,5.77786772 6.30866942,6.17902667 C6.30866942,6.17902667 6.30382699,9.74093373 6.30382699,9.74093373 C6.30364483,9.87492602 6.19488147,9.98361452 6.06090624,9.98379666 C6.06090624,9.98379666 4.60537594,9.98577569 4.60537594,9.98577569 C4.47140071,9.9859576 4.36293228,9.87756442 4.36311444,9.74357214 C4.36311444,9.74357214 4.36795687,6.18166508 4.36795687,6.18166508 C3.23785425,5.78358036 2.42926188,4.70638309 2.43098229,3.43889062 C2.43098229,3.43889062 2.43098229,3.43889062 2.43098229,3.43889062 Z" id="Union" transform="translate(5.342046, 5.342046) rotate(45.000000) translate(-5.342046, -5.342046) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/types/hazard.d.ts

@@ -17,7 +17,7 @@ declare namespace Hazard {
   interface Plan {
     id: number;
     type: number;
-    state: number;
+    status: number;
     name: string;
     startDate: string;
     endDate: string;