Fuyuu
/
dt-admin-pc-v2
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

视频播放 补充销毁player实例

master
Fuyuu 10 months ago
parent
2ae8bf2d01
commit
a5923b193e
5 changed files with 305 additions and 299 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      .env.development
  2. 587
      src/views/military/modules/Home.vue
  3. 4
      src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
  4. 2
      src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
  5. 2
      src/views/system/loginmini/CanvasVideoPage.vue

7
.env.development
View File

@ -2,7 +2,7 @@
# @Author: Fuyuu 1805498209@qq.com
# @Date: 2023-11-24 10:15:22
# @LastEditors: Fuyuu 1805498209@qq.com
# @LastEditTime: 2024-01-19 10:20:30
# @LastEditTime: 2024-02-22 11:56:50
# @FilePath: \dt-admin-pc\.env.development
# @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
###
@ -43,4 +43,7 @@ VITE_GLOB_TERRAIN_URL=/mapTile/terrain_zh/
#静态资源
#VITE_GLOB_STATICDOMAIN_URL=VITE_GLOB_DOMAIN_URL + '/sys/common/static'
#电子地图跳转路径
VITE_JUMPTO_MAP_URL=http://127.0.0.1:3500/
#监控平台跳转路径
VITE_JUMPTO_VIDEO_URL=http://127.0.0.1:3122/

587
src/views/military/modules/Home.vue
View File

@ -6,66 +6,66 @@
<a-row :gutter="24" :style="{ padding: '30px 140px' }">
<a-col :span="8">
<!-- <router-link target="_blank" :to="{ name: 'VideoMonitor' }"> -->
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 1)" @mouseleave="mouseLeave($event, 1)" @click="jumpTo('videoMonitor')">
<template #cover><img slot="cover" alt="example" src="@/assets/earthMap/photoelectricity.png"
class="cardImg" ref="photoelectricImg" /></template>
<span class="a-card-title" ref="cardTitle">视频监控</span>
</a-card>
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 1)" @mouseleave="mouseLeave($event, 1)" @click="jumpTo('videoMonitor')">
<template #cover
><img slot="cover" alt="example" src="@/assets/earthMap/photoelectricity.png" class="cardImg" ref="photoelectricImg"
/></template>
<span class="a-card-title" ref="cardTitle">视频监控</span>
</a-card>
<!-- </router-link> -->
</a-col>
<a-col :span="8">
<!-- <router-link target="_blank" :to="{ name: 'ElectronicMap' }"> -->
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 2)" @mouseleave="mouseLeave($event, 2)" @click="jumpTo('electronicMap')">
<template #cover>
<img slot="cover" alt="example" src="@/assets/earthMap/map.png" class="cardImg" ref="cardImg" />
</template>
<span class="a-card-title" ref="cardTitle">电子地图</span>
</a-card>
<a-card
hoverable
class="a-card"
@mouseenter="mouseOver($event, 2)"
@mouseleave="mouseLeave($event, 2)"
@click="jumpTo('electronicMap')"
>
<template #cover>
<img slot="cover" alt="example" src="@/assets/earthMap/map.png" class="cardImg" ref="cardImg" />
</template>
<span class="a-card-title" ref="cardTitle">电子地图</span>
</a-card>
<!-- </router-link> -->
</a-col>
<a-col :span="8">
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 3)" @mouseleave="mouseLeave($event, 3)"
@click="openPage(3)">
<template #cover> <img slot="cover" alt="example" src="@/assets/earthMap/scene.png" class="cardImg"
ref="cardImg" /></template>
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 3)" @mouseleave="mouseLeave($event, 3)" @click="openPage(3)">
<template #cover> <img slot="cover" alt="example" src="@/assets/earthMap/scene.png" class="cardImg" ref="cardImg" /></template>
<span class="a-card-title" ref="cardTitle">区域配置</span>
</a-card>
</a-col>
</a-row>
<a-row :gutter="24" :style="{ padding: '30px 140px' }">
<a-col :span="8">
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 4)" @mouseleave="mouseLeave($event, 4)"
@click="openPage(4)">
<template #cover> <img slot="cover" alt="example" src="@/assets/earthMap/configMan.png" class="cardImg"
ref="configManImg" /></template>
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 4)" @mouseleave="mouseLeave($event, 4)" @click="openPage(4)">
<template #cover>
<img slot="cover" alt="example" src="@/assets/earthMap/configMan.png" class="cardImg" ref="configManImg"
/></template>
<span class="a-card-title" ref="cardTitle">设备管理</span>
</a-card>
</a-col>
<a-col :span="8">
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 5)" @mouseleave="mouseLeave($event, 5)"
@click="openPage(5)">
<template #cover><img slot="cover" alt="example" src="@/assets/earthMap/camera_management.png"
class="cardImg" ref="cardImg" /></template>
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 5)" @mouseleave="mouseLeave($event, 5)" @click="openPage(5)">
<template #cover
><img slot="cover" alt="example" src="@/assets/earthMap/camera_management.png" class="cardImg" ref="cardImg"
/></template>
<span class="a-card-title" ref="cardTitle">相机管理</span>
</a-card>
</a-col>
<a-col :span="8">
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 6)" @mouseleave="mouseLeave($event, 6)"
@click="openPage(6)">
<template #cover><img slot="cover" alt="example" src="@/assets/earthMap/warnInfo.png" class="cardImg"
ref="warnInfoImg" /></template>
<a-card hoverable class="a-card" @mouseenter="mouseOver($event, 6)" @mouseleave="mouseLeave($event, 6)" @click="openPage(6)">
<template #cover><img slot="cover" alt="example" src="@/assets/earthMap/warnInfo.png" class="cardImg" ref="warnInfoImg" /></template>
<span class="a-card-title" ref="cardTitle">警示信息</span>
</a-card>
</a-col>
</a-row>
</div>
</div>
@ -74,303 +74,300 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import photoelectricity_hover from "@/assets/earthMap/photoelectricity_hover.png"
import map_hover from "@/assets/earthMap/map_hover.png"
import scene_hover from "@/assets/earthMap/scene_hover.png"
import configMan from "@/assets/earthMap/configMan.png"
import camera_management_hover from "@/assets/earthMap/camera_management_hover.png"
import warnInfo_hover from "@/assets/earthMap/warnInfo_hover.png"
import photoelectricity from "@/assets/earthMap/photoelectricity.png"
import map from "@/assets/earthMap/map.png"
import scene from "@/assets/earthMap/scene.png"
// import configMan from "@/assets/earthMap/configMan.png"
import camera_management from "@/assets/earthMap/camera_management.png"
import warnInfo from "@/assets/earthMap/warnInfo.png"
import { useRouter, useRoute } from 'vue-router';
const { ipcRenderer } = require('electron');
// 当前路由
const route = useRoute();
const router = useRouter();
const msg = ref('')
function hello() {
var url = '/mapTile/test'
var param = { count: 1 }
defHttp.get({
url: url,
params: param
}, { isTransformResponse: false })
// getAction(url, param)
.then((res) => {
console.log('res', res)
if (res.success) {
msg.value = res.message
}
})
}
function mouseOver(e, index) {
let imgSrc = ''
switch (index) {
case 1:
// imgSrc = require('@/assets/earthMap/photoelectricity_hover.png')
imgSrc = photoelectricity_hover
break
case 2:
imgSrc = map_hover
break
case 3:
imgSrc = scene_hover
break
case 4:
imgSrc = configMan
break
case 5:
imgSrc = camera_management_hover
break
case 6:
imgSrc = warnInfo_hover
break
import { ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import photoelectricity_hover from '@/assets/earthMap/photoelectricity_hover.png';
import map_hover from '@/assets/earthMap/map_hover.png';
import scene_hover from '@/assets/earthMap/scene_hover.png';
import configMan from '@/assets/earthMap/configMan.png';
import camera_management_hover from '@/assets/earthMap/camera_management_hover.png';
import warnInfo_hover from '@/assets/earthMap/warnInfo_hover.png';
import photoelectricity from '@/assets/earthMap/photoelectricity.png';
import map from '@/assets/earthMap/map.png';
import scene from '@/assets/earthMap/scene.png';
// import configMan from "@/assets/earthMap/configMan.png"
import camera_management from '@/assets/earthMap/camera_management.png';
import warnInfo from '@/assets/earthMap/warnInfo.png';
import { useRouter, useRoute } from 'vue-router';
const { ipcRenderer } = require('electron');
// 当前路由
const route = useRoute();
const router = useRouter();
const msg = ref('');
function hello() {
var url = '/mapTile/test';
var param = { count: 1 };
defHttp
.get(
{
url: url,
params: param,
},
{ isTransformResponse: false }
)
// getAction(url, param)
.then((res) => {
console.log('res', res);
if (res.success) {
msg.value = res.message;
}
});
}
e.currentTarget.children[0].children[0].src = imgSrc
e.currentTarget.children[1].children[0].style.color = '#13C2C2'
}
function mouseLeave(e, index) {
let imgSrc = ''
switch (index) {
case 1:
imgSrc = photoelectricity
break
case 2:
imgSrc = map
break
case 3:
imgSrc = scene
break
case 4:
imgSrc = configMan
break
case 5:
imgSrc = camera_management
break
case 6:
imgSrc = warnInfo
break
function mouseOver(e, index) {
let imgSrc = '';
switch (index) {
case 1:
// imgSrc = require('@/assets/earthMap/photoelectricity_hover.png')
imgSrc = photoelectricity_hover;
break;
case 2:
imgSrc = map_hover;
break;
case 3:
imgSrc = scene_hover;
break;
case 4:
imgSrc = configMan;
break;
case 5:
imgSrc = camera_management_hover;
break;
case 6:
imgSrc = warnInfo_hover;
break;
}
e.currentTarget.children[0].children[0].src = imgSrc;
e.currentTarget.children[1].children[0].style.color = '#13C2C2';
}
e.currentTarget.children[0].children[0].src = imgSrc
e.currentTarget.children[1].children[0].style.color = '#707070'
}
function openPage(index) {
let routePath = ''
switch (index) {
case 1:
routePath = '/device/PhotoelectricView'
break
case 2:
routePath = '/device/RadarDetectionView'
break
case 3:
// routePath = '/device/SiteView'
routePath = '/scene/manage'
break
case 4:
routePath = '/device/info'
break
case 5:
// routePath = '/device/PerimeterAlarmView'
routePath = '/cameraManage'
break
case 6:
routePath = '/prewarn/manage'
break
function mouseLeave(e, index) {
let imgSrc = '';
switch (index) {
case 1:
imgSrc = photoelectricity;
break;
case 2:
imgSrc = map;
break;
case 3:
imgSrc = scene;
break;
case 4:
imgSrc = configMan;
break;
case 5:
imgSrc = camera_management;
break;
case 6:
imgSrc = warnInfo;
break;
}
e.currentTarget.children[0].children[0].src = imgSrc;
e.currentTarget.children[1].children[0].style.color = '#707070';
}
router.push({ path: routePath })
/* index == 2
function openPage(index) {
let routePath = '';
switch (index) {
case 1:
routePath = '/device/PhotoelectricView';
break;
case 2:
routePath = '/device/RadarDetectionView';
break;
case 3:
// routePath = '/device/SiteView'
routePath = '/scene/manage';
break;
case 4:
routePath = '/device/info';
break;
case 5:
// routePath = '/device/PerimeterAlarmView'
routePath = '/cameraManage';
break;
case 6:
routePath = '/prewarn/manage';
break;
}
router.push({ path: routePath });
/* index == 2
? window.open(this.$router.resolve({ path: routePath }).href, '_blank')
: this.$router.push({
path: routePath, // 要跳转的组件名称
query: {}, // 路由携带参数
}) */
}
//跳转地址
function jumpTo(pathName){
let url = ''
switch (pathName) {
case "videoMonitor":
url = "http://192.168.1.50:3122/"
break;
case "electronicMap":
url = "http://192.168.1.50:3500/"
break;
default:
break;
}
// // let path=window.location.protocol+'//'+url
// // window.location.href=path
// window.open(url,'_blank')
ipcRenderer.send('jumpTo',url)
}
//跳转地址
function jumpTo(pathName) {
let url = '';
switch (pathName) {
case 'videoMonitor':
url = import.meta.env.VITE_JUMPTO_VIDEO_URL;
break;
case 'electronicMap':
url = import.meta.env.VITE_JUMPTO_MAP_URL;
break;
default:
break;
}
// // let path=window.location.protocol+'//'+url
// // window.location.href=path
// window.open(url,'_blank')
ipcRenderer.send('jumpTo', url);
}
</script>
<style>
.homeBG {
background-color: #fff;
padding: 20px;
text-align: center;
/* 设置子元素居中 */
display: flex;
justify-content: center;
align-items: center;
}
.markdown a:hover,
.markdown u,
a:hover {
text-decoration: none !important;
}
.cardImg {
width: 64px;
}
.ant-card-cover {
text-align: -webkit-center;
padding: 15% 15% 10% 15%;
}
.ant-card-meta-title {
color: #707070 !important;
}
.a-card {
width: 200px;
height: 200px;
border-radius: 5% !important;
color: #fff;
}
.a-card:hover {
-webkit-animation-name: move;
animation-name: move;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.a-card-title {
overflow: hidden;
color: #707070;
font-weight: 500;
font-size: 16px;
white-space: nowrap;
text-overflow: ellipsis;
}
.a-card-title:hover {
color: #f30d0d;
}
@-webkit-keyframes move {
from,
11.1%,
to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
.homeBG {
background-color: #fff;
padding: 20px;
text-align: center;
/* 设置子元素居中 */
display: flex;
justify-content: center;
align-items: center;
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
.markdown a:hover,
.markdown u,
a:hover {
text-decoration: none !important;
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
.cardImg {
width: 64px;
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes move {
from,
11.1%,
to {
-webkit-transform: none;
transform: none;
.ant-card-cover {
text-align: -webkit-center;
padding: 15% 15% 10% 15%;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
.ant-card-meta-title {
color: #707070 !important;
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
.a-card {
width: 200px;
height: 200px;
border-radius: 5% !important;
color: #fff;
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
.a-card:hover {
-webkit-animation-name: move;
animation-name: move;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
.a-card-title {
overflow: hidden;
color: #707070;
font-weight: 500;
font-size: 16px;
white-space: nowrap;
text-overflow: ellipsis;
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
.a-card-title:hover {
color: #f30d0d;
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
@-webkit-keyframes move {
from,
11.1%,
to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
@keyframes move {
from,
11.1%,
to {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
}
</style>

4
src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
View File

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-12-22 15:41:28
* @LastEditors: Fuyuu 1805498209@qq.com
* @LastEditTime: 2024-01-09 11:34:20
* @LastEditTime: 2024-02-23 08:57:44
* @FilePath: \dt-admin-pc-v2\src\views\military\modules\ai\aiMonitorArea\checkCom\CheckCom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@ -62,6 +62,8 @@
const close = () => {
const res = ipcRenderer.sendSync('closeRtsp', props.videoUrl);
msg.value = res.msg;
// 销毁player实例
player.value.destroy();
};
// 关闭窗口
function handleCancel() {

2
src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
View File

@ -115,6 +115,8 @@
const close = () => {
const res = ipcRenderer.sendSync('closeRtsp', props.videoUrl);
msg.value = res.msg;
// 销毁player实例
player.value.destroy();
};
/* 标注区域相关 */

2
src/views/system/loginmini/CanvasVideoPage.vue
View File

@ -107,6 +107,8 @@
const close = () => {
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl.value);
msg.value = res.msg;
// 销毁player实例
player.value.destroy();
};
// 导入静态图片

Write Preview
Loading…
Cancel
Save