视频组件

index.html

@@ -5,7 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-    <link rel="icon" href="/favicon.ico" />
+<!--    <link rel="icon" href="/favicon.ico" />-->
+    <script src="/h5player.min.js"></script>
+    <script src="/Decoder.js"></script>
+
     <title>应急指挥一张图</title>
     <!--[if lt IE 11
       ]><script>

src/components/Dialog/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="overlay">
+    <div class="dialog">
+      <div class="dialog-header">
+        <div class="dialog-title"></div>
+        <div class="icon-close">
+          <el-icon size="100px"><Close /></el-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  visible: boolean;
+  title?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  visible: false
+});
+</script>
+
+<style lang="scss" scoped>
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .dialog {
+    width: 5000px;
+    height: 2000px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+}
+.dialog {
+  padding: 0 50px;
+  .dialog-header {
+    width: 100%;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .icon-close {
+      cursor: pointer;
+    }
+  }
+
+}
+</style>

src/components/HKVideo/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div id="HKVideo" class="HKVideo1"></div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  url: string;
+}
+const props = withDefaults(defineProps<Props>(), {});
+//下方为海康视频播放器所需变量
+const oPlugin = ref();
+let time;
+
+async function getScript() {
+  const { JSPlugin }: any = window;
+  oPlugin.value = new JSPlugin({
+    szId: 'HKVideo', // 当前的视频播放的节点，需要英文字母开头，必填
+    szBasePath: '/', // 这里必须指向h5player.min.js文件 把这个文件再放在src里面的一个文件夹中，因为放置在public的文件这里指向不到
+    openDebug: true,
+    // 分屏播放
+    iMaxSplit: 4,
+    iCurrentSplit: 1,
+    // 设置样式
+    oStyle: {
+      border: '#FFF',
+      borderSelect: '#FFCC00',
+      background: '#000'
+    }
+  });
+
+  await initPlugin();
+}
+
+// 事件初始化
+function initPlugin() {
+  oPlugin.value.JS_SetWindowControlCallback({
+    windowEventSelect(iWindIndex: any) {
+      // 插件选中窗口回调
+      console.log('windowSelect callback: ', iWindIndex);
+    },
+    pluginErrorHandler(iWindIndex: any, iErrorCode: any, oError: any) {
+      // 插件错误回调
+      console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError);
+    },
+    windowEventOver(iWindIndex: any) {
+      // 鼠标移过回调
+      console.log('鼠标移过回调', iWindIndex);
+    },
+    windowEventOut(iWindIndex: any) {
+      // 鼠标移出回调
+      console.log('鼠标移出回调', iWindIndex);
+    },
+    windowFullCcreenChange(bFull: any) {
+      // 全屏切换回调
+      console.log('全屏切换回调', bFull);
+    },
+    firstFrameDisplay(iWndIndex: any, iWidth: any, iHeight: any) {
+      // 首帧显示回调
+      console.log('首帧显示回调', iWndIndex, iWidth, iHeight);
+    },
+    performanceLack(iWndIndex: any) {
+      // 性能不足回调
+      console.log('性能不足回调', iWndIndex);
+    }
+  });
+  realplay();
+}
+
+//   // 播放初始化
+function realplay() {
+  console.log('播放初始化');
+  console.log(oPlugin.value.currentWindowIndex, 'oPlugin.value.currentWindowIndex');
+  oPlugin.value
+    .JS_Play(
+      props.url, //视频地址链接
+      {
+        playURL: 'props.url' // 流媒体播放时必传
+      },
+      oPlugin.value.currentWindowIndex //这个应该是视频下标吧 具体我也不太清楚
+    )
+    .then(
+      (res: any) => {
+        console.log(res, '播放成功');
+      },
+      (err: any) => {
+        console.log(err, '播放失败');
+      }
+    );
+}
+
+onMounted(async () => {
+  time = setInterval(() => {
+    const { _malloc }: any = window;
+    if (_malloc) {
+      getScript();
+      clearInterval(time);
+    }
+  }, 100);
+});
+</script>
+
+<style lang="scss" scoped>
+.HKVideo1 {
+  width: 100%;
+}
+</style>

src/components/HeaderSection/index.vue

@@ -32,7 +32,7 @@
 <script lang="ts" setup>
 import useUserStore from '@/store/modules/user';
 import useSettingsStore from '@/store/modules/settings';
-import { Search } from '@element-plus/icons-vue'
+import { Search } from '@element-plus/icons-vue';
 
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();

src/components/ScrollTable/index.vue

@@ -38,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {});
     }
     .tr {
       .td {
+        width: auto;
         font-size: 42px;
         padding: 37px 14px;
       }

src/views/dashboard/RightSection.vue

@@ -2,12 +2,19 @@
   <div class="right-section">
     <div class="card">
       <div class="card-header">
-        <div>综合值守</div>
+        <div>视频监控</div>
+        <div class="more">查看更多</div>
       </div>
-      <div class="card-content">
-        <div style="line-height: 207px">值班时间：08-30-17：30</div>
-        <div style="line-height: 207px">带班领导：张珊珊</div>
-        <div style="line-height: 207px">值班时间：林珊珊、张珊珊</div>
+      <div class="card-content video-list">
+        <div v-for="(item, index) in videoUrl" :key="index" class="video-box" @click="showVideoDialog(item)">
+          <div class="video-header">
+            <span>{{ item.label }}</span>
+            <span>{{ item.time }}</span>
+          </div>
+          <div class="video-content">
+            <img class="img" src="@/assets/images/profile.jpg" alt="" />
+          </div>
+        </div>
       </div>
     </div>
     <div class="card">
@@ -23,10 +30,39 @@
       <div class="card-content"></div>
     </div>
   </div>
+  <!--视频弹窗-->
+  <!--  <Dialog v-model="videoDialogVisible" :title="videoDialogData.label" width="70%" :before-close="handleClose">-->
+  <!--    <HKVideo :url="videoDialogData.url" />-->
+  <!--  </Dialog>-->
 </template>
 
 <script lang="ts" setup>
+import Dialog from '@/components/Dialog/index.vue';
+import HKVideo from '@/components/HKVideo/index.vue';
 
+// 视频监控
+const videoUrl = reactive([
+  { label: '摄像头一', img: '', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+  { label: '摄像头二', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+  { label: '摄像头三', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+  { label: '摄像头四', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+  { label: '摄像头五', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' },
+  { label: '摄像头六', url: 'https://vjs.zencdn.net/v/oceans.mp4', time: '17:14' }
+]);
+// 视频弹窗显隐
+let videoDialogVisible = ref(false);
+let videoDialogData = reactive({});
+
+// 显示视频弹窗
+const showVideoDialog = (item) => {
+  console.log(item);
+  videoDialogData = item;
+  videoDialogVisible.value = true;
+};
+// 关闭视频弹窗
+const handleClose = () => {
+  videoDialogVisible.value = false;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -37,6 +73,7 @@
   flex-direction: column;
   font-size: 74px;
 }
+
 .card {
   width: 100%;
   background-color: #ffffff;
@@ -44,21 +81,33 @@
   padding: 46px 69px;
   margin-bottom: 69px;
   animation-name: slide;
+
+  .card-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   &:last-child {
     margin-bottom: 0;
   }
+
   &:nth-child(1) {
     animation-duration: 0.5s; // 新增
   }
+
   &:nth-child(2) {
     height: 667.5px;
     animation-duration: 1s; // 新增
   }
+
   &:nth-child(3) {
     height: 667.5px;
     animation-duration: 1.5s; // 新增
   }
 }
+
 @keyframes slide {
   0% {
     transform: translateX(100%);
@@ -70,4 +119,42 @@
     transform: translateX(0);
   }
 }
+
+.more {
+  color: #1890ff;
+  cursor: pointer;
+}
+
+.video-list {
+  display: flex;
+  flex-wrap: wrap;
+  .video-box {
+    width: 485px;
+    margin-right: 46px;
+    &:nth-child(3),
+    &:nth-child(6) {
+      margin-right: 0;
+    }
+  }
+}
+.video-box {
+  cursor: pointer;
+  .video-header {
+    background-color: #7f7f7f;
+    padding: 0 10px;
+    font-size: 30px;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .video-content {
+    padding: 15px;
+    background-color: #ccc;
+    .img {
+      width: 100%;
+      height: 250px;
+    }
+  }
+}
 </style>