Browse Source

Merge pull request 'fix:糅合修改模块,复用组件' (#127) from dev-xjf into master

Reviewed-on: http://120.26.116.243:3000/root/alert-front/pulls/127
master
xiaojinfei 1 day ago
parent
commit
c6bc1d19bd
  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

@ -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

@ -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

@ -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

@ -6,7 +6,9 @@ import { useRoute } from 'vue-router'
import { columns } from './alarm.data' import { columns } from './alarm.data'
import { getSearchFormSchema } from '../../run/instant/instant.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 TrendModal from './TrendModal.vue'
import { BasicTable, TableAction, useTable } from '@/components/Table' import { BasicTable, TableAction, useTable } from '@/components/Table'
import {getWarnPageReal, updateWarn, warnTrendReqVO} from '@/api/alert/warn' import {getWarnPageReal, updateWarn, warnTrendReqVO} from '@/api/alert/warn'

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

@ -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

@ -69,7 +69,7 @@ async function handleQuery() {
// outPointInfo:"XN.M00010001R" // outPointInfo:"XN.M00010001R"
// unit:"" // unit:""
const {inputInfo, inputName, outPointInfo, ...rest} = pointInfo.value const {inputInfo, inputName, outPointInfo, ...rest} = pointInfo.value
// //
pointInfo.value = { pointInfo.value = {
...rest, ...rest,
pointId: inputInfo, pointId: inputInfo,
@ -82,7 +82,6 @@ async function handleQuery() {
submitButtonOptions: { loading: false }, submitButtonOptions: { loading: false },
}) })
pointLoading.value = false pointLoading.value = false
} }
} }
@ -107,7 +106,6 @@ const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data)
async function handleSubmit() { async function handleSubmit() {
try { try {
const values = await validate() const values = await validate()
setModalProps({confirmLoading: true}) setModalProps({confirmLoading: true})
if (unref(isUpdate)) { if (unref(isUpdate)) {

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

@ -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)
//inputNameinputName
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

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

Loading…
Cancel
Save