引入插件script src./jquery-1.7.1.min.js/script script idvideonode src./webVideoCtrl.js/script script src./jsVideoPlugin-1.0.0.min.js/script代码实现template div classmonitoring div classworktop div classtitle控制台/div el-collapse el-collapse-item title画面分割 name1 el-select v-modelwindowType placeholder请选择 stylewidth: 100%; changechangeWindowType el-option label1×1 :value1/ el-option label2×2 :value2/ el-option label3×3 :value3/ el-option label4×4 :value4/ /el-select /el-collapse-item el-collapse-item title通道列表 name2 div classtreeOption el-tree :dataChannelsList node-keyid default-expand-all :expand-on-click-nodefalse span classcustom-tree-node slot-scope{ node, data } span{{ data.name }}/span span el-button typetext sizemini click() clickNode(data) 预览 /el-button /span /span /el-tree /div /el-collapse-item /el-collapse /div div iddivPlugin classplugin / /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 styledisplay: flex;align-items: center;程序初始化中请稍等i classel-icon-loading stylemargin-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 relstylesheet/scss langscss 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