zhouhui
/
lcny-vue3-antd-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

new-map
H 2022-11-11 16:45:11 +08:00
parent 777cca7944
commit 538ab49bed
16 changed files with 279 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/utils/index.ts
View File

@ -135,32 +135,46 @@ export function getTreeData(
return arr
}
// 获取近一周的时间
// 获取近7的时间
export function getWeek() {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth()
const day = date.getDate()
const week = date.getDay()
//开始时间
let WeekStartDate = dayjs(new Date(year, month, day - week + 1)).format('YYYY-MM-DD')
// 结束时间
let WeekEndDate = dayjs(new Date()).format('YYYY-MM-DD')
let toData = new Date(new Date().toLocaleDateString()).getTime()
//今天
let todayStart = toData
//昨天
let yesterdayStart = toData - 3600 * 24 * 1000
let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
//最近7天
let past7daysStart = todayStart - 7 * 3600 * 24 * 1000
// const date = new Date()
// const year = date.getFullYear()
// const month = date.getMonth()
// const day = date.getDate()
// const week = date.getDay()
// //开始时间
// let WeekStartDate = dayjs(new Date(year, month, day - week + 1)).format('YYYY-MM-DD')
// // 结束时间
// let WeekEndDate = dayjs(new Date()).format('YYYY-MM-DD')
return {
WeekStartDate,
WeekEndDate,
WeekStartDate: dayjs(past7daysStart).format('YYYY-MM-DD'),
WeekEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
}
}
// 获取近一月的数据
export function getMonth() {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth()
let MonthStartDate = dayjs(new Date(year, month, 1)).format('YYYY-MM-DD')
let MonthEndDate = dayjs(new Date()).format('YYYY-MM-DD')
let toData = new Date(new Date().toLocaleDateString()).getTime()
//昨天
let yesterdayStart = toData - 3600 * 24 * 1000
let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
//最近30天
let past30daysStart = toData - 30 * 3600 * 24 * 1000
// const date = new Date()
// const year = date.getFullYear()
// const month = date.getMonth()
// let MonthStartDate = dayjs(new Date(year, month, 1)).format('YYYY-MM-DD')
// let MonthEndDate = dayjs(new Date()).format('YYYY-MM-DD')
return {
MonthStartDate,
MonthEndDate,
MonthStartDate: dayjs(past30daysStart).format('YYYY-MM-DD'),
MonthEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
}
}

2
src/views/main/meteorological/components/AirHumidity.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,

2
src/views/main/meteorological/components/AirTemperature.vue
View File

@ -85,7 +85,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,

2
src/views/main/meteorological/components/CO2.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e),

2
src/views/main/meteorological/components/LightIntensity.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
symbolSize: 20,

2
src/views/main/meteorological/components/Noise.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e),

2
src/views/main/meteorological/components/PM10.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e),

2
src/views/main/meteorological/components/PM25.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e),

2
src/views/main/meteorological/components/Pressure.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e),

2
src/views/main/meteorological/components/Rainfall.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
symbolSize: 20,

2
src/views/main/meteorological/components/WindDirection.vue
View File

@ -84,7 +84,7 @@
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
symbolSize: 20,

2
src/views/main/meteorological/components/WindSpeed.vue
View File

@ -85,7 +85,7 @@
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,

213
src/views/main/meteorological/index.vue
View File

@ -82,107 +82,114 @@
:rowProps="{ gutter: [16, 0] }"
:showActionButtonGroup="false"
/> -->
<div class="md:flex enter-y flex-wrap -mr-4">
<!-- 空气温度 -->
<AirTemperature
:data="statisData.air_temperature"
:extra="name"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 空气湿度 -->
<AirHumidity
:extra="name"
:data="statisData.air_humidity"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 光照强度 -->
<LightIntensity
:extra="name"
:data="statisData.illumination"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 降雨量 -->
<Rainfall
:extra="name"
:time="formState.time"
:data="statisData.daily_rainfall"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:company="formState.time_interval"
/>
<!-- 风速 -->
<WindSpeed
:extra="name"
:data="statisData.wind_speed"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 风力 -->
<Pressure
:extra="name"
:data="statisData.wind_degree"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 风向 -->
<WindDirection
:extra="name"
:data="statisData.wind_direction"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 噪声 -->
<Noise
:extra="name"
:data="statisData.noise"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- PM10 -->
<PM10
:extra="name"
:data="statisData.pm10"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- PM25 -->
<PM25
:extra="name"
:data="statisData.pm25"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- CO2 -->
<CO2
:extra="name"
:data="statisData.co2"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
</div>
<template v-if="baseDate.length === 0">
<div class="h-500px flex items-center justify-center flex-col">
<Empty></Empty>
</div>
</template>
<template v-else>
<div class="md:flex enter-y flex-wrap -mr-4">
<!-- 空气温度 -->
<AirTemperature
:data="statisData.air_temperature"
:extra="name"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 空气湿度 -->
<AirHumidity
:extra="name"
:data="statisData.air_humidity"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 光照强度 -->
<LightIntensity
:extra="name"
:data="statisData.illumination"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 降雨量 -->
<Rainfall
:extra="name"
:time="formState.time"
:data="statisData.daily_rainfall"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:company="formState.time_interval"
/>
<!-- 风速 -->
<WindSpeed
:extra="name"
:data="statisData.wind_speed"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 风力 -->
<Pressure
:extra="name"
:data="statisData.wind_degree"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 风向 -->
<WindDirection
:extra="name"
:data="statisData.wind_direction"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- 噪声 -->
<Noise
:extra="name"
:data="statisData.noise"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- PM10 -->
<PM10
:extra="name"
:data="statisData.pm10"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- PM25 -->
<PM25
:extra="name"
:data="statisData.pm25"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
<!-- CO2 -->
<CO2
:extra="name"
:data="statisData.co2"
class="md:w-386px w-full !mr-4 !mb-4"
:loading="false"
:time="formState.time"
:company="formState.time_interval"
/>
</div>
</template>
</Card>
</PageWrapper>
</template>
@ -192,7 +199,7 @@
import dayjs from 'dayjs'
import { PageWrapper } from '/@/components/Page'
import { ref, reactive, onMounted, computed } from 'vue'
import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker } from 'ant-design-vue'
import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker, Empty } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
import AirTemperature from './components/AirTemperature.vue'
import AirHumidity from './components/AirHumidity.vue'
@ -230,12 +237,14 @@
// 获取基地数据
const getBase = async () => {
const res = await getGriculturalDeviceBasic({ device_type: 4 })
if (res.length == 0) return
baseDate.value = res
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
getPoint()
}
// 获取监控到数据
const getPoint = async () => {
if (baseDate.value.length == 0) return
const res = await getaGriculturalDevicePoint({
device_type: 4,
agricultural_basic: formState.base_id,

86
src/views/main/soil-monitoring/index.vue
View File

@ -76,45 +76,52 @@
</Col>
</Row>
</Form>
<!-- -->
<div class="flex justify-between">
<span class="text-xl">预警数据统计</span>
<Button @click="handleSetting">设置</Button>
</div>
<div class="mt-20px flex">
<EarlyWarningItem
class="mr-16px last:mr-0"
v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
/>
</div>
<div class="flex items-center">
<div
v-for="item in tagMenus"
:key="item.value"
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
:class="{ active: item.value == activeKey }"
@click="onChangeTag(item.value)"
>
<img
class="w-16px h-16px"
:src="item.value == activeKey ? item.icon : item.icon1"
alt=""
/>
<div class="ml-3px">{{ item.lable }}</div>
<template v-if="baseDate.length === 0">
<div class="h-500px flex items-center justify-center flex-col">
<Empty></Empty>
</div>
</div>
<div class="mt-20px">
<LineCharts
:company="formState.time_interval"
:extra="extra"
:loading="false"
:title="currentActiveLable"
:data="chartData"
:time="formState.time"
/>
</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>
@ -149,6 +156,7 @@
RangePicker,
Button,
message,
Empty,
} from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
const RadioButton = Radio.Button
@ -256,12 +264,14 @@
// 获取基地数据
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,

18
src/views/main/water-quality/components/FormDrawer.vue
View File

@ -45,20 +45,20 @@
import { editDeviceWarningRules } from '/@/api/sys/user'
const emits = defineEmits(['success', 'register'])
const enumName = {
chlorine: '氯',
conductivity: '电导率',
humidity: '湿度',
oxygen: '氧气',
ph: 'PH',
temperature: '温度',
k: '氮',
n: '磷',
p: '钾',
turbidity: '浊度',
}
const enumCompany = {
temperature: '℃',
conductivity: 'us/cm',
humidity: '%',
k: 'mg/kg',
n: 'mg/kg',
p: 'mg/kg',
turbidity: 'NTU',
chlorine: 'mg/L',
oxygen: 'mg/L',
ph: '',
}
const enumName1 = {
1: 'Ⅰ级预警',
@ -79,7 +79,7 @@
setDrawerProps({ confirmLoading: false })
const res = await getDeviceWarningRules({})
roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_soil')
roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_waterquality')
})
const handleSubmit = async () => {

124
src/views/main/water-quality/index.vue
View File

@ -76,45 +76,52 @@
</Col>
</Row>
</Form>
<!-- -->
<div class="flex justify-between">
<span class="text-xl">预警数据统计</span>
<Button @click="handleSetting">设置</Button>
</div>
<div class="mt-20px flex">
<EarlyWarningItem
class="mr-16px last:mr-0"
v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
/>
</div>
<div class="flex items-center">
<div
v-for="item in tagMenus"
:key="item.value"
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
:class="{ active: item.value == activeKey }"
@click="onChangeTag(item.value)"
>
<img
class="w-16px h-16px"
:src="item.value == activeKey ? item.icon : item.icon1"
alt=""
/>
<div class="ml-3px">{{ item.lable }}</div>
<template v-if="baseDate.length === 0">
<div class="h-500px flex items-center justify-center flex-col">
<Empty></Empty>
</div>
</div>
<div class="mt-20px">
<LineCharts
:company="formState.time_interval"
:extra="extra"
:loading="false"
:title="currentActiveLable"
:data="chartData"
:time="formState.time"
/>
</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>
@ -149,6 +156,7 @@
RangePicker,
Button,
message,
Empty,
} from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
const RadioButton = Radio.Button
@ -167,7 +175,7 @@
// 预警数量
const earlyNums = ref<any>({})
// 选中
const activeKey = ref('conductivity')
const activeKey = ref('chlorine')
interface EarlyWarningItem {
icon: String
title: String
@ -211,6 +219,12 @@
return name1 + '-' + name2
})
const tagMenus = [
{
lable: '氯',
value: 'chlorine',
icon: icon1,
icon1: uicon1,
},
{
lable: '电导率',
value: 'conductivity',
@ -218,8 +232,14 @@
icon1: uicon1,
},
{
lable: '湿度',
value: 'humidity',
lable: '氧气',
value: 'oxygen',
icon: icon1,
icon1: uicon1,
},
{
lable: 'PH',
value: 'ph',
icon: icon1,
icon1: uicon1,
},
@ -230,20 +250,8 @@
icon1: uicon1,
},
{
lable: '氮',
value: 'k',
icon: icon1,
icon1: uicon1,
},
{
lable: '磷',
value: 'n',
icon: icon1,
icon1: uicon1,
},
{
lable: '钾',
value: 'p',
lable: '浊度',
value: 'turbidity',
icon: icon1,
icon1: uicon1,
},
@ -254,15 +262,17 @@
}
// 获取基地数据
const getBase = async () => {
const res = await getGriculturalDeviceBasic({ device_type: 2 })
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: 2,
device_type: 3,
agricultural_basic: formState.base_id,
})
pointDate.value = formatDataByObject(res)