联调接口

.env.development

@@ -1,2 +1,8 @@
 # 获取天气数据
-VITE_APP_API=https://api.openweathermap.org
+VITE_APP_API=https://api.openweathermap.org
+
+# 获取百度天气数据
+VITE_APP_BD_API=http://127.0.0.1:3007
+
+# 获取外网天气数据
+VITE_APP_WW_API=http://192.168.2.180:3000

src/api/index.js

@@ -8,4 +8,22 @@ export function getTempData(data) {
       params: data,
       method: "get",
     });
+}
+
+//获取百度天气数据
+export function getBaiduTempData(data) {
+    return request({
+      baseURL: import.meta.env.VITE_APP_BD_API,
+      url: `/weather/inchina/list`,
+      params: data,
+      method: "get",
+    });
+}
+//获取外网天气数据
+export function getWWTempData() {
+    return request({
+      baseURL: import.meta.env.VITE_APP_WW_API,
+      url: `/api/getLevel`,
+      method: "get",
+    });
 }

src/assets/weatherSvg/0.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f8a106"/>
+      <stop offset="1" stop-color="#f9cd0b"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w1">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w1" clip-path="url(#clip-ico-w1)">
+    <g id="ico-w1-2" data-name="ico-w1" transform="translate(-64 -242)">
+      <g id="weather-1" transform="translate(63 238)">
+        <path id="Path_76" data-name="Path 76" d="M64.25,32.25H52.93a16.89,16.89,0,0,0-1.4-5.2l9.81-5.67a1.74,1.74,0,0,0-1.74-3L49.78,24A16.8,16.8,0,0,0,46,20.22l5.67-9.82a1.74,1.74,0,0,0-3-1.74L43,18.47a16.6,16.6,0,0,0-5.2-1.39V5.75a1.75,1.75,0,0,0-3.5,0V17.08a16.6,16.6,0,0,0-5.2,1.39L23.43,8.66a1.74,1.74,0,1,0-3,1.74L26,20.22A16.8,16.8,0,0,0,22.22,24L12.4,18.36a1.74,1.74,0,0,0-1.74,3l9.81,5.67a16.89,16.89,0,0,0-1.4,5.2H7.75a1.75,1.75,0,0,0,0,3.5H19.07a16.89,16.89,0,0,0,1.4,5.2L10.66,46.6a1.74,1.74,0,1,0,1.74,3L22.22,44A16.8,16.8,0,0,0,26,47.78L20.36,57.6a1.74,1.74,0,1,0,3,1.74l5.67-9.81a16.89,16.89,0,0,0,5.2,1.4V62.25a1.75,1.75,0,0,0,3.5,0V50.93a16.89,16.89,0,0,0,5.2-1.4l5.67,9.81a1.74,1.74,0,1,0,3-1.74L46,47.78A16.8,16.8,0,0,0,49.78,44l9.82,5.67a1.74,1.74,0,0,0,1.74-3L51.53,41a16.89,16.89,0,0,0,1.4-5.2H64.25a1.75,1.75,0,0,0,0-3.5Z" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/1.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f8a106"/>
+      <stop offset="1" stop-color="#f9cd0b"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.559" y1="1.091" x2="0.439" y2="0.07" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#557df5"/>
+      <stop offset="1" stop-color="#adc0fa"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w3">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w3" clip-path="url(#clip-ico-w3)">
+    <g id="ico-w3-2" data-name="ico-w3" transform="translate(-206 -242)">
+      <g id="weather-19" transform="translate(207.166 238.291)">
+        <path id="Subtraction_10" data-name="Subtraction 10" d="M1814.812-3152.01a1.577,1.577,0,0,1-1.362-.786,1.56,1.56,0,0,1-.157-1.192,1.557,1.557,0,0,1,.732-.953l8.81-5.09a15.393,15.393,0,0,1-1.23-4.69h-10.2a1.572,1.572,0,0,1-1.57-1.571,1.572,1.572,0,0,1,1.57-1.57h10.18a15.289,15.289,0,0,1,1.25-4.69l-8.81-5.12a1.56,1.56,0,0,1-.732-.954,1.558,1.558,0,0,1,.157-1.191,1.576,1.576,0,0,1,1.361-.786,1.569,1.569,0,0,1,.783.211l8.84,5.1a15.061,15.061,0,0,1,3.4-3.4l-5.07-8.84a1.56,1.56,0,0,1-.157-1.192,1.56,1.56,0,0,1,.732-.954,1.567,1.567,0,0,1,.783-.21,1.578,1.578,0,0,1,1.362.786l5.09,8.81a15.316,15.316,0,0,1,4.69-1.23v-10.2a1.571,1.571,0,0,1,1.57-1.57,1.572,1.572,0,0,1,1.57,1.57v10.18a15.227,15.227,0,0,1,4.68,1.25l5.13-8.81a1.576,1.576,0,0,1,1.361-.786,1.569,1.569,0,0,1,.783.21,1.561,1.561,0,0,1,.731.954,1.56,1.56,0,0,1-.156,1.192l-5.1,8.84a15.038,15.038,0,0,1,3.4,3.4l8.86-5.071a1.57,1.57,0,0,1,.783-.21,1.578,1.578,0,0,1,1.362.785,1.573,1.573,0,0,1-.575,2.145l-2.22,1.28h-.036a15.822,15.822,0,0,0-9.032,2.822,15.9,15.9,0,0,0-5.1,5.818,13.115,13.115,0,0,0-3.057-.36h-.014a12.93,12.93,0,0,0-8.884,3.456,11.624,11.624,0,0,0-3.585,6.57h-.119a11.063,11.063,0,0,0-8.443,3.785l-3.576,2.051A1.566,1.566,0,0,1,1814.812-3152.01Z" transform="translate(-1806.834 3197.291)" fill="url(#linear-gradient)"/>
+        <path id="Path_245" data-name="Path 245" d="M64.669,50.512c0,4.117-2.633,7.488-5.539,7.488H18.856C16.459,58,12,54.489,12,49.222c0-4.389,3.915-7.988,8.778-7.988a9.656,9.656,0,0,1,1.958.2v-.281c0-5.486,4.758-9.946,10.63-9.946a11.139,11.139,0,0,1,4.178.808,13.9,13.9,0,0,1,26.931,4.995,14.124,14.124,0,0,1-2.835,8.524,6.145,6.145,0,0,1,3.029,4.977Z" fill="url(#linear-gradient-2)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/2.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f8a106"/>
+      <stop offset="1" stop-color="#f9cd0b"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w24">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w24" clip-path="url(#clip-ico-w24)">
+    <g id="ico-w10" transform="translate(-703 -242)">
+      <g id="Group_340" data-name="Group 340" transform="translate(57 181)">
+        <path id="Subtraction_24" data-name="Subtraction 24" d="M808.979-3076a1.752,1.752,0,0,1-1.75-1.75v-11.32a16.859,16.859,0,0,1-5.2-1.4l-5.67,9.81a1.732,1.732,0,0,1-1.527.994h-.044a1.738,1.738,0,0,1-1.533-.915,1.731,1.731,0,0,1,.1-1.82l5.639-9.82a16.785,16.785,0,0,1-3.78-3.78l-9.82,5.6a1.731,1.731,0,0,1-.995.313,1.744,1.744,0,0,1-.825-.208,1.734,1.734,0,0,1-.914-1.577,1.731,1.731,0,0,1,.995-1.527l9.81-5.67a16.861,16.861,0,0,1-1.4-5.2h-11.32a1.752,1.752,0,0,1-1.75-1.75,1.757,1.757,0,0,1,.561-1.284,3.968,3.968,0,0,0,.522.175,108.247,108.247,0,0,0,27.2,3.379,124.564,124.564,0,0,0,16.1-1.067,3.8,3.8,0,0,0,2.808-1.831,4.4,4.4,0,0,0,.472-1.1h10.586v.049a1.753,1.753,0,0,1,1.75,1.751,1.752,1.752,0,0,1-1.75,1.75h-11.32a16.853,16.853,0,0,1-1.4,5.2l9.81,5.67a1.749,1.749,0,0,1,.51,2.3,1.745,1.745,0,0,1-1.506.867,1.722,1.722,0,0,1-.744-.168l-9.821-5.67a16.752,16.752,0,0,1-3.78,3.78l5.6,9.82a1.732,1.732,0,0,1,.1,1.82,1.737,1.737,0,0,1-1.532.915h-.042a1.735,1.735,0,0,1-1.53-.994l-5.67-9.81a16.851,16.851,0,0,1-5.2,1.4v11.32A1.752,1.752,0,0,1,808.979-3076Zm-18.056-42.465c-1.564-.313-3.182-.689-4.809-1.116a4.21,4.21,0,0,0-1.061-.141,3.414,3.414,0,0,0-1.889.556,1.742,1.742,0,0,1-.017-1.775,1.747,1.747,0,0,1,1.506-.867,1.726,1.726,0,0,1,.745.168l5.525,3.173Zm6.449-11.245h0c-1.34-.006-2.716-.057-4.092-.152a1.748,1.748,0,0,1,.047-1.557,1.737,1.737,0,0,1,1.533-.915h.043a1.735,1.735,0,0,1,1.528.994l.941,1.629Zm9.927-.772h0v-3.766a1.752,1.752,0,0,1,1.75-1.75,1.752,1.752,0,0,1,1.75,1.75v3.09c-.394.089-.777.171-1.139.245-.775.158-1.569.3-2.359.432Z" transform="translate(-128 3202)" fill="url(#linear-gradient)"/>
+        <g id="Group_335" data-name="Group 335" transform="translate(2 -81.967)">
+          <path id="path16" d="M48.888,10.533C37.953,13.32,30.486,17.85,5.833,14.5c-2.625-.357-2.259-5.786.321-5.187,14.1,3.277,27.6,2.532,40.9-3.14C49.49,5.132,51.455,9.878,48.888,10.533ZM52.479,23.2C39.381,29.1,24.953,27.114,10.264,25c-2.622-.378-2.456-4.349.107-3.676,13.5,3.542,27.585,3.914,41.591-2.5,2.411-1.1,2.936,3.291.517,4.379ZM62.36,12.446c-20.958,8.5-29.8,10.218-41.414,9.082-2.636-.258-2.746-5.307-.107-5.079C33,17.5,44.2,15.087,61.307,7.513,63.779,6.419,64.817,11.45,62.36,12.446Z" transform="translate(645.237 145)" fill="#abbffa"/>
+          <path id="path16-9" d="M63.274,18.324c-14.307,4.689-28.785,6.655-42.431,2.8-2.566-.724-2.27-3.241.216-2.274,13.193,5.13,27.339,1.464,41.676-3.991,2.492-.948,3.073,2.63.539,3.461Z" transform="translate(643.832 145)" fill="#abbffa"/>
+          <path id="path16-6" d="M47.887,32.167A111.559,111.559,0,0,1,5.348,29.9c-2.581-.67-1.782-5.9.755-5.079,13,4.2,26.52,5.968,41.245,2.7C49.951,26.941,50.531,31.821,47.887,32.167Z" transform="translate(645.237 145)" fill="#abbffa"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/3.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.557" y1="1.102" x2="0.444" y2="0.064" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#557df5"/>
+      <stop offset="1" stop-color="#adc0fa"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w6">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w6" clip-path="url(#clip-ico-w6)">
+    <g id="ico-w23" transform="translate(-1697 -242)">
+      <g id="weather-21" transform="translate(1697 240)">
+        <path id="Path_265" data-name="Path 265" d="M56,40.34v1.32A3.33,3.33,0,0,0,59.34,45h1.54a3.33,3.33,0,0,0,1.63-6.23A16.1,16.1,0,0,0,49.89,13,15.87,15.87,0,0,0,35.06,23.37a12.69,12.69,0,0,0-4.76-.92c-6.69,0-12.11,5.08-12.11,11.33v.32A11,11,0,0,0,16,33.87h-.74a1.552,1.552,0,1,0,.15,3.1H52.66A3.33,3.33,0,0,1,56,40.34Z" fill="url(#linear-gradient)"/>
+        <path id="Path_267" data-name="Path 267" d="M50,45H8a2,2,0,0,1,0-4H50a2,2,0,0,1,0,4Zm5,16H13a2,2,0,0,1,0-4H55a2,2,0,0,1,0,4Zm10-8H23a2,2,0,0,1,0-4H65a2,2,0,0,1,0,4ZM15,53H5a2,2,0,0,1,0-4H15a2,2,0,0,1,0,4Z" fill="#557df5"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/4.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.559" y1="1.091" x2="0.439" y2="0.07" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#557df5"/>
+      <stop offset="1" stop-color="#adc0fa"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w5">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w5" clip-path="url(#clip-ico-w5)">
+    <g id="ico-w11" transform="translate(-845 -242)">
+      <g id="weather-14" transform="translate(844 240.19)">
+        <path id="Path_260" data-name="Path 260" d="M66,47.47C66,52.16,63,56,59.69,56H13.81C11.08,56,6,52,6,46c0-5,4.46-9.1,10-9.1a11,11,0,0,1,2.23.23v-.32c0-6.25,5.42-11.33,12.11-11.33a12.69,12.69,0,0,1,4.76.92,15.83,15.83,0,0,1,30.68,5.69,16.09,16.09,0,0,1-3.23,9.71A7,7,0,0,1,66,47.47Z" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/5.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.559" y1="1.091" x2="0.439" y2="0.07" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#557df5"/>
+      <stop offset="1" stop-color="#adc0fa"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.5" y1="1.007" x2="0.5" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-3" x1="0.5" y1="1" x2="0.5" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-4" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f8a106"/>
+      <stop offset="1" stop-color="#f9cd0b"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w13">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w13" clip-path="url(#clip-ico-w13)">
+    <g id="ico-w19" transform="translate(-1413 -242)">
+      <g id="weather-6" transform="translate(1410 240.18)">
+        <path id="Subtraction_18" data-name="Subtraction 18" d="M1052.6-3155.226l-30.786,0c-1.456,0-3.39-1.079-4.928-2.75a10.7,10.7,0,0,1-2.881-7.25c0-5.018,4.486-9.1,10-9.1a11.015,11.015,0,0,1,2.23.23v-.32c0-6.247,5.432-11.33,12.109-11.33h.013a12.648,12.648,0,0,1,4.747.92,15.745,15.745,0,0,1,5.848-7.54,15.756,15.756,0,0,1,8.994-2.811,15.915,15.915,0,0,1,2.9.267,15.853,15.853,0,0,1,9.352,5.524,15.853,15.853,0,0,1,3.59,10.251,16.049,16.049,0,0,1-.823,5.119,16.07,16.07,0,0,1-2.407,4.592,6.98,6.98,0,0,1,3.45,5.67,10.043,10.043,0,0,1-1.914,6.023,5.678,5.678,0,0,1-4.4,2.506H1066.6l2.64-4.479a1.985,1.985,0,0,0,.139-1.744,1.983,1.983,0,0,0-1.285-1.186l-7.2-2.17,3.039-14.361a1.994,1.994,0,0,0-1.232-2.279,1.992,1.992,0,0,0-.724-.136,2.007,2.007,0,0,0-1.724.985l-12.461,21.14a2,2,0,0,0-.157,1.7,1.994,1.994,0,0,0,1.211,1.2l3.748,1.33Z" transform="translate(-1006 3211.228)" fill="url(#linear-gradient)"/>
+        <path id="Path_127" data-name="Path 127" d="M29.527,65.517a4.836,4.836,0,0,0-.4-1.11l-4.1-8.443L20.728,64.3a4.994,4.994,0,0,0-.436,1.1l-.093.4a4.241,4.241,0,0,0-.079.832,4.783,4.783,0,1,0,9.552.119,4.426,4.426,0,0,0-.066-.832Z" fill="url(#linear-gradient-2)"/>
+        <path id="Path_128" data-name="Path 128" d="M43.254,65.517a4.875,4.875,0,0,0-.41-1.11l-4.082-8.443L34.442,64.3a4.994,4.994,0,0,0-.436,1.1l-.079.4a4.241,4.241,0,0,0-.079.832,4.783,4.783,0,1,0,9.539.119,4.4,4.4,0,0,0,0-.832Z" fill="url(#linear-gradient-3)"/>
+        <path id="Path_129" data-name="Path 129" d="M61.516,50.5l-12.46,21.14,3.42-15.68-8.96-3.18,12.46-21.14L52.556,47.8Z" fill="url(#linear-gradient-4)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/6.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1.007" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#557df5"/>
+      <stop offset="1" stop-color="#adc0fa"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.5" y1="1" x2="0.5" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-3" x1="0.5" y1="1.007" x2="0.5" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-4" x1="0.5" y1="1.003" x2="0.5" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-5" x1="0.496" y1="1.003" x2="0.496" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-6" x1="0.501" y1="1.003" x2="0.501" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-7" x1="0.5" y1="1.003" x2="0.5" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-8" x1="0.559" y1="1.091" x2="0.439" y2="0.07" xlink:href="#linear-gradient"/>
+    <clipPath id="clip-ico-w12">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w12" clip-path="url(#clip-ico-w12)">
+    <g id="ico-w14" transform="translate(-1058 -242)">
+      <g id="weather-4" transform="translate(1057 239.795)">
+        <path id="Path_102" data-name="Path 102" d="M27.512,65.721a4.572,4.572,0,0,0-.375-1.049l-3.873-7.983-4.073,7.883a4.722,4.722,0,0,0-.412,1.037l-.087.375a4.01,4.01,0,0,0-.075.787,4.522,4.522,0,1,0,9.033.113,4.185,4.185,0,0,0-.062-.787Z" fill="url(#linear-gradient)"/>
+        <path id="Path_103" data-name="Path 103" d="M40.493,65.721a4.61,4.61,0,0,0-.387-1.049l-3.86-7.983L32.16,64.572a4.722,4.722,0,0,0-.412,1.037l-.075.375a4.011,4.011,0,0,0-.075.787,4.523,4.523,0,1,0,9.02.113,4.16,4.16,0,0,0,0-.787Z" fill="url(#linear-gradient-2)"/>
+        <path id="Path_104" data-name="Path 104" d="M53.473,65.721a5.3,5.3,0,0,0-.387-1.049l-3.873-7.983L45.14,64.572a4.723,4.723,0,0,0-.412,1.037l-.088.375a5.26,5.26,0,0,0-.075.787,4.523,4.523,0,1,0,9.033.113,5.547,5.547,0,0,0,0-.787Z" fill="url(#linear-gradient-3)"/>
+        <path id="Path_105" data-name="Path 105" d="M21.178,53.228a5.26,5.26,0,0,0-.375-1.049L16.968,44.2l-4.035,7.883a4.148,4.148,0,0,0-.4,1.037l-.087.375a4.01,4.01,0,0,0-.075.787,4.485,4.485,0,1,0,8.945.112,5.572,5.572,0,0,0-.063-.787Z" fill="url(#linear-gradient-4)"/>
+        <path id="Path_106" data-name="Path 106" d="M34.021,53.228a4.573,4.573,0,0,0-.375-1.049L29.861,44.2l-4.048,7.883a4.148,4.148,0,0,0-.4,1.037l-.087.375a5.259,5.259,0,0,0-.075.787,4.485,4.485,0,1,0,8.945.112,5.571,5.571,0,0,0,0-.787Z" fill="url(#linear-gradient-5)"/>
+        <path id="Path_107" data-name="Path 107" d="M46.877,53.228a5.3,5.3,0,0,0-.387-1.049L42.666,44.2l-4.06,7.883a5.409,5.409,0,0,0-.4,1.037l-.088.375a7.644,7.644,0,0,0-.075.787,4.485,4.485,0,1,0,8.945.112,4.185,4.185,0,0,0,0-.787Z" fill="url(#linear-gradient-6)"/>
+        <path id="Path_108" data-name="Path 108" d="M59.72,53.228a4.61,4.61,0,0,0-.387-1.049L55.509,44.2l-4.035,7.883a4.722,4.722,0,0,0-.412,1.037l-.087.375a7.647,7.647,0,0,0-.075.787,4.485,4.485,0,1,0,8.945.112,5.546,5.546,0,0,0,0-.787Z" fill="url(#linear-gradient-7)"/>
+        <path id="Path_109" data-name="Path 109" d="M66,35.47C66,40.16,63,44,59.69,44H13.81C11.08,44,6,40,6,34c0-5,4.46-9.1,10-9.1a11,11,0,0,1,2.23.23v-.32c0-6.25,5.42-11.33,12.11-11.33a12.69,12.69,0,0,1,4.76.92,15.83,15.83,0,0,1,30.68,5.69,16.09,16.09,0,0,1-3.23,9.71A7,7,0,0,1,66,35.47Z" fill="url(#linear-gradient-8)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/7.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.559" y1="1.091" x2="0.439" y2="0.07" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#557df5"/>
+      <stop offset="1" stop-color="#adc0fa"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.5" y1="1" x2="0.5" y2="0" xlink:href="#linear-gradient"/>
+    <linearGradient id="linear-gradient-4" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abbffa"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w16">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w16" clip-path="url(#clip-ico-w16)">
+    <g id="ico-w16-2" data-name="ico-w16" transform="translate(-1200 -242)">
+      <g id="weather-9" transform="translate(1199 239.628)">
+        <path id="Path_159" data-name="Path 159" d="M66,47.555c0,4.69-3,8.53-6.31,8.53H13.81c-2.73,0-7.81-4-7.81-10,0-5,4.46-9.1,10-9.1a11,11,0,0,1,2.23.23v-.32c0-6.25,5.42-11.33,12.11-11.33a12.69,12.69,0,0,1,4.76.92,15.83,15.83,0,0,1,30.68,5.69,16.09,16.09,0,0,1-3.23,9.71A7,7,0,0,1,66,47.555Z" fill="url(#linear-gradient)"/>
+        <path id="Path_161" data-name="Path 161" d="M19.928,66.431a4.21,4.21,0,0,0-.3-.84l-3-6.39-3.16,6.31a4.33,4.33,0,0,0-.32.83l-.06.3a3.21,3.21,0,0,0-.06.63,3.52,3.52,0,1,0,7,.09,4.44,4.44,0,0,0,0-.63Z" fill="url(#linear-gradient-2)"/>
+        <path id="Path_162" data-name="Path 162" d="M29.928,66.431a4.21,4.21,0,0,0-.3-.84l-3-6.39-3.16,6.31a4.33,4.33,0,0,0-.32.83l-.06.3a3.21,3.21,0,0,0-.06.63,3.52,3.52,0,1,0,7,.09,4.44,4.44,0,0,0,0-.63Z" fill="url(#linear-gradient-2)"/>
+        <path id="Path_163" data-name="Path 163" d="M45.748,41.491v3.45L43.2,43.4l-1.29.7-.01,1.48,3.85,2.32v5.14l-4.42-2.57-.08-4.51-1.28-.73-1.25.77.05,2.99-2.97-1.73-1.28.73.01,1.48,2.98,1.72-2.61,1.45-.04,1.47,1.27.75,3.93-2.19,4.43,2.57-4.43,2.57-3.93-2.19-1.27.75.04,1.47,2.61,1.45-2.98,1.72-.01,1.48,1.28.73,2.97-1.73-.05,2.99,1.25.77,1.28-.73.08-4.51,4.42-2.57v5.14L41.9,64.9l.01,1.48,1.3.7,2.54-1.54v3.45l1.27.75,1.27-.75v-3.45l2.54,1.54,1.3-.7.01-1.48-3.85-2.32v-5.14l4.42,2.57.08,4.51,1.28.73,1.25-.77-.05-2.99,2.97,1.73,1.28-.73-.01-1.48-2.98-1.72,2.61-1.45.04-1.47-1.27-.75-3.93,2.19-4.43-2.57,4.43-2.57,3.93,2.19,1.27-.75-.04-1.47-2.61-1.45,2.98-1.72.01-1.48-1.28-.73-2.97,1.73.05-2.99-1.25-.77-1.28.73-.08,4.51-4.42,2.57V47.9l3.85-2.32-.01-1.48-1.3-.7-2.54,1.54v-3.45l-1.27-.75Z" fill="url(#linear-gradient-4)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/assets/weatherSvg/8.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70" height="70" viewBox="0 0 70 70">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.559" y1="1.091" x2="0.439" y2="0.07" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#557df5"/>
+      <stop offset="1" stop-color="#adc0fa"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abbffa"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+    <clipPath id="clip-ico-w21">
+      <rect width="70" height="70"/>
+    </clipPath>
+  </defs>
+  <g id="ico-w21" clip-path="url(#clip-ico-w21)">
+    <g id="ico-w17" transform="translate(-1271 -242)">
+      <g id="weather-16" transform="translate(1270 239.628)">
+        <path id="Path_205" data-name="Path 205" d="M66,47.555c0,4.69-3,8.53-6.31,8.53H13.81c-2.73,0-7.81-4-7.81-10,0-5,4.46-9.1,10-9.1a11,11,0,0,1,2.23.23v-.32c0-6.25,5.42-11.33,12.11-11.33a12.69,12.69,0,0,1,4.76.92,15.83,15.83,0,0,1,30.68,5.69,16.09,16.09,0,0,1-3.23,9.71A7,7,0,0,1,66,47.555Z" fill="url(#linear-gradient)"/>
+        <path id="Path_207" data-name="Path 207" d="M43.64,40.562v3.85l-2.846-1.719-1.44.781-.011,1.652,4.3,2.589v5.736l-4.933-2.868-.089-5.033-1.429-.815-1.4.859.056,3.337L32.536,47l-1.429.815.011,1.652,3.326,1.92-2.913,1.618-.045,1.641,1.417.837,4.386-2.444,4.944,2.868L37.29,58.776,32.9,56.332l-1.417.837.045,1.641,2.913,1.618-3.326,1.92L31.107,64l1.429.815,3.315-1.931-.056,3.337,1.4.859,1.429-.815.089-5.033,4.933-2.868V64.1l-4.3,2.589.011,1.652,1.451.781L43.64,67.4v3.85l1.417.837,1.417-.837V67.4l2.835,1.719,1.451-.781.011-1.652-4.3-2.589V58.363l4.933,2.868.089,5.033,1.429.815,1.4-.859-.056-3.337,3.315,1.931L59.008,64,59,62.347l-3.326-1.92,2.913-1.618.045-1.641-1.417-.837-4.386,2.444-4.944-2.868,4.944-2.868,4.386,2.444,1.417-.837-.045-1.641-2.913-1.618L59,49.468l.011-1.652L57.58,47l-3.315,1.931.056-3.337-1.4-.859-1.429.815-.089,5.033-4.933,2.868V47.716l4.3-2.589-.011-1.652-1.451-.781-2.835,1.719v-3.85l-1.417-.837Z" fill="url(#linear-gradient-2)"/>
+      </g>
+    </g>
+  </g>
+</svg>

src/components/windNeedCharts/svg-img-icon.vue

@@ -0,0 +1,30 @@
+<template>
+  <img :src="iconPath[svgid]" class="icon" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import icon_0 from "@/assets/weatherSvg/0.svg"
+import icon_1 from "@/assets/weatherSvg/1.svg"
+import icon_2 from "@/assets/weatherSvg/2.svg"
+import icon_3 from "@/assets/weatherSvg/3.svg"
+import icon_4 from "@/assets/weatherSvg/4.svg"
+import icon_5 from "@/assets/weatherSvg/5.svg"
+import icon_6 from "@/assets/weatherSvg/6.svg"
+import icon_7 from "@/assets/weatherSvg/7.svg"
+import icon_8 from "@/assets/weatherSvg/8.svg"
+
+const props = defineProps({
+  svgid: Number // 如 'home'
+})
+
+// 拼接路径：假设 SVG 放在 public/icons/ 下
+const iconPath = [icon_0, icon_1, icon_2, icon_3, icon_4, icon_5, icon_6, icon_7, icon_8]
+</script>
+<style lang="less" scoped>
+.icon{
+    height: 50px;
+    position: relative;
+    top: 5px;
+}
+</style>

src/views/cesium.vue

@@ -132,7 +132,7 @@
     <div class="tempImg" v-if="showtempImg">
       <img src="../assets/cesiumImg/temp.png" />
     </div>
-    <weatherView :viewer="viewer" />
+    <weatherView :viewer="viewer" :sidebarRightData="sidebarRightData" />
   </div>
 
   <el-dialog
@@ -175,7 +175,7 @@ import axios from "axios";
 
 import ModelUnpack from "@/components/modelUnpack.vue";
 import menuCom from "./menuCom.vue";
-import { getTempData } from "@/api/index.js";
+import { getTempData, getBaiduTempData, getWWTempData } from "@/api/index.js";
 import weatherView from "./weatherComponents/weatherView.vue";
 
 export default {
@@ -240,8 +240,12 @@ export default {
       loadDone: false, // 地球首次加载滚动到 reset 位置是否完成
       showtempImg: false,
       handlerAction: null,
+      sidebarRightData: null
     };
   },
+  created() {
+    this.getWeatherData()
+  },
 
   mounted() {
     this.initEventListener();
@@ -250,7 +254,7 @@ export default {
       this.initSystemInfo();
     }
     this.cityModel();
-    this.getData(106.169866, 38.46637);
+    this.getData();
   },
 
   unmounted() {
@@ -282,14 +286,30 @@ export default {
       }
     },
 
-    getData(lat, lon) {
-      // axios
-      //   .get(
-      //     `https://api.waqi.info/feed/geo:${lat};${lon}/?token=904a1bc6edf77c428347f2fe54cf663bcffaec21`
-      //   )
-      //   .then((res) => {
-      //     console.log(1122, res);
-      //   });
+    getData() {
+      getWWTempData().then(res =>{
+        console.log("res===>>>", res)
+      })
+    },
+    async getWeatherData() {
+        let that = this
+        let params = {
+            cityname: "上海天气"
+        }
+        await getBaiduTempData(params).then(res =>{
+            if (res && res.data) {
+                let obj = {
+                    base: res.data.base,
+                    weather: res.data.weather,
+                    zhishu: res.data.recommend_zhishu,
+                    pm25: res.data.ps_pm25,
+                    position: res.data.position,
+                    fiftyDay: res.data['15_day_forecast'],
+                    feature: res.data.feature
+                }
+                that.sidebarRightData = obj
+            }
+        })
     },
     // 初始化一些监听事件
     initEventListener() {

src/views/weatherComponents/weatherView.vue

@@ -1,14 +1,32 @@
 <template>
     <div class="weatherView">
+        <!-- Left Sidebar -->
+        <aside class="sidebar-left panel">
+            <div class="stat-block" style="margin-bottom: 5px;">
+                <p class="label">{{sidebarRightData.position.country}}:{{sidebarRightData.position.city}}</p>
+                <p class="value">{{today}}</p>
+            </div>
+            <div class="stat-block" style="margin-bottom: 5px;">
+                <p class="labelss">阴历：{{sidebarRightData.base.lunar}}</p>
+            </div>
+            <div class="stat-block" style="display: flex;justify-content: space-between;">
+                <p><span class="labels">日出时间： </span><span class="values">{{sidebarRightData.feature.sunriseTime}}</span></p>
+                <p><span class="labels">日落时间： </span><span class="values">{{sidebarRightData.feature.sunsetTime}}</span></p>
+            </div>
+            <div class="stat-block" style="margin-bottom: 5px;">
+                <p class="labelss">{{sidebarRightData.weather.bodytemp_info}}</p>
+            </div>
+        </aside>
         <!-- Right Sidebar -->
         <aside class="sidebar-right panel">
             <div class="weather-summary">
                 <div class="weather-temp">
-                    <span class="icon">☀️</span>
+                    <!-- <span class="icon">☀️</span> -->
+                    <svgImgIcon :svgid="0" />
                     <div>
-                        <span class="value">20<small>°C</small></span>
+                        <span class="value">{{sidebarRightData.weather.temperature}}<small>°C</small></span>
                         <div class="weather-info">
-                            <span class="condition">晴转多云, 空气质量极佳</span>
+                            <span class="condition">{{sidebarRightData.weather.precipitation_type}}, 空气质量:{{sidebarRightData.pm25.level}},pm2.5:{{sidebarRightData.pm25.ps_pm25}}</span>
                         </div>
                     </div>
                 </div>
@@ -22,45 +40,52 @@
             </div>
 
             <div class="market-demand">
-                <strong>生活气象指数</strong>
+                <strong>{{sidebarRightData.zhishu.title}}</strong>
                 <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px; font-size: 12px; opacity: 0.9;">
-                    <span>● 穿衣：大衣类(15°C ～ 20°C)</span>
-                    <span>● 感冒：易发(早晚温差大)</span>
+                    <span v-for="(it, index) in sidebarRightData.zhishu.item" :key="index">
+                        ● {{it.item_title}}({{it.item_desc}})
+                    </span>
                 </div>
             </div>
 
             <div class="info-section">
-                <h3>天气信息--上海</h3>
+                <h3>天气信息--{{sidebarRightData.position.city}}</h3>
                 <div class="info-item">
-                    <span class="label">平均风向</span><span class="value">12.9°</span>
+                    <span class="label">风向</span><span class="value">{{sidebarRightData.weather.wind_direction}}{{sidebarRightData.weather.wind_power}}</span>
                 </div>
                 <div class="info-item">
                     <span class="label">风速</span><span class="value">3.6m/s</span>
                 </div>
                 <div class="info-item">
-                    <span class="label">空气质量指数</span><span class="value">>200 <span class="tag blue">蓝色预警</span></span>
+                    <span class="label">紫外线强度</span><span class="value">{{sidebarRightData.weather.uv}} <span class="tag blue">{{sidebarRightData.weather.uv_info}}</span></span>
                 </div>
                 <div class="info-item">
-                    <span class="label">湿度</span><span class="value">64.0% <span class="tag green">✔</span></span>
+                    <span class="label">湿度</span><span class="value">{{sidebarRightData.weather.humidity}}% <span class="tag green">✔</span></span>
                 </div>
                 <div class="info-item">
-                    <span class="label">降水</span><span class="value">20mm</span>
+                    <span class="label">降水</span><span class="value">{{sidebarRightData.weather.precipitation}}mm</span>
                 </div>
                 <div class="info-item">
-                    <span class="label">大气压力</span><span class="value">997.5hPa</span>
+                    <span class="label">大气压力</span><span class="value">{{sidebarRightData.weather.pressure}}hPa</span>
                 </div>
             </div>
 
             <div class="info-section">
-                <h3>预警信息</h3>
+                <h3>未来24小时主要天气信息</h3>
                 <div class="info-item">
-                    <span class="label">降雨概率</span><span class="value">100%</span>
+                    <span class="label">温度</span><span class="value">{{sidebarRightData.fiftyDay.info[1].temperature_night}}°C-{{sidebarRightData.fiftyDay.info[1].temperature_day}}°C</span>
                 </div>
-                <div class="op-progress-bar"><div class="op-progress-bar-inner" style="width: 100%;"></div></div>
-                <div class="info-item" style="margin-top: 15px;">
+                <div class="info-item">
+                    <span class="label">风向</span><span class="value">{{sidebarRightData.fiftyDay.info[1].wind_direction_day}}{{sidebarRightData.fiftyDay.info[1].wind_power_day}}</span>
+                </div>
+                <div class="info-item">
+                    <span class="label">降雨概率</span><span class="value">{{sidebarRightData.fiftyDay.info[1].precipitation_probability_day}}%</span>
+                </div>
+                <div class="op-progress-bar"><div class="op-progress-bar-inner" :style="`width: ${sidebarRightData.fiftyDay.info[1].precipitation_probability_day}`+'%'"></div></div>
+                <!-- <div class="info-item" style="margin-top: 15px;">
                     <span class="label">云层密度</span><span class="value">32.6%</span>
                 </div>
-                <div class="op-progress-bar"><div class="op-progress-bar-inner" style="width: 32.6%;"></div></div>
+                <div class="op-progress-bar"><div class="op-progress-bar-inner" style="width: 32.6%;"></div></div> -->
             </div>
             <div class="devBox market-demand">
                 <devBox :viewer="viewer" />
@@ -107,33 +132,6 @@
                     style="width: 100%; height: 250px; margin-top: 20px"
                 ></div>
             </div>
-            <!-- <div class="panel">
-                <h3 class="panel-title">Performance forecast</h3>
-                <div class="performance-tabs">
-                    <span class="perf-tab active">15min</span>
-                    <span class="perf-tab">24 Hours</span>
-                    <span class="perf-tab">72 Hours</span>
-                    <span class="perf-tab button" style="margin-left:auto;">Comparison</span>
-                </div>
-                <div class="performance-grid">
-                    <div class="perf-item">
-                        <p class="value">60<span style="font-size: 16px;">min</span></p>
-                        <p class="label">running time</p>
-                    </div>
-                    <div class="perf-item">
-                        <p class="value">18.5<span style="font-size: 16px;">m/s</span></p>
-                        <p class="label">wind speed</p>
-                    </div>
-                    <div class="perf-item">
-                        <p class="value">30<span style="font-size: 16px;">r/s</span></p>
-                        <p class="label">motor speed</p>
-                    </div>
-                    <div class="perf-item">
-                        <p class="value">7.0<span style="font-size: 16px;">Kw</span></p>
-                        <p class="label">efficiency</p>
-                    </div>
-                </div>
-            </div> -->
         </div>
     </div>
 </template>
@@ -143,16 +141,22 @@ import devBox from "@/components/devInfoBox.vue"
 import DAYJS from "dayjs";
 import jsonData from "./weather.json";
 import waterIcon from "@/assets/cesiumImg/icowater.png";
+import svgImgIcon from "@/components/windNeedCharts/svg-img-icon.vue";
 
 export default {
     props: {
         viewer: {
             type: Object,
             default: () => null
-        }
+        },
+        sidebarRightData: {
+            type: Object,
+            default: () => null
+        },
     },
     components: {
-        devBox
+        devBox,
+        svgImgIcon
     },
     data() {
         return {
@@ -176,10 +180,12 @@ export default {
                 label: "空气质量",
                 },
             ],
+            today: '',
+            weatherSvg: ['晴', '多云', '风', '雾', '阴', '雷雨', '雨', '雨加雪', '雪']
         }
     },
     mounted() {
-        
+        this.today = DAYJS().format("YYYY年MM月DD日")
     },
     methods: {
         showDetail() {
@@ -739,6 +745,21 @@ export default {
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
     padding: 20px;
 }
+/* --- Left Sidebar --- */
+.sidebar-left {
+    position: absolute;
+    top: 100px;
+    left: 20px;
+    width: 260px;
+}
+.stat-block { margin-bottom: 15px; }
+.stat-block .label { font-size: 26px; color: #6c757d; margin-bottom: 5px; }
+.stat-block .labelss { font-size: 20px; color: #6c757d; margin-bottom: 5px; }
+.stat-block .value { font-size: 26px; font-weight: 600; color: #4b55ae; }
+.stat-block .labels { font-size: 14px; color: #212529; margin-bottom: 5px; }
+.stat-block .values { font-size: 16px; font-weight: 600; color: #4b55ae; }
+.progress-bar { height: 4px; background: #e9ecef; border-radius: 2px; margin-top: 10px; }
+.progress-bar-inner { height: 100%; background: #212529; border-radius: 2px; }
 /* --- Right Sidebar --- */
 .sidebar-right {
     position: absolute;
@@ -748,7 +769,7 @@ export default {
     height: calc(100% - 40px);
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 15px;
 }
 .weather-summary { display: flex; align-items: center; justify-content: space-between; }
 .weather-temp { display: flex; align-items: center; gap: 10px; }