From 9fae98d981f10ae8c26df5a99492f2e555a7ede3 Mon Sep 17 00:00:00 2001
From: "30830569@qq.com" <>
Date: Tue, 15 Nov 2022 15:55:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=9C=80=E6=B1=82=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/crop-yields/base-yields/base.data.ts |  28 +-
 .../base/crop-yields/town-yields/town.data.ts |  28 +-
 src/views/main/meteorological/index.vue       |   2 +-
 .../soil-monitoring/components/FormDrawer.vue |   2 +-
 src/views/main/soil-monitoring/index.vue      |  50 +--
 src/views/main/soil-monitoring/index1.vue     | 353 ++++++++++++++++++
 .../water-quality/components/FormDrawer.vue   |   2 +-
 src/views/main/water-quality/index.vue        |  51 +--
 src/views/main/water-quality/index1.vue       | 352 +++++++++++++++++
 9 files changed, 765 insertions(+), 103 deletions(-)
 create mode 100644 src/views/main/soil-monitoring/index1.vue
 create mode 100644 src/views/main/water-quality/index1.vue

diff --git a/src/views/base/crop-yields/base-yields/base.data.ts b/src/views/base/crop-yields/base-yields/base.data.ts
index 93c25f38..c454137d 100644
--- a/src/views/base/crop-yields/base-yields/base.data.ts
+++ b/src/views/base/crop-yields/base-yields/base.data.ts
@@ -53,20 +53,20 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
-  // {
-  //   field: 'quarter',
-  //   label: '季度',
-  //   component: 'Select',
-  //   componentProps: {
-  //     options: [
-  //       { label: '第一季度', value: '1' },
-  //       { label: '第二季度', value: '2' },
-  //       { label: '第三季度', value: '3' },
-  //       { label: '第四季度', value: '4' },
-  //     ],
-  //   },
-  //   colProps: { span: 6 },
-  // },
+  {
+    field: 'quarter',
+    label: '季度',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
   // {
   //   field: 'crop',
   //   label: '农作物',
diff --git a/src/views/base/crop-yields/town-yields/town.data.ts b/src/views/base/crop-yields/town-yields/town.data.ts
index 93c25f38..c454137d 100644
--- a/src/views/base/crop-yields/town-yields/town.data.ts
+++ b/src/views/base/crop-yields/town-yields/town.data.ts
@@ -53,20 +53,20 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
-  // {
-  //   field: 'quarter',
-  //   label: '季度',
-  //   component: 'Select',
-  //   componentProps: {
-  //     options: [
-  //       { label: '第一季度', value: '1' },
-  //       { label: '第二季度', value: '2' },
-  //       { label: '第三季度', value: '3' },
-  //       { label: '第四季度', value: '4' },
-  //     ],
-  //   },
-  //   colProps: { span: 6 },
-  // },
+  {
+    field: 'quarter',
+    label: '季度',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
   // {
   //   field: 'crop',
   //   label: '农作物',
diff --git a/src/views/main/meteorological/index.vue b/src/views/main/meteorological/index.vue
index c8865e7e..f9539fd4 100644
--- a/src/views/main/meteorological/index.vue
+++ b/src/views/main/meteorological/index.vue
@@ -227,7 +227,7 @@
     time: undefined, //时间
     time_interval: 'day',
   })
-  const baseDate = ref([])
+  const baseDate = ref<any>([])
   const pointDate = ref<any>([])
   const statisData = ref<any>({})
   const name = computed(() => baseDate?.value?.find((e: any) => e.id === formState.base_id)?.name)
diff --git a/src/views/main/soil-monitoring/components/FormDrawer.vue b/src/views/main/soil-monitoring/components/FormDrawer.vue
index 97ee2a7d..0538c2db 100644
--- a/src/views/main/soil-monitoring/components/FormDrawer.vue
+++ b/src/views/main/soil-monitoring/components/FormDrawer.vue
@@ -66,7 +66,7 @@
     3: 'Ⅲ级预警',
     4: 'Ⅳ级预警',
   }
-  const roulsDate = ref(null)
+  const roulsDate = ref<any>(null)
   const Title = computed(() => {
     if (!roulsDate.value) return []
     return Object.keys(roulsDate.value.value)
diff --git a/src/views/main/soil-monitoring/index.vue b/src/views/main/soil-monitoring/index.vue
index 3c1590b0..05c7c425 100644
--- a/src/views/main/soil-monitoring/index.vue
+++ b/src/views/main/soil-monitoring/index.vue
@@ -87,40 +87,27 @@
           <span class="text-xl">预警数据统计</span>
           <Button @click="handleSetting">设置</Button>
         </div>
-        <div class="mt-20px flex">
+        <div class="mt-20px md:flex enter-y flex-wrap -mr-4">
           <EarlyWarningItem
-            class="mr-16px last:mr-0"
+            class="md:w-200px w-full !mr-4 !mb-4"
             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="mt-20px md:flex enter-y flex-wrap -mr-4">
+          <div v-for="(item, index) in tagMenus" :key="index">
+            <LineCharts
+              class="md:w-386px w-full !mr-4 !mb-4"
+              :company="formState.time_interval"
+              :extra="extra"
+              :loading="false"
+              :title="item.lable"
+              :data="statisData[item.value]"
+              :time="formState.time"
             />
-            <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" />
@@ -170,13 +157,11 @@
     time: undefined, //时间
     time_interval: 'day',
   })
-  const baseDate = ref([])
+  const baseDate = ref<any>([])
   const pointDate = ref<any>([])
   const statisData = ref<any>({})
   // 预警数量
   const earlyNums = ref<any>({})
-  // 选中
-  const activeKey = ref('conductivity')
   interface EarlyWarningItem {
     icon: String
     title: String
@@ -210,10 +195,7 @@
     })
     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 ?? ''
@@ -337,10 +319,6 @@
   const handleSuccess = () => {
     message.success('操作成功')
   }
-  //
-  const onChangeTag = (e: string) => {
-    activeKey.value = e
-  }
   onMounted(() => {
     getBase()
   })
diff --git a/src/views/main/soil-monitoring/index1.vue b/src/views/main/soil-monitoring/index1.vue
new file mode 100644
index 00000000..69e2657d
--- /dev/null
+++ b/src/views/main/soil-monitoring/index1.vue
@@ -0,0 +1,353 @@
+<template>
+  <PageWrapper>
+    <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('device_id')"
+                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>
+      </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" 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<any>([])
+  const pointDate = ref<any>([])
+  const statisData = ref<any>({})
+  // 预警数量
+  const earlyNums = ref<any>({})
+  // 选中
+  const activeKey = ref('conductivity')
+  interface EarlyWarningItem {
+    icon: String
+    title: String
+    value: String | Number
+  }
+  const earlyWarningList = computed(() => {
+    const arr: EarlyWarningItem[] = [
+      {
+        icon: 'yujing1',
+        title: 'Ⅰ级预警',
+        value: '',
+      },
+      {
+        icon: 'yujing2',
+        title: 'Ⅱ级预警',
+        value: '',
+      },
+      {
+        icon: 'yujing3',
+        title: 'Ⅲ级预警',
+        value: '',
+      },
+      {
+        icon: 'yujing4',
+        title: 'Ⅳ级预警',
+        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: 'conductivity',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '湿度',
+      value: 'humidity',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '温度',
+      value: 'temperature',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '氮',
+      value: 'k',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '磷',
+      value: 'n',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '钾',
+      value: 'p',
+      icon: icon1,
+      icon1: uicon1,
+    },
+  ]
+
+  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,
+    })
+    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()
+  }
+
+  const onChangTime = (e) => {
+    if (e === null) formState.time_interval = 'day'
+    else formState.time_interval = ''
+    getPoint()
+  }
+
+  const handleSetting = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    })
+  }
+  const handleSuccess = () => {
+    message.success('操作成功')
+  }
+  //
+  const onChangeTag = (e: string) => {
+    activeKey.value = e
+  }
+  onMounted(() => {
+    getBase()
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply text-primary;
+  }
+</style>
diff --git a/src/views/main/water-quality/components/FormDrawer.vue b/src/views/main/water-quality/components/FormDrawer.vue
index f8358128..028e5642 100644
--- a/src/views/main/water-quality/components/FormDrawer.vue
+++ b/src/views/main/water-quality/components/FormDrawer.vue
@@ -66,7 +66,7 @@
     3: 'Ⅲ级预警',
     4: 'Ⅳ级预警',
   }
-  const roulsDate = ref(null)
+  const roulsDate = ref<any>(null)
   const Title = computed(() => {
     if (!roulsDate.value) return []
     return Object.keys(roulsDate.value.value)
diff --git a/src/views/main/water-quality/index.vue b/src/views/main/water-quality/index.vue
index ca942910..1c1e6f67 100644
--- a/src/views/main/water-quality/index.vue
+++ b/src/views/main/water-quality/index.vue
@@ -87,40 +87,26 @@
           <span class="text-xl">预警数据统计</span>
           <Button @click="handleSetting">设置</Button>
         </div>
-        <div class="mt-20px flex">
+        <div class="mt-20px md:flex enter-y flex-wrap -mr-4">
           <EarlyWarningItem
-            class="mr-16px last:mr-0"
+            class="md:w-200px w-full !mr-4 !mb-4"
             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="mt-20px md:flex enter-y flex-wrap -mr-4">
+          <div v-for="(item, index) in tagMenus" :key="index">
+            <LineCharts
+              :company="formState.time_interval"
+              :extra="extra"
+              :loading="false"
+              :title="item.lable"
+              :data="statisData[item.value]"
+              :time="formState.time"
             />
-            <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" />
@@ -169,13 +155,12 @@
     time: undefined, //时间
     time_interval: 'day',
   })
-  const baseDate = ref([])
+  const baseDate = ref<any>([])
   const pointDate = ref<any>([])
   const statisData = ref<any>({})
   // 预警数量
   const earlyNums = ref<any>({})
-  // 选中
-  const activeKey = ref('chlorine')
+
   interface EarlyWarningItem {
     icon: String
     title: String
@@ -209,10 +194,7 @@
     })
     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 ?? ''
@@ -336,10 +318,7 @@
   const handleSuccess = () => {
     message.success('操作成功')
   }
-  //
-  const onChangeTag = (e: string) => {
-    activeKey.value = e
-  }
+
   onMounted(() => {
     getBase()
   })
diff --git a/src/views/main/water-quality/index1.vue b/src/views/main/water-quality/index1.vue
new file mode 100644
index 00000000..eeab77e0
--- /dev/null
+++ b/src/views/main/water-quality/index1.vue
@@ -0,0 +1,352 @@
+<template>
+  <PageWrapper>
+    <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>
+      </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" 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<any>([])
+  const pointDate = ref<any>([])
+  const statisData = ref<any>({})
+  // 预警数量
+  const earlyNums = ref<any>({})
+  // 选中
+  const activeKey = ref('chlorine')
+  interface EarlyWarningItem {
+    icon: String
+    title: String
+    value: String | Number
+  }
+  const earlyWarningList = computed(() => {
+    const arr: EarlyWarningItem[] = [
+      {
+        icon: 'yujing1',
+        title: 'Ⅰ级预警',
+        value: '',
+      },
+      {
+        icon: 'yujing2',
+        title: 'Ⅱ级预警',
+        value: '',
+      },
+      {
+        icon: 'yujing3',
+        title: 'Ⅲ级预警',
+        value: '',
+      },
+      {
+        icon: 'yujing4',
+        title: 'Ⅳ级预警',
+        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: 'chlorine',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '电导率',
+      value: 'conductivity',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '氧气',
+      value: 'oxygen',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: 'PH',
+      value: 'ph',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '温度',
+      value: 'temperature',
+      icon: icon1,
+      icon1: uicon1,
+    },
+    {
+      lable: '浊度',
+      value: 'turbidity',
+      icon: icon1,
+      icon1: uicon1,
+    },
+  ]
+
+  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()
+  }
+
+  const onChangTime = (e) => {
+    if (e === null) formState.time_interval = 'day'
+    else formState.time_interval = ''
+    getPoint()
+  }
+
+  const handleSetting = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    })
+  }
+  const handleSuccess = () => {
+    message.success('操作成功')
+  }
+  //
+  const onChangeTag = (e: string) => {
+    activeKey.value = e
+  }
+  onMounted(() => {
+    getBase()
+  })
+</script>
+
+<style scoped lang="less">
+  .active {
+    @apply text-primary;
+  }
+</style>