feat:数据驾驶舱基础页面搭建

shuishen

2026-01-07 31b028f962e1cfe4c1ef91c706a90fd3aa983533

feat:数据驾驶舱基础页面搭建

 applications/drone-command/src/assets/images/dataCockpit/equipment.png

 applications/drone-command/src/assets/images/dataCockpit/warning.png

 applications/drone-command/src/page/index/top/index.vue

@@ -117,6 +117,7 @@
  justify-content: space-between;
  height: 100%;
  background: url('@/assets/images/topContainer/top-bg.png') center / 100% 100% no-repeat !important;
  pointer-events: none;
}

.top-bar__left {
@@ -157,6 +158,7 @@
  display: flex !important;
  align-items: center;
  height: 100%;
  pointer-events: auto;

  .icon-box {
    display: flex;

 applications/drone-command/src/styles/sidebar.scss

@@ -83,9 +83,10 @@
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        width: 2px;
        background: #0041FF;
        position: absolute;
        border-right: 1px solid #1D56FF;
      }

      background-color: rgba(0, 0, 0, .8);

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

@@ -1,13 +1,199 @@
<template>
    <div>
    <div class="center-container">
        <div class="left-box">
            <div class="logo">
                <img :src="warningLogo" alt="">
            </div>

            <div class="list">
                <div class="item" v-for="item, ind in warningList" :key="ind">
                    <div class="val" @click="warningTypeClick(item.type)">
                        {{ item.value }}
                    </div>

                    <div class="name">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>

        <div class="right-box">
            <div class="logo">
                <img :src="equipmentLogo" alt="">
            </div>

            <div class="list">
                <div class="item" v-for="item, ind in equipmentList" :key="ind">
                    <div class="val" :class="{highlight: item.isHighlight}" @click="equipmentClick(item.isHighlight)">
                        {{ item.value }}
                    </div>

                    <div class="name">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import warningLogo from '@/assets/images/dataCockpit/warning.png'
import equipmentLogo from '@/assets/images/dataCockpit/equipment.png'


let warningList = ref([
    {
        title: '实时告警',
        value: 56,
        type: 1
    },
    {
        title: '设备告警',
        value: 127,
        type: 2
    },
    {
        title: '历史告警',
        value: 619,
        type: 3
    },
])

let equipmentList = ref([
    {
        title: '设备统计',
        value: 18,
        isHighlight: true,
    },
    {
        title: '无线电',
        value: 9,
    },
    {
        title: '光电',
        value: 6,
    },
    {
        title: '雷达',
        value: 3,
    }
])

const warningTypeClick = (type) => {
    console.log('点击了告警类型：', type);
}

const equipmentClick = (isHighlight) => {
    if (isHighlight) {
        console.log('点击了设备统计');
    }
}
</script>

<style lang="scss" scoped>
.center-container {
    display: flex;
    position: absolute;
    top: 75px;
    left: 465px;
    z-index: 9;
    pointer-events: none;

    .left-box {
        width: 356px;

        .list {
            .item {
                .val {
                    color: #FF4444;
                    cursor: pointer;
                }
            }
        }
    }

    .right-box {
        margin-left: 20px;
        width: 455px;

        .list {
            .item {
                .val.highlight {
                    color: #6382FF;
                    cursor: pointer;
                }
            }
        }
    }

    .left-box,
    .right-box {
        padding: 17px 20px;
        display: flex;
        align-items: center;
        height: 100px;
        background: #05050F;
        box-sizing: border-box;
        border-radius: 16px 16px 16px 16px;
        pointer-events: auto;

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

        .list {
            width: 0;
            flex: 1;
            height: 100%;
            display: flex;

            .item {
                width: 0;
                flex: 1;
                position: relative;
                padding-left: 20px;
                color: #fff;

                .name {
                    font-family: Open Sans, Open Sans;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .val {
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: bold;
                    font-size: 30px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 1px;
                    height: 100%;
                    width: 1px;
                    background: #333355;
                }

                &:last-child::after {
                    display: none;
                }
            }
        }
    }
}
</style>

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

@@ -1,6 +1,8 @@
<template>
    <div>

    <div class="left-container">
        <div class="wrapper">
			
        </div>
    </div>
</template>


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

@@ -1,6 +1,8 @@
<template>
    <div>

    <div class="right-container">
        <div class="wrapper">
			
        </div>
    </div>
</template>


 applications/drone-command/src/views/dataCockpit/index.vue

@@ -2,7 +2,7 @@
 * @Author       : yuan
 * @Date         : 2026-01-06 16:35:50
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-07 15:20:14
 * @LastEditTime : 2026-01-07 17:33:02
 * @FilePath     : \applications\drone-command\src\views\dataCockpit\index.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
@@ -11,8 +11,8 @@
<template>
  <div class="page-container">
    <MapContainer />  
    <LeftContainer />  
    <RightContainer />  
    <LeftContainer class="left-container" />  
    <RightContainer class="right-container" />  
    <CenterContainer />  
  </div>
</template>
@@ -30,4 +30,45 @@
    width: 100%;
    height: 100%;
  }

  .left-container,
  .right-container {
    position: absolute;
    top: 96px;
    bottom: 0;
    width: 401px;
    z-index: 9;
    backdrop-filter: blur(5px);

    ::v-deep(.wrapper) {
      position: absolute;
      top: 17px;
      bottom: 20px;
      padding: 20px;
      width: 300px;
      background: rgba(0,0,0,0.3);
      border-radius: 10px 10px 10px 10px;
    }
  }

  .left-container {
    top: 96px;
    left: 0;
    background: linear-gradient( 270deg, rgba(17,23,34,0) 0%, rgba(17,23,34,0.56) 50%, rgba(17,23,34,0.96) 100%);

    ::v-deep(.wrapper) {
      left: 17px;
    }
  }

  .right-container {
    top: 54px;
    right: 0;
    background: linear-gradient( 270deg, rgba(17,23,34,0.96) 0.16%, rgba(17,23,34,0.56) 57.57%, rgba(4,30,37,0) 100%);

    ::v-deep(.wrapper) {
      top: 21px;
      right: 17px;
    }
  }
</style>