diff --git a/src/utils/index.ts b/src/utils/index.ts
index 65ab7ebc..7f97d4e4 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -135,32 +135,46 @@ export function getTreeData(
   return arr
 }
 
-// 获取近一周的时间
+// 获取近7的时间
 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')
+  let toData = new Date(new Date().toLocaleDateString()).getTime()
+  //今天
+  let todayStart = toData
+  //昨天
+  let yesterdayStart = toData - 3600 * 24 * 1000
+  let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
+  //最近7天
+  let past7daysStart = todayStart - 7 * 3600 * 24 * 1000
+  // 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,
+    WeekStartDate: dayjs(past7daysStart).format('YYYY-MM-DD'),
+    WeekEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
   }
 }
 
 // 获取近一月的数据
 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')
+  let toData = new Date(new Date().toLocaleDateString()).getTime()
+  //昨天
+  let yesterdayStart = toData - 3600 * 24 * 1000
+  let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
+  //最近30天
+  let past30daysStart = toData - 30 * 3600 * 24 * 1000
+  // 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,
+    MonthStartDate: dayjs(past30daysStart).format('YYYY-MM-DD'),
+    MonthEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
   }
 }
diff --git a/src/views/main/meteorological/components/AirHumidity.vue b/src/views/main/meteorological/components/AirHumidity.vue
index 3311ade5..a8d594dc 100644
--- a/src/views/main/meteorological/components/AirHumidity.vue
+++ b/src/views/main/meteorological/components/AirHumidity.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,14 +84,11 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
               smooth: true,
-              data: Object.values(e).map((e) => {
-                if (!!e) return e
-                return 0
-              }),
+              data: Object.values(e),
               type: 'line',
               itemStyle: {
                 color: '#5ab1ef',
diff --git a/src/views/main/meteorological/components/AirTemperature.vue b/src/views/main/meteorological/components/AirTemperature.vue
index 58ff8cd2..86478237 100644
--- a/src/views/main/meteorological/components/AirTemperature.vue
+++ b/src/views/main/meteorological/components/AirTemperature.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
@@ -32,6 +32,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -39,7 +52,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -52,7 +64,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -73,14 +85,11 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
               smooth: true,
-              data: Object.values(e).map((e) => {
-                if (!!e) return e
-                return 0
-              }),
+              data: Object.values(e),
               type: 'line',
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
diff --git a/src/views/main/meteorological/components/CO2.vue b/src/views/main/meteorological/components/CO2.vue
index 571ef3c0..2244a3c3 100644
--- a/src/views/main/meteorological/components/CO2.vue
+++ b/src/views/main/meteorological/components/CO2.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,13 +84,10 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',
diff --git a/src/views/main/meteorological/components/LightIntensity.vue b/src/views/main/meteorological/components/LightIntensity.vue
index dc71c52a..59d0a94f 100644
--- a/src/views/main/meteorological/components/LightIntensity.vue
+++ b/src/views/main/meteorological/components/LightIntensity.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,15 +84,12 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
               symbolSize: 20,
               type: 'scatter',
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
             },
           ],
           dataZoom: [
diff --git a/src/views/main/meteorological/components/Noise.vue b/src/views/main/meteorological/components/Noise.vue
index 4971d426..2fcfa108 100644
--- a/src/views/main/meteorological/components/Noise.vue
+++ b/src/views/main/meteorological/components/Noise.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,13 +84,10 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',
diff --git a/src/views/main/meteorological/components/PM10.vue b/src/views/main/meteorological/components/PM10.vue
index 72858f20..a3b7b8bc 100644
--- a/src/views/main/meteorological/components/PM10.vue
+++ b/src/views/main/meteorological/components/PM10.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,13 +84,10 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',
diff --git a/src/views/main/meteorological/components/PM25.vue b/src/views/main/meteorological/components/PM25.vue
index ed5d3026..622a9217 100644
--- a/src/views/main/meteorological/components/PM25.vue
+++ b/src/views/main/meteorological/components/PM25.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,13 +84,10 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',
diff --git a/src/views/main/meteorological/components/Pressure.vue b/src/views/main/meteorological/components/Pressure.vue
index 98c1afe1..df871b61 100644
--- a/src/views/main/meteorological/components/Pressure.vue
+++ b/src/views/main/meteorological/components/Pressure.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,13 +84,10 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',
diff --git a/src/views/main/meteorological/components/Rainfall.vue b/src/views/main/meteorological/components/Rainfall.vue
index 2fc644b5..5e0b8f98 100644
--- a/src/views/main/meteorological/components/Rainfall.vue
+++ b/src/views/main/meteorological/components/Rainfall.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,15 +84,12 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
               symbolSize: 20,
               type: 'scatter',
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
             },
           ],
           dataZoom: [
diff --git a/src/views/main/meteorological/components/WindDirection.vue b/src/views/main/meteorological/components/WindDirection.vue
index deea3ff0..4188c5dd 100644
--- a/src/views/main/meteorological/components/WindDirection.vue
+++ b/src/views/main/meteorological/components/WindDirection.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   const props = defineProps({
     loading: Boolean,
@@ -31,6 +31,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -38,7 +51,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -51,7 +63,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -72,15 +84,12 @@
               },
             },
           ],
-          grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
               symbolSize: 20,
               type: 'scatter',
-              data: Object.values(e).map((e) => {
-                if (e === 0) return null
-                return e
-              }),
+              data: Object.values(e),
             },
           ],
           dataZoom: [
diff --git a/src/views/main/meteorological/components/WindSpeed.vue b/src/views/main/meteorological/components/WindSpeed.vue
index 0db0af82..47f5c465 100644
--- a/src/views/main/meteorological/components/WindSpeed.vue
+++ b/src/views/main/meteorological/components/WindSpeed.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
@@ -32,6 +32,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -39,7 +52,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -52,7 +64,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -73,14 +85,11 @@
               },
             },
           ],
-          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+          grid: { left: '2%', right: '4%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
               smooth: true,
-              data: Object.values(e).map((e) => {
-                if (!!e) return e
-                return 0
-              }),
+              data: Object.values(e),
               type: 'line',
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
diff --git a/src/views/main/meteorological/index.vue b/src/views/main/meteorological/index.vue
index 59aa8d4e..c8865e7e 100644
--- a/src/views/main/meteorological/index.vue
+++ b/src/views/main/meteorological/index.vue
@@ -48,7 +48,7 @@
             <FormItem label="日期">
               <RangePicker
                 :disabledDate="disabledDate"
-                @change="onChange('time')"
+                @change="onChangTime"
                 v-model:value="formState.time"
               />
             </FormItem>
@@ -82,96 +82,114 @@
         :rowProps="{ gutter: [16, 0] }"
         :showActionButtonGroup="false"
       /> -->
-      <div class="md:flex enter-y flex-wrap -mr-4">
-        <!-- 空气温度 -->
-        <AirTemperature
-          :data="statisData.air_temperature"
-          :extra="name"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- 空气湿度 -->
-        <AirHumidity
-          :extra="name"
-          :data="statisData.air_humidity"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- 光照强度 -->
-        <LightIntensity
-          :extra="name"
-          :data="statisData.illumination"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- 降雨量 -->
-        <Rainfall
-          :extra="name"
-          :data="statisData.daily_rainfall"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- 风速 -->
-        <WindSpeed
-          :extra="name"
-          :data="statisData.wind_speed"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- 风力 -->
-        <Pressure
-          :extra="name"
-          :data="statisData.wind_degree"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- 风向 -->
-        <WindDirection
-          :extra="name"
-          :data="statisData.wind_direction"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- 噪声 -->
-        <Noise
-          :extra="name"
-          :data="statisData.noise"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- PM10 -->
-        <PM10
-          :extra="name"
-          :data="statisData.pm10"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- PM25 -->
-        <PM25
-          :extra="name"
-          :data="statisData.pm25"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-        <!-- CO2 -->
-        <CO2
-          :extra="name"
-          :data="statisData.co2"
-          class="md:w-386px w-full !mr-4 !mb-4"
-          :loading="false"
-          :company="formState.time_interval"
-        />
-      </div>
+      <template v-if="baseDate.length === 0">
+        <div class="h-500px flex items-center justify-center flex-col">
+          <Empty></Empty>
+        </div>
+      </template>
+      <template v-else>
+        <div class="md:flex enter-y flex-wrap -mr-4">
+          <!-- 空气温度 -->
+          <AirTemperature
+            :data="statisData.air_temperature"
+            :extra="name"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- 空气湿度 -->
+          <AirHumidity
+            :extra="name"
+            :data="statisData.air_humidity"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- 光照强度 -->
+          <LightIntensity
+            :extra="name"
+            :data="statisData.illumination"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- 降雨量 -->
+          <Rainfall
+            :extra="name"
+            :time="formState.time"
+            :data="statisData.daily_rainfall"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :company="formState.time_interval"
+          />
+          <!-- 风速 -->
+          <WindSpeed
+            :extra="name"
+            :data="statisData.wind_speed"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- 风力 -->
+          <Pressure
+            :extra="name"
+            :data="statisData.wind_degree"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- 风向 -->
+          <WindDirection
+            :extra="name"
+            :data="statisData.wind_direction"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- 噪声 -->
+          <Noise
+            :extra="name"
+            :data="statisData.noise"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- PM10 -->
+          <PM10
+            :extra="name"
+            :data="statisData.pm10"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- PM25 -->
+          <PM25
+            :extra="name"
+            :data="statisData.pm25"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+          <!-- CO2 -->
+          <CO2
+            :extra="name"
+            :data="statisData.co2"
+            class="md:w-386px w-full !mr-4 !mb-4"
+            :loading="false"
+            :time="formState.time"
+            :company="formState.time_interval"
+          />
+        </div>
+      </template>
     </Card>
   </PageWrapper>
 </template>
@@ -181,7 +199,7 @@
   import dayjs from 'dayjs'
   import { PageWrapper } from '/@/components/Page'
   import { ref, reactive, onMounted, computed } from 'vue'
-  import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker } from 'ant-design-vue'
+  import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker, Empty } from 'ant-design-vue'
   import type { FormInstance } from 'ant-design-vue'
   import AirTemperature from './components/AirTemperature.vue'
   import AirHumidity from './components/AirHumidity.vue'
@@ -219,12 +237,14 @@
   // 获取基地数据
   const getBase = async () => {
     const res = await getGriculturalDeviceBasic({ device_type: 4 })
+    if (res.length == 0) return
     baseDate.value = res
     if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
     getPoint()
   }
   // 获取监控到数据
   const getPoint = async () => {
+    if (baseDate.value.length == 0) return
     const res = await getaGriculturalDevicePoint({
       device_type: 4,
       agricultural_basic: formState.base_id,
@@ -265,6 +285,11 @@
     if (e === 'time_interval') formState.time = undefined
     getPoint()
   }
+  const onChangTime = (e) => {
+    if (e === null) formState.time_interval = 'day'
+    else formState.time_interval = ''
+    getPoint()
+  }
   onMounted(() => {
     getBase()
   })
diff --git a/src/views/main/soil-monitoring/components/LineCharts.vue b/src/views/main/soil-monitoring/components/LineCharts.vue
index 59828f37..92e593b3 100644
--- a/src/views/main/soil-monitoring/components/LineCharts.vue
+++ b/src/views/main/soil-monitoring/components/LineCharts.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
   import dayjs from 'dayjs'
   import { Card } from 'ant-design-vue'
-  import { Ref, ref, watch } from 'vue'
+  import { Ref, ref, watch, computed } from 'vue'
   import { useECharts } from '/@/hooks/web/useECharts'
   import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
@@ -36,6 +36,19 @@
       type: String as PropType<string>,
       default: '',
     },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
   })
   const chartRef = ref<HTMLDivElement | null>(null)
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
@@ -43,7 +56,6 @@
     () => props.data,
     (e) => {
       if (e) {
-        const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
         setOptions({
           tooltip: {
             trigger: 'axis',
@@ -56,7 +68,7 @@
           },
           xAxis: {
             type: 'category',
-            data: Object.keys(e).map((e) => dayjs(e).format(format)),
+            data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
             axisTick: {
               show: false,
             },
@@ -81,10 +93,7 @@
           series: [
             {
               smooth: true,
-              data: Object.values(e).map((e) => {
-                if (!!e) return e
-                return 0
-              }),
+              data: Object.values(e),
               type: 'line',
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
diff --git a/src/views/main/soil-monitoring/index.vue b/src/views/main/soil-monitoring/index.vue
index 52754e2e..3c1590b0 100644
--- a/src/views/main/soil-monitoring/index.vue
+++ b/src/views/main/soil-monitoring/index.vue
@@ -18,7 +18,7 @@
                 :options="baseDate"
                 v-model:value="formState.base_id"
                 placeholder="请选择基地"
-              />
+              ></Select>
             </FormItem>
           </Col>
           <Col
@@ -31,11 +31,11 @@
           >
             <FormItem label="检测点">
               <Select
-                @select="onChange('')"
+                @select="onChange('device_id')"
                 placeholder="请选择检测点"
                 :options="pointDate"
                 v-model:value="formState.device_id"
-              />
+              ></Select>
             </FormItem>
           </Col>
           <Col
@@ -47,7 +47,11 @@
             :xxl="{ span: 4 }"
           >
             <FormItem label="日期">
-              <RangePicker @change="onChange('time')" v-model:value="formState.time" />
+              <RangePicker
+                :disabledDate="disabledDate"
+                @change="onChangTime"
+                v-model:value="formState.time"
+              ></RangePicker>
             </FormItem>
           </Col>
           <Col
@@ -72,44 +76,52 @@
           </Col>
         </Row>
       </Form>
-      <!--  -->
-      <div class="flex justify-between">
-        <span class="text-xl">预警数据统计</span>
-        <Button @click="handleSetting">设置</Button>
-      </div>
-      <div class="mt-20px flex">
-        <EarlyWarningItem
-          class="mr-16px last:mr-0"
-          v-for="(item, index) in earlyWarningList"
-          :key="index"
-          :data="item"
-        />
-      </div>
-      <div class="flex items-center">
-        <div
-          v-for="item in tagMenus"
-          :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.value)"
-        >
-          <img
-            class="w-16px h-16px"
-            :src="item.value == activeKey ? item.icon : item.icon1"
-            alt=""
-          />
-          <div class="ml-3px">{{ item.lable }}</div>
+      <template v-if="baseDate.length === 0">
+        <div class="h-500px flex items-center justify-center flex-col">
+          <Empty></Empty>
         </div>
-      </div>
-      <div class="mt-20px">
-        <LineCharts
-          :company="formState.time_interval"
-          :extra="extra"
-          :loading="false"
-          :title="currentActiveLable"
-          :data="chartData"
-        />
-      </div>
+      </template>
+      <!--  -->
+      <template v-else>
+        <div class="flex justify-between">
+          <span class="text-xl">预警数据统计</span>
+          <Button @click="handleSetting">设置</Button>
+        </div>
+        <div class="mt-20px flex">
+          <EarlyWarningItem
+            class="mr-16px last:mr-0"
+            v-for="(item, index) in earlyWarningList"
+            :key="index"
+            :data="item"
+          />
+        </div>
+        <div class="flex items-center">
+          <div
+            v-for="item in tagMenus"
+            :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.value)"
+          >
+            <img
+              class="w-16px h-16px"
+              :src="item.value == activeKey ? item.icon : item.icon1"
+              alt=""
+            />
+            <div class="ml-3px">{{ item.lable }}</div>
+          </div>
+        </div>
+        <div class="mt-20px">
+          <LineCharts
+            :company="formState.time_interval"
+            :extra="extra"
+            :loading="false"
+            :title="currentActiveLable"
+            :data="chartData"
+            :time="formState.time"
+          />
+        </div>
+      </template>
     </Card>
     <FormDrawer @register="registerDrawer" @success="handleSuccess" />
   </PageWrapper>
@@ -144,9 +156,9 @@
     RangePicker,
     Button,
     message,
+    Empty,
   } from 'ant-design-vue'
   import type { FormInstance } from 'ant-design-vue'
-
   const RadioButton = Radio.Button
   const RadioGroup = Radio.Group
 
@@ -246,15 +258,20 @@
     },
   ]
 
+  const disabledDate = (current) => {
+    return current && current > dayjs().endOf('day')
+  }
   // 获取基地数据
   const getBase = async () => {
     const res = await getGriculturalDeviceBasic({ device_type: 2 })
+    if (res.length == 0) return
     baseDate.value = res
     if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
     getPoint()
   }
   // 获取监控点数据
   const getPoint = async () => {
+    if (baseDate.value.length == 0) return
     const res = await getaGriculturalDevicePoint({
       device_type: 2,
       agricultural_basic: formState.base_id,
@@ -306,6 +323,12 @@
     getPoint()
   }
 
+  const onChangTime = (e) => {
+    if (e === null) formState.time_interval = 'day'
+    else formState.time_interval = ''
+    getPoint()
+  }
+
   const handleSetting = () => {
     openDrawer(true, {
       isUpdate: false,
diff --git a/src/views/main/water-quality/components/EarlyWarningItem.vue b/src/views/main/water-quality/components/EarlyWarningItem.vue
index d72dce5f..ad8e52c7 100644
--- a/src/views/main/water-quality/components/EarlyWarningItem.vue
+++ b/src/views/main/water-quality/components/EarlyWarningItem.vue
@@ -13,14 +13,14 @@
 
 <script setup lang="ts">
   // import { Ref, ref, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon/index';
+  import { SvgIcon } from '/@/components/Icon/index'
   defineProps({
     loading: Boolean,
     data: {
       type: Object,
       default: () => {},
     },
-  });
+  })
 </script>
 
 <style scoped></style>
diff --git a/src/views/main/water-quality/components/FormDrawer.vue b/src/views/main/water-quality/components/FormDrawer.vue
index e6796215..f8358128 100644
--- a/src/views/main/water-quality/components/FormDrawer.vue
+++ b/src/views/main/water-quality/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 = {
+    chlorine: '氯',
+    conductivity: '电导率',
+    oxygen: '氧气',
+    ph: 'PH',
+    temperature: '温度',
+    turbidity: '浊度',
+  }
+  const enumCompany = {
+    temperature: '℃',
+    conductivity: 'us/cm',
+    turbidity: 'NTU',
+    chlorine: 'mg/L',
+    oxygen: 'mg/L',
+    ph: '',
+  }
+  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_waterquality')
+  })
 
-      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/water-quality/components/LineCharts.vue b/src/views/main/water-quality/components/LineCharts.vue
index 1a392f76..92e593b3 100644
--- a/src/views/main/water-quality/components/LineCharts.vue
+++ b/src/views/main/water-quality/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, computed } from 'vue'
+  import { useECharts } from '/@/hooks/web/useECharts'
+  import echarts from '/@/utils/lib/echarts'
   const props = defineProps({
     loading: Boolean,
     title: {
@@ -27,77 +28,104 @@
       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: '',
+    },
+    time: {
+      type: Object as PropType<object>,
+      default: () => {},
+    },
+  })
+  const format = computed(() => {
+    if (props.time) {
+      const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
+      const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
+      if (start_time === end_time) return 'HH:mm'
+    }
+    if (props.company === 'day') return 'HH:mm'
+    return 'YYYY-MM-DD'
+  })
+  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(format.value)),
+            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),
+              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/water-quality/index.vue b/src/views/main/water-quality/index.vue
index eaa8e738..ca942910 100644
--- a/src/views/main/water-quality/index.vue
+++ b/src/views/main/water-quality/index.vue
@@ -1,261 +1,348 @@
 <template>
   <PageWrapper>
-    <a-card>
-      <BasicForm
-        autoFocusFirstItem
-        :labelWidth="0"
-        :schemas="schemas"
-        :rowProps="{ gutter: [16, 0] }"
-        :showActionButtonGroup="false"
-      />
-      <div class="flex justify-between">
-        <span class="text-xl">预警数据统计</span>
-        <a-button @click="handleSetting">设置</a-button>
-      </div>
-      <div class="mt-20px flex">
-        <EarlyWarningItem
-          class="mr-16px last:mr-0"
-          v-for="(item, index) in earlyWarningList"
-          :key="index"
-          :data="item"
-        />
-      </div>
-      <div class="flex items-center">
-        <div
-          v-for="item in tagMenus"
-          :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)"
-        >
-          <img
-            class="w-16px h-16px"
-            :src="item.value == activeKey ? item.icon : item.icon1"
-            alt=""
-          />
-          <div class="ml-3px">{{ item.lable }}</div>
+    <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
+                :disabledDate="disabledDate"
+                @change="onChangTime"
+                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>
+      <template v-if="baseDate.length === 0">
+        <div class="h-500px flex items-center justify-center flex-col">
+          <Empty></Empty>
         </div>
-      </div>
-      <div class="mt-20px">
-        <LineCharts :loading="false" :title="currentActiveLable" />
-      </div>
-    </a-card>
+      </template>
+      <!--  -->
+      <template v-else>
+        <div class="flex justify-between">
+          <span class="text-xl">预警数据统计</span>
+          <Button @click="handleSetting">设置</Button>
+        </div>
+        <div class="mt-20px flex">
+          <EarlyWarningItem
+            class="mr-16px last:mr-0"
+            v-for="(item, index) in earlyWarningList"
+            :key="index"
+            :data="item"
+          />
+        </div>
+        <div class="flex items-center">
+          <div
+            v-for="item in tagMenus"
+            :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.value)"
+          >
+            <img
+              class="w-16px h-16px"
+              :src="item.value == activeKey ? item.icon : item.icon1"
+              alt=""
+            />
+            <div class="ml-3px">{{ item.lable }}</div>
+          </div>
+        </div>
+        <div class="mt-20px">
+          <LineCharts
+            :company="formState.time_interval"
+            :extra="extra"
+            :loading="false"
+            :title="currentActiveLable"
+            :data="chartData"
+            :time="formState.time"
+          />
+        </div>
+      </template>
+    </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,
+    Radio,
+    RangePicker,
+    Button,
+    message,
+    Empty,
+  } from 'ant-design-vue'
+  import type { FormInstance } from 'ant-design-vue'
+  const RadioButton = Radio.Button
+  const RadioGroup = Radio.Group
+  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('chlorine')
   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,
+      lable: '氯',
+      value: 'chlorine',
       icon: icon1,
       icon1: uicon1,
     },
     {
       lable: '电导率',
-      value: 1,
+      value: 'conductivity',
       icon: icon1,
       icon1: uicon1,
     },
     {
-      lable: '水分',
-      value: 2,
+      lable: '氧气',
+      value: 'oxygen',
       icon: icon1,
       icon1: uicon1,
     },
     {
-      lable: '氮',
-      value: 3,
+      lable: 'PH',
+      value: 'ph',
       icon: icon1,
       icon1: uicon1,
     },
     {
-      lable: '磷',
-      value: 4,
+      lable: '温度',
+      value: 'temperature',
       icon: icon1,
       icon1: uicon1,
     },
     {
-      lable: '钾',
-      value: 5,
+      lable: '浊度',
+      value: 'turbidity',
       icon: icon1,
       icon1: uicon1,
     },
-  ];
+  ]
 
-  export default defineComponent({
-    components: {
-      [Card.name]: Card,
-      [Button.name]: Button,
-      BasicForm,
-      PageWrapper,
-      EarlyWarningItem,
-      LineCharts,
-      FormDrawer,
-    },
+  const disabledDate = (current) => {
+    return current && current > dayjs().endOf('day')
+  }
+  // 获取基地数据
+  const getBase = async () => {
+    const res = await getGriculturalDeviceBasic({ device_type: 3 })
+    if (res.length == 0) return
+    baseDate.value = res
+    if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
+    getPoint()
+  }
+  // 获取监控点数据
+  const getPoint = async () => {
+    if (baseDate.value.length == 0) return
+    const res = await getaGriculturalDevicePoint({
+      device_type: 3,
+      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 onChangTime = (e) => {
+    if (e === null) formState.time_interval = 'day'
+    else formState.time_interval = ''
+    getPoint()
+  }
 
-      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">