erqi-web/src/views/business/alarm/monitor.vue

<template>
  <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 = [
    '重新轮询', '巡检报告'
]
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">

.monitor-container{
  position: fixed;
  right: 40px;
  bottom: 46px;

//   display: flex;
//   flex-direction: column;
//   gap: 20px;

  width: 524px;
  height: 386px;
  background: linear-gradient( 90deg, #0C1929 0%, rgba(12,25,41,0.6) 100%);
  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{
        background: linear-gradient( 180deg, rgba(46,164,240,0.26) 0%, #2EA4F0 100%);
        box-shadow: inset 0px -1px 2px 0px rgba(83,203,255,0.22);
        color: #FFFFFF;
        font-size: 14px;
        width: 50%;
        height: 36px;
        text-align: center;
        line-height: 36px;
        box-sizing: border-box;
        &.active{
            background: linear-gradient( 180deg, #2EA4F0 0%, rgba(46,164,240,0.35) 100%);
            box-shadow: inset 0px 2px 4px 0px rgba(83,203,255,0.4);
            // border-radius: 2px 2px 0px 0px;
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(22, 213, 255, 1), rgba(22, 213, 255, 0)) 1 1;
            clip-path: inset(0 0 round 2px);
        }
    }
  }
  .flv-container{
    width: 100%;
    margin-top: 10px;
  }
  .resize{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 524px;
  height: 386px;
  }
}
</style>