Merge branch 'zyl' of http://xny.yj-3d.com:3000/zhouyulong/electron-4 into zyl
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
1
src/renderer/components.d.ts
vendored
1
src/renderer/components.d.ts
vendored
@ -16,6 +16,7 @@ declare module 'vue' {
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
|
||||
10
src/renderer/public/sdk/YJEarth.min.js
vendored
10
src/renderer/public/sdk/YJEarth.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
src/renderer/src/assets/img/sun.png
Normal file
BIN
src/renderer/src/assets/img/sun.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 611 B |
@ -43,6 +43,7 @@ export const initMapData = async (type, data, cd) => {
|
||||
entityObject = new YJ.Obj.EllipseObject(window.earth, data)
|
||||
break
|
||||
case 'model':
|
||||
console.log('model', data)
|
||||
entityObject = new YJ.Obj.Model(window.earth, data)
|
||||
break
|
||||
case 'military':
|
||||
@ -179,6 +180,7 @@ export const initMapData = async (type, data, cd) => {
|
||||
if (entityObject.options.id) {
|
||||
(window as any)._entityMap.set(entityObject.options.id, entityObject)
|
||||
}
|
||||
|
||||
}
|
||||
// options = entityObject
|
||||
return options
|
||||
|
||||
1
src/renderer/src/icons/svg/fog.svg
Normal file
1
src/renderer/src/icons/svg/fog.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.1923828125" height="20" viewBox="0 0 20.1923828125 20" fill="none"><path d="M19.7403 8.99939C19.4488 8.32318 19.033 7.71639 18.5042 7.19692C17.9755 6.67745 17.3608 6.26993 16.6762 5.98556C15.996 5.70344 15.2752 5.55342 14.5318 5.54222C14.4572 5.26681 14.3646 4.99364 14.2493 4.72943C13.9443 4.01964 13.5082 3.38373 12.9523 2.83739C12.3987 2.29329 11.7524 1.86562 11.0316 1.56559C10.2859 1.25659 9.49729 1.09985 8.68381 1.09985C7.87034 1.09985 7.08173 1.25659 6.33604 1.56559C5.61748 1.86339 4.97122 2.29329 4.41535 2.83739C3.85947 3.38373 3.42336 4.01964 3.11831 4.72943C2.80196 5.46609 2.64152 6.24754 2.64152 7.05138C2.64152 7.20363 2.6483 7.35365 2.6596 7.50367C2.15344 7.7746 1.69248 8.13062 1.2993 8.56277C0.460967 9.4808 0 10.663 0 11.8923C0 12.5663 0.135579 13.2223 0.402217 13.8403C0.659816 14.4337 1.02588 14.9666 1.49137 15.4256C1.95685 15.8824 2.49691 16.2406 3.09797 16.4914C3.27422 16.5653 3.45274 16.628 3.63577 16.6817L3.65836 14.877C2.51498 14.3531 1.71507 13.2089 1.71507 11.8923C1.71507 10.2152 3.01211 8.8225 4.66843 8.6277C4.46958 8.13958 4.35885 7.60891 4.35885 7.05361C4.35885 4.70704 6.29537 2.80605 8.68381 2.80605C11.0723 2.80605 13.0088 4.70928 13.0088 7.05361C13.0088 7.21035 12.9997 7.36485 12.9817 7.51711C13.4336 7.3447 13.9239 7.24618 14.4369 7.24618C16.6671 7.24618 18.4771 9.02402 18.4771 11.2161C18.4771 12.8215 17.5055 14.2053 16.109 14.83L16.0842 16.6504C17.0761 16.3593 17.9755 15.8085 18.685 15.0427C19.6566 13.9948 20.1922 12.6379 20.1922 11.2161C20.1967 10.4458 20.043 9.70023 19.7403 8.99939Z" fill="#FFFFFF" ></path><path d="M6.20972 12.4857L15.2212 12.4857L15.2212 14.1874L6.20972 14.1874L6.20972 12.4857ZM4.98047 14.7919L13.9919 14.7919L13.9919 16.4936L4.98047 16.4936L4.98047 14.7919ZM5.79846 17.0982L14.8099 17.0982L14.8099 18.7999L5.79846 18.7999L5.79846 17.0982ZM12.2023 8.19108C11.9583 8.19108 11.7142 8.08808 11.5447 7.8888C11.2397 7.53054 11.2849 6.99316 11.6464 6.69088C12.5119 5.96765 13.6146 5.56909 14.7489 5.56909C15.2234 5.56909 15.6076 5.94974 15.6076 6.41995C15.6076 6.89016 15.2234 7.27081 14.7489 7.27081C14.019 7.27081 13.3095 7.52606 12.7536 7.9918C12.5955 8.1239 12.3989 8.19108 12.2023 8.19108Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
1
src/renderer/src/icons/svg/hh.svg
Normal file
1
src/renderer/src/icons/svg/hh.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M19.3625 8.55754L17.5011 8.55754C17.1483 8.55754 16.8636 8.84771 16.8636 9.1923C16.8636 9.54552 17.1483 9.83094 17.5011 9.83094L19.3625 9.83094C19.7151 9.83094 20 9.54552 20 9.1923C20 8.84771 19.7151 8.55754 19.3625 8.55754ZM7.1869 5.54873C7.43068 5.80263 7.83768 5.80263 8.08146 5.54873C8.33471 5.29957 8.33471 4.89627 8.08146 4.64712L6.76614 3.32405C6.51761 3.07491 6.11536 3.07491 5.86686 3.32405C5.62308 3.57322 5.62308 3.97652 5.86686 4.22611L7.1869 5.54873ZM16.262 5.54873L17.5812 4.22611C17.8258 3.97652 17.8258 3.57322 17.5812 3.32405C17.3288 3.07491 16.9304 3.07491 16.6776 3.32405L15.3579 4.64712C15.1094 4.89627 15.1094 5.29957 15.3579 5.54873C15.6116 5.80263 16.0091 5.80263 16.262 5.54873ZM11.7242 4.04475C12.0727 4.04475 12.3569 3.75458 12.3569 3.40093L12.3569 1.53466C12.3569 1.18101 12.0727 0.899902 11.7242 0.899902C11.3719 0.899902 11.0825 1.18058 11.0825 1.53466L11.0825 3.40093C11.0825 3.75458 11.3719 4.04475 11.7242 4.04475ZM1.65427 14.431C1.41052 13.8415 1.27484 13.1982 1.27484 12.5185C1.27484 11.8341 1.41052 11.1864 1.64567 10.597C1.89892 9.98985 2.26974 9.44146 2.73918 8.97942C3.19571 8.51265 3.74742 8.14129 4.35728 7.8917C4.9357 7.65119 5.58216 7.5156 6.26481 7.5156C6.76226 7.5156 7.25022 7.58339 7.70202 7.71509C8.16758 7.86018 8.60604 8.06832 9.00355 8.33602L9.03931 8.35416C9.41917 8.61282 9.76286 8.91164 10.0609 9.27391L10.07 9.28298C10.3727 9.6362 10.6212 10.0352 10.8202 10.4704C10.9374 10.7235 11.1996 10.869 11.471 10.8375L11.5886 10.8241L11.7152 10.815L11.7423 10.8107L11.8328 10.8055L11.9413 10.8055C12.3935 10.8055 12.8272 10.8966 13.2157 11.0594L13.2428 11.0728C13.6408 11.2408 14.0026 11.4852 14.301 11.7888L14.3097 11.7888L14.3187 11.8026C14.6167 12.1109 14.8614 12.4732 15.0285 12.8765L15.0285 12.8808C15.1951 13.2707 15.286 13.7055 15.286 14.1676C15.286 14.2699 15.28 14.3718 15.2709 14.472L16.5406 14.472C16.5475 14.3709 16.5561 14.2699 16.5561 14.1676C16.5561 13.5376 16.4291 12.9352 16.2038 12.3916C16.0725 12.0832 15.9092 11.7844 15.7202 11.5077C15.8782 11.2309 16.0139 10.9368 16.1134 10.6285C16.2624 10.1755 16.3391 9.69967 16.3391 9.19663C16.3391 7.91935 15.8278 6.76339 14.9871 5.9257L14.9871 5.92094L14.9781 5.91187C14.1378 5.08238 12.9904 4.56118 11.7242 4.56118C10.8745 4.56118 10.0794 4.79694 9.39678 5.19593L9.35586 5.23265C8.81794 5.54051 8.35235 5.97535 7.98669 6.4784C7.4393 6.31993 6.86088 6.23789 6.26437 6.23789C5.41463 6.23789 4.60535 6.40154 3.86932 6.71416C3.09622 7.03111 2.40454 7.49789 1.83516 8.07781C1.25675 8.64909 0.791175 9.33783 0.475049 10.1172C0.167537 10.8561 0 11.6674 0 12.5194C0 13.1964 0.11241 13.8545 0.314402 14.4729L1.67323 14.4729C1.66806 14.4582 1.66031 14.4448 1.65427 14.431ZM9.99802 6.3195L10.0385 6.30137C10.5312 6.0112 11.1053 5.84364 11.7242 5.84364C12.6463 5.84364 13.4823 6.21931 14.0922 6.82255C14.6934 7.43441 15.069 8.26781 15.069 9.19663C15.069 9.55501 15.0061 9.9173 14.9062 10.2347C14.879 10.334 14.8342 10.4247 14.7929 10.5249C14.4768 10.2757 14.1197 10.0628 13.7355 9.89917L13.7041 9.88103C13.1567 9.65476 12.5649 9.52781 11.9413 9.52781L11.9413 9.53257L11.9232 9.53257L11.8151 9.53732L11.7742 9.53732C11.5662 9.14783 11.3168 8.78511 11.0373 8.45435L11.0373 8.44528C10.6574 8.00527 10.2237 7.62529 9.73531 7.29884L9.7086 7.27164C9.5458 7.16282 9.383 7.0635 9.21158 6.98146C9.43769 6.71805 9.70385 6.49611 9.99802 6.3195ZM16.6647 17.8211L3.19658 17.8211C2.9696 17.8211 2.79087 18.0931 2.79087 18.4148C2.79087 18.7352 2.9696 18.9999 3.19658 18.9999L16.6647 18.9999C16.8916 18.9999 17.0803 18.7352 17.0803 18.4148C17.0803 18.0931 16.8916 17.8211 16.6647 17.8211ZM14.9738 16.628C14.9738 16.3413 14.7955 16.1202 14.5724 16.1202L1.09998 16.1202C0.877746 16.1202 0.694272 16.3413 0.694272 16.628C0.694272 16.9031 0.877746 17.1298 1.09998 17.1298L14.5724 17.1298C14.7955 17.1298 14.9738 16.9026 14.9738 16.628Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
1
src/renderer/src/icons/svg/pw.svg
Normal file
1
src/renderer/src/icons/svg/pw.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
1
src/renderer/src/icons/svg/qc.svg
Normal file
1
src/renderer/src/icons/svg/qc.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
1
src/renderer/src/icons/svg/rain.svg
Normal file
1
src/renderer/src/icons/svg/rain.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.1923828125" height="20" viewBox="0 0 20.1923828125 20" fill="none"><path d="M16.5969 12.9364L3.6107 12.9364C1.61975 12.9364 0 11.3264 0 9.34752C0 7.71959 1.11346 6.30497 2.65593 5.88535C2.65412 5.84661 2.65319 5.80781 2.65319 5.76905C2.65319 4.39379 3.77777 3.27493 5.16008 3.27493C5.66977 3.27493 6.15753 3.42682 6.56787 3.70432C7.49091 1.82306 9.42227 0.600098 11.5668 0.600098C14.5264 0.600098 16.9536 2.91035 17.1203 5.81269C17.8948 5.92765 18.6087 6.28852 19.1646 6.85306C19.8273 7.52608 20.1923 8.41502 20.1923 9.35607C20.1923 10.311 19.8138 11.2111 19.1266 11.8903C18.4441 12.5649 17.5457 12.9364 16.5969 12.9364ZM5.1601 4.1995C4.29024 4.1995 3.58255 4.90362 3.58255 5.76905C3.58255 5.89399 3.59767 6.01924 3.62747 6.14132C3.65856 6.26839 3.63402 6.40267 3.56 6.51077C3.48597 6.61885 3.36931 6.69073 3.23908 6.70848C1.92233 6.88806 0.929364 8.02258 0.929364 9.34752C0.929364 10.8166 2.13223 12.0118 3.6107 12.0118L16.5969 12.0118C17.2986 12.0118 17.9643 11.7358 18.4716 11.2345C18.9819 10.7301 19.2629 10.063 19.2629 9.35612C19.2629 8.65845 18.9923 7.99929 18.5007 7.50011C18.0101 7.00194 17.3542 6.71725 16.6537 6.69847C16.3983 6.69168 16.1964 6.48102 16.2016 6.22692C16.2019 6.21407 16.2014 6.20151 16.2011 6.18891C16.2006 6.17008 16.2001 6.15119 16.2001 6.13178C16.2001 3.59141 14.1216 1.52469 11.5668 1.52469C9.58744 1.52469 7.82616 2.77533 7.18399 4.63675C7.1292 4.79556 6.99221 4.91231 6.82609 4.94176C6.65988 4.97131 6.49079 4.90877 6.38419 4.77863C6.08287 4.41058 5.63672 4.1995 5.1601 4.1995Z" fill="#00FFFF" ></path><path d="M5.46419 19.5001C5.20757 19.5001 4.99951 19.2931 4.99951 19.0378L4.99951 14.2079C4.99951 13.9526 5.20757 13.7456 5.46419 13.7456C5.72079 13.7456 5.92885 13.9526 5.92885 14.2079L5.92885 19.0378C5.92885 19.2931 5.72079 19.5001 5.46419 19.5001Z" fill="#00FFFF" ></path><path d="M8.68634 17.6509C8.42974 17.6509 8.22168 17.4439 8.22168 17.1886L8.22168 14.2079C8.22168 13.9526 8.42974 13.7456 8.68634 13.7456C8.94296 13.7456 9.15102 13.9526 9.15102 14.2079L9.15102 17.1886C9.15102 17.4439 8.94296 17.6509 8.68634 17.6509Z" fill="#00FFFF" ></path><path d="M11.9076 19.5001C11.6509 19.5001 11.4429 19.2931 11.4429 19.0378L11.4429 14.2079C11.4429 13.9526 11.6509 13.7456 11.9076 13.7456C12.1642 13.7456 12.3722 13.9526 12.3722 14.2079L12.3722 19.0378C12.3723 19.2931 12.1642 19.5001 11.9076 19.5001Z" fill="#00FFFF" ></path><path d="M15.1297 17.6509C14.8731 17.6509 14.665 17.4439 14.665 17.1886L14.665 14.2079C14.665 13.9526 14.8731 13.7456 15.1297 13.7456C15.3863 13.7456 15.5944 13.9526 15.5944 14.2079L15.5944 17.1886C15.5944 17.4439 15.3863 17.6509 15.1297 17.6509Z" fill="#00FFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
1
src/renderer/src/icons/svg/skystarry.svg
Normal file
1
src/renderer/src/icons/svg/skystarry.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.1923828125" height="13.800048828125" viewBox="0 0 20.1923828125 13.800048828125" fill="none"><path d="M10.0962 2.55556C11.52 2.55556 12.6849 1.40556 12.6849 0L7.5074 0C7.5074 1.40556 8.67234 2.55556 10.0962 2.55556ZM14.8854 0L13.7204 0C13.7204 0.383333 13.7204 0.638889 13.591 1.02222L14.7559 1.27778C14.8854 0.894445 14.8854 0.383333 14.8854 0ZM9.19009 3.45C8.5429 3.32222 8.02515 3.06667 7.5074 2.55556L6.73077 3.45C7.37796 4.08889 8.02515 4.47222 8.93121 4.6L9.19009 3.45ZM12.6849 2.55556C12.1672 3.06667 11.6494 3.32222 11.0022 3.45L11.3905 4.6C12.1672 4.34445 12.9438 3.96111 13.591 3.45L12.6849 2.55556ZM6.60133 1.02222C6.47189 0.638889 6.47189 0.383333 6.47189 0L5.30695 0C5.30695 0.383333 5.30695 0.894445 5.43639 1.27778L6.60133 1.02222ZM17.4741 0L16.3092 0C16.3092 0.383333 16.3092 0.766667 16.1797 1.02222L17.3447 1.27778C17.4741 0.766667 17.4741 0.383333 17.4741 0ZM4.91864 5.23889L5.69527 4.47222C5.30695 3.96111 4.91864 3.45 4.53033 2.81111L3.49482 3.45C3.88314 4.08889 4.40089 4.72778 4.91864 5.23889ZM6.73077 6.51667C7.5074 6.9 8.15459 7.15556 8.93121 7.28334L9.06065 6.13334C8.5429 6.00556 7.89571 5.75 7.24852 5.49445L6.73077 6.51667ZM11.2611 7.28334C12.0377 7.15556 12.8144 6.9 13.4615 6.64445L12.9438 5.62222C12.2966 5.75 11.7788 6.00556 11.1317 6.13334L11.2611 7.28334ZM15.2737 5.23889C15.7914 4.72778 16.3092 4.08889 16.6975 3.45L15.662 2.93889C15.4031 3.45 15.0148 3.96111 14.497 4.47222L15.2737 5.23889ZM3.88314 1.02222C3.88314 0.638889 3.7537 0.383333 3.7537 0L2.7182 0C2.7182 0.383333 2.7182 0.894445 2.84763 1.27778L3.88314 1.02222ZM10.0962 11.1167C4.53033 11.1167 0 11.6278 0 12.2667L0 13.8L20.1923 13.8L20.1923 12.2667C20.1923 11.6278 15.662 11.1167 10.0962 11.1167Z" fill="#FFFFFF" ></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
1
src/renderer/src/icons/svg/snow.svg
Normal file
1
src/renderer/src/icons/svg/snow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
1
src/renderer/src/icons/svg/switch.svg
Normal file
1
src/renderer/src/icons/svg/switch.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.7001953125" height="16" viewBox="0 0 15.7001953125 16" fill="none"><path d="M6.97754 0.874993C6.97754 0.392098 7.37037 0 7.85407 0C8.33778 0 8.73206 0.39208 8.73206 0.874993L8.73206 6.38264C8.73206 6.86553 8.33778 7.25762 7.85407 7.25762C7.37037 7.25762 6.97754 6.86555 6.97754 6.38264L6.97754 0.874993Z" fill="#CCCCCC" ></path><path d="M13.403 13.7081C10.3413 16.764 5.35891 16.764 2.29627 13.7072C-0.765426 10.6513 -0.765426 5.67832 2.29627 2.62245C2.63137 2.28796 3.17512 2.28796 3.51022 2.62245C3.84534 2.95691 3.84534 3.49963 3.51022 3.83411C1.11791 6.22203 1.11791 10.1076 3.51022 12.4955C5.90256 14.8833 9.79664 14.8843 12.189 12.4965C14.5814 10.1086 14.5814 6.22091 12.189 3.83312C11.8539 3.49866 11.8539 2.95595 12.189 2.62145C12.5242 2.28699 13.0678 2.28699 13.4031 2.62145C16.4656 5.67833 16.4656 10.6513 13.403 13.7081Z" fill="#CCCCCC" ></path></svg>
|
||||
|
After Width: | Height: | Size: 959 B |
1
src/renderer/src/icons/svg/zw.svg
Normal file
1
src/renderer/src/icons/svg/zw.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 49 KiB |
@ -0,0 +1,592 @@
|
||||
<template>
|
||||
<div class="my_weather" id="my_weather">
|
||||
<!-- <div class="move_pop" id="move_pop">
|
||||
<span></span>
|
||||
<span class="close" @click.capture="onClose">✖</span>
|
||||
</div> -->
|
||||
<div class="weather_content">
|
||||
<div class="weather_content_hear">
|
||||
<span class="xian"></span>
|
||||
<span class="text">光照效果</span>
|
||||
<svg-icon
|
||||
class="switchClass"
|
||||
name="switch"
|
||||
:size="16"
|
||||
:title="switchStatus ? '关闭光照' : '开启光照'"
|
||||
:color="!switchStatus ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 255, 255, 1)'"
|
||||
@click="switchFunc"
|
||||
></svg-icon>
|
||||
</div>
|
||||
<div class="weather_content_body1">
|
||||
<span class="lightTip">模拟设定时间范围内的太阳光照效果</span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">实时天气</span>
|
||||
<el-switch
|
||||
v-model="weatherData.currWeather"
|
||||
style="--el-switch-on-color: #00ffff; --el-switch-off-color: #003333"
|
||||
@change="weatherChange"
|
||||
>
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="timeline-container">
|
||||
<div class="timeline" id="timeline">
|
||||
<div class="progress" id="progress">
|
||||
<div class="handle" id="handle"></div>
|
||||
<div class="current-time" id="currentTime">00:00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-marks"></div>
|
||||
<!-- <button id="timePause">暂停</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconCon">
|
||||
<div class="item_icon" v-for="(item, index) in timelist" :key="index">
|
||||
<svg-icon
|
||||
:name="item.svg"
|
||||
:size="20"
|
||||
:color="!item.status ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 255, 255, 1)'"
|
||||
@click="clickIcon(item)"
|
||||
></svg-icon>
|
||||
<div>
|
||||
<span :class="['icon_text', !item.status ? '' : 'active']">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">阴影优化</span>
|
||||
<el-switch
|
||||
v-model="weatherData.softShadow"
|
||||
style="--el-switch-on-color: #00ffff; --el-switch-off-color: #003333"
|
||||
@change="shadowChange"
|
||||
>
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">阴影柔和度</span>
|
||||
<el-input
|
||||
class="input height"
|
||||
type="number"
|
||||
step="0.1"
|
||||
min="0"
|
||||
max="1"
|
||||
v-model="weatherData.darkness"
|
||||
@change="changDarkness"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">倍数</span>
|
||||
<el-input
|
||||
class="input height"
|
||||
type="number"
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-model="weatherData.speed"
|
||||
@change="changSpeed"
|
||||
size="small"
|
||||
>
|
||||
<template #suffix>
|
||||
<span>X</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">日期选择</span>
|
||||
<el-date-picker
|
||||
v-model="weatherData.time"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="Pick a day"
|
||||
size="small"
|
||||
@change="weatherTimeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">自动播放</span>
|
||||
<!-- <button id="timePause">暂停</button> -->
|
||||
<button id="timePause">播放</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather_content_hear">
|
||||
<span class="xian"></span>
|
||||
<span class="text">天气效果</span>
|
||||
<span class="text_two">可叠加以下天气类型</span>
|
||||
</div>
|
||||
<div class="weather_content_body">
|
||||
<div class="item_icon" v-for="(item, index) in list" :key="index">
|
||||
<svg-icon
|
||||
:name="item.svg"
|
||||
:size="20"
|
||||
:color="!item.status ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 255, 255, 1)'"
|
||||
@click="clickIcon(item)"
|
||||
></svg-icon>
|
||||
<div>
|
||||
<span :class="['icon_text', !item.status ? '' : 'active']">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TimeLine from './timeLIne'
|
||||
import { before } from 'node:test'
|
||||
var sunshine
|
||||
var timeline
|
||||
var list = reactive([
|
||||
// 雨
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '雨',
|
||||
svg: 'rain',
|
||||
status: false
|
||||
},
|
||||
// 雪
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '雪',
|
||||
svg: 'snow',
|
||||
status: false
|
||||
},
|
||||
//雾
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '雾',
|
||||
svg: 'fog',
|
||||
status: false
|
||||
},
|
||||
//星空
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '星空',
|
||||
svg: 'skystarry',
|
||||
status: false
|
||||
}
|
||||
])
|
||||
var timelist = reactive([
|
||||
// 雨
|
||||
{
|
||||
name: '清晨',
|
||||
svg: 'qc',
|
||||
status: false
|
||||
},
|
||||
// 雪
|
||||
{
|
||||
name: '正午',
|
||||
svg: 'zw',
|
||||
status: false
|
||||
},
|
||||
//雾
|
||||
{
|
||||
name: '黄昏',
|
||||
svg: 'hh',
|
||||
status: false
|
||||
},
|
||||
//星空
|
||||
{
|
||||
name: '夜晚',
|
||||
svg: 'pw',
|
||||
status: false
|
||||
}
|
||||
])
|
||||
var switchStatus = ref(false)
|
||||
|
||||
const now = new Date()
|
||||
const formattedDate = now.toISOString().slice(0, 10)
|
||||
var weatherData: any = reactive({
|
||||
currWeather: true,
|
||||
softShadow: true,
|
||||
darkness: 0.4,
|
||||
speed: 1,
|
||||
time: formattedDate
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
timeline = new TimeLine(window.earth, weatherData.speed)
|
||||
// sunshine = new YJ.Global.efflect.Sunshine(window.earth, { id: 123 })
|
||||
timeline.moveComplay((item) => {
|
||||
weatherData.currWeather = false
|
||||
sunshine.timeBar = item
|
||||
})
|
||||
// timeline.updateTime()
|
||||
// timeline.setCurrBar()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
sunshine && sunshine.remove()
|
||||
timeline && timeline.clear()
|
||||
})
|
||||
var weatherChange = () => {
|
||||
if (weatherData.currWeather) {
|
||||
let ss = getCurrentTime()
|
||||
sunshine.timeBar = ss
|
||||
weatherData.speed = 1
|
||||
sunshine && (sunshine.speed = weatherData.speed)
|
||||
timeline.setSpeed(weatherData.speed)
|
||||
}
|
||||
}
|
||||
var getCurrentTime = () => {
|
||||
const now = new Date()
|
||||
const hours = String(now.getHours()).padStart(2, '0')
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0')
|
||||
|
||||
return `${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
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,
|
||||
hour: document.getElementById('currentTime').textContent
|
||||
})
|
||||
timeline.setSunShine(true)
|
||||
} else {
|
||||
//关闭
|
||||
sunshine && sunshine.remove()
|
||||
sunshine = null
|
||||
let timeData = now.setHours(0, 0, 0, 0) // 设置为当天0点
|
||||
timeline.updateTime(timeData)
|
||||
timeline.setSunShine(false)
|
||||
}
|
||||
}
|
||||
|
||||
//雨特效
|
||||
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 clickIcon = (item: any) => {
|
||||
if ((window as any).checkAuthIsValid) {
|
||||
item.status = !item.status
|
||||
func[item.svg](item)
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '您没有该功能的权限',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
var changDarkness = () => {
|
||||
sunshine && (sunshine.darkness = weatherData.darkness)
|
||||
}
|
||||
var changSpeed = () => {
|
||||
weatherData.currWeather = false
|
||||
sunshine && (sunshine.speed = weatherData.speed)
|
||||
timeline.setSpeed(weatherData.speed)
|
||||
}
|
||||
var weatherTimeChange = () => {
|
||||
const now = new Date()
|
||||
let timeData = now.setHours(0, 0, 0, 0) // 设置为当天0点
|
||||
timeline.updateTime(timeData)
|
||||
sunshine && (sunshine.time = weatherData.time)
|
||||
}
|
||||
|
||||
var onClose = () => {}
|
||||
var shadowChange = () => {
|
||||
sunshine && (sunshine.softShadow = weatherData.softShadow)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my_weather {
|
||||
// display: none;
|
||||
position: fixed;
|
||||
top: 85px;
|
||||
left: 260px;
|
||||
width: 250px;
|
||||
height: auto;
|
||||
z-index: 30;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.2) 100%),
|
||||
rgba(0, 0, 0, 0.6);
|
||||
padding: 10px;
|
||||
border: 1.5px solid aqua;
|
||||
.move_pop {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.weather_content_hear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
// margin-bottom: 20px;
|
||||
.switchClass {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
// margin-right: 10px;
|
||||
}
|
||||
|
||||
.xian {
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
width: 2px;
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
// font-family: 'alimamashuheiti';
|
||||
}
|
||||
|
||||
.text_two {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(173, 241, 255, 1);
|
||||
}
|
||||
}
|
||||
.weather_content_body1 {
|
||||
.lightTip {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(204, 204, 204, 1);
|
||||
position: relative;
|
||||
display: block;
|
||||
left: 10px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
width: 100%;
|
||||
padding: 20px 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
height: 2px;
|
||||
background: rgba(0, 255, 255, 0.8);
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: rgba(var(--color-sdk-base-rgb), 1);
|
||||
border-radius: 15px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.handle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: white;
|
||||
/* border: 3px solid #4285f4; */
|
||||
background: unset;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: grab;
|
||||
background-image: url('@/assets/img/sun.png');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.time-marks {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.time-mark {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
.time-Point {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: rgba(0, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
z-index: 1;
|
||||
}
|
||||
.time-Point:nth-child(10) {
|
||||
left: 11px;
|
||||
}
|
||||
.time-Point:nth-child(2) {
|
||||
left: 60.5px;
|
||||
}
|
||||
.time-Point:nth-child(4) {
|
||||
left: 110px;
|
||||
}
|
||||
.time-Point:nth-child(6) {
|
||||
left: 155.5px;
|
||||
}
|
||||
.time-Point:nth-child(8) {
|
||||
left: 209px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.current-time {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
right: -25px;
|
||||
top: -200%;
|
||||
transform: translateY(-100%);
|
||||
color: rgba(255, 223, 83, 1);
|
||||
}
|
||||
|
||||
#timePause {
|
||||
// margin-top: 10px;
|
||||
background: rgba(0, 255, 255, 0.2) !important;
|
||||
border: 1px solid rgba(0, 255, 255, 0.5) !important;
|
||||
color: #fff !important;
|
||||
width: 48px !important;
|
||||
height: 24px !important;
|
||||
margin-top: 4px;
|
||||
font-size: 12px !important;
|
||||
font-weight: 400 !important;
|
||||
line-height: 24px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.iconCon {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
.item_icon {
|
||||
width: 32px;
|
||||
height: 45px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.item_icon:hover {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
.svg-icon {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
.row .col {
|
||||
display: flex;
|
||||
padding: 5px 0px 5px 0px;
|
||||
.label {
|
||||
line-height: 32px;
|
||||
}
|
||||
.el-input {
|
||||
height: 32px !important;
|
||||
}
|
||||
.el-input__wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(0, 255, 255, 0.5) !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-switch.is-checked .el-switch__core .el-switch__action {
|
||||
left: calc(100% - 11px) !important;
|
||||
}
|
||||
.el-switch__core {
|
||||
min-width: 30px !important;
|
||||
height: 13px;
|
||||
}
|
||||
.el-switch__core .el-switch__action {
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.weather_content_body {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
.item_icon {
|
||||
width: 32px;
|
||||
height: 45px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.item_icon:hover {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
.svg-icon {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,236 @@
|
||||
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
|
||||
}
|
||||
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();
|
||||
|
||||
}
|
||||
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';
|
||||
}
|
||||
|
||||
}
|
||||
@ -11,10 +11,11 @@
|
||||
<span>{{ t(`week.${date.week}`) }}</span>
|
||||
</div>
|
||||
<div class="weather">
|
||||
<svg-icon name="weather" :size="40"></svg-icon>
|
||||
<svg-icon name="weather" :size="40" @click="clickFun"></svg-icon>
|
||||
</div>
|
||||
</div>
|
||||
<setTool ref="setToolRef"></setTool>
|
||||
<weather ref="weatherRef" v-if="weatherClick"></weather>
|
||||
|
||||
<!-- <headButton class="headButton"></headButton> -->
|
||||
</div>
|
||||
@ -23,6 +24,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import setTool from './components/setTool/setTool.vue'
|
||||
import weather from './components/weather/index.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const date = ref({
|
||||
@ -30,6 +32,7 @@ const date = ref({
|
||||
hms: '',
|
||||
week: 0
|
||||
})
|
||||
var weatherClick = ref(false)
|
||||
const setTime = () => {
|
||||
let date1 = new Date()
|
||||
let year: any = date1.getFullYear()
|
||||
@ -58,6 +61,11 @@ onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
|
||||
var clickFun = () => {
|
||||
weatherClick.value = !weatherClick.value
|
||||
console.log('点击天气', weatherClick.value)
|
||||
}
|
||||
|
||||
// onMounted(() => {
|
||||
// console.log($t('headerTitles.week'))
|
||||
// })
|
||||
|
||||
110
src/renderer/src/views/components/propertyBox/weather.vue
Normal file
110
src/renderer/src/views/components/propertyBox/weather.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title=""
|
||||
left="calc(50% - 160px)"
|
||||
top="calc(50% - 120px)"
|
||||
:closeCallback="closeCallback"
|
||||
>
|
||||
<template #content>
|
||||
<div class="my_weather" id="my_weather">
|
||||
<div class="move_pop" id="move_pop">
|
||||
<!-- <span>{{ $t("headerTitles.weather") }}</span> -->
|
||||
<span></span>
|
||||
<span class="close" @click.capture="onClose">✖</span>
|
||||
</div>
|
||||
<div class="weather_content">
|
||||
<div class="weather_content_hear">
|
||||
<span class="xian"></span>
|
||||
<span class="text">天气效果</span>
|
||||
<span class="text_two">可叠加以下天气类型</span>
|
||||
</div>
|
||||
<div class="weather_content_body">
|
||||
<div class="item_icon" v-for="item in list">
|
||||
<template v-if="item.hasOwnProperty('svg')">
|
||||
<svg-icon
|
||||
:name="item.svg"
|
||||
:size="16"
|
||||
:color="!item.status ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 255, 255, 1)'"
|
||||
></svg-icon>
|
||||
</template>
|
||||
<div>
|
||||
<span :class="['icon_text', !item.status ? '' : 'active']">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const text = ref('')
|
||||
eventBus.on('openWeather', () => {
|
||||
baseDialog.value?.open()
|
||||
})
|
||||
|
||||
const entityOptions: any = ref({})
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
var list = reactive([
|
||||
// 雨
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '雨',
|
||||
svg: 'rain',
|
||||
status: false
|
||||
},
|
||||
// 雪
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '雪',
|
||||
svg: 'snow',
|
||||
status: false
|
||||
},
|
||||
//雾
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '雾',
|
||||
svg: 'fog',
|
||||
status: false
|
||||
},
|
||||
//星空
|
||||
{
|
||||
// fun: this.toDo,
|
||||
name: '星空',
|
||||
svg: 'skystarry',
|
||||
status: false
|
||||
}
|
||||
])
|
||||
const closeCallback = () => {
|
||||
entityOptions.value.oldData = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
entityOptions.value.reset()
|
||||
eventBus.emit('destroyComponent')
|
||||
}
|
||||
const open = async (id: any) => {
|
||||
that = window.earth.entityMap.get(id)
|
||||
originalOptions = structuredClone(that.newData)
|
||||
entityOptions.value = that
|
||||
baseDialog.value?.open()
|
||||
await nextTick()
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user