matrix_components 2.0.317 → 2.0.319

package/dist/ComponentDemo/TestFormConfig.js

@@ -0,0 +1,129 @@
+// 测试表单配置文件 - 用于验证默认值加载功能
+export const formConfig = {
+  // 表单数据初始值
+  formData: {
+    testName: "默认姓名",
+    testEmail: "default@example.com",
+    testAge: 25,
+    testGender: "male",
+    testHobbies: ["reading", "music"],
+    testIsVip: true,
+    testScore: 80,
+    testBirthday: "1998-01-01",
+    testDescription: "这是默认的描述信息",
+  },
+
+  // 表单配置项
+  formItems: [
+    {
+      label: "姓名",
+      prop: "testName",
+      component: "input",
+      span: 12,
+      required: true,
+      placeholder: "请输入姓名",
+      props: {
+        clearable: true,
+      },
+    },
+    {
+      label: "邮箱",
+      prop: "testEmail",
+      component: "input",
+      span: 12,
+      required: true,
+      props: {
+        clearable: true,
+      },
+      rules: [
+        { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
+      ],
+    },
+    {
+      label: "年龄",
+      prop: "testAge",
+      component: "number",
+      span: 12,
+      props: {
+        min: 1,
+        max: 120,
+        controlsPosition: "right",
+      },
+    },
+    {
+      label: "性别",
+      prop: "testGender",
+      component: "radio-group",
+      span: 12,
+      options: [
+        { label: "男", value: "male" },
+        { label: "女", value: "female" },
+      ],
+    },
+    {
+      label: "爱好",
+      prop: "testHobbies",
+      component: "checkbox-group",
+      span: 24,
+      options: [
+        { label: "读书", value: "reading" },
+        { label: "运动", value: "sports" },
+        { label: "音乐", value: "music" },
+        { label: "旅行", value: "travel" },
+      ],
+    },
+    {
+      label: "VIP用户",
+      prop: "testIsVip",
+      component: "switch",
+      span: 12,
+    },
+    {
+      label: "评分",
+      prop: "testScore",
+      component: "slider",
+      span: 12,
+      props: {
+        min: 0,
+        max: 100,
+        showStops: true,
+        showTooltip: false,
+      },
+    },
+    {
+      label: "生日",
+      prop: "testBirthday",
+      component: "date-picker",
+      span: 12,
+      props: {
+        type: "date",
+        format: "YYYY-MM-DD",
+        valueFormat: "YYYY-MM-DD",
+      },
+    },
+    {
+      label: "描述",
+      prop: "testDescription",
+      component: "textarea",
+      span: 24,
+      props: {
+        rows: 4,
+        maxlength: 200,
+        showWordLimit: true,
+      },
+    },
+  ],
+
+  // 表单验证规则
+  formRules: {
+    testName: [
+      { required: true, message: "请输入姓名"},
+    ],
+    testEmail: [{ required: true, message: "请输入邮箱地址"}],
+  },
+
+  // 下拉框选项数据源
+  optionsData: {},
+};
+
+export default formConfig;

package/dist/ComponentDemo/VideoDemo copy 2.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { VideoCanvasDrawer } from './videoCanvasDrawer.js'
+
+const nsVideoRef = ref()
+
+// 视频信息
+const videoData = reactive({
+  // videoModel: 'hk',
+  // hkPath: '/martrix/cdn/h5player',
+  // 显示视频关闭按钮
+  showClose: false,
+  // 显示树
+  showTree: true,
+  // 树数据
+  treeData: [
+    {
+      id: '1',
+      label: '分组1',
+      children: [
+        {
+          id: '11',
+          label: '分组1-1',
+          children: [
+            {
+              videoModel: 'easyplayer',
+              id: '111',
+              label: '视频A--1视频A--1视频A--1',
+              url: 'http://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000001/hls.m3u8',
+              deviceId: 'a1',
+              channelId: 'a11',
+              icontype: 'on',
+            },
+            {
+              id: 'D',
+              label: '视频A--2',
+              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000013.live.flv',
+              deviceId: 'b1',
+              channelId: 'b11',
+              icontype: 'off',
+            },
+          ],
+        },
+        {
+          id: 'b',
+          label: '分组b',
+          children: [
+            {
+              id: 'b1',
+              label: '视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1视频A--1',
+              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000003.live.flv',
+              deviceId: 'a1',
+              channelId: 'a11',
+              icontype: 'on',
+            },
+            {
+              id: 'b2',
+              label: '视频A--2',
+              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000015.live.flv',
+              deviceId: 'b1',
+              channelId: 'b11',
+              icontype: 'off',
+            },
+            {
+              id: 'b3',
+              label: '视频A--3',
+              url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
+              deviceId: 'c1',
+              channelId: 'c11',
+            },
+          ],
+        },
+      ],
+
+    },
+    {
+      id: 'xxx2',
+      label: '视频Zxxxx2',
+      url: 'ws://199.10.9.192:30200/rtp/34020000001110000001_34020000001320000009.live.flv',
+      deviceId: '34020000001110000001',
+      channelId: '34020000001320000003',
+    },
+  ],
+  // 树节点对应的key(！！！用于改变选中后的颜色)
+  treeNodeKey: 'id',
+  // 树节点展开的key
+  treeExpandedKeys: ['11'],
+  // 树节点属性 (videoUrlKey值要和treeData中的播放地址key一致, 默认为url)
+  treeOptions: {
+    icontype: 'icontype',
+    background: 'background',
+    videoUrlKey: 'url',
+    children: 'children',
+    label: 'label',
+  },
+  // 获取、设置打开的播放视频信息
+  videoInfos: [
+    {
+      index: 0,
+      url: 'https://sf3-ttcdn-tos.pstatp.com/obj/developer/bytdance.flv',
+      info: {
+        videoModel: 'easyplayer',
+        id: 'xxx2',
+        url: 'https://sf3-ttcdn-tos.pstatp.com/obj/developer/bytdance.flv',
+        deviceId: 'c1',
+        channelId: 'c11',
+      },
+    },
+    // 其他注释掉的代码保持不变
+  ],
+  // ！！！ 单点播放
+  videoSingleUrl: false,
+  // ！！！ 已经在播放的是否关闭后再点击打开(需要单点播 videoSingleUrl:true)
+  videoSingleClose: false,
+  // 回调函数后是否继续执行默认播放操作
+  callbackContinueExecute: true,
+  // 播放模式: 1: 单击,2: 双击
+  videoPlayModel: 1,
+  // 分屏模式: 1: 单屏, 2: 四屏, 3: 九屏
+  videoSplitType: 1,
+  // 显示分屏按钮
+  showVideoSplit: true,
+  // 分屏使用图标
+  // videoSplitUseIcon: true,
+  // 显示方向控制按钮
+  showVideoCtrls: false,
+  // 禁止控制按钮默认请求行为(默认false，true则不使用组件的发送请求仅调用自定义回调函数)
+  stopVideoCtrlMethods: true,
+  // 单个视频错误最大次数
+  videoErrorMaxCount: 3,
+  // easyplayer配置 (默认一般不需要配置, 加载不出来的时候修改)
+  videoConfig: {
+    MSE: true,
+    WCS: true,
+    WASM:true,
+    WASMSIMD: true,
+    isLive: true,
+    hasAudio: false,
+    stretch: false
+  },
+})
+
+// 绘图相关引用
+const drawW = ref('0')
+const drawH = ref('0')
+const videoPlayerCoverRef = ref()
+const videoDrawRef = ref()
+const videoCanvasRef = ref()
+
+// 创建绘图工具实例
+const canvasDrawer = new VideoCanvasDrawer()
+
+// 视频操作事件
+const videoEvent = {
+  videoOriginalInfo: (info: any) => {
+    console.log('===============>视频原始信息:', info)
+    const coverEle = videoPlayerCoverRef.value;
+    const currentVideoInfo = info?.[0]
+    if(coverEle && currentVideoInfo?.width && currentVideoInfo?.height){
+      // 使用绘图工具计算尺寸
+      const size = canvasDrawer.calculateDrawSize(
+        coverEle.clientWidth,
+        coverEle.clientHeight,
+        currentVideoInfo.width,
+        currentVideoInfo.height
+      );
+      drawW.value = size.width;
+      drawH.value = size.height;
+
+      setTimeout(() => {
+        const videoDrawEle = videoDrawRef.value;
+        if (videoDrawEle && videoCanvasRef.value) {
+          // 初始化画布
+          canvasDrawer.initCanvas(videoCanvasRef.value, videoDrawEle);
+          // 设置画布可点击
+          const coverEle = videoPlayerCoverRef.value;
+          if (coverEle) {
+            coverEle.style.pointerEvents = 'auto';
+          }
+        }
+      }, 1000)
+    }
+  },
+}
+
+onMounted(() => {
+  // 添加键盘事件监听，使用绘图工具的方法
+  document.addEventListener('keydown', canvasDrawer.handleKeyDown.bind(canvasDrawer));
+
+  // 在组件卸载时移除事件监听
+  const cleanup = () => {
+    document.removeEventListener('keydown', canvasDrawer.handleKeyDown.bind(canvasDrawer));
+  };
+
+  // 组件卸载时清理
+  const vm = getCurrentInstance();
+  if (vm && vm.proxy) {
+    (vm.proxy as any).__unmount = cleanup;
+  }
+
+  // 或者使用生命周期钩子
+  import('vue').then(({ onBeforeUnmount }) => {
+    onBeforeUnmount(cleanup);
+  });
+})
+
+function changeSplitHandler(num: number) {
+  console.log('分屏模式：如1,2,3代表单屏，四屏，九屏', num)
+}
+
+// 为了确保TypeScript正确识别getCurrentInstance
+import { getCurrentInstance } from 'vue';
+</script>
+<template>
+  <div class="video-demo">
+    <h1 class="title" style="color: #fff" v-sline>视频组件(国标28181 + 海康威视)</h1>
+    <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="videoCanvasRef"
+              width="100%"
+              height="100%"
+              class="video-canvas"
+              @click="canvasDrawer.handleCanvasClick"
+              @dblclick="canvasDrawer.handleCanvasDoubleClick"
+            ></canvas>
+          </div>
+        </div>
+      </template>
+    </NsVideo>
+  </div>
+</template>
+<style scoped lang="scss">
+.video-demo {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #0f2a3b;
+  .title {
+    margin-bottom: 10px;
+  }
+  .video-player-cover {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // background-color: rgba(255, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .video-draw {
+      width: v-bind(drawW);
+      height: v-bind(drawH);
+      // background-color: rgba(238, 255, 0, 0.1);
+      .video-canvas {
+          width: 100%;
+          height: 100%;
+          background-color: transparent;
+          cursor: crosshair;
+        }
+    }
+  }
+}
+</style>