perf(views): 优化环境监控区域

1. 优化画布样式
2. 支持显示室内室外温湿度

src/views/env-monitor/EnvMonitor.vue

@@ -654,7 +654,7 @@ const highlightEnvPoint = (id: number) => {
             <AFlex justify="space-between" class="canvas-div-top">
               <AButton class="icon-button">
                 <SvgIcon name="outdoor" />
-                22.9℃｜60.6%
+                {{ currentAreaData?.outSideTemperature || '-' }}℃｜{{ currentAreaData?.outSideHumidity || '-' }}%
               </AButton>
               <AFlex>
                 <AFlex justify="center" align="center" class="button-icon">
@@ -668,9 +668,9 @@ const highlightEnvPoint = (id: number) => {
               </AFlex>
             </AFlex>
             <div class="canvas-content">
-              <AButton class="icon-button icon-button-margin">
-                <SvgIcon name="outdoor" />
-                22.9℃｜60.6%
+              <AButton class="icon-button icon-button-margin home-temp-humidity-button">
+                <SvgIcon name="home" />
+                {{ currentAreaData?.avgTemperature || '-' }}℃｜{{ currentAreaData?.avgHumidity || '-' }}%
               </AButton>
               <AreaPreview ref="areaPreview" :area-data="currentAreaData" @highlight-env-point="highlightEnvPoint" />
             </div>
@@ -1061,11 +1061,16 @@ const highlightEnvPoint = (id: number) => {
 }
 
 .canvas-content {
+  position: relative;
   width: 820px;
   height: 660px;
   background: #f5f7fa;
-  border: 1px solid var(--antd-color-primary);
   border-radius: 12px;
+  outline: 1px solid var(--antd-color-primary);
+}
+
+.home-temp-humidity-button {
+  position: absolute;
 }
 
 .list-regions {