| 1 |
- {"remainingRequest":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/components/videoPlayer/videoPlayer.vue?vue&type=style&index=1&id=d7e132ee&lang=css","dependencies":[{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/src/components/videoPlayer/videoPlayer.vue","mtime":1708395041801},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/css-loader/dist/cjs.js","mtime":1708395146948},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1708395147772},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/postcss-loader/src/index.js","mtime":1708395147225},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/cache-loader/dist/cjs.js","mtime":1708395146433},{"path":"/Users/caoge/Desktop/地质现场/VehicleMonitor-WEB/node_modules/vue-loader/lib/index.js","mtime":1708395147382}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgouaG9tZVJpZ2h0LXZpZGVvLWNvbnRlbnQgLmxpc3QtMi0zIHsKICBoZWlnaHQ6IDI4JSAhaW1wb3J0YW50Owp9Cg=="},{"version":3,"sources":["videoPlayer.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsgBA;AACA;AACA","file":"videoPlayer.vue","sourceRoot":"src/components/videoPlayer","sourcesContent":["<template>\n <div v-if=\"showType == 1\" :class=\"pageType\" :style=\"stylCompoment()\" @click=\"edit\">\n <div>\n <template v-if=\"videoUrl || cameraCode\"><span></span>{{ topData.line }}</template>\n </div>\n <div ref=\"mse\" v-if=\"!isHf\" style=\"width: 100%;height: 100%;\" :class=\"videoUrl || cameraCode ? 'yes' : 'no_select'\">\n </div>\n <div ref=\"mse\" v-else style=\"width: 100%\"></div>\n <div v-if=\"videoUrl || cameraCode\">\n {{ topData.mileagePosition }} {{ topData.lineDir\n }}{{ topData.measuringPoint }}\n </div>\n <div v-else></div>\n </div>\n <div v-else-if=\"showType == 2\" class=\"videoPlay-type-2\" @click=\"edit\">\n <div class=\"content\">\n <div>\n <template v-if=\"videoUrl || cameraCode\">\n <span :class=\"topData.isLock == 1 ? 'blue' : 'red'\"></span>{{ topData.line }}</template>\n </div>\n\n <div ref=\"mse\" style=\"width: 100%\" :class=\"videoUrl || cameraCode ? 'yes' : 'no_select'\"\n :style=\"{ height: heigthIsFull == true ? '100%' : 'auto' }\"></div>\n <div v-if=\"videoUrl || cameraCode\">\n <!-- {{ videoListSelectNum }} -->\n {{ topData.mileagePosition }}\n {{ topData.lineDir }}\n {{ topData.measuringPoint }}\n <spanspan>{{ topData.measuringPoint }}</spanspan>\n <!-- {{ numberVideos }} -->\n </div>\n <div v-else></div>\n </div>\n </div>\n</template>\n\n<script>\nimport flvjs from \"flv.js\";\nimport { records, lineDate } from \"@/api/video\";\n\n// videoPlayer\n// 单个视频播放插件\nexport default {\n name: \"VideoPlayer\",\n props: {\n showType: {\n type: Number,\n default() {\n return 1;\n },\n },\n videoListSelectNum: {\n type: String,\n default: \"\",\n },\n pageType: {\n // 类型类型 palyAndPlayback\n type: String,\n default() {\n return \"\";\n },\n },\n videoUrl: {\n // 视频流,优先级比cameraCode高，当有videoUrl时，cameraCode不再请求数据\n type: String,\n default() {\n return \"\";\n },\n },\n items: {\n type: String,\n default() {\n return \"\";\n },\n },\n isHf: false,\n cameraCode: {\n // 视频code，默认情况下会使用这个请求地址\n type: String,\n default() {\n return \"\";\n },\n },\n heigthIsFull: {\n type: Boolean,\n default: true,\n },\n\n isTime: {\n type: Boolean,\n default: false,\n },\n flay: {\n type: Boolean,\n default: true,\n },\n },\n data() {\n return {\n jessibuca: null,\n player: \"\",\n setTime: \"\",\n topData: {\n line: \"\",\n mileagePosition: \"\",\n lineDir: \"\",\n electricQuantity: \"\",\n cameraCoding: \"\",\n measuringPoint: \"\",\n isLock: 1,\n },\n };\n },\n watch: {\n items() {\n this.checkChange(\"showType\");\n },\n showType() {\n this.checkChange(\"showType\");\n this.destroyPlayback();\n },\n cameraCode() {\n this.setN && clearTimeout(this.setN);\n this.destroyPlayback();\n\n this.cameraCode && this.checkChange(\"cameraCode\");\n },\n videoUrl() {\n this.setN && clearTimeout(this.setTime);\n this.destroyPlayback();\n this.setTime && clearTimeout(this.setTime);\n this.videoUrl && this.checkChange(\"videoUrl\");\n },\n },\n beforeDestroy() {\n console.log(\"[视频单例]视频卸载\");\n this.destroyPlayback();\n\n if (this.setTime) {\n clearTimeout(this.setTime);\n }\n\n if (this.setN) {\n clearTimeout(this.setN);\n }\n },\n mounted() {\n this.checkChange(\"mounted\");\n },\n methods: {\n stylCompoment() {\n if(window.location.href.includes(\"alarmDetail\")){\n return 'width: 100%;height: calc(100vh - 317px); position: relative; background-color: #000'\n }\n return 'width: 100%;height: 665px; position: relative; background-color: #000'\n },\n // 视频卸载\n destroyPlayback() {\n if (this.jessibuca) {\n this.jessibuca.destroy();\n }\n },\n // 摄像机发生变化\n checkChange(source) {\n console.log(\n \"[视频单例]发生,摄像机码\",\n source,\n this.videoUrl,\n this.cameraCode,\n this.flay\n );\n\n if (!this.videoUrl && !this.cameraCode) {\n // console.log(\"请除代码\");\n // this.$refs.mse.querySelector(\"video\").src = \"\";\n // this.$refs.mse.querySelector(\"xg-controls\").innerHTML = \"\";\n // return;\n }\n\n // 获取视频流\n\n if (this.videoUrl) {\n this.videoInit(this.videoUrl);\n } else if (this.cameraCode) {\n // 类型二增加线信息\n if (this.showType == 2) {\n lineDate(this.cameraCode).then((res) => {\n if (res.code == 200) {\n this.topData.line = res.data[0];\n this.topData.mileagePosition = res.data[1];\n this.topData.lineDir = res.data[2] == 1 ? \"上行\" : \"下行\";\n this.topData.cameraCoding = res.data[3];\n this.topData.measuringPoint = res.data[5];\n this.topData.isLock = res.data[6];\n console.log(this.videoListSelectNum, \"00994343----------啊啊啊\");\n if (this.videoListSelectNum == \"9\") {\n this.topData.measuringPoint = res.data[5].slice(0, 5);\n } else {\n this.topData.measuringPoint = res.data[5].slice(0, 15);\n }\n } else {\n this.topData.line = \"\";\n this.topData.mileagePosition = \"\";\n this.topData.lineDir = \"\";\n this.topData.cameraCoding = \"\";\n this.topData.measuringPoint = \"\";\n this.topData.isLock = 1;\n }\n });\n }\n\n if (this.$route.name === \"/alarmDetail\") {\n var set = setInterval(() => {\n if (this.$store.state.lineDateProPost) {\n records(\n this.$store.state.lineDateProPost.cameraCode,\n this.flay\n ).then((res) => {\n this.videoInit(res.data);\n });\n clearInterval(set);\n }\n }, 100);\n return;\n }\n\n records(this.cameraCode, this.flay).then((res) => {\n this.videoInit(res.data);\n });\n } else {\n this.destroyPlayback();\n }\n },\n // 视频初始化\n videoInit(url) {\n if (!url) {\n return;\n }\n console.log(url, \"urlurlurlurl\");\n if (!this.$refs.mse) {\n return;\n }\n const isMp4 = url.includes(\".mp4\") || false;\n if (isMp4) {\n this.jessibuca && this.jessibuca.destroy();\n setTimeout(() => {\n const config = {\n el: this.$refs.mse,\n url: url,\n fluid: isMp4 ? false : true,\n poster: \"\",\n plugins: [],\n isLive: isMp4 ? false : !this.isTime,\n autoplay: true,\n autoplayMuted: true,\n };\n this.player = new Player(config);\n }, 0);\n return;\n }\n try {\n this.jessibuca = new JessibucaPro({\n container: this.$refs.mse,\n videoBuffer: 0.2,\n isResize: true,\n text: \"\",\n loadingText: \"加载中\",\n useMSE: false,\n useSIMD: false,\n autoWasm: true,\n timeout: 180,\n heartTimeout: 180,\n supportDblclickFullscreen: true,\n loadingTimeoutReplayTimes: -1,\n heartTimeoutReplayTimes: -1,\n // debug: true,\n // debugLevel: \"debug\",\n controlAutoHide: true,\n showBandwidth: true,\n heartTimeoutReplayUseLastFrameShow: true,\n replayUseLastFrameShow: true,\n operateBtns: {\n fullscreen: true,\n screenshot: true,\n play: true,\n audio: true,\n },\n forceNoOffscreen: true,\n useWebFullScreen: true,\n isNotMute: false,\n });\n this.jessibuca.play(url);\n } catch (error) {\n console.log(error);\n }\n },\n edit() {\n this.$emit(\"onClick\");\n },\n },\n};\n</script>\n\n<style scoped lang=\"scss\">\n.warning-view {\n position: relative;\n display: flex;\n align-items: center;\n border: 1px solid #20a0ff;\n padding: 5px;\n margin-top: 10px;\n\n .status-icon {\n padding: 2px 5px;\n background-color: #d68e15;\n position: absolute;\n right: 5px;\n top: 5px;\n font-size: 12px;\n border-radius: 5px;\n color: #fff;\n }\n\n .warning-image {\n width: 120px;\n height: 120px;\n border: 1px solid #fff;\n margin-right: 10px;\n }\n\n .warning-content {\n color: #8eacc8;\n font-size: 13px;\n flex: 1;\n\n .text-base {\n margin-top: 5px;\n }\n\n .text-1 {\n color: #50a4f2;\n font-size: 15px;\n }\n }\n\n .warning-operation {\n display: flex;\n font-size: 12px;\n color: #fff;\n margin-top: 4px;\n justify-content: flex-end;\n\n .button-1 {\n width: 60px;\n padding: 2px 0px;\n border-radius: 5px;\n border: 1px solid #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .button-2 {\n width: 60px;\n padding: 2px 0px;\n border-radius: 5px;\n margin-left: 5px;\n border: 1px solid #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n}\n\n.videoPlay-type-2 {\n position: relative;\n width: 100%;\n height: 100%;\n position: relative;\n border-radius: 10px;\n padding: 1px;\n\n .content {\n width: 100%;\n height: 100%;\n position: relative;\n border-radius: 5px;\n border: 1px solid #70b0ff;\n overflow: hidden;\n color: #fff;\n text-indent: 21px;\n background: #05152f;\n border-radius: 10px;\n\n >div {\n height: 35px;\n line-height: 32px;\n font-size: 14px;\n\n >span {\n width: 7px;\n height: 7px;\n display: inline-block;\n background: red;\n border-radius: 50%;\n margin-right: 9px;\n\n &.red {\n background-color: #ff0000;\n box-shadow: 0px 2px 6px #ff0000;\n }\n\n &.blue {\n background-color: #00ffc6;\n box-shadow: 0px 2px 6px #00ffc6;\n }\n }\n }\n }\n}\n\n.palyAndPlayback {\n height: calc(100% - 40px) !important;\n}\n\n.palyAndPlayback .xgplayer {\n height: 100% !important;\n padding-top: 0 !important;\n}\n\n.palyAndPlayback .xgplayer-is-error {\n height: 100% !important;\n padding-top: 0 !important;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.palyAndPlayback ::v-deep .xgplayer-is-error video:first-child {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n outline: none;\n}\n\n@media screen and (max-width: 1400px) {}\n\n@media screen and (max-width: 1200px) {}\n\n@media screen and (max-width: 900px) {}\n\n@media screen and (max-width: 720px) {}\n\n@media screen and (max-height: 880px) {\n .videoPlay-type-2 {\n .content {\n >div {\n height: 26px;\n line-height: 26px;\n font-size: 13px;\n }\n }\n }\n\n .jessibuca-container {\n height: calc(100% - 54px) !important;\n }\n\n .el-card .yes {\n height: 100% !important;\n }\n}\n\n@media screen and (max-height: 800px) {\n .jessibuca-container {\n height: calc(100% - 44px) !important;\n }\n\n .el-card .yes {\n height: 100% !important;\n }\n\n .videoPlay-type-2 {\n .content {\n >div {\n height: 22px;\n line-height: 22px;\n font-size: 13px;\n }\n }\n }\n}\n\n@media screen and (max-height: 720px) {\n .el-card .yes {\n height: 100% !important;\n }\n\n .videoPlay-type-2 {\n .content {\n >div {\n height: 18px;\n line-height: 18px;\n // font-size: 12px;\n }\n }\n }\n\n .jessibuca-container {\n height: calc(100% - 36px) !important;\n }\n}\n</style>\n\n<style>\n.homeRight-video-content .list-2-3 {\n height: 28% !important;\n}\n</style>\n"]}]}
|
