实习07

项目：哈勃平台（https://test-view.eaydu.com/#/layout/liveQuality）

负责：AI 直播质检/质检分析（主播相关）

https://yach-doc-shimo.zhiyinlou.com/docs/XKq4MmMMKPiZO5kN/ <AI 质检 2 期 v1.1 prd>

问题/难点：

1、vue3-video-play 插件的使用

2、用户管理中，权限分配改为树形结构（TreeSelect 的使用）

实现：

问题（1）

效果图

npm i vue3-video-play --save

;<videoPlay v-bind="options" />

import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'

const options = reactive({
  width: '1000px', //播放器高度
  height: '650px', //播放器高度
  margin: '0 auto',
  color: '#409eff', //主题色
  title: '', //视频名称
  src: playAddr.value, //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  currentTime: parseInt(start_time.value / 1000),
  // type: 'm3u8'
})

相关链接 https://blog.csdn.net/xdlumia/article/details/119865000

问题（2）

效果图

相关代码

<a-tree-select
	v-model:value="formState.menuData"
  :fieldNames="{ children: 'child', label: 'name', value: 'id' }"
  :tree-data="formState.authOptions"
  tree-checkable
  allow-clear
  :show-checked-strategy="SHOW_ALL"
	placeholder="请选择用户权限"
/>

// fieldNames 替换 treeNode 中 label,value,key,children 字段为 treeData 中对应的字段
// showCheckedStrategy 定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点.


https://www.antdv.com/components/tree-select-cn