引入插件：
<script src="./jquery-1.7.1.min.js"></script> <script id="videonode" src="./webVideoCtrl.js"></script> <script src="./jsVideoPlugin-1.0.0.min.js"></script>代码实现：
<template> <div class="monitoring"> <div class="worktop"> <div class="title">控制台</div> <el-collapse> <el-collapse-item title="画面分割" name="1"> <el-select v-model="windowType" placeholder="请选择" style="width: 100%;" @change="changeWindowType"> <el-option label="1×1" :value="1"/> <el-option label="2×2" :value="2"/> <el-option label="3×3" :value="3"/> <el-option label="4×4" :value="4"/> </el-select> </el-collapse-item> <el-collapse-item title="通道列表" name="2"> <div class="treeOption"> <el-tree :data="ChannelsList" node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ data.name }}</span> <span> <el-button type="text" size="mini" @click="() => clickNode(data)"> 预览 </el-button> </span> </span> </el-tree> </div> </el-collapse-item> </el-collapse> </div> <div id="divPlugin" class="plugin" /> </div> </template> <script> import to from 'await-to-js' import { getBasicDataPages } from '@/api/system/setting/basic-data' export default { data() { return { loading: false, ChannelsList: [], selectWindow: 0, // 当前选中的窗口 windowType: 1, // 画面分割 baseData: { szIP: '', // IP地址 szPort: '80', // HTTP端口号 sziPrototocol: 1, szUsername: '', // 用户名 szPassword: '' // 密码 } } }, async created() { // 获取基础数据 await this.getData() // 初始化插件 await this.init() }, methods: { async getData() { this.loading = true const [err, res] = await to(getBasicDataPages()) if (res && res.state.toLowerCase() === 'success') { this.loading = false res.data.data.forEach(element => { if (element.paramcode === '海康录像机密码') { this.baseData.szPassword = element.paramvalue } if (element.paramcode === '海康录像机登录账号') { this.baseData.szUsername = element.paramvalue } if (element.paramcode === '海康录像机ip') { this.baseData.szIP = element.paramvalue } }) } }, init() { this.$message({ type: 'warning', duration: 0, dangerouslyUseHTMLString: true, message: '<strong style="display: flex;align-items: center;">程序初始化中，请稍等<i class="el-icon-loading" style="margin-left: 10px;font-size: 20px;"></i></strong>' }) const that = this WebVideoCtrl.I_InitPlugin({ iWndowType: that.windowType, bWndFull: true, cbSelWnd: function (xmlDoc) { that.selectWindow = parseInt($(xmlDoc).find('SelectWnd').eq(0).text(), 10) }, cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(() => { WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => { if (bFlag) { this.$message.closeAll() this.$message({ duration: 0, message: '检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级。' }) } else { // 登录设备 that.login() } }) }, () => { console.log('插件初始化失败') alert('插件初始化失败，请确认是否已安装插件。如未安装，双击开发包目录里的HCWebSDKPlugin.exe进行安装。') // this.$message.closeAll() // this.$message({ // duration: 0, // message: '插件初始化失败，请确认是否已安装插件。如未安装，双击开发包目录里的HCWebSDKPlugin.exe进行安装。', // type: 'error' // }) }) } }) }, changeWindowType() { // 停止播放 WebVideoCtrl.I_StopAllPlay() // 登录设备 WebVideoCtrl.I_Logout(this.baseData.szIP + '_' + this.baseData.szPort) // 销毁插件 WebVideoCtrl.I_DestroyPlugin() setTimeout(() => { console.log(this.windowType) this.init() }, 1000) }, login() { const that = this WebVideoCtrl.I_Login(that.baseData.szIP, that.baseData.sziPrototocol, that.baseData.szPort, that.baseData.szUsername, that.baseData.szPassword, { success: function () { console.log('登陆成功！') // 获取通道列表 that.getChannel() }, error: function () { this.$message.closeAll() this.$message({ duration: 0, message: '登陆失败,请检查配置信息或刷新页面重试！', type: 'error' }) } }) }, getChannel() { const that = this that.ChannelsList = [] WebVideoCtrl.I_GetDigitalChannelInfo(this.baseData.szIP + '_' + this.baseData.szPort, { async: false, success: (xmlDoc) => { var oChannels = $(xmlDoc).find('InputProxyChannelStatus') $.each(oChannels, function (i) { var id = $(this).find('id').eq(0).text() var name = $(this).find('name').eq(0).text() var online = $(this).find('online').eq(0).text() if (online === 'true') { that.ChannelsList.push({ id, name, online }) } }) this.$message.closeAll() this.$message({ message: '初始化完成，您可以开始操作', type: 'success' }) console.log(that.ChannelsList) }, error: (err) => { this.$message.closeAll() this.$message({ duration: 0, message: '获取通道失败,请检查配置信息或刷新页面重试！', type: 'error' }) } }) }, async clickNode(data) { // 停止播放 await WebVideoCtrl.I_Stop({ iWndIndex: this.selectWindow }) await this.preview(this.selectWindow, data.id) console.log('当前选中' + this.selectWindow + '窗口，在此预览' + data.id + '通道画面') }, preview(selectWindow, pass) { WebVideoCtrl.I_StartRealPlay(this.baseData.szIP + '_' + this.baseData.szPort, { iWndIndex: selectWindow, iChannelID: pass }) } }, beforeDestroy() { // 停止播放 WebVideoCtrl.I_StopAllPlay() // 登录设备 WebVideoCtrl.I_Logout(this.baseData.szIP + '_' + this.baseData.szPort) // 销毁插件 WebVideoCtrl.I_DestroyPlugin() this.$message.closeAll() }, destroy() { const that = this setTimeout(() => { that.breakdom() }, 100) } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .monitoring { width: 100%; display: flex; justify-content: space-between; .worktop { height: 770px; padding: 0 10px; .treeOption { height: 550px; overflow: auto; } .title { text-align: center; font-size: 22px; height: 50px; line-height: 50px; } width: 245px; height: 770px; } #divPlugin { width: calc(100% - 250px); height: 770px; background-color: #000; } } .custom-tree-node { width: 70%; display: flex; justify-content: space-between; align-items: center; } </style>
