大屏接口对接-环境监测

src/components/MineMonitor/LeftRainfallTrend.vue

@@ -12,6 +12,34 @@ import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import { debounce } from "lodash-es"; // 防抖函数，避免频繁触发resize
 
+import { getRainCurve } from '@/api/index-dp';
+  import {
+  useMessage
+} from 'naive-ui';
+const message = useMessage();
+
+
+// 设备状态数据列表
+var warningLines = ref([]);
+var xAxisData = ref([]);
+var yAxisData = ref([]);
+
+// 模拟接口请求函数
+const fetchRainCurve = async () => {
+    const response = await getRainCurve();
+    console.log('降雨量',response.data)
+    const result = response.data
+    if (result.code == 200) {
+      yAxisData.value = result.data.ydata
+      xAxisData.value = result.data.xdata
+      warningLines.value = result.data.alarm
+    } else {
+      message.error(result.msg)
+    }
+ 
+};
+
+
 const chartRef = ref<HTMLDivElement | null>(null);
 let chartInstance: echarts.ECharts | null = null;
 
@@ -24,12 +52,12 @@ const initChart = () => {
   console.log(hours, data)
 
  // 定义警戒线值
-  const warningLines = [
-     { value: 50, name: '蓝色警戒线', color: '#409EFF' },
-    { value: 100, name: '黄色警戒线', color: '#FFD700' },
-    { value: 150, name: '橙色警戒线', color: '#FF8C00' },
-    { value: 200, name: '红色警戒线', color: '#FF0000' }
-  ];
+  // const warningLines = [
+  //    { value: 50, name: '蓝色警戒线', color: '#409EFF' },
+  //   { value: 100, name: '黄色警戒线', color: '#FFD700' },
+  //   { value: 150, name: '橙色警戒线', color: '#FF8C00' },
+  //   { value: 200, name: '红色警戒线', color: '#FF0000' }
+  // ];
 
   chartInstance.setOption({
     grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
@@ -38,7 +66,7 @@ const initChart = () => {
   },
     xAxis: {
       type: "category",
-      data: hours,
+      data: xAxisData.value,
       axisLine: { lineStyle: { color: "#4f6b95" } },
       axisLabel: { color: "#fff", interval: 2 },
     },
@@ -49,7 +77,7 @@ const initChart = () => {
         padding: [0, 38, 0, 0],
       },
       type: "value",
-      max: 300,
+      // max: 300,
       axisLine: { lineStyle: { color: "#4f6b95" } },
       axisLabel: { color: "white"},
       splitLine: { lineStyle: { color: "rgba(79, 107, 149, 0.2)" } },
@@ -57,7 +85,7 @@ const initChart = () => {
     
     series: [
       {
-        data,
+        data: yAxisData.value,
         type: "line",
         smooth: true,
         showSymbol: false,
@@ -70,7 +98,7 @@ const initChart = () => {
         lineStyle: { color: "rgba(54, 162, 235, 1)", width: 2 },
         markLine: {
           symbol: 'none',
-          data: warningLines.map(line => ({
+          data: warningLines.value.map(line => ({
             label: {
               show: false
             },
@@ -117,6 +145,7 @@ const observeContainerResize = () => {
 let cleanupObserver: (() => void) | null = null;
 
 onMounted(() => {
+  fetchRainCurve().then(() => {
     nextTick(() => {
       initChart();
       // 添加窗口大小改变事件监听器
@@ -124,6 +153,7 @@ onMounted(() => {
       // 添加容器尺寸观察器
       cleanupObserver = observeContainerResize();
     });
+  });
 });
 
 onUnmounted(() => {

src/components/MineMonitor/RightEnvMonitor.vue

@@ -5,33 +5,33 @@
       <div class="row1">
         <div class="item">
           <img src="@/assets/jinrun/wendu.png" alt="" />
-          <div class="name">温度 25°C</div>
+          <div class="name">温度 {{ tableData.temperature }}°C</div>
         </div>
         <div class="item">
           <img src="@/assets/jinrun/shidu.png" alt="" />
-          <div class="name">湿度 25%RH</div>
+          <div class="name">湿度 {{ tableData.humidity }}%RH</div>
         </div>
         <div class="item">
           <img src="@/assets/jinrun/pm25.png" alt="" />
-          <div class="name">PM2.5 2.5μg/m³</div>
+          <div class="name">PM2.5 {{ tableData.pm25 }}μg/m³</div>
         </div>
       </div>
       <div class="row2">
         <div class="item">
           <img src="@/assets/jinrun/fengxiang.png" alt="" />
-          <div class="name">风向 东</div>
+          <div class="name">风向 {{ tableData.windDirection }}</div>
         </div>
         <div class="item">
           <img src="@/assets/jinrun/fengsu.png" alt="" />
-          <div class="name">风速 25m/s</div>
+          <div class="name">风速 {{ tableData.windSpeed }}m/s</div>
         </div>
         <div class="item">
           <img src="@/assets/jinrun/qiya.png" alt="" />
-          <div class="name">气压 8Kpa</div>
+          <div class="name">气压 {{ tableData.pressure }}Kpa</div>
         </div>
         <div class="item">
           <img src="@/assets/jinrun/pm10.png" alt="" />
-          <div class="name">PM10 10μg/m³</div>
+          <div class="name">PM10 {{ tableData.pm10 }}μg/m³</div>
         </div>
       </div>
     </div>
@@ -39,7 +39,36 @@
 </template>
 
 <script setup lang="ts">
-// import { CheckCircle, ThermometerHalf, Tint, Cloud, LocationArrow, Wind, Speedometer, ChevronUp } from '@vicons/ionicons5';
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { getEnvironmentData } from '@/api/index-dp';
+
+import {
+ useMessage
+} from 'naive-ui';
+
+const message = useMessage();
+
+
+const tableData = ref({});
+
+const fetchData = async () => {
+  const response = await getEnvironmentData();
+  if (response.data.code == 200) {
+    tableData.value = response.data.data
+  } else {
+    message.error(response.data.msg)
+  }
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchData();
+});
+
+// 组件卸载前清除定时器
+onBeforeUnmount(() => {
+  
+});
 </script>
 
 <style scoped lang="scss">

src/components/MineMonitor/RightTodayAlarm.vue

@@ -30,15 +30,15 @@
                 <span>{{ item.realName }}</span>
                 <span>{{ item.cardId }}</span>
                 <span class="time-cell">
-                  <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
-                  <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
+                  <div class="date-part">{{ item.alarmTime?.split(' ')[0] }}</div>
+                  <div class="time-part">{{ item.alarmTime?.split(' ')[1] }}</div>
                 </span>
               </dd>
             </template>
           </template>
-          <template v-else>
+          <!-- <template v-else>
             <dd class="no-data">暂无数据</dd>
-          </template>
+          </template> -->
         </dl>
       </div>
     </div>
@@ -62,15 +62,15 @@
                 <span>{{ item.licensePlate }}</span>
                 <span>{{ item.alarmType }}</span>
                 <span class="time-cell">
-                  <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
-                  <div class="time-part">{{ item.alarmTime.split(' ')[1] }}</div>
+                  <div class="date-part">{{ item.alarmTime?.split(' ')[0] }}</div>
+                  <div class="time-part">{{ item.alarmTime?.split(' ')[1] }}</div>
                 </span>
               </dd>
             </template>
           </template>
-          <template v-else>
+          <!-- <template v-else>
             <dd class="no-data">暂无数据</dd>
-          </template>
+          </template> -->
         </dl>
       </div>
     </div>
@@ -92,15 +92,15 @@
                 <span>{{ item.driver }}</span>
                 <span>{{ item.licensePlate }}</span>
                 <span class="time-cell">
-                  <div class="date-part">{{ item.boundaryTime.split(' ')[0] }}</div>
-                  <div class="time-part">{{ item.boundaryTime.split(' ')[1] }}</div>
+                  <div class="date-part">{{ item.boundaryTime?.split(' ')[0] }}</div>
+                  <div class="time-part">{{ item.boundaryTime?.split(' ')[1] }}</div>
                 </span>
               </dd>
             </template>
           </template>
-          <template v-else>
+          <!-- <template v-else>
             <dd class="no-data">暂无数据</dd>
-          </template>
+          </template> -->
         </dl>
       </div>
     </div>
@@ -124,15 +124,15 @@
                 <span>{{ item.value }}{{ item.unit }}</span>
                 <span>{{ item.alarmlevel }}</span>
                 <span class="time-cell">
-                  <div class="date-part">{{ item.time.split(' ')[0] }}</div>
-                  <div class="time-part">{{ item.time.split(' ')[1] }}</div>
+                  <div class="date-part">{{ item.time?.split(' ')[0] }}</div>
+                  <div class="time-part">{{ item.time?.split(' ')[1] }}</div>
                 </span>
               </dd>
             </template>
           </template>
-          <template v-else>
+          <!-- <template v-else>
             <dd class="no-data">暂无数据</dd>
-          </template>
+          </template> -->
         </dl>
       </div>
     </div>
@@ -355,7 +355,7 @@ onBeforeUnmount(() => {
 }
 
 .alarm-tabs {
-  width: 4.4rem;
+  width: 4.5rem;
   display: flex;
   gap: 0.05rem;
   margin-top: 0.18rem;
@@ -372,6 +372,7 @@ onBeforeUnmount(() => {
   font-weight: 400;
   font-size: 0.16rem;
   color: #88DBBD;
+  padding-right: 0rem;
   
   &.active {
     color: #05FFA4;