提交

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,
             },
@@ -76,10 +88,7 @@
           series: [
             {
               smooth: true,
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (!!e) return e
-                return 0
-              }),
               type: 'line',
               itemStyle: {
                 color: '#5ab1ef',

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,
             },
@@ -77,10 +89,7 @@
           series: [
             {
               smooth: true,
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (!!e) return e
-                return 0
-              }),
               type: 'line',
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

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,
             },
@@ -75,10 +87,7 @@
           grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',

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,
             },
@@ -77,10 +89,7 @@
             {
               symbolSize: 20,
               type: 'scatter',
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
             },
           ],
           dataZoom: [

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,
             },
@@ -75,10 +87,7 @@
           grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',

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,
             },
@@ -75,10 +87,7 @@
           grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',

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,
             },
@@ -75,10 +87,7 @@
           grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',

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,
             },
@@ -75,10 +87,7 @@
           grid: { left: '5%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
           series: [
             {
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
               type: 'bar',
               itemStyle: {
                 color: '#5ab1ef',

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,
             },
@@ -77,10 +89,7 @@
             {
               symbolSize: 20,
               type: 'scatter',
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
             },
           ],
           dataZoom: [

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,
             },
@@ -77,10 +89,7 @@
             {
               symbolSize: 20,
               type: 'scatter',
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (e === 0) return null
-                return e
-              }),
             },
           ],
           dataZoom: [

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,
             },
@@ -77,10 +89,7 @@
           series: [
             {
               smooth: true,
-              data: Object.values(e).map((e) => {
+              data: Object.values(e),
-                if (!!e) return e
-                return 0
-              }),
               type: 'line',
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

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>
@@ -89,6 +89,7 @@
           :extra="name"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- 空气湿度 -->
@@ -97,6 +98,7 @@
           :data="statisData.air_humidity"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- 光照强度 -->
@@ -105,11 +107,13 @@
           :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"
@@ -121,6 +125,7 @@
           :data="statisData.wind_speed"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- 风力 -->
@@ -129,6 +134,7 @@
           :data="statisData.wind_degree"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- 风向 -->
@@ -137,6 +143,7 @@
           :data="statisData.wind_direction"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- 噪声 -->
@@ -145,6 +152,7 @@
           :data="statisData.noise"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- PM10 -->
@@ -153,6 +161,7 @@
           :data="statisData.pm10"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- PM25 -->
@@ -161,6 +170,7 @@
           :data="statisData.pm25"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
         <!-- CO2 -->
@@ -169,6 +179,7 @@
           :data="statisData.co2"
           class="md:w-386px w-full !mr-4 !mb-4"
           :loading="false"
+          :time="formState.time"
           :company="formState.time_interval"
         />
       </div>
@@ -272,6 +283,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()
   })

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) => {
+              data: Object.values(e),
-                if (!!e) return e
-                return 0
-              }),
               type: 'line',
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

src/views/main/soil-monitoring/index.vue

@@ -47,7 +47,11 @@
             :xxl="{ span: 4 }"
           >
             <FormItem label="日期">
-              <RangePicker @change="onChange('time')" v-model:value="formState.time"></RangePicker>
+              <RangePicker
+                :disabledDate="disabledDate"
+                @change="onChangTime"
+                v-model:value="formState.time"
+              ></RangePicker>
             </FormItem>
           </Col>
           <Col
@@ -108,6 +112,7 @@
           :loading="false"
           :title="currentActiveLable"
           :data="chartData"
+          :time="formState.time"
         />
       </div>
     </Card>
@@ -243,6 +248,9 @@
     },
   ]
 
+  const disabledDate = (current) => {
+    return current && current > dayjs().endOf('day')
+  }
   // 获取基地数据
   const getBase = async () => {
     const res = await getGriculturalDeviceBasic({ device_type: 2 })
@@ -303,6 +311,12 @@
     getPoint()
   }
 
+  const onChangTime = (e) => {
+    if (e === null) formState.time_interval = 'day'
+    else formState.time_interval = ''
+    getPoint()
+  }
+
   const handleSetting = () => {
     openDrawer(true, {
       isUpdate: false,

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>

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 v-for="(item, index) in Title" :key="index" class="mt-10px">
-      <div class="text-20px font-medium">温度</div>
+      <div class="text-20px font-semibold">{{ enumName[item] }}</div>
-      <div class="mt-30px flex">
+      <div class="mt-30px flex" v-for="(item1, index1) in setFormat(item)" :key="index1">
-        <div class="w-90px leading-32px">Ⅰ级预警：</div>
+        <div class="w-90px leading-42px">{{ enumName1[item1] }}：</div>
         <div>
-          <div class="flex w-full items-center" v-for="item in 3" :key="item">
+          <div
-            <a-form-item>
+            class="flex w-full items-center mt-10px"
-              <a-input suffix="℃" />
+            v-for="(item2, index2) in roulsDate.value[item][item1]"
-            </a-form-item>
+            :key="index2"
-            <div class="mb-24px px-10px">-</div>
+          >
-            <a-form-item>
+            <Input
-              <a-input suffix="℃" />
+              type="number"
-            </a-form-item>
+              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>
     </div>
-    </a-form>
   </BasicDrawer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { getDeviceWarningRules } from '/@/api/sys/user'
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { ref, computed } from 'vue'
-  import { Form, Input } from 'ant-design-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({
+    const res = await getDeviceWarningRules({})
-    components: {
+    roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_soil')
-      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 getTitle = '设置';
+  const handleSubmit = async () => {
-
+    if (!roulsDate.value) return
-      async function handleSubmit() {}
+    try {
-
+      const params = {
-      return {
+        slug: roulsDate.value.slug,
-        getTitle,
+        value: roulsDate.value.value,
-        registerDrawer,
+      }
-        handleSubmit,
+      console.log(params)
-      };
+      const res = await editDeviceWarningRules(params)
-    },
+      console.log(res)
-  });
+      closeDrawer()
+      emits('success')
+    } finally {
+      setDrawerProps({ confirmLoading: false })
+    }
+  }
 </script>
 
 <style scoped></style>

src/views/main/water-quality/index.vue

@@ -1,16 +1,85 @@
 <template>
   <PageWrapper>
-    <a-card>
+    <Card>
-      <BasicForm
+      <Form ref="formRef" :model="formState">
-        autoFocusFirstItem
+        <Row :gutter="[16, 16]">
-        :labelWidth="0"
+          <Col
-        :schemas="schemas"
+            :xs="{ span: 24 }"
-        :rowProps="{ gutter: [16, 0] }"
+            :sm="{ span: 12 }"
-        :showActionButtonGroup="false"
+            :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>
+      <!--  -->
       <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 +95,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 +106,232 @@
         </div>
       </div>
       <div class="mt-20px">
-        <LineCharts :loading="false" :title="currentActiveLable" />
+        <LineCharts
+          :company="formState.time_interval"
+          :extra="extra"
+          :loading="false"
+          :title="currentActiveLable"
+          :data="chartData"
+          :time="formState.time"
+        />
       </div>
-    </a-card>
+    </Card>
     <FormDrawer @register="registerDrawer" @success="handleSuccess" />
   </PageWrapper>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-  import { PageWrapper } from '/@/components/Page';
+  import dayjs from 'dayjs'
-  import { defineComponent, ref, computed } from 'vue';
+  import { formatDataByObject, getWeek, getMonth } from '/@/utils/index'
-  import { BasicForm, FormSchema } from '/@/components/Form/index';
+  import { PageWrapper } from '/@/components/Page'
-  import { Card, Button } from 'ant-design-vue';
+  import { ref, reactive, onMounted, computed } from 'vue'
-  import { ColEx } from '/@/components/Form/src/types';
+  import EarlyWarningItem from './components/EarlyWarningItem.vue'
-  import EarlyWarningItem from './components/EarlyWarningItem.vue';
+  import icon1 from '/@/assets/images/icon_1.png'
-  import icon1 from '/@/assets/images/icon_1.png';
+  import uicon1 from '/@/assets/images/uicon_1.png'
-  import uicon1 from '/@/assets/images/uicon_1.png';
+  import LineCharts from './components/LineCharts.vue'
-  import LineCharts from './components/LineCharts.vue';
+  import FormDrawer from './components/FormDrawer.vue'
-  import FormDrawer from './components/FormDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer'
-  import { useDrawer } from '/@/components/Drawer';
-  const valueSelectA = ref<string[]>([]);
 
+  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;
+    icon: String
-    title: String;
+    title: String
-    value: String;
+    value: String | Number
   }
-
+  const earlyWarningList = computed(() => {
-  const colProps: Partial<ColEx> = {
+    const arr: EarlyWarningItem[] = [
-    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);
-        },
-      },
-    },
-    {
-      field: 'field1',
-      component: 'Select',
-      label: '',
-      colProps,
-      componentProps: {
-        placeholder: '检测点',
-        options: [
-          {
-            label: '选项2',
-            value: '1',
-            key: '1',
-          },
-        ],
-        onChange: (e: any) => {
-          console.log(e);
-        },
-      },
-    },
-    {
-      field: 'time',
-      component: 'RangePicker',
-      label: '',
-      colProps,
-      componentProps: {
-        placeholder: ['开始日期', '结束日期'],
-      },
-    },
-    {
-      field: 'disclosure',
-      component: 'RadioButtonGroup',
-      label: '',
-      colProps: colProps,
-      componentProps: {
-        options: [
-          {
-            label: '今天',
-            value: '1',
-          },
-          {
-            label: '近一周',
-            value: '2',
-          },
-          {
-            label: '近一个月',
-            value: '3',
-          },
-        ],
-      },
-    },
-  ];
-
-  const earlyWarningList: EarlyWarningItem[] = [
       {
         icon: 'yujing1',
         title: 'Ⅰ级预警',
-      value: '1',
+        value: '',
       },
       {
         icon: 'yujing2',
         title: 'Ⅱ级预警',
-      value: '1',
+        value: '',
       },
       {
         icon: 'yujing3',
         title: 'Ⅲ级预警',
-      value: '1',
+        value: '',
       },
       {
         icon: 'yujing4',
         title: 'Ⅳ级预警',
-      value: '100',
+        value: '',
       },
-  ];
+    ]
-
+    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: '水分',
+      lable: '湿度',
-      value: 2,
+      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({
+  const disabledDate = (current) => {
-    components: {
+    return current && current > dayjs().endOf('day')
-      [Card.name]: Card,
+  }
-      [Button.name]: Button,
+  // 获取基地数据
-      BasicForm,
+  const getBase = async () => {
-      PageWrapper,
+    const res = await getGriculturalDeviceBasic({ device_type: 2 })
-      EarlyWarningItem,
+    baseDate.value = res
-      LineCharts,
+    if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
-      FormDrawer,
+    getPoint()
-    },
+  }
-
+  // 获取监控点数据
-    setup() {
+  const getPoint = async () => {
-      const activeKey = ref(1);
+    const res = await getaGriculturalDevicePoint({
-
+      device_type: 2,
-      const [registerDrawer, { openDrawer }] = useDrawer();
+      agricultural_basic: formState.base_id,
-
+    })
-      const currentActiveLable = computed(
+    pointDate.value = formatDataByObject(res)
-        () => tagMenus.find((e) => e.value == activeKey.value)?.lable ?? '',
+    if (!formState.device_id) formState.device_id = pointDate.value?.[0]?.value ?? undefined
-      );
+    getDate()
-
+    getNums()
-      function onChangeTag(item) {
+  }
-        activeKey.value = item.value;
+  // 获取数据
+  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()
   }
 
-      function handleSetting() {
+  const onChangTime = (e) => {
+    if (e === null) formState.time_interval = 'day'
+    else formState.time_interval = ''
+    getPoint()
+  }
+
+  const handleSetting = () => {
     openDrawer(true, {
       isUpdate: false,
-        });
+    })
   }
-
+  const handleSuccess = () => {
-      function handleSuccess() {
+    message.success('操作成功')
-        // reload();
-        console.log('=========');
   }
-
+  //
-      return {
+  const onChangeTag = (e: string) => {
-        activeKey,
+    activeKey.value = e
-        valueSelectA,
+  }
-        schemas,
+  onMounted(() => {
-        earlyWarningList,
+    getBase()
-        tagMenus,
+  })
-        currentActiveLable,
-        registerDrawer,
-        onChangeTag,
-        handleSetting,
-        handleSuccess,
-      };
-    },
-  });
 </script>
 
 <style scoped lang="less">

vite.config.ts

@@ -81,9 +81,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // Turning off brotliSize display can slightly reduce packaging time
       brotliSize: false,
       chunkSizeWarningLimit: 2000,
-      rollupOptions: {
-        external: ['ant-design-vue'],
-      },
     },
     define: {
       // setting vue-i18-next