feat: plan part in datav integration with back-end data

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

src/app/pages/datav/digital-line/right-panel/plan-panel/plan-panel.component.html

@@ -2,7 +2,7 @@
 <div class="total-section">
   <span nz-icon nzType="icons:datav/query-thunderbolt" class="thunderbolt-icon"></span>
   <span>共接收</span>
-  <span class="numeric mx-2" style="font-size: 36px">50</span>
+  <span class="numeric mx-2" style="font-size: 36px">{{ total }}</span>
   <span>项排查计划</span>
 </div>
 
@@ -31,6 +31,6 @@
 <panel-notification
   class="mt-4"
   preText="您有"
-  [number]="8"
+  [number]="deadline"
   postText="项排查计划已临期，请及时处理！"
 ></panel-notification>

src/app/pages/datav/digital-line/right-panel/plan-panel/plan-panel.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, SimpleChanges } from '@angular/core';
 import { PieChartComponent } from '../pie-chart/pie-chart.component';
 import { CommonNzModule } from './../../../../../common.nz.module';
 import { PanelHeaderComponent } from './../panel-header/panel-header.component';
@@ -20,6 +20,18 @@ const greenColor: [string, string] = ['#53EFCD', '#24D3AC'];
 export class PlanPanelComponent {
   @Input() data: Datav.HazardStatisticsData | null = null;
 
+  total = 0;
+  deadline = 0;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['data']) {
+      if (this.data) {
+        this.setTotal();
+        this.setInfoValues();
+      }
+    }
+  }
+
   infos: { name: string; value: number; percent: string; colors: [string, string] }[] = [
     { name: '排查任务未制定', value: 30, percent: '30%', colors: redColor },
     { name: '已制定但未下发', value: 16, percent: '16%', colors: whiteColor },
@@ -27,4 +39,26 @@ export class PlanPanelComponent {
     { name: '排查任务已开展', value: 20, percent: '20%', colors: greenColor },
     { name: '排查任务已结束', value: 10, percent: '10%', colors: yellowColor },
   ];
+
+  setTotal() {
+    this.total = this.data?.troubleshootResolveInfo.total || 0;
+    this.deadline = this.data?.troubleshootResolveAdventNumber || 0;
+  }
+  setInfoValues() {
+    const [unMake, made, publish, processing, completed] = this.infos;
+    unMake.value = this.data?.troubleshootResolveInfo?.unformulated || 0;
+    unMake.percent = this.data?.troubleshootResolveInfo?.unformulatedPercentage || '0%';
+
+    made.value = this.data?.troubleshootResolveInfo?.unissued || 0;
+    made.percent = this.data?.troubleshootResolveInfo?.unissuedPercentage || '0%';
+    publish.value = this.data?.troubleshootResolveInfo?.uninitiated || 0;
+
+    publish.percent = this.data?.troubleshootResolveInfo?.uninitiatedPercentage || '0%';
+    processing.value = this.data?.troubleshootResolveInfo?.initiated || 0;
+
+    processing.percent = this.data?.troubleshootResolveInfo?.initiatedPercentage || '0%';
+    completed.value = this.data?.troubleshootResolveInfo?.completed || 0;
+
+    this.infos = this.infos.slice(); // for refreshing chart
+  }
 }

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

@@ -60,15 +60,17 @@
         <label class="label">参与部门：</label>
         <span class="value flex-1">
           <span>{{ getDepartmentsName(data.departments) }}</span>
-          <button
-            class="precaution-secondary !rounded-2xl ml-4"
-            nzSize="small"
-            nz-button
-            nzType="primary"
-            (click)="openDepartmentsEditModal()"
-          >
-            <span class="text-xs">添加部门</span>
-          </button>
+          @if (planBaseModifyAble) {
+            <button
+              class="precaution-secondary !rounded-2xl ml-4"
+              nzSize="small"
+              nz-button
+              nzType="primary"
+              (click)="openDepartmentsEditModal()"
+            >
+              <span class="text-xs">添加部门</span>
+            </button>
+          }
         </span>
       </div>
       <plan-detail-progress [data]="data" (onConfirm)="confirmToPublish()" />
@@ -141,13 +143,15 @@
     }
   </div>
   <div class="h-10 flex justify-between" style="border-top: 1px solid rgba(0, 0, 0, 0.06)">
-    <div
-      class="flex-1 text-primary text-center leading-10 cursor-pointer hover:text-blue-400"
-      style="border-right: 1px solid rgba(0, 0, 0, 0.06)"
-      (click)="createPointsEditModal()"
-    >
-      继续添加
-    </div>
+    @if (planBaseModifyAble) {
+      <div
+        class="flex-1 text-primary text-center leading-10 cursor-pointer hover:text-blue-400"
+        style="border-right: 1px solid rgba(0, 0, 0, 0.06)"
+        (click)="createPointsEditModal()"
+      >
+        继续添加
+      </div>
+    }
     <div
       class="flex-1 text-primary text-center leading-10 cursor-pointer hover:text-blue-400"
       (click)="closePointsDetail()"

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

@@ -199,7 +199,7 @@ export class BasicInfoComponent {
           return Promise.reject();
         }
         if (this.data.level === PlanLevel.DEPARTMENT && departments.length > 1) {
-          this.message.error('部门级计划只能选择一个部门');
+          this.message.error(PlanLevel.DEPARTMENT + '计划只能选择一个部门');
           return Promise.reject();
         }
 
@@ -233,12 +233,15 @@ export class BasicInfoComponent {
     return this.basic.departments.slice().map(d => ({ label: d.name, value: d.id }));
   }
 
-  get departmentModifyAble() {
+  get authToModifyPlanBase() {
+    return this.setting.isAdmin || this.setting.user?.id === this.data.createUserId;
+  }
+
+  get planBaseModifyAble() {
     switch (this.data.status) {
       case '未执行':
       case '制定中':
-      case '已制定':
-        return true;
+        return this.authToModifyPlanBase;
       default:
         return false;
     }

src/app/pages/manager/hazard/inspection-plan/detail/detail-info/task-rounds/task-rounds.component.ts

@@ -16,6 +16,8 @@ const getTimeStateText = (state: RoundState) => {
       return '未开始';
     case RoundState.Expired:
       return '已过期';
+    case RoundState.Completed:
+      return '已完成';
     default:
       return '';
   }
@@ -25,6 +27,8 @@ const getTimeStateColor = (state: RoundState) => {
   switch (state) {
     case RoundState.Current:
       return '#007bff';
+    case RoundState.Completed:
+      return '#22c55e';
     default:
       return '#7d8da6';
   }

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

@@ -15,7 +15,7 @@
   </div>
   <div class="flex">
     <div class="overview-panel flex-1 flex h-[140px]">
-      <div class="w-[36%] r-border px-[3%]">
+      <div class="w-[393px] r-border px-[3%]">
         <div class="semi-annual-switch">
           <div class="arrow" (click)="handleSemiAnnualChange('left')">
             @if (leftArrowVisible) {
@@ -48,8 +48,8 @@
           }
         </div>
       </div>
-      <div class="w-[64%] flex">
-        <div class="flex flex-col justify-between py-4 w-1/2 pl-[6%] pr-[4%]">
+      <div class="flex flex-1">
+        <div class="flex flex-col justify-between py-4 w-[393px] pl-[6%] pr-[4%]">
           @for (row of secondSection; track $index) {
             <div class="flex items-center h-1/3 justify-between">
               <span class="section-label">{{ row.label }}：</span>
@@ -57,7 +57,7 @@
             </div>
           }
         </div>
-        <div class="flex flex-col py-6 w-1/2 pr-[8%] pl-[2%]">
+        <div class="flex flex-col py-6 w-[456px] pr-[8%] pl-[2%]">
           <div class="flex justify-between">
             <div class="section-label">排查中发现隐患：</div>
             <div class="flex justify-between text-3 font-medium w-[40%]">
@@ -72,9 +72,10 @@
             </div>
           </div>
         </div>
+        <div class="flex-1"></div>
       </div>
     </div>
-    <div class="overview-panel ml-5 w-[30%] pt-[13px]">
+    <!-- <div class="overview-panel ml-5 w-[30%] pt-[13px]">
       <div class="notifications">
         @for (item of notifications; track $index) {
           <div class="notification-item">
@@ -92,7 +93,7 @@
           </div>
         }
       </div>
-    </div>
+    </div> -->
   </div>
   <div class="grid grid-cols-4 gap-5 py-5">
     @for (plan of plans; track plan.id) {

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

@@ -101,4 +101,5 @@ export enum RoundState {
   Expired = 'expired',
   Current = 'current',
   UnStart = 'unStart',
+  Completed = 'completed',
 }

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

@@ -33,7 +33,7 @@ export class PlanCardComponent {
     const [du, time, createTime, d] = this.infos;
     const { startDate, endDate, createdDate, createUserDept } = this.data;
     du.value = getCycleText(this.data);
-    time.value = `${transformTime(startDate, 'YYYY/MM/DD')}-${transformTime(endDate, 'YYYY/MM/DD')}`;
+    time.value = `${transformTime(startDate, 'YYYY/MM/DD')} - ${transformTime(endDate, 'YYYY/MM/DD')}`;
     createTime.value = transformTime(createdDate, 'YYYY/MM/DD');
     d.value = this.basic.getDepartmentName(createUserDept);
   }

src/types/datav.d.ts

@@ -37,20 +37,33 @@ declare namespace Datav {
   }
 
   interface PlanDurationInfo {
-    completed: number;
-    completedPercentage: string;
-    initiated: number;
-    initiatedPercentage: string;
-    total: number;
+    /** 未制定排查任务数量 */
     unformulated: number;
+    /** 未制定排查任务百分比 */
     unformulatedPercentage: string;
-    uninitiated: number;
-    uninitiatedPercentage: string;
+    /** 已制定但未下发排查任务数量 */
     unissued: number;
+    /** 已制定但未下发排查任务百分比 */
     unissuedPercentage: string;
+    /** 已下发但未开展排查任务数量 */
+    uninitiated: number;
+    /** 已下发但未开展排查任务百分比 */
+    uninitiatedPercentage: string;
+    /** 已开展排查任务数量 */
+    initiated: number;
+    /** 已开展排查任务百分比 */
+    initiatedPercentage: string;
+    /** 已结束排查任务数量 */
+    completed: number;
+    /** 已结束排查任务百分比 */
+    completedPercentage: string;
+    /** 排查任务总数 */
+    total: number;
   }
   interface HazardStatisticsData {
+    /** 隐患治理临期 */
     troubleResolveAdventNumber: number;
+    /** 隐患排查计划临期 */
     troubleshootResolveAdventNumber: number;
     troubleResolveInfo: HazardDurationInfo;
     troubleshootResolveInfo: PlanDurationInfo;