From 2740426ca81548de4128b47306dab66d622a1b84 Mon Sep 17 00:00:00 2001
From: wangyawei <1796609990@qq.com>
Date: 星期五, 18 四月 2025 16:49:07 +0800
Subject: [PATCH] 恢复以前的代码
---
src/components/tools/LayerTree.vue | 21 +++----
src/components/menu/TimeLine.vue | 137 ++++++++++++++-------------------------------
2 files changed, 53 insertions(+), 105 deletions(-)
diff --git a/src/components/menu/TimeLine.vue b/src/components/menu/TimeLine.vue
index 4d0fb73..c18c8b1 100644
--- a/src/components/menu/TimeLine.vue
+++ b/src/components/menu/TimeLine.vue
@@ -1,21 +1,32 @@
<template>
<div class="timeline-container">
<div class="controls">
- <!-- <div @click="endSimulate">缁撴潫妯℃嫙</div> -->
+ <!-- <div @click="endSimulate">缁撴潫妯℃嫙</div> -->
<div class="control-btn" @click="skipBackward">
- <img src="@/assets/img/timeline/left.png" class="fas fa-step-backward" />
+ <img
+ src="@/assets/img/timeline/left.png"
+ class="fas fa-step-backward"
+ />
</div>
<div class="control-btn play-btn" @click="togglePlay">
<img v-show="isPlaying" src="@/assets/img/timeline/stop.png" />
<img v-show="!isPlaying" src="@/assets/img/timeline/start.png" />
</div>
<div class="control-btn" @click="skipForward">
- <img src="@/assets/img/timeline/right.png" class="fas fa-step-forward" />
+ <img
+ src="@/assets/img/timeline/right.png"
+ class="fas fa-step-forward"
+ />
</div>
<div class="speed-control">
<div @click="toggleSpeedMenu">{{ playbackRate }}X</div>
<div class="speed-menu" v-show="showSpeedMenu">
- <div v-for="rate in playbackRates" :key="rate" @click.capture="setPlaybackRate(rate)" :class="{ active: playbackRate === rate }">
+ <div
+ v-for="rate in playbackRates"
+ :key="rate"
+ @click.capture="setPlaybackRate(rate)"
+ :class="{ active: playbackRate === rate }"
+ >
{{ rate }}X
</div>
</div>
@@ -24,24 +35,35 @@
<div class="timeline">
<div class="dates">
- <div v-for="(date, index) in visibleDates" :key="index" class="date-label">
+ <div
+ v-for="(date, index) in visibleDates"
+ :key="index"
+ class="date-label"
+ >
{{ formatDate(date) }}
</div>
</div>
<div class="timeline-track" ref="timelineTrack" @click="seekToPosition">
- <div class="timeline-progress" :style="{ width: progressPercentage + '%' }"></div>
- <div class="timeline-cursor" :style="{ left: progressPercentage + '%' }"></div>
+ <div
+ class="timeline-progress"
+ :style="{ width: progressPercentage + '%' }"
+ ></div>
+ <div
+ class="timeline-cursor"
+ :style="{ left: progressPercentage + '%' }"
+ ></div>
<div class="time-markers">
- <div v-for="(time, index) in timeMarkers" :key="index" class="time-marker">
+ <div
+ v-for="(time, index) in timeMarkers"
+ :key="index"
+ class="time-marker"
+ >
{{ time }}
</div>
</div>
</div>
</div>
- <video id="video" width="200px" height="200px" controls loop autoplay style="display: none;" crossorigin="anonymous">
- <source src="/video/waters-1024.webm" type="video/webm" />
- </video>
</div>
</template>
@@ -49,7 +71,6 @@
import {
ref,
computed,
- nextTick,
onUnmounted,
onMounted,
watch,
@@ -97,7 +118,6 @@
return dayjs(props.waterSimulateParams.date[1]);
});
let playInterval = null;
-let hlsEntity = null;
// 璁＄畻灞炴��
const progressPercentage = computed(() => {
@@ -122,37 +142,7 @@
const currentTimeFormatted = computed(() => {
return formatTime(currentTime.value);
});
-// 浣跨敤瑙嗛鍒涘缓Cesium瀹炰綋
-const createVideoEntity = () => {
- // 鑾峰彇瑙嗛鍏冪礌
- const videoElement = document.getElementById('video');
- if (!videoElement) {
- console.error("鏈壘鍒拌棰戝厓绱�");
- return;
- }
- // 绉婚櫎鍙兘瀛樺湪鐨勬棫瀹炰綋
- const existingEntity = window.earthCtrl.viewer.entities.getById('hls');
- if (existingEntity) {
- window.earthCtrl.viewer.entities.remove(existingEntity);
- }
-
- // 纭繚瑙嗛鍙
- videoElement.style.display = 'block';
-
- // 鍒涘缓鏂扮殑瑙嗛瀹炰綋
- hlsEntity = window.earthCtrl.viewer.entities.add({
- id: 'hls',
- rectangle: {
- coordinates: window.SmartEarth.Cesium.Rectangle.fromDegrees(
- 116.546665, 40.507452, 116.7757891, 40.6834562
- ),
- material: videoElement,
- outline: true,
- outlineColor: window.SmartEarth.Cesium.Color.BLACK,
- },
- });
-};
const togglePlay = () => {
// 濡傛灉褰撳墠鏄仠姝㈢姸鎬佷笖宸茬粡鎾斁瀹屾瘯锛岀偣鍑绘椂閲嶇疆鏃堕棿
if (!isPlaying.value && currentTime.value >= duration.value) {
@@ -163,43 +153,15 @@
isPlaying.value = !isPlaying.value;
emit("isPlaying", isPlaying.value);
- // if (isPlaying.value) {
- // startPlayback();
- // // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
- // if (currentTime.value === 0) {
- // emit("playbackFinished", false);
- // }
- // } else {
- // stopPlayback();
- // }
- // 鏂板浠ｇ爜:鍔犺棰戞祦
- nextTick(() => {
- // 澶勭悊瑙嗛鎾斁
- const videoElement = document.getElementById('video');
- if (videoElement) {
- if (isPlaying.value) {
- // 纭繚宸插垱寤鸿棰戝疄浣�
- createVideoEntity();
- // 鎾斁瑙嗛
- videoElement.play().catch(e => {
- console.error("瑙嗛鎾斁澶辫触:", e);
- });
- } else {
- // 鏆傚仠瑙嗛
- videoElement.pause();
- }
+ if (isPlaying.value) {
+ startPlayback();
+ // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
+ if (currentTime.value === 0) {
+ emit("playbackFinished", false);
}
-
- if (isPlaying.value) {
- startPlayback();
- // 濡傛灉鏄粠澶村紑濮嬫挱鏀�
- if (currentTime.value === 0) {
- emit("playbackFinished", false);
- }
- } else {
- stopPlayback();
- }
- });
+ } else {
+ stopPlayback();
+ }
};
const startPlayback = () => {
@@ -217,13 +179,7 @@
emit("isPlaying", isPlaying.value); // 閫氱煡鎾斁鐘舵�佸彉鍖�
emit("playbackFinished", true); // 閫氱煡鎾斁瀹屾垚
emit("timeUpdate", progressPercentage.value); // 鏇存柊杩涘害鏉′綅缃�
- // 鎾斁缁撴潫鏃舵殏鍋滆棰�
- const videoElement = document.getElementById('video');
- if (videoElement) {
- videoElement.pause();
- }
}
- // 鏆傚仠瑙嗛
emit("timeUpdate", progressPercentage.value);
}, 1000);
@@ -253,11 +209,6 @@
playbackRate.value = rate;
showSpeedMenu.value = false;
- // 鍚屾瑙嗛鎾斁閫熺巼
- const videoElement = document.getElementById('video');
- if (videoElement) {
- videoElement.playbackRate = rate;
- }
if (isPlaying.value) {
stopPlayback();
startPlayback();
@@ -288,7 +239,7 @@
};
const rainFallData = ref([]);
-function getRainfallData () {
+function getRainfallData() {
getRainfall().then((res) => {
// rainFallData.value = res.data.map(item => {
// return dayjs(item.time).format("HH:mm")
@@ -303,7 +254,7 @@
let mockTimer = null;
let currentRainfall = ref(0.0001);
-function randomMockWater () {
+function randomMockWater() {
let delay = (3 / playbackRate.value) * 1000;
if (delay < 1000) {
delay = 1000;
@@ -320,7 +271,7 @@
if (rainfall && rainfall.total) {
// console.log(rainfall.total);
- // createWaterPrimitive(rainfall.total / 50000);
+ createWaterPrimitive(rainfall.total / 50000);
}
}, delay);
}
diff --git a/src/components/tools/LayerTree.vue b/src/components/tools/LayerTree.vue
index 293fbfd..4db668a 100644
--- a/src/components/tools/LayerTree.vue
+++ b/src/components/tools/LayerTree.vue
@@ -1,9 +1,6 @@
<template>
<div class="layer-tree">
- <<<<<<< HEAD <el-tree ref="treeRef" style="max-width: 600px" show-checkbox node-key="label" :default-checked-keys="defaultSelectedKeys" @check-change="handleCheckChange" :data="treeData" />
- =======
<el-tree ref="treeRef" style="max-width: 600px" show-checkbox node-key="label" :default-checked-keys="defaultSelectedKeys" @check-change="handleCheckChange" :data="treeData" />
- >>>>>>> f82eb01fe65e513fb43342db0e25cafa0e0d2db8
</div>
</template>
@@ -270,7 +267,7 @@
},
]);
-function initDevicePoint() {
+function initDevicePoint () {
let list = [];
devicetList.value.forEach((item) => {
@@ -916,7 +913,7 @@
},
]);
-function initDistrictPoint() {
+function initDistrictPoint () {
let list = [];
districtList.value.forEach((item) => {
item.showBillboard = true;
@@ -931,7 +928,7 @@
let divPointList = [];
-function initDuanmianPoint() {
+function initDuanmianPoint () {
getDuanMainData().then((res) => {
const duanmianList = res.data;
const list = [];
@@ -965,13 +962,13 @@
divPoint.item.show = false;
console.log(divPoint);
- divPointList.push(divPoint.item);
-});
-treeMap.set("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", list);
+ divPointList.push(divPoint.item);
+ });
+ treeMap.set("瀛欒儭娌熶豢鐪熸爣娉ㄥ湴鐗�", list);
});
}
-function addTetrahedron(visible) {
+function addTetrahedron (visible) {
const emergencyAreaList = [];
loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
@@ -1014,7 +1011,7 @@
});
treeMap.set("閬块櫓鐐�", emergencyAreaList);
}
-function toggleLayerVisible(name, checked) {
+function toggleLayerVisible (name, checked) {
const entityList = treeMap.get(name);
if (Array.isArray(entityList) && entityList.length > 0) {
entityList.forEach((entity) => {
@@ -1024,7 +1021,7 @@
treeMap.set(name, entityList);
}
-function getData() {
+function getData () {
initDevicePoint();
initDistrictPoint();
initDuanmianPoint();
--
Gitblit v1.9.3