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

chenyao

2025-03-28 9a19efe814fd1b3f08673935ec9a9abc3394fb7c

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

 src/assets/svg/user.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681105122900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2621" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="2622"></path></svg>

 src/layout/Header.vue

@@ -1,9 +1,9 @@
<template>
  <div class="header">
    <div class="h-left">
      <div class="left-item active">首页</div>
      <div class="left-item active" @click="router.push('/')">首页</div>
      <div class="left-item">集群调度</div>
      <div class="left-item">任务管理</div>
      <div class="left-item" @click="router.push('/taskManage')">任务管理</div>
      <div class="left-item">航线规划</div>
    </div>
    <div class="h-right">
@@ -13,17 +13,10 @@
      <div class="right-item">系统运维</div>
    </div>
  </div>
  <!-- <div :style="{ background: '#2bc03f', height: hToV(50), width: wToR(50) }">test</div> -->
</template>

<script>
import { hToV, wToR } from '@/utils/pxConver';

export default {
  methods: { wToR, hToV },
  mounted() {
  },
};
<script setup>
const router = useRouter()
</script>

<style scoped lang="scss">

 src/layout/index.vue

@@ -1,8 +1,8 @@
<template>
  <div class="home">
  <div :class="{layout:true, 'narrowScreen':narrowScreen}">
    <div id="cesium"></div>
    <div class="page-index">
      <Header/>
      <Header />
      <router-view></router-view>
    </div>
  </div>
@@ -14,27 +14,54 @@
import Header from './Header.vue';

const { _init } = cesiumOperation();
const narrowScreen  = ref(false)

const narrowScreenFun = () => {
  // 监听窗口变化，计算是不是 窄屏幕
  narrowScreen.value = window.innerWidth / window.innerHeight < 16 / 9;
};

onMounted(() => {
  _init('cesium');
  narrowScreenFun()
  window.addEventListener('resize', narrowScreenFun);
});
</script>

<style scoped lang="scss">
.home {
.layout {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  height: 100%;
  overflow-x: auto;
  background: #020f25;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none; /* Chrome、Safari 隐藏滚动条 */
  }

  &.narrowScreen{
    >div{
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  >div{
    left: 0;
    top: 0;
    position: absolute;
    height: 1080px;
    width: 1920px;
  }

  #cesium {
    height: 100%;
    width: 100%;

    :deep() {
      .cesium-viewer {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .cesium-viewer-cesiumWidgetContainer {
          width: 100%;
@@ -51,21 +78,19 @@
          }
        }
      }

      .cesium-viewer-bottom {
        display: none;
      }
    }
  }

  .page-index {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 100%;
    background-image: url('../assets/images/bg-new.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    

    > * {
      pointer-events: auto;
    }

 src/router/views/index.js

@@ -13,7 +13,16 @@
        meta: {
          i18n: 'dashboard',
        },
        component: () => import(/* webpackChunkName: "views" */ '@/views/Home/Home.vue'),
        component: () => import(/* webpackChunkName: "index" */ '@/views/Home/Home.vue'),
      },
      {
        path: 'taskManage',
        name: '任务管理',
        meta: {
          i18n: 'dashboard',
          menu: false,
        },
        component: () => import(/* webpackChunkName: "TaskManage" */ '@/views/TaskManage/TaskManage.vue'),
      },
      {
        path: 'dashboard',

 src/styles/variables.scss

@@ -3,5 +3,6 @@
$top_height: 50px;

@function hToV($px) {
  @return calc($px / 1080) * 100vh;
  //@return calc($px / 1080) * 100vh;
  @return $px * 1px;
}

 src/views/Home/Home.vue

@@ -4,26 +4,19 @@
    <HomeRight></HomeRight>
</template>

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

export default {
  components: {
    HomeLeft,
    HomeRight,
  },
  name: 'index',
  provide() {
    return {
      index: this,
    };
  },
  computed: {},
  props: [],
  methods: {},
  mounted() {},
};
onMounted(() => {
  nextTick(() => {
    getAggregation()
  })
})



</script>
<style scoped lang="scss">
</style>

 src/views/Home/aggregation.js

New file
@@ -0,0 +1,54 @@
import * as Cesium from 'cesium';
import data2 from '@/assets/images/home/homeRight/data2.png';
import data1 from '@/assets/images/home/homeRight/data1.png';
import { win } from 'codemirror/src/util/dom';

export const getAggregation = () => {
  // 1️⃣ 创建数据源
  const dataSource = new Cesium.CustomDataSource('clusteredData');
  // 2️⃣ 启用聚合
  dataSource.clustering.enabled = true;
  dataSource.clustering.pixelRange = 50; // 多少像素范围内的点进行聚合
  dataSource.clustering.minimumClusterSize = 3; // 至少 3 个点才聚合

  // 3️⃣ 监听聚合事件
  dataSource.clustering.clusterEvent.addEventListener((clusteredEntities, cluster) => {
    if (clusteredEntities.length > 1) {
      // 这是聚合点
      cluster.label.show = true;
      cluster.label.text = clusteredEntities.length.toString(); // 显示聚合点数量
      cluster.billboard.show = true;
      cluster.billboard.image = data2; // 自定义聚合图标
      cluster.billboard.scale = 1.5;
    } else {
      // 这是单个点
      cluster.label.show = false;
      cluster.billboard.show = false;
    }
  });

  // 4️⃣ 添加点数据
  for (let i = 0; i < 20; i++) {
    dataSource.entities.add({
      position: Cesium.Cartesian3.fromDegrees(
        115.89 + Math.random() * 0.1,
        28.68 + Math.random() * 0.1
      ),
      billboard: {
        image: data1,
        width: 24,
        height: 24,
      },
    });
  }
  const viewer = window.$viewer;
  // 5️⃣ 加载数据源
  viewer.dataSources.add(dataSource);

  viewer.screenSpaceEventHandler.setInputAction(movement => {
    const pickedObject = viewer.scene.pick(movement.position);
    if (pickedObject && pickedObject.id) {
      console.log('点击聚合点，包含以下数据：', pickedObject.id);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};

 src/views/Home/components/HomeLeft/HomeLeft.vue

@@ -37,20 +37,20 @@
        margin-left: 45px;
        width: 260px;
        font-size: 14px;
        height: hToV(36);
        line-height: hToV(36);
        height: 36px;
        line-height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .line {
            border: 1px solid #FFFFFF;
            height: hToV(10);
            height: 10px;
            opacity: 0.5;
        }
        .weather {
            img {
                width: 20px;
                height: hToV(20);
                height: 20px;
            }
            .tq {
                margin: 0 5px;

 src/views/Home/components/HomeLeft/InspectionRaskDetails.vue

@@ -34,7 +34,7 @@
    margin-left: 29px;
    padding: hToV(16) 16px;
    width: 390px;
    height: hToV(414);
    height: 414px;
    background: linear-gradient( 270deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;
@@ -79,4 +79,4 @@
        }
    }
}
</style>
</style>

 src/views/Home/components/HomeLeft/OverviewNext.vue

@@ -63,19 +63,19 @@
    margin-left: 29px;
    padding: hToV(16) 16px;
    width: 390px;
    height: hToV(414);
    height: 414px;
    background: linear-gradient( 270deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.85;
    .next-num {
        width: 358px;
        height: hToV(92);
        height: 92px;
        background: url(@/assets/images/next-num.png) no-repeat center / 100% 100%;;
        position: relative;
        .total {
            position: absolute;
            left: 22px;
            top: hToV(18);
            top: 18px;
            font-weight: 500;
            font-size: 14px;
            color: #FFFFFF;
@@ -86,12 +86,12 @@
        }
        .status {
            position: absolute;
            top: hToV(16);
            top: 16px;
            right: 30px;
            width: 200px;
            display: flex;
            justify-content: space-between;
            line-height: hToV(30);
            line-height: 30px;
            .name {
                font-weight: 400;
                font-size: 14px;
@@ -101,12 +101,12 @@
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 26px;
                

            }
        }
    }
    .search-box {
        margin-top: hToV(19);
        margin-top: 19px;
        margin-right: 16px;
        :deep(.el-input__wrapper) {
            background-color: rgba(0, 112, 255, 0.1);
@@ -158,4 +158,4 @@
        }
    }
}
</style>
</style>

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

@@ -41,7 +41,7 @@
<style scoped lang="scss">
.eventOverview {
  width: 390px;
  height: hToV(445);
  height: 445px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -50,15 +50,15 @@
  );
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
  margin: hToV(3) 0 0 0;
  padding-top: hToV(15);
  margin: 3px 0 0 0;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .overviewData {
    width: 360px;
    height: hToV(122);
    height: 122px;
    background: url('@/assets/images/home/homeRight/overviewBg.png') no-repeat center / 100% 100%;
    display: flex;
    justify-content: space-between;
@@ -71,7 +71,7 @@
        font-weight: 400;
        font-size: 26px;
        color: #ffffff;
        line-height: hToV(30);
        line-height: 30px;
        text-align: center;
      }

@@ -80,7 +80,7 @@
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        line-height: hToV(20);
        line-height: 20px;
        text-align: center;
      }
    }
@@ -89,12 +89,12 @@
      width: 246px;
      display: flex;
      flex-wrap: wrap;
      gap: hToV(13) 0;
      gap: 13px 0;
      font-family: Source Han Sans CN, Source Han Sans CN, serif;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: hToV(14);
      line-height: 14px;

      .overviewItem {
        width: calc(100% / 3);
@@ -102,11 +102,11 @@
        .itemName {
          display: flex;
          align-items: center;
          margin-bottom: hToV(6);
          margin-bottom: 6px;

          img {
            width: 16px;
            height: hToV(16);
            height: 16px;
          }
        }

@@ -114,7 +114,7 @@
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
          font-weight: 400;
          font-size: 24px;
          line-height: hToV(18);
          line-height: 18px;
        }
      }
    }

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

@@ -16,13 +16,13 @@
<style scoped lang="scss">
.home-right {
  position: absolute;
  top: hToV(122);
  top: 122px;
  right: 31px;
  width: 404px;

  .titleBox {
    width: 404px;
    height: hToV(43);
    height: 43px;
  }
}
</style>

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

@@ -23,7 +23,7 @@
<style scoped lang="scss">
.synergy {
  width: 390px;
  height: hToV(108);
  height: 108px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -31,15 +31,15 @@
    rgba(31, 62, 122, 0) 100%
  );
  opacity: 0.85;
  margin: hToV(2) 0 hToV(13) 0;
  margin: 2px 0 13 0;
  display: flex;
  justify-content: space-between;
  padding: hToV(11) 27px 0;
  padding: 11px 27px 0;

  .synergy-item {
    width: 95px;
    height: hToV(77);
    padding-top: hToV(7);
    height: 77px;
    padding-top: 7px;
    background: url('@/assets/images/home/homeRight/synergyBg.png') no-repeat center center / 100% 100%;

    .title {
@@ -50,7 +50,7 @@
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-bottom: hToV(4);
      margin-bottom: 4px;
    }

    .value {
@@ -58,7 +58,7 @@
      font-weight: 400;
      font-size: 26px;
      color: #ffffff;
      line-height: hToV(26);
      line-height: 26px;
      font-style: normal;
      text-transform: none;
      text-align: center;

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

@@ -56,7 +56,7 @@
<style scoped lang="scss">
.taskAchievements {
  width: 390px;
  height: hToV(204);
  height: 204px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -64,9 +64,9 @@
    rgba(31, 62, 122, 0) 100%
  );
  opacity: 0.85;
  margin: hToV(2) 0 hToV(21) 0;
  margin: 2px 0 21px 0;
  padding-left: 17px;
  padding-top: hToV(15);
  padding-top: 15px;

  .rawData {
    display: flex;
@@ -80,7 +80,7 @@
      display: flex;

      > img {
        height: hToV(63);
        height: 63px;
        width: 63px;
      }

@@ -90,22 +90,22 @@
        color: #ffffff;
        width: 0;
        flex-grow: 1;
        padding-top: hToV(12);
        padding-top: 12px;

        .title {
          font-family: Source Han Sans CN, Source Han Sans CN, serif;
          font-weight: 400;
          font-size: 14px;
          line-height: hToV(13);
          line-height: 13px;
          text-align: left;
          margin-bottom: hToV(6);
          margin-bottom: 6px;
        }

        .value {
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
          font-weight: 400;
          font-size: 26px;
          line-height: hToV(22);
          line-height: 22px;
          text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
          text-align: left;
        }
@@ -114,7 +114,7 @@
  }

  .processingData {
    margin-top: hToV(19);
    margin-top: 19px;
    display: flex;
    align-items: center;

@@ -123,16 +123,16 @@
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: hToV(8) 0;
      gap: 8px 0;

      > div {
        width: 135px;
        height: hToV(42);
        height: 42px;
        display: flex;

        > img {
          width: 32px;
          height: hToV(32);
          height: 32px;
          margin-right: 10px;
        }

@@ -145,7 +145,7 @@
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: hToV(17);
            line-height: 17px;
            text-align: left;
          }

@@ -153,7 +153,7 @@
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 24px;
            line-height: hToV(23);
            line-height: 23px;
            text-align: left;
          }
        }
@@ -168,6 +168,6 @@
  font-weight: bold;
  font-size: 18px;
  color: #e1f5ff;
  line-height: hToV(22);
  line-height: 22px;
}
</style>

 src/views/TaskManage/TaskManage.vue

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

</script>

<template>
  TaskManage
</template>

<style scoped lang="scss">

</style>