matrix_components 2.0.319 → 2.0.320

package/README.md

@@ -1,6 +1,13 @@
 # **组件库2.0**
 组件使用示例参考dist/ComponentDemo
 
+```
+version:2.0.320
+2025-11-18 09:53:06
+更新日志：
+1.NsOffice组件无数据时，样式修改
+```
+
 ```
 version:2.0.319
 2025-11-15 17:21:09

package/dist/ComponentDemo/VideoDemo.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, nextTick } from 'vue'
-import { useVideoDraw } from '../hooks/videoDraw'
+import { onMounted, reactive, ref } from 'vue'
 
 const nsVideoRef = ref()
 
@@ -9,7 +8,7 @@ const videoData = reactive({
   // videoModel: 'hk',
   // hkPath: '/martrix/cdn/h5player',
   // 显示视频关闭按钮
-  showClose: false,
+  showClose: true,
   // 显示树
   showTree: true,
   // 树数据
@@ -106,6 +105,39 @@ const videoData = reactive({
         channelId: 'c11',
       },
     },
+    // {
+    //   index: 1,
+    //   url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000015.live.flv',
+    //   info: {
+    //     videoModel: 'easyplayer',
+    //     id: '222',
+    //     url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000015.live.flv',
+    //     deviceId: 'c2',
+    //     channelId: 'c11',
+    //   },
+    // },
+    // {
+    //   index: 2,
+    //   url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
+    //   info: {
+    //     videoModel: 'easyplayer',
+    //     id: 'xxx2',
+    //     url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
+    //     deviceId: 'c3',
+    //     channelId: 'c11',
+    //   },
+    // },
+    // {
+    //   index: 3,
+    //   url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000008.live.flv',
+    //   info: {
+    //     videoModel: 'easyplayer',
+    //     id: 'b3',
+    //     url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000008.live.flv',
+    //     deviceId: 'c4',
+    //     channelId: 'c11',
+    //   },
+    // },
   ],
   // ！！！ 单点播放
   videoSingleUrl: false,
@@ -137,220 +169,133 @@ const videoData = reactive({
     hasAudio: false,
     stretch: false
   },
+  // -----------事件回调-------------
+  // 点击树节点的操作
+  treeClick: () => {
+    console.log('点击树节点回调函数')
+  },
+  // 双击树节点的操作
+  treeDBClick: () => {
+    console.log('双击树节点回调函数')
+  },
+  // 右键树展示菜单
+  treeRightMenu: () => {
+    console.log('右键树展示菜单')
+  },
+  // 展开树节点
+  treeExpand: () => {
+    console.log('展开树节点')
+  },
+  // 视频错误回调函数
+  videoError: () => {
+    console.log('视频错误回调函数')
+  },
 })
 
-const drawW = ref('0')
-const drawH = ref('0')
-const videoPlayerCoverRef = ref()
-const videoDrawRef = ref()
-const canvasRef = ref()
-
-// 使用画布绘图功能
-const {
-  initCanvas,
-  clearCanvas,
-  drawFromCoordinates,
-  getState,
-  points,
-  areaCoordinates,
-  isDrawing,
-  isComplete
-} = useVideoDraw()
-
 // 视频操作事件
 const videoEvent = {
   videoOriginalInfo: (info: any) => {
     console.log('===============>视频原始信息:', info)
-    const coverEle = videoPlayerCoverRef.value;
-    const currentVideoInfo = info?.[0]
-    if(coverEle && currentVideoInfo?.width && currentVideoInfo?.height){
-      let _w = coverEle.clientWidth
-      let _h = coverEle.clientHeight
-      if(currentVideoInfo.width > currentVideoInfo.height){
-        _h = _w * (currentVideoInfo.height / currentVideoInfo.width)
-      }else{
-        _w = _h * (currentVideoInfo.width / currentVideoInfo.height)
-      }
-      drawW.value = _w + 'px'
-      drawH.value = _h + 'px'
-
-      // 初始化画布绘图功能
-      nextTick(() => {
-        if (canvasRef.value && videoDrawRef.value) {
-          // 确保canvas尺寸正确
-          canvasRef.value.width = videoDrawRef.value.clientWidth
-          canvasRef.value.height = videoDrawRef.value.clientHeight
-
-          initCanvas(canvasRef.value, videoDrawRef.value)
-          console.log('画布绘图功能已初始化，尺寸:', videoDrawRef.value.clientWidth, 'x', videoDrawRef.value.clientHeight)
-        }
-      })
-    }
   },
-}
-
-// 显示绘图状态和坐标
-const showDrawInfo = () => {
-  const state = getState()
-  console.log('当前绘图状态:', state)
-
-  if (state.points.length > 0) {
-    console.log('所有点坐标:', state.points)
-    console.log('区域信息:', state.areaCoordinates)
-
-    // 可以在这里处理坐标数据，比如发送到后端或保存到本地
-    localStorage.setItem('videoCanvasCoordinates', JSON.stringify(state.points))
-
-    alert(`已获取 ${state.points.length} 个点的坐标，数据已保存到控制台和localStorage`)
-  } else {
-    alert('当前没有绘制任何点')
-  }
-}
-
-// 测试回显功能
-const testDrawFromCoordinates = () => {
-  const testCoordinates = [
-    { x: 100, y: 100 },
-    { x: 200, y: 50 },
-    { x: 300, y: 150 },
-    { x: 250, y: 250 },
-    { x: 150, y: 200 }
-  ]
-  drawFromCoordinates(testCoordinates)
+  up: () => {
+    console.log('视频向上移动操作')
+  },
+  down: () => {
+    console.log('视频向下移动操作')
+  },
+  left: () => {
+    console.log('视频向左移动操作')
+  },
+  right: () => {
+    console.log('视频向右移动操作')
+  },
+  zoomin: () => {
+    console.log('视频放大操作')
+  },
+  zoomout: () => {
+    console.log('视频缩小操作')
+  },
+  stop: () => {
+    console.log('视频停止操作')
+  },
+  speed: () => {
+    console.log('设置视频移动速度')
+  },
+  speak: () => {
+    console.log('视频开始说话')
+  },
+  scan: () => {
+    console.log('视频扫描')
+  },
+  cruise: () => {
+    console.log('视频巡航')
+  },
+  call: () => {
+    console.log('视频调用')
+  },
 }
 
 onMounted(() => {
-  // 示例：可以在这里添加一些初始化逻辑
+  // setTimeout(() => {
+  //   // ！！！暴露方法
+  //   // nsVideoRef.value.[setVideoUrl / removeVideo / fouceIndex / videoInfos / treeRef]
+  //   // 设置视频
+  //   videoData.videoInfos = [
+  //   {
+  //     index: 1,
+  //     url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000004.live.flv',
+  //     info: {
+  //       videoModel: 'easyplayer',
+  //       id: 'xxx',
+  //       label: '视频A--3',
+  //       url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000004.live.flv',
+  //       deviceId: 'c1',
+  //       channelId: 'c11',
+  //     },
+  //   },
+  // ]
+  // // }, 3000)
+  // setTimeout(() => {
+  //   // 关闭视频方法1：
+  //   nsVideoRef.value.removeVideo(7, true)
+  //   // 关闭视频方法2：
+  //   // nsVideoRef.value.setVideoUrl('', false, 7)
+  // }, 5000)
+  // 播放视频
+  // nextTick(()=>{
+  //   nsVideoRef.value.setVideoUrl('ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000010.live.flv', false, 1, {
+  //     videoModel: 'easyplayer',
+  //     /* videoModel: 'hk',
+  //     hkPath: '/xxxx', */
+  //   })
+  // })
 })
-
 function changeSplitHandler(num: number) {
   console.log('分屏模式：如1,2,3代表单屏，四屏，九屏', num)
 }
 </script>
-
 <template>
   <div class="video-demo">
     <h1 class="title" style="color: #fff" v-sline>视频组件(国标28181 + 海康威视)</h1>
-
-    <!-- 画布控制面板 -->
-    <div class="canvas-controls" v-if="isDrawing || isComplete">
-      <div class="canvas-status">
-        <span>绘图状态: {{ isDrawing ? '绘制中' : isComplete ? '已完成' : '未开始' }}</span>
-        <span>点数: {{ points.length }}</span>
-        <span v-if="areaCoordinates">区域: {{ areaCoordinates.width }} × {{ areaCoordinates.height }}</span>
-      </div>
-      <div class="canvas-buttons">
-        <button @click="clearCanvas" class="btn-clear">清除画布</button>
-        <button @click="testDrawFromCoordinates" class="btn-test">测试回显</button>
-        <button @click="showDrawInfo" class="btn-info">显示坐标</button>
-      </div>
-    </div>
-
     <NsVideo class="nsvideo" ref="nsVideoRef" v-bind="videoData" v-on="videoEvent" @changeSplit='changeSplitHandler'>
-      <template #video-player-cover>
-        <div class="video-player-cover" ref="videoPlayerCoverRef">
-          <div class="video-draw" ref="videoDrawRef">
-            <canvas ref="canvasRef" width="100%" height="100%" class="video-canvas"></canvas>
-          </div>
-        </div>
-      </template>
+      <!-- 自定义插槽
+      <template #video-tree><span>左侧树-自定义插槽</span></template>
+      <template #video-player-head><span>播放区域头部-自定义插槽</span></template>
+      <template #video-player-view><span>播放区域主体-自定义插槽</span></template>
+      <template #video-player-foot><span>播放区域底部控制按钮-自定义插槽</span></template>
+      <template #video-player-cover><span>播放器canvas画布区域（除head+foot+tree区域）</span></template>
+      -->
     </NsVideo>
   </div>
 </template>
-
 <style scoped lang="scss">
 .video-demo {
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: #0f2a3b;
-
   .title {
     margin-bottom: 10px;
   }
-
-  // 画布控制面板样式
-  .canvas-controls {
-    background: rgba(255, 255, 255, 0.1);
-    padding: 10px;
-    border-radius: 4px;
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .canvas-status {
-      display: flex;
-      gap: 15px;
-      color: #fff;
-      font-size: 14px;
-    }
-
-    .canvas-buttons {
-      display: flex;
-      gap: 10px;
-
-      button {
-        padding: 6px 12px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 12px;
-        transition: background-color 0.3s;
-
-        &.btn-clear {
-          background: #ff6b6b;
-          color: white;
-
-          &:hover {
-            background: #ff5252;
-          }
-        }
-
-        &.btn-test {
-          background: #4ecdc4;
-          color: white;
-
-          &:hover {
-            background: #26a69a;
-          }
-        }
-
-        &.btn-info {
-          background: #45b7d1;
-          color: white;
-
-          &:hover {
-            background: #3498db;
-          }
-        }
-      }
-    }
-  }
-
-  .video-player-cover {
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .video-draw {
-      pointer-events: auto;
-      width: v-bind(drawW);
-      height: v-bind(drawH);
-
-      .video-canvas {
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 255, 234, 0.1);
-        cursor: crosshair;
-      }
-    }
-  }
 }
 </style>