高空瞭望视频监控

src/views/sys/exception/VideoSupervision.vue

@@ -36,7 +36,15 @@
       <UAV v-show="false" @toPosition="toPosition" @handlerUpdateUavLayerData="handlerUpdateUavLayerData" @handlerLayerButtonClick="handlerLayerButtonClick"></UAV>
     </div>
     <!-- monitor -->
-    <Monitor  :currentMonitor="monitorInfo" @register="registerModal" />
+    <!-- <Monitor  :currentMonitor="monitorInfo" @register="registerModal" /> -->
+
+    <!-- TCVideo -->
+    <div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
+      <div class="close-button" @click="showTCLPlayer = false;">
+       <CloseOutlined></CloseOutlined>
+      </div>
+      <TCVideo v-if="showTCLPlayer"></TCVideo> 
+    </div>
   </div>
 
   <a-modal
@@ -59,6 +67,7 @@
 import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
 import SearchComponent from './VideoSupervision/search/index.vue'  
 import Map from './VideoSupervision/map/map.vue';
+import {PlayCircleOutlined,EnvironmentOutlined,CloseOutlined} from "@ant-design/icons-vue"
   import LayerControl from './VideoSupervision/layercontrol/index.vue';
   import TifList from './VideoSupervision/tiflist/index.vue'
   import CaseList from './VideoSupervision/caselist/index.vue';
@@ -67,6 +76,7 @@ import Map from './VideoSupervision/map/map.vue';
   import { useRouter } from 'vue-router';
   import { PageEnum } from '@/enums/pageEnum';
   import Monitor from './VideoSupervision/monitor/Monitor.vue';
+  import TCVideo from './VideoSupervision/monitor/index.vue';
   import { useModal } from '@/components/Modal';
   import { useI18n } from '@/hooks/web/useI18n';
   import { useMessage } from '@/hooks/web/useMessage';
@@ -105,10 +115,16 @@ import Map from './VideoSupervision/map/map.vue';
   const monitorInfo = ref();
   const [registerModal, { openModal: openMonitorModal }] = useModal();
 
-  function showMonitorFunction(val) {
-    console.log(val);
-    monitorInfo.value = val;
-    openMonitorModal(true, val);
+  // function showMonitorFunction(val) {
+  //   console.log(val);
+  //   monitorInfo.value = val;
+  //   openMonitorModal(true, val);
+  // }
+  
+  const showTCLPlayer = ref(false);
+  function showMonitorFunction(val){
+
+    showTCLPlayer.value = true;
   }
 
 //   to positon
@@ -330,4 +346,25 @@ onMounted(() => {
     left:50px;
     z-index:9999;
 }
+
+.TC-videoi-container{
+  position: absolute;
+  bottom:48px;
+  right:38px;
+  width:418px;
+  height:300px;
+  .close-button{
+    width:28px;
+    height:28px;
+    background:rgba(0, 0, 0, 0.6);
+    text-align: center;
+    line-height:28px;
+    position:absolute;
+    top:4px;
+    right:4px;
+    z-index:999999;
+    color:#fff;
+    cursor:pointer;
+  }
+}
 </style>

src/views/sys/exception/VideoSupervision/map/map.vue

@@ -724,6 +724,12 @@ import { TableOutlined, GlobalOutlined,HomeOutlined} from '@ant-design/icons-vue
       });
       map.setTerrain({ source: "mapbox-dem", exaggeration: 1 });
 
+      // 设置2D地图
+      map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
+        map.dragRotate.disable(); // 禁用拖动旋转
+        map.pitchWithRotate = false; // 禁用旋转时俯仰变化
+        mapAngle.value = "2D";
+
     });
   });
   // 视频监控
@@ -740,7 +746,34 @@ import { TableOutlined, GlobalOutlined,HomeOutlined} from '@ant-design/icons-vue
       },
     }).then((res) => {
       // console.log("res333",res.data.features);
-      addMonitorLayer(res.data.features);
+
+      let data = [{
+        "type": "Feature",
+        "id": "monitornest2.1",
+        "geometry": {
+            "type": "Point",
+            "coordinates": [
+              118.429056,
+              35.387537
+            ]
+        },
+        "geometry_name": "geom",
+        "properties": {
+            "id": 1,
+            "cameraindexcode": "41a59135f4284841aa4addf3dd83a05e",
+            "cameraname": "沂南县砖埠镇东岳庄村北可见光",
+            "cameratype": "0",
+            "camerat_01": "xres.query.camera.type.qj",
+            "channelno": "1",
+            "updatetime": "45255.7759867824",
+            "transtype": "1",
+            "transtypen": "TCP",
+            "creater_id": "1",
+            "is_del": 0
+        }
+    }]
+      // addMonitorLayer(res.data.features);
+      addMonitorLayer(data);
       // if (res.data.code == 200) {
         // addMonitorLayer(res.data.result);
       //   console.log("jiankong",res.data.result)
@@ -1257,4 +1290,6 @@ const handlerInitialize = ()=>{
     line-height:100px;
     text-align:center;
 }
+
+
 </style>

src/views/sys/exception/VideoSupervision/monitor/Monitor.vue

@@ -1,8 +1,8 @@
 <!-- 海康威视组件 -->
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" title="视频监控" @cancel="closeMonitor" :mask="false">
+  <BasicModal v-bind="$attrs" @register="registerModal" title="视频监控" @cancel="closeMonitor">
     <div>{{ monitorInfo ? monitorInfo.name : '' }}</div>
-    <!-- <div id="playWnd" class="playWnd"></div> -->
+    <div id="playWnd" class="playWnd"></div>
   </BasicModal>
 </template>
 
@@ -38,7 +38,7 @@
     }
     monitorInfo.value = obj;
     console.log(obj);
-    // initPlugin();
+    initPlugin();
   });
   const WebControl = window.WebControl; //index.html引入 直接从window里面拿到sdk
   const JSEncrypt = window.JSEncrypt; //index.html引入 直接从window里面拿到sdk

src/views/sys/exception/VideoSupervision/monitor/index.vue

@@ -0,0 +1,175 @@
+
+<template>
+    <div class="uav-container">
+        <div class="title">
+            视频监控
+        </div>
+        <div v-show="isShowPlayer">
+
+            <div class="close-video-button">
+                <CloseOutlined />
+            </div>
+
+            <video
+                class="video-container"
+                id="TCPlaeyrContainer"
+                width="235px"
+                height="178px"
+                autoplay
+                preload="auto"
+                playsinline
+                webkit-playsinline
+            ></video>
+        </div>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+import {ref,onMounted,onBeforeUnmount} from 'vue';
+
+
+
+const isShowPlayer = ref(false);
+
+let player = null;
+
+function handlerPlayVideo(item){
+    isShowPlayer.value = true;
+
+    if (player) {
+        player.src("http://221.2.83.254:7012/live/37130100181328000001.flv");
+    } else {
+        player = TCPlayer("TCPlaeyrContainer", {});
+        player.src("http://221.2.83.254:7012/live/37130100181328000001.flv");
+    }
+}
+
+onMounted(()=>{
+    setTimeout(function(){
+        handlerPlayVideo(123);
+    },1000)
+
+})
+
+onBeforeUnmount(()=>{
+    player.dispose();
+    player = null
+})
+
+</script>
+
+<style type="less" scoped>
+
+.uav-container{
+    width: 418px;
+    height: 300px;
+    background:#041B36;
+    position: relative;
+    &::before{
+        content:"";
+        height:70%;
+        width:50px;
+        position:absolute;
+        bottom:10px;
+        left:10px;
+        background:url("/videosupervision/main-left.png");
+        background-size:100% 100%;
+    }
+    &::after{
+        content:"";
+        height:70%;
+        width:50px;
+        position:absolute;
+        bottom:10px;
+        right:10px;
+        background:url("/videosupervision/main-right.png");
+        background-size:100% 100%;
+    }
+    .title{
+        width:100%;
+        height:40px;
+        background-image:url("/videosupervision/title.png");
+        background-size:100% 100%;
+        line-height:40px;
+        text-indent:18px;
+        font-size:18px;
+        font-weight:bold;
+        color:#fff;
+    }
+    .switch-button{
+        float:right;
+        margin-right:20px;
+    }
+    .uav-list-container{
+        width:100%;
+        height: calc( 100% - 60px);
+        overflow:auto;
+        padding:20px 20px;
+        position:relative;
+        z-index:999;
+        .uav-empty{
+            width:100%;
+            height:100%;
+            text-align:center;
+            color:#999;
+            img{
+                width:120px;
+                margin:40px 0px 18px 0px;
+            }
+        }
+        .uav-item{
+            width:100%;
+            height:40px;
+            padding:0px 15px;
+            line-height:40px;
+            color:#f1f1f1;
+            display:flex;
+            background:rgba(0,0,0,0.2);
+            &:hover{
+                background:rgba(0,0,0,0.4);
+            }
+            div{
+                flex:1;
+            }
+            .position{
+                max-width:30px;
+                cursor:pointer;
+            }
+            .play{
+                max-width:30px;
+                cursor:pointer;
+            }
+        }
+    }
+
+    .video-container{
+        width: calc( 100% - 30px);
+        height: calc( 100% - 70px);
+        position:absolute;
+        margin:15px;
+        top:40px;
+        right:0px;
+        z-index:1000;
+        background:#041B36;
+        .video-contain {
+            width: 100%;
+            height: 100%;
+        }
+        
+    }
+    .close-video-button{
+        position:absolute;
+        top:40px;
+        right:10px;
+        background:rgba(0,0,0,0.3);
+        z-index:100100;
+        color:#fff;
+        padding:10px;
+        cursor:pointer;
+        &:hover{
+            color:#408eff;
+        }
+    }
+}   
+</style>