视频播放 补充销毁player实例

.env.development

@@ -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/

src/views/military/modules/Home.vue

@@ -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')">
+              <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"
-                  <span class="a-card-title" ref="cardTitle">视频监控</span>
+                /></template>
-                </a-card>
+                <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')">
+              <a-card
-                  <template #cover>
+                hoverable
-                    <img slot="cover" alt="example" src="@/assets/earthMap/map.png" class="cardImg" ref="cardImg" />
+                class="a-card"
-                  </template>
+                @mouseenter="mouseOver($event, 2)"
-
+                @mouseleave="mouseLeave($event, 2)"
-                  <span class="a-card-title" ref="cardTitle">电子地图</span>
+                @click="jumpTo('electronicMap')"
-                </a-card>
+              >
+                <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)"
+              <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>
               </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)"
+              <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>
               </a-card>
             </a-col>
             <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>
               </a-card>
             </a-col>
             <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>
               </a-card>
             </a-col>
-
-
           </a-row>
         </div>
       </div>
@@ -74,303 +74,300 @@
 </template>
 
 <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,
+        {
-    params: param
+          url: url,
-  }, { isTransformResponse: false })
+          params: param,
-    // getAction(url, param)
+        },
-    .then((res) => {
+        { isTransformResponse: false }
-      console.log('res', res)
+      )
-      if (res.success) {
+      // getAction(url, param)
-        msg.value = res.message
+      .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
   }
-  e.currentTarget.children[0].children[0].src = imgSrc
+
-  e.currentTarget.children[1].children[0].style.color = '#13C2C2'
+  function mouseOver(e, index) {
-}
+    let imgSrc = '';
-
+    switch (index) {
-
+      case 1:
-function mouseLeave(e, index) {
+        // imgSrc = require('@/assets/earthMap/photoelectricity_hover.png')
-  let imgSrc = ''
+        imgSrc = photoelectricity_hover;
-  switch (index) {
+        break;
-    case 1:
+      case 2:
-      imgSrc = photoelectricity
+        imgSrc = map_hover;
-      break
+        break;
-    case 2:
+      case 3:
-      imgSrc = map
+        imgSrc = scene_hover;
-      break
+        break;
-    case 3:
+      case 4:
-      imgSrc = scene
+        imgSrc = configMan;
-      break
+        break;
-    case 4:
+      case 5:
-      imgSrc = configMan
+        imgSrc = camera_management_hover;
-      break
+        break;
-    case 5:
+      case 6:
-      imgSrc = camera_management
+        imgSrc = warnInfo_hover;
-      break
+        break;
-    case 6:
+    }
-      imgSrc = warnInfo
+    e.currentTarget.children[0].children[0].src = imgSrc;
-      break
+    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 mouseLeave(e, index) {
-}
+    let imgSrc = '';
-
+    switch (index) {
-function openPage(index) {
+      case 1:
-  let routePath = ''
+        imgSrc = photoelectricity;
-  switch (index) {
+        break;
-    case 1:
+      case 2:
-      routePath = '/device/PhotoelectricView'
+        imgSrc = map;
-      break
+        break;
-    case 2:
+      case 3:
-      routePath = '/device/RadarDetectionView'
+        imgSrc = scene;
-      break
+        break;
-    case 3:
+      case 4:
-      // routePath = '/device/SiteView'
+        imgSrc = configMan;
-      routePath = '/scene/manage'
+        break;
-      break
+      case 5:
-    case 4:
+        imgSrc = camera_management;
-      routePath = '/device/info'
+        break;
-      break
+      case 6:
-    case 5:
+        imgSrc = warnInfo;
-      // routePath = '/device/PerimeterAlarmView'
+        break;
-      routePath = '/cameraManage'
+    }
-      break
+    e.currentTarget.children[0].children[0].src = imgSrc;
-    case 6:
+    e.currentTarget.children[1].children[0].style.color = '#707070';
-      routePath = '/prewarn/manage'
-      break
   }
 
-  router.push({ path: routePath })
+  function openPage(index) {
-  /* index == 2
+    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 {
+  .homeBG {
-  background-color: #fff;
+    background-color: #fff;
-  padding: 20px;
+    padding: 20px;
-  text-align: center;
+    text-align: center;
-  /* 设置子元素居中 */
+    /* 设置子元素居中 */
-  display: flex;
+    display: flex;
-  justify-content: center;
+    justify-content: center;
-  align-items: 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);
   }
 
-  55.5% {
+  .markdown a:hover,
-    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+  .markdown u,
-    transform: skewX(1.5625deg) skewY(1.5625deg);
+  a:hover {
+    text-decoration: none !important;
   }
 
-  66.6% {
+  .cardImg {
-    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    width: 64px;
-    transform: skewX(-0.78125deg) skewY(-0.78125deg);
   }
 
-  77.7% {
+  .ant-card-cover {
-    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    text-align: -webkit-center;
-    transform: skewX(0.390625deg) skewY(0.390625deg);
+    padding: 15% 15% 10% 15%;
-  }
-
-  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% {
+  .ant-card-meta-title {
-    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+    color: #707070 !important;
-    transform: skewX(-12.5deg) skewY(-12.5deg);
   }
 
-  33.3% {
+  .a-card {
-    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+    width: 200px;
-    transform: skewX(6.25deg) skewY(6.25deg);
+    height: 200px;
+    border-radius: 5% !important;
+    color: #fff;
   }
 
-  44.4% {
+  .a-card:hover {
-    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+    -webkit-animation-name: move;
-    transform: skewX(-3.125deg) skewY(-3.125deg);
+    animation-name: move;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
   }
 
-  55.5% {
+  .a-card-title {
-    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+    overflow: hidden;
-    transform: skewX(1.5625deg) skewY(1.5625deg);
+    color: #707070;
+    font-weight: 500;
+    font-size: 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
-  66.6% {
+  .a-card-title:hover {
-    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+    color: #f30d0d;
-    transform: skewX(-0.78125deg) skewY(-0.78125deg);
   }
 
-  77.7% {
+  @-webkit-keyframes move {
-    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+    from,
-    transform: skewX(0.390625deg) skewY(0.390625deg);
+    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% {
+  @keyframes move {
-    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    from,
-    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+    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>
-</style>

src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue

@@ -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() {

src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue

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

src/views/system/loginmini/CanvasVideoPage.vue

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