[Mod 0000] 处理特殊视频流地址

src/components/vent/camera/createPlayer.vue

@@ -19,6 +19,9 @@
     const componentList: any[] = [];
     for (let i = 0; i < props.srcList.length; i++) {
       const stream = props.srcList[i];
+      if (stream.addr.includes('0.0.0.0')) {
+        stream.addr = stream.addr.replace('0.0.0.0', window.location.hostname);
+      }
       if (stream.addr.toLowerCase().includes('.m3u8') || stream.addr.toLowerCase().startsWith('rtsp://')) {
         componentList.push({ zj: HlsPlayer, src: stream.addr });
       } else if (stream.addr.startsWith('rtmp://')) {

src/views/vent/monitorManager/camera/index.vue

@@ -16,14 +16,7 @@
       </cameraTree>
     </div>
     <div class="right-area">
-      <div v-if="renderPlayer" ref="playerRef" style="
-     display: flex;
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-      pointer-events: none;
-    ">
-      </div>
+      <div v-if="renderPlayer" ref="playerRef" style="display: flex; width: 100%; height: 100%; overflow-y: auto; pointer-events: none"> </div>
       <div class="camera-box" v-else>
         <Empty />
       </div>
@@ -31,213 +24,212 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, reactive, computed, onBeforeUnmount } from 'vue';
-import { useRouter } from 'vue-router';
-import { list, cameraAddr, getCameraDevKind, getDevice, getVentanalyCamera } from './camera.api';
-import cameraTree from './common/cameraTree.vue';
-import { SvgIcon } from '/@/components/Icon';
-import treeIcon from './common/Icon/treeIcon.vue';
-import { useCamera } from '/@/hooks/system/useCamera';
-
+  import { onMounted, onUnmounted, ref, reactive, computed, onBeforeUnmount } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { list, cameraAddr, getCameraDevKind, getDevice, getVentanalyCamera } from './camera.api';
+  import cameraTree from './common/cameraTree.vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import treeIcon from './common/Icon/treeIcon.vue';
+  import { useCamera } from '/@/hooks/system/useCamera';
 
-const { getCamera, removeCamera } = useCamera();
-const playerRef = ref();
-const renderPlayer = ref(true);
-//当前选中树节点
-let selected = reactive<any>({
-  id: null,
-  pid: null,
-  title: '',
-  isFolder: false,
-});
-//tree菜单列表
-let listArr = reactive<any[]>([]);
-let searchParam = reactive({
-  devKind: '',
-  strType: '',
-});
+  const { getCamera, removeCamera } = useCamera();
+  const playerRef = ref();
+  const renderPlayer = ref(true);
+  //当前选中树节点
+  let selected = reactive<any>({
+    id: null,
+    pid: null,
+    title: '',
+    isFolder: false,
+  });
+  //tree菜单列表
+  let listArr = reactive<any[]>([]);
+  let searchParam = reactive({
+    devKind: '',
+    strType: '',
+  });
 
-let router = useRouter(); //路由
+  let router = useRouter(); //路由
 
-async function getCameraDevKindList() {
-  let res = await getCameraDevKind();
-  if (res.length != 0) {
-    listArr.length = 0;
-    listArr.push({
-      pid: 'root',
-      isFolder: true,
-      expanded: true,
-      title: '全部',
-      id: 0,
-      children: [],
-    });
-    res.forEach((el) => {
-      el.pid = 0;
-      el.isFolder = true;
-      el.expanded = false;
-      el.title = el.itemText;
-      el.id = el.subDictId;
-      el.children = [];
-      listArr[0].children.push(el);
-    });
-    selected.id = listArr[0].id;
-    selected.pid = listArr[0].pid;
-    selected.title = listArr[0].title;
-    selected.isFolder = listArr[0].isFolder;
+  async function getCameraDevKindList() {
+    let res = await getCameraDevKind();
+    if (res.length != 0) {
+      listArr.length = 0;
+      listArr.push({
+        pid: 'root',
+        isFolder: true,
+        expanded: true,
+        title: '全部',
+        id: 0,
+        children: [],
+      });
+      res.forEach((el) => {
+        el.pid = 0;
+        el.isFolder = true;
+        el.expanded = false;
+        el.title = el.itemText;
+        el.id = el.subDictId;
+        el.children = [];
+        listArr[0].children.push(el);
+      });
+      selected.id = listArr[0].id;
+      selected.pid = listArr[0].pid;
+      selected.title = listArr[0].title;
+      selected.isFolder = listArr[0].isFolder;
+    }
   }
-}
 
-//点击目录
-async function onClick(node) {
-  if (selected.title === node.title && selected.id === node.id) return;
-  selected.id = node.id;
-  selected.pid = node.pid;
-  selected.title = node.title;
-  selected.isFolder = node.isFolder;
-  if (node.pid != 'root') {
-    if (node.isFolder) {
-      let types, devicetype;
-      if (node.itemValue.indexOf('&') != -1) {
-        types = node.itemValue.substring(node.itemValue.indexOf('&') + 1);
-        devicetype = node.itemValue.substring(0, node.itemValue.indexOf('&'));
+  //点击目录
+  async function onClick(node) {
+    if (selected.title === node.title && selected.id === node.id) return;
+    selected.id = node.id;
+    selected.pid = node.pid;
+    selected.title = node.title;
+    selected.isFolder = node.isFolder;
+    if (node.pid != 'root') {
+      if (node.isFolder) {
+        let types, devicetype;
+        if (node.itemValue.indexOf('&') != -1) {
+          types = node.itemValue.substring(node.itemValue.indexOf('&') + 1);
+          devicetype = node.itemValue.substring(0, node.itemValue.indexOf('&'));
+        } else {
+          types = '';
+          devicetype = '';
+        }
+        let res = await getDevice({ ids: types, devicetype: devicetype });
+        if (res.msgTxt.length != 0) {
+          res.msgTxt[0].datalist.forEach((el) => {
+            el.pid = node.id;
+            el.isFolder = false;
+            el.title = el.strinstallpos;
+            el.id = el.deviceID;
+          });
+          listArr[0].children.forEach((v) => {
+            if (v.id == node.id) {
+              v.children = res.msgTxt[0].datalist;
+            }
+          });
+        }
+        searchParam.devKind = node.itemValue;
+        searchParam.strType = '';
+        let paramKind = searchParam.devKind.substring(0, searchParam.devKind.indexOf('&'));
+        await getCamera('', playerRef, renderPlayer, paramKind);
       } else {
-        types = '';
-        devicetype = '';
-      }
-      let res = await getDevice({ ids: types, devicetype: devicetype });
-      if (res.msgTxt.length != 0) {
-        res.msgTxt[0].datalist.forEach((el) => {
-          el.pid = node.id;
-          el.isFolder = false;
-          el.title = el.strinstallpos;
-          el.id = el.deviceID;
-        });
-        listArr[0].children.forEach((v) => {
-          if (v.id == node.id) {
-            v.children = res.msgTxt[0].datalist;
-          }
-        });
+        await getCamera(node.deviceID, playerRef, renderPlayer);
       }
-      searchParam.devKind = node.itemValue;
-      searchParam.strType = '';
-      let paramKind = searchParam.devKind.substring(0, searchParam.devKind.indexOf('&'));
-      await getCamera('', playerRef, renderPlayer, paramKind);
     } else {
-      await getCamera(node.deviceID, playerRef, renderPlayer);
+      searchParam.devKind = '';
+      searchParam.strType = '';
+      await getCamera('', playerRef, renderPlayer);
     }
-  } else {
-    searchParam.devKind = '';
-    searchParam.strType = '';
-    await getCamera('', playerRef, renderPlayer);
   }
-}
 
-//点击详情跳转
-function onDetail(node) {
-  let str = listArr[0].children.filter((v) => v.id == node.pid)[0].itemValue;
-  let type = str.indexOf('&') != -1 ? str.substring(0, str.indexOf('&')) : '';
-  console.log(type, 'type--------');
-  switch (type) {
-    case 'pulping': //注浆
-      router.push('/grout-home');
-      break;
-    case 'window': //自动风窗
-      router.push('/monitorChannel/monitor-window?id=' + node.deviceID);
-      break;
-    case 'gate': //自动风门
-      router.push('/monitorChannel/monitor-gate?id=' + node.deviceID + '&deviceType=' + node.deviceType);
-      break;
-    case 'fanlocal': //局部风机
-      router.push('/monitorChannel/monitor-fanlocal?id=' + node.deviceID + '&deviceType=fanlocal');
-      break;
-    case 'fanmain': //主风机
-      router.push('/monitorChannel/monitor-fanmain?id=' + node.deviceID);
-      break;
-    case 'forcFan': //压风机
-      router.push('/forcFan/home');
-      break;
-    case 'pump': //瓦斯抽采泵
-      router.push('/monitorChannel/gasPump-home');
-      break;
-    case 'nitrogen': //制氮
-      router.push('/nitrogen-home');
-      break;
+  //点击详情跳转
+  function onDetail(node) {
+    let str = listArr[0].children.filter((v) => v.id == node.pid)[0].itemValue;
+    let type = str.indexOf('&') != -1 ? str.substring(0, str.indexOf('&')) : '';
+    console.log(type, 'type--------');
+    switch (type) {
+      case 'pulping': //注浆
+        router.push('/grout-home');
+        break;
+      case 'window': //自动风窗
+        router.push('/monitorChannel/monitor-window?id=' + node.deviceID);
+        break;
+      case 'gate': //自动风门
+        router.push('/monitorChannel/monitor-gate?id=' + node.deviceID + '&deviceType=' + node.deviceType);
+        break;
+      case 'fanlocal': //局部风机
+        router.push('/monitorChannel/monitor-fanlocal?id=' + node.deviceID + '&deviceType=fanlocal');
+        break;
+      case 'fanmain': //主风机
+        router.push('/monitorChannel/monitor-fanmain?id=' + node.deviceID);
+        break;
+      case 'forcFan': //压风机
+        router.push('/forcFan/home');
+        break;
+      case 'pump': //瓦斯抽采泵
+        router.push('/monitorChannel/gasPump-home');
+        break;
+      case 'nitrogen': //制氮
+        router.push('/nitrogen-home');
+        break;
+    }
   }
-}
 
-onMounted(async () => {
-  await getCameraDevKindList();
-  await getCamera('', playerRef, renderPlayer);
-});
-onBeforeUnmount(() => {
-  removeCamera(playerRef);
-});
+  onMounted(async () => {
+    await getCameraDevKindList();
+    await getCamera('', playerRef, renderPlayer);
+  });
+  onBeforeUnmount(() => {
+    removeCamera(playerRef);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
-  .camera-container {
-    --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
+  @{theme-deepblue} {
+    .camera-container {
+      --image-camera_bg: url('/@/assets/images/themify/deepblue/vent/camera_bg.png');
+    }
   }
-}
 
-.camera-container {
-  --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
-  position: relative;
-  width: calc(100% - 30px);
-  height: calc(100% - 84px);
-  display: flex;
-  margin: 15px;
-  justify-content: space-between;
-  align-items: center;
+  .camera-container {
+    --image-camera_bg: url('/@/assets/images/vent/camera_bg.png');
+    position: relative;
+    width: calc(100% - 30px);
+    height: calc(100% - 84px);
+    display: flex;
+    margin: 15px;
+    justify-content: space-between;
+    align-items: center;
 
-  .left-area {
-    width: 15%;
-    height: 100%;
-    padding: 20px;
-    border: 1px solid #99e8ff66;
-    background: #27546e1a;
-    box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-    -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-    -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
-    box-sizing: border-box;
+    .left-area {
+      width: 15%;
+      height: 100%;
+      padding: 20px;
+      border: 1px solid #99e8ff66;
+      background: #27546e1a;
+      box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+      -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
+      box-sizing: border-box;
 
-    // lxh
-    .iconfont {
-      color: #fff;
-      font-size: 12px;
-      margin-left: 5px;
+      // lxh
+      .iconfont {
+        color: #fff;
+        font-size: 12px;
+        margin-left: 5px;
+      }
     }
-  }
 
-  .right-area {
-    width: 85%;
-    height: 100%;
-    padding: 0px 0px 0px 15px;
-    box-sizing: border-box;
+    .right-area {
+      width: 85%;
+      height: 100%;
+      padding: 0px 0px 0px 15px;
+      box-sizing: border-box;
+    }
   }
-}
 
-:deep(#LivePlayerBox) {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  pointer-events: none;
+  :deep(#LivePlayerBox) {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    pointer-events: none;
 
-  .liveVideo {
-    width: 510px !important;
-    height: 320px !important;
-    align-self: auto !important;
-    margin: 10px 8px !important;
-    background-size: 100% 100% !important;
-    padding: 15px !important;
-  }
+    .liveVideo {
+      width: 510px !important;
+      height: 320px !important;
+      align-self: auto !important;
+      margin: 10px 8px !important;
+      background-size: 100% 100% !important;
+      padding: 15px !important;
+    }
 
-  // .video-parent {
-  //   pointer-events: auto !important;
-  //   align-self: auto !important;
-  // }
-}
+    // .video-parent {
+    //   pointer-events: auto !important;
+    //   align-self: auto !important;
+    // }
+  }
 </style>