Ver Fonte

完成视频接入

linqilong há 5 meses atrás
pai
commit
b55b2789f0

+ 0 - 1
index.html

@@ -5,7 +5,6 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>太湖流域国家基本水文站</title>
-    <script src="/jessibuca.js"></script>
   </head>
   <body>
     <div id="app"></div>

+ 3 - 3
src/api/video.ts

@@ -18,7 +18,7 @@ export function getVideoToken(data: FormData) {
 }
 
 /**
- * 设备耗材信息
+ * 获取code
  */
 export function getSiteList(stid: string, token: string) {
   return request({
@@ -34,7 +34,7 @@ export function getSiteList(stid: string, token: string) {
 
 
 /**
- * 运维人员统计
+ * 获取视频流
  */
 export function getVideoUrl(code: string, token: string) {
   return request({
@@ -48,7 +48,7 @@ export function getVideoUrl(code: string, token: string) {
 }
 
 /**
- * 运维人员统计
+ * 关闭视频流
  */
 export function stopVideo(code: string, token: string) {
   return request({

+ 0 - 75
src/assets/plugins/tbavideo/spjk2.html

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
-<head th:include="commonpage/header :: header"></head>
-<title>视频查看</title>
-<link th:href="@{/static/css/common/laytable_blue.css}" rel="stylesheet" type="text/css"/>
-<script type="text/javascript" th:src="@{/static/plugins/md5.ts?r=1}"></script>
-<script type="text/javascript" th:src="@{/static/plugins/jessibuca/jessibuca.js?r=1}"></script>
-<script type="text/javascript" th:src="@{/static/plugins/video.ts?r=1}"></script>
-<style>
-    .indexwapper {
-        margin-top: 70px;
-        width: 100%;
-        height: calc(100% - 70px) !important;
-        display: block;
-        position: absolute;
-        z-index: 80;
-        top: 0px;
-        min-width: 1120px;
-        min-height: 600px;
-        overflow: hidden;
-    }
-
-    .spjlk {
-        font-size: 20px;
-        text-align: center;
-        height: 50px;
-        line-height: 50px;
-        border: 1px solid #293a5c;
-        cursor: pointer;
-    }
-
-    #container {
-        width: 100%;
-        overflow-y: scroll;
-        font-size: 16px;
-        font-weight: 600;
-        height: 1000px;
-        background-color: #0a99c426;
-        border-top: 1px solid #0a99c4;
-    }
-
-    .layui-tree-txt {
-        color: white;
-    }
-
-    .active {
-        background-color: #0e45aa;
-    }
-
-    .no-active {
-        background-color: #040d30;
-    }
-
-    .video-js {
-        width: 100%;
-        height: 100%;
-    }
-</style>
-<body onload="showDate()">
-<div th:include="commonpage/topmenu2 :: topmenu2('spjk')"></div>
-
-<div class="indexwapper">
-    <div class="layui-row" layui-col-space5 style="height: calc(100% - 15px) !important;">
-        <div class="layui-col-md2" style="height: 100%">
-            <div id="stcdList"></div>
-        </div>
-        <div class="layui-col-md10" style="height: 850px">
-            <div style="background-color: #101654;border: 1px solid #7696df; height: 100%;margin: 10px 10px;">
-                <div id="container" class="layui-row layui-col-space10" style="height: 100%"></div>
-            </div>
-        </div>
-    </div>
-</div>
-</body>
-</html>

+ 14 - 17
src/components/Video/index.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
-import {onMounted, onUnmounted, ref} from "vue";
-import {closeVideo, init, playVideo} from './video.ts'
+import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
+import {closeVideo, getVideoSrc} from './video.ts'
 
-const tbaVideoRef = ref(null)
+defineProps({
+  code: {type: String, required: true},
+  imageSrc: {type: String},
+})
+const {props} = getCurrentInstance()
+const videoSrc = ref(null)
 
-onMounted(() => {
-  init(tbaVideoRef)
-  playVideo('33048306531322000300');
+onMounted(async () => {
+  if (props.code) {
+    videoSrc.value = await getVideoSrc(props.code);
+  }
 })
 onUnmounted(() => {
   closeVideo()
@@ -14,22 +20,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="video-wapper">
-    <div ref="tbaVideoRef" class="video-js"></div>
-  </div>
+  <video v-if="videoSrc" :src="videoSrc" autoplay class="video-wapper" controls muted></video>
+  <img v-else :src="props.imageSrc" alt="" class="video-wapper"/>
 </template>
 <style lang="scss" scoped>
 .video-wapper {
-  background-color: #101654;
-  border: 1px solid #7696df;
   width: 100%;
   height: 100%;
-
-  .video-js {
-    width: 100%;
-    height: 100%;
-  }
-
 }
 </style>
 

+ 42 - 268
src/components/Video/video.ts

@@ -8,256 +8,63 @@ const password = "!X2MWvIX!F";
 
 let curIndexCode: any = null;
 let token: any = null;
-let jessibuca: any = null;
 
-const videoTree = [
+const videoCode = [
   {
-    "id": "70119139",
-    "title": "中和村流量站",
-    "indexCode": "34102206531322000100",
-    "children": []
-  },
-  {
-    "id": "70119129",
-    "title": "呈村流量站",
-    "indexCode": null,
-    "children": []
-  },
-  {
-    "id": "701121001",
-    "title": "罗桐埠",
-    "indexCode": null,
+    "stcd": "63304700",
+    "stnm": "太师桥",
     "children": [
       {
-        "id": "70112100",
-        "title": "站院入口",
-        "indexCode": "33018206531322000700",
-        "children": []
-      },
-      {
-        "id": "70112100",
-        "title": "储藏室",
-        "indexCode": "33018206531322000100",
-        "children": []
-      },
-      {
-        "id": "70112100",
-        "title": "站院一层",
-        "indexCode": "33018206531322000200",
-        "children": []
-      },
-      {
-        "id": "70112100",
-        "title": "站院二层",
-        "indexCode": "33018206531322000300",
-        "children": []
-      },
-      {
-        "id": "70112100",
-        "title": "办公室",
-        "indexCode": "33018206531322000500",
-        "children": []
+        "id": "0e873d77-3895-4156-81e9-b104bd4868f0",
+        "pid": "06d3322e-eb7b-44e3-8371-a8712e40eee5",
+        "name": "太师桥室外角球机",
+        "mark": "室外2",
+        "code": "33048306531322000300",
       },
       {
-        "id": "70112100",
-        "title": "水尺牌",
-        "indexCode": "33018206531322000600",
-        "children": []
+        "id": "dbe0bac5-93eb-418d-b017-32de9bacc5a9",
+        "pid": "06d3322e-eb7b-44e3-8371-a8712e40eee5",
+        "name": "太师桥室内球机",
+        "mark": "室内",
+        "code": "33048306531322000100",
       },
       {
-        "id": "70112100",
-        "title": "观测室",
-        "indexCode": "33018206531322000400",
-        "children": []
+        "id": "f4c33fc3-283c-457f-aec6-21b245c5f158",
+        "pid": "06d3322e-eb7b-44e3-8371-a8712e40eee5",
+        "name": "太师桥室外栈桥球机",
+        "mark": "室外",
+        "code": "33048306531322000200",
       }
     ]
   },
   {
-    "id": "701114001",
-    "title": "街口水文站",
-    "indexCode": null,
+    "stcd": "63304650",
+    "stnm": "思源",
     "children": [
       {
-        "id": "70111400",
-        "title": "上游跟踪",
-        "indexCode": "34102106531322000500",
-        "children": []
-      },
-      {
-        "id": "70111400",
-        "title": "全景摄像机",
-        "indexCode": "34102106531322000100",
-        "children": []
+        "id": "df4a993b-a58d-4431-b3ca-4c3e5d68507f",
+        "pid": "1c47a453-bde7-475a-8482-cadb4bc9c1b6",
+        "name": "思源室外",
+        "mark": "室外",
+        "code": "32050906531322002200",
       },
       {
-        "id": "70111400",
-        "title": "下游跟踪",
-        "indexCode": "34102106531322000400",
-        "children": []
-      },
-      {
-        "id": "70111400",
-        "title": "上游监控",
-        "indexCode": "34102106531322000200",
-        "children": []
-      },
-      {
-        "id": "70111400",
-        "title": "缆道球机",
-        "indexCode": "34102106531322000600",
-        "children": []
-      },
-      {
-        "id": "70111400",
-        "title": "下游监控",
-        "indexCode": "34102106531322000300",
-        "children": []
+        "id": "c12e7204-79f2-40d8-804d-8ffe7bf76f32",
+        "pid": "1c47a453-bde7-475a-8482-cadb4bc9c1b6",
+        "name": "思源室内",
+        "mark": "室内",
+        "code": "32050906531322002100",
       }
     ]
-  },
-  {
-    "id": "63313001",
-    "title": "梅台港桥水文站",
-    "indexCode": "33042106531322001100",
-    "children": []
-  },
-  {
-    "id": "63312411",
-    "title": "陶庄枢纽",
-    "indexCode": "33042106531322001000",
-    "children": []
-  },
-  {
-    "id": "63312340",
-    "title": "大舜枢纽水文站",
-    "indexCode": "33042106531322000800",
-    "children": []
-  },
-  {
-    "id": "63312300",
-    "title": "丁栅枢纽水文站",
-    "indexCode": "33042106531322000900",
-    "children": []
-  },
-  {
-    "id": "63304730",
-    "title": "文桥水文站",
-    "indexCode": "32050906531322002300",
-    "children": []
-  },
-  {
-    "id": "633047001",
-    "title": "太师桥",
-    "indexCode": null,
-    "children": [
-      {
-        "id": "63304700",
-        "title": "太师桥室外角球机",
-        "indexCode": "33048306531322000300",
-        "children": []
-      },
-      {
-        "id": "63304700",
-        "title": "太师桥室内球机",
-        "indexCode": "33048306531322000200",
-        "children": []
-      },
-      {
-        "id": "63304700",
-        "title": "太师桥室外栈桥球机",
-        "indexCode": "33048306531322000100",
-        "children": []
-      }
-    ]
-  },
-  {
-    "id": "633046501",
-    "title": "思源",
-    "indexCode": null,
-    "children": [
-      {
-        "id": "63304650",
-        "title": "思源室内",
-        "indexCode": "32050906531322002100",
-        "children": []
-      },
-      {
-        "id": "63304650",
-        "title": "思源室外",
-        "indexCode": "32050906531322002200",
-        "children": []
-      }
-    ]
-  },
-  {
-    "id": "63301700",
-    "title": "北虹大桥站室外",
-    "indexCode": "33041106531322000100",
-    "children": []
-  },
-  {
-    "id": "63205690",
-    "title": "太平桥",
-    "indexCode": "33041106531322000200",
-    "children": []
-  },
-  {
-    "id": "63205680",
-    "title": "双林桥 ",
-    "indexCode": "32050906531322002400",
-    "children": []
-  },
-  {
-    "id": "63205670",
-    "title": "章湾圩公路桥",
-    "indexCode": "32050906531322002500",
-    "children": []
-  },
-  {
-    "id": "111111111",
-    "title": "新安江水文实验站试验场",
-    "indexCode": null,
-    "children": [
-      {
-        "id": "11111111",
-        "title": "天然径流场(小)",
-        "indexCode": "34102206531322000200",
-        "children": []
-      },
-      {
-        "id": "11111111",
-        "title": "气象场、人工降雨场",
-        "indexCode": "34102206531322000300",
-        "children": []
-      },
-      {
-        "id": "11111111",
-        "title": "天然径流场(大)",
-        "indexCode": "34102206531322000400",
-        "children": []
-      },
-      {
-        "id": "11111111",
-        "title": "小流域监测",
-        "indexCode": "34102206531322000500",
-        "children": []
-      },
-      {
-        "id": "11111111",
-        "title": "实验场入口",
-        "indexCode": "34102206531322000600",
-        "children": []
-      }
-    ]
-  },
-  {
-    "id": "63305451",
-    "title": "圣塘桥(下)",
-    "indexCode": "33041106531322000300",
-    "children": []
   }
 ]
 
+export function getVideoCodeByMark(stcd: string, mark: string) {
+  const videos = videoCode.find(v => v.stcd === stcd)
+  const video = videos?.children.find(v => v.mark === mark)
+  return video?.code || null
+}
+
 function encryptPwd() {
   const first_md5 = MD5(password).toString().toUpperCase();
   console.log(first_md5);
@@ -280,46 +87,17 @@ async function getToken() {
   })
 }
 
-export function init(container: any) {
-  const decoderSrc = '/decoder.js'
-  jessibuca = new window.Jessibuca({
-    decoder: decoderSrc,
-    container: container.value,
-    videoBuffer: 0.2, // 缓存时长
-    isResize: false,
-    text: "",
-    loadingText: "",
-    useMSE: false,
-    debug: true,
-    showBandwidth: true, // 显示网速
-    operateBtns: {
-      fullscreen: true,
-      screenshot: true,
-      play: true,
-      audio: false,
-      recorder: false
-    },
-    forceNoOffscreen: true,
-    isNotMute: false,
-  });
+function getsiteList(stid: string, authorization = token) {
+  getSiteList(stid, authorization)
 }
 
-export async function playVideo(code: string) {
+export async function getVideoSrc(code: string) {
   if (!token) {
     await getToken()
   }
-
-  closeVideo(curIndexCode, token);
-  getvideoUrl(code, token);
-}
-
-//获取视频地址并进行播放
-function getvideoUrl(videoNm = curIndexCode, authorization = token) {
-  curIndexCode = videoNm;
-  getVideoUrl(videoNm, authorization).then(res => {
-    debugger
-    jessibuca.play(res.data.ws_flv);
-  })
+  closeVideo();
+  curIndexCode = code;
+  return await getVideoUrl(curIndexCode, token).then(res => res.data.https_fmp4).catch(() => null)
 }
 
 export function closeVideo(videoNm = curIndexCode, authorization = token) {
@@ -332,7 +110,3 @@ export function closeVideo(videoNm = curIndexCode, authorization = token) {
     console.log(res);
   })
 }
-
-function getsiteList(stid: string, authorization = token) {
-  getSiteList(stid, authorization)
-}

+ 1 - 1
src/utils/request.ts

@@ -92,7 +92,7 @@ service.interceptors.response.use(
     } else if (code === 601) {
       ElMessage({message: msg, type: 'error'})
       return Promise.reject('error')
-    } else if (code !== 200) {
+    } else if (code !== 0 && code !== 200) {
       return Promise.reject(msg);
     } else {
       return Promise.resolve(res.data);