Skip to content

李宁 / Activity

Go to a project
Switch branch/tag
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?6763276">
</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="move">立即移出</div>
                <div class="right" key="agree">用户已同意</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" 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?676"></script>
</body>

</html>