demo.html
18.2 KB
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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>江苏移动</title>
<link rel="stylesheet" href="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/css/vant.css"/>
<link rel="stylesheet" href="css/demo.css?676333276">
</head>
<body>
<div class="container">
<div class="cameraDiv">
<div id="local-player" style="width: 100%;height: 100%;position: relative;overflow: hidden;">
</div>
</div>
<canvas id="canvas" style="display: none;"></canvas>
<div class="conDiv">
<div class="tsDiv" id="exampleTsDiv">
<div class="tsleft">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/tanhao2.png" alt="">
<div id="exampleTsText">请正面拍摄书写规范的账号</div>
</div>
<div class="tsright" id="lookExample">
<div>查看示例</div>
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/rArrow.png" alt="">
</div>
</div>
<div class="swUp">
<div class="til">
<div class="left">
<img class="tx" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/tx.png">
<div>江苏移动</div>
</div>
<div class="right" id="toolDiv">
<div class="rli" id="lightOutDiv">
<div class="rlii" id="lightDiv">
<img id="lightImg" class="img" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/light.png">
<div>手电筒</div>
</div>
<img id="lightShowTs" class="ts" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/lightTs.png">
</div>
<div class="rli" id="cameraDiv">
<img class="img" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/camera.png?123">
<div>镜头包</div>
</div>
</div>
</div>
<div class="detail" id="contextDiv"></div>
</div>
<div class="mpTs" id="menPaiDiv">
<div class="mpL">工单门牌号: <span id="menPaiShow"></span></div>
<div class="mpR modifyMp">门牌号有误? <span>点击修改</span></div>
</div>
<div class="swMiddle">
<div class="cts timeTs">将检测内容置于画面中央 <span>2s</span></div>
<div class="switchDiv" id="videoSwitch">
<img class="reverse" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/reverse.png">
<div>切换</div>
</div>
<div class="border"></div>
<div class="center" id="cameraArea"></div>
<div class="border"></div>
<div class="butt" id="inputAccountTs">
<div class="text">账号识别困难?点这里</div>
<div class="bclick" id="accountAlertShow">手动输入</div>
</div>
</div>
<div class="swDown" id="tipDiv">
<div class="buttDiv" style="flex-grow: 1;">
<div class="one none clickButt" id="readButt" key="ok">准备好了</div>
<div class="one none clickButt" id="nextQuestion" key="nextStep">下一个问题</div>
<div class="two none" id="qiaoOrZhi">
<div class="clickButt" key="zhilian">直连</div>
<div class="clickButt" key="qiaolian">桥连</div>
</div>
<div class="three none" id="wangXian">
<div class="clickButt" key="mingxian">光纤明线</div>
<div class="clickButt" key="anxian">光纤暗线</div>
<div class="clickButt" key="wangxian">网线</div>
</div>
<div class="two none" id="guangLan">
<div class="clickButt" key="yinxing">隐形光缆</div>
<div class="clickButt" key="baise">白色皮缆</div>
</div>
<div class="two none" id="shiFou">
<div class="clickButt" key="yes">是</div>
<div class="clickButt" key="no">否</div>
</div>
<div class="two none" id="joinFlag">
<div class="clickButt" key="canjia">参加</div>
<div class="clickButt" key="bucanjia">不参加</div>
</div>
<div class="three none" id="donwLOad">
<div class="clickButt" key="yixiazai">是</div>
<div class="clickButt" key="weixiazai">否</div>
<div class="clickButt" key="buqingchu">不清楚</div>
</div>
<div class="two none" id="shootButt2">
<div class="clickButt blue" key="uninstall">用户未安装</div>
<div class="clickButt blue" key="yiwancheng">已完成</div>
</div>
<div class="one none clickButt" id="shootButt" key="yiwancheng">已完成</div>
</div>
</div>
</div>
<audio id="mp3Source" muted playsinline src=""></audio>
<div class="alertDiv" id="accountAlertDiv">
<div class="inner">
<div class="til">输入用户账号</div>
<input id="accountValue" class="input" type="text" placeholder="请输入用户账号">
<div class="bot">
<button class="cancel" onclick="inputCancel()">取消</button>
<button class="submit" onclick="accountInputSubmit()">提交</button>
</div>
</div>
</div>
<div class="alertDiv" id="snAlertDiv">
<div class="inner">
<div class="til" id="snAlertTile">请确认设备串号</div>
<textarea id="snValue" class="input snInput" rows="1" type="text" placeholder="请输入设备串号"></textarea>
<div class="errorTs" id="snErrorTs">如识别错误你可重新进行拍摄或直接修改</div>
<div class="bot">
<button class="cancel snAgain">重新拍摄</button>
<button class="submit" onclick="snInputSubmit()">确认</button>
</div>
</div>
</div>
<div class="waittingDiv" id="waitting">
<div class="inner">
<div class="imgDiv">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/back.png" alt="" style="display: block;">
<img class="loadImg" id="loadImg1" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/1.png" alt="">
</div>
<div style="line-height: 1;" id="waitText">记录中，请稍后...</div>
</div>
</div>
</div>
<div class="outAlert" id="accountExampleAlert">
<div class="exampleCon">
<div class="up">
<div class="til">示例</div>
<div class="text">1、手写账号数字请规整，避免识别出错！</div>
<div class="text">2、拍摄时请保持垂直拍摄，避免出现反光、画面不清晰、画面抖动的情况</div>
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/example.png" alt="">
</div>
<div class="butt" id="hideAccountExample">确认</div>
</div>
</div>
<div class="outAlert" id="confirmFlag">
<div class="alertCon">
<div class="info">因长时间未收到有效视频信息，质检流程暂时关闭。</div>
<div class="butt">
<div class="left pageClose">关闭</div>
<div class="right continueTest">继续质检</div>
</div>
</div>
</div>
<div class="outAlert" id="beginFail">
<div class="alertCon">
<div class="info">启动失败，请刷新重试</div>
<div class="butt">
<div class="left pageClose">关闭</div>
<div class="right continueTest">刷新</div>
</div>
</div>
</div>
<div class="outAlert" id="beginAlert">
<div class="beginCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">拍摄时注意以下事项</div>
</div>
<div class="ts">您好，师傅，我是你的智能质检助手</div>
<!-- <div class="one">1.语音回复时，请保持周围环境安静，如果周围环境较为喧嚣，进入质检后，你可<span>点击页面右上方的麦克风图标关闭麦克风</span>，选择页面按钮与我交互。</div>
<img class="oneImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bU.png" alt=""> -->
<div class="two" id="beginTs">为了保证检测的正确率和效率，拍摄设备时，请<span>从设备的正面角度进行拍摄</span>。</div>
<img class="twoImg" id="beginImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bD.png" alt="">
<div class="bts">祝您工作顺利，快开启质检之旅吧!</div>
<div class="butt" id="videoBegin">立即开始</div>
</div>
</div>
<div class="outAlert" id="gongfuExampleAlert">
<div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts">拍摄时请手持工牌，并将工服上的logo置于屏幕中央，如图所示:</div>
<img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongfu.png" alt="">
<div class="butt" id="hideGongfuAlert">我知道了</div>
</div>
</div>
<div class="outAlert" id="gongpaiExampleAlert">
<div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">温馨提示</div>
</div>
<div class="bts">如果您的工牌已经有了“岁月”的痕迹（磨损严重），拍摄时请将摄像头聚焦到工牌，如下图所示</div>
<img class="twoImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/gongpai.png" alt="">
<div class="butt" id="hideGongpaiAlert">我知道了</div>
</div>
</div>
<div class="outAlert" id="snExampleAlert">
<div class="mpCon snCon">
<div class="stil">查看示例</div>
<div class="bts" id="snExampleText"></div>
<img class="twoImg" id="snExampleImg" alt="">
<div class="butt" id="hidesnExampleAlert">我知道了</div>
</div>
</div>
<div class="waittingDiv" id="loading" style="display: block;">
<div class="inner">
<div class="imgDiv">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/back.png" alt="" style="display: block;">
<img class="loadImg" id="loadImg1" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/1.png" alt="">
</div>
<div style="line-height: 1;" id="loadingText">加载中，请稍候...</div>
</div>
</div>
<div id="pageDiv">
<div class="outAlert pickAlert" v-if="reasonPickData.isShow" style="display: flex-end;">
<van-picker
show-toolbar
:title="reasonPickData.title"
:columns="reasonPickData.arr"
:default-index="reasonPickData.index"
@cancel="reasonCancel"
@confirm="reasonConfirm"
/>
</div>
</div>
<div class="outAlert" id="snErrorAlert">
<div class="mpCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">串号无法识别? 请进行以下尝试</div>
</div>
<div class="bts small" id="snErrorText">1、请将摄像头近距离正面聚焦在 STBID/SN 码上，确保整串字符完整清晰。</div>
<img class="twoImg pImg" id="snErrorImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/jdhSnSbError.png" alt="">
<div class="bts small">2、使用页面右上方镜头包功能尝试切换摄像头再进行识别。</div>
<img class="twoImg pImg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png" alt="">
<div class="butt" id="hideSnErrorAlert">我知道了</div>
</div>
</div>
<div class="outAlert" id="noShootShowAlert">
<div class="noShootCon">
<img class="topBg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/bBg.png" alt="">
<div style="display: flex;">
<div class="til">设备无法识别? 请进行以下尝试</div>
</div>
<div class="dtil" id="noShootTextShow">方法1:近距离聚焦拍摄光猫正面,露出移动的标识。</div>
<img class="dimg" id="noShootImgShow" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/noShoot/Ogm.png">
<div class="dtil">方法2:使用页面右上方镜头包功能尝试切换摄像头进行识别。</div>
<img class="dimg" src="http://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png">
<div class="dtil">方法3:点击【无法拍摄】跳过此环节。</div>
<div class="botBut">
<div class="clickButt left" key="bunengpai">无法拍摄</div>
<div class="right" id="hideNoShootAlert">我知道了</div>
</div>
</div>
</div>
<div class="outAlert" id="pictureShowAlert">
<div class="paiZhaoCon">
<div class="til">温馨提示</div>
<div class="ts" id="picshowText">为确保准确识别串号，请拍清照片并确认串号清晰可见后，再提交。</div>
<img id="photoImg" src="http://xpo.oss-cn-beijing.aliyuncs.com/huaian/cameraSwitchGuide.png">
<div class="botBut">
<div class="left snAgain" key="photo">重新拍摄</div>
<div class="right" id="submitPicture">提交</div>
</div>
</div>
</div>
<div class="outAlert" id="noShootReasonAlert">
<div class="alertCon noTestCon">
<div class="til">我要反馈</div>
<div class="topTs">如你出现无法拍摄的情况，比如反复拍摄无法识别,安装环境无法正常拍摄,你可填写原因和情况说明跳过此环节。</div>
<div class="cli">
<div class="ctil">
<img src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/xing.png" alt="">
<div>情况说明</div>
</div>
<textarea id="noShootReason" placeholder="请填写具体情况"></textarea>
</div>
<div class="know" id="noShootSave">保存</div>
<div class="botTs">提交后管理员会重点检查,并且您无法再次对该环节进行质检</div>
<img class="close" id="noShootClose" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/close.png">
</div>
</div>
<div class="outAlert" id="gmBoxTsAlert">
<div class="alertCon">
<div class="info">检测到主光猫置于箱（柜）内，根据内部施工规范与验收要求，建议您将设备移至箱（柜）外并预留≥5 cm散热空间。</div>
<div class="butt" id="gmBoxButt">
<div class="left" key="remove">立即移出</div>
<div class="right" key="userAgree">用户已同意</div>
</div>
</div>
</div>
<div class="outAlert" id="warningTsAlert">
<div class="alertCon warningCon">
<img class="icon" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cheatWarn.png" alt="">
<div class="detail">
<img class="bg" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cheatBg.png" alt="">
<img class="close" id="cheatClose" src="https://xpo.oss-cn-beijing.aliyuncs.com/huaian/cheatClose.png" alt="">
<div class="til">环境异常警告</div>
<div class="des">为保障服务质量与数据真实性，质检过程需在标准装维场景下进行。系统识别到当前环境不符合规范，已 <span>记<em id="cheatNum">1</em>次“疑似作弊”</span>。</div>
<div class="des dess" id="allowProcess">若再出现类似违规操作，该工单将自动标记为<span>“作弊工单”</span>，同时暂停<span>暂停质检并通报考核</span>。</div>
<div class="des dess" id="forbidProcess">该工单已自动标记为<span>“作弊工单”</span>，<span>无法继续质检</span>，如存在误判情况可及时 <span>联系管理员或平台运营人员</span> 解除异常。</div>
<div class="quit pageClose" id="cheatQuitBut">退出质检</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/vconsole.min.js"></script>
<script>
var vConsole = new VConsole()
</script>
<script src="js/livekit-client.min.js"></script>
<script src="js/aliyun-oss-sdk-6.20.0.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/AgoraRTC_N.js"></script>
<script src="js/util.js?1212"></script>
<script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/demo.js?2333333"></script>
</body>
</html>