new-map
parent
9d827c537f
commit
af4881a149
|
|
@ -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:删除农作物产量
|
||||
*/
|
||||
|
|
@ -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,
|
||||
},
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import type { App, Plugin } from 'vue'
|
|||
|
||||
import { unref } from 'vue'
|
||||
import { isObject } from '/@/utils/is'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export const noop = () => {}
|
||||
|
||||
|
|
@ -90,7 +91,7 @@ export const withInstall = <T>(component: T, alias?: string) => {
|
|||
}
|
||||
return component as T & Plugin
|
||||
}
|
||||
export function formatDataByObject(obj) {
|
||||
export function formatDataByObject(obj: any) {
|
||||
const arr: any[] = []
|
||||
Object.keys(obj).forEach((e) => {
|
||||
arr.push({
|
||||
|
|
@ -133,3 +134,33 @@ export function getTreeData(
|
|||
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
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 { useDrawer } from '/@/components/Drawer'
|
||||
import DeviceDrawer from './DeviceDrawer.vue'
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">空气湿度</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</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'
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
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.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,18 +67,31 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">空气温度</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import echarts from '/@/utils/lib/echarts';
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
width: {
|
||||
|
|
@ -23,15 +24,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -44,7 +47,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -65,11 +68,14 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
data: Object.values(e).map((e) => {
|
||||
if (!!e) return e
|
||||
return 0
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -88,12 +94,22 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside', //slider表示有滑动块的，inside表示内置的
|
||||
show: false,
|
||||
xAxisIndex: 0,
|
||||
start: 50,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -3,15 +3,16 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">光照强度</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
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: {
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,43 +67,33 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
type: 'scatter',
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[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],
|
||||
],
|
||||
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,
|
||||
},
|
||||
);
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,16 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">噪声</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
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: {
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,22 +67,35 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,16 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">PM10</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
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: {
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,22 +67,35 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<Card :loading="loading">
|
||||
<template #title>
|
||||
<div class="text-18px font-extrabold">大气压</div>
|
||||
<div class="text-18px font-extrabold">PM25</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
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: {
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,22 +67,35 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<Card :loading="loading">
|
||||
<template #title>
|
||||
<div class="text-18px font-extrabold">大气压</div>
|
||||
<div class="text-18px font-extrabold">风力</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
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: {
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,22 +67,35 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,16 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">降雨量</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
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: {
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,43 +67,33 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
type: 'scatter',
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[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],
|
||||
],
|
||||
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,
|
||||
},
|
||||
);
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,16 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">风向</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
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: {
|
||||
|
|
@ -22,15 +23,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -43,7 +46,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -64,43 +67,33 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
type: 'scatter',
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[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],
|
||||
],
|
||||
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,
|
||||
},
|
||||
);
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">风速</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import echarts from '/@/utils/lib/echarts';
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
width: {
|
||||
|
|
@ -23,15 +24,17 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -44,7 +47,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format('YYYY-MM-DD HH:mm')),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -69,7 +72,10 @@
|
|||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
data: Object.values(e).map((e) => {
|
||||
if (!!e) return e
|
||||
return 0
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -88,12 +94,22 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside', //slider表示有滑动块的，inside表示内置的
|
||||
show: false,
|
||||
xAxisIndex: 0,
|
||||
start: 50,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
>
|
||||
<FormItem label="基地">
|
||||
<Select
|
||||
@select="onChange('base_id')"
|
||||
:fieldNames="{ label: 'name', value: 'id' }"
|
||||
:options="baseDate"
|
||||
v-model:value="formState.base_id"
|
||||
|
|
@ -29,7 +30,12 @@
|
|||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem label="检测点">
|
||||
<Select v-model:value="formState.device_id"></Select>
|
||||
<Select
|
||||
@select="onChange('')"
|
||||
placeholder="请选择检测点"
|
||||
:options="pointDate"
|
||||
v-model:value="formState.device_id"
|
||||
></Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
|
|
@ -41,7 +47,7 @@
|
|||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem label="日期">
|
||||
<RangePicker v-model:value="formState.time"></RangePicker>
|
||||
<RangePicker @change="onChange('time')" v-model:value="formState.time"></RangePicker>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
|
|
@ -53,10 +59,14 @@
|
|||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem>
|
||||
<RadioGroup button-style="solid" v-model:value="formState.time_interval">
|
||||
<RadioButton value="a">今天</RadioButton>
|
||||
<RadioButton value="B">近一周</RadioButton>
|
||||
<RadioButton value="C">近一个月</RadioButton>
|
||||
<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>
|
||||
|
|
@ -70,24 +80,93 @@
|
|||
:showActionButtonGroup="false"
|
||||
/> -->
|
||||
<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" />
|
||||
<LightIntensity class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
|
||||
<Rainfall class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
|
||||
<WindSpeed class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
|
||||
<Pressure class="md:w-386px w-full !mr-4 !mb-4" :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" />
|
||||
<PM25 class="md:w-386px w-full !mr-4 !mb-4" :loading="false" />
|
||||
<!-- 空气温度 -->
|
||||
<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 } from 'vue'
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import {
|
||||
Card,
|
||||
Form,
|
||||
|
|
@ -108,23 +187,30 @@
|
|||
import Pressure from './components/Pressure.vue'
|
||||
import WindDirection from './components/WindDirection.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 { 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 formState = reactive({
|
||||
base_id: undefined, //基地
|
||||
device_id: undefined, //监控点
|
||||
checkNick: false,
|
||||
time: undefined, //时间
|
||||
time_interval: '',
|
||||
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
|
||||
formState.base_id = res?.[0]?.id ?? undefined
|
||||
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
|
||||
getPoint()
|
||||
}
|
||||
// 获取监控到数据
|
||||
|
|
@ -133,7 +219,41 @@
|
|||
device_type: 4,
|
||||
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(() => {
|
||||
getBase()
|
||||
|
|
|
|||
|
|
@ -3,59 +3,101 @@
|
|||
v-bind="$attrs"
|
||||
@register="registerDrawer"
|
||||
showFooter
|
||||
:title="getTitle"
|
||||
title="设置"
|
||||
width="500px"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<a-form>
|
||||
<div class="text-20px font-medium">温度</div>
|
||||
<div class="mt-30px flex">
|
||||
<div class="w-90px leading-32px">Ⅰ级预警：</div>
|
||||
<div v-for="(item, index) in Title" :key="index" class="mt-10px">
|
||||
<div class="text-20px font-semibold">{{ enumName[item] }}</div>
|
||||
<div class="mt-30px flex" v-for="(item1, index1) in setFormat(item)" :key="index1">
|
||||
<div class="w-90px leading-42px">{{ enumName1[item1] }}：</div>
|
||||
<div>
|
||||
<div class="flex w-full items-center" v-for="item in 3" :key="item">
|
||||
<a-form-item>
|
||||
<a-input suffix="℃" />
|
||||
</a-form-item>
|
||||
<div class="mb-24px px-10px">-</div>
|
||||
<a-form-item>
|
||||
<a-input suffix="℃" />
|
||||
</a-form-item>
|
||||
<div
|
||||
class="flex w-full items-center mt-10px"
|
||||
v-for="(item2, index2) in roulsDate.value[item][item1]"
|
||||
:key="index2"
|
||||
>
|
||||
<Input
|
||||
type="number"
|
||||
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>
|
||||
</a-form>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, unref } from 'vue';
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
import { Form, Input } from 'ant-design-vue';
|
||||
<script lang="ts" setup>
|
||||
import { getDeviceWarningRules } from '/@/api/sys/user'
|
||||
import { ref, computed } from '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({
|
||||
components: {
|
||||
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 res = await getDeviceWarningRules({})
|
||||
roulsDate.value = res.find((e) => e.slug === 'device_warning_rule_soil')
|
||||
})
|
||||
|
||||
const getTitle = '设置';
|
||||
|
||||
async function handleSubmit() {}
|
||||
|
||||
return {
|
||||
getTitle,
|
||||
registerDrawer,
|
||||
handleSubmit,
|
||||
};
|
||||
},
|
||||
});
|
||||
const handleSubmit = async () => {
|
||||
if (!roulsDate.value) return
|
||||
try {
|
||||
const params = {
|
||||
slug: roulsDate.value.slug,
|
||||
value: roulsDate.value.value,
|
||||
}
|
||||
console.log(params)
|
||||
const res = await editDeviceWarningRules(params)
|
||||
console.log(res)
|
||||
closeDrawer()
|
||||
emits('success')
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
<template #title>
|
||||
<div class="text-18px font-extrabold">{{ title }}</div>
|
||||
</template>
|
||||
<template #extra>普润镇桔博园-设备间旁边</template>
|
||||
<template #extra></template>
|
||||
<div ref="chartRef" :style="{ width, height }"></div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import echarts from '/@/utils/lib/echarts';
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
title: {
|
||||
|
|
@ -27,15 +28,22 @@
|
|||
type: String as PropType<string>,
|
||||
default: '300px',
|
||||
},
|
||||
});
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
||||
data: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
company: {
|
||||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -48,7 +56,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -73,7 +81,10 @@
|
|||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: [11, 22, 40, 18, 3, 55, 66, 33, 14, 30, 66, 44, 22, 11, 40, 20, 50, 33, 22, 11],
|
||||
data: Object.values(e).map((e) => {
|
||||
if (!!e) return e
|
||||
return 0
|
||||
}),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -92,12 +103,20 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside', //slider表示有滑动块的，inside表示内置的
|
||||
show: false,
|
||||
xAxisIndex: 0,
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,81 @@
|
|||
<template>
|
||||
<PageWrapper>
|
||||
<a-card>
|
||||
<BasicForm
|
||||
autoFocusFirstItem
|
||||
:labelWidth="0"
|
||||
:schemas="schemas"
|
||||
:rowProps="{ gutter: [16, 0] }"
|
||||
:showActionButtonGroup="false"
|
||||
/>
|
||||
<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 @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">
|
||||
<span class="text-xl">预警数据统计</span>
|
||||
<a-button @click="handleSetting">设置</a-button>
|
||||
<Button @click="handleSetting">设置</Button>
|
||||
</div>
|
||||
<div class="mt-20px flex">
|
||||
<EarlyWarningItem
|
||||
|
|
@ -26,7 +91,7 @@
|
|||
: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)"
|
||||
@click="onChangeTag(item.value)"
|
||||
>
|
||||
<img
|
||||
class="w-16px h-16px"
|
||||
|
|
@ -37,225 +102,222 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<LineCharts :loading="false" :title="currentActiveLable" />
|
||||
<LineCharts
|
||||
:company="formState.time_interval"
|
||||
:extra="extra"
|
||||
:loading="false"
|
||||
:title="currentActiveLable"
|
||||
:data="chartData"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</Card>
|
||||
<FormDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
import { BasicForm, FormSchema } from '/@/components/Form/index';
|
||||
import { Card, Button } from 'ant-design-vue';
|
||||
import { ColEx } from '/@/components/Form/src/types';
|
||||
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';
|
||||
const valueSelectA = ref<string[]>([]);
|
||||
<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,
|
||||
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 {
|
||||
icon: String;
|
||||
title: String;
|
||||
value: String;
|
||||
icon: String
|
||||
title: String
|
||||
value: String | Number
|
||||
}
|
||||
|
||||
const colProps: Partial<ColEx> = {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
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);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'field1',
|
||||
component: 'Select',
|
||||
label: '',
|
||||
colProps,
|
||||
componentProps: {
|
||||
placeholder: '检测点',
|
||||
options: [
|
||||
{
|
||||
label: '选项2',
|
||||
value: '1',
|
||||
key: '1',
|
||||
},
|
||||
],
|
||||
onChange: (e: any) => {
|
||||
console.log(e);
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'time',
|
||||
component: 'RangePicker',
|
||||
label: '',
|
||||
colProps,
|
||||
componentProps: {
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'disclosure',
|
||||
component: 'RadioButtonGroup',
|
||||
label: '',
|
||||
colProps: colProps,
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '今天',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '近一周',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '近一个月',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const earlyWarningList: EarlyWarningItem[] = [
|
||||
const earlyWarningList = computed(() => {
|
||||
const arr: EarlyWarningItem[] = [
|
||||
{
|
||||
icon: 'yujing1',
|
||||
title: 'Ⅰ级预警',
|
||||
value: '1',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing2',
|
||||
title: 'Ⅱ级预警',
|
||||
value: '1',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing3',
|
||||
title: 'Ⅲ级预警',
|
||||
value: '1',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing4',
|
||||
title: 'Ⅳ级预警',
|
||||
value: '100',
|
||||
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: 0,
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '电导率',
|
||||
value: 1,
|
||||
value: 'conductivity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '水分',
|
||||
value: 2,
|
||||
lable: '湿度',
|
||||
value: 'humidity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '温度',
|
||||
value: 'temperature',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '氮',
|
||||
value: 3,
|
||||
value: 'k',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '磷',
|
||||
value: 4,
|
||||
value: 'n',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '钾',
|
||||
value: 5,
|
||||
value: 'p',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Card.name]: Card,
|
||||
[Button.name]: Button,
|
||||
BasicForm,
|
||||
PageWrapper,
|
||||
EarlyWarningItem,
|
||||
LineCharts,
|
||||
FormDrawer,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const activeKey = ref(1);
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
|
||||
const currentActiveLable = computed(
|
||||
() => tagMenus.find((e) => e.value == activeKey.value)?.lable ?? '',
|
||||
);
|
||||
|
||||
function onChangeTag(item) {
|
||||
activeKey.value = item.value;
|
||||
// 获取基地数据
|
||||
const getBase = async () => {
|
||||
const res = await getGriculturalDeviceBasic({ device_type: 2 })
|
||||
baseDate.value = res
|
||||
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
|
||||
getPoint()
|
||||
}
|
||||
// 获取监控点数据
|
||||
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()
|
||||
}
|
||||
|
||||
function handleSetting() {
|
||||
const handleSetting = () => {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
// reload();
|
||||
console.log('=========');
|
||||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
}
|
||||
|
||||
return {
|
||||
activeKey,
|
||||
valueSelectA,
|
||||
schemas,
|
||||
earlyWarningList,
|
||||
tagMenus,
|
||||
currentActiveLable,
|
||||
registerDrawer,
|
||||
onChangeTag,
|
||||
handleSetting,
|
||||
handleSuccess,
|
||||
};
|
||||
},
|
||||
});
|
||||
//
|
||||
const onChangeTag = (e: string) => {
|
||||
activeKey.value = e
|
||||
}
|
||||
onMounted(() => {
|
||||
getBase()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
Loading…
Reference in New Issue