|
|
@@ -0,0 +1,431 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" width="80%" @close="cancelEventLocationShow()">
|
|
|
+ <div class="event-info">
|
|
|
+ <div class="event-info-con">
|
|
|
+ <div class="e-location-left">
|
|
|
+ <el-tabs v-model="activeName">
|
|
|
+ <el-tab-pane label="视频列表" name="tv">
|
|
|
+ <div class="forthis">
|
|
|
+ <div class="i-list-con overflow-y" style="height: 50vh;">
|
|
|
+ <div class="d-l-con d-evnet-list-con" v-for="(item,index) in 5"
|
|
|
+ v-on:click="preview()">
|
|
|
+ <!-- <img :src="" v-if="item.picturePath!=null&&item.picturePath!=''" class="event-list-img"> -->
|
|
|
+ <img :src="item.picturePath" v-if="item.picturePath!=null&&item.picturePath!=''"
|
|
|
+ class="event-list-img">
|
|
|
+ <img src="@/assets/images/visual/img-sample.png" v-else class="event-list-img">
|
|
|
+ <div class="event-list-text">
|
|
|
+ <h3>列表</h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dom" style="width:100%;height:350px;position:relative;">
|
|
|
+ <div id="dom1" class="dom1"></div>
|
|
|
+ <div id="dom2" class="dom2"></div>
|
|
|
+ <div id="dom3" class="dom3"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ import { getDahuaVideoServer } from '@/api/dahua/dahua'
|
|
|
+ import DHWs from '@/dahua/lib/DHWs'
|
|
|
+
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ export default {
|
|
|
+ dicts: ['event_source'],
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ TVWallVisible: false,
|
|
|
+ activeName: 'tv',
|
|
|
+ channelId:["ZgVzqsjwA1DTF561VHG69F"],
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ showModal: true,
|
|
|
+ activePanel: 'key1',
|
|
|
+ isLogin: false,
|
|
|
+ loginType: '1',
|
|
|
+ // loginIp: '10.1.240.10',
|
|
|
+ // userName: 'yanshi',
|
|
|
+ // userPwd: 'dahua123',
|
|
|
+ // loginPort: '8320',
|
|
|
+ loginIp: '202.111.178.254',
|
|
|
+ userName: 'system',
|
|
|
+ userPwd: 'Admin@123',
|
|
|
+ loginPort: '7902',
|
|
|
+ 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: '否'
|
|
|
+ }],
|
|
|
+ cutPosX: 10,
|
|
|
+ cutPosY: 10,
|
|
|
+ cutWidth: 100,
|
|
|
+ cutHeight: 100,
|
|
|
+ crtPosX: 0,
|
|
|
+ crtPosY: 0,
|
|
|
+ crtWidth: 700,
|
|
|
+ crtHeight: 400,
|
|
|
+ domId:"dom1",
|
|
|
+ mixedVideoDisplayMode:2,
|
|
|
+ isShowTipe: true
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ /** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+ const DHWsInstance = DHWs.getInstance()
|
|
|
+ this.ws = DHWsInstance
|
|
|
+ console.log(this.ws)
|
|
|
+ this.ws.addEventListener('connectStateChange', data => {
|
|
|
+ if(data){
|
|
|
+ console.log("连接成功");
|
|
|
+ }else{
|
|
|
+ console.log("连接失败，下载客户端");
|
|
|
+ this.isShowTipe && this.$modal.confirm({
|
|
|
+ title: '下载客户端',
|
|
|
+ content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
|
|
|
+ onOk: () => {
|
|
|
+ //这里写下载方法
|
|
|
+ this.isShowTipe = false
|
|
|
+ },
|
|
|
+ onCancel: () => {
|
|
|
+ this.isShowTipe = false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cancelEventLocationShow() {
|
|
|
+ this.activeName = 'tv'
|
|
|
+ this.TVWallVisible=false
|
|
|
+ },
|
|
|
+ showTVWall() {
|
|
|
+ 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,
|
|
|
+ token: '',
|
|
|
+ https: 1
|
|
|
+ })
|
|
|
+ this.ws.on('loginState', (res) => {
|
|
|
+ this.isLogin = res
|
|
|
+ console.log('---res-----', res)
|
|
|
+ if (res) {
|
|
|
+ this.alertLoginSuccess()
|
|
|
+ this.activePanel = 'key2'
|
|
|
+ this.create()
|
|
|
+ } else {
|
|
|
+ this.alertLoginFailed()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { // 连接客户端失败
|
|
|
+ this.alertReinstall()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ create() { // 调用创建控件接口
|
|
|
+ debugger
|
|
|
+ let _this = this;
|
|
|
+ console.log(this.cutPosX,"this.cutPosX")
|
|
|
+ const params = [
|
|
|
+ {
|
|
|
+ ctrlType: this.ctrlType,
|
|
|
+ ctrlCode: this.ctrl,
|
|
|
+ ctrlProperty: {
|
|
|
+ displayMode: this.displayMode,
|
|
|
+ splitNum: this.splitNum,
|
|
|
+ channelList: this.channelId
|
|
|
+ },
|
|
|
+ visible: true,
|
|
|
+ domId: this.domId
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ this.setPos();
|
|
|
+ _this.ws.createCtrl(params).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ _this.ws.customizeTree(null);
|
|
|
+ }).catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ _this.ws.on('createCtrlResult', (res) => {
|
|
|
+ console.warn(res);
|
|
|
+ _this.ws.customizeTree(null);
|
|
|
+ _this.ws.on('createCtrlResult', (res) => {
|
|
|
+ console.warn(res);
|
|
|
+ _this.ws.customizeTree(null);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
