yjhtgl-web/src/views/globalMap/RightMenu/UAV/DroneDetail.vue

<template>
  <div class="detail-dialog" v-drag="{ draggable: true, scale: containerScale, handle: '.dialog-header' }">
    <div class="dialog-header">
      <div class="gradient-text">详情</div>
      <div class="close-btn" @click="handleClose" />
    </div>
    <div class="dialog-content">
      <div class="video-box">
        <HKVideo ref="videoRef" :dot_data="videoData" :isNoLive="isFlyVideo" autoplay />
      </div>
      <div class="title-box">{{ detailData.name }}</div>
      <div class="btn-box">
        <div class="btn1" @click="handleFullScreen">
          <i class="icon-full" />
          <div>视频全屏</div>
        </div>
        <div class="btn2" @click="handleVideoRefresh">
          <i class="icon-refresh" />
          <div>刷新</div>
        </div>
        <div class="btn3" @click="handleSwitchFlyVideo">
          <i class="icon-switch" />
          <div>{{ isFlyVideo ? '切换监控视频' : '切换飞行视频' }}</div>
        </div>
      </div>
      <div class="title-box2">
        <i class="icon-info" />
        <div>机库/无人机信息</div>
      </div>
      <div class="box">
        <div class="box-flex">
          <i class="icon1" />
          <div class="gradient-text">机库</div>
        </div>
        <div class="box-right">
          <div class="box-line">
            <div class="box-item" style="flex: 1">
              <div>网速：</div>
              <div class="gradient-text">
                {{ detailData.hangarInfo && !!detailData.hangarInfo.internetSpeed ? detailData.hangarInfo.internetSpeed : '-' }}
              </div>
              <div>kb/s</div>
            </div>
            <div class="box-item" style="flex: 1">
              <div>机房温度：</div>
              <div class="gradient-text">
                {{ detailData.hangarInfo && !!detailData.hangarInfo.temperature ? detailData.hangarInfo.temperature : '-' }}
              </div>
              <div>℃</div>
            </div>
          </div>
          <div class="box-line">
            <div class="box-item">
              <div>机库风速：</div>
              <div class="gradient-text">
                {{ detailData.hangarInfo && !!detailData.hangarInfo.windSpeed ? detailData.hangarInfo.windSpeed : '-' }}
              </div>
              <div>m/s</div>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="box-flex">
          <i class="icon2" />
          <div class="gradient-text">无人机</div>
        </div>
        <div class="box-right">
          <div class="box-line">
            <div class="box-item" style="flex: 1">
              <div>网速：</div>
              <div class="gradient-text">
                {{ detailData.droneInfo && !!detailData.droneInfo.internetSpeed ? detailData.droneInfo.internetSpeed : '-' }}
              </div>
              <div>kb/s</div>
            </div>
            <div class="box-item" style="flex: 1">
              <div>机房温度：</div>
              <div class="gradient-text">
                {{ detailData.droneInfo && !!detailData.droneInfo.temperature ? Number(detailData.fly_info.temperature).toFixed(1) : '-' }}
              </div>
              <div>℃</div>
            </div>
          </div>
          <div class="box-line">
            <div class="box-item">
              <div>机库风速：</div>
              <div class="gradient-text">
                {{ detailData.droneInfo && !!detailData.droneInfo.windSpeed ? detailData.droneInfo.windSpeed : '-' }}
              </div>
              <div>m/s</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import HKVideo from '@/components/HKVideo/index2.vue';
interface DetailData {
  name: string;
  fly_url: string;
  nest_url: string;
}
const props = defineProps({
  modelValue: Boolean,
  detailData: Object as PropType<DetailData>,
  id: String
});
const emits = defineEmits(['update:modelValue']);
const containerScale = inject('containerScale');
let isFlyVideo = ref(false);
const videoData = computed(() => {
  const data = props.detailData ? props.detailData : { drone_name: '', fly_url: '', nest_url: '' };
  return {
    name: data.drone_name,
    video_code: !!isFlyVideo.value ? data.fly_url : data.nest_url
  };
});

let videoRef = ref();

// 视频全屏
const handleFullScreen = () => {
  videoRef.value.handleFullScreen();
};

// 刷新
const handleVideoRefresh = () => {
  videoRef.value.refresh_data();
};

// 切换飞行视频
const handleSwitchFlyVideo = () => {
  isFlyVideo.value = !isFlyVideo.value;
  nextTick(() => {
    handleVideoRefresh();
  });
};

const handleClose = () => {
  emits('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.detail-dialog {
  position: absolute;
  top: 0;
  left: -402px;
  width: 402px;
  z-index: 9;
  height: 757px;
  background: url('@/assets/images/map/rightMenu/uva/content4.png') no-repeat;
  background-size: 100% 100%;
  padding: 20px 35px;
  .dialog-header {
    width: 332px;
    height: 44px;
    background: url('@/assets/images/map/rightMenu/uva/line.png') no-repeat left bottom;
    background-size: 100% 28px;
    position: relative;
    .gradient-text {
      font-size: 26px;
      padding-left: 10px;
      padding-top: 6px;
    }
    .close-btn {
      position: absolute;
      top: 9px;
      right: 5px;
      width: 15px;
      height: 15px;
      background: url('@/assets/images/map/rightMenu/uva/close.png') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .dialog-content {
    padding: 0 6px;
    .video-box {
      width: 100%;
      height: 150px;
      background: url('@/assets/images/video/videoBg.png') no-repeat;
      background-size: 100% 100%;
      padding: 8px 5px 8px 8px;
    }
    .title-box {
      width: 406px;
      height: 43px;
      background: url('@/assets/images/map/rightMenu/uva/titleBox.png') no-repeat left bottom;
      background-size: 100% 41px;
      color: #fff;
      font-size: 16px;
      padding-left: 32px;
    }
    .btn-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      .btn1 {
        width: 105px;
        height: 28px;
        background: url('@/assets/images/map/rightMenu/uva/btn3.png') no-repeat;
      }
      .btn2 {
        width: 62px;
        height: 28px;
        background: url('@/assets/images/map/rightMenu/uva/btn4.png') no-repeat;
      }
      .btn3 {
        width: 132px;
        height: 28px;
        background: url('@/assets/images/map/rightMenu/uva/btn5.png') no-repeat;
      }
      .btn1,
      .btn2,
      .btn3 {
        background-size: 100% 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f2f6f8;
        font-size: 16px;
      }
      .icon-full {
        margin-left: -3px;
        width: 24px;
        height: 24px;
        background: url('@/assets/images/map/rightMenu/uva/full.png') no-repeat;
        background-size: 100% 100%;
      }
      .icon-refresh {
        margin-left: -3px;
        width: 24px;
        height: 24px;
        background: url('@/assets/images/map/rightMenu/uva/refresh.png') no-repeat;
        background-size: 100% 100%;
      }
      .icon-switch {
        margin-left: -3px;
        width: 22px;
        height: 22px;
        background: url('@/assets/images/map/rightMenu/uva/switch.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    .title-box2 {
      width: 171px;
      height: 32px;
      background: url('@/assets/images/map/rightMenu/uva/titleBox2.png') no-repeat;
      background-size: 100% 100%;
      color: #fff;
      font-size: 16px;
      display: flex;
      align-items: center;
      padding-left: 6px;
      .icon-info {
        width: 41px;
        height: 45px;
        background: url('@/assets/images/map/rightMenu/uva/info2.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 3px;
      }
    }
    .box {
      width: 316px;
      height: 82px;
      background: url('@/assets/images/map/rightMenu/uva/box.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 15px;
      .box-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 25px;
        .gradient-text {
          font-weight: normal;
        }
      }
      .icon1 {
        width: 52px;
        height: 59px;
        background: url('@/assets/images/map/rightMenu/uva/icon1.png') no-repeat;
        background-size: 100% 100%;
      }
      .icon2 {
        width: 52px;
        height: 56px;
        background: url('@/assets/images/map/rightMenu/uva/icon2.png') no-repeat;
        background-size: 100% 100%;
      }
      .box-right {
        flex: 1;
        .box-line {
          display: flex;
          padding: 3px 0;
        }
        .box-item {
          display: flex;
          color: #7a9ab6;
          font-size: 14px;
          .gradient-text {
            margin-right: 3px;
          }
        }
      }
    }
  }
}
</style>