无人机、监控列表

src/views/business/alarm/monitor.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="monitor-container">
+  <div class="monitor-container" @mousedown="drag">
     <div class="tab">
         <div v-for="(item,index) in tabs"
             :key="index"
             :class="['tab-item',active === index ? 'active' : '']"
             @click="handle(index)">{{item}}</div>
     </div>
+    <div class="resize" :style="{ resize: 'both', overflow: 'auto' }"></div>
     <!-- <div class="flv-container"><FlvPlayerComponent :url="uavDialog.url"/></div> -->
   </div>
 </template>
 <script setup>
 import { ref } from 'vue'
+import { dragEvent, resizeEvent } from '@/utils/common'
 import FlvPlayerComponent from '@/components/FlvPlayer/index.vue'
 import { getAssetsFile } from '@/utils/common'
 const tabs = [
@@ -20,6 +22,26 @@ const active = ref(0)
 
 const handle = (index) => {
     active.value = index
+}
+/**
+ * 拖拽事件
+ * @param e
+ *
+ */
+ const drag = (e) => {
+  if(e.target.className === 'resize') {
+resizeEvent(e, 'resize', (i) => {
+  document.querySelector('.monitor-container').style.height = i.height + 'px'
+  document.querySelector('.monitor-container').style.width = i.width + 'px'
+    })
+  }else{
+dragEvent(e, 'monitor-container', () => {
+    })
+  }
+
+}
+const resize = (e) => {
+
 }
 </script>
 <style scoped lang="scss">
@@ -28,6 +50,7 @@ const handle = (index) => {
   position: fixed;
   right: 40px;
   bottom: 46px;
+
 //   display: flex;
 //   flex-direction: column;
 //   gap: 20px;
@@ -38,6 +61,13 @@ const handle = (index) => {
   border: 1px solid;
   border-image: linear-gradient(270deg, rgba(42, 159, 255, 0.2), rgba(42, 159, 255, 0.8)) 1 1;
   padding: 20px;
+  .line{
+    position: absolute;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100%;
+    height: 20px;
+  }
   .tab{
     display: flex;
     .tab-item{
@@ -64,5 +94,12 @@ const handle = (index) => {
     width: 100%;
     margin-top: 10px;
   }
+  .resize{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 524px;
+  height: 386px;
+  }
 }
 </style>