From af4881a149e1c8db16529539c76f5f56c7005c13 Mon Sep 17 00:00:00 2001
From: H <30830569@qq.com>
Date: Thu, 10 Nov 2022 17:38:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sys/user.ts                           |  76 +++
 src/utils/index.ts                            |  33 +-
 src/views/device/management/index.vue         |   3 +-
 .../meteorological/components/AirHumidity.vue | 106 +++--
 .../components/AirTemperature.vue             | 144 +++---
 .../main/meteorological/components/CO2.vue    | 101 ++++
 .../components/LightIntensity.vue             | 139 +++---
 .../main/meteorological/components/Noise.vue  | 118 +++--
 .../main/meteorological/components/PM10.vue   | 118 +++--
 .../main/meteorological/components/PM25.vue   | 120 ++---
 .../meteorological/components/Pressure.vue    | 120 ++---
 .../meteorological/components/Rainfall.vue    | 139 +++---
 .../components/WindDirection.vue              | 139 +++---
 .../meteorological/components/WindSpeed.vue   | 144 +++---
 src/views/main/meteorological/index.vue       | 166 ++++++-
 .../soil-monitoring/components/FormDrawer.vue | 124 +++--
 .../soil-monitoring/components/LineCharts.vue | 147 +++---
 src/views/main/soil-monitoring/index.vue      | 442 ++++++++++--------
 18 files changed, 1461 insertions(+), 918 deletions(-)
 create mode 100644 src/views/main/meteorological/components/CO2.vue

diff --git a/src/api/sys/user.ts b/src/api/sys/user.ts
index f960508f..b767b59c 100644
--- a/src/api/sys/user.ts
+++ b/src/api/sys/user.ts
@@ -679,6 +679,22 @@ export function editCropYields(id: string, data, mode: ErrorMessageMode = 'modal
   )
 }
 
+/**
+ * @description:设备列表
+ */
+export function getDevices(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/devices',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+      isTransformResponse: false,
+    },
+  )
+}
+
 /**
  * @description:删除农作物产量
  */
@@ -721,3 +737,63 @@ export function getaGriculturalDevicePoint(params, mode: ErrorMessageMode = 'mod
     },
   )
 }
+
+/**
+ * @description:监测数据
+ */
+export function getAmonitoringData(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: `/api/monitoring-data`,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+/**
+ * @description:预警数量
+ */
+export function getDeviceWarningNums(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: `/api/device-warning-nums`,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+/**
+ * @description:预警规则
+ */
+export function getDeviceWarningRules(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: `/api/device-warning-rules`,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+/**
+ * @description:更新规则
+ */
+export function editDeviceWarningRules(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.put(
+    {
+      url: `/api/device-warning-rules`,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 9a743a9c..65ab7ebc 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,6 +3,7 @@ import type { App, Plugin } from 'vue'
 
 import { unref } from 'vue'
 import { isObject } from '/@/utils/is'
+import dayjs from 'dayjs'
 
 export const noop = () => {}
 
@@ -90,7 +91,7 @@ export const withInstall = <T>(component: T, alias?: string) => {
   }
   return component as T & Plugin
 }
-export function formatDataByObject(obj) {
+export function formatDataByObject(obj: any) {
   const arr: any[] = []
   Object.keys(obj).forEach((e) => {
     arr.push({
@@ -133,3 +134,33 @@ export function getTreeData(
 
   return arr
 }
+
+// 获取近一周的时间
+export function getWeek() {
+  const date = new Date()
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const day = date.getDate()
+  const week = date.getDay()
+  //开始时间
+  let WeekStartDate = dayjs(new Date(year, month, day - week + 1)).format('YYYY-MM-DD')
+  // 结束时间
+  let WeekEndDate = dayjs(new Date()).format('YYYY-MM-DD')
+  return {
+    WeekStartDate,
+    WeekEndDate,
+  }
+}
+
+// 获取近一月的数据
+export function getMonth() {
+  const date = new Date()
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  let MonthStartDate = dayjs(new Date(year, month, 1)).format('YYYY-MM-DD')
+  let MonthEndDate = dayjs(new Date()).format('YYYY-MM-DD')
+  return {
+    MonthStartDate,
+    MonthEndDate,
+  }
+}
diff --git a/src/views/device/management/index.vue b/src/views/device/management/index.vue
index 743946bb..23b92664 100644
--- a/src/views/device/management/index.vue
+++ b/src/views/device/management/index.vue
@@ -29,7 +29,8 @@
 </template>
 <script lang="ts" setup>
   import { BasicTable, useTable, TableAction } from '/@/components/Table'
-  import { getDevices, deleteDevice } from '/@/api/sys/other'
+  import { deleteDevice } from '/@/api/sys/other'
+  import { getDevices } from '/@/api/sys/user'
   import { message } from 'ant-design-vue'
   import { useDrawer } from '/@/components/Drawer'
   import DeviceDrawer from './DeviceDrawer.vue'
diff --git a/src/views/main/meteorological/components/AirHumidity.vue b/src/views/main/meteorological/components/AirHumidity.vue
index 00f4bff0..f8efce68 100644
--- a/src/views/main/meteorological/components/AirHumidity.vue
+++ b/src/views/main/meteorological/components/AirHumidity.vue
@@ -3,12 +3,13 @@
     <template #title>
       <div class="text-18px font-extrabold">空气湿度</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
+  import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
   import { Ref, ref, watch } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
@@ -22,60 +23,75 @@
       type: String as PropType<string>,
       default: '300px',
     },
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            smooth: true,
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'line',
-            itemStyle: {
-              color: '#5ab1ef',
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      })
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              smooth: true,
+              data: Object.values(e).map((e) => {
+                if (!!e) return e
+                return 0
+              }),
+              type: 'line',
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
diff --git a/src/views/main/meteorological/components/AirTemperature.vue b/src/views/main/meteorological/components/AirTemperature.vue
index bd7e1b14..f081827c 100644
--- a/src/views/main/meteorological/components/AirTemperature.vue
+++ b/src/views/main/meteorological/components/AirTemperature.vue
@@ -3,16 +3,17 @@
     <template #title>
       <div class="text-18px font-extrabold">空气温度</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import echarts from '/@/utils/lib/echarts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -23,77 +24,92 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            smooth: true,
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'line',
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: '#d7f3f2',
-                },
-                {
-                  offset: 1,
-                  color: '#ebf9f9',
-                },
-              ]),
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
             },
-            itemStyle: {
-              color: '#5ab1ef',
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              smooth: true,
+              data: Object.values(e).map((e) => {
+                if (!!e) return e
+                return 0
+              }),
+              type: 'line',
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#d7f3f2',
+                  },
+                  {
+                    offset: 1,
+                    color: '#ebf9f9',
+                  },
+                ]),
+              },
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/CO2.vue b/src/views/main/meteorological/components/CO2.vue
new file mode 100644
index 00000000..e8b523f8
--- /dev/null
+++ b/src/views/main/meteorological/components/CO2.vue
@@ -0,0 +1,101 @@
+<template>
+  <Card :loading="loading">
+    <template #title>
+      <div class="text-18px font-extrabold">CO2</div>
+    </template>
+    <template #extra></template>
+    <div ref="chartRef" :style="{ width, height }"></div>
+  </Card>
+</template>
+
+<script lang="ts" setup>
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
+  watch(
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              lineStyle: {
+                width: 1,
+                color: '#019680',
+              },
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+          },
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+              type: 'bar',
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
+</script>
+
+<style scoped></style>
diff --git a/src/views/main/meteorological/components/LightIntensity.vue b/src/views/main/meteorological/components/LightIntensity.vue
index c722825f..03b7c0e2 100644
--- a/src/views/main/meteorological/components/LightIntensity.vue
+++ b/src/views/main/meteorological/components/LightIntensity.vue
@@ -3,15 +3,16 @@
     <template #title>
       <div class="text-18px font-extrabold">光照强度</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -22,85 +23,77 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            symbolSize: 20,
-            type: 'scatter',
-            data: [
-              [10.0, 8.04],
-              [8.07, 6.95],
-              [13.0, 7.58],
-              [9.05, 8.81],
-              [11.0, 8.33],
-              [14.0, 7.66],
-              [13.4, 6.81],
-              [10.0, 6.33],
-              [14.0, 8.96],
-              [12.5, 6.82],
-              [9.15, 7.2],
-              [11.5, 7.2],
-              [3.03, 4.23],
-              [12.2, 7.83],
-              [2.02, 4.47],
-              [1.05, 3.33],
-              [4.05, 4.96],
-              [6.03, 7.24],
-              [12.0, 6.26],
-              [12.0, 8.84],
-              [7.08, 5.82],
-              [5.02, 5.68],
-            ],
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              symbolSize: 20,
+              type: 'scatter',
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/Noise.vue b/src/views/main/meteorological/components/Noise.vue
index 5da41b45..8e52d72f 100644
--- a/src/views/main/meteorological/components/Noise.vue
+++ b/src/views/main/meteorological/components/Noise.vue
@@ -3,15 +3,16 @@
     <template #title>
       <div class="text-18px font-extrabold">噪声</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -22,64 +23,79 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'bar',
-            itemStyle: {
-              color: '#5ab1ef',
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+              type: 'bar',
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/PM10.vue b/src/views/main/meteorological/components/PM10.vue
index 5f10dcc2..3356be37 100644
--- a/src/views/main/meteorological/components/PM10.vue
+++ b/src/views/main/meteorological/components/PM10.vue
@@ -3,15 +3,16 @@
     <template #title>
       <div class="text-18px font-extrabold">PM10</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -22,64 +23,79 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'bar',
-            itemStyle: {
-              color: '#5ab1ef',
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+              type: 'bar',
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/PM25.vue b/src/views/main/meteorological/components/PM25.vue
index c278fb15..159314e4 100644
--- a/src/views/main/meteorological/components/PM25.vue
+++ b/src/views/main/meteorological/components/PM25.vue
@@ -1,17 +1,18 @@
 <template>
   <Card :loading="loading">
     <template #title>
-      <div class="text-18px font-extrabold">大气压</div>
+      <div class="text-18px font-extrabold">PM25</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -22,64 +23,79 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'bar',
-            itemStyle: {
-              color: '#5ab1ef',
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+              type: 'bar',
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/Pressure.vue b/src/views/main/meteorological/components/Pressure.vue
index c278fb15..82315fa6 100644
--- a/src/views/main/meteorological/components/Pressure.vue
+++ b/src/views/main/meteorological/components/Pressure.vue
@@ -1,17 +1,18 @@
 <template>
   <Card :loading="loading">
     <template #title>
-      <div class="text-18px font-extrabold">大气压</div>
+      <div class="text-18px font-extrabold">风力</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -22,64 +23,79 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'bar',
-            itemStyle: {
-              color: '#5ab1ef',
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+              type: 'bar',
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/Rainfall.vue b/src/views/main/meteorological/components/Rainfall.vue
index a6798adb..2cce907e 100644
--- a/src/views/main/meteorological/components/Rainfall.vue
+++ b/src/views/main/meteorological/components/Rainfall.vue
@@ -3,15 +3,16 @@
     <template #title>
       <div class="text-18px font-extrabold">降雨量</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -22,85 +23,77 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            symbolSize: 20,
-            type: 'scatter',
-            data: [
-              [10.0, 8.04],
-              [8.07, 6.95],
-              [13.0, 7.58],
-              [9.05, 8.81],
-              [11.0, 8.33],
-              [14.0, 7.66],
-              [13.4, 6.81],
-              [10.0, 6.33],
-              [14.0, 8.96],
-              [12.5, 6.82],
-              [9.15, 7.2],
-              [11.5, 7.2],
-              [3.03, 4.23],
-              [12.2, 7.83],
-              [2.02, 4.47],
-              [1.05, 3.33],
-              [4.05, 4.96],
-              [6.03, 7.24],
-              [12.0, 6.26],
-              [12.0, 8.84],
-              [7.08, 5.82],
-              [5.02, 5.68],
-            ],
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              symbolSize: 20,
+              type: 'scatter',
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/WindDirection.vue b/src/views/main/meteorological/components/WindDirection.vue
index 3bb8c670..9241663c 100644
--- a/src/views/main/meteorological/components/WindDirection.vue
+++ b/src/views/main/meteorological/components/WindDirection.vue
@@ -3,15 +3,16 @@
     <template #title>
       <div class="text-18px font-extrabold">风向</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -22,85 +23,77 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            symbolSize: 20,
-            type: 'scatter',
-            data: [
-              [10.0, 8.04],
-              [8.07, 6.95],
-              [13.0, 7.58],
-              [9.05, 8.81],
-              [11.0, 8.33],
-              [14.0, 7.66],
-              [13.4, 6.81],
-              [10.0, 6.33],
-              [14.0, 8.96],
-              [12.5, 6.82],
-              [9.15, 7.2],
-              [11.5, 7.2],
-              [3.03, 4.23],
-              [12.2, 7.83],
-              [2.02, 4.47],
-              [1.05, 3.33],
-              [4.05, 4.96],
-              [6.03, 7.24],
-              [12.0, 6.26],
-              [12.0, 8.84],
-              [7.08, 5.82],
-              [5.02, 5.68],
-            ],
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              symbolSize: 20,
+              type: 'scatter',
+              data: Object.values(e).map((e) => {
+                if (e === 0) return null
+                return e
+              }),
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/components/WindSpeed.vue b/src/views/main/meteorological/components/WindSpeed.vue
index 6546f3a0..b0a7396d 100644
--- a/src/views/main/meteorological/components/WindSpeed.vue
+++ b/src/views/main/meteorological/components/WindSpeed.vue
@@ -3,16 +3,17 @@
     <template #title>
       <div class="text-18px font-extrabold">风速</div>
     </template>
-    <template #extra>普润镇桔博园-</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import echarts from '/@/utils/lib/echarts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
     loading: Boolean,
     width: {
@@ -23,77 +24,92 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            smooth: true,
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'line',
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: '#d7f3f2',
-                },
-                {
-                  offset: 1,
-                  color: '#ebf9f9',
-                },
-              ]),
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
+            axisTick: {
+              show: false,
             },
-            itemStyle: {
-              color: '#5ab1ef',
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              smooth: true,
+              data: Object.values(e).map((e) => {
+                if (!!e) return e
+                return 0
+              }),
+              type: 'line',
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#d7f3f2',
+                  },
+                  {
+                    offset: 1,
+                    color: '#ebf9f9',
+                  },
+                ]),
+              },
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+              start: 50,
+              end: 100,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/meteorological/index.vue b/src/views/main/meteorological/index.vue
index 49ab7655..1db029c3 100644
--- a/src/views/main/meteorological/index.vue
+++ b/src/views/main/meteorological/index.vue
@@ -13,6 +13,7 @@
           >
             <FormItem label="基地">
               <Select
+                @select="onChange('base_id')"
                 :fieldNames="{ label: 'name', value: 'id' }"
                 :options="baseDate"
                 v-model:value="formState.base_id"
@@ -29,7 +30,12 @@
             :xxl="{ span: 4 }"
           >
             <FormItem label="检测点">
-              <Select v-model:value="formState.device_id"></Select>
+              <Select
+                @select="onChange('')"
+                placeholder="请选择检测点"
+                :options="pointDate"
+                v-model:value="formState.device_id"
+              ></Select>
             </FormItem>
           </Col>
           <Col
@@ -41,7 +47,7 @@
             :xxl="{ span: 4 }"
           >
             <FormItem label="日期">
-              <RangePicker v-model:value="formState.time"></RangePicker>
+              <RangePicker @change="onChange('time')" v-model:value="formState.time"></RangePicker>
             </FormItem>
           </Col>
           <Col
@@ -53,10 +59,14 @@
             :xxl="{ span: 4 }"
           >
             <FormItem>
-              <RadioGroup button-style="solid" v-model:value="formState.time_interval">
-                <RadioButton value="a">今天</RadioButton>
-                <RadioButton value="B">近一周</RadioButton>
-                <RadioButton value="C">近一个月</RadioButton>
+              <RadioGroup
+                @change="onChange('time_interval')"
+                button-style="solid"
+                v-model:value="formState.time_interval"
+              >
+                <RadioButton value="day">今天</RadioButton>
+                <RadioButton value="week">近一周</RadioButton>
+                <RadioButton value="month">近一个月</RadioButton>
               </RadioGroup>
             </FormItem>
           </Col>
@@ -70,24 +80,93 @@
         :showActionButtonGroup="false"
       /> -->
       <div class="md:flex enter-y flex-wrap -mr-4">
-        <AirTemperature class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <AirHumidity class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <LightIntensity class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <Rainfall class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <WindSpeed class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <Pressure class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <WindDirection class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <Noise class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <PM10 class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
-        <PM25 class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
+        <!-- 空气温度 -->
+        <AirTemperature
+          :data="statisData.air_temperature"
+          :extra="name"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- 空气湿度 -->
+        <AirHumidity
+          :extra="name"
+          :data="statisData.air_humidity"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- 光照强度 -->
+        <LightIntensity
+          :extra="name"
+          :data="statisData.illumination"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- 降雨量 -->
+        <Rainfall
+          :extra="name"
+          :data="statisData.daily_rainfall"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- 风速 -->
+        <WindSpeed
+          :extra="name"
+          :data="statisData.wind_speed"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- 风力 -->
+        <Pressure
+          :extra="name"
+          :data="statisData.wind_degree"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- 风向 -->
+        <WindDirection
+          :extra="name"
+          :data="statisData.wind_direction"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- 噪声 -->
+        <Noise
+          :extra="name"
+          :data="statisData.noise"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- PM10 -->
+        <PM10
+          :extra="name"
+          :data="statisData.pm10"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- PM25 -->
+        <PM25
+          :extra="name"
+          :data="statisData.pm25"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
+        <!-- CO2 -->
+        <CO2
+          :extra="name"
+          :data="statisData.co2"
+          class="md:w-386px w-full !mr-4 !mb-4"
+          :loading="false"
+        />
       </div>
     </Card>
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
+  import { formatDataByObject, getWeek, getMonth } from '/@/utils/index'
+  import dayjs from 'dayjs'
   import { PageWrapper } from '/@/components/Page'
-  import { ref, reactive, onMounted } from 'vue'
+  import { ref, reactive, onMounted, computed } from 'vue'
   import {
     Card,
     Form,
@@ -108,23 +187,30 @@
   import Pressure from './components/Pressure.vue'
   import WindDirection from './components/WindDirection.vue'
   import Noise from './components/Noise.vue'
-  import PM10 from './components/Noise.vue'
+  import PM10 from './components/PM10.vue'
   import PM25 from './components/PM25.vue'
-  import { getGriculturalDeviceBasic, getaGriculturalDevicePoint } from '/@/api/sys/user'
+  import CO2 from './components/CO2.vue'
+  import {
+    getGriculturalDeviceBasic,
+    getaGriculturalDevicePoint,
+    getAmonitoringData,
+  } from '/@/api/sys/user'
   const formRef = ref<FormInstance>()
   const formState = reactive({
     base_id: undefined, //基地
     device_id: undefined, //监控点
-    checkNick: false,
     time: undefined, //时间
-    time_interval: '',
+    time_interval: 'day',
   })
   const baseDate = ref([])
+  const pointDate = ref<any>([])
+  const statisData = ref<any>({})
+  const name = computed(() => baseDate?.value?.find((e: any) => e.id === formState.base_id)?.name)
   // 获取基地数据
   const getBase = async () => {
     const res = await getGriculturalDeviceBasic({ device_type: 4 })
     baseDate.value = res
-    formState.base_id = res?.[0]?.id ?? undefined
+    if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
     getPoint()
   }
   // 获取监控到数据
@@ -133,7 +219,41 @@
       device_type: 4,
       agricultural_basic: formState.base_id,
     })
-    console.log(res)
+    pointDate.value = formatDataByObject(res)
+    if (!formState.device_id) formState.device_id = pointDate.value?.[0]?.value ?? undefined
+    getDate()
+  }
+  // 获取数据
+  const getDate = async () => {
+    const params = {
+      device_id: formState.device_id,
+      start_time: '',
+      end_time: '',
+    }
+    if (formState.time) {
+      params.start_time = dayjs(formState.time?.[0]).format('YYYY-MM-DD')
+      params.end_time = dayjs(formState.time?.[1]).format('YYYY-MM-DD')
+    }
+    if (formState.time_interval === 'week') {
+      const { WeekStartDate, WeekEndDate } = getWeek()
+      params.start_time = WeekStartDate
+      params.end_time = WeekEndDate
+    } else if (formState.time_interval === 'month') {
+      const { MonthStartDate, MonthEndDate } = getMonth()
+      params.start_time = MonthStartDate
+      params.end_time = MonthEndDate
+    } else if (formState.time_interval === 'day') {
+      params.start_time = ''
+      params.end_time = ''
+    }
+    const res = await getAmonitoringData(params)
+    statisData.value = res
+  }
+  const onChange = (e: string | undefined) => {
+    if (e === 'base_id') formState.device_id = undefined
+    if (e === 'time') formState.time_interval = ''
+    if (e === 'time_interval') formState.time = undefined
+    getPoint()
   }
   onMounted(() => {
     getBase()
diff --git a/src/views/main/soil-monitoring/components/FormDrawer.vue b/src/views/main/soil-monitoring/components/FormDrawer.vue
index e6796215..97ee2a7d 100644
--- a/src/views/main/soil-monitoring/components/FormDrawer.vue
+++ b/src/views/main/soil-monitoring/components/FormDrawer.vue
@@ -3,59 +3,101 @@
     v-bind="$attrs"
     @register="registerDrawer"
     showFooter
-    :title="getTitle"
+    title="设置"
     width="500px"
     @ok="handleSubmit"
   >
-    <a-form>
-      <div class="text-20px font-medium">温度</div>
-      <div class="mt-30px flex">
-        <div class="w-90px leading-32px">Ⅰ级预警：</div>
+    <div v-for="(item, index) in Title" :key="index" class="mt-10px">
+      <div class="text-20px font-semibold">{{ enumName[item] }}</div>
+      <div class="mt-30px flex" v-for="(item1, index1) in setFormat(item)" :key="index1">
+        <div class="w-90px leading-42px">{{ enumName1[item1] }}：</div>
         <div>
-          <div class="flex w-full items-center" v-for="item in 3" :key="item">
-            <a-form-item>
-              <a-input suffix="℃" />
-            </a-form-item>
-            <div class="mb-24px px-10px">-</div>
-            <a-form-item>
-              <a-input suffix="℃" />
-            </a-form-item>
+          <div
+            class="flex w-full items-center mt-10px"
+            v-for="(item2, index2) in roulsDate.value[item][item1]"
+            :key="index2"
+          >
+            <Input
+              type="number"
+              v-model:value="item2.min"
+              placeholder="请输入"
+              :suffix="enumCompany[item]"
+            />
+            <div class="mx-10px">-</div>
+            <Input
+              type="number"
+              v-model:value="item2.max"
+              placeholder="请输入"
+              :suffix="enumCompany[item]"
+            />
           </div>
         </div>
       </div>
-    </a-form>
+    </div>
   </BasicDrawer>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { Form, Input } from 'ant-design-vue';
+<script lang="ts" setup>
+  import { getDeviceWarningRules } from '/@/api/sys/user'
+  import { ref, computed } from 'vue'
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
+  import { Input } from 'ant-design-vue'
+  import { editDeviceWarningRules } from '/@/api/sys/user'
+  const emits = defineEmits(['success', 'register'])
+  const enumName = {
+    conductivity: '电导率',
+    humidity: '湿度',
+    temperature: '温度',
+    k: '氮',
+    n: '磷',
+    p: '钾',
+  }
+  const enumCompany = {
+    temperature: '℃',
+    conductivity: 'us/cm',
+    humidity: '%',
+    k: 'mg/kg',
+    n: 'mg/kg',
+    p: 'mg/kg',
+  }
+  const enumName1 = {
+    1: 'Ⅰ级预警',
+    2: 'Ⅱ级预警',
+    3: 'Ⅲ级预警',
+    4: 'Ⅳ级预警',
+  }
+  const roulsDate = ref(null)
+  const Title = computed(() => {
+    if (!roulsDate.value) return []
+    return Object.keys(roulsDate.value.value)
+  })
+  const setFormat = (e: string) => {
+    if (!roulsDate.value) return []
+    return Object.keys(roulsDate.value.value[e])
+  }
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async () => {
+    setDrawerProps({ confirmLoading: false })
 
-  export default defineComponent({
-    components: {
-      BasicDrawer,
-      [Form.name]: Form,
-      [Form.Item.name]: Form.Item,
-      [Input.name]: Input,
-    },
-    setup() {
-      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        setDrawerProps({ confirmLoading: false });
-        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
-      });
+    const res = await getDeviceWarningRules({})
+    roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_soil')
+  })
 
-      const getTitle = '设置';
-
-      async function handleSubmit() {}
-
-      return {
-        getTitle,
-        registerDrawer,
-        handleSubmit,
-      };
-    },
-  });
+  const handleSubmit = async () => {
+    if (!roulsDate.value) return
+    try {
+      const params = {
+        slug: roulsDate.value.slug,
+        value: roulsDate.value.value,
+      }
+      console.log(params)
+      const res = await editDeviceWarningRules(params)
+      console.log(res)
+      closeDrawer()
+      emits('success')
+    } finally {
+      setDrawerProps({ confirmLoading: false })
+    }
+  }
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/soil-monitoring/components/LineCharts.vue b/src/views/main/soil-monitoring/components/LineCharts.vue
index 1a392f76..59828f37 100644
--- a/src/views/main/soil-monitoring/components/LineCharts.vue
+++ b/src/views/main/soil-monitoring/components/LineCharts.vue
@@ -3,16 +3,17 @@
     <template #title>
       <div class="text-18px font-extrabold">{{ title }}</div>
     </template>
-    <template #extra>普润镇桔博园-设备间旁边</template>
+    <template #extra></template>
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
 
 <script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-  import { Ref, ref, watch } from 'vue';
-  import { useECharts } from '/@/hooks/web/useECharts';
-  import echarts from '/@/utils/lib/echarts';
+  import dayjs from 'dayjs'
+  import { Card } from 'ant-design-vue'
+  import { Ref, ref, watch } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
     loading: Boolean,
     title: {
@@ -27,77 +28,95 @@
       type: String as PropType<string>,
       default: '300px',
     },
-  });
-  const chartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    data: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+    company: {
+      type: String as PropType<string>,
+      default: '',
+    },
+  })
+  const chartRef = ref<HTMLDivElement | null>(null)
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
   watch(
-    () => props.loading,
-    () => {
-      if (props.loading) {
-        return;
-      }
-      setOptions({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            lineStyle: {
-              width: 1,
-              color: '#019680',
-            },
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-        },
-        yAxis: [
-          {
-            type: 'value',
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
+    () => props.data,
+    (e) => {
+      if (e) {
+        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
+        setOptions({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
               lineStyle: {
-                type: 'dashed',
+                width: 1,
+                color: '#019680',
               },
             },
           },
-        ],
-        grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-        series: [
-          {
-            smooth: true,
-            data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
-            type: 'line',
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: '#d7f3f2',
-                },
-                {
-                  offset: 1,
-                  color: '#ebf9f9',
-                },
-              ]),
+          xAxis: {
+            type: 'category',
+            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            axisTick: {
+              show: false,
             },
-            itemStyle: {
-              color: '#5ab1ef',
+            axisLine: {
+              show: false,
             },
           },
-        ],
-      });
+          yAxis: [
+            {
+              type: 'value',
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+          ],
+          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          series: [
+            {
+              smooth: true,
+              data: Object.values(e).map((e) => {
+                if (!!e) return e
+                return 0
+              }),
+              type: 'line',
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#d7f3f2',
+                  },
+                  {
+                    offset: 1,
+                    color: '#ebf9f9',
+                  },
+                ]),
+              },
+              itemStyle: {
+                color: '#5ab1ef',
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: 'inside', //slider表示有滑动块的，inside表示内置的
+              show: false,
+              xAxisIndex: 0,
+            },
+          ],
+        })
+      }
     },
     {
       immediate: true,
     },
-  );
+  )
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/soil-monitoring/index.vue b/src/views/main/soil-monitoring/index.vue
index eaa8e738..50a2a199 100644
--- a/src/views/main/soil-monitoring/index.vue
+++ b/src/views/main/soil-monitoring/index.vue
@@ -1,16 +1,81 @@
 <template>
   <PageWrapper>
-    <a-card>
-      <BasicForm
-        autoFocusFirstItem
-        :labelWidth="0"
-        :schemas="schemas"
-        :rowProps="{ gutter: [16, 0] }"
-        :showActionButtonGroup="false"
-      />
+    <Card>
+      <Form ref="formRef" :model="formState">
+        <Row :gutter="[16, 16]">
+          <Col
+            :xs="{ span: 24 }"
+            :sm="{ span: 12 }"
+            :md="{ span: 8 }"
+            :lg="{ span: 6 }"
+            :xl="{ span: 6 }"
+            :xxl="{ span: 4 }"
+          >
+            <FormItem label="基地">
+              <Select
+                @select="onChange('base_id')"
+                :fieldNames="{ label: 'name', value: 'id' }"
+                :options="baseDate"
+                v-model:value="formState.base_id"
+                placeholder="请选择基地"
+              ></Select>
+            </FormItem>
+          </Col>
+          <Col
+            :xs="{ span: 24 }"
+            :sm="{ span: 12 }"
+            :md="{ span: 8 }"
+            :lg="{ span: 6 }"
+            :xl="{ span: 6 }"
+            :xxl="{ span: 4 }"
+          >
+            <FormItem label="检测点">
+              <Select
+                @select="onChange('')"
+                placeholder="请选择检测点"
+                :options="pointDate"
+                v-model:value="formState.device_id"
+              ></Select>
+            </FormItem>
+          </Col>
+          <Col
+            :xs="{ span: 24 }"
+            :sm="{ span: 12 }"
+            :md="{ span: 8 }"
+            :lg="{ span: 6 }"
+            :xl="{ span: 6 }"
+            :xxl="{ span: 4 }"
+          >
+            <FormItem label="日期">
+              <RangePicker @change="onChange('time')" v-model:value="formState.time"></RangePicker>
+            </FormItem>
+          </Col>
+          <Col
+            :xs="{ span: 24 }"
+            :sm="{ span: 12 }"
+            :md="{ span: 8 }"
+            :lg="{ span: 6 }"
+            :xl="{ span: 6 }"
+            :xxl="{ span: 4 }"
+          >
+            <FormItem>
+              <RadioGroup
+                @change="onChange('time_interval')"
+                button-style="solid"
+                v-model:value="formState.time_interval"
+              >
+                <RadioButton value="day">今天</RadioButton>
+                <RadioButton value="week">近一周</RadioButton>
+                <RadioButton value="month">近一个月</RadioButton>
+              </RadioGroup>
+            </FormItem>
+          </Col>
+        </Row>
+      </Form>
+      <!--  -->
       <div class="flex justify-between">
         <span class="text-xl">预警数据统计</span>
-        <a-button @click="handleSetting">设置</a-button>
+        <Button @click="handleSetting">设置</Button>
       </div>
       <div class="mt-20px flex">
         <EarlyWarningItem
@@ -26,7 +91,7 @@
           :key="item.value"
           class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
           :class="{ active: item.value == activeKey }"
-          @click="onChangeTag(item)"
+          @click="onChangeTag(item.value)"
         >
           <img
             class="w-16px h-16px"
@@ -37,225 +102,222 @@
         </div>
       </div>
       <div class="mt-20px">
-        <LineCharts :loading="false" :title="currentActiveLable" />
+        <LineCharts
+          :company="formState.time_interval"
+          :extra="extra"
+          :loading="false"
+          :title="currentActiveLable"
+          :data="chartData"
+        />
       </div>
-    </a-card>
+    </Card>
     <FormDrawer @register="registerDrawer" @success="handleSuccess" />
   </PageWrapper>
 </template>
 
-<script lang="ts">
-  import { PageWrapper } from '/@/components/Page';
-  import { defineComponent, ref, computed } from 'vue';
-  import { BasicForm, FormSchema } from '/@/components/Form/index';
-  import { Card, Button } from 'ant-design-vue';
-  import { ColEx } from '/@/components/Form/src/types';
-  import EarlyWarningItem from './components/EarlyWarningItem.vue';
-  import icon1 from '/@/assets/images/icon_1.png';
-  import uicon1 from '/@/assets/images/uicon_1.png';
-  import LineCharts from './components/LineCharts.vue';
-  import FormDrawer from './components/FormDrawer.vue';
-  import { useDrawer } from '/@/components/Drawer';
-  const valueSelectA = ref<string[]>([]);
+<script lang="ts" setup>
+  import dayjs from 'dayjs'
+  import { formatDataByObject, getWeek, getMonth } from '/@/utils/index'
+  import { PageWrapper } from '/@/components/Page'
+  import { ref, reactive, onMounted, computed } from 'vue'
+  import EarlyWarningItem from './components/EarlyWarningItem.vue'
+  import icon1 from '/@/assets/images/icon_1.png'
+  import uicon1 from '/@/assets/images/uicon_1.png'
+  import LineCharts from './components/LineCharts.vue'
+  import FormDrawer from './components/FormDrawer.vue'
+  import { useDrawer } from '/@/components/Drawer'
 
+  import {
+    getGriculturalDeviceBasic,
+    getaGriculturalDevicePoint,
+    getAmonitoringData,
+    getDeviceWarningNums,
+  } from '/@/api/sys/user'
+  import {
+    Card,
+    Form,
+    FormItem,
+    Select,
+    Row,
+    Col,
+    RadioGroup,
+    RadioButton,
+    RangePicker,
+    Button,
+    message,
+  } from 'ant-design-vue'
+  import type { FormInstance } from 'ant-design-vue'
+  const [registerDrawer, { openDrawer }] = useDrawer()
+  const formRef = ref<FormInstance>()
+  const formState = reactive({
+    base_id: undefined, //基地
+    device_id: undefined, //监控点
+    time: undefined, //时间
+    time_interval: 'day',
+  })
+  const baseDate = ref([])
+  const pointDate = ref<any>([])
+  const statisData = ref<any>({})
+  // 预警数量
+  const earlyNums = ref<any>({})
+  // 选中
+  const activeKey = ref('conductivity')
   interface EarlyWarningItem {
-    icon: String;
-    title: String;
-    value: String;
+    icon: String
+    title: String
+    value: String | Number
   }
-
-  const colProps: Partial<ColEx> = {
-    xs: 24,
-    sm: 12,
-    md: 8,
-    lg: 6,
-    xl: 6,
-    xxl: 4,
-  };
-
-  const schemas: FormSchema[] = [
-    {
-      field: 'field1',
-      component: 'Select',
-      label: '',
-      colProps,
-      componentProps: {
-        placeholder: '基地',
-        options: [
-          {
-            label: '选项2',
-            value: '1',
-            key: '1',
-          },
-        ],
-        onChange: (e: any) => {
-          console.log(e);
-        },
+  const earlyWarningList = computed(() => {
+    const arr: EarlyWarningItem[] = [
+      {
+        icon: 'yujing1',
+        title: 'Ⅰ级预警',
+        value: '',
       },
-    },
-    {
-      field: 'field1',
-      component: 'Select',
-      label: '',
-      colProps,
-      componentProps: {
-        placeholder: '检测点',
-        options: [
-          {
-            label: '选项2',
-            value: '1',
-            key: '1',
-          },
-        ],
-        onChange: (e: any) => {
-          console.log(e);
-        },
+      {
+        icon: 'yujing2',
+        title: 'Ⅱ级预警',
+        value: '',
       },
-    },
-    {
-      field: 'time',
-      component: 'RangePicker',
-      label: '',
-      colProps,
-      componentProps: {
-        placeholder: ['开始日期', '结束日期'],
+      {
+        icon: 'yujing3',
+        title: 'Ⅲ级预警',
+        value: '',
       },
-    },
-    {
-      field: 'disclosure',
-      component: 'RadioButtonGroup',
-      label: '',
-      colProps: colProps,
-      componentProps: {
-        options: [
-          {
-            label: '今天',
-            value: '1',
-          },
-          {
-            label: '近一周',
-            value: '2',
-          },
-          {
-            label: '近一个月',
-            value: '3',
-          },
-        ],
+      {
+        icon: 'yujing4',
+        title: 'Ⅳ级预警',
+        value: '',
       },
-    },
-  ];
-
-  const earlyWarningList: EarlyWarningItem[] = [
-    {
-      icon: 'yujing1',
-      title: 'Ⅰ级预警',
-      value: '1',
-    },
-    {
-      icon: 'yujing2',
-      title: 'Ⅱ级预警',
-      value: '1',
-    },
-    {
-      icon: 'yujing3',
-      title: 'Ⅲ级预警',
-      value: '1',
-    },
-    {
-      icon: 'yujing4',
-      title: 'Ⅳ级预警',
-      value: '100',
-    },
-  ];
-
+    ]
+    Object.values(earlyNums.value).forEach((v: number | string, index: number) => {
+      arr[index].value = v
+    })
+    return arr
+  })
+  const currentActiveLable = computed(
+    () => tagMenus.find((e) => e.value === activeKey.value)?.lable ?? '',
+  )
+  const chartData = computed(() => statisData.value[activeKey.value])
+  const extra = computed(() => {
+    const name1 = baseDate.value?.find((e: any) => e.id === formState.base_id)?.name
+    const name2 = pointDate.value?.find((e: any) => e.value === formState.device_id)?.label ?? ''
+    return name1 + '-' + name2
+  })
   const tagMenus = [
-    {
-      lable: '温度',
-      value: 0,
-      icon: icon1,
-      icon1: uicon1,
-    },
     {
       lable: '电导率',
-      value: 1,
+      value: 'conductivity',
       icon: icon1,
       icon1: uicon1,
     },
     {
-      lable: '水分',
-      value: 2,
+      lable: '湿度',
+      value: 'humidity',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '温度',
+      value: 'temperature',
       icon: icon1,
       icon1: uicon1,
     },
     {
       lable: '氮',
-      value: 3,
+      value: 'k',
       icon: icon1,
       icon1: uicon1,
     },
     {
       lable: '磷',
-      value: 4,
+      value: 'n',
       icon: icon1,
       icon1: uicon1,
     },
     {
       lable: '钾',
-      value: 5,
+      value: 'p',
       icon: icon1,
       icon1: uicon1,
     },
-  ];
+  ]
 
-  export default defineComponent({
-    components: {
-      [Card.name]: Card,
-      [Button.name]: Button,
-      BasicForm,
-      PageWrapper,
-      EarlyWarningItem,
-      LineCharts,
-      FormDrawer,
-    },
+  // 获取基地数据
+  const getBase = async () => {
+    const res = await getGriculturalDeviceBasic({ device_type: 2 })
+    baseDate.value = res
+    if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
+    getPoint()
+  }
+  // 获取监控点数据
+  const getPoint = async () => {
+    const res = await getaGriculturalDevicePoint({
+      device_type: 2,
+      agricultural_basic: formState.base_id,
+    })
+    pointDate.value = formatDataByObject(res)
+    if (!formState.device_id) formState.device_id = pointDate.value?.[0]?.value ?? undefined
+    getDate()
+    getNums()
+  }
+  // 获取数据
+  const getDate = async () => {
+    const params = {
+      device_id: formState.device_id,
+      start_time: '',
+      end_time: '',
+    }
+    if (formState.time) {
+      params.start_time = dayjs(formState.time?.[0]).format('YYYY-MM-DD')
+      params.end_time = dayjs(formState.time?.[1]).format('YYYY-MM-DD')
+    }
+    if (formState.time_interval === 'week') {
+      const { WeekStartDate, WeekEndDate } = getWeek()
+      params.start_time = WeekStartDate
+      params.end_time = WeekEndDate
+    } else if (formState.time_interval === 'month') {
+      const { MonthStartDate, MonthEndDate } = getMonth()
+      params.start_time = MonthStartDate
+      params.end_time = MonthEndDate
+    } else if (formState.time_interval === 'day') {
+      params.start_time = ''
+      params.end_time = ''
+    }
+    const res = await getAmonitoringData(params)
+    statisData.value = res
+  }
+  // 获取预警数量
+  const getNums = async () => {
+    let res = await getDeviceWarningNums({
+      base: formState.base_id,
+      device: formState.device_id,
+      status: 0,
+    })
+    earlyNums.value = res
+  }
+  const onChange = (e: string | undefined) => {
+    if (e === 'base_id') formState.device_id = undefined
+    if (e === 'time') formState.time_interval = ''
+    if (e === 'time_interval') formState.time = undefined
+    getPoint()
+  }
 
-    setup() {
-      const activeKey = ref(1);
-
-      const [registerDrawer, { openDrawer }] = useDrawer();
-
-      const currentActiveLable = computed(
-        () => tagMenus.find((e) => e.value == activeKey.value)?.lable ?? '',
-      );
-
-      function onChangeTag(item) {
-        activeKey.value = item.value;
-      }
-
-      function handleSetting() {
-        openDrawer(true, {
-          isUpdate: false,
-        });
-      }
-
-      function handleSuccess() {
-        // reload();
-        console.log('=========');
-      }
-
-      return {
-        activeKey,
-        valueSelectA,
-        schemas,
-        earlyWarningList,
-        tagMenus,
-        currentActiveLable,
-        registerDrawer,
-        onChangeTag,
-        handleSetting,
-        handleSuccess,
-      };
-    },
-  });
+  const handleSetting = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    })
+  }
+  const handleSuccess = () => {
+    message.success('操作成功')
+  }
+  //
+  const onChangeTag = (e: string) => {
+    activeKey.value = e
+  }
+  onMounted(() => {
+    getBase()
+  })
 </script>
 
 <style scoped lang="less">