<!--
|
* @Author : yuan
|
* @Date : 2026-01-07 15:17:54
|
* @LastEditors : yuan
|
* @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" :class="{ collapsed: collapsedModel }">
|
<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 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([
|
{
|
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 historyVisible = ref(false)
|
const historyDevice = ref(null)
|
|
const onHistory = (item) => {
|
historyDevice.value = item
|
historyVisible.value = true
|
console.log('历史数据:', item.id)
|
}
|
|
const onCardClick = (item) => {
|
console.log('点击卡片:', item.id)
|
}
|
const toggleCollapse = () => {
|
collapsedModel.value = !collapsedModel.value
|
}
|
</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;
|
|
&.collapsed {
|
transform: translateX(100%);
|
}
|
}
|
|
.collapse-btn {
|
position: absolute;
|
top: 50%;
|
right: 357px;
|
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;
|
z-index: 10;
|
backdrop-filter: blur(5px);
|
transform: translateY(-50%);
|
|
.arrow {
|
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>
|
