Merge remote-tracking branch 'origin/master'

罗广辉

2026-01-08 31d0fc3caacc159faddf0c4f3bb4f84bf7a00c69

 applications/drone-command/src/views/dataCockpit/components/RightContainer.vue

@@ -1,15 +1,217 @@
<!--
 * @Author       : yuan
 * @Date         : 2026-01-07 15:17:54
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-08 15:58:15
 * @FilePath     : \applications\drone-command\src\views\dataCockpit\components\RightContainer.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
 * 2026-01-07 15:17:54
-->
<template>
   <div class="right-container">
      <div class="wrapper">
			
         <TitleTemplate>侦测反制设备</TitleTemplate>

         <div class="category-container">
            <div class="category-item" v-for="(item, ind) in categoryList" :key="ind">
               <div class="category-item-logo">
                  <img :src="item.logo" alt="">
               </div>

               <div class="category-item-content">
                  <span class="name">{{ item.name }}</span>
                  <span class="val">{{ item.val }}</span>
               </div>
            </div>
         </div>

         <div class="content">
            <RealEquipmentTemplate v-for="item in counterDeviceStatusList" :key="item.id" :data="item"
               @history="onHistory" @click="onCardClick" />
         </div>
      </div>
   </div>
</template>

<script setup>
import TitleTemplate from './templateComponents/TitleTemplate.vue'
import RealEquipmentTemplate from './templateComponents/RealEquipmentTemplate.vue'
import zcsbLogo from '@/assets/images/dataCockpit/zcsb.png'
import fzsbLogo from '@/assets/images/dataCockpit/fzsb.png'

const categoryList = ref([
   {
      id: 1,
      name: '侦测设备',
      val: 169,
      logo: zcsbLogo
   },
   {
      id: 2,
      name: '反制设备',
      val: 169,
      logo: fzsbLogo
   }
])

const counterDeviceStatusList = ref([
   {
      id: 'cd_001',
      name: '反制设备名称',
      actionText: '侦测中',          // 胶囊文案
      actionType: 'detecting',       // detecting | jamming | idle
      type: '察打一体',
      battery: 100,                  // 电量 %
      azimuth: 14,                   // 方位角
      pitch: 14,                     // 俯仰角
      statusText: '在线',            // 状态
      vendor: '厂商名称',            // 厂商
      targetCount: 10,               // 侦测目标
      range: '1.2KM'                 // 有效范围
   },
   {
      id: 'cd_002',
      name: '反制设备名称',
      actionText: '信号干扰中',
      actionType: 'jamming',
      type: '察打一体',
      battery: 100,
      azimuth: 14,
      pitch: 14,
      statusText: '在线',
      vendor: '厂商名称',
      targetCount: 10,
      range: '1.2KM'
   }
])

const onHistory = (item) => {
   console.log('历史数据：', item.id)
}

const onCardClick = (item) => {
   console.log('点击卡片：', item.id)
}
</script>

<style lang="scss" scoped>
.category-container {
   margin-top: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   box-sizing: border-box;

   .category-item {
      position: relative;
      width: 0;
      flex: 1;
      display: flex;
      height: 64px;

      &-logo {
         display: flex;
         align-items: center;

         img {
            width: 40px;
            height: 40px;
         }
      }

      &-content {
         width: 0;
         flex: 1;
         display: flex;
         flex-direction: column;
         border-bottom: 1px solid #6C6C89;

         span {
            margin-left: 8px;
         }

         .name {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 16px;
            color: #C3C3DD;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
         }

         .val {
            margin-top: 10px;
            font-family: DIN, DIN;
            font-weight: bold;
            font-size: 22px;
            color: #FFFFFF;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
         }
      }
   }
}

.content {
   height: 0;
   flex: 1;
   margin-top: 20px;
   overflow-x: hidden;
   overflow-y: auto;
}

.right-container {
   transition: transform 0.3s ease-in-out;
   /* position: relative; Removed to avoid conflict with parent absolute positioning */

   &.collapsed {
      transform: translateX(100%);
   }
}

.collapse-btn {
   position: absolute;
   top: 50%;
   left: -24px;
   width: 24px;
   height: 60px;
   background: rgba(17, 23, 34, 0.8);
   border: 1px solid #333355;
   border-right: none;
   border-radius: 4px 0 0 4px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   transform: translateY(-50%);
   z-index: 10;
   backdrop-filter: blur(5px);

   .arrow {
      border: solid #fff;
      border-width: 0 2px 2px 0;
      display: inline-block;
      padding: 3px;
      transition: transform 0.3s;

      &.left {
         transform: rotate(135deg);
      }

      &.right {
         transform: rotate(-45deg);
      }
   }

   &:hover {
      background: rgba(40, 79, 227, 0.6);
   }
}
</style>