Merge remote-tracking branch 'origin/master'

张含笑

2026-01-09 edaf70cb7f0c4e7c997ddab584b3b05798d58528

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

@@ -1,15 +1,15 @@
<!--
<!--
 * @Author       : yuan
 * @Date         : 2026-01-07 15:17:54
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-08 15:58:15
 * @LastEditTime : 2026-01-08 17:04:11
 * @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="right-container" :class="{ collapsed: collapsedModel }">
      <div class="wrapper">
         <TitleTemplate>侦测反制设备</TitleTemplate>

@@ -31,14 +31,35 @@
               @history="onHistory" @click="onCardClick" />
         </div>
      </div>

      <div class="collapse-btn" @click="toggleCollapse">
         <span class="arrow" :class="collapsedModel ? 'left' : 'right'"></span>
      </div>

      <DeviceHistoryDialog v-model="historyVisible" :device="historyDevice" />
   </div>
</template>

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

const props = defineProps({
   collapsed: {
      type: Boolean,
      default: false
   }
})

const emit = defineEmits(['update:collapsed'])

const collapsedModel = computed({
   get: () => props.collapsed,
   set: (val) => emit('update:collapsed', val)
})

const categoryList = ref([
   {
@@ -59,7 +80,7 @@
   {
      id: 'cd_001',
      name: '反制设备名称',
      actionText: '侦测中',          // 胶囊文案
      actionText: '侦测中',
      actionType: 'detecting',       // detecting | jamming | idle
      type: '察打一体',
      battery: 100,                  // 电量 %
@@ -86,12 +107,20 @@
   }
])

const historyVisible = ref(false)
const historyDevice = ref(null)

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

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

@@ -168,7 +197,7 @@

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

   &.collapsed {
      transform: translateX(100%);
@@ -178,9 +207,7 @@
.collapse-btn {
   position: absolute;
   top: 50%;
   left: -24px;
   width: 24px;
   height: 60px;
   right: 357px;
   background: rgba(17, 23, 34, 0.8);
   border: 1px solid #333355;
   border-right: none;
@@ -190,28 +217,18 @@
   align-items: center;
   justify-content: center;
   color: #fff;
   transform: translateY(-50%);
   z-index: 10;
   backdrop-filter: blur(5px);
   transform: translateY(-50%);

   .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);
      }
      width: 24px;
      height: 24px;
      background: url('@/assets/images/dataCockpit/right-btn.png') center / 100% 100% no-repeat;
   }

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