BK-UI

安装依赖

npm install @ibrucekong/bk-ui --save

使用

• 完整导入

// 在main.js中全局引用
import BKUI from '@ibrucekong/bk-ui'
Vue.use(BKUI)

• 按需导入

// 在单个页面中引用
import { BKVideo } from '@ibrucekong/bk-ui'

组件列表

| 组件 | 组件名称 | | ------------ | ---------------------------------------------- | | 视频组件 | bk-video | | 云渲染组件1 | bk-cloud-render | | 云渲染组件2 | bk-kapi |

视频组件使用

代码

<!--以视频组件 为例-->
<template>
  <div>
    <div class="TestVideo">
      <!--
      mock                      默认false   是否使用模拟数据
      video-show-monitor-data   默认false   是否在视频上显示监测项，如果video-data中没绑定monitor数据自然也不会显示
      video-custom              默认false   是否显示播放自定义的源
      video-data                            视频结构数据
      video-real-url                        获取真实视频流的接口地址
      video-style                           根据不同的系统设置不同的主题
      video-code-list                       左侧的视频分组，不同的系统主题，分组和图标不一样
      show-left                 默认true    是否显示左侧列表
      show-toolbar              默认true    是否显示底部工具条
      -->
      <bk-video
        :show-left="true"
        :show-toolbar="true"
        :video-type="videoType"
        :video-custom="true"
        :video-data="videoData"
        :video-style="videoStyle"
        :video-code-list="videoCodeList">
      </bk-video>
    </div>
  </div>
</template>
<script>
import mockData from 'example/bk-video/js/config'

export default {
  name: "TestVideo",
  data() {
    return {
      videoType: 'tv',
      videoStyle: {},
      videoData: [],
      videoCodeList: []
    };
  },
  mounted() {
    // 引用图片
    this.videoCodeList = mockData.groupCodeList.map(item => {
      // 如果没配置图片地址
      if (!item.imgUrl) {
        throw "请配置视频分组的图片地址"
      }
      // 如果引用了就不再引用
      if (item.imgUrl.includes("data:image/png")) {
        return item;
      }
      // 图片资源首次引用 - 路径包括 img/
      if (item.imgUrl.includes("img/")) {
        // 在node环境下使用
        // item.imgUrl = require("./example/" + item.imgUrl)
        // 在一般html中使用真实引用路径
        item.imgUrl = "./img/tv/" + item.imgName + ".png"
        return item;
      }
      throw "请检查代码和图片配置地址是否匹配"
    })

    // 视频数据赋值
    this.videoData = mockData.videoData

    // 样式赋值
    this.videoStyle = {
      list: {
        showHeader: true,
        header: "rgba(64, 158, 255, 1)", // 左侧的标题颜色
        shadow: "0.25rem 0.25rem 0.25rem 0 rgba(0, 0, 70, 0.2)" // 左侧的阴影
      },
      videoContent: {
        backgroundColor: "black", // 右侧的背景色
        toolbarColor: "#3D3D3D", // 视频下面的工具条颜色
        videoSelectedColor: "#6DC542", // 视频选中的边框颜色
        videoSlot: "#262626" // 视频占位符 - 可以传图片，也可以传颜色
      }
    }
  },
  methods: {}
}
</script>

效果图

云渲染组件1使用

代码

<template>
  <bk-cloud-render
    :token='token'
    :options='options'
    :center='center'
    :weather='weather'
    :marker-list='markerList'
    @ready='ready'
    @event-callback='eventCallback'
  >
  </bk-cloud-render>
</template>
<script>

export default {
  name: "cloudRender",
  data() {
    return {
      token: '',
      options: {},
      center: null,
      weather: null,
      eventEmitter: null,
      markerList: [], // 标注点
      eventListenerList: [], // 事件监听
    }
  },
  mounted() {
    this.token = '[Your Auth Token]'
    this.options = {
      server: 'http://StreamIP:Port',
      netStats: true,
      fullscreen: true
    }
  },
  methods: {
    ready(cloudRenderComponents) {
      console.log('云渲染组件传递过来的API实例：', cloudRenderComponents)
      this.eventEmitter = cloudRenderComponents.eventEmitter
      
      // 设置定位
      this.center = {
        duration: 3, // 定位时间设置为3秒
        x: 117.12049865722656,
        y: 36.65819549560547,
        z: 159.05999755859375,
        rotation: {
          roll: -0.000022491476556751877,
          pitch: -18.800085067749023,
          yaw: -61.80033493041992
        }
      }

      // 添加标注点
      this.addMarker()

      // 5秒后清空标注
      setTimeout(() => {
        this.eventEmitter.emit("markerClear")
        // 设置天气
        this.changeWeather()
        // 5秒后标注点，新增监听
        setTimeout(() => {
          this.addMarker()
          this.changeEventListener()
        }, 5 * 1000)
      }, 5 * 1000)
    },
    addMarker() {
      this.markerList = [{
        position: {
          x: 510492.4,
          y: 4056752.75,
          z: 50
        },
        attributes: {
          id: 1,
          name: '测试id=1',
          type: 'trashbin',
          status: '0',
          scale: 0.5,
          isGraphic: false,
          visible: true
        }
      }, {
        position: {
          x: 510492.4,
          y: 4056652.75,
          z: 50
        },
        attributes: {
          id: 2,
          name: '测试id=2',
          type: 'trashbin',
          status: '1',
          scale: 0.5,
          isGraphic: false,
          visible: true
        }
      }]
    },
    changeWeather() {
      this.weather = 'SNOW'
    },
    changeEventListener() {
      this.eventListenerList = ['marker_click']
    },
    eventCallback(callbackOptions) {
      let {event, success, data} = callbackOptions
      data = JSON.stringify(data)
      switch (event) {
        case 'center':
          console.log(`定位${success ? '成功' : '失败'}`)
          break
        case 'markerList':
          console.log(`标注点渲染${success ? '成功' : '失败'}`)
          break
        case 'clear':
          console.log(`清空标注点${success ? '成功' : '失败'}`)
          break
        case 'weather':
          console.log(`天气改变${success ? '成功' : '失败'}`)
          break
        case 'eventListenerList':
          console.log(`事件监听设置${success ? '成功' : '失败'}，事件包括：${data}`)
          break
        // 标注点的点击监听
        case 'marker_click':
          console.log(`事件marker_click监听${success ? '成功' : '失败'}，返回值：${data}`)
          break
      }
    }
  }
}
</script>

组件1依赖于 Inspur

组件2使用方式和组件1一致

但是，组件2依赖于 @ibrucekong/kapi

效果图

注意

example文件夹中的示例页面所引入的hot-reload.js需要服务端支撑，不然无法生效