fix1407

src/components/vin/KnotIn.tsx

@@ -55,6 +55,7 @@ const KnotIn: React.FC<KnotInProps> = ({
   const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null);
   const [hoveredCodeOnImage, setHoveredCodeOnImage] = useState<string | number | null>(null);
   const router = useRouter();
+  const [isImageModalOpen, setIsImageModalOpen] = useState(false);
 
   // Получаем инфо об узле (для картинки)
   console.log('🔍 KnotIn - GET_LAXIMO_UNIT_INFO запрос:', {
@@ -164,6 +165,12 @@ const KnotIn: React.FC<KnotInProps> = ({
     });
   };
 
+  // Обработчик клика по картинке (zoom)
+  const handleImageClick = (e: React.MouseEvent<HTMLImageElement>) => {
+    // Если клик был по точке, не открываем модалку (точки выше по z-index)
+    setIsImageModalOpen(true);
+  };
+
   // Обработчик наведения на точку
   const handlePointHover = (coord: any) => {
     // Попробуем использовать разные поля для связи
@@ -318,8 +325,9 @@ const KnotIn: React.FC<KnotInProps> = ({
           loading="lazy"
           alt={unitName || unitInfo?.name || "Изображение узла"}
           onLoad={handleImageLoad}
-          className="max-w-full h-auto mx-auto rounded"
+          className="max-w-full h-auto mx-auto rounded cursor-zoom-in"
           style={{ maxWidth: 400, display: 'block' }}
+          onClick={handleImageClick}
         />
         {/* Точки/области */}
         {coordinates.map((coord: any, idx: number) => {
@@ -369,8 +377,8 @@ const KnotIn: React.FC<KnotInProps> = ({
                 pointerEvents: 'auto',
               }}
               title={`${codeValue} (Клик - выделить в списке, двойной клик - перейти к выбору бренда)`}
-              onClick={() => handlePointClick(coord)}
-              onDoubleClick={() => handlePointDoubleClick(coord)}
+              onClick={e => { e.stopPropagation(); handlePointClick(coord); }}
+              onDoubleClick={e => { e.stopPropagation(); handlePointDoubleClick(coord); }}
               onMouseEnter={() => handlePointHover(coord)}
               onMouseLeave={() => {
                 setHoveredCodeOnImage(null);
@@ -388,7 +396,31 @@ const KnotIn: React.FC<KnotInProps> = ({
             </div>
           );
         })}
-    </div>
+      </div>
+      {/* Модалка увеличенного изображения */}
+      {isImageModalOpen && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/20 bg-opacity-70"
+          onClick={() => setIsImageModalOpen(false)}
+          style={{ cursor: 'zoom-out' }}
+        >
+          <img
+            src={imageUrl}
+            alt={unitName || unitInfo?.name || "Изображение узла"}
+            className="max-h-[90vh] max-w-[90vw] rounded shadow-lg"
+            onClick={e => e.stopPropagation()}
+            style={{ background: '#fff' }}
+          />
+          <button
+            onClick={() => setIsImageModalOpen(false)}
+            className="absolute top-4 right-4 text-white text-3xl font-bold bg-black bg-opacity-40 rounded-full w-10 h-10 flex items-center justify-center"
+            aria-label="Закрыть"
+            style={{ zIndex: 10000 }}
+          >
+            ×
+          </button>
+        </div>
+      )}
       {/* Модалка выбора бренда */}
       <BrandSelectionModal
         isOpen={isBrandModalOpen}