<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [tsl-video-control 视频调阅](#tsl-video-control-%E8%A7%86%E9%A2%91%E8%B0%83%E9%98%85)
  - [1.使用示例](#1%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B)
  - [2.列表数据格式解释](#2%E5%88%97%E8%A1%A8%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F%E8%A7%A3%E9%87%8A)
  - [3.配置项解释](#3%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%A7%A3%E9%87%8A)
  - [4.回调函数解释](#4%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E8%A7%A3%E9%87%8A)
  - [5. demo使用完整源码](#5-demo%E4%BD%BF%E7%94%A8%E5%AE%8C%E6%95%B4%E6%BA%90%E7%A0%81)
  - [6.目前未实现的功能](#6%E7%9B%AE%E5%89%8D%E6%9C%AA%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8A%9F%E8%83%BD)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# tsl-video-control 视频调阅

## 1.使用示例

◆ 安装依赖部分

```
"@tslsmart/ui": "0.0.1",
"element-ui": "^2.15.5",
"flv.js": "^1.6.1",
"html2canvas": "^1.3.2",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
```

◆ main.js部分

```
import tslsmart from "@tslsmart/ui";
Vue.use(tslsmart);
```

◆ html部分

```
<main>
  <tsl-video-control
    ref="ref_control"
    :searchValueList="searchValueList"
    :videoResourcesTree="videoResourcesTree"
    :videoGroupList="videoGroupList"
    :config="config"
    :currentPlayList="videoList" 
    @clickItem="getSrc"
    @save="saveFn"
    @search="searchFn"
    @playback="playbackFn"
    @treeLazy="onLoadData"
  />
</main>

```

◆ css部分

```

<style  scoped>
main {
  width: 1920px;
  height: 1006px;
  padding: 20px 20px 30px;
}
</style>
```

◆ js部分

```

data() {
  return {
    // ------视频调阅------------开始
    config: {
      isShowGroup: true, // 是否显示分组预案【默认是】
      isShowQuality: false, // 是否显示质量调节【默认否】
      isShowPTZ: false, // 是否显示PTZ【默认否】
      defaultExpandAllGroup: false, // 是否打开全部分组资源【默认否】
      defaultExpandAll: true, // 是否打开全部树资源【默认是】
      maxGridNumber: 6, // 最大是6宫格还是9宫格【默认6】
      isShowTreeGroup: false, // 是否显示树资源处的“上一组”和“下一组”功能【默认否】
    },
    searchValueList:[], // 搜索出来的树资源
    videoResourcesTree: [], // 树资源
    videoGroupList: [], // 分组预案资源
    videoList: [], //播放列表地址
    // ------视频调阅------------结束
  }
},
methods: {
  // 单击树资源单项后的回调事件
  getSrc(value) {
    console.log(value)
    // todo 获取视频地址
    let url = this.mainSrc

    // 获取完之后将地址放入对应位置
    let ref = this.$refs.ref_control
    let index = ref.currentPlayIndex
    let _length = ref.gridVideoList.length
    this.videoList.length = _length
    if (this.videoList.includes(url)) {
      // this.videoList[index] = this.otherSrc
      return this.$message.error('该视频正在播放列表，请勿重复点击')
    } else {
      this.videoList[index] = url
    }
    this.$set(this.videoList, index, this.videoList[index])
    console.log(index, _length, this.videoList)
  },
  // 保存预案
  saveFn(value) {
    console.log(value)
  },
  // 搜索树资源回调
  searchFn(value) {
    console.log(value)
    this.searchValueList = [
      {
        id: '320507001014010000258',
        label: '329.21栋1单元负一层至一层楼梯',
      },
      {
        id: '320507001014010000264',
        label: '335.21栋2单元负一层至一层楼梯',
      },
    ]
  },
  // 回放视频的回调事件 - 同【@clickItem】
  // form 为 开始时间和结束时间的时间戳，val为树资源的单项对象
  playbackFn(form, val) {
    console.log(form, val)
  },
  // 懒加载树资源
  // 例子中的if条件中的node.data.label == '花南家园'可替代成如果请求到数据的情况
  onLoadData(node, resolve) {
    console.log(node, '=========')
    if (node.data.label == '花南家园') {
      node.data.children = [
        {
          id: '3205070010140113270002',
          label: '车辆抓拍南门出口',
          isLeaf: true,
        },
        {
          id: '320507001014010000168',
          label: '239.7栋负一层至一层楼梯过道',
          isLeaf: true,
        },
      ]
      resolve(node.data.children)
    } else {
      resolve([])
    }
  },
}
```

## 2.列表数据格式解释

◆ 搜索列表【`searchValueList`】、树资源列表【`videoResourcesTree`】、分组资源列表【`videoGroupList`】 的数据格式

- `label`字段：名称
- `children`字段：子元素
- `id`字段：唯一标识
- `其它`：都可传，传了之后会在单项点击事件里面返回

◆ 例：

```
videoResourcesTree: [
  {
    id: "320507001",
    label: "元和街道",
    children: [
      {
        id: "320507000000",
        label: "御窑社区居委会",
        children: [
          {
            id: "1000111385",
            label: "花南家园",
            children: [
              {
                id: "320507001014010000172",
                label: "243.8栋单元门口"
              }
            ]
          }
        ]
      }
    ]
  }
]
```

## 3.配置项解释

```
config: {
  isShowGroup: true, // 是否显示分组预案【默认是】
  isShowQuality: false, // 是否显示质量调节【默认否】
  isShowPTZ: false, // 是否显示PTZ【默认否】
  defaultExpandAllGroup: false, // 是否打开全部分组资源【默认否】
  defaultExpandAll: true, // 是否打开全部树资源【默认是】
  maxGridNumber: 6, // 最大是6宫格还是9宫格【默认6】
  isShowTreeGroup: false, // 是否显示树资源处的“上一组”和“下一组”功能【默认否】
}
```

## 4.回调函数解释

```
@clickItem="getSrc"
@save="saveFn"
@search="searchFn"
@playback="playbackFn"
@treeLazy="onLoadData"

...

// 单击树资源单项后的回调事件
getSrc(value) {
},
// 保存预案
saveFn(value) {
  console.log(value)
},
// 搜索树资源回调
searchFn(value) {
  console.log(value)
  this.searchValueList = []
},
// 回放视频的回调事件 - 同【@clickItem】
// form 为 开始时间和结束时间的时间戳，val为树资源的单项对象
playbackFn(form, val) {
  console.log(form, val)
},
// 懒加载树资源
// 例子中的if条件中的node.data.label == '花南家园'可替代成如果请求到数据的情况
onLoadData(node, resolve) {
  console.log(node, '=========')
  if (node.data.label == '花南家园') {
    node.data.children = [
      {
        id: '3205070010140113270002',
        label: '车辆抓拍南门出口',
        isLeaf: true,
      },
    ]
    resolve(node.data.children)
  } else {
    resolve([])
  }
},
```

## 5. demo使用完整源码

可参考同文件夹下的`HelloWorld.vue`文件

```
<template>
  <div class="page">
    <main>
      <tsl-video-control 
        ref="ref_control" 
        :videoResourcesTree="videoResourcesTree" 
        :searchValueList="searchValueList"
        :videoGroupList="videoGroupList" 
        :config="config" 
        :currentPlayList="videoList" 
        @clickItem="getSrc"
        @save="saveFn" 
        @search="searchFn" 
        @playback="playbackFn" 
        @treeLazy="onLoadData" />
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ------视频调阅------------开始
      config: {
        isShowGroup: true, // 是否显示分组预案
        isShowQuality: false, // 是否显示质量调节
        isShowPTZ: false, // 是否显示PTZ
        defaultExpandAllGroup: false, // 默认打开全部分组资源
        defaultExpandAll: false, // 默认打开全部树资源
        maxGridNumber: 9, // 最大是6宫格还是9宫格
        isShowTreeGroup: true, // 是否显示树资源处的“上一组”和“下一组”功能
        isShowBackTime: true, // 是否显示回放时间组
      },
      // 单个视频的使用
      mainSrc:
        'http://192.168.66.164:5003/stream/56db1aab476042dd9d434b65a5c443ae.flv',
      otherSrc: require('./mov_bbb.mp4'),
      // 复合使用
      searchValueList: [],
      videoResourcesTree: [
        {
          id: '320507001',
          label: '元和街道',
          children: [
            {
              id: '320507000000',
              label: '御窑社区居委会',
              children: [
                {
                  id: '1000111385',
                  label: '花南家园',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
      ],
      videoGroupList: [
        {
          children: [
            {
              thingID: 'b6cdf033755e11e8a0ad7cd30adae832',
              label: '小区西门（出）',
              mainSrc:
                'http://192.168.66.164:5003/stream/56db1aab476042dd9d434b65a5c443ae.flv',
            },
            {
              thingID: 'b6cdf816755e11e8a0ad7cd30adae832',
              label: '小区西门（进）',
              mainSrc: require('./mov_bbb.mp4'),
            },
          ],
          label: '11111',
        },
        {
          children: [
            {
              thingID: 'b6cdf033755e11e8a0ad7cd30adae832',
              label: '小区西门（出）',
              mainSrc: require('./mov_bbb.mp4'),
            },
            {
              thingID: 'b6cdf816755e11e8a0ad7cd30adae832',
              label: '小区西门（进）',
              mainSrc: require('./mov_bbb.mp4'),
            },
          ],
          label: '西门1',
        },
      ],
      videoList: [],
      // ------视频调阅------------结束
    }
  },
  methods: {
    // 懒加载树资源
    onLoadData(node, resolve) {
      console.log(node, '=========')
      if (node.data.label == '花南家园') {
        node.data.children = [
          {
            id: '3205070010140113270002',
            label: '车辆抓拍南门出口',
            isLeaf: true,
          },
          {
            id: '320507001014010000172',
            label: '243.8栋单元门口',
            isLeaf: true,
          },
        ]
        resolve(node.data.children)
      } else {
        resolve([])
      }
    },
    // 单击树资源单项后的回调事件
    getSrc(value) {
      console.log(value)
      // todo 获取视频地址
      let url = this.mainSrc

      // 获取完之后将地址放入对应位置
      let ref = this.$refs.ref_control
      let index = ref.currentPlayIndex
      let _length = ref.gridVideoList.length
      this.videoList.length = _length
      if (this.videoList.includes(url)) {
        // this.videoList[index] = this.otherSrc
        return this.$message.error('该视频正在播放列表，请勿重复点击')
      } else {
        this.videoList[index] = url
      }
      this.$set(this.videoList, index, this.videoList[index])
      console.log(index, _length, this.videoList)
    },
    // 保存预案
    saveFn(value) {
      console.log(value)
    },
    // 搜索树资源回调
    searchFn(value) {
      console.log(value)
      this.searchValueList = [
        {
          id: '320507001014010000258',
          label: '329.21栋1单元负一层至一层楼梯',
        },
        {
          id: '320507001014010000259',
          label: '330.21栋1单元负一层非机动车入口',
        },
        {
          id: '320507001014010000264',
          label: '335.21栋2单元负一层至一层楼梯',
        },
      ]
    },
    // 回放视频的回调事件 - 同【@clickItem】
    playbackFn(form, val) {
      console.log(form, val)
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  width: 1920px;
  height: 100%;
  background-color: #040a27;
  display: grid;
  place-items: end;
  main {
    width: 1920px;
    height: 1006px;
    padding: 20px 20px 30px;
  }
}
</style>
```

## 6.目前未实现的功能

- 截图整个播放组
- 回放按钮组
- “上一组”、“下一组”功能
- PTZ
- 质量调节
- flv监控视频仅支持6路，所以不建议默认添加9宫格
