new-map
parent
8c35186517
commit
797449b43f
|
|
@ -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,
|
||||
},
|
||||
|
|
@ -76,10 +88,7 @@
|
|||
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,
|
||||
},
|
||||
|
|
@ -77,10 +89,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, [
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
@ -75,10 +87,7 @@
|
|||
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
|
||||
}),
|
||||
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,
|
||||
},
|
||||
|
|
@ -77,10 +89,7 @@
|
|||
{
|
||||
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,
|
||||
},
|
||||
|
|
@ -75,10 +87,7 @@
|
|||
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
|
||||
}),
|
||||
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,
|
||||
},
|
||||
|
|
@ -75,10 +87,7 @@
|
|||
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
|
||||
}),
|
||||
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,
|
||||
},
|
||||
|
|
@ -75,10 +87,7 @@
|
|||
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
|
||||
}),
|
||||
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,
|
||||
},
|
||||
|
|
@ -75,10 +87,7 @@
|
|||
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
|
||||
}),
|
||||
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,
|
||||
},
|
||||
|
|
@ -77,10 +89,7 @@
|
|||
{
|
||||
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,
|
||||
},
|
||||
|
|
@ -77,10 +89,7 @@
|
|||
{
|
||||
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,
|
||||
},
|
||||
|
|
@ -77,10 +89,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, [
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<FormItem label="日期">
|
||||
<RangePicker
|
||||
:disabledDate="disabledDate"
|
||||
@change="onChange('time')"
|
||||
@change="onChangTime"
|
||||
v-model:value="formState.time"
|
||||
/>
|
||||
</FormItem>
|
||||
|
|
@ -89,6 +89,7 @@
|
|||
:extra="name"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 空气湿度 -->
|
||||
|
|
@ -97,6 +98,7 @@
|
|||
:data="statisData.air_humidity"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 光照强度 -->
|
||||
|
|
@ -105,11 +107,13 @@
|
|||
: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"
|
||||
|
|
@ -121,6 +125,7 @@
|
|||
:data="statisData.wind_speed"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风力 -->
|
||||
|
|
@ -129,6 +134,7 @@
|
|||
:data="statisData.wind_degree"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 风向 -->
|
||||
|
|
@ -137,6 +143,7 @@
|
|||
:data="statisData.wind_direction"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- 噪声 -->
|
||||
|
|
@ -145,6 +152,7 @@
|
|||
:data="statisData.noise"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- PM10 -->
|
||||
|
|
@ -153,6 +161,7 @@
|
|||
:data="statisData.pm10"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- PM25 -->
|
||||
|
|
@ -161,6 +170,7 @@
|
|||
:data="statisData.pm25"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
<!-- CO2 -->
|
||||
|
|
@ -169,6 +179,7 @@
|
|||
:data="statisData.co2"
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:loading="false"
|
||||
:time="formState.time"
|
||||
:company="formState.time_interval"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -272,6 +283,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, [
|
||||
|
|
|
|||
|
|
@ -47,7 +47,11 @@
|
|||
:xxl="{ span: 4 }"
|
||||
>
|
||||
<FormItem label="日期">
|
||||
<RangePicker @change="onChange('time')" v-model:value="formState.time"></RangePicker>
|
||||
<RangePicker
|
||||
:disabledDate="disabledDate"
|
||||
@change="onChangTime"
|
||||
v-model:value="formState.time"
|
||||
></RangePicker>
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col
|
||||
|
|
@ -108,6 +112,7 @@
|
|||
:loading="false"
|
||||
:title="currentActiveLable"
|
||||
:data="chartData"
|
||||
:time="formState.time"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
@ -243,6 +248,9 @@
|
|||
},
|
||||
]
|
||||
|
||||
const disabledDate = (current) => {
|
||||
return current && current > dayjs().endOf('day')
|
||||
}
|
||||
// 获取基地数据
|
||||
const getBase = async () => {
|
||||
const res = await getGriculturalDeviceBasic({ device_type: 2 })
|
||||
|
|
@ -303,6 +311,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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,85 @@
|
|||
<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
|
||||
: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>
|
||||
<!-- -->
|
||||
<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 +95,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 +106,232 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<LineCharts :loading="false" :title="currentActiveLable" />
|
||||
<LineCharts
|
||||
:company="formState.time_interval"
|
||||
:extra="extra"
|
||||
:loading="false"
|
||||
:title="currentActiveLable"
|
||||
:data="chartData"
|
||||
:time="formState.time"
|
||||
/>
|
||||
</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 disabledDate = (current) => {
|
||||
return current && current > dayjs().endOf('day')
|
||||
}
|
||||
// 获取基地数据
|
||||
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 onChangTime = (e) => {
|
||||
if (e === null) formState.time_interval = 'day'
|
||||
else formState.time_interval = ''
|
||||
getPoint()
|
||||
}
|
||||
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -81,9 +81,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
|||
// Turning off brotliSize display can slightly reduce packaging time
|
||||
brotliSize: false,
|
||||
chunkSizeWarningLimit: 2000,
|
||||
rollupOptions: {
|
||||
external: ['ant-design-vue'],
|
||||
},
|
||||
},
|
||||
define: {
|
||||
// setting vue-i18-next
|
||||
|
|
|
|||
Loading…
Reference in New Issue