From b6324bcbd6ebd6b90457c83239c7d3592dfbcb76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=8F=E5=A4=A7=E8=83=86?= <1101282782@qq.com> Date: Tue, 11 Nov 2025 09:27:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E5=85=89=E7=85=A7=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=AD=98=E5=82=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../headers/components/weather/index.vue | 148 +++++++++- .../components/weather/timeLIne copy.ts | 263 ++++++++++++++++++ .../headers/components/weather/timeLIne.ts | 132 ++++++--- .../src/views/components/headers/index.vue | 132 ++++++++- 4 files changed, 611 insertions(+), 64 deletions(-) create mode 100644 src/renderer/src/views/components/headers/components/weather/timeLIne copy.ts diff --git a/src/renderer/src/views/components/headers/components/weather/index.vue b/src/renderer/src/views/components/headers/components/weather/index.vue index cdcb6ea..951095c 100644 --- a/src/renderer/src/views/components/headers/components/weather/index.vue +++ b/src/renderer/src/views/components/headers/components/weather/index.vue @@ -10,6 +10,7 @@ 光照效果 实时光照 { + weatherData.currWeather = data +} + var weatherChange = () => { currWeatherData = true + if (weatherData.currWeather) { let ss = getCurrentTime() sunshine && (sunshine.timeBar = ss) @@ -276,6 +351,14 @@ var weatherChange = () => { timeline.closeChangeDate() // sunshine && (sunshine.time = weatherData.time) + if (!switchStatus && document.getElementById('timePause').textContent == '播放') { + document.getElementById('timePause').click() + } + } else { + if (!switchStatus && document.getElementById('timePause').textContent == '暂停') { + //如果光照开关关闭，关闭实时光照，停止时间条 + document.getElementById('timePause').click() + } } } var getDateTimeString = () => { @@ -337,26 +420,60 @@ var getCurrentTime = () => { return `${hours}:${minutes}:${seconds}` } + +const emit = defineEmits(['childEvent', 'isPause']) + +//监听父组件点击 +watch( + () => props.parentClick, + (newVal, oldVal) => { + switchStatus.value = newVal + // 如果点击icon时，当前设置页面一打开，使用当前数据 + if (newVal) { + sunshine = new YJ.Global.efflect.Sunshine(window.earth, { + id: 123, + speed: weatherData.speed, + time: weatherData.time, + // @ts-ignore + hour: document.getElementById('currentTime').textContent + }) + window.sunshine = sunshine + } + } +) + var switchFunc = () => { switchStatus.value = !switchStatus.value if (switchStatus.value) { //开启 - sunshine = new YJ.Global.efflect.Sunshine(window.earth, { - id: 123, - speed: weatherData.speed, - time: weatherData.time, - // @ts-ignore - hour: document.getElementById('currentTime').textContent - }) - timeline.setSunShine(true) + if (!window.sunshine) { + sunshine = new YJ.Global.efflect.Sunshine(window.earth, { + id: 123, + speed: weatherData.speed, + time: weatherData.time, + // @ts-ignore + hour: document.getElementById('currentTime').textContent + }) + } else { + sunshine = window.sunshine + sunshine.timeBar(document.getElementById('currentTime').textContent) + if (weatherData) { + sunshine.darkness = weatherData.darkness + sunshine.speed = weatherData.speed + sunshine.softShadow = weatherData.softShadow + } + } + // timeline.setSunShine(true) } else { //关闭 - sunshine && sunshine.remove() - sunshine = null - // let timeData = now.setHours(0, 0, 0, 0) // 设置为当天0点 - // timeline.updateTime(timeData) - timeline.setSunShine(false) + // sunshine && sunshine.remove() + // sunshine = null + // delete window.sunshine + // timeline.setSunShine(false) } + //联动外面的图标 + // emit('childEvent', switchStatus.value) + emit('childEvent', weatherData) } //雨特效 @@ -390,6 +507,7 @@ var clickIcon = (item: any) => { } } var clickTimeIcon = (item: any) => { + weatherData.currWeather = false if (document.getElementById('timePause').textContent == '播放') { timelist.forEach((data) => { if (data.name != item.name) data.status = false diff --git a/src/renderer/src/views/components/headers/components/weather/timeLIne copy.ts b/src/renderer/src/views/components/headers/components/weather/timeLIne copy.ts new file mode 100644 index 0000000..ea7cf14 --- /dev/null +++ b/src/renderer/src/views/components/headers/components/weather/timeLIne copy.ts @@ -0,0 +1,263 @@ +// @ts-nocheck +import { ElMessage } from 'element-plus' +export default class TimeLine { + constructor(sdk, speed) { + this.sdk = { ...sdk }; + this.progress = document.getElementById('progress'); + this.handle = document.getElementById('handle'); + // this.timeline = document.getElementById('timeline'); + this.timeline = document.getElementsByClassName('timeline-container')[0]; + this.currentTime = document.getElementById('currentTime'); + this.timelineCon = document.getElementsByClassName('timeline-container')[0]; + this.speed = speed; + this.animationId; + this.startTime = performance.now(); + this.manualPosition = null; + // this.manualPosition = this.calculateTimePercentage(); + this.isDragging = false; + this.pauseed = true; + this.time = ''; + this.sunShine = false; + if (this.pauseed) { + this.pausedTime = this.startTime + } + this.update = this.update.bind(this); + + TimeLine.init(this) + } + static init(that) { + for (let i = 0; i <= 24; i++) { + if (i % 6 === 0) { + + const label = document.createElement('div'); + label.className = 'time-mark'; + label.textContent = `${i}:00`; + label.style.left = `${(i / 24) * 100}%`; + document.getElementsByClassName('time-marks')[0].appendChild(label) + const point = document.createElement('div'); + point.className = 'time-Point'; + document.getElementsByClassName('time-marks')[0].appendChild(point) + + } + } + that.setCurrBar()//设置当前时间 + that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed); + that.timeline.addEventListener('mousedown', (e) => { + + if (e.srcElement.className === 'handle') { + if (!that.sunShine) { + ElMessage({ + message: '请开启光照功能', + type: 'warning' + }) + } else { + that.isDragging = true; + } + } + e.preventDefault(); + }); + + that.timeline.addEventListener('mousemove', (e) => { + if (!that.isDragging) return; + + const rect = that.timeline.getBoundingClientRect(); + let pos = (e.clientX - rect.left) / rect.width; + pos = Math.max(0, Math.min(1, pos)); + + that.manualPosition = pos; + that.progress.style.width = `${pos * 100}%`; + + const seconds = pos * 86400; + that.currentTime.textContent = that.formatTime(seconds); + }); + that.update(); + + document.getElementById('timePause').addEventListener('click', function () { + if (!that.sunShine) { + ElMessage({ + message: '请开启光照功能', + type: 'warning' + }) + } else { + that.pauseed = !that.pauseed; + if (that.pauseed) {//暂停 + that.pausedTime = performance.now(); // 记录暂停时刻 + document.getElementById('timePause').textContent = '播放'; + that.animationId && cancelAnimationFrame(that.animationId); + that.sdk.viewer.clock.shouldAnimate = false + } else {//播放 + let now = performance.now() + const pausedDuration = now - that.pausedTime; + document.getElementById('timePause').textContent = '暂停'; + that.manualPosition = null + that.startTime += pausedDuration; // 补偿暂停期间的时间差 + if (that.changeDate) {//切换日期后让时间从0开始 + if (that.changeDateGrag) { + that.changeDateGrag = undefined + } else { + that.startTime = now + } + that.changeDate = undefined + } + if (document.getElementById('weatherSwitch').style.color === 'rgba(var(--color-base1), 1)') {//判断光照开关是否开启，开启则打开cesium阴影 + that.sdk.viewer.clock.shouldAnimate = true + } + + that.update(); // 重启动画循环 + } + } + + }); + } + setSunShine(v) { + this.sunShine = v + if (this.sunShine) { + document.getElementById('timePause')?.click() + } else { + this.pauseed = true + this.pausedTime = performance.now(); // 记录暂停时刻 + document.getElementById('timePause').textContent = '播放'; + this.animationId && cancelAnimationFrame(this.animationId); + this.sdk.viewer.clock.shouldAnimate = false + // document.getElementById('timePause')?.click() + } + } + calculateTimePercentage() { + // 获取当前时间 + const now = new Date(); + const hours = now.getHours(); + const minutes = now.getMinutes(); + const seconds = now.getSeconds(); + + // 计算当前时间总秒数 + const totalSeconds = (hours * 3600) + (minutes * 60) + seconds; + + // 24小时总秒数 + const totalSecondsInDay = 24 * 3600; + + // 计算百分比并保留两位小数 + const percentage = (totalSeconds / totalSecondsInDay); + return percentage; + } + moveComplay(func) { + let that = this + // that.timeline.addEventListener('mouseup', () => { + document.addEventListener('mouseup', () => { + if (that.isDragging) { + that.isDragging = false; + if (that.manualPosition !== null) { + // that.sdk.viewer.clock.shouldAnimate = true + that.startTime = performance.now() - (that.manualPosition * 86400 * 1000 / that.speed); + that.manualPosition = null; + that.changeDate && (that.changeDateGrag = true) + if (!that.pauseed) { + that.update() + func(that.time) + } else { + that.pausedTime = performance.now(); // 记录暂停时刻 + func(that.currentTime.textContent) + } + + } + } + }); + } + setCurrBar() { + let pos = this.calculateTimePercentage() + this.manualPosition = pos; + this.progress.style.width = `${pos * 100}%`; + + const seconds = pos * 86400; + this.currentTime.textContent = this.formatTime(seconds); + } + formatTime(seconds) { + const hrs = Math.floor(seconds / 3600).toString().padStart(2, '0'); + const mins = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0'); + const secs = Math.floor(seconds % 60).toString().padStart(2, '0'); + return `${hrs}:${mins}:${secs}`; + } + + update() { + if (this.manualPosition !== null) return; + if (this.changeDate) {//切换日期后让时间从0开始 + this.startTime = performance.now() + } + let elapsed = (performance.now() - this.startTime) * this.speed; + // if (this.elapsed) { + // elapsed = elapsed + this.elapsed + // this.elapsed = undefined + // } + const totalSeconds = elapsed / 1000;//秒 + const daySeconds = totalSeconds % 86400;//天 + const percentage = daySeconds / 86400; + + this.progress.style.width = `${percentage * 100}%`; + this.time = this.formatTime(daySeconds) + this.currentTime.textContent = this.time; + if (!this.pauseed) { + this.animationId && cancelAnimationFrame(this.animationId); + this.animationId = requestAnimationFrame(this.update); + } + } + setSpeed(v) { + let now = performance.now() + if (!this.pauseed) { + const currentProgress = this.manualPosition ?? + (performance.now() - this.startTime) * this.speed / (86400 * 1000); + this.speed = v; + this.startTime = performance.now() - (currentProgress * 86400 * 1000 / this.speed); + + } else { + let pausedDuration = now - this.pausedTime; + this.startTime += pausedDuration; // 补偿暂停期间的时间差 + const currentProgress = this.manualPosition ?? + (now - this.startTime) * this.speed / (86400 * 1000); + this.speed = v; + this.startTime = now - (currentProgress * 86400 * 1000 / this.speed); + + this.pausedTime = now; // 记录切换speed暂停时刻 + // this.speed = v; + } + this.manualPosition = null; + // this.update(); + + } + setTime(time) { + // 解析传入的时间字符串 "6:40" + const [hours, minutes] = time.split(':').map(Number); + + // 设置秒数为0 + const seconds = 0; + + // 计算传入时间总秒数 + const totalSeconds = (hours * 3600) + (minutes * 60) + seconds; + + // 24小时总秒数 + const totalSecondsInDay = 24 * 3600; + + // 计算百分比 + const pos = totalSeconds / totalSecondsInDay; + + this.manualPosition = pos; + this.progress.style.width = `${pos * 100}%`; + + const displaySeconds = pos * 86400; + this.currentTime.textContent = this.formatTime(displaySeconds); + } + closeChangeDate() { + this.changeDate && (this.changeDate = false) + } + updateTime() { + this.manualPosition = null; + this.startTime = performance.now() - ((this.manualPosition || 0) * 86400 * 1000 / this.speed); + this.pauseed && (this.changeDate = true) + this.changeDateGrag = undefined + this.update(); + } + clear() { + this.animationId && cancelAnimationFrame(this.animationId); + this.progress.style.width = '0%'; + this.currentTime.textContent = '00:00:00'; + } + +} diff --git a/src/renderer/src/views/components/headers/components/weather/timeLIne.ts b/src/renderer/src/views/components/headers/components/weather/timeLIne.ts index 5772a1c..38813a7 100644 --- a/src/renderer/src/views/components/headers/components/weather/timeLIne.ts +++ b/src/renderer/src/views/components/headers/components/weather/timeLIne.ts @@ -1,7 +1,7 @@ // @ts-nocheck import { ElMessage } from 'element-plus' export default class TimeLine { - constructor(sdk, speed) { + constructor(sdk, speed, sunShine, timeWords, initCallback) { this.sdk = { ...sdk }; this.progress = document.getElementById('progress'); this.handle = document.getElementById('handle'); @@ -9,6 +9,7 @@ export default class TimeLine { this.timeline = document.getElementsByClassName('timeline-container')[0]; this.currentTime = document.getElementById('currentTime'); this.timelineCon = document.getElementsByClassName('timeline-container')[0]; + this.timeWords = timeWords; this.speed = speed; this.animationId; this.startTime = performance.now(); @@ -17,15 +18,15 @@ export default class TimeLine { this.isDragging = false; this.pauseed = true; this.time = ''; - this.sunShine = false; + this.sunShine = sunShine || false; if (this.pauseed) { this.pausedTime = this.startTime } this.update = this.update.bind(this); - TimeLine.init(this) + TimeLine.init(this, initCallback) } - static init(that) { + static init(that, callback) { for (let i = 0; i <= 24; i++) { if (i % 6 === 0) { @@ -40,7 +41,7 @@ export default class TimeLine { } } - that.setCurrBar()//设置当前时间 + that.setCurrBar(that.timeWords)//设置当前时间 that.startTime = performance.now() - ((that.manualPosition || 0) * 86400 * 1000 / that.speed); that.timeline.addEventListener('mousedown', (e) => { @@ -73,36 +74,43 @@ export default class TimeLine { that.update(); document.getElementById('timePause').addEventListener('click', function () { - if (!that.sunShine) { - ElMessage({ - message: '请开启光照功能', - type: 'warning' - }) - } else { - that.pauseed = !that.pauseed; - if (that.pauseed) {//暂停 - that.pausedTime = performance.now(); // 记录暂停时刻 - document.getElementById('timePause').textContent = '播放'; - that.animationId && cancelAnimationFrame(that.animationId); - that.sdk.viewer.clock.shouldAnimate = false - } else {//播放 - let now = performance.now() - const pausedDuration = now - that.pausedTime; - document.getElementById('timePause').textContent = '暂停'; - that.manualPosition = null - that.startTime += pausedDuration; // 补偿暂停期间的时间差 - if (that.changeDate) {//切换日期后让时间从0开始 - if (that.changeDateGrag) { - that.changeDateGrag = undefined - } else { - that.startTime = now - } - that.changeDate = undefined - } - that.sdk.viewer.clock.shouldAnimate = true - that.update(); // 重启动画循环 + // if (!that.sunShine) { + // ElMessage({ + // message: '请开启光照功能', + // type: 'warning' + // }) + // } else { + that.pauseed = !that.pauseed; + if (that.pauseed) {//暂停 + that.pausedTime = performance.now(); // 记录暂停时刻 + document.getElementById('timePause').textContent = '播放'; + that.animationId && cancelAnimationFrame(that.animationId); + that.sdk.viewer && (that.sdk.viewer.clock.shouldAnimate = false) + + //判断当没有开启光照时,点击停止播放时关闭实时光照按钮 + if (document.getElementById('weatherSwitch').style.color == 'rgb(255, 255, 255)') { + callback(false) } + } else {//播放 + let now = performance.now() + const pausedDuration = now - that.pausedTime; + document.getElementById('timePause').textContent = '暂停'; + that.manualPosition = null + that.startTime += pausedDuration; // 补偿暂停期间的时间差 + if (that.changeDate) {//切换日期后让时间从0开始 + if (that.changeDateGrag) { + that.changeDateGrag = undefined + } else { + that.startTime = now + } + that.changeDate = undefined + } + if (document.getElementById('weatherSwitch').style.color === 'rgba(var(--color-base1), 1)') {//判断光照开关是否开启，开启则打开cesium阴影 + that.sdk.viewer.clock.shouldAnimate = true + } + that.update(); // 重启动画循环 } + // } }); } @@ -119,20 +127,56 @@ export default class TimeLine { // document.getElementById('timePause')?.click() } } - calculateTimePercentage() { - // 获取当前时间 - const now = new Date(); - const hours = now.getHours(); - const minutes = now.getMinutes(); - const seconds = now.getSeconds(); + // calculateTimePercentage() { + // // 获取当前时间 + // const now = new Date(); + // const hours = now.getHours(); + // const minutes = now.getMinutes(); + // const seconds = now.getSeconds(); - // 计算当前时间总秒数 - const totalSeconds = (hours * 3600) + (minutes * 60) + seconds; + // // 计算当前时间总秒数 + // const totalSeconds = (hours * 3600) + (minutes * 60) + seconds; + + // // 24小时总秒数 + // const totalSecondsInDay = 24 * 3600; + + // // 计算百分比并保留两位小数 + // const percentage = (totalSeconds / totalSecondsInDay); + // return percentage; + // } + calculateTimePercentage(timeString = null) { + let totalSeconds; + + if (timeString) { + // 解析传入的时间字符串 "HH:MM:SS" + const timeParts = timeString.split(':'); + const hours = parseInt(timeParts[0]); + const minutes = parseInt(timeParts[1]); + const seconds = parseInt(timeParts[2]); + + // 验证时间格式 + if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) || + hours < 0 || hours > 23 || + minutes < 0 || minutes > 59 || + seconds < 0 || seconds > 59) { + throw new Error('Invalid time format. Please use "HH:MM:SS" format'); + } + + totalSeconds = (hours * 3600) + (minutes * 60) + seconds; + } else { + // 获取当前时间 + const now = new Date(); + const hours = now.getHours(); + const minutes = now.getMinutes(); + const seconds = now.getSeconds(); + + totalSeconds = (hours * 3600) + (minutes * 60) + seconds; + } // 24小时总秒数 const totalSecondsInDay = 24 * 3600; - // 计算百分比并保留两位小数 + // 计算百分比 const percentage = (totalSeconds / totalSecondsInDay); return percentage; } @@ -159,8 +203,8 @@ export default class TimeLine { } }); } - setCurrBar() { - let pos = this.calculateTimePercentage() + setCurrBar(time) { + let pos = this.calculateTimePercentage(time) this.manualPosition = pos; this.progress.style.width = `${pos * 100}%`; diff --git a/src/renderer/src/views/components/headers/index.vue b/src/renderer/src/views/components/headers/index.vue index 5074450..ce6d614 100644 --- a/src/renderer/src/views/components/headers/index.vue +++ b/src/renderer/src/views/components/headers/index.vue @@ -14,14 +14,22 @@
- + @@ -58,6 +66,17 @@ const headImg = computed(() => { } }) +let weatherIcon = ref(null) +const handleChildData = (data) => { + clickFun(data) +} + +//存储子组件播放按钮状态：true：暂停 + +const isPause = (data) => { + window.pauseBut = weatherClick && data ? true : false +} + const skinInfo = ref(JSON.parse(localStorage.getItem('systemSetting') || '{}').skinInfo || 'color1') const { t } = useI18n() @@ -67,7 +86,6 @@ const date = ref({ week: 0 }) window.addEventListener('setItemEvent', (e: any) => { - console.log('e', e) if (e.key == 'systemSetting') { let obj = JSON.parse(e.newValue) skinInfo.value = obj.skinInfo @@ -86,6 +104,7 @@ window.addEventListener('setItemEvent', (e: any) => { } }) var weatherClick = ref(false) +var weatherClickPop = ref(false) const setTime = () => { let date1 = new Date() let year: any = date1.getFullYear() @@ -113,10 +132,113 @@ const timer = setInterval(setTime, 1000) onUnmounted(() => { clearInterval(timer) }) - -var clickFun = () => { +let sunshine +var clickFun = (childData) => { weatherClick.value = !weatherClick.value - console.log('点击天气', weatherClick.value) + if (weatherClick.value) { + let data = JSON.parse(localStorage.getItem('shineSetting')) + if (!data) { + const now = new Date() + const formattedDate = now.toISOString().slice(0, 10) + data = { + currWeather: true, + softShadow: true, + darkness: 0.4, + speed: 1, + time: formattedDate, + timeerTime: '00:00:00', + wearther: [ + // 雨 + { + name: '雨', + svg: 'rain', + status: false + }, + // 雪 + { + name: '雪', + svg: 'snow', + status: false + }, + //雾 + { + name: '雾', + svg: 'fog', + status: false + }, + //星空 + { + name: '星空', + svg: 'skystarry', + status: false + } + ] + } + } + //光照 + if (childData.currWeather === undefined && weatherClickPop.value === false) { + sunshine = new YJ.Global.efflect.Sunshine(window.earth, { + id: 123, + speed: data.speed, + time: data.currWeather ? new Date().toISOString().slice(0, 10) : data.time, + // @ts-ignore + hour: data.currWeather ? new Date().toLocaleTimeString() : data.timeerTime + }) + window.sunshine = sunshine + sunshine.darkness = data.darkness + sunshine.softShadow = data.softShadow + + //天气效果 + if ((window as any).checkAuthIsValid) { + data.wearther.forEach((item) => { + if (item.status) { + func[item.svg](item) + } + }) + } else { + // ElMessage({ + // message: '您没有该功能的权限', + // type: 'warning' + // }) + } + } else if (weatherClickPop.value === false) { + sunshine = new YJ.Global.efflect.Sunshine(window.earth, { + id: 123, + speed: childData.speed, + time: childData.time, + // @ts-ignore + hour: document.getElementById('currentTime').textContent + }) + window.sunshine = sunshine + sunshine.darkness = childData.darkness + sunshine.softShadow = childData.softShadow + } + } else { + sunshine && sunshine.remove() + sunshine = null + window.sunshine && window.sunshine.remove() + delete window.sunshine + } +} +var func = { + rain: (item) => { + YJ.Global.efflect.rain(window.earth, item.status) + }, + //雪 + snow: (item) => { + YJ.Global.efflect.snow(window.earth, item.status) + }, + //雾 + fog: (item) => { + YJ.Global.efflect.fog(window.earth, item.status) + }, + // 星空 + skystarry: (item) => { + YJ.Global.efflect.skyStarry(window.earth, item.status) + } +} +var clickFunRight = () => { + weatherClickPop.value = !weatherClickPop.value } // onMounted(() => {