From 9a19efe814fd1b3f08673935ec9a9abc3394fb7c Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Fri, 28 Mar 2025 08:47:46 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/layout/Header.vue | 15 --
src/router/views/index.js | 11 ++
src/layout/index.vue | 55 ++++++++---
src/views/Home/aggregation.js | 54 ++++++++++
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue | 4
src/views/Home/components/HomeRight/EventOverview.vue | 22 ++--
src/views/Home/components/HomeRight/Synergy.vue | 14 +-
src/assets/svg/user.svg | 1
src/views/Home/components/HomeRight/TaskAchievements.vue | 30 +++---
src/views/Home/components/HomeLeft/HomeLeft.vue | 8
src/views/Home/components/HomeLeft/OverviewNext.vue | 16 +-
src/styles/variables.scss | 3
src/views/TaskManage/TaskManage.vue | 11 ++
src/views/Home/components/HomeRight/HomeRight.vue | 4
src/views/Home/Home.vue | 27 ++---
15 files changed, 181 insertions(+), 94 deletions(-)
diff --git a/src/assets/svg/user.svg b/src/assets/svg/user.svg
new file mode 100644
index 0000000..4d8de46
--- /dev/null
+++ b/src/assets/svg/user.svg
@@ -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>
\ No newline at end of file
diff --git a/src/layout/Header.vue b/src/layout/Header.vue
index 8e87cb2..9b5b986 100644
--- a/src/layout/Header.vue
+++ b/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">
diff --git a/src/layout/index.vue b/src/layout/index.vue
index a316cea..d240e08 100644
--- a/src/layout/index.vue
+++ b/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;
}
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 887089f..ca625a3 100644
--- a/src/router/views/index.js
+++ b/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',
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 93a7517..646f60c 100644
--- a/src/styles/variables.scss
+++ b/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;
}
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 1579e5d..8c17d8f 100644
--- a/src/views/Home/Home.vue
+++ b/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>
diff --git a/src/views/Home/aggregation.js b/src/views/Home/aggregation.js
new file mode 100644
index 0000000..55ca0e9
--- /dev/null
+++ b/src/views/Home/aggregation.js
@@ -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);
+};
diff --git a/src/views/Home/components/HomeLeft/HomeLeft.vue b/src/views/Home/components/HomeLeft/HomeLeft.vue
index d0ca55f..50857af 100644
--- a/src/views/Home/components/HomeLeft/HomeLeft.vue
+++ b/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;
diff --git a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
index ff3dc53..6179597 100644
--- a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/Home/components/HomeLeft/OverviewNext.vue b/src/views/Home/components/HomeLeft/OverviewNext.vue
index 4669f94..f28bbb2 100644
--- a/src/views/Home/components/HomeLeft/OverviewNext.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/Home/components/HomeRight/EventOverview.vue b/src/views/Home/components/HomeRight/EventOverview.vue
index 6f9b5ca..2447bdb 100644
--- a/src/views/Home/components/HomeRight/EventOverview.vue
+++ b/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;
}
}
}
diff --git a/src/views/Home/components/HomeRight/HomeRight.vue b/src/views/Home/components/HomeRight/HomeRight.vue
index b9d5281..1ee4b9a 100644
--- a/src/views/Home/components/HomeRight/HomeRight.vue
+++ b/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>
diff --git a/src/views/Home/components/HomeRight/Synergy.vue b/src/views/Home/components/HomeRight/Synergy.vue
index c0c397e..115a132 100644
--- a/src/views/Home/components/HomeRight/Synergy.vue
+++ b/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;
diff --git a/src/views/Home/components/HomeRight/TaskAchievements.vue b/src/views/Home/components/HomeRight/TaskAchievements.vue
index d9b1e22..7a9f58e 100644
--- a/src/views/Home/components/HomeRight/TaskAchievements.vue
+++ b/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>
diff --git a/src/views/TaskManage/TaskManage.vue b/src/views/TaskManage/TaskManage.vue
new file mode 100644
index 0000000..d649d9c
--- /dev/null
+++ b/src/views/TaskManage/TaskManage.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ TaskManage
+</template>
+
+<style scoped lang="scss">
+
+</style>
--
Gitblit v1.9.3