1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086 |
- import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
- import { CommonModule } from '@angular/common';
- import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
- import { Subscription } from 'rxjs';
- import { UploadSuccessModalComponent } from '../upload-success-modal/upload-success-modal.component';
- import { GlobalPromptComponent } from '../global-prompt/global-prompt.component';
- import { ColorAnalysisService, ColorAnalysisResult } from '../../services/color-analysis.service';
- import { FullReportOverlayComponent } from '../full-report-overlay/full-report-overlay.component';
- import { CadAnalysisService, CadAnalysisResult } from '../../services/cad-analysis.service';
- import { RequirementMappingService } from '../../../services/requirement-mapping.service';
- import { RequirementMapping, SceneTemplate } from '../../../models/requirement-mapping.interface';
- // 素材文件接口
- interface MaterialFile {
- id: string;
- name: string;
- type: 'text' | 'image' | 'cad';
- url?: string;
- content?: string;
- size?: string;
- uploadTime: Date;
- analysis?: MaterialAnalysis;
- }
- // 素材解析结果接口
- interface MaterialAnalysis {
- // 文本类解析
- atmosphere?: { description: string; rgb?: string; colorTemp?: string };
- residents?: { type: string; details: string };
- scenes?: { preference: string; requirements: string };
- keywords?: { positive: string[]; negative: string[] };
-
- // 图片类解析
- mainColors?: { rgb: string; percentage: number }[];
- colorTemperature?: string;
- materialRatio?: { material: string; percentage: number }[];
- spaceRatio?: number;
-
- // CAD类解析
- structuralElements?: { type: string; position: string; changeable: boolean }[];
- spaceMetrics?: { room: string; ratio: string; width: string }[];
- flowMetrics?: { area: string; width: string; compliance: boolean }[];
-
- // 增强色彩分析
- enhancedColorAnalysis?: {
- colorWheel?: {
- primaryHue: number;
- saturation: number;
- brightness: number;
- dominantColors: Array<{ hue: number; saturation: number; brightness: number; percentage: number }>;
- colorDistribution: string;
- };
- colorHarmony?: {
- harmonyType: string;
- harmonyScore: number;
- complementaryColors: string[];
- suggestions: string[];
- };
- colorTemperatureAnalysis?: {
- kelvin: number;
- warmCoolBalance: number;
- description: string;
- lightingRecommendations: string[];
- };
- colorPsychology?: {
- primaryMood: string;
- atmosphere: string;
- psychologicalEffects: string[];
- suitableSpaces: string[];
- };
- };
-
- // 形体分析
- formAnalysis?: {
- lineAnalysis?: {
- dominantLines: Array<{ type: string; percentage: number; characteristics: string[] }>;
- lineQuality: { smoothness: number; precision: number; expressiveness: number };
- visualFlow: { direction: string; rhythm: string; continuity: number };
- };
- geometryAnalysis?: {
- primaryShapes: Array<{ shape: string; percentage: number; characteristics: string[] }>;
- complexity: string;
- symmetry: { type: string; score: number };
- balance: { visual: number; compositional: number };
- };
- proportionAnalysis?: {
- aspectRatio: number;
- goldenRatio: number;
- proportionHarmony: number;
- scaleRelationships: Array<{ element: string; scale: string; relationship: string }>;
- };
- overallAssessment?: {
- formComplexity: number;
- visualImpact: number;
- functionalSuitability: number;
- aestheticAppeal: number;
- };
- };
-
- // 质感分析
- textureAnalysis?: {
- surfaceProperties?: {
- roughness: { level: string; value: number; description: string };
- glossiness: { level: string; value: number; reflectivity: number };
- transparency: { level: string; value: number };
- porosity: { level: string; value: number };
- };
- tactilePredict?: {
- temperature: { perceived: string; thermalConductivity: number };
- hardness: { level: string; value: number };
- flexibility: { level: string; value: number };
- weight: { perceived: string; density: number };
- comfort: { tactileComfort: number; ergonomicSuitability: number };
- };
- materialClassification?: {
- primaryMaterial: { category: string; confidence: number; subcategory?: string };
- secondaryMaterials: Array<{ category: string; percentage: number; confidence: number }>;
- materialProperties: { durability: number; maintenance: string; sustainability: number; costLevel: string };
- };
- textureQuality?: {
- overallQuality: number;
- consistency: number;
- authenticity: number;
- visualAppeal: number;
- functionalSuitability: number;
- ageingCharacteristics: { wearResistance: number; patinaPotential: number; maintenanceNeeds: string[] };
- };
- };
-
- // 纹理图案分析
- patternAnalysis?: {
- patternRecognition?: {
- primaryPatterns: Array<{ type: string; confidence: number; coverage: number; characteristics: string[] }>;
- patternComplexity: { level: string; score: number; elements: number };
- patternScale: { size: string; uniformity: number; variation: number };
- };
- repetitionAnalysis?: {
- repetitionType: { primary: string; pattern: string; consistency: number };
- spacing: { horizontal: number; vertical: number; uniformity: number; rhythm: string };
- symmetry: { type: string; strength: number; axes: number };
- tiling: { seamless: boolean; quality: number; edgeHandling: string };
- };
- textureClassification?: {
- textureFamily: { primary: string; subcategory: string; confidence: number };
- surfaceCharacter: { tactileQuality: string; visualDepth: number; dimensionality: string };
- materialSuggestion: { likelyMaterials: string[]; fabricationMethod: string[]; applicationSuitability: string[] };
- };
- visualRhythm?: {
- rhythmType: { primary: string; intensity: number; tempo: string };
- movement: { direction: string; flow: number; energy: number };
- emphasis: { focalPoints: number; contrast: number; hierarchy: number };
- harmony: { overall: number; balance: number; unity: number };
- };
- };
-
- // 灯光分析
- lightingAnalysis?: {
- lightSourceIdentification?: {
- primarySources: Array<{
- type: string;
- subtype: string;
- position: { direction: string; angle: number; distance: string };
- intensity: number;
- confidence: number;
- }>;
- lightingSetup: { complexity: string; sourceCount: number; dominantSource: string; lightingStyle: string };
- };
- illuminationAnalysis?: {
- brightness: { overall: number; distribution: string; dynamicRange: number; exposure: string };
- contrast: { level: number; type: string; areas: { highlights: number; midtones: number; shadows: number } };
- colorTemperature: { kelvin: number; warmth: string; consistency: number; mixedLighting: boolean };
- lightQuality: { softness: number; diffusion: number; directionality: number; evenness: number };
- };
- shadowAnalysis?: {
- shadowPresence: { coverage: number; intensity: number; sharpness: string; definition: number };
- shadowCharacteristics: { direction: string; length: string; density: number; falloff: string };
- shadowTypes: Array<{ type: 'cast' | 'form' | 'occlusion' | 'contact'; prominence: number; contribution: string }>;
- dimensionalEffect: { depth: number; volume: number; threedimensionality: number };
- };
- ambientAnalysis?: {
- ambientLevel: { strength: number; uniformity: number; contribution: number };
- lightingMood: { primary: string; intensity: number; emotional_impact: string[] };
- atmosphericEffects: { haze: number; glare: number; reflections: number; transparency: number };
- spatialPerception: { depth_enhancement: number; space_definition: number; focal_guidance: number };
- };
- };
- }
- // 需求指标接口
- interface RequirementMetric {
- id: string;
- category: 'color' | 'space' | 'material';
- name: string;
- value: any;
- unit?: string;
- range?: { min: number; max: number };
- description?: string;
- }
- // 协作评论接口
- interface CollaborationComment {
- id: string;
- author: string;
- role: 'customer-service' | 'designer' | 'client';
- content: string;
- timestamp: Date;
- requirementId?: string;
- status: 'pending' | 'resolved';
- }
- // 需求项接口
- interface RequirementItem {
- id: string;
- title: string;
- description: string;
- priority: 'high' | 'medium' | 'low';
- status: 'pending' | 'confirmed' | 'rejected';
- tags?: string[];
- metrics?: RequirementMetric[];
- comments?: CollaborationComment[];
- lastUpdated: Date;
- showComments?: boolean;
- }
- // 上传文件接口
- interface UploadedFile {
- id: string;
- name: string;
- url: string;
- size?: number;
- type: 'image' | 'cad' | 'text';
- preview?: string;
- }
- @Component({
- selector: 'app-requirements-confirm-card',
- standalone: true,
- imports: [CommonModule, FormsModule, ReactiveFormsModule, UploadSuccessModalComponent, GlobalPromptComponent, FullReportOverlayComponent],
- providers: [CadAnalysisService],
- templateUrl: './requirements-confirm-card.html',
- styleUrls: ['./requirements-confirm-card.scss'],
- changeDetection: ChangeDetectionStrategy.Default // 确保使用默认变更检测策略
- })
- export class RequirementsConfirmCardComponent implements OnInit, OnDestroy {
- @Input() projectId?: string;
- @Output() requirementConfirmed = new EventEmitter<RequirementItem>();
- @Output() progressUpdated = new EventEmitter<number>();
- @Output() stageCompleted = new EventEmitter<{ stage: string; allStagesCompleted: boolean }>();
- @Output() dataUpdated = new EventEmitter<any>(); // 新增:实时数据更新事件
- // 表单
- materialForm!: FormGroup;
- commentForm!: FormGroup;
- materialUploadForm!: FormGroup;
- // 数据
- materialFiles: MaterialFile[] = [];
- materials: MaterialFile[] = [];
- requirementMetrics: RequirementMetric[] = [];
- collaborationComments: CollaborationComment[] = [];
- requirementItems: RequirementItem[] = [];
- // 状态
- activeTab: 'materials' | 'mapping' | 'collaboration' | 'progress' = 'materials';
- isUploading = false;
- isAnalyzing = false;
- dragOver = false;
- showConsistencyWarning = false;
- warningMessage = '';
- // 自动保存相关状态
- autoSaveEnabled = true;
- lastSaveTime?: Date;
- hasUnsavedChanges = false;
- isSaving = false;
- saveStatus: 'saved' | 'saving' | 'error' | 'unsaved' = 'saved';
- // 流程状态
- stageCompletionStatus = {
- materialAnalysis: false,
- requirementMapping: false,
- collaboration: false,
- progressReview: false
- };
- // 自动保存定时器
- private autoSaveTimer?: any;
- // 需求指标
- colorIndicators = {
- mainColor: { r: 255, g: 230, b: 180 },
- colorTemperature: 2700,
- colorRange: '暖色调',
- saturation: 70,
- brightness: 80,
- contrast: 60
- };
- spaceIndicators = {
- lineRatio: 60,
- blankRatio: 30,
- flowWidth: 0.9,
- aspectRatio: 1.6,
- ceilingHeight: 2.8,
- lightingLevel: 300
- };
- materialIndicators = {
- fabricRatio: 50,
- woodRatio: 30,
- metalRatio: 20,
- smoothness: 7,
- glossiness: 4,
- texture: 6
- };
- // 指标范围配置
- indicatorRanges = {
- color: {
- r: { min: 0, max: 255 },
- g: { min: 0, max: 255 },
- b: { min: 0, max: 255 },
- temperature: { min: 2000, max: 6500 },
- saturation: { min: 0, max: 100 },
- brightness: { min: 0, max: 100 },
- contrast: { min: 0, max: 100 }
- },
- space: {
- lineRatio: { min: 0, max: 100 },
- blankRatio: { min: 10, max: 80 },
- flowWidth: { min: 0.6, max: 1.5 },
- aspectRatio: { min: 1.0, max: 3.0 },
- ceilingHeight: { min: 2.4, max: 4.0 },
- lightingLevel: { min: 100, max: 800 }
- },
- material: {
- fabricRatio: { min: 0, max: 100 },
- woodRatio: { min: 0, max: 100 },
- metalRatio: { min: 0, max: 100 },
- smoothness: { min: 1, max: 10 },
- glossiness: { min: 1, max: 10 },
- texture: { min: 1, max: 10 }
- }
- };
- // 预设数据
- presetAtmospheres = [
- { name: '温馨暖调', rgb: '255,230,180', colorTemp: '2700-3000K', materials: ['木质', '布艺'] },
- { name: '现代冷调', rgb: '200,220,240', colorTemp: '5000-6000K', materials: ['金属', '玻璃'] },
- { name: '自然清新', rgb: '220,240,220', colorTemp: '4000-4500K', materials: ['竹木', '石材'] }
- ];
- // 一致性检查
- consistencyWarnings: string[] = [];
- historyStates: any[] = [];
- // 上传成功弹窗相关
- showUploadSuccessModal = false;
- uploadedFiles: { id: string; name: string; url: string; size?: number; type?: 'image' | 'cad' | 'text'; preview?: string }[] = [];
- uploadType: 'image' | 'document' | 'mixed' = 'image';
- colorAnalysisResult?: ColorAnalysisResult;
- cadAnalysisResult?: CadAnalysisResult;
- isAnalyzingColors = false; // 新增:色彩分析状态
- // 全局提示组件状态
- showGlobalPrompt = false;
- promptMode: 'fullscreen' | 'corner' = 'corner';
- promptPosition: 'top-right' | 'bottom-right' = 'bottom-right';
- promptTitle = '上传成功!';
- promptMessage = '';
- // 全屏报告覆盖层
- showFullReportOverlay = false;
- // 需求映射测试相关属性
- testSteps = [
- { id: 'upload', name: '图片上传', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' },
- { id: 'analysis', name: '图片分析', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' },
- { id: 'mapping', name: '需求映射', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' },
- { id: 'preview', name: '氛围预览', status: 'pending' as 'pending' | 'in-progress' | 'completed' | 'error' }
- ];
-
- // 需求映射相关状态
- isGeneratingMapping = false;
- requirementMapping: RequirementMapping | null = null;
- mappingError: string | null = null;
- analysisError: string | null = null;
- analysisResult: ColorAnalysisResult | undefined = undefined;
-
- // 订阅管理
- private subscriptions: Subscription[] = [];
- constructor(
- private fb: FormBuilder,
- private cdr: ChangeDetectorRef,
- private colorAnalysisService: ColorAnalysisService,
- private cadAnalysisService: CadAnalysisService,
- private requirementMappingService: RequirementMappingService
- ) {}
- ngOnInit() {
- this.initializeForms();
- this.initializeRequirements();
- this.loadPresetMetrics();
-
- // 启用自动保存
- this.autoSaveEnabled = true;
-
- // 定期检查阶段完成状态
- setInterval(() => {
- this.checkStageCompletion();
- }, 5000);
- }
- ngOnDestroy(): void {
- // 清理自动保存定时器
- if (this.autoSaveTimer) {
- clearTimeout(this.autoSaveTimer);
- }
-
- // 清理订阅
- this.subscriptions.forEach(sub => sub.unsubscribe());
-
- // 清理对象URL
- this.uploadedFiles.forEach(file => {
- if (file.url.startsWith('blob:')) {
- URL.revokeObjectURL(file.url);
- }
- });
- }
- private initializeForms() {
- this.materialForm = this.fb.group({
- textContent: ['', Validators.required],
- atmosphereDescription: [''],
- residentInfo: [''],
- scenePreferences: [''],
- title: [''],
- content: ['']
- });
- this.commentForm = this.fb.group({
- content: ['', Validators.required],
- requirementId: ['']
- });
- this.materialUploadForm = this.fb.group({
- file: [''],
- textContent: ['', Validators.required]
- });
- }
- private initializeRequirements() {
- this.requirementItems = [
- {
- id: 'color-atmosphere',
- title: '色彩氛围',
- description: '整体色调和氛围营造',
- priority: 'high',
- status: 'pending',
- lastUpdated: new Date()
- },
- {
- id: 'space-layout',
- title: '空间布局',
- description: '功能分区和动线设计',
- priority: 'high',
- status: 'pending',
- lastUpdated: new Date()
- },
- {
- id: 'material-selection',
- title: '材质选择',
- description: '主要材质和质感要求',
- priority: 'medium',
- status: 'pending',
- lastUpdated: new Date()
- }
- ];
- }
- private loadPresetMetrics() {
- this.requirementMetrics = [
- {
- id: 'main-color',
- category: 'color',
- name: '主色调',
- value: { r: 255, g: 230, b: 180 },
- description: '空间主要色彩'
- },
- {
- id: 'color-temp',
- category: 'color',
- name: '色温',
- value: 3000,
- unit: 'K',
- range: { min: 2700, max: 6500 },
- description: '照明色温范围'
- },
- {
- id: 'wood-ratio',
- category: 'material',
- name: '木质占比',
- value: 60,
- unit: '%',
- range: { min: 0, max: 100 },
- description: '木质材料使用比例'
- }
- ];
- }
- // 素材上传功能
- onFileSelected(event: Event, type: 'text' | 'image' | 'cad') {
- const input = event.target as HTMLInputElement;
- if (input.files) {
- Array.from(input.files).forEach(file => {
- this.uploadFile(file, type);
- });
- }
- }
- onFileDrop(event: DragEvent, type: 'text' | 'image' | 'cad') {
- event.preventDefault();
- this.dragOver = false;
-
- if (event.dataTransfer?.files) {
- Array.from(event.dataTransfer.files).forEach(file => {
- this.uploadFile(file, type);
- });
- }
- }
- onDragOver(event: DragEvent) {
- event.preventDefault();
- this.dragOver = true;
- }
- onDragLeave(event: DragEvent) {
- event.preventDefault();
- this.dragOver = false;
- }
- private uploadFile(file: File, type: 'text' | 'image' | 'cad') {
- this.isUploading = true;
-
- // 模拟文件上传
- setTimeout(() => {
- const materialFile: MaterialFile = {
- id: this.generateId(),
- name: file.name,
- type: type,
- url: URL.createObjectURL(file),
- size: this.formatFileSize(file.size),
- uploadTime: new Date()
- };
- this.materialFiles.push(materialFile);
- this.materials.push(materialFile);
- this.isUploading = false;
-
- // 显示全局提示(角落模式,无遮罩,不遮挡操作)
- this.promptTitle = '上传成功!';
- this.promptMessage = `已上传文件:${file.name}`;
- this.promptMode = 'corner';
- this.promptPosition = 'bottom-right';
- this.showGlobalPrompt = true;
- // 显示上传成功弹窗
- this.showUploadSuccessModal = true;
- this.uploadedFiles = [{
- id: materialFile.id,
- name: file.name,
- url: materialFile.url || '',
- size: file.size,
- type: type === 'text' ? 'text' : type === 'image' ? 'image' : 'cad'
- }];
- this.uploadType = type === 'text' ? 'document' : type === 'image' ? 'image' : 'mixed';
-
- // 自动解析
- this.analyzeMaterial(materialFile);
- }, 1000);
- }
- // 文本提交
- onTextSubmit(): void {
- if (this.materialUploadForm.valid) {
- const formValue = this.materialUploadForm.value;
- const textMaterial: MaterialFile = {
- id: this.generateId(),
- name: '文本需求',
- type: 'text',
- content: formValue.textContent,
- uploadTime: new Date(),
- size: this.formatFileSize(formValue.textContent?.length || 0)
- };
-
- this.materialFiles.push(textMaterial);
- this.materials.push(textMaterial);
- this.analyzeMaterial(textMaterial);
- this.materialUploadForm.reset();
- }
- }
- // 素材解析功能
- private analyzeMaterial(material: MaterialFile): void {
- this.isAnalyzing = true;
-
- // CAD采用服务分析,其它类型保持模拟
- if (material.type === 'cad') {
- const fileUrl = material.url || '';
- this.cadAnalysisService.analyzeByUrl(fileUrl, material.name).subscribe({
- next: (result) => {
- this.cadAnalysisResult = result;
- const analysis: MaterialAnalysis = {
- structuralElements: result.structuralElements,
- spaceMetrics: result.spaceMetrics,
- flowMetrics: result.flowMetrics
- };
- material.analysis = analysis;
- this.isAnalyzing = false;
- this.updateRequirementsFromAnalysis(analysis);
- },
- error: () => {
- this.cadAnalysisService.simulateCadAnalysis(material.name).subscribe({
- next: (mock) => {
- this.cadAnalysisResult = mock;
- const analysis: MaterialAnalysis = {
- structuralElements: mock.structuralElements,
- spaceMetrics: mock.spaceMetrics,
- flowMetrics: mock.flowMetrics
- };
- material.analysis = analysis;
- this.isAnalyzing = false;
- this.updateRequirementsFromAnalysis(analysis);
- },
- error: () => {
- this.isAnalyzing = false;
- console.error('CAD分析失败');
- }
- });
- }
- });
- return;
- }
- // 非CAD类型模拟
- setTimeout(() => {
- let analysis: MaterialAnalysis = {};
- switch (material.type) {
- case 'text':
- analysis = this.analyzeTextMaterial(material);
- break;
- case 'image':
- analysis = this.analyzeImageMaterial(material);
- break;
- }
- material.analysis = analysis;
- this.isAnalyzing = false;
- this.updateRequirementsFromAnalysis(analysis);
- }, 1200);
- }
- private analyzeTextMaterial(material: MaterialFile): MaterialAnalysis {
- return {
- atmosphere: {
- description: '温馨暖调',
- rgb: '255,230,180',
- colorTemp: '2700-3000K'
- },
- residents: {
- type: '亲子家庭',
- details: '孩子年龄3-6岁'
- },
- scenes: {
- preference: '瑜伽爱好者',
- requirements: '需要瑜伽区收纳'
- },
- keywords: {
- positive: ['科技感', '温馨', '实用'],
- negative: ['复杂线条', '冷色调']
- }
- };
- }
- private analyzeImageMaterial(material: MaterialFile): MaterialAnalysis {
- return {
- mainColors: [
- { rgb: '255,230,180', percentage: 45 },
- { rgb: '200,180,160', percentage: 30 },
- { rgb: '180,160,140', percentage: 25 }
- ],
- colorTemperature: '3000K',
- materialRatio: [
- { material: '木质', percentage: 60 },
- { material: '布艺', percentage: 25 },
- { material: '金属', percentage: 15 }
- ],
- spaceRatio: 35
- };
- }
- private analyzeCADMaterial(material: MaterialFile): MaterialAnalysis {
- return {
- structuralElements: [
- { type: '承重柱', position: '客厅中央', changeable: false },
- { type: '门窗', position: '南墙', changeable: false }
- ],
- spaceMetrics: [
- { room: '客厅', ratio: '16:9', width: '4.2m' },
- { room: '卧室', ratio: '4:3', width: '3.6m' }
- ],
- flowMetrics: [
- { area: '主通道', width: '1.2m', compliance: true },
- { area: '次通道', width: '0.8m', compliance: false }
- ]
- };
- }
- private updateRequirementsFromAnalysis(analysis: MaterialAnalysis) {
- if (analysis.atmosphere?.rgb) {
- const colorMetric = this.requirementMetrics.find(m => m.id === 'main-color');
- if (colorMetric) {
- const [r, g, b] = analysis.atmosphere.rgb.split(',').map(Number);
- colorMetric.value = { r, g, b };
- }
- }
-
- if (analysis.materialRatio) {
- const woodRatio = analysis.materialRatio.find(m => m.material === '木质');
- if (woodRatio) {
- const woodMetric = this.requirementMetrics.find(m => m.id === 'wood-ratio');
- if (woodMetric) {
- woodMetric.value = woodRatio.percentage;
- }
- }
- }
- }
- // 需求确认功能
- confirmRequirement(requirementId: string) {
- // 检查是否可以进行需求确认操作
- if (!this.canProceedToNextStage('materialAnalysis')) {
- alert('请先完成素材分析阶段的所有必要操作');
- return;
- }
-
- const requirement = this.requirementItems.find(r => r.id === requirementId);
- if (requirement) {
- requirement.status = 'confirmed';
- requirement.lastUpdated = new Date();
- this.requirementConfirmed.emit(requirement);
- this.updateProgress();
- this.triggerAutoSave();
-
- // 检查阶段完成状态
- this.checkStageCompletion();
- }
- }
- rejectRequirement(requirementId: string, reason?: string) {
- // 检查是否可以进行需求拒绝操作
- if (!this.canProceedToNextStage('materialAnalysis')) {
- alert('请先完成素材分析阶段的所有必要操作');
- return;
- }
-
- const requirement = this.requirementItems.find(r => r.id === requirementId);
- if (requirement) {
- requirement.status = 'rejected';
- requirement.lastUpdated = new Date();
-
- if (reason) {
- this.addCommentToRequirement(requirementId, reason, 'system');
- }
-
- this.updateProgress();
- this.triggerAutoSave();
-
- // 检查阶段完成状态
- this.checkStageCompletion();
- }
- }
- // 协作功能
- addComment() {
- if (this.commentForm.valid) {
- const comment: CollaborationComment = {
- id: this.generateId(),
- author: '当前用户',
- role: 'designer',
- content: this.commentForm.value.content,
- timestamp: new Date(),
- requirementId: this.commentForm.value.requirementId,
- status: 'pending'
- };
-
- this.collaborationComments.push(comment);
- this.commentForm.reset();
- this.triggerAutoSave();
-
- // 检查阶段完成状态
- this.checkStageCompletion();
- }
- }
- resolveComment(commentId: string) {
- const comment = this.collaborationComments.find(c => c.id === commentId);
- if (comment) {
- comment.status = 'resolved';
- this.triggerAutoSave();
-
- // 检查阶段完成状态
- this.checkStageCompletion();
- }
- }
- // 进度管理
- private updateProgress() {
- const totalRequirements = this.requirementItems.length;
- const confirmedRequirements = this.requirementItems.filter(r => r.status === 'confirmed').length;
- const progress = totalRequirements > 0 ? (confirmedRequirements / totalRequirements) * 100 : 0;
-
- // 实时更新进度条
- this.updateProgressBar(progress);
- this.progressUpdated.emit(progress);
-
- // 检查是否完成所有需求
- if (progress === 100) {
- this.onRequirementCommunicationComplete();
- }
- }
- private updateProgressBar(progress: number): void {
- // 更新进度条显示
- const progressBar = document.querySelector('.progress-bar-fill') as HTMLElement;
- if (progressBar) {
- progressBar.style.width = `${progress}%`;
- }
-
- // 更新进度文本
- const progressText = document.querySelector('.progress-text') as HTMLElement;
- if (progressText) {
- progressText.textContent = `${Math.round(progress)}%`;
- }
-
- // 添加进度动画效果
- this.animateProgressUpdate(progress);
- }
- private animateProgressUpdate(progress: number): void {
- // 添加进度更新的视觉反馈
- const progressContainer = document.querySelector('.progress-container') as HTMLElement;
- if (progressContainer) {
- progressContainer.classList.add('progress-updated');
- setTimeout(() => {
- progressContainer.classList.remove('progress-updated');
- }, 500);
- }
- }
- // 需求沟通阶段完成处理
- private onRequirementCommunicationComplete(): void {
- console.log('需求沟通阶段完成,开始同步关键信息');
- this.syncKeyInfoToSolutionConfirmation();
- }
- // 同步关键信息到方案确认阶段
- private syncKeyInfoToSolutionConfirmation(): void {
- const keyInfo = {
- colorAtmosphere: {
- mainColor: this.colorIndicators.mainColor,
- colorTemperature: this.colorIndicators.colorTemperature,
- saturation: this.colorIndicators.saturation,
- brightness: this.colorIndicators.brightness
- },
- spaceStructure: {
- lineRatio: this.spaceIndicators.lineRatio,
- blankRatio: this.spaceIndicators.blankRatio,
- flowWidth: this.spaceIndicators.flowWidth
- },
- materialWeights: {
- fabricRatio: this.materialIndicators.fabricRatio,
- woodRatio: this.materialIndicators.woodRatio,
- metalRatio: this.materialIndicators.metalRatio,
- smoothness: this.materialIndicators.smoothness
- },
- presetAtmosphere: this.getSelectedPresetAtmosphere()
- };
- // 触发同步事件
- this.requirementConfirmed.emit({
- id: 'requirement-sync',
- title: '需求沟通完成',
- description: '关键信息已同步至方案确认阶段',
- priority: 'high',
- status: 'confirmed',
- lastUpdated: new Date(),
- metrics: this.convertToMetrics(keyInfo)
- });
- // 启动交付执行流程
- setTimeout(() => {
- this.startDeliveryExecution();
- }, 1000);
- }
- private getSelectedPresetAtmosphere(): any {
- // 根据当前颜色指标找到最匹配的预设氛围
- const currentRgb = `${this.colorIndicators.mainColor.r},${this.colorIndicators.mainColor.g},${this.colorIndicators.mainColor.b}`;
- return this.presetAtmospheres.find(preset => preset.rgb === currentRgb) || this.presetAtmospheres[0];
- }
- private convertToMetrics(keyInfo: any): RequirementMetric[] {
- return [
- {
- id: 'color-sync',
- category: 'color',
- name: '色彩氛围',
- value: keyInfo.colorAtmosphere
- },
- {
- id: 'space-sync',
- category: 'space',
- name: '空间结构',
- value: keyInfo.spaceStructure
- },
- {
- id: 'material-sync',
- category: 'material',
- name: '材质权重',
- value: keyInfo.materialWeights
- }
- ];
- }
- // 启动交付执行流程
- private startDeliveryExecution(): void {
- console.log('启动交付执行流程');
-
- // 显示执行启动提示
- this.showExecutionStartNotification();
-
- // 这里可以触发路由跳转或其他业务逻辑
- // 例如:this.router.navigate(['/project', this.projectId, 'execution']);
- }
- private showExecutionStartNotification(): void {
- // 显示执行流程启动的通知
- const notification = document.createElement('div');
- notification.className = 'execution-notification';
- notification.innerHTML = `
- <div class="notification-content">
- <svg viewBox="0 0 24 24" fill="currentColor">
- <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
- </svg>
- <span>交付执行流程已启动</span>
- </div>
- `;
-
- document.body.appendChild(notification);
-
- setTimeout(() => {
- notification.remove();
- }, 3000);
- }
- getProgressPercentage(): number {
- if (this.requirementItems.length === 0) return 0;
- const confirmedCount = this.requirementItems.filter(r => r.status === 'confirmed').length;
- return Math.round((confirmedCount / this.requirementItems.length) * 100);
- }
- // 处理优先级更新
- onPriorityChange(requirementId: string, event: Event): void {
- const target = event.target as HTMLSelectElement;
- this.updateRequirementPriority(requirementId, target.value as 'high' | 'medium' | 'low');
- }
- // 检查需求是否有待处理评论
- hasUnreadComments(requirementId: string): boolean {
- return this.getCommentsForRequirement(requirementId).some(c => c.status === 'pending');
- }
- // 处理历史状态选择
- onHistoryStateChange(event: Event): void {
- const target = event.target as HTMLSelectElement;
- const index = +target.value;
- if (index >= 0) {
- this.restoreHistoryState(index);
- }
- }
- // 获取指定状态的需求数量
- getRequirementCountByStatus(status: 'confirmed' | 'pending' | 'rejected'): number {
- return (this.requirementItems || []).filter(r => r.status === status).length;
- }
- // 获取状态百分比
- getStatusPercentage(status: 'confirmed' | 'pending' | 'rejected'): number {
- const total = this.requirementItems.length;
- if (total === 0) return 0;
-
- const statusCount = this.getRequirementCountByStatus(status);
- return Math.round((statusCount / total) * 100);
- }
- // 指标映射功能
- updateMetricValue(metricId: string, value: any) {
- const metric = this.requirementMetrics.find(m => m.id === metricId);
- if (metric) {
- metric.value = value;
- this.checkConsistency();
- }
- }
- // 滑动条数值同步方法
- onSliderChange(key: string, value: number): void {
- console.log(`滑动条变化: ${key} = ${value}`);
- console.log('变化前的mainColor:', JSON.stringify(this.colorIndicators.mainColor));
-
- // 直接更新数据,不需要额外的updateIndicatorValue调用
- // 因为使用了双向绑定,数据已经自动更新
- if (key === 'r' || key === 'g' || key === 'b') {
- // 确保RGB值在有效范围内
- const range = this.getIndicatorRange(key);
- if (range) {
- const clampedValue = Math.max(range.min, Math.min(range.max, value));
- this.colorIndicators.mainColor[key as keyof typeof this.colorIndicators.mainColor] = clampedValue;
- console.log(`RGB值已更新: ${key} = ${clampedValue}`);
- console.log('变化后的mainColor:', JSON.stringify(this.colorIndicators.mainColor));
- }
-
- // 触发颜色指标更新
- this.updateColorIndicator('mainColor', this.colorIndicators.mainColor);
- } else {
- // 处理其他颜色指标
- this.updateIndicatorValue(key, value);
- }
-
- this.triggerAutoSave(); // 触发自动保存
- this.checkStageCompletion(); // 检查阶段完成状态
-
- // 发射实时数据更新事件
- this.emitDataUpdate();
-
- // 强制触发变更检测
- this.cdr.detectChanges();
- console.log('滑动条变更检测已触发');
- }
- onInputChange(key: string, value: number): void {
- console.log(`输入框变化: ${key} = ${value}`);
- console.log('变化前的mainColor:', JSON.stringify(this.colorIndicators.mainColor));
-
- // 直接更新数据,不需要额外的updateIndicatorValue调用
- // 因为使用了双向绑定,数据已经自动更新
- if (key === 'r' || key === 'g' || key === 'b') {
- // 确保RGB值在有效范围内
- const range = this.getIndicatorRange(key);
- if (range) {
- const clampedValue = Math.max(range.min, Math.min(range.max, value));
- this.colorIndicators.mainColor[key as keyof typeof this.colorIndicators.mainColor] = clampedValue;
- console.log(`RGB值已更新: ${key} = ${clampedValue}`);
- console.log('变化后的mainColor:', JSON.stringify(this.colorIndicators.mainColor));
- }
-
- // 触发颜色指标更新
- this.updateColorIndicator('mainColor', this.colorIndicators.mainColor);
- } else {
- // 处理其他颜色指标
- this.updateIndicatorValue(key, value);
- }
-
- this.triggerAutoSave();
-
- // 发射实时数据更新事件
- this.emitDataUpdate();
-
- // 强制触发变更检测
- this.cdr.detectChanges();
- console.log('输入框变更检测已触发');
- }
- validateInput(key: string, value: string): void {
- const numValue = parseFloat(value);
- if (isNaN(numValue)) {
- // 如果输入无效,恢复原值
- this.restoreIndicatorValue(key);
- return;
- }
-
- const range = this.getIndicatorRange(key);
- if (range) {
- const clampedValue = Math.max(range.min, Math.min(range.max, numValue));
- this.updateIndicatorValue(key, clampedValue);
- }
- }
- private updateIndicatorValue(key: string, value: number): void {
- console.log(`updateIndicatorValue调用: ${key} = ${value}`);
-
- // 更新颜色指标
- if (key in this.colorIndicators) {
- if (key === 'r' || key === 'g' || key === 'b') {
- // 创建新的mainColor对象以确保变更检测
- const oldColor = { ...this.colorIndicators.mainColor };
- this.colorIndicators.mainColor = {
- ...this.colorIndicators.mainColor,
- [key]: value
- };
- console.log(`RGB更新: ${key}从${oldColor[key as keyof typeof oldColor]}变为${value}`,
- '新mainColor:', this.colorIndicators.mainColor);
- this.updateColorIndicator('mainColor', this.colorIndicators.mainColor);
- } else {
- (this.colorIndicators as any)[key] = value;
- this.updateColorIndicator(key, value);
- }
- return;
- }
- // 更新空间指标
- if (key in this.spaceIndicators) {
- (this.spaceIndicators as any)[key] = value;
- this.updateSpaceIndicator(key, value);
- return;
- }
- // 更新材质指标
- if (key in this.materialIndicators) {
- (this.materialIndicators as any)[key] = value;
- this.updateMaterialIndicator(key, value);
- return;
- }
- }
- private restoreIndicatorValue(key: string): void {
- // 这里可以从历史状态或默认值恢复
- console.log(`恢复指标值: ${key}`);
- }
- private getIndicatorRange(key: string): { min: number; max: number } | null {
- // 检查颜色范围
- if (key === 'r' || key === 'g' || key === 'b') {
- return this.indicatorRanges.color[key as keyof typeof this.indicatorRanges.color];
- }
- if (key in this.indicatorRanges.color) {
- return (this.indicatorRanges.color as any)[key];
- }
- // 检查空间范围
- if (key in this.indicatorRanges.space) {
- return (this.indicatorRanges.space as any)[key];
- }
- // 检查材质范围
- if (key in this.indicatorRanges.material) {
- return (this.indicatorRanges.material as any)[key];
- }
- return null;
- }
- // 指标更新方法
- updateColorIndicator(type: string, value?: any): void {
- switch (type) {
- case 'mainColor':
- if (value && typeof value === 'object' && 'r' in value) {
- this.colorIndicators.mainColor = { ...value }; // 创建新对象以触发变更检测
- console.log('mainColor更新后:', this.colorIndicators.mainColor);
- }
- break;
- case 'colorTemperature':
- // 色温更新时不需要改变颜色值,只是触发一致性检查
- break;
- case 'saturation':
- // 饱和度更新时不需要改变颜色值,只是触发一致性检查
- break;
- }
-
- console.log(`更新颜色指示器 ${type}:`, value, '当前RGB:', this.getRgbString());
- this.checkConsistency();
- this.updatePreview();
- // 强制触发变更检测
- this.cdr.detectChanges();
- console.log('变更检测已触发');
- }
- updateSpaceIndicator(key: string, value: number) {
- if (key in this.spaceIndicators) {
- (this.spaceIndicators as any)[key] = value;
- this.checkConsistency();
- }
- }
- updateMaterialIndicator(key: string, value: number) {
- if (key in this.materialIndicators) {
- (this.materialIndicators as any)[key] = value;
- this.checkConsistency();
- this.normalizeMaterialRatios();
- }
- }
- // 材质比例归一化
- private normalizeMaterialRatios() {
- const total = this.materialIndicators.fabricRatio +
- this.materialIndicators.woodRatio +
- this.materialIndicators.metalRatio;
-
- if (total > 100) {
- const scale = 100 / total;
- this.materialIndicators.fabricRatio = Math.round(this.materialIndicators.fabricRatio * scale);
- this.materialIndicators.woodRatio = Math.round(this.materialIndicators.woodRatio * scale);
- this.materialIndicators.metalRatio = 100 - this.materialIndicators.fabricRatio - this.materialIndicators.woodRatio;
- }
- }
- // 预览更新
- private updatePreview() {
- // 移除直接DOM操作,依赖Angular的属性绑定
- console.log('updatePreview调用,当前RGB:', this.getRgbString());
- // 不再直接操作DOM,让Angular的变更检测处理
- }
- // 获取RGB字符串
- getRgbString(): string {
- const { r, g, b } = this.colorIndicators.mainColor;
- const rgbString = `rgb(${r}, ${g}, ${b})`;
- console.log('getRgbString调用:', rgbString, '完整mainColor对象:', this.colorIndicators.mainColor);
- return rgbString;
- }
- // 获取色温描述
- getColorTemperatureDescription(): string {
- const temp = this.colorIndicators.colorTemperature;
- if (temp < 3000) return '暖色调';
- if (temp < 4000) return '中性色调';
- if (temp < 5000) return '自然色调';
- return '冷色调';
- }
- applyPresetAtmosphere(preset: any) {
- const rgbMatch = preset.rgb.match(/(\d+),(\d+),(\d+)/);
- if (rgbMatch) {
- this.colorIndicators.mainColor = {
- r: parseInt(rgbMatch[1]),
- g: parseInt(rgbMatch[2]),
- b: parseInt(rgbMatch[3])
- };
- }
- const tempMatch = preset.colorTemp.match(/(\d+)/);
- if (tempMatch) {
- this.colorIndicators.colorTemperature = parseInt(tempMatch[1]);
- }
- if (preset.materials.includes('木质')) {
- this.materialIndicators.woodRatio = 60;
- this.materialIndicators.fabricRatio = 30;
- this.materialIndicators.metalRatio = 10;
- } else if (preset.materials.includes('金属')) {
- this.materialIndicators.metalRatio = 50;
- this.materialIndicators.woodRatio = 20;
- this.materialIndicators.fabricRatio = 30;
- }
- this.updatePreview();
- this.checkConsistency();
- }
- // 一致性检查
- private checkConsistency() {
- this.consistencyWarnings = [];
-
- if (this.colorIndicators.colorTemperature < 3000 &&
- this.colorIndicators.mainColor.r > 200 &&
- this.colorIndicators.mainColor.g < 150) {
- this.consistencyWarnings.push('暖调氛围与冷色调RGB值存在矛盾');
- }
-
- if (this.materialIndicators.fabricRatio > 70 && this.colorIndicators.colorTemperature > 5000) {
- this.consistencyWarnings.push('高布艺占比与冷色调可能不协调');
- }
-
- if (this.spaceIndicators.lineRatio > 80 && this.materialIndicators.woodRatio > 60) {
- this.consistencyWarnings.push('高直线条占比与高木质占比可能过于刚硬');
- }
- }
- // 协作批注功能
- addCommentToRequirement(requirementId: string, content: string, author: string = '当前用户'): void {
- const comment: CollaborationComment = {
- id: this.generateId(),
- author,
- role: 'designer',
- content,
- timestamp: new Date(),
- requirementId,
- status: 'pending'
- };
-
- this.collaborationComments.push(comment);
- this.updateProgress();
- }
- // 优先级排序功能
- updateRequirementPriority(requirementId: string, priority: 'high' | 'medium' | 'low'): void {
- const requirement = this.requirementItems.find(r => r.id === requirementId);
- if (requirement) {
- requirement.priority = priority;
- requirement.lastUpdated = new Date();
- this.sortRequirementsByPriority();
- }
- }
- sortRequirementsByPriority(): void {
- const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 };
- this.requirementItems.sort((a, b) => {
- return priorityOrder[b.priority] - priorityOrder[a.priority];
- });
- }
- // 历史记录功能
- saveCurrentState(): void {
- const currentState = {
- timestamp: new Date(),
- colorIndicators: { ...this.colorIndicators },
- spaceIndicators: { ...this.spaceIndicators },
- materialIndicators: { ...this.materialIndicators },
- requirementItems: this.requirementItems.map((r: RequirementItem) => ({ ...r })),
- author: '当前用户'
- };
-
- this.historyStates.push(currentState);
-
- if (this.historyStates.length > 10) {
- this.historyStates.shift();
- }
- }
- restoreHistoryState(index: number): void {
- if (index >= 0 && index < this.historyStates.length) {
- const state = this.historyStates[index];
- this.colorIndicators = { ...state.colorIndicators };
- this.spaceIndicators = { ...state.spaceIndicators };
- this.materialIndicators = { ...state.materialIndicators };
- this.requirementItems = state.requirementItems.map((r: RequirementItem) => ({ ...r }));
-
- this.updatePreview();
- this.checkConsistency();
- }
- }
- // 获取未解决的评论数量
- getUnresolvedCommentsCount(): number {
- return this.collaborationComments.filter(c => c.status === 'pending').length;
- }
- // 获取需求的评论
- getCommentsForRequirement(requirementId: string): CollaborationComment[] {
- return this.collaborationComments.filter(comment => comment.requirementId === requirementId) || [];
- }
- // 获取状态样式类
- getStatusClass(status: string): string {
- return status;
- }
- // 工具方法
- private generateId(): string {
- return Math.random().toString(36).substr(2, 9);
- }
- private formatFileSize(bytes: number): string {
- if (bytes === 0) return '0 Bytes';
- const k = 1024;
- const sizes = ['Bytes', 'KB', 'MB', 'GB'];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
- }
- // 删除素材
- removeMaterial(materialId: string) {
- const index = this.materialFiles.findIndex(m => m.id === materialId);
- if (index > -1) {
- const material = this.materialFiles[index];
- if (material.url) {
- URL.revokeObjectURL(material.url);
- }
- this.materialFiles.splice(index, 1);
- }
-
- const materialsIndex = this.materials.findIndex(m => m.id === materialId);
- if (materialsIndex > -1) {
- this.materials.splice(materialsIndex, 1);
- }
- }
- // 切换标签页
- switchTab(tab: 'materials' | 'mapping' | 'collaboration' | 'progress') {
- this.activeTab = tab;
- }
- // 获取需求状态文本
- getRequirementStatusText(status: string): string {
- const statusMap: { [key: string]: string } = {
- 'pending': '待确认',
- 'confirmed': '已确认',
- 'rejected': '已拒绝'
- };
- return statusMap[status] || status;
- }
- // 获取优先级文本
- getPriorityText(priority: string): string {
- const priorityMap: { [key: string]: string } = {
- 'high': '高',
- 'medium': '中',
- 'low': '低'
- };
- return priorityMap[priority] || priority;
- }
- // 刷新进度(保留用于手动刷新,但不再强制要求)
- refreshProgress(): void {
- // 重新计算进度
- this.updateProgress();
-
- // 更新进度条显示
- const progress = this.getProgressPercentage();
- this.updateProgressBar(progress);
-
- // 检查阶段完成状态
- this.checkStageCompletion();
-
- // 触发进度更新事件
- this.progressUpdated.emit(progress);
-
- console.log('进度已手动刷新:', progress + '%');
- }
- // 自动保存功能
- private triggerAutoSave(): void {
- if (!this.autoSaveEnabled) return;
-
- this.hasUnsavedChanges = true;
- this.saveStatus = 'unsaved';
-
- // 清除之前的定时器
- if (this.autoSaveTimer) {
- clearTimeout(this.autoSaveTimer);
- }
-
- // 设置新的自动保存定时器(延迟1秒)
- this.autoSaveTimer = setTimeout(() => {
- this.performAutoSave();
- }, 1000);
- }
- private async performAutoSave(): Promise<void> {
- if (this.isSaving) return;
-
- this.isSaving = true;
- this.saveStatus = 'saving';
-
- try {
- // 收集所有需要保存的数据
- const saveData = this.collectSaveData();
-
- // 模拟保存操作(实际项目中这里会调用API)
- await this.saveToServer(saveData);
-
- this.hasUnsavedChanges = false;
- this.saveStatus = 'saved';
- this.lastSaveTime = new Date();
-
- console.log('自动保存成功:', new Date().toLocaleTimeString());
- } catch (error) {
- this.saveStatus = 'error';
- console.error('自动保存失败:', error);
- } finally {
- this.isSaving = false;
- }
- }
- // 手动保存
- async manualSave(): Promise<void> {
- if (this.isSaving) return;
-
- // 清除自动保存定时器
- if (this.autoSaveTimer) {
- clearTimeout(this.autoSaveTimer);
- }
-
- await this.performAutoSave();
- }
- private collectSaveData(): any {
- return {
- projectId: this.projectId,
- colorIndicators: this.colorIndicators,
- spaceIndicators: this.spaceIndicators,
- materialIndicators: this.materialIndicators,
- requirementItems: this.requirementItems,
- requirementMetrics: this.requirementMetrics,
- materialFiles: this.materialFiles,
- collaborationComments: this.collaborationComments,
- stageCompletionStatus: this.stageCompletionStatus,
- lastUpdated: new Date()
- };
- }
- private async saveToServer(data: any): Promise<void> {
- // 模拟API调用延迟
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- // 模拟90%成功率
- if (Math.random() > 0.1) {
- resolve();
- } else {
- reject(new Error('网络错误'));
- }
- }, 500);
- });
- }
- // 检查阶段完成状态
- private checkStageCompletion(): void {
- // 检查素材分析阶段 - 需要有素材文件且都已分析
- this.stageCompletionStatus.materialAnalysis = this.materialFiles.length > 0 &&
- this.materialFiles.every(m => m.analysis);
-
- // 检查需求映射阶段 - 需要有确认的需求项,或者滑动条数据已调整且保存
- const hasConfirmedRequirements = this.requirementItems.length > 0 &&
- this.requirementItems.some(r => r.status === 'confirmed');
- const hasAdjustedIndicators = this.hasIndicatorChanges();
- this.stageCompletionStatus.requirementMapping = hasConfirmedRequirements ||
- (hasAdjustedIndicators && this.saveStatus === 'saved');
-
- // 检查协作验证阶段 - 需要有协作评论或需求评论
- this.stageCompletionStatus.collaboration = this.collaborationComments.length > 0 ||
- this.requirementItems.some(r => r.comments && r.comments.length > 0);
-
- // 检查进度审查阶段 - 需要进度达到80%以上
- this.stageCompletionStatus.progressReview = this.getProgressPercentage() >= 80;
-
- console.log('阶段完成状态更新:', this.stageCompletionStatus);
-
- // 检查是否所有阶段都已完成
- const allStagesCompleted = Object.values(this.stageCompletionStatus).every(status => status);
-
- // 发射阶段完成事件
- if (allStagesCompleted) {
- this.stageCompleted.emit({ stage: 'requirements-communication', allStagesCompleted: true });
- }
- }
- // 检查指示器是否有变化
- private hasIndicatorChanges(): boolean {
- // 检查颜色指示器是否有变化(与默认值比较)
- const defaultColorIndicators = {
- mainColor: { r: 255, g: 230, b: 180 },
- colorTemperature: 2700,
- colorRange: '暖色调',
- saturation: 70,
- brightness: 80,
- contrast: 60
- };
-
- const defaultSpaceIndicators = {
- lineRatio: 60,
- blankRatio: 30,
- flowWidth: 0.9,
- aspectRatio: 1.6,
- ceilingHeight: 2.8,
- lightingLevel: 300
- };
-
- const defaultMaterialIndicators = {
- fabricRatio: 50,
- woodRatio: 30,
- metalRatio: 20,
- smoothness: 7,
- glossiness: 4,
- texture: 6
- };
-
- // 检查颜色指示器变化
- const colorChanged = JSON.stringify(this.colorIndicators) !== JSON.stringify(defaultColorIndicators);
-
- // 检查空间指示器变化
- const spaceChanged = JSON.stringify(this.spaceIndicators) !== JSON.stringify(defaultSpaceIndicators);
-
- // 检查材质指示器变化
- const materialChanged = JSON.stringify(this.materialIndicators) !== JSON.stringify(defaultMaterialIndicators);
-
- return colorChanged || spaceChanged || materialChanged;
- }
- // 获取阶段状态文本
- getStageStatusText(stage: keyof typeof this.stageCompletionStatus): string {
- if (this.stageCompletionStatus[stage]) {
- return '已完成';
- } else {
- // 检查是否为未开始状态
- const stages = ['materialAnalysis', 'requirementMapping', 'collaboration', 'progressReview'];
- const currentIndex = stages.indexOf(stage);
-
- // 检查前面的阶段是否都已完成
- let allPreviousCompleted = true;
- for (let i = 0; i < currentIndex; i++) {
- if (!this.stageCompletionStatus[stages[i] as keyof typeof this.stageCompletionStatus]) {
- allPreviousCompleted = false;
- break;
- }
- }
-
- return allPreviousCompleted ? '进行中' : '未进行';
- }
- }
- // 获取阶段状态类名
- getStageStatusClass(stage: keyof typeof this.stageCompletionStatus): string {
- if (this.stageCompletionStatus[stage]) {
- return 'stage-completed';
- } else {
- // 检查是否为未开始状态
- const stages = ['materialAnalysis', 'requirementMapping', 'collaboration', 'progressReview'];
- const currentIndex = stages.indexOf(stage);
-
- // 检查前面的阶段是否都已完成
- let allPreviousCompleted = true;
- for (let i = 0; i < currentIndex; i++) {
- if (!this.stageCompletionStatus[stages[i] as keyof typeof this.stageCompletionStatus]) {
- allPreviousCompleted = false;
- break;
- }
- }
-
- return allPreviousCompleted ? 'stage-in-progress' : 'stage-pending';
- }
- }
- // 检查是否可以进入下一阶段
- canProceedToNextStage(currentStage: keyof typeof this.stageCompletionStatus): boolean {
- const stages = Object.keys(this.stageCompletionStatus) as (keyof typeof this.stageCompletionStatus)[];
- const currentIndex = stages.indexOf(currentStage);
-
- // 检查当前阶段之前的所有阶段是否都已完成
- for (let i = 0; i <= currentIndex; i++) {
- if (!this.stageCompletionStatus[stages[i]]) {
- return false;
- }
- }
-
- return true;
- }
- // 获取保存状态文本
- getSaveStatusText(): string {
- switch (this.saveStatus) {
- case 'saved': return this.lastSaveTime ? `已保存 ${this.lastSaveTime.toLocaleTimeString()}` : '已保存';
- case 'saving': return '保存中...';
- case 'error': return '保存失败';
- case 'unsaved': return '有未保存的更改';
- default: return '';
- }
- }
- // 获取保存状态图标
- getSaveStatusIcon(): string {
- switch (this.saveStatus) {
- case 'saved': return '✓';
- case 'saving': return '⏳';
- case 'error': return '⚠';
- case 'unsaved': return '●';
- default: return '';
- }
- }
- // 上传成功弹窗相关方法
- onModalClose(): void {
- this.showUploadSuccessModal = false;
- this.uploadedFiles = [];
- this.colorAnalysisResult = undefined;
- }
- // 全局提示关闭
- onPromptClose(): void {
- this.showGlobalPrompt = false;
- }
- onAnalyzeColors(): void {
- if (this.uploadedFiles.length > 0 && this.uploadType === 'image') {
- const imageFile = this.uploadedFiles[0];
-
- // 设置分析状态为true
- this.isAnalyzingColors = true;
-
- // 从URL获取文件数据并创建File对象
- fetch(imageFile.url)
- .then(response => {
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- return response.blob();
- })
- .then(blob => {
- // 创建包含实际文件数据的File对象
- const file = new File([blob], imageFile.name, { type: imageFile.type || 'image/jpeg' });
-
- // 使用模拟分析(在实际应用中应该调用真实的API)
- this.colorAnalysisService.simulateAnalysis(file).subscribe({
- next: (result) => {
- this.colorAnalysisResult = result;
- this.isAnalyzingColors = false; // 分析完成,设置状态为false
-
- // 可以在这里更新颜色指标
- if (result.colors.length > 0) {
- const mainColor = result.colors[0];
- this.updateColorIndicator('mainColor', mainColor.rgb);
- }
- // 新增:分析完成后向父级发射数据更新,包含色彩分析结果
- this.emitDataUpdate();
- },
- error: (error) => {
- console.error('颜色分析失败:', error);
- this.isAnalyzingColors = false; // 分析失败,也要重置状态
- }
- });
- })
- .catch(error => {
- console.error('获取文件数据失败:', error);
- this.isAnalyzingColors = false; // 获取文件失败,重置状态
- });
- }
- }
- onViewReport(): void {
- console.log('onViewReport被调用,当前colorAnalysisResult:', this.colorAnalysisResult);
- // 打开全屏报告覆盖层
- this.showFullReportOverlay = true;
-
- // 确保色彩分析结果传递给父组件用于右侧展示
- if (this.colorAnalysisResult) {
- console.log('调用emitDataUpdate传递色彩分析结果');
- this.emitDataUpdate();
- } else {
- console.log('没有色彩分析结果可传递');
- }
- }
- onCloseFullReport(): void {
- this.showFullReportOverlay = false;
- }
- // 新增:发射实时数据更新事件的方法
- private emitDataUpdate(): void {
- // 收集所有材料的详细分析数据
- const materialAnalysisData = this.materials.map(material => ({
- id: material.id,
- name: material.name,
- type: material.type,
- analysis: material.analysis || {}
- }));
- const currentData = {
- colorIndicators: this.colorIndicators || [],
- spaceIndicators: this.spaceIndicators || [],
- materialIndicators: this.materialIndicators || [],
- requirementItems: this.requirementItems || [],
- materials: this.materials || [],
- collaborationComments: this.collaborationComments || '',
- stageCompletionStatus: this.stageCompletionStatus || {},
- // 传递色彩分析结果到父级用于右侧展示
- colorAnalysisResult: this.colorAnalysisResult,
- // 新增:传递完整的材料分析数据,包含色彩、形体、质感、纹理、灯光分析
- materialAnalysisData: materialAnalysisData,
- // 新增:传递详细的分析结果
- detailedAnalysis: {
- enhancedColorAnalysis: this.extractEnhancedColorAnalysis(),
- formAnalysis: this.extractFormAnalysis(),
- textureAnalysis: this.extractTextureAnalysis(),
- patternAnalysis: this.extractPatternAnalysis(),
- lightingAnalysis: this.extractLightingAnalysis()
- }
- };
-
- console.log('emitDataUpdate被调用,准备发射数据:', {
- colorAnalysisResult: this.colorAnalysisResult,
- materials: this.materials,
- requirementItems: this.requirementItems,
- materialAnalysisData: materialAnalysisData,
- detailedAnalysis: currentData.detailedAnalysis
- });
-
- this.dataUpdated.emit(currentData);
- console.log('实时数据更新事件已发射:', currentData);
- }
- // 提取增强色彩分析数据
- private extractEnhancedColorAnalysis(): any {
- const colorAnalyses = this.materials
- .filter(m => m.analysis?.enhancedColorAnalysis)
- .map(m => m.analysis!.enhancedColorAnalysis);
-
- if (colorAnalyses.length === 0) return null;
-
- // 合并所有色彩分析数据
- return colorAnalyses.reduce((merged, current) => ({
- ...merged,
- ...current
- }), {});
- }
- // 提取形体分析数据
- private extractFormAnalysis(): any {
- const formAnalyses = this.materials
- .filter(m => m.analysis?.formAnalysis)
- .map(m => m.analysis!.formAnalysis);
-
- if (formAnalyses.length === 0) return null;
-
- return formAnalyses.reduce((merged, current) => ({
- ...merged,
- ...current
- }), {});
- }
- // 提取质感分析数据
- private extractTextureAnalysis(): any {
- const textureAnalyses = this.materials
- .filter(m => m.analysis?.textureAnalysis)
- .map(m => m.analysis!.textureAnalysis);
-
- if (textureAnalyses.length === 0) return null;
-
- return textureAnalyses.reduce((merged, current) => ({
- ...merged,
- ...current
- }), {});
- }
- // 提取纹理分析数据
- private extractPatternAnalysis(): any {
- const patternAnalyses = this.materials
- .filter(m => m.analysis?.patternAnalysis)
- .map(m => m.analysis!.patternAnalysis);
-
- if (patternAnalyses.length === 0) return null;
-
- return patternAnalyses.reduce((merged, current) => ({
- ...merged,
- ...current
- }), {});
- }
- // 提取灯光分析数据
- private extractLightingAnalysis(): any {
- const lightingAnalyses = this.materials
- .filter(m => m.analysis?.lightingAnalysis)
- .map(m => m.analysis!.lightingAnalysis);
-
- if (lightingAnalyses.length === 0) return null;
-
- return lightingAnalyses.reduce((merged, current) => ({
- ...merged,
- ...current
- }), {});
- }
- // 新增:图片与CAD文件预览方法
- previewImage(url?: string): void {
- if (!url) { return; }
- try {
- window.open(url, '_blank');
- } catch (e) {
- console.error('预览图片失败:', e);
- }
- }
- previewCad(url?: string): void {
- if (!url) { return; }
- try {
- window.open(url, '_blank');
- } catch (e) {
- console.error('预览CAD失败:', e);
- }
- }
- // 需求映射测试相关方法
- onFileSelected(event: Event): void {
- const input = event.target as HTMLInputElement;
- if (!input.files || input.files.length === 0) return;
- this.updateStepStatus('upload', 'in-progress');
- this.isUploading = true;
- try {
- const files = Array.from(input.files);
- this.uploadedFiles = files.map(file => ({
- id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
- name: file.name,
- url: URL.createObjectURL(file),
- size: file.size,
- type: 'image' as const,
- preview: URL.createObjectURL(file)
- }));
- // 模拟上传延迟
- setTimeout(() => {
- this.isUploading = false;
- this.updateStepStatus('upload', 'completed');
- this.showUploadModal = true;
-
- // 自动开始分析
- this.startAnalysis();
- }, 1000);
- } catch (error) {
- console.error('文件上传失败:', error);
- this.isUploading = false;
- this.updateStepStatus('upload', 'error');
- }
- }
- // 开始分析
- startAnalysis(): void {
- if (this.uploadedFiles.length === 0) return;
- this.updateStepStatus('analysis', 'in-progress');
- this.isAnalyzing = true;
- this.analysisError = null;
- // 使用第一个文件进行分析
- const firstFile = this.uploadedFiles[0];
-
- // 添加null检查和错误处理
- if (!firstFile) {
- this.analysisError = '未找到有效的文件';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- return;
- }
- try {
- const analysisSubscription = this.colorAnalysisService.analyzeImage(firstFile).subscribe({
- next: (result: ColorAnalysisResult) => {
- if (result) {
- this.analysisResult = result;
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'completed');
-
- // 自动开始需求映射
- this.startRequirementMapping();
- } else {
- this.analysisError = '分析结果为空';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- }
- },
- error: (error: any) => {
- console.error('分析失败:', error);
- this.analysisError = '图片分析失败,请重试';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- }
- });
- this.subscriptions.push(analysisSubscription);
- } catch (error) {
- console.error('启动分析失败:', error);
- this.analysisError = '启动分析失败,请重试';
- this.isAnalyzing = false;
- this.updateStepStatus('analysis', 'error');
- }
- }
- // 开始需求映射
- startRequirementMapping(): void {
- if (!this.analysisResult) {
- console.warn('分析结果为空,无法开始需求映射');
- return;
- }
- this.updateStepStatus('mapping', 'in-progress');
- this.isGeneratingMapping = true;
- this.mappingError = null;
- try {
- const mappingSubscription = this.requirementMappingService.generateRequirementMapping(
- this.analysisResult,
- SceneTemplate.LIVING_ROOM_MODERN
- ).subscribe({
- next: (mapping) => {
- if (mapping) {
- this.requirementMapping = mapping;
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'completed');
- this.updateStepStatus('preview', 'completed');
-
- console.log('=== 需求映射测试完成 ===');
- console.log('映射结果:', this.requirementMapping);
- } else {
- this.mappingError = '需求映射结果为空';
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'error');
- }
- },
- error: (error) => {
- console.error('需求映射生成失败:', error);
- this.mappingError = '需求映射生成失败,请重试';
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'error');
- }
- });
- this.subscriptions.push(mappingSubscription);
- } catch (error) {
- console.error('启动需求映射失败:', error);
- this.mappingError = '启动需求映射失败,请重试';
- this.isGeneratingMapping = false;
- this.updateStepStatus('mapping', 'error');
- }
- }
- // 更新步骤状态
- private updateStepStatus(stepId: string, status: 'pending' | 'in-progress' | 'completed' | 'error'): void {
- const step = this.testSteps.find(s => s.id === stepId);
- if (step) {
- step.status = status;
- } else {
- console.warn(`未找到步骤: ${stepId}`);
- }
- }
- // 辅助方法:获取步骤图标
- getStepIcon(status: string): string {
- switch (status) {
- case 'completed': return '✅';
- case 'in-progress': return '⏳';
- case 'error': return '❌';
- default: return '⭕';
- }
- }
- // 获取步骤状态类名
- getStepClass(status: string): string {
- return `step-${status}`;
- }
- // 手动重试分析
- retryAnalysis(): void {
- this.analysisError = null;
- this.startAnalysis();
- }
- // 手动重试映射
- retryMapping(): void {
- this.mappingError = null;
- this.startRequirementMapping();
- }
- // 下载测试结果
- downloadTestResult(): void {
- if (!this.requirementMapping) return;
- const testResult = {
- timestamp: new Date().toISOString(),
- uploadedFiles: this.uploadedFiles.map(f => ({
- name: f.name,
- size: f.size,
- type: f.type
- })),
- analysisResult: this.analysisResult,
- requirementMapping: this.requirementMapping,
- testSteps: this.testSteps
- };
- const blob = new Blob([JSON.stringify(testResult, null, 2)], { type: 'application/json' });
- const url = URL.createObjectURL(blob);
- const link = document.createElement('a');
- link.href = url;
- link.download = `requirement-mapping-test-${Date.now()}.json`;
- link.click();
- URL.revokeObjectURL(url);
- }
- }
|