8 changed files with 503 additions and 109 deletions
@ -0,0 +1,183 @@ |
|||
import type { BasicColumn, FormSchema } from '@/components/Table' |
|||
import {optionListApi, subSystemListApi} from "@/api/alert/model/select"; |
|||
import {h, ref} from "vue"; |
|||
import {systemSelectParams} from "@/api/alert/model/model/optionsModel"; |
|||
import {FileItem, UploadResultStatus} from "@/components/Upload/src/typing"; |
|||
import {Progress} from "ant-design-vue"; |
|||
const optionList = await optionListApi() |
|||
|
|||
const systemOptions = ref<any>([]) |
|||
systemOptions.value = optionList.systems |
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: '机组', |
|||
field: 'unit', |
|||
component: 'Select', |
|||
defaultValue: optionList.units[0].id || null, |
|||
colProps: { span: 4 }, |
|||
|
|||
componentProps: ({ schema, tableAction, formActionType, formModel }) => { |
|||
return { |
|||
// xxxx props
|
|||
allowClear: false, |
|||
placeholder: '请选择机组', |
|||
options: optionList.units.map(unit => ({ value: unit.id, label: unit.name })), |
|||
onChange: async (e: any) => { |
|||
// const { reload } = tableAction
|
|||
// reload()
|
|||
// or
|
|||
console.log(e) |
|||
const param: systemSelectParams = { |
|||
unitId: e, |
|||
typeId: formModel.type, |
|||
} |
|||
systemOptions.value = await subSystemListApi(param) |
|||
formModel.system = systemOptions.value[0].id |
|||
}, |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
label: '系统', |
|||
field: 'type', |
|||
component: 'Select', |
|||
defaultValue: optionList.types[0].id || null, |
|||
colProps: { span: 4 }, |
|||
componentProps: ({ formModel }) => { |
|||
return { |
|||
allowClear: false, |
|||
placeholder: '请选择系统', |
|||
options: optionList.types.map(type => ({ value: type.id, label: type.name })), |
|||
onChange: async (e: any) => { |
|||
// const { reload } = tableAction
|
|||
// reload()
|
|||
// or
|
|||
console.log(e) |
|||
const param: systemSelectParams = { |
|||
unitId: formModel.unit, |
|||
typeId: e, |
|||
} |
|||
systemOptions.value = await subSystemListApi(param) |
|||
}, |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
label: '子系统', |
|||
field: 'system', |
|||
component: 'Select', |
|||
defaultValue: systemOptions.value[0].id || null, |
|||
colProps: { span: 4 }, |
|||
componentProps: () => { |
|||
return { |
|||
allowClear: false, |
|||
placeholder: '请选择子系统', |
|||
options: systemOptions.value.map(system => ({ value: system.id, label: system.name })), |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
{ |
|||
label: '模型实例名称', |
|||
field: 'mpName', |
|||
component: 'Input', |
|||
labelWidth: 120, |
|||
defaultValue: '', |
|||
colProps: { span: 7 }, |
|||
} |
|||
] |
|||
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '编号', |
|||
dataIndex: 'warnId', |
|||
width: 80, |
|||
fixed: 'left', |
|||
}, |
|||
{ |
|||
title: '机组', |
|||
dataIndex: 'unitName', |
|||
width: 80, |
|||
fixed: 'left', |
|||
}, |
|||
{ |
|||
title: '报警名称', |
|||
dataIndex: 'alarmName', |
|||
width: 180, |
|||
fixed: 'left', |
|||
// 将 JSX 改为 h 函数调用
|
|||
customRender: ({ record }) => { |
|||
return h('div', [ |
|||
h('div', record.pointName), |
|||
h('div', { style: 'color: #999; font-size: 12px' }, record.pointId) |
|||
]); |
|||
}, |
|||
}, |
|||
{ |
|||
title: '单位', |
|||
dataIndex: 'unit', |
|||
width: 50, |
|||
fixed: 'left', |
|||
}, |
|||
{ |
|||
title: '测点值', |
|||
dataIndex: 'unit', |
|||
width: 150, |
|||
// 将 JSX 改为 h 函数调用
|
|||
customRender: ({ record }) => { |
|||
return h('div', [ |
|||
h('div', { style: 'color: #006400;font-weight:bold' },'实时值:'+record.pointValue), |
|||
h('div', { style: 'color: #0960BD;font-weight:bold' },'重构值:'+record.outputPointValue), |
|||
]); |
|||
}, |
|||
}, |
|||
{ |
|||
title: '偏差值', |
|||
dataIndex: 'biasValue', |
|||
width: 50 |
|||
}, |
|||
{ |
|||
title: '安全区间', |
|||
dataIndex: 'limit', |
|||
width: 100, |
|||
// 将 JSX 改为 h 函数调用
|
|||
customRender: ({ record }) => { |
|||
return h('div', [ |
|||
h('div', record.lowlimit), |
|||
h('div', record.uplimit), |
|||
]); |
|||
}, |
|||
|
|||
}, |
|||
{ |
|||
title: '模型实例名称', |
|||
dataIndex: 'mpName', |
|||
width: 150, |
|||
ellipsis: false, // ⭐ 关键
|
|||
|
|||
}, |
|||
{ |
|||
title: '预警时间', |
|||
dataIndex: 'createTime', |
|||
width: 150 |
|||
}, |
|||
{ |
|||
title: '持续时长', |
|||
dataIndex: 'timeDiffStr', |
|||
width: 90, |
|||
ellipsis: false, // ⭐ 关键
|
|||
|
|||
}, |
|||
{ |
|||
title: '告警级别', |
|||
dataIndex: 'alarmModelRuleName', |
|||
width: 80, |
|||
ellipsis: false, // ⭐ 关键
|
|||
|
|||
}, |
|||
{ |
|||
title: '专业', |
|||
dataIndex: 'systemName', |
|||
width: 100, |
|||
} |
|||
] |
|||
@ -0,0 +1,117 @@ |
|||
<script lang="ts" setup> |
|||
import { Switch } from 'ant-design-vue' |
|||
import { onMounted } from 'vue' |
|||
|
|||
import { useRoute } from 'vue-router' |
|||
import { columns, searchFormSchema } from './alarm.data' |
|||
// import UpdateModal from './UpdateModal.vue' |
|||
|
|||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
|||
import { getWarnPageReal, updateWarn } from '@/api/alert/warn' |
|||
import { useI18n } from '@/hooks/web/useI18n' |
|||
import { useMessage } from '@/hooks/web/useMessage' |
|||
import { IconEnum } from '@/enums/appEnum' |
|||
import { useModal } from '@/components/Modal' |
|||
|
|||
defineOptions({ name: 'Warn' }) |
|||
|
|||
const route = useRoute() |
|||
|
|||
const { createMessage } = useMessage() |
|||
const { t } = useI18n() |
|||
const [registerUpdateModal, { openModal: openUpdateModal }] = useModal() |
|||
const [registerTable, { getForm, reload, getDataSource, updateTableDataRecord }] = useTable({ |
|||
title: '预警测点列表', |
|||
api: getWarnPageReal, |
|||
rowKey: 'warnId', |
|||
immediate: true, |
|||
columns, |
|||
//这个要写,不然不生效 |
|||
useSearchForm: true, |
|||
formConfig: { |
|||
labelWidth: 80, |
|||
schemas: searchFormSchema, |
|||
showResetButton: false, |
|||
actionColOptions: { |
|||
span: 4, |
|||
style: { |
|||
marginLeft: '10px' |
|||
} |
|||
}, |
|||
}, |
|||
showTableSetting: true, |
|||
showIndexColumn: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
title: t('common.action'), |
|||
dataIndex: 'action', |
|||
fixed: 'right', |
|||
} |
|||
}) |
|||
|
|||
async function updateStatus(record) { |
|||
await updateWarn(record) |
|||
createMessage.success(t('common.saveSuccessText')) |
|||
console.log(record) |
|||
reload() |
|||
} |
|||
function handleWarnConfig(record: Recordable) { |
|||
openUpdateModal(true, { record, isUpdate: true }) |
|||
} |
|||
|
|||
onMounted(async () => { |
|||
const { setFieldsValue } = getForm() |
|||
await setFieldsValue({ system: null }) |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable"> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'action'"> |
|||
<TableAction |
|||
:actions="[ |
|||
|
|||
{ icon: IconEnum.WARN, label: t('action.warnConfig'), auth: 'run:instant:warnConfig', onClick: handleWarnConfig.bind(null, record) }, |
|||
|
|||
]" |
|||
/> |
|||
</template> |
|||
</template> |
|||
<template #warnStatus="{ record }"> |
|||
<Switch |
|||
v-model:checked="record.warnStatus" :checked-value="1" :un-checked-value="0" checked-children="是" |
|||
un-checked-children="否" @change="updateStatus(record)" |
|||
/> |
|||
</template> |
|||
<template #shortMessageOnOff="{ record }"> |
|||
<Switch |
|||
v-model:checked="record.shortMessageOnOff" :checked-value="1" :un-checked-value="0" checked-children="是" |
|||
un-checked-children="否" @change="updateStatus(record)" |
|||
/> |
|||
</template> |
|||
<template #gzpOnOff="{ record }"> |
|||
<Switch |
|||
v-model:checked="record.gzpOnOff" :checked-value="1" :un-checked-value="0" checked-children="是" |
|||
un-checked-children="否" @change="updateStatus(record)" |
|||
/> |
|||
</template> |
|||
<template #copyToDiagOnOff="{ record }"> |
|||
<Switch |
|||
v-model:checked="record.copyToDiagOnOff" :checked-value="1" :un-checked-value="0" checked-children="是" |
|||
un-checked-children="否" @change="updateStatus(record)" |
|||
/> |
|||
</template> |
|||
|
|||
<template #timeDurationThreshold="{ record }"> |
|||
{{ `${record.timeDurationThreshold}秒` }} |
|||
</template> |
|||
</BasicTable> |
|||
<!-- <UpdateModal @register="registerUpdateModal" @success="reload" />--> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="less" scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue