Merge branch 'temp' of https://gitea.peidikeji.cn/zhouhui/lcny-vue3-antd-admin into temp
commit
db4c346bdf
|
|
@ -11,26 +11,63 @@
|
|||
<template #crop="{ model, field }">
|
||||
<TreeSelect
|
||||
v-model:value="model[field]"
|
||||
@select="select"
|
||||
:tree-data="treeData"
|
||||
placeholder="请选择"
|
||||
:fieldNames="{ children: 'children', label: 'name', value: 'id' }"
|
||||
></TreeSelect>
|
||||
</template>
|
||||
<!-- 产量 -->
|
||||
<template #yield="{ model, field }">
|
||||
<Input v-model:value="model[field]" :suffix="company" placeholder="请输入"></Input>
|
||||
</template>
|
||||
<!-- 扩展 -->
|
||||
<template #extends="{ model, field }">
|
||||
<Space
|
||||
v-for="(sight, index) in model[field]"
|
||||
:key="index"
|
||||
style="width: 100%"
|
||||
align="baseline"
|
||||
>
|
||||
<FormItem
|
||||
class="w-full"
|
||||
:label="sight.name"
|
||||
:name="['extends', index, 'value']"
|
||||
:rules="{
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'change',
|
||||
}"
|
||||
:label-col="{ span: 6 }"
|
||||
>
|
||||
<Input
|
||||
v-model:value="sight.value"
|
||||
placeholder="请输入"
|
||||
:suffix="sight.unit"
|
||||
class="w-full"
|
||||
type="number"
|
||||
></Input>
|
||||
</FormItem>
|
||||
</Space>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getTreeData } from '/@/utils/index'
|
||||
import { getTreeData, jsonString } from '/@/utils/index'
|
||||
import dayjs from 'dayjs'
|
||||
import { ref, computed, unref } from 'vue'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
import { accountFormSchema } from './base.data'
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
|
||||
import { addCropYields, editCropYields, getcrops } from '/@/api/sys/user'
|
||||
import { TreeSelect } from 'ant-design-vue'
|
||||
import { addCropYields, editCropYields, getcrops, getCropYieldsInfo } from '/@/api/sys/user'
|
||||
import { TreeSelect, Input, Space, FormItem } from 'ant-design-vue'
|
||||
const emits = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(false)
|
||||
const treeData = ref([])
|
||||
const cropslist = ref<any>([])
|
||||
//单位
|
||||
const company = ref('')
|
||||
const getTitle = computed(() => (!isUpdate.value ? '新增产量' : '编辑产量'))
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
labelWidth: 120,
|
||||
|
|
@ -40,13 +77,18 @@
|
|||
})
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
resetFields()
|
||||
company.value = ''
|
||||
setDrawerProps({ confirmLoading: false })
|
||||
if (unref(treeData).length === 0) {
|
||||
const res = await getcrops({ type: 'all', crop_type: 1 })
|
||||
cropslist.value = res.data
|
||||
treeData.value = getTreeData(res.data, 0, 'parent_id', 'id', 'children', 'key')
|
||||
}
|
||||
isUpdate.value = data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
company.value = cropslist?.value?.find((e) => e.id === data.crop_id)?.unit ?? ''
|
||||
const my_extends = cropslist?.value?.find((e) => e.id === data.crop_id)?.extends ?? null
|
||||
const res = await getCropYieldsInfo(data.id)
|
||||
await setFieldsValue({
|
||||
id: data.id,
|
||||
quarter: data.quarter.toString(),
|
||||
|
|
@ -56,13 +98,32 @@
|
|||
output: data.output,
|
||||
crop_id: data.crop_id,
|
||||
cultivated: data.cultivated,
|
||||
extends: formatDataByObject(my_extends, res.extends),
|
||||
})
|
||||
} else {
|
||||
setFieldsValue({
|
||||
extends: [],
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const select = (e: number, node: any) => {
|
||||
console.log(e)
|
||||
company.value = node.unit
|
||||
setFieldsValue({
|
||||
extends: jsonString(node.extends) ? JSON.parse(node.extends) : node.extends,
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await validate()
|
||||
if (values.extends) {
|
||||
values.extends = values.extends.reduce(
|
||||
(obj, item) => ((obj[item.name] = item.value), obj),
|
||||
{},
|
||||
)
|
||||
}
|
||||
values.time_year = dayjs(values.time_year.toString()).format('YYYY')
|
||||
values.type = 1
|
||||
setDrawerProps({ confirmLoading: true })
|
||||
|
|
@ -79,6 +140,34 @@
|
|||
setDrawerProps({ confirmLoading: false })
|
||||
}
|
||||
}
|
||||
const formatDataByObject = (e, v) => {
|
||||
let arr: any = []
|
||||
const arr1 = jsonString(e) ? JSON.parse(e) : e
|
||||
if (!!arr1) {
|
||||
if (!!v) {
|
||||
arr1.forEach((e) => {
|
||||
Object.keys(v).forEach((eve) => {
|
||||
if (e.name === eve) {
|
||||
arr.push({
|
||||
name: e.name,
|
||||
value: v[eve],
|
||||
unit: e.unit,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
arr = arr1.map((s) => {
|
||||
return {
|
||||
name: s.name,
|
||||
value: '',
|
||||
unit: s.unit,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
return arr
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-picker) {
|
||||
|
|
|
|||
|
|
@ -53,20 +53,20 @@ export const searchFormSchema: FormSchema[] = [
|
|||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
// {
|
||||
// field: 'quarter',
|
||||
// label: '季度',
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '第一季度', value: '1' },
|
||||
// { label: '第二季度', value: '2' },
|
||||
// { label: '第三季度', value: '3' },
|
||||
// { label: '第四季度', value: '4' },
|
||||
// ],
|
||||
// },
|
||||
// colProps: { span: 6 },
|
||||
// },
|
||||
{
|
||||
field: 'quarter',
|
||||
label: '季度',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '第一季度', value: '1' },
|
||||
{ label: '第二季度', value: '2' },
|
||||
{ label: '第三季度', value: '3' },
|
||||
{ label: '第四季度', value: '4' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
// {
|
||||
// field: 'crop',
|
||||
// label: '农作物',
|
||||
|
|
@ -94,6 +94,27 @@ export const accountFormSchema: FormSchema[] = [
|
|||
return !!values.id
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '农作物',
|
||||
field: 'crop_id',
|
||||
slot: 'crop',
|
||||
component: 'TreeSelect',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'base_id',
|
||||
label: '区域',
|
||||
component: 'ApiSelect',
|
||||
required: true,
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const res = await getTownAgriculturalBasic({ type: 2, page: 1, per_page: 99999 })
|
||||
return res.data
|
||||
},
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'time_year',
|
||||
label: '年份',
|
||||
|
|
@ -119,57 +140,42 @@ export const accountFormSchema: FormSchema[] = [
|
|||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'base_id',
|
||||
label: '区域',
|
||||
component: 'ApiSelect',
|
||||
required: true,
|
||||
componentProps: {
|
||||
api: async () => {
|
||||
const { data } = await getTownAgriculturalBasic({ type: 1, page: 1, per_page: 99999 })
|
||||
return data
|
||||
},
|
||||
labelField: 'name',
|
||||
valueField: 'id',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'yield',
|
||||
label: '产量',
|
||||
required: true,
|
||||
component: 'InputNumber',
|
||||
component: 'Input',
|
||||
slot: 'yield',
|
||||
},
|
||||
{
|
||||
field: 'output',
|
||||
label: '产值',
|
||||
required: true,
|
||||
component: 'InputNumber',
|
||||
},
|
||||
// {
|
||||
// field: 'crop_id',
|
||||
// label: '农作物',
|
||||
// component: 'TreeSelect',
|
||||
// required: true,
|
||||
// componentProps: {
|
||||
// api: async () => {
|
||||
// const res = await getcrops({ type: 'all', crop_type: 2 })
|
||||
// return res.filter((e) => e.is_end == 1)
|
||||
// },
|
||||
// labelField: 'name',
|
||||
// valueField: 'id',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '农作物',
|
||||
field: 'crop_id',
|
||||
slot: 'crop',
|
||||
component: 'TreeSelect',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
suffix: '元',
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
field: 'cultivated',
|
||||
label: '耕种面积',
|
||||
required: true,
|
||||
component: 'InputNumber',
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
suffix: '亩',
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'extends',
|
||||
label: '',
|
||||
required: false,
|
||||
component: 'Input',
|
||||
slot: 'extends',
|
||||
ifShow: ({ values }) => {
|
||||
return values?.extends?.length > 0
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -53,20 +53,20 @@ export const searchFormSchema: FormSchema[] = [
|
|||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
// {
|
||||
// field: 'quarter',
|
||||
// label: '季度',
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// options: [
|
||||
// { label: '第一季度', value: '1' },
|
||||
// { label: '第二季度', value: '2' },
|
||||
// { label: '第三季度', value: '3' },
|
||||
// { label: '第四季度', value: '4' },
|
||||
// ],
|
||||
// },
|
||||
// colProps: { span: 6 },
|
||||
// },
|
||||
{
|
||||
field: 'quarter',
|
||||
label: '季度',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '第一季度', value: '1' },
|
||||
{ label: '第二季度', value: '2' },
|
||||
{ label: '第三季度', value: '3' },
|
||||
{ label: '第四季度', value: '4' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
// {
|
||||
// field: 'crop',
|
||||
// label: '农作物',
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@
|
|||
time: undefined, //时间
|
||||
time_interval: 'day',
|
||||
})
|
||||
const baseDate = ref([])
|
||||
const baseDate = ref<any>([])
|
||||
const pointDate = ref<any>([])
|
||||
const statisData = ref<any>({})
|
||||
const name = computed(() => baseDate?.value?.find((e: any) => e.id === formState.base_id)?.name)
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
3: 'Ⅲ级预警',
|
||||
4: 'Ⅳ级预警',
|
||||
}
|
||||
const roulsDate = ref(null)
|
||||
const roulsDate = ref<any>(null)
|
||||
const Title = computed(() => {
|
||||
if (!roulsDate.value) return []
|
||||
return Object.keys(roulsDate.value.value)
|
||||
|
|
|
|||
|
|
@ -87,40 +87,27 @@
|
|||
<span class="text-xl">预警数据统计</span>
|
||||
<Button @click="handleSetting">设置</Button>
|
||||
</div>
|
||||
<div class="mt-20px flex">
|
||||
<div class="mt-20px md:flex enter-y flex-wrap -mr-4">
|
||||
<EarlyWarningItem
|
||||
class="mr-16px last:mr-0"
|
||||
class="md:w-200px w-full !mr-4 !mb-4"
|
||||
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="mt-20px md:flex enter-y flex-wrap -mr-4">
|
||||
<div v-for="(item, index) in tagMenus" :key="index">
|
||||
<LineCharts
|
||||
class="md:w-386px w-full !mr-4 !mb-4"
|
||||
:company="formState.time_interval"
|
||||
:extra="extra"
|
||||
:loading="false"
|
||||
:title="item.lable"
|
||||
:data="statisData[item.value]"
|
||||
:time="formState.time"
|
||||
/>
|
||||
<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" />
|
||||
|
|
@ -170,13 +157,11 @@
|
|||
time: undefined, //时间
|
||||
time_interval: 'day',
|
||||
})
|
||||
const baseDate = ref([])
|
||||
const baseDate = ref<any>([])
|
||||
const pointDate = ref<any>([])
|
||||
const statisData = ref<any>({})
|
||||
// 预警数量
|
||||
const earlyNums = ref<any>({})
|
||||
// 选中
|
||||
const activeKey = ref('conductivity')
|
||||
interface EarlyWarningItem {
|
||||
icon: String
|
||||
title: String
|
||||
|
|
@ -210,10 +195,7 @@
|
|||
})
|
||||
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 ?? ''
|
||||
|
|
@ -337,10 +319,6 @@
|
|||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
}
|
||||
//
|
||||
const onChangeTag = (e: string) => {
|
||||
activeKey.value = e
|
||||
}
|
||||
onMounted(() => {
|
||||
getBase()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,353 @@
|
|||
<template>
|
||||
<PageWrapper>
|
||||
<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('device_id')"
|
||||
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>
|
||||
</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" 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<any>([])
|
||||
const pointDate = ref<any>([])
|
||||
const statisData = ref<any>({})
|
||||
// 预警数量
|
||||
const earlyNums = ref<any>({})
|
||||
// 选中
|
||||
const activeKey = ref('conductivity')
|
||||
interface EarlyWarningItem {
|
||||
icon: String
|
||||
title: String
|
||||
value: String | Number
|
||||
}
|
||||
const earlyWarningList = computed(() => {
|
||||
const arr: EarlyWarningItem[] = [
|
||||
{
|
||||
icon: 'yujing1',
|
||||
title: 'Ⅰ级预警',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing2',
|
||||
title: 'Ⅱ级预警',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing3',
|
||||
title: 'Ⅲ级预警',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing4',
|
||||
title: 'Ⅳ级预警',
|
||||
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: 'conductivity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '湿度',
|
||||
value: 'humidity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '温度',
|
||||
value: 'temperature',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '氮',
|
||||
value: 'k',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '磷',
|
||||
value: 'n',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '钾',
|
||||
value: 'p',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
]
|
||||
|
||||
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,
|
||||
})
|
||||
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()
|
||||
}
|
||||
|
||||
const onChangTime = (e) => {
|
||||
if (e === null) formState.time_interval = 'day'
|
||||
else formState.time_interval = ''
|
||||
getPoint()
|
||||
}
|
||||
|
||||
const handleSetting = () => {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
})
|
||||
}
|
||||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
}
|
||||
//
|
||||
const onChangeTag = (e: string) => {
|
||||
activeKey.value = e
|
||||
}
|
||||
onMounted(() => {
|
||||
getBase()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.active {
|
||||
@apply text-primary;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
3: 'Ⅲ级预警',
|
||||
4: 'Ⅳ级预警',
|
||||
}
|
||||
const roulsDate = ref(null)
|
||||
const roulsDate = ref<any>(null)
|
||||
const Title = computed(() => {
|
||||
if (!roulsDate.value) return []
|
||||
return Object.keys(roulsDate.value.value)
|
||||
|
|
|
|||
|
|
@ -87,40 +87,26 @@
|
|||
<span class="text-xl">预警数据统计</span>
|
||||
<Button @click="handleSetting">设置</Button>
|
||||
</div>
|
||||
<div class="mt-20px flex">
|
||||
<div class="mt-20px md:flex enter-y flex-wrap -mr-4">
|
||||
<EarlyWarningItem
|
||||
class="mr-16px last:mr-0"
|
||||
class="md:w-200px w-full !mr-4 !mb-4"
|
||||
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="mt-20px md:flex enter-y flex-wrap -mr-4">
|
||||
<div v-for="(item, index) in tagMenus" :key="index">
|
||||
<LineCharts
|
||||
:company="formState.time_interval"
|
||||
:extra="extra"
|
||||
:loading="false"
|
||||
:title="item.lable"
|
||||
:data="statisData[item.value]"
|
||||
:time="formState.time"
|
||||
/>
|
||||
<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" />
|
||||
|
|
@ -169,13 +155,12 @@
|
|||
time: undefined, //时间
|
||||
time_interval: 'day',
|
||||
})
|
||||
const baseDate = ref([])
|
||||
const baseDate = ref<any>([])
|
||||
const pointDate = ref<any>([])
|
||||
const statisData = ref<any>({})
|
||||
// 预警数量
|
||||
const earlyNums = ref<any>({})
|
||||
// 选中
|
||||
const activeKey = ref('chlorine')
|
||||
|
||||
interface EarlyWarningItem {
|
||||
icon: String
|
||||
title: String
|
||||
|
|
@ -209,10 +194,7 @@
|
|||
})
|
||||
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 ?? ''
|
||||
|
|
@ -336,10 +318,7 @@
|
|||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
}
|
||||
//
|
||||
const onChangeTag = (e: string) => {
|
||||
activeKey.value = e
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getBase()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,352 @@
|
|||
<template>
|
||||
<PageWrapper>
|
||||
<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>
|
||||
</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" 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<any>([])
|
||||
const pointDate = ref<any>([])
|
||||
const statisData = ref<any>({})
|
||||
// 预警数量
|
||||
const earlyNums = ref<any>({})
|
||||
// 选中
|
||||
const activeKey = ref('chlorine')
|
||||
interface EarlyWarningItem {
|
||||
icon: String
|
||||
title: String
|
||||
value: String | Number
|
||||
}
|
||||
const earlyWarningList = computed(() => {
|
||||
const arr: EarlyWarningItem[] = [
|
||||
{
|
||||
icon: 'yujing1',
|
||||
title: 'Ⅰ级预警',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing2',
|
||||
title: 'Ⅱ级预警',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing3',
|
||||
title: 'Ⅲ级预警',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
icon: 'yujing4',
|
||||
title: 'Ⅳ级预警',
|
||||
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: 'chlorine',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '电导率',
|
||||
value: 'conductivity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '氧气',
|
||||
value: 'oxygen',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: 'PH',
|
||||
value: 'ph',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '温度',
|
||||
value: 'temperature',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
{
|
||||
lable: '浊度',
|
||||
value: 'turbidity',
|
||||
icon: icon1,
|
||||
icon1: uicon1,
|
||||
},
|
||||
]
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
const onChangTime = (e) => {
|
||||
if (e === null) formState.time_interval = 'day'
|
||||
else formState.time_interval = ''
|
||||
getPoint()
|
||||
}
|
||||
|
||||
const handleSetting = () => {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
})
|
||||
}
|
||||
const handleSuccess = () => {
|
||||
message.success('操作成功')
|
||||
}
|
||||
//
|
||||
const onChangeTag = (e: string) => {
|
||||
activeKey.value = e
|
||||
}
|
||||
onMounted(() => {
|
||||
getBase()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.active {
|
||||
@apply text-primary;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue