{"remainingRequest":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\dm\\HHHT-fbky\\hhht_fbky\\src\\components\\HelloWorld.vue?vue&type=style&index=0&id=64e72ecc&scoped=true&lang=css&","dependencies":[{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\src\\components\\HelloWorld.vue","mtime":1741074696345},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\css-loader\\index.js","mtime":1740991506810},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1740991518730},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\postcss-loader\\src\\index.js","mtime":1740991519885},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1740991511838},{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\node_modules\\vue-loader\\lib\\index.js","mtime":1740991518721}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.fbky-container {\n\twidth: 100%;\n\tbackground: #00000000;\n}\n\n.top {\n\tcolor: #fff;\n\tfont-size: 14px;\n\t/* height: 60px; */\n\ttext-align: left;\n}\n\n.fbky_manage {\n\tcolor: #fff;\n\tfont-size: 14px;\n\tmargin-top: 10px;\n\t/* margin-bottom: 10px; */\n\ttext-align: left;\n}\n\n.fbky_manage span {\n\tdisplay: inline-block;\n\tmargin-left: 20px;\n\tcolor: red;\n}\n\n.fbky-container .websocket {\n\t/* width: 100%; */\n\t/* height: 60%; */\n\tdisplay: flex;\n\tpadding: 20px;\n\t/* background-color: #f1f4f7; */\n}\n\n.fbky-container .websocket .websocket_left {\n\t/* width: 70%; */\n\t/* padding-right: 20px; */\n}\n\n.fbky-container .websocket .websocket_left .set_case {\n\tdisplay: flex;\n}\n\n.fbky-container .websocket .websocket_left .set_case .set_call .set_name {\n\twidth: 80px;\n}\n\n.fbky-container .websocket .websocket_left .set_case .set_item {\n\tmargin-bottom: 15px;\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.fbky-container .websocket .websocket_left .set_case .call_left {\n\t/* width: 50%; */\n\tdisplay: flex;\n\tpadding-right: 20px;\n}\n\n.fbky-container .websocket .websocket_left .set_case .call_right {\n\twidth: 50%;\n\tdisplay: flex;\n}\n\n.fbky-container .websocket .websocket_left .video_box {\n\theight: 200px;\n\tdisplay: flex;\n}\n\n.fbky-container .websocket .websocket_left .video_box .video_left,\n.fbky-container .websocket .websocket_left .video_box .video_right {\n\twidth: 50%;\n}\n\n.fbky-container .websocket .websocket_left .video_box .video_left {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.fbky-container .websocket .websocket_left .video_box .video_right {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n\n.fbky-container .websocket .websocket_right {\n\twidth: 30%;\n}\n\n.fbky-container .websocket .websocket_right .set_box {\n\twidth: 100%;\n\t/* background-color: #fff; */\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.set_box {\n\twidth: 100%;\n\t/* background-color: #fff; */\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.set_item:last-child {\n\tmargin-bottom: 0;\n}\n\n.group_case {\n\tjustify-content: space-between;\n}\n\n.set_group {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.set_slt,\n.set_ipt {\n\tflex: auto;\n\theight: 30px;\n\tline-height: 30px;\n\tborder: 1px solid #d1d1d1;\n\toutline: none;\n\tborder-radius: 3px;\n\tpadding-left: 10px;\n\tbackground-color: #fff !important;\n}\n\n.btn {\n\tpadding: 6px 12px;\n\tborder-radius: 3px;\n\tcursor: pointer;\n\toutline: none !important;\n\tfont-size: 12px !important;\n}\n\n.btn:hover {\n\topacity: 0.8;\n}\n\n.blue_btn {\n\tbackground-color: #1890ff;\n\tborder: 1px solid #1890ff;\n\tcolor: #fff !important;\n}\n\n.cyan_btn {\n\tbackground-color: #00bcd4;\n\tborder: 1px solid #00bcd4;\n\tcolor: #fff !important;\n}\n\n.white_btn {\n\tbackground-color: #fafafa;\n\tborder: 1px solid #d1d1d1;\n}\n\n.video_box {\n\tdisplay: flex;\n}\n\n.video_left,\n.video_right {\n\twidth: 50%;\n}\n\n.video_left {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.video_right {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n\n.video_item {\n\tposition: relative;\n\tbackground-color: #fff;\n\tborder: 1px solid #d1d1d1;\n}\n\n.video_item1 {\n\twidth: 100%;\n\tflex: auto;\n}\n\n.video_item2 {\n\twidth: 100%;\n}\n\n.video_item3 {\n\twidth: 50%;\n}\n\n.video_name {\n\tposition: absolute;\n\ttop: 5px;\n\tleft: 5px;\n}\n\n.video_tag {\n\twidth: 100%;\n\theight: 100%;\n}\n\n.set_case {\n\tdisplay: flex;\n}\n\n.set_status {\n\tcolor: #fff;\n\tborder-radius: 10px;\n\tpadding: 4px 10px;\n}\n\n.off_status {\n\tbackground-color: #bbb;\n}\n\n.on_status {\n\tbackground-color: #3fd672;\n}\n\n.must {\n\tcolor: red;\n\tfont-size: 17px;\n\tposition: absolute;\n\tleft: -10px;\n\ttop: 0px;\n}\n\n.set_name {\n\tposition: relative;\n}\n\n.set_zhuce .set_name {\n\twidth: 140px;\n}\n\n.set_equipment .set_name {\n\twidth: 90px;\n}\n\n.margin {\n\tmargin-right: 20px;\n}\n\n.his_left {\n\twidth: 30%;\n\tdisplay: flex;\n}\n\n.his_right {\n\twidth: 70%;\n\tdisplay: flex;\n}\n\n.ipt_number {\n\tflex: none;\n\twidth: 50%;\n}\n\n.call_box {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\theight: 100%;\n}\n\n.call_box .set_name {\n\tmargin-bottom: 12px;\n}\n\n.call_case {\n\tdisplay: flex;\n\theight: 135px;\n\toverflow: hidden auto;\n\tborder: 1px solid #d1d1d1;\n\twidth: 100%;\n}\n\n.his_case {\n\tdisplay: flex;\n\theight: 182px;\n\toverflow: hidden auto;\n\tborder: 1px solid #d1d1d1;\n\twidth: 100%;\n}\n\n#call_list {\n\tflex: auto;\n}\n\n#call_list>li,\n#his_list>li {\n\theight: 30px;\n\tline-height: 30px;\n\tpadding: 0 20px;\n\tcursor: pointer;\n}\n\n#call_list>li:hover,\n#his_list>li:hover {\n\tbackground-color: #eee;\n}\n\n.set_his {\n\tflex-direction: column;\n\talign-items: flex-start;\n}\n\n.set_his .set_name {\n\tmargin-bottom: 15px;\n}\n\n#his_list {\n\twidth: 100%;\n}\n\n.set_speed {\n\tflex-direction: column;\n\talign-items: flex-start;\n}\n\n#speed {\n\tmargin-top: 20px;\n}\n\n.ipt_call {\n\tflex: none;\n\twidth: 30%;\n\tmargin-right: 15px;\n}\n\n.check_box {\n\tcursor: pointer;\n\twidth: 20%;\n}\n\n.check {\n\tposition: relative;\n\ttop: 2px;\n}\n\n.come_box {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n}\n\n.set_first {\n\tmargin-top: 30px;\n}\n\n.group_right {\n\tmargin-left: 20px;\n}\n",{"version":3,"sources":["HelloWorld.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6sBA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA","file":"HelloWorld.vue","sourceRoot":"src/components","sourcesContent":["<template>\r\n\t<div class=\"fbky-container\">\r\n\t\t<div class=\"top\">\r\n\t\t\t<span> 呼叫对象：呼和浩特全战场 </span>\r\n\t\t\t<span id=\"off_status\" class=\"set_status off_status\">离线</span>\r\n\t\t\t<span id=\"on_status\" class=\"set_status on_status\" hidden=\"\">在线</span>\r\n\t\t</div>\r\n\t\t<div class=\"fbky_manage\">\r\n\t\t\t<el-button type=\"primary\" @click=\"initPerimeter\">连接防爆扩音</el-button>\r\n\t\t\t<el-button type=\"info\" @click=\"webRtcLogout\">断开防爆扩音</el-button>\r\n\t\t\t<el-button type=\"success\" @click=\"dial(0)\">呼出通话</el-button>\r\n\t\t\t<el-button type=\"danger\" @click=\"callHangupAll\">挂断通话</el-button>\r\n\t\t\t<span>注：听到提示音后开始讲话，通话结束后请断开防爆扩音</span>\r\n\t\t</div>\r\n\t\t<div class=\"websocket\" style=\"display: none;\">\r\n\t\t\t<div class=\"websocket_left\">\r\n\t\t\t\t<div class=\"set_case\">\r\n\t\t\t\t\t<div class=\"set_split call_left set_call\">\r\n\t\t\t\t\t\t<div class=\"set_box\">\r\n\t\t\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t\t\t<div class=\"set_group\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"set_name\">呼出号码：</span>\r\n\t\t\t\t\t\t\t\t\t<input type=\"text\" class=\"set_ipt ipt_number\" id=\"destinationNumber\"\r\n\t\t\t\t\t\t\t\t\t\t:v-model=\"ringNumber\" />\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"set_group\">\r\n\t\t\t\t\t\t\t\t\t<button class=\"btn cyan_btn\" id=\"hc\" @click=\"dial(0)\">\r\n\t\t\t\t\t\t\t\t\t\t语音呼出\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_split call_right\" style=\"display: none;\">\r\n\t\t\t\t\t\t<div class=\"set_box come_box\">\r\n\t\t\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t\t\t<div class=\"set_group\">\r\n\t\t\t\t\t\t\t\t\t<span class=\"set_name\">当前来电：</span>\r\n\t\t\t\t\t\t\t\t\t<span id=\"call_in_now\" callID=\"\"></span>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"set_group group_right\">\r\n\t\t\t\t\t\t\t\t\t<button class=\"btn blue_btn margin\" @click=\"callInAnswer(1)\">\r\n\t\t\t\t\t\t\t\t\t\t视频接听\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t<button class=\"btn cyan_btn margin\" @click=\"callInAnswer(0)\">\r\n\t\t\t\t\t\t\t\t\t\t语音接听\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t<button class=\"btn white_btn\" @click=\"callInHangup()\">\r\n\t\t\t\t\t\t\t\t\t\t挂断\r\n\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"set_case\" style=\"display: none;\">\r\n\t\t\t\t\t<div class=\"set_split his_left\">\r\n\t\t\t\t\t\t<div class=\"set_box\">\r\n\t\t\t\t\t\t\t<div class=\"set_item call_box\">\r\n\t\t\t\t\t\t\t\t<span class=\"set_name\" style=\"color: red\">执行操作前，请选择正在通话列表(支持同时多路通话)：</span>\r\n\t\t\t\t\t\t\t\t<div class=\"call_case\">\r\n\t\t\t\t\t\t\t\t\t<ul id=\"call_list\"></ul>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_split his_right\">\r\n\t\t\t\t\t\t<div class=\"set_box\">\r\n\t\t\t\t\t\t\t<div class=\"set_item set_first\">\r\n\t\t\t\t\t\t\t\t<span class=\"set_name\">call ID：</span>\r\n\t\t\t\t\t\t\t\t<input type=\"text\" class=\"set_ipt ipt_call\" id=\"callID\" readonly />\r\n\t\t\t\t\t\t\t\t<button class=\"btn blue_btn\" @click=\"callHoldUnhold()\">\r\n\t\t\t\t\t\t\t\t\t保持/取消保持指定通话\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t\t\t<span id=\"mute_off_status\" class=\"set_status off_status margin\" hidden=\"\">己关闭</span>\r\n\t\t\t\t\t\t\t\t<span id=\"mute_on_status\" class=\"set_status on_status margin\" hidden=\"\">未关闭</span>\r\n\t\t\t\t\t\t\t\t<button class=\"btn blue_btn\" @click=\"callMuteUnmute()\">\r\n\t\t\t\t\t\t\t\t\t关闭/打开指定通话本地声音\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t\t\t<span id=\"mute_video_off_status\" class=\"set_status off_status margin\"\r\n\t\t\t\t\t\t\t\t\thidden=\"\">已关闭</span>\r\n\t\t\t\t\t\t\t\t<span id=\"mute_video_on_status\" class=\"set_status on_status margin\" hidden=\"\">未关闭</span>\r\n\t\t\t\t\t\t\t\t<button class=\"btn blue_btn\" @click=\"callMuteUnmuteVideo()\">\r\n\t\t\t\t\t\t\t\t\t关闭/打开指定通话本地视频\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t\t\t<button class=\"btn blue_btn margin\" @click=\"callHangup()\">\r\n\t\t\t\t\t\t\t\t\t挂断指定通话\r\n\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"video_box\" style=\"display: none;\">\r\n\t\t\t\t\t<div class=\"video_left\">\r\n\t\t\t\t\t\t<div class=\"video_item video_item1\">\r\n\t\t\t\t\t\t\t<span class=\"video_name\">local_video</span>\r\n\t\t\t\t\t\t\t<video class=\"video_tag\" id=\"local_video\" width=\"10%\" height=\"10%\" autoplay=\"true\"></video>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"websocket_right\">\r\n\t\t\t\t<div class=\"set_box set_zhuce\">\r\n\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t<span class=\"set_name\">登录状态：</span>\r\n\t\t\t\t\t\t<span id=\"off_status\" class=\"set_status off_status\">未登录</span>\r\n\t\t\t\t\t\t<span id=\"on_status\" class=\"set_status on_status\" hidden=\"\">已登录</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\"><i class=\"must\">*</i>Websocket URL：</span>\r\n\t\t\t\t\t\t<input type=\"text\" class=\"set_ipt\" v-model=\"socketUrl\"\r\n\t\t\t\t\t\t\tplaceholder=\"wss://192.168.10.39:1443/webrtc\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\" style=\"flex: none\"></span>\r\n\t\t\t\t\t\t<span style=\"color: red\">配置wss后，如果连接失败，请先查看是不是https证书问题\r\n\t\t\t\t\t\t\t可以通话访问对应的https页面，手动允许浏览器安全提示</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\">麦克风：</span>\r\n\t\t\t\t\t\t<select class=\"set_slt\" id=\"audioInputDev\">\r\n\t\t\t\t\t\t\t<option value=\"\">请选择</option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\">摄像头：</span>\r\n\t\t\t\t\t\t<select class=\"set_slt\" id=\"videoInputDev\">\r\n\t\t\t\t\t\t\t<option value=\"\">请选择</option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\">扬声器：</span>\r\n\t\t\t\t\t\t<select class=\"set_slt\" id=\"audioOutputDev\">\r\n\t\t\t\t\t\t\t<option value=\"\">请选择</option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\"><i class=\"must\">*</i>用户名：</span>\r\n\t\t\t\t\t\t<input type=\"text\" class=\"set_ipt\" v-model=\"login\" placeholder=\"8889\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\"><i class=\"must\">*</i>密码：</span>\r\n\t\t\t\t\t\t<input type=\"text\" class=\"set_ipt\" v-model=\"password\" placeholder=\"123456\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\" style=\"flex: none\"></span>\r\n\t\t\t\t\t\t<span style=\"color: red\">支持断线重连，通话中关闭网页，在重新登录后会恢复正在进行的通话</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\">自动登录：</span>\r\n\t\t\t\t\t\t<label class=\"check_box\">\r\n\t\t\t\t\t\t\t<input v-model=\"autoReg\" type=\"checkbox\" class=\"check\" />\r\n\t\t\t\t\t\t\t<span>是</span>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\">自动接听：</span>\r\n\t\t\t\t\t\t<label class=\"check_box\">\r\n\t\t\t\t\t\t\t<input v-model=\"autoAnswer\" type=\"checkbox\" class=\"check\" />\r\n\t\t\t\t\t\t\t<span>是</span>\r\n\t\t\t\t\t\t</label>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\" style=\"flex: none\"></span>\r\n\t\t\t\t\t\t<span style=\"color: red\">注意：每个通话都需要在页面中有一个独立的video标签做为载体，\r\n\t\t\t\t\t\t\t不管是纯音频通话还是音视频通话，\r\n\t\t\t\t\t\t\t多个通话同时使用一个video标签时，后者会覆盖前者通话的视频和音频，\r\n\t\t\t\t\t\t\t测试多路通话时，请每次切换不同的video标签</span>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\" style=\"display: none;\">\r\n\t\t\t\t\t\t<span class=\"set_name\">下次通话视频位置：</span>\r\n\t\t\t\t\t\t<select class=\"set_slt\" id=\"peerTag\">\r\n\t\t\t\t\t\t\t<option value=\"video1\">video1</option>\r\n\t\t\t\t\t\t\t<option value=\"video2\">video2</option>\r\n\t\t\t\t\t\t\t<option value=\"video3\">video3</option>\r\n\t\t\t\t\t\t\t<option value=\"video4\">video4</option>\r\n\t\t\t\t\t\t\t<option value=\"video5\">video5</option>\r\n\t\t\t\t\t\t\t<option value=\"video6\">video6</option>\r\n\t\t\t\t\t\t\t<option value=\"video7\">video7</option>\r\n\t\t\t\t\t\t\t<option value=\"video8\">video8</option>\r\n\t\t\t\t\t\t</select>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t<button class=\"btn blue_btn margin\" @click=\"initPerimeter()\">\r\n\t\t\t\t\t\t\t载入登录\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button class=\"btn cyan_btn margin\" @click=\"webRtcLogin()\">\r\n\t\t\t\t\t\t\t登录\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button class=\"btn white_btn margin\" @click=\"webRtcLogout()\">\r\n\t\t\t\t\t\t\t登出\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t<button class=\"btn cyan_btn\" @click=\"callHangupAll()\">\r\n\t\t\t\t\t\t\t挂断所有\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"set_box set_equipment\" style=\"display: none;\">\r\n\t\t\t\t\t<div class=\"set_item\">\r\n\t\t\t\t\t\t<span class=\"set_name\">本机IP：</span>\r\n\t\t\t\t\t\t<input type=\"text\" class=\"set_ipt\" id=\"localIp\" v-model=\"localIp\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<!-- <div class=\"set_box\">\r\n          <div class=\"set_item set_his\">\r\n            <span class=\"set_name\">呼叫历史记录（本地缓存）：</span>\r\n            <div class=\"his_case\">\r\n              <ul id=\"his_list\"></ul>\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n\r\n<script>\r\n\timport {\r\n\t\trtcHelper\r\n\t} from '@/assets/js/tr_webrtc.min.js'\r\n\t// import Dayjs from \"dayjs\";\r\n\t// import { mapGetters } from \"vuex\";\r\n\texport default {\r\n\t\tname: \"Fbky\",\r\n\t\t// computed: {\r\n\t\t//   ...mapGetters([\"rtcHelper\"]),\r\n\t\t// },\r\n\t\t// props: {\r\n\t\t//   curFbkyData: {\r\n\t\t//     //分机登录参数\r\n\t\t//     type: Object,\r\n\t\t//     require: true,\r\n\t\t//     default: () => ({}),\r\n\t\t//   },\r\n\t\t//   ringNumber: {\r\n\t\t//     //号码参数\r\n\t\t//     type: String,\r\n\t\t//     require: true,\r\n\t\t//     default: \"111\",\r\n\t\t//   },\r\n\t\t//   callDisable: {\r\n\t\t//     //呼出或挂断控制\r\n\t\t//     type: Boolean,\r\n\t\t//     require: true,\r\n\t\t//     default: false,\r\n\t\t//   },\r\n\t\t// },\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\tlogin: \"8889\", //分机号\r\n\t\t\t\tpassword: \"123456\", //分机密码\r\n\t\t\t\tsocketUrl: \"wss://172.10.10.61:1443/webrtc\", //webSocketURL\r\n\t\t\t\tlocalIp: \"\",\r\n\t\t\t\tautoReg: true,\r\n\t\t\t\tautoAnswer: false,\r\n\t\t\t\tmic: \"\", //麦克风选择\r\n\t\t\t\tcam: \"\", //摄像头选择\r\n\t\t\t\tspeak: \"\", //扬声器选择\r\n\t\t\t\tcall_in_now_d: null,\r\n\t\t\t\tringNumber: '111',\r\n\t\t\t\tcallback: {\r\n\t\t\t\t\tonRinging: function(d) {\r\n\t\t\t\t\t\t// 来电\r\n\t\t\t\t\t\tthis.onRinging(d);\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonCalling: function(d) {\r\n\t\t\t\t\t\t// 外呼\r\n\t\t\t\t\t\tthis.onCalling(d);\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonAnswer: function(d) {\r\n\t\t\t\t\t\t// 通话中\r\n\t\t\t\t\t\tthis.onAnswer(d);\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonHangup: function(d) {\r\n\t\t\t\t\t\t// 挂机\r\n\t\t\t\t\t\t// this.onHangup(d);\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonLogin: function() {\r\n\t\t\t\t\t\t//登录回调\r\n\t\t\t\t\t\tconsole.log(\"登录状态在线回调\");\r\n\t\t\t\t\t\tdocument\r\n\t\t\t\t\t\t\t.getElementById(\"off_status\")\r\n\t\t\t\t\t\t\t.setAttribute(\"hidden\", \"hidden\");\r\n\t\t\t\t\t\tdocument.getElementById(\"on_status\").removeAttribute(\"hidden\");\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonLogout: function() {\r\n\t\t\t\t\t\t//登出回调\r\n\t\t\t\t\t\tconsole.log(\"登出状态离线回调\");\r\n\t\t\t\t\t\tdocument.getElementById(\"on_status\").setAttribute(\"hidden\", \"hidden\");\r\n\t\t\t\t\t\tdocument.getElementById(\"off_status\").removeAttribute(\"hidden\");\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t};\r\n\t\t},\r\n\t\twatch: {\r\n\t\t\tcurFbkyData: {\r\n\t\t\t\thandler(newValue) {\r\n\t\t\t\t\tthis.callHangupAll();\r\n\t\t\t\t\tconsole.log(\"数据更新：\", newValue);\r\n\t\t\t\t\tif (newValue.url) {\r\n\t\t\t\t\t\tthis.login = newValue.admin;\r\n\t\t\t\t\t\tthis.password = newValue.password;\r\n\t\t\t\t\t\tthis.socketUrl = newValue.url;\r\n\t\t\t\t\t\tthis.localIp = newValue.localIp;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\t\tthis.initPerimeter();\r\n\t\t\t\t\t}, 1500);\r\n\t\t\t\t},\r\n\t\t\t\tdeep: true,\r\n\t\t\t},\r\n\t\t\tringNumber: {\r\n\t\t\t\thandler(newValue) {\r\n\t\t\t\t\tthis.callHangupAll();\r\n\t\t\t\t\tif (this.callDisable) {\r\n\t\t\t\t\t\tthis.dial(0);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tconsole.log(\"拨打号码：\", newValue);\r\n\t\t\t\t},\r\n\t\t\t\tdeep: true,\r\n\t\t\t},\r\n\t\t\tcallDisable: {\r\n\t\t\t\thandler(newValue) {\r\n\t\t\t\t\tif (newValue) {\r\n\t\t\t\t\t\tthis.dial(0);\r\n\t\t\t\t\t\tconsole.log(\"拨号\", this.ringNumber);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tthis.callHangupAll();\r\n\t\t\t\t\t\tconsole.log(\"挂断\");\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\tdeep: true,\r\n\t\t\t},\r\n\t\t},\r\n\t\tcreated() {\r\n\t\t\tthis.initMediaDevices();\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tthis.initPerimeter();\r\n\t\t\t}, 500);\r\n\t\t},\r\n\t\tdestroyed() {\r\n\t\t\tthis.callHangupAll();\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tthis.webRtcLogout();\r\n\t\t\t}, 500);\r\n\t\t},\r\n\t\tmounted() {},\r\n\t\tmethods: {\r\n\t\t\tgetVideoDiv() {\r\n\t\t\t\treturn document.getElementById(\"peerTag\").value;\r\n\t\t\t},\r\n\t\t\tgetValue(id) {\r\n\t\t\t\treturn document.getElementById(id).value;\r\n\t\t\t},\r\n\t\t\tsetValue(id, value) {\r\n\t\t\t\tdocument.getElementById(id).value = value;\r\n\t\t\t},\r\n\t\t\t//载入参数登录\r\n\t\t\tinitPerimeter() {\r\n\t\t\t\tif (!this.login || !this.password || !this.socketUrl) {\r\n\t\t\t\t\talert(\"请填写必填参数\");\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\t// 缓存配置\r\n\t\t\t\tlocalStorage.verto_login = this.login; //分机账号\r\n\t\t\t\tlocalStorage.verto_password = this.password; //分机密码\r\n\t\t\t\tlocalStorage.verto_socketUrl = this.socketUrl; //webSocketURL\r\n\t\t\t\tlocalStorage.verto_localIp = this.localIp;\r\n\t\t\t\tlocalStorage.verto_autoReg = this.autoReg; //自动登录开关\r\n\t\t\t\tlocalStorage.verto_autoAnswer = this.autoAnswer; //自动接听开关\r\n\t\t\t\trtcHelper.bootstrap(\r\n\t\t\t\t\tthis.login,\r\n\t\t\t\t\tthis.password,\r\n\t\t\t\t\tthis.socketUrl,\r\n\t\t\t\t\tthis.localIp,\r\n\t\t\t\t\tthis.getVideoDiv(),\r\n\t\t\t\t\t\"local_video\",\r\n\t\t\t\t\tthis.callback,\r\n\t\t\t\t\tthis.mic,\r\n\t\t\t\t\tthis.speak,\r\n\t\t\t\t\tthis.cam\r\n\t\t\t\t);\r\n\t\t\t\t// console.log(\r\n\t\t\t\t//   \"配置载入参数\",\r\n\t\t\t\t//   this.login,\r\n\t\t\t\t//   this.password,\r\n\t\t\t\t//   this.socketUrl,\r\n\t\t\t\t//   this.localIp,\r\n\t\t\t\t//   this.getVideoDiv(),\r\n\t\t\t\t//   \"local_video\",\r\n\t\t\t\t//   this.callback,\r\n\t\t\t\t//   this.mic,\r\n\t\t\t\t//   this.speak,\r\n\t\t\t\t//   this.cam\r\n\t\t\t\t// );\r\n\t\t\t},\r\n\t\t\t//获取音视频设备\r\n\t\t\tinitMediaDevices() {\r\n\t\t\t\trtcHelper.getMediaDevices().then((result) => {\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tlet microphone = result.audioInputDevices; //麦克风\r\n\t\t\t\t\t\tlet camera = result.videoDevices; //摄像头+\r\n\t\t\t\t\t\tlet loudspeaker = result.audioOutputDevices; //扬声器\r\n\t\t\t\t\t\tlet microphoneStr = \"\";\r\n\t\t\t\t\t\tlet cameraStr = \"\";\r\n\t\t\t\t\t\tlet loudspeakerStr = \"\";\r\n\t\t\t\t\t\tfor (let i = 0; i < microphone.length; i++) {\r\n\t\t\t\t\t\t\tmicrophoneStr +=\r\n\t\t\t\t\t\t\t\t'<option value=\"' +\r\n\t\t\t\t\t\t\t\tmicrophone[i].deviceId +\r\n\t\t\t\t\t\t\t\t'\">' +\r\n\t\t\t\t\t\t\t\tmicrophone[i].label +\r\n\t\t\t\t\t\t\t\t\"</option>\";\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tdocument.getElementById(\"audioInputDev\").innerHTML = microphoneStr;\r\n\t\t\t\t\t\tfor (let i = 0; i < camera.length; i++) {\r\n\t\t\t\t\t\t\tcameraStr +=\r\n\t\t\t\t\t\t\t\t'<option value=\"' +\r\n\t\t\t\t\t\t\t\tmicrophone[i].deviceId +\r\n\t\t\t\t\t\t\t\t'\">' +\r\n\t\t\t\t\t\t\t\tcamera[i].label +\r\n\t\t\t\t\t\t\t\t\"</option>\";\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tdocument.getElementById(\"videoInputDev\").innerHTML = cameraStr;\r\n\t\t\t\t\t\tfor (let i = 0; i < loudspeaker.length; i++) {\r\n\t\t\t\t\t\t\tloudspeakerStr +=\r\n\t\t\t\t\t\t\t\t'<option value=\"' +\r\n\t\t\t\t\t\t\t\tmicrophone[i].deviceId +\r\n\t\t\t\t\t\t\t\t'\">' +\r\n\t\t\t\t\t\t\t\tloudspeaker[i].label +\r\n\t\t\t\t\t\t\t\t\"</option>\";\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tdocument.getElementById(\"audioOutputDev\").innerHTML = loudspeakerStr;\r\n\t\t\t\t\t\tif (microphone.length > 0) {\r\n\t\t\t\t\t\t\tthis.mic = microphone[0].deviceId;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif (camera.length > 0) {\r\n\t\t\t\t\t\t\tthis.cam = camera[0].deviceId;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif (loudspeaker.length > 0) {\r\n\t\t\t\t\t\t\tthis.speak = loudspeaker[0].deviceId;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tconsole.log(\"音视频设备：\", result, this.mic, this.cam, this.speak);\r\n\t\t\t\t\t} catch (e) {\r\n\t\t\t\t\t\tconsole.error(e);\r\n\t\t\t\t\t}\r\n\t\t\t\t\t// 自动登录\r\n\t\t\t\t\t// if (\r\n\t\t\t\t\t//   localStorage.verto_autoReg == \"true\" &&\r\n\t\t\t\t\t//   localStorage.verto_login &&\r\n\t\t\t\t\t//   localStorage.verto_password &&\r\n\t\t\t\t\t//   localStorage.verto_socketUrl\r\n\t\t\t\t\t// ) {\r\n\t\t\t\t\t//   this.initPerimeter();\r\n\t\t\t\t\t// }\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t\t//登录\r\n\t\t\twebRtcLogin() {\r\n\t\t\t\ttry {\r\n\t\t\t\t\trtcHelper.rtcLogin();\r\n\t\t\t\t} catch (e) {\r\n\t\t\t\t\tconsole.error(e);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t//登出\r\n\t\t\twebRtcLogout() {\r\n\t\t\t\ttry {\r\n\t\t\t\t\trtcHelper.rtcLogout();\r\n\t\t\t\t} catch (e) {\r\n\t\t\t\t\tconsole.error(e);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// 拨号外呼\r\n\t\t\tdial(type) {\r\n\r\n\t\t\t\tdocument.getElementById('hc').addEventListener('click', function() {\r\n\t\t\t\t\tnavigator.mediaDevices.getUserMedia({\r\n\t\t\t\t\t\t\taudio: true\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t\t.then(stream => {\r\n\t\t\t\t\t\t\tconst audio = document.createElement('audio');\r\n\t\t\t\t\t\t\taudio.srcObject = stream;\r\n\t\t\t\t\t\t\taudio.autoplay = true;\r\n\t\t\t\t\t\t\tdocument.body.appendChild(audio);\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t\t.catch(error => {\r\n\t\t\t\t\t\t\tconsole.error('获取麦克风失败:', error);\r\n\t\t\t\t\t\t});\r\n\t\t\t\t});\r\n\t\t\t\tconsole.log(\"拨号号码：\", this.ringNumber);\r\n\t\t\t\tlet destinationNumber = this.ringNumber;\r\n\t\t\t\tif (!destinationNumber) {\r\n\t\t\t\t\talert(\"没有输入被叫号码\");\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tif (type === 1) {\r\n\t\t\t\t\t// 视频呼出\r\n\t\t\t\t\trtcHelper.rtcDial(destinationNumber, true);\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// 语音呼出\r\n\t\t\t\t\trtcHelper.rtcDial(destinationNumber, false);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t//历史记录\r\n\t\t\tlogRecords(callee, type) {\r\n\t\t\t\tlet log = \"\";\r\n\t\t\t\tswitch (type) {\r\n\t\t\t\t\tcase \"ringing\":\r\n\t\t\t\t\t\tlog = new Date().Format(\"yyyy-MM-dd HH:mm:ss\") + \" 呼入 \" + callee;\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tcase \"calling\":\r\n\t\t\t\t\t\tlog = new Date().Format(\"yyyy-MM-dd HH:mm:ss\") + \" 呼出 \" + callee;\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t\tdefault:\r\n\t\t\t\t\t\tbreak;\r\n\t\t\t\t}\r\n\t\t\t\tif (localStorage.verto_his_list) {\r\n\t\t\t\t\tlocalStorage.verto_his_list += \",\" + log;\r\n\t\t\t\t} else {\r\n\t\t\t\t\tlocalStorage.verto_his_list = log;\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// =================== 通话事件 start ====================\r\n\t\t\tonRinging(d) {\r\n\t\t\t\tlet callee = d.cidString();\r\n\t\t\t\tconsole.log(\"===========来电信息===========\" + callee);\r\n\t\t\t\tconsole.log(\"通话呼入事件\", d);\r\n\t\t\t\t// 判断是否自动接听\r\n\t\t\t\tif (localStorage.verto_autoAnswer) {\r\n\t\t\t\t\tconsole.log(\"自动接听\");\r\n\t\t\t\t\tif (d.params.wantVideo) {\r\n\t\t\t\t\t\t// 选择是否有视频\r\n\t\t\t\t\t\tlet videoFlag = true;\r\n\t\t\t\t\t\trtcHelper.rtcAnswer(d, videoFlag);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\trtcHelper.rtcAnswer(d, false);\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdocument.getElementById(\"call_in_now\").innerHTML = callee;\r\n\t\t\t\t\tdocument.getElementById(\"call_in_now\").setAttribute(\"callID\", d.callID);\r\n\t\t\t\t\tthis.call_in_now_d = d;\r\n\t\t\t\t}\r\n\t\t\t\tdocument.getElementById(\"call_list\").innerHTML +=\r\n\t\t\t\t\t\"<li callID='\" +\r\n\t\t\t\t\td.callID +\r\n\t\t\t\t\t\"' @click='checkCalling(this)'>\" +\r\n\t\t\t\t\tcallee +\r\n\t\t\t\t\t\" 呼入</li>\";\r\n\t\t\t\t// 缓存历史呼入记录\r\n\t\t\t\tthis.logRecords(callee, \"ringing\");\r\n\t\t\t},\r\n\t\t\tonCalling(d) {\r\n\t\t\t\tlet callee = d.cidString();\r\n\t\t\t\tconsole.log(\"通话呼出事件\", d);\r\n\t\t\t\t// 呼出通话启动\r\n\t\t\t\tdocument.getElementById(\"call_list\").innerHTML +=\r\n\t\t\t\t\t\"<li callID='\" +\r\n\t\t\t\t\td.callID +\r\n\t\t\t\t\t\"' @click='checkCalling(this)'>\" +\r\n\t\t\t\t\tcallee +\r\n\t\t\t\t\t\" 呼出</li>\";\r\n\t\t\t\t// 缓存历史呼出记录\r\n\t\t\t\tthis.logRecords(callee, \"calling\");\r\n\t\t\t},\r\n\t\t\tonAnswer(d) {\r\n\t\t\t\t// 通话中处理\r\n\t\t\t\tconsole.log(\"通话中事件\", d);\r\n\t\t\t},\r\n\t\t\tonHangup(d) {\r\n\t\t\t\t// 挂机处理 -  接通列表处理\r\n\t\t\t\t// console.log(\"通话挂机事件\", d);\r\n\t\t\t},\r\n\t\t\t// =================== 通话事件 end ====================\r\n\r\n\t\t\t// =================== 呼入处理 start ====================\r\n\t\t\t// 呼入接听\r\n\t\t\tcallInAnswer(type) {\r\n\t\t\t\tif (!this.call_in_now_d) {\r\n\t\t\t\t\talert(\"当前无通话呼入\");\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\tif (type === 1) {\r\n\t\t\t\t\tif (this.call_in_now_d.params.wantVideo) {\r\n\t\t\t\t\t\t// 选择是否有视频\r\n\t\t\t\t\t\tlet videoFlag = true;\r\n\t\t\t\t\t\trtcHelper.rtcAnswer(this.call_in_now_d, videoFlag);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\trtcHelper.rtcAnswer(this.call_in_now_d, false);\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\trtcHelper.rtcAnswer(this.call_in_now_d, false);\r\n\t\t\t\t}\r\n\t\t\t\tconsole.log(\"通话呼入\");\r\n\t\t\t\tdocument.getElementById(\"call_in_now\").innerHTML = \"\";\r\n\t\t\t\tthis.call_in_now_d = null;\r\n\t\t\t},\r\n\r\n\t\t\t// 呼入挂断\r\n\t\t\tcallInHangup() {\r\n\t\t\t\tif (!this.call_in_now_d) {\r\n\t\t\t\t\talert(\"当前无通话呼入\");\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t\trtcHelper.rtcHangup(this.call_in_now_d.callID);\r\n\t\t\t\tdocument.getElementById(\"call_in_now\").innerHTML = \"\";\r\n\t\t\t\tconsole.log(\"通话挂断\");\r\n\t\t\t\tthis.call_in_now_d = null;\r\n\t\t\t},\r\n\r\n\t\t\t// =================== 呼入处理 end ====================\r\n\r\n\t\t\t// =================== 通话功能 start ==================\r\n\t\t\tcheckCalling(e) {\r\n\t\t\t\tlet callID = e.getAttribute(\"callID\");\r\n\t\t\t\tconsole.log(\"设置\", callID);\r\n\t\t\t\tthis.setValue(\"callID\", callID);\r\n\t\t\t\tthis.getMuteState(callID);\r\n\t\t\t\tthis.getMuteVideoState(callID);\r\n\t\t\t},\r\n\r\n\t\t\tgetMuteState(callID) {\r\n\t\t\t\tif (rtcHelper.rtcGetMuteState(callID)) {\r\n\t\t\t\t\t// 没有静音\r\n\t\t\t\t\tconsole.log(\"非静音,本地声音状态打开\");\r\n\t\t\t\t\tdocument\r\n\t\t\t\t\t\t.getElementById(\"mute_off_status\")\r\n\t\t\t\t\t\t.setAttribute(\"hidden\", \"hidden\");\r\n\t\t\t\t\tdocument.getElementById(\"mute_on_status\").removeAttribute(\"hidden\");\r\n\t\t\t\t} else {\r\n\t\t\t\t\tconsole.log(\"静音，本地声音状态关闭\");\r\n\t\t\t\t\tdocument.getElementById(\"mute_off_status\").removeAttribute(\"hidden\");\r\n\t\t\t\t\tdocument\r\n\t\t\t\t\t\t.getElementById(\"mute_on_status\")\r\n\t\t\t\t\t\t.setAttribute(\"hidden\", \"hidden\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\r\n\t\t\tgetMuteVideoState(callID) {\r\n\t\t\t\tif (rtcHelper.rtcGetMuteVideoState(callID)) {\r\n\t\t\t\t\t// 没有静音\r\n\t\t\t\t\tconsole.log(\"非静音,本地视频状态打开\");\r\n\t\t\t\t\tdocument\r\n\t\t\t\t\t\t.getElementById(\"mute_video_off_status\")\r\n\t\t\t\t\t\t.setAttribute(\"hidden\", \"hidden\");\r\n\t\t\t\t\tdocument\r\n\t\t\t\t\t\t.getElementById(\"mute_video_on_status\")\r\n\t\t\t\t\t\t.removeAttribute(\"hidden\");\r\n\t\t\t\t} else {\r\n\t\t\t\t\tconsole.log(\"静音,本地视频状态关闭\");\r\n\t\t\t\t\tdocument\r\n\t\t\t\t\t\t.getElementById(\"mute_video_off_status\")\r\n\t\t\t\t\t\t.removeAttribute(\"hidden\");\r\n\t\t\t\t\tdocument\r\n\t\t\t\t\t\t.getElementById(\"mute_video_on_status\")\r\n\t\t\t\t\t\t.setAttribute(\"hidden\", \"hidden\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\r\n\t\t\t//保持或取消指定通话\r\n\t\t\tcallHoldUnhold(callID) {\r\n\t\t\t\tif (callID) {\r\n\t\t\t\t\trtcHelper.rtcHoldUnhold(callID);\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"未选择callID\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t//关闭或打开通话本地声音\r\n\t\t\tcallMuteUnmute(callID) {\r\n\t\t\t\tif (callID) {\r\n\t\t\t\t\trtcHelper.rtcMuteUnmute(callID);\r\n\t\t\t\t\tthis.getMuteState(callID);\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"未选择callID\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t//关闭或打开本地视频\r\n\t\t\tcallMuteUnmuteVideo(callID) {\r\n\t\t\t\tif (callID) {\r\n\t\t\t\t\trtcHelper.rtcMuteUnmuteVideo(callID);\r\n\t\t\t\t\tthis.getMuteVideoState(callID);\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"未选择callID\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t//挂断指定callID通话\r\n\t\t\tcallHangup(callID) {\r\n\t\t\t\tif (callID) {\r\n\t\t\t\t\trtcHelper.rtcHangup(callID);\r\n\t\t\t\t\talert(\"callID\", callID);\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"未选择callID\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t//挂断所有通话\r\n\t\t\tcallHangupAll() {\r\n\t\t\t\trtcHelper.rtcHangupAll();\r\n\t\t\t},\r\n\t\t\t//向指定通话发送DTMF\r\n\t\t\tcallDtmf(callID, dtmfKey) {\r\n\t\t\t\tif (callID) {\r\n\t\t\t\t\trtcHelper.rtcDtmf(callID, dtmfKey);\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"未选择callID\");\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\t// =================== 通话功能 end ==================\r\n\t\t},\r\n\t};\r\n</script>\r\n<style scoped>\r\n\t.fbky-container {\r\n\t\twidth: 100%;\r\n\t\tbackground: #00000000;\r\n\t}\r\n\r\n\t.top {\r\n\t\tcolor: #fff;\r\n\t\tfont-size: 14px;\r\n\t\t/* height: 60px; */\r\n\t\ttext-align: left;\r\n\t}\r\n\r\n\t.fbky_manage {\r\n\t\tcolor: #fff;\r\n\t\tfont-size: 14px;\r\n\t\tmargin-top: 10px;\r\n\t\t/* margin-bottom: 10px; */\r\n\t\ttext-align: left;\r\n\t}\r\n\r\n\t.fbky_manage span {\r\n\t\tdisplay: inline-block;\r\n\t\tmargin-left: 20px;\r\n\t\tcolor: red;\r\n\t}\r\n\r\n\t.fbky-container .websocket {\r\n\t\t/* width: 100%; */\r\n\t\t/* height: 60%; */\r\n\t\tdisplay: flex;\r\n\t\tpadding: 20px;\r\n\t\t/* background-color: #f1f4f7; */\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left {\r\n\t\t/* width: 70%; */\r\n\t\t/* padding-right: 20px; */\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .set_case {\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .set_case .set_call .set_name {\r\n\t\twidth: 80px;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .set_case .set_item {\r\n\t\tmargin-bottom: 15px;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .set_case .call_left {\r\n\t\t/* width: 50%; */\r\n\t\tdisplay: flex;\r\n\t\tpadding-right: 20px;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .set_case .call_right {\r\n\t\twidth: 50%;\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .video_box {\r\n\t\theight: 200px;\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .video_box .video_left,\r\n\t.fbky-container .websocket .websocket_left .video_box .video_right {\r\n\t\twidth: 50%;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .video_box .video_left {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_left .video_box .video_right {\r\n\t\tdisplay: flex;\r\n\t\tflex-wrap: wrap;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_right {\r\n\t\twidth: 30%;\r\n\t}\r\n\r\n\t.fbky-container .websocket .websocket_right .set_box {\r\n\t\twidth: 100%;\r\n\t\t/* background-color: #fff; */\r\n\t\tpadding: 20px;\r\n\t\tmargin-bottom: 20px;\r\n\t}\r\n\r\n\t.set_box {\r\n\t\twidth: 100%;\r\n\t\t/* background-color: #fff; */\r\n\t\tpadding: 20px;\r\n\t\tmargin-bottom: 20px;\r\n\t}\r\n\r\n\t.set_item:last-child {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n\r\n\t.group_case {\r\n\t\tjustify-content: space-between;\r\n\t}\r\n\r\n\t.set_group {\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t}\r\n\r\n\t.set_slt,\r\n\t.set_ipt {\r\n\t\tflex: auto;\r\n\t\theight: 30px;\r\n\t\tline-height: 30px;\r\n\t\tborder: 1px solid #d1d1d1;\r\n\t\toutline: none;\r\n\t\tborder-radius: 3px;\r\n\t\tpadding-left: 10px;\r\n\t\tbackground-color: #fff !important;\r\n\t}\r\n\r\n\t.btn {\r\n\t\tpadding: 6px 12px;\r\n\t\tborder-radius: 3px;\r\n\t\tcursor: pointer;\r\n\t\toutline: none !important;\r\n\t\tfont-size: 12px !important;\r\n\t}\r\n\r\n\t.btn:hover {\r\n\t\topacity: 0.8;\r\n\t}\r\n\r\n\t.blue_btn {\r\n\t\tbackground-color: #1890ff;\r\n\t\tborder: 1px solid #1890ff;\r\n\t\tcolor: #fff !important;\r\n\t}\r\n\r\n\t.cyan_btn {\r\n\t\tbackground-color: #00bcd4;\r\n\t\tborder: 1px solid #00bcd4;\r\n\t\tcolor: #fff !important;\r\n\t}\r\n\r\n\t.white_btn {\r\n\t\tbackground-color: #fafafa;\r\n\t\tborder: 1px solid #d1d1d1;\r\n\t}\r\n\r\n\t.video_box {\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.video_left,\r\n\t.video_right {\r\n\t\twidth: 50%;\r\n\t}\r\n\r\n\t.video_left {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t}\r\n\r\n\t.video_right {\r\n\t\tdisplay: flex;\r\n\t\tflex-wrap: wrap;\r\n\t}\r\n\r\n\t.video_item {\r\n\t\tposition: relative;\r\n\t\tbackground-color: #fff;\r\n\t\tborder: 1px solid #d1d1d1;\r\n\t}\r\n\r\n\t.video_item1 {\r\n\t\twidth: 100%;\r\n\t\tflex: auto;\r\n\t}\r\n\r\n\t.video_item2 {\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.video_item3 {\r\n\t\twidth: 50%;\r\n\t}\r\n\r\n\t.video_name {\r\n\t\tposition: absolute;\r\n\t\ttop: 5px;\r\n\t\tleft: 5px;\r\n\t}\r\n\r\n\t.video_tag {\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t}\r\n\r\n\t.set_case {\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.set_status {\r\n\t\tcolor: #fff;\r\n\t\tborder-radius: 10px;\r\n\t\tpadding: 4px 10px;\r\n\t}\r\n\r\n\t.off_status {\r\n\t\tbackground-color: #bbb;\r\n\t}\r\n\r\n\t.on_status {\r\n\t\tbackground-color: #3fd672;\r\n\t}\r\n\r\n\t.must {\r\n\t\tcolor: red;\r\n\t\tfont-size: 17px;\r\n\t\tposition: absolute;\r\n\t\tleft: -10px;\r\n\t\ttop: 0px;\r\n\t}\r\n\r\n\t.set_name {\r\n\t\tposition: relative;\r\n\t}\r\n\r\n\t.set_zhuce .set_name {\r\n\t\twidth: 140px;\r\n\t}\r\n\r\n\t.set_equipment .set_name {\r\n\t\twidth: 90px;\r\n\t}\r\n\r\n\t.margin {\r\n\t\tmargin-right: 20px;\r\n\t}\r\n\r\n\t.his_left {\r\n\t\twidth: 30%;\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.his_right {\r\n\t\twidth: 70%;\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t.ipt_number {\r\n\t\tflex: none;\r\n\t\twidth: 50%;\r\n\t}\r\n\r\n\t.call_box {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: flex-start;\r\n\t\theight: 100%;\r\n\t}\r\n\r\n\t.call_box .set_name {\r\n\t\tmargin-bottom: 12px;\r\n\t}\r\n\r\n\t.call_case {\r\n\t\tdisplay: flex;\r\n\t\theight: 135px;\r\n\t\toverflow: hidden auto;\r\n\t\tborder: 1px solid #d1d1d1;\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.his_case {\r\n\t\tdisplay: flex;\r\n\t\theight: 182px;\r\n\t\toverflow: hidden auto;\r\n\t\tborder: 1px solid #d1d1d1;\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t#call_list {\r\n\t\tflex: auto;\r\n\t}\r\n\r\n\t#call_list>li,\r\n\t#his_list>li {\r\n\t\theight: 30px;\r\n\t\tline-height: 30px;\r\n\t\tpadding: 0 20px;\r\n\t\tcursor: pointer;\r\n\t}\r\n\r\n\t#call_list>li:hover,\r\n\t#his_list>li:hover {\r\n\t\tbackground-color: #eee;\r\n\t}\r\n\r\n\t.set_his {\r\n\t\tflex-direction: column;\r\n\t\talign-items: flex-start;\r\n\t}\r\n\r\n\t.set_his .set_name {\r\n\t\tmargin-bottom: 15px;\r\n\t}\r\n\r\n\t#his_list {\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.set_speed {\r\n\t\tflex-direction: column;\r\n\t\talign-items: flex-start;\r\n\t}\r\n\r\n\t#speed {\r\n\t\tmargin-top: 20px;\r\n\t}\r\n\r\n\t.ipt_call {\r\n\t\tflex: none;\r\n\t\twidth: 30%;\r\n\t\tmargin-right: 15px;\r\n\t}\r\n\r\n\t.check_box {\r\n\t\tcursor: pointer;\r\n\t\twidth: 20%;\r\n\t}\r\n\r\n\t.check {\r\n\t\tposition: relative;\r\n\t\ttop: 2px;\r\n\t}\r\n\r\n\t.come_box {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tjustify-content: space-between;\r\n\t}\r\n\r\n\t.set_first {\r\n\t\tmargin-top: 30px;\r\n\t}\r\n\r\n\t.group_right {\r\n\t\tmargin-left: 20px;\r\n\t}\r\n</style>"]}]}