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

提交

new-map
H 2022-11-10 17:38:17 +08:00
parent 9d827c537f
commit af4881a149
18 changed files with 1461 additions and 918 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/api/sys/user.ts
View File

@ -679,6 +679,22 @@ export function editCropYields(id: string, data, mode: ErrorMessageMode = 'modal
) )
} }
/**
* @description:设备列表
*/
export function getDevices(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: '/api/devices',
params,
},
{
errorMessageMode: mode,
isTransformResponse: false,
},
)
}
/** /**
* @description:删除农作物产量 * @description:删除农作物产量
*/ */
@ -721,3 +737,63 @@ export function getaGriculturalDevicePoint(params, mode: ErrorMessageMode = 'mod
}, },
) )
} }
/**
* @description:监测数据
*/
export function getAmonitoringData(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: `/api/monitoring-data`,
params,
},
{
errorMessageMode: mode,
},
)
}
/**
* @description:预警数量
*/
export function getDeviceWarningNums(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: `/api/device-warning-nums`,
params,
},
{
errorMessageMode: mode,
},
)
}
/**
* @description:预警规则
*/
export function getDeviceWarningRules(params, mode: ErrorMessageMode = 'modal') {
return defHttp.get(
{
url: `/api/device-warning-rules`,
params,
},
{
errorMessageMode: mode,
},
)
}
/**
* @description:更新规则
*/
export function editDeviceWarningRules(params, mode: ErrorMessageMode = 'modal') {
return defHttp.put(
{
url: `/api/device-warning-rules`,
params,
},
{
errorMessageMode: mode,
},
)
}

33
src/utils/index.ts
View File

@ -3,6 +3,7 @@ import type { App, Plugin } from 'vue'
import { unref } from 'vue' import { unref } from 'vue'
import { isObject } from '/@/utils/is' import { isObject } from '/@/utils/is'
import dayjs from 'dayjs'
export const noop = () => {} export const noop = () => {}
@ -90,7 +91,7 @@ export const withInstall = <T>(component: T, alias?: string) => {
} }
return component as T & Plugin return component as T & Plugin
} }
export function formatDataByObject(obj) { export function formatDataByObject(obj: any) {
const arr: any[] = [] const arr: any[] = []
Object.keys(obj).forEach((e) => { Object.keys(obj).forEach((e) => {
arr.push({ arr.push({
@ -133,3 +134,33 @@ export function getTreeData(
return arr return arr
} }
// 获取近一周的时间
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')
return {
WeekStartDate,
WeekEndDate,
}
}
// 获取近一月的数据
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')
return {
MonthStartDate,
MonthEndDate,
}
}

3
src/views/device/management/index.vue
View File

@ -29,7 +29,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '/@/components/Table' import { BasicTable, useTable, TableAction } from '/@/components/Table'
import { getDevices, deleteDevice } from '/@/api/sys/other' import { deleteDevice } from '/@/api/sys/other'
import { getDevices } from '/@/api/sys/user'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { useDrawer } from '/@/components/Drawer' import { useDrawer } from '/@/components/Drawer'
import DeviceDrawer from './DeviceDrawer.vue' import DeviceDrawer from './DeviceDrawer.vue'

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

@ -3,12 +3,13 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">空气湿度</div> <div class="text-18px font-extrabold">空气湿度</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import dayjs from 'dayjs'
import { Card } from 'ant-design-vue' import { Card } from 'ant-design-vue'
import { Ref, ref, watch } from 'vue' import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts' import { useECharts } from '/@/hooks/web/useECharts'
@ -22,60 +23,75 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
data: {
type: Object as PropType<object>,
default: () => {},
},
}) })
const chartRef = ref<HTMLDivElement | null>(null) const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
smooth: true, show: false,
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11], },
type: 'line', axisLine: {
itemStyle: { show: false,
color: '#5ab1ef',
}, },
}, },
], yAxis: [
}) {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
data: Object.values(e).map((e) => {
if (!!e) return e
return 0
}),
type: 'line',
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,

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

@ -3,16 +3,17 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">空气温度</div> <div class="text-18px font-extrabold">空气温度</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import echarts from '/@/utils/lib/echarts'; import { useECharts } from '/@/hooks/web/useECharts'
import echarts from '/@/utils/lib/echarts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -23,77 +24,92 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
smooth: true, show: false,
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#d7f3f2',
},
{
offset: 1,
color: '#ebf9f9',
},
]),
}, },
itemStyle: { axisLine: {
color: '#5ab1ef', show: false,
}, },
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
data: Object.values(e).map((e) => {
if (!!e) return e
return 0
}),
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#d7f3f2',
},
{
offset: 1,
color: '#ebf9f9',
},
]),
},
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

101
src/views/main/meteorological/components/CO2.vue 100644
View File

@ -0,0 +1,101 @@
<template>
<Card :loading="loading">
<template #title>
<div class="text-18px font-extrabold">CO2</div>
</template>
<template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div>
</Card>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import { Card } from 'ant-design-vue'
import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
data: {
type: Object as PropType<object>,
default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch(
() => props.data,
(e) => {
if (e) {
setOptions({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
type: 'bar',
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
},
{
immediate: true,
},
)
</script>
<style scoped></style>

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

@ -3,15 +3,16 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">光照强度</div> <div class="text-18px font-extrabold">光照强度</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -22,85 +23,77 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
symbolSize: 20, show: false,
type: 'scatter', },
data: [ axisLine: {
[10.0, 8.04], show: false,
[8.07, 6.95], },
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68],
],
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
symbolSize: 20,
type: 'scatter',
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -3,15 +3,16 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">噪声</div> <div class="text-18px font-extrabold">噪声</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -22,64 +23,79 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11], show: false,
type: 'bar', },
itemStyle: { axisLine: {
color: '#5ab1ef', show: false,
}, },
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
type: 'bar',
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -3,15 +3,16 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">PM10</div> <div class="text-18px font-extrabold">PM10</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -22,64 +23,79 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11], show: false,
type: 'bar', },
itemStyle: { axisLine: {
color: '#5ab1ef', show: false,
}, },
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
type: 'bar',
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -1,17 +1,18 @@
<template> <template>
<Card :loading="loading"> <Card :loading="loading">
<template #title> <template #title>
<div class="text-18px font-extrabold">大气压</div> <div class="text-18px font-extrabold">PM25</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -22,64 +23,79 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11], show: false,
type: 'bar', },
itemStyle: { axisLine: {
color: '#5ab1ef', show: false,
}, },
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
type: 'bar',
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -1,17 +1,18 @@
<template> <template>
<Card :loading="loading"> <Card :loading="loading">
<template #title> <template #title>
<div class="text-18px font-extrabold">大气压</div> <div class="text-18px font-extrabold">风力</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -22,64 +23,79 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11], show: false,
type: 'bar', },
itemStyle: { axisLine: {
color: '#5ab1ef', show: false,
}, },
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
type: 'bar',
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -3,15 +3,16 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">降雨量</div> <div class="text-18px font-extrabold">降雨量</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -22,85 +23,77 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
symbolSize: 20, show: false,
type: 'scatter', },
data: [ axisLine: {
[10.0, 8.04], show: false,
[8.07, 6.95], },
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68],
],
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
symbolSize: 20,
type: 'scatter',
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -3,15 +3,16 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">风向</div> <div class="text-18px font-extrabold">风向</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -22,85 +23,77 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
symbolSize: 20, show: false,
type: 'scatter', },
data: [ axisLine: {
[10.0, 8.04], show: false,
[8.07, 6.95], },
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68],
],
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
symbolSize: 20,
type: 'scatter',
data: Object.values(e).map((e) => {
if (e === 0) return null
return e
}),
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -3,16 +3,17 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">风速</div> <div class="text-18px font-extrabold">风速</div>
</template> </template>
<template #extra>普润镇桔博园-</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import echarts from '/@/utils/lib/echarts'; import { useECharts } from '/@/hooks/web/useECharts'
import echarts from '/@/utils/lib/echarts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
width: { width: {
@ -23,77 +24,92 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; setOptions({
} tooltip: {
setOptions({ trigger: 'axis',
tooltip: { axisPointer: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
{ axisTick: {
smooth: true, show: false,
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#d7f3f2',
},
{
offset: 1,
color: '#ebf9f9',
},
]),
}, },
itemStyle: { axisLine: {
color: '#5ab1ef', show: false,
}, },
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
data: Object.values(e).map((e) => {
if (!!e) return e
return 0
}),
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#d7f3f2',
},
{
offset: 1,
color: '#ebf9f9',
},
]),
},
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
start: 50,
end: 100,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -13,6 +13,7 @@
> >
<FormItem label="基地"> <FormItem label="基地">
<Select <Select
@select="onChange('base_id')"
:fieldNames="{ label: 'name', value: 'id' }" :fieldNames="{ label: 'name', value: 'id' }"
:options="baseDate" :options="baseDate"
v-model:value="formState.base_id" v-model:value="formState.base_id"
@ -29,7 +30,12 @@
:xxl="{ span: 4 }" :xxl="{ span: 4 }"
> >
<FormItem label="检测点"> <FormItem label="检测点">
<Select v-model:value="formState.device_id"></Select> <Select
@select="onChange('')"
placeholder="请选择检测点"
:options="pointDate"
v-model:value="formState.device_id"
></Select>
</FormItem> </FormItem>
</Col> </Col>
<Col <Col
@ -41,7 +47,7 @@
:xxl="{ span: 4 }" :xxl="{ span: 4 }"
> >
<FormItem label="日期"> <FormItem label="日期">
<RangePicker v-model:value="formState.time"></RangePicker> <RangePicker @change="onChange('time')" v-model:value="formState.time"></RangePicker>
</FormItem> </FormItem>
</Col> </Col>
<Col <Col
@ -53,10 +59,14 @@
:xxl="{ span: 4 }" :xxl="{ span: 4 }"
> >
<FormItem> <FormItem>
<RadioGroup button-style="solid" v-model:value="formState.time_interval"> <RadioGroup
<RadioButton value="a">今天</RadioButton> @change="onChange('time_interval')"
<RadioButton value="B">近一周</RadioButton> button-style="solid"
<RadioButton value="C">近一个月</RadioButton> v-model:value="formState.time_interval"
>
<RadioButton value="day">今天</RadioButton>
<RadioButton value="week">近一周</RadioButton>
<RadioButton value="month">近一个月</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
</Col> </Col>
@ -70,24 +80,93 @@
:showActionButtonGroup="false" :showActionButtonGroup="false"
/> --> /> -->
<div class="md:flex enter-y flex-wrap -mr-4"> <div class="md:flex enter-y flex-wrap -mr-4">
<AirTemperature class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> <!-- 空气温度 -->
<AirHumidity class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> <AirTemperature
<LightIntensity class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> :data="statisData.air_temperature"
<Rainfall class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> :extra="name"
<WindSpeed class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> class="md:w-386px w-full !mr-4 !mb-4"
<Pressure class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> :loading="false"
<WindDirection class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> />
<Noise class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> <!-- 空气湿度 -->
<PM10 class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> <AirHumidity
<PM25 class="md:w-386px w-full !mr-4 !mb-4" :loading="false" /> :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> </div>
</Card> </Card>
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { formatDataByObject, getWeek, getMonth } from '/@/utils/index'
import dayjs from 'dayjs'
import { PageWrapper } from '/@/components/Page' import { PageWrapper } from '/@/components/Page'
import { ref, reactive, onMounted } from 'vue' import { ref, reactive, onMounted, computed } from 'vue'
import { import {
Card, Card,
Form, Form,
@ -108,23 +187,30 @@
import Pressure from './components/Pressure.vue' import Pressure from './components/Pressure.vue'
import WindDirection from './components/WindDirection.vue' import WindDirection from './components/WindDirection.vue'
import Noise from './components/Noise.vue' import Noise from './components/Noise.vue'
import PM10 from './components/Noise.vue' import PM10 from './components/PM10.vue'
import PM25 from './components/PM25.vue' import PM25 from './components/PM25.vue'
import { getGriculturalDeviceBasic, getaGriculturalDevicePoint } from '/@/api/sys/user' import CO2 from './components/CO2.vue'
import {
getGriculturalDeviceBasic,
getaGriculturalDevicePoint,
getAmonitoringData,
} from '/@/api/sys/user'
const formRef = ref<FormInstance>() const formRef = ref<FormInstance>()
const formState = reactive({ const formState = reactive({
base_id: undefined, //基地 base_id: undefined, //基地
device_id: undefined, //监控点 device_id: undefined, //监控点
checkNick: false,
time: undefined, //时间 time: undefined, //时间
time_interval: '', time_interval: 'day',
}) })
const baseDate = ref([]) 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 getBase = async () => {
const res = await getGriculturalDeviceBasic({ device_type: 4 }) const res = await getGriculturalDeviceBasic({ device_type: 4 })
baseDate.value = res baseDate.value = res
formState.base_id = res?.[0]?.id ?? undefined if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
getPoint() getPoint()
} }
// 获取监控到数据 // 获取监控到数据
@ -133,7 +219,41 @@
device_type: 4, device_type: 4,
agricultural_basic: formState.base_id, agricultural_basic: formState.base_id,
}) })
console.log(res) 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(() => { onMounted(() => {
getBase() getBase()

124
src/views/main/soil-monitoring/components/FormDrawer.vue
View File

@ -3,59 +3,101 @@
v-bind="$attrs" v-bind="$attrs"
@register="registerDrawer" @register="registerDrawer"
showFooter showFooter
:title="getTitle" title="设置"
width="500px" width="500px"
@ok="handleSubmit" @ok="handleSubmit"
> >
<a-form> <div v-for="(item, index) in Title" :key="index" class="mt-10px">
<div class="text-20px font-medium">温度</div> <div class="text-20px font-semibold">{{ enumName[item] }}</div>
<div class="mt-30px flex"> <div class="mt-30px flex" v-for="(item1, index1) in setFormat(item)" :key="index1">
<div class="w-90px leading-32px">Ⅰ级预警：</div> <div class="w-90px leading-42px">{{ enumName1[item1] }}：</div>
<div> <div>
<div class="flex w-full items-center" v-for="item in 3" :key="item"> <div
<a-form-item> class="flex w-full items-center mt-10px"
<a-input suffix="℃" /> v-for="(item2, index2) in roulsDate.value[item][item1]"
</a-form-item> :key="index2"
<div class="mb-24px px-10px">-</div> >
<a-form-item> <Input
<a-input suffix="℃" /> type="number"
</a-form-item> v-model:value="item2.min"
placeholder="请输入"
:suffix="enumCompany[item]"
/>
<div class="mx-10px">-</div>
<Input
type="number"
v-model:value="item2.max"
placeholder="请输入"
:suffix="enumCompany[item]"
/>
</div> </div>
</div> </div>
</div> </div>
</a-form> </div>
</BasicDrawer> </BasicDrawer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, ref, computed, unref } from 'vue'; import { getDeviceWarningRules } from '/@/api/sys/user'
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; import { ref, computed } from 'vue'
import { Form, Input } from 'ant-design-vue'; import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
import { Input } from 'ant-design-vue'
import { editDeviceWarningRules } from '/@/api/sys/user'
const emits = defineEmits(['success', 'register'])
const enumName = {
conductivity: '电导率',
humidity: '湿度',
temperature: '温度',
k: '氮',
n: '磷',
p: '钾',
}
const enumCompany = {
temperature: '℃',
conductivity: 'us/cm',
humidity: '%',
k: 'mg/kg',
n: 'mg/kg',
p: 'mg/kg',
}
const enumName1 = {
1: 'Ⅰ级预警',
2: 'Ⅱ级预警',
3: 'Ⅲ级预警',
4: 'Ⅳ级预警',
}
const roulsDate = ref(null)
const Title = computed(() => {
if (!roulsDate.value) return []
return Object.keys(roulsDate.value.value)
})
const setFormat = (e: string) => {
if (!roulsDate.value) return []
return Object.keys(roulsDate.value.value[e])
}
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async () => {
setDrawerProps({ confirmLoading: false })
export default defineComponent({ const res = await getDeviceWarningRules({})
components: { roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_soil')
BasicDrawer, })
[Form.name]: Form,
[Form.Item.name]: Form.Item,
[Input.name]: Input,
},
setup() {
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
setDrawerProps({ confirmLoading: false });
// 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
});
const getTitle = '设置'; const handleSubmit = async () => {
if (!roulsDate.value) return
async function handleSubmit() {} try {
const params = {
return { slug: roulsDate.value.slug,
getTitle, value: roulsDate.value.value,
registerDrawer, }
handleSubmit, console.log(params)
}; const res = await editDeviceWarningRules(params)
}, console.log(res)
}); closeDrawer()
emits('success')
} finally {
setDrawerProps({ confirmLoading: false })
}
}
</script> </script>
<style scoped></style> <style scoped></style>

147
src/views/main/soil-monitoring/components/LineCharts.vue
View File

@ -3,16 +3,17 @@
<template #title> <template #title>
<div class="text-18px font-extrabold">{{ title }}</div> <div class="text-18px font-extrabold">{{ title }}</div>
</template> </template>
<template #extra>普润镇桔博园-设备间旁边</template> <template #extra></template>
<div ref="chartRef" :style="{ width, height }"></div> <div ref="chartRef" :style="{ width, height }"></div>
</Card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card } from 'ant-design-vue'; import dayjs from 'dayjs'
import { Ref, ref, watch } from 'vue'; import { Card } from 'ant-design-vue'
import { useECharts } from '/@/hooks/web/useECharts'; import { Ref, ref, watch } from 'vue'
import echarts from '/@/utils/lib/echarts'; import { useECharts } from '/@/hooks/web/useECharts'
import echarts from '/@/utils/lib/echarts'
const props = defineProps({ const props = defineProps({
loading: Boolean, loading: Boolean,
title: { title: {
@ -27,77 +28,95 @@
type: String as PropType<string>, type: String as PropType<string>,
default: '300px', default: '300px',
}, },
}); data: {
const chartRef = ref<HTMLDivElement | null>(null); type: Object as PropType<object>,
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); default: () => {},
},
company: {
type: String as PropType<string>,
default: '',
},
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
watch( watch(
() => props.loading, () => props.data,
() => { (e) => {
if (props.loading) { if (e) {
return; const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
} setOptions({
setOptions({ tooltip: {
tooltip: { trigger: 'axis',
trigger: 'axis', axisPointer: {
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: { lineStyle: {
type: 'dashed', width: 1,
color: '#019680',
}, },
}, },
}, },
], xAxis: {
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, type: 'category',
series: [ data: Object.keys(e).map((e) => dayjs(e).format(format)),
{ axisTick: {
smooth: true, show: false,
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#d7f3f2',
},
{
offset: 1,
color: '#ebf9f9',
},
]),
}, },
itemStyle: { axisLine: {
color: '#5ab1ef', show: false,
}, },
}, },
], yAxis: [
}); {
type: 'value',
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: true,
data: Object.values(e).map((e) => {
if (!!e) return e
return 0
}),
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#d7f3f2',
},
{
offset: 1,
color: '#ebf9f9',
},
]),
},
itemStyle: {
color: '#5ab1ef',
},
},
],
dataZoom: [
{
type: 'inside', //slider表示有滑动块的，inside表示内置的
show: false,
xAxisIndex: 0,
},
],
})
}
}, },
{ {
immediate: true, immediate: true,
}, },
); )
</script> </script>
<style scoped></style> <style scoped></style>

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

@ -1,16 +1,81 @@
<template> <template>
<PageWrapper> <PageWrapper>
<a-card> <Card>
<BasicForm <Form ref="formRef" :model="formState">
autoFocusFirstItem <Row :gutter="[16, 16]">
:labelWidth="0" <Col
:schemas="schemas" :xs="{ span: 24 }"
:rowProps="{ gutter: [16, 0] }" :sm="{ span: 12 }"
:showActionButtonGroup="false" :md="{ span: 8 }"
/> :lg="{ span: 6 }"
:xl="{ span: 6 }"
:xxl="{ span: 4 }"
>
<FormItem label="基地">
<Select
@select="onChange('base_id')"
:fieldNames="{ label: 'name', value: 'id' }"
:options="baseDate"
v-model:value="formState.base_id"
placeholder="请选择基地"
></Select>
</FormItem>
</Col>
<Col
:xs="{ span: 24 }"
:sm="{ span: 12 }"
:md="{ span: 8 }"
:lg="{ span: 6 }"
:xl="{ span: 6 }"
:xxl="{ span: 4 }"
>
<FormItem label="检测点">
<Select
@select="onChange('')"
placeholder="请选择检测点"
:options="pointDate"
v-model:value="formState.device_id"
></Select>
</FormItem>
</Col>
<Col
:xs="{ span: 24 }"
:sm="{ span: 12 }"
:md="{ span: 8 }"
:lg="{ span: 6 }"
:xl="{ span: 6 }"
:xxl="{ span: 4 }"
>
<FormItem label="日期">
<RangePicker @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>
<!-- -->
<div class="flex justify-between"> <div class="flex justify-between">
<span class="text-xl">预警数据统计</span> <span class="text-xl">预警数据统计</span>
<a-button @click="handleSetting">设置</a-button> <Button @click="handleSetting">设置</Button>
</div> </div>
<div class="mt-20px flex"> <div class="mt-20px flex">
<EarlyWarningItem <EarlyWarningItem
@ -26,7 +91,7 @@
:key="item.value" :key="item.value"
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer" class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
:class="{ active: item.value == activeKey }" :class="{ active: item.value == activeKey }"
@click="onChangeTag(item)" @click="onChangeTag(item.value)"
> >
<img <img
class="w-16px h-16px" class="w-16px h-16px"
@ -37,225 +102,222 @@
</div> </div>
</div> </div>
<div class="mt-20px"> <div class="mt-20px">
<LineCharts :loading="false" :title="currentActiveLable" /> <LineCharts
:company="formState.time_interval"
:extra="extra"
:loading="false"
:title="currentActiveLable"
:data="chartData"
/>
</div> </div>
</a-card> </Card>
<FormDrawer @register="registerDrawer" @success="handleSuccess" /> <FormDrawer @register="registerDrawer" @success="handleSuccess" />
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'; import dayjs from 'dayjs'
import { defineComponent, ref, computed } from 'vue'; import { formatDataByObject, getWeek, getMonth } from '/@/utils/index'
import { BasicForm, FormSchema } from '/@/components/Form/index'; import { PageWrapper } from '/@/components/Page'
import { Card, Button } from 'ant-design-vue'; import { ref, reactive, onMounted, computed } from 'vue'
import { ColEx } from '/@/components/Form/src/types'; import EarlyWarningItem from './components/EarlyWarningItem.vue'
import EarlyWarningItem from './components/EarlyWarningItem.vue'; import icon1 from '/@/assets/images/icon_1.png'
import icon1 from '/@/assets/images/icon_1.png'; import uicon1 from '/@/assets/images/uicon_1.png'
import uicon1 from '/@/assets/images/uicon_1.png'; import LineCharts from './components/LineCharts.vue'
import LineCharts from './components/LineCharts.vue'; import FormDrawer from './components/FormDrawer.vue'
import FormDrawer from './components/FormDrawer.vue'; import { useDrawer } from '/@/components/Drawer'
import { useDrawer } from '/@/components/Drawer';
const valueSelectA = ref<string[]>([]);
import {
getGriculturalDeviceBasic,
getaGriculturalDevicePoint,
getAmonitoringData,
getDeviceWarningNums,
} from '/@/api/sys/user'
import {
Card,
Form,
FormItem,
Select,
Row,
Col,
RadioGroup,
RadioButton,
RangePicker,
Button,
message,
} from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
const [registerDrawer, { openDrawer }] = useDrawer()
const formRef = ref<FormInstance>()
const formState = reactive({
base_id: undefined, //基地
device_id: undefined, //监控点
time: undefined, //时间
time_interval: 'day',
})
const baseDate = ref([])
const pointDate = ref<any>([])
const statisData = ref<any>({})
// 预警数量
const earlyNums = ref<any>({})
// 选中
const activeKey = ref('conductivity')
interface EarlyWarningItem { interface EarlyWarningItem {
icon: String; icon: String
title: String; title: String
value: String; value: String | Number
} }
const earlyWarningList = computed(() => {
const colProps: Partial<ColEx> = { const arr: EarlyWarningItem[] = [
xs: 24, {
sm: 12, icon: 'yujing1',
md: 8, title: 'Ⅰ级预警',
lg: 6, value: '',
xl: 6,
xxl: 4,
};
const schemas: FormSchema[] = [
{
field: 'field1',
component: 'Select',
label: '',
colProps,
componentProps: {
placeholder: '基地',
options: [
{
label: '选项2',
value: '1',
key: '1',
},
],
onChange: (e: any) => {
console.log(e);
},
}, },
}, {
{ icon: 'yujing2',
field: 'field1', title: 'Ⅱ级预警',
component: 'Select', value: '',
label: '',
colProps,
componentProps: {
placeholder: '检测点',
options: [
{
label: '选项2',
value: '1',
key: '1',
},
],
onChange: (e: any) => {
console.log(e);
},
}, },
}, {
{ icon: 'yujing3',
field: 'time', title: 'Ⅲ级预警',
component: 'RangePicker', value: '',
label: '',
colProps,
componentProps: {
placeholder: ['开始日期', '结束日期'],
}, },
}, {
{ icon: 'yujing4',
field: 'disclosure', title: 'Ⅳ级预警',
component: 'RadioButtonGroup', value: '',
label: '',
colProps: colProps,
componentProps: {
options: [
{
label: '今天',
value: '1',
},
{
label: '近一周',
value: '2',
},
{
label: '近一个月',
value: '3',
},
],
}, },
}, ]
]; Object.values(earlyNums.value).forEach((v: number | string, index: number) => {
arr[index].value = v
const earlyWarningList: EarlyWarningItem[] = [ })
{ return arr
icon: 'yujing1', })
title: 'Ⅰ级预警', const currentActiveLable = computed(
value: '1', () => tagMenus.find((e) => e.value === activeKey.value)?.lable ?? '',
}, )
{ const chartData = computed(() => statisData.value[activeKey.value])
icon: 'yujing2', const extra = computed(() => {
title: 'Ⅱ级预警', const name1 = baseDate.value?.find((e: any) => e.id === formState.base_id)?.name
value: '1', const name2 = pointDate.value?.find((e: any) => e.value === formState.device_id)?.label ?? ''
}, return name1 + '-' + name2
{ })
icon: 'yujing3',
title: 'Ⅲ级预警',
value: '1',
},
{
icon: 'yujing4',
title: 'Ⅳ级预警',
value: '100',
},
];
const tagMenus = [ const tagMenus = [
{
lable: '温度',
value: 0,
icon: icon1,
icon1: uicon1,
},
{ {
lable: '电导率', lable: '电导率',
value: 1, value: 'conductivity',
icon: icon1, icon: icon1,
icon1: uicon1, icon1: uicon1,
}, },
{ {
lable: '水分', lable: '湿度',
value: 2, value: 'humidity',
icon: icon1,
icon1: uicon1,
},
{
lable: '温度',
value: 'temperature',
icon: icon1, icon: icon1,
icon1: uicon1, icon1: uicon1,
}, },
{ {
lable: '氮', lable: '氮',
value: 3, value: 'k',
icon: icon1, icon: icon1,
icon1: uicon1, icon1: uicon1,
}, },
{ {
lable: '磷', lable: '磷',
value: 4, value: 'n',
icon: icon1, icon: icon1,
icon1: uicon1, icon1: uicon1,
}, },
{ {
lable: '钾', lable: '钾',
value: 5, value: 'p',
icon: icon1, icon: icon1,
icon1: uicon1, icon1: uicon1,
}, },
]; ]
export default defineComponent({ // 获取基地数据
components: { const getBase = async () => {
[Card.name]: Card, const res = await getGriculturalDeviceBasic({ device_type: 2 })
[Button.name]: Button, baseDate.value = res
BasicForm, if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
PageWrapper, getPoint()
EarlyWarningItem, }
LineCharts, // 获取监控点数据
FormDrawer, const getPoint = async () => {
}, 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()
}
setup() { const handleSetting = () => {
const activeKey = ref(1); openDrawer(true, {
isUpdate: false,
const [registerDrawer, { openDrawer }] = useDrawer(); })
}
const currentActiveLable = computed( const handleSuccess = () => {
() => tagMenus.find((e) => e.value == activeKey.value)?.lable ?? '', message.success('操作成功')
); }
//
function onChangeTag(item) { const onChangeTag = (e: string) => {
activeKey.value = item.value; activeKey.value = e
} }
onMounted(() => {
function handleSetting() { getBase()
openDrawer(true, { })
isUpdate: false,
});
}
function handleSuccess() {
// reload();
console.log('=========');
}
return {
activeKey,
valueSelectA,
schemas,
earlyWarningList,
tagMenus,
currentActiveLable,
registerDrawer,
onChangeTag,
handleSetting,
handleSuccess,
};
},
});
</script> </script>
<style scoped lang="less"> <style scoped lang="less">