+
+ `
+ }
+ weatherType() {
+ return html`
+
+
+
+ ${this.locationType()} ${this.weatherType()}
+
+ ${this.detailType()}
+
+  && this.data.weatherInfo[0]?.weather?.labelEn] || Noload})
+
+ `
+ }
+ locationType() {
+ if (this.type !== 'type11' && typeMy[this.type]) {
+ return html`
+
+
+ `
+ } else {
+ return ''
+ }
+ }
+ detailType() {
+ if (this.type === 'type22') {
+ return html`
+
+ 空气质量
+
+ ${this.dataBoo() && (this.data.weatherInfo[0]?.airQuality?.value +
+ this.data.weatherInfo[0]?.airQuality?.type) || ''}
+
+
+
+ 体感温度
+
+ ${(this.dataBoo() &&
+ this.data.weatherInfo[0].somatosensoryTemperature) || ''}
+
+
+
+ 湿度
+
+ ${(this.dataBoo() && this.data.weatherInfo[0]?.humidity) || ''}
+
+
+
+
+ ${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.label) || '风向'}
+
+
+ ${(this.dataBoo() && this.data.weatherInfo[0]?.wind?.value) || ''}
+
+
+
+ 能见度
+
+ ${(this.dataBoo() && this.data.weatherInfo[0]?.visibility) || ''}
+
+
+
+ 紫外线
+
+ ${(this.dataBoo() && this.data.weatherInfo[0]?.ultravioletRys) || ''}
+
+
+ `
+ } else {
+ return ''
+ }
+ }
+ protected firstUpdated() {
+ this.resize()
+ window.addEventListener('resize', () => {
+ this.resize()
+ })
+ }
+ protected resize() {
+ let parentHeight, parentWidth
+ if (this.parentElement){
+ parentHeight = this.parentElement.offsetHeight
+ parentWidth = this.parentElement.offsetWidth
+ }else if(this.parentNode instanceof ShadowRoot){
+ parentHeight=(this.parentNode.host as HTMLElement).offsetHeight
+ parentWidth=(this.parentNode.host as HTMLElement).offsetWidth
+ }
+ let height = parentHeight || 10
+ let width = parentWidth || 10
+ // console.log(height,width,'111111111')
+ // this.style.setProperty('--autoWidth2--', width + 'px')
+ // this.style.setProperty('--autoHeight2--', height + 'px')
+ let proportion: any = typeMy[this.type]
+ let minOne: any = minAll[this.type]
+ this.style.setProperty('--autoWidth--', minOne + 'px')
+ this.style.setProperty('--autoHeight--', minOne * proportion + 'px')
+ if (height / width >= proportion) {
+ this.style.setProperty('--autoScale--', width / minOne + '')
+ } else {
+ this.style.setProperty('--autoScale--', height / (minOne * proportion) + '')
+ }
+ }
+}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'star-weather': StarWeather
+ }
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 3d72209..d3a30d6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,6 +12,7 @@ import './components/radio/radio-group'
import './components/radio/radio'
import './components/confirm/confirm'
import './components/clock/clock'
+import './components/weather/weather'
import './components/toast/toast'
import './components/picker/picker'
import './components/overflowmenu/overflowmenu'
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 59e7730..8de14da 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -21,6 +21,7 @@ import './container/container'
import './radio/radio'
import './confirm/confirm'
import './clock/clock'
+import './weather/weather'
import './overflowmenu/overflowmenu'
import './switch/switch'
import './slider/slider'
@@ -317,6 +318,14 @@ export class PanelRoot extends LitElement {
iconcolor="green"
href="#clock"
>
+
+
+
+ ${(this.dataBoo() && this.data.location) || ''}
+
+
+ ${(this.dataBoo() && this.data.weatherInfo[0]?.temperature?.max) || ''}
+
+ +
+
+
+
+ `
+ }
+ static styles = css`
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ `
+ protected firstUpdated() {
+ // this.weatherDemo1.data = weatherData
+ // this.weatherDemo2.data = weatherData
+ // this.weatherDemo3.data = weatherData
+ this.weatherDemo4.data = weatherData
+ }
+}
+declare global {
+ interface HTMLElementTagNameMap {
+ 'panel-weather': PanelWeather
+ }
+}
diff --git a/src/test/panels/weather/weatherData.ts b/src/test/panels/weather/weatherData.ts
new file mode 100644
index 0000000..6b33b75
--- /dev/null
+++ b/src/test/panels/weather/weatherData.ts
@@ -0,0 +1,30 @@
+export const weatherData = {
+ location: '长沙市',
+ weatherInfo: [
+ {
+ date: new Date(),
+ temperature: {
+ min: '22℃',
+ max: '29℃',
+ },
+ weather: {
+ labelZh: '多云',
+ labelEn: 'PartlyCloudy',
+ },
+ wind: {
+ label: '南风',
+ value: '6级',
+ },
+ humidity: '40%',
+ airQuality: {
+ label: '空气质量',
+ value: '28',
+ type: '优',
+ },
+ somatosensoryTemperature: '32°C',
+ visibility: '33km',
+ ultravioletRys: '强',
+ },
+ {},
+ ],
+}