修改预警

new-map
ihzero 2022-11-18 17:06:05 +08:00
parent 37abb9822c
commit c2df54f54d
8 changed files with 560 additions and 15 deletions

View File

@ -62,7 +62,7 @@
}
const handleMark = async (record: Recordable) => {
await markWarningLogs(record.id)
message.success('删除成功')
message.success('标记成功')
reload()
}

View File

@ -3,6 +3,8 @@ import dayjs from 'dayjs'
import { h } from 'vue'
import { Tag } from 'ant-design-vue'
import { ColEx } from '/@/components/Form/src/types'
// import { formatDataByObject } from '/@/utils/index'
// import { getGriculturalDeviceBasic, getaGriculturalDevicePoint } from '/@/api/sys/user'
const colProps: Partial<ColEx> = {
xs: 24,
@ -12,6 +14,43 @@ const colProps: Partial<ColEx> = {
xl: 6,
xxl: 4,
}
const diviceTypes = [
{
label: '监控设备',
value: 1,
},
{
label: '土壤设备',
value: 2,
},
{
label: '水质设备',
value: 3,
},
{
label: '气象设备',
value: 4,
},
]
const lvOptions = [
{
label: 'Ⅰ级预警',
value: 1,
},
{
label: 'Ⅱ级预警',
value: 2,
},
{
label: 'Ⅲ级预警',
value: 3,
},
{
label: 'Ⅳ级预警',
value: 4,
},
]
const statusOptions = [
{
@ -36,6 +75,23 @@ export const columns: BasicColumn[] = [
title: 'ID',
dataIndex: 'id',
},
{
title: '基地',
dataIndex: 'base_name',
},
{
title: '监控点',
dataIndex: 'point_name',
},
{
title: '设备类型',
dataIndex: 'device_type',
customRender: ({ text }) => {
const item = diviceTypes.find(({ value }) => value == text)
return item?.label ?? text
},
},
{
title: '内容',
dataIndex: 'content',
@ -44,6 +100,10 @@ export const columns: BasicColumn[] = [
title: '等级',
dataIndex: 'lv',
width: 100,
customRender: ({ text }) => {
const item = lvOptions.find(({ value }) => value == text)
return item?.label ?? text
},
},
{
title: '状态',
@ -78,6 +138,69 @@ export const columns: BasicColumn[] = [
]
export const searchFormSchema: FormSchema[] = [
// {
// field: 'base',
// component: 'ApiSelect',
// label: '基地',
// colProps,
// componentProps: ({ formModel, formActionType }) => {
// return {
// placeholder: '基地',
// allowClear: true,
// api: getGriculturalDeviceBasic,
// labelField: 'name',
// valueField: 'id',
// onChange: (e: any) => {
// formModel.point = undefined
// if (!e) return
// const { updateSchema } = formActionType
// updateSchema({
// field: 'point',
// componentProps: {
// api: async (e) => {
// const resData = await getaGriculturalDevicePoint(e)
// return formatDataByObject(resData)
// },
// params: {
// device_type: 4,
// agricultural_basic: e,
// },
// labelField: 'label',
// valueField: 'value',
// },
// })
// },
// }
// },
// },
// {
// field: 'point',
// component: 'ApiSelect',
// label: '监控点',
// colProps,
// componentProps: {
// allowClear: true,
// placeholder: '监控点',
// },
// },
{
field: 'lv',
label: '等级',
component: 'Select',
componentProps: {
options: lvOptions,
},
colProps,
},
{
field: 'device',
label: '设备类型',
component: 'Select',
componentProps: {
options: diviceTypes,
},
colProps,
},
{
field: 'status',
label: '状态',

View File

@ -98,7 +98,7 @@
colProps,
componentProps: {
allowClear: true,
placeholder: '检测点',
placeholder: '监控点',
},
},
]

View File

@ -18,7 +18,7 @@
:options="baseDate"
v-model:value="formState.base_id"
placeholder="请选择基地"
></Select>
/>
</FormItem>
</Col>
<Col
@ -35,7 +35,7 @@
placeholder="请选择检测点"
:options="pointDate"
v-model:value="formState.device_id"
></Select>
/>
</FormItem>
</Col>
<Col
@ -51,7 +51,7 @@
:disabledDate="disabledDate"
@change="onChangTime"
v-model:value="formState.time"
></RangePicker>
/>
</FormItem>
</Col>
<Col
@ -78,7 +78,7 @@
</Form>
<template v-if="baseDate.length === 0">
<div class="h-500px flex items-center justify-center flex-col">
<Empty></Empty>
<Empty />
</div>
</template>
<!-- -->
@ -89,7 +89,8 @@
</div>
<div class="mt-20px md:flex enter-y flex-wrap -mr-4">
<EarlyWarningItem
class="md:w-200px w-full !mr-4 !mb-4"
class="md:w-200px w-full !mr-4 !mb-4 cursor-pointer"
@click="handleWarning(item)"
v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
@ -112,6 +113,7 @@
</template>
</Card>
<FormDrawer @register="registerDrawer" @success="handleSuccess" />
<WarningModal @register="registerModal" />
</PageWrapper>
</template>
@ -126,7 +128,8 @@
import LineCharts from './components/LineCharts.vue'
import FormDrawer from './components/FormDrawer.vue'
import { useDrawer } from '/@/components/Drawer'
import { useModal } from '/@/components/Modal'
import WarningModal from './warningModal.vue'
import {
getGriculturalDeviceBasic,
getaGriculturalDevicePoint,
@ -150,6 +153,8 @@
const RadioButton = Radio.Button
const RadioGroup = Radio.Group
const [registerModal, { openModal }] = useModal()
const [registerDrawer, { openDrawer }] = useDrawer()
const formRef = ref<FormInstance>()
const formState = reactive({
@ -167,25 +172,30 @@
icon: String
title: String
value: String | Number
lv: Number
}
const earlyWarningList = computed(() => {
const arr: EarlyWarningItem[] = [
{
lv: 1,
icon: 'yujing1',
title: 'Ⅰ级预警',
value: '',
},
{
lv: 2,
icon: 'yujing2',
title: 'Ⅱ级预警',
value: '',
},
{
lv: 3,
icon: 'yujing3',
title: 'Ⅲ级预警',
value: '',
},
{
lv: 4,
icon: 'yujing4',
title: 'Ⅳ级预警',
value: '',
@ -318,6 +328,14 @@
getPoint()
}
const handleWarning = (e) => {
openModal(true, {
...e,
base: formState.base_id,
device: formState.device_id,
})
}
const handleSetting = () => {
openDrawer(true, {
isUpdate: false,

View File

@ -0,0 +1,190 @@
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
showFooter
:title="getTitle"
:showOkBtn="false"
width="1200px"
>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<div class="flex items-center justify-center">
<TableAction
:actions="[
{
label: '标记',
popConfirm: {
title: '是否确认标记',
placement: 'topRight',
confirm: handleMark.bind(null, record),
},
ifShow: record.status == 0,
},
]"
/>
</div>
</template>
</template>
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '/@/components/Table'
import { computed, ref, h } from 'vue'
import { getWarningLogs, markWarningLogs } from '/@/api/sys/user'
import { BasicModal, useModalInner } from '/@/components/Modal'
import dayjs from 'dayjs'
import { Tag, message } from 'ant-design-vue'
const diviceTypes = [
{
label: '监控设备',
value: 1,
},
{
label: '土壤设备',
value: 2,
},
{
label: '水质设备',
value: 3,
},
{
label: '气象设备',
value: 4,
},
]
const lvOptions = [
{
label: 'Ⅰ级预警',
value: 1,
},
{
label: 'Ⅱ级预警',
value: 2,
},
{
label: 'Ⅲ级预警',
value: 3,
},
{
label: 'Ⅳ级预警',
value: 4,
},
]
const statusOptions = [
{
value: 0,
color: 'red',
label: '未处理',
},
{
value: 1,
color: 'green',
label: '已处理',
},
{
value: 2,
color: 'pink',
label: '已忽略',
},
]
const getTitle = computed(() => '预警列表')
const params = ref({})
const [registerModal] = useModalInner(async (data) => {
params.value = data
reload()
})
const [registerTable, { reload }] = useTable({
pagination: { pageSize: 10, pageSizeOptions: ['10', '20', '30', '40'] },
immediate: false,
canResize: false,
api: async (e) => {
const { data, meta } = await getWarningLogs({ ...e, ...params.value })
return {
items: data,
total: meta?.total,
}
},
rowKey: 'id',
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 80,
},
{
title: '基地',
dataIndex: 'base_name',
},
{
title: '监控点',
dataIndex: 'point_name',
},
{
title: '设备类型',
dataIndex: 'device_type',
customRender: ({ text }) => {
const item = diviceTypes.find(({ value }) => value == text)
return item?.label ?? text
},
},
{
title: '内容',
dataIndex: 'content',
},
{
title: '等级',
dataIndex: 'lv',
width: 100,
customRender: ({ text }) => {
const item = lvOptions.find(({ value }) => value == text)
return item?.label ?? text
},
},
{
title: '状态',
dataIndex: 'status',
width: 100,
customRender: ({ record }) => {
const status = record.status
const list = statusOptions
const item = list.find((e) => e.value === status)
const color = item?.color ?? 'red'
const text = item?.label ?? status
return h(Tag, { color: color }, () => text)
},
},
{
title: '开始时间',
dataIndex: 'created_at',
width: 180,
customRender: ({ text }) => {
if (!text) return ''
return dayjs.unix(text).format('YYYY-MM-DD HH:mm:ss')
},
},
{
width: 90,
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
},
],
useSearchForm: false,
showTableSetting: false,
bordered: true,
})
const handleMark = async (record: Recordable) => {
await markWarningLogs(record.id)
message.success('成功')
reload()
}
</script>

View File

@ -18,7 +18,7 @@
:options="baseDate"
v-model:value="formState.base_id"
placeholder="请选择基地"
></Select>
/>
</FormItem>
</Col>
<Col
@ -35,7 +35,7 @@
placeholder="请选择检测点"
:options="pointDate"
v-model:value="formState.device_id"
></Select>
/>
</FormItem>
</Col>
<Col
@ -51,7 +51,7 @@
:disabledDate="disabledDate"
@change="onChangTime"
v-model:value="formState.time"
></RangePicker>
/>
</FormItem>
</Col>
<Col
@ -78,7 +78,7 @@
</Form>
<template v-if="baseDate.length === 0">
<div class="h-500px flex items-center justify-center flex-col">
<Empty></Empty>
<Empty />
</div>
</template>
<!-- -->
@ -89,7 +89,8 @@
</div>
<div class="mt-20px md:flex enter-y flex-wrap -mr-4">
<EarlyWarningItem
class="md:w-200px w-full !mr-4 !mb-4"
class="md:w-200px w-full !mr-4 !mb-4 cursor-pointer"
@click="handleWarning(item)"
v-for="(item, index) in earlyWarningList"
:key="index"
:data="item"
@ -112,6 +113,7 @@
</template>
</Card>
<FormDrawer @register="registerDrawer" @success="handleSuccess" />
<WarningModal @register="registerModal" />
</PageWrapper>
</template>
@ -126,7 +128,8 @@
import LineCharts from './components/LineCharts.vue'
import FormDrawer from './components/FormDrawer.vue'
import { useDrawer } from '/@/components/Drawer'
import { useModal } from '/@/components/Modal'
import WarningModal from './warningModal.vue'
import {
getGriculturalDeviceBasic,
getaGriculturalDevicePoint,
@ -149,6 +152,9 @@
import type { FormInstance } from 'ant-design-vue'
const RadioButton = Radio.Button
const RadioGroup = Radio.Group
const [registerModal, { openModal }] = useModal()
const [registerDrawer, { openDrawer }] = useDrawer()
const formRef = ref<FormInstance>()
const formState = reactive({
@ -167,6 +173,7 @@
icon: String
title: String
value: String | Number
lv: Number
}
const earlyWarningList = computed(() => {
const arr: EarlyWarningItem[] = [
@ -174,21 +181,25 @@
icon: 'yujing1',
title: 'Ⅰ级预警',
value: '',
lv: 1,
},
{
icon: 'yujing2',
title: 'Ⅱ级预警',
value: '',
lv: 2,
},
{
icon: 'yujing3',
title: 'Ⅲ级预警',
value: '',
lv: 3,
},
{
icon: 'yujing4',
title: 'Ⅳ级预警',
value: '',
lv: 4,
},
]
Object.values(earlyNums.value).forEach((v: number | string, index: number) => {
@ -318,6 +329,16 @@
getPoint()
}
const handleWarning = (e) => {
console.log(e)
openModal(true, {
...e,
base: formState.base_id,
device: formState.device_id,
})
}
const handleSetting = () => {
openDrawer(true, {
isUpdate: false,

View File

@ -0,0 +1,190 @@
<template>
<BasicModal
v-bind="$attrs"
@register="registerModal"
showFooter
:title="getTitle"
:showOkBtn="false"
width="1200px"
>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<div class="flex items-center justify-center">
<TableAction
:actions="[
{
label: '标记',
popConfirm: {
title: '是否确认标记',
placement: 'topRight',
confirm: handleMark.bind(null, record),
},
ifShow: record.status == 0,
},
]"
/>
</div>
</template>
</template>
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '/@/components/Table'
import { computed, ref, h } from 'vue'
import { getWarningLogs, markWarningLogs } from '/@/api/sys/user'
import { BasicModal, useModalInner } from '/@/components/Modal'
import dayjs from 'dayjs'
import { Tag, message } from 'ant-design-vue'
const diviceTypes = [
{
label: '监控设备',
value: 1,
},
{
label: '土壤设备',
value: 2,
},
{
label: '水质设备',
value: 3,
},
{
label: '气象设备',
value: 4,
},
]
const lvOptions = [
{
label: 'Ⅰ级预警',
value: 1,
},
{
label: 'Ⅱ级预警',
value: 2,
},
{
label: 'Ⅲ级预警',
value: 3,
},
{
label: 'Ⅳ级预警',
value: 4,
},
]
const statusOptions = [
{
value: 0,
color: 'red',
label: '未处理',
},
{
value: 1,
color: 'green',
label: '已处理',
},
{
value: 2,
color: 'pink',
label: '已忽略',
},
]
const getTitle = computed(() => '预警列表')
const params = ref({})
const [registerModal] = useModalInner(async (data) => {
params.value = data
reload()
})
const [registerTable, { reload }] = useTable({
pagination: { pageSize: 10, pageSizeOptions: ['10', '20', '30', '40'] },
immediate: false,
canResize: false,
api: async (e) => {
const { data, meta } = await getWarningLogs({ ...e, ...params.value })
return {
items: data,
total: meta?.total,
}
},
rowKey: 'id',
columns: [
{
title: 'ID',
dataIndex: 'id',
width: 80,
},
{
title: '基地',
dataIndex: 'base_name',
},
{
title: '监控点',
dataIndex: 'point_name',
},
{
title: '设备类型',
dataIndex: 'device_type',
customRender: ({ text }) => {
const item = diviceTypes.find(({ value }) => value == text)
return item?.label ?? text
},
},
{
title: '内容',
dataIndex: 'content',
},
{
title: '等级',
dataIndex: 'lv',
width: 100,
customRender: ({ text }) => {
const item = lvOptions.find(({ value }) => value == text)
return item?.label ?? text
},
},
{
title: '状态',
dataIndex: 'status',
width: 100,
customRender: ({ record }) => {
const status = record.status
const list = statusOptions
const item = list.find((e) => e.value === status)
const color = item?.color ?? 'red'
const text = item?.label ?? status
return h(Tag, { color: color }, () => text)
},
},
{
title: '开始时间',
dataIndex: 'created_at',
width: 180,
customRender: ({ text }) => {
if (!text) return ''
return dayjs.unix(text).format('YYYY-MM-DD HH:mm:ss')
},
},
{
width: 90,
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
},
],
useSearchForm: false,
showTableSetting: false,
bordered: true,
})
const handleMark = async (record: Recordable) => {
await markWarningLogs(record.id)
message.success('成功')
reload()
}
</script>

View File

@ -150,7 +150,7 @@ export const columns: BasicColumn[] = [
export const searchFormSchema: FormSchema[] = [
{
field: 'type',
label: '动作',
label: '类型',
component: 'Select',
componentProps: {
options,
@ -193,6 +193,9 @@ export const accountFormSchema: FormSchema[] = [
required: true,
defaultValue: 1,
component: 'InputNumber',
componentProps: {
precision: 0,
},
},
{
field: 'is_recommend',