Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-03-28 9b178c3f200efa15fbfee7aa67d09177bca84d47

Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard

 src/assets/images/home/homeRight/operate1.png

 src/assets/images/home/homeRight/operate2.png

 src/assets/images/home/homeRight/operate3.png

 src/assets/images/home/searchBox/searchBg1.png

 src/assets/images/home/searchBox/searchBg2.png

 src/assets/images/home/searchBox/searchBg3.png

 src/layout/Header.vue

@@ -1,23 +1,82 @@
<template>
  <div class="header">
    <div class="h-left">
      <div class="left-item active" @click="router.push('/')">首页</div>
      <div class="left-item">集群调度</div>
      <div class="left-item" @click="router.push('/taskManage')">任务管理</div>
      <div class="left-item">航线规划</div>
      <div
        v-for="(item, index) in leftList"
        :key="index"
        class="left-item"
        :class="{ active: item.active }"
        @click="handleClick(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="big-title">江西省指挥调度平台</div>
    <div class="h-right">
      <div class="right-item">AI识别分析</div>
      <div class="right-item">综合分析</div>
      <div class="right-item">数据中心</div>
      <div class="right-item">系统运维</div>
      <div
        v-for="(item, index) in rightList"
        :key="index"
        class="right-item"
        :class="{ active: item.active }"
        @click="handleClick(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
const router = useRouter()
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Message } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const router = useRouter();
const route = useRoute();

const leftList = ref([
  { name: '首页', active: true, path: '/index' },
  { name: '集群调度', active: false, path: '/clusterScheduling' },
  { name: '任务管理', active: false, path: '/taskManage' },
  { name: '航线规划', active: false, path: '/routePlanning' },
]);

const rightList = ref([
  { name: 'AI识别分析', active: false, path: '/aiAnalysis' },
  { name: '综合分析', active: false, path: '/comprehensiveAnalysis' },
  { name: '数据中心', active: false, path: '/dataCenter' },
  { name: '系统运维', active: false, path: '/systemMaintenance' },
]);

const handleClick = ({ path, name }) => {
  if (!['首页', '任务管理'].includes(name)) return ElMessage.warning('正在开发中');
  // 更新 leftList 的 active 状态
  leftList.value.forEach(item => {
    item.active = item.router === path;
  });

  // 更新 rightList 的 active 状态
  rightList.value.forEach(item => {
    item.active = item.router === path;
  });
  console.log(path);
  // 跳转到指定页面
  router.push(path);
};

onMounted(() => {
  // 初始化 leftList 的 active 状态
  const currentPath = route.path;
  leftList.value.forEach(item => {
    item.active = item.router === currentPath;
  });

  // 初始化 rightList 的 active 状态
  rightList.value.forEach(item => {
    item.active = item.router === currentPath;
  });
});
</script>

<style scoped lang="scss">
@@ -40,7 +99,7 @@
      background: url(@/assets/images/header-left.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 3px;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei,serif;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
@@ -48,6 +107,7 @@
      text-align: center;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }

    .active {
@@ -55,6 +115,7 @@
      background-size: 100% 100%;
    }
  }

  .big-title {
    position: relative;
    top: -12px;
@@ -63,14 +124,16 @@
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 45px;
    color: #FFFFFF;
    color: #ffffff;
    line-height: 53px;
    letter-spacing: 11px;
    text-shadow: 0px 4px 1px rgba(19,80,143,0.66), 0px 0px 18px rgba(130,165,255,0.4), inset 0px 0px 2px rgba(255,255,255,0.8);
    text-shadow: 0px 4px 1px rgba(19, 80, 143, 0.66), 0px 0px 18px rgba(130, 165, 255, 0.4),
      inset 0px 0px 2px rgba(255, 255, 255, 0.8);
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .h-right {
    display: flex;
    justify-content: space-between;
@@ -82,7 +145,7 @@
      background: url(@/assets/images/header-right.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 3px;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei,serif;
      font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;

 src/views/Home/Home.vue

@@ -1,22 +1,21 @@
<template>
    <HomeLeft></HomeLeft>
    <!-- <div>中间搜索</div> -->
    <HomeRight></HomeRight>
  <HomeLeft></HomeLeft>
  <!-- <div>中间搜索</div> -->
  <HomeRight></HomeRight>

  <SearchBox />
</template>

<script setup>
import HomeRight from './components/HomeRight/HomeRight.vue';
import HomeLeft from '@/views/Home/components/HomeLeft/HomeLeft.vue';
import { getAggregation } from '@/views/Home/aggregation';
import SearchBox from '@/views/Home/SearchBox.vue';

onMounted(() => {
  nextTick(() => {
    getAggregation()
  })
})



    getAggregation();
  });
});
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

 src/views/Home/SearchBox.vue

@@ -1,13 +1,137 @@
<script setup>
const input3 = ref('');

const value = ref('Option1');
const value2 = ref('Optio44n1');

const options = [
  {
    value: 'Option1',
    label: '机巢',
  },
  {
    value: 'Optio44n1',
    label: '事件',
  },
];

const options1 = [
  {
    value: 'Option1',
    label: '南昌市',
  },
  {
    value: 'Optio44n1',
    label: '抚州市',
  },
];
</script>

<template>
   <div>
  <div class="searchBox">
    <div class="searchInput">
      <el-select v-model="value" placeholder="请选择查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

   </div>
      <el-input v-model="input3" placeholder="请输入搜索关键字"></el-input>
    </div>
    <div class="searchBtn"></div>
    <div class="region">
      <el-select v-model="value2" placeholder="请选择查询">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </div>
</template>

<style scoped lang="scss">
.searchBox {
  width: 420px;
  height: 43px;
  position: absolute;
  top: 145px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;

  .el-select {
    width: 130px;
    height: 100%;

    :deep() {
      .el-select__wrapper {
        background: transparent;
        border: none;
        box-shadow: none;
        height: 100%;
        padding-left: 20px;
      }

      .el-select__selected-item {
        font-family: Source Han Sans CN, Source Han Sans CN, serif;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: 18px;
      }
    }
  }

  .searchInput {
    width: 243px;
    height: 100%;
    background: url('@/assets/images/home/searchBox/searchBg1.png') no-repeat center / 100% 100%;
    display: flex;

    .el-input {
      height: 100%;

      :deep() {
        .el-input__wrapper {
          background: transparent;
          border: none;
          box-shadow: none;
          height: 100%;
        }

        .el-input__inner {
          font-family: Source Han Sans CN, Source Han Sans CN, serif;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 18px;
        }
      }
    }
  }

  .searchBtn {
    width: 67px;
    height: 100%;
    background: url('@/assets/images/home/searchBox/searchBg2.png') no-repeat center / 100% 100%;
    cursor: pointer;
  }

  .region {
    width: 0;
    flex-grow: 1;
    background: url('@/assets/images/home/searchBox/searchBg3.png') no-repeat center / 100% 100%;

    :deep() {
      .el-select__wrapper {
        width: 100px;
        padding-left: 20px;
      }
    }
  }
}
</style>

 src/views/Home/components/HomeRight/HomeRight.vue

@@ -1,5 +1,6 @@
<template>
  <div class="home-right">
    <UserOperate/>
    <Synergy />
    <TaskAchievements />
    <EventOverview />
@@ -10,6 +11,7 @@
import Synergy from '@/views/Home/components/HomeRight/Synergy.vue';
import TaskAchievements from '@/views/Home/components/HomeRight/TaskAchievements.vue';
import EventOverview from '@/views/Home/components/HomeRight/EventOverview.vue';
import UserOperate from '@/views/Home/components/HomeRight/UserOperate.vue';
</script>

<style scoped lang="scss">

 src/views/Home/components/HomeRight/UserOperate.vue

New file
@@ -0,0 +1,25 @@
<script setup></script>

<template>
  <div class="userOperate">
    <img alt="" src="@/assets/images/home/homeRight/operate1.png" />
    <img alt="" src="@/assets/images/home/homeRight/operate2.png" />
    <img alt="" src="@/assets/images/home/homeRight/operate3.png" />
  </div>
</template>

<style scoped lang="scss">
.userOperate {
  position: absolute;
  right: 27px;
  top: -30px;
  width: 132px;
  height: 38px;
  display: flex;
  justify-content: space-between;

  > img {
    cursor: pointer;
  }
}
</style>