add环境实时数据

src/components/MineMonitor/LeftRainfallTrend.vue

@@ -54,14 +54,18 @@ const initChart = () => {
       axisLabel: { color: "#a0b3d6", interval: 2 },
     },
     yAxis: {
-      name:'mm',
+      // name:'mm',
       // nameLocation:'end',
       // nameGap: 10, // 单位与Y轴轴线的间距
-      nameAlign:'left',
+      // nameAlign:'left',
+      // axisLabel: {
+      //       offset: 200 // 向左移动10像素
+      //   },
+      // nameTextStyle: { padding: [-30, 0, 0, 0] },
       type: "value",
       max: 300,
       axisLine: { lineStyle: { color: "#4f6b95" } },
-      axisLabel: { color: "#a0b3d6"},
+      // axisLabel: { color: "#a0b3d6"},
       splitLine: { lineStyle: { color: "rgba(79, 107, 149, 0.2)" } },
       // // 添加警戒线标记
       // axisTick: {
@@ -75,6 +79,7 @@ const initChart = () => {
         data,
         type: "line",
         smooth: true,
+        showSymbol: false, // 显示数据点显示
         areaStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: "rgba(54, 162, 235, 0.4)" },
@@ -82,21 +87,27 @@ const initChart = () => {
           ]),
         },
         lineStyle: { color: "rgba(54, 162, 235, 1)", width: 2 },
-         markPoint: {
-        data: [
-          { type: 'max', name: 'Max' },
-          { type: 'min', name: 'Min' }
-        ]
-      },
+      //    markPoint: {// 气泡
+      //   data: [
+      //     { type: 'max', name: 'Max' },
+      //     { type: 'min', name: 'Min' }
+      //   ]
+      // },
       markLine: {
+         symbol: 'none',
         // data: [{ type: 'average', name: 'Avg' }]
         data: warningLines.map(line => ({
+          label: {
+            show: false
+          },
             name: line.name,
             yAxis: line.value,
             lineStyle: {
               color: line.color,
               width: 1,
-              type: 'dashed'
+              type: 'dashed',
+             
+              
             }
           }))
       }

src/components/MineMonitor/RightEnvMonitor.vue

 <template>
-  <n-card :bordered="false" class="env-monitor-card">
-    <div class="card-header">
-      <h2 class="card-title">环境监测实时数据</h2>
-      <n-button size="small" type="text" class="collapse-btn">
-        <n-icon><ChevronUp /></n-icon> 收起
-      </n-button>
-    </div>
+  <div class="chart-container wrapper">
+    <h2 class="card-title">环境监测实时数据</h2>
     <div class="env-grid">
-      <div class="item">
-        <n-icon color="#6dd230" size="0.25rem"><CheckCircle /></n-icon>
-        <div class="name">在线</div>
-      </div>
-      <div class="item">
-        <n-icon color="#ff6384" size="0.25rem"><ThermometerHalf /></n-icon>
-        <div class="name">温度</div>
-        <div class="value">25°C</div>
-      </div>
-      <div class="item">
-        <n-icon color="#36a2eb" size="0.25rem"><Tint /></n-icon>
-        <div class="name">湿度</div>
-        <div class="value">25%RH</div>
-      </div>
-      <div class="item">
-        <n-icon color="#a0b3d6" size="0.25rem"><Cloud /></n-icon>
-        <div class="name">PM2.5</div>
-        <div class="value">2.5μg/m³</div>
-      </div>
-      <div class="item">
-        <n-icon color="#4bc0c0" size="0.25rem"><LocationArrow /></n-icon>
-        <div class="name">风向</div>
-        <div class="value">东</div>
-      </div>
-      <div class="item">
-        <n-icon color="#9c27b0" size="0.25rem"><Wind /></n-icon>
-        <div class="name">风速</div>
-        <div class="value">25m/s</div>
+      <div class="row1">
+        <div class="item">
+          <img src="@/assets/jinrun/wendu.png" alt="" />
+          <div class="name">温度 25°C</div>
+        </div>
+        <div class="item">
+          <img src="@/assets/jinrun/shidu.png" alt="" />
+          <div class="name">湿度 25%RH</div>
+        </div>
+        <div class="item">
+          <img src="@/assets/jinrun/pm25.png" alt="" />
+          <div class="name">PM2.5 2.5μg/m³</div>
+        </div>
       </div>
-      <div class="item">
-        <n-icon color="#facc15" size="0.25rem"><Speedometer /></n-icon>
-        <div class="name">气压</div>
-        <div class="value">8Kpa</div>
-      </div>
-      <div class="item">
-        <n-icon color="#ff9f40" size="0.25rem"><Cloud /></n-icon>
-        <div class="name">PM10</div>
-        <div class="value">10μg/m³</div>
+      <div class="row2">
+        <div class="item">
+          <img src="@/assets/jinrun/fengxiang.png" alt="" />
+          <div class="name">风向 东</div>
+        </div>
+        <div class="item">
+          <img src="@/assets/jinrun/fengsu.png" alt="" />
+          <div class="name">风速 25m/s</div>
+        </div>
+        <div class="item">
+          <img src="@/assets/jinrun/qiya.png" alt="" />
+          <div class="name">气压 8Kpa</div>
+        </div>
+        <div class="item">
+          <img src="@/assets/jinrun/pm10.png" alt="" />
+          <div class="name">PM10 10μg/m³</div>
+        </div>
       </div>
     </div>
-  </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -55,51 +43,53 @@
 </script>
 
 <style scoped lang="scss">
-.env-monitor-card {
-  flex: 1;
+.wrapper {
+  overflow: visible;
+  width: 4.6rem;
+  height: 3rem;
+  position: relative;
   padding: 0.15rem;
-  background: var(--n-bg-color-secondary);
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.15rem;
-
-    .card-title {
-      font-size: 0.18rem;
-      font-weight: 600;
-      color: var(--n-text-color-primary);
-    }
+  padding-top: 0.45rem;
 
-    .collapse-btn {
-      font-size: 0.14rem;
-      color: var(--n-primary-color);
-    }
+  .card-title {
+    position: absolute;
+    left: 0.25rem;
+    top: -0.15rem;
+    font-weight: 500;
+    font-size: 0.2rem;
+    color: #ffffff;
+    text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
   }
+  width: 100%;
+  margin-top: 0.3rem;
+  background-image: url("@/assets/jinrun/module-bg.png");
+  background-repeat: no-repeat;
+}
 
-  .env-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+.env-grid {
+  .row1{
+    margin-bottom: .2rem;
+  }
+  .row1,
+  .row2 {
+    display: flex;
+    justify-content: space-between;
     gap: 0.1rem;
-
+    font-weight: 400;
+    font-size: 0.16rem;
+    color: #ffffff;
     .item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .name {
       text-align: center;
-      padding: 0.1rem;
-      background: rgba(10, 25, 71, 0.6);
-      border-radius: 0.05rem;
-
-      .name {
-        font-size: 0.14rem;
-        color: var(--n-text-color-secondary);
-        margin: 0.05rem 0;
-      }
-
-      .value {
-        font-size: 0.18rem;
-        font-weight: bold;
-        color: var(--n-text-color-primary);
-      }
+    }
+    img {
+      width: 0.88rem;
+      height: 0.71rem;
+      margin-bottom: .1rem;
     }
   }
 }

src/views/_builtin/cesiumDeom/index.vue

@@ -89,8 +89,9 @@
   <transition name="slide-right">
     <div class="right-modules" v-show="isRightModulesVisible">
       <RightAiWarning />
-      <!-- 
       <RightEnvMonitor />
+      <!-- 
+      
       <RightTodayAlarm /> -->
     </div>
   </transition>