yard_view

Skrypt yard_view.js stanowi integralny element rozwiązania Studio VSS.net, dedykowanego awizacji transportów i dostaw do magazynów. Jego głównym zadaniem jest dynamiczne generowanie interaktywnej wizualizacji zajętości miejsc parkingowych oraz doków magazynowych. Poniżej przedstawiono szczegółowy opis funkcjonalności i sposobu działania tego skryptu.

1. Inicjalizacja i ładowanie zasobów

Funkcja MojaOnLoad() uruchamiana jest podczas ładowania strony i odpowiada za przygotowanie środowiska graficznego:

• Dołączenie arkusza stylów: Na początku skrypt dynamicznie dołącza plik CSS (yard_view.css), który definiuje wygląd elementów wizualnych.
• Inicjalizacja zmiennych: Zmienna gcRefno pobierana jest z tablicy globalnej, co wskazuje na powiązanie z danymi przekazywanymi przez system.
• Konfiguracja kontenera: Element o identyfikatorze #Container zostaje odpowiednio ostylizowany (ustawienie marginesów) oraz początkowo ukryty, aby zapewnić płynne pojawienie się wizualizacji po przygotowaniu danych.

2. Pobieranie danych z bazy

Skrypt wykorzystuje funkcję ssDataSQL(), która na podstawie przekazanego identyfikatora (GUID) pobiera listę obiektów reprezentujących miejsca parkingowe i doki magazynowe. Otrzymany wynik to tablica obiektów, z których każdy zawiera:

• Informacje graficzne: Współrzędne (ATR_X, ATR_Y), wymiary (ATR_WIDTH, ATR_HEIGHT) oraz dodatkowe atrybuty (ATRYBUTY) niezbędne do wygenerowania poszczególnych elementów graficznych.
• Dane dotyczące orientacji: Parametr ROTATE umożliwia obrócenie elementów w przypadku, gdy nie są one ustawione w standardowej orientacji.
• Identyfikatory i kody: Kluczowe informacje, takie jak NRIDPAR oraz KOD, wykorzystywane są przy identyfikacji i etykietowaniu poszczególnych miejsc.
• Typ pojazdu: Parametr TYP_POJAZDU określa, czy w danym miejscu znajduje się pojazd (np. ciagnik, naczepa, kontener), co pozwala na wyświetlenie odpowiedniej ikony.

3. Generowanie grafiki SVG

Na podstawie pobranych danych skrypt dynamicznie buduje element SVG, który pełni funkcję przestrzeni roboczej do prezentacji wizualnej:

• Tworzenie przestrzeni SVG: Skrypt inicjuje element SVG o określonych wymiarach (szerokość 5464px, wysokość 3640px), w którym umieszczane są wszystkie obiekty.
• Iteracja po danych: Dla każdego obiektu z tablicy wyników wykonywana jest pętla, w której:
  • Obsługa transformacji: Jeśli parametr ROTATE jest różny od zera, element zostaje opakowany w grupę <g> z odpowiednią transformacją, co umożliwia prawidłowe obrócenie obiektu.
  • Rysowanie podstawowych kształtów: W zależności od wartości pola PRX wykonywany jest odpowiedni blok kodu:
    • RECT: Generowany jest element <rect> reprezentujący prostokątny obszar miejsca parkingowego. Jeśli szerokość obiektu przekracza określony próg, dodawana jest również etykieta tekstowa z kodem (<text>), ułatwiająca identyfikację.
    • CIRC, LINE, IMGE: W przypadku pozostałych wartości (koło, linia, obraz) skrypt tworzy odpowiadające im elementy SVG z wykorzystaniem podanych atrybutów.
• Precyzyjne pozycjonowanie etykiet: Dla elementów typu prostokąt obliczane są współrzędne, które umożliwiają umieszczenie tekstu wewnątrz obiektu w sposób czytelny i estetyczny.

4. Wizualizacja pojazdów

Kolejnym etapem generowania grafiki jest umieszczenie na mapie ikon reprezentujących pojazdy:

• Identyfikacja typu pojazdu: Na podstawie parametru TYP_POJAZDU skrypt określa, czy na danym miejscu znajduje się ciagnik (CGN), naczepa (NCP) czy kontener (KTN).
• Dodanie ikon pojazdów: Dla każdego rodzaju pojazdu w odpowiednim miejscu (wyliczonym na podstawie współrzędnych) umieszczany jest element <image> o stałych wymiarach (36×36 pikseli). Ikony te są pobierane z określonych lokalizacji, np. /images_k/128x128/ciagnik.png.
• Interaktywność: Ikony pojazdów wyposażone są w zdarzenie onclick, które wywołuje funkcję HelloACH(). Funkcja ta otwiera okno dialogowe (za pomocą mechanizmu JqxiFrame) z dodatkowymi informacjami o pojeździe, umożliwiając użytkownikowi szybki dostęp do szczegółów.

5. Interakcja z użytkownikiem

Skrypt nie ogranicza się jedynie do statycznego generowania grafiki, lecz wprowadza elementy interaktywne:

• Funkcja HellowAS(): Uruchamiana przy kliknięciu na elementy typu prostokąt (reprezentujące miejsca parkingowe), otwiera okno dialogowe z notatkami dotyczącymi wybranego miejsca. Dzięki temu użytkownik może w łatwy sposób uzyskać szczegółowe informacje lub wprowadzić zmiany.
• Przykładowa funkcja myklik(): Choć fragmenty tej funkcji są zakomentowane, prezentują mechanizm dynamicznej zmiany atrybutów graficznych (np. zmiana koloru wypełnienia) oraz przesuwania elementów na mapie, co może być wykorzystane w bardziej zaawansowanych scenariuszach interakcji.

6. Funkcja pomocnicza parseSVG

Na końcu skryptu znajduje się funkcja parseSVG(), która:

• Konwersja tekstu do elementu SVG: Umożliwia przekształcenie ciągu znaków zawierającego definicję SVG w dokumentowy fragment SVG, który może być następnie osadzony w strukturze HTML.
• Elastyczność przetwarzania grafiki: Dzięki tej funkcji możliwe jest dynamiczne generowanie i manipulacja zawartością SVG, co zwiększa elastyczność prezentacji graficznej w systemie.

Podsumowanie

Skrypt yard_view.js w rozwiązaniu Studio VSS.net pełni kluczową rolę w wizualizacji przestrzeni magazynowej, umożliwiając:

• Dynamiczne pobieranie i przetwarzanie danych dotyczących miejsc parkingowych oraz doków magazynowych.
• Tworzenie interaktywnej mapy opartej na technologii SVG, która pozwala na precyzyjne odwzorowanie geometrii poszczególnych obiektów.
• Integrację elementów graficznych z mechanizmami interakcji, umożliwiając szybki dostęp do szczegółowych informacji o pojazdach i notatkach związanych z miejscami parkingowymi.

Dzięki zastosowaniu nowoczesnych technologii webowych, rozwiązanie Studio VSS.net oferuje użytkownikom intuicyjny i funkcjonalny interfejs, wspierający efektywne zarządzanie logistyką magazynową.

Pliki: yard_view.js i yard_view.css – Wizualizacja Zajętości Miejsc Parkingowych i Doków Magazynowych

Pliki yard_view.js i yard_view.css odpowiadają za dynamiczną wizualizację zajętości miejsc parkingowych oraz doków magazynowych w systemie logistycznym VSS. Skrypt generuje interaktywny widok w formacie SVG, umożliwiając monitorowanie i zarządzanie obłożeniem przestrzeni magazynowej.

Funkcja MojaOnLoad()

Główna funkcja odpowiedzialna za inicjalizację widoku:

1. Ładuje arkusz stylów yard_view.css.
2. Pobiera listę miejsc parkingowych oraz doków magazynowych z bazy SQL.
3. Tworzy dynamiczny interfejs użytkownika zawierający:
   • Przestrzeń wizualną dla rozmieszczenia pojazdów.
   • Dynamiczne etykiety dla miejsc postojowych i doków.
   • Obiekty interaktywne reprezentujące pojazdy, naczepy i kontenery.
4. Wykorzystuje skalowanie SVG do poprawnej prezentacji danych.

Wizualizacja miejsc parkingowych

Funkcja pobiera listę obiektów i renderuje je w przestrzeni SVG. Każde miejsce parkingowe może być:

• Reprezentowane jako prostokąt (RECT), okrąg (CIRC) lub linia (LINE).
• Oznaczone unikalnym identyfikatorem i atrybutami SVG.
• Dynamicznie podpisane nazwą.

Obsługa pojazdów

Każdy pojazd jest reprezentowany jako ikona SVG umieszczona na mapie:

• Ciężarówka – ikona ciągnika siodłowego.
• Naczepa – reprezentuje pojazd bez ciągnika.
• Kontener – dla transportu intermodalnego.

Interaktywność

Obiekty na mapie posiadają interakcje:

• Kliknięcie – otwiera szczegóły pojazdu lub miejsca parkingowego.
• Najechanie myszką – wyświetla tooltip z numerem pojazdu.

Funkcja myklik()

Umożliwia podświetlenie miejsca parkingowego oraz modyfikację jego atrybutów SVG.

Podsumowanie

Pliki yard_view.js i yard_view.css umożliwiają dynamiczną wizualizację zajętości miejsc parkingowych i doków magazynowych. Dzięki interaktywnej prezentacji użytkownicy mogą w łatwy sposób monitorować stan magazynu oraz lokalizację pojazdów. System oparty na SVG zapewnia wysoką responsywność i czytelność interfejsu.

Czytaj więcej:

• Awizacje – Wizualizacja

  Wizualizacja zajętości miejsc parkingowych pomaga menedżerom zidentyfikować dostępne miejsca parkingowe w ich magazynie i określić najlepszy sposób ich przydzielenia. W tym artykule omówimy znaczenie tych dwóch funkcji i sposób, w jaki mogą one pomóc w usprawnieniu operacji magazynowych. Awizacje transportów magazynowych oraz wizualizacja zajętości miejsc parkingowych to dwa ważne elementy zarządzania magazynem, które umożliwiają sprawne funkcjonowanie

  StudioSystem awizacja awizacje management parking wizualizacja yard YMS

• maw_events_dyspozycja

  Skrypt maw_events_dyspozycja implementuje kompleksowy system zarządzania dyspozycjami transportowymi z integracją powiadomień SMS. Dynamiczne generowanie formularza i inteligentne zarządzanie stanem kontrolek zapewniają intuicyjną obsługę.

  Transakcje YMS dyspozycje javascript jqs logistyka magazyn Powiadomienia SMS

• wizualizacja23

  Skrypt wizualizacja23.js w systemie Studio WMS.net pełni istotną rolę w prezentacji i analizie stanów magazynowych. Jego zadaniem jest generowanie interaktywnej wizualizacji, która umożliwia użytkownikom szybki i intuicyjny podgląd układu regałów magazynowych oraz bieżącej zajętości poszczególnych miejsc składowania.

  Transakcje WMS javascript jqs WMS

• yard_transport_wew

  Plik yard_transport_wew.js to narzędzie do zarządzania transportem wewnętrznym w zakładzie. Umożliwia tworzenie zleceń transportowych, przypisywanie miejsc postoju oraz potwierdzanie wykonania transportu. Dzięki integracji z bazą SQL zapewnia płynność procesów logistycznych i zwiększa efektywność operacji wewnętrznych.

  Transakcje YMS javascript jqs VSS.net zarządzanie transportem

• yard_view_details

  Plik yard_view_details.js to narzędzie do monitorowania transportów na terenie zakładu. Umożliwia użytkownikom przeglądanie szczegółowych danych o pojazdach, przewoźnikach i kierowcach oraz wysyłanie powiadomień SMS. Dzięki dynamicznemu interfejsowi ułatwia zarządzanie ruchem transportowym w obrębie magazynów i parkingów.

  Transakcje YMS javascript jqs VSS.net