Merge branch 'temp' of https://gitea.peidikeji.cn/zhouhui/lcny-vue3-antd-admin into temp

src/views/base/crop-yields/base-yields/BaseDrawer.vue

@@ -11,26 +11,63 @@
       <template #crop="{ model, field }">
         <TreeSelect
           v-model:value="model[field]"
+          @select="select"
           :tree-data="treeData"
           placeholder="请选择"
           :fieldNames="{ children: 'children', label: 'name', value: 'id' }"
         ></TreeSelect>
       </template>
+      <!-- 产量 -->
+      <template #yield="{ model, field }">
+        <Input v-model:value="model[field]" :suffix="company" placeholder="请输入"></Input>
+      </template>
+      <!-- 扩展 -->
+      <template #extends="{ model, field }">
+        <Space
+          v-for="(sight, index) in model[field]"
+          :key="index"
+          style="width: 100%"
+          align="baseline"
+        >
+          <FormItem
+            class="w-full"
+            :label="sight.name"
+            :name="['extends', index, 'value']"
+            :rules="{
+              required: true,
+              message: '请输入',
+              trigger: 'change',
+            }"
+            :label-col="{ span: 6 }"
+          >
+            <Input
+              v-model:value="sight.value"
+              placeholder="请输入"
+              :suffix="sight.unit"
+              class="w-full"
+              type="number"
+            ></Input>
+          </FormItem>
+        </Space>
+      </template>
     </BasicForm>
   </BasicDrawer>
 </template>
 <script lang="ts" setup>
-  import { getTreeData } from '/@/utils/index'
+  import { getTreeData, jsonString } from '/@/utils/index'
   import dayjs from 'dayjs'
   import { ref, computed, unref } from 'vue'
   import { BasicForm, useForm } from '/@/components/Form/index'
   import { accountFormSchema } from './base.data'
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
-  import { addCropYields, editCropYields, getcrops } from '/@/api/sys/user'
+  import { addCropYields, editCropYields, getcrops, getCropYieldsInfo } from '/@/api/sys/user'
-  import { TreeSelect } from 'ant-design-vue'
+  import { TreeSelect, Input, Space, FormItem } from 'ant-design-vue'
   const emits = defineEmits(['success', 'register'])
   const isUpdate = ref(false)
   const treeData = ref([])
+  const cropslist = ref<any>([])
+  //单位
+  const company = ref('')
   const getTitle = computed(() => (!isUpdate.value ? '新增产量' : '编辑产量'))
   const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
     labelWidth: 120,
@@ -40,13 +77,18 @@
   })
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
     resetFields()
+    company.value = ''
     setDrawerProps({ confirmLoading: false })
     if (unref(treeData).length === 0) {
       const res = await getcrops({ type: 'all', crop_type: 1 })
+      cropslist.value = res.data
       treeData.value = getTreeData(res.data, 0, 'parent_id', 'id', 'children', 'key')
     }
     isUpdate.value = data?.isUpdate
     if (unref(isUpdate)) {
+      company.value = cropslist?.value?.find((e) => e.id === data.crop_id)?.unit ?? ''
+      const my_extends = cropslist?.value?.find((e) => e.id === data.crop_id)?.extends ?? null
+      const res = await getCropYieldsInfo(data.id)
       await setFieldsValue({
         id: data.id,
         quarter: data.quarter.toString(),
@@ -56,13 +98,32 @@
         output: data.output,
         crop_id: data.crop_id,
         cultivated: data.cultivated,
+        extends: formatDataByObject(my_extends, res.extends),
+      })
+    } else {
+      setFieldsValue({
+        extends: [],
       })
     }
   })
 
+  const select = (e: number, node: any) => {
+    console.log(e)
+    company.value = node.unit
+    setFieldsValue({
+      extends: jsonString(node.extends) ? JSON.parse(node.extends) : node.extends,
+    })
+  }
+
   const handleSubmit = async () => {
     try {
       const values = await validate()
+      if (values.extends) {
+        values.extends = values.extends.reduce(
+          (obj, item) => ((obj[item.name] = item.value), obj),
+          {},
+        )
+      }
       values.time_year = dayjs(values.time_year.toString()).format('YYYY')
       values.type = 1
       setDrawerProps({ confirmLoading: true })
@@ -79,6 +140,34 @@
       setDrawerProps({ confirmLoading: false })
     }
   }
+  const formatDataByObject = (e, v) => {
+    let arr: any = []
+    const arr1 = jsonString(e) ? JSON.parse(e) : e
+    if (!!arr1) {
+      if (!!v) {
+        arr1.forEach((e) => {
+          Object.keys(v).forEach((eve) => {
+            if (e.name === eve) {
+              arr.push({
+                name: e.name,
+                value: v[eve],
+                unit: e.unit,
+              })
+            }
+          })
+        })
+      } else {
+        arr = arr1.map((s) => {
+          return {
+            name: s.name,
+            value: '',
+            unit: s.unit,
+          }
+        })
+      }
+    }
+    return arr
+  }
 </script>
 <style lang="less" scoped>
   :deep(.ant-picker) {

src/views/base/crop-yields/base-yields/base.data.ts

@@ -53,20 +53,20 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
-  // {
+  {
-  //   field: 'quarter',
+    field: 'quarter',
-  //   label: '季度',
+    label: '季度',
-  //   component: 'Select',
+    component: 'Select',
-  //   componentProps: {
+    componentProps: {
-  //     options: [
+      options: [
-  //       { label: '第一季度', value: '1' },
+        { label: '第一季度', value: '1' },
-  //       { label: '第二季度', value: '2' },
+        { label: '第二季度', value: '2' },
-  //       { label: '第三季度', value: '3' },
+        { label: '第三季度', value: '3' },
-  //       { label: '第四季度', value: '4' },
+        { label: '第四季度', value: '4' },
-  //     ],
+      ],
-  //   },
+    },
-  //   colProps: { span: 6 },
+    colProps: { span: 6 },
-  // },
+  },
   // {
   //   field: 'crop',
   //   label: '农作物',
@@ -94,6 +94,27 @@ export const accountFormSchema: FormSchema[] = [
       return !!values.id
     },
   },
+  {
+    label: '农作物',
+    field: 'crop_id',
+    slot: 'crop',
+    component: 'TreeSelect',
+    required: true,
+  },
+  {
+    field: 'base_id',
+    label: '区域',
+    component: 'ApiSelect',
+    required: true,
+    componentProps: {
+      api: async () => {
+        const res = await getTownAgriculturalBasic({ type: 2, page: 1, per_page: 99999 })
+        return res.data
+      },
+      labelField: 'name',
+      valueField: 'id',
+    },
+  },
   {
     field: 'time_year',
     label: '年份',
@@ -119,57 +140,42 @@ export const accountFormSchema: FormSchema[] = [
     },
   },
 
-  {
-    field: 'base_id',
-    label: '区域',
-    component: 'ApiSelect',
-    required: true,
-    componentProps: {
-      api: async () => {
-        const { data } = await getTownAgriculturalBasic({ type: 1, page: 1, per_page: 99999 })
-        return data
-      },
-      labelField: 'name',
-      valueField: 'id',
-    },
-  },
   {
     field: 'yield',
     label: '产量',
     required: true,
-    component: 'InputNumber',
+    component: 'Input',
+    slot: 'yield',
   },
   {
     field: 'output',
     label: '产值',
     required: true,
-    component: 'InputNumber',
+    component: 'Input',
-  },
+    componentProps: {
-  // {
+      suffix: '元',
-  //   field: 'crop_id',
+      type: 'number',
-  //   label: '农作物',
+    },
-  //   component: 'TreeSelect',
-  //   required: true,
-  //   componentProps: {
-  //     api: async () => {
-  //       const res = await getcrops({ type: 'all', crop_type: 2 })
-  //       return res.filter((e) => e.is_end == 1)
-  //     },
-  //     labelField: 'name',
-  //     valueField: 'id',
-  //   },
-  // },
-  {
-    label: '农作物',
-    field: 'crop_id',
-    slot: 'crop',
-    component: 'TreeSelect',
-    required: true,
   },
+
   {
     field: 'cultivated',
     label: '耕种面积',
     required: true,
-    component: 'InputNumber',
+    component: 'Input',
+    componentProps: {
+      suffix: '亩',
+      type: 'number',
+    },
+  },
+  {
+    field: 'extends',
+    label: '',
+    required: false,
+    component: 'Input',
+    slot: 'extends',
+    ifShow: ({ values }) => {
+      return values?.extends?.length > 0
+    },
   },
 ]

src/views/base/crop-yields/town-yields/town.data.ts

@@ -53,20 +53,20 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
-  // {
+  {
-  //   field: 'quarter',
+    field: 'quarter',
-  //   label: '季度',
+    label: '季度',
-  //   component: 'Select',
+    component: 'Select',
-  //   componentProps: {
+    componentProps: {
-  //     options: [
+      options: [
-  //       { label: '第一季度', value: '1' },
+        { label: '第一季度', value: '1' },
-  //       { label: '第二季度', value: '2' },
+        { label: '第二季度', value: '2' },
-  //       { label: '第三季度', value: '3' },
+        { label: '第三季度', value: '3' },
-  //       { label: '第四季度', value: '4' },
+        { label: '第四季度', value: '4' },
-  //     ],
+      ],
-  //   },
+    },
-  //   colProps: { span: 6 },
+    colProps: { span: 6 },
-  // },
+  },
   // {
   //   field: 'crop',
   //   label: '农作物',

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)

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)

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 class="mt-20px md:flex enter-y flex-wrap -mr-4">
-          <div
+          <div v-for="(item, index) in tagMenus" :key="index">
-            v-for="item in tagMenus"
+            <LineCharts
-            :key="item.value"
+              class="md:w-386px w-full !mr-4 !mb-4"
-            class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
+              :company="formState.time_interval"
-            :class="{ active: item.value == activeKey }"
+              :extra="extra"
-            @click="onChangeTag(item.value)"
+              :loading="false"
-          >
+              :title="item.lable"
-            <img
+              :data="statisData[item.value]"
-              class="w-16px h-16px"
+              :time="formState.time"
-              :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" />
@@ -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()
   })

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>

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)

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 class="mt-20px md:flex enter-y flex-wrap -mr-4">
-          <div
+          <div v-for="(item, index) in tagMenus" :key="index">
-            v-for="item in tagMenus"
+            <LineCharts
-            :key="item.value"
+              :company="formState.time_interval"
-            class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
+              :extra="extra"
-            :class="{ active: item.value == activeKey }"
+              :loading="false"
-            @click="onChangeTag(item.value)"
+              :title="item.lable"
-          >
+              :data="statisData[item.value]"
-            <img
+              :time="formState.time"
-              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" />
@@ -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()
   })

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>