Skip to content

Multi-task navigation to third-party pages

Jump to Third-Party Page Process

1.Configuration: In the settings interface => Other Settings => Custom Page Settings, turn on the configuration switch, and configure the task to start and jump to the third-party page URL http://xxx.com/xxx.html, and the task arrival jump to the third-party page URL http://xxx.com/xxx.html.

2.Task Start: In the multiple task creation interface, click the task point, and jump to the configured task start page, which will pass the current point name, ID. After the third party completes the business, it sends a message back to the baseline APP, and the task begins.

3.Task Arrival: When the task arrives, it will jump to the configured task arrival page, passing the current point name, ID, order number, and third-party page URL. After the third party completes the business, it sends a message back to the baseline APP, and the task continues.

Third-Party Page eg:

1.Provide the customer's own page address, eg: http://10.10.20.125:8000/xxx.html

2.Page size：1280*720

3.The customer’s own page needs to provide a communication method.

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Listen for messages from the baseline app
window.addEventListener('message', (event) => {
  if(event.data) {
    /**
     * @params  event.data
     * name: Current point name
     * id: Current point ID
     * orderId: Current point order number, generated by the customer's page
     * */
    const data = JSON.parse(event.data); // {name: ''}
    // poiName.innerText = Current point: ${data.name} + (data.orderId ? (Order No:${data.orderId}) : '');
  }
})


// 向基线APP 发送消息
    /**
     * @params  data
     * type: 0 Cancel 1 Confirm
     * orderId: Current order ID (unique ID, used to notify the third-party page of the generated order number)
     * url: Optional parameter, used to specify the URL for the arrival page to jump to the customer page address, if not provided, it will jump to the arrival page set in the robot configuration
     * */
    const data = {
        type: 0,
        orderId: 'PO1728544645390',
        url: 'http://www.xxx.com'
    }
    // Send message to the baseline APP
    window.parent.postMessage(data, '*'); // '*' can be replaced with a specific source

4.客户自己页面参考例子

HTML
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .header,
    .body-con,
    select,
    .footer {
        text-align: center;
        font-size: 24px;
    }

    .header {
        padding-top: 20px;
        height: 10%;
    }
    .input-item {
        border: 1px solid #cccccc;
        height: 40px;
        text-indent: 10px;
        width: 300px;
    }

    .body-con {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .body-111 {
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 24px;
        flex-direction: column;
    }
    .body-111 p {
        text-align: center;
    }

    .footer {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn {
        background: #646cff;
        padding: 10px 30px;
        border-radius: 10px;
        color: #f9f9f9;
        margin-right: 30px;
    }
    .cancel {
        background: #cccccc;
    }
</style>

<body>

<div class="header">
    <h3 id="poi-name">Current Point: </h3>
    <h5>Scan Barcode</h5>
</div>
<div class="body-con">
    <div class="input-box">
        <input id="elInput" class="input-item" autofocus placeholder="Please scan the barcode" @blur="blur" @input="changeCode">
    </div>
</div>

<div class="body-111" id="code-list">
</div>

<div class="footer">
    <span class="btn cancel" id="close">Cancel</span>
    <span class="btn" id="sure">Confirm</span>
</div>
</body>

<script>
    window.onload = function() {
        const elInput = document.getElementById('elInput');
        elInput.focus();
        const poiName = document.getElementById('poi-name');
        // Listen for messages from the baseline app
        window.addEventListener('message', (event) => {
            console.log('Message from parent:', event.data);
            if(event.data) {
                /**
                 * @params  event.data
                 * name: Current point name
                 * id: Current point ID
                 * orderId: Current point order number, generated by the customer page
                 * */
                const data = event.data;
                poiName.innerText = `Current Point: ${data.name}` + (data.orderId ? `(Order No.:${data.orderId})` : '');
            }
        });

        // Get button elements
        const button = document.getElementById('close');
        const sureBtn = document.getElementById('sure');
        const codeListDom = document.getElementById('code-list');
        const codeList = JSON.parse(localStorage.getItem('codeList') || '[]')
        insertHtml()
        elInput.addEventListener('input', (event) => {
            console.log('Input content:', event.target.value);
            pushCode(event.target.value)
        })

        var debounce = (fn,delay = 1000)=>{
            let t =null
            return (...args)=>{
                const context = this;
                if(t!=null){
                    clearTimeout(t)
                }
                t=setTimeout(()=>{
                    fn.apply(context, args)
                },delay)
            }
        }
        var pushCode = debounce((value) => {
            value = value.replace("\n", "")
            const index = codeList.findIndex((item)=>{
                return  item === value
            })
            if(index !== -1) {
                codeList.splice(index, 1)
                elInput.value = '';
            }else {
                codeList.push(value)
                elInput.value = '';
            }
            insertHtml()

        }, 200)


        function insertHtml() {
            const html = codeList.reduce((acc, curr) => {
                return acc + `<p>${curr}</p>`
            }, '')
            codeListDom.innerHTML = html
        }

        sureBtn.onclick = function () {
            localStorage.setItem('codeList', JSON.stringify(codeList))
            /**
             * @params  data
             * type: 0 Cancel 1 Confirm
             * orderId: Current order ID (unique ID, used to notify the third-party page of the generated order number)
             * */
            const data = {
                type: 1,
                orderId: `PO${new Date().getTime()}`,
            }
            // Send message to the parent page
            window.parent.postMessage(data, '*'); // '*' can be replaced with a specific source
        }

        // Add click event listener
        button.addEventListener('click', () => {
            const data = {
                type: 0,
            }
            // Send message to the parent page
            window.parent.postMessage(data, '*'); // '*' can be replaced with a specific source
        });
    };
</script>
</html>

Multiple Task Jump to Third-Party Page After Arrival

TypeScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const task5 = {
    "name": "Multiple Tasks",
    "runNum": 1,
    "runMode": 1,
    "taskType": 2,
    "runType": 21,
    "curPt": {},
    "pts": [
        {
            "x": 7.276271231262399,
            "y": -22.44962375343107,
            "yaw": 261.5,
            "areaId": "67e67399103fd836e52050db",
            "dockingRadius": "1",
            "ext": {
                "name": "Point One",
                "id": "67e6739c217da3b4832b32ff",
                "orderId": "PO1752474223883",  // The order ID returned by the third-party page
                "url": "http://10.10.40.134:5173/index.html"   // The URL to jump to the third-party page
            },
            "stepActs": [
                {
                    "type": 5,
                    "data": {
                        "mode": 1,
                        "audioId": "3111002",
                        "num": 1,
                        "volume": 0,
                        "interval": -1,
                        "duration": -1,
                        "forcePlay": true
                    }
                },
                {
                    "type": 40
                }
            ]
        }
    ],
    "backPt": {},
    "ignorePublicSite": true
}
const success = axRobot.startTask(task5)