root
/
alert-front
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

fix:糅合修改模块，复用组件

pull/127/head
xiaojinfei 19 hours ago
parent
262c9eb641
commit
ec21379ba6
8 changed files with 168 additions and 632 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 85
      src/views/run/instant/warnConfig/UpdateModal.vue
  2. 121
      src/views/run/instant/warnConfig/index.vue
  3. 364
      src/views/run/instant/warnConfig/warn.data.ts
  4. 4
      src/views/warn/alarm/index.vue
  5. 58
      src/views/warn/config/CreateModal.vue
  6. 4
      src/views/warn/config/UpdateModal.vue
  7. 162
      src/views/warn/config/UpdateModal1.vue
  8. 2
      src/views/warn/config/warn.data.ts

85
src/views/run/instant/warnConfig/UpdateModal.vue
View File

@ -1,85 +0,0 @@
<script lang="ts" setup>
import { ref, unref } from 'vue'
import { updateWarnForm } from './warn.data'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { BasicForm, useForm } from '@/components/Form'
import { BasicModal, useModalInner } from '@/components/Modal'
import { getWarn, updateWarn } from '@/api/alert/warn/index'
defineOptions({ name: 'UpdateModal' })
const emit = defineEmits(['success', 'register'])
const { t } = useI18n()
const { createMessage } = useMessage()
const isUpdate = ref(true)
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 120,
baseColProps: { span: 24 },
schemas: updateWarnForm,
showActionButtonGroup: false,
actionColOptions: { span: 23 },
})
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields()
setModalProps({ useWrapper: true, minHeight: 180, confirmLoading: false })
// 如果是修改modal，则赋值给表单
isUpdate.value = !!data?.isUpdate
if (unref(isUpdate)) {
const res = await getWarn(data.record.warnId)
setFieldsValue({ ...res })
}
// // 获取下拉框的数据
// const versionData = await getModelVersionList({ modelId: data?.record.modelId })
// const versionList = [] as any
// // // 组名下拉框问题
// versionData.forEach((item) => {
// versionList.push({ label: item.version, value: item.id })
// })
// const calcGroupData = await getCalcGroupList({ unitId: data?.record.unitId })
// const calcGroupList = [] as any
// // // 组名下拉框问题
// calcGroupData.forEach((item) => {
// calcGroupList.push({ label: item.groupName, value: item.id })
// })
// // 将数据放入下拉框中
// updateSchema({
// field: 'modelVersionId',
// componentProps: {
// options: versionList,
// },
// })
// updateSchema({
// field: 'calcGroup',
// componentProps: {
// options: calcGroupList,
// },
// })
})
async function handleSubmit() {
try {
const values = await validate()
setModalProps({ confirmLoading: true })
if (unref(isUpdate))
await updateWarn(values)
closeModal()
emit('success')
createMessage.success(t('common.saveSuccessText'))
}
finally {
setModalProps({ confirmLoading: false })
}
}
</script>
<template>
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>

121
src/views/run/instant/warnConfig/index.vue
View File

@ -1,121 +0,0 @@
<script lang="ts" setup>
import { Switch } from 'ant-design-vue'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { columns, searchFormSchema } from './warn.data'
import UpdateModal from './UpdateModal.vue'
import { BasicTable, TableAction, useTable } from '@/components/Table'
import { getWarnPage, 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: getWarnPage,
rowKey: 'warnId',
immediate: true,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
showResetButton: false,
showSubmitButton: false,
actionColOptions: {
span: 2,
},
},
beforeFetch: (params) => {
// 查询前的事件增加默认值，然后设置到表单值中
params.mpId = route.query.mpId
// getForm().setFieldsValue(params)
return params
},
useSearchForm: !route.query.mpId,
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 () => {
})
</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'), 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>

364
src/views/run/instant/warnConfig/warn.data.ts
View File

@ -1,364 +0,0 @@
import type { BasicColumn, FormSchema } from '@/components/Table'
import {getAlarmLevelList} from "@/api/alert/warn";
const alarmLevelList = await getAlarmLevelList();
console.log(alarmLevelList)
export const columns: BasicColumn[] = [
{
title: '编号',
dataIndex: 'warnId',
width: 80,
fixed: 'left',
},
{
title: '点号',
dataIndex: 'pointId',
width: 150,
fixed: 'left',
},
{
title: '描述',
dataIndex: 'pointName',
width: 200,
},
{
title: '单位',
dataIndex: 'unit',
width: 80,
},
{
title: '上限',
dataIndex: 'uplimit',
width: 80,
},
{
title: '下限',
dataIndex: 'lowlimit',
width: 80,
},
{
title: '实例名称',
dataIndex: 'mpName',
width: 250,
fixed: 'left',
},
{
title: '专业',
dataIndex: 'systemName',
width: 200,
},
{
title: '报警表达式',
dataIndex: 'equation',
width: 200,
},
{
title: '输出点号',
dataIndex: 'outputPoint',
width: 200,
},
{
title: '报警类型',
dataIndex: 'alarmModelRuleName',
width: 120,
},
{
title: '报警限制',
dataIndex: 'warnConstraintName',
width: 120,
},
{
title: '告警延时',
dataIndex: 'timeDurationThreshold',
width: 100,
slots: { customRender: 'timeDurationThreshold' },
},
{
title: '短信告警',
dataIndex: 'shortMessageOnOff',
width: 100,
slots: { customRender: 'shortMessageOnOff' },
},
{
title: '光字牌告警',
dataIndex: 'gzpOnOff',
width: 100,
slots: { customRender: 'gzpOnOff' },
},
{
title: '推送诊断',
dataIndex: 'copyToDiagOnOff',
width: 100,
slots: { customRender: 'copyToDiagOnOff' },
},
{
title: '已有实例数量',
dataIndex: 'number',
width: 100,
},
{
title: '参与报警',
dataIndex: 'warnStatus',
width: 100,
slots: { customRender: 'warnStatus' },
fixed: 'right',
},
// {
// title: '实时值',
// dataIndex: 'value',
// width: 90,
// className: 'value',
// slots: { customRender: 'value' },
// }
]
export const searchFormSchema: FormSchema[] = [
{
label: '模型实例id',
field: 'mpId',
component: 'Input',
defaultValue: '',
required: true,
show: false,
colProps: { span: 8 },
},
]
export const updateWarnForm: FormSchema[] = [
{
label: '编号',
field: 'warnId',
component: 'Input',
required: true,
show: false,
},
{
label: '残差上限',
field: 'uplimit',
component: 'Input',
required: true,
componentProps: {
placeholder: '请输入残差上限',
},
rules: [{ required: true, message: '请输入残差上限' }],
colProps: {
span: 12,
},
},
{
label: '残差下限',
field: 'lowlimit',
component: 'Input',
required: true,
componentProps: {
placeholder: '请输入残差下限',
},
rules: [{ required: true, message: '请输入残差下限' }],
colProps: {
span: 12,
},
},
{
label: '延时告警',
field: 'timeDurationThreshold',
component: 'Input',
required: true,
componentProps: {
placeholder: '请输入延时告警',
},
rules: [{ required: true, message: '请输入延时告警' }],
colProps: {
span: 12,
},
},
{
label: '告警等级',
field: 'alarmLevel',
component: 'Select',
componentProps: {
options: alarmLevelList,
fieldNames: {
label: 'alarmLevelName',
value: 'alarmLevel',
},
},
required: true,
colProps: {
span: 12,
},
},
{
label: '光字牌名称',
field: 'gzpName',
component: 'Input',
required: true,
colProps: {
span: 24,
},
},
{
label: '光字牌状态',
field: 'gzpOnOff',
component: 'RadioGroup',
componentProps: {
// 数据源1：固定数据
options: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
},
required: true,
colProps: {
span: 12,
},
},
{
label: '短信推送',
field: 'shortMessageOnOff',
component: 'RadioGroup',
componentProps: {
options: [{ label: '是', value: 1 }, { label: '否', value: 0 }],
},
required: true,
colProps: {
span: 12,
},
},
{
label: '推送诊断',
field: 'copyToDiagOnOff',
component: 'RadioGroup',
componentProps: {
options: [{ label: '是', value: 1 }, { label: '否', value: 0 }],
},
required: true,
colProps: {
span: 12,
},
},
{
label: '告警限制名称',
field: 'warnConstraintName',
component: 'Input',
required: true,
colProps: {
span: 12,
},
},
{
label: '告警限制条件',
field: 'warnConstraint',
component: 'Input',
required: true,
colProps: {
span: 24,
},
},
]
export const InstantBasicInfo: any[] = [
{
label: '实例名称',
field: 'mpName',
},
{
label: '创建人',
field: 'creator',
},
{
label: '创建时间',
field: 'createTime',
},
{
label: '最近修改人',
field: 'updater',
},
{
label: '最近修改时间',
field: 'updateTime',
},
{
label: '算法',
field: 'algorithm_shortname',
},
// modelInfo中的字段
{
label: '训练采样间隔',
field: 'sampling',
},
{
label: '参数个数',
field: 'pointInfo',
},
{
label: '最小主元贡献率',
field: 'rate',
},
{
label: '主元个数',
field: 'principal',
},
{
label: '模型精度',
field: 'rate',
},
]
export const detailColumns: BasicColumn[] = [
{
title: '编号',
dataIndex: 'id',
width: 80,
fixed: 'left',
},
{
title: '测点编码',
dataIndex: 'inputInfo',
width: 150,
fixed: 'left',
},
{
title: '测点名称',
dataIndex: 'inputName',
width: 200,
fixed: 'left',
},
{
title: '单位',
dataIndex: 'unit',
width: 50,
fixed: 'left',
},
{
title: '重构值测点',
dataIndex: 'outPointInfo',
width: 200,
},
{
title: '偏差值测点',
dataIndex: 'biasPointInfo',
width: 200,
},
{
title: '错误状态测点',
dataIndex: 'faultVariablePointInfo',
width: 200,
},
]

4
src/views/warn/alarm/index.vue
View File

@ -6,7 +6,9 @@ import { useRoute } from 'vue-router'
import { columns } from './alarm.data'
import { getSearchFormSchema } from '../../run/instant/instant.data'
import UpdateModal from '../../run/instant/warnConfig/UpdateModal.vue'
// import UpdateModal from '../../run/instant/warnConfig/UpdateModal.vue'
import UpdateModal from '@/views/warn/config/UpdateModal.vue'
import TrendModal from './TrendModal.vue'
import { BasicTable, TableAction, useTable } from '@/components/Table'
import {getWarnPageReal, updateWarn, warnTrendReqVO} from '@/api/alert/warn'

58
src/views/warn/config/CreateModal.vue
View File

@ -1,58 +0,0 @@
<script lang="ts" setup>
import { ref, unref } from 'vue'
import { updateWarnForm } from './warn.data'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { BasicForm, useForm } from '@/components/Form'
import { BasicModal, useModalInner } from '@/components/Modal'
import { getWarn, updateWarn } from '@/api/alert/warn'
defineOptions({ name: 'UpdateModal' })
const emit = defineEmits(['success', 'register'])
const { t } = useI18n()
const { createMessage } = useMessage()
const isUpdate = ref(true)
const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
labelWidth: 120,
baseColProps: { span: 24 },
schemas: updateWarnForm,
showActionButtonGroup: false,
actionColOptions: { span: 23 },
})
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields()
setModalProps({ useWrapper: true, minHeight: 180, confirmLoading: false })
// 如果是修改modal，则赋值给表单
isUpdate.value = !!data?.isUpdate
if (unref(isUpdate)) {
const res = await getWarn(data.record.warnId)
setFieldsValue({ ...res })
}
})
async function handleSubmit() {
try {
const values = await validate()
setModalProps({ confirmLoading: true })
if (unref(isUpdate))
await updateWarn(values)
closeModal()
emit('success')
createMessage.success(t('common.saveSuccessText'))
}
finally {
setModalProps({ confirmLoading: false })
}
}
</script>
<template>
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')" @register="registerModal" @ok="handleSubmit">
<BasicForm @register="registerForm" />
</BasicModal>
</template>

4
src/views/warn/config/UpdateModal.vue
View File

@ -69,7 +69,7 @@ async function handleQuery() {
// outPointInfo:"XN.M00010001R"
// unit:""
const {inputInfo, inputName, outPointInfo, ...rest} = pointInfo.value
//字段映射，后端字段和前端字段不一致，需要映射一下
//字段映射，后端字段和前端字段不一致，需要映射一下
pointInfo.value = {
...rest,
pointId: inputInfo,
@ -82,7 +82,6 @@ async function handleQuery() {
submitButtonOptions: { loading: false },
})
pointLoading.value = false
}
}
@ -107,7 +106,6 @@ const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data)
async function handleSubmit() {
try {
const values = await validate()
setModalProps({confirmLoading: true})
if (unref(isUpdate)) {

162
src/views/warn/config/UpdateModal1.vue
View File

@ -0,0 +1,162 @@
<script lang="ts" setup>
import {ref, unref, nextTick} from 'vue'
import {updateWarnForm, InstantForm} from './warn.data'
import {useI18n} from '@/hooks/web/useI18n'
import {useMessage} from '@/hooks/web/useMessage'
import {BasicForm, useForm} from '@/components/Form'
import {BasicModal, useModalInner} from '@/components/Modal'
import {getWarn, createWarn, updateWarn} from '@/api/alert/warn'
import {getSearchFormSchema} from '@/views/run/instant/instant.data'
import {Divider, Descriptions, DescriptionsItem} from 'ant-design-vue'
import {getInstantPoint} from "@/api/alert/run/instant";
defineOptions({name: 'UpdateModal'})
const emit = defineEmits(['success', 'register'])
const {t} = useI18n()
const {createMessage} = useMessage()
const isUpdate = ref(true)
const pointLoading = ref(true)
// 新增的时候增加查询表单
const [registerQueryForm, {
setProps,
setFieldsValue: setQueryFields,
resetFields: resetQueryFields,
validate: validateQueryForm,
}] = useForm({
labelWidth: 80,
baseColProps: {span: 24},
schemas: InstantForm,
showResetButton: false,
showSubmitButton: true,
showActionButtonGroup: true,
actionColOptions: {span: 2, style: {textAlign: 'left', marginLeft: '10px'}},
})
const [registerForm, {setFieldsValue, getFieldsValue,resetFields, validate}] = useForm({
labelWidth: 120,
baseColProps: {span: 24},
schemas: updateWarnForm,
showActionButtonGroup: false,
actionColOptions: {span: 23},
})
const pointInfo = ref<any>();
function getPointInfo(list, inputName) {
if (!Array.isArray(list) || !inputName) return undefined
return list.find(item => item.inputName === inputName)
}
async function handleQuery() {
setProps({
submitButtonOptions: { loading: true },
})
try {
//先获取表单数据
const queryValues = await validateQueryForm()
pointLoading.value = true
//查询各种点号信息
const res = await getInstantPoint(queryValues.mpId)
//从结果中筛选inputName等于选中的inputName的项
pointInfo.value = getPointInfo(res, queryValues?.inputName)
// biasPointInfo:"XN.M00010001B"
// faultVariablePointInfo:"XN.M00010001F"
// id:1
// inputInfo:"HN_01_1RRA010MT_AVALUE"
// inputName:"HN_01_1RRA010MT_AVALUE"
// outPointInfo:"XN.M00010001R"
// unit:""
const {inputInfo, inputName, outPointInfo, ...rest} = pointInfo.value
//字段映射，后端字段和前端字段不一致，需要映射一下
pointInfo.value = {
...rest,
pointId: inputInfo,
pointName: inputName,
outputPoint: outPointInfo,
}
}
finally {
setProps({
submitButtonOptions: { loading: false },
})
pointLoading.value = false
}
}
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
resetFields()
setModalProps({width: 800, useWrapper: true, minHeight: 180, confirmLoading: false})
// 如果是修改modal，则赋值给表单
isUpdate.value = !!data?.isUpdate
if (unref(isUpdate)) {
const res = await getWarn(data.record.warnId)
setFieldsValue({...res})
}
//如果是新增
else {
// 2. 等待下一次 DOM 更新（确保表单已渲染）
await nextTick();
//查询各种点号信息
await handleQuery()
}
})
async function handleSubmit() {
try {
const values = await validate()
setModalProps({confirmLoading: true})
if (unref(isUpdate)) {
await updateWarn(values)
closeModal()
emit('success')
createMessage.success(t('common.saveSuccessText'))
} else {
// 新增预警
//先拿查询表单数据
const queryValues = await validateQueryForm()
// ⭐ 条件校验（重点）
if (queryValues.inputName !== pointInfo.value.pointName) {
createMessage.error('请确保点号信息与查询结果一致,如果不一致请重新查询')
return
}
// 再拿输入的数据
const values = await validate()
// 合并三个数据
const mergedValues = {...queryValues, ...values, ...pointInfo.value}
//构造报警表达式
mergedValues.equation = `[${mergedValues.biasPointInfo}]>UPLIMIT or [${mergedValues.biasPointInfo}]<LOWLIMIT`
await createWarn(mergedValues)
closeModal()
emit('success')
createMessage.success(t('common.saveSuccessText'))
}
} finally {
setModalProps({confirmLoading: false})
}
}
</script>
<template>
<BasicModal v-bind="$attrs" :title="isUpdate ? t('action.edit') : t('action.create')"
@register="registerModal" @ok="handleSubmit">
<!--查询表单-->
<BasicForm v-if="!isUpdate" @register="registerQueryForm" @submit="handleQuery"/>
<Divider v-if="!isUpdate" style="margin-top:0px"/>
<!--查询出来的结果-->
<spin :spinning="pointLoading">
<Descriptions v-if="!isUpdate" bordered size="small" :column="2">
<DescriptionsItem label="测点名">{{ pointInfo?.pointName }}</DescriptionsItem>
<DescriptionsItem label="测点点号">{{ pointInfo?.pointId }}</DescriptionsItem>
<DescriptionsItem label="重构点名">{{ pointInfo?.pointName + "-重构值" }}</DescriptionsItem>
<DescriptionsItem label="重构点号">{{ pointInfo?.outputPoint }}</DescriptionsItem>
<DescriptionsItem label="残差点名">{{ pointInfo?.pointName + "-偏差值" }}</DescriptionsItem>
<DescriptionsItem label="残差点号">{{ pointInfo?.biasPointInfo }}</DescriptionsItem>
</Descriptions>
</spin>
<Divider v-if="!isUpdate" style="margin-top:10px"/>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>

2
src/views/warn/config/warn.data.ts
View File

@ -377,6 +377,8 @@ export const detailColumns: BasicColumn[] = [
},
]
//下面是获取一张表中的unit\system\type\mp\point的信息
interface SelectItem {
unitId: number
unitName: string

Write Preview
Loading…
Cancel
Save