261 lines
7.8 KiB
Vue
261 lines
7.8 KiB
Vue
<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="请选择基地"
|
|
/>
|
|
</FormItem>
|
|
</Col>
|
|
<Col
|
|
:xs="{ span: 24 }"
|
|
:sm="{ span: 12 }"
|
|
:md="{ span: 8 }"
|
|
:lg="{ span: 6 }"
|
|
:xl="{ span: 6 }"
|
|
:xxl="{ span: 4 }"
|
|
>
|
|
<FormItem label="检测点">
|
|
<Select
|
|
:options="pointDate"
|
|
@select="onChange('device_id')"
|
|
v-model:value="formState.device_id"
|
|
></Select>
|
|
</FormItem>
|
|
</Col>
|
|
<Col
|
|
:xs="{ span: 24 }"
|
|
:sm="{ span: 12 }"
|
|
:md="{ span: 8 }"
|
|
:lg="{ span: 6 }"
|
|
:xl="{ span: 6 }"
|
|
:xxl="{ span: 4 }"
|
|
>
|
|
<FormItem label="日期">
|
|
<RangePicker @change="onChange('time')" v-model:value="formState.time"></RangePicker>
|
|
</FormItem>
|
|
</Col>
|
|
<Col
|
|
:xs="{ span: 24 }"
|
|
:sm="{ span: 12 }"
|
|
:md="{ span: 8 }"
|
|
:lg="{ span: 6 }"
|
|
:xl="{ span: 6 }"
|
|
:xxl="{ span: 4 }"
|
|
>
|
|
<FormItem>
|
|
<RadioGroup
|
|
@change="onChange('time_interval')"
|
|
button-style="solid"
|
|
v-model:value="formState.time_interval"
|
|
>
|
|
<RadioButton value="day">今天</RadioButton>
|
|
<RadioButton value="week">近一周</RadioButton>
|
|
<RadioButton value="month">近一个月</RadioButton>
|
|
</RadioGroup>
|
|
</FormItem>
|
|
</Col>
|
|
</Row>
|
|
</Form>
|
|
<!-- <BasicForm
|
|
autoFocusFirstItem
|
|
:labelWidth="0"
|
|
:schemas="schemas"
|
|
:rowProps="{ gutter: [16, 0] }"
|
|
:showActionButtonGroup="false"
|
|
/> -->
|
|
<div class="md:flex enter-y flex-wrap -mr-4">
|
|
<!-- 空气温度 -->
|
|
<AirTemperature
|
|
:data="statisData.air_temperature"
|
|
:extra="name"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- 空气湿度 -->
|
|
<AirHumidity
|
|
:extra="name"
|
|
:data="statisData.air_humidity"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- 光照强度 -->
|
|
<LightIntensity
|
|
:extra="name"
|
|
:data="statisData.illumination"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- 降雨量 -->
|
|
<Rainfall
|
|
:extra="name"
|
|
:data="statisData.daily_rainfall"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- 风速 -->
|
|
<WindSpeed
|
|
:extra="name"
|
|
:data="statisData.wind_speed"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- 风力 -->
|
|
<Pressure
|
|
:extra="name"
|
|
:data="statisData.wind_degree"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- 风向 -->
|
|
<WindDirection
|
|
:extra="name"
|
|
:data="statisData.wind_direction"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- 噪声 -->
|
|
<Noise
|
|
:extra="name"
|
|
:data="statisData.noise"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- PM10 -->
|
|
<PM10
|
|
:extra="name"
|
|
:data="statisData.pm10"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- PM25 -->
|
|
<PM25
|
|
:extra="name"
|
|
:data="statisData.pm25"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
<!-- CO2 -->
|
|
<CO2
|
|
:extra="name"
|
|
:data="statisData.co2"
|
|
class="md:w-386px w-full !mr-4 !mb-4"
|
|
:loading="false"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</PageWrapper>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { formatDataByObject, getWeek, getMonth } from '/@/utils/index'
|
|
import dayjs from 'dayjs'
|
|
import { PageWrapper } from '/@/components/Page'
|
|
import { ref, reactive, onMounted, computed } from 'vue'
|
|
import {
|
|
Card,
|
|
Form,
|
|
FormItem,
|
|
Select,
|
|
Row,
|
|
Col,
|
|
RadioGroup,
|
|
RadioButton,
|
|
RangePicker,
|
|
} from 'ant-design-vue'
|
|
import type { FormInstance } from 'ant-design-vue'
|
|
import AirTemperature from './components/AirTemperature.vue'
|
|
import AirHumidity from './components/AirHumidity.vue'
|
|
import LightIntensity from './components/LightIntensity.vue'
|
|
import Rainfall from './components/Rainfall.vue'
|
|
import WindSpeed from './components/WindSpeed.vue'
|
|
import Pressure from './components/Pressure.vue'
|
|
import WindDirection from './components/WindDirection.vue'
|
|
import Noise from './components/Noise.vue'
|
|
import PM10 from './components/PM10.vue'
|
|
import PM25 from './components/PM25.vue'
|
|
import CO2 from './components/CO2.vue'
|
|
import {
|
|
getGriculturalDeviceBasic,
|
|
getaGriculturalDevicePoint,
|
|
getAmonitoringData,
|
|
} from '/@/api/sys/user'
|
|
const formRef = ref<FormInstance>()
|
|
const formState = reactive({
|
|
base_id: undefined, //基地
|
|
device_id: undefined, //监控点
|
|
time: undefined, //时间
|
|
time_interval: 'day',
|
|
})
|
|
const baseDate = ref([])
|
|
const pointDate = ref<any>([])
|
|
const statisData = ref<any>({})
|
|
const name = computed(() => baseDate?.value?.find((e: any) => e.id === formState.base_id)?.name)
|
|
// 获取基地数据
|
|
const getBase = async () => {
|
|
const res = await getGriculturalDeviceBasic({ device_type: 4 })
|
|
baseDate.value = res
|
|
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
|
|
getPoint()
|
|
}
|
|
// 获取监控到数据
|
|
const getPoint = async () => {
|
|
const res = await getaGriculturalDevicePoint({
|
|
device_type: 4,
|
|
agricultural_basic: formState.base_id,
|
|
})
|
|
pointDate.value = formatDataByObject(res)
|
|
if (!formState.device_id) formState.device_id = pointDate.value?.[0]?.value ?? undefined
|
|
getDate()
|
|
}
|
|
// 获取数据
|
|
const getDate = async () => {
|
|
const params = {
|
|
device_id: formState.device_id,
|
|
start_time: '',
|
|
end_time: '',
|
|
}
|
|
if (formState.time) {
|
|
params.start_time = dayjs(formState.time?.[0]).format('YYYY-MM-DD')
|
|
params.end_time = dayjs(formState.time?.[1]).format('YYYY-MM-DD')
|
|
}
|
|
if (formState.time_interval === 'week') {
|
|
const { WeekStartDate, WeekEndDate } = getWeek()
|
|
params.start_time = WeekStartDate
|
|
params.end_time = WeekEndDate
|
|
} else if (formState.time_interval === 'month') {
|
|
const { MonthStartDate, MonthEndDate } = getMonth()
|
|
params.start_time = MonthStartDate
|
|
params.end_time = MonthEndDate
|
|
} else if (formState.time_interval === 'day') {
|
|
params.start_time = ''
|
|
params.end_time = ''
|
|
}
|
|
const res = await getAmonitoringData(params)
|
|
statisData.value = res
|
|
}
|
|
const onChange = (e: string | undefined) => {
|
|
if (e === 'base_id') formState.device_id = undefined
|
|
if (e === 'time') formState.time_interval = ''
|
|
if (e === 'time_interval') formState.time = undefined
|
|
getPoint()
|
|
}
|
|
onMounted(() => {
|
|
getBase()
|
|
})
|
|
</script>
|