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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      .env.development
  2. 287
      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 # @Author: Fuyuu 1805498209@qq.com
# @Date: 2023-11-24 10:15:22 # @Date: 2023-11-24 10:15:22
# @LastEditors: Fuyuu 1805498209@qq.com # @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 # @FilePath: \dt-admin-pc\.env.development
# @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE # @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_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/

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

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

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

@ -2,7 +2,7 @@
* @Author: Fuyuu 1805498209@qq.com * @Author: Fuyuu 1805498209@qq.com
* @Date: 2023-12-22 15:41:28 * @Date: 2023-12-22 15:41:28
* @LastEditors: Fuyuu 1805498209@qq.com * @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 * @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 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
@ -62,6 +62,8 @@
const close = () => { const close = () => {
const res = ipcRenderer.sendSync('closeRtsp', props.videoUrl); const res = ipcRenderer.sendSync('closeRtsp', props.videoUrl);
msg.value = res.msg; msg.value = res.msg;
// 销毁player实例
player.value.destroy();
}; };
// 关闭窗口 // 关闭窗口
function handleCancel() { function handleCancel() {

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

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

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

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

Write Preview
Loading…
Cancel
Save