|
|
@@ -1,25 +1,44 @@
|
|
|
<template>
|
|
|
<base-drag-dialog :dialogConfig="baseDialogConfig">
|
|
|
- <div class="video-container" :class="largeScreen ? 'large_screen' : 'normal_screen'">
|
|
|
+ <div
|
|
|
+ class="video-container"
|
|
|
+ :class="largeScreen ? 'large_screen' : 'normal_screen'"
|
|
|
+ >
|
|
|
<!-- 弹窗内容 -->
|
|
|
<div class="dialog_box">
|
|
|
<!-- 头部 -->
|
|
|
<div class="dialog_header_box">
|
|
|
<div class="dialog_header_title">
|
|
|
- {{ cameraData ? cameraData.name : '监控视频' }}
|
|
|
+ {{ cameraData ? cameraData.name : "监控视频" }}
|
|
|
</div>
|
|
|
- <div class="dialog_header_retract" @click="showVideoPopup(!largeScreen)">
|
|
|
- <img :src="require('@/assets/imgs/icons/icon_zoom@2x.png')" alt="" />
|
|
|
+ <div
|
|
|
+ class="dialog_header_retract"
|
|
|
+ @click="showVideoPopup(!largeScreen)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="require('@/assets/imgs/icons/icon_zoom@2x.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<!-- <img src="../../../../assets/out/imgs/pack-up-icon.png" alt="" /> -->
|
|
|
</div>
|
|
|
<div class="dialog_header_close" @click="closeDialog">
|
|
|
- <img :src="require('@/assets/imgs/icons/icon_guanbi2@2x.png')" alt="" />
|
|
|
+ <img
|
|
|
+ :src="require('@/assets/imgs/icons/icon_guanbi2@2x.png')"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 内容 -->
|
|
|
- <div class="dialog_content_box" :class="{ large_content: largeScreen }" v-show="!!cameraId">
|
|
|
+ <div
|
|
|
+ class="dialog_content_box"
|
|
|
+ :class="{ large_content: largeScreen }"
|
|
|
+ v-show="!!cameraId"
|
|
|
+ >
|
|
|
<!-- 激光云台时样式 -->
|
|
|
- <div class="content_box jgyt" v-if="cameraData.type && cameraData.type === 'jgyt'">
|
|
|
+ <div
|
|
|
+ class="content_box jgyt"
|
|
|
+ v-if="cameraData.type && cameraData.type === 'jgyt'"
|
|
|
+ >
|
|
|
<div class="img-box">
|
|
|
<img :src="url" v-if="url" />
|
|
|
<div class="image-slot" v-else>
|
|
|
@@ -38,7 +57,7 @@
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">浓度值</span>
|
|
|
<span class="info-value">
|
|
|
- {{ getTagValue('ndTag') }}
|
|
|
+ {{ getTagValue("ndTag") }}
|
|
|
<span class="info-unit">ppm·m</span>
|
|
|
</span>
|
|
|
<!-- <span class="info-unit">ppm·m</span> -->
|
|
|
@@ -46,21 +65,21 @@
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">光强度</span>
|
|
|
<span class="info-value">
|
|
|
- {{ getTagValue('gqTag') }}
|
|
|
+ {{ getTagValue("gqTag") }}
|
|
|
</span>
|
|
|
<span class="info-unit"></span>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">垂直角度</span>
|
|
|
<span class="info-value">
|
|
|
- {{ getTagValue('czTag') }}
|
|
|
+ {{ getTagValue("czTag") }}
|
|
|
</span>
|
|
|
<span class="info-unit"></span>
|
|
|
</div>
|
|
|
<div class="info-item">
|
|
|
<span class="info-label">水平角度</span>
|
|
|
<span class="info-value">
|
|
|
- {{ getTagValue('spTag') }}
|
|
|
+ {{ getTagValue("spTag") }}
|
|
|
</span>
|
|
|
<span class="info-unit"></span>
|
|
|
</div>
|
|
|
@@ -68,32 +87,52 @@
|
|
|
<!-- 大屏且允许操作时才会显示 -->
|
|
|
<div class="video-opt" v-if="largeScreen && cameraData.ptzEnable">
|
|
|
<div class="comm-panel">
|
|
|
- <div class="btn-box" v-for="item of commandConfig.direction" :key="item.type">
|
|
|
+ <div
|
|
|
+ class="btn-box"
|
|
|
+ v-for="item of commandConfig.direction"
|
|
|
+ :key="item.type"
|
|
|
+ >
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:icon="`el-icon-${item.type}`"
|
|
|
size="mini"
|
|
|
- @mousedown.native="changePtzCommParam(item.command, false)"
|
|
|
+ @mousedown.native="
|
|
|
+ changePtzCommParam(item.command, false)
|
|
|
+ "
|
|
|
@mouseup.native="changePtzCommParam(item.command, true)"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="zoom-panel">
|
|
|
- <div class="btn-box" v-for="item of commandConfig.zoom" :key="item.type">
|
|
|
+ <div
|
|
|
+ class="btn-box"
|
|
|
+ v-for="item of commandConfig.zoom"
|
|
|
+ :key="item.type"
|
|
|
+ >
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:icon="`el-icon-${item.type}`"
|
|
|
size="mini"
|
|
|
- @mousedown.native="changePtzCommParam(item.command, false)"
|
|
|
+ @mousedown.native="
|
|
|
+ changePtzCommParam(item.command, false)
|
|
|
+ "
|
|
|
@mouseup.native="changePtzCommParam(item.command, true)"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="speed-panel">
|
|
|
<span class="form-label">速度：</span>
|
|
|
- <el-select class="myInput" size="mini" v-model="speed" placeholder="请选择速度">
|
|
|
+ <el-select
|
|
|
+ class="myInput"
|
|
|
+ size="mini"
|
|
|
+ v-model="speed"
|
|
|
+ placeholder="请选择速度"
|
|
|
+ >
|
|
|
<el-option
|
|
|
- v-for="item in Array.from({ length: 7 }, (item, index) => index + 1)"
|
|
|
+ v-for="item in Array.from(
|
|
|
+ { length: 7 },
|
|
|
+ (item, index) => index + 1
|
|
|
+ )"
|
|
|
:key="item"
|
|
|
:label="item"
|
|
|
:value="item"
|
|
|
@@ -102,16 +141,34 @@
|
|
|
</div>
|
|
|
<div class="preset-panel">
|
|
|
<span class="form-label">预置点：</span>
|
|
|
- <el-select class="myInput" size="mini" v-model="presetIndex" placeholder="请选择预置点">
|
|
|
+ <el-select
|
|
|
+ class="myInput"
|
|
|
+ size="mini"
|
|
|
+ v-model="presetIndex"
|
|
|
+ placeholder="请选择预置点"
|
|
|
+ >
|
|
|
<el-option
|
|
|
- v-for="item in Array.from({ length: 255 }, (item, index) => index + 1)"
|
|
|
+ v-for="item in Array.from(
|
|
|
+ { length: 255 },
|
|
|
+ (item, index) => index + 1
|
|
|
+ )"
|
|
|
:key="item"
|
|
|
:label="item"
|
|
|
:value="item"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
- <el-button type="primary" size="mini" @click="changePtzPresetParam(8)">设置</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="changePtzPresetParam(39)">转到</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="changePtzPresetParam(8)"
|
|
|
+ >设置</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="changePtzPresetParam(39)"
|
|
|
+ >转到</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<div class="playback-panel">
|
|
|
<span class="form-label">时间：</span>
|
|
|
@@ -123,15 +180,28 @@
|
|
|
placeholder="选择回放开始时间"
|
|
|
size="mini"
|
|
|
></el-date-picker>
|
|
|
- <el-button type="success" size="mini" @click="changePlayTypeParam(true)">回放</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="changePlayTypeParam(false)">实时</el-button>
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ size="mini"
|
|
|
+ @click="changePlayTypeParam(true)"
|
|
|
+ >回放</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="changePlayTypeParam(false)"
|
|
|
+ >实时</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 其他视频时样式 -->
|
|
|
<div class="content_box comm" v-else>
|
|
|
- <div class="img-box" :class="{ comm_ptz: largeScreen && cameraData.ptzEnable }">
|
|
|
+ <div
|
|
|
+ class="img-box"
|
|
|
+ :class="{ comm_ptz: largeScreen && cameraData.ptzEnable }"
|
|
|
+ >
|
|
|
<img :src="url" v-if="url" />
|
|
|
<div class="image-slot" v-else>
|
|
|
<i class="el-icon-video-camera"></i>
|
|
|
@@ -141,32 +211,52 @@
|
|
|
<div class="info-box" v-if="largeScreen && cameraData.ptzEnable">
|
|
|
<div class="video-opt">
|
|
|
<div class="comm-panel">
|
|
|
- <div class="btn-box" v-for="item of commandConfig.direction" :key="item.type">
|
|
|
+ <div
|
|
|
+ class="btn-box"
|
|
|
+ v-for="item of commandConfig.direction"
|
|
|
+ :key="item.type"
|
|
|
+ >
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:icon="`el-icon-${item.type}`"
|
|
|
size="mini"
|
|
|
- @mousedown.native="changePtzCommParam(item.command, false)"
|
|
|
+ @mousedown.native="
|
|
|
+ changePtzCommParam(item.command, false)
|
|
|
+ "
|
|
|
@mouseup.native="changePtzCommParam(item.command, true)"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="zoom-panel">
|
|
|
- <div class="btn-box" v-for="item of commandConfig.zoom" :key="item.type">
|
|
|
+ <div
|
|
|
+ class="btn-box"
|
|
|
+ v-for="item of commandConfig.zoom"
|
|
|
+ :key="item.type"
|
|
|
+ >
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
:icon="`el-icon-${item.type}`"
|
|
|
size="mini"
|
|
|
- @mousedown.native="changePtzCommParam(item.command, false)"
|
|
|
+ @mousedown.native="
|
|
|
+ changePtzCommParam(item.command, false)
|
|
|
+ "
|
|
|
@mouseup.native="changePtzCommParam(item.command, true)"
|
|
|
></el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="speed-panel">
|
|
|
<span class="form-label">速度：</span>
|
|
|
- <el-select class="myInput" size="mini" v-model="speed" placeholder="请选择速度">
|
|
|
+ <el-select
|
|
|
+ class="myInput"
|
|
|
+ size="mini"
|
|
|
+ v-model="speed"
|
|
|
+ placeholder="请选择速度"
|
|
|
+ >
|
|
|
<el-option
|
|
|
- v-for="item in Array.from({ length: 7 }, (item, index) => index + 1)"
|
|
|
+ v-for="item in Array.from(
|
|
|
+ { length: 7 },
|
|
|
+ (item, index) => index + 1
|
|
|
+ )"
|
|
|
:key="item"
|
|
|
:label="item"
|
|
|
:value="item"
|
|
|
@@ -175,16 +265,34 @@
|
|
|
</div>
|
|
|
<div class="preset-panel">
|
|
|
<span class="form-label">预置点：</span>
|
|
|
- <el-select class="myInput" size="mini" v-model="presetIndex" placeholder="请选择预置点">
|
|
|
+ <el-select
|
|
|
+ class="myInput"
|
|
|
+ size="mini"
|
|
|
+ v-model="presetIndex"
|
|
|
+ placeholder="请选择预置点"
|
|
|
+ >
|
|
|
<el-option
|
|
|
- v-for="item in Array.from({ length: 255 }, (item, index) => index + 1)"
|
|
|
+ v-for="item in Array.from(
|
|
|
+ { length: 255 },
|
|
|
+ (item, index) => index + 1
|
|
|
+ )"
|
|
|
:key="item"
|
|
|
:label="item"
|
|
|
:value="item"
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
- <el-button type="primary" size="mini" @click="changePtzPresetParam(8)">设置</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="changePtzPresetParam(39)">转到</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="changePtzPresetParam(8)"
|
|
|
+ >设置</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="changePtzPresetParam(39)"
|
|
|
+ >转到</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<div class="playback-panel">
|
|
|
<span class="form-label">时间：</span>
|
|
|
@@ -196,8 +304,18 @@
|
|
|
placeholder="选择回放开始时间"
|
|
|
size="mini"
|
|
|
></el-date-picker>
|
|
|
- <el-button type="success" size="mini" @click="changePlayTypeParam(true)">回放</el-button>
|
|
|
- <el-button type="primary" size="mini" @click="changePlayTypeParam(false)">实时</el-button>
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ size="mini"
|
|
|
+ @click="changePlayTypeParam(true)"
|
|
|
+ >回放</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="changePlayTypeParam(false)"
|
|
|
+ >实时</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -216,12 +334,12 @@
|
|
|
</base-drag-dialog>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import BaseDragDialog from '@/views/components/base/BaseDragDialog'
|
|
|
-import Dayjs from 'dayjs'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import { getViewer } from '@/store/map/mapService'
|
|
|
+import BaseDragDialog from "@/views/components/base/BaseDragDialog";
|
|
|
+import Dayjs from "dayjs";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import { getViewer } from "@/store/map/mapService";
|
|
|
export default {
|
|
|
- name: 'VideoImageWindow',
|
|
|
+ name: "VideoImageWindow",
|
|
|
components: { BaseDragDialog },
|
|
|
props: {
|
|
|
cameraId: {
|
|
|
@@ -233,30 +351,33 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['rtData']),
|
|
|
+ ...mapGetters(["rtData"]),
|
|
|
cameraData() {
|
|
|
- let data = {}
|
|
|
- const viewer = getViewer()
|
|
|
- const ds = viewer.dataSources.getByName('layer_camera')[0]
|
|
|
- const entity = ds?.entities.getById(this.cameraId)
|
|
|
- const value = entity?.properties?.details._value
|
|
|
- if (!!value) data = value
|
|
|
- return data
|
|
|
+ let data = {};
|
|
|
+ const viewer = getViewer();
|
|
|
+ const ds = viewer.dataSources.getByName("layer_camera")[0];
|
|
|
+ const entity = ds?.entities.getById(this.cameraId);
|
|
|
+ const value = entity?.properties?.details._value;
|
|
|
+ if (!!value) data = value;
|
|
|
+ return data;
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
cameraId: {
|
|
|
handler(id) {
|
|
|
- console.log(id)
|
|
|
- this.baseDialogConfig.show = !!id
|
|
|
+ console.log(id);
|
|
|
+ this.baseDialogConfig.show = !!id;
|
|
|
if (this.num > 0) {
|
|
|
- this.baseDialogConfig.left = 500
|
|
|
+ this.baseDialogConfig.left = 500;
|
|
|
}
|
|
|
if (!!id) {
|
|
|
- this.baseDialogConfig.dialogId = 'video_' + id
|
|
|
- this.updateEvent({ id, canControl: this.cameraData?.ptzEnable }, true)
|
|
|
+ this.baseDialogConfig.dialogId = "video_" + id;
|
|
|
+ this.updateEvent(
|
|
|
+ { id, canControl: this.cameraData?.ptzEnable },
|
|
|
+ true
|
|
|
+ );
|
|
|
}
|
|
|
- this.$store.dispatch('dialog/setVisibleDialogs', this.baseDialogConfig)
|
|
|
+ this.$store.dispatch("dialog/setVisibleDialogs", this.baseDialogConfig);
|
|
|
},
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
@@ -265,13 +386,13 @@ export default {
|
|
|
handler(newVal) {
|
|
|
if (!!this.cameraData.tags) {
|
|
|
if (!!this.cameraData.dataList) {
|
|
|
- this.cameraData.dataList.forEach(item => {
|
|
|
+ this.cameraData.dataList.forEach((item) => {
|
|
|
if (!!item.tag && !!newVal[item.tag]) {
|
|
|
- item.value = newVal[item.tag].value + ' ' + item.unit
|
|
|
+ item.value = newVal[item.tag].value + " " + item.unit;
|
|
|
}
|
|
|
if (item.isTag && !!newVal[item.value]) {
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -282,9 +403,9 @@ export default {
|
|
|
return {
|
|
|
largeScreen: false,
|
|
|
baseDialogConfig: {
|
|
|
- dialogId: '',
|
|
|
+ dialogId: "",
|
|
|
show: true,
|
|
|
- title: '追视窗口',
|
|
|
+ title: "追视窗口",
|
|
|
width: 420,
|
|
|
height: 252,
|
|
|
top: 0,
|
|
|
@@ -295,179 +416,186 @@ export default {
|
|
|
zIndex: 1,
|
|
|
},
|
|
|
ws: null,
|
|
|
- url: '',
|
|
|
- lastUrl: '',
|
|
|
+ url: "",
|
|
|
+ lastUrl: "",
|
|
|
// 视频控制相关 start
|
|
|
commandConfig: {
|
|
|
//视频控制开关配置
|
|
|
direction: [
|
|
|
//方向
|
|
|
- { type: 'top-left', name: '左上', command: 25 },
|
|
|
- { type: 'top', name: '上', command: 21 },
|
|
|
- { type: 'top-right', name: '右上', command: 26 },
|
|
|
- { type: 'back', name: '左', command: 23 },
|
|
|
- { type: 'rank', name: '中', command: 0 },
|
|
|
- { type: 'right', name: '右', command: 24 },
|
|
|
- { type: 'bottom-left', name: '左下', command: 27 },
|
|
|
- { type: 'bottom', name: '下', command: 22 },
|
|
|
- { type: 'bottom-right', name: '右下', command: 28 },
|
|
|
+ { type: "top-left", name: "左上", command: 25 },
|
|
|
+ { type: "top", name: "上", command: 21 },
|
|
|
+ { type: "top-right", name: "右上", command: 26 },
|
|
|
+ { type: "back", name: "左", command: 23 },
|
|
|
+ { type: "rank", name: "中", command: 0 },
|
|
|
+ { type: "right", name: "右", command: 24 },
|
|
|
+ { type: "bottom-left", name: "左下", command: 27 },
|
|
|
+ { type: "bottom", name: "下", command: 22 },
|
|
|
+ { type: "bottom-right", name: "右下", command: 28 },
|
|
|
],
|
|
|
zoom: [
|
|
|
//放大缩小
|
|
|
- { type: 'zoom-in', name: '放大', command: 11 },
|
|
|
- { type: 'zoom-out', name: '缩小', command: 12 },
|
|
|
+ { type: "zoom-in", name: "放大", command: 11 },
|
|
|
+ { type: "zoom-out", name: "缩小", command: 12 },
|
|
|
],
|
|
|
},
|
|
|
startTime: null,
|
|
|
speed: 4,
|
|
|
presetIndex: 1,
|
|
|
// 视频控制 end
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- this.closeHandler()
|
|
|
+ this.closeHandler();
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.init()
|
|
|
+ this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
getTagValue(tag) {
|
|
|
- return this.rtData[this.cameraData.tags[tag]]?.Value || 0
|
|
|
+ return this.rtData[this.cameraData.tags[tag]]?.Value || 0;
|
|
|
},
|
|
|
closeDialog() {
|
|
|
- this.largeScreen = false
|
|
|
- this.$store.dispatch('dialog/closeVideoDialog', this.cameraId)
|
|
|
- this.$store.dispatch('dialog/setVisibleDialogs', this.baseDialogConfig)
|
|
|
+ this.largeScreen = false;
|
|
|
+ this.$store.dispatch("dialog/closeVideoDialog", this.cameraId);
|
|
|
+ this.$store.dispatch("dialog/setVisibleDialogs", this.baseDialogConfig);
|
|
|
if (!!this.cameraData.tags) {
|
|
|
- const topics = Object.values(this.cameraData.tags).map(n => `DataCommunication/TagData/${n}`)
|
|
|
- this.$store.dispatch('mqtt/unsubscribe', topics)
|
|
|
+ const topics = Object.values(this.cameraData.tags).map(
|
|
|
+ (n) => `DataCommunication/TagData/${n}`
|
|
|
+ );
|
|
|
+ this.$store.dispatch("mqtt/unsubscribe", topics);
|
|
|
}
|
|
|
- this.closeHandler()
|
|
|
+ this.closeHandler();
|
|
|
},
|
|
|
// 放大缩小
|
|
|
showVideoPopup(data) {
|
|
|
- this.largeScreen = data
|
|
|
- this.baseDialogConfig.show = false
|
|
|
+ this.largeScreen = data;
|
|
|
+ this.baseDialogConfig.show = false;
|
|
|
this.$nextTick(() => {
|
|
|
if (data) {
|
|
|
- this.baseDialogConfig.width = 937
|
|
|
- this.baseDialogConfig.height = 598
|
|
|
- this.baseDialogConfig.center = true
|
|
|
+ this.baseDialogConfig.width = 937;
|
|
|
+ this.baseDialogConfig.height = 598;
|
|
|
+ this.baseDialogConfig.center = true;
|
|
|
} else {
|
|
|
- this.baseDialogConfig.width = 420
|
|
|
- this.baseDialogConfig.height = 252
|
|
|
- this.baseDialogConfig.center = false
|
|
|
+ this.baseDialogConfig.width = 420;
|
|
|
+ this.baseDialogConfig.height = 252;
|
|
|
+ this.baseDialogConfig.center = false;
|
|
|
}
|
|
|
- this.baseDialogConfig.show = true
|
|
|
- })
|
|
|
+ this.baseDialogConfig.show = true;
|
|
|
+ });
|
|
|
},
|
|
|
init(str) {
|
|
|
// this.socketList[`ws_${this.cameraId}`];
|
|
|
- this.ws = new WebSocket('ws://' + window.location.host + BASE_URL + '/VideoOverWebSocket')
|
|
|
+ // this.ws = new WebSocket('ws://' + window.location.host + BASE_URL + '/VideoOverWebSocket')
|
|
|
+ this.ws = new WebSocket(VUE_APP_BASE_WS() + "/VideoOverWebSocket");
|
|
|
// this.ws = new WebSocket('wss://' + window.location.host + BASE_URL + '/VideoOverWebSocket')
|
|
|
- this.ws.onmessage = evt => {
|
|
|
- if (typeof evt.data === 'string') {
|
|
|
- console.log(JSON.parse(evt.data).Msg)
|
|
|
+ this.ws.onmessage = (evt) => {
|
|
|
+ if (typeof evt.data === "string") {
|
|
|
+ console.log(JSON.parse(evt.data).Msg);
|
|
|
} else {
|
|
|
- let _this = this
|
|
|
+ let _this = this;
|
|
|
// const updateUrl = _.debounce(function () {
|
|
|
- let currUrl = URL.createObjectURL(evt.data)
|
|
|
- if (_this.lastUrl) URL.revokeObjectURL(_this.lastUrl)
|
|
|
- _this.lastUrl = currUrl
|
|
|
- _this.url = currUrl
|
|
|
+ let currUrl = URL.createObjectURL(evt.data);
|
|
|
+ if (_this.lastUrl) URL.revokeObjectURL(_this.lastUrl);
|
|
|
+ _this.lastUrl = currUrl;
|
|
|
+ _this.url = currUrl;
|
|
|
// }, 500);
|
|
|
// updateUrl();
|
|
|
}
|
|
|
- }
|
|
|
- this.handleSend(str)
|
|
|
+ };
|
|
|
+ this.handleSend(str);
|
|
|
// console.log(window);
|
|
|
},
|
|
|
handleSend(str) {
|
|
|
if (this.ws.readyState === WebSocket.OPEN) {
|
|
|
- this.ws.send(str)
|
|
|
+ this.ws.send(str);
|
|
|
} else if (this.ws.readyState == WebSocket.CONNECTING) {
|
|
|
// Wait for the open event, maybe do something with promises
|
|
|
// depending on your use case. I believe in you developer!
|
|
|
- this.ws.addEventListener('open', () => this.handleSend(str))
|
|
|
+ this.ws.addEventListener("open", () => this.handleSend(str));
|
|
|
} else {
|
|
|
// etc.
|
|
|
}
|
|
|
},
|
|
|
updateEvent(data, state) {
|
|
|
- const param = JSON.stringify(data)
|
|
|
+ const param = JSON.stringify(data);
|
|
|
if (this.ws && this.ws.readyState == 1) {
|
|
|
- this.handleSend(param)
|
|
|
+ this.handleSend(param);
|
|
|
} else {
|
|
|
- this.init(param)
|
|
|
+ this.init(param);
|
|
|
}
|
|
|
if (state) {
|
|
|
setTimeout(() => {
|
|
|
- this.url = ''
|
|
|
- if (this.lastUrl) URL.revokeObjectURL(this.lastUrl)
|
|
|
- this.lastUrl = ''
|
|
|
- }, 500)
|
|
|
+ this.url = "";
|
|
|
+ if (this.lastUrl) URL.revokeObjectURL(this.lastUrl);
|
|
|
+ this.lastUrl = "";
|
|
|
+ }, 500);
|
|
|
}
|
|
|
},
|
|
|
closeHandler() {
|
|
|
- this.ws && this.ws.close()
|
|
|
+ this.ws && this.ws.close();
|
|
|
setTimeout(() => {
|
|
|
- if (this.url) URL.revokeObjectURL(this.url)
|
|
|
- this.url = ''
|
|
|
- this.lastUrl = ''
|
|
|
+ if (this.url) URL.revokeObjectURL(this.url);
|
|
|
+ this.url = "";
|
|
|
+ this.lastUrl = "";
|
|
|
this.ws &&
|
|
|
- (this.ws.onclose = evt => {
|
|
|
+ (this.ws.onclose = (evt) => {
|
|
|
// this.ws = null;
|
|
|
- console.log('websocket已关闭')
|
|
|
- })
|
|
|
- }, 500)
|
|
|
+ console.log("websocket已关闭");
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
},
|
|
|
changePtzCommParam(comm, stop) {
|
|
|
- if (!comm) return
|
|
|
+ if (!comm) return;
|
|
|
let param = {
|
|
|
id: this.cameraId,
|
|
|
canControl: true,
|
|
|
ptzCommand: comm,
|
|
|
ptzStop: stop,
|
|
|
ptzSpeed: this.speed,
|
|
|
- }
|
|
|
- this.updateEvent(param)
|
|
|
+ };
|
|
|
+ this.updateEvent(param);
|
|
|
},
|
|
|
changePtzPresetParam(comm) {
|
|
|
- if (!comm) return
|
|
|
+ if (!comm) return;
|
|
|
let param = {
|
|
|
id: this.cameraId,
|
|
|
canControl: true,
|
|
|
ptzPreset: comm,
|
|
|
ptzPresetIndex: this.presetIndex,
|
|
|
- }
|
|
|
- this.updateEvent(param)
|
|
|
+ };
|
|
|
+ this.updateEvent(param);
|
|
|
},
|
|
|
/**
|
|
|
* state true代表回放模式
|
|
|
*/
|
|
|
changePlayTypeParam(state) {
|
|
|
- let param = { id: this.cameraId, canControl: this.cameraData?.ptzEnable }
|
|
|
+ let param = { id: this.cameraId, canControl: this.cameraData?.ptzEnable };
|
|
|
if (state) {
|
|
|
if (!this.startTime) {
|
|
|
- this.$message.warning('请选择回放开始时间！')
|
|
|
- return
|
|
|
+ this.$message.warning("请选择回放开始时间！");
|
|
|
+ return;
|
|
|
}
|
|
|
- param['startTime'] = Dayjs(this.startTime).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ param["startTime"] = Dayjs(this.startTime).format(
|
|
|
+ "YYYY-MM-DD HH:mm:ss"
|
|
|
+ );
|
|
|
}
|
|
|
- this.updateEvent(param, true)
|
|
|
+ this.updateEvent(param, true);
|
|
|
},
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.normal_screen {
|
|
|
- background: url('~@/assets/imgs/dialog/pop_narrow_TW@2x.png') center center no-repeat;
|
|
|
+ background: url("~@/assets/imgs/dialog/pop_narrow_TW@2x.png") center center
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 2.1875rem /* 420/192 */;
|
|
|
height: 1.3125rem /* 252/192 */;
|
|
|
}
|
|
|
.large_screen {
|
|
|
- background: url('~@/assets/imgs/dialog/pop_enlarge_TW@2x.png') center center no-repeat;
|
|
|
+ background: url("~@/assets/imgs/dialog/pop_enlarge_TW@2x.png") center center
|
|
|
+ no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 4.880208rem /* 937/192 */;
|
|
|
height: 3.114583rem /* 598/192 */;
|
fan