Giao diện của trang người dùng được thiết kế thành nhiều tab (thẻ), bao gồm các tab:
Bản đồ KCN
Văn bản
Thông tin quan trắc
Tuyển dụng
Giao diện tab “Bản đồ KCN”:
Hình 4.4 Giao diện tab “Bản đồ KCN” Khu vực (1):Là khu vực tiêu đề (banner) của trang web
Khu vực (2): Là một panel chứa các thông tin: các lớp bản đồ hiện có (layer), chú thích bản đồ và thông tin cá nhân.
Khu vực (3): Là một panel chứa phần bản đồ chính, bao gồm bản đồ KCN và các nút điều khiển bản đồ cơ bản như:
: phóng to toàn màn hình.
Di chuyển: nút di chuyển bản đồ.
33
Previous / Next: quay về (tiến tới) màn hình trước (sau).
Đo khoảng cách: tính toán khoảng cách bất kỳ trên bản đồ do người dùng vẽ
(đơn vị: m hoặc km).
Đo diện tích: tính toán diện tích của một vùng người sử dụng vẽ (đơn vị m2)
Xem thông tin: xem thông tin của một đối tượng bằng cách click chuột vào đối
tượng đó.
34
Tìm kiếm công ty: Người sử dụng có thể nhập tên công ty và bấm nút “Tìm”,
trang web sẽ truy vấn theo tên công ty, trả về thông tin công ty và zoom đến công ty đó.
Hình 4.6 Tìm kiếm công ty (VD: công ty Suzuki)
Show/Hide Banner: nút checkbox điều khiển hiện hoặc ẩn thanh tiêu đề (banner).
35 Giao diện tab “Văn bản”:
Hình 4.7 Giao diện tab “Văn bản” Tab “Văn bản” gồm 2 khu vực:
Khu vực (1): Là cây thư mục (tree panel) chứa danh sách các văn bản hiện có của web, bao gồm các văn bản thông tin về Khu công nghiệp Loteco, Quy chuẩn Việt Nam về ô nhiễm không khí, các bản đồ ô nhiễm.
Khu vực (2): Là màn hình nội dung của văn bản khi người dùng chọn ở cây thư mục.
- Chức năng in ấn và download: Người sử dụng có thể dễ dàng in văn bản hoặc download văn bản về xem offline bằng cách nhấn vào nút để in và nút để download.
36 Giao diện tab “Thông tin ô nhiễm”:
Bao gồm 2 tab con là tab “Thông tin công ty” và tab “Thông tin quan trắc”:
Tab “Thông tin công ty”: Là một Grid Panel bao gồm toàn bộ thông tin của công ty được truy xuất từ cơ sở dữ liệu PostgreSQL, vì vậy khi thay đổi thông tin công ty từ cơ sở dữ liệu thì trang web sẽ tự động cập nhật theo. Danh sách công ty được tự động nhóm theo “Lô” của công ty đó hoặc người sử dụng có thể thay đổi nhóm tùy ý bằng cách chọn vào cột muốn nhóm và chọn dòng “Group By This Field”. (adsbygoogle = window.adsbygoogle || []).push({});
37
38
Tab “Thông tin quan trắc”: Là một Grid Panel bao gồm các thông tin quan trắc được lưu trữ trên PostgreSQL.
Các thông số về nồng độ khí quan trắc sẽ được tự động phân tích dựa trên QCVN và những thông số vượt quá tiêu chuẩn sẽ hiện màu đỏ kèm theo một ký hiệu cảnh báo . Đồng thời trang web còn tự động tính tổng các thông số quan trắc được.
39
Người sử dụng có thể tìm kiếm nâng cao bằng một bộ công cụ lọc dữ liệu bằng cách bấm chuột vào bên phải cột cần lọc và chọn filter.
40
Hình 4.12 Lọc dữ liệu dạng số (VD: Lọc theo nồng độ khí so2 > 300 µg/m3)
Ngoài ra người sử dụng có thể cùng lúc lọc dữ liệu kết hợp cả dạng chữ và dạng số và nhiều cột khác nhau. Khi muốn xóa lọc dữ liệu người sử dụng có thể click vào nút
Các thông số có thể được sắp xếp theo thứ tự tăng hoặc giảm bằng cách chọn Sort Ascending hoặc Sort Descending tương ứng.
41
Trang web còn cung cấp chức năng vẽ biểu đồ theo thông tin lọc được và hỗ trợ in biểu đồ bằng cách click vào nút để tạo biểu đồ và click để in. Biểu đồ được trình bày khá chi tiết và dễ dàng giúp người sử dụng theo dõi và đánh giá mức độ ô nhiễm một cách trực quan hơn.
42
Người sử dụng cũng có thể xuất toàn bộ bảng dữ liệu ra file .xls của phần mềm Excel bằng cách click vào nút
Hình 4.14 Giao diện xuất bảng dữ liệu ra Excel
Đối với người quản trị, khi muốn cập nhật thông tin quan trắc phải chuyển sang trang “Quản trị” bằng cách click vào nút
43 Giao diện tab “Tuyển dụng”:
- Bao gổm các thông tin tuyển dụng của các công ty trong KCN Loteco; các thông tin tuyển dụng được trình bày chi tiết, rõ ràng và được cập nhật liên tục giúp người sử dụng dễ dàng tra cứu.
44