{"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"]}]}