|
|
@@ -0,0 +1,290 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog title="无人机" customClass="TVWallCustomWidth" @close="cancelEventLocationShow()">
|
|
|
+ <div id="dom1" class="dom1"></div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
+import DHWs from '@/dahua/lib/DHWs'
|
|
|
+
|
|
|
+/** ----------------------------------摄像头预览结束------------------------------------- */
|
|
|
+export default {
|
|
|
+ dicts: ['event_source'],
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ TVWallVisible:false,
|
|
|
+ isShowTipe: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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() { // 断开与插件服务连接失败
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ showWrj() {
|
|
|
+ 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()
|
|
|
+ this.TVWallVisible = true
|
|
|
+ },
|
|
|
+ /** ----------------------------------大华摄像头预览开始------------------------------------- */
|
|
|
+ alertLogin: function() {
|
|
|
+ this.$modal.msg('登录中....')
|
|
|
+ },
|
|
|
+ alertLoginSuccess: function() {
|
|
|
+ this.$modal.msgSuccess('登录成功！')
|
|
|
+ },
|
|
|
+ alertLoginFailed: function() {
|
|
|
+ this.$modal.msgError('登陆失败！')
|
|
|
+ },
|
|
|
+ alertReinstall: function() {
|
|
|
+ this.$modal.msgWarning('请重新安装客户端')
|
|
|
+ },
|
|
|
+ /** 预览按钮操作 */
|
|
|
+ preview() {
|
|
|
+ //这里写 无人机预览方法
|
|
|
+ let channelCode = []
|
|
|
+ channelCode.push("22060100001320100001")
|
|
|
+ this.ws.detectConnectQt().then(res => {
|
|
|
+ if (res) { // 连接客户端成功
|
|
|
+ this.alertLogin()
|
|
|
+ this.ws.login({
|
|
|
+ loginIp: '211.141.61.228',
|
|
|
+ loginPort: 7902,
|
|
|
+ userName: 'system',
|
|
|
+ userPwd: 'Admin123',
|
|
|
+ token: '',
|
|
|
+ https: 1
|
|
|
+ })
|
|
|
+ this.ws.on('loginState', (res) => {
|
|
|
+ this.isLogin = res
|
|
|
+ console.log('---res-----', res)
|
|
|
+ if (res) {
|
|
|
+ this.alertLoginSuccess()
|
|
|
+ this.activePanel = 'key2'
|
|
|
+ this.realTimeVideoDialog(channelCode);
|
|
|
+ } else {
|
|
|
+ this.alertLoginFailed()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else { // 连接客户端失败
|
|
|
+ this.alertReinstall()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ /** 摄像头预览方法结束 **/
|
|
|
+ },
|
|
|
+ realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
|
|
|
+ if (!this.isLogin) {
|
|
|
+ this.$Message.info('正在登陆客户端，请稍等......')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.ws.openVideo(cameraParams)
|
|
|
+ },
|
|
|
+ /** ----------------------------------大华摄像头预览结束------------------------------------- */
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|
limeng