录像播放

src/views/biz/dc/record.vue

@@ -11,15 +11,22 @@
         </template>
       </el-table-column>
     </el-table>
+    <div v-show="showInfoWindow">
+        <div class="infoWindowContent">
+          <div class="close-button" @click="close"></div>
+          <Player ref="playercontainer"/>
+        </div>
+    </div>
   </div>
 </template>
 
 <script setup name="Dc">
 import {useRoute} from "vue-router";
 import axios from "axios";
+import Player from '../../components/player.vue'
 
 const {proxy} = getCurrentInstance();
-
+const showInfoWindow = ref(false);
 const route = useRoute();
 const drList = ref([]);
 const open = ref(false);
@@ -30,7 +37,7 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
-
+const playercontainer = ref(null);
 const data = reactive({
   form: {},
   queryParams: {
@@ -58,7 +65,7 @@ function getList() {
   const device = route.query.device;
   const channel = route.query.channel;
   const start = new Date().getTime() - 1000 * 60 * 60 * 24;
-  axios.get(`http://47.108.159.150:8080/gb28181/api/records/${device}/${channel}?start=${start}`).then(response => {
+  axios.get(window.VideoServerUrl+ `/gb28181/api/records/${device}/${channel}?start=${start}`).then(response => {
     drList.value=response.data.data;
   })
   loading.value=false;
@@ -70,9 +77,60 @@ function handleVideo(row) {
   const gb = "gb_" + new Date().getTime();
   const start = new Date(row.startTime).getTime()/1000;
   const end = new Date(row.endTime).getTime();
-  const url = `http://47.108.159.150:8080/flv/${gb}/${device}/${channel}?start=${start}&end=${end}`;
-  console.log(url);
+  const url = window.VideoServerUrl+ `/flv/${gb}/${device}/${channel}?start=${start}&end=${end}`;
+  showInfoWindow.value=true;
+  playercontainer.value.play(url);
+}
+
+const close=()=>{
+  playercontainer.value.destroy();
+  showInfoWindow.value = false;
 }
 
 getList();
 </script>
+<style>
+.infoWindowContent{
+  border: 2px solid #fff;
+  position: absolute;
+  left:50%;
+  top:50%;
+  width: 880px;
+  height: 360px;
+  margin-top: -180px;
+  margin-left: -440px;
+  border-radius: 5px;
+  background: #0000003b;
+  background-image: url('/images/video_bg.png');
+  background-size: contain;
+  z-index: 10;
+  .close-button {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        display: inline-block;
+        z-index: 9;
+        right: 6px;
+        top: 6px;
+    }
+
+    .close-button::before,
+    .close-button::after {
+      content: '';
+      position: absolute;
+      width: 10px; /* 图标宽度 */
+      height: 2px; /* 图标厚度 */
+      background-color: #fff; /* 图标颜色 */
+      top: 9px; /* 垂直居中 */
+    }
+
+    .close-button::before {
+      transform: rotate(45deg);
+    }
+
+    .close-button::after {
+      transform: rotate(-45deg);
+    } 
+}
+</style>

src/views/components/player.vue

@@ -1,9 +1,7 @@
 <template>
-    <div class="root">
+    <div class="root" v-show="open">
       <div class="container-shell">
-        <div class="container-shell-title" v-show="false">jessibuca demo player <span class="tag-version" v-if="version">({{
-            version
-          }})</span></div>
+        <div class="container-shell-title"><span class="close-button" v-if="showClose" @click.stop="closePlayer"></span></div>
         <div class="option" v-show="false">
           <span>缓冲(秒):</span>
           <input
@@ -116,6 +114,7 @@
     },
     data() {
       return {
+        open:true,
         jessibuca: null,
         version: '',
         wasm: false,
@@ -136,6 +135,7 @@
         recording: false,
         recordType: 'webm',
         scale: 0,
+        showClose:false,
       };
     },
     computed:{
@@ -292,7 +292,12 @@
   
         // console.log(this.jessibuca);
       },
-      play(url) {
+      closePlayer(){
+        this.open = false
+        this.destroy();
+      },
+      play(url,isshowclose) {
+        this.open = true
         // this.jessibuca.onPlay = () => (this.playing = true);
         console.log("==========开始播放:"+url)
         if (url) {
@@ -301,6 +306,7 @@
           }
           this.jessibuca.play(url || this.$refs.playUrl.value);
         }
+        this.showClose = isshowclose!=null && isshowclose? true : false;
       },
       mute() {
         this.jessibuca.mute();
@@ -410,6 +416,35 @@
     top: 4px;
     left: 10px;
     text-shadow: 1px 1px black;
+    width: 100%;
+    .close-button {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        display: inline-block;
+        z-index: 9;
+        right: 6px;
+        top: 6px;
+    }
+
+    .close-button::before,
+    .close-button::after {
+      content: '';
+      position: absolute;
+      width: 10px; /* 图标宽度 */
+      height: 2px; /* 图标厚度 */
+      background-color: #fff; /* 图标颜色 */
+      top: 9px; /* 垂直居中 */
+    }
+
+    .close-button::before {
+      transform: rotate(45deg);
+    }
+
+    .close-button::after {
+      transform: rotate(-45deg);
+    }
   }
   
   .tag-version {

src/views/index.vue

@@ -302,7 +302,7 @@ const initMap = () => {
         userinfo = JSON.parse(userinfo);
         drawAreaBorder(userinfo.dept.deptName);
       }
-      initData();
+      initData();      
     })
     .catch((e) => {
       console.log('error', e)
@@ -383,6 +383,7 @@ const loadStat=()=>{
     alarm_curr.value = vl;
     vl=[];
     for (let k in typeMapping) {
+      if(k=="-1") continue;
       vl.push({code:typeMapping[k],name:alarm_type.value[typeMapping[k]].name,value:res.month[k]*1});
     }
     echars01data.value = vl;
@@ -930,7 +931,7 @@ onMounted(() => {
         width: auto;
         line-height: 16px;
         position: absolute;
-        right: 5px;
+        right: 25px;
         top: 5px;
         font-size: 12px;
         background-color: #00000080;