{"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=469af010&scoped=true&lang=css&","dependencies":[{"path":"D:\\dm\\HHHT-fbky\\hhht_fbky\\src\\components\\HelloWorld.vue","mtime":1740992927934},{"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.fbky {\n\tpadding: 20px;\n\tcolor: #fff;\n\tfont-size: 14px;\n\n}\n\n.top .el-tag {\n\tmargin-left: 10px;\n}\n\n.fbky_manage {\n\tmargin-top: 10px;\n\tmargin-bottom: 10px;\n}\n\n.fbky_manage span {\n\tdisplay: inline-block;\n\tmargin-left: 20px;\n\tcolor: red;\n}\n\n.cameraList {\n\tmargin-top: 15px;\n\tmargin-bottom: 15px;\n}\n\n.datebuttonitem {\n\tbackground: rgba(216, 216, 216, 0);\n\tborder: 1px solid #3c91c7;\n\tborder-radius: 5px;\n\t// width: 78px;\n\theight: 26px;\n\tfont-family: MicrosoftYaHei;\n\tfont-size: 14px;\n\tcolor: #49ccff;\n\tletter-spacing: 0;\n\tline-height: 13px;\n\tfont-weight: 400;\n\tpadding: 5px;\n\tcursor: pointer;\n\tmargin-right: 5px;\n}\n\n.canvas {\n\twidth: 850px;\n\theight: 480px;\n}\n\n.set_status {\n\tcolor: #fff;\n\tborder-radius: 10px;\n\tpadding: 4px 10px;\n\tmargin-left: 20px;\n}\n\n.off_status {\n\tbackground-color: #bbb;\n}\n\n.on_status {\n\tbackground-color: #3fd672;\n}\n",{"version":3,"sources":["HelloWorld.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiUA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA","file":"HelloWorld.vue","sourceRoot":"src/components","sourcesContent":["<template>\r\n\t<!-- <base-drag-dialog\r\n     :options=\"{ title: '防爆扩音广播', show: amplificationVisible }\"\r\n     appendToBody\r\n     :styles=\"{ width: 900, height: 700 }\"\r\n     @handleClose=\"handleClose\"\r\n   > -->\r\n\t<div class=\"fbky\">\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=\"FbkyConnect\">连接防爆扩音</el-button>\r\n\t\t\t<el-button type=\"info\" @click=\"FbkyBreak\">断开防爆扩音</el-button>\r\n\t\t\t<el-button type=\"success\" @click=\"FbkyDial\">呼出通话</el-button>\r\n\t\t\t<el-button type=\"danger\" @click=\"FbkyHangUp\">挂断通话</el-button>\r\n\t\t\t<span>注：听到提示音后开始讲话，通话结束后请断开防爆扩音</span>\r\n\t\t</div>\r\n\t\t<div class=\"cameraList\">\r\n\t\t\t<button class=\"datebuttonitem\" v-for=\"item in cameraList\" :key=\"item.id\" @click=\"openCamera(item)\">\r\n\t\t\t\t{{ item.name }}\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<div class=\"main\">\r\n\t\t\t<CanvasVideo class=\"canvas\" v-for=\"item in cameraList\" :key=\"item.id\" :cameraData=\"item\"\r\n\t\t\t\tv-show=\"cameraId == item\" />\r\n\t\t</div>\r\n\t\t<select class=\"set_slt\" id=\"audioInputDev\" style=\"display: none\">\r\n\t\t\t<option value=\"\">请选择</option>\r\n\t\t</select>\r\n\t\t<select class=\"set_slt\" id=\"videoInputDev\" style=\"display: none\">\r\n\t\t\t<option value=\"\">请选择</option>\r\n\t\t</select>\r\n\t\t<select class=\"set_slt\" id=\"audioOutputDev\" style=\"display: none\">\r\n\t\t\t<option value=\"\">请选择</option>\r\n\t\t</select>\r\n\t\t<!-- <fbky\r\n        :curFbkyData=\"webSocketParams\"\r\n        :ringNumber=\"ringNumber\"\r\n        :callDisable=\"callDisable\"\r\n      /> -->\r\n\t</div>\r\n\t<!-- </base-drag-dialog> -->\r\n</template>\r\n\r\n<script>\r\n\t// import BaseDragDialog from \"@/components/BaseDragDialog/BG_4.vue\";\r\n\t// import { mapGetters } from \"vuex\";\r\n\t// import { customPageGetList } from \"@/API/znxj\";\r\n\t// import CanvasVideo from \"@/components/ImageVideo/CanvasVideo.vue\";\r\n\t// import Fbky from \"./Fbky.vue\";\r\n\timport {\r\n\t\trtcHelper\r\n\t} from '@/assets/js/tr_webrtc.min.js'\r\n\texport default {\r\n\t\tname: \"PipelineAnimate\",\r\n\t\t// components: { BaseDragDialog, Fbky, CanvasVideo },\r\n\t\tcomputed: {\r\n\t\t\t// ...mapGetters([\"rtcHelper\", \"amplificationVisible\"]),\r\n\t\t},\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\twebSocketParams: {\r\n\t\t\t\t\tadmin: \"8889\",\r\n\t\t\t\t\tpassword: \"123456\",\r\n\t\t\t\t\turl: \"wss://172.10.10.61:1443/webrtc\",\r\n\t\t\t\t\tlocalIp: \"\",\r\n\t\t\t\t\tautoReg: true,\r\n\t\t\t\t\tautoAnswer: false,\r\n\t\t\t\t},\r\n\t\t\t\tringNumber: 111,\r\n\t\t\t\tcallDisable: false,\r\n\t\t\t\topenningTile: \"离线\",\r\n\t\t\t\tcallDisable: false,\r\n\t\t\t\tcameraInfo: null,\r\n\t\t\t\tmic: \"\", //麦克风选择\r\n\t\t\t\tcam: \"\", //摄像头选择\r\n\t\t\t\tspeak: \"\", //扬声器选择\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\tthis.onHangup(d);\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonLogin: function(d) {\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\tlocalStorage.setItem(\"fbkyType\", \"在线\");\r\n\t\t\t\t\t\t// this.upOpenningTile(\"在线\");\r\n\t\t\t\t\t\tthis.openningTile = \"在线\";\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\tlocalStorage.setItem(\"fbkyType\", \"离线\");\r\n\t\t\t\t\t\t// this.upOpenningTile(\"离线\");\r\n\t\t\t\t\t\tthis.openningTile = \"离线\";\r\n\t\t\t\t\t},\r\n\t\t\t\t},\r\n\t\t\t\t// 关联摄像头id列表\r\n\t\t\t\tcameraList: [],\r\n\t\t\t\tcameraId: {},\r\n\t\t\t};\r\n\t\t},\r\n\t\tmounted() {},\r\n\t\tcreated() {\r\n\t\t\t// this.getCameraList();\r\n\t\t\t// this.initMediaDevices();\r\n\t\t\t// setTimeout(() => {\r\n\t\t\t//   this.initPerimeter();\r\n\t\t\t// }, 500);\r\n\t\t},\r\n\t\tdestroyed() {\r\n\t\t\t// this.callHangupAll();\r\n\t\t\t// setTimeout(() => {\r\n\t\t\t//   this.webRtcLogout();\r\n\t\t\t// }, 500);\r\n\t\t},\r\n\t\tmethods: {\r\n\t\t\t// 连接防爆扩音\r\n\t\t\tFbkyConnect() {\r\n\t\t\t\t// this.openningTile = \"在线\"\r\n\t\t\t\tthis.initMediaDevices();\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\tthis.initPerimeter();\r\n\t\t\t\t}, 500);\r\n\t\t\t},\r\n\t\t\t// 断开防爆扩音\r\n\t\t\tFbkyBreak() {\r\n\t\t\t\tthis.openningTile = \"离线\";\r\n\t\t\t\tthis.callHangupAll();\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\tthis.webRtcLogout();\r\n\t\t\t\t}, 500);\r\n\t\t\t},\r\n\t\t\t// 呼出通话\r\n\t\t\tFbkyDial() {\r\n\t\t\t\t// 语音呼出\r\n\t\t\t\trtcHelper.rtcDial(this.ringNumber, false);\r\n\t\t\t},\r\n\t\t\t// 挂断通话\r\n\t\t\tFbkyHangUp() {},\r\n\t\t\tupOpenningTile(val) {\r\n\t\t\t\tthis.openningTile = val;\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\tgetVideoDiv() {\r\n\t\t\t\t//   return document.getElementById(\"peerTag\").value;\r\n\t\t\t\treturn \"video1\";\r\n\t\t\t},\r\n\t\t\topenAll() {\r\n\t\t\t\t// this.ringNumber = \"110\";\r\n\t\t\t\tthis.ringNumber = \"111\";\r\n\t\t\t\tthis.callDisable = true;\r\n\t\t\t},\r\n\t\t\tcloseAll() {\r\n\t\t\t\tthis.callDisable = false;\r\n\t\t\t\tthis.openningTile = \"暂无\";\r\n\t\t\t\tthis.cameraInfo = null;\r\n\t\t\t},\r\n\t\t\thandleClose() {\r\n\t\t\t\t// this.$store.dispatch(\"home/toggleAmplificationVisible\");\r\n\t\t\t},\r\n\t\t\t//载入参数登录\r\n\t\t\tinitPerimeter() {\r\n\t\t\t\tif (\r\n\t\t\t\t\t!this.webSocketParams.admin ||\r\n\t\t\t\t\t!this.webSocketParams.password ||\r\n\t\t\t\t\t!this.webSocketParams.url\r\n\t\t\t\t) {\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.webSocketParams.admin; //分机账号\r\n\t\t\t\tlocalStorage.verto_password = this.webSocketParams.password; //分机密码\r\n\t\t\t\tlocalStorage.verto_socketUrl = this.webSocketParams.url; //webSocketURL\r\n\t\t\t\tlocalStorage.verto_localIp = this.webSocketParams.localIp;\r\n\t\t\t\tlocalStorage.verto_autoReg = this.webSocketParams.autoReg; //自动登录开关\r\n\t\t\t\tlocalStorage.verto_autoAnswer = this.webSocketParams.autoAnswer; //自动接听开关\r\n\t\t\t\trtcHelper.bootstrap(\r\n\t\t\t\t\tthis.webSocketParams.admin,\r\n\t\t\t\t\tthis.webSocketParams.password,\r\n\t\t\t\t\tthis.webSocketParams.url,\r\n\t\t\t\t\tthis.webSocketParams.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},\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\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\t//   for (let i = 0; i < microphone.length; i++) {\r\n\t\t\t\t\t\t//     microphoneStr +=\r\n\t\t\t\t\t\t//       '<option value=\"' +\r\n\t\t\t\t\t\t//       microphone[i].deviceId +\r\n\t\t\t\t\t\t//       '\">' +\r\n\t\t\t\t\t\t//       microphone[i].label +\r\n\t\t\t\t\t\t//       \"</option>\";\r\n\t\t\t\t\t\t//   }\r\n\t\t\t\t\t\t//   document.getElementById(\"audioInputDev\").innerHTML = microphoneStr;\r\n\t\t\t\t\t\t//   for (let i = 0; i < camera.length; i++) {\r\n\t\t\t\t\t\t//     cameraStr +=\r\n\t\t\t\t\t\t//       '<option value=\"' +\r\n\t\t\t\t\t\t//       microphone[i].deviceId +\r\n\t\t\t\t\t\t//       '\">' +\r\n\t\t\t\t\t\t//       camera[i].label +\r\n\t\t\t\t\t\t//       \"</option>\";\r\n\t\t\t\t\t\t//   }\r\n\t\t\t\t\t\t//   document.getElementById(\"videoInputDev\").innerHTML = cameraStr;\r\n\t\t\t\t\t\t//   for (let i = 0; i < loudspeaker.length; i++) {\r\n\t\t\t\t\t\t//     loudspeakerStr +=\r\n\t\t\t\t\t\t//       '<option value=\"' +\r\n\t\t\t\t\t\t//       microphone[i].deviceId +\r\n\t\t\t\t\t\t//       '\">' +\r\n\t\t\t\t\t\t//       loudspeaker[i].label +\r\n\t\t\t\t\t\t//       \"</option>\";\r\n\t\t\t\t\t\t//   }\r\n\t\t\t\t\t\t//   document.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\tasync getCameraList() {\r\n\t\t\t\tvar param = {\r\n\t\t\t\t\tlistOrder: [],\r\n\t\t\t\t\tpageId: \"813838385444560896\",\r\n\t\t\t\t\tpageIndex: 1,\r\n\t\t\t\t\tpageSize: 10,\r\n\t\t\t\t};\r\n\t\t\t\tconst res = await customPageGetList(param);\r\n\t\t\t\tvar cameraList = [];\r\n\t\t\t\tfor (let i = 0; i < res.data.content.length; i++) {\r\n\t\t\t\t\tif (res.data.content[i].field006) {\r\n\t\t\t\t\t\tcameraList.push(res.data.content[i].field006);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tvar cameraAllList = this.$store.getters.cameraList;\r\n\t\t\t\tvar list = [];\r\n\t\t\t\tfor (let i = 0; i < cameraAllList.length; i++) {\r\n\t\t\t\t\tfor (let j = 0; j < cameraList.length; j++) {\r\n\t\t\t\t\t\tif (cameraAllList[i].id == cameraList[j]) {\r\n\t\t\t\t\t\t\tlist.push(cameraAllList[i]);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tvar list1 = [...new Set(list)];\r\n\t\t\t\tthis.cameraList = list1;\r\n\t\t\t\tthis.cameraId = list1[0];\r\n\t\t\t},\r\n\t\t\topenCamera(item) {\r\n\t\t\t\tconsole.log(item);\r\n\t\t\t\tthis.cameraId = item;\r\n\t\t\t},\r\n\t\t},\r\n\t};\r\n</script>\r\n\r\n<style scoped>\r\n\t.fbky {\r\n\t\tpadding: 20px;\r\n\t\tcolor: #fff;\r\n\t\tfont-size: 14px;\r\n\r\n\t}\r\n\r\n\t.top .el-tag {\r\n\t\tmargin-left: 10px;\r\n\t}\r\n\r\n\t.fbky_manage {\r\n\t\tmargin-top: 10px;\r\n\t\tmargin-bottom: 10px;\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.cameraList {\r\n\t\tmargin-top: 15px;\r\n\t\tmargin-bottom: 15px;\r\n\t}\r\n\r\n\t.datebuttonitem {\r\n\t\tbackground: rgba(216, 216, 216, 0);\r\n\t\tborder: 1px solid #3c91c7;\r\n\t\tborder-radius: 5px;\r\n\t\t// width: 78px;\r\n\t\theight: 26px;\r\n\t\tfont-family: MicrosoftYaHei;\r\n\t\tfont-size: 14px;\r\n\t\tcolor: #49ccff;\r\n\t\tletter-spacing: 0;\r\n\t\tline-height: 13px;\r\n\t\tfont-weight: 400;\r\n\t\tpadding: 5px;\r\n\t\tcursor: pointer;\r\n\t\tmargin-right: 5px;\r\n\t}\r\n\r\n\t.canvas {\r\n\t\twidth: 850px;\r\n\t\theight: 480px;\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\tmargin-left: 20px;\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</style>"]}]}