Frontiers in Computing and Intelligent Systems ISSN: 2832-6024 | Vol. 2, No. 1, 2022 20 Design and implementation of ship data analysis platform Juan Zhang1, *, Taizhi Lv2 1 School of Information Technology, Jiangsu Maritime Institute, Jiangsu Nanjing, China 2 R&D Department, Nanjing Huihai Transportation Technology Company Limited, Nanjing, China * Corresponding author: Juan Zhang. Abstract: As the basis and core of the management work of the maritime department, the basic data of ships is a prerequisite for doing a good job in various work. With the rapid development of economic construction, the shipping industry has put forward a higher demand for maritime services. As an important component, ship data provides a strong guarantee to meet this demand. Therefore, it is very important to strengthen the construction of the ship basic data analysis platform. In this paper, through data analysis and visualization technology, the data can be displayed intuitively in the form of charts, which can effectively improve the level of maritime supervision. The platform uses Spring Cloud framework to extract ship basic data from MySQL database, Axios to obtain JSON data transmitted from the background interface, Vue to implement bidirectional binding, Element UI to implements page layout, and Echarts to displays charts. Keywords: Ship data; Maritime management; Spring Cloud; Data visualization; Vue; MySQL. 1. Introduction International shipping carries 90% of international trade and is a barometer of the world economy [1]. With the development of large-scale ships, higher requirements are put forward for port and waterway construction. In this context, the traditional extensive business model has been unable to meet the changing needs of the market. With the rapid development of information technology, the shipping industry has gradually introduced the concept of digital transformation, which brings new opportunities and challenges to the shipping industry. With the rapid development of shipping industry, the water traffic environment has become more and more complex, and maritime supervision is facing great pressure [2-3]. As an efficient means of maritime supervision, shipping information visualization displays valuable ship information in an intuitive form. Ship data is the most basic work for the maritime sector to integrate information resources, and also an important part of shipping big data. It is the basis and core of maritime management. Its accuracy and reliability directly affect the accuracy and efficiency of maritime management business. At present, how to combine traditional shipping data information with digitalization and information industry is an urgent task to be faced. In order to improve the efficiency of massive data management, it is of great significance to build a ship basic information data platform. In order to better realize the visualization of ship data and facilitate the prediction of ship data and information, this paper designs and implements a ship data analysis platform. The platform can mine the value information hidden in the basic ship data through data visualization, which can make research and prediction on the future trend of ship information and the development of the future ship industry. 2. System design 2.1. System architecture As shown in Figure 1, the ship data analysis platform is developed by separating front-end and back-end. This mode separates the front-end visualization module from the back- end data processing module [4-5]. The back-end provides the ship statistical data to the front-end in the form of interface, and the front-end can visually display the data after obtaining it. By separating front-end and back-end, the development efficiency of the system is improved and the coupling of the program is reduced. Fig.1 The system architecture 2.2. Functional design The function modules of ship data analysis platform include mainly ship data statistics module and ship data management module. The ship data statistics module is divided into statistics based on ship construction, statistics based on ship characteristics, and statistics based on shipping area. The ship data management module is divided into ship query, ship management, ship manufacturer query and maritime supervision department query. Ship building statistics include statistics based on the ship construction year, statistics based on ship manufacturer, and statistics based on ship owners. The statistics of ship characteristics include statistics according to the ship type, length, width, tonnage and draft. The functional design is shown in Figure 2. Browser HTML,CSS,JavaScript Front-end web application Back-end web application interface 1 interfaces by Spring Cloud interface 2 interface n ...... MySQL database M yBatis Plus request static page load static page Initial Vue request data by Axios request data return static page return data bind data display charts by Echarts 21 Fig.2 The functional module diagram 3. System implementation 3.1. Back-end implementation The back-end is implemented by microservices, which is divided into service layer, business layer, persistence layer and entity object layer. The service layer provides Restful interface through Spring Cloud, and calls the business layer to provide corresponding business processing according to Ajax requests. The business layer assembles and correlates business components through the Spring framework. The persistence layer accesses the ship database through MyBatis plus framework. Based on MyBatis plus framework, the object relationship mapping is implemented to simplify the operation of Java Database Connectivity (JDBC) on the database [6]. The entity object layer is a mapping of database tables. The data is stored in the MySQL database, and Redis stores cached data. The system uses the application.yml to configure Eureka Server address, microservice name, microservice port number and other information. 3.2. Front-end implementation Vue is the best practice of MVVM (Model-View-View- Model) architecture, provides a library for bidirectional data binding. It is a progressive framework for building user interfaces. The front-end realizes data visualization based on MVVM mode, which simplifies front-end development and improves development efficiency. The model layer encapsulates business logic and data and is implemented through microservices. The data model layer encapsulates business logic and state, and is implemented through Vue framework and JavaScript script. The communication between the data model layer and the microservice adopts asynchronous mode, and Axios is used to realize data transmission. The View layer encapsulates the UI and diagram. The platform development uses Vue-cli scaffolding to quickly build Vue front-end framework, and manages and expands the front-end through NPM [7]. Element UI and ECharts are added to Vue's basic ecology. Chart display is based on Echarts. ECharts is a JavaScript data visualization chart library that provides intuitive, vivid, interactive and personalized data visualization charts. The data acquisition of the chart is based on the Axios asynchronous request, and then the data is bound to the corresponding Echarts chart object. Echarts draws the corresponding chart on the corresponding Dom container. As shown in the effect diagram on the index page of the ship statistics in Figure 3, the number of ships under management, the number of ship manufacturers and other information are calculated through data analysis. Click Statistics and other buttons to enter the corresponding statistics page and menu. Click the four buttons on the left to enter the ship query, ship manufacturer query and other functions. The background map displays the ships within the jurisdiction according to the AIS coordinate position. Click a ship to query its information. Fig.3 The index page By clicking the button of statistics by ship building, then clicking the menu of statistics by building year, a line chart is displayed shown in Figure 4. The line chart shows the number of ships built in the past 20 years since 2003. It can be seen that the number of ships built in 2020 is the largest, reaching 6137. In this year, the number of ships has reached 3302, and it is estimated that there will be about 4000 in whole year. Fig.4 Statistics by ship building year 4. Conclusion Ship data is the basis and core of maritime management, and its accuracy and reliability are directly related to the accuracy and efficiency of maritime management business. In order to improve the intelligent level of maritime management, this paper builds a ship data analysis platform to grasp the ship dynamics in real time. The platform uses Spring Cloud, Vue, Echarts and Node.JS and other technologies to build a development environment to achieve the analysis and visualization of ship data. The system has been applied in the production environment. The results of data analysis not only effectively track the ship dynamics, but also can use machine learning algorithms to predict the ship dynamics in the future to further improve the level of ship management. Acknowledgements This work was financially supported by the Excellent Scientific and Technological innovation Team of of the Jiangsu Higher Education Institutions of China (Maritime big data team), the Young Academic Leaders for QingLan Project of the Jiangsu Higher Education Institutions of China, the Natural Science Foundation of the Jiangsu Higher Education Institutions of China (21KJB580007). References [1] Giannakoulis, Fotis. "Overview of shipping finance." The International Handbook of Shipping Finance. Palgrave Macmillan, London, 2016. 71-94. Ship data analysis platform Ship data statistics Ship data management Statistics based on ship construction Statistics based on ship characteristics Statistics based on shipping area Ship query Ship management Goods demand statistics Ship manufacturer query 22 [2] Munim, Ziaul Haque, et al. "Big data and artificial intelligence in the maritime industry: a bibliometric review and future research directions." Maritime Policy & Management 47.5 (2020): 577-597. [3] Wheeler, Andre. "Exploring China's Digital Silk Road." The Digital Transformation of Logistics: Demystifying Impacts of the Fourth Industrial Revolution (2021): 185-196. [4] Liu, Kun, et al. "Design and development of management information system for research project process based on front- end and back-end separation." 2017 International Conference on Computing Intelligence and Information System (CIIS). IEEE, 2017:338-342. [5] Gong, Yifei, et al. "The Architecture of Micro-services and the Separation of Frond-end and Back-end Applied in a Campus Information System." 2020 IEEE International Conference on Advances in Electrical Engineering and Computer Applications (AEECA). IEEE, 2020: 321-324. [6] Li, Yao Zhang, et al. "Research and application of template engine for web back-end based on MyBatis-Plus." Procedia Computer Science 166 (2020): 206-212. [7] Freeman, Adam. "Understanding Vue. js Projects and Tools." Pro Vue. js 2. Apress, Berkeley, CA, 2018. 221-254.