Merge branch 'temp' of https://gitea.peidikeji.cn/zhouhui/lcny-vue3-antd-admin into temp
commit
164722ed2d
|
|
@ -135,32 +135,46 @@ export function getTreeData(
|
|||
return arr
|
||||
}
|
||||
|
||||
// 获取近一周的时间
|
||||
// 获取近7的时间
|
||||
export function getWeek() {
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth()
|
||||
const day = date.getDate()
|
||||
const week = date.getDay()
|
||||
//开始时间
|
||||
let WeekStartDate = dayjs(new Date(year, month, day - week + 1)).format('YYYY-MM-DD')
|
||||
// 结束时间
|
||||
let WeekEndDate = dayjs(new Date()).format('YYYY-MM-DD')
|
||||
let toData = new Date(new Date().toLocaleDateString()).getTime()
|
||||
//今天
|
||||
let todayStart = toData
|
||||
//昨天
|
||||
let yesterdayStart = toData - 3600 * 24 * 1000
|
||||
let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
|
||||
//最近7天
|
||||
let past7daysStart = todayStart - 7 * 3600 * 24 * 1000
|
||||
// const date = new Date()
|
||||
// const year = date.getFullYear()
|
||||
// const month = date.getMonth()
|
||||
// const day = date.getDate()
|
||||
// const week = date.getDay()
|
||||
// //开始时间
|
||||
// let WeekStartDate = dayjs(new Date(year, month, day - week + 1)).format('YYYY-MM-DD')
|
||||
// // 结束时间
|
||||
// let WeekEndDate = dayjs(new Date()).format('YYYY-MM-DD')
|
||||
return {
|
||||
WeekStartDate,
|
||||
WeekEndDate,
|
||||
WeekStartDate: dayjs(past7daysStart).format('YYYY-MM-DD'),
|
||||
WeekEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
|
||||
}
|
||||
}
|
||||
|
||||
// 获取近一月的数据
|
||||
export function getMonth() {
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth()
|
||||
let MonthStartDate = dayjs(new Date(year, month, 1)).format('YYYY-MM-DD')
|
||||
let MonthEndDate = dayjs(new Date()).format('YYYY-MM-DD')
|
||||
let toData = new Date(new Date().toLocaleDateString()).getTime()
|
||||
//昨天
|
||||
let yesterdayStart = toData - 3600 * 24 * 1000
|
||||
let yesterdayEnd = yesterdayStart + 24 * 60 * 60 * 1000 - 1
|
||||
//最近30天
|
||||
let past30daysStart = toData - 30 * 3600 * 24 * 1000
|
||||
// const date = new Date()
|
||||
// const year = date.getFullYear()
|
||||
// const month = date.getMonth()
|
||||
// let MonthStartDate = dayjs(new Date(year, month, 1)).format('YYYY-MM-DD')
|
||||
// let MonthEndDate = dayjs(new Date()).format('YYYY-MM-DD')
|
||||
return {
|
||||
MonthStartDate,
|
||||
MonthEndDate,
|
||||
MonthStartDate: dayjs(past30daysStart).format('YYYY-MM-DD'),
|
||||
MonthEndDate: dayjs(yesterdayEnd).format('YYYY-MM-DD'),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,14 +84,11 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: Object.values(e).map((e) => {
|
||||
if (!!e) return e
|
||||
return 0
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
const props = defineProps({
|
||||
|
|
@ -32,6 +32,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -39,7 +52,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -52,7 +64,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -73,14 +85,11 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: Object.values(e).map((e) => {
|
||||
if (!!e) return e
|
||||
return 0
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,13 +84,10 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,15 +84,12 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
type: 'scatter',
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,13 +84,10 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,13 +84,10 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,13 +84,10 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,13 +84,10 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,15 +84,12 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
type: 'scatter',
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
|
|
@ -31,6 +31,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -38,7 +51,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -51,7 +63,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -72,15 +84,12 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '5%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
symbolSize: 20,
|
||||
type: 'scatter',
|
||||
data: Object.values(e).map((e) => {
|
||||
if (e === 0) return null
|
||||
return e
|
||||
}),
|
||||
data: Object.values(e),
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
const props = defineProps({
|
||||
|
|
@ -32,6 +32,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -39,7 +52,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -52,7 +64,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -73,14 +85,11 @@
|
|||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
grid: { left: '2%', right: '4%', top: '2 %', bottom: 0, containLabel: true },
|
||||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: Object.values(e).map((e) => {
|
||||
if (!!e) return e
|
||||
return 0
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<FormItem label="日期">
|
||||
<RangePicker
|
||||
:disabledDate="disabledDate"
|
||||
@change="onChange('time')"
|
||||
@change="onChangTime"
|
||||
v-model:value="formState.time"
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -82,96 +82,114 @@
|
|||
:rowProps="{ gutter: [16, 0] }"
|
||||
:showActionButtonGroup="false"
|
||||
/> -->
|
||||
<div class="md:flex enter-y flex-wrap -mr-4">
|
||||
<!-- 空气温度 -->
|
||||
<AirTemperature
|
||||
:data="statisData.air_temperature"
|
||||
:extra="name"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 空气湿度 -->
|
||||
<AirHumidity
|
||||
:extra="name"
|
||||
:data="statisData.air_humidity"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 光照强度 -->
|
||||
<LightIntensity
|
||||
:extra="name"
|
||||
:data="statisData.illumination"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 降雨量 -->
|
||||
<Rainfall
|
||||
:extra="name"
|
||||
:data="statisData.daily_rainfall"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风速 -->
|
||||
<WindSpeed
|
||||
:extra="name"
|
||||
:data="statisData.wind_speed"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风力 -->
|
||||
<Pressure
|
||||
:extra="name"
|
||||
:data="statisData.wind_degree"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风向 -->
|
||||
<WindDirection
|
||||
:extra="name"
|
||||
:data="statisData.wind_direction"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 噪声 -->
|
||||
<Noise
|
||||
:extra="name"
|
||||
:data="statisData.noise"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- PM10 -->
|
||||
<PM10
|
||||
:extra="name"
|
||||
:data="statisData.pm10"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- PM25 -->
|
||||
<PM25
|
||||
:extra="name"
|
||||
:data="statisData.pm25"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- CO2 -->
|
||||
<CO2
|
||||
:extra="name"
|
||||
:data="statisData.co2"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="baseDate.length === 0">
|
||||
<div class="h-500px flex items-center justify-center flex-col">
|
||||
<Empty></Empty>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="md:flex enter-y flex-wrap -mr-4">
|
||||
<!-- 空气温度 -->
|
||||
<AirTemperature
|
||||
:data="statisData.air_temperature"
|
||||
:extra="name"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 空气湿度 -->
|
||||
<AirHumidity
|
||||
:extra="name"
|
||||
:data="statisData.air_humidity"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 光照强度 -->
|
||||
<LightIntensity
|
||||
:extra="name"
|
||||
:data="statisData.illumination"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 降雨量 -->
|
||||
<Rainfall
|
||||
:extra="name"
|
||||
:time="formState.time"
|
||||
:data="statisData.daily_rainfall"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风速 -->
|
||||
<WindSpeed
|
||||
:extra="name"
|
||||
:data="statisData.wind_speed"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风力 -->
|
||||
<Pressure
|
||||
:extra="name"
|
||||
:data="statisData.wind_degree"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风向 -->
|
||||
<WindDirection
|
||||
:extra="name"
|
||||
:data="statisData.wind_direction"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 噪声 -->
|
||||
<Noise
|
||||
:extra="name"
|
||||
:data="statisData.noise"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- PM10 -->
|
||||
<PM10
|
||||
:extra="name"
|
||||
:data="statisData.pm10"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- PM25 -->
|
||||
<PM25
|
||||
:extra="name"
|
||||
:data="statisData.pm25"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- CO2 -->
|
||||
<CO2
|
||||
:extra="name"
|
||||
:data="statisData.co2"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
|
@ -181,7 +199,7 @@
|
|||
import dayjs from 'dayjs'
|
||||
import { PageWrapper } from '/@/components/Page'
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker } from 'ant-design-vue'
|
||||
import { Card, Form, FormItem, Select, Row, Col, Radio, RangePicker, Empty } from 'ant-design-vue'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
import AirTemperature from './components/AirTemperature.vue'
|
||||
import AirHumidity from './components/AirHumidity.vue'
|
||||
|
|
@ -219,12 +237,14 @@
|
|||
// 获取基地数据
|
||||
const getBase = async () => {
|
||||
const res = await getGriculturalDeviceBasic({ device_type: 4 })
|
||||
if (res.length == 0) return
|
||||
baseDate.value = res
|
||||
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
|
||||
getPoint()
|
||||
}
|
||||
// 获取监控到数据
|
||||
const getPoint = async () => {
|
||||
if (baseDate.value.length == 0) return
|
||||
const res = await getaGriculturalDevicePoint({
|
||||
device_type: 4,
|
||||
agricultural_basic: formState.base_id,
|
||||
|
|
@ -265,6 +285,11 @@
|
|||
if (e === 'time_interval') formState.time = undefined
|
||||
getPoint()
|
||||
}
|
||||
const onChangTime = (e) => {
|
||||
if (e === null) formState.time_interval = 'day'
|
||||
else formState.time_interval = ''
|
||||
getPoint()
|
||||
}
|
||||
onMounted(() => {
|
||||
getBase()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<script lang="ts" setup>
|
||||
import dayjs from 'dayjs'
|
||||
import { Card } from 'ant-design-vue'
|
||||
import { Ref, ref, watch } from 'vue'
|
||||
import { Ref, ref, watch, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
const props = defineProps({
|
||||
|
|
@ -36,6 +36,19 @@
|
|||
type: String as PropType<string>,
|
||||
default: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
|
|
@ -43,7 +56,6 @@
|
|||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
const format = props.company === 'day' ? 'HH:mm' : 'YYYY-MM-DD'
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -56,7 +68,7 @@
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format)),
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -81,10 +93,7 @@
|
|||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
data: Object.values(e).map((e) => {
|
||||
if (!!e) return e
|
||||
return 0
|
||||
}),
|
||||
data: Object.values(e),
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
:options="baseDate"
|
||||
v-model:value="formState.base_id"
|
||||
placeholder="请选择基地"
|
||||
/>
|
||||
></Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
|
|
@ -31,11 +31,11 @@
|
|||
>
|
||||
<FormItem label="检测点">
|
||||
<Select
|
||||
@select="onChange('')"
|
||||
@select="onChange('device_id')"
|
||||
placeholder="请选择检测点"
|
||||
:options="pointDate"
|
||||
v-model:value="formState.device_id"
|
||||
/>
|
||||
></Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
|
|
@ -47,7 +47,11 @@
|
|||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem label="日期">
|
||||
<RangePicker @change="onChange('time')" v-model:value="formState.time" />
|
||||
<RangePicker
|
||||
:disabledDate="disabledDate"
|
||||
@change="onChangTime"
|
||||
v-model:value="formState.time"
|
||||
></RangePicker>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
|
|
@ -72,44 +76,52 @@
|
|||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
<!-- -->
|
||||
<div class="flex justify-between">
|
||||
<span class="text-xl">预警数据统计</span>
|
||||
<Button @click="handleSetting">设置</Button>
|
||||
</div>
|
||||
<div class="mt-20px flex">
|
||||
<EarlyWarningItem
|
||||
class="mr-16px last:mr-0"
|
||||
v-for="(item, index) in earlyWarningList"
|
||||
:key="index"
|
||||
:data="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
v-for="item in tagMenus"
|
||||
:key="item.value"
|
||||
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
|
||||
:class="{ active: item.value == activeKey }"
|
||||
@click="onChangeTag(item.value)"
|
||||
>
|
||||
<img
|
||||
class="w-16px h-16px"
|
||||
:src="item.value == activeKey ? item.icon : item.icon1"
|
||||
alt=""
|
||||
/>
|
||||
<div class="ml-3px">{{ item.lable }}</div>
|
||||
<template v-if="baseDate.length === 0">
|
||||
<div class="h-500px flex items-center justify-center flex-col">
|
||||
<Empty></Empty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<LineCharts
|
||||
:company="formState.time_interval"
|
||||
:extra="extra"
|
||||
:loading="false"
|
||||
:title="currentActiveLable"
|
||||
:data="chartData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- -->
|
||||
<template v-else>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-xl">预警数据统计</span>
|
||||
<Button @click="handleSetting">设置</Button>
|
||||
</div>
|
||||
<div class="mt-20px flex">
|
||||
<EarlyWarningItem
|
||||
class="mr-16px last:mr-0"
|
||||
v-for="(item, index) in earlyWarningList"
|
||||
:key="index"
|
||||
:data="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
v-for="item in tagMenus"
|
||||
:key="item.value"
|
||||
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
|
||||
:class="{ active: item.value == activeKey }"
|
||||
@click="onChangeTag(item.value)"
|
||||
>
|
||||
<img
|
||||
class="w-16px h-16px"
|
||||
:src="item.value == activeKey ? item.icon : item.icon1"
|
||||
alt=""
|
||||
/>
|
||||
<div class="ml-3px">{{ item.lable }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<LineCharts
|
||||
:company="formState.time_interval"
|
||||
:extra="extra"
|
||||
:loading="false"
|
||||
:title="currentActiveLable"
|
||||
:data="chartData"
|
||||
:time="formState.time"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<FormDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
|
|
@ -144,9 +156,9 @@
|
|||
RangePicker,
|
||||
Button,
|
||||
message,
|
||||
Empty,
|
||||
} from 'ant-design-vue'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
|
||||
const RadioButton = Radio.Button
|
||||
const RadioGroup = Radio.Group
|
||||
|
||||
|
|
@ -246,15 +258,20 @@
|
|||
},
|
||||
]
|
||||
|
||||
const disabledDate = (current) => {
|
||||
return current && current > dayjs().endOf('day')
|
||||
}
|
||||
// 获取基地数据
|
||||
const getBase = async () => {
|
||||
const res = await getGriculturalDeviceBasic({ device_type: 2 })
|
||||
if (res.length == 0) return
|
||||
baseDate.value = res
|
||||
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
|
||||
getPoint()
|
||||
}
|
||||
// 获取监控点数据
|
||||
const getPoint = async () => {
|
||||
if (baseDate.value.length == 0) return
|
||||
const res = await getaGriculturalDevicePoint({
|
||||
device_type: 2,
|
||||
agricultural_basic: formState.base_id,
|
||||
|
|
@ -306,6 +323,12 @@
|
|||
getPoint()
|
||||
}
|
||||
|
||||
const onChangTime = (e) => {
|
||||
if (e === null) formState.time_interval = 'day'
|
||||
else formState.time_interval = ''
|
||||
getPoint()
|
||||
}
|
||||
|
||||
const handleSetting = () => {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
// import { Ref, ref, watch } from 'vue';
|
||||
import { SvgIcon } from '/@/components/Icon/index';
|
||||
import { SvgIcon } from '/@/components/Icon/index'
|
||||
defineProps({
|
||||
loading: Boolean,
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</a-form>
|
||||
</div>
|
||||
</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 = {
|
||||
chlorine: '氯',
|
||||
conductivity: '电导率',
|
||||
oxygen: '氧气',
|
||||
ph: 'PH',
|
||||
temperature: '温度',
|
||||
turbidity: '浊度',
|
||||
}
|
||||
const enumCompany = {
|
||||
temperature: '℃',
|
||||
conductivity: 'us/cm',
|
||||
turbidity: 'NTU',
|
||||
chlorine: 'mg/L',
|
||||
oxygen: 'mg/L',
|
||||
ph: '',
|
||||
}
|
||||
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_waterquality')
|
||||
})
|
||||
|
||||
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, computed } from 'vue'
|
||||
import { useECharts } from '/@/hooks/web/useECharts'
|
||||
import echarts from '/@/utils/lib/echarts'
|
||||
const props = defineProps({
|
||||
loading: Boolean,
|
||||
title: {
|
||||
|
|
@ -27,77 +28,104 @@
|
|||
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: '',
|
||||
},
|
||||
time: {
|
||||
type: Object as PropType<object>,
|
||||
default: () => {},
|
||||
},
|
||||
})
|
||||
const format = computed(() => {
|
||||
if (props.time) {
|
||||
const start_time = dayjs(props.time?.[0]).format('YYYY-MM-DD')
|
||||
const end_time = dayjs(props.time?.[1]).format('YYYY-MM-DD')
|
||||
if (start_time === end_time) return 'HH:mm'
|
||||
}
|
||||
if (props.company === 'day') return 'HH:mm'
|
||||
return 'YYYY-MM-DD'
|
||||
})
|
||||
const chartRef = ref<HTMLDivElement | null>(null)
|
||||
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
||||
watch(
|
||||
() => props.loading,
|
||||
() => {
|
||||
if (props.loading) {
|
||||
return;
|
||||
}
|
||||
setOptions({
|
||||
tooltip: {
|
||||
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: {
|
||||
() => props.data,
|
||||
(e) => {
|
||||
if (e) {
|
||||
setOptions({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', 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],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#d7f3f2',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ebf9f9',
|
||||
},
|
||||
]),
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Object.keys(e).map((e) => dayjs(e).format(format.value)),
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
axisLine: {
|
||||
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),
|
||||
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,
|
||||
},
|
||||
);
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,261 +1,348 @@
|
|||
<template>
|
||||
<PageWrapper>
|
||||
<a-card>
|
||||
<BasicForm
|
||||
autoFocusFirstItem
|
||||
:labelWidth="0"
|
||||
:schemas="schemas"
|
||||
:rowProps="{ gutter: [16, 0] }"
|
||||
:showActionButtonGroup="false"
|
||||
/>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-xl">预警数据统计</span>
|
||||
<a-button @click="handleSetting">设置</a-button>
|
||||
</div>
|
||||
<div class="mt-20px flex">
|
||||
<EarlyWarningItem
|
||||
class="mr-16px last:mr-0"
|
||||
v-for="(item, index) in earlyWarningList"
|
||||
:key="index"
|
||||
:data="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
v-for="item in tagMenus"
|
||||
:key="item.value"
|
||||
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
|
||||
:class="{ active: item.value == activeKey }"
|
||||
@click="onChangeTag(item)"
|
||||
>
|
||||
<img
|
||||
class="w-16px h-16px"
|
||||
:src="item.value == activeKey ? item.icon : item.icon1"
|
||||
alt=""
|
||||
/>
|
||||
<div class="ml-3px">{{ item.lable }}</div>
|
||||
<Card>
|
||||
<Form ref="formRef" :model="formState">
|
||||
<Row :gutter="[16, 16]">
|
||||
<Col
|
||||
:xs="{ span: 24 }"
|
||||
:sm="{ span: 12 }"
|
||||
:md="{ span: 8 }"
|
||||
:lg="{ span: 6 }"
|
||||
:xl="{ span: 6 }"
|
||||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem label="基地">
|
||||
<Select
|
||||
@select="onChange('base_id')"
|
||||
:fieldNames="{ label: 'name', value: 'id' }"
|
||||
:options="baseDate"
|
||||
v-model:value="formState.base_id"
|
||||
placeholder="请选择基地"
|
||||
></Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
:xs="{ span: 24 }"
|
||||
:sm="{ span: 12 }"
|
||||
:md="{ span: 8 }"
|
||||
:lg="{ span: 6 }"
|
||||
:xl="{ span: 6 }"
|
||||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem label="检测点">
|
||||
<Select
|
||||
@select="onChange('')"
|
||||
placeholder="请选择检测点"
|
||||
:options="pointDate"
|
||||
v-model:value="formState.device_id"
|
||||
></Select>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
:xs="{ span: 24 }"
|
||||
:sm="{ span: 12 }"
|
||||
:md="{ span: 8 }"
|
||||
:lg="{ span: 6 }"
|
||||
:xl="{ span: 6 }"
|
||||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem label="日期">
|
||||
<RangePicker
|
||||
:disabledDate="disabledDate"
|
||||
@change="onChangTime"
|
||||
v-model:value="formState.time"
|
||||
></RangePicker>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
:xs="{ span: 24 }"
|
||||
:sm="{ span: 12 }"
|
||||
:md="{ span: 8 }"
|
||||
:lg="{ span: 6 }"
|
||||
:xl="{ span: 6 }"
|
||||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem>
|
||||
<RadioGroup
|
||||
@change="onChange('time_interval')"
|
||||
button-style="solid"
|
||||
v-model:value="formState.time_interval"
|
||||
>
|
||||
<RadioButton value="day">今天</RadioButton>
|
||||
<RadioButton value="week">近一周</RadioButton>
|
||||
<RadioButton value="month">近一个月</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
<template v-if="baseDate.length === 0">
|
||||
<div class="h-500px flex items-center justify-center flex-col">
|
||||
<Empty></Empty>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<LineCharts :loading="false" :title="currentActiveLable" />
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
<!-- -->
|
||||
<template v-else>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-xl">预警数据统计</span>
|
||||
<Button @click="handleSetting">设置</Button>
|
||||
</div>
|
||||
<div class="mt-20px flex">
|
||||
<EarlyWarningItem
|
||||
class="mr-16px last:mr-0"
|
||||
v-for="(item, index) in earlyWarningList"
|
||||
:key="index"
|
||||
:data="item"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
v-for="item in tagMenus"
|
||||
:key="item.value"
|
||||
class="flex items-center mr-28px font-medium text-[#828fa2] mt-24px cursor-pointer"
|
||||
:class="{ active: item.value == activeKey }"
|
||||
@click="onChangeTag(item.value)"
|
||||
>
|
||||
<img
|
||||
class="w-16px h-16px"
|
||||
:src="item.value == activeKey ? item.icon : item.icon1"
|
||||
alt=""
|
||||
/>
|
||||
<div class="ml-3px">{{ item.lable }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<LineCharts
|
||||
:company="formState.time_interval"
|
||||
:extra="extra"
|
||||
:loading="false"
|
||||
:title="currentActiveLable"
|
||||
:data="chartData"
|
||||
:time="formState.time"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<FormDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
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,
|
||||
Radio,
|
||||
RangePicker,
|
||||
Button,
|
||||
message,
|
||||
Empty,
|
||||
} from 'ant-design-vue'
|
||||
import type { FormInstance } from 'ant-design-vue'
|
||||
const RadioButton = Radio.Button
|
||||
const RadioGroup = Radio.Group
|
||||
const [registerDrawer, { openDrawer }] = useDrawer()
|
||||
const formRef = ref<FormInstance>()
|
||||
const formState = reactive({
|
||||
base_id: undefined, //基地
|
||||
device_id: undefined, //监控点
|
||||
time: undefined, //时间
|
||||
time_interval: 'day',
|
||||
})
|
||||
const baseDate = ref([])
|
||||
const pointDate = ref<any>([])
|
||||
const statisData = ref<any>({})
|
||||
// 预警数量
|
||||
const earlyNums = ref<any>({})
|
||||
// 选中
|
||||
const activeKey = ref('chlorine')
|
||||
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);
|
||||
},
|
||||
const earlyWarningList = computed(() => {
|
||||
const arr: EarlyWarningItem[] = [
|
||||
{
|
||||
icon: 'yujing1',
|
||||
title: 'Ⅰ级预警',
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'field1',
|
||||
component: 'Select',
|
||||
label: '',
|
||||
colProps,
|
||||
componentProps: {
|
||||
placeholder: '检测点',
|
||||
options: [
|
||||
{
|
||||
label: '选项2',
|
||||
value: '1',
|
||||
key: '1',
|
||||
},
|
||||
],
|
||||
onChange: (e: any) => {
|
||||
console.log(e);
|
||||
},
|
||||
{
|
||||
icon: 'yujing2',
|
||||
title: 'Ⅱ级预警',
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'time',
|
||||
component: 'RangePicker',
|
||||
label: '',
|
||||
colProps,
|
||||
componentProps: {
|
||||
placeholder: ['开始日期', '结束日期'],
|
||||
{
|
||||
icon: 'yujing3',
|
||||
title: 'Ⅲ级预警',
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'disclosure',
|
||||
component: 'RadioButtonGroup',
|
||||
label: '',
|
||||
colProps: colProps,
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '今天',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '近一周',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '近一个月',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
{
|
||||
icon: 'yujing4',
|
||||
title: 'Ⅳ级预警',
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const earlyWarningList: EarlyWarningItem[] = [
|
||||
{
|
||||
icon: 'yujing1',
|
||||
title: 'Ⅰ级预警',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
icon: 'yujing2',
|
||||
title: 'Ⅱ级预警',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
icon: 'yujing3',
|
||||
title: 'Ⅲ级预警',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
icon: 'yujing4',
|
||||
title: 'Ⅳ级预警',
|
||||
value: '100',
|
||||
},
|
||||
];
|
||||
|
||||
]
|
||||
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,
|
||||
lable: '氯',
|
||||
value: 'chlorine',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '电导率',
|
||||
value: 1,
|
||||
value: 'conductivity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '水分',
|
||||
value: 2,
|
||||
lable: '氧气',
|
||||
value: 'oxygen',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '氮',
|
||||
value: 3,
|
||||
lable: 'PH',
|
||||
value: 'ph',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '磷',
|
||||
value: 4,
|
||||
lable: '温度',
|
||||
value: 'temperature',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '钾',
|
||||
value: 5,
|
||||
lable: '浊度',
|
||||
value: 'turbidity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
[Card.name]: Card,
|
||||
[Button.name]: Button,
|
||||
BasicForm,
|
||||
PageWrapper,
|
||||
EarlyWarningItem,
|
||||
LineCharts,
|
||||
FormDrawer,
|
||||
},
|
||||
const disabledDate = (current) => {
|
||||
return current && current > dayjs().endOf('day')
|
||||
}
|
||||
// 获取基地数据
|
||||
const getBase = async () => {
|
||||
const res = await getGriculturalDeviceBasic({ device_type: 3 })
|
||||
if (res.length == 0) return
|
||||
baseDate.value = res
|
||||
if (!formState.base_id) formState.base_id = res?.[0]?.id ?? undefined
|
||||
getPoint()
|
||||
}
|
||||
// 获取监控点数据
|
||||
const getPoint = async () => {
|
||||
if (baseDate.value.length == 0) return
|
||||
const res = await getaGriculturalDevicePoint({
|
||||
device_type: 3,
|
||||
agricultural_basic: formState.base_id,
|
||||
})
|
||||
pointDate.value = formatDataByObject(res)
|
||||
if (!formState.device_id) formState.device_id = pointDate.value?.[0]?.value ?? undefined
|
||||
getDate()
|
||||
getNums()
|
||||
}
|
||||
// 获取数据
|
||||
const getDate = async () => {
|
||||
const params = {
|
||||
device_id: formState.device_id,
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
}
|
||||
if (formState.time) {
|
||||
params.start_time = dayjs(formState.time?.[0]).format('YYYY-MM-DD')
|
||||
params.end_time = dayjs(formState.time?.[1]).format('YYYY-MM-DD')
|
||||
}
|
||||
if (formState.time_interval === 'week') {
|
||||
const { WeekStartDate, WeekEndDate } = getWeek()
|
||||
params.start_time = WeekStartDate
|
||||
params.end_time = WeekEndDate
|
||||
} else if (formState.time_interval === 'month') {
|
||||
const { MonthStartDate, MonthEndDate } = getMonth()
|
||||
params.start_time = MonthStartDate
|
||||
params.end_time = MonthEndDate
|
||||
} else if (formState.time_interval === 'day') {
|
||||
params.start_time = ''
|
||||
params.end_time = ''
|
||||
}
|
||||
const res = await getAmonitoringData(params)
|
||||
statisData.value = res
|
||||
}
|
||||
// 获取预警数量
|
||||
const getNums = async () => {
|
||||
let res = await getDeviceWarningNums({
|
||||
base: formState.base_id,
|
||||
device: formState.device_id,
|
||||
status: 0,
|
||||
})
|
||||
earlyNums.value = res
|
||||
}
|
||||
const onChange = (e: string | undefined) => {
|
||||
if (e === 'base_id') formState.device_id = undefined
|
||||
if (e === 'time') formState.time_interval = ''
|
||||
if (e === 'time_interval') formState.time = undefined
|
||||
getPoint()
|
||||
}
|
||||
|
||||
setup() {
|
||||
const activeKey = ref(1);
|
||||
const onChangTime = (e) => {
|
||||
if (e === null) formState.time_interval = 'day'
|
||||
else formState.time_interval = ''
|
||||
getPoint()
|
||||
}
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
|
||||
const currentActiveLable = computed(
|
||||
() => tagMenus.find((e) => e.value == activeKey.value)?.lable ?? '',
|
||||
);
|
||||
|
||||
function onChangeTag(item) {
|
||||
activeKey.value = item.value;
|
||||
}
|
||||
|
||||
function handleSetting() {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
|
||||
function handleSuccess() {
|
||||
// reload();
|
||||
console.log('=========');
|
||||
}
|
||||
|
||||
return {
|
||||
activeKey,
|
||||
valueSelectA,
|
||||
schemas,
|
||||
earlyWarningList,
|
||||
tagMenus,
|
||||
currentActiveLable,
|
||||
registerDrawer,
|
||||
onChangeTag,
|
||||
handleSetting,
|
||||
handleSuccess,
|
||||
};
|
||||
},
|
||||
});
|
||||
const handleSetting = () => {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
})
|
||||
}
|
||||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
}
|
||||
//
|
||||
const onChangeTag = (e: string) => {
|
||||
activeKey.value = e
|
||||
}
|
||||
onMounted(() => {
|
||||
getBase()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
|
|
|||
Loading…
Reference in New Issue