Улучшена обработка SSD в компонентах QuickDetailSection, UnitDetailsSection и KnotIn. Добавлены отладочные логи для отслеживания значений SSD и состояния загрузки данных. Обновлены условия пропуска запросов в зависимости от наличия SSD. Исправлена логика передачи SSD в компонент KnotIn с использованием значения узла или родительского SSD.

2025-07-05 13:35:49 +03:00
parent e989d402a3
commit 36c5990921
5 changed files with 168 additions and 29 deletions
--- a/src/components/QuickGroupsSection.tsx
+++ b/src/components/QuickGroupsSection.tsx
@ -156,10 +156,15 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
  };

  const handleUnitClick = (unit: LaximoUnit) => {
-    setSelectedUnit({
-      ...unit,
-      ssd: unit.ssd || ssd  // Сохраняем правильный SSD в selectedUnit
+    // ИСПРАВЛЕНИЕ: Сохраняем SSD узла из API ответа
+    console.log('🔍 handleUnitClick - сохраняем узел с SSD:', {
+      unitId: unit.unitid,
+      unitName: unit.name,
+      unitSsd: unit.ssd ? `${unit.ssd.substring(0, 50)}...` : 'отсутствует',
+      unitSsdLength: unit.ssd?.length
    });
+    
+    setSelectedUnit(unit); // Сохраняем полный объект узла с его SSD
  };

  const handleBackFromUnit = () => {
@ -209,21 +214,23 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({

  // Если выбран узел для детального просмотра, показываем UnitDetailsSection
  if (selectedUnit) {
-    const unitSsd = selectedUnit.ssd || ssd;
+    // ИСПРАВЛЕНИЕ: Используем SSD узла из API ответа, а не родительский SSD
+    // API Laximo возвращает для каждого узла свой собственный SSD
    console.log('🔍 QuickDetailSection передает в UnitDetailsSection:', {
-      unitSsd: unitSsd ? `${unitSsd.substring(0, 50)}...` : 'отсутствует',
-      unitSsdLength: unitSsd?.length,
+      parentSsd: ssd ? `${ssd.substring(0, 50)}...` : 'отсутствует',
+      parentSsdLength: ssd?.length,
      selectedUnitSsd: selectedUnit.ssd ? `${selectedUnit.ssd.substring(0, 50)}...` : 'отсутствует',
-      fallbackSsd: ssd ? `${ssd.substring(0, 50)}...` : 'отсутствует',
+      selectedUnitSsdLength: selectedUnit.ssd?.length,
      unitId: selectedUnit.unitid,
-      unitName: selectedUnit.name
+      unitName: selectedUnit.name,
+      note: 'Используем SSD УЗЛА из API ответа'
    });
    
    return (
      <UnitDetailsSection
        catalogCode={catalogCode}
        vehicleId={vehicleId}
-        ssd={unitSsd}  // Используем SSD узла
+        ssd={selectedUnit.ssd || ssd}  // Используем SSD узла, fallback на родительский SSD
        unitId={selectedUnit.unitid}
        unitName={selectedUnit.name}
        onBack={handleBackFromUnit}
--- a/src/components/UnitDetailsSection.tsx
+++ b/src/components/UnitDetailsSection.tsx
@ -42,7 +42,8 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
    ssd: ssd ? `${ssd.substring(0, 50)}...` : 'отсутствует',
    ssdLength: ssd?.length,
    unitId,
-    unitName
+    unitName,
+    note: 'Используем SSD узла для API запросов'
  });
  
  const { data: unitInfoData, loading: unitInfoLoading, error: unitInfoError } = useQuery<{ laximoUnitInfo: LaximoUnitInfo }>(
@ -52,11 +53,11 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
        catalogCode,
        vehicleId,
        unitId,
-        ssd: ssd || ''
+        ssd
      },
-      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId || !ssd || ssd.trim() === '',
      errorPolicy: 'all',
-      fetchPolicy: 'no-cache', // Отключаем кэширование для получения актуального SSD
+      fetchPolicy: 'no-cache', // Отключаем кэширование для получения актуальных данных
      notifyOnNetworkStatusChange: true
    }
  );
@ -76,9 +77,9 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
        catalogCode,
        vehicleId,
        unitId,
-        ssd: ssd || ''
+        ssd
      },
-      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId || !ssd || ssd.trim() === '',
      errorPolicy: 'all',
      fetchPolicy: 'no-cache', // Отключаем кэширование для получения актуального SSD
      notifyOnNetworkStatusChange: true
@ -100,9 +101,9 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
        catalogCode,
        vehicleId,
        unitId,
-        ssd: ssd || ''
+        ssd
      },
-      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId || !ssd || ssd.trim() === '',
      errorPolicy: 'all',
      fetchPolicy: 'no-cache', // Отключаем кэширование для получения актуального SSD
      notifyOnNetworkStatusChange: true
--- a/src/components/vin/KnotIn.tsx
+++ b/src/components/vin/KnotIn.tsx
@ -43,30 +43,72 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
  const router = useRouter();

  // Получаем инфо об узле (для картинки)
+  console.log('🔍 KnotIn - GET_LAXIMO_UNIT_INFO запрос:', {
+    catalogCode,
+    vehicleId,
+    unitId,
+    ssd: ssd ? `${ssd.substring(0, 50)}...` : 'отсутствует',
+    ssdLength: ssd?.length,
+    skipCondition: !catalogCode || !vehicleId || !unitId || !ssd || ssd.trim() === ''
+  });
+  
  const { data: unitInfoData, loading: unitInfoLoading, error: unitInfoError } = useQuery(
    GET_LAXIMO_UNIT_INFO,
    {
-      variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', unitId: unitId || '', ssd: ssd || '' },
-      skip: !catalogCode || !vehicleId || !unitId,
+      variables: { 
+        catalogCode, 
+        vehicleId, 
+        unitId, 
+        ssd 
+      },
+      skip: !catalogCode || !vehicleId || !unitId || !ssd || ssd.trim() === '',
      errorPolicy: 'all',
    }
  );
+  
  // Получаем карту координат
+  console.log('🔍 KnotIn - GET_LAXIMO_UNIT_IMAGE_MAP запрос:', {
+    catalogCode,
+    vehicleId,
+    unitId,
+    ssd: ssd ? `${ssd.substring(0, 50)}...` : 'отсутствует',
+    ssdLength: ssd?.length,
+    skipCondition: !catalogCode || !vehicleId || !unitId || !ssd || ssd.trim() === ''
+  });
+  
  const { data: imageMapData, loading: imageMapLoading, error: imageMapError } = useQuery(
    GET_LAXIMO_UNIT_IMAGE_MAP,
    {
-      variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', unitId: unitId || '', ssd: ssd || '' },
-      skip: !catalogCode || !vehicleId || !unitId,
+      variables: { 
+        catalogCode, 
+        vehicleId, 
+        unitId, 
+        ssd 
+      },
+      skip: !catalogCode || !vehicleId || !unitId || !ssd || ssd.trim() === '',
      errorPolicy: 'all',
    }
  );

  // Если нет необходимых данных, показываем заглушку
-  if (!catalogCode || !vehicleId || !unitId) {
+  if (!catalogCode || !vehicleId || !unitId || !ssd || ssd.trim() === '') {
+    console.log('⚠️ KnotIn: отсутствуют необходимые данные:', {
+      catalogCode: !!catalogCode,
+      vehicleId: !!vehicleId,
+      unitId: !!unitId,
+      ssd: !!ssd,
+      ssdValid: ssd ? ssd.trim() !== '' : false
+    });
+    
    return (
      <div className="text-center py-8 text-gray-500">
        <div className="text-lg font-medium mb-2">Схема узла</div>
        <div className="text-sm">Выберите узел для отображения схемы</div>
+        {process.env.NODE_ENV === 'development' && (
+          <div className="text-xs text-red-500 mt-2">
+            Debug: catalogCode={catalogCode}, vehicleId={vehicleId}, unitId={unitId}, ssd={ssd ? 'есть' : 'нет'}
+          </div>
+        )}
      </div>
    );
  }
@ -75,6 +117,29 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
  const coordinates = imageMapData?.laximoUnitImageMap?.coordinates || [];
  const imageUrl = unitInfo?.imageurl ? getImageUrl(unitInfo.imageurl, selectedImageSize) : '';

+  // Логируем успешную загрузку данных
+  React.useEffect(() => {
+    if (unitInfo) {
+      console.log('✅ KnotIn: данные узла загружены:', {
+        unitName: unitInfo.name,
+        hasImage: !!unitInfo.imageurl,
+        imageUrl: unitInfo.imageurl,
+        processedImageUrl: imageUrl
+      });
+    }
+  }, [unitInfo, imageUrl]);
+
+  React.useEffect(() => {
+    if (coordinates.length > 0) {
+      console.log('✅ KnotIn: координаты карты загружены:', {
+        coordinatesCount: coordinates.length,
+        firstCoordinate: coordinates[0]
+      });
+    } else if (imageMapData) {
+      console.log('⚠️ KnotIn: карта изображений загружена, но координаты пустые:', imageMapData);
+    }
+  }, [coordinates, imageMapData]);
+
  // Масштабируем точки после загрузки картинки
  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
    const img = e.currentTarget;
@ -110,13 +175,49 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
  }, [parts, coordinates]);

  if (unitInfoLoading || imageMapLoading) {
+    console.log('🔄 KnotIn: загрузка данных...', {
+      unitInfoLoading,
+      imageMapLoading,
+      unitInfoError: unitInfoError?.message,
+      imageMapError: imageMapError?.message
+    });
    return <div className="text-center py-8 text-gray-500">Загружаем схему узла...</div>;
  }
+  
  if (unitInfoError) {
-    return <div className="text-center py-8 text-red-600">Ошибка загрузки схемы: {unitInfoError.message}</div>;
+    console.error('❌ KnotIn: ошибка загрузки информации об узле:', unitInfoError);
+    return (
+      <div className="text-center py-8 text-red-600">
+        Ошибка загрузки схемы: {unitInfoError.message}
+        {process.env.NODE_ENV === 'development' && (
+          <div className="text-xs mt-2 text-gray-500">
+            GraphQL Error: {JSON.stringify(unitInfoError, null, 2)}
+          </div>
+        )}
+      </div>
+    );
  }
+  
+  if (imageMapError) {
+    console.error('❌ KnotIn: ошибка загрузки карты изображений:', imageMapError);
+  }
+  
  if (!imageUrl) {
-    return <div className="text-center py-8 text-gray-400">Нет изображения для этого узла</div>;
+    console.log('⚠️ KnotIn: нет URL изображения:', {
+      unitInfo: !!unitInfo,
+      imageurl: unitInfo?.imageurl,
+      unitInfoData: !!unitInfoData
+    });
+    return (
+      <div className="text-center py-8 text-gray-400">
+        Нет изображения для этого узла
+        {process.env.NODE_ENV === 'development' && unitInfo && (
+          <div className="text-xs mt-2 text-gray-500">
+            Debug: unitInfo.imageurl = {unitInfo.imageurl || 'отсутствует'}
+          </div>
+        )}
+      </div>
+    );
  }

  return (
--- a/src/components/vin/VinLeftbar.tsx
+++ b/src/components/vin/VinLeftbar.tsx
@ -327,7 +327,12 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                      className="dropdown-link-3 w-dropdown-link"
                      onClick={(e) => {
                        e.preventDefault();
-                        handleQuickGroupToggle(group.quickgroupid, 0);
+                        // Если это конечная группа с link=true, открываем QuickGroup
+                        if (group.link && onQuickGroupSelect) {
+                          onQuickGroupSelect(group);
+                        } else {
+                          handleQuickGroupToggle(group.quickgroupid, 0);
+                        }
                      }}
                    >
                      {group.name}
@ -366,7 +371,12 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                              className="dropdown-link-3 w-dropdown-link"
                              onClick={(e) => {
                                e.preventDefault();
-                                handleQuickGroupToggle(child.quickgroupid, 1);
+                                // Если это конечная группа с link=true, открываем QuickGroup
+                                if (child.link && onQuickGroupSelect) {
+                                  onQuickGroupSelect(child);
+                                } else {
+                                  handleQuickGroupToggle(child.quickgroupid, 1);
+                                }
                              }}
                            >
                              {child.name}
@ -400,7 +410,12 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                                  className="dropdown-link-3 w-dropdown-link"
                                  onClick={(e) => {
                                    e.preventDefault();
-                                    handleQuickGroupToggle(subChild.quickgroupid, 3);
+                                    // Если это конечная группа с link=true, открываем QuickGroup
+                                    if (subChild.link && onQuickGroupSelect) {
+                                      onQuickGroupSelect(subChild);
+                                    } else {
+                                      handleQuickGroupToggle(subChild.quickgroupid, 3);
+                                    }
                                  }}
                                >
                                  {subChild.name}
@ -458,7 +473,10 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                            className="dropdown-link-3 w-dropdown-link pl-0"
                            onClick={e => {
                              e.preventDefault();
-                              if (onNodeSelect) {
+                              // Если это конечная категория с link=true, открываем QuickGroup
+                              if (subcat.link && onQuickGroupSelect) {
+                                onQuickGroupSelect(subcat);
+                              } else if (onNodeSelect) {
                                onNodeSelect({
                                  ...subcat,
                                  unitid: subcat.unitid || subcat.quickgroupid || subcat.id
--- a/src/pages/vehicle-search/[brand]/[vehicleId].tsx
+++ b/src/pages/vehicle-search/[brand]/[vehicleId].tsx
@ -414,10 +414,22 @@ const VehicleDetailsPage = () => {
              <div className="w-layout-hflex flex-block-13">
                <div className="w-layout-vflex flex-block-14-copy-copy">
                  {/* <button onClick={() => setSelectedNode(null)} style={{ marginBottom: 16 }}>Назад</button> */}
+                  {/* ОТЛАДКА: Логируем передачу SSD в KnotIn */}
+                  {(() => {
+                    const knotSsd = selectedNode.ssd || vehicleInfo.ssd;
+                    console.log('🔍 [vehicleId].tsx передает в KnotIn:', {
+                      selectedNodeSsd: selectedNode.ssd ? `${selectedNode.ssd.substring(0, 50)}...` : 'отсутствует',
+                      vehicleInfoSsd: vehicleInfo.ssd ? `${vehicleInfo.ssd.substring(0, 50)}...` : 'отсутствует',
+                      finalSsd: knotSsd ? `${knotSsd.substring(0, 50)}...` : 'отсутствует',
+                      unitId: selectedNode.unitid,
+                      unitName: selectedNode.name
+                    });
+                    return null;
+                  })()}
                  <KnotIn
                    catalogCode={vehicleInfo.catalog}
                    vehicleId={vehicleInfo.vehicleid}
-                    ssd={vehicleInfo.ssd}
+                    ssd={selectedNode.ssd || vehicleInfo.ssd}  // ИСПРАВЛЕНИЕ: Используем SSD узла, fallback на родительский SSD
                    unitId={selectedNode.unitid}
                    unitName={selectedNode.name}
                    parts={unitDetails}