preface

In recent years, the integration of Internet and transportation, changed the trading patterns, affecting the transport organization and management way, change the market structure of transport subject, blurred the line between operations and the operations, and to achieve a better traffic resource intensive sharing, at the same time and rely more on external forces enterprises to promote traffic information possible. Internet transportation has great potential, rapid development and huge ecological environment. The government needs to follow the trend, keep up with the development trend, strengthen guidance, transform functions, and innovate the mode of government management and market supervision. However, the investment volume of urban rail transit is huge, and one line often costs tens of billions of yuan, so how to ensure the investment benefit and improve the accuracy and controllability of investment management is a top priority. “Internet +” thinking should be introduced to develop urban rail transit system based on “Internet +”. Based on the analysis of the existing problems in investment management, the application characteristics and main functions of the system are described in depth here, aiming at improving the function distribution and user experience of the system.

http://www.hightopo.com/demo/metro/demo2.html

Code implementation

Scenario building

Let’s build the base scene first. Since this scene is implemented on a 2D basis, we need to use the topology component HT.graph.GraphView to build the base scene:

dataModel = new ht.DataModel(); GraphView = new hT.graph.graphView (dataModel); // Topology component graphView.addtodom (); // Add the topology component to the bodyCopy the code

The addToDOM method that appears in the code above adds the build to the body of the DOM, HT (https://hightopo.com) components are typically embedded in containers such as BorderPane, SplitView, and TabView (all HT components), The outermost HT component requires the user to manually add the underlying div element returned by getView() to the DOM element of the page. Note that when the parent container size changes, If the parent container is a predefined container component of HT, such as BorderPane and SplitView, the CONTAINER of HT automatically recursively calls the invalidate function of the child component to notify of updates. However, if the parent container is a native HTML element, the HT component cannot know that it needs to be updated. Therefore, the outermost HT component usually needs to listen for the window size change event and call the invalidate function of the outermost component to update.

For ease of loading and filling Windows for the outermost components, all components of HT have addToDOM functions that implement the following logic, where iv is short for invalidate:

addToDOM = function(){var self = this, view = self.getView(),// get the component's bottom div style = view.style; document.body.appendChild(view); // Add the component's underlying div to the body. Left ='0'; // Ht sets position for all components to absolute. Right ='0';
    style.top = '0';
    style.bottom = '0';
    window.addEventListener('resize'.function () { self.iv(); }, false); // Window size change event, call refresh function}Copy the code

Scene: the import

In HT, a common way to import scenes internally is to parse JSON files. One of the advantages of constructing scenes with JSON files is that they can be recycled. The scene we drew today was drawn using JSON. Next HT will use the hT.default. xhrLoad function to load the JSON scene, Use HT-wrapped Datamodel. deserialize(JSON) To deserialize (http://hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html#ref_serialization), Add the deserialized object to the DataModel:

ht.Default.xhrLoad('demo2.json'.function(text) {
    var json = ht.Default.parse(text);
    if(json.title) document.title = json.title; // Assign the titile from the JSON file to the global titile datamodel.deserialize (JSON); // Deserialize GraphView.fitContent (true); // Scale and pan the topology to show all primions, i.e., make all elements visible});Copy the code

In HT, an id attribute is automatically assigned to a Data object when it is constructed, which can be obtained and set through data.getid () and data.setid (id). The ID value cannot be changed after the Data object is added to the DataModel. Datamodel.getdatabyid (ID) is a quick way to find Data objects. However, it is generally recommended that the id attribute be automatically assigned by HT, and the unique identifier of the user’s business significance can be stored on the tag attribute. Data#setTag(tag) function allows arbitrary dynamic change of tag value. The corresponding Data object can be found by DataModel#getDataByTag(tag) and can be deleted by DataModel#removeDataByTag(tag). Datamodel.getdatabytag (tag) = datamodel.getDatabyTag (tag);

{
    "c": "ht.Block"."i": 3849,
    "p": {
        "displayName": "Ventilation 1"."tag": "fan1"."position": {
            "x": 491.24174."y": 320.88985},"width": 62,
        "height": 62}}Copy the code

var fan1 = dataModel.getDataByTag('fan1');
var fan2 = dataModel.getDataByTag('fan2');
var camera1 = dataModel.getDataByTag('camera1');
var camera2 = dataModel.getDataByTag('camera2');
var camera3 = dataModel.getDataByTag('camera3');
var redAlarm = dataModel.getDataByTag('redAlarm');
var yellowAlarm = dataModel.getDataByTag('yellowAlarm');
Copy the code

I have made the corresponding elements of each label in the figure below:

animation

Then we set the objects that need to rotate and blink. In HT, the setRotation(rotation) function is wrapped into the setRotation(rotation) function. By getting the current rotation Angle of the object, an additional radian is added to this Angle. This will rotate the same radians in a certain amount of time:

setInterval(function(){
    var time = new Date().getTime();
    var deltaTime = time - lastTime;
    var deltaRotation = deltaTime * Math.PI / 180 * 0.1;
    lastTime = time;

    fan1.setRotation(fan1.getRotation() + deltaRotation*3);
    fan2.setRotation(fan2.getRotation() + deltaRotation*3);
    camera1.setRotation(camera1.getRotation() + deltaRotation/3);
    camera2.setRotation(camera2.getRotation() + deltaRotation/3);
    camera3.setRotation(camera3.getRotation() + deltaRotation/3);

    if (time - stairTime > 500) {
        stairIndex--;
        if (stairIndex < 0) {
            stairIndex = 8;
        }
        stairTime = time;
    }

    for(var i = 0; i < 8; I++) {// because there are some similar elements we set the tag name similar, but after the 1, 2, 3, so we passforLoop to get var color = stairIndex == I?'#F6A623' : '#CFCFCF';
        dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
        dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
    }

    if (new Date().getSeconds() % 2 === 1) {
        yellowAlarm.s('shape.background', null);
        redAlarm.s('shape.background', null);
    }
    else {
        yellowAlarm.s('shape.background'.'yellow');
        redAlarm.s('shape.background'.'red'); }}, 5);Copy the code

Of course can be operated by HT encapsulation of animation, but this is not a one-time hurl food too much, interested can look at my https://www.cnblogs.com/xhload3d/p/9222549.html released and other articles.

HT also encapsulates the setStyle function to set the style, which can be abbreviated as S, The specific style refer to HT for Web style manual (http://hightopo.com/guide/guide/core/theme/ht-theme-guide.html) :

for(var i = 0; i < 8; I++) {// because there are some similar elements we set the tag name similar, but after the 1, 2, 3, so we passforLoop to get var color = stairIndex == I?'#F6A623' : '#CFCFCF';
    dataModel.getDataByTag('stair_1_' + i).s('shape.border.color', color);
    dataModel.getDataByTag('stair_2_' + i).s('shape.border.color', color);
}
Copy the code

We also timed the flashing of the “warning light” to set the background color to “colorless” for even seconds, “yellow” for yellowAlarm, and “red” for redAlarm:

if (new Date().getSeconds() % 2 === 1) {
    yellowAlarm.s('shape.background', null);
    redAlarm.s('shape.background', null);
}
else {
    yellowAlarm.s('shape.background'.'yellow');
    redAlarm.s('shape.background'.'red');
}
Copy the code

conclusion

In March 2015, Premier Li Keqiang first proposed the “Internet Plus” action plan in his government work report. Later, The State Council issued the Guiding Opinions on Actively Promoting the “Internet Plus” Action to promote the expansion of the Internet from consumption to production, so as to further improve the level of industrial development and enhance the innovation capacity of the industry. Under the background of “Internet +”, the urban rail transit industry should keep up with the trend of The Times, introduce “Internet +” thinking into project investment management, and develop an urban rail transit project investment management system based on “Internet +”, so as to improve the function distribution and user experience of the cost management system. “Internet +” crossover by industry, search the Internet and the correlation of urban rail transit project, the traditional industry data information processing, to raise its originally limited data, analysis, and the circulation, to “Internet +” multiplier effect, significantly increased the project investment management of the data in the real-time dynamic precise and complete.

https://hightopo.com/demo/metro/demo1.html

https://hightopo.com/demo/large-screen/index.html