|
|
@@ -0,0 +1,756 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
|
|
|
+ @close="cancelEventLocationShow()">
|
|
|
+ <!--<div @click="findCameraByEventCoordinate()">视频联动</div>-->
|
|
|
+ <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
|
|
|
+ <!--<div class="i-list-con" style="height: 46vh; overflow-y: scroll;">-->
|
|
|
+ <!--<span v-for="(item,index) in cameraList" :key="index">-->
|
|
|
+ <!--<div class="d-l-con" @click="playhk(item.channelCode)">-->
|
|
|
+ <!--<div class="d-l-l-text">-->
|
|
|
+ <!--<i class="i-small"></i>-->
|
|
|
+ <!--<h4>{{ item.cameraName }}</h4>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</span>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div style="width:70%;height:400px;position:absolute;">-->
|
|
|
+ <!--<!–视频窗口展示---大华–>-->
|
|
|
+ <!--<div id="dom1" class="dom1"></div>-->
|
|
|
+ <!--<!–视频窗口展示---海康–>-->
|
|
|
+ <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
|
|
|
+ <!--</div>-->
|
|
|
+
|
|
|
+ <div id="dom1" class="dom1"></div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+import {getDahuaVideoServer, getTVWallList} from '@/api/dahua/dahua'
|
|
|
+import {tvCameraList} from '@/api/haikang/haikang'
|
|
|
+import {findCameraByEventCoordinate, rotation} from '@/api/monitor'
|
|
|
+import DHWs from '@/dahua/lib/DHWs'
|
|
|
+
|
|
|
+/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+export default {
|
|
|
+ dicts: ['event_source'],
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tvListJson: [
|
|
|
+ {
|
|
|
+ 'switchTab': '1',
|
|
|
+ 'treeLabels': [
|
|
|
+ {
|
|
|
+ 'labelCode': '123456',
|
|
|
+ 'labelName': '视频场景',
|
|
|
+ 'parentLabelCode': null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
|
|
|
+ 'labelName': '标签2',
|
|
|
+ 'parentLabelCode': 123456
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
|
|
|
+ 'labelName': '标签1',
|
|
|
+ 'parentLabelCode': 123456
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ 'labelChannels': [{
|
|
|
+ 'channelDates': [{
|
|
|
+ 'channelCode': '6044981090191552',
|
|
|
+ 'channelName': '复兴大桥中段-交通事故',
|
|
|
+ 'channelSn': null,
|
|
|
+ 'cameraType': 0,
|
|
|
+ 'online': 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
|
|
|
+ 'channelName': '北京7青羊东二路77号2通道1',
|
|
|
+ 'channelSn': null,
|
|
|
+ 'cameraType': 1,
|
|
|
+ 'online': 1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ 'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'channelDates': [{
|
|
|
+ 'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
|
|
|
+ 'channelName': '北京7青羊东二路77号2通道2',
|
|
|
+ 'channelSn': null,
|
|
|
+ 'cameraType': 2,
|
|
|
+ 'online': 0
|
|
|
+ }],
|
|
|
+ 'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'switchTab': '2',
|
|
|
+ 'labelChannels': [{
|
|
|
+ 'channelDates': [{
|
|
|
+ 'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
|
|
|
+ 'channelName': '北京7青羊东二路77号2通道1',
|
|
|
+ 'channelSn': null,
|
|
|
+ 'cameraType': 1,
|
|
|
+ 'online': 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
|
|
|
+ 'channelName': '北京7青羊东二路77号2通道2',
|
|
|
+ 'channelSn': null,
|
|
|
+ 'cameraType': 2,
|
|
|
+ 'online': 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ TVWallVisible: false,
|
|
|
+ activeName: 'tv',
|
|
|
+ channelId: ['ZgVzqsjwA1DTF561VHG69F'],
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ showModal: true,
|
|
|
+ activePanel: 'key1',
|
|
|
+ isLogin: false,
|
|
|
+ loginType: '1',
|
|
|
+ token: '',
|
|
|
+ ctrlType: 'playerWin',
|
|
|
+ https: 1,
|
|
|
+ httpsList: [
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ label: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: 1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ ctrlTypeList: [{
|
|
|
+ value: 'playerWin',
|
|
|
+ label: '播放控件'
|
|
|
+ }, {
|
|
|
+ value: 'realMonitorUI',
|
|
|
+ label: '带设备树实时预览控件'
|
|
|
+ }, {
|
|
|
+ value: 'playbackUI',
|
|
|
+ label: '带设备树视频回放控件'
|
|
|
+ }, {
|
|
|
+ value: 'TVWallUI',
|
|
|
+ label: '视频上墙'
|
|
|
+ }],
|
|
|
+ ctrlList: [
|
|
|
+ {
|
|
|
+ value: 'ctrl1',
|
|
|
+ label: '控件1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'ctrl2',
|
|
|
+ label: '控件2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'ctrl3',
|
|
|
+ label: '控件3'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ splitList: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '1 * 1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ label: '2 * 2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 9,
|
|
|
+ label: '3 * 3'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ displayModeList: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '播放器预览模式'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '播放器回放模式'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ mixedVideoDisplayModeList: [
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: '播放实时视频'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '播放回放视频'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ ctrl: 'ctrl1',
|
|
|
+ splitNum: 1,
|
|
|
+ displayMode: 1,
|
|
|
+ displayTimeRange: [],
|
|
|
+ modalDisplayTimeRange: [],
|
|
|
+ mixedVideoTime: null,
|
|
|
+ recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
|
|
|
+ downloadName: '',
|
|
|
+ downTimeRange: [],
|
|
|
+ downloadFormat: 0,
|
|
|
+ downloadFormatList: [{
|
|
|
+ value: 0,
|
|
|
+ label: 'dav'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ label: 'avi'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: 'mp4'
|
|
|
+ }],
|
|
|
+ downloadSource: 3,
|
|
|
+ downloadSourceList: [
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: '中心录像'
|
|
|
+ }, {
|
|
|
+ value: 2,
|
|
|
+ label: '设备录像'
|
|
|
+ }],
|
|
|
+ showDownloadStreamType: false,
|
|
|
+ downloadStreamType: 1,
|
|
|
+ downloadStreamTypeList: [{
|
|
|
+ value: 1,
|
|
|
+ label: '主码流'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: '辅码流'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: '三码流'
|
|
|
+ }],
|
|
|
+ downloadIsShow: true,
|
|
|
+ downloadIsShowList: [{
|
|
|
+ value: true,
|
|
|
+ label: '是'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: false,
|
|
|
+ label: '否'
|
|
|
+ }],
|
|
|
+ crtPosX: 0,
|
|
|
+ crtPosY: 0,
|
|
|
+ crtWidth: 1148,
|
|
|
+ crtHeight: 650,
|
|
|
+ domId: 'dom1',
|
|
|
+ mixedVideoDisplayMode: 2,
|
|
|
+ isShowTipe: true,
|
|
|
+ autoList: [],
|
|
|
+ stringList: [],
|
|
|
+ data: null,
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ cameraList: [],
|
|
|
+ initCount: 0,
|
|
|
+ pubKey: '',
|
|
|
+ oWebControl: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const DHWsInstance = DHWs.getInstance()
|
|
|
+ this.ws = DHWsInstance
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cancelEventLocationShow() {
|
|
|
+ // this.activeName = 'tv'
|
|
|
+ this.TVWallVisible = false
|
|
|
+ this.destroy()
|
|
|
+
|
|
|
+ if (this.oWebControl != null) {
|
|
|
+ this.oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
|
|
+ this.oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功
|
|
|
+ },
|
|
|
+ function () { // 断开与插件服务连接失败
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showTVWall(data, val) {
|
|
|
+ this.tvListJson = data
|
|
|
+ this.data = val
|
|
|
+ this.autoList = []
|
|
|
+ this.stringList = []
|
|
|
+ for (let i = 1; i < data[0].treeLabels.length; i++) {
|
|
|
+ this.autoList.push({"channelId": data[0].treeLabels[i].labelCode})
|
|
|
+ this.stringList.push(data[0].treeLabels[i].labelCode)
|
|
|
+ }
|
|
|
+ console.log("this.autoList",this.autoList);
|
|
|
+ console.log("this.stringList",this.stringList);
|
|
|
+ // let that=this;
|
|
|
+ /** ----------------------------------大华摄像头预览开始------------------------------------- */
|
|
|
+ this.ws.addEventListener('connectStateChange', data => {
|
|
|
+ if (data) {
|
|
|
+ console.log('连接成功')
|
|
|
+ } else {
|
|
|
+ console.log('连接失败，下载客户端')
|
|
|
+ this.alertReinstall()
|
|
|
+ this.isShowTipe && this.$modal.confirm({
|
|
|
+ title: '下载客户端',
|
|
|
+ content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
|
|
|
+ onOk: () => {
|
|
|
+ //这里写下载方法
|
|
|
+ this.isShowTipe = false
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ this.isShowTipe = false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.preview()
|
|
|
+ /** ----------------------------------大华摄像头预览结束------------------------------------- */
|
|
|
+ /** ----------------------------------海康摄像头预览开始------------------------------------- */
|
|
|
+ // tvCameraList().then(response => {
|
|
|
+ // this.cameraList=response.data
|
|
|
+ // })
|
|
|
+ // that.initPlugin()
|
|
|
+ // setTimeout(function() {
|
|
|
+ // that.playhk();
|
|
|
+ // }, 5000)
|
|
|
+ // /** ----------------------------------海康摄像头预览结束------------------------------------- */
|
|
|
+ this.TVWallVisible = true
|
|
|
+ },
|
|
|
+ /** ----------------------------------大华摄像头预览开始------------------------------------- */
|
|
|
+ alertLogin: function () {
|
|
|
+ this.$modal.msg('登录中....')
|
|
|
+ },
|
|
|
+ alertLoginSuccess: function () {
|
|
|
+ this.$modal.msgSuccess('登录成功！')
|
|
|
+ },
|
|
|
+ alertLoginFailed: function () {
|
|
|
+ this.$modal.msgError('登陆失败！')
|
|
|
+ },
|
|
|
+ alertReinstall: function () {
|
|
|
+ this.$modal.msgWarning('请重新安装客户端')
|
|
|
+ },
|
|
|
+ /** 预览按钮操作 */
|
|
|
+ preview() {
|
|
|
+ getDahuaVideoServer().then(newResponse => {
|
|
|
+ this.ws.detectConnectQt().then(res => {
|
|
|
+ if (res) { // 连接客户端成功
|
|
|
+ this.alertLogin()
|
|
|
+ this.ws.login({
|
|
|
+ loginIp: newResponse.loginIp,
|
|
|
+ loginPort: newResponse.loginPort,
|
|
|
+ userName: newResponse.userName,
|
|
|
+ userPwd: newResponse.userPwd,
|
|
|
+ // loginIp: '192.168.100.100',
|
|
|
+ // loginPort: 8314,
|
|
|
+ // userName: 'system',
|
|
|
+ // userPwd: 'Admin@123',
|
|
|
+ token: '',
|
|
|
+ https: 1
|
|
|
+ })
|
|
|
+ this.ws.on('loginState', (res) => {
|
|
|
+ this.isLogin = res
|
|
|
+ console.log('---res-----', res)
|
|
|
+ if (res) {
|
|
|
+ this.alertLoginSuccess()
|
|
|
+ this.activePanel = 'key2'
|
|
|
+ this.create(this.tvListJson)
|
|
|
+ } else {
|
|
|
+ this.alertLoginFailed()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { // 连接客户端失败
|
|
|
+ this.alertReinstall()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ playRealMonitorVideo() { // 自定义设备树自动播放指定通道编码视频
|
|
|
+ const config = this.ws.config
|
|
|
+ const {loginIp, userCode} = config
|
|
|
+ this.ws.postMessage('playRealMonitorVideo', {
|
|
|
+ loginIp,
|
|
|
+ userCode,
|
|
|
+ params: {
|
|
|
+ ctrlCode: "ctrl1",
|
|
|
+ array: this.autoList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ create(tvListJson) { // 调用创建控件接口
|
|
|
+ let _this = this
|
|
|
+ const params = [
|
|
|
+ {
|
|
|
+ 'ctrlType': 'realMonitorUI',
|
|
|
+ 'ctrlCode': 'ctrl1',
|
|
|
+ 'ctrlProperty': {
|
|
|
+ 'displayMode': 1,
|
|
|
+ 'splitNum': 1,
|
|
|
+ 'channelList': [
|
|
|
+ {
|
|
|
+ 'channelId': ''
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 'visible': true,
|
|
|
+ 'domId': 'dom1'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ this.setPos()
|
|
|
+ this.customizeTree(tvListJson);
|
|
|
+ _this.ws.createCtrl(params);
|
|
|
+ _this.playRealMonitorVideo();
|
|
|
+ if (_this.data != undefined && _this.data != null) {
|
|
|
+ setTimeout( _this.rotation(_this.data.longitude, _this.data.latitude, _this.stringList),5000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rotation(lng,lat,list){
|
|
|
+ rotation(lng,lat,list);
|
|
|
+ },
|
|
|
+ setPos() {
|
|
|
+ let target = document.getElementById(this.domId)
|
|
|
+ console.log(target, 'target')
|
|
|
+ target.style.right = `${this.crtPosX}px`
|
|
|
+ target.style.top = `${this.crtPosY}px`
|
|
|
+ target.style.width = `${this.crtWidth}px`
|
|
|
+ target.style.height = `${this.crtHeight}px`
|
|
|
+ if (document.createEvent) {
|
|
|
+ var event = document.createEvent('HTMLEvents')
|
|
|
+ event.initEvent('resize', true, true)
|
|
|
+ window.dispatchEvent(event)
|
|
|
+ } else if (document.createEventObject) {
|
|
|
+ window.fireEvent('onresize')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroy() { // 调用销毁控件接口
|
|
|
+ if (!this.isLogin) {
|
|
|
+ this.$modal.msgWarning('正在登陆客户端，请稍等......')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ const ctrls = this.ws.ctrls.map(i => {
|
|
|
+ if (i.ctrlCode === this.ctrl) {
|
|
|
+ return i.ctrlCode
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.ws.destroyCtrl(ctrls)
|
|
|
+ },
|
|
|
+ customizeTree(tvListJson) { // 调用控件接口树
|
|
|
+ const config = this.ws.config
|
|
|
+ const {loginIp, userCode} = config
|
|
|
+ this.ws.postMessage('customizeTree', {
|
|
|
+ loginIp,
|
|
|
+ userCode,
|
|
|
+ params: {
|
|
|
+ array: tvListJson
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** ----------------------------------大华摄像头预览结束------------------------------------- */
|
|
|
+ /** ----------------------------------海康摄像头预览开始------------------------------------- */
|
|
|
+ // 创建播放实例
|
|
|
+ initPlugin() {
|
|
|
+ let that = this
|
|
|
+ that.oWebControl = new WebControl({
|
|
|
+ szPluginContainer: 'playWnd', // 指定容器id
|
|
|
+ iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
|
|
+ iServicePortEnd: 15909,
|
|
|
+ szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
|
|
|
+ cbConnectSuccess: function () { // 创建WebControl实例成功
|
|
|
+ that.oWebControl.JS_StartService('window', { // WebControl实例创建成功后需要启动服务
|
|
|
+ dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死
|
|
|
+ }).then(function () { // 启动插件服务成功
|
|
|
+ that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
|
|
+ cbIntegrationCallBack: cbIntegrationCallBack
|
|
|
+ })
|
|
|
+
|
|
|
+ that.oWebControl.JS_CreateWnd('playWnd', 850, 615).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
|
|
+ that.init() // 创建播放实例成功后初始化
|
|
|
+ })
|
|
|
+ }, function () { // 启动插件服务失败
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cbConnectError: function () { // 创建WebControl实例失败
|
|
|
+ that.oWebControl = null
|
|
|
+ $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
|
|
|
+ WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
|
|
|
+ initCount++
|
|
|
+ if (initCount < 3) {
|
|
|
+ setTimeout(function () {
|
|
|
+ that.initPlugin()
|
|
|
+ }, 3000)
|
|
|
+ } else {
|
|
|
+ $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cbConnectClose: function (bNormalClose) {
|
|
|
+ // 异常断开：bNormalClose = false
|
|
|
+ // JS_Disconnect正常断开：bNormalClose = true
|
|
|
+ console.log('cbConnectClose')
|
|
|
+ that.oWebControl = null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //初始化
|
|
|
+ init() {
|
|
|
+ let that = this
|
|
|
+ this.getPubKey(function () {
|
|
|
+ ////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
|
|
+ var appkey = '24699060' //综合安防管理平台提供的appkey，必填
|
|
|
+ var secret = that.setEncrypt('tt1pMbsrlwGZUWucdAPw') //综合安防管理平台提供的secret，必填
|
|
|
+ var ip = '36.49.108.22' //综合安防管理平台IP地址，必填
|
|
|
+ var playMode = 0 //初始播放模式：0-预览，1-回放
|
|
|
+ var port = 1443 //综合安防管理平台端口，若启用HTTPS协议，默认443
|
|
|
+ var snapDir = 'D:\\SnapDir' //抓图存储路径
|
|
|
+ var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径
|
|
|
+ var layout = '3x3' //playMode指定模式的布局
|
|
|
+ var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
|
|
+ var encryptedFields = 'secret' //加密字段，默认加密领域为secret
|
|
|
+ var showToolbar = 1 //是否显示工具栏，0-不显示，非0-显示
|
|
|
+ var showSmart = 1 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
|
|
+ var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
|
|
|
+ ////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
|
|
+
|
|
|
+ that.oWebControl.JS_RequestInterface({
|
|
|
+ funcName: 'init',
|
|
|
+ argument: JSON.stringify({
|
|
|
+ appkey: appkey, //API网关提供的appkey
|
|
|
+ secret: secret, //API网关提供的secret
|
|
|
+ ip: ip, //API网关IP地址
|
|
|
+ playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
|
|
+ port: port, //端口
|
|
|
+ snapDir: snapDir, //抓图存储路径
|
|
|
+ videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
|
|
+ layout: layout, //布局
|
|
|
+ enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
|
|
+ encryptedFields: encryptedFields, //加密字段
|
|
|
+ showToolbar: showToolbar, //是否显示工具栏
|
|
|
+ showSmart: showSmart, //是否显示智能信息
|
|
|
+ buttonIDs: buttonIDs //自定义工具条按钮
|
|
|
+ })
|
|
|
+ }).then(function (oData) {
|
|
|
+ that.oWebControl.JS_Resize(850, 615) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取公钥
|
|
|
+ getPubKey(callback) {
|
|
|
+ let that = this
|
|
|
+ that.oWebControl.JS_RequestInterface({
|
|
|
+ funcName: 'getRSAPubKey',
|
|
|
+ argument: JSON.stringify({
|
|
|
+ keyLength: 1024
|
|
|
+ })
|
|
|
+ }).then(function (oData) {
|
|
|
+ console.log(oData)
|
|
|
+ if (oData.responseMsg.data) {
|
|
|
+ that.pubKey = oData.responseMsg.data
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ 125
|
|
|
+ })
|
|
|
+ },
|
|
|
+//RSA加密
|
|
|
+ setEncrypt(value) {
|
|
|
+ var encrypt = new JSEncrypt()
|
|
|
+ encrypt.setPublicKey(this.pubKey)
|
|
|
+ return encrypt.encrypt(value)
|
|
|
+ },
|
|
|
+ //播放海康摄像头
|
|
|
+ playhk(channelCode) {
|
|
|
+ var cameraIndexCode = channelCode //获取输入的监控点编号值，必填
|
|
|
+ var streamMode = 0 //主子码流标识：0-主码流，1-子码流
|
|
|
+ var transMode = 1 //传输协议：0-UDP，1-TCP
|
|
|
+ var gpuMode = 0 //是否启用GPU硬解，0-不启用，1-启用
|
|
|
+ var wndId = -1 //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
|
|
+
|
|
|
+ cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
|
|
|
+ cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
|
|
|
+
|
|
|
+ this.oWebControl.JS_RequestInterface({
|
|
|
+ funcName: 'startPreview',
|
|
|
+ argument: JSON.stringify({
|
|
|
+ cameraIndexCode: cameraIndexCode, //监控点编号
|
|
|
+ streamMode: streamMode, //主子码流标识
|
|
|
+ transMode: transMode, //传输协议
|
|
|
+ gpuMode: gpuMode, //是否开启GPU硬解
|
|
|
+ wndId: wndId //可指定播放窗口
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ /** ----------------------------------海康摄像头预览结束------------------------------------- */
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 推送消息
|
|
|
+function cbIntegrationCallBack(oData) {
|
|
|
+ console.log(JSON.stringify(oData.responseMsg))
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
+
|
|
|
+.event-info-con {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .e-left {
|
|
|
+ width: 32%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e-center {
|
|
|
+ width: 30%;
|
|
|
+ margin-left: 1%;
|
|
|
+
|
|
|
+ .img-company {
|
|
|
+ width: 100%;
|
|
|
+ height: 18.3vh;
|
|
|
+
|
|
|
+ img {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .e-right {
|
|
|
+ margin-left: 1%;
|
|
|
+ width: 45%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e-location-left {
|
|
|
+ width: 28%;
|
|
|
+ margin-top: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .e-location-right {
|
|
|
+ width: 71%;
|
|
|
+ margin-top: 1.3rem;
|
|
|
+ margin-left: 1rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog:not(.is-fullscreen) {
|
|
|
+ margin-top: 5.5vh !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-menu-normal {
|
|
|
+ max-width: 90%;
|
|
|
+ padding: 0 3rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 100000;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .btm-m-con {
|
|
|
+ position: relative;
|
|
|
+ color: $inBlue;
|
|
|
+ font-size: .5rem;
|
|
|
+ padding: 1rem 1.5rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ -webkit-transform: translateY(0);
|
|
|
+ transform: translateY(0);
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+ cursor: pointer;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 1rem;
|
|
|
+ color: $inBlue;
|
|
|
+ text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
|
|
|
+ margin-right: 0.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btm-m-con:hover {
|
|
|
+ text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
|
|
|
+ filter: brightness(2.3);
|
|
|
+ -webkit-transform: translateX(0.2rem);
|
|
|
+ transform: translateX(0.2rem);
|
|
|
+ transition: all 0.2s ease-in-out;
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: $inBlueHover;
|
|
|
+ text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .m-l-none {
|
|
|
+ .el-input__inner {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/*海康*/
|
|
|
+html, body {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.playWnd {
|
|
|
+ margin: -13px 0 0 255px;
|
|
|
+ width: 850px; /*播放容器的宽和高设定*/
|
|
|
+ height: 615px;
|
|
|
+ border: 1px solid red;
|
|
|
+}
|
|
|
+
|
|
|
+.operate {
|
|
|
+ margin-top: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.operate::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+
|
|
|
+.module {
|
|
|
+ float: left;
|
|
|
+ width: 340px;
|
|
|
+ /*min-height: 320px;*/
|
|
|
+ margin-left: 16px;
|
|
|
+ padding: 16px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid #e5e5e5;
|
|
|
+}
|
|
|
+
|
|
|
+.module .item {
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.module input[type="text"] {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 0;
|
|
|
+ width: 150px;
|
|
|
+ min-height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.module .btn {
|
|
|
+ min-width: 80px;
|
|
|
+ min-height: 24px;
|
|
|
+ margin-top: 100px;
|
|
|
+ margin-left: 80px;
|
|
|
+}
|
|
|
+</style>
|
JX.LI